/* =============================================================================
   pierrecouette.fr — Feuille de style commune à tout le site
   -----------------------------------------------------------------------------
   Organisation du fichier :
     1. Variables (couleurs, espacements)
     2. Polices auto-hébergées
     3. Base et remise à zéro
     4. Utilitaires de mise en page
     5. En-tête et navigation
     6. Boutons
     7. Blocs de contenu (titres, cartes, listes, chiffres)
     8. Onglets
     9. FAQ
    10. Pied de page
    11. Accessibilité et préférences système
    12. Apparition au défilement

   Pour changer une couleur ou une taille sur TOUT le site, modifie une
   variable de la section 1. Ne touche pas aux valeurs en dur ailleurs.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs de marque, relevées dans le logo */
  --vert:        #298246;   /* vert du nom : titres, boutons, éléments forts */
  --vert-fonce:  #216c3a;   /* survol des boutons */
  --accent:      #1F9E2B;   /* vert du cœur : à doser, jamais en aplat large */
  --clair:       #EEF6F0;   /* fonds de section alternés */
  --txt:         #1C1C1C;
  --doux:        #4A4F4C;   /* texte secondaire. Ne jamais éclaircir : contraste AA */
  --blanc:       #ffffff;
  --line:        rgba(41, 130, 70, .14);

  /* -------------------------------------------------------------------------
     Couleurs par public. Une teinte par audience, utilisée comme repère de
     navigation (survol du menu, cartes de services, bandeaux).

     ⚠ Deux valeurs pour les prescripteurs : le bleu vif #3E8CBB est joli mais
     ne passe PAS le contraste AA (3,70 avec du texte blanc dessus). Il reste
     donc DÉCORATIF (bordures, aplats sans texte), et toute typographie utilise
     --pub-pros, à 5,39. Les trois autres teintes passent telles quelles.
     ---------------------------------------------------------------------- */
  --pub-particuliers:      #1C5C38;
  --pub-particuliers-fond: #E4F0E9;
  --pub-structures:        #245E82;
  --pub-structures-fond:   #E4EEF4;
  --pub-pros:              #2F7099;
  --pub-pros-fond:         #EAF3F8;
  --pub-pros-vif:          #3E8CBB;   /* décoratif uniquement, jamais sous du texte */
  --pub-entreprises:       #B23B3B;
  --pub-entreprises-fond:  #F6ECEA;

  /* Fond neutre des sections, plus froid et plus dense que --clair.
     Utilisé surtout par les pages professionnelles. */
  --neutre:       #F4F6F7;
  --neutre-ligne: #E3E8EA;

  /* Pied de page */
  --pied-fond:   #13261b;
  --pied-txt:    #dfeae2;
  --pied-doux:   #b9cabf;
  --pied-label:  #9db3a5;
  --pied-icone:  #4cd06a;

  /* Rayons */
  --r-s:  10px;
  --r-m:  14px;
  --r-l:  20px;
  --r-xl: 28px;

  /* Largeurs */
  --large:  1180px;
  --moyen:  1080px;
  --etroit:  840px;

  /* Marge intérieure horizontale, adaptative */
  --gouttiere: clamp(20px, 5vw, 40px);

  /* Ombres */
  --ombre-carte:  0 14px 30px rgba(41, 130, 70, .12);
  --ombre-bouton: 0 6px 16px rgba(41, 130, 70, .22);
}


/* -----------------------------------------------------------------------------
   2. POLICES AUTO-HÉBERGÉES
   Aucun appel à fonts.googleapis.com : l'adresse IP des visiteurs ne part pas
   chez Google. Les fichiers .woff2 sont dans le dossier fonts/.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/instrument-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/mulish-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/mulish-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/mulish-700.woff2') format('woff2');
}


/* -----------------------------------------------------------------------------
   2 bis. THÈMES PAR PUBLIC
   Une classe posée sur <body> redéfinit les variables de marque. Tout le reste
   du site (en-tête, boutons, pied de page, cartes) suit automatiquement, sans
   une seule règle en double.

       <body class="theme-structures">

   Le vert reste la couleur du site ; ces thèmes ne servent QUE sur les pages
   d'un public donné, pour que le visiteur sente un changement de ton sans voir
   un changement de marque.
   -------------------------------------------------------------------------- */
.theme-structures {
  --vert:        var(--pub-structures);
  --vert-fonce:  #1A455C;
  --accent:      #357FAB;
  --clair:       var(--pub-structures-fond);
  --line:        rgba(36, 94, 130, .14);
  --ombre-bouton: 0 6px 16px rgba(36, 94, 130, .22);
  --ombre-carte:  0 14px 30px rgba(36, 94, 130, .12);
  --pied-fond:   #10242F;
  --pied-txt:    #dbe6ee;
  --pied-doux:   #b2c4d1;
  --pied-label:  #97aebd;
  --pied-icone:  #83B7D4;
}

.theme-pros {
  --vert:        var(--pub-pros);
  --vert-fonce:  #245A7C;
  --accent:      var(--pub-pros-vif);
  --clair:       var(--pub-pros-fond);
  --line:        rgba(47, 112, 153, .14);
  --ombre-bouton: 0 6px 16px rgba(47, 112, 153, .22);
  --ombre-carte:  0 14px 30px rgba(47, 112, 153, .12);
  --pied-fond:   #12293A;
  --pied-txt:    #dbe6ee;
  --pied-doux:   #b2c4d1;
  --pied-label:  #97aebd;
  --pied-icone:  #83B7D4;
}

.theme-entreprises {
  --vert:        var(--pub-entreprises);
  --vert-fonce:  #8E2E2E;
  --accent:      #C95151;
  --clair:       var(--pub-entreprises-fond);
  --line:        rgba(178, 59, 59, .14);
  /* Neutre CHAUD (sable) là où les pages santé utilisent un neutre froid. */
  --neutre:       #F6F5F2;
  --neutre-ligne: #E7E4DE;
  --ombre-bouton: 0 6px 16px rgba(178, 59, 59, .22);
  --ombre-carte:  0 14px 30px rgba(178, 59, 59, .12);
  --pied-fond:   #2A1616;
  --pied-txt:    #f0e2e2;
  --pied-doux:   #d3b9b9;
  --pied-label:  #bd9a9a;
  --pied-icone:  #E08A8A;
}

/* Le menu déroulant garde ses quatre teintes propres quel que soit le thème :
   c'est un repère de navigation, il ne doit pas se recolorer avec la page. */


/* -----------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  font-size: 18px;          /* plancher de lisibilité : une part du public a plus de 60 ans */
  line-height: 1.5;
  color: var(--txt);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* L'attribut hidden doit toujours gagner. Sans ce !important, une règle qui
   fixe un display (flex, grid...) réafficherait un élément masqué par le
   JavaScript. */
[hidden] { display: none !important; }

a { color: var(--vert); }
a:hover { color: var(--vert-fonce); }

