/*
 * Direction visuelle « Bandeaux » — retenue par David le 30/07/2026 à l'issue de
 * la ronde 3 des explorations d'accueil (Explorations-design-accueil/ronde-3/).
 *
 * Couche posée APRÈS site.css : elle ne remplace rien, elle redéfinit. Les
 * gabarits et les classes du site restent ceux d'avant — un site qui ne charge
 * pas ce fichier retrouve exactement son rendu précédent, au pixel près. C'est
 * ce qui permet de basculer com sans toucher aux spokes (.fr, .ma, hq), qui
 * suivront à leur propre chantier : une clé `design` dans sites/<x>/config.php.
 *
 * Ce que la direction tient, et qui ne se rediscute pas d'un écran à l'autre :
 *   · le bandeau — chaque titre de section est posé dans un panneau bleu pâle
 *     arrondi, souligné d'un filet corail : c'est le motif qui donne son nom à
 *     la direction, et le seul élément de rythme de la page ;
 *   · rondeurs partout, aucun angle vif ;
 *   · texte foncé sur fonds clairs, jamais de grande surface sombre ni corail ;
 *   · le corail est un accent : un aplat pour les boutons d'action, une teinte
 *     assombrie (--coral-txt) partout où il est LU — #e06a56 ne donne que 3,3:1
 *     sur blanc, sous le minimum AA de 4,5:1 (169 occurrences relevées le
 *     25/07/2026, voir memory defauts-accessibilite-corail-reseau) ;
 *   · aucune animation d'espacement des lettres au survol : elle décalait la
 *     mise en page à chaque passage de souris.
 */

:root {
  /* Jetons repris de ronde-3/base.css + bandeaux.css. Redéfinir les variables
     de site.css fait basculer d'un coup tout ce qui les consomme. */
  --coral-txt: #b8452f;
  --coral-soft: #fbeae4;
  --coral-wash: #f7ded5;
  --ink: #1f2c40;
  --ink-2: #4a5a71;
  --line: #e3e9f0;
  --panel: #e4edf7;

  --coral-light: var(--coral-soft);
  --blue-pale: var(--panel);
  --gray: #dfe7f0;
  --gray-light: #f6f8fb;

  --radius-pill: 999px;
  --radius-card: 22px;
  --radius-s: 14px;
  --shadow-card: 0 2px 10px rgba(36, 57, 88, 0.07), 0 12px 32px -18px rgba(36, 57, 88, 0.28);
  --shadow-high: 0 4px 18px rgba(36, 57, 88, 0.1), 0 26px 60px -30px rgba(36, 57, 88, 0.4);
  --max-width: 1180px;
  --text: var(--ink);

  /* Toutes les photos du site ont été délavées du temps de Divi pour servir de
     fond derrière du texte : dans hero/accueil.webp tout est entre 0,88 et 0,98
     de luminance, et l'image ne montre plus rien. Ce filtre lui rend son étendue
     tonale. L'ORDRE EST ESSENTIEL : brightness d'abord pour ramener les valeurs
     vers le milieu, contrast ensuite pour les étaler autour de 0,5. Dans l'autre
     sens, contrast écrête tout en blanc et l'image finit gris uni (8 réglages
     comparés le 30/07/2026). Reste un pansement : le vrai correctif est une
     photo d'accueil achetée. */
  --photo: brightness(0.62) contrast(2.8) saturate(1.6);
}

/* --- Socle --------------------------------------------------------------- */

body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 900;
  /* Valeur fixe en px, pas en em (3/08/2026) : en em, le h1 du hero (jusqu'à
     2.3rem) se resserre visiblement plus que les h2/h3 plus petits — même
     ratio, mais plus de pixels à absorber. Une valeur fixe donne un espacement
     identique quelle que soit la taille, ce qui est le but recherché. */
  letter-spacing: -0.4px;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: clamp(1.7rem, 1.15rem + 1.4vw, 2.3rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem); }
h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.28rem); font-weight: 700; }

/* Les fiches partenaires gardent leur H1 de 20px (parité prod, et_pb_text_0) —
   la graisse 900 des titres ne s'y applique pas. */
.praticien-title { font-size: 1.25rem; font-weight: 600; }

a { color: var(--coral-txt); }

strong { color: var(--navy); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--coral-txt);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Sur le marine du pied de page, ce même corail tombe à 2,18:1 — un indicateur
   de focus doit tenir 3:1 (item 128, 28/08/2026). Le blanc y donne 12,6:1. */
.site-footer :where(a, button, [tabindex]):focus-visible {
  outline-color: #fff;
}

/* --- Le bandeau ---------------------------------------------------------- */
/* Le titre de section EST le bandeau : panneau bleu pâle arrondi + filet corail
   en ::after. Aucun gabarit à modifier — le motif arrive sur les 349 pages du
   site par la seule feuille de style.
   Deux exclusions, et elles comptent autant que la règle :
     · .theme-article — les H2 y sont les titres courants d'un texte long
       (mentions légales, guides, ateliers) ; en panneaux, une page de 3 000 mots
       devient un escalier de bandeaux illisible ;
     · .praticien-title — le H1 des fiches partenaires reste à 20 px, conformité
       à la production exigée par David le 21/07/2026 (aucune fiche sur com,
       mais cette feuille servira aux spokes).
   Panneau intensifié (Guillemette, 14/08/2026, essai parti de la page
   Tristesse & Deuil puis généralisé à toutes les pages) : #dae7f5 au lieu de
   var(--panel) (#e4edf7), en dur pour ne pas aussi assombrir les autres
   usages de --panel (survol du sous-menu, --blue-pale) qui n'ont pas été
   revus dans cet essai. */
.section > .container:not(.theme-article) > :is(h1:not(.praticien-title), h2),
.section > .container > :is(.faq, .testimonials, .topic-families) > h2,
.content-card > :is(.faq, .testimonials) > h2 {
  background: #dae7f5;
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 36px);
  margin: 0 0 clamp(24px, 3vw, 36px);
  color: var(--navy);
}

.section > .container:not(.theme-article) > :is(h1:not(.praticien-title), h2)::after,
.section > .container > :is(.faq, .testimonials, .topic-families) > h2::after,
.content-card > :is(.faq, .testimonials) > h2::after {
  content: '';
  display: block;
  width: 84px;
  height: 5px;
  border-radius: 999px;
  background: var(--coral);
  margin-top: 14px;
}

/* Même bandeau, en classe explicite (Guillemette, 10/08/2026) : pour un titre
   qui n'est ni un h1/h2 direct enfant de .container ni dans .faq/.testimonials
   (ex. un h3 posé dans une colonne de grille) mais qui doit quand même porter
   le panneau bleu clair + le tiret corail. */
.bandeau-titre {
  background: #dae7f5;
  border-radius: var(--radius-card);
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 36px);
  margin: 0 0 clamp(24px, 3vw, 36px);
  color: var(--navy);
  /* Même taille ET même graisse que les h2 (redéfinis plus haut dans ce
     fichier, pas ceux de site.css) — sans les deux un h3 comme « Comment ça
     se passe » (10/08/2026) reste à la taille/graisse h3 (700, plus léger
     que les 900 des h1/h2/h3 stylés en bandeau). */
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem);
  font-weight: 900;
}

/* Variante orange (Guillemette, 11/08/2026, bandeau « Comment l'Anxiété se
   manifeste » — bandeau au fond orange, pas le panneau bleu par défaut).
   Intensifiée le 14/08/2026 en même temps que le panneau bleu ci-dessus
   (#f9e1d4 au lieu de var(--coral-soft), en dur pour la même raison). */
