/* faf-event.css — page d'événement (« Praticiens Bien-être en Follie ! »).

   POURQUOI UNE FEUILLE À PART
   Une page d'événement ne se lit pas comme une page de service. On n'y cherche pas
   à comprendre une approche : on cherche QUAND, OÙ, COMBIEN, et COMMENT s'inscrire.
   Ces quatre réponses doivent tenir dans le premier écran, sur un téléphone, parce
   que la page se partagera surtout par les réseaux.

   faf-service.css est GÉNÉRÉE (scripts/gen-boho-css.php) et ne doit pas être
   éditée à la main : ces règles vivent donc ici, et ne sont chargées que sur cette
   page. Les jetons sont écrits en dur — nav.css redéclare --ink et --ink-soft avec
   d'autres valeurs.
   ───────────────────────────────────────────────────────────────────────────── */

.faf-ev {
  --ev-sable:  #F5EBDD;
  --ev-papier: #FBF6EE;
  --ev-clay:   #95633A;
  --ev-terre:  #B37F52;
  --ev-teal:   #58AC9F;
  --ev-encre:  #3E362D;
  --ev-texte:  #5E5347;
  --ev-filet:  rgba(62, 54, 45, .12);
  --ev-serif:  'Cormorant Garamond', Georgia, serif;
  --ev-sans:   'Raleway', system-ui, sans-serif;
}

/* ── Articulation des sections ───────────────────────────────────────────────
   La page enchaînait ses six blocs sans respiration : même fond, aucune marge,
   aucun signe de passage. Elle paraissait pauvre non par manque de contenu, mais
   parce que rien ne disait où un chapitre finissait.

   Le fond et les marges sont réglés dans Elementor, section par section (voir
   scripts/faf-build-follie.php) : Marie peut les corriger, et poser une image sur
   le hero. Ne restent ici que les deux ornements et la largeur de lecture. */

/* Une colonne unique sur 1140 px donne des lignes de 130 signes — illisibles. Les
   sections de prose se resserrent ; les cartes et le plan, eux, gardent la largeur.

   Ciblage par ancre et non par classe : Elementor ne rend PAS le champ « classes CSS »
   d'une section — seuls les widgets et les colonnes le portent. Une règle
   `.ma-classe > .elementor-container` ne s'appliquerait donc jamais.

   Le programme fait exception et garde la pleine largeur : cinq colonnes sur
   880 px ne laissent plus rien tenir dans une case. C'est son chapô qui se
   resserre (`.faf-ev-chapo`), pas la section. */
#histoire > .elementor-container { max-width: 880px; }

/* Filet doré sous une tête de chapitre. Aligné à gauche comme les titres de la
   page — un trait centré sous un titre aligné à gauche flotte sans point d'appui. */
.faf-ev-filet {
  line-height: 0;
  margin: 2px 0 4px;
  color: #C6A063;
}
.faf-ev-filet svg { width: 118px; height: 12px; }
.faf-ev-filet--centre { text-align: center; }
/* Sur le clay de la bande d'inscription, le doré s'éteint : même trait, plus clair. */
.faf-ev-filet--clair { color: #E8C89A; }

/* Ornement de passage : deux filets dégradés et un brin au centre. Une seule fois
   dans la page, au passage du bloc pratique au récit. */
.faf-ev-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #C0855A;
  margin: 0 0 26px;
}
.faf-ev-orn::before,
.faf-ev-orn::after {
  content: "";
  height: 1px;
  flex: 0 1 120px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.faf-ev-orn::after { background: linear-gradient(90deg, currentColor, transparent); }
.faf-ev-orn svg { flex: 0 0 auto; width: 30px; height: 34px; opacity: .9; }

/* ── Les quatre réponses ─────────────────────────────────────────────────────
   Quand · Où · Combien · Comment. Une grille, pas une phrase : on les lit d'un
   coup d'œil, et l'ordre de lecture est le même sur toutes les largeurs. */
.faf-ev-cles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 26px 0 30px;
}

/* LES QUATRE SUR UNE LIGNE, dès que le hero passe en deux colonnes et que la
   colonne de texte est stable (638px mesurés). `auto-fit` avec un minimum de
   190px n'en logeait que trois : la quatrième — « Comment », celle qui dit
   comment s'inscrire — tombait seule sur une seconde ligne, décalée sous le
   reste. Quatre faits de même nature se lisent d'un balayage ; trois plus un se
   lisent deux fois.

   La place se prend sur le corps du texte et sur les marges, pas sur la carte :
   à 147px de large, du 21px cassait « Samedi 19 septembre » en trois lignes.
   Le tout rend une centaine de pixels de hauteur au premier écran. */
@media (min-width: 901px) {
  .faf-ev-cles {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    /* Collées au paragraphe qu'elles complètent : elles en sont la suite, pas un
       bloc à part. */
    margin: 14px 0 26px;
  }
  .faf-ev-cle { padding: 14px 13px; }
  .faf-ev-cle dt { font-size: 10px; letter-spacing: .18em; gap: 6px; margin-bottom: 5px; }
  .faf-ev-cle dt svg { width: 14px; height: 14px; }
  .faf-ev-cle dd { font-size: 18px; line-height: 1.22; }
  .faf-ev-cle dd small { font-size: 12px; }
}
.faf-ev-cle {
  position: relative;
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--ev-filet);
  border-radius: 18px;
  padding: 16px 18px;
  backdrop-filter: blur(4px);
  transition: border-color .25s, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.faf-ev-cle dt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ev-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ev-terre);
  margin: 0 0 6px;
}
.faf-ev-cle dt svg { flex: 0 0 auto; width: 16px; height: 16px; }
.faf-ev-cle dd {
  margin: 0;
  font-family: var(--ev-serif);
  font-size: 21px;
  line-height: 1.25;
  color: var(--ev-clay);
}
/* Le lien n'enveloppe que la réponse, mais son ::after étiré rend toute la carte
   cliquable : la structure terme/définition du <dl> reste intacte — un <div> de
   <dl> n'accepte que des <dt> et des <dd> — et la cible garde la taille du doigt. */
.faf-ev-cle dd a {
  color: inherit;
  text-decoration: none;
}
.faf-ev-cle dd a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.faf-ev-cle:hover { border-color: var(--ev-terre); transform: translateY(-2px); }
.faf-ev-cle:has(a:focus-visible) { border-color: var(--ev-terre); }
.faf-ev-cle dd small {
  display: block;
  font-family: var(--ev-sans);
  font-size: 13px;
  color: var(--ev-texte);
  margin-top: 3px;
}
/* L'inscription obligatoire est la seule contrainte de la journée : elle porte
   la couleur d'action, pour qu'on ne la lise pas comme un détail d'intendance. */
