/* Archivo (SIL Open Font License, assets/fonts/OFL.txt), servie par le site
   lui-même : aucun appel à Google Fonts, donc aucune adresse IP de
   visiteur transmise à un tiers pour une police. Latin et latin étendu. */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(assets/fonts/archivo-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(assets/fonts/archivo-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(assets/fonts/archivo-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(assets/fonts/archivo-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════════════════════
   Body Concept Training — la feuille du site.

   Tirée du logo, et de lui seul :
     · le CARRÉ orange — angles droits partout, des boutons à peine
       arrondis, des repères carrés ;
     · la LIGNE DU CORPS, les deux traits qui dépassent du carré — le
       mouvement, en grand dans le haut de page « La ligne » ;
     · « Body Concept », large et plein — les titres en Archivo étirée
       et très grasse ;
     · « T R A I N I N G », espacé et orange — les surtitres.

   Les jetons nomment des RÔLES (fond, texte, accent…), jamais des
   pigments. Les pigments (--p-…) n'alimentent que les jetons, et c'est
   eux que l'administration et les palettes réécrivent. Une section
   `.nuit` redéfinit les MÊMES jetons : un composant s'écrit une fois.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Pigments — réécrits par le thème (contenu/commun.json → theme). */
  --p-fond: #ffffff;
  --p-fond-doux: #f0eee9;
  --p-encre: #1d1c1b;
  --p-doux: #5c5956;
  --p-accent: #5a80ff;
  --p-accent-profond: #1f45d6;
  --accent-texte: #1d1c1b;
  --p-sombre: #22201e;
  --p-sur-sombre: #f5f1eb;

  /* Rôles */
  --fond: var(--p-fond);
  --fond-section: var(--p-fond);
  --texte: var(--p-encre);
  --texte-doux: var(--p-doux);
  --accent: var(--p-accent);
  --accent-encre: var(--p-accent-profond);          /* l'orange LISIBLE sur ce fond */
  --trait: color-mix(in srgb, var(--texte) 14%, transparent);
  --carte: var(--p-fond);
  --carte-trait: color-mix(in srgb, var(--texte) 11%, transparent);
  --ombre: 0 1px 2px rgb(0 0 0 / .05), 0 10px 30px -12px rgb(0 0 0 / .18);

  /* Mesures */
  --gouttiere: clamp(1rem, 4vw, 3rem);
  --large: min(1520px, 100% - 2 * var(--gouttiere));
  --entete-min: 76px;
  --haut-entete: 76px;
  --rayon: 4px;
  --rayon-carte: 6px;
  --barre-appel: 0px;

  /* Typographie */
  --police: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --large-titre: 118%;

  color-scheme: light;
}

/* Le ton sombre (palette « Nuit ») : la page entière passe en sombre. */
html[data-ton="sombre"] { color-scheme: dark; }

/* Une section sombre redéfinit les MÊMES rôles. */
.nuit {
  --fond-section: var(--p-sombre);
  --texte: var(--p-sur-sombre);
  --texte-doux: color-mix(in srgb, var(--p-sur-sombre) 74%, var(--p-sombre));
  --accent-encre: var(--p-accent);
  --trait: color-mix(in srgb, var(--p-sur-sombre) 18%, transparent);
  --carte: color-mix(in srgb, var(--p-sur-sombre) 6%, var(--p-sombre));
  --carte-trait: color-mix(in srgb, var(--p-sur-sombre) 14%, transparent);
}

/* ── Base ──────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--haut-entete) + 12px);
  touch-action: manipulation;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--barre-appel);
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
.ic { display: inline-block; flex: none; }

a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.conteneur { width: var(--large); margin-inline: auto; }

.saut-contenu {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--accent); color: var(--accent-texte);
  padding: .7rem 1rem; font-weight: 700; text-decoration: none;
}
.saut-contenu:focus { top: 1rem; }

/* ── Typographie ───────────────────────────────────────────────────────── */

.titre-hero, .titre-section, .formule__titre, .chiffre dt, .repere dt, .point-methode__num,
.formule__numero, .jalon b, .appel__pro h3, .pro__inclus h3, .pro__pourqui h3, .lieux-bande h3 {
  font-family: var(--police);
  font-stretch: var(--large-titre);
  font-weight: 850;
  letter-spacing: -.012em;
  line-height: 1.02;
}

.titre-hero {
  /* La taille suit la largeur ET la hauteur : sur un portable de 768 px de
     haut, un titre réglé sur la seule largeur chassait les repères hors du
     premier écran. */
  font-size: clamp(2rem, min(1.2rem + 4.2vw, 8.2vh), 5.9rem);
  max-width: 12.5em;
}
.titre-hero em {
  font-style: normal; display: inline;
  background: linear-gradient(var(--accent), var(--accent)) 0 88% / 100% .42em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.titre-section {
  font-size: clamp(2.2rem, 1.15rem + 3.1vw, 4.4rem);
  max-width: 15em;
}

/* « T R A I N I N G » : le mot espacé du logo. */
.surtitre {
  margin: 0 0 .9rem;
  color: var(--accent-encre);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: .8em;
}
.surtitre::before {
  content: ''; flex: none;
  width: .9em; height: .9em;
  background: var(--accent);
}

.chapo {
  font-size: clamp(1.06rem, .98rem + .4vw, 1.3rem);
  line-height: 1.55;
  color: var(--texte-doux);
  max-width: 38em;
  margin-top: 1.4rem;
}

/* ── Boutons ───────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px;
  padding: .75em 1.35em;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 1rem;
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.bouton:active { transform: translateY(1px); }
.bouton--accent { background: var(--accent); color: var(--accent-texte); }
.bouton--accent:hover { background: color-mix(in srgb, var(--accent) 86%, var(--p-encre)); }
.bouton--contour { border-color: currentColor; color: var(--texte); background: transparent; }
.bouton--contour:hover { background: var(--texte); color: var(--fond-section); border-color: var(--texte); }
.bouton--contour-clair { border-color: color-mix(in srgb, var(--texte) 55%, transparent); color: var(--texte); }
.bouton--contour-clair:hover { border-color: var(--accent); color: var(--accent); }
.bouton--sombre { background: var(--p-sombre); color: var(--p-sur-sombre); }
.bouton--sombre:hover { background: var(--p-encre); }
.bouton--grand { min-height: 56px; font-size: 1.06rem; padding-inline: 1.6em; }
.bouton--petit { min-height: 40px; padding: .5em .9em; font-size: .92rem; }
@media (max-width: 420px) {
  .bouton--grand { width: 100%; }
}

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

.entete {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--texte);
  transition: background-color .3s, box-shadow .3s, color .3s;
}
.entete__dedans {
  width: var(--large); margin-inline: auto;
  min-height: var(--entete-min);
  display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.6rem);
}
.entete.est-defilee {
  background: color-mix(in srgb, var(--p-fond) 97%, transparent);
  box-shadow: 0 1px 0 var(--trait), 0 8px 24px -16px rgb(0 0 0 / .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

.marque { flex: none; display: block; line-height: 0; }
.marque { text-decoration: none; }

/* Le logo : le B habité, écrit dans la page. Trois jetons, réglés par le
   thème de l'administration ; sans réglage, ils suivent la palette. Sur un
   fond sombre, le nom passe en clair et « Training » prend la couleur du B :
   un réglage pensé pour le fond clair ne peut pas y disparaître. */
.logo {
  --logo-marque: var(--p-logo-marque, var(--p-accent));
  --logo-nom: var(--p-logo-nom, var(--p-encre));
  --logo-sous: var(--p-logo-sous, var(--p-accent-profond));
  display: inline-flex; flex-direction: column; gap: .16em;
  font-size: var(--logo-taille, clamp(22px, 1.95vw, 28px)); line-height: 1;
}
.logo__nom {
  display: flex; align-items: baseline;
  font-weight: 800; font-stretch: 100%; letter-spacing: -.02em;
  color: var(--logo-nom); white-space: nowrap;
}
.marque-b { flex: none; height: .72em; width: auto; margin-right: .045em; fill: var(--logo-marque); }
.logo__sous {
  font-size: .27em; font-weight: 700; letter-spacing: .5em;
  text-transform: uppercase; color: var(--logo-sous); white-space: nowrap;
}
.logo--sur-sombre,
html[data-page="accueil"][data-hero="mur"] .entete:not(.est-defilee) .logo {
  --logo-nom: var(--p-sur-sombre);
  --logo-sous: var(--logo-marque);
}

/* Le logo d'origine, au choix dans l'administration (html[data-logo]).
   Les deux sont dans la page ; un seul se montre. Version claire sur le mur
   (tant qu'on n'a pas défilé) et en ton sombre ; tiroir ouvert : la foncée. */
.logo-ancien { display: none; width: clamp(150px, 13vw, 190px); height: auto; }
html[data-logo="ancien"] .logo { display: none; }
html[data-logo="ancien"] .logo-ancien { display: block; }
html[data-logo="ancien"] .logo-ancien--sur-sombre,
html[data-logo="ancien"][data-page="accueil"][data-hero="mur"] .entete:not(.est-defilee) .logo-ancien--sur-clair,
html[data-logo="ancien"][data-ton="sombre"] .entete .logo-ancien--sur-clair { display: none; }
html[data-logo="ancien"][data-page="accueil"][data-hero="mur"] .entete:not(.est-defilee) .logo-ancien--sur-sombre,
html[data-logo="ancien"][data-ton="sombre"] .entete .logo-ancien--sur-sombre { display: block; }
html[data-page="accueil"][data-hero="mur"] .entete:not(.est-defilee) { color: var(--p-sur-sombre); }

.menu { margin-inline-start: auto; }
.menu ul { display: flex; align-items: center; gap: clamp(.4rem, 1.2vw, 1.4rem); }
.menu a {
  display: inline-block; padding: .5rem .2rem;
  font-weight: 600; font-size: .98rem; text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 3px no-repeat;
  transition: background-size .25s;
}
.menu a:hover, .menu a.est-actif { background-size: 100% 3px; }
.lien-pro {
  border: 2px solid var(--accent);
  border-radius: var(--rayon);
  padding: .45rem .8rem !important;
  background: none !important;
}
.lien-pro:hover { background: var(--accent) !important; color: var(--accent-texte); }

.entete__actions { display: flex; align-items: center; gap: .7rem; }

.choix-langue { position: relative; }
.choix-langue__bouton {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: 0 .55rem;
  background: none; border: 0; cursor: pointer; font-weight: 700; font-size: .9rem;
}
.choix-langue__liste {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 190px; padding: .4rem;
  background: var(--p-fond); color: var(--p-encre);
  border-radius: var(--rayon-carte); box-shadow: var(--ombre);
  display: none;
}
.choix-langue[data-ouvert] .choix-langue__liste { display: grid; }
.choix-langue__liste a, .choix-langue__liste span {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .7rem; border-radius: var(--rayon); text-decoration: none; font-size: .95rem;
}
.choix-langue__liste b { width: 1.8em; font-size: .78rem; letter-spacing: .08em; color: var(--p-accent-profond); }
.choix-langue__liste a:hover { background: color-mix(in srgb, var(--p-accent) 16%, transparent); }
.choix-langue__liste span[aria-current] { background: color-mix(in srgb, var(--p-encre) 6%, transparent); font-weight: 700; }

.tiroir-bascule {
  display: none;
  width: 48px; height: 48px; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
}
.tiroir-bascule__croix { display: none; }
.tiroir-bascule[aria-expanded="true"] .tiroir-bascule__menu { display: none; }
.tiroir-bascule[aria-expanded="true"] .tiroir-bascule__croix { display: inline-flex; }

.tiroir {
  position: fixed; inset: var(--haut-entete) 0 0; z-index: 49;
  background: var(--p-fond); color: var(--p-encre);
  padding: 1.5rem var(--gouttiere) 2rem;
  display: flex; flex-direction: column; gap: 2rem; overflow-y: auto;
}
.tiroir__nav a {
  display: block; padding: .85rem 0; border-bottom: 1px solid color-mix(in srgb, var(--p-encre) 12%, transparent);
  font-size: 1.35rem; font-weight: 800; font-stretch: 112%; text-decoration: none;
}
.tiroir__nav .lien-pro { display: inline-block; margin-top: 1rem; border-bottom: 2px solid var(--p-accent); font-size: 1.1rem; }
.tiroir__pied { display: grid; gap: 1.2rem; }
.tiroir__langues { display: flex; flex-wrap: wrap; gap: .5rem; }
.tiroir__langues a, .tiroir__langues span {
  padding: .55rem .9rem; border: 1px solid color-mix(in srgb, var(--p-encre) 18%, transparent);
  border-radius: var(--rayon); text-decoration: none; font-size: .95rem;
}
.tiroir__langues span { background: var(--p-encre); color: var(--p-fond); border-color: var(--p-encre); }

/* Le menu (Le coaching, Entreprises, Notre histoire, Actualités, Devenir
   coach) : sur une ligne, jamais coupé ; le tiroir prend le relais sous
   1280 px, là où l'allemand, le plus long, ne tient plus (mesuré le
   20/10/2026). */
.menu a { white-space: nowrap; }
@media (max-width: 1280px) {
  .menu { display: none; }
  .tiroir-bascule { display: inline-flex; }
  .entete__actions { margin-inline-start: auto; }
}
@media (max-width: 640px) {
  .entete__cta { display: none; }
  .marque .logo { --logo-taille: 21px; }
  .marque .logo-ancien { width: 140px; }
}
/* Le tiroir ouvert : l'en-tête reprend un fond, quel que soit le haut de page. */
html:has(.tiroir:not([hidden])) .entete {
  background: var(--p-fond); color: var(--p-encre);
}
html:has(.tiroir:not([hidden])) .entete .logo {
  --logo-nom: var(--p-logo-nom, var(--p-encre));
  --logo-sous: var(--p-logo-sous, var(--p-accent-profond));
}
html[data-logo="ancien"]:has(.tiroir:not([hidden])) .entete .logo-ancien--sur-clair { display: block !important; }
html[data-logo="ancien"]:has(.tiroir:not([hidden])) .entete .logo-ancien--sur-sombre { display: none !important; }

/* ══ La recherche ════════════════════════════════════════════════════════ */

.recherche { margin-top: 2rem; max-width: 40rem; }
.recherche__label {
  display: block; margin-bottom: .55rem;
  font-weight: 700; font-size: .95rem;
}
.recherche__ligne { display: flex; gap: .5rem; }
.recherche__champ {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  background: var(--p-fond); color: var(--p-encre);
  border: 2px solid color-mix(in srgb, var(--p-encre) 22%, transparent);
  border-radius: var(--rayon);
  transition: border-color .2s, box-shadow .2s;
}
.recherche__champ:focus-within { border-color: var(--p-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-accent) 28%, transparent); }
.recherche__icone { position: absolute; left: .9rem; color: var(--p-accent-profond); pointer-events: none; }
.recherche__champ input {
  width: 100%; min-width: 0; min-height: 56px;
  padding: 0 3rem 0 2.9rem;
  border: 0; background: transparent; color: inherit;
  font: inherit; font-size: 1.06rem; font-weight: 500;
  border-radius: var(--rayon);
}
.recherche__champ input:focus { outline: none; }
.recherche__champ input::placeholder { color: color-mix(in srgb, var(--p-encre) 64%, var(--p-fond)); }
.recherche__effacer {
  position: absolute; right: .5rem;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; border-radius: var(--rayon); color: var(--p-doux);
}
.recherche__effacer:hover { background: color-mix(in srgb, var(--p-encre) 8%, transparent); color: var(--p-encre); }
.recherche__bouton { min-height: 56px; }

/* Les suggestions : les villes du réseau d'abord (point orange), puis les
   lieux trouvés. Jamais la liste du navigateur (autocomplete="off"). */
.suggestions {
  position: absolute; left: -2px; right: -2px; top: calc(100% + 6px); z-index: 30;
  max-height: min(340px, 42vh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: .35rem; list-style: none;
  background: var(--p-fond); color: var(--p-encre);
  border: 1px solid color-mix(in srgb, var(--p-encre) 12%, transparent);
  border-radius: var(--rayon-carte); box-shadow: 0 18px 40px -14px rgb(0 0 0 / .4);
}
.suggestion {
  display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: .6rem; align-items: baseline;
  padding: .6rem .7rem; border-radius: var(--rayon); cursor: pointer; text-align: left;
}
.suggestion::before { content: ''; grid-row: span 2; align-self: center; width: 10px; height: 10px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--p-encre) 35%, transparent); }
.suggestion--reseau::before { background: var(--p-accent); border-color: var(--p-accent); }
.suggestion b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggestion span { grid-column: 2; font-size: .84rem; color: var(--p-doux); }
.suggestion:hover, .suggestion[aria-selected="true"] { background: color-mix(in srgb, var(--p-accent) 16%, var(--p-fond)); }
.recherche__autour {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .3rem; padding: .55rem 0;
  border: 0; background: none; cursor: pointer;
  font-weight: 600; font-size: .95rem; color: var(--texte);
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .3em;
}
.recherche__autour .ic { color: var(--accent-encre); }
.recherche.est-occupee .recherche__bouton { opacity: .7; pointer-events: none; }

/* Sur téléphone, le bouton garde sa loupe et cède son mot (qui reste
   lu par les lecteurs d'écran) : le champ et le bouton tiennent sur une
   ligne, et le haut de page gagne une rangée. */
@media (max-width: 520px) {
  .recherche__bouton { width: 56px; padding: 0; flex: none; }
  .recherche__bouton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ══ Les hauts de page ═══════════════════════════════════════════════════
   100 svh, et PLEINS : texte et recherche en haut, repères en pied
   d'écran. En grille (jamais flex + flex:1, qui écrase la largeur du
   conteneur). Le contenu est ancré EN HAUT par un padding constant. */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  background: var(--fond-section);
  color: var(--texte);
  overflow: clip;
  isolation: isolate;
}
.hero__dedans {
  width: var(--large); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(2rem, 5vw, 6rem);
  padding-top: calc(var(--haut-entete) + clamp(.8rem, 4.5vh, 4rem));
  padding-bottom: clamp(.9rem, 2.6vh, 2.2rem);
}
.hero__texte { grid-column: 1; grid-row: 1; align-self: start; position: relative; z-index: 4; }
.surtitre--hero { margin-bottom: clamp(.6rem, 2vh, 1.4rem); }
.chapo--hero { max-width: 34em; margin-top: clamp(.8rem, 2.2vh, 1.4rem); font-size: clamp(1rem, min(.98rem + .4vw, 2.4vh), 1.3rem); }
.recherche--hero { margin-top: clamp(1rem, 3.2vh, 2rem); }

.reperes {
  grid-column: 1 / -1; grid-row: 2;
  align-self: end;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(1rem, 3vh, 3rem) 0 0;
  border-top: 2px solid var(--trait);
  position: relative; z-index: 2;
}
.repere { padding: clamp(.6rem, 1.6vh, 1.1rem) 1.2rem 0 0; }
.repere + .repere { padding-left: 1.4rem; border-left: 1px solid var(--trait); }
.repere dt { font-size: clamp(1.5rem, min(1.1rem + 1.8vw, 5vh), 3rem); white-space: nowrap; color: var(--texte); }
.repere dd { margin: .35rem 0 0; color: var(--texte-doux); font-size: .92rem; line-height: 1.35; }
/* Les très petits écrans (320 × 568 à 360 × 640) : tout se resserre d'un
   cran, pour que la recherche et les repères restent dans le premier écran. */
@media (max-width: 380px) and (max-height: 700px) {
  .hero .titre-hero { font-size: 1.85rem; }
  .chapo--hero { font-size: .95rem; line-height: 1.5; }
  .surtitre--hero { display: none; }
  .chapo--hero { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .hero--ligne .titre-hero { font-size: 1.62rem; }
  .hero--ligne .chapo--hero { -webkit-line-clamp: 3; }
  .marque-geante { width: min(50%, 22vh); }
  .recherche__label { font-size: .88rem; margin-bottom: .35rem; }
  .recherche__champ input, .recherche__bouton { min-height: 50px; }
  .recherche__bouton { width: 50px; }
  /* « Autour de moi » et l'entrée Entreprises ne tiennent pas côte à côte :
     ici, l'entrée reste dans le menu, les repères restent à l'écran. */
  .hero .lien-entreprise { display: none; }
}
@media (max-width: 760px) {
  .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .repere { padding-top: .55rem; }
  .repere dt { font-size: 1.5rem; }
  .repere dd { font-size: .78rem; margin-top: .1rem; line-height: 1.25; }
  .hero__dedans { padding-bottom: .7rem; }
  .reperes { margin-top: .9rem; }
  .repere:nth-child(n+3) { margin-top: .5rem !important; }
  .repere:nth-child(3) { padding-left: 0; border-left: 0; }
  .repere:nth-child(n+3) { border-top: 1px solid var(--trait); margin-top: .9rem; }
}

/* Le haut de page montré est décidé par <html data-hero>, posé AVANT le
   premier affichage (script de <head> : ?hero=, puis le choix retenu). Sans
   ces règles, le masquage d'origine du HTML s'appliquait jusqu'au passage
   du script : au rafraîchissement, on voyait le haut de page par défaut,
   puis il basculait. */
html[data-hero="mur"] .hero[data-variante]:not([data-variante="mur"]),
html[data-hero="ligne"] .hero[data-variante]:not([data-variante="ligne"]),
html[data-hero="portes"] .hero[data-variante]:not([data-variante="portes"]) { display: none !important; }
html[data-hero="mur"] .hero[data-variante="mur"][hidden],
html[data-hero="ligne"] .hero[data-variante="ligne"][hidden],
html[data-hero="portes"] .hero[data-variante="portes"][hidden] { display: grid !important; }

/* ── A · Le mur ────────────────────────────────────────────────────────
   Tous les visages du réseau, en noir et blanc. Ils s'allument tour à
   tour — en couleur, cerclés du carré orange — comme des coachs qui
   répondent. Le texte se lit sur un voile plein à gauche. */

.hero--mur { background: var(--p-sombre); color: var(--p-sur-sombre); }
.hero--mur { --texte: var(--p-sur-sombre); --texte-doux: color-mix(in srgb, var(--p-sur-sombre) 78%, var(--p-sombre)); --accent-encre: var(--p-accent); --trait: color-mix(in srgb, var(--p-sur-sombre) 22%, transparent); }

.mur {
  position: absolute; inset: 0; z-index: -2;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-auto-rows: calc(100vw / 10);
  align-content: center;
  gap: 2px;
  background: var(--p-sombre);
  transform: rotate(-4deg) scale(1.14);
  transform-origin: 60% 50%;
}
.mur__case { position: relative; overflow: hidden; background: #111; }
.mur__case img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.55);
  transition: filter .9s;
}
.mur__case::after {
  content: ''; position: absolute; inset: 0;
  border: 4px solid var(--p-accent);
  opacity: 0; transition: opacity .9s;
}
/* L'allumage, à tour de rôle (le script choisit, équitablement). */
/* Le fondu ENCHAÎNÉ : le nouveau visage se pose par-dessus l'ancien et
   apparaît ; jamais de passage par une case vide (noire). */
.mur__case img { position: absolute; inset: 0; transition: filter .9s, opacity .8s ease; }
.mur__case img.est-entrante { opacity: 0; }
.mur__case.est-allumee img { filter: none; }
.mur__case.est-allumee::after { opacity: 1; }
/* Le voile : plein à gauche (le texte), ouvert à droite (les visages),
   et fermé en bas (les repères) comme en haut (l'en-tête). */
.hero--mur::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--p-sombre) 70%, transparent) 0%, transparent 16%),
    linear-gradient(0deg, var(--p-sombre) 0%, color-mix(in srgb, var(--p-sombre) 80%, transparent) 14%, transparent 34%),
    linear-gradient(90deg, var(--p-sombre) 0%, color-mix(in srgb, var(--p-sombre) 96%, transparent) 34%, color-mix(in srgb, var(--p-sombre) 55%, transparent) 62%, color-mix(in srgb, var(--p-sombre) 12%, transparent) 100%);
}
/* Le survol : le voile et le bloc de texte laissent passer la souris
   jusqu'aux visages (sinon ils la captaient, et rien ne réagissait). */
