/*
 * ═══════════════════════════════════════════════════════════════════════════
 * SITE PUBLIC — CFI Plasturgie
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Feuille dédiée aux pages visibles de tous : accueil, catalogue, fiche
 * formation, agenda. Elle est séparée de app.css parce que les deux servent
 * deux métiers différents — convaincre en trente secondes d'un côté, faire
 * travailler cent fois par jour de l'autre.
 *
 * Couleurs : celles de plasturgietunisie.com. Le bleu #1f77bb et le vert
 * #1c984e sont ceux du logo CFI ; le jaune #ffd45c est l'aplat décoratif du
 * thème. Les seules valeurs ajoutées sont des assombrissements du bleu de la
 * charte, pour disposer d'un fond profond qui reste de la même famille.
 *
 * Propriétés CSS classiques (margin-top, border-left…) et non logiques : c'est
 * la convention retenue ici. Le jour où l'arabe arrivera, cette feuille
 * demandera une passe miroir — c'est un coût assumé, pas un oubli.
 */

:root {
  /* ── Palette du site principal ─────────────────────────────────────────── */
  --s-bleu:          #1f77bb;
  --s-bleu-fonce:    #17598c;
  --s-bleu-nuit:     #0f3a5c;   /* bleu de la charte assombri : fonds profonds */
  --s-bleu-encre:    #0a2942;
  --s-vert:          #1c984e;
  --s-vert-clair:    #00bb4c;
  --s-jaune:         #ffd45c;
  --s-turquoise:     #3bf0dc;

  --s-texte:         #0f1c26;
  --s-texte-doux:    #55636e;
  --s-blanc:         #ffffff;
  --s-nuage:         #f5f8fb;   /* fond de section, bleuté */
  --s-nuage-fonce:   #e8eff6;
  --s-trait:         #dde6ee;

  /* ── Formes ───────────────────────────────────────────────────────────── */
  --s-rayon:         14px;
  --s-rayon-petit:   10px;
  --s-rayon-pilule:  999px;

  --s-ombre-douce:   0 1px 2px rgba(15, 58, 92, .05), 0 8px 24px rgba(15, 58, 92, .06);
  --s-ombre-portee:  0 2px 4px rgba(15, 58, 92, .06), 0 16px 40px rgba(15, 58, 92, .10);

  /* ── Rythme ───────────────────────────────────────────────────────────── */
  --s-large:         1180px;
  --s-section:       clamp(56px, 7vw, 104px);
}

/* ════════════════════════════════════════════════════════ Fondations ════ */

.site *,
.site *::before,
.site *::after { box-sizing: border-box; }

/* Le site public ne charge PAS app.css : il lui faut donc son propre socle.
   Sans ces quelques lignes, la page hérite des défauts du navigateur — Times,
   16 px, marges natives — et tout l'alignement part de travers. */
body.site {
  margin: 0;
  font-family: var(--cfi-police-texte), system-ui, -apple-system, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--s-texte);
  background: var(--s-blanc);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site img, .site svg { max-width: 100%; }
.site img { height: auto; }

.site :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--s-vert);
  outline-offset: 2px;
  border-radius: 6px;
}