.bandeau-titre--orange { background: #f9e1d4; }

.bandeau-titre::after {
  content: '';
  display: block;
  width: 84px;
  height: 5px;
  border-radius: 999px;
  background: var(--coral);
  margin-top: 14px;
}

/* Le paragraphe d'intro qui suit un bandeau : mesure de lecture, encre adoucie.
   Pas dans une grille — le paragraphe y est une colonne, pas une introduction. */
.section > .container:not(.grid) > p {
  max-width: 68ch;
  color: var(--ink-2);
}

/* --- Sections ------------------------------------------------------------ */
/* Le corail ne fait plus d'aplat : il ne reste qu'en accent. Les fonds
   alternent blanc / gris-bleu très pâle, c'est le bandeau qui porte la couleur. */

.section { padding-block: clamp(46px, 6vw, 82px); }

/* Fonds bleus intensifiés (Guillemette, 14/08/2026, essai parti de la page
   Tristesse & Deuil puis généralisé à toutes les pages) : même léger
   dégradé que le panneau du hero (.hero__panneau, plus haut dans ce
   fichier) plutôt que l'aplat var(--gray-light) d'origine. .section--coral
   suit .section--blue : les deux rendent le même gris-bleu (voir la note
   « 4 classes de fond à 2 couleurs » dans CLAUDE.md). */
.section--blue,
.section--coral { background: linear-gradient(140deg, #e9f1f9, #f6fafd 62%); }
.section--tinted { background: var(--bg); }
.section--coral-light { background: var(--coral-soft); }
.section--blue-fade {
  background-color: #eef4fb;
  background-image: none;
}

.section--coral { color: var(--ink); }

.section--coral h1,
.section--coral h2,
.section--coral h3 { color: var(--navy); }

.section--coral p { color: var(--ink-2); }

.section--coral a {
  color: var(--coral-txt);
  text-decoration: none;
}

.section--coral .btn {
  border-color: var(--blue-light);
  color: var(--navy);
}

.section--coral .btn-solid {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

/* --- Boutons ------------------------------------------------------------- */

.btn {
  border-width: 2px;
  border-color: var(--blue-light);
  color: var(--navy);
  font-size: 16px;
  padding: 13px 24px;
  justify-content: center;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease,
    box-shadow 160ms ease;
}

.btn:hover {
  letter-spacing: normal;
  transform: translateY(-1px);
  border-color: var(--navy);
  background: rgba(36, 57, 88, 0.04);
}

.btn:active { transform: translateY(0); }

.btn-solid {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(224, 106, 86, 0.9);
}

.btn-solid:hover {
  background: #cf5b47;
  border-color: #cf5b47;
}

.btn-navy {
  border-color: var(--navy);
  color: var(--navy);
  background: transparent;
}

.btn-navy:hover { background: rgba(36, 57, 88, 0.06); }

/* Bouton WhatsApp du hero (Guillemette, 26/08/2026, revu le même jour — fond
   blanc, texte/icône vert) : le .btn de la couche bandeaux ci-dessus
   (chargée après site.css) écrasait déjà border-color et color de
   .btn-whatsapp — même mécanique que .btn-solid/.btn-navy juste au-dessus,
   qui ont chacun leur propre redéfinition ici pour la même raison. */
.btn-whatsapp {
  background: #fff;
  border-color: #128c7e;
  color: #128c7e;
}

.btn-whatsapp:hover {
  background: #f0faf8;
  border-color: #128c7e;
}

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

/* Pas de backdrop-filter ici, contrairement à la maquette : un filtre crée un
   bloc conteneur pour ses descendants en position:fixed, et le tiroir de menu
   mobile (.nav, `position:fixed`, à l'époque glissé par translateX) se retrouvait
   ancré dans l'en-tête au lieu de la fenêtre — 247 px de défilement horizontal
   parasite sur un écran de 390 px (mesuré). Le flou n'apportait de toute façon
   rien de perceptible sous un blanc à 92 %. */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* Le menu revenait à la ligne dès 1366 px et l'en-tête montait à 107 px — 38 px
   pris sur le premier écran, là où il n'en reste que ~640 sur un portable. */
.site-header__bar {
  min-height: 68px;
  padding-block: 8px;
  gap: 12px;
}

.site-header__logo img { height: 42px; }

.nav { gap: 6px; }

.nav__list { gap: 2px; }

.nav__link {
  white-space: nowrap;
  padding: 10px 11px;
  font-size: 15px;
}

.nav__submenu .nav__link { white-space: normal; }

/* « Prendre RV » se cassait en deux lignes dans l'en-tête à toutes les largeurs :
   dans un conteneur flex, un bouton se laisse comprimer jusqu'à sa largeur de
   contenu minimale. C'est lui qui donnait sa hauteur à la barre. */
.nav > .btn,
.nav__lang {
  flex: none;
  white-space: nowrap;
}

.nav__link:hover,
.nav__link:focus-visible { color: var(--coral-txt); }

.nav__link.is-active { color: var(--coral-txt); }

.nav__lang { border-left-color: var(--line); }

.nav__lang-link:hover,
.nav__lang-link:focus-visible { color: var(--coral-txt); }

.nav__submenu {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-high);
}

.nav__submenu .nav__link { border-radius: 10px; }

.nav__submenu .nav__link:hover { background: var(--panel); }

.nav-toggle { border-color: var(--line); border-radius: 12px; }

/* Dernière bande où le menu complet est encore affiché (le tiroir mobile prend
   le relais à 900 px) : 6 entrées + le sélecteur de langue + le bouton RV
   demandaient 18 px de plus que la fenêtre à 901 px. */
@media (min-width: 901px) and (max-width: 1000px) {
  .site-header__logo img { height: 36px; }
  .nav { gap: 2px; }
  .nav__link { padding: 10px 7px; font-size: 14px; }
}

/* --- Hero ---------------------------------------------------------------- */
/* Hero courant (pages thématiques, contact, FAQ, articles…) : la photo tramée
   de production est conservée, mais posée dans un panneau arrondi inséré dans la
   page plutôt qu'en pleine largeur à angles vifs — « rondeurs partout ». */

.hero {
  width: calc(100% - 2 * clamp(10px, 1.6vw, 20px));
  max-width: var(--max-width);
  margin: clamp(14px, 1.6vw, 24px) auto 0;
  border: 1px solid #dbe7f3;
  border-radius: 34px;
  overflow: hidden;
  padding-block: clamp(2.4rem, 2rem + 2.4vw, 4.2rem);
  padding-inline: clamp(0px, 1.4vw, 22px);
}

.hero h1 { margin-bottom: 0.35em; }

.hero__inner p { color: var(--ink-2); }

/* Hero de l'accueil : panneau bleu + médaillon rond.
   Le médaillon est PLAFONNÉ en pixels au lieu de suivre sa colonne. Sans ce
   plafond, c'est lui qui dicte la hauteur du panneau (410 px de rond pour 313 px
   de texte à côté) et le hero ne tient plus sur un portable 1366×768, où il
   reste ~640 px utiles après la barre d'adresse. */
.hero--panneau {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  width: auto;
  max-width: none;
  margin: 0;
  padding-block: clamp(20px, 2.6vw, 32px) 8px;
  padding-inline: 0;
  text-align: left;
}

.hero__panneau {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
  gap: clamp(22px, 2.6vw, 38px);
  align-items: center;
  background: linear-gradient(140deg, #e9f1f9, #f6fafd 62%);
  border: 1px solid #dbe7f3;
  border-radius: 34px;
  padding: clamp(22px, 2.8vw, 38px);
  /* Espace sous l'encadré bleu (Guillemette, 11/08/2026) : .hero--panneau ne
     porte que 8px de padding-block en bas, la bande de contenu suivante
     arrivait presque collée au panneau. */
  margin-bottom: clamp(20px, 3vw, 32px);
}

/* Le filet corail à la verticale du titre : le rappel commence dès le hero. */
.hero__mots {
  position: relative;
  padding-left: 22px;
}

.hero__mots::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 5px;
  border-radius: 999px;
  background: var(--coral);
}

.hero__sous {
  font-size: clamp(1rem, 0.94rem + 0.42vw, 1.18rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--coral-txt);
  margin: 0 0 0.6em;
}

.hero__intro {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.58;
  max-width: 62ch;
  margin-bottom: 0;
}

.hero--panneau .hero__actions {
  justify-content: flex-start;
  margin-top: 20px;
}

.hero__medaillon {
  margin: 0 0 0 auto;
  max-width: clamp(210px, 24vw, 330px);
}

.hero__medaillon img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 50%;
  border: 9px solid #fff;
  box-shadow: 0 22px 48px -28px rgba(36, 57, 88, 0.65);
  filter: var(--photo);
}

/* Photo déjà tramée blanc, fournie prête à publier (pilote Stress & Anxiété,
   3/08/2026) : --photo est un correctif pour les photos délavées de l'ère Divi
   (il assombrit et sature) — sur une photo déjà pâle, il ferait l'inverse de
   l'effet voulu. */
.hero__medaillon--brut img {
  filter: none;
}

@media (max-width: 860px) {
  .hero__panneau { grid-template-columns: minmax(0, 1fr); }
  .hero__medaillon { order: -1; margin-inline: 0; max-width: 230px; }
}

/* Sur téléphone le médaillon passe AVANT le titre : chaque pixel qu'il prend est
   un pixel de moins pour le message. Mesuré : 170 px au lieu de 230 ramène le
   hero de 1083 à ~1020 px sur un écran de 390 px. */
@media (max-width: 560px) {
  .hero__medaillon { max-width: 170px; }
}

/* Liens de région : pastilles blanches à filet, pas des boutons d'action.
   Elles se replient librement — site.css leur imposait une seule ligne jusqu'à
   900 px, ce qui faisait déborder la page de 2 px juste au-dessus de ce seuil.
   Sous un panneau aligné à gauche, un repli est de toute façon naturel. */
.hero__actions--regions {
  margin-top: 18px;
  gap: 9px;
  flex-wrap: wrap;
}

.hero--panneau .hero__actions--regions { justify-content: flex-start; }

.hero__actions--regions .btn {
  padding: 8px 15px 8px 9px;
  font-size: 14.5px;
  border-width: 1.5px;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.82);
}

.hero__actions--regions .btn:hover {
  border-color: var(--coral);
  background: #fff;
  transform: none;
}

.hero__below { margin-top: clamp(1.2rem, 1rem + 1.2vw, 2rem); }

/* Sous le panneau, les pastilles de région portent déjà leur propre marge : la
   marge de .hero__below s'y ajoutait et coûtait 32 px de haut de page. Mesuré
   sur un portable 1366×768, où il ne reste que ~640 px utiles : sans ça le bas
   du hero passait sous la ligne de flottaison et rien n'indiquait qu'il y a une
   page en dessous. */
.hero--panneau .hero__below { margin-top: 0; }

.hero--panneau .hero__below img { margin-inline: 0; }

/* Les spokes posent le badge de satisfaction sous le panneau (com y met ses
   pastilles de région). Centré sous un panneau aligné à gauche, il flottait sans
   attache — il se cale sur la même colonne que le titre. */
.hero--panneau .hero__below .satisfaction-badge { margin-inline: 0; }

.flag { border-radius: 3px; }

/* --- Cartes et contenu --------------------------------------------------- */

.card,
.content-card {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: none;
}

.content-card + .content-card { margin-top: clamp(22px, 3vw, 36px); }

.theme-article { max-width: 72ch; }

/* Bande sans barre latérale (Guillemette, 11/08/2026, bandeau « Comment
   l'anxiété se manifeste ») : le texte reprend toute la largeur laissée
   libre par .theme-layout--full plutôt que de rester bridé à la mesure de
   lecture d'un texte à barre latérale. Doit vivre ici (après la règle
   ci-dessus, même spécificité) pour l'emporter dans la cascade. */
.theme-article.theme-article--full { max-width: none; }

/* Boutons de contact d'une page d'atelier, posés SOUS la carte de présentation
   de l'animatrice et non dedans (Guillemette, 22/09/2026 : « sors les boutons
   de la présentation de Sanae »). Ils se retrouvent donc sur le fond bleu de la
   bande, d'où le fond blanc explicite : .btn est transparent par défaut, et
   laisserait voir le bleu au lieu du blanc demandé. Le texte et le cerclage
   corail viennent de .btn (site.css), le vert de .btn-whatsapp — rien n'est
   redéfini ici. */
.atelier-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 24px 0 0;
}