/* Titres. text-wrap:balance répartit les mots sur les lignes et évite
   qu'un mot court reste seul en fin de ligne. */
h1, h2, h3 {
  margin: 0;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.14;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* Paragraphes. text-wrap:pretty évite les mots orphelins, hyphens:auto autorise
   la césure (ne fonctionne QUE si <html lang="fr"> est présent), et la mesure
   est bornée à 62 caractères pour le confort de lecture. */
p {
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.texte {
  font-size: 1.12rem;
  line-height: 1.68;
  color: var(--doux);
}


/* -----------------------------------------------------------------------------
   4. UTILITAIRES DE MISE EN PAGE
   -------------------------------------------------------------------------- */
.wrap        { max-width: var(--large);  margin: 0 auto; padding-inline: var(--gouttiere); }
.wrap--moyen { max-width: var(--moyen); }
.wrap--etroit{ max-width: var(--etroit); }
.wrap--1000  { max-width: 1000px; }
.wrap--900   { max-width: 900px; }

.section          { padding-block: clamp(52px, 7vw, 96px); }
.section--clair   { background: var(--clair); }
.section--blanc   { background: var(--blanc); }

.pile      { display: flex; flex-direction: column; gap: 20px; }
.pile--s   { gap: 14px; }
.pile--l   { gap: 40px; }

.surtitre {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vert);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}


/* -----------------------------------------------------------------------------
   5. EN-TÊTE ET NAVIGATION
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.entete__barre {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.marque__pastille {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--clair);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.marque__textes { display: flex; flex-direction: column; line-height: 1.05; }
.marque__nom {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700; font-size: 1.18rem;
  color: var(--vert); letter-spacing: -.01em;
}
.marque__fonction {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--doux);
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav__lien {
  padding: 11px 14px;
  border-radius: var(--r-s);
  text-decoration: none;
  color: var(--txt);
  font-weight: 600;
  font-size: 1rem;
  min-height: 44px;              /* cible tactile minimale */
  display: inline-flex; align-items: center;
  transition: background .15s;
}
.nav__lien:hover { background: var(--clair); color: var(--txt); }
.nav__lien[aria-current="page"] { color: var(--vert); }

/* Menu déroulant « Mes services » */
.menu { position: relative; }
.menu__bouton {
  padding: 11px 14px;
  border-radius: var(--r-s);
  color: var(--txt);
  font-family: inherit; font-weight: 600; font-size: 1rem;
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  transition: background .15s;
}
.menu__bouton:hover { background: var(--clair); }
.menu__chevron { transition: transform .2s ease; }
.menu__bouton[aria-expanded="true"] .menu__chevron { transform: rotate(180deg); }

.menu__panneau {
  position: absolute;
  top: 100%; left: 0;
  min-width: 310px;
  background: var(--blanc);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(20, 50, 30, .14);
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.menu__panneau[hidden] { display: none; }

/* Chaque public a sa teinte au survol, comme repère de navigation.
   Les couleurs sont portées par deux variables, ce qui permet de les réutiliser
   telles quelles dans le tiroir mobile plus bas.

   ⚠ Toutes ont été choisies pour passer le contraste AA (4,5:1) sur LEUR PROPRE
   fond teinté. C'est ce qui a écarté le vert #298246 d'origine, à 4,36, et tous
   les « bleus clairs » : un texte clair sur un fond de la même teinte ne peut
   pas passer. Pour les prescripteurs, on fait donc varier la TEINTE (un bleu
   cyan) et non la clarté. */
.menu__item {
  --teinte-txt:  var(--vert);
  --teinte-fond: var(--clair);
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 14px;
  border-radius: var(--r-s);
  text-decoration: none;
  color: var(--vert);
  transition: background .15s, color .15s;
}
.menu__item:hover,
.menu__item:focus-visible { background: var(--teinte-fond); color: var(--teinte-txt); }
.menu__item strong { font-weight: 700; font-size: 1.02rem; color: inherit; }
.menu__item span   { font-size: .85rem; color: var(--doux); }

.menu__item--particuliers { --teinte-txt: var(--pub-particuliers); --teinte-fond: var(--pub-particuliers-fond); }
.menu__item--structures   { --teinte-txt: var(--pub-structures);   --teinte-fond: var(--pub-structures-fond); }
.menu__item--pros         { --teinte-txt: var(--pub-pros);         --teinte-fond: var(--pub-pros-fond); }
.menu__item--entreprises  { --teinte-txt: var(--pub-entreprises);  --teinte-fond: var(--pub-entreprises-fond); }

/* Bouton hamburger et tiroir mobile */
.burger {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--clair);
  border: 1px solid var(--line);
  display: none; place-items: center;
  cursor: pointer; flex-shrink: 0;
}

.tiroir {
  background: var(--blanc);
  border-top: 1px solid var(--line);
  padding: 14px var(--gouttiere) 22px;
  display: flex; flex-direction: column; gap: 4px;
}
.tiroir[hidden] { display: none; }
.tiroir__lien {
  display: flex; align-items: center;
  padding: 13px 12px;
  border-radius: var(--r-s);
  text-decoration: none;
  color: var(--txt); font-weight: 600;
  min-height: 48px;
}
/* Sur mobile il n'y a pas de survol : la teinte de chaque public est donc
   affichée en permanence, elle sert de repère au même titre. */
.tiroir__lien--enfant { padding-left: 24px; color: var(--teinte-txt, var(--vert)); font-weight: 700; }
.tiroir__lien--particuliers { --teinte-txt: var(--pub-particuliers); }
.tiroir__lien--structures   { --teinte-txt: var(--pub-structures); }
.tiroir__lien--pros         { --teinte-txt: var(--pub-pros); }
.tiroir__lien--entreprises  { --teinte-txt: var(--pub-entreprises); }
.tiroir__groupe {
  padding: 14px 12px 6px;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--doux);
}

/* Bascule entre navigation bureau et navigation mobile */
@media (max-width: 880px) {
  .nav    { display: none; }
  .burger { display: grid; }
}


/* -----------------------------------------------------------------------------
   6. BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700; font-size: 1rem;
  text-decoration: none;
  border: none; cursor: pointer;
  padding: 12px 20px;
  border-radius: 12px;
  min-height: 46px;
  transition: background .15s, transform .15s;
}
.btn--principal {
  background: var(--vert); color: var(--blanc);
  box-shadow: var(--ombre-bouton);
}
.btn--principal:hover {
  background: var(--vert-fonce); color: var(--blanc);
  transform: translateY(-1px);
}
.btn--inverse {
  background: var(--blanc); color: var(--vert);
  font-size: 1.06rem; padding: 16px 28px;
  border-radius: var(--r-m); min-height: 54px;
  box-shadow: 0 8px 20px rgba(41, 130, 70, .24);
}
.btn--inverse:hover { color: var(--vert); transform: translateY(-2px); }
.btn--large { justify-content: center; font-size: 1.05rem; padding: 15px 22px; min-height: 54px; }


/* -----------------------------------------------------------------------------
   7. BLOCS DE CONTENU
   -------------------------------------------------------------------------- */