.hero--mur::before { pointer-events: none; }
.hero--mur .hero__dedans { pointer-events: none; }
.hero--mur .hero__dedans > * { pointer-events: auto; }
.mur__case { cursor: pointer; transition: transform .3s cubic-bezier(.2, .7, .1, 1), box-shadow .3s; }
.mur__nom {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 2;
  padding: .3rem .45rem; border-radius: var(--rayon);
  background: var(--p-accent); color: var(--accent-texte);
  font-size: .78rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.mur__nom b { font-weight: 800; }
@media (hover: hover) {
  .mur__case:hover { z-index: 3; transform: scale(1.1); box-shadow: 0 18px 40px -10px rgb(0 0 0 / .7); }
  .mur__case:hover img { animation: none !important; filter: none !important; }
  .mur__case:hover::after { animation: none !important; opacity: 1 !important; }
  .mur__case:hover .mur__nom { opacity: 1; transform: none; }
}
.hero--mur .hero__texte { max-width: 44rem; }
.hero--mur .recherche__autour { color: var(--p-sur-sombre); }

/* Sur téléphone, le mur devient un BANDEAU de visages en haut, bien
   visible, où tourne la rotation ; le texte se lit en dessous, sur le
   sombre. (Sous un voile uniforme, on ne devinait plus les visages.) */
@media (max-width: 900px) {
  .mur {
    grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: calc(100vw / 6);
    align-content: start;
    transform: rotate(-4deg) scale(1.18); transform-origin: 50% 0;
    top: calc(var(--haut-entete) - 18px);
  }
  .hero--mur::before {
    background:
      linear-gradient(180deg, var(--p-sombre) 0, var(--p-sombre) calc(var(--haut-entete) - 6px),
        color-mix(in srgb, var(--p-sombre) 18%, transparent) calc(var(--haut-entete) + 14px),
        color-mix(in srgb, var(--p-sombre) 25%, transparent) calc(var(--haut-entete) + 31vw),
        var(--p-sombre) calc(var(--haut-entete) + 40vw));
  }
  .hero--mur .hero__dedans { padding-top: calc(var(--haut-entete) + 38vw); }
  .hero--mur .surtitre--hero { display: none; }
}
/* Les téléphones courts (≤ 760 px de haut) : le bandeau de visages
   rétrécit, la présentation tient en trois lignes, les repères se
   serrent — ils restent dans le premier écran, dans les quatre langues. */
@media (max-width: 900px) and (max-height: 760px) {
  .hero--mur::before {
    background:
      linear-gradient(180deg, var(--p-sombre) 0, var(--p-sombre) calc(var(--haut-entete) - 6px),
        color-mix(in srgb, var(--p-sombre) 18%, transparent) calc(var(--haut-entete) + 14px),
        color-mix(in srgb, var(--p-sombre) 25%, transparent) calc(var(--haut-entete) + min(31vw, 11vh)),
        var(--p-sombre) calc(var(--haut-entete) + min(40vw, 16vh)));
  }
  .hero--mur .hero__dedans { padding-top: calc(var(--haut-entete) + min(38vw, 15vh)); }
  .hero--mur .chapo--hero { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: .6rem; }
  .hero--mur .recherche--hero { margin-top: .9rem; }
  .hero--mur .reperes { margin-top: .8rem; }
  .hero--mur .repere { padding-top: .45rem; }
  .hero--mur .repere dt { font-size: 1.3rem; }
  .hero--mur .repere dd { font-size: .82rem; margin-top: .2rem; }
}

/* ── B · La personne (clé « ligne », gardée pour les réglages déjà faits)
   La personne du logo, en très grand : la tête, et la photo (en bichromie
   orange et encre) taillée en épaules. */

.hero--ligne { background: var(--p-fond); }
.hero--ligne .titre-hero, .hero--carte .titre-hero { font-size: clamp(2rem, min(1.2rem + 3.6vw, 7.2vh), 5.2rem); }
.hero--ligne .hero__dedans { align-items: center; }
.hero--ligne .hero__texte { align-self: center; }

.marque-geante {
  grid-column: 2; grid-row: 1;
  position: relative;
  width: min(100%, 52vh);
  aspect-ratio: .8;
  justify-self: end; align-self: center;
  margin: 0;
}
/* La personne du logo : la tête (un rond), et la photo taillée en épaules. */
.marque-geante__tete {
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  width: 26%; aspect-ratio: 1; border-radius: 50%;
  background: var(--p-accent);
}
.marque-geante__arche {
  position: absolute; left: 0; right: 0; bottom: 0; top: 29%;
  border-radius: 999px 999px 0 0;
  background: var(--p-accent);
  overflow: hidden;
}
.marque-geante__arche img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%;
  filter: grayscale(1) contrast(1.12);
  mix-blend-mode: multiply;
}
/* À l'arrivée, les épaules montent, puis la tête se pose. */
html.mvt .hero--ligne .marque-geante__arche { animation: arche .9s cubic-bezier(.2, .7, .1, 1) both; }
html.mvt .hero--ligne .marque-geante__tete { animation: tete .7s cubic-bezier(.2, .7, .1, 1) .45s both; }
@keyframes arche { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tete { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }

/* ── C · La carte ──────────────────────────────────────────────────────
   Le réseau tel qu'il est : un point orange par coach, sur la Belgique,
   la France et le Luxembourg. Quelques visages se posent sur leur point. */

.hero--carte { background: var(--p-fond); }
.hero--carte .hero__dedans { align-items: center; }
/* ── Les cartes : un rendu de cartographe ──────────────────────────────
   Mer et voisins en tons neutres, nos trois pays en clair, des traits
   fins qui ne grossissent pas avec le zoom (non-scaling-stroke), un
   carroyage à peine visible. L'orange est réservé aux coachs. */

.carte-reseau {
  --carte-mer: color-mix(in srgb, var(--p-encre) 5%, var(--p-fond));
  --carte-voisin: color-mix(in srgb, var(--p-encre) 10%, var(--p-fond));
  --carte-terre: var(--p-fond);
  --carte-nous: color-mix(in srgb, var(--p-accent) 7%, var(--p-fond));
  --carte-trait-pays: color-mix(in srgb, var(--p-encre) 34%, var(--p-fond));
  --carte-trait-voisin: color-mix(in srgb, var(--p-encre) 18%, var(--p-fond));
  position: relative; margin: 0;
}
.carte-reseau__svg { display: block; width: 100%; height: auto; }
.carte-reseau__svg path, .carte-reseau__svg line { vector-effect: non-scaling-stroke; }
.mer { fill: var(--carte-mer); }
.voisins { fill: var(--carte-voisin); stroke: var(--carte-trait-voisin); stroke-width: .8; stroke-linejoin: round; }
.pays { fill: var(--carte-terre); stroke: var(--carte-trait-pays); stroke-width: 1; stroke-linejoin: round; }
.pays--be, .pays--lu { fill: var(--carte-nous); }
.graticule { fill: none; stroke: color-mix(in srgb, var(--p-encre) 7%, transparent); stroke-width: .6; stroke-dasharray: 2 5; }
.etiquette {
  fill: color-mix(in srgb, var(--p-encre) 42%, var(--p-fond));
  font-family: var(--police); font-weight: 700; font-size: 20px;
  letter-spacing: .38em; text-transform: uppercase;
  pointer-events: none; user-select: none;
}
.carte-reseau__svg[data-vue="ensemble"] .etiquette { font-size: 22px; }

/* Les épingles : un point, ou le visage du coach cerclé d'orange. */
.pin { cursor: pointer; outline: none; }
.pin__point { fill: var(--p-accent); stroke: var(--p-fond); }
.pin__anneau { fill: var(--p-accent); filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / .25)); }
.pin.est-actif .pin__anneau, .pin:focus-visible .pin__anneau { fill: var(--p-encre); }
.pin.est-actif .pin__point, .pin:focus-visible .pin__point { fill: var(--p-encre); }
.pin:focus-visible { outline: none; }
.pin.est-loin, .pin.est-masque { opacity: .38; }
.pin.est-masque { pointer-events: none; }
.fil { stroke: color-mix(in srgb, var(--p-encre) 40%, transparent); }
.fil__ancre { fill: var(--p-encre); }
.epingle-recherche__halo { fill: color-mix(in srgb, var(--p-encre) 8%, transparent); stroke: var(--p-encre); stroke-width: 2; stroke-dasharray: 4 6; }
.epingle-recherche__coeur { fill: var(--p-encre); stroke: var(--p-fond); stroke-width: 3; }

