/* L'annuaire des praticiennes certifiées.
   Aucune couleur nouvelle : tout vient des jetons de la charte, définis dans
   global.css. Le terracotta fort (--terra-text) porte du blanc, le terracotta
   clair (--terra) porte du sombre — jamais l'inverse. */

.annuaire { --ann-terre: #e0d5c6; --ann-terre-vive: #d0bfa8; --ann-mer: #f5f1eb; }

/* ---------- L'en-tête, où la recherche est le sujet ---------- */

.ann-hero { background: linear-gradient(135deg, var(--cream), #f9f6f0 56%, #ece3d6); padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
/* LE TITRE A DROIT A TOUTE LA BANDE ; LE TEXTE COURANT, NON.

   Le titre etait serre deux fois : une colonne de 46rem, et par-dessus un
   max-width de VINGT caracteres. Il se cassait donc trois fois pendant qu'un
   tiers du bandeau restait vide a droite — trois fragments empiles la ou il y
   avait la place d'une phrase.

   On separe les deux besoins, parce qu'ils sont contraires. Un titre veut de la
   largeur : c'est elle qui lui evite de se casser. Un paragraphe veut une
   mesure : au-dela d'environ 70 signes, l'oeil perd le debut de la ligne
   suivante. La bande s'ouvre donc pour le titre, et tout le reste garde
   exactement la largeur qu'il avait. */
.ann-hero__inner { max-width: 64rem; }
.ann-hero__inner > :not(.ann-hero__titre) { max-width: 46rem; }
.ann-hero__titre { max-width: 26ch; margin-bottom: .3em; }
.ann-hero .lead { margin-bottom: 2rem; }

.ann-recherche { display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch; }
.ann-recherche__champ { position: relative; flex: 1 1 22rem; min-width: 0; }

.ann-recherche__loupe { position: absolute; left: 1.15rem; top: 50%; translate: 0 -50%; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }

/* SÉLECTEUR VOLONTAIREMENT LONG, et ce n'est pas de la maladresse.
   resources/css/forms.css impose à tous les champs du site un rembourrage de
   .9rem, un arrondi de 12 px et une hauteur de 2.9rem, avec le sélecteur
   « :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), …) »
   dont la spécificité vaut (0,3,1) — et cette feuille est chargée APRÈS celle du
   module (position 10 contre 3 dans layout.php).

   Un simple « .ann-recherche input » (0,1,1) perd donc, et perd en silence :
   mesuré dans le navigateur le 26 août 2026, la loupe se retrouvait posée sur le
   texte du champ parce que le rembourrage gauche retombait de 3.1rem à .9rem.
   Il faut (0,4,1) pour passer devant : trois classes plus l'attribut de type. */
.annuaire .ann-recherche .ann-recherche__champ input[type="search"] {
  width: 100%; height: auto; padding: 1.05rem 3rem 1.05rem 3.1rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  font: 400 var(--step-0)/1.4 var(--font-body); color: var(--ink);
  box-shadow: 0 10px 30px rgba(80, 83, 85, .07);
}
.ann-recherche input::placeholder { color: #96938d; }
.ann-recherche input::-webkit-search-cancel-button { display: none; }

.ann-recherche__vider { position: absolute; right: .9rem; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.ann-recherche__vider:hover { background: var(--terra); color: var(--white); }

.ann-recherche__autour {
  display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto;
  padding: 1.05rem 1.4rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--terra-text);
  font: 600 var(--step--1)/1 var(--font-body); cursor: pointer;
}
.ann-recherche__autour svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ann-recherche__autour:hover { background: var(--terra-text); color: var(--white); border-color: var(--terra-text); }
.ann-recherche__autour[disabled] { opacity: .5; cursor: progress; }

.ann-aide { margin: .9rem 0 0; font-size: var(--step--1); color: var(--muted); text-align: left; }
.ann-aide[data-ton="erreur"] { color: #752c22; }

/* ---------- Les suggestions de villes ---------- */

.ann-suggestions {
  position: absolute; z-index: 12; inset: calc(100% + .5rem) 0 auto 0;
  margin: 0; padding: .4rem; list-style: none;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); max-height: 19rem; overflow-y: auto;
}
.ann-suggestions li { padding: .7rem .95rem; border-radius: 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.ann-suggestions li:hover, .ann-suggestions li[aria-selected="true"] { background: var(--cream); }
.ann-suggestions b { font-weight: 600; }
.ann-suggestions span { font-size: var(--step--1); color: var(--muted); flex: 0 0 auto; }

/* ---------- Le couple carte / liste ---------- */

.ann-outil { padding-block: clamp(2rem, 5vw, 3.5rem); }
.ann-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(21rem, .95fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.ann-bascule { display: none; }

/* ---------- La carte ---------- */

/* `sticky` sert deux buts d'un coup : la carte reste sous les yeux pendant qu'on
   fait défiler la liste, ET elle constitue le bloc de référence des éléments
   posés en absolu à l'intérieur — boutons de zoom, mention, bouton « ailleurs ». */
.ann-carte { position: sticky; top: 100px; background: var(--ann-mer); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* LE FONDU SUR LES BORDS DE LA CARTE.

   Leon, le 2 septembre 2026 : « la fin de la vignette arrive pile-poil a la fin
   de la carte […] il faut avec une espece de fondu ». C'est exact, et ce n'est
   pas un cas rare : la carte se zoome et se deplace, et des qu'on approche d'une
   ville proche du cadre, son point se fait couper NET par l'overflow — mesure a
   46 px au-dela du bord apres six crans de zoom.

   VINGT-QUATRE PIXELS, ET PAS UN CHIFFRE AU HASARD : c'est deja var(--radius),
   le rayon des coins de la carte. Le fondu suit donc l'arrondi du cadre au lieu
   de le contredire.

   DEUX DEGRADES CROISES par mask-composite: intersect — un seul, horizontal,
   laisserait les bords haut et bas nets. Le prefixe -webkit- reste necessaire
   pour Safari, qui ne connait pas encore mask-composite sans lui. */
.ann-carte__svg {
  display: block; width: 100%; aspect-ratio: 1 / 1; touch-action: none; cursor: grab;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-composite: intersect;
}
.ann-carte__svg.est-tire { cursor: grabbing; }

.ann-carte__fond path { fill: var(--ann-terre); stroke: var(--ann-mer); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.ann-carte__fond path.a-du-monde { fill: var(--ann-terre-vive); }
.ann-carte__departements path { fill: none; stroke: var(--ann-mer); stroke-width: .9; vector-effect: non-scaling-stroke; }

.ann-carte__cible { fill: transparent; stroke: none; pointer-events: all }
/* DES POINTS FINS. Ils étaient devenus des pastilles : un liseré blanc de
   2,5 px autour d'un disque de 14, épaissi à 4 quand la recherche les
   désigne — trois anneaux concentriques qui écrasaient le fond de carte.
   Le liseré tombe à 1,5 px : il sert à détacher le point du beige, pas à
   se voir lui-même. */
.ann-carte__points circle:not(.ann-carte__cible) { fill: var(--terra-text); stroke: var(--white); stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .15s, opacity .15s, stroke-width .15s; }

/* LA CIBLE ÉTAIT VISIBLE, ET C'EST TOUT LE DÉFAUT.
   Trois cercles concentriques composent un marqueur : le point (10 px), son
   halo (22 px, opacité .16) et une CIBLE de 24 px qui n'existe que pour être
   attrapable au doigt — « il ne se voit pas, il se clique », dit le script.

   Mais `.ann-carte__cible { fill: transparent }` pèse (0,1,0) et
   `.ann-carte__points circle` pèse (0,1,1) : la seconde gagnait, et peignait la
   cible en terracotta plein. Le marqueur affiché faisait donc 24 px au lieu de
   11, recouvrait entièrement son propre halo, et le liseré blanc cerclait la
   grosse cible au lieu du petit point.

   Léon voyait juste — « les vignettes sont trop grosses » — mais il n'y avait
   rien à réduire : le point est déjà fin, le liseré existe déjà. Ils étaient
   poses sur le mauvais cercle. Le `:not()` ci-dessus rend a la ligne du dessous
   ce qu'elle demandait depuis le debut. Le marqueur passe de 24 a ~11 px. */
/* Le survol ne repeint que le POINT. La cible est invisible et le halo a sa
   propre couleur pale : les inclure faisait grossir et foncer tout le marqueur. */
.ann-carte__points g:hover circle:not(.ann-carte__cible):not(.ann-carte__halo),
.ann-carte__points g.est-vise circle:not(.ann-carte__cible):not(.ann-carte__halo) { fill: var(--ink); }

/* CE QUE LA RECHERCHE DÉSIGNE.
   Les points retenus gardent le terracotta de la charte et épaississent leur
   liseré blanc — un halo qui ne bouge pas au zoom, puisque le liseré est en
   non-scaling-stroke. Pas d'or ici : sur le beige de la carte il ne tient que
   2,07 de contraste, et il aurait fallu l'inventer alors que le terracotta
   était déjà là.

   Les autres passent au gris de la charte, atténués. Ils ne disparaissent pas :
   au survol, au focus et pendant qu'on les vise depuis la liste, ils
   retrouvent leur pleine présence — d'où les :not() qui suivent. Chercher
   Lyon ne doit pas empêcher de cliquer sur Grenoble.

   La distinction ne repose jamais sur la seule couleur : les retenus sont
   aussi 35 % plus grands (voir redimensionnerPoints dans script.js). */
.ann-carte__points.a-une-selection g:not(.est-retenu):not(:hover):not(:focus-visible):not(.est-vise) circle:not(.ann-carte__cible) { fill: var(--muted); opacity: .4; }
.ann-carte__points.a-une-selection g:not(.est-retenu):not(:hover):not(:focus-visible):not(.est-vise) text { opacity: .4; }
.ann-carte__points.a-une-selection g.est-retenu circle:not(.ann-carte__cible) { stroke-width: 2.2; }
.ann-carte__points g:focus-visible { outline: none; }
/* Le contour de focus se pose sur le point, jamais sur la cible : trace autour
   d'un cercle invisible de 24 px, il dessinait un anneau flottant sans objet. */
.ann-carte__points g:focus-visible circle:not(.ann-carte__cible) { stroke: var(--focus); stroke-width: 4; }
.ann-carte__points text { font: 600 9px var(--font-body); fill: var(--white); text-anchor: middle; dominant-baseline: central; pointer-events: none; }

.ann-carte__outils { position: absolute; right: .8rem; top: .8rem; display: grid; gap: .35rem; }
.ann-carte__outils button {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .94);
  color: var(--ink); font: 600 1.1rem/1 var(--font-body); cursor: pointer;
}
.ann-carte__outils button:hover { background: var(--white); border-color: var(--terra); }
.ann-carte__outils svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* « 1 autre ailleurs dans le monde » : posé sur la carte, il emmène au planisphère.
   Sans lui, la carte ouverte sur l'Europe laisserait croire qu'il n'y a personne
   au Québec — alors que la fiche est là, dans la liste, juste à côté. */
.ann-ailleurs {
  position: absolute; left: .8rem; top: .8rem; z-index: 5;
  padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: var(--terra-text);
  font: 600 .78rem/1 var(--font-body); cursor: pointer;
}
.ann-ailleurs::after { content: " ↗"; }
.ann-ailleurs:hover { background: var(--terra-text); color: var(--white); border-color: var(--terra-text); }

/* La mention est un BANDEAU SOUS LA CARTE, pas un texte posé dessus. Posée en
   absolu, elle chevauchait le bord arrondi et, sur téléphone, passait par-dessus
   la Corse. Un bandeau ne recouvre jamais rien. */
.ann-carte__note { margin: 0; padding: .5rem .95rem .6rem; border-top: 1px solid var(--line); background: var(--white); font-size: .72rem; color: var(--muted); text-align: left; }

/* ---------- La carte qui suit le survol d'un point ----------

   C'ÉTAIT UNE PASTILLE OVALE, et elle tenait mal : deux lignes centrées dans un
   arrondi de 999px, sans portrait — le rond disparaissait dès qu'une certifiée
   n'avait pas envoyé de photo — et en nowrap, si bien que « Marie-Christine,
   Villeneuve-d'Ascq » l'étirait jusqu'au bord du cadre. Elle disait le nom et la
   ville ; elle ne donnait aucune raison de cliquer.

   C'est maintenant une carte : portrait à gauche, prénom et métier à droite, le
   lieu en terracotta sur sa propre ligne, et deux lignes de ses mots à elle. De
   quoi reconnaître quelqu'un — pas de quoi lire sa fiche, qui est à un clic. */

.ann-bulle {
  position: absolute; z-index: 6; pointer-events: none;
  width: 246px; max-width: calc(100% - 24px);
  display: grid; gap: .4rem;
  padding: .7rem .8rem .75rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow);
  translate: -50% calc(-100% - 16px);
  text-align: left;
}
/* La pointe vers le point. Deux triangles superposés : le premier fait le bord,
   le second le remplissage — sans quoi le liseré traverse la carte. */
.ann-bulle::before, .ann-bulle::after {
  content: ""; position: absolute; top: 100%; left: var(--pointe, 50%); translate: -50% 0;
  border: 8px solid transparent; border-bottom: 0;
}
.ann-bulle::before { border-top-color: var(--line); }
.ann-bulle::after  { border-top-color: var(--white); margin-top: -1px; }

.ann-bulle__tete { display: flex; align-items: center; gap: .6rem; }
.ann-bulle__portrait {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: var(--cream); display: grid; place-items: center;
}
.ann-bulle__portrait img { width: 100%; height: 100%; object-fit: cover; }
.ann-bulle__portrait span { font: 700 1.05rem var(--font-title); color: var(--terra-text); }
/* flex:1 pour que le métier dispose de toute la place restante : sans lui la
   colonne se règle sur le prénom et « Architecte d'intérieur » s'y coupe. */
.ann-bulle__qui { min-width: 0; flex: 1 1 auto; }
.ann-bulle b { display: block; font: 700 .95rem/1.2 var(--font-title); color: var(--ink); }
.ann-bulle small {
  display: block; margin-top: .1rem; font-size: .74rem; line-height: 1.25; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Le lieu est ce qu'on vient chercher sur une carte : il porte la couleur. */
.ann-bulle__lieu {
  display: flex; align-items: center; gap: .3rem;
  font: 600 .76rem/1.3 var(--font-body); color: var(--terra-text);
}
.ann-bulle__lieu svg {
  width: 13px; height: 13px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
/* Deux lignes, jamais trois : au-delà, la carte cache la carte. */
.ann-bulle__mot {
  font-size: .74rem; line-height: 1.4; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- La liste ---------- */

.ann-compte { margin: 0 0 1rem; font: 600 var(--step--1)/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--terra-text); text-align: left; }

.ann-fiches { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.ann-fiche { background: var(--white); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: border-color .18s, box-shadow .18s; }
.ann-fiche:hover, .ann-fiche.est-visee { border-color: var(--terra); box-shadow: 0 14px 34px rgba(80, 83, 85, .09); }
.ann-fiche.est-ouverte { border-color: var(--terra-text); }

.ann-fiche__ouvrir { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .6rem .8rem; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--font-body); }

.ann-fiche__portrait { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--cream); display: grid; place-items: center; }
.ann-fiche__portrait img { width: 100%; height: 100%; object-fit: cover; }
/* L'initiale remplace le portrait de celles qui n'ont pas envoyé de photo.
   En --terra (#cf8f75) sur le crème du rond, elle tombait à 2,47 de contraste :
   on voyait un rond vide. Le terracotta du texte, lui, donne 4,62 — c'est
   celui que la charte réserve à ce qui doit se lire. */
.ann-fiche__initiales { font: 700 .95rem var(--font-title); color: var(--terra-text); }

.ann-fiche__texte { min-width: 0; display: grid; gap: .12rem; }
.ann-fiche__nom { font: 700 var(--step-0)/1.25 var(--font-title); color: var(--ink); }
/* LA FORMATION EN PREMIER. C'est elle qui distingue ces personnes de toutes les
   autres décoratrices de leur ville — c'est donc elle qui doit se lire d'abord. */
.ann-fiche__certifiee { font-size: var(--step--1); color: var(--terra-text); font-weight: 600; }
/* Le point separe sans peser : les competences restent une suite, pas une liste
   de cases. Il se retire de l'arbre d'accessibilite (aria-hidden), un lecteur
   d'ecran enoncant deja les elements les uns apres les autres. */
.ann-fiche__certifiee i { font-style: normal; font-weight: 400; color: var(--muted); margin: 0 .45em; }
/* Le métier suit, dans la ligne discrète, avec la ville : il répond à « qu'est-ce
   qu'elle fait, concrètement ? » sans voler la vedette à la certification. */
.ann-fiche__metier::after { content: "·"; margin: 0 .1rem 0 .3rem; color: var(--line); }
.ann-fiche__lieu { display: flex; align-items: center; gap: .35rem; font-size: var(--step--1); color: var(--muted); flex-wrap: wrap; }
.ann-fiche__lieu svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ann-fiche__distance { color: var(--terra-text); font-weight: 600; }
.ann-fiche__distance::before { content: "·"; margin-right: .35rem; color: var(--line); font-weight: 400; }

.ann-fiche__detail { padding: 0 1.1rem 1.1rem; }
.ann-fiche__description { margin: 0 0 .9rem; font-size: var(--step--1); line-height: 1.65; color: var(--muted); }
.ann-fiche__certif { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; font-size: .82rem; color: var(--gold-text); font-weight: 600; text-align: left; }
.ann-fiche__certif svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ann-fiche__annee { color: var(--muted); font-weight: 400; }

.ann-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ann-contact li { font-size: var(--step--1); }
.ann-contact a { color: var(--terra-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ann-contact a:hover { text-decoration: underline; }
.ann-contact li::before { display: inline-block; width: 1.5rem; color: var(--muted); font-weight: 400; }
.ann-contact__email::before { content: "✉"; }
.ann-contact__telephone::before { content: "☎"; }
.ann-contact__site::before { content: "⌂"; }
.ann-contact__instagram::before { content: "◎"; }

.ann-fiche__exemple { margin: .9rem 0 0; padding: .5rem .75rem; border-radius: 10px; background: var(--cream); font-size: .78rem; color: var(--muted); text-align: left; }

.ann-rien { margin: 1.2rem 0 0; padding: 1.1rem; border: 1px dashed var(--line); border-radius: 16px; font-size: var(--step--1); color: var(--muted); text-align: center; }

/* ---------- Le vide, et l'appel ---------- */

.ann-vide { padding-block: clamp(3rem, 8vw, 6rem); text-align: center; max-width: 44rem; }
.ann-vide p { text-align: center; margin-bottom: 2rem; }

/* ---------- « Cette carte pourrait porter ton nom » ----------
   Un BANDEAU PLEINE LARGEUR, pas une carte de plus. Le pavé précédent était une
   boîte crème parmi d'autres, en bas de page : il se lisait comme une note. Celui-ci
   doit se voir — c'est le seul endroit du site où une architecte d'intérieur
   comprend ce que la certification lui rapporterait, juste après avoir parcouru la
   carte qui le lui prouve. */

.ann-devenir {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: linear-gradient(135deg, var(--cream), #f6f0e7 48%, #ecdfd0);
  border-top: 1px solid var(--line);
}
.ann-devenir .eyebrow { margin-bottom: .4rem; }
.ann-devenir h2 { margin: 0 0 .5em; max-width: 18ch; font-size: var(--step-4); }
/* LE TEXTE PREND LA LARGEUR DE LA PAGE.
   Ces blocs étaient bridés à 60 ou 62 caractères : sur un écran large, le texte se
   tassait à gauche dans un cadre qui, lui, allait jusqu'au bout — on lisait une
   colonne étroite au milieu du vide. Le « shell » fixe déjà la largeur de lecture ;
   une seconde limite par-dessus ne faisait que la contredire. */
.ann-devenir .lead { max-width: none; margin-bottom: 2.4rem; }
/* LA LIMITE VENAIT D'AILLEURS, ET C'EST POUR CA QU'ELLE A SURVECU.
   Les caps de 60 et 62 caracteres de cette feuille ont bien ete retires — mais
   `.lead` porte un `max-width: 54ch` dans la feuille globale, qui continuait de
   s'appliquer par-dessus. Le texte restait donc tasse a gauche d'un bandeau qui,
   lui, allait jusqu'au bout. On leve la limite ICI plutot que dans le global :
   la mesure de lecture reste juste partout ailleurs sur le site. */
/* LE TEXTE D'ACCROCHE TIENT EN DEUX TEMPS : une question, puis ce qu'elle promet.
   Les 2,4 rem ci-dessus sont l'écart qui sépare l'accroche de la liste ; entre les
   deux paragraphes, c'est trop — la question se détacherait au lieu d'appeler la
   suite. On revient à un écart de paragraphe ordinaire, et seul le dernier garde
   la respiration avant la liste. */
.ann-devenir .lead:not(.ann-devenir__suite) { margin-bottom: 1.15rem; }

.ann-devenir__raisons {
  list-style: none; margin: 0 0 2.4rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
}
.ann-devenir__raisons li { display: grid; gap: .45rem; align-content: start; }
/* Un filet plutôt qu'une puce : la liste n'est pas une énumération, ce sont trois
   arguments qui se valent. */
.ann-devenir__raisons li::before { content: ""; width: 2.4rem; height: 2px; background: var(--terra); margin-bottom: .55rem; }
.ann-devenir__raisons b { font: 700 var(--step-0)/1.35 var(--font-title); color: var(--ink); }
.ann-devenir__raisons span { font-size: var(--step--1); line-height: 1.65; color: var(--muted); }

.ann-devenir__actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

.ann-devenir__deja {
  margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: var(--step--1); color: var(--muted); text-align: left;
}

@media (max-width: 820px) {
  .ann-devenir__raisons { grid-template-columns: 1fr; gap: 1.4rem; }
  .ann-devenir h2 { max-width: none; }
  .ann-devenir__actions .button, .ann-devenir__actions .button-secondary { flex: 1 1 14rem; justify-content: center; }
}

.button-secondary { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--terra-text); border-radius: 999px; padding: .85rem 1.35rem; background: transparent; color: var(--terra-text); text-decoration: none; font: 600 1rem var(--font-body); }
.button-secondary:hover { background: var(--terra-text); color: var(--white); }

/* ---------- Écrans étroits : on bascule entre liste et carte ---------- */

@media (max-width: 900px) {
  .ann-grille { grid-template-columns: 1fr; }
  /* `relative`, PAS `static`. Avec `static`, la carte cesse d'être le bloc de
     référence de ses enfants posés en absolu : les boutons de zoom remontaient
     au-dessus de la carte, dans l'en-tête, et la mention « 1 autre ailleurs dans
     le monde » allait se poser en travers du pavé « Vous vous êtes formée avec
     Archi Mind ? », tout en bas de la page. Constaté à 375 px, pas supposé. */
  .ann-carte { position: relative; top: auto; }

  .ann-bascule { display: inline-flex; gap: .25rem; margin: 0 0 1.2rem; padding: .25rem; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; }
  .ann-bascule button { border: 0; border-radius: 999px; padding: .6rem 1.35rem; background: none; color: var(--muted); font: 600 var(--step--1) var(--font-body); cursor: pointer; }
  .ann-bascule button[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 3px 10px rgba(80, 83, 85, .1); }

  .ann-grille[data-vue-active="liste"] .ann-carte { display: none; }
  .ann-grille[data-vue-active="carte"] .ann-liste { display: none; }
  .ann-recherche__autour { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ann-carte__svg, .ann-fiche { transition: none !important; }
}

/* La frontière entre « près de chez vous » et « le plus proche qu'on ait ». */
.ann-separation {
  margin: .6rem 0 .1rem; padding: .2rem 0;
  font: 600 .78rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); display: flex; align-items: center; gap: .8rem;
}
.ann-separation::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ═══════════════════════════════════════════════════════════════════════════
   LE DISCOURS DE LA PAGE

   Trois sections de texte séparent désormais l'outil du pavé de conversion.
   Elles alternent volontairement de fond — clair, crème, clair — parce qu'une
   page qui déroule quatre pavés de la même couleur se lit comme un mur, et
   qu'on cesse de la lire au deuxième.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- Ce que ça change, pour qui cherche quelqu'un ---------- */

.ann-savoir { padding-block: clamp(3rem, 7vw, 5rem); }
.ann-savoir h2 { margin: 0 0 .5em; max-width: 22ch; }
.ann-savoir .lead { margin-bottom: 2.6rem; }

.ann-savoir__grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.ann-savoir__grille article { padding-top: 1.1rem; border-top: 2px solid var(--terra); }
.ann-savoir__grille h3 { margin: 0 0 .5rem; font-size: var(--step-1); }
.ann-savoir__grille p { margin: 0; font-size: var(--step--1); line-height: 1.7; color: var(--muted); }

/* Une mention qui protège autant qu'elle informe : ces femmes ne sont pas des
   salariées d'Archi Mind, et l'annuaire ne doit jamais le laisser croire. */
.ann-savoir__note {
  margin: 2.6rem 0 0; padding: 1rem 1.2rem;
  border-left: 3px solid var(--line); background: var(--white);
  font-size: var(--step--1); color: var(--muted); max-width: 68ch; text-align: left;
}

/* ---------- Le savoir-faire qui voyage ---------- */

.ann-monde { padding-block: clamp(3rem, 7vw, 5rem); background: var(--cream); border-block: 1px solid var(--line); }
.ann-monde h2 { margin: 0 0 1.2em; max-width: 20ch; font-size: var(--step-3); }
/* Deux colonnes de texte : trois paragraphes en pleine largeur feraient des
   lignes de 120 caractères, que l'œil ne suit plus. */
/* DEUX COLONNES CHOISIES, ET NON SUBIES.
   C'était « columns: 2 » — du multi-colonnes, où le navigateur répartit lui-même
   le texte pour équilibrer les hauteurs. Avec deux paragraphes longs et une
   conclusion courte, il mettait les deux premiers à gauche et laissait le
   troisième seul à droite, démarrant plus bas et suivi d'un grand vide.

   Une grille dit où va quoi : le récit à gauche, la conclusion à droite, alignée
   sur la première ligne. Et comme cette conclusion est la phrase qui dit au
   visiteur ce qu'il peut faire de la carte, elle porte un filet terracotta et un
   corps légèrement plus grand — elle se lit d'un coup d'œil, au lieu de passer
   pour un reste. */
.ann-monde__texte {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 0 clamp(2rem, 5vw, 4rem); align-items: start;
}
.ann-monde__texte p { margin: 0 0 1.2em; }
.ann-monde__texte p:nth-child(1) { grid-column: 1; grid-row: 1; }
.ann-monde__texte p:nth-child(2) { grid-column: 1; grid-row: 2; margin-bottom: 0; }
.ann-monde__texte p:nth-child(3) {
  grid-column: 2; grid-row: 1 / span 2; align-self: start;
  padding-left: 1.5rem; border-left: 2px solid var(--terra);
  font-size: var(--step-0); color: var(--ink); margin-bottom: 0;
}

/* ---------- Les questions ---------- */

.ann-questions { padding-block: clamp(3rem, 7vw, 5rem); }
.ann-questions h2 { margin: 0 0 1.6rem; }
/* LES RÉPONSES PRENNENT LA LARGEUR DU TEXTE.
   Elles étaient bridées à 52 rem : sur un écran large, elles se tassaient à gauche
   dans un bloc qui, lui, allait jusqu'au bout — on lisait une colonne étroite dans
   un cadre vide. Le « shell » de la page fixe déjà la largeur de lecture ; une
   seconde limite par-dessus ne faisait que la contredire. */
.ann-questions__liste { display: grid; gap: .6rem; }

.ann-questions details {
  border: 1px solid var(--line); border-radius: 16px; background: var(--white);
  overflow: hidden; transition: border-color .18s;
}
.ann-questions details[open] { border-color: var(--terra); }
.ann-questions summary {
  padding: 1rem 1.2rem; cursor: pointer; list-style: none;
  font: 600 var(--step-0)/1.4 var(--font-body); color: var(--ink);
  display: flex; align-items: center; gap: .8rem;
}
.ann-questions summary::-webkit-details-marker { display: none; }
.ann-questions summary::after {
  content: "+"; margin-left: auto; flex: 0 0 auto;
  font: 400 1.3rem/1 var(--font-body); color: var(--terra-text);
}
.ann-questions details[open] summary::after { content: "\2212"; }
.ann-questions details p {
  margin: 0; padding: 0 1.2rem 1.2rem; font-size: var(--step--1);
  line-height: 1.7; color: var(--muted);
}
/* Le même style, que la réponse soit un bloc simple ou plusieurs paragraphes. */
.ann-questions__reponse { margin: 0; padding: 0 1.2rem 1.2rem; font-size: var(--step--1);
  line-height: 1.7; color: var(--muted); }
.ann-questions__reponse p { margin: 0 0 .85rem; }
.ann-questions__reponse p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .ann-savoir__grille { grid-template-columns: 1fr; gap: 1.6rem; }
  /* Sur petit écran, une seule colonne : le filet de la conclusion passe au-dessus
     d'elle, sinon il pincerait le texte contre le bord. */
  .ann-monde__texte { grid-template-columns: 1fr; gap: 1.2em; }
  .ann-monde__texte p:nth-child(1),
  .ann-monde__texte p:nth-child(2),
  .ann-monde__texte p:nth-child(3) { grid-column: 1; grid-row: auto; }
  .ann-monde__texte p:nth-child(3) {
    padding: 1.1rem 0 0; border-left: 0; border-top: 2px solid var(--terra);
  }
  .ann-savoir h2, .ann-monde h2 { max-width: none; }
}

/* Le lien vers la page de la praticienne : discret dans la fiche dépliée,
   mais bien présent dans le document — c'est par lui que Google découvre
   les pages individuelles. */
.ann-fiche__page { display: inline-block; margin-top: .3rem; font-size: var(--step--1); font-weight: 600; color: var(--terra-text); text-decoration: none; }
.ann-fiche__page:hover { text-decoration: underline; }

/* ────────────── « Ce que ça change » : l'en-tête sur deux colonnes

   Le titre et le chapô étaient bridés par une largeur maximale alors que les
   trois colonnes dessous prenaient toute la coquille. Relevé à 1440 px : la
   coquille fait 1080, le titre 861 et le chapô 694 — 386 px de vide à droite,
   et l'écart grandit avec l'écran puisque la typographie suit la largeur de la
   fenêtre mais pas la colonne. Le regard descendait en colonne étroite puis
   s'ouvrait d'un coup sur trois colonnes larges : le bloc changeait de rythme
   en son milieu, sans raison.

   Le titre passe à gauche, le chapô à droite, tous deux au-dessus des cartes.
   Ce n'est pas une invention : c'est le motif des pages de formation, de
   prestation et de la FAQ — ce bloc-ci était l'exception.

   TOUT SE FAIT EN CSS, sans toucher au balisage : la coquille devient une
   grille et chaque élément prend sa place. Élargir simplement le chapô à
   1080 px aurait donné des lignes de 110 signes, le double de ce qui se lit.
   Léon, le 29 août 2026. */
@media (min-width: 821px) {
  .ann-savoir .shell {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }
  .ann-savoir .eyebrow { grid-column: 1; grid-row: 1; }
  .ann-savoir h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  /* Le chapô se cale sur le bas du titre : deux blocs de hauteurs
     différentes qui partiraient du haut donneraient un alignement bancal. */
  .ann-savoir .lead {
    grid-column: 2; grid-row: 2; align-self: end;
    max-width: 52ch; margin: 0;
  }
  .ann-savoir__grille { grid-column: 1 / -1; margin-top: 2.6rem; }
}

/* ─────────────────────────────── Le halo des points de la carte

   Proposition retenue par Léon le 29 août 2026, parmi quatre. Le point était
   un aplat de 14 px ; douze aplats sombres sur un beige déjà couvert de
   contours de départements tiraient l'œil vers les repères plutôt que vers la
   carte. Il devient un petit disque cerné d'une auréole pâle.

   LE SURVOL PASSE PAR LA TAILLE, pas seulement par la couleur : le halo
   s'élargit et se fonce. Un daltonisme, un écran délavé ou une impression en
   gris laissent encore voir quel point on vise. Et c'est le HALO qui bouge,
   pas le point : rien ne se déplace sous le curseur, ce qui compte quand deux
   villes sont voisines.

   Le filet blanc du point n'est pas décoratif : le terracotta seul ne donne
   que 2,92 de contraste sur la terre vive, sous le seuil de 3 des éléments
   graphiques. Le cœur contre l'anneau blanc en donne 5,23. */
.ann-carte__halo {
  fill: var(--terra-text);
  opacity: .16;
  pointer-events: none;
  transition: opacity .15s ease;
}
.ann-carte__points g:hover .ann-carte__halo,
.ann-carte__points g.est-vise .ann-carte__halo,
.ann-carte__points g:focus-visible .ann-carte__halo { opacity: .3; }

/* Le survol fonce dans la famille terracotta plutôt que de virer au gris :
   la carte garde une seule couleur d'accent. */
.ann-carte__points g:hover circle:not(.ann-carte__halo):not(.ann-carte__cible),
.ann-carte__points g.est-vise circle:not(.ann-carte__halo):not(.ann-carte__cible) {
  fill: #8a4126;
}

/* Quand une recherche en désigne d'autres, le halo s'éteint avec son point. */
.ann-carte__points.a-une-selection
  g:not(.est-retenu):not(:hover):not(:focus-visible):not(.est-vise) .ann-carte__halo {
  fill: var(--muted);
  opacity: .08;
}
/* Ce que la recherche retient porte un halo plus franc. */
.ann-carte__points.a-une-selection g.est-retenu .ann-carte__halo { opacity: .34; }

/* ═══════════════════════════════ L'annuaire tient dans la hauteur de la carte

   MESURE DE DEPART, LE 29 AOUT 2026 : carte 546 x 584, liste 494 x 1315. Pour
   douze fiches, la liste faisait deja plus du double de la carte ; a quatre
   mille, elle en ferait six cents fois la hauteur. Léon : « demain s'il y en a
   quatre-mille, on ne va pas faire une liste de quatre-mille personnes […] que
   ça soit scrollable à la hauteur de la carte ».

   LA HAUTEUR VIENT DE LA CARTE ELLE-MEME, mesurée par le script et posée dans
   --ann-hauteur-carte. Aucun nombre magique : la carte est dessinée d'après son
   viewBox et la largeur de sa colonne, donc sa hauteur change avec la fenêtre.
   Une valeur écrite en dur ici se serait désalignée au premier redimensionnement.

   LE REPLI EN 34rem sert au premier rendu, avant que le script ait mesuré, et
   reste la seule hauteur si le script ne s'exécute pas. Il vaut environ cinq
   fiches : c'est exactement ce que Léon a demandé de voir. */
.ann-liste { display: flex; flex-direction: column; }
.ann-liste__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .9rem; }
.ann-compte { margin: 0; }
.ann-liste__defilement {
  max-height: var(--ann-hauteur-carte, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .45rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ann-terre-vive, #d0bfa8) transparent;
}
.ann-liste__defilement::-webkit-scrollbar { width: 7px; }
.ann-liste__defilement::-webkit-scrollbar-thumb { background: #d0bfa8; border-radius: 99px; }

/* LE VOILE DU DÉFILEMENT. Les fiches se coupaient net au bord du cadre.
   Elles se lèvent maintenant en haut et s'effacent en bas — et le voile ne
   se pose que du côté où il reste quelque chose à voir : en haut de liste,
   rien ne masque la première fiche. Les deux attributs sont posés par le
   script à chaque défilement. */
@property --ann-voile-haut { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --ann-voile-bas  { syntax: "<length>"; inherits: false; initial-value: 0px; }
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
  .ann-liste__defilement {
    --ann-voile-haut: 0px; --ann-voile-bas: 0px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ann-voile-haut), #000 calc(100% - var(--ann-voile-bas)), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ann-voile-haut), #000 calc(100% - var(--ann-voile-bas)), transparent 100%);
  }
  .ann-liste__defilement[data-voile-haut="1"] { --ann-voile-haut: 1.75rem; }
  .ann-liste__defilement[data-voile-bas="1"]  { --ann-voile-bas: 1.75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .ann-liste__defilement { transition: --ann-voile-haut .2s ease, --ann-voile-bas .2s ease; }
}

/* ── Les groupes de pays ──
   L'EN-TETE RESTE COLLE PENDANT QU'ON FAIT DEFILER SON GROUPE : sans lui, on
   perd en trois lignes le pays qu'on est en train de lire, et la liste
   redevient la liste plate qu'elle était.
   Il est opaque, sinon les fiches défilent visiblement dessous. */
.ann-groupe { list-style: none; }
.ann-groupe + .ann-groupe { margin-top: 1.1rem; }
.ann-groupe__titre {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  margin: 0 0 .55rem; padding: .5rem .1rem .45rem;
  background: var(--paper, #fbfaf7);
  border-bottom: 1px solid var(--line);
  font: 700 var(--step--1)/1.3 var(--font-body);
  text-transform: uppercase; letter-spacing: .12em; color: var(--terra-text);
}
.ann-groupe__compte {
  flex: 0 0 auto; padding: .1rem .5rem; border-radius: 999px;
  background: var(--ann-mer, #f5f1eb); color: var(--muted);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.ann-groupe__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }

/* Quand la recherche trie par distance, les pays n'ont plus de sens : l'ordre
   EST la réponse. Le script remet la liste à plat et masque les en-têtes. */
.ann-fiches[data-plat] .ann-groupe__titre { display: none; }
.ann-fiches[data-plat] .ann-groupe { margin-top: 0; }

/* ── Le filtre ── */
.ann-filtre__bouton {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .5rem .9rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white, #fff); color: var(--ink);
  font: 600 var(--step--1) var(--font-body); cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.ann-filtre__bouton:hover { border-color: var(--terra); background: var(--ann-mer, #f5f1eb); }
.ann-filtre__bouton[aria-expanded="true"] { border-color: var(--terra-text); background: var(--ann-mer, #f5f1eb); }
.ann-filtre__bouton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ann-filtre__pastille {
  min-width: 18px; padding: 0 .3rem; border-radius: 999px;
  background: var(--terra-text); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}
.ann-filtre {
  margin: 0 0 .9rem; padding: .9rem 1rem 1rem;
  border: 1px solid var(--line); border-radius: 14px; background: var(--ann-mer, #f5f1eb);
}
.ann-filtre__bloc { min-width: 0; margin: 0; padding: 0; border: 0; }
.ann-filtre__bloc + .ann-filtre__bloc { margin-top: .85rem; }
.ann-filtre__bloc legend {
  padding: 0; margin-bottom: .45rem;
  font: 700 .7rem/1.3 var(--font-body); text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted);
}
.ann-filtre__choix { display: flex; flex-wrap: wrap; gap: .4rem; }
.ann-jeton {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 32px; padding: .32rem .7rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white, #fff); color: var(--ink);
  font: 600 .82rem var(--font-body); cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.ann-jeton span { color: var(--muted); font-weight: 700; font-size: .72rem; }
.ann-jeton:hover { border-color: var(--terra); }
/* L'ETAT RETENU NE TIENT PAS QU'A LA COULEUR : le fond fonce ET le contour
   changent, donc il reste lisible en niveaux de gris comme pour un daltonisme. */
.ann-jeton.est-actif { border-color: var(--terra-text); background: var(--terra-text); color: #fff; }
.ann-jeton.est-actif span { color: rgb(255 255 255 / 78%); }
.ann-filtre__vider {
  margin-top: .85rem; padding: 0; border: 0; background: none;
  color: var(--terra-text); font: 600 .82rem var(--font-body);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ann-filtre__vide { margin: 1.2rem .2rem; color: var(--muted); }
.ann-fiche[hidden], .ann-groupe[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ann-filtre__bouton, .ann-jeton { transition: none; }
}

/* Sur un téléphone, la carte et la liste ne sont plus côte à côte : borner la
   liste à la hauteur d'une carte qui n'est pas affichée n'aurait aucun sens. */
@media (max-width: 900px) {
  .ann-liste__defilement { max-height: none; overflow: visible; padding-right: 0; }
  .ann-groupe__titre { position: static; }
}

/* ═══════════════════════════════════ Le confort tactile des commandes

   Relevé en largeur 375 px le 29 août 2026 : « Tout afficher » 71 × 18,
   « Voir sa page et la contacter » 172 × 24, jetons 51 × 32, onglets 71 × 37,
   bouton « Filtrer » 90 × 40.

   WCAG 2.2 AA demande 24 px, et tout tenait sauf le premier. Mais 24 px est le
   minimum légal, pas le confort : sur un téléphone une cible de 24 px se rate,
   et « Voir sa page et la contacter » est l'action centrale de l'annuaire —
   la manquer, c'est ouvrir la fiche voisine.

   `pointer: coarse` VISE LE DOIGT, PAS LA LARGEUR. Une tablette de 1024 px se
   touche aussi ; un petit portable ne se touche pas. La largeur d'écran n'a
   jamais dit comment on désigne. Sur souris, rien ne change : viser au pixel
   n'a pas besoin de 44 px, et les imposer gonflerait le panneau pour rien.

   C'est la ZONE qui grandit, pas le dessin : le rembourrage porte la hauteur,
   la taille du texte ne bouge pas. */
@media (pointer: coarse) {
  .ann-filtre__bouton { min-height: 44px; padding-inline: 1.05rem; }
  .ann-jeton { min-height: 44px; padding: .5rem .95rem; }
  .ann-filtre__vider { min-height: 44px; padding: .6rem .2rem; }
  .ann-fiche__page { display: inline-flex; align-items: center; min-height: 44px; }
  .ann-bascule button { min-height: 44px; }
  .ann-carte__outils button { min-width: 44px; min-height: 44px; }
}

/* ═════════════════════════ La frontière entre les deux publics — 31 août 2026

   Cette page porte deux lecteurs qui n'ont rien à se dire : au-dessus, un
   particulier qui cherche une praticienne ; au-dessous, une professionnelle qui
   pourrait en être une. Ils se succédaient dans le même fil, au même rythme, sur
   le même fond — et rien ne disait qu'on avait changé d'interlocuteur.

   LE FILET EST DORÉ, ET C'EST UN CHOIX DE REGISTRE. Le terracotta désigne
   partout sur ce site une ACTION — un bouton, un lien. Le doré ne désigne
   jamais qu'un repère : titres de partie du programme, filet de tête des
   tableaux. Une frontière est un repère, pas une action.

   LE LIBELLÉ EST CENTRÉ SUR LE FILET, avec le fond de la section derrière lui :
   c'est ce qui le fait lire comme une couture et non comme un titre posé au
   milieu d'un vide. */
.ann-devenir { background: var(--ann-mer, #f5f1eb); }

@media (max-width: 650px) {
  /* Sur un téléphone, le libellé dépasse la largeur utile et le filet le coupe.
     Il passe au-dessus du trait plutôt que dedans. */
}

/* LE TITRE TIENT EN DEUX TEMPS, ET C'EST UN CHOIX.
   En une seule phrase de 72 caractères, il faisait CINQ lignes de display — 367 px
   de haut, mesurés à 1440 px de large — et se lisait comme un mur. Le bloc ne peut
   pas s'élargir : c'est la colonne qui le contraint, pas le titre.

   On coupe donc là où le sens coupe : l'action en grand, le lieu en plus petit
   juste dessous. La coupure devient une intention typographique au lieu d'un
   accident de largeur. */
.ann-hero__titre span {
  display: block;
  margin-top: .18em;
  font-size: .46em;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .01em;
  color: var(--muted);
}

/* PLUS BASSES ENCORE (2 septembre 2026). Rembourrage .9rem → .6rem/.8rem,
   écart entre fiches .8rem → .55rem, capsule 44 → 38 px : environ 14 px
   gagnés par fiche, soit une fiche de plus visible sans toucher au cadre.
   Les trois lignes de texte gardent leur taille — c'est le vide autour qui
   se resserre, pas ce qui se lit. */

/* L'INTERLIGNE RESSERRÉ, PAS LE TEXTE (2 septembre 2026).
   La fiche tenait 85 px : 64 de texte, 19 de rembourrage, 2 de bordure. Le
   rembourrage était déjà au plus court — restait l'interligne, laissé à
   « normal » (≈ 1,29) sur les deux lignes basses. À 1,15 chacune perd 2 px
   sans qu'un seul mot rapetisse. */
.ann-fiche__nom { line-height: 1.15; }
.ann-fiche__certifiee, .ann-fiche__lieu { line-height: 1.15; }

/* ── LA FONDATRICE ──────────────────────────────────────────────────
   Une seule fiche porte ces règles. Le doré de la charte (#cfb250) tient
   ici le rôle qui est le sien partout ailleurs sur le site : un matériau
   qui encadre et distingue — le cadre, le sceau Qualiopi. Il ne porte
   aucun texte : à 1,91 de contraste sur le crème, il serait illisible.
   Ce qui se lit reste dans l'encre et le terracotta. */
.ann-fiche.est-fondatrice { border-color: var(--gold, #cfb250); box-shadow: 0 0 0 1px var(--gold, #cfb250) inset; }
.ann-fiche.est-fondatrice:hover, .ann-fiche.est-fondatrice.est-visee { border-color: #a8862f; }
.ann-fiche.est-fondatrice .ann-fiche__portrait { background: #f7edd2; box-shadow: 0 0 0 2px var(--gold, #cfb250); }
.ann-fiche.est-fondatrice .ann-fiche__initiales { color: #6a5310; }
/* Le métier passe en doré foncé — 4,56 de contraste sur le blanc de la
   fiche, le seul doré qui puisse porter des mots. */
.ann-fiche.est-fondatrice .ann-fiche__metier { color: #846e24; font-weight: 700; }

/* LE POINT DORÉ SUR LA CARTE. Même logique : le disque et son halo
   prennent le doré, rien d'écrit ne le prend. */
.ann-carte__points g[data-fondatrice] circle:last-of-type { fill: var(--gold, #cfb250); stroke: #a8862f; stroke-width: 1.5; }
.ann-carte__points g[data-fondatrice] .ann-carte__halo { fill: rgb(207 178 80 / 38%); }

/* LE MOT QUI FAIT LA DIFFÉRENCE (2 septembre 2026).
   « Certifiée » est ce qui distingue ces personnes de toutes les autres
   décoratrices : il passe en capitales et prend l'ocre.

   PAS LE DORÉ DE LA CHARTE. Mesuré sur le crème : #cfb250 ne donne que
   1,91 de contraste — sous le seuil de 3 exigé même pour un très grand
   titre. L'ocre #846e24 donne 4,56 : c'est le seul doré qui puisse porter
   des mots. La chasse est légèrement ouverte, les capitales serrant
   toujours trop dans une police de titre. */
.ann-hero__certifiee {
  font-weight: inherit;
  color: #846e24;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .88em;
}

/* UN BOUTON, PAS UN LIEN SOULIGNÉ (2 septembre 2026).
   « width: fit-content » avec « margin-left: auto » pousse le bouton au
   bord droit sans toucher au reste du bloc.

   PAS LE TERRACOTTA CLAIR DE .button. Mesuré : blanc sur #cf8f75 ne donne
   que 2,68 de contraste — passable sur un grand bouton d'appel, insuffisant
   pour ce petit-là. Le terracotta foncé #a35839 monte à 5,24 avec le même
   blanc. Même famille, même charte, lisible. */
.ann-fiche__page {
  display: block;
  width: fit-content;
  margin: .7rem 0 0 auto;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: var(--terra-text, #a35839);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease;
}
.ann-fiche__page:is(:hover, :focus-visible) { background: #7d3f27; color: #fff; text-decoration: none; }
@media (max-width: 560px) {
  /* Au pouce, un bouton collé à droite se rate : il prend toute la largeur. */
  .ann-fiche__page { width: auto; margin-left: 0; text-align: center; }
}