/* Boutons de contact corail — UN SEUL traitement pour les deux endroits qui en
   portent (Guillemette, 22/09/2026 : « reprends les mêmes styles de boutons que
   dans les pages ateliers ») : la rangée sous la carte de l'animatrice
   (.atelier-contacts) et les pastilles du hero de la page Contact de ma
   (.hero__actions--coral). Deux blocs jumeaux auraient divergé au premier
   ajustement, ce qui est exactement ce qui venait d'arriver.

   Les trois premières déclarations RÉTABLISSENT les valeurs de .btn : les
   pastilles du hero héritent de .hero__actions--regions, qui les réduit
   (8px 15px 8px 9px, 14.5px, bordure 1.5px) pour la rangée serrée du hub. Sans
   ça, « mêmes styles » n'aurait porté que sur la couleur. Même spécificité (0,2,0)
   que --regions, donc c'est la position dans le fichier qui tranche : ce bloc doit
   rester APRÈS celui de --regions (l. ~500).

   'white-space: normal' contre le 'nowrap' de --regions (site.css), et
   'overflow-wrap: anywhere' parce qu'une adresse de courriel n'a aucun point de
   coupure : sans lui le bouton garde une largeur min-content de ~345px et sort de
   son conteneur sous 400px — `break-word` ne suffirait pas, seul `anywhere`
   abaisse cette largeur minimale (même correctif que .theme-article, plus haut).

   Fond blanc explicite : .btn est transparent, et sur la bande bleue des ateliers
   il laisserait voir le bleu. */