/* La fiche d'un coach, posée sur la carte. */
.fiche-carte {
  position: absolute; z-index: 5; left: 0; top: 0;
  display: grid; grid-template-columns: 48px minmax(0, auto) auto; align-items: center; gap: .65rem;
  padding: .45rem .5rem .45rem .45rem;
  background: var(--p-fond); color: var(--p-encre);
  border: 1px solid color-mix(in srgb, var(--p-encre) 12%, transparent);
  border-radius: var(--rayon-carte); box-shadow: 0 12px 30px -10px rgb(0 0 0 / .35);
  font-size: .86rem; line-height: 1.25; white-space: nowrap;
}
.fiche-carte img { width: 48px; height: 48px; object-fit: cover; border-radius: 2px; }
.fiche-carte__texte { display: grid; }
.fiche-carte__texte b { font-weight: 800; }
.fiche-carte__texte span { color: var(--p-doux); }
.fiche-carte__voir {
  min-height: 40px; padding: .4rem .75rem; border: 0; border-radius: var(--rayon);
  background: var(--p-accent); color: var(--accent-texte); font-weight: 700; cursor: pointer;
}

.point-legende { width: 10px; height: 10px; border-radius: 50%; background: var(--p-accent); flex: none; }

/* ── C · Les deux portes ───────────────────────────────────────────────
   Deux publics, deux portes, côte à côte : à gauche le carré orange du
   logo (la photo en bichromie, la recherche), à droite l'anthracite et le
   réseau. La porte visée s'élargit : le visiteur choisit son camp. */

.hero--portes {
  grid-template-columns: 1.12fr .88fr;
  background: var(--p-sombre);
}
/* Au survol, la porte visée s'éclaire et l'autre s'estompe — SANS toucher
   à la mise en page : élargir la porte refaisait les lignes du texte, et
   tout sautait verticalement. */
.porte__dedans { transition: opacity .5s; }
.porte__photo img { transition: transform 1.2s cubic-bezier(.2, .7, .1, 1), opacity .6s, filter .6s; }
@media (hover: hover) and (min-width: 901px) {
  .hero--portes:has(.porte--coach:hover) .porte--client .porte__dedans,
  .hero--portes:has(.porte--client:hover) .porte--coach .porte__dedans { opacity: .55; }
  .porte--coach:hover .porte__photo img { opacity: .85; }
  .porte--client:hover .porte__photo img { opacity: 1; }
}
html[data-page="accueil"][data-hero="portes"] .entete:not(.est-defilee),
html:not([data-page="accueil"]) .entete:not(.est-defilee) { background: var(--p-fond); box-shadow: 0 1px 0 var(--trait); }
.porte { position: relative; overflow: hidden; isolation: isolate; display: grid; min-width: 0; }
/* overflow: hidden — au survol, la photo grossit (scale) : sans lui, son
   bord gauche sortait du cadre, hors du dégradé, en bande grise. */
.porte__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.porte__photo img { width: 100%; height: 100%; object-fit: cover; }
.porte:hover .porte__photo img { transform: scale(1.04); }
.porte__dedans {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  padding: calc(var(--haut-entete) + clamp(1rem, 5vh, 3.5rem)) clamp(1.4rem, 3.4vw, 4rem) clamp(1rem, 3vh, 2.2rem);
}
.porte--client .porte__dedans { padding-left: max(var(--gouttiere), calc((100vw - 1520px) / 2)); }
.porte--coach .porte__dedans { padding-right: max(var(--gouttiere), calc((100vw - 1520px) / 2)); }
.hero--portes .titre-hero { font-size: clamp(2.1rem, min(1rem + 3.3vw, 7.2vh), 4.8rem); max-width: 10em; }
.hero--portes .chapo--hero { max-width: 30em; }
.hero--portes .recherche { width: 100%; max-width: 34rem; }

/* La porte client : le carré du logo. */
.porte--client { background: var(--p-accent); color: var(--accent-texte); --texte: var(--accent-texte); --texte-doux: color-mix(in srgb, var(--accent-texte) 82%, var(--p-accent)); --accent-encre: var(--accent-texte); --trait: color-mix(in srgb, var(--accent-texte) 24%, transparent); }
.porte--client .porte__photo img { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; opacity: .95; object-position: 65% 40%; }
.porte--client .porte__photo { left: 38%; }
/* Le bloc de texte reste TOUJOURS sur l'orange plein : la photo n'occupe
   que la droite de la porte et s'y fond. Sur un écran large, elle passait
   sous le chapô et le rendait illisible. */
.porte--client .porte__photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--p-accent) 0%, var(--p-accent) 22%, color-mix(in srgb, var(--p-accent) 45%, transparent) 55%, color-mix(in srgb, var(--p-accent) 8%, transparent) 100%);
}
.porte--client .porte__dedans > * { max-width: min(34rem, 100%); }
.porte--client .surtitre::before { background: var(--accent-texte); }
.recherche--porte .recherche__champ { border-color: transparent; }
.recherche--porte .recherche__bouton { background: var(--p-sombre); color: var(--p-sur-sombre); }
.recherche--porte .recherche__autour { color: var(--accent-texte); text-decoration-color: var(--accent-texte); }
.recherche--porte .recherche__autour .ic { color: var(--accent-texte); }

/* La porte coach : l'anthracite, l'orange en lumière. */
.porte--coach { color: var(--p-sur-sombre); --texte: var(--p-sur-sombre); --texte-doux: color-mix(in srgb, var(--p-sur-sombre) 78%, var(--p-sombre)); --accent-encre: var(--p-accent); --trait: color-mix(in srgb, var(--p-sur-sombre) 22%, transparent); }
.porte--coach .porte__photo img { filter: grayscale(1) contrast(1.1) brightness(.95); opacity: .62; object-position: 50% 40%; }
/* Même règle à droite : le texte sur l'anthracite plein ; la photo du
   réseau n'occupe que la moitié basse, au-dessus des preuves. */
.porte--coach .porte__photo { top: 46%; }
.porte--coach .porte__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--p-sombre) 0%, color-mix(in srgb, var(--p-sombre) 20%, transparent) 30%, color-mix(in srgb, var(--p-sombre) 20%, transparent) 55%, color-mix(in srgb, var(--p-sombre) 90%, transparent) 85%, var(--p-sombre) 100%); }
.porte__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: clamp(1rem, 3vh, 2rem); }

/* Les preuves, en pied de chaque porte (dans le premier écran). */
.porte__preuves {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem;
  width: 100%; max-width: 34rem; margin: auto 0 0; padding-top: clamp(1rem, 3vh, 2rem);
}
.porte__preuves > div { border-top: 2px solid var(--trait); padding-top: .8rem; }
.porte__preuves dt { font-stretch: var(--large-titre); font-weight: 850; font-size: clamp(1.5rem, min(1rem + 1.6vw, 4.6vh), 2.6rem); line-height: 1; white-space: nowrap; }
.porte__preuves dd { margin: .35rem 0 0; font-size: .9rem; line-height: 1.3; color: var(--texte-doux); }

/* Sur grand écran, la piste s'efface : les portes sont les colonnes du
   haut de page. Onglets et flèche ne servent qu'au téléphone. */
.portes__piste { display: contents; }
.portes__onglets, .portes__suivante { display: none; }

/* Téléphone : les deux portes GLISSENT de côté, chacune plein écran.
   Trois signaux disent qu'il y a une seconde porte : les deux onglets en
   haut, la porte coach qui dépasse sur le bord droit (12 %), et sa flèche.
   L'aimantage (scroll-snap) arrête net sur chaque porte. */