/* Hero */
.hero { padding-block: clamp(44px, 6.5vw, 84px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 60px); }
.hero__texte  { flex: 1 1 440px; min-width: min(100%, 400px); display: flex; flex-direction: column; gap: 20px; }
.hero__visuel { flex: 1 1 300px; min-width: min(100%, 260px); display: flex; justify-content: center; position: relative; }
.hero__halo   { position: absolute; inset: 8%; background: radial-gradient(circle at 50% 45%, rgba(31,158,43,.16), transparent 66%); z-index: 0; }
.hero__image  { position: relative; z-index: 1; width: 100%; max-width: 340px; object-fit: contain; filter: drop-shadow(0 16px 30px rgba(20,50,30,.16)); }
/* Visuel au format paysage (la scène en salle de sport), plus large que les
   mascottes carrées. */
.hero__image--large { max-width: 400px; }

/* Grille de cartes */
.cartes { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.carte {
  flex: 1 1 240px; max-width: 300px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px;
  background: var(--blanc);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); border-color: rgba(41,130,70,.35); }
.carte--pleine { flex-basis: 100%; max-width: 660px; }
/* Pastille illustrant le type de séance. Purement décorative : le titre dit
   déjà tout, l'icône ne fait qu'accélérer la lecture en balayage. */
.carte__ico {
  width: 46px; height: 46px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--clair);
  color: var(--vert);
  margin-bottom: 4px;
}
.carte__titre { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.14rem; color: var(--vert); }
.carte__texte { font-size: 1.04rem; line-height: 1.55; color: var(--doux); text-wrap: pretty; }

/* Bandeau vert (crédit d'impôt) */
.bandeau {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(20px, 4vw, 40px);
  background: var(--vert);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
  color: var(--blanc);
}
.bandeau__chiffre {
  flex: 0 0 auto;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700; font-size: clamp(3rem, 8vw, 4.6rem); line-height: .95;
}
.bandeau__corps { flex: 1 1 300px; display: flex; flex-direction: column; gap: 8px; }
.bandeau__titre { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.3rem; }
.bandeau__texte { font-size: 1.08rem; line-height: 1.55; color: var(--blanc); text-wrap: pretty; max-width: none; }

/* Encadré neutre (tarifs) */
.encadre {
  background: var(--blanc);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 26px 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.encadre--clair { background: var(--clair); border: none; padding: 24px 26px; gap: 6px; }
.encadre__titre { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--txt); }
.encadre__texte { font-size: 1.08rem; line-height: 1.6; color: var(--doux); text-wrap: pretty; max-width: none; }

/* Chiffre clé avec sa source */
.stat {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  background: var(--blanc);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(24px, 3vw, 34px);
}
.stat__chiffre {
  flex: 0 0 auto;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700; font-size: clamp(3rem, 7vw, 4.4rem); line-height: 1;
  color: var(--vert);
}
.stat__corps  { flex: 1 1 300px; display: flex; flex-direction: column; gap: 8px; }
.stat__label  { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.18rem; color: var(--txt); }
.stat__source { font-size: .92rem; color: var(--doux); line-height: 1.5; }

/* Étiquettes de bénéfices */
.etiquettes { display: flex; flex-wrap: wrap; gap: 12px; }
.etiquette {
  flex: 1 1 220px;
  background: var(--blanc);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 16px 18px;
  font-size: 1.04rem; color: var(--txt);
}

/* -----------------------------------------------------------------------------
   CHIFFRES EN QUINCONCE
   Une grille à deux colonnes dont une sur deux descend d'un demi-pas. Le
   décalage n'est appliqué qu'à partir de 780 px : en colonne unique il
   creuserait un trou en haut de la pile.
   Chaque carte porte SA source. C'est la règle du site : un chiffre sans
   source n'est pas publiable, et une source vague ne vaut pas mieux.
   -------------------------------------------------------------------------- */
/* ⚠ Pas de décalage vertical entre les colonnes, et c'est délibéré.
   Une première version décalait une carte sur deux de 56 px. Combiné à
   height:100%, cela étirait toutes les cartes à la hauteur de la plus haute et
   creusait un grand trou au milieu de chacune, la source étant collée en bas.
   Résultat : quatre pourcentages à quatre hauteurs différentes, qui se lisaient
   comme un défaut d'alignement et non comme un rythme.
   Les cartes sont donc alignées, de hauteur égale par ligne, et le rythme est
   porté par la carte mise en avant. */
.chiffres { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.2vw, 24px); }
@media (min-width: 780px) {
  .chiffres { grid-template-columns: 1fr 1fr; }
}
.chiffre {
  display: flex; flex-direction: column; gap: 9px; height: 100%;
  background: var(--blanc);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(22px, 2.8vw, 32px);
}
.chiffre__valeur {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700; font-size: clamp(2.5rem, 5.2vw, 3.5rem); line-height: 1;
  letter-spacing: -.02em; color: var(--vert);
}
.chiffre__label { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.14rem; color: var(--txt); }
.chiffre__texte { font-size: 1rem; line-height: 1.55; color: var(--doux); max-width: none; text-wrap: pretty; }
.chiffre__source {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .85rem; line-height: 1.45; color: var(--doux);
}
/* Carte mise en avant : celle qui correspond exactement à ce que je propose.
   Tout le texte y est en blanc PUR et non en blanc transparent : sur ce vert,
   un blanc à 90 % tombe à 4,2:1 et passe sous le seuil AA. La hiérarchie est
   portée par la taille et la graisse, pas par l'opacité. */
.chiffre--fort { background: var(--vert); border-color: var(--vert); }
.chiffre--fort .chiffre__valeur,
.chiffre--fort .chiffre__label,
.chiffre--fort .chiffre__texte,
.chiffre--fort .chiffre__source { color: var(--blanc); }
.chiffre--fort .chiffre__source { border-top-color: rgba(255,255,255,.28); }

/* -----------------------------------------------------------------------------
   TARIF
   Le prix affiché et le prix réellement payé, côte à côte. Ils étaient dans
   deux blocs séparés, dont un grand bandeau vert pour le crédit d'impôt : le
   visiteur devait faire la soustraction lui-même, et le bandeau écrasait tout
   le reste de la section. Un seul bloc, deux colonnes, la deuxième mise en
   avant puisque c'est celle qui compte.
   -------------------------------------------------------------------------- */