.site ::selection { background: var(--s-jaune); color: #23303a; }

.site h1, .site h2, .site h3, .site h4 {
  font-family: var(--cfi-police-titre);
  color: var(--s-texte);
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-synthesis: none;
  margin: 0 0 16px;
  text-wrap: balance;
}

.site p { margin: 0 0 16px; }
.site p:last-child { margin-bottom: 0; }

.site a { color: var(--s-bleu); }
.site a:hover { color: var(--s-vert); }

.site-large {
  width: 100%;
  max-width: var(--s-large);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 900px) {
  .site-large { padding: 0 32px; }
}

.site-section { padding: var(--s-section) 0; }
.site-section--nuage { background: var(--s-nuage); }
.site-section--nuit { background: var(--s-bleu-nuit); color: #cfe0ee; }
.site-section--nuit h2, .site-section--nuit h3 { color: var(--s-blanc); }

/* Un intertitre centré : surtitre, titre, phrase d'explication. C'est la
   structure que suit chaque section de la page d'accueil. */
.site-intertitre { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.site-intertitre p { color: var(--s-texte-doux); font-size: 18px; margin: 0; }
.site-intertitre .site-etiquette { text-align: center; }
.site-section--nuit .site-intertitre p { color: #a9c4da; }

/* Étiquette de section : de la typographie, pas un composant décoré.
   Capitales, interlettrage ouvert, vert de la charte. Rien à dessiner. */
.site-etiquette {
  display: block;
  margin-bottom: 14px;
  color: var(--s-vert);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-section--nuit .site-etiquette { color: #7fd9a4; }

.site-titre-section { font-size: clamp(30px, 3.4vw, 42px); }

/* ═══════════════════════════════════════════════════════════ Boutons ════ */

.site-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--s-rayon-pilule);
  font-family: var(--cfi-police-texte);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.site-bouton:hover { transform: translateY(-1px); }

/* ATTENTION à la spécificité, c'est ici que ça s'est joué : « .site a » vaut
   (0,1,1) et l'emportait sur « .site-bouton--plein » (0,1,0). Résultat : texte
   bleu sur fond bleu, boutons illisibles sur tout le site. Les variantes sont
   donc qualifiées par l'élément — a.xxx, button.xxx — pour repasser devant. */
.site a.site-bouton--plein,
.site button.site-bouton--plein,
.site .site-bouton--plein {
  background: var(--s-bleu);
  border-color: var(--s-bleu);
  color: var(--s-blanc);
}
.site a.site-bouton--plein:hover,
.site button.site-bouton--plein:hover {
  background: var(--s-bleu-fonce);
  border-color: var(--s-bleu-fonce);
  color: var(--s-blanc);
}

.site a.site-bouton--contour,
.site button.site-bouton--contour,
.site .site-bouton--contour {
  background: var(--s-blanc);
  border-color: var(--s-trait);
  color: var(--s-texte);
}
.site a.site-bouton--contour:hover,
.site button.site-bouton--contour:hover {
  border-color: var(--s-bleu);
  color: var(--s-bleu);
}

.site a.site-bouton--vert,
.site button.site-bouton--vert {
  background: var(--s-vert);
  border-color: var(--s-vert);
  color: var(--s-blanc);
}
.site a.site-bouton--vert:hover { background: #16803f; border-color: #16803f; color: var(--s-blanc); }

.site-section--nuit a.site-bouton--contour,
.site-appel a.site-bouton--contour {
  background: transparent;
  border-color: rgba(255, 255, 255, .38);
  color: var(--s-blanc);
}
.site-section--nuit a.site-bouton--contour:hover,
.site-appel a.site-bouton--contour:hover { border-color: var(--s-blanc); color: var(--s-blanc); }

.site-appel a.site-bouton--plein {
  background: var(--s-jaune);
  border-color: var(--s-jaune);
  color: #23303a;
}
.site-appel a.site-bouton--plein:hover { background: var(--s-blanc); border-color: var(--s-blanc); color: #23303a; }

.site-bouton--large { width: 100%; }

/* ══════════════════════════════════════════════════════════ En-tête ════ */

.site-entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--s-trait);
}
.site-entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}
.site-entete__logo img { display: block; height: 46px; width: auto; }

.site-menu { display: flex; align-items: center; gap: 28px; }
.site-menu a {
  display: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--s-texte);
  text-decoration: none;
}
.site-menu a:hover { color: var(--s-bleu); }
.site-menu a[aria-current='page'] { color: var(--s-bleu); }
.site-menu .site-bouton { display: inline-flex; min-height: 44px; padding: 0 20px; font-size: 15px; }

@media (min-width: 860px) {
  .site-menu a { display: inline-block; }
}

/* ════════════════════════════════════════════════════════════ Héros ════ */

/* Composition centrée, dans l'esprit des plateformes SaaS : surtitre, titre
   très large, phrase de valeur, deux actions, puis la preuve institutionnelle.
   Le halo derrière le titre est un aplat radial très dilué — il donne de la
   profondeur sans introduire de dégradé visible. */
.site-heros {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 72px);
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(59, 240, 220, .13) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(50% 60% at 85% 15%, rgba(31, 119, 187, .10) 0%, rgba(255,255,255,0) 70%),
    var(--s-blanc);
  text-align: center;
}

.site-heros__contenu { max-width: 860px; margin: 0 auto; }

.site-heros__titre {
  font-size: clamp(38px, 5.6vw, 66px);
  line-height: 1.03;
  margin-bottom: 22px;
}
/* Le mot souligné l'est par un trait vert épais placé sous la ligne de base,
   pas par un surlignage : le texte reste noir sur blanc, donc lisible. */
.site-heros__titre span {
  position: relative;
  white-space: nowrap;
}
.site-heros__titre span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: .06em;
  height: .16em;
  background: var(--s-jaune);
  border-radius: 3px;
  z-index: -1;
}

.site-heros__phrase {
  max-width: 640px;
  margin: 0 auto 32px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--s-texte-doux);
}