.atelier-contacts .btn,
.hero__actions--coral .btn {
  padding: 13px 24px;
  font-size: 16px;
  border-width: 2px;
  background: #fff;
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

/* Corail pour le texte ET le cerclage (Guillemette : « texte rose sur fond blanc,
   et tour rose »). Il faut le dire ici : la couche bandeaux redéfinit .btn plus
   haut en marine cerclé --blue-light, et c'est elle qui l'emporte sur le .btn
   corail de site.css — d'où des boutons bleus là où on attendait du corail.
   --coral-txt (#b8452f) et non --coral (#e06a56) des deux côtés : le libellé est
   du texte lu, donc soumis à la règle AA du projet, et un cerclage d'un autre
   corail que son texte se verrait.
   :not(.btn-whatsapp) est nécessaire, pas décoratif : le sélecteur de gauche
   (0,2,0) l'emporterait sur .btn-whatsapp (0,1,0) et repeindrait en corail le
   seul bouton qui doit rester vert. */
.atelier-contacts .btn:not(.btn-whatsapp),
.hero__actions--coral .btn:not(.btn-whatsapp) {
  color: var(--coral-txt);
  border-color: var(--coral-txt);
}

/* (0,3,0) : l'emporte aussi sur .hero__actions--regions .btn:hover, qui vire
   sinon les pastilles au corail clair --coral sur fond blanc. */
.atelier-contacts .btn:not(.btn-whatsapp):hover,
.hero__actions--coral .btn:not(.btn-whatsapp):hover {
  border-color: var(--coral-txt);
  background: var(--coral-light);
}

/* Le vert de WhatsApp, redit pour le hero seulement : .btn-whatsapp (0,1,0) perd
   contre .hero__actions--regions .btn (0,2,0), qui lui donnait un cerclage gris
   --line. Sous .atelier-contacts le problème ne se pose pas, --regions n'y est
   pas — d'où un sélecteur seul plutôt qu'ajouté aux listes ci-dessus, où il
   n'aurait rien fait. */
.hero__actions--coral .btn-whatsapp,
.hero__actions--coral .btn-whatsapp:hover {
  color: #128c7e;
  border-color: #128c7e;
}

.hero__actions--coral .btn-whatsapp:hover {
  background: #f0faf8;
}

/* Socle Loi 21 du site, en tête de la note de bas de page : sur sa propre ligne,
   avec un peu d'air avant la note propre à la page (Guillemette, 22/09/2026 :
   « vas à la ligne et mets un petit espace après psychothérapie »). Un bloc plutôt
   qu'un <br> : l'espacement se règle ici, et les deux textes restent échappés
   séparément côté gabarit. */
.theme-article__disclaimer-socle {
  display: block;
  margin-bottom: 0.5em;
}

.theme-article__intro { color: var(--ink-2); }

.theme-article--blog h2 { color: var(--coral-txt); }

/* Sauf quand ce H2 est le bandeau-titre d'une bande (articles en bandeaux,
   18/08/2026) : le panneau garde la couleur de sa bande — bleu sur bleu, orange
   sur orange — mais son TEXTE reste marine, comme sur les pages thématiques
   (David : « garder le bandeau dans la bonne couleur, mais c'est le texte qui
   doit toujours être bleu »). Sans cette règle, la ligne ci-dessus l'emporte sur
   le `color` de .bandeau-titre et sort un titre corail dans le panneau. */
.theme-article--blog h2.bandeau-titre { color: var(--navy); }

/* H3 en teinte corail lisible (Guillemette, 11/08/2026, page Anxiété — « essaie
   de mettre les H3 en rose pour mieux structurer le texte ») : .theme-article
   exclut déjà les H2 du bandeau panneau (texte long, cf. règle plus haut), les
   H3 y restent donc en texte simple — la couleur seule les distingue des
   paragraphes sans repasser par un panneau. Passé à --coral (25/08/2026,
   Guillemette : « trop rouge, mets le orange de la charte ») — compromis de
   lisibilité assumé, --coral-txt ne descend plus AA sur fond clair pour ce
   texte. Sur les 4 sites (règle CSS partagée). */
.theme-article h3 { color: var(--coral); }

/* Paragraphe encadré de 2 filets orange, au fil du texte (Guillemette,
   11/08/2026, docx : « Disclaimer (entre 2 barres orange) ») — même esprit que
   le disclaimer de fin de page (filet + espace), mais inline et sans les
   grandes marges d'une note de bas de page. */
.theme-article__callout--barres {
  border-top: 2px solid var(--coral-wash);
  border-bottom: 2px solid var(--coral-wash);
  padding-block: 16px;
  margin-block: 24px;
  font-style: italic;
}

.theme-article__callout--barres p { margin: 0; }

/* Plusieurs vidéos côte à côte au-dessus d'un bandeau (Guillemette,
   18/08/2026, performance-artistique.php) : élargit le 50% centré d'une
   vidéo seule (.theme-article__video-banner, site.css) à 80% sur desktop —
   le grid--3 intérieur (theme.php) affiche les vidéos côte à côte sans
   colonne vide, quel que soit leur nombre. */
.theme-article__video-banner--multi {
  max-width: 80%;
}

@media (max-width: 700px) {
  .theme-article__video-banner--multi { max-width: 100%; }
}

/* Fond tramé + ombre portée sur un tableau précis (Guillemette, 12/08/2026, page
   Hub Stress & Anxiété : « pour que le tableau soit plus impactant ») —
   modificateur du wrapper, jamais sur .theme-article__table-wrap directement :
   cette classe habille aussi les tableaux markdown du blogue (core/lib/markdown.php),
   qui doivent garder leur rendu neutre. */
.theme-article__table-wrap--tramee {
  background: var(--gray-light);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-card);
  padding: 12px;
}

.theme-article__table-wrap--tramee .theme-article__table th,
.theme-article__table-wrap--tramee .theme-article__table td {
  border-color: var(--line);
}