.faf-ev-cle--action { border-color: var(--ev-teal); background: rgba(88, 172, 159, .09); }
.faf-ev-cle--action dt { color: #3D8579; }

/* ── Le programme ────────────────────────────────────────────────────────────
   Une vraie table, et non une grille : ce sont bien des données croisées, et un
   lecteur d'écran doit pouvoir annoncer « Magasin, 14h00 – 15h00 » en entrant
   dans une case. `<th scope>` sur les deux axes le lui donne gratuitement.

   La section du programme est la seule à ne pas se resserrer : cinq colonnes sur
   880 px ne laissent plus rien tenir. C'est le chapô qui garde sa largeur de
   lecture, pas la section. */
/* Le chapô prend toute la largeur de la section, comme le tableau qu'il annonce.
   La bride à 760 px lui donnait trois lignes et un bord droit en escalier au-dessus
   d'une table qui, elle, va jusqu'au bout — deux alignements différents dans le même
   bloc. La limite de longueur de ligne vaut pour la prose (`#histoire`, 880 px), pas
   pour deux lignes d'introduction posées sur un objet pleine largeur. */
.faf-ev-chapo .elementor-widget-container { max-width: none; }

/* Le tableau vit sur une feuille BLANCHE, posée sur le crème de la section. Sur le
   crème, les cases — blanc à 72 % — se confondaient avec leur fond et la table se
   lisait comme une liste posée à même la page. Le blanc franc lui donne un bord, et
   c'est lui qui porte le contraste : les cases peuvent alors passer au sable, où
   elles redeviennent des cases. */
.faf-ev-prog {
  margin: 30px 0 4px;
  background: #fff;
  border: 1px solid var(--ev-filet);
  border-radius: 26px;
  padding: 26px 22px 22px;
  box-shadow: 0 30px 62px -50px rgba(120, 80, 45, .65);
}
/* Le titre de la table est déjà celui de la section, juste au-dessus : l'écrire
   deux fois à l'écran serait du bruit. Il reste pour qui n'a que la voix. */
.faf-ev-prog caption {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* `separate` et non `collapse` : chaque case est une carte posée sur le fond, avec
   son arrondi. Fusionner les bordures redonnerait la grille d'un tableur. */
.faf-ev-prog table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 9px;
  table-layout: fixed;
}
/* Style de tableau générique hérité : un cadre gris sur tout `th`, et un fond gris
   posé en `!important` sur une rangée sur DEUX. Sur cette table, où les cellules
   sont des cartes et les en-têtes de simples étiquettes, ça dessinait neuf boîtes
   vides — quatre au-dessus des colonnes, cinq autour des horaires — et un pavé gris
   derrière l'accueil et les deux temps d'échange, qui se trouvent être les rangées
   impaires. La régularité du défaut n'en était pas une : elle venait du zébrage.

   D'où le `!important` : monter en spécificité ne suffit pas contre un `!important`,
   même en `.faf-ev-prog tbody tr th`. Même écueil que le Kit sur les <button>. */
.faf-ev-prog tbody tr,
.faf-ev-prog tbody tr th,
.faf-ev-prog thead tr th {
  border: 0 !important;
  background: none !important;
}
.faf-ev-prog thead th {
  font-family: var(--ev-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ev-terre);
  text-align: left;
  padding: 0 4px 6px;
}
/* La colonne des horaires est étroite et fixe : les quatre lieux se partagent le
   reste à parts égales, et une case n'est plus large qu'une autre selon la
   longueur de son titre. */
.faf-ev-prog thead th:first-child,
.faf-ev-prog tbody th { width: 116px; }
/* L'horaire s'aligne sur la première ligne de la case voisine, pas sur le haut de
   la rangée : sans ce calage il flottait deux crans au-dessus du premier mot de
   l'activité, et l'œil ne rapprochait plus les deux. */
.faf-ev-prog tbody th {
  font-family: var(--ev-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ev-clay);
  text-align: left;
  vertical-align: top;
  padding: 13px 12px 0 2px;
  white-space: nowrap;
}
/* Sable clair sur la feuille blanche — l'inverse d'avant. Une case blanche sur du
   blanc n'a plus de forme, et c'est la forme des cases qui fait lire la grille. */
.faf-ev-prog td {
  vertical-align: top;
  background: rgba(245, 235, 221, .62);
  border: 1px solid var(--ev-filet);
  border-radius: 16px;
  padding: 14px 15px 15px;
}
/* Une case peut être vide — la démonstration de 17h est en sursis. Le pointillé
   dit « rien de prévu ici » ; un blanc plein aurait dit « la table est cassée ». */
.faf-ev-prog td.vide { background: none; border-style: dashed; }

.faf-ev-prog .genre {
  display: block;
  font-family: var(--ev-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ev-terre);
  margin-bottom: 7px;
}
.faf-ev-prog .t {
  display: block;
  font-family: var(--ev-serif);
  font-size: 18px;
  line-height: 1.25;
  color: var(--ev-clay);
  overflow-wrap: break-word;
}
.faf-ev-prog .par {
  display: block;
  font-family: var(--ev-sans);
  font-size: 13px;
  color: var(--ev-texte);
  margin-top: 5px;
}
/* Le nom d'un intervenant ouvre sa fiche. C'est un <button> — il n'y a pas d'adresse
   au bout, seulement une fenêtre — mais il doit se lire comme du texte cliquable et
   non comme un bouton d'action : le souligné porte l'invitation, rien d'autre.

   Même écueil que les cartes de praticiens : le Kit Elementor style TOUS les
   <button> du site, fond, cadre, rayon, remplissage, capitales et interlettrage.
   Sans cette remise à zéro en `!important`, « Séverine » sortait en pastille pleine
   au milieu d'une phrase. */
.faf-ev-prog .faf-ev-prat {
  display: inline;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #3D8579 !important;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(61, 133, 121, .45);
  text-underline-offset: 3px;
}
.faf-ev-prog .faf-ev-prat:hover,
.faf-ev-prog .faf-ev-prat:focus-visible { text-decoration-color: currentColor; }
.faf-ev-prog .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.faf-ev-prog .meta > * {
  font-family: var(--ev-sans);
  font-size: 11.5px;
  line-height: 1.3;
  border-radius: 100px;
  padding: 4px 10px;
}
.faf-ev-prog .places { background: rgba(88, 172, 159, .12); color: #3D8579; }
/* Capacité encore inconnue. L'information reste — sans elle, une activité se lit
   « entrée libre », exactement le contraire de ce que dit la page — mais elle passe
   d'une capsule en pointillé à un simple souligné interrompu. Huit cases sur douze
   la portent : en capsule, elle pesait autant que les capacités réelles et les
   noyait, alors que « 15 places » est justement ce qu'on vient chercher. Le trait
   interrompu dit toujours qu'il manque un chiffre, sans réclamer le même regard. */
.faf-ev-prog .places.attente {
  background: none;
  border: 0;
  border-bottom: 1px dashed rgba(94, 83, 71, .32);
  border-radius: 0;
  color: #96877A;
  padding: 2px 1px 3px;
}
.faf-ev-prog .note   { background: rgba(62, 54, 45, .06); color: var(--ev-texte); }
.faf-ev-prog .statut { background: rgba(192, 133, 90, .15); color: #8F5A2E; }

/* Accueil et temps d'échange : le rythme de l'après-midi. Sans eux, trois créneaux se
   suivent sans qu'on voie qu'il y a de quoi souffler entre deux. */
.faf-ev-prog tr.bande td {
  background: none;
  border: 0;
  border-top: 1px solid var(--ev-filet);
  border-radius: 0;
  padding: 12px 4px 4px;
  font-family: var(--ev-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ev-terre);
}
.faf-ev-prog tr.bande th {
  font-size: 15px;
  color: var(--ev-texte);
  padding-top: 12px;
}

/* ── Le programme, replié ────────────────────────────────────────────────────
   La table devient une suite de moments : un horaire, puis les activités qui s'y
   tiennent, chacune annoncée par son lieu. C'est parce que les RANGÉES sont les
   horaires que ce repli tombe juste — l'axe inverse aurait donné quatre blocs qui
   sont quatre pièces, là où le visiteur cherche « à 14h, je fais quoi ». */
@media (max-width: 860px) {
  /* La feuille se resserre : sur 390 px, 22 px de marge de chaque côté prenaient
     un neuvième de l'écran sans rien y mettre. */
  .faf-ev-prog { padding: 20px 14px 14px; border-radius: 20px; }
  .faf-ev-prog thead { display: none; }
  .faf-ev-prog table,
  .faf-ev-prog tbody,
  .faf-ev-prog tr,
  .faf-ev-prog th,
  .faf-ev-prog td { display: block; width: auto; }
  .faf-ev-prog table { border-spacing: 0; }
  .faf-ev-prog tr { margin-bottom: 26px; }
  /* `width:auto` ici et non sur le `th` générique plus haut : la règle qui pose les
     116 px vise `.faf-ev-prog tbody th`, plus spécifique que `.faf-ev-prog th`. Une
     remise à zéro moins spécifique ne l'aurait pas emporté, et l'horaire serait resté
     dans une colonne de 116 px — trop étroite pour « 14h00 – 15h00 » en 21 px. */
  .faf-ev-prog tbody th {
    width: auto;
    padding: 0 0 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ev-filet);
    font-size: 21px;
  }
  .faf-ev-prog td { margin-bottom: 8px; padding: 12px 14px 13px; }
  /* Repliée, une case vide n'a plus de colonne à tenir : elle ne dit plus rien. */
  .faf-ev-prog td.vide { display: none; }
  /* Le lieu était en tête de colonne ; la colonne a disparu, il revient sur la case.
     SUR LA MÊME LIGNE que le genre, et non au-dessus : deux étiquettes en capitales
     empilées se ressemblent trop pour qu'on sache laquelle est la clé, et il fallait
     franchir les deux avant d'atteindre le titre. « MAGASIN · ATELIER » se lit d'un
     coup, et la case perd une ligne — sur douze cases, c'est un écran de gagné. */
  /* `td[data-lieu]` et non `td` : les rangées d'accueil et de temps d'échange ont
     une case unique, sans lieu — elles sortaient un « · » tout seul devant leur
     libellé. L'attribut dit exactement quelles cases appartiennent à une colonne. */
  .faf-ev-prog td[data-lieu]::before {
    content: attr(data-lieu) " · ";
    display: inline;
    font-family: var(--ev-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #A98D74;
  }
  .faf-ev-prog .genre { display: inline; margin: 0; }
  .faf-ev-prog .t { font-size: 17px; margin: 8px 0 6px; }
  /* L'intervenant et les places tiennent aussi sur une ligne : « Séverine 15 places ».
     Trois lignes par activité au lieu de six. */
  .faf-ev-prog .par { display: inline; margin: 0; }
  .faf-ev-prog .meta { display: inline; margin: 0 0 0 9px; }
  .faf-ev-prog .meta > * { display: inline-block; margin: 2px 5px 2px 0; }
  /* Sans intervenant — le pendule, la kinésiologie — la marche de séparation n'a
     plus rien à séparer et décalerait la pastille toute seule. */
  .faf-ev-prog .par + .meta { margin-left: 9px; }
  .faf-ev-prog .t + .meta { margin-left: 0; }
  /* Accueil et temps d'échange tiennent sur une ligne : « 15h00 – 15h30  Temps
     d'échange ». */
  .faf-ev-prog tr.bande { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
  .faf-ev-prog tr.bande th { width: auto; border: 0; margin: 0; padding: 0; font-size: 16px; }
  .faf-ev-prog tr.bande td { border: 0; margin: 0; padding: 0; }
}

/* ── Praticiens : cartes compactes, détail en fenêtre ────────────────────────
   Cinq portraits en pleine largeur repoussaient l'inscription à six écrans. On
   présente, on ne raconte pas : le détail s'ouvre à la demande. */
/* Trois puis deux, et non cinq colonnes ou un remplissage automatique : à cinq,
   les arches deviennent des tubes étroits ; en `auto-fit`, la seconde rangée
   s'étirait sur toute la largeur et les deux dernières cartes n'avaient plus la
   même forme que les trois premières. Ici les cinq gardent la même proportion,
   et la seconde rangée est centrée sous la première. */
/* SIX colonnes, chaque carte en occupant DEUX. La rangée de deux se décale d'une
   colonne et se retrouve centrée sous celle de trois, sans changer de largeur.
   Première tentative : trois colonnes et `margin-left:50%` sur les deux dernières.
   La marge centrait bien, mais en rognant la moitié de la carte — les deux du bas
   sortaient deux fois plus étroites que celles du haut. Une marge déplace ET
   rétrécit ; le placement sur la grille ne fait que déplacer. */
.faf-ev-grille {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  margin-top: 8px;
}
.faf-ev-grille > * { grid-column: span 2; }

/* Le décalage ne vaut que pour une rangée INCOMPLÈTE, et se reconnaît en comptant
   depuis la fin : la 4e carte n'est l'avant-dernière que s'il y en a cinq. Sans ce
   compte, passer à six intervenants renvoyait la sixième seule sur une troisième
   ligne, les deux rangées pleines étant décalées comme s'il en manquait. */
.faf-ev-grille > :nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
.faf-ev-grille > :nth-child(5):nth-last-child(1) { grid-column: 4 / span 2; }
.faf-ev-grille > :nth-child(4):nth-last-child(1) { grid-column: 3 / span 2; }

@media (max-width: 900px) {
  .faf-ev-grille { grid-template-columns: repeat(2, 1fr); }
  .faf-ev-grille > *,
  .faf-ev-grille > :nth-child(4),
  .faf-ev-grille > :nth-child(5) { grid-column: auto; }
}
@media (max-width: 560px) {
  .faf-ev-grille { grid-template-columns: 1fr; }
  .faf-ev-grille > * { grid-column: auto; }
}
/* Forme d'arche — dessus arrondi, bas presque droit. C'est le dessin des visuels
   du site (`.faf-native-arch` : 200px 200px 26px 26px) : la carte cesse d'être un
   rectangle générique et rejoint le vocabulaire des pages de service. Le rayon
   haut est repris tel quel ; il se règle de lui-même sur des cartes plus étroites,
   le navigateur ramenant le rayon à la moitié du côté. */
/* `!important` : la carte est un <button>, et le Kit Elementor style TOUS les
   boutons du site — fond, rayon, remplissage. Sans ça, l'arche sortait en
   « 0 8px », le rayon du Kit. Même écueil que les boutons sur mesure ailleurs. */
.faf-ev-carte {
  /* Repère du drapeau « Co-organisatrice », posé en absolu sur la photo. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  background: var(--ev-papier) !important;
  border: 1px solid var(--ev-filet) !important;
  border-radius: 200px 200px 26px 26px !important;
  padding: 0 0 20px !important;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  /* Une ombre AU REPOS, et pas seulement au survol. Le crème de la carte et le
     sable de la section appartiennent à la même famille : sans le décollement de
     l'ombre, les cinq cartes se lisaient comme des taches claires posées sur le
     fond plutôt que comme des objets. C'est la même ombre que les cartes de
     services (`.faf-page .rel-card`). */
  box-shadow: 0 24px 52px -44px rgba(120, 80, 45, .55);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
}
/* Le Kit ne s'arrête pas au fond et au rayon : il impose aussi capitales et
   interlettrage à tout <button>. Sans cette remise à zéro, « Séverine Vinet »
   sortait en « SÉVERINE VINET » — un nom propre ne se crie pas. */
.faf-ev-carte, .faf-ev-carte * {
  text-transform: none !important;
  letter-spacing: normal !important;
}
.faf-ev-carte .role {
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  white-space: normal;      /* un rôle long s'enroule au lieu d'être tronqué */
}
.faf-ev-carte:hover,
.faf-ev-carte:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -38px rgba(120, 80, 45, .7);
}
/* L'image ne porte AUCUN arrondi : c'est `overflow:hidden` sur la carte qui la
   découpe. Lui en donner un dessinait un second arc, décalé du pixel de la
   bordure — deux traits parallèles couraient sur le bord supérieur. Un seul
   dessin de l'arche, celui de la carte. */
.faf-ev-carte img,
/* Vaut pour le <span> de remplissage comme pour l'<img> : la carte garde la même
   forme, qu'il y ait une photo ou non. Sur un <span>, `object-fit` ne fait rien —
   il est sans effet, pas nuisible, et évite d'écrire deux règles pour un seul
   emplacement. */
.faf-ev-carte .faf-ev-photo {
  width: 100%;
  /* L'attribut `height` de l'image la ferait sortir de son carré : c'est le
     rapport qui commande, pas les pixels annoncés. */
  height: auto;
  /* Carrée, et non 4/5 : à trois par rangée, le portrait allongé donnait des
     cartes d'un mètre de haut et repoussait tout le reste de la page. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #EDE0CE;
  margin-bottom: 16px;
}
/* Ce qui tient au jour même, et non au métier : les deux co-organisatrices.
   DANS LE FLUX, et non posée sur la photo : la carte est une arche — 200 px de rayon
   en haut — et `overflow:hidden` la découpe. Une pastille dans le coin supérieur
   gauche tombait dans la courbe et sortait tronquée : « …SATRICE ». Sous la photo,
   la carte est droite et pleine largeur ; le drapeau y tient entier. */
.faf-ev-carte .flag {
  align-self: flex-start;
  margin: 12px 18px 0;
  padding: 5px 12px;
  border-radius: 999px;
  /* Teinte terre à peine posée, PAS d'ombre : l'ombre servait quand le drapeau
     flottait sur la photo. Descendu dans le flux, elle ne faisait plus que salir une
     pastille crème sur une carte crème — un relief sans rien à surélever.
     Même dessin que les drapeaux des cartes de service (`.faf-card-flag`). */
  background: rgba(192, 133, 90, .13);
  font-family: var(--ev-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ev-clay);
}
.faf-ev-carte h3 {
  margin: 0 18px;
  font-family: var(--ev-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ev-clay);
}
.faf-ev-carte .role {
  margin: 0 18px;
  font-family: var(--ev-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ev-terre);
}
/* Le libellé d'ouverture prend la forme des boutons fantômes du site (pages
   d'accompagnement) : pastille à bord clay, capitales Raleway, rayon plein. Une
   ligne de texte turquoise ne disait pas qu'il y avait quelque chose à ouvrir.
   Il se remplit de turquoise au survol de LA CARTE, pas de la pastille : c'est la
   carte entière qui est le bouton — la pastille n'est qu'un dessin posé dessus.
   `!important` sur casse et interlettrage : la remise à zéro qui protège les noms
   propres du Kit (« SÉVERINE VINET ») vise `.faf-ev-carte *`, celle-ci comprise. */
.faf-ev-carte .plus {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  /* `margin-top:auto` colle le bouton au bas de la carte. Sans lui, il suivait la
     dernière ligne de texte : les disciplines de Séverine tiennent sur deux lignes,
     celles de Marie sur une, et les cinq boutons finissaient à cinq hauteurs. */
  margin: auto 18px 0;
  padding-top: 16px;
  /* Taille de vraie cible : les 9/17 px d'origine donnaient une pastille qu'on
     hésitait à viser. On reste sous le gabarit des boutons de page (15/32 px) —
     cinq boutons pleine taille alignés se disputeraient l'écran — mais au-dessus
     du seuil où une pastille cesse d'avoir l'air cliquable. */
  padding: 12px 22px;
  border: 1px solid rgba(150, 90, 45, .38);
  border-radius: 999px;
  background: transparent;
  font-family: var(--ev-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ev-clay);
  transition: background .25s, border-color .25s, color .25s;
}
/* La flèche vient du CSS et non du texte : elle peut alors avancer au survol sans
   qu'on touche au libellé — et un libellé changé dans le générateur ne risque pas
   de partir sans elle, ou avec deux. */
.faf-ev-carte .plus::after {
  content: "→";
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.faf-ev-carte:hover .plus,
.faf-ev-carte:focus-visible .plus {
  background: var(--ev-teal);
  border-color: var(--ev-teal);
  color: #fff;
}
.faf-ev-carte:hover .plus::after { transform: translateX(3px); }

/* ── Fenêtre de détail ───────────────────────────────────────────────────── */
.faf-ev-modale {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(62, 54, 45, .55);
  backdrop-filter: blur(3px);
}
.faf-ev-modale[open], .faf-ev-modale.on { display: flex; }
.faf-ev-modale-in {
  position: relative;
  max-width: 560px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--ev-papier);
  border-radius: 24px;
  padding: 30px 30px 26px;
  box-shadow: 0 50px 90px -50px rgba(62, 54, 45, .9);
}
.faf-ev-modale h3 {
  margin: 0 0 2px;
  font-family: var(--ev-serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--ev-clay);
}
.faf-ev-modale .role {
  font-family: var(--ev-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ev-terre);
  margin-bottom: 4px;
}
/* L'enseigne — le nom sous lequel la personne exerce. En italique et entre
   guillemets : c'est une signature, pas une catégorie, et elle ne doit pas se
   confondre avec la ligne de disciplines juste au-dessus. */
.faf-ev-modale .enseigne {
  font-family: var(--ev-serif) !important;
  font-size: 19px !important;
  font-style: italic;
  line-height: 1.3;
  color: #C0855A;
  margin: 0 0 16px !important;
}
.faf-ev-modale .enseigne::before { content: "\00AB\00A0"; }
.faf-ev-modale .enseigne::after  { content: "\00A0\00BB"; }
.faf-ev-modale .enseigne[hidden] { display: none; }
.faf-ev-modale p {
  font-family: var(--ev-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ev-texte);
}
/* Coordonnées : un champ par ligne, chacun avec son icône. Ce qui n'est pas
   renseigné ne s'affiche pas du tout — la fiche d'un praticien dont on ne connaît
   que le nom reste juste, elle ne sort ni libellé orphelin ni icône seule. Le
   séparateur ne se dessine donc que si au moins une ligne existe. */
.faf-ev-coord {
  list-style: none;
  display: grid;
  gap: 11px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--ev-filet);
}
/* `display:grid` gagnerait sur le `display:none` de l'attribut : il faut le dire. */
.faf-ev-coord[hidden] { display: none; }
.faf-ev-coord li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--ev-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ev-texte);
}
.faf-ev-coord .ico { flex: 0 0 auto; line-height: 0; color: var(--ev-terre); }
.faf-ev-coord .ico svg { display: block; width: 17px; height: 17px; }
/* `min-width:0` : sans lui un élément flex refuse de descendre sous la largeur de
   son contenu, et une adresse longue pousserait la fenêtre hors de l'écran d'un
   téléphone au lieu de se couper. */
.faf-ev-coord li > :not(.ico) { min-width: 0; overflow-wrap: anywhere; }
.faf-ev-coord a {
  color: #3D8579;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.faf-ev-coord a:hover, .faf-ev-coord a:focus-visible { border-bottom-color: currentColor; }

.faf-ev-modale .liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.faf-ev-modale .liens a {
  font-family: var(--ev-sans);
  font-size: 12.5px;
  color: #3D8579;
  text-decoration: none;
  border: 1px solid var(--ev-filet);
  border-radius: 100px;
  padding: 7px 15px;
}
.faf-ev-modale .liens a:hover { border-color: var(--ev-teal); }
/* `!important`, comme sur les cartes : le Kit Elementor style TOUS les <button> du
   site. Sans ça, la croix sortait en pavé clay à angles droits — son fond, son
   rayon et son remplissage, pas les nôtres. */
.faf-ev-fermer {
  position: absolute;
  top: 14px; right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0 !important;
  border: 1px solid var(--ev-filet) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--ev-texte) !important;
  font-family: var(--ev-sans);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.faf-ev-fermer:hover { border-color: var(--ev-terre) !important; }

/* ── Carte du lieu ───────────────────────────────────────────────────────── */
.faf-ev-plan {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #E4D1BF;
  box-shadow: 0 30px 60px -46px rgba(120, 80, 45, .6);
  margin-top: 18px;
}
.faf-ev-plan iframe { display: block; width: 100%; height: 340px; border: 0; }

/* UN SEUL CADRE. Quand la carte est rendue par Leaflet, `.faf-osm-wrap` trace
   déjà son propre cadre — même trait, même rayon, même ombre — à UN pixel de
   celui-ci. Deux traits superposés, et surtout : ce cadre-ci n'ayant aucune
   marge intérieure, l'adresse et le bouton d'itinéraire venaient buter contre
   ses bords, à un pixel du bas. On laisse la carte porter son cadre et on
   efface celui-ci.
   Le repli en `iframe`, lui, n'a pas de cadre à lui : il garde celui-ci, d'où
   le `:has()` plutôt qu'une remise à zéro sèche. */
.faf-ev-plan:has(.faf-osm-wrap) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* ── Rappel d'inscription, collé au bas de l'écran (mobile) ──────────────────
   L'inscription est obligatoire et la page est longue : sur téléphone, l'action
   reste à portée de pouce au lieu d'attendre la fin du parcours. */
.faf-ev-rappel,
.faf-ev-rappel:link,
.faf-ev-rappel:visited,
.faf-ev-rappel:hover,
.faf-ev-rappel:focus { color: #fff !important; }
.faf-ev-rappel {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--ev-teal);
  color: #fff;
  font-family: var(--ev-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 100px;
  /* !important ET les quatre états : c'est un <a>, et la couleur de lien du Kit
     le repeignait en gris sur le fond teal. */
  color: #fff !important;
  box-shadow: 0 18px 34px -18px rgba(88, 172, 159, .9);
}
@media (max-width: 900px) {
  /* ── BARRE D'ACTION COLLANTE ────────────────────────────────────────────────
     POURQUOI. Mesuré sur iPhone 390×844 : la hauteur réellement disponible est
     de 768 px une fois l'en-tête collant déduit, et trois étapes sur six la
     dépassent — « Qui vient » de 59 px, le premier créneau de 50, et l'étape des
     séances de 265. Les deux premières se rattraperaient en resserrant du texte ;
     la troisième, non : douze créneaux de vingt minutes ne se compriment pas.
     Tant que « Continuer » vit dans le flux, il tombe donc sous la ligne de
     flottaison sans que rien ne l'annonce — sur un formulaire d'inscription,
     c'est l'abandon assuré. Collée en bas, la commande est toujours là.

     Elle ne s'applique QU'À L'ASSISTANT : hors JavaScript, le formulaire se
     déroule d'un bloc et une barre flottante n'aurait rien à commander. */
  /* ELLE NE PARAÎT QUE SUR LE FORMULAIRE. Fixée dès le chargement, elle flottait en
     bas de l'écran d'un bout à l'autre de la page : « Continuer » s'affichait sous
     le pied de page, à mille pixels du premier champ, et commandait un parcours que
     personne n'avait commencé.
     La classe est déjà posée par l'observateur du script — celui qui efface les
     pastilles flottantes — et dit exactement ce qu'il faut : le formulaire est à
     l'écran. On masque plutôt qu'on ne déplace, pour que la barre ne saute pas du
     flux au bord de l'écran quand on arrive dessus. */
  .faf-ev-assistant:not(.faf-ev-fin) .faf-ev-pas {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 75;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
    /* `env()` pour la barre d'accueil des iPhone sans bouton : sans elle, les
       boutons se retrouvent sous le trait de glissement du système. */
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--ev-papier, #FBF6EE);
    border-top: 1px solid var(--ev-filet, rgba(62, 54, 45, .12));
    box-shadow: 0 -14px 28px -20px rgba(62, 54, 45, .55);
  }
  body.faf-ev-au-formulaire .faf-ev-assistant:not(.faf-ev-fin) .faf-ev-pas {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* De quoi défiler jusqu'au bout sans que la barre mange la dernière ligne. */
  .faf-ev-assistant:not(.faf-ev-fin) {
    padding-bottom: 78px;
    /* ET DE QUOI TENIR JUSQU'À ELLE. Une étape courte — « Vous venez à combien ? »
       et ses quatre pastilles — s'arrêtait bien avant le bas de l'écran, alors que
       la barre, elle, y reste collée. Entre les deux apparaissait la section
       suivante de la page : on lisait le début du programme sous des boutons qui
       commandaient le formulaire.
       Le formulaire occupe donc au moins la hauteur libre sous l'en-tête. `svh`
       plutôt que `vh` : sur mobile, `vh` compte la barre d'adresse même repliée,
       ce qui ajoutait une centaine de pixels vides sous les étapes longues. */
    min-height: calc(100svh - 118px);
  }
  @supports not (height: 100svh) {
    .faf-ev-assistant:not(.faf-ev-fin) { min-height: calc(100vh - 118px); }
  }

  /* ── LES PASTILLES FLOTTANTES S'EFFACENT SUR LE FORMULAIRE ──────────────────
     Le sommaire en bas à gauche et le retour-en-haut en bas à droite encadrent
     très exactement l'endroit où se pose la barre. Ni l'un ni l'autre ne sert
     pendant qu'on remplit : le sommaire renvoie ailleurs dans la page, et
     remonter n'est pas le geste attendu.
     La spécificité monte d'un cran parce que faf-tools.css est chargée APRÈS
     celle-ci et emporterait l'égalité. Mêmes propriétés que sa propre feuille —
     opacité et visibilité — pour ne pas se disputer un `display` avec elle. */
  body.faf-ev-au-formulaire .faf-tocnav,
  body.faf-ev-au-formulaire .faf-tocnav.is-visible,
  body.faf-ev-au-formulaire .faf-tools.is-scrolled .faf-tools__top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* ── LE HAUT DES ÉTAPES DE CHOIX SE RESSERRE ────────────────────────────────
     Mesuré 57 px entre la ligne « 5/6 Une séance ? » et le premier texte : 24 px
     de marge du bloc, 13 px de padding du corps, 12 px d'aide. Les deux premiers
     ne séparent plus rien — la barre de progression tient déjà lieu de titre, et
     la légende du fieldset est masquée en mode assistant. Seul le bloc du
     parcours est visé : à la première étape, « Vos coordonnées » et « Vous venez
     à combien ? » cohabitent sur le même écran et ont, eux, besoin de leurs
     24 px pour se distinguer. */
  /* Le sélecteur porte le `+` : `.faf-ev-assistant .faf-ev-bloc + .faf-ev-bloc`
     pose 24 px, pèse autant que cette règle et se trouve plus bas dans la
     feuille — elle l'emportait à l'égalité. */
  .faf-ev-assistant .faf-ev-bloc + .faf-ev-bloc.faf-ev-parcours,
  .faf-ev-assistant .faf-ev-bloc.faf-ev-parcours { margin-top: 6px; }
  .faf-ev-assistant .faf-ev-creneau-corps { padding-top: 0; }
  /* Et la marge du premier texte du corps : elle le décollait d'une légende qui
     n'est plus affichée. Le vide mesuré tombe de 57 à 19 px. */
  .faf-ev-assistant .faf-ev-creneau-corps > .faf-ev-aide:first-child { margin-top: 0; }

  .faf-ev-rappel.on { display: inline-flex; }

  /* LE CTA D'EN-TÊTE S'EFFACE ICI. Sur téléphone, « Prendre RDV » se retrouve à
     quelques pixels du rappel d'inscription, et les deux ne mènent pas au même
     endroit : celui de l'en-tête ouvre le portail client (/app), qui n'a rien à
     voir avec une inscription à la journée. Deux boutons voisins de même forme
     et de destinations différentes, c'est une erreur de clic programmée.
     `body` devant, pour l'emporter sur le `display: inline-flex !important`
     que nav.css pose au même point de rupture, quel que soit l'ordre des
     feuilles. Cette feuille n'est chargée que sur la page Follie : la règle ne
     peut pas fuir ailleurs. */
  body .nav-cta { display: none !important; }
  .faf-ev-cle dd { font-size: 19px; }
  .faf-ev-plan iframe { height: 260px; }
}

/* ── Places : les deux états qui ne sont pas un nombre ───────────────────────
   « Sans réservation » n'est pas une capacité inconnue : la réflexologie se prend
   au passage. Annoncer « places à préciser » y ferait attendre un chiffre qui ne
   viendra jamais. « Complet » se lit en clay soutenu — c'est la seule information
   du tableau qui ferme une porte. */
.faf-ev-prog .places.libre {
  background: none;
  border: 1px dashed rgba(88, 172, 159, .45);
  color: #3D8579;
  padding: 3px 9px;
}
.faf-ev-prog .places.complet {
  background: rgba(150, 90, 45, .14);
  color: #8F5A2E;
  font-weight: 600;
}

/* ── Le formulaire d'inscription ─────────────────────────────────────────────
   Posé en feuille claire sur la bande clay, comme le programme l'est sur le crème :
   un champ de saisie sur fond brun est illisible, et éclaircir le fond de la bande
   lui ferait perdre ce qui en fait le point d'arrivée de la page.

   Aucun compte, aucune connexion : ce formulaire écrit une inscription et envoie un
   récapitulatif. Le lien d'annulation qu'il contient remplace le compte qu'on ne
   demande pas. */
.faf-ev-form {
  max-width: 1040px;
  margin: 34px auto 0;
  background: var(--ev-papier);
  border-radius: 26px;
  padding: 34px 34px 30px;
  box-shadow: 0 34px 70px -46px rgba(50, 32, 16, .85);
  text-align: left;
  font-family: var(--ev-sans);
  color: var(--ev-texte);
}
/* Le champ leurre : invisible à l'œil, atteignable par un robot. `display:none`
   suffirait à certains, pas à tous — on le sort de l'écran plutôt que de le cacher. */
.faf-ev-leurre {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Quatre étapes qui se touchent ne se lisent pas comme quatre étapes : le filet
   seul ne suffisait pas à les séparer, il fallait le vide autour. Même raisonnement
   que les sections de la page — c'est la marge qui fait le bloc, pas le trait. */
/* L'espacement entre étapes est une MARGE, pas un padding — et c'est le seul moyen.
   Un <legend> est rendu au bord supérieur de la BOÎTE, avant le padding : les 38 px
   destinés à séparer les étapes tombaient donc entre le titre et son propre contenu,
   et `display:block` sur la légende n'y change rien (Chrome garde le rendu natif).
   En marge, l'espace se place à l'extérieur du cadre : le filet et la légende
   descendent ensemble, et le contenu reste collé à son titre. */
.faf-ev-bloc {
  border: 0;
  border-top: 1px solid var(--ev-filet);
  margin: 38px 0 0;
  padding: 0;
}
.faf-ev-bloc:first-of-type { border-top: 0; margin-top: 0; }
/* `display:block` — sans quoi le navigateur rend le <legend> comme LÉGENDE DU CADRE,
   posée au bord supérieur de la boîte. Le `padding-top` de l'étape, qui sert à
   séparer les étapes entre elles, tombait alors ENTRE le titre et son propre
   contenu : 58 px de vide sous « Vous venez à combien ? », et les mêmes sous les
   étapes 3 et 4. Rendue au flux normal, la légende descend avec le padding et ne
   garde que sa petite marge. */
.faf-ev-form legend {
  display: block;
  width: 100%;
  font-family: var(--ev-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ev-clay);
  /* L'air entre le filet et le titre se met EN PADDING DE LA LÉGENDE, pas en padding
     du cadre : le padding du cadre passerait sous la légende (rendue au bord de la
     boîte) et rouvrirait le vide qu'on vient de fermer. */
  padding: 20px 0 0;
  margin-bottom: 10px;
}
.faf-ev-bloc:first-of-type > legend { padding-top: 0; }
.faf-ev-aide { font-size: 13px; color: #8A7B6B; margin: 12px 0 0; }
/* La consigne court sur toute la largeur : bridée à 68 caractères, elle laissait
   les deux cinquièmes droits vides au-dessus de trois colonnes qui, elles, vont
   jusqu'au bout. */
.faf-ev-consigne { margin: 0 0 16px; max-width: none; }
.faf-ev-aide--haut { margin: 0 0 14px; }
.faf-ev-aide a { color: #3D8579; }

.faf-ev-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.faf-ev-champ { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.faf-ev-champ--large { grid-column: 1 / -1; margin-top: 0; }
.faf-ev-form label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ev-terre);
}
.faf-ev-requis { color: var(--ev-teal); }
/* LES MÊMES CHAMPS QUE LA PAGE CONTACT, et `!important` n'est pas une facilité :
   le Kit Elementor style tous les champs du site avec une spécificité que ces
   sélecteurs ne battent pas. Les coins arrondis demandés ici étaient donc
   remis à zéro en silence, et la bordure reprenait un gris froid étranger à la
   palette — un formulaire d'administration au milieu d'une page chaleureuse.
   Même remède que pour les boutons, documenté ailleurs dans cette feuille.

   Valeurs relevées sur /contact le 2026-08-19 : rayon 12 px (14 pour la zone de
   texte), bordure #EDE0CE, fond blanc, texte terre, 48 px de haut. */
.faf-ev-form input[type="text"],
.faf-ev-form input[type="email"],
.faf-ev-form input[type="tel"],
.faf-ev-form textarea {
  width: 100%;
  font-family: var(--ev-sans) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--ev-terre, #B78D5C) !important;
  background: #fff !important;
  border: 1px solid var(--ev-sable-fonce, #EDE0CE) !important;
  border-radius: 12px !important;
  padding: 11px 16px !important;
  box-shadow: none !important;
}
.faf-ev-form textarea { border-radius: 14px !important; }
.faf-ev-form input::placeholder,
.faf-ev-form textarea::placeholder { color: var(--ev-encre-douce, #A89A8A); opacity: 1; }
.faf-ev-form input:focus-visible,
.faf-ev-form textarea:focus-visible { outline: 2px solid var(--ev-teal); outline-offset: 1px; }

/* ── Les étapes ──────────────────────────────────────────────────────────────
   Un numéro devant chaque légende. Le formulaire en compte quatre : coordonnées,
   combien, activités, un mot. Sans eux, on ne sait pas où l'on en est ni combien
   il en reste — c'est ce qui faisait paraître le formulaire interminable autant
   que sa longueur réelle. */
.faf-ev-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px; height: 27px;
  margin-right: 9px;
  border-radius: 50%;
  background: rgba(192, 133, 90, .13);
  border: 1px solid rgba(192, 133, 90, .3);
  font-family: var(--ev-sans);
  font-size: 13px;
  font-weight: 600;
  color: #C0855A;
  vertical-align: 2px;
}

/* ── Combien de personnes ────────────────────────────────────────────────────
   Des pastilles, pas une liste déroulante : quatre valeurs se choisissent d'un
   geste, et le nombre retenu se voit sans ouvrir quoi que ce soit. */
.faf-ev-compte { display: flex; gap: 10px; margin: 0; }
.faf-ev-compte input { position: absolute; opacity: 0; pointer-events: none; }
.faf-ev-compte label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(150, 90, 45, .3);
  border-radius: 50%;
  background: #fff;
  font-family: var(--ev-serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ev-clay);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.faf-ev-compte label:hover { border-color: var(--ev-terre); }
.faf-ev-compte input:checked + label {
  background: var(--ev-teal);
  border-color: var(--ev-teal);
  color: #fff;
}
.faf-ev-compte input:focus-visible + label { outline: 2px solid var(--ev-teal); outline-offset: 2px; }

/* ── Les onglets de participants ─────────────────────────────────────────────
   Ils n'existent qu'avec JavaScript (`hidden` retiré par le script). Sans lui,
   les quatre parcours se suivent sous leur titre : plus long, mais entier. */
/* `display` l'emporte sur l'attribut `hidden` : sans ces deux remises à zéro, la
   barre d'onglets s'afficherait SANS JavaScript — où elle ne commande rien — et les
   onglets hors du compte resteraient visibles. Même écueil que la liste de
   coordonnées de la fiche praticien. */
.faf-ev-onglets[hidden],
.faf-ev-onglet[hidden] { display: none !important; }
.faf-ev-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  border-bottom: 1px solid var(--ev-filet);
  padding-bottom: 10px;
}
.faf-ev-onglet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: 1px solid rgba(150, 90, 45, .28) !important;
  border-radius: 999px !important;
  padding: 9px 17px !important;
  font-family: var(--ev-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--ev-clay) !important;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.faf-ev-onglet:hover { border-color: var(--ev-terre) !important; }
.faf-ev-onglet.est-actif {
  background: var(--ev-clay) !important;
  border-color: var(--ev-clay) !important;
  color: #FBF6EE !important;
}
/* La pastille dit combien d'activités cette personne a retenues : c'est ce qui
   permet de voir, sans ouvrir les autres onglets, qu'on n'a rien oublié. */
.faf-ev-onglet-pastille:empty { display: none; }
.faf-ev-onglet-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(88, 172, 159, .18);
  color: #3D8579;
  font-size: 11px;
  font-weight: 600;
}
.faf-ev-onglet.est-actif .faf-ev-onglet-pastille { background: rgba(255, 255, 255, .22); color: #fff; }

.faf-ev-panneau { padding-top: 0; }
.faf-ev-panneau-titre {
  font-family: var(--ev-serif);
  font-size: 20px;
  color: var(--ev-clay);
  margin: 0 0 10px;
}
/* Avec JavaScript, l'onglet porte déjà le nom : le répéter en titre ferait doublon. */
.faf-ev-js .faf-ev-panneau-titre { display: none; }
.faf-ev-champ--prenom { max-width: 280px; margin-bottom: 16px; }

/* ── Les trois créneaux, côte à côte ─────────────────────────────────────────
   C'est le vrai gain de temps. Empilés, ils demandaient trois écrans de
   défilement pour une seule personne, et on perdait de vue ce qu'on venait de
   choisir. Alignés, l'après-midi entière tient en un regard — c'est la forme du
   programme, pas celle d'un questionnaire. */
/* UN FOND PAR CRÉNEAU. Trois colonnes de même teinte se lisent comme un seul bloc
   découpé ; trois teintes disent qu'il s'agit de trois moments distincts, et l'œil
   retrouve sa colonne sans relire l'heure. Les trois restent très pâles : ce sont
   les cartes blanches posées dessus qui doivent ressortir, pas le fond. */
.faf-ev-creneaux > .faf-ev-creneau:nth-child(1) { background: rgba(230, 210, 182, .55); }
.faf-ev-creneaux > .faf-ev-creneau:nth-child(2) { background: rgba(192, 133, 90, .15); }
.faf-ev-creneaux > .faf-ev-creneau:nth-child(3) { background: rgba(88, 172, 159, .14); }
.faf-ev-creneaux {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  /* `stretch` — la valeur par défaut de la grille, rétablie après un `start` qui
     laissait chaque créneau à sa hauteur naturelle : 295, 327 et 308 px, trois
     boîtes désalignées pour trois moments d'égale importance. */
  align-items: stretch;
}
/* Les créneaux en colonne flex, pour que « Rien à ce moment-là » puisse être poussé
   en bas de chaque boîte (`margin-top:auto`). Sans ça, l'étirement égalisait bien les
   hauteurs mais le trait de séparation flottait à trois niveaux différents — on
   voyait alors que les boîtes avaient été étirées, ce qui est pire que rien.
   Le `<legend>` reste hors du flux flex : les navigateurs le sortent d'eux-mêmes,
   il continue de chevaucher la bordure comme attendu. */
.faf-ev-creneau { display: flex; flex-direction: column; }

/* Un créneau = un groupe de boutons radio. Le doublon horaire n'est pas refusé,
   il est rendu impossible : on ne peut pas être à deux endroits à 14h. */
/* La légende devient un BANDEAU, et non plus une étiquette posée sur la bordure.
   Le rendu natif d'un <legend> chevauche le trait du cadre : il laissait au-dessus de
   chaque colonne un vide que rien ne venait occuper, et bridait la taille de l'heure —
   au-delà de 19 px, elle débordait du cadre. `display:block` sort la légende de ce
   rendu particulier et la rend à la mise en page ordinaire ; le padding descend alors
   dans un corps intérieur, pour que le bandeau, lui, aille d'un bord à l'autre. */
.faf-ev-creneau {
  /* Le trait porte la séparation, pas le fond. Le sable à 45 % se posait sur le
     sable de la section : deux beiges à quelques pour cent l'un de l'autre, et
     le cadre disparaissait — on ne voyait plus où un créneau finissait. Le fond
     devient franc, et le filet passe de 12 % à 22 % d'encre. */
  border: 1px solid rgba(62, 54, 45, .22);
  border-radius: 16px;
  padding: 0;
  margin: 0;
  background: var(--ev-papier);
  box-shadow: 0 14px 30px -26px rgba(120, 80, 45, .55);
}
.faf-ev-creneau-corps { padding: 13px 13px 7px; display: flex; flex-direction: column; flex: 1; }
/* L'heure en serif, grande, sans capitales : c'est elle qui structure le choix.
   En 12 px capitales interlettrées, elle se lisait comme une mention légale — alors
   que c'est la première chose qu'on cherche des yeux dans une colonne. */
/* PAS DE FOND sur la légende, et c'est une contrainte du navigateur, pas un goût :
   un <legend> échappe au rognage de son cadre — même avec `overflow:hidden`, même en
   `display:block`. Le bandeau teinté peignait donc DEUX COINS CARRÉS par-dessus les
   coins arrondis du créneau, et les deux traits se chevauchaient. Un simple filet bas
   sépare aussi bien : une ligne horizontale n'a pas de coin à trahir.

   `flex` : le numéro et l'heure sur la MÊME ligne. Empilés, ils ajoutaient une ligne
   à chacune des trois colonnes pour un repère qui tient en deux mots. */
.faf-ev-creneau legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 12px 14px 11px;
  background: none;
  border-bottom: 1px solid var(--ev-filet);
  letter-spacing: normal;
  text-transform: none;
}
/* Le numéro sert de repère quand on revient en arrière : trois colonnes d'horaires
   se ressemblent trop pour qu'on sache laquelle on remplissait. Il reste petit —
   c'est l'heure qu'on cherche des yeux, pas le rang. */
.faf-ev-ord {
  font-family: var(--ev-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ev-terre);
  /* Il ne rétrécit pas : sur une colonne étroite, c'est l'heure qui passe à la
     ligne, pas le repère qui se coupe en « CRÉ- / NEAU 1 ». */
  flex: 0 0 auto;
  /* Poussé au bord droit. `margin-left:auto` plutôt que `space-between` sur la
     légende : si l'heure vient à passer à la ligne, le repère reste collé à droite
     au lieu de se retrouver seul, centré, au milieu d'une ligne vide. */
  margin-left: auto;
}
.faf-ev-heure {
  font-family: var(--ev-serif);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ev-clay);
}
/* ── Choisir une activité : une carte, pas un bouton radio ───────────────────
   Le bouton radio natif est minuscule, daté, et il oblige à viser un rond de 13 px
   quand toute la ligne pourrait servir de cible. L'input reste — c'est lui qui porte
   la sémantique du groupe et la navigation au clavier — mais il devient invisible,
   sans jamais disparaître : `display:none` le retirerait de l'ordre de tabulation,
   et le créneau ne serait plus atteignable sans souris.

   La sélection se lit alors sur le CADRE et sur la COULEUR DU TITRE, pas sur une
   pastille : c'est visible de loin, et la zone de clic fait toute la carte. */
.faf-ev-option { position: relative; display: block; margin: 0 0 8px; }
.faf-ev-option input {
  position: absolute;
  top: 12px; left: 12px;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
/* LA CARTE EST LE <p>, plus le <label>. Le pied contient un bouton — le
   praticien — et un <button> dans un <label> se déclenche deux fois : il ouvre la
   fiche ET coche l'activité. Le label ne porte donc que le titre ; son ::after,
   étiré sur la carte, en fait la cible de clic. Le pied repasse au-dessus par
   z-index. C'est le procédé déjà retenu pour les quatre clés du premier écran. */
.faf-ev-option {
  padding: 8px 13px 10px;
  border: 1px solid rgba(62, 54, 45, .20);
  border-radius: 14px;
  background: #fff;
  color: var(--ev-texte);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.faf-ev-option:hover { border-color: var(--ev-terre); }
.faf-ev-option label {
  display: block;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  cursor: pointer;
}
.faf-ev-option label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ── Trois étages dans la carte ──────────────────────────────────────────────
   Le genre au-dessus, le nombre de places à droite, le titre au milieu, le lieu
   et l'intervenant en dessous. Auparavant les quatre tenaient sur une seule
   ligne grise, au même corps et de la même couleur : rien ne se détachait, et
   surtout pas le nombre de places, qui est pourtant ce qui décide. */
.faf-ev-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  min-height: 18px;
}
.faf-ev-genre {
  font-family: var(--ev-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ev-terre);
  line-height: 1;
}

/* La pastille de places. Turquoise — la couleur d'action de la charte — et non
   terre : elle doit se distinguer du genre juste à côté, qui est déjà en terre. */
.faf-ev-places {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: 100px;
  background: rgba(88, 172, 159, .13);
  color: #2F6B60;
  font-family: var(--ev-sans);
  font-size: 12px;
  line-height: 1;
}
.faf-ev-places svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.faf-ev-places b { font-weight: 600; font-variant-numeric: tabular-nums; }
.faf-ev-places.est-complet {
  background: rgba(62, 54, 45, .08);
  color: #8A7B6B;
  padding: 3px 10px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Le mot complet reste pour les lecteurs d'écran : « 15 » seul ne dit rien. */
.faf-ev-assistant .faf-ev-creneau > legend {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.faf-ev-lu {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* DEUX CLASSES, ET NON UNE. `.faf-ev-form label` — écrite pour les libellés de
   champs, « PRÉNOM », « NOM » — pèse (0,1,1) et battait `.faf-ev-titre` à
   (0,1,0). Or le titre d'activité EST un <label> : c'est lui qui rend la carte
   cliquable. Il héritait donc du gabarit des libellés de champ et sortait à
   11 px en terre claire au lieu de 14,5 px en encre — le texte le plus
   important de la carte, le plus petit et le moins contrasté de l'écran
   (3,46 contre 4,5 exigés). Mesuré le 2026-08-19 sur iPhone 390 px.
   Le poids et la casse, eux, étaient déjà repris ailleurs : seules la taille et
   la couleur fuyaient. */
.faf-ev-form .faf-ev-titre { font-size: 14.5px; color: var(--ev-encre); }
.faf-ev-titre { display: block; font-size: 14.5px; line-height: 1.3; color: var(--ev-encre); transition: color .2s; }

/* ── Le pied : où, et avec qui ───────────────────────────────────────────────
   Deux informations de natures différentes, donc deux traitements. Elles étaient
   collées par un point — « Les Plantes · Séverine » — et se lisaient comme une
   seule chaîne. Un filet les détache du titre : ce n'est plus la fin de la
   phrase, c'est le contexte. */
.faf-ev-pied {
  position: relative;   /* au-dessus du ::after du label */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(62, 54, 45, .10);
}

/* Le lieu. Muet à la décision — on ne choisit pas un atelier pour sa salle —
   mais indispensable le jour même. D'où le pictogramme : « Les Racines » sans
   repère se lit comme un titre de chapitre, avec l'épingle c'est un endroit. */
.faf-ev-lieu {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 1.35;
  color: #6E6155;
  /* Le pied peut passer à la ligne ; le lieu garde la priorité de place. */
  flex: 1 1 auto;
  min-width: 0;
}
.faf-ev-lieu svg {
  flex: 0 0 auto;
  width: 13px; height: 13px;
  fill: none; stroke: var(--ev-terre); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* La note précise le titre : elle se place sous lui, en retrait. */
.faf-ev-note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: #8A7B6B;
}

/* Le praticien. Bouton, comme dans le tableau du programme — même classe, même
   fenêtre, même clé. Bordé pour qu'on voie qu'il se clique : au milieu d'une
   carte déjà cliquable, un texte souligné ne suffit pas à distinguer les deux
   gestes. */
.faf-ev-option .faf-ev-prat {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(62, 54, 45, .22);
  border-radius: 100px;
  padding: 4px 11px;
  font-family: var(--ev-sans);
  font-size: 11.5px;
  font-weight: 600;
  /* Le Kit Elementor met TOUS les <button> du site en capitales espacées. Sur un
     bouton d'action c'est voulu ; sur un prénom, « SÉVERINE » crie, et les accents
     capitales se lisent moins bien. Il faut le dire explicitement, la règle du Kit
     étant plus spécifique que l'héritage. */
  text-transform: none !important;
  letter-spacing: .01em !important;
  color: var(--ev-clay);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.faf-ev-option .faf-ev-prat:hover {
  border-color: var(--ev-terre);
  background: rgba(179, 127, 82, .09);
}
.faf-ev-option .faf-ev-prat:focus-visible { outline: 2px solid var(--ev-teal); outline-offset: 2px; }
/* Deux praticiens sur une même activité : le <span class="par"> les groupe, et
   l'esperluette qui les sépare se fait discrète — c'est une liaison, pas un mot. */
.faf-ev-pied .par { display: inline-flex; gap: 5px; align-items: center; flex: 0 0 auto; }
.faf-ev-pied .par { font-size: 11px; color: var(--ev-terre); }

/* L'état choisi : bord turquoise, fond à peine teinté, titre dans la même couleur.
   Trois signaux d'un coup — un seul (le cadre) se rate sur un écran mal réglé. */
/* `:has()` et non `+` : le titre n'est plus le voisin immédiat de l'input, la
   tête s'intercale. C'est la carte entière qui prend l'état, ce qui est plus
   juste — c'est elle qu'on a choisie. */
.faf-ev-option:has(input:checked) {
  border-color: var(--ev-teal);
  background: rgba(88, 172, 159, .09);
  box-shadow: inset 0 0 0 1px var(--ev-teal);
}
.faf-ev-option:has(input:checked) .faf-ev-titre { color: #2F6B60; font-weight: 600; }
/* Sur fond déjà turquoise, la pastille remonte d'un cran pour rester lisible. */
.faf-ev-option:has(input:checked) .faf-ev-places { background: rgba(88, 172, 159, .26); }
.faf-ev-option:has(input:checked) .faf-ev-pied { border-top-color: rgba(88, 172, 159, .28); }
/* L'input étant invisible, le focus clavier doit se voir sur la carte — sinon on
   navigue à l'aveugle dans le groupe. */
.faf-ev-option:has(input:focus-visible) { outline: 2px solid var(--ev-teal); outline-offset: 2px; }

.faf-ev-option.est-complet {
  opacity: .55;
  cursor: not-allowed;
  background: transparent;
  border-style: dashed;
}
/* Le praticien reste consultable même quand l'atelier est complet : savoir qui
   il est peut faire choisir une de ses autres activités. */
.faf-ev-option.est-complet .faf-ev-prat { cursor: pointer; }
.faf-ev-option.est-complet label { cursor: not-allowed; }
/* ── Ce qui devient impossible une fois un autre choix fait ──
   Distinct de `est-complet` : là il n'y a plus de place pour personne, ici la
   place existe mais pas pour CETTE personne, à cause de ce qu'elle a déjà coché.
   Deux causes, deux allures — le pointillé du complet dirait « fermé » là où il
   faut lire « décochez l'autre et je reviens ». */
/* Écartée : elle n'existe plus pour cette personne. `display:none` forcé — le
   thème pose un `display` sur ces lignes, et l'attribut seul n'y suffirait pas. */
/* Grisé, jamais effacé : des heures qui disparaissent sans un mot font passer le
   formulaire pour cassé — reproche remonté deux fois. La ligne reste lisible, et
   cliquable : « le dernier choix l'emporte » y libère l'activité qui gêne. */
.faf-ev-option.est-ecarte { opacity: .45; }
.faf-ev-ecartes { margin-top: 4px; font-style: italic; }
/* QUAND IL NE RESTE PLUS RIEN, CE N'EST PLUS UNE NOTE. Tant que des horaires
   subsistent, la phrase explique une absence — de l'italique discret suffit.
   Quand la grille est vide, elle annonce une impasse : il faut renoncer à une
   activité pour prendre une séance. Ce n'est plus une précision, c'est la seule
   chose à lire dans le bloc, et elle doit se voir comme telle. Clay soutenu,
   comme « complet » — la seule autre teinte du formulaire qui ferme une porte. */
.faf-ev-ecartes.est-alerte {
  font-style: normal;
  font-weight: 600;
  color: #8F5A2E;
  background: rgba(192, 133, 90, .12);
  border-left: 3px solid rgba(192, 133, 90, .55);
  border-radius: 0 8px 8px 0;
  padding: 9px 12px;
  margin-top: 10px;
}

.faf-ev-option.est-incompatible {
  opacity: .5;
  cursor: not-allowed;
  background: transparent;
}
.faf-ev-option.est-incompatible label { cursor: not-allowed; }
.faf-ev-raison {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-style: italic;
  color: var(--ev-encre-douce, #8A7B6B);
}

/* Les séances d'une plage : une liste d'heures, pas des cartes d'atelier. Elles
   n'ont ni salle ni praticien à montrer — tout cela est dit une fois en tête de
   bloc — et une carte par séance ferait treize pavés pour une seule activité. */
/* Les pictogrammes des espaces, en tête de colonne.
   TAILLE ET TRAIT SONT OBLIGATOIRES ICI. Un `<svg>` en ligne sans largeur ni
   hauteur prend sa taille par défaut d'élément remplacé — 300 × 150 px — et se
   peint en noir plein faute de `fill`. Dessinés au trait, ces quatre pictos
   n'existent qu'avec `fill: none` et un `stroke`. */
.faf-ev-picto {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* EN TÊTE DE COLONNE : le dessin en blanc dans un disque de terre.
   Le trait seul, à 15 px et 55 % d'opacité, se confondait avec l'intitulé qu'il
   accompagne. Le disque lui donne un poids d'étiquette — c'est un repère de
   colonne, pas une décoration de texte.

   `box-sizing: border-box` avec un `padding` : la marge intérieure creuse le
   disque au lieu de l'agrandir, le dessin garde donc ses proportions. Sans elle,
   `width` ne compte que la zone de tracé et la pastille enfle. */
.faf-ev-picto--rond {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--ev-terre, #B37F52);
  stroke: #fff;
  stroke-width: 1.8;
  vertical-align: -7px;
}

/* SUR LA CARTE : à hauteur du genre, poussé à droite. Dans une grille de quatre
   colonnes, on perd vite de vue laquelle on lit — le picto y répond sans ajouter
   une ligne de texte. */
.faf-ev-picto--carte {
  margin-left: auto;
  opacity: .5;
}
.faf-ev-prog .genre {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* DANS LE FORMULAIRE : à la place de la punaise, même dessin qu'au programme. */
.faf-ev-picto--lieu {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  opacity: .75;
}

/* ══ L'ASSISTANT : une question à la fois ═══════════════════════════════════
   Le formulaire long reste la version servie par le serveur ; ces règles ne
   s'appliquent qu'une fois le script en place, sous `.faf-ev-assistant`. Sans
   JavaScript, rien de tout cela n'existe et la page se comporte comme avant. */
.faf-ev-assistant .faf-ev-hors-etape { display: none !important; }

/* CE QUE LA PROGRESSION REND INUTILE. Le formulaire long avait besoin de se
   situer lui-même : des numéros de section, une consigne qui annonçait les trois
   créneaux, un rappel « Créneau 1 » à côté de l'heure. La barre de progression
   dit désormais tout cela d'un mot, et le répéter mange quatre lignes sur les
   six que compte l'écran.

   La consigne parlait aussi de « remplir les trois » et de « chacun de son
   côté » — deux notions que l'assistant a supprimées. La laisser décrirait un
   formulaire qui n'existe plus. */
.faf-ev-assistant .faf-ev-num,
.faf-ev-assistant .faf-ev-parcours > legend,
.faf-ev-assistant .faf-ev-consigne,
.faf-ev-assistant .faf-ev-ord { display: none; }

/* LES ONGLETS N'ONT PLUS LIEU D'ÊTRE, et `hidden` ne suffit pas à les faire
   disparaître : le thème pose un `display` sur la barre, qui neutralise
   l'attribut. Ils restaient donc cliquables — et un clic rebasculait la
   visibilité des panneaux dans le dos de l'assistant. */
.faf-ev-assistant .faf-ev-onglets { display: none !important; }

/* La question « ensemble ou chacun » n'est pas une pastille de nombre : elle sort
   du conteneur en grille, sinon ses deux options se retrouvent compressées dans
   une colonne de pastille — le texte s'y empilait lettre par mot. */
.faf-ev-ensemble .faf-ev-option--large { display: block; width: 100%; }

/* L'heure reste, et prend la place laissée libre : c'est la seule chose qu'on
   cherche des yeux en arrivant sur l'étape. */
.faf-ev-assistant .faf-ev-creneau legend { border-bottom: 0; padding-bottom: 4px; }
.faf-ev-assistant .faf-ev-heure { font-size: 25px; }

/* LE TRAIT AU-DESSUS DE L'HEURE. `.faf-ev-parcours` porte un `border-top` qui
   séparait la section des activités des coordonnées, dans un formulaire où les
   deux se suivaient. L'assistant les met sur des écrans différents : le trait n'y
   sépare plus rien et coûte une ligne de hauteur sur six qu'on a. */
.faf-ev-assistant .faf-ev-parcours { border-top: 0; padding-top: 0; }

/* Le titre de la page, au-dessus de la progression. Les légendes de section sont
   masquées par l'assistant — sans lui, rien ne dirait plus ce qu'on remplit. */
.faf-ev-prog-titre {
  margin: 0 0 8px;
  font-family: var(--ev-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 26px;
  line-height: 1.1;
  color: var(--ev-encre, #3E362D);
}

/* Le cadre et l'ombre viennent d'une règle du thème sur les blocs du formulaire :
   la progression n'est pas une carte, c'est un repère. On les retire. */
.faf-ev-prog {
  position: sticky;
  top: 0;
  z-index: 5;
  /* Serré : sur six écrans, l'en-tête se répète six fois. Chaque pixel qu'il prend
     est un pixel de moins pour la question. La marge haute est remise à zéro
     explicitement : le thème en pose trente sur les blocs du formulaire, et la
     progression n'est pas un bloc — c'est ce qui coiffe la page. */
  padding: 4px 0 8px;
  margin: 0 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(var(--ev-papier) 78%, transparent);
}
/* UN SEGMENT PAR ÉTAPE. Un filet de trois pixels disait la proportion mais pas le
   nombre : on savait qu'on avançait, jamais combien de questions restaient — et
   sur une page chaleureuse, un trait de cheveu fait accessoire de tableau de
   bord. Les segments se comptent d'un regard. */
.faf-ev-prog-piste {
  display: flex;
  gap: 5px;
}
/* `!important` PARTOUT, et c'est la troisième fois aujourd'hui : le Kit Elementor
   style TOUS les `<button>` du site — fond, marges intérieures, rayon, hauteur de
   ligne. Sans forcer, ces segments héritaient de 18 px de haut et du fond terre
   plein, y compris ceux des étapes à venir : la progression s'affichait donc
   entièrement remplie dès la première question. */
.faf-ev-prog-seg {
  flex: 1 !important;
  height: 7px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  line-height: 0 !important;
  box-shadow: none !important;
  background: rgba(62, 54, 45, .13) !important;
  transition: background .28s ease, height .2s ease;
}
/* Les étapes franchies restent CLIQUABLES : revenir sur une réponse est un droit,
   pas une manœuvre. Celles à venir ne le sont pas — on ne saute pas une question
   dans un formulaire qui en pose une à la fois. */
/* LA ZONE TOUCHÉE DÉBORDE LE TRAIT. Le segment mesure 7 px de haut : c'est une
   bonne épaisseur à regarder et une mauvaise à viser du pouce. Un ::after
   transparent l'étire à 44 px de haut sans rien déplacer — la piste garde son
   aspect de filet, la cible fait la taille d'un doigt. Il n'apparaît que sur les
   segments actifs : une étape verrouillée ne doit pas capter le geste. */
.faf-ev-prog-seg { position: relative; }
.faf-ev-prog-seg:not(:disabled) { cursor: pointer; }
.faf-ev-prog-seg:not(:disabled)::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.faf-ev-prog-seg:not(:disabled):hover { background: rgba(179, 127, 82, .75) !important; }
.faf-ev-prog-seg:focus-visible { outline: 2px solid var(--ev-teal); outline-offset: 3px; }
.faf-ev-prog-seg.est-fait { background: rgba(179, 127, 82, .45) !important; }
/* Déjà répondue, mais en aval du point où l'on se trouve. Plus pâle que
   `est-fait` — on ne l'a pas « franchie » depuis ici — et cliquable. */
.faf-ev-prog-seg.est-ouvert { background: rgba(179, 127, 82, .26) !important; }
/* L'étape en cours prend la teinte pleine et un peu de hauteur — `height` plutôt
   que `scaleY`, qui déformait aussi les coins arrondis et faisait bomber le
   segment hors de la ligne. */
.faf-ev-prog-seg.est-ici {
  background: var(--ev-terre, #B37F52) !important;
  height: 11px !important;
}

.faf-ev-prog-txt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0;
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ev-encre-douce, #8A7B6B);
  font-variant-numeric: tabular-nums;
}
/* Le rapport « 3/6 » tient la gauche ; le nom et son horaire forment un bloc à
   droite. `margin-left: auto` sur le nom fait le repoussoir — `space-between`
   sur trois enfants aurait éparpillé les deux morceaux d'une même phrase aux
   deux bouts de la ligne. */
.faf-ev-prog-nom { margin-left: auto; }
.faf-ev-prog-nom,
.faf-ev-prog-heure {
  font-family: var(--ev-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: 19px;
  line-height: 1.1;
  color: var(--ev-terre, #B37F52);
  text-align: right;
}
/* L'horaire précise le nom, il ne le concurrence pas : même corps, encre plus
   douce. Le deux-points est porté par le CSS et non par le JS — une étape sans
   horaire (« Qui vient », « Dernier mot ») ne doit pas traîner un signe seul. */
.faf-ev-prog-heure {
  color: var(--ev-encre-douce, #8A7B6B);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.faf-ev-prog-heure:not(:empty)::before {
  content: ' : ';
  color: var(--ev-encre-douce, #8A7B6B);
}

/* Les deux boutons de navigation. « Retour » reste discret : c'est une issue,
   pas une proposition — le geste attendu est d'avancer. */
.faf-ev-pas {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 22px 0 0;
}
.faf-ev-pas .faf-ev-bouton { flex: 1; }
.faf-ev-pas .faf-ev-bouton--fantome { flex: none; }
/* `hidden` est un attribut, pas une classe : le `display` que le thème pose sur
   les boutons le neutralise en silence. « Retour » restait donc visible à la
   première étape, où il ne mène nulle part. */
.faf-ev-pas .faf-ev-bouton[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .faf-ev-prog-jauge { transition: none; }
}

/* Une seule question à l'écran : le cadre du créneau n'a plus à se distinguer
   de ses voisins, il n'en a plus. Le fond et le trait tombent, la question
   respire. */
.faf-ev-assistant .faf-ev-creneaux {
  display: block;
}
.faf-ev-assistant .faf-ev-creneau,
/* Les trois teintes de colonne sont posées par `nth-child` — deux classes et une
   pseudo-classe, que le sélecteur ci-dessus ne bat pas. Le sable continuait donc
   de peindre un bloc derrière la question, et le titre du créneau chevauchait son
   bord supérieur : la couleur servait à distinguer trois colonnes voisines, il
   n'en reste qu'une. */
.faf-ev-assistant .faf-ev-creneaux > .faf-ev-creneau {
  border: 0;
  background: none;
  box-shadow: none;
}
.faf-ev-assistant .faf-ev-creneau legend {
  padding-left: 0;
  padding-right: 0;
}
.faf-ev-assistant .faf-ev-creneau-corps { padding-left: 0; padding-right: 0; }

/* DEUX SECTIONS SUR UN MÊME ÉCRAN SE TOUCHENT PLUS QUE DEUX SECTIONS ÉLOIGNÉES.
   Le formulaire long séparait ses blocs de 38 px, plus 20 px de retrait sur la
   légende — près de soixante pixels, justes quand on défile d'une section à la
   suivante. L'assistant met « Vos coordonnées » et « Vous venez à combien ? »
   dans la même étape : le même écart y creuse un trou au milieu de l'écran. */
.faf-ev-assistant .faf-ev-bloc + .faf-ev-bloc { margin-top: 24px; }
.faf-ev-assistant .faf-ev-bloc + .faf-ev-bloc > legend { padding-top: 0; }

/* Le choix « ensemble ou chacun », sous le nombre de personnes. */
.faf-ev-ensemble { margin-top: 16px; }
.faf-ev-option--large { margin-bottom: 8px; }

/* ── LA PUCE DE SÉLECTION ──
   Le bouton radio natif est masqué : c'est la carte entière qui sert de cible, et
   son état coché ne se disait que par un fond et une bordure. Sur « Rien à ce
   moment-là », coché par défaut et volontairement discret, le repère était trop
   faible — on ne voyait pas que le choix était déjà fait, et on cherchait quoi
   cocher.

   Une puce ronde devant le titre rend l'état lisible partout, avec la convention
   que tout le monde connaît. Le crochet est un SVG en `data:` plutôt qu'un
   caractère : « ✓ » change de dessin selon la police installée, et se retrouvait
   décalé dans son rond. */
/* LA COCHE EST UNE COLONNE, plus une puce collée au premier mot. Inline devant le
   titre, elle montait avec lui : sur une carte à deux lignes elle se retrouvait à
   hauteur de la première, et l'œil ne la trouvait plus au même endroit d'une carte
   à l'autre. En colonne, centrée verticalement, elle est toujours là où la main
   la cherche. */
.faf-ev-option {
  display: flex;
  align-items: center;
  gap: 13px;
}
.faf-ev-coche {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(62, 54, 45, .3);
  background: transparent center/11px 11px no-repeat;
  transition: background-color .18s, border-color .18s;
}
.faf-ev-corps { flex: 1; min-width: 0; }

/* La tête : le genre à gauche, les places à droite, sur la même ligne. Ce sont
   les deux informations qu'on compare d'une carte à l'autre — elles doivent être
   à la même hauteur partout, et aux deux bouts pour qu'on les distingue d'un
   regard sans les lire. */
.faf-ev-corps > .faf-ev-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
/* La salle ferme la carte : elle ne sert plus à choisir, seulement à se repérer
   le jour venu. */
.faf-ev-salle {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ev-encre-douce, #8A7B6B);
}

.faf-ev-option:has(input:checked) .faf-ev-coche {
  border-color: var(--ev-teal);
  background-color: var(--ev-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l5 5L20 6'/%3E%3C/svg%3E");
}
/* Le refus garde sa discrétion : sa puce se coche en encre, pas en turquoise —
   c'est une option retenue, pas une activité choisie. */
.faf-ev-option--rien:has(input:checked) .faf-ev-coche {
  border-color: var(--ev-encre, #3E362D);
  background-color: var(--ev-encre, #3E362D);
}
/* Complet ou incompatible : la puce reste creuse, elle ne promet rien. */
.faf-ev-option.est-complet .faf-ev-coche,
.faf-ev-option.est-incompatible .faf-ev-coche {
  border-style: dashed;
}

/* LE BLOC DES SÉANCES TRAVERSE LA LARGEUR. Il vivait dans la grille des trois
   créneaux et en devenait une quatrième colonne : replié seul sur la ligne
   suivante, il prenait un tiers de la largeur pour six cents pixels de haut. Or
   ce n'est pas un quatrième horaire, c'est une plage qui court sur les trois. */
.faf-ev-creneaux > .faf-ev-creneau--seances { grid-column: 1 / -1; }

/* Les horaires en matrice : douze séances empilées font une colonne interminable
   pour ce qui tient en quatre lignes. `auto-fit` plutôt qu'un nombre fixe — la
   grille se resserre d'elle-même sur un écran étroit, sans point de rupture à
   tenir à jour. */
.faf-ev-seances-grille {
  display: grid;
  /* 140 px, ET AUTO-FIT CONSERVÉ. Mesuré : le libellé « 14h00 – 14h20 » tient
     sur une ligne dès 134 px de cellule. À 148 px, l'iPhone n'obtenait qu'UNE
     colonne — il en reste 144 par cellule pour deux — et l'étape faisait 1036 px
     là où l'écran en offre 768. À 140 on passe à deux colonnes avec six pixels
     de marge, et la grille tombe de 642 à 318 px : tout le choix tient d'un
     regard, « Pas de séance » compris.
     `auto-fit` reste indispensable : sur un écran de 360 px il n'y a place que
     pour 129 px par cellule, et la grille redescend d'elle-même à une colonne
     plutôt que de couper chaque horaire en deux lignes. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

/* 44 px DE HAUT AU MINIMUM. Mesurés à 37 px, ces créneaux passaient sous le
   seuil de la cible tactile — et c'est la grille la plus dense de tout le
   formulaire, douze pastilles de vingt minutes côte à côte, donc celle où un
   doigt se trompe le plus facilement de voisin. `min-height` plutôt qu'un
   padding calculé : la hauteur tient quel que soit le contenu. */
.faf-ev-creneau--seances .faf-ev-option--seance {
  display: flex;
  align-items: center;
  /* Marges intérieures resserrées : ce sont elles qui décidaient du nombre de
     colonnes, et un horaire de treize caractères n'a pas besoin de onze pixels
     de part et d'autre. */
  gap: 8px;
  margin: 0;
  padding: 8px;
  min-height: 44px;
}
/* Une heure n'a pas besoin d'une coche aussi grosse qu'un titre d'atelier. */
.faf-ev-option--seance .faf-ev-coche { width: 17px; height: 17px; background-size: 9px 9px; }
.faf-ev-creneau--seances .faf-ev-option--seance .faf-ev-titre {
  font-variant-numeric: tabular-nums;
}
.faf-ev-pris {
  font-size: 12px;
  font-style: italic;
  color: var(--ev-encre-douce, #8A7B6B);
}

/* `margin-top:auto` DOIT être écrit ici, après `.faf-ev-option { margin: 0 0 8px }` :
   la forme courte `margin` remet le haut à zéro, et posée plus bas dans la feuille
   elle l'emportait. Le trait de séparation retombait alors à trois hauteurs
   différentes — les boîtes étaient bien égalisées, mais ça se voyait. */
.faf-ev-option--rien { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--ev-filet); }
/* Le refus n'est pas une activité : sa carte reste creuse tant qu'on ne la choisit
   pas, pour ne pas peser autant que les trois vraies propositions au-dessus.

   PAS DE `border-style` SUR LE LIBELLÉ. Il n'a pas de largeur de bordure définie :
   poser un style seul réveille la valeur initiale `medium`, soit 3 px, et dessine
   un rectangle en pointillé autour du texte — « Rien à ce moment-là » devenait
   illisible, comme raturé. Le creux voulu, c'est la carte qui le porte, par le
   `border-top` en pointillé juste au-dessus. */
.faf-ev-option--rien label { background: transparent; }
.faf-ev-option--rien .faf-ev-titre { font-size: 13.5px; color: #8A7B6B; }
/* Coché, il reste DISCRET. Le turquoise des vraies activités le faisait ressortir
   comme une réussite — et par défaut deux colonnes sur trois s'allumaient sans que
   le visiteur ait rien choisi. Un fond à peine posé suffit à dire « c'est l'option
   retenue » sans lui donner le poids d'un atelier. */
/* SUR LA CARTE, comme toutes les autres options — et non sur le libellé, qui n'a
   ni marge intérieure ni coins arrondis : le fond y dessinait un rectangle à
   angles vifs collé au texte, à l'intérieur d'une carte arrondie de treize pixels
   de marge. Le repère se lisait comme une rature plutôt que comme une sélection.
   Les trois déclarations annulent celles de `.faf-ev-option:has(input:checked)` :
   le turquoise, sa bordure et son liseré intérieur. */
.faf-ev-option--rien:has(input:checked) {
  background: rgba(62, 54, 45, .05);
  border-color: rgba(62, 54, 45, .22);
  box-shadow: none;
}
/* `:has()` et non l'adjacence : la coche s'intercale désormais entre le bouton
   radio et son libellé, et `input + label` ne les voit plus voisins. Le refus
   retenu reprenait alors le vert des vraies activités, alors qu'il doit rester
   discret. Les pastilles de nombre (.faf-ev-compte) gardent l'adjacence : leur
   balisage, lui, n'a pas bougé. */
.faf-ev-option--rien:has(input:checked) .faf-ev-titre { color: var(--ev-texte); font-weight: 600; }
/* La réflexologie en continu : rappelée, jamais proposée au choix — la cocher
   ferait perdre au visiteur un créneau qu'il peut passer ailleurs. */
.faf-ev-libre {
  font-size: 12.5px;
  color: #8A7B6B;
  margin: 0 0 9px;
  padding-left: 26px;
  font-style: italic;
}

.faf-ev-envoi { margin: 26px 0 0; text-align: center; }
.faf-ev-bouton {
  background: var(--ev-teal) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--ev-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: 16px 38px !important;
  cursor: pointer;
  box-shadow: 0 16px 30px -16px rgba(88, 172, 159, .9);
  transition: background .25s, transform .25s;
}
.faf-ev-bouton:hover { background: #3D8579 !important; transform: translateY(-2px); }
.faf-ev-recap {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: #8A7B6B;
}
/* Un créneau resté sans réponse. Le ton reste celui du site — terre plutôt que
   rouge d'alerte : il ne s'agit pas d'une faute mais d'une question qu'on n'a pas
   encore posée. La graisse suffit à la détacher du gris d'aide qui l'entoure. */
.faf-ev-recap--manque {
  color: #95633A;
  font-weight: 600;
}
.faf-ev-legal { font-size: 12.5px; color: #8A7B6B; text-align: center; margin: 12px 0 0; }

.faf-ev-msg {
  border-radius: 14px;
  padding: 13px 16px;
  margin: 0 0 20px;
  font-size: 14.5px;
}
.faf-ev-msg.is-ok  { background: rgba(88, 172, 159, .14); color: #2F6B60; }
.faf-ev-msg.is-err { background: rgba(192, 133, 90, .16); color: #8F5A2E; }

/* ── LE BANDEAU DE REPRISE ────────────────────────────────────────────────────
   Un formulaire déjà rempli ressemble à s'y méprendre à une nouvelle inscription
   que le navigateur aurait complétée : sans un cadre qui dit où l'on est, on
   hésite à envoyer de peur de réserver deux fois. Il prend donc le vert de
   l'accueil, et non l'orangé des erreurs — c'est un service, pas un avertissement. */
.faf-ev-modif-bandeau {
  margin: 0 0 26px;
  padding: 18px 22px;
  border: 1px solid rgba(88, 172, 159, .38);
  border-left: 4px solid #58AC9F;
  border-radius: 14px;
  background: rgba(88, 172, 159, .08);
  font-family: var(--ev-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ev-encre);
}
.faf-ev-modif-bandeau p { margin: 0 0 8px; }
.faf-ev-modif-bandeau p:last-child { margin-bottom: 0; }
.faf-ev-modif-note { font-size: 13px; color: #6B6053; }
.faf-ev-modif-titre {
  font-family: var(--ev-serif);
  font-size: 21px;
  line-height: 1.2;
  color: #2F6B60;
}
/* LES DEUX SORTIES SONT DES BOUTONS. En liens soulignés, elles se lisaient comme
   la prose du bandeau et non comme les deux issues qu'elles sont. Ce sont des <a>
   — elles quittent la page, elles n'écrivent rien — mais le Kit d'Elementor style
   tous les <a> du site : chaque propriété qu'il pose est reprise ici, sinon fond,
   couleur et soulignement reviennent par la bande. */
.faf-ev-modif-sortie { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px !important; }
.faf-ev-modif-sortie a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;                       /* la cible tactile, pas la hauteur du texte */
  padding: 11px 24px !important;
  border-radius: 100px !important;
  font-family: var(--ev-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* Rester porte la couleur pleine : c'est le geste sans conséquence, et celui vers
   lequel on veut pencher quand on hésite. Même règle que la page d'annulation. */
.faf-ev-modif-sortie .faf-ev-modif-rester {
  background: #58AC9F !important;
  border: 1.5px solid #58AC9F !important;
  color: #fff !important;
}
.faf-ev-modif-sortie .faf-ev-modif-rester:hover {
  background: #3d8579 !important;
  border-color: #3d8579 !important;
}
/* Annuler est rouge, mais EN CONTOUR. Rempli, il deviendrait l'objet le plus
   voyant du bandeau — on n'attire pas vers ce qui défait. Le contour dit le
   danger sans le proposer ; le rouge plein arrive au survol, quand le geste est
   déjà décidé. Le clic n'annule d'ailleurs rien : il mène à la page qui montre ce
   qui est réservé et demande confirmation. */
.faf-ev-modif-sortie .faf-ev-modif-annuler {
  background: transparent !important;
  border: 1.5px solid #B23A2E !important;
  color: #B23A2E !important;
}
.faf-ev-modif-sortie .faf-ev-modif-annuler:hover {
  background: #B23A2E !important;
  border-color: #B23A2E !important;
  color: #fff !important;
}
.faf-ev-modif-sortie a:focus-visible {
  outline: 2px solid var(--ev-clay) !important;
  outline-offset: 3px !important;
}
@media (max-width: 560px) {
  .faf-ev-modif-bandeau { padding: 15px 16px; border-radius: 12px; }
  .faf-ev-modif-titre { font-size: 19px; }
  /* Empilés et pleine largeur : deux boutons de 44 px côte à côte sur un petit
     écran se touchent, et l'on vise l'annulation en voulant rester. */
  .faf-ev-modif-sortie { flex-direction: column; }
  .faf-ev-modif-sortie a { width: 100% !important; }
}

@media (max-width: 900px) {
  /* Trois colonnes de 200 px ne tiennent pas : les créneaux redeviennent une pile,
     mais une pile de trois — pas de douze, puisqu'un seul parcours est ouvert. */
  .faf-ev-creneaux { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 700px) {
  .faf-ev-form { padding: 24px 18px 22px; border-radius: 20px; margin-top: 26px; }
  .faf-ev-champs { grid-template-columns: 1fr; }
  .faf-ev-compte label { width: 44px; height: 44px; font-size: 19px; }
  .faf-ev-onglet { padding: 8px 13px !important; font-size: 12.5px !important; }
}

/* Le premier prénom se recopie depuis les coordonnées : le libellé le dit, en plus
   discret que le libellé lui-même — c'est une précision, pas une consigne. */
.faf-ev-note-champ { text-transform: none; letter-spacing: normal; font-weight: 400; color: #A98D74; }

/* ── La fenêtre de relecture ─────────────────────────────────────────────────
   Elle montre l'après-midi telle qu'elle partira. On remplit douze boutons radio en
   les regardant un par un, jamais ensemble : c'est le seul moment où l'on peut voir
   qu'on a oublié quelqu'un. Sans JavaScript elle n'existe pas et l'envoi part
   directement — c'est un confort de relecture, pas une étape de plus. */
.faf-ev-confirm[hidden] { display: none !important; }
.faf-ev-confirm {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(62, 54, 45, .58);
  backdrop-filter: blur(3px);
}
.faf-ev-confirm-in {
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--ev-papier);
  border-radius: 24px;
  padding: 30px 30px 26px;
  box-shadow: 0 50px 90px -50px rgba(62, 54, 45, .9);
}
.faf-ev-confirm h3 {
  margin: 0 0 18px;
  font-family: var(--ev-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--ev-clay);
}
.faf-ev-confirm-p { padding: 14px 0; border-top: 1px solid var(--ev-filet); }
.faf-ev-confirm-p:first-child { border-top: 0; padding-top: 0; }
.faf-ev-confirm-nom {
  margin: 0 0 8px;
  font-family: var(--ev-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ev-terre);
}
.faf-ev-confirm ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.faf-ev-confirm li {
  font-family: var(--ev-sans);
  font-size: 14.5px;
  color: var(--ev-encre);
  line-height: 1.35;
}
.faf-ev-confirm li .h {
  display: inline-block;
  min-width: 118px;
  font-family: var(--ev-serif);
  font-size: 17px;
  color: var(--ev-clay);
}
.faf-ev-confirm li small { display: block; margin-left: 118px; font-size: 12.5px; color: #8A7B6B; }

/* LA LIGNE RELUE RAMÈNE À SON CRÉNEAU.
   C'est un <button>, et le Kit d'Elementor style tous les <button> de la page :
   sans reprendre chacune des propriétés qu'il pose, la relecture s'afficherait en
   pavés bruns à coins arrondis. On ne lui laisse que le curseur. */
.faf-ev-confirm li .faf-ev-confirm-vers {
  position: relative;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 5px 30px 5px 8px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  color: inherit !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
  /* Le Kit met `nowrap` sur les <button> : un intitulé d'atelier tenait alors sur
     une seule ligne de 690 px dans une fenêtre de 560, et la relecture partait en
     défilement horizontal. */
  white-space: normal !important;
  overflow-wrap: break-word;
  cursor: pointer;
  transition: background-color .18s ease;
}
/* Le chevron dit que la ligne mène quelque part — discret tant qu'on relit,
   net dès qu'on la survole. */
.faf-ev-confirm li .faf-ev-confirm-vers::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 11px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid var(--ev-clay);
  border-bottom: 2px solid var(--ev-clay);
  transform: rotate(-45deg);
  opacity: .3;
  transition: opacity .18s ease, transform .18s ease;
}
.faf-ev-confirm li .faf-ev-confirm-vers:hover,
.faf-ev-confirm li .faf-ev-confirm-vers:focus-visible {
  background: rgba(149, 99, 58, .08) !important;
}
.faf-ev-confirm li .faf-ev-confirm-vers:focus-visible {
  outline: 2px solid var(--ev-clay) !important;
  outline-offset: 2px !important;
}
.faf-ev-confirm li .faf-ev-confirm-vers:hover::after,
.faf-ev-confirm li .faf-ev-confirm-vers:focus-visible::after {
  opacity: .8;
  transform: rotate(-45deg) translate(2px, 2px);
}
@media (prefers-reduced-motion: reduce) {
  .faf-ev-confirm li .faf-ev-confirm-vers,
  .faf-ev-confirm li .faf-ev-confirm-vers::after { transition: none; }
}
.faf-ev-confirm-rien { margin: 0; font-family: var(--ev-sans); font-size: 14px; color: #8A7B6B; font-style: italic; }

/* L'ENCHAÎNEMENT SERRÉ SE SIGNALE, IL N'INTERDIT PAS. Ni rouge ni pictogramme
   d'alerte : rien n'est fautif, et le choix reste bon. L'ocre du site suffit à
   faire lever les yeux. */
.faf-ev-confirm-serre,
.faf-ev-part-serre {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-left: 3px solid #C0855A;
  border-radius: 0 8px 8px 0;
  background: rgba(192, 133, 90, .10);
  font-family: var(--ev-sans);
  font-size: 13px;
  line-height: 1.45;
  color: #8F5A2E;
}
.faf-ev-confirm-note {
  margin: 18px 0 0;
  font-family: var(--ev-sans);
  font-size: 12.5px;
  color: #8A7B6B;
}
.faf-ev-confirm-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
/* Le bouton « Modifier » ne doit pas peser autant que « Confirmer » : c'est un
   retour en arrière, pas une action à égalité. */
.faf-ev-bouton--fantome {
  background: transparent !important;
  color: var(--ev-clay) !important;
  border: 1px solid rgba(150, 90, 45, .38) !important;
  box-shadow: none !important;
}
.faf-ev-bouton--fantome:hover { background: rgba(150, 90, 45, .08) !important; transform: none; }

@media (max-width: 560px) {
  .faf-ev-confirm-in { padding: 22px 18px 20px; border-radius: 20px; }
  .faf-ev-confirm li .h { min-width: 0; display: block; }
  .faf-ev-confirm li small { margin-left: 0; }
  .faf-ev-confirm li .faf-ev-confirm-vers { padding-right: 26px !important; }
  .faf-ev-confirm-actions { flex-direction: column-reverse; }
  .faf-ev-confirm-actions .faf-ev-bouton { width: 100%; }
}


/* ── Le fond du premier écran ────────────────────────────────────────────────
   L'arbre se carrelait. La règle posée par Elementor donne l'image, la couleur
   et la position, mais pas la répétition — et la valeur par défaut du CSS est
   justement `repeat`. Sur une section de 1488 × 865 avec une image de 940 × 788,
   cela faisait quatre arbres : deux de large, deux de haut, dont on apercevait
   les cimes tronquées en bord de section.

   `!important` parce que la règle d'Elementor porte quatre classes et est
   injectée dans la page ; c'est l'idiome déjà retenu dans cette feuille pour
   reprendre la main sur ses valeurs. Le réglage existe aussi dans l'éditeur
   (Style › Arrière-plan › Répétition) : le poser des deux côtés ne gêne pas,
   les valeurs concordent. */
.elementor-2217 .elementor-element.elementor-element-s006 {
  background-repeat: no-repeat !important;
}

/* ─── Le bouton « Continuer » éteint ────────────────────────────────────────
   Il ne s'allume qu'une fois l'étape complète. Laissé actif puis refusant le
   clic, il ne se distinguait pas d'un bouton cassé — c'est ainsi qu'il a été
   pris pour tel. Éteint, il annonce l'attente au lieu de la sanctionner. */
.faf-ev-pas .faf-ev-bouton[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.faf-ev-pas .faf-ev-bouton[disabled]:hover { transform: none; }

/* ─── Les séances rangées dans une colonne ──────────────────────────────────
   Un filet les sépare des ateliers : ce ne sont pas des choix de même nature.
   L'atelier vaut pour ce créneau, la séance vaut pour tout l'après-midi. */
.faf-ev-part-seances {
  margin: 14px 0 10px;
  padding: 14px 16px 12px;
  border: 1px solid var(--ev-filet, rgba(62, 54, 45, .16));
  border-radius: 14px;
  background: rgba(255, 255, 255, .5);
  transition: border-color .18s, background-color .18s;
}
/* Une heure prise ici : le cadre le dit d'un coup d'oeil, comme une carte cochée. */
.faf-ev-part-seances:has(input[type="radio"]:checked) {
  border-color: var(--ev-teal, #58AC9F);
  background: rgba(88, 172, 159, .06);
}
.faf-ev-part-tete {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
}
.faf-ev-part-titre {
  font-size: 13.5px;
  font-weight: 600;
  color: #95633A;
  line-height: 1.35;
}
.faf-ev-part-titre span {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: #8A7B6B;
  margin-top: 2px;
}
/* La puce de la carte n'est pas un bouton : elle reflète l'etat du groupe, et
   c'est l'heure choisie qui la teint. Meme turquoise que les autres coches, pour
   qu'on lise « choisi » et non « autre chose ». */
.faf-ev-part-seances:has(input[type="radio"]:checked) > .faf-ev-part-tete .faf-ev-coche {
  border-color: var(--ev-teal, #58AC9F);
  background-color: var(--ev-teal, #58AC9F);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l5 5L20 6'/%3E%3C/svg%3E");
}


/* ─── L'ancre d'inscription vise le titre, pas le haut de la section ────────
   `#inscription` commence une centaine de pixels avant « L'entrée est libre,
   l'inscription est obligatoire » : on arrivait sur la fin de la section des
   praticiens, et il fallait encore défiler pour comprendre où l'on avait atterri.
   Une marge négative fait descendre le point d'arrêt d'autant — elle se retranche
   du `scroll-padding-top` de 112px qui dégage déjà l'en-tête collant. */
#inscription { scroll-margin-top: -100px; }

/* ─── LE FOND DU HÉROS TIENT DANS L'ÉCRAN ÉTROIT ────────────────────────────
   L'arbre de la Follie mesure 940 px de large et la section n'en fait plus que
   485 sur un téléphone. Réglé en `background-size: auto` — sa taille naturelle —
   et calé à droite, il n'en restait que la moitié droite à l'écran : le tronc
   sortait du cadre et l'arbre, qui est le sujet, ne se voyait quasiment pas.

   `contain` le fait tenir en entier, `bottom` l'assoit au bas de la section :
   il pousse depuis le pied du héros, sous le titre, ce qui est sa place. Essayé
   en `cover` d'abord — l'image y est agrandie au point qu'il ne reste qu'un tronc
   délavé derrière les cartes.

   Seul le CADRAGE est figé ici, pas l'image : Marie change celle-ci depuis
   Elementor comme avant, et le réglage grand écran n'est pas touché. */
@media (max-width: 900px) {
  #faf-hero {
    background-size: contain !important;
    background-position: center bottom !important;
  }
}

@media (max-width: 900px) {
  /* Les pastilles d'heure au doigt. Elles mesuraient 39 px de haut — assez pour
     l'œil, un peu court pour le pouce, et les recommandations tactiles parlent de
     44. Elles ont changé de place en rejoignant les colonnes : autant régler la
     cible pendant qu'on y est. La largeur, elle, ne manquait pas (245 px). */
  .faf-ev-part-seances .faf-ev-option--seance { min-height: 44px; }
  .faf-ev-part-seances .faf-ev-option--seance label { display: flex; align-items: center; }
}

/* ─── Une séance déjà prise, un atelier saturé par les siens ────────────────
   « Pris par Marie » et « les dernières places partent aux vôtres » se lisent
   comme « déjà pris » : même traitement — l'heure n'est plus disponible, la
   ligne reste lisible. La carte, elle, garde ses couleurs : rien n'est cassé. */
.faf-ev-option.est-prise-ailleurs,
.faf-ev-option.est-sans-place,
/* `est-deja-une` a disparu : les heures de séance partagent un seul groupe de
   boutons, donc en cocher une décoche l'autre. Rien à éteindre — et surtout rien
   à rendre inclicquable, c'est ce qui empêchait de changer d'avis. */
.faf-ev-option.est-prise-ailleurs label,
.faf-ev-option.est-sans-place label { cursor: not-allowed; }
.faf-ev-pris-par { font-size: 11px; color: #95633A; white-space: nowrap; }

/* Le rappel sous une carte qui ne porte pas le choix. Discret : il informe, il
   n'alerte pas — rien n'est cassé, une seule séance est la règle annoncée. */
.faf-ev-part-ailleurs {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #8A7B6B;
  font-style: italic;
}