.site-heros__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
}

.site-heros__mention {
  margin-top: 18px;
  font-size: 14px;
  color: var(--s-texte-doux);
}

/* ── Bandeau institutionnel ─────────────────────────────────────────────── */

/* L'équivalent du bandeau clients d'une plateforme SaaS. Ici, ce ne sont pas
   des clients mais les institutions qui portent le dispositif — c'est
   exactement la même fonction : dire à qui on a affaire, sans une phrase. */
.site-institutions { padding: 40px 0 8px; }
.site-institutions__titre {
  margin: 0 0 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--s-texte-doux);
}
.site-institutions__bande {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
}
.site-institutions__bande img {
  height: 52px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  /* Les logos institutionnels sont de qualités et de fonds très différents.
     Une désaturation légère au repos les fait cohabiter sans les dénaturer ;
     ils reprennent leurs couleurs au survol. */
  filter: grayscale(1);
  opacity: .62;
  transition: filter .2s ease, opacity .2s ease;
}
.site-institutions__bande a:hover img,
.site-institutions__bande img:hover { filter: grayscale(0); opacity: 1; }

@media (max-width: 640px) {
  .site-institutions__bande img { height: 38px; max-width: 130px; }
}

/* ════════════════════════════════════════════════════════════ Cartes ════ */

.site-grille { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: stretch; }
.site-grille > * { min-width: 0; }
@media (min-width: 700px)  { .site-grille--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .site-grille--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .site-grille--3 { grid-template-columns: repeat(3, 1fr); } }

.site-carte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: var(--s-blanc);
  border: 1px solid var(--s-trait);
  border-radius: var(--s-rayon);
  box-shadow: var(--s-ombre-douce);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.site-carte--lien { position: relative; }
.site-carte--lien:hover {
  border-color: rgba(31, 119, 187, .35);
  box-shadow: var(--s-ombre-portee);
  transform: translateY(-2px);
}
.site-carte--lien a::after { content: ''; position: absolute; inset: 0; }
.site-carte h3 { margin: 0; font-size: 20px; }
.site-carte h3 a { color: inherit; text-decoration: none; }
.site-carte p { color: var(--s-texte-doux); margin: 0; }