.tarif {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;          /* pour que le fond vert épouse les coins arrondis */
  background: var(--blanc);
}
.tarif__bloc { flex: 1 1 260px; display: flex; flex-direction: column; gap: 5px; padding: 22px 26px; }
.tarif__prix  { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: clamp(1.75rem, 3.2vw, 2.3rem); line-height: 1; letter-spacing: -.02em; color: var(--txt); }
.tarif__label { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--txt); }
.tarif__note  { font-size: .95rem; line-height: 1.45; color: var(--doux); max-width: none; text-wrap: pretty; }
/* Texte en blanc PUR sur le vert : un blanc transparent tomberait sous le
   seuil de contraste AA. La hiérarchie vient de la taille, pas de l'opacité. */
.tarif__bloc--fort { background: var(--vert); }
.tarif__bloc--fort .tarif__prix,
.tarif__bloc--fort .tarif__label,
.tarif__bloc--fort .tarif__note { color: var(--blanc); }

/* Bénéfices sans chiffre : ce qui progresse, marqué d'une flèche montante. */
.gains { display: flex; flex-wrap: wrap; gap: 12px; }
.gain {
  flex: 1 1 200px;
  display: flex; align-items: center; gap: 12px;
  background: var(--blanc);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 16px 18px;
  font-size: 1.04rem; color: var(--txt); line-height: 1.35;
}
/* Flèche inclinée à 45° vers la droite : c'est le geste universel de la
   croissance. Une flèche strictement verticale se lit comme « vers le haut »,
   la diagonale se lit comme « ça progresse ». */
.gain svg { flex-shrink: 0; color: var(--vert); transform: rotate(45deg); }

/* -----------------------------------------------------------------------------
   MESSAGE CLÉ
   Le paragraphe qui porte le cœur du propos. Il est plus grand, adossé à un
   filet vert, et ses passages décisifs sont surlignés.

   Le surlignage est un DÉGRADÉ et non un fond plein : la couleur ne démarre
   qu'aux deux tiers de la hauteur de ligne, ce qui imite un vrai coup de
   marqueur et laisse le texte respirer.

   ⚠ Le texte surligné reste en couleur de texte normale, jamais en vert. Le
     vert de marque sur ce fond clair tombe à 4,36:1 et passe sous le seuil AA.
   -------------------------------------------------------------------------- */
.cle {
  margin: 0;
  border-left: 4px solid var(--vert);
  padding: 4px 0 4px 24px;
  max-width: 68ch;
}
.cle p {
  font-size: clamp(1.14rem, 1.7vw, 1.32rem);
  line-height: 1.62;
  color: var(--txt);
  margin: 0;
  text-wrap: pretty;
}
.cle strong {
  font-weight: 700;
  color: var(--txt);
  background: linear-gradient(transparent 62%, rgba(41, 130, 70, .22) 62%);
  padding: 0 2px;
  box-decoration-break: clone;            /* le surlignage suit les retours à la ligne */
  -webkit-box-decoration-break: clone;
}
.cle__source { display: block; margin-top: 14px; font-size: .88rem; line-height: 1.5; color: var(--doux); }

/* -----------------------------------------------------------------------------
   REPÈRES OFFICIELS
   Les recommandations publiques, citées telles quelles. Elles ne vendent rien :
   elles donnent au visiteur de quoi situer sa propre pratique.
   -------------------------------------------------------------------------- */
/* Deux colonnes fixes, et non un auto-fit. L'auto-fit produisait trois cartes
   en haut et une orpheline en bas à gauche : quatre éléments veulent 2 × 2. */
.reperes { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .reperes { grid-template-columns: 1fr 1fr; } }
.repere {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--blanc);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 22px 24px;
}
.repere__ico { color: var(--vert); }
.repere__valeur { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: var(--txt); }
.repere__texte { font-size: .99rem; line-height: 1.5; color: var(--doux); max-width: none; text-wrap: pretty; }

/* Note sourcée */
.note {
  font-size: .98rem; line-height: 1.6; color: var(--doux);
  background: var(--clair);
  border-radius: var(--r-m);
  padding: 16px 18px;
  max-width: none;
}
.note__source { display: block; margin-top: 4px; font-size: .85rem; }

/* Liste à coches */
.coches { list-style: none; margin: 8px 0 0; padding: 0; }
.coches li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.08rem; color: var(--txt); line-height: 1.5;
}
.coches svg { flex-shrink: 0; margin-top: 2px; }

/* Mascotte décorative */
.mascotte-deco {
  align-self: center;
  width: min(58%, 190px);
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(20,50,30,.12));
}