.theme-article__toc {
  background: var(--gray-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}

/* Survol : site.css passe le lien en --coral (#e06a56), soit 3.10:1 sur le fond
   --gray-light de l'encadré — survoler rendait le lien MOINS lisible qu'au repos
   (--navy, 10.96:1). --coral-txt donne 5.02:1. Concerne toutes les pages
   thématiques et tous les articles en bandeaux, qui portent tous ce sommaire. */
.theme-article__toc a:hover { color: var(--coral-txt); }

/* Un filet coloré épais sur un encadré est de la décoration : la teinte de fond
   suffit à le distinguer, et le corail reste un accent. */
.theme-article__callout {
  background: var(--coral-soft);
  border: 1px solid var(--coral-wash);
  border-left: 0;
  border-radius: var(--radius-s);
}

.theme-article__img-row-img { border-radius: var(--radius-s); }

/* Photo à gauche du carrousel, sous le titre « Ce qu'en disent nos clients »
   (Guillemette, 17/08/2026, page Sommeil) : même proportion 1/4-3/4 et même
   arrondi que .theme-article__img-row (site.css), appliqués ici à un carrousel
   plutôt qu'à un paragraphe. Clé optionnelle 'testimonials_image' du thème —
   absente, la bande reste celle d'avant, octet pour octet. */
.theme-testimonials__row {
  display: flex;
  gap: 1.5em;
  /* stretch (Guillemette, 1/09/2026) : la photo remplit la même hauteur
     que les cartes de verbatims au lieu de rester un petit carré aligné
     en haut — align-self:center la ramène à sa taille naturelle sur
     mobile, où la rangée passe en colonne (media query plus bas). */
  align-items: stretch;
}

.theme-testimonials__img {
  /* Toujours plus petite que les cartes malgré align-items:stretch
     (Guillemette, 1/09/2026, capture d'écran à l'appui) : les attributs
     width/height="…" de la balise <img> posent un ratio intrinsèque
     implicite que les navigateurs font passer AVANT le stretch flex pour
     un élément remplacé — même sans aucune hauteur CSS posée dessus,
     l'image restait carrée à la largeur de 200px. aspect-ratio:auto
     annule ce ratio implicite ; height:100% peut alors s'appliquer
     (résolu contre la hauteur déjà étirée par le flex, pas contre la
     hauteur intrinsèque du conteneur — les deux réglages sont
     nécessaires ensemble, chacun seul avait échoué). */
  flex: 0 0 25%;
  max-width: 200px;
  aspect-ratio: auto;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* 'testimonials_content' (accueil.php, 1/09/2026 : « mets le badge de
   satisfaction en format carré, il joue le même rôle que les photos sur les
   autres pages ») — même colonne que .theme-testimonials__img, mais carrée
   plutôt qu'étirée à la hauteur des cartes : le badge a son propre contenu
   fixe (étoiles, %, légende), l'étirer comme une photo le déformerait. */
.theme-testimonials__img--content {
  aspect-ratio: 1 / 1;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-testimonials__img--content .satisfaction-badge {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Le carré est plus étroit que le contexte habituel du badge (sidebar,
   bandeau pleine largeur) : « SATISFACTION : » et « 97 % » ne tiennent plus
   sur la même ligne sans casser au milieu du nombre (Guillemette, 1/09/2026 :
   « va à la ligne pour que 97% soit sur une même ligne, centré »). Le
   nombre passe en bloc sur sa propre ligne — centré par le text-align du
   badge (site.css), rien de plus à poser ici. Sélecteur limité à
   __headline : le « 87 % » de __recommandation (.stat-num--inline) reste
   inline avec « recommanderaient », lui aussi resserré (règle suivante).
   Sans ce filtre, les deux nombres partagent la même classe et se
   retrouvaient tous les deux isolés sur leur ligne. */
.theme-testimonials__img--content .satisfaction-badge__headline .satisfaction-badge__stat-num {
  display: block;
}

/* Idem pour la ligne « 87 % recommanderaient TRÈS CERTAINEMENT » (Guillemette,
   1/09/2026 : « laisse 87% en début de ligne avec recommanderaient et va à la
   ligne pour TRÈS CERTAINEMENT ») — seul le <strong> (TRÈS CERTAINEMENT, posé
   en dur dans sidebar.satisfaction_recommandation_text) passe en bloc ; le
   nombre et « recommanderaient » restent sur la même ligne, non touchés. */
.theme-testimonials__img--content .satisfaction-badge__recommandation strong {
  display: block;
}

.theme-testimonials__body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 640px) {
  /* max-width:100% en garde-fou (Guillemette, 1/09/2026) sur les 3 niveaux
     que traverse ce carrousel avant d'atteindre .container — vérifié par
     getComputedStyle() sur une page isolée que la chaîne .theme-testimonials__body
     → .carousel → .carousel__track calcule déjà correctement (container
     504px → carousel 464px → track 388px, aucun débordement mesuré) ;
     gardé quand même comme filet, sans incidence si tout est déjà sain. */
  .theme-testimonials__row { flex-direction: column; max-width: 100%; }
  .theme-testimonials__body { width: 100%; }
  .carousel { max-width: 100%; }
  .carousel__track { max-width: 100%; }
  /* flex:0 0 25% et height:100% (réglages desktop juste au-dessus) visent
     le stretch en ligne (cross-axis vertical) — en colonne, le même
     flex-basis s'appliquerait à la hauteur (axe principal devenu vertical)
     au lieu de la largeur : remis à leurs valeurs neutres par précaution. */
  .theme-testimonials__img {
    flex: 0 0 auto;
    max-width: 220px;
    height: auto;
    aspect-ratio: 1 / 1;
    align-self: center;
  }
}

.theme-article__auteur { border-top-color: var(--line); }

.theme-article__table th,
.theme-article__table td { border-color: var(--line); }

.theme-article__disclaimer { border-top-color: var(--line); }

/* Le gris du bloc « photo manquante » reste #d9d9d9 : c'est un repère de travail
   fixé dans CLAUDE.md, pas une valeur de la direction visuelle — il doit rester
   visible pour qu'on remarque la photo à fournir. */
.img-placeholder {
  border-radius: var(--radius-s);
  background: #d9d9d9;
}

/* --- Carrousel ----------------------------------------------------------- */
/* Chaque application devient une tuile blanche arrondie. Les visuels sont des
   pictogrammes carrés de 300×300, pas des photos : `contain` dans 88 px les
   laisse entiers, là où un `cover` en cadre 4/3 rognait le haut et le bas du
   cercle (constaté par David le 30/07/2026). */

/* Les flèches prennent leur propre gouttière au lieu de flotter au-dessus de la
   piste : en tuiles blanches opaques (et non plus en chevrons transparents),
   elles masquaient la première et la dernière carte dès que le carrousel avait
   défilé d'un cran. */
.carousel { padding-inline: 50px; }

.carousel__track {
  gap: 16px;
  padding-inline: 0;
  padding-block: 6px 16px;
}

@media (max-width: 600px) {
  .carousel { padding-inline: 38px; }
  .carousel__arrow { width: 34px; height: 34px; font-size: 17px; }
}

.carousel__item {
  width: min(228px, 74vw);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.carousel__item:hover {
  transform: translateY(-4px);
  border-color: var(--blue-light);
  box-shadow: var(--shadow-card);
}

.carousel__item--wide {
  width: min(340px, 85vw);
  padding: 22px 24px;
}

.carousel__item-link img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  margin: 22px auto 2px;
}

.carousel__item-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 16.5px;
  line-height: 1.25;
  margin-top: 0.7em;
  padding-inline: 14px;
}

.carousel__item-subtitle {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0.35em 0 0.9em;
  padding-inline: 14px;
}

.carousel__item-cta { margin-bottom: 20px; }

.section--coral .carousel__item-link,
.section--coral .carousel__item-subtitle { color: var(--ink-2); }

.section--coral .carousel__item-title { color: var(--navy); }

.carousel__arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--blue-light);
  background: #fff;
  font-size: 20px;
  display: grid;
  place-items: center;
}

.carousel__arrow:hover {
  border-color: var(--coral);
  color: var(--coral-txt);
}

.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }

.section--coral .carousel__arrow { color: var(--navy); }

.carousel__dots button { background: var(--navy); }

.section--coral .carousel__dots button { background: var(--navy); }

.section--coral .carousel__dots button.is-active {
  background: var(--coral);
  opacity: 1;
}

/* --- Témoignages --------------------------------------------------------- */

.testimonial,
.testimonial--compact {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
  padding: 22px 24px;
}

/* :not(.testimonial__stars) ajouté le 4/08/2026 (COM-FR-0756) : sans lui, cette
   règle (3 classes) l'emportait sur .testimonial__stars ci-dessous (1 classe)
   et les étoiles ressortaient en --ink-2 au lieu du corail voulu — un <p> est
   un <p>, peu importe sa classe, pour le sélecteur :not(). */
.testimonial p:not(.testimonial__author):not(.testimonial__head):not(.testimonial__stars) {
  font-style: normal;
  color: var(--ink-2);
  font-size: 15.5px;
}

.testimonial__author { color: var(--navy); }

/* font-style:normal répété ici (4/08/2026) : site.css met tout <p> de
   .testimonial en italique sauf .testimonial__author — les étoiles n'étant
   pas non plus exclues là-bas, l'exclusion ajoutée juste au-dessus les a
   laissées retomber sur cette règle italique. .testimonial p.testimonial__stars
   (2 classes + 1 élément) est nécessaire pour l'emporter sur elle. */
.testimonial p.testimonial__stars {
  color: var(--coral);
  font-style: normal;
}

/* Carrousel « Ce qu'en disent nos clients » des pages thématiques (Guillemette,
   1/09/2026) — verbatims du fichier Intrants/Verbatims Clients.xlsx, remplit
   le carrousel déjà posé en fin de page (theme-bandes-fin.php, jusqu'ici
   toujours vide — « Verbatims à venir »). Carte blanche + ombre demandée
   explicitement « comme le carrousel des applications de l'accueil » — donc
   pas .card ni .testimonial, tous deux aplatis (fond var(--bg), box-shadow:
   none) par les règles réseau juste au-dessus : un style autonome, sans
   dépendre de classes déjà détournées de leur ombre d'origine sur les pages
   en bandeaux. 3 cartes par vue en desktop, 1 en mobile (calc sur la largeur
   du track, pas de largeur fixe comme .carousel__item--wide qui vise 2-3
   cartes partiellement visibles plutôt qu'un nombre entier). */