/* Pastille d'icône : un carré arrondi teinté, l'icône en trait à l'intérieur. */
.site-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(31, 119, 187, .10);
  color: var(--s-bleu);
  flex: none;
}
.site-icone svg { width: 22px; height: 22px; }
.site-icone--vert { background: rgba(28, 152, 78, .12); color: var(--s-vert); }
.site-icone--jaune { background: rgba(255, 212, 92, .30); color: #8a5a00; }

/* ── Carte formation ────────────────────────────────────────────────────── */

.site-formation__code {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--s-bleu);
  font-variant-numeric: tabular-nums;
}
.site-formation__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--s-trait);
  font-size: 14px;
  color: var(--s-texte-doux);
}

.site-jeton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--s-rayon-pilule);
  background: var(--s-nuage-fonce);
  color: var(--s-texte-doux);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.site-jeton--ouvert { background: rgba(28, 152, 78, .12); color: #15733c; }
.site-jeton--tendu  { background: var(--s-jaune); color: #4a3500; }
.site-jeton--complet{ background: rgba(229, 0, 81, .10); color: #b3123c; }
.site-jeton--bleu   { background: rgba(31, 119, 187, .10); color: var(--s-bleu-fonce); }

/* ── Filtres ────────────────────────────────────────────────────────────── */

.site-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.site-filtre {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--s-trait);
  border-radius: var(--s-rayon-pilule);
  background: var(--s-blanc);
  color: var(--s-texte);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.site-filtre:hover { border-color: var(--s-bleu); color: var(--s-bleu); }
.site-filtre[aria-current='true'] {
  background: var(--s-bleu);
  border-color: var(--s-bleu);
  color: var(--s-blanc);
}

/* ══════════════════════════════════════════════ Section en deux colonnes ═ */

.site-duo { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) {
  .site-duo { grid-template-columns: repeat(2, 1fr); gap: 64px; }
  .site-duo--inverse > :first-child { order: 2; }
}

.site-liste-check { list-style: none; margin: 24px 0 0; padding: 0; }
.site-liste-check li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 16px;
  color: var(--s-texte-doux);
}
.site-liste-check li strong { color: var(--s-texte); }
.site-liste-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(28, 152, 78, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c984e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Chiffres clés, sur fond profond. */
.site-compteurs { display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .site-compteurs { grid-template-columns: repeat(4, 1fr); } }
.site-compteurs__valeur {
  display: block;
  font-family: var(--cfi-police-titre);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--s-blanc);
}
.site-compteurs__libelle { display: block; margin-top: 8px; font-size: 15px; color: #a9c4da; }

/* ══════════════════════════════════════════════════ Appel à l'action ════ */

.site-appel {
  padding: clamp(40px, 5vw, 64px);
  border-radius: 22px;
  background: var(--s-bleu-nuit);
  color: #cfe0ee;
  text-align: center;
}
.site-appel h2 { color: var(--s-blanc); font-size: clamp(26px, 3vw, 38px); }
.site-appel p { max-width: 620px; margin: 0 auto 28px; font-size: 17px; }
.site-appel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ════════════════════════════════════════════════════════ Pied de page ══ */

.site-pied {
  margin-top: clamp(64px, 8vw, 112px);
  padding: 64px 0 36px;
  background: var(--s-nuage);
  border-top: 1px solid var(--s-trait);
}
/* Une section colorée touche déjà le pied : inutile d'y ajouter du vide. */
.site-section--nuage + .site-pied,
.site-section--nuit + .site-pied { margin-top: 0; }
.site-pied__colonnes { display: grid; gap: 32px; grid-template-columns: 1fr; margin-bottom: 44px; }
@media (min-width: 760px) { .site-pied__colonnes { grid-template-columns: repeat(3, 1fr); } }
.site-pied h2 { font-size: 15px; margin-bottom: 14px; }
.site-pied ul { list-style: none; margin: 0; padding: 0; }
.site-pied li { margin-bottom: 10px; }
.site-pied a { color: var(--s-texte-doux); text-decoration: none; font-size: 15px; }
.site-pied a:hover { color: var(--s-bleu); }
.site-pied p { color: var(--s-texte-doux); font-size: 15px; }

/* La bande de logos institutionnels, reprise du site principal. Ils ne sont
   pas désaturés ici : dans un pied de page, ils tiennent lieu de signature
   officielle du dispositif. */
.site-pied__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  padding: 32px 0;
  border-top: 1px solid var(--s-trait);
}
.site-pied__logos img { display: block; height: 54px; width: auto; max-width: 200px; object-fit: contain; }
.site-pied__logos img.est-petit { height: 44px; max-width: 120px; }
@media (max-width: 640px) {
  .site-pied__logos img { height: 40px; max-width: 140px; }
  .site-pied__logos img.est-petit { height: 34px; max-width: 100px; }
}

.site-pied__bas {
  padding-top: 24px;
  border-top: 1px solid var(--s-trait);
  text-align: center;
  font-size: 14px;
  color: var(--s-texte-doux);
}

/* ═══════════════════════════════════════════ Fiche formation détaillée ══ */

.site-fildariane { margin: 0 0 20px; font-size: 14px; color: var(--s-texte-doux); }
.site-fildariane ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.site-fildariane li + li::before { content: '/'; margin-right: 8px; color: var(--s-trait); }
.site-fildariane a { color: var(--s-texte-doux); }

.site-tete { padding: 48px 0 40px; border-bottom: 1px solid var(--s-trait); margin-bottom: 48px; }
.site-tete h1 { font-size: clamp(30px, 4vw, 46px); }
.site-tete__phrase { max-width: 700px; font-size: 18px; color: var(--s-texte-doux); margin: 0; }

.site-detail { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1000px) {
  .site-detail { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; }
  .site-detail__cote { position: sticky; top: 100px; }
}
.site-detail__corps > section { margin-bottom: 56px; }
.site-detail__corps h2 { font-size: 28px; margin-bottom: 20px; }
.site-detail__corps h3 { font-size: 19px; }

.site-encadre {
  padding: 30px;
  background: var(--s-blanc);
  border: 1px solid var(--s-trait);
  border-radius: var(--s-rayon);
  box-shadow: var(--s-ombre-portee);
}
.site-encadre dl { margin: 0; }
.site-encadre dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--s-texte-doux);
  margin-bottom: 4px;
}
.site-encadre dd { margin: 0 0 20px; font-size: 15px; }
.site-encadre dd:last-of-type { margin-bottom: 0; }