/* Appel à l'action final */
.cta {
  background: var(--vert);
  border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 60px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(24px, 4vw, 44px);
}
.cta__texte  { flex: 1 1 320px; min-width: min(100%, 300px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.cta__titre  { color: var(--blanc); max-width: 26ch; }
.cta__image  { flex: 0 0 auto; width: min(42%, 265px); min-width: 200px; object-fit: contain; }
/* Version resserrée : même bloc, moins de souffle. Utile quand l'appel à
   l'action clôt une page déjà longue et n'a pas à occuper un écran entier. */
.cta--compact { padding: clamp(26px, 3.4vw, 40px); border-radius: var(--r-l); gap: clamp(20px, 3vw, 34px); }
.cta--compact .cta__titre { font-size: clamp(1.35rem, 2.4vw, 1.8rem); max-width: 30ch; }
.cta--compact .cta__texte { gap: 14px; flex: 1 1 340px; }
.cta--compact .cta__image { width: min(32%, 180px); min-width: 140px; }

/* -----------------------------------------------------------------------------
   RÉCIT EN QUINCONCE (page À propos)
   Le texte et l'illustration alternent de côté d'une section à l'autre. C'est
   ce qui casse la colonne unique sans multiplier les mises en page.
   -------------------------------------------------------------------------- */
.recit {
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding-block: clamp(44px, 6vw, 84px);
}
@media (min-width: 860px) {
  .recit { grid-template-columns: 1.25fr .75fr; }
  /* Inversion une section sur deux. order plutôt que grid-column : le HTML
     garde l'ordre de lecture texte-puis-image, y compris pour un lecteur
     d'écran, et seul l'affichage change. */
  .recit--inverse .recit__texte  { order: 2; }
  .recit--inverse .recit__visuel { order: 1; }
}
.recit__texte { display: flex; flex-direction: column; gap: 14px; }
.recit__texte h2 { font-size: clamp(1.5rem, 2.7vw, 2.1rem); }
.recit__texte .texte { max-width: 62ch; font-size: 1.1rem; line-height: 1.72; }
.recit__visuel { display: flex; justify-content: center; }
.recit__image { width: 100%; max-width: 280px; object-fit: contain; filter: drop-shadow(0 14px 26px rgba(20,50,30,.14)); }

/* Emplacement d'illustration en attente.
   Volontairement visible : un espace vide se remarque et se remplit, un espace
   invisible reste vide pour toujours. Il disparaît de l'impression et n'est
   jamais annoncé aux lecteurs d'écran (aria-hidden dans le HTML). */
.emplacement {
  width: 100%; max-width: 280px; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  border: 2px dashed var(--line);
  border-radius: var(--r-l);
  background: var(--clair);
  color: var(--doux); font-size: .88rem; line-height: 1.4;
  padding: 18px;
}
.emplacement svg { color: var(--vert); opacity: .55; }
.emplacement strong { font-family: 'Instrument Sans', sans-serif; font-size: .95rem; color: var(--txt); }


/* -----------------------------------------------------------------------------
   8. ONGLETS (À domicile / En salle de sport)
   -------------------------------------------------------------------------- */
.onglets {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 6px;
  background: var(--clair);
  border-radius: 999px;
  width: fit-content;
  margin-top: 4px;
}
.onglets__curseur {
  position: absolute;
  top: 6px; bottom: 6px; left: 6px;
  width: calc(50% - 6px);
  background: var(--blanc);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.onglet {
  position: relative; z-index: 1;
  width: 100%; text-align: center;
  padding: 12px 22px;
  background: transparent;
  color: var(--doux);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700; font-size: 1rem;
  border: none; cursor: pointer;
  min-height: 44px; white-space: nowrap;
  transition: color .2s ease;
}
.onglet[aria-selected="true"] { color: var(--vert); }

/* Apparition du panneau actif : fondu SEUL, sans déplacement vertical.
   Un glissement de bas en haut donne l'impression que la page bouge sous le
   doigt alors que seul le contenu a changé. */
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }
.panneau { scroll-margin-top: 90px; }
.panneau[hidden] { display: none; }
.panneau.est-anime { animation: apparition .18s ease; }

/* Visuel du hero qui bascule avec l'onglet.
   Les deux images occupent la MÊME cellule de grille et celle qui est masquée
   garde sa place : la colonne fait toujours la hauteur de la plus grande. Sans
   ça, le rapport de forme différent des deux images ferait remonter ou
   descendre le texte à chaque bascule. */
.hero__visuel--bascule { display: grid; place-items: center; }
.hero__visuel--bascule .hero__image { grid-area: 1 / 1; }
.hero__visuel--bascule .hero__image[hidden] { display: block !important; visibility: hidden; }


/* -----------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--blanc);
}
.faq__question {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700; font-size: 1.1rem;
  color: var(--txt);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question span { text-wrap: pretty; }
.faq__question svg { flex-shrink: 0; transition: transform .2s ease; }
.faq__item[open] .faq__question svg { transform: rotate(180deg); }
.faq__reponse {
  padding: 0 22px 20px;
  color: var(--doux);
  font-size: 1.05rem; line-height: 1.62;
  text-wrap: pretty;
  -webkit-hyphens: auto; hyphens: auto;
  max-width: none;
}


/* -----------------------------------------------------------------------------
   10. PIED DE PAGE
   -------------------------------------------------------------------------- */
.pied { background: var(--pied-fond); color: var(--pied-txt); }
.pied__grille {
  padding-block: clamp(48px, 6vw, 72px) 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 36px;
}
.pied__colonne { display: flex; flex-direction: column; gap: 12px; }
.pied__label {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--pied-label);
}
.pied__lien {
  color: var(--pied-txt); text-decoration: none; font-size: 1rem;
  min-height: 34px; display: inline-flex; align-items: center;
}
.pied__lien:hover { color: var(--blanc); }
.pied__lien--contact { gap: 10px; min-height: 44px; }
.pied__lien--mail { word-break: break-all; }
.pied__zone { display: inline-flex; align-items: center; gap: 10px; color: var(--pied-doux); font-size: 1rem; }
.pied__baseline { font-size: .98rem; line-height: 1.6; color: var(--pied-doux); text-wrap: pretty; max-width: 320px; }
.pied__marque { display: flex; align-items: center; gap: 11px; }
.pied__pastille { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.10); display: grid; place-items: center; }
.pied__nom { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--blanc); }
.pied__fonction { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pied-label); }
.pied__bas { border-top: 1px solid rgba(255,255,255,.10); }
.pied__legal { padding-block: 20px; font-size: .86rem; color: var(--pied-label); }


/* -----------------------------------------------------------------------------
   11 bis. BLOCS PROPRES À LA PAGE D'ACCUEIL
   -------------------------------------------------------------------------- */

/* Hero d'accueil : plus grand que celui des pages intérieures */
.hero--accueil { gap: clamp(32px, 5vw, 64px); }
.hero--accueil .hero__texte { gap: 22px; min-width: min(100%, 420px); }
.hero--accueil h1 { font-size: clamp(2.1rem, 4.8vw, 3.35rem); line-height: 1.07; }
.hero--accueil .hero__image { max-width: 460px; }
.hero__accroche { font-size: clamp(1.12rem, 1.6vw, 1.28rem); line-height: 1.6; color: var(--doux); max-width: 36ch; }
.hero__boutons { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 2px; }
/* Ligne de réassurance sous les boutons */
.hero__gage { display: flex; align-items: center; gap: 10px; color: var(--doux); font-size: .98rem; margin-top: 4px; }

/* Bouton secondaire, contour seul */
.btn--contour {
  color: var(--vert); background: none;
  border: 1.5px solid rgba(41, 130, 70, .35);
  font-size: 1.06rem; padding: 15px 22px;
  border-radius: var(--r-m); min-height: 54px;
}
.btn--contour:hover { background: var(--clair); border-color: var(--vert); color: var(--vert); }
.btn--contour-blanc { background: var(--blanc); }
.btn--contour-blanc:hover { background: var(--blanc); }

/* Chapeau de section centré */
.chapeau {
  max-width: 640px; margin: 0 auto 44px;
  text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.chapeau h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.12; }

/* Cartes de service, une par public */
.services { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.svc {
  --teinte: var(--vert);
  --teinte-fond: var(--clair);
  flex: 1 1 300px; max-width: 360px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px;
  background: var(--blanc);
  border: 1px solid var(--line);
  border-radius: 22px;
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.svc:hover, .svc:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--teinte) 45%, transparent);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--teinte) 16%, transparent);
}
.svc__ico {
  width: 54px; height: 54px; border-radius: 15px;
  background: var(--clair);
  display: grid; place-items: center;
  transition: background .18s;
}
.svc:hover .svc__ico { background: var(--teinte-fond); }
.svc__ico svg { stroke: var(--vert); transition: stroke .18s; }
.svc:hover .svc__ico svg { stroke: var(--teinte); }
.svc__titre { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--vert); transition: color .18s; }
.svc__texte { font-size: 1.06rem; line-height: 1.55; color: var(--doux); text-wrap: pretty; max-width: none; }
.svc__cta {
  margin-top: auto; padding-top: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--vert);
  font-family: 'Instrument Sans', sans-serif; font-weight: 700;
  transition: color .18s;
}
.svc:hover .svc__titre, .svc:hover .svc__cta { color: var(--teinte); }