@media (max-width: 900px) {
  .hero--portes { display: block; min-height: 100svh; }
  .portes__piste {
    display: flex; min-height: 100svh;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .portes__piste::-webkit-scrollbar { display: none; }
  .porte { flex: 0 0 88%; min-height: 100svh; scroll-snap-align: start; }
  .porte--coach { flex-basis: 100%; }
  .porte__dedans {
    padding-top: calc(var(--haut-entete) + 4.4rem) !important;
    padding-left: var(--gouttiere) !important; padding-right: var(--gouttiere) !important;
  }
  .porte--client .porte__photo { left: 0; }
  .porte--client .porte__photo::after { background: linear-gradient(180deg, color-mix(in srgb, var(--p-accent) 70%, transparent) 0%, var(--p-accent) 40%); }
  .porte--coach .porte__photo { top: 52%; }

  .portes__onglets {
    position: absolute; z-index: 6;
    top: calc(var(--haut-entete) + .7rem); left: var(--gouttiere); right: var(--gouttiere);
    display: flex; gap: 4px; padding: 4px;
    background: var(--p-sombre);
    border-radius: var(--rayon-carte);
    box-shadow: 0 8px 20px -10px rgb(0 0 0 / .45);
  }
  .portes__onglets button {
    flex: 1 1 0; min-width: 0; min-height: 42px; padding: .35rem .5rem;
    border: 0; border-radius: var(--rayon); cursor: pointer;
    background: none; color: var(--p-sur-sombre);
    font-weight: 700; font-size: .86rem; line-height: 1.15; text-wrap: balance;
    transition: background-color .25s, color .25s;
  }
  .portes__onglets button[aria-selected="true"] { background: var(--p-accent); color: var(--accent-texte); }

  /* La flèche, dans la bande de la porte coach qui dépasse. */
  /* Elle couvre toute la bande qui dépasse d'un aplat anthracite : on n'y
     voit pas des bouts du texte de la porte coach, seulement la flèche. */
  .portes__suivante {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; z-index: 5; right: 0; top: var(--haut-entete); bottom: 0;
    width: 12%; border: 0; cursor: pointer;
    background: var(--p-sombre); color: var(--p-accent);
    box-shadow: inset 3px 0 0 var(--p-accent);
    transition: opacity .3s;
  }
  html.mvt .portes__suivante .ic { animation: invite 2.4s ease-in-out infinite; }
  @keyframes invite { 0%, 60%, 100% { translate: 0 0; } 75% { translate: 5px 0; } }
  .hero--portes[data-porte="1"] .portes__suivante { opacity: 0; pointer-events: none; }
}


/* ── Les hauts de page en colonne unique ───────────────────────────────
   Texte, repères, PUIS le visuel : un visuel placé avant les repères les
   chasserait hors du premier écran. */
@media (max-width: 900px) {
  .hero__dedans { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .hero__texte { grid-row: auto; order: 1; }
  .reperes { grid-row: auto; order: 2; }
  .marque-geante { order: 3; }
  .surtitre--hero { letter-spacing: .2em; font-size: .72rem; }
  .marque-geante { grid-column: 1; grid-row: auto; justify-self: center; width: min(100%, 420px); margin-top: 2rem; }
  .hero--ligne .hero__dedans, .hero--carte .hero__dedans { align-items: start; }
  /* Sur téléphone, le visuel vient APRÈS les repères et reste modeste :
     le haut de page ne doit pas dépasser 1,35 écran. */
  .marque-geante { width: min(56%, 300px, 27vh); margin-top: 1.2rem; }
}

/* ══ Sections ════════════════════════════════════════════════════════════ */

.section {
  background: var(--fond-section);
  color: var(--texte);
  padding-block: clamp(4.5rem, 3rem + 6vw, 9rem);
  position: relative;
}
.entete-section { margin-bottom: clamp(2.4rem, 1.6rem + 3vw, 4.5rem); }

/* ── L'annuaire ────────────────────────────────────────────────────────── */

.section--annuaire { --fond-section: var(--p-fond-doux); }
.annuaire__outils {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem 2.5rem;
  padding-bottom: 1.6rem; margin-bottom: 2rem; border-bottom: 2px solid var(--trait);
}
.recherche--annuaire { margin-top: 0; }
.annuaire__filtres { min-width: 0; }
.bande { display: flex; gap: .5rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.bande::-webkit-scrollbar { display: none; }
.pastille {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .4rem 1rem;
  border: 2px solid var(--carte-trait); border-radius: var(--rayon);
  background: var(--carte); cursor: pointer; font-weight: 600; white-space: nowrap;
}
.pastille small { font-weight: 800; color: var(--accent-encre); font-size: .85rem; }
.pastille[aria-pressed="true"] { background: var(--texte); color: var(--fond-section); border-color: var(--texte); }
.pastille[aria-pressed="true"] small { color: inherit; }
.annuaire__statut { grid-column: 1 / -1; margin: 0; font-weight: 600; min-height: 1.6em; }
.annuaire__statut:empty { display: none; }

.annuaire__corps {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 40%);
  gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start;
}
.annuaire__carte { position: sticky; top: calc(var(--haut-entete) + 1.5rem); }
.carte-reseau--annuaire {
  background: var(--p-fond); border-radius: var(--rayon-carte);
  padding: clamp(.8rem, 2vw, 1.6rem); box-shadow: var(--ombre);
  --fond-section: var(--p-fond);
}
/* Zoomée sur un lieu, la carte déborderait sur l'annuaire : elle reste dans son cadre. */
.carte-reseau--annuaire .carte-reseau__svg { overflow: hidden; aspect-ratio: 1000 / 997; }
.carte-reseau--annuaire .carte-reseau__svg { transition: none; }

.coachs-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 1rem;
}
.carte-coach {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1.1rem;
  padding: 1rem;
  background: var(--carte); border: 1px solid var(--carte-trait); border-radius: var(--rayon-carte);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.carte-coach:hover { border-color: var(--accent); box-shadow: var(--ombre); }
.carte-coach.hors-page, .carte-coach.hors-filtre, .carte-coach.hors-rayon { display: none; }
.carte-coach__photo { position: relative; align-self: start; }
.carte-coach__photo img { width: 112px; height: 112px; object-fit: cover; border-radius: 2px; }
.carte-coach__photo::after {
  content: ''; position: absolute; left: -4px; bottom: -4px; width: 22px; height: 22px; background: var(--accent); z-index: -1;
}
.carte-coach__photo { z-index: 0; isolation: isolate; }
.carte-coach__corps { display: flex; flex-direction: column; min-width: 0; }
.carte-coach__badge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: .35rem;
  margin: 0 0 .45rem; padding: .2rem .55rem; border-radius: var(--rayon);
  background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--texte);
  font-size: .78rem; font-weight: 700;
}
.carte-coach__nom { font-size: 1.22rem; font-weight: 800; font-stretch: 112%; line-height: 1.15; }
.carte-coach__lieu { display: flex; align-items: flex-start; gap: .45rem; flex-wrap: wrap; margin: .3rem 0 .55rem; color: var(--texte-doux); font-size: .95rem; }
.carte-coach__lieu .drapeau { width: 20px; height: 14px; margin-top: calc((1lh - 14px) / 2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--texte) 18%, transparent); }
.carte-coach__km { font-weight: 800; color: var(--texte); white-space: nowrap; }
.carte-coach__km::before { content: '·'; margin-right: .35rem; color: var(--texte-doux); font-weight: 400; }
.carte-coach__lieux { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .84rem; color: var(--texte-doux); }
.carte-coach__lieux li { display: inline-flex; align-items: center; gap: .3rem; }
.carte-coach__lieux .ic { color: var(--texte); }
.carte-coach__langues { margin: .4rem 0 0; font-size: .84rem; color: var(--texte-doux); }
.carte-coach__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .9rem; }
.carte-coach__tel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.annuaire__plus { margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.annuaire__plus .bouton[hidden] { display: none; }
.annuaire__filtres { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.annuaire__filtres .bande { min-width: 0; }
.annuaire__voir-carte { display: none; flex: none; }
/* Sur téléphone et tablette : les pays sur une rangée qui défile, et
   « Voir sur la carte » sur la sienne, pleine largeur — côte à côte, il
   écrasait les pastilles. */
@media (max-width: 1000px) {
  .annuaire__filtres { flex-direction: column; align-items: stretch; }
  .annuaire__voir-carte { width: 100%; min-height: 48px; }
}

/* La carte en plein écran. ⚠ La règle display est CONDITIONNÉE à [open] :
   posée sans condition, la boîte resterait visible, vide, infermable. */
.modale-carte:not([open]) { display: none; }
.modale-carte[open] {
  display: flex; flex-direction: column;
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: var(--p-fond); color: var(--p-encre);
}
.modale-carte::backdrop { background: rgb(0 0 0 / .5); }
.modale-carte__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .6rem .6rem var(--gouttiere);
  border-bottom: 1px solid color-mix(in srgb, var(--p-encre) 12%, transparent);
}
.modale-carte__tete h2 { font-size: 1.15rem; font-weight: 800; font-stretch: 112%; }
.modale-carte__fermer {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; border-radius: var(--rayon);
}
.modale-carte__fermer:hover { background: color-mix(in srgb, var(--p-encre) 8%, transparent); }
.modale-carte__statut { margin: 0; padding: .6rem var(--gouttiere) 0; font-weight: 600; font-size: .92rem; }
.modale-carte__corps { flex: 1; min-height: 0; display: grid; place-items: center; padding: .8rem; overflow: hidden; }
.modale-carte__corps .carte-reseau--annuaire { width: min(100%, calc((100dvh - 160px) * 1.003)); padding: .4rem; box-shadow: none; }

@media (max-width: 1000px) {
  .annuaire__corps { grid-template-columns: minmax(0, 1fr); }
  .annuaire__carte { display: none; }
  .annuaire__voir-carte { display: inline-flex; }
  .annuaire__outils { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .carte-coach { grid-template-columns: 84px minmax(0, 1fr); gap: .85rem; padding: .85rem; }
  .carte-coach__photo img { width: 84px; height: 84px; }
}

/* ── Le coaching ───────────────────────────────────────────────────────── */

.formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.formule {
  display: flex; flex-direction: column;
  background: var(--carte); border: 1px solid var(--carte-trait); border-radius: var(--rayon-carte); overflow: hidden;
}
.formule__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--p-sombre); }
.formule__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .1, 1); }
.formule:hover .formule__photo img { transform: scale(1.04); }
.formule__numero {
  position: absolute; left: 0; bottom: 0;
  padding: .4rem .9rem .2rem;
  background: var(--accent); color: var(--accent-texte);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
}
.formule__corps { display: flex; flex-direction: column; flex: 1; padding: clamp(1.3rem, 2vw, 2rem); }
.formule__titre { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.3rem); margin-bottom: .8rem; }
.formule__corps > p { color: var(--texte-doux); }
.formule__services { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; padding-top: 1.2rem; }
.formule__services li > span,
.formule__services a {
  display: block; padding: .35rem .7rem; border: 1px solid var(--carte-trait); border-radius: var(--rayon);
  font-size: .88rem; font-weight: 600; color: inherit; text-decoration: none;
  transition: border-color .2s, background-color .2s, color .2s;
}
.formule__services a:hover,
.formule__services a:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.formule__coachs {
  display: flex; align-items: center; gap: .6rem;
  margin-top: 1.1rem; padding: .85rem 1rem;
  border-radius: var(--rayon); background: var(--accent); color: var(--accent-texte);
  font-weight: 700; text-decoration: none;
  transition: filter .2s, transform .2s;
}
.formule__coachs span { flex: 1; }
.formule__coachs svg:last-child { transition: transform .2s; }
.formule__coachs:hover { filter: brightness(1.06); }
.formule__coachs:hover svg:last-child { transform: translateX(3px); }
@media (max-width: 1000px) { .formules { grid-template-columns: repeat(2, minmax(0, 1fr)); } .formule:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .formules { grid-template-columns: minmax(0, 1fr); } .formule:last-child { grid-column: auto; } }

.lieux-bande {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem; align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2.6rem);
  background: var(--p-sombre); color: var(--p-sur-sombre); border-radius: var(--rayon-carte);
}
.lieux-bande h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.2rem); margin-bottom: .6rem; }
.lieux-bande p { color: color-mix(in srgb, var(--p-sur-sombre) 80%, var(--p-sombre)); }
.lieux-bande__liste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.lieux-bande__liste li { display: grid; justify-items: center; gap: .55rem; text-align: center; font-size: .86rem; font-weight: 600; }
.lieux-bande__liste .ic { width: 52px; height: 52px; padding: 12px; background: var(--p-accent); color: var(--accent-texte); border-radius: var(--rayon); }
@media (max-width: 1000px) { .lieux-bande { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .lieux-bande__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.2rem; } }

/* ── La méthode ────────────────────────────────────────────────────────── */

.methode { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.points-methode { display: grid; gap: 1.6rem; }
.point-methode { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.2rem; padding-top: 1.4rem; border-top: 1px solid var(--trait); }
.point-methode__num { grid-row: span 2; font-size: 2.2rem; color: var(--accent); }
.point-methode h3 { font-size: 1.25rem; font-weight: 800; font-stretch: 110%; margin-bottom: .35rem; }
.point-methode p { color: var(--texte-doux); }
.methode__visuel { position: relative; height: 100%; min-height: 520px; }
.methode__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--rayon-carte); }
.methode__citation {
  position: absolute; left: clamp(-2rem, -3vw, -1rem); bottom: 2rem; right: 18%;
  padding: 1.4rem 1.6rem;
  background: var(--p-accent); color: var(--accent-texte);
  border-radius: var(--rayon);
  font-weight: 800; font-stretch: 112%; font-size: clamp(1.1rem, .9rem + .7vw, 1.55rem); line-height: 1.25;
}
@media (max-width: 900px) {
  .methode { grid-template-columns: minmax(0, 1fr); }
  .methode__visuel { min-height: 0; aspect-ratio: 4 / 3; }
  .methode__citation { left: 1rem; right: 1rem; bottom: 1rem; }
}

/* ── Les témoignages ───────────────────────────────────────────────────── */

.section--temoignages { --fond-section: var(--p-fond-doux); }
.temoignages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.temoignage {
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2vw, 2rem);
  background: var(--carte); border-radius: var(--rayon-carte); border: 1px solid var(--carte-trait);
}
.temoignage__marque {
  width: 2.4rem; height: 2.4rem; margin-bottom: 1.2rem;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231d1c1b' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") center / 60% no-repeat;
}
.temoignage blockquote { font-size: 1.04rem; line-height: 1.6; }
.temoignage figcaption { margin-top: auto; padding-top: 1.2rem; font-weight: 800; }
@media (max-width: 1100px) { .temoignages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .temoignages { grid-template-columns: minmax(0, 1fr); } }

/* ── Devenir coach ─────────────────────────────────────────────────────── */

.section--pro { overflow: clip; }
.section--pro::before {
  /* Le carré du logo, en contour, coupé par le bord : la section porte la marque. */
  content: ''; position: absolute; right: -8vw; top: -8vw; width: 30vw; aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--p-accent) 45%, transparent);
  pointer-events: none;
}
.pro__haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; position: relative; }
.pro__boutons { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.pro__photo { position: relative; }
.pro__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon-carte); }
.pro__photo::after {
  content: ''; position: absolute; right: -14px; bottom: -14px; width: 38%; aspect-ratio: 1;
  border: 3px solid var(--p-accent); z-index: -1;
}
.pro__photo { isolation: isolate; }

.chiffres {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(3rem, 6vw, 5.5rem) 0 0; border-top: 2px solid var(--trait);
}
.chiffre { padding: 1.6rem 1.4rem 0 0; }
.chiffre + .chiffre { padding-left: 1.6rem; border-left: 1px solid var(--trait); }
.chiffre dt { font-size: clamp(2.6rem, 1.6rem + 3vw, 5rem); color: var(--accent); white-space: nowrap; }
.chiffre dd { margin: .5rem 0 0; color: var(--texte-doux); max-width: 16em; }
@media (max-width: 900px) {
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffre:nth-child(3) { padding-left: 0; border-left: 0; }
  .chiffre:nth-child(n+3) { margin-top: 1.4rem; border-top: 1px solid var(--trait); }
}

.pro__details { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(3rem, 6vw, 5rem); }
.pro__details h3 { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.9rem); margin-bottom: 1.2rem; }
.liste-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 2rem; }
.liste-check li { display: flex; align-items: flex-start; gap: .7rem; }
.liste-check .ic { color: var(--accent); margin-top: calc((1lh - 18px) / 2); }
.pro__pourqui p { color: var(--texte-doux); }
@media (max-width: 900px) {
  .section--pro::before { display: none; }
  .pro__haut, .pro__details { grid-template-columns: minmax(0, 1fr); }
  .liste-check { grid-template-columns: minmax(0, 1fr); }
}

.paroles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); }
.parole {
  display: flex; flex-direction: column;
  padding: 1.5rem; background: var(--carte); border: 1px solid var(--carte-trait); border-radius: var(--rayon-carte);
}
.parole__photo { width: 64px; height: 64px; object-fit: cover; border-radius: 2px; box-shadow: 6px 6px 0 var(--p-accent); margin-bottom: 1.3rem; }
.parole blockquote { font-size: 1rem; line-height: 1.6; }
.parole figcaption { margin-top: auto; padding-top: 1.2rem; display: grid; }
.parole figcaption b { font-weight: 800; }
.parole figcaption > span { color: var(--texte-doux); font-size: .9rem; }
@media (max-width: 1100px) { .paroles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .paroles { grid-template-columns: minmax(0, 1fr); } }

/* ── Notre histoire ────────────────────────────────────────────────────── */