.site-prix { font-family: var(--cfi-police-titre); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.site-prix small { display: block; margin-top: 6px; font-family: var(--cfi-police-texte); font-size: 14px; font-weight: 600; color: var(--s-vert); }

/* Programme numéroté : la pastille porte le numéro, le trait vertical relie
   les étapes. On lit un déroulé, pas une liste à puces. */
.site-programme { counter-reset: etape; list-style: none; margin: 0; padding: 0; }
.site-programme > li {
  counter-increment: etape;
  position: relative;
  padding: 0 0 28px 56px;
}
.site-programme > li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(31, 119, 187, .10);
  color: var(--s-bleu-fonce);
  font-family: var(--cfi-police-titre);
  font-size: 15px;
  font-weight: 700;
}
.site-programme > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 42px;
  bottom: 8px;
  width: 2px;
  background: var(--s-trait);
}
.site-programme h3 { margin-bottom: 10px; }
.site-programme ul { margin: 0; padding-left: 20px; color: var(--s-texte-doux); }
.site-programme li li { margin-bottom: 6px; }

.site-objectifs { list-style: none; margin: 0; padding: 0; }
.site-objectifs li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
}
.site-objectifs li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(31, 119, 187, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f77bb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ══════════════════════════════════════════════════════════ Tableaux ════ */

.site-tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.site-tableau thead th {
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--s-texte-doux);
  background: var(--s-nuage);
  border-bottom: 1px solid var(--s-trait);
  white-space: nowrap;
}
.site-tableau thead th:first-child { border-top-left-radius: var(--s-rayon-petit); }
.site-tableau thead th:last-child { border-top-right-radius: var(--s-rayon-petit); }
.site-tableau td { padding: 18px 16px; border-bottom: 1px solid var(--s-trait); vertical-align: middle; }
/* La colonne d'action est la dernière : elle se cale à droite et ne se coupe pas. */
.site-tableau td:last-child { text-align: right; white-space: nowrap; }
@media (max-width: 860px) {
  .site-tableau td:last-child { text-align: left; }
}
.site-tableau tbody tr:hover td { background: var(--s-nuage); }
.site-tableau .est-code { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

@media (max-width: 860px) {
  .site-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .site-tableau tr {
    display: block;
    margin-bottom: 16px;
    padding: 20px;
    background: var(--s-blanc);
    border: 1px solid var(--s-trait);
    border-radius: var(--s-rayon);
    box-shadow: var(--s-ombre-douce);
  }
  .site-tableau td { display: flex; gap: 14px; padding: 8px 0; border: 0; }
  .site-tableau td::before {
    content: attr(data-colonne);
    flex: 0 0 110px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--s-texte-doux);
  }
  .site-tableau td:empty { display: none; }
  .site-tableau tbody tr:hover td { background: transparent; }
}