.testimonial-verbatim.carousel__item--triple {
  width: calc((100% - 32px) / 3);
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5em;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* Carrousel limité en hauteur : citation coupée à 6 lignes, signature du
   client toujours visible en dessous puisqu'elle est hors du bloc clampé
   (Guillemette, 1/09/2026). « Lire la suite » déplie sans jamais rogner le
   nom — JS (site.js) ne montre le bouton que si le texte dépasse
   réellement 6 lignes, et bascule .is-expanded pour retirer le clamp. */
.testimonial-verbatim__quote {
  font-style: italic;
  color: var(--ink-2);
  font-size: 14.5px;
  margin: 0 0 0.6em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

.testimonial-verbatim.is-expanded .testimonial-verbatim__quote {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.testimonial-verbatim__toggle {
  align-self: flex-start;
  margin: 0 0 0.8em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--coral-txt);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.testimonial-verbatim__signature {
  color: var(--navy);
  font-size: 14px;
  margin: auto 0 0;
}

@media (max-width: 600px) {
  /* 100% de la piste rendait la carte trop large, collée aux bords sur
     mobile (Guillemette, 1/09/2026). Un premier essai en 85vw (même
     convention que .carousel__item--wide ci-dessus) débordait et coupait
     la carte à droite : vw se calcule sur la largeur de l'écran, sans
     tenir compte du padding de .theme-testimonials__row/__body qui
     entoure ce carrousel-ci (contrairement aux usages existants de
     --wide, posés directement sous .container) — 90 % DE LA PISTE
     (.carousel__track, déjà réduite par ce padding) tient toujours dans
     l'écran, quel que soit l'empilement de marges autour. */
  .testimonial-verbatim.carousel__item--triple { width: 90%; }
}

/* --- Bandes orangées (Guillemette, 4-5/08/2026) : fond très pâle + bandeau
   du titre en orange léger, tiret orange. Décliné en trois temps :
     · .section--orange-essai / #temoignages-essai : essai témoignages
       (COM-FR-0533), ciblé par id — le h2 y est enfant direct de .container,
       la règle générique du bandeau (plus haut, .section > .container > h2)
       est trop spécifique (4 classes) pour qu'une simple classe l'emporte.
     · .section--orange : généralisé aux sections FAQ (COM-FR-0753,
       5/08/2026) — là le h2 est enfant de .faq, donc soit de la branche
       « .section > .container > :is(.faq,...) > h2 » (accueil, outil,
       3 classes — une simple classe l'emporte à spécificité égale, en
       arrivant après dans ce fichier), soit « .content-card > :is(.faq,...)
       > h2 » (2 classes, gabarits avec sidebar type faq.php — l'emporte
       carrément). Seules les pages où la FAQ a SA PROPRE section en
       profitent (accueil, outil, faq.php, et theme.php depuis le 5/08/2026 —
       la FAQ y avait jusque-là sa propre section mais partageait la couleur
       .section--blue ; elle est maintenant en bas de page et prend le même
       bandeau orangé que l'accueil, via la branche « .content-card >
       :is(.faq,...) > h2 » ci-dessous, gabarit avec sidebar).
     · #accueil-carousel > .container > h2 (Guillemette, 20/08/2026, COM-FR-0541,
       accueil/-en/-es partagent le même id) : même cas que temoignages-essai,
       h2 enfant direct de .container — un essai avec les classes explicites
       .bandeau-titre/.bandeau-titre--orange avait échoué (0,2,0 de
       spécificité, perdant contre la règle générique à 0,4,1) avant de
       trouver ce même ciblage par id.
   Intensifiées le 14/08/2026 (même essai que les fonds bleus plus haut) :
   dégradé de même amplitude plutôt que l'aplat #fdf5f1 / var(--coral-soft)
   d'origine. */
.section--orange-essai,
.section--orange { background: linear-gradient(140deg, #ffeee6, #fdf7f3 62%); }

#temoignages-essai > .container > h2,
#accueil-carousel > .container > h2 { background: #f9e1d4; }

#temoignages-essai > .container > h2::after,
#accueil-carousel > .container > h2::after { background: var(--coral); }

.section--orange > .container > .faq > h2,
.section--orange .content-card > .faq > h2 {
  background: #f9e1d4;
}

.section--orange > .container > .faq > h2::after,
.section--orange .content-card > .faq > h2::after {
  background: var(--coral);
}

/* --- Badge de satisfaction ----------------------------------------------- */

.satisfaction-badge {
  border-width: 2px;
  border-color: var(--coral-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0.7em 1.1em;
  max-width: 300px;
}

/* Dans le sidebar (COM-FR-0752), même largeur et même style que .booking-card
   juste au-dessus (David, 5/08/2026 — 2e passe : le premier correctif ne
   touchait que la bordure/l'ombre, l'écart de largeur restait visible).
   .satisfaction-badge garde margin:0 auto de sa règle de base (site.css) pour
   se centrer dans les contextes où il est seul (accueil) — mais un item de
   grille avec des marges auto se rétrécit à son contenu au lieu de remplir sa
   colonne (spec CSS Box Alignment : les marges auto priment sur
   justify-items:stretch), donc au lieu de remplir les 300px de
   .theme-sidebar__sticky comme .booking-card (qui n'a pas cette marge), le
   badge ne prenait que la largeur de son texte, centré dans l'espace restant.
   margin:0 + width:100% ici annulent ce rétrécissement, sans toucher au badge
   « preuve » de l'accueil (.satisfaction-badge de base ci-dessus, inchangé).
   max-width:none (Guillemette, 26/08/2026) : le max-width:300px de la règle
   de base n'était pertinent qu'en desktop, où .theme-layout limite déjà la
   colonne à 300px (donc width:100% = 300px = aucun conflit) — sous 960px,
   .theme-layout n'a plus de 2e colonne fixe et la barre latérale prend toute
   la largeur du conteneur, souvent > 300px sur un téléphone. Le badge restait
   alors plafonné à 300px pendant que .booking-card (sans max-width) remplissait
   toute la largeur : écart visible entre les cartes en mobile. */
.theme-sidebar__sticky .satisfaction-badge {
  border: 1px solid var(--line);
  box-shadow: none;
  margin: 0;
  width: 100%;
  max-width: none;
}

/* Posé seul dans une section (accueil : au-dessus des témoignages), le badge
   s'étale en bandeau de preuve plutôt qu'en vignette centrée — il n'a plus à
   tenir dans une colonne de hero ou de barre latérale. */
.section > .container > .satisfaction-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 22px;
  max-width: none;
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  padding: 18px 24px;
  text-align: left;
}

.section > .container > .satisfaction-badge > * { margin: 0; }

.section > .container > .satisfaction-badge .satisfaction-badge__stars { font-size: 1.1em; letter-spacing: 3px; }

.section > .container > .satisfaction-badge .satisfaction-badge__stats { margin: 0; gap: 22px; }

.section > .container > .satisfaction-badge .satisfaction-badge__stat-num { font-size: 2rem; }

.section > .container > .satisfaction-badge .satisfaction-badge__caption { font-size: 13px; }

/* Passé à --coral (25/08/2026, Guillemette : « mettre les chiffres en orange
   plutôt que le rouge »), même arbitrage que .theme-article h3 ci-dessus —
   compromis de lisibilité assumé. --coral (#e06a56) sur blanc ne donne que
   3.30:1 ; la variante --inline le rend à 1em (≈17px), sous le seuil « grand
   texte » de WCAG (4.5:1 requis) — --coral-txt (5.34:1) aurait été le choix
   conforme AA. */
.satisfaction-badge__stat-num { color: var(--coral); }

.satisfaction-badge__stat-label,
.satisfaction-badge__caption { color: var(--ink-2); }

.satisfaction-badge__caption { opacity: 1; }

/* Texte de lieux avant la carte des praticiens (ma/hq/fr, Guillemette,
   25/08/2026) : pleine largeur, sans bandeau blanc derrière — juste un peu
   d'air au-dessus/en dessous, pas de fond ni de bordure. */
.theme-locations-note { margin: 0 0 20px; }

/* --- FAQ ----------------------------------------------------------------- */

.faq__item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-s);
  margin-bottom: 10px;
  overflow: hidden;
}

.faq__question {
  padding: 17px 22px;
  font-size: 16.5px;
}

.faq__icon {
  color: var(--coral);
  font-weight: 900;
  font-size: 1.2em;
}

.faq__answer {
  padding: 0 22px 20px;
  color: var(--ink-2);
  max-width: 72ch;
}

/* --- Équipe -------------------------------------------------------------- */

.team-tabs__tab {
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--navy);
  padding: 10px 18px;
}

.team-tabs__tab:hover { border-color: var(--blue-light); }

.team-tabs__tab[aria-selected="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.praticien-card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px 14px;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.praticien-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue-light);
  box-shadow: var(--shadow-card);
}

.praticien-card__ville { color: var(--coral-txt); }

/* --- Carte des praticiens ------------------------------------------------ */
/* Ses styles vivent dans un <style> en ligne du partial (experiments/
   team-map-base.php), qui gagne sur cette feuille à spécificité égale — d'où
   les sélecteurs plus précis de ce bloc. */

/* L'onglet de région actif passe en marine comme les autres onglets du site :
   blanc sur corail ne donne que 3:1, et le corail garde son rôle d'accent. */
.tmap .tmap-regions button[aria-selected="true"] {
  background: var(--navy);
  border-color: var(--navy);
}

/* Fond de carte réel (core/lib/team-map-fond.php) : eau nettement plus soutenue
   que la terre — à contraste trop faible, la côte marocaine disparaissait. */
.tmap__eau { fill: #cfe0ef; }

.tmap__voisin {
  fill: #eaeef1;
  stroke: #d3d9df;
  stroke-width: 1.4;
}

.tmap__terre {
  fill: #fcfdfd;
  stroke: #9db9d3;
  stroke-width: 1.8;
}

.tmap__region {
  fill: #fcfdfd;
  stroke: #b3c9dd;
  stroke-width: 1.3;
}

/* Trait de côte repassé par-dessus les régions découpées (Québec) : la découpe
   ampute leur contour de sa moitié extérieure, la rive perdait sa ligne. */
.tmap__cote {
  fill: none;
  stroke: #9db9d3;
  stroke-width: 1.8;
}

.tmap__region.est-active {
  fill: var(--coral-wash);
  stroke: #d3907b;
  stroke-width: 1.6;
}

.tmap__pt { fill: #7b8ea3; }

.tmap__ville {
  font: 600 19px/1 var(--font);
  fill: #55677d;
}

.tmap__ville--eau {
  fill: #7b9ab5;
  font-style: italic;
  font-weight: 400;
}

/* La légende se pose SOUS le cadre, dans sa colonne : à l'intérieur elle
   recouvrait des bulles. Placement explicite plutôt qu'un div d'emballage —
   le HTML du partial reste celui que servent les spokes. */
.tmap4__split .tmap__legende {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  font: 600 13px/1.35 var(--font);
  color: var(--ink-2);
}

/* La colonne de droite couvre les deux rangées : sans ça, la rangée du cadre
   prenait la hauteur de la liste des praticiens et la légende atterrissait
   50 px plus bas, détachée de la carte qu'elle explique. */
.tmap4__split .tmap4__aside {
  grid-column: 2;
  grid-row: 1 / span 2;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
}

/* Bulles plafonnées : la taille dit encore la densité, mais un « 7 » à 82 px
   avalait l'étiquette de la zone voisine sur le cadre du Québec, où Laval,
   Montréal et la Montérégie se touchent presque. */
.tmap .tmap4__bulle {
  width: min(var(--d), 52px);
  height: min(var(--d), 52px);
}

.tmap .tmap4__n { font-size: 16px; }

.tmap .tmap4__nom {
  font-size: 11.5px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  padding: 3px 8px;
}

@media (max-width: 900px) {
  .tmap4__split .tmap__legende,
  .tmap4__split .tmap4__aside {
    grid-column: 1;
    grid-row: auto;
  }
}

.tmap__pastille {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  vertical-align: -2px;
  margin-right: 7px;
  background: #fcfdfd;
  box-shadow: 0 0 0 1.5px #b3c9dd;
}

.tmap__pastille--active {
  background: var(--coral-wash);
  box-shadow: 0 0 0 1.5px #d3907b;
}

.tmap__pastille--plein {
  border-radius: 50%;
  background: var(--navy);
  box-shadow: none;
}

/* Pastilles de praticien de la colonne de droite : même galet que la maquette
   (rond à gauche pour la photo, arrondi doux à droite pour le texte). */
.tmap .tmap4__liste .tmap-item {
  border-radius: 999px var(--radius-s) var(--radius-s) 999px;
  border: 1.5px solid var(--line);
}

.tmap .tmap4__liste .tmap-item:hover,
.tmap .tmap4__liste .tmap-item:focus-visible {
  border-color: var(--coral);
  background: var(--coral-soft);
}

.praticien-header img { border-radius: 50%; }

.praticien-header__tagline { color: var(--coral-txt); }

.praticien-summary__tag::before { color: var(--coral); }

.praticien-credential__note { color: var(--coral-txt); }

/* Fiche partenaire « bandeaux » : corail lu en --coral-txt, filets en --line. */
a.fiche-service__nom:hover { color: var(--coral-txt); }

.fiche-chip { border-color: var(--line); }

/* --- Blogue -------------------------------------------------------------- */

.blog-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding-bottom: 18px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-light);
  box-shadow: var(--shadow-card);
}

.blog-card__img { border-radius: 0; }

.blog-card__title {
  padding: 0 18px;
  color: var(--navy);
}

.blog-card p:not(.blog-card__title) {
  padding: 0 18px;
  color: var(--ink-2);
  font-size: 15px;
}

.blog-pagination a:hover { color: var(--coral-txt); }

.blog-pagination span[aria-current] { border-radius: var(--radius-pill); }

/* --- Barre latérale et prise de RV --------------------------------------- */

.booking-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.booking-card__go,
.booking-card__tel { box-shadow: 0 6px 18px -10px rgba(224, 106, 86, 0.9); }

.theme-sidebar__network-links,
.theme-sidebar__assurances,
.theme-sidebar__social { border-top-color: var(--line); }

.theme-sidebar__contacts a,
.theme-sidebar__network-links a { color: var(--navy); }

.theme-sidebar__tarifs-note { color: var(--ink-2); opacity: 1; }

.theme-sidebar__social-icon:hover { background: var(--coral); }

.region-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.region-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue-light);
  box-shadow: var(--shadow-card);
  color: var(--coral-txt);
}