.histoire { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.histoire__portrait { position: relative; isolation: isolate; max-width: 520px; }
.histoire__portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.histoire__carre { position: absolute; left: -7%; top: -7%; width: 70%; aspect-ratio: 1; background: var(--p-accent); z-index: -1; }
.histoire__portrait figcaption { margin-top: .9rem; font-weight: 700; color: var(--texte-doux); }
.histoire__texte > p { font-size: 1.1rem; color: var(--texte-doux); max-width: 40em; }
.jalons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.5rem; }
.jalon { position: relative; padding-top: 1.3rem; border-top: 2px solid var(--trait); display: grid; gap: .4rem; font-size: .95rem; }
.jalon::before { content: ''; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; background: var(--accent); }
.jalon b { font-size: 1.6rem; }
.jalon span { color: var(--texte-doux); }
@media (max-width: 900px) {
  .histoire { grid-template-columns: minmax(0, 1fr); }
  .histoire__portrait { max-width: 380px; margin: 1rem auto 0 7%; }
  .jalons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── L'appel final ─────────────────────────────────────────────────────── */

.section--appel {
  --fond-section: var(--p-accent);
  --texte: var(--accent-texte);
  --texte-doux: color-mix(in srgb, var(--accent-texte) 82%, var(--p-accent));
  --accent-encre: var(--accent-texte);
  --trait: color-mix(in srgb, var(--accent-texte) 22%, transparent);
  --accent: var(--accent-texte);
}
.section--appel .surtitre::before { background: var(--accent-texte); }
.appel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.recherche--appel .recherche__champ { border-color: transparent; }
.recherche--appel .recherche__bouton { background: var(--p-sombre); color: var(--p-sur-sombre); }
.recherche--appel .recherche__icone { color: var(--p-encre); }
.appel__pro { padding: clamp(1.4rem, 2.5vw, 2.2rem); background: var(--p-sombre); color: var(--p-sur-sombre); border-radius: var(--rayon-carte); }
.appel__pro h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.appel__pro p { color: color-mix(in srgb, var(--p-sur-sombre) 80%, var(--p-sombre)); }
.appel__pro .bouton { margin-top: 1.2rem; background: var(--p-accent); color: var(--accent-texte); }
@media (max-width: 900px) { .appel { grid-template-columns: minmax(0, 1fr); } }

/* ── 404 ───────────────────────────────────────────────────────────────── */
.section--404 { min-height: 70vh; padding-top: calc(var(--haut-entete) + 5rem); }

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

.pied { background: var(--p-sombre); color: var(--p-sur-sombre); padding-top: clamp(3.5rem, 6vw, 6rem); }
.pied__dedans { width: var(--large); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
.marque--pied .logo { --logo-taille: 31px; }
.marque--pied .logo-ancien { width: 210px; }
.pied__apropos { margin-top: 1.2rem; max-width: 26em; color: color-mix(in srgb, var(--p-sur-sombre) 76%, var(--p-sombre)); }
.pied h2 { font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--p-accent); margin-bottom: 1.1rem; font-weight: 700; }
.pied__liens { display: grid; gap: .25rem; }
.pied__liens a {
  display: inline-flex; align-items: flex-start; gap: .6rem;
  padding-block: .35rem; text-decoration: none; color: color-mix(in srgb, var(--p-sur-sombre) 88%, var(--p-sombre));
}
.pied__liens a .ic { margin-top: calc((1lh - 17px) / 2); }
.pied__liens a:hover { color: var(--p-accent); }
.drapeau { width: 22px; height: 15px; flex: none; margin-top: calc((1lh - 15px) / 2); border-radius: 2px; }
.drapeau--be { background: linear-gradient(90deg, #111 33.3%, #fdda24 33.3% 66.6%, #ef3340 66.6%); }
.drapeau--fr { background: linear-gradient(90deg, #0055a4 33.3%, #fff 33.3% 66.6%, #ef4135 66.6%); }
.drapeau--lu { background: linear-gradient(180deg, #ed2939 33.3%, #fff 33.3% 66.6%, #00a1de 66.6%); }
.pied__bas {
  width: var(--large); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 1.4rem 0 1.8rem; border-top: 1px solid color-mix(in srgb, var(--p-sur-sombre) 16%, transparent);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem;
  font-size: .86rem; color: color-mix(in srgb, var(--p-sur-sombre) 66%, var(--p-sombre));
}
.pied__bas p { margin: 0; }
.pied__bas a { color: inherit; }
@media (max-width: 1000px) { .pied__dedans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied__bloc--marque { grid-column: 1 / -1; } }
@media (max-width: 560px) { .pied__dedans { grid-template-columns: minmax(0, 1fr); } }

/* ══ Barre d'action mobile ═══════════════════════════════════════════════
   Elle n'arrive qu'APRÈS le haut de page (script.js) : le héros porte déjà
   la recherche. */

.barre-appel { display: none; }
@media (max-width: 760px) {
  :root { --barre-appel: 64px; }
  html.js:has(.hero:not([hidden]) .recherche) { --barre-appel: 0px; }
  .barre-appel {
    position: fixed; inset: auto 0 0; z-index: 45;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--p-sombre); color: var(--p-sur-sombre);
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform .3s, visibility .3s;
  }
  .barre-appel a {
    min-width: 0; min-height: 64px;
    display: grid; justify-items: center; align-content: center; gap: .25rem;
    padding: .4rem .3rem; text-decoration: none; font-size: .8rem; font-weight: 700;
    text-align: center; text-wrap: balance; hyphens: auto; overflow-wrap: break-word;
  }
  .barre-appel a + a { border-left: 1px solid color-mix(in srgb, var(--p-sur-sombre) 16%, transparent); }
  .barre-appel a:first-child { background: var(--p-accent); color: var(--accent-texte); }
  .barre-appel.est-cachee { transform: translateY(100%); visibility: hidden; }
}

/* ══ Le commutateur de relecture ═════════════════════════════════════════ */

/* Sur téléphone, replié, il ne garde qu'une pastille : il couvrait le bas
   de l'écran et la barre d'action. */
@media (max-width: 760px) {
  .commutateur.est-repliee { width: auto; right: .6rem; }
  .commutateur.est-repliee .commutateur__titre { font-size: .78rem; }
  .commutateur.est-repliee .commutateur__detail { display: none; }
  .commutateur.est-repliee .commutateur__poignee { padding: .55rem .8rem; }
  /* Au-dessus de la barre d'action (64 px), qui arrive après le haut de page. */
  html .commutateur { bottom: calc(64px + .6rem + env(safe-area-inset-bottom)); }
}
.commutateur {
  position: fixed; right: 1rem; bottom: calc(1rem + var(--barre-appel)); z-index: 60;
  width: min(360px, calc(100vw - 2rem));
  background: #111; color: #f5f1eb;
  border-radius: 8px; box-shadow: 0 18px 50px -12px rgb(0 0 0 / .55);
  font-size: .9rem;
}
.commutateur__poignee {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; background: none; border: 0; cursor: pointer; font-weight: 700; text-align: left;
}
.commutateur__poignee .ic { transform: rotate(-90deg); transition: transform .2s; }
.commutateur.est-repliee .commutateur__poignee .ic { transform: rotate(90deg); }
.commutateur.est-repliee .commutateur__corps { display: none; }
.commutateur__corps { padding: 0 1rem 1rem; display: grid; gap: .5rem; }
.commutateur__groupe { margin: .4rem 0 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #7aa2ff; }
.commutateur__choix { display: grid; gap: .35rem; }
.commutateur__choix button {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .7rem;
  padding: .55rem .7rem; background: #1f1f1f; border: 1px solid #333; border-radius: 6px; cursor: pointer; text-align: left;
}
.commutateur__choix button > strong:only-child { grid-column: 1 / -1; }
.commutateur__choix button small { grid-column: 2; color: #aaa; font-size: .78rem; }
.commutateur__choix button[aria-checked="true"] { border-color: #7aa2ff; background: #18203a; }
.commutateur__pastilles { grid-row: span 2; display: flex; }
.commutateur__pastilles i { width: 14px; height: 28px; }

/* ══ Apparitions ═════════════════════════════════════════════════════════
   Seulement les SUITES (cartes, formules, chiffres), chacune à son tour.
   L'opacité de départ n'existe que si le script a démarré. */
html.js.mvt [data-entre] { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s cubic-bezier(.2, .7, .1, 1); }
html.js.mvt [data-entre].est-vue { opacity: 1; transform: none; }

/* Le texte du haut de page entre une fois, en douceur. */
html.mvt .hero:not([hidden]) .hero__texte > * { animation: monte .8s cubic-bezier(.2, .7, .1, 1) both; }
html.mvt .hero:not([hidden]) .hero__texte > :nth-child(2) { animation-delay: .08s; }
html.mvt .hero:not([hidden]) .hero__texte > :nth-child(3) { animation-delay: .16s; }
html.mvt .hero:not([hidden]) .hero__texte > :nth-child(4) { animation-delay: .24s; }
@keyframes monte { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── La carte vivante (MapLibre) ───────────────────────────────────────
   Posée par-dessus la carte SVG, qui reste en dessous comme repli. */

/* ⚠ La feuille de MapLibre, chargée APRÈS la nôtre, pose
   `.maplibregl-map { position: relative }` : à spécificité égale, elle
   gagnait, le conteneur retombait à 0 px de haut — carte blanche, et des
   marqueurs coupés que le clic n'atteignait plus. D'où la double classe. */
.carte-vivante, .carte-vivante.maplibregl-map { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; opacity: 0; transition: opacity .4s; }
.est-vivante .carte-vivante { opacity: 1; }
.est-vivante > .carte-reseau__svg { visibility: hidden; }
.est-vivante > .fiche-carte { display: none; }
html[data-ton="sombre"] .carte-vivante .maplibregl-canvas { filter: none; }

/* Sur grand écran, la carte de l'annuaire prend la hauteur de l'écran. */
/* Assez court pour tenir entière sous le message de résultat, quand on
   arrive depuis le haut de page. */
.carte-reseau--annuaire.est-vivante { padding: 0; overflow: hidden; height: min(calc(100svh - var(--haut-entete) - 6.5rem), 820px); }
.carte-reseau--annuaire.est-vivante > .carte-reseau__svg { position: absolute; }

/* Les marqueurs : un visage cerclé d'orange, ou une pastille chiffrée. */
.mq-visage {
  width: 44px; height: 44px; padding: 0; border: 3px solid var(--p-accent); border-radius: 50%;
  background: var(--p-fond); cursor: pointer; overflow: hidden;
  box-shadow: 0 3px 10px -2px rgb(0 0 0 / .35);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.mq-visage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-visage:hover, .mq-visage.est-survole { transform: scale(1.12); z-index: 3; }
.mq-visage.est-choisi { border-color: var(--p-encre); transform: scale(1.22); z-index: 4; box-shadow: 0 0 0 4px var(--p-accent), 0 8px 18px -4px rgb(0 0 0 / .45); }
.mq-visage:focus-visible { outline: 3px solid var(--p-encre); outline-offset: 2px; }
.mq-groupe {
  min-width: 42px; height: 42px; padding: 0 .5rem; border: 3px solid var(--p-fond); border-radius: 21px;
  background: var(--p-accent); color: var(--accent-texte);
  font: 800 1rem/1 var(--police); font-stretch: 110%; cursor: pointer;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--p-accent) 28%, transparent), 0 4px 12px -2px rgb(0 0 0 / .35);
  transition: transform .18s;
}
.mq-groupe--grand { min-width: 52px; height: 52px; border-radius: 26px; font-size: 1.1rem; }
.mq-groupe:hover { transform: scale(1.08); }
.mq-groupe:focus-visible { outline: 3px solid var(--p-encre); outline-offset: 3px; }
.mq-origine {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--p-encre); border: 3px solid var(--p-fond);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--p-encre) 14%, transparent), 0 0 0 11px color-mix(in srgb, var(--p-encre) 40%, transparent);
}

/* La fiche (popup) : la même que sur la carte SVG. */
.popup-bct .maplibregl-popup-content { padding: 0; background: none; box-shadow: none; }
.popup-bct .maplibregl-popup-tip { border-top-color: var(--p-fond); border-bottom-color: var(--p-fond); }
.fiche-carte--vivante { position: static; }
.popup-bct--etroite .fiche-carte { grid-template-columns: 48px minmax(0, 1fr); width: min(250px, 70vw); white-space: normal; }
.popup-bct--etroite .fiche-carte__voir { grid-column: 1 / -1; width: 100%; }

/* Les commandes de la carte, à la charte. */
.carte-vivante .maplibregl-ctrl-group { border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.carte-vivante .maplibregl-ctrl-group button { width: 36px; height: 36px; }
.carte-vivante__recentrer {
  position: absolute; left: 10px; top: 10px; z-index: 3;
  min-height: 36px; padding: .4rem .8rem; border: 0; border-radius: var(--rayon);
  background: var(--p-fond); color: var(--p-encre); box-shadow: var(--ombre);
  font: 700 .85rem/1.1 var(--police); cursor: pointer;
}
.carte-vivante__recentrer:hover { background: var(--p-accent); color: var(--accent-texte); }
.carte-vivante .maplibregl-cooperative-gesture-screen { font-family: var(--police); font-weight: 600; }

/* Dans la fenêtre plein écran, la carte prend toute la place. */
.modale-carte__corps .carte-reseau--annuaire.est-vivante { width: 100%; height: 100%; border-radius: var(--rayon-carte); }

/* Les pastilles chiffrées de la carte SVG (repli et haut de page). */
.pin__groupe { fill: var(--p-accent); stroke: var(--p-fond); }
.pin__nombre { fill: var(--accent-texte); font-family: var(--police); font-weight: 800; pointer-events: none; }
.pin--groupe:hover .pin__groupe, .pin--groupe:focus-visible .pin__groupe { fill: var(--p-encre); }
.pin--groupe:hover .pin__nombre, .pin--groupe:focus-visible .pin__nombre { fill: var(--p-fond); }

/* Le coach choisi (sur la carte ou dans la liste), et celui qu'on survole sur la carte. */
.carte-coach { cursor: pointer; }
.carte-coach.est-survolee { border-color: var(--accent); }
.carte-coach.est-choisie {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent), var(--ombre);
  background: color-mix(in srgb, var(--accent) 7%, var(--carte));
}

/* « Agrandir la carte » (ordinateur) : la même fenêtre qu'au téléphone,
   centrée et grande. Dans la fenêtre, le bouton n'a plus lieu d'être. */
.carte-agrandir {
  position: absolute; left: 10px; bottom: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 36px; padding: .4rem .8rem; border: 0; border-radius: var(--rayon);
  background: var(--p-encre); color: var(--p-fond); box-shadow: var(--ombre);
  font: 700 .85rem/1.1 var(--police); cursor: pointer;
}
.carte-agrandir:hover { background: var(--p-accent); color: var(--accent-texte); }
.modale-carte .carte-agrandir { display: none; }
@media (max-width: 1000px) { .carte-agrandir { display: none; } }
@media (min-width: 1001px) {
  .modale-carte[open] {
    width: min(1500px, 94vw); max-width: 94vw; height: min(980px, 92vh); max-height: 92vh;
    margin: auto; border-radius: var(--rayon-carte); overflow: hidden;
    box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6);
  }
}

/* ══ Le filtre par compétence ════════════════════════════════════════════
   Sous la recherche et les pays. Sur grand écran, les pastilles passent à
   la ligne ; sur téléphone, la bande défile (et la pastille touchée se
   recentre). */
.annuaire__competences { grid-column: 1 / -1; }
.annuaire__competences { gap: .4rem; }
.annuaire__competences .pastille { min-height: 36px; padding: .2rem .7rem; gap: .4rem; font-size: .86rem; border-width: 1px; }
.annuaire__competences .pastille small { font-size: .78rem; }
@media (min-width: 1001px) { .annuaire__competences { flex-wrap: wrap; overflow: visible; } }
.annuaire__vide {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
  padding: 1.4rem; border: 2px dashed var(--trait); border-radius: var(--rayon-carte);
}
.annuaire__vide[hidden] { display: none; }
.annuaire__vide p { margin: 0; font-weight: 600; }

/* La carte de coach : son nom mène à sa fiche, ses compétences en clair. */
.carte-coach__nom a { color: inherit; text-decoration: none; }
.carte-coach__nom a:hover, .carte-coach__nom a:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.carte-coach__competences { margin: .35rem 0 0; font-size: .84rem; font-weight: 600; color: var(--texte); }
.carte-coach__competences[hidden] { display: none; }
.carte-coach__fiche {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; margin-top: .3rem;
  color: var(--accent-encre); font-weight: 700; font-size: .92rem; text-decoration: none;
}
.carte-coach__fiche:hover, .carte-coach__fiche:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.carte-coach__fiche .ic { transition: transform .2s; }
.carte-coach__fiche:hover .ic { transform: translateX(3px); }

/* ══ La fiche d'un coach (sa page, et la modale de l'annuaire) ══════════ */
.page-coach main, .page-entreprises main, .page-prestation main, .page-devenir main, .page-histoire main, .page-contact main, .page-legal main, .page-actualites main { padding-top: var(--haut-entete); }
.fil-ariane { padding-top: 1.2rem; font-size: .9rem; color: var(--texte-doux); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: .3rem .5rem; list-style: none; margin: 0; padding: 0; }
.fil-ariane li + li::before { content: '/'; margin-right: .5rem; color: var(--trait); }
.fil-ariane a { color: inherit; }
.fil-ariane [aria-current] { color: var(--texte); font-weight: 600; }
.section--fiche { padding-block: clamp(1.6rem, 1rem + 2vw, 3rem) clamp(3rem, 2rem + 4vw, 6rem); }

.fiche-coach { --gap-fiche: clamp(1.4rem, 1rem + 2vw, 3rem); }
.fiche-coach__tete {
  display: grid; grid-template-columns: minmax(0, clamp(160px, 22vw, 300px)) minmax(0, 1fr);
  gap: var(--gap-fiche); align-items: end;
  padding-bottom: var(--gap-fiche); border-bottom: 2px solid var(--trait);
}
.fiche-coach__photo { position: relative; isolation: isolate; }
.fiche-coach__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; display: block; }
.fiche-coach__photo::after {
  content: ''; position: absolute; z-index: -1; inset: 12px -12px -12px 12px;
  background: var(--accent);
}
.fiche-coach__nom { font-size: clamp(2.1rem, 1.3rem + 3vw, 4.2rem); font-weight: 900; font-stretch: var(--large-titre); line-height: 1; letter-spacing: -.01em; }
.fiche-coach__lieu { display: flex; align-items: center; gap: .5rem; margin: .8rem 0 0; font-size: 1.1rem; font-weight: 600; }
.fiche-coach__lieu .drapeau { width: 24px; height: 17px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--texte) 18%, transparent); }
.fiche-coach__zone { display: flex; align-items: flex-start; gap: .5rem; margin: .45rem 0 0; color: var(--texte-doux); }
.fiche-coach__zone .ic { flex: none; margin-top: .15em; color: var(--accent-encre); }
.fiche-coach__certifs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.fiche-coach__certifs li {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem;
  background: var(--p-sombre); color: var(--p-sur-sombre); border-radius: var(--rayon); font-size: .86rem; font-weight: 700;
}
.fiche-coach__certifs .ic { color: var(--p-accent); }
.fiche-coach__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

.fiche-coach__grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: var(--gap-fiche); padding-top: var(--gap-fiche);
}
.fiche-coach__bloc + .fiche-coach__bloc { margin-top: 2.2rem; }
.fiche-coach__bloc > h2, .fiche-coach__bloc > h3, .fiche-coach__info > h2, .fiche-coach__info > h3 {
  font-size: .8rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-encre);
  margin: 0 0 .9rem;
}
.fiche-coach__competences { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.pastille--lien { text-decoration: none; color: var(--texte); white-space: normal; }
.pastille--lien:hover, .pastille--lien:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--carte)); }
.fiche-coach__presentation p { max-width: 42em; font-size: 1.06rem; line-height: 1.65; margin: 0 0 .9rem; }
.fiche-coach__services { columns: 2 16em; column-gap: 2rem; list-style: none; margin: 0; padding: 0; }
.fiche-coach__services li { break-inside: avoid; position: relative; padding: .3rem 0 .3rem 1.2rem; }
.fiche-coach__services li::before { content: ''; position: absolute; left: 0; top: .85em; width: .5em; height: .5em; background: var(--accent); }
.fiche-coach__formations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.fiche-coach__formation { padding: 1rem 1.1rem; border: 1px solid var(--carte-trait); border-radius: var(--rayon-carte); background: var(--carte); }
.fiche-coach__formation h3, .fiche-coach__formation h4 { font-size: 1rem; font-weight: 800; margin: 0 0 .5rem; }
.fiche-coach__formation ul { margin: 0; padding-left: 1.1rem; color: var(--texte-doux); font-size: .94rem; }
.fiche-coach__formation li + li { margin-top: .25rem; }
.fiche-coach__note { margin-top: 2rem; font-size: .9rem; font-style: italic; color: var(--texte-doux); }