.svc--particuliers { --teinte: var(--pub-particuliers); --teinte-fond: var(--pub-particuliers-fond); }
.svc--structures   { --teinte: var(--pub-structures);   --teinte-fond: var(--pub-structures-fond); }
.svc--entreprises  { --teinte: var(--pub-entreprises);  --teinte-fond: var(--pub-entreprises-fond); }

/* Bandeau d'aiguillage vers la page prescripteurs */
.bandeau-pros {
  margin: 36px auto 0; max-width: 780px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px;
  background: var(--pub-pros-fond);
  border: 1px solid color-mix(in srgb, var(--pub-pros-vif) 28%, transparent);
  border-radius: 18px;
  padding: 20px 26px;
}
.bandeau-pros__ico {
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--blanc);
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--pub-pros-vif) 14%, transparent);
}
.bandeau-pros__texte { flex: 1 1 320px; font-size: 1.08rem; color: var(--txt); line-height: 1.45; text-wrap: pretty; max-width: none; }
/* Fond --pub-pros et non --pub-pros-vif : le texte est blanc, il lui faut 4,5:1 */
.btn--pros { background: var(--pub-pros); color: var(--blanc); white-space: nowrap; padding: 13px 22px; min-height: 48px; }
.btn--pros:hover { background: #245A7C; color: var(--blanc); transform: translateY(-1px); }

/* Bénéfices */
.benefices { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.benefice {
  flex: 1 1 200px; max-width: 264px;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  padding: 26px;
  background: var(--blanc);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.benefice:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); border-color: rgba(41,130,70,.35); }
.benefice__ico { width: 54px; height: 54px; border-radius: var(--r-m); background: var(--clair); display: grid; place-items: center; }
.benefice__label { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 1.14rem; color: var(--txt); line-height: 1.25; text-wrap: balance; }

/* Bandeau de logos partenaires */
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.logos__case {
  flex: 1 1 190px; max-width: 230px; height: 94px;
  border-radius: var(--r-m);
  background: var(--blanc);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  padding: 16px 18px;
  filter: grayscale(1); opacity: .7;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
.logos__case:hover { filter: grayscale(0); opacity: 1; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 26px rgba(20,50,30,.12); }
.logos__case img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Grand appel à l'action de l'accueil */
.cta--grand { border-radius: 30px; gap: clamp(28px, 4vw, 52px); overflow: hidden; justify-content: flex-start; }
.cta--grand .cta__texte { flex: 1 1 380px; min-width: min(100%, 320px); gap: 16px; }
.cta__accroche { font-size: 1.16rem; line-height: 1.6; color: var(--blanc); max-width: 44ch; text-wrap: pretty; }
.cta--grand .cta__image { flex: 0 1 340px; min-width: min(100%, 260px); width: 100%; max-width: 360px; filter: drop-shadow(0 14px 24px rgba(0,0,0,.28)); }

/* Coordonnées directes dans un appel à l'action.
   Pour un prescripteur, le numéro vaut mieux qu'un bouton de plus : il veut
   joindre quelqu'un, pas remplir un formulaire. Le soulignement est explicite,
   la couleur seule ne suffit jamais à signaler un lien. */
.cta__direct { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 2px; }
.cta__direct a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--blanc); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 3px;
}
.cta__direct a:hover, .cta__direct a:focus-visible { border-bottom-color: var(--blanc); }


/* -----------------------------------------------------------------------------
   11 ter. BLOCS DES PAGES PROFESSIONNELLES
   Registre plus dense et plus sobre : moins d'arrondi, des tableaux plutôt que
   des cartes, un fond neutre froid au lieu du vert clair.
   -------------------------------------------------------------------------- */
.section--neutre { background: var(--neutre); }
.section--filet-bas  { border-bottom: 1px solid var(--neutre-ligne); }
.section--filet-haut { border-top: 1px solid var(--neutre-ligne); }

/* Encadré mis en avant (l'exemple concret) */
.encadre--fort {
  border: 1px solid var(--neutre-ligne);
  border-radius: 16px;
  padding: clamp(26px, 3.5vw, 40px);
  box-shadow: 0 10px 30px rgba(20, 50, 30, .06);
  gap: 14px;
}
.encadre__phrase {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(1.22rem, 2.1vw, 1.55rem);
  line-height: 1.4;
  color: var(--txt);
  text-wrap: pretty;
  max-width: none;
}

/* Témoignage attribué */
.temoignage {
  background: var(--blanc);
  border: 1px solid var(--neutre-ligne);
  border-radius: 16px;
  padding: clamp(28px, 3.5vw, 44px);
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 10px 30px rgba(36, 94, 130, .08);
}
.temoignage__guillemet { font-family: Georgia, serif; font-size: 3rem; line-height: .4; height: 26px; color: var(--vert); }
.temoignage__texte {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(1.18rem, 2vw, 1.5rem);
  line-height: 1.45;
  color: var(--txt);
  text-wrap: pretty;
  max-width: none;
}
.temoignage__auteur { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.temoignage__logo {
  width: 58px; height: 58px; border-radius: 12px;
  background: var(--blanc); border: 1px solid var(--neutre-ligne);
  display: grid; place-items: center; padding: 9px;
}
.temoignage__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.temoignage__nom  { font-family: 'Instrument Sans', sans-serif; font-weight: 700; color: var(--txt); font-size: 1.05rem; }
.temoignage__role { font-size: .9rem; color: var(--doux); }
.etoiles { margin-left: auto; display: flex; gap: 2px; color: var(--vert); }

/* Deux colonnes équilibrées */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.duo h2 { font-size: clamp(1.5rem, 2.7vw, 2.05rem); }

/* Tableau de prestations : libellé à gauche, description à droite */
.prestations {
  border: 1px solid var(--neutre-ligne);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--blanc);
}
.prestations__ligne {
  display: flex; flex-wrap: wrap; gap: 4px 24px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--neutre-ligne);
}
.prestations__ligne:last-child { border-bottom: none; }
.prestations__nom {
  flex: 0 0 270px;
  font-family: 'Instrument Sans', sans-serif; font-weight: 700;
  color: var(--txt); font-size: 1.08rem;
}
.prestations__desc { flex: 1 1 320px; color: var(--doux); font-size: 1.02rem; line-height: 1.55; max-width: none; }