.region-card__desc { color: var(--ink-2); }

/* --- Vidéos -------------------------------------------------------------- */

.video-embed { border-radius: var(--radius-card); }

.video-embed__play { background: linear-gradient(180deg, rgba(36, 57, 88, 0) 40%, rgba(36, 57, 88, 0.5)); }

.video-embed__play-icon {
  width: 62px;
  height: 62px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--coral);
  font-size: 22px;
  box-shadow: 0 8px 26px -8px rgba(0, 0, 0, 0.5);
}

/* Vignettes dont le titre est écrit DANS l'image (page FAQ) : le bouton play,
   centré, recouvrait la question — David, 1/09/2026, « horrible ». Pour ce bloc
   seulement il passe dans un coin et rétrécit ; ailleurs les vignettes sont des
   photos, où le centre reste le bon endroit. Haut à droite et non bas à droite,
   seul coin libre des sept vignettes : la pastille « ? » tient le coin haut
   gauche et le logo la bande du bas. Le voile s'éclaircit aussi — il servait à
   détacher un bouton central, plus à rien une fois le bouton dans un coin, et il
   grisait le texte. */
.video-grid--titree { margin-bottom: clamp(24px, 3vw, 36px); }

.video-grid--titree .video-embed__play {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px;
  background: rgba(36, 57, 88, 0.12);
}

.video-grid--titree .video-embed__play-icon {
  width: 44px;
  height: 44px;
  font-size: 16px;
}

/* --- Thématiques --------------------------------------------------------- */

.topic-families__group a:hover { color: var(--coral-txt); }

.topic-families__group span.is-soon { color: var(--ink-2); opacity: 1; }

/* Le fil d'Ariane est émis sans .container (il se place juste après <main>) :
   il collait donc au bord gauche de la fenêtre. Même géométrie que .container,
   pour qu'il s'aligne sur le hero et les sections en dessous. */
.breadcrumb {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 16px 20px 0;
  color: var(--ink-2);
  opacity: 1;
}

.breadcrumb a:hover { color: var(--coral-txt); }

/* --- Formulaires --------------------------------------------------------- */

.contact-form__row input[type="text"],
.contact-form__row input[type="email"],
.contact-form__row input[type="tel"],
.contact-form__row select,
.contact-form__row textarea {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  padding: 0.7em 0.9em;
  background: #fff;
}