.fiche-coach__infos { display: flex; flex-direction: column; gap: 1.6rem; align-self: start; position: sticky; top: calc(var(--haut-entete) + 1.2rem); }
.fiche-coach__info { padding-bottom: 1.4rem; border-bottom: 1px solid var(--trait); }
.fiche-coach__info:last-child { border-bottom: 0; padding-bottom: 0; }
.fiche-coach__lieux, .fiche-coach__studios, .fiche-coach__langues { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fiche-coach__lieux li, .fiche-coach__studios li { display: flex; align-items: center; gap: .55rem; }
.fiche-coach__lieux .ic, .fiche-coach__studios .ic { flex: none; color: var(--accent-encre); }
.fiche-coach__langues { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.fiche-coach__contact p { margin: 0 0 .7rem; color: var(--texte-doux); }
.fiche-coach__coordonnees { display: grid; gap: .5rem; }
.fiche-coach__coordonnees a { display: inline-flex; align-items: center; gap: .5rem; color: var(--texte); font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .fiche-coach__grille { grid-template-columns: minmax(0, 1fr); }
  .fiche-coach__infos { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.4rem; }
  .fiche-coach__info { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 600px) {
  .fiche-coach__tete { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .fiche-coach__photo { width: min(64vw, 260px); }
  .fiche-coach__actions .bouton { flex: 1 1 12rem; }
}

/* Les coachs voisins, sous la fiche. */
.section--proches { --fond-section: var(--p-fond-doux); padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.titre-section--petit { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.8rem); margin-bottom: 2rem; }
.coachs-proches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.coachs-proches .carte-coach { cursor: default; }
.section--proches__tous { margin: 2rem 0 0; }

/* ══ La modale de la fiche ═══════════════════════════════════════════════ */
.modale-fiche:not([open]) { display: none; }
.modale-fiche[open] {
  display: flex; flex-direction: column;
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: var(--p-fond); color: var(--p-encre);
}
.modale-fiche::backdrop { background: rgb(0 0 0 / .55); }
.modale-fiche__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .6rem .5rem var(--gouttiere);
  border-bottom: 1px solid color-mix(in srgb, var(--p-encre) 12%, transparent);
}
.modale-fiche__corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.2rem, 3vw, 2.4rem) var(--gouttiere) 2.4rem; outline: none; }
.modale-fiche__corps .fiche-coach__infos { position: static; }
.modale-fiche__attente, .modale-fiche__erreur { margin: 0; padding: 2rem var(--gouttiere); font-weight: 600; }
.modale-fiche__attente[hidden], .modale-fiche__erreur[hidden] { display: none; }
.modale-fiche__attente::before {
  content: ''; display: inline-block; width: 1em; height: 1em; margin-right: .6rem; vertical-align: -.15em;
  border: 3px solid var(--trait); border-top-color: var(--p-accent); border-radius: 50%;
  animation: tourne .8s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@media (min-width: 1001px) {
  .modale-fiche[open] {
    width: min(1180px, 92vw); max-width: 92vw; height: min(920px, 90vh); max-height: 90vh;
    margin: auto; border-radius: var(--rayon-carte); overflow: hidden;
    box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6);
  }
  .modale-fiche .fiche-coach__tete { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
  .modale-fiche .fiche-coach__nom { font-size: clamp(2rem, 1.2rem + 2vw, 3.2rem); }
}

/* ══ La mini-fiche, au défilement ════════════════════════════════════════
   Sur la page : une barre qui glisse de sous l'en-tête. Dans la modale :
   posée dans la barre du haut, à la place du lien « Ouvrir la page ». */
.fiche-mini__dedans { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.fiche-mini__photo { flex: none; width: 44px; height: 44px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--p-accent); }
.fiche-mini__id { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 6rem; margin: 0; line-height: 1.2; }
.fiche-mini__id b { font-weight: 800; font-stretch: 112%; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fiche-mini__id > span { display: flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--texte-doux); white-space: nowrap; }
.fiche-mini__id .drapeau { width: 16px; height: 11px; }
.fiche-mini__actions { display: flex; gap: .45rem; margin-left: auto; flex: none; }
/* Les compétences, sur grand écran : une ligne, seulement celles qui
   tiennent entières, puis « +N » (script.js). */
.fiche-mini__competences {
  display: none; flex: 1 1 0; min-width: 0; gap: .35rem; margin: 0 0 0 1rem; padding: 0 0 0 1rem; list-style: none;
  overflow: hidden; border-left: 1px solid var(--trait);
}
.fiche-mini__competences li[hidden] { display: none; }
.fiche-mini__plus { color: var(--texte-doux); }
.fiche-mini__competences li {
  flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border: 1px solid var(--carte-trait); border-radius: var(--rayon);
  font-size: .8rem; font-weight: 600; white-space: nowrap; background: var(--carte);
}
@media (min-width: 1001px) { .fiche-mini__competences { display: flex; } }

.page-coach .fiche-mini {
  position: fixed; z-index: 45; inset: var(--haut-entete) 0 auto;
  background: color-mix(in srgb, var(--p-fond) 97%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--trait), 0 10px 24px -18px rgb(0 0 0 / .4);
  transform: translateY(-110%); transition: transform .28s ease, visibility 0s .28s; visibility: hidden;
}
.page-coach .fiche-mini .fiche-mini__dedans { width: var(--large); margin-inline: auto; padding-block: .5rem; }
.page-coach .fiche-mini.est-visible { transform: none; visibility: visible; transition: transform .28s ease; }
/* Sur la page, l'en-tête garde son fond : la mini-fiche glisse dessous. */
.page-coach:has(.fiche-mini.est-visible) .entete { box-shadow: none; }

.modale-fiche__tete { position: relative; min-height: 64px; }
.modale-fiche__tete .fiche-mini {
  flex: 1; min-width: 0; margin-right: .4rem;
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.modale-fiche__tete .fiche-mini.est-visible { opacity: 1; transform: none; pointer-events: auto; }
/* Le lien vers la page du coach : un vrai bouton, toujours là, à droite. */
.modale-fiche__tete .modale-fiche__page { margin-left: auto; flex: none; }
.modale-fiche__tete .fiche-mini + .modale-fiche__page { margin-left: 0; }
.page-coach .fiche-coach__infos { top: calc(var(--haut-entete) + 5.4rem); }
@media (prefers-reduced-motion: reduce) {
  .page-coach .fiche-mini, .modale-fiche__tete .fiche-mini { transition: none; }
}
@media (max-width: 600px) {
  .modale-fiche__page { width: 44px; min-height: 44px; padding: 0; }
  /* Dans la barre de la modale, sur téléphone : appeler seulement — le nom
     garde sa place (écrire reste dans la fiche). */
  .modale-fiche__tete .fiche-mini__actions .bouton + .bouton { display: none; }
  .modale-fiche__tete { gap: .5rem; }
  .modale-fiche__page-texte,
  .fiche-mini__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fiche-mini__actions .bouton { width: 44px; min-height: 44px; padding: 0; }
  .fiche-mini__photo { width: 38px; height: 38px; }
}

/* Les pictos des compétences : orange profond, au trait. */
.pastille--lien { gap: .5rem; }
.pastille--lien .ic, .fiche-mini__competences .ic, .annuaire__competences .pastille .ic { flex: none; color: var(--accent-encre); }
.annuaire__competences .pastille[aria-pressed="true"] .ic { color: var(--p-accent); }
/* Dans la modale, la barre reste courte : nom, appeler, écrire, page. */
.modale-fiche__tete .fiche-mini__competences { display: none; }
/* Une pastille qui, croisée avec l'autre filtre, ne mène à personne. */
.pastille.est-vide:not([aria-pressed="true"]) { opacity: .45; border-style: dashed; }
/* La fiche sur téléphone : les compétences en deux colonnes serrées, le
   texte passe à la ligne au besoin — la moitié de la hauteur. */
@media (max-width: 600px) {
  .fiche-coach__competences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .fiche-coach__competences li { display: flex; }
  .fiche-coach__competences .pastille--lien { width: 100%; min-height: 44px; padding: .35rem .6rem; gap: .45rem; font-size: .86rem; line-height: 1.2; border-width: 1px; }
  .fiche-coach__competences .pastille--lien .ic { width: 18px; height: 18px; }
}

/* ══ La page Entreprises ═════════════════════════════════════════════════
   Le même vocabulaire que l'accueil : le carré orange du logo, les numéros
   étirés, une section sombre pour changer de conversation (pourquoi, puis
   la demande). */

.menu a[aria-current="page"] { background-size: 100% 3px; }

.titre-section--page { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 5rem); max-width: 13em; }
.offre__titre, .offre__numero, .etape__num, .ent-haut__preuves dt, .avantages .titre-section {
  font-family: var(--police); font-stretch: var(--large-titre); font-weight: 850; letter-spacing: -.012em; line-height: 1.02;
}

/* Le haut : texte à gauche, photo à droite, le carré orange derrière. */
.section--ent-haut { padding-block: clamp(1.6rem, 1rem + 2vw, 3rem) clamp(4rem, 3rem + 4vw, 7rem); }
.ent-haut { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.ent-haut__boutons { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.ent-haut__preuves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(2.4rem, 4vw, 3.4rem) 0 0; border-top: 2px solid var(--trait); }
.ent-haut__preuves > div { padding: 1.2rem 1rem 0 0; }
.ent-haut__preuves > div + div { padding-left: 1.2rem; border-left: 1px solid var(--trait); }
.ent-haut__preuves dt { font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); color: var(--accent-encre); white-space: nowrap; }
.ent-haut__preuves dd { margin: .4rem 0 0; color: var(--texte-doux); font-size: .95rem; line-height: 1.4; }
.ent-haut__photo { position: relative; isolation: isolate; }
.ent-haut__photo img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--rayon-carte); }
.ent-haut__carre { position: absolute; right: -5%; bottom: -7%; width: 58%; aspect-ratio: 1; background: var(--p-accent); z-index: -1; }
@media (max-width: 900px) {
  .ent-haut { grid-template-columns: minmax(0, 1fr); }
  .ent-haut__photo { order: -1; margin-right: 5%; }
  .ent-haut__photo img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .ent-haut__boutons .bouton { width: 100%; white-space: normal; }
  .ent-haut__preuves { grid-template-columns: minmax(0, 1fr); }
  .ent-haut__preuves > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--trait); margin-top: 1rem; }
  .ent-haut__preuves > div { display: flex; align-items: baseline; gap: 1rem; }
  .ent-haut__preuves dd { margin: 0; }
}

/* Les quatre formules : deux par deux, numérotées. */
.section--offres { --fond-section: var(--p-fond-doux); }
.offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); counter-reset: none; }
.offre {
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 2.4rem);
  background: var(--carte); border: 1px solid var(--carte-trait); border-radius: var(--rayon-carte);
}
.offre__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.offre__picto { display: grid; place-items: center; width: 64px; height: 64px; background: var(--accent); color: var(--accent-texte); border-radius: var(--rayon); }
.offre__numero { font-size: clamp(2.4rem, 1.6rem + 2vw, 3.6rem); color: color-mix(in srgb, var(--texte) 14%, transparent); }
.offre__titre { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.3rem); }
.offre__accroche { margin: .5rem 0 0; font-weight: 700; color: var(--accent-encre); font-size: 1.08rem; }
.offre__texte { margin: .9rem 0 0; color: var(--texte-doux); }
.offre__points { display: grid; gap: .5rem; margin: 1.2rem 0 0; }
.offre__points li { display: flex; align-items: flex-start; gap: .6rem; }
.offre__points .ic { color: var(--accent-encre); margin-top: calc((1lh - 18px) / 2); }
.offre__lien {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  margin-top: auto; padding-top: 1.6rem;
  font-weight: 700; color: var(--texte); text-decoration: none;
}
.offre__lien span { background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat; padding-bottom: 2px; }
.offre__lien .ic { transition: transform .2s; }
.offre__lien:hover .ic { transform: translateX(4px); }
@media (max-width: 800px) { .offres { grid-template-columns: minmax(0, 1fr); } }