/* ═══════════════════════════════════════════════════════════ État vide ══ */

.site-vide {
  padding: 56px 32px;
  text-align: center;
  background: var(--s-nuage);
  border-radius: var(--s-rayon);
}
.site-vide p { max-width: 560px; margin: 0 auto 16px; color: var(--s-texte-doux); }
.site-vide p strong { color: var(--s-texte); }

/* ══════════════════════════════════════════════════════════ Utilitaires ═ */

.site-centre { text-align: center; }
.site-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.site-actions--centre { justify-content: center; }
.site-mention { font-size: 14px; color: var(--s-texte-doux); }
.site-invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .site-bouton:hover, .site-carte--lien:hover { transform: none; }
}

/* ══════════════════════════════════ Formulaire de demande publique ═══════ */

/* Le visiteur sans compte demande son inscription ici. Colonne unique, champs
   pleine largeur : c'est un formulaire qu'on remplit debout, souvent sur un
   téléphone, parfois dans un atelier. Rien de décoratif. */
.site-formulaire { max-width: 42rem; margin-top: 8px; }

.site-formulaire label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.site-formulaire input[type='text'],
.site-formulaire input[type='email'],
.site-formulaire input[type='tel'],
.site-formulaire textarea {
  width: 100%;
  padding: 14px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--s-trait);
  border-radius: 10px;
}

.site-formulaire input:focus-visible,
.site-formulaire textarea:focus-visible {
  outline: 3px solid var(--s-accent, #1f77bb);
  outline-offset: 2px;
}

/* L'aide sous le champ, pas au-dessus : on la lit quand on hésite, pas avant
   d'avoir compris ce qu'on demande. */
.site-formulaire .form-help,
.site-formulaire .help-text {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--s-texte-doux);
}

.site-formulaire > div { margin-bottom: 20px; }

/* L'erreur est portée par le texte, pas par une icône : elle doit se lire à
   voix haute par un lecteur d'écran aussi bien qu'elle se voit. */
.site-formulaire ul,
.site-formulaire .form-error-message {
  margin: 6px 0 0;
  padding-inline-start: 1.1em;
  font-size: 14px;
  color: #b3123c;
}

/* Deux champs courts côte à côte au-delà du téléphone : prénom/nom,
   téléphone/poste. En dessous, ils s'empilent — un champ à moitié large sur un
   écran de 360 px ne rend service à personne. */
.site-champs-duo { display: grid; gap: 0 20px; }
@media (min-width: 34rem) {
  .site-champs-duo { grid-template-columns: 1fr 1fr; }
}