/* -----------------------------------------------------------------------------
   FORMULAIRE
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 7px; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 1rem; color: var(--txt); }
.champ__option { font-weight: 400; color: var(--doux); }
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ textarea {
  width: 100%;
  font-family: inherit; font-size: 1.05rem; font-weight: 400;
  color: var(--txt); background: var(--blanc);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; min-height: 52px;
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus-visible, .champ textarea:focus-visible { border-color: var(--vert); }

/* Message d'erreur. aria-live fait qu'il est annoncé dès son apparition. */
.champ__erreur { font-family: 'Mulish', sans-serif; font-weight: 600; font-size: .92rem; color: #B3261E; }
.champ__erreur:empty { display: none; }
.champ--faux input, .champ--faux textarea { border-color: #B3261E; border-width: 2px; }

.choix { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.choix legend { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 1rem; color: var(--txt); padding: 0; margin-bottom: 2px; }
.choix__liste { display: flex; flex-wrap: wrap; gap: 10px; }
.choix__option {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--blanc); border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 18px; font-weight: 600; font-size: 1rem; color: var(--txt);
  cursor: pointer; min-height: 44px;
}
.choix__option:hover { border-color: var(--vert); }
.choix__option input { width: 18px; height: 18px; accent-color: var(--vert); }

.consentement { display: flex; align-items: flex-start; gap: 11px; font-size: .96rem; color: var(--doux); line-height: 1.5; cursor: pointer; font-weight: 400; }
.consentement input { width: 20px; height: 20px; accent-color: var(--vert); flex-shrink: 0; margin-top: 2px; }

/* Retour après envoi */
.form__retour { border-radius: 12px; padding: 14px 16px; font-weight: 600; line-height: 1.5; }
.form__retour:empty { display: none; }
.form__retour--ok { background: var(--clair); color: var(--vert); }
.form__retour--ko { background: #FDECEA; color: #B3261E; }

/* Carte de la zone d'intervention.
   Le SVG est dessiné par outils/construire-carte.js à partir des données
   ouvertes de l'IGN. Il est chargé en <object> et non en <img> : c'est ce qui
   garde le survol des communes actif et les info-bulles lisibles.
   Aucun appel à un service tiers, donc aucune adresse IP transmise. */
/* La carte est déplaçable et zoomable : elle a besoin d'une hauteur réelle,
   pas d'une hauteur dictée par son contenu. Le rapport de forme reprend celui
   du dessin (415 × 532), avec un plancher pour que les boutons restent
   confortables sur téléphone. */
.carte-zone {
  display: block; width: 100%;
  aspect-ratio: 415 / 532;
  min-height: 300px;
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #F5F7F6;
}
.carte-aide {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .88rem; line-height: 1.45; color: var(--doux);
  max-width: none;
}
.carte-aide svg { flex-shrink: 0; margin-top: 2px; color: var(--vert); }
.carte-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .92rem; color: var(--doux); }
.carte-legende span { display: inline-flex; align-items: center; gap: 7px; }
.carte-legende i { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }

/* Liste des communes, en colonnes.
   C'est cette liste, et pas la carte, qui répond précisément à « est-ce qu'il
   vient chez moi ? ». C'est aussi le seul contenu indexable par les moteurs de
   recherche : un dessin ne contient aucun mot que Google puisse lire. */
.communes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px 26px; }
.communes__groupe { display: flex; flex-direction: column; gap: 8px; }
.communes__titre {
  font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1rem;
  color: var(--vert); display: inline-flex; align-items: center; gap: 8px;
}
.communes__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.communes__liste li { font-size: 1.02rem; color: var(--txt); line-height: 1.45; }
.communes__liste small { color: var(--doux); font-size: .88rem; }

/* Carte de contact cliquable (téléphone, email) */
.contact-carte {
  display: flex; align-items: center; gap: 16px;
  padding: 26px;
  background: var(--clair);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.contact-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); color: inherit; }
.contact-carte__ico { width: 54px; height: 54px; border-radius: 15px; background: var(--blanc); display: grid; place-items: center; flex-shrink: 0; }
.contact-carte__ico svg { color: var(--vert); }
.contact-carte__valeur { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--txt); }
.contact-carte__valeur--mail { font-size: 1.08rem; word-break: break-all; }
.contact-carte__note { font-size: .98rem; color: var(--doux); }

/* Mur d'avis.
   Mise en colonnes CSS plutôt qu'une grille : les avis n'ont pas la même
   longueur, et `columns` les répartit sans laisser de trous. break-inside
   empêche une carte d'être coupée entre deux colonnes. */
.avis-mur { columns: 3 320px; column-gap: 18px; }
.avis {
  break-inside: avoid;
  margin: 0 0 18px;
  background: var(--blanc);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.avis__texte { font-size: 1.04rem; line-height: 1.6; color: var(--txt); text-wrap: pretty; max-width: none; }
.avis__auteur { display: flex; align-items: center; gap: 12px; }
.avis__initiales {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--clair);
  display: grid; place-items: center; flex-shrink: 0;
  font-family: 'Instrument Sans', sans-serif; font-weight: 700;
  font-size: .95rem; color: var(--vert);
}
.avis__logo {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--blanc); border: 1px solid var(--line);
  display: grid; place-items: center; padding: 6px; flex-shrink: 0;
}
.avis__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.avis__nom  { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1rem; color: var(--txt); }
.avis__role { font-size: .88rem; color: var(--doux); }

/* Liste de diplômes */
.diplomes {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 8px 26px;
  background: var(--clair);
  list-style: none;
}
.diplomes li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.08rem; color: var(--txt); line-height: 1.45; font-weight: 600;
}
.diplomes li:last-child { border-bottom: none; }
.diplomes svg { flex-shrink: 0; margin-top: 1px; color: var(--vert); }

/* Carte de chiffre clé, avec sa source en pied de carte.
   La source est collée en bas (margin-top:auto) pour que les cartes d'une même
   rangée alignent leurs traits de séparation, quelle que soit la longueur du
   texte au-dessus. */
.stat-cartes { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; }
.stat-carte {
  flex: 1 1 300px;
  background: var(--blanc);
  border: 1px solid var(--neutre-ligne);
  border-radius: 18px;
  padding: 30px;
  display: flex; flex-direction: column; gap: 10px;
}
.stat-carte__chiffre {
  font-family: 'Instrument Sans', sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 2.9rem); line-height: 1.02;
  color: var(--vert);
}
.stat-carte__label { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.12rem; color: var(--txt); }
.stat-carte__precision { font-size: 1rem; color: var(--doux); line-height: 1.5; max-width: none; }
.stat-carte__source {
  margin-top: auto; padding-top: 6px;
  font-size: .82rem; color: var(--doux); line-height: 1.45;
  border-top: 1px solid var(--neutre-ligne);
  max-width: none;
}

/* Ligne à coche */
.checks { display: flex; flex-wrap: wrap; gap: 12px; }
.check {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blanc);
  border: 1px solid var(--neutre-ligne);
  border-radius: 12px;
  padding: 15px 18px;
  font-size: 1.05rem; color: var(--txt);
  flex: 1 1 260px;
}
.check svg { flex-shrink: 0; color: var(--vert); }

/* Pastilles d'indications */
.puces { display: flex; flex-wrap: wrap; gap: 12px; }
.puce {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--blanc);
  border: 1px solid var(--neutre-ligne);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 1.02rem; color: var(--txt);
}
.puce::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--vert); flex-shrink: 0;
}

/* Carte sobre sans numéro */
.carte-simple {
  flex: 1 1 260px;
  border: 1px solid var(--neutre-ligne);
  border-radius: 12px;
  background: var(--blanc);
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  /* Même réaction au survol que les autres cartes du site : sans elle, ces
     blocs semblaient inertes à côté des autres. */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.carte-simple:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); border-color: rgba(47,112,153,.35); }