/* Pourquoi : la section sombre, la liste en trois colonnes. */
.avantages { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.avantages .entete-section { margin-bottom: 0; }
.avantages .titre-section { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.6rem); }
.avantages__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--trait); }
.avantages__liste li {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1.2rem 1rem 1.2rem 0; border-bottom: 1px solid var(--trait);
  font-size: 1.08rem; font-weight: 600; line-height: 1.4;
}
.avantages__liste .ic { color: var(--accent); margin-top: calc((1lh - 20px) / 2); }
@media (max-width: 900px) { .avantages { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .avantages__liste { grid-template-columns: minmax(0, 1fr); } }

/* Comment ça se passe : trois étapes, reliées par un trait. */
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 3rem); }
.etape { position: relative; padding-top: 1.6rem; border-top: 2px solid var(--trait); }
.etape::before { content: ''; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; background: var(--accent); }
.etape__num { display: block; font-size: clamp(3rem, 2rem + 3vw, 5rem); color: var(--accent); margin-bottom: .6rem; }
.etape h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.etape p { color: var(--texte-doux); }
@media (max-width: 800px) { .etapes { grid-template-columns: minmax(0, 1fr); } }

/* La demande : texte à gauche, la carte du formulaire à droite. */
.devis { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.devis__texte { position: sticky; top: calc(var(--haut-entete) + 2rem); }
.devis__vie { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.8rem; color: var(--texte-doux); font-size: .95rem; }
.devis__vie .ic { color: var(--accent); margin-top: calc((1lh - 18px) / 2); }
.devis__carte {
  /* La carte reprend les rôles CLAIRS : un formulaire se lit sur blanc. */
  --texte: var(--p-encre); --texte-doux: var(--p-doux); --accent-encre: var(--p-accent-profond);
  --trait: color-mix(in srgb, var(--p-encre) 14%, transparent);
  background: var(--p-fond); color: var(--texte);
  border-radius: var(--rayon-carte); padding: clamp(1.4rem, 3vw, 2.6rem);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .5);
}
.devis__obligatoires { font-size: .88rem; color: var(--texte-doux); margin-bottom: 1.2rem; }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; }
.champ { display: grid; gap: .4rem; align-content: start; }
.champ--large { grid-column: 1 / -1; margin-top: 1.4rem; }
.champ label { font-weight: 700; font-size: .95rem; }
.champ__requis { color: var(--accent-encre); }
.champ input, .champ textarea {
  width: 100%; min-height: 50px; padding: .75rem .9rem;
  border: 1.5px solid color-mix(in srgb, var(--texte) 22%, transparent); border-radius: var(--rayon);
  background: var(--p-fond); color: var(--texte); font: inherit; font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--p-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-accent) 28%, transparent); }
.champ.est-invalide input, .champ.est-invalide textarea { border-color: #b3261e; }
.champ__aide { margin: 0; font-size: .85rem; color: var(--texte-doux); }
.champ__erreur { margin: 0; font-size: .88rem; font-weight: 600; color: #b3261e; }
@media (max-width: 640px) { .champs { grid-template-columns: minmax(0, 1fr); } }

/* Les choix (formules, taille d'équipe) : des pastilles. La case reste
   dans le DOM pour le clavier et les lecteurs d'écran ; seul son dessin
   natif disparaît. */
.choix-groupe { border: 0; margin: 1.6rem 0 0; padding: 0; min-width: 0; }
.choix-groupe legend { padding: 0; margin-bottom: .7rem; font-weight: 700; font-size: .95rem; }
.choix-liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.choix { position: relative; }
.choix input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choix > span {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: .55rem .95rem; border: 1.5px solid color-mix(in srgb, var(--texte) 22%, transparent); border-radius: 999px;
  font-weight: 600; font-size: .95rem; line-height: 1.2;
  transition: background-color .2s, border-color .2s, color .2s;
}
.choix > span .ic { color: var(--accent-encre); }
.choix:hover > span { border-color: var(--texte); }
.choix input:checked + span { background: var(--texte); border-color: var(--texte); color: var(--p-fond); }
.choix input:checked + span .ic { color: var(--p-accent); }
.choix input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.devis__alerte { margin: 1.4rem 0 0; padding: .8rem 1rem; border-left: 4px solid #b3261e; background: #fdecea; color: #7a1712; font-weight: 600; border-radius: 0 var(--rayon) var(--rayon) 0; }
.devis__envoyer { margin-top: 1.6rem; width: 100%; }
.devis__envoyer[aria-busy="true"] { opacity: .7; cursor: progress; }
.devis__merci { text-align: center; padding: clamp(1rem, 4vw, 3rem) 0; }
.devis__merci:focus { outline: none; }
.devis__merci-picto { display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 1.2rem; border-radius: 50%; background: var(--p-accent); color: var(--accent-texte); }
.devis__merci h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: .6rem; }
.devis__merci p { color: var(--texte-doux); max-width: 30em; margin-inline: auto; }
@media (max-width: 900px) {
  .devis { grid-template-columns: minmax(0, 1fr); }
  .devis__texte { position: static; }
}

/* Depuis l'accueil : l'entrée Entreprises sous la recherche du haut de
   page, et sous la formule « En entreprise ». */
.recherche__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1.6rem; margin-top: .3rem; }
.recherche__pied .recherche__autour { margin-top: 0; }
.lien-entreprise {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 0; font-size: .95rem; text-decoration: none; color: inherit;
}
.lien-entreprise b { font-weight: 700; background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat; padding-bottom: 1px; }
.lien-entreprise > span { opacity: .78; }
.lien-entreprise .ic { color: var(--accent); transition: transform .2s; }
.lien-entreprise:hover .ic { transform: translateX(3px); }
.formule__page { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-weight: 700; font-size: .95rem; text-decoration: none; }
.formule__page span { background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat; }
/* Hors des grands écrans, l'entrée Entreprises tient à côté de « Autour
   de moi » : la précision (« Team building, sport au bureau… ») part. */
@media (max-width: 1100px) { .lien-entreprise > span { display: none; } }
/* Sur la porte orange, l'orange disparaîtrait : soulignement et flèche
   prennent la couleur du texte, comme « Autour de moi ». */
.recherche--porte .lien-entreprise { color: var(--accent-texte); }
.recherche--porte .lien-entreprise b { background-image: linear-gradient(var(--accent-texte), var(--accent-texte)); }
.recherche--porte .lien-entreprise .ic { color: var(--accent-texte); }

/* ══ Les pages des prestations ═══════════════════════════════════════════
   Le haut reprend celui de la page Entreprises ; le visuel est la
   mosaïque des coachs qui proposent la prestation. */

.mosaique { position: relative; isolation: isolate; margin: 0; }
.mosaique__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mosaique__case { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--rayon); background: var(--p-fond-doux); }
.mosaique__case img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .35s, transform .5s; }
.mosaique__case:hover img, .mosaique__case:focus-visible img { filter: none; transform: scale(1.04); }
.mosaique__compte {
  position: absolute; left: -1rem; bottom: -1.2rem;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.1rem; background: var(--p-sombre); color: var(--p-sur-sombre);
  font-weight: 800; font-stretch: var(--large-titre); font-size: 1.15rem; border-radius: var(--rayon);
}
.mosaique__compte .ic { color: var(--p-accent); }
@media (max-width: 900px) {
  .mosaique { order: -1; margin: 0 5% 1.4rem 0; }
  .mosaique__grille { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mosaique__case:nth-child(n+6) { display: none; }
  .mosaique__compte { left: .6rem; bottom: -1.1rem; font-size: 1rem; padding: .6rem .9rem; }
}

/* Les blocs : le titre à gauche, le texte à droite, un filet entre deux. */
.section--blocs { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.blocs-prestation { display: grid; gap: 0; }
.bloc-prestation {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.2rem, 4vw, 5rem);
  padding-block: clamp(2rem, 3vw, 3rem); border-top: 2px solid var(--trait);
}
.bloc-prestation:first-child { border-top: 0; padding-top: 0; }
.bloc-prestation__titre {
  font-family: var(--police); font-stretch: var(--large-titre); font-weight: 850; letter-spacing: -.012em; line-height: 1.05;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
}
.bloc-prestation__texte { font-size: 1.08rem; color: var(--texte-doux); max-width: 42em; }
.bloc-prestation__texte .liste-check { color: var(--texte); margin-top: .4rem; }
.liste-check--une { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.prestation-reportage { margin: 1rem 0 0; }
@media (max-width: 800px) { .bloc-prestation { grid-template-columns: minmax(0, 1fr); } }

.section--etapes-doux { --fond-section: var(--p-fond-doux); }

/* Les questions : un accordéon sobre, la réponse sous un filet. */
.faq-mise { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.2rem, 4vw, 5rem); align-items: start; }
.faq-mise .entete-section { position: sticky; top: calc(var(--haut-entete) + 2rem); }
.faq { border-top: 2px solid var(--trait); }
.faq__item { border-bottom: 1px solid var(--trait); }
.faq__q { margin: 0; font-size: 1.1rem; }
.faq__q button {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 1.15rem 0; background: none; border: 0; text-align: left; cursor: pointer;
  font: inherit; font-weight: 700; line-height: 1.35; color: var(--texte);
}
.faq__q .ic { color: var(--accent-encre); transition: transform .25s; }
.faq__q button[aria-expanded="true"] .ic { transform: rotate(45deg); }
.faq__q button:hover span { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.faq__r { padding: 0 2.6rem 1.3rem 0; color: var(--texte-doux); }
@media (max-width: 900px) {
  .faq-mise { grid-template-columns: minmax(0, 1fr); }
  .faq-mise .entete-section { position: static; }
}

/* Les coachs d'une prestation : des visages, compacts. */
.visages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .6rem; }
.visage {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .9rem; align-items: center;
  padding: .6rem; background: var(--carte); border: 1px solid var(--carte-trait); border-radius: var(--rayon-carte);
  text-decoration: none; transition: border-color .2s, transform .2s;
}
.visage:hover { border-color: var(--accent); transform: translateY(-2px); }
.visage__photo { grid-row: span 2; width: 56px; height: 56px; object-fit: cover; border-radius: var(--rayon); }
.visage__nom { font-weight: 700; line-height: 1.25; align-self: end; }
.visage__ville { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--texte-doux); align-self: start; }

/* Les autres prestations : une ligne chacune, picto et flèche. */
.section--autres { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.autres-prestations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--trait); }
.autre-prestation {
  display: flex; align-items: center; gap: .9rem; padding: 1.2rem 1rem 1.2rem 0; border-bottom: 1px solid var(--trait);
  font-weight: 700; font-size: 1.12rem; text-decoration: none;
}
.autre-prestation .ic:first-child { color: var(--accent-encre); }
.autre-prestation span { flex: 1; }
.autre-prestation .ic:last-child { transition: transform .2s; }
.autre-prestation:hover .ic:last-child { transform: translateX(4px); }
.autre-prestation:hover span { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .25em; }
@media (max-width: 900px) { .autres-prestations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .autres-prestations { grid-template-columns: minmax(0, 1fr); } }
/* Téléphone : un libellé long (« Die 43 Coaches im Verzeichnis ansehen »)
   passe à la ligne au lieu d'élargir la page ; la mosaïque devient une
   bande de visages, sans le carré qui montait sur le fil d'Ariane ; les
   coachs vont deux par ligne. */
@media (max-width: 560px) {
  .section--proches__tous .bouton { white-space: normal; text-align: center; width: 100%; }
}
@media (max-width: 900px) {
  .mosaique .ent-haut__carre { display: none; }
  .mosaique { margin: .4rem 0 2rem; }
  .mosaique::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--p-accent); z-index: -1; }
}
@media (max-width: 640px) {
  .visages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .visage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; text-align: center; justify-items: center; padding: .8rem .5rem; row-gap: .25rem; }
  .visage__photo { grid-row: auto; width: 64px; height: 64px; }
  .visage__nom { font-size: .95rem; align-self: auto; }
  .visage__ville { font-size: .82rem; }
}

/* ══ La page Devenir coach ═══════════════════════════════════════════════ */

.lien-pro[aria-current="page"] { background: var(--accent) !important; color: var(--accent-texte); }
.section--ent-haut .chiffres { margin-top: clamp(3rem, 6vw, 5rem); }
.section--ent-haut .chiffre dt { color: var(--accent-encre); }

/* Les vidéos du réseau, sous les apports. */
.videos { margin-top: clamp(2.5rem, 5vw, 4rem); }
.videos__titre { font-size: 1.1rem; margin-bottom: 1rem; color: var(--texte-doux); font-weight: 700; }
.videos__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.video-lien {
  display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .8rem 1rem;
  border: 1px solid var(--carte-trait); border-radius: var(--rayon); background: var(--carte);
  font-weight: 600; text-decoration: none; transition: border-color .2s;
}
.video-lien .ic:first-child { color: var(--accent); }
.video-lien span { flex: 1; }
.video-lien .ic:last-child { color: var(--texte-doux); }
.video-lien:hover { border-color: var(--accent); }
@media (max-width: 900px) { .videos__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .videos__liste { grid-template-columns: minmax(0, 1fr); } }

/* Le concept : ce qui est compris, puis les deux packages. */
.concept { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.paquet { padding: clamp(1.4rem, 2.4vw, 2.2rem); background: var(--carte); border: 1px solid var(--carte-trait); border-radius: var(--rayon-carte); }
.paquet h3 { font-size: 1.35rem; margin-bottom: 1.1rem; }
.paquet--inclus { background: var(--p-fond-doux); border-color: transparent; }
.paquet .ic { color: var(--accent-encre); }
@media (max-width: 1000px) { .concept { grid-template-columns: repeat(2, minmax(0, 1fr)); } .paquet--inclus { grid-column: 1 / -1; } }
@media (max-width: 640px) { .concept { grid-template-columns: minmax(0, 1fr); } }

/* Les prérequis : le texte à gauche, la boîte à onglets à droite. */
.section--prerequis { --fond-section: var(--p-fond-doux); }
.prerequis { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.prerequis .entete-section { margin-bottom: 0; }
.prerequis__boite { background: var(--carte); border: 1px solid var(--carte-trait); border-radius: var(--rayon-carte); padding: clamp(1.4rem, 3vw, 2.4rem); }
.prerequis__onglets { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.prerequis__onglets .pastille .drapeau { margin-right: .1rem; }
.prerequis__onglets .pastille[aria-selected="true"] { background: var(--texte); color: var(--fond-section); border-color: var(--texte); }
.prerequis__panneau + .prerequis__panneau { margin-top: 1.6rem; }
.prerequis__boite.a-onglets .prerequis__panneau + .prerequis__panneau { margin-top: 0; }
.prerequis__boite.a-onglets .prerequis__pays { display: none; }
.prerequis__pays { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin-bottom: .9rem; }
.prerequis__panneau .ic { color: var(--accent-encre); }
.prerequis__note { display: flex; gap: .6rem; margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--trait); color: var(--texte-doux); font-size: .97rem; }
.prerequis__note .ic { color: var(--accent-encre); margin-top: calc((1lh - 18px) / 2); }
@media (max-width: 900px) { .prerequis { grid-template-columns: minmax(0, 1fr); } }

.etapes--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px) { .etapes--deux { grid-template-columns: minmax(0, 1fr); } }

/* Les paroles de coachs, sur fond clair ici ; et l'encart de formation. */
.section--paroles .paroles { margin-top: 0; }
.formation-encart {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
  margin-top: clamp(2.4rem, 4vw, 3.4rem); padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--p-accent); color: var(--accent-texte); border-radius: var(--rayon-carte);
}
.formation-encart > div { flex: 1 1 26rem; }
.formation-encart h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.formation-encart p { max-width: 46em; }