.contact-form__row input:focus,
.contact-form__row select:focus,
.contact-form__row textarea:focus {
  border-color: var(--blue-light);
  outline-offset: 1px;
}

.contact-form__field-error,
.contact-form__error { color: var(--coral-txt); }

.contact-form__success {
  background: var(--coral-soft);
  border: 1px solid var(--coral-wash);
  border-left: 0;
  border-radius: var(--radius-s);
}

/* --- Note loi 21 --------------------------------------------------------- */
/* Sa propre section, en italique (David, 30/07/2026). Traitée comme une note et
   pas comme une rubrique : pas de titre, pas de bandeau, pas de carte — un
   filet, du blanc, et le texte penché. */

.section--loi21 { padding-block: clamp(24px, 3vw, 38px) clamp(30px, 3.5vw, 48px); }

/* Le même traitement pour les avertissements de fin de page déjà en place sur
   les thèmes, les outils, les régions et les articles : ils disent la même chose
   que la note loi 21 et se lisaient jusqu'ici en petit texte grisé collé au
   contenu. Seuls les avertissements posés au niveau de la page sont visés — un
   .theme-article__disclaimer inséré au fil d'un article garde sa mise en retrait
   discrète. */
.loi21,
.container > .theme-article__disclaimer {
  max-width: 72ch;
  /* Espace avant le filet du haut et après le filet du bas (Guillemette,
     11/08/2026) : sans marge, le filet arrivait collé à la bande précédente
     (FAQ) et le pied de page arrivait collé au filet du bas. */
  margin: clamp(28px, 4vw, 44px) auto clamp(28px, 4vw, 44px);
  padding-block: 22px;
  border-top: 2px solid var(--coral-wash);
  border-bottom: 2px solid var(--coral-wash);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  text-align: center;
  text-wrap: pretty;
}

/* Version longue de la même note (bloc 10 du gabarit d'article, 4 paragraphes,
   armée par « avertissement: complet » dans le front matter). Mêmes filets et
   même discrétion, mais alignée à gauche et sans italique : quatre paragraphes
   de texte juridique centrés en penché ne se lisent pas. */
/* Sélecteur aussi spécifique que la règle ci-dessus (`.container > …`), sinon
   l'italique et le centrage de la note courte l'emportent. */
.container > .theme-article__disclaimer--long {
  font-style: normal;
  text-align: left;
}

.theme-article__disclaimer--long p { margin: 0 0 0.9em; }
.theme-article__disclaimer--long p:last-child { margin-bottom: 0; }

/* --- Pied de page -------------------------------------------------------- */

.site-footer { padding-block: 44px 24px; color: #d7e2ef; }

/* Mobile : les boutons flottants (appel, « Prendre RV », site.css) sont fixes à
   16 px du bas et hauts de 56 px — le bas du pied de page doit pouvoir remonter
   au-dessus d'eux (David, 16/09/2026 : la pastille centrée cachait sa dernière
   ligne). 24 px d'origine + 16 + 56 + 16 d'air. */
@media (max-width: 900px) {
  .site-footer { padding-bottom: 112px; }
}

.site-footer a {
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.site-footer a:hover { border-bottom-color: var(--coral); }

.site-footer__grid > div > p:first-child strong {
  display: block;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.site-footer__bottom {
  border-top-color: rgba(255, 255, 255, 0.16);
  opacity: 1;
  font-size: 13.5px;
}

.footer-consent-link {
  background: none;
  border: 0;
  padding: 0;
  color: #fff;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* --- Bannière de consentement -------------------------------------------- */
/* Carte flottante plutôt qu'une barre pleine largeur sombre : la loi 25 demande
   un choix explicite, pas un bandeau qui coupe la page en deux. */

.consent-banner {
  inset: auto 0 14px 0;
  margin-inline: auto;
  width: min(680px, calc(100% - 24px));
  background: var(--bg);
  color: var(--ink-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-high);
  padding: 18px 20px;
  font-size: 14.5px;
}

.consent-banner p { flex: 1 1 300px; margin: 0; }

.consent-banner .btn { padding: 9px 17px; font-size: 14.5px; }

@media (max-width: 520px) {
  .consent-banner__actions { width: 100%; }
  .consent-banner .btn { flex: 1; }
}

/* --- Barre latérale des fiches praticien en une seule bulle (David,
   02/09/2026) : nom et ville, filet, satisfaction, filet, tarifs, filet,
   coordonnées, puis le bouton de RV tout en bas. Les blocs perdent leur fond et
   leur ombre (.theme-sidebar__bloc au lieu de .booking-card), l'enveloppe les
   porte pour tout le monde.
   Ces règles vivent ici et non dans site.css à cause de
   « .theme-sidebar__sticky .satisfaction-badge » plus haut dans ce fichier :
   même spécificité, chargé après, il rendrait le badge en carte bordée. --- */
.theme-sidebar__fiche > * + *:not(.theme-sidebar__cta) {
  margin-top: 1.2em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
}

/* Le repère d'identifiant d'AQ (span en position absolue, injecté en local
   seulement) est un enfant comme un autre pour « + » : sans ça, le nom du
   praticien — deuxième enfant en mode AQ, premier en production — porte un
   filet et un retrait qui n'existent que sur le poste de travail. */
.theme-sidebar__fiche > .qa-sid + * {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Le nom du praticien ouvre la bulle au ras du bord : pas de retrait au-dessus. */
.theme-sidebar__fiche { padding-top: 0; }

/* Le badge garde sa carte bordée sur les pages thématiques ; dans la bulle il
   perd tout cadre et reste collé au nom, sans filet entre les deux (David,
   02/09/2026) — c'est la même personne qu'on présente, le premier filet ne
   tombe qu'avant les tarifs. */
.theme-sidebar__sticky .theme-sidebar__fiche .satisfaction-badge {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0.6em 0 0;
  max-width: none;
}

/* Logo RITMA centré dans la bulle (David, 02/09/2026) : il y est seul sous son
   intitulé, à la différence de la carte coordonnées des pages thématiques où il
   suit une liste alignée à gauche. */
.theme-sidebar__fiche .theme-sidebar__assurances-logo {
  margin-inline: auto;
}

/* Le bouton, dernier enfant, ferme la bulle sans filet au-dessus — et garde le
   padding de .btn, d'où son exclusion de la règle des séparateurs plus haut. */
.theme-sidebar__fiche > .theme-sidebar__cta {
  margin-top: 1.2em;
}


/* ---------------------------------------------------------------------------
   Pages protégées (03/09/2026) : lecteur audio, tableaux de données et listes
   de liens de la page interne de l'équipe. Aucune autre page n'utilise ces
   classes aujourd'hui — elles sont ici plutôt que dans une feuille à part
   parce que sync-assets.php ne synchronise que ce qui est sous core/assets.
   --------------------------------------------------------------------------- */

/* Lecteur natif <audio> : pas de bibliothèque, pas de traceur, et les commandes
   du navigateur sont déjà accessibles au clavier. */
.audio-player {
  display: block;
  width: 100%;
  max-width: 34em;
  margin: 1.2em 0;
}

/* Un tableau large ne doit jamais faire déborder la page (mémoire
   grille-1fr-debordement-mobile) : il défile dans son propre conteneur. */
.table-scroll {
  overflow-x: auto;
  margin: 1.2em 0;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}

.data-table th,
.data-table td {
  border: 1px solid var(--gray);
  padding: 0.5em 0.7em;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.data-table thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  position: sticky;
  top: 0;
}

.data-table tbody tr:nth-child(even) {
  background: var(--gray-light);
}

.data-table img {
  border-radius: 50%;
  display: block;
}

.intranet-liens {
  list-style: none;
  padding-left: 0;
}

.intranet-liens li {
  margin-bottom: 0.6em;
}

.intranet-note {
  color: #555;
  font-size: 0.9em;
}