.carte-simple__titre { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--txt); }
.carte-simple__texte { color: var(--doux); font-size: 1.02rem; line-height: 1.5; max-width: none; }

/* Note sourcée sur fond blanc (registre professionnel) */
.note--blanche { background: var(--blanc); border: 1px solid var(--neutre-ligne); border-radius: 12px; padding: 18px 20px; max-width: 760px; }

/* Pages légales */
.legal { display: flex; flex-direction: column; gap: 16px; }
.legal h2 {
  margin-top: 26px;
  font-size: 1.35rem;
  color: var(--vert);
}
.legal p { font-size: 1.06rem; line-height: 1.7; color: var(--doux); max-width: 70ch; }
.legal ul { margin: 0; padding-left: 22px; color: var(--doux); font-size: 1.06rem; line-height: 1.7; max-width: 70ch; }
.legal li { margin-bottom: 6px; }

/* Marqueur d'information encore à fournir. Volontairement voyant : une mention
   légale incomplète doit se remarquer, pas se fondre dans le texte. */
.a-completer {
  font-family: ui-monospace, Menlo, monospace; font-size: .82rem;
  color: #9a6b00; background: #fdf6e3;
  border: 1px solid #f0e2b8; padding: 2px 8px; border-radius: 6px;
}

/* Tableau d'informations : libellé plus étroit que celui des prestations. */
.prestations--infos .prestations__nom { flex: 0 0 220px; font-size: 1rem; }
.prestations--infos .prestations__desc { font-size: 1rem; }
.prestations--infos .prestations__ligne { padding: 15px 20px; }

/* Étapes numérotées */
.etapes { display: flex; flex-wrap: wrap; gap: 16px; }
.etape {
  flex: 1 1 200px;
  border: 1px solid var(--neutre-ligne);
  border-radius: 12px;
  padding: 22px;
  background: var(--blanc);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.etape:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(20, 50, 30, .10); }
.etape__num   { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--vert); }
.etape__label { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--txt); line-height: 1.3; }


/* -----------------------------------------------------------------------------
   11. ACCESSIBILITÉ ET PRÉFÉRENCES SYSTÈME
   -------------------------------------------------------------------------- */

/* Contour de focus visible au clavier. Ne jamais supprimer : c'est le seul
   repère d'une personne qui navigue sans souris. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Masqué à l'œil, lu par les lecteurs d'écran. Sert aux titres de section
   nécessaires à la structure du document mais superflus visuellement.
   On n'utilise NI display:none NI visibility:hidden, qui retireraient aussi
   l'élément de la lecture vocale. */
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement, visible seulement au clavier */
.evitement {
  position: absolute; left: -9999px;
  background: var(--vert); color: var(--blanc);
  padding: 12px 20px; border-radius: 0 0 var(--r-s) 0;
  z-index: 100; text-decoration: none; font-weight: 700;
}
.evitement:focus { left: 0; top: 0; color: var(--blanc); }

/* -----------------------------------------------------------------------------
   12. APPARITION AU DÉFILEMENT
   -----------------------------------------------------------------------------
   Les blocs arrivent en fondu, légèrement décalés vers le bas, à mesure qu'on
   descend dans la page.

   ⚠ LA RÈGLE DE SÛRETÉ EST DANS LE SÉLECTEUR. Masquer un bloc exige DEUX
     conditions simultanées :
       .anim        posée sur <html> par le script en tête de page,
                    uniquement si le JavaScript tourne et si le système ne
                    demande pas de réduire les animations ;
       data-revele  posé par js/site.js sur les blocs à animer.
     Si le JavaScript ne se charge pas, l'attribut n'existe jamais, ce
     sélecteur ne s'applique à rien, et la page reste entièrement lisible.
     C'est le défaut le plus courant de ce genre d'effet : mettre opacity:0
     dans le CSS et compter sur le JavaScript pour révéler. Le jour où il ne
     se charge pas, le site est une page blanche.

   Le mouvement est volontairement court : 14 px, jamais de glissement
   latéral, jamais d'agrandissement. On veut accompagner le regard, pas
   attirer l'attention sur l'animation elle-même.
   -------------------------------------------------------------------------- */
.anim [data-revele] {
  opacity: 0;
  transform: translateY(14px);
}
.anim [data-revele].vu {
  opacity: 1;
  transform: none;
  /* Sortie douce (ease-out) : rapide au début, freine à l'arrivée. Une courbe
     symétrique donnerait une impression de flottement. */
  transition: opacity .52s cubic-bezier(.22, .61, .36, 1),
              transform .52s cubic-bezier(.22, .61, .36, 1);
}

/* À l'impression, rien ne doit rester masqué. */
@media print {
  [data-revele] { opacity: 1 !important; transform: none !important; }
}


/* Très petits écrans (iPhone SE et anciens Android, 320 px).
   ⚠ Mesuré : le bloc de marque portait flex-shrink:0, il refusait donc de
     rétrécir et poussait le bouton du menu 26 px HORS de l'écran. Toutes les
     pages débordaient horizontalement, sur les onze.
     Ici, on ne fait pas rétrécir la marque, on la RESSERRE : pastille plus
     petite, typographie plus compacte, gouttière réduite. Le nom reste sur une
     seule ligne, ce qu'un simple flex-shrink n'aurait pas garanti. */
@media (max-width: 400px) {
  .entete__barre     { gap: 10px; }
  .marque            { gap: 9px; min-width: 0; }
  .marque__pastille  { width: 38px; height: 38px; }
  .marque__pastille svg { width: 22px; height: 22px; }
  .marque__nom       { font-size: 1.02rem; }
  .marque__fonction  { font-size: .58rem; letter-spacing: .045em; }
  .burger            { width: 44px; height: 44px; }

  /* Les deux onglets « À domicile / En salle de sport » ne tiennent pas côte à
     côte à 320 px avec leur remplissage normal : le groupe débordait de 20 px.
     On resserre plutôt que d'empiler, pour que le curseur coulissant garde son
     sens : il glisse d'un onglet à l'autre, il lui faut deux colonnes. */
  .onglets           { width: 100%; }
  /* white-space:normal lève le nowrap : « En salle de sport » passe sur deux
     lignes plutôt que de forcer une largeur que l'écran n'a pas. Les deux
     onglets restent côte à côte, ce qui garde son sens au curseur coulissant. */
  .onglet            { padding: 10px 8px; font-size: .86rem; white-space: normal; line-height: 1.25; }
}


/* Respect du réglage « réduire les animations » du système */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Impression : on retire le superflu */
@media print {
  .entete, .burger, .tiroir, .cta, .onglets { display: none !important; }
  .panneau[hidden] { display: block !important; }
  body { font-size: 12pt; }
}