.pro__tout { margin: 2.4rem 0 0; }

/* ══ La page Notre histoire ══════════════════════════════════════════════ */

.histoire__toute { margin: 2.2rem 0 0; }
.section--fondateur { --fond-section: var(--p-fond-doux); }
.citation-fondateur { margin: 2rem 0 0; padding-left: 1.2rem; border-left: 4px solid var(--accent); }
.citation-fondateur p { font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); font-weight: 800; font-stretch: var(--large-titre); line-height: 1.2; color: var(--texte); }
.citation-fondateur cite { display: block; margin-top: .5rem; font-style: normal; color: var(--texte-doux); font-weight: 600; }
.parcours__titre { margin: clamp(3rem, 6vw, 5rem) 0 0; font-size: 1.3rem; }
.jalons--parcours { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 2.2rem; }
@media (max-width: 1100px) { .jalons--parcours { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .jalons--parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.philo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.philo__texte p { font-size: 1.08rem; color: var(--texte-doux); }
.philo__devise { margin: 0 0 2.4rem; }
.philo__devise p {
  font-family: var(--police); font-stretch: var(--large-titre); font-weight: 850; letter-spacing: -.012em; line-height: 1.05;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); color: var(--accent);
}
.philo__mots + .philo__mots { margin-top: 1.6rem; }
.philo__mots h3 { font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: .8rem; }
.mots { display: flex; flex-wrap: wrap; gap: .5rem; }
.mots li { padding: .45rem .9rem; border-radius: 999px; background: var(--accent); color: var(--accent-texte); font-weight: 700; }
.mots--contour li { background: none; color: var(--texte); border: 1.5px solid var(--trait); }
@media (max-width: 900px) { .philo { grid-template-columns: minmax(0, 1fr); } }

.bloc-prestation--seul { border-top: 0; padding-top: 0; }
.section--aujourdhui .chiffres { margin-top: clamp(2rem, 4vw, 3rem); }
.section--aujourdhui .chiffre dt { color: var(--accent-encre); }
.histoire-appels { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(2.4rem, 4vw, 3.4rem); }
@media (max-width: 560px) { .histoire-appels .bouton { width: 100%; } }
.jalons--parcours .jalon { align-content: start; }

/* ══ Contact et mentions légales ═════════════════════════════════════════ */

.section--contact-haut { padding-block: clamp(1.6rem, 1rem + 2vw, 3rem) clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.raccourcis__titre { font-size: 1.1rem; margin-bottom: 1rem; color: var(--texte-doux); font-weight: 700; }
.raccourcis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); }
.raccourci {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: .4rem; height: 100%;
  padding: clamp(1.2rem, 2.2vw, 1.8rem); background: var(--p-fond-doux); border-radius: var(--rayon-carte);
  text-decoration: none; border: 1px solid transparent; transition: border-color .2s, transform .2s;
}
.raccourci:hover { border-color: var(--accent); transform: translateY(-2px); }
.raccourci__picto { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: .6rem; background: var(--accent); color: var(--accent-texte); border-radius: var(--rayon); }
.raccourci__titre { font-weight: 800; font-size: 1.2rem; line-height: 1.25; }
.raccourci__texte { color: var(--texte-doux); }
.raccourci__lien { display: inline-flex; align-items: center; gap: .45rem; margin-top: .8rem; font-weight: 700; }
.raccourci__lien > span { background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat; }
@media (max-width: 800px) { .raccourcis { grid-template-columns: minmax(0, 1fr); } }
.section--suivre { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.section--suivre .videos__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .section--suivre .videos__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .section--suivre .videos__liste { grid-template-columns: minmax(0, 1fr); } }

.section--legal { padding-block: clamp(1.6rem, 1rem + 2vw, 3rem) clamp(4rem, 3rem + 4vw, 7rem); }
.legal { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.legal .entete-section { position: sticky; top: calc(var(--haut-entete) + 2rem); }
.legal__maj { color: var(--texte-doux); margin-top: 1rem; }
.legal__section { padding-block: 1.6rem; border-top: 1px solid var(--trait); }
.legal__section:first-child { padding-top: 0; border-top: 0; }
.legal__section h2 { font-size: 1.3rem; margin-bottom: .8rem; }
.legal__section p { color: var(--texte-doux); max-width: 46em; }
@media (max-width: 900px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal .entete-section { position: static; } }

.pied__legal a { color: inherit; }

/* Les vidéos du réseau en vignettes (Devenir coach). */
.videos__liste:has(.video-carte) { gap: clamp(.8rem, 1.6vw, 1.2rem); }
.video-carte { display: block; text-decoration: none; }
.video-carte__image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rayon-carte); background: var(--carte); }
.video-carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, filter .3s; filter: saturate(.9); }
.video-carte:hover .video-carte__image img, .video-carte:focus-visible .video-carte__image img { transform: scale(1.04); filter: none; }
.video-carte__lecture {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%; background: var(--p-accent); box-shadow: 0 8px 24px rgb(0 0 0 / .35); transition: transform .25s;
}
.video-carte__lecture::after {
  content: ''; position: absolute; left: 24px; top: 19px;
  border-left: 18px solid var(--accent-texte); border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.video-carte:hover .video-carte__lecture { transform: scale(1.1); }
.video-carte__titre { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .7rem; font-weight: 700; line-height: 1.3; }
.video-carte__titre .ic { color: var(--texte-doux); flex: none; }
@media (max-width: 560px) {
  .videos__liste:has(.video-carte) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-carte__lecture { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .video-carte__lecture::after { left: 17px; top: 13px; border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; }
  .video-carte__titre { font-size: .92rem; }
}

/* ══ Les actualités (reprises de ComptAC's, dessin BCT) ══════════════════ */

.actualites-apercu { --fond-section: var(--p-fond-doux); }
.actualites-apercu__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3rem); }
.actualites-apercu__tete .entete-section { margin-bottom: 0; }
.cartes-actus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.carte-actu[hidden] { display: none; }
.cartes-actus > .carte-actu:nth-child(n + 4 of :not([hidden])) { display: none; }
.carte-actu__lien { display: flex; flex-direction: column; height: 100%; background: var(--carte); border: 1px solid var(--carte-trait); border-radius: var(--rayon-carte); overflow: hidden; text-decoration: none; transition: border-color .25s, transform .25s; }
.carte-actu__lien:hover { border-color: var(--accent); transform: translateY(-2px); }
.carte-actu__photo { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--p-fond-doux); }
.carte-actu__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .1, 1); }
.carte-actu__lien:hover .carte-actu__photo img { transform: scale(1.04); }
.carte-actu__texte { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; flex: 1; padding: 1.3rem 1.4rem 1.4rem; }
.actu__date { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-encre); }
.carte-actu__titre { font-size: 1.25rem; line-height: 1.25; }
.carte-actu__resume { color: var(--texte-doux); }
.carte-actu__suite { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: .4rem; font-weight: 700; }
.carte-actu__suite > span { background: linear-gradient(var(--accent), var(--accent)) left bottom / 100% 2px no-repeat; }
@media (max-width: 1000px) { .cartes-actus { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cartes-actus > .carte-actu:nth-child(n + 3 of :not([hidden])) { display: none; } }
@media (max-width: 640px) { .cartes-actus { grid-template-columns: minmax(0, 1fr); } .actualites-apercu__tete .bouton { width: 100%; } }

.articles-section { padding-top: 0; }
.articles { display: flex; flex-direction: column; gap: clamp(4rem, 8vw, 7rem); }
.articles__vide { padding: 2rem 0; font-size: 1.3rem; color: var(--texte-doux); text-align: center; }
.article { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.4rem, 6vw, 6rem); align-items: start; }
.article[hidden] { display: none; }
.article__photo { position: sticky; top: calc(var(--haut-entete) + 2rem); margin: 0; isolation: isolate; }
.article__photo img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--rayon-carte); }
.article--inverse .article__photo { order: 2; }
.article--inverse .ent-haut__carre { right: auto; left: -5%; }
.article__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.article__titre { font-family: var(--police); font-stretch: var(--large-titre); font-weight: 850; letter-spacing: -.012em; line-height: 1.05; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); }
.article__resume { font-size: 1.2rem; line-height: 1.45; font-weight: 600; color: var(--accent-encre); }
.article__corps { max-width: 62ch; white-space: pre-line; color: var(--texte-doux); font-size: 1.06rem; }
@media (max-width: 900px) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .article--inverse .article__photo { order: 0; }
  .article__photo { position: relative; top: auto; margin-right: 5%; }
  .article__photo img { aspect-ratio: 16 / 10; }
}

/* Un coach ajouté dans l'administration, sans portrait : ses initiales. */
.carte-coach__photo--vide { display: grid; place-items: center; background: var(--p-accent); }
.carte-coach__photo--vide::after { content: attr(data-initiales); font-family: var(--police); font-stretch: var(--large-titre); font-weight: 850; font-size: 2.2rem; color: var(--accent-texte); }
/* La même chose, écrite par les gabarits (portrait() de coquille.mjs) :
   la fiche d'un coach sans photo, sa carte, sa vignette, sa case de mosaïque.
   Chaque place garde la taille qu'y aurait la photo. */
.photo-vide {
  display: grid; place-items: center; overflow: hidden;
  background: var(--p-accent); color: var(--accent-texte);
  font-family: var(--police); font-stretch: var(--large-titre); font-weight: 850; line-height: 1;
}
.photo-vide::before { content: attr(data-initiales); }
/* Une photo posée depuis l'édition en ligne : elle prend la place. */
.photo-vide:has(> img:not([hidden])) { background: none; }
.photo-vide:has(> img:not([hidden]))::before { content: none; }
.photo-vide > img:not([hidden]) { width: 100%; height: 100%; object-fit: cover; }
.carte-coach__photo .photo-vide { width: 112px; height: 112px; border-radius: 2px; font-size: 2.2rem; }
.fiche-coach__photo .photo-vide { width: 100%; aspect-ratio: 1; border-radius: 2px; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); }
/* Le carré décalé derrière le portrait passe à l'anthracite : orange sur
   orange, il ne se lisait plus que comme un défaut d'alignement. */
.fiche-coach__photo:has(> .photo-vide)::after, .carte-coach__photo:has(> .photo-vide)::after { background: var(--p-sombre); }
.mosaique__case .photo-vide { width: 100%; height: 100%; font-size: 1.6rem; }
.visage__photo.photo-vide { font-size: 1.2rem; }
.fiche-mini__photo.photo-vide { font-size: .9rem; }
@media (max-width: 420px) {
  .carte-coach__photo .photo-vide { width: 84px; height: 84px; font-size: 1.8rem; }
}

/* Le <select> habillé (repris de ComptAC's) : le bandeau d'édition en ligne. */
.select-habille { position: relative; }
.select-habille > select { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.select-habille__bouton { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; min-height: 52px; padding: .85rem 1rem; background: var(--p-fond); color: var(--p-encre); border: 1px solid color-mix(in srgb, var(--p-encre) 22%, transparent); border-radius: 6px; text-align: left; }
.select-habille__bouton .ic { color: var(--p-doux); transform: rotate(90deg); transition: transform .2s; pointer-events: none; }
.select-habille__bouton > span { pointer-events: none; }
.select-habille[data-ouvert] .select-habille__bouton .ic { transform: rotate(-90deg); }
.select-habille[data-ouvert] .select-habille__bouton { border-color: var(--p-accent-profond); }
.select-habille__liste { position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 30; display: none; flex-direction: column; max-height: 16rem; overflow-y: auto; overscroll-behavior: contain; padding: .35rem; background: var(--p-fond); border: 1px solid color-mix(in srgb, var(--p-encre) 22%, transparent); border-radius: var(--rayon); box-shadow: var(--ombre); }
.select-habille[data-ouvert] .select-habille__liste { display: flex; }
.select-habille[data-vers-haut] .select-habille__liste { top: auto; bottom: calc(100% + .35rem); }
.select-habille__liste button { min-height: 44px; padding: .6rem .8rem; border: 0; border-radius: 6px; background: transparent; color: var(--p-doux); text-align: left; }
.select-habille__liste button[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .select-habille__liste button:hover { background: var(--p-fond-doux); color: var(--p-encre); } }
.select-habille__liste button[aria-selected="true"] { color: var(--p-encre); font-weight: 700; background: color-mix(in srgb, var(--p-accent) 18%, var(--p-fond)); }
.select-habille--sombre .select-habille__bouton { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.select-habille--sombre .select-habille__liste { background: var(--p-sombre); border-color: rgba(255, 255, 255, .18); }
.select-habille--sombre .select-habille__liste button { color: rgba(255, 255, 255, .82); }
/* Téléphone : le compte des coachs ne couvre plus les visages — il passe
   sous la bande, en plus petit (retour de Pierre, 20/10/2026). */
@media (max-width: 900px) {
  .mosaique__compte { position: static; margin-top: .9rem; padding: .45rem .75rem; font-size: .92rem; gap: .45rem; }
  .mosaique__compte .ic { width: 18px; height: 18px; }
}
@media (max-width: 900px) {
  .mosaique::after { content: none; }
  .mosaique__grille { border-bottom: 6px solid var(--p-accent); }
}

/* Liste habillée SOMBRE (bandeau d'édition) : au survol et à l'élément
   choisi, le fond clair de la version claire gardait le texte blanc de la
   version sombre — ton sur ton, illisible. Fond et texte vont ensemble. */
@media (hover: hover) and (pointer: fine) {
  .select-habille--sombre .select-habille__liste button:hover { background: rgba(255, 255, 255, .14); color: #fff; }
}
.select-habille--sombre .select-habille__liste button[aria-selected="true"] { background: rgba(255, 255, 255, .2); color: #fff; }
.select-habille--sombre .select-habille__liste button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; color: #fff; }
/* … et chaque page tient sur UNE ligne : la liste prend la largeur de son
   plus long libellé (sans sortir de l'écran), au lieu de celle du bouton. */
.select-habille--sombre .select-habille__liste { width: max-content; min-width: 100%; max-width: calc(100vw - 2rem); right: auto; }
.select-habille--sombre .select-habille__liste button { white-space: nowrap; }
/* Plus compacte ; 44 px gardés au doigt (cible tactile). */
.select-habille--sombre .select-habille__liste button { min-height: 36px; padding: .4rem .75rem; font-size: .92rem; }
@media (pointer: coarse) { .select-habille--sombre .select-habille__liste button { min-height: 44px; } }