/*
 * Solutions Hypnose — feuille de style unique.
 * Valeurs relevées sur le site en production (scripts/reference/css/et-core-unified.css) :
 * marine #243958, corail #e06a56, boutons pilule (rayon 20px, contour 3px), titres en gras.
 * Variables --blue-light et --gray reprises telles que fixées dans CLAUDE.md.
 */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-regular-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-bold-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato-black-900.woff2') format('woff2');
}

:root {
  --navy: #243958;
  --coral: #e06a56;
  /* Le corail LU, jamais l'aplat : #e06a56 ne donne que 3,3:1 sur blanc, sous le
     minimum AA de 4,5:1. bandeaux.css redéfinit la même valeur ; elle est ici pour
     que les gabarits qui s'en servent en style inline (fiches partenaires) restent
     lisibles sur un site qui ne charge pas la couche. */
  --coral-txt: #b8452f;
  --coral-light: #fad9c8;
  --blue-light: #a7c1d8;
  --blue-pale: #d3dde8; /* fond de section bleu pâle du site actuel (et_pb_section_2) */
  --gorendezvous-blue: #29abe2; /* badge "GO" du widget GOrendezvous, vérifié contre la prod le 22/07/2026 */
  --gray: #d9d9d9;
  --gray-light: #efefef;
  --bg: #ffffff;
  --text: var(--navy);
  --radius-pill: 20px;
  --radius-card: 16px;
  --shadow-card: 0 4px 20px rgba(36, 57, 88, 0.12);
  --max-width: 1200px;
  --font: 'Lato', Helvetica, Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

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

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.6rem); }

/* H1 des fiches partenaires : 20px en prod (et_pb_text_0 h1), pas la taille hero standard */
.praticien-title { font-size: 1.25rem; font-weight: 600; }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }

p {
  margin: 0 0 1em;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Boutons — pilule, contour, tel qu'observé en production. Aplatis le
   25/08/2026 (Guillemette : « ce sont les autres boutons [Prendre RV] qu'il
   faut aplatir » — comparés au bouton « Prendre rendez-vous avec Sanae »,
   tmap-solo__cta, resté à 14px) : 0.75em → 0.5em de padding vertical.
   Plus de triangle ▶ : posé en ::before le 25/08/2026 pour les CTA « Prendre
   RV », il se retrouvait sur tous les boutons du réseau (bannière de
   consentement, Envoyer, Filtrer, sélecteur de drapeaux). David a tranché le
   02/09/2026 de l'enlever partout, item 104 — y compris des trois liens de
   team-map-solo.php, où il était écrit en dur. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: 0.5em 1.6em;
  border: 3px solid var(--coral);
  color: var(--coral);
  background: transparent;
  cursor: pointer;
  transition: letter-spacing 300ms ease, background-color 200ms ease, color 200ms ease;
}

.btn:hover {
  letter-spacing: 0.5px;
}

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

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

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

/* Utilitaires de mise en page */
.section {
  padding-block: clamp(2.5rem, 2rem + 2vw, 5rem);
}

/* Fonds de section relevés sur le site en production (19/07/2026) : bleu pâle
   #D3DDE8, gris #EFEFEF, corail pâle #fad9c8, corail plein #E06A56 (CTA). */
.section--tinted {
  background: var(--gray-light);
}

.section--blue {
  background: var(--blue-pale);
}

.section--coral-light {
  background: var(--coral-light);
}

/* Carte blanche sur fond bleu pâle — parité prod (rangées Divi blanches arrondies
   20px posées sur la section #D3DDE8 : pages thématiques, articles du blogue). */
.content-card {
  background: #fff;
  border-radius: 20px;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}

/* Les deux conteneurs de contenu rédactionnel du réseau. `.theme-article` est
   nommé ici parce que les mentions légales (les 3 langues) n'ont PAS de
   `.content-card` : leur liste de navigateurs vit directement dans
   `.container.theme-article`, et elles restaient donc les 3 seules pages en
   défilement horizontal après le premier correctif. */
.content-card,
.theme-article {
  /* Une URL nue écrite dans le texte n'a aucun point de coupure : celle de la
     politique Google des mentions légales (« support.google.com/accounts/answer/
     61416 ») faisait 394 px de large dans un écran de 375, sur les 3 langues, et
     poussait TOUTE la page en défilement horizontal (mesuré le 10/09/2026 par
     iframe de 390 px, méthode de [[headless-chrome-qa-visuelle]]). `anywhere` et
     non `break-word` : seul le premier abaisse la largeur min-content, donc seul
     lui laisse le conteneur rétrécir — mesuré, `break-word` laissait la page à
     394. Aucun effet hors débordement : le texte qui tient sur sa ligne n'est
     jamais coupé. */
  overflow-wrap: anywhere;
}

.content-card + .content-card {
  margin-top: 2rem;
}

/* Variante du listing du blogue en prod : bleu pâle fondu vers le blanc en bas. */
.section--blue-fade {
  background-color: var(--blue-pale);
  background-image: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

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

.section--coral a {
  color: #fff;
  text-decoration: underline;
}

.section--coral h1,
.section--coral h2,
.section--coral h3,
.section--coral p {
  color: #fff;
}

.section--coral .btn {
  border-color: #fff;
  color: #fff;
}

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

.section--navy {
  background: var(--navy);
  color: #fff;
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: #fff;
}

.grid {
  display: grid;
  gap: 24px;
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/* Texte 2/3, colonne secondaire 1/3 (Guillemette, 10/08/2026 — « Comment ça se
   passe », pour que la vidéo en 16/9 ne dépasse plus en hauteur le texte à
   sa gauche, plus court une fois le titre sorti de la grille). */
.grid--2-1 { grid-template-columns: 2fr 1fr; }
/* Badge de satisfaction + carrousel de témoignages (Guillemette, 20/08/2026 —
   accueil, bandeau « Ce qu'en disent nos clients »). Colonne du badge à
   300px fixes plutôt qu'une fraction : même taille que .satisfaction-badge
   dans les barres latérales des pages thématiques (.theme-layout, plus bas —
   même patron, 300px fixes + 1fr), demandée explicitement le 20/08/2026 après
   qu'un essai en 1fr/3fr l'ait rendu trop étroit (bug de débordement de grille
   corrigé ci-dessous sur .carousel, qui l'écrasait). */
.grid--badge-carousel { grid-template-columns: 300px 1fr; align-items: start; }

@media (max-width: 700px) {
  .grid--2,
  .grid--2-1,
  .grid--badge-carousel { grid-template-columns: 1fr; }
}

.praticien-header {
  display: flex;
  gap: 1.5em;
  align-items: center;
  text-align: left;
}

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

.praticien-header__tagline {
  color: var(--coral);
  font-weight: 600;
}

@media (max-width: 640px) {
  .praticien-header {
    flex-direction: column;
    text-align: center;
  }
}

.praticien-summary {
  margin-top: 1.5em;
}

.praticien-summary__item {
  color: var(--navy);
  margin: 0 0 1em;
}

.praticien-summary__tag {
  color: var(--navy);
  font-style: italic;
  margin: 0 0 1em;
}

.praticien-summary__tag::before {
  content: '∨ ';
  color: var(--coral);
  font-weight: 700;
  font-style: normal;
}

.praticien-credential {
  margin: 0 0 1.2em;
}

.praticien-credential__titre {
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.2em;
}

.praticien-credential__detail {
  font-style: italic;
  margin: 0;
}

.praticien-credential__note {
  color: var(--coral);
  margin: 0.2em 0 0;
}

/* --- Fiche partenaire « bandeaux » (proposition du 25/08/2026, pilote David
   Veilleux sur hq — partials praticien-hero.php et praticien-offres.php,
   activée par 'fiche' => 'bandeaux' dans la fiche). Photo à 300 px sur une
   grille photo | identité ; grille des offres en trois colonnes de lignes
   « offert / non offert » ; suggestions de collègues en cartes praticien. --- */
.fiche-hero {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2.5rem;
  align-items: start;
  text-align: left;
}

.fiche-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  background: var(--gray);
  box-shadow: var(--shadow-card);
}

.fiche-hero__h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  margin: 0 0 0.35em;
}

.fiche-hero__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 1em 0 1.2em;
}

.fiche-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--gray);
  font-size: 0.9em;
  font-weight: 700;
  color: var(--navy);
}

/* Deuxième rangée du hero (David, 01/09/2026) : les avis clients sur toute la
   largeur, dans le carrousel de verbatims des pages thématiques — trois cartes
   par vue, ce qui demande la rangée entière. */
/* Même padding que « Mon engagement » dessous (David, 02/09/2026) : la carte
   .content-card monte jusqu'à 3rem, l'encadré d'engagement s'arrête à 2rem. */
.fiche-hero__avis { margin-top: 2.5rem; }

.fiche-hero__avis.content-card { padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); }

/* Bas du hero (David, 01/09/2026, remanié le 02/09) : « Mon engagement » sur toute
   la largeur, puis la vidéo de présentation dessous, centrée à mi-largeur — elle
   était à sa gauche en colonne de 400 px. */
.fiche-hero__proof { margin-top: 2.5rem; }

.fiche-hero__video { width: 50%; margin: 2.5rem auto 0; }

/* Itinéraire sous la carte du cabinet : de l'aide pratique, pas le contenu
   principal de la carte, d'où le corps plus petit et l'air qui le détache du
   plan au-dessus. */
.fiche-cabinet__acces {
  margin-top: 1rem;
  font-size: 0.94rem;
}

.fiche-cabinet__acces p {
  margin: 0 0 0.5em;
}

.fiche-cabinet__acces p:last-child {
  margin-bottom: 0;
}

/* « Mon engagement », colonne de droite de la rangée vidéo. Reprend l'encadré
   maison (.theme-article__callout) avec plus d'air : il porte ici un titre et
   quatre phrases, pas un aparté d'une ligne au fil du texte. */
/* Deux classes : .theme-article__callout, plus bas dans ce fichier, pose un
   `margin: 1.5em 0` qui l'emporterait à spécificité égale et ferait descendre
   l'encadré de 24 px sous le haut de la vidéo (David, 01/09/2026 — les deux
   doivent partir de la même ligne). */
.fiche-hero__proof .fiche-hero__engagement {
  margin: 0;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
}

.fiche-hero__avis h2,
.fiche-hero__engagement h2 { font-size: 1.15rem; margin: 0 0 0.9em; }

@media (max-width: 800px) {
  /* minmax(0, 1fr) et non 1fr : une piste « 1fr » garde un minimum AUTO, donc
     elle s'élargit jusqu'à la largeur intrinsèque de son contenu au lieu de s'en
     tenir au conteneur. Le carrousel d'avis la faisait ainsi passer à 908 px sur
     un écran de 390 px — ses items portent width:100% (.testimonials--carousel
     .carousel__item, plus spécifique que le min(340px, 85vw) de la variante
     large), donc quatre témoignages « pleine largeur » côte à côte. Toute la page
     débordait à droite. C'est le piège déjà documenté sur .carousel plus bas, qui
     se prémunit par min-width:0 — sauf que .fiche-hero__avis s'intercale ici
     entre lui et la grille, et rétablit un minimum auto. Les pistes du desktop
     (ci-dessus) sont en minmax(0, …) pour cette raison exacte. */
  .fiche-hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .fiche-hero__photo { max-width: 240px; margin: 0 auto; }
  .fiche-hero__chips { justify-content: center; }
  /* Le mot de bienvenue reste à gauche même quand la colonne passe sous la
     photo : c'est un texte suivi, pas une accroche. */
  .fiche-hero__intro { text-align: left; }
  /* La moitié de la largeur ne montre plus rien sur un téléphone. */
  .fiche-hero__video { width: 100%; }
}

/* Bande « Ce que j'offre » (01/09/2026, David) : une grille de thèmes avec leur
   icône ronde, puis les lignes de renvoi vers un collègue pour un public non reçu. */

.fiche-offres__renvoi {
  margin: 1.6rem 0 0;
  font-size: 0.92em;
}

/* Avertissement Loi 21 en pied de bande : en italique et nettement détaché de la
   liste au-dessus (David, 01/09/2026 — il s'y collait), c'est une réserve sur ce
   qui vient d'être offert, pas une ligne de plus du catalogue. */
.fiche-offres__disclaimer {
  max-width: 600px;
  margin: 2.6rem auto 0;
  font-size: 0.9em;
  font-style: italic;
}

.fiche-services {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 28px;
}

.fiche-service {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.9em;
  align-items: start;
}

.fiche-service__ico { width: 56px; height: 56px; }

.fiche-service__nom {
  display: block;
  margin-bottom: 0.2em;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}

a.fiche-service__nom:hover { color: var(--coral-txt); text-decoration: underline; }

.fiche-service__desc { margin: 0; font-size: 0.92em; }

.fiche-cabinet { max-width: 900px; margin-inline: auto; align-items: start; }

.fiche-cabinet .card h3 { margin-top: 0; }

/* Rail unique d'une page (fiche praticien, David 28/08/2026 : « le même sidebar
   qui flotte dans toute la page, pas un sidebar par section » ; page FAQ, même
   demande, 1/09/2026). Le problème : une grille qui enfermerait les bandes dans
   une colonne leur ferait perdre leur fond pleine largeur. La barre latérale est
   donc sortie du flux — absolue sur toute la hauteur du bloc, avec son
   .theme-sidebar__sticky qui colle dedans — et chaque bande se contente de lui
   réserver sa gouttière à droite. Sous 960px le rail redevient un bloc normal,
   en fin de page, comme .theme-layout qui s'empile au même seuil.
   .fiche-body/.fiche-body__rail sont les noms d'origine, gardés tels quels : les
   renommer changerait le HTML des 29 fiches praticien × 3 langues, donc leurs
   empreintes d'AQ. .page-rail/.page-rail__aside est le nom neutre des pages qui
   ne sont pas des fiches. */
.fiche-body,
.page-rail {
  position: relative;
}

@media (min-width: 960px) {
  .fiche-body > .section > .container,
  .page-rail > .section > .container {
    padding-right: 340px;
  }

  .fiche-body__rail,
  .page-rail__aside {
    position: absolute;
    /* Même retrait que le padding haut d'une bande (David, 02/09/2026) : à
       top:0 la barre latérale démarrait pile sur le bord du bandeau, alors que
       le contenu à sa gauche, lui, respire. */
    top: clamp(46px, 6vw, 82px);
    bottom: 0;
    width: 300px;
    /* Aligné sur le bord droit de .container : sa gouttière quand la fenêtre est
       plus étroite que la mesure, la marge de centrage au-delà. */
    right: max(20px, calc(50% - (var(--max-width) / 2) + 20px));
  }

  /* Sans ça, le collant ne colle pas : un élément `position: sticky` se déplace
     à l'intérieur de SON bloc conteneur, ici le <aside> — qui, laissé en hauteur
     automatique, fait exactement la taille de son contenu et ne lui laisse donc
     aucune course. Sur les pages thématiques le problème ne se pose pas : le
     <aside> y est une cellule de grille, étirée à la hauteur de la rangée. Le
     rail, lui, doit passer sa hauteur à la main. */
  .fiche-body__rail > .theme-sidebar,
  .page-rail__aside > .theme-sidebar {
    height: 100%;
  }
}

/* Mobile : la barre latérale suit le hero au lieu de fermer la page (David,
   02/09/2026). Le hero est rendu avant .fiche-body, le rail en est le dernier
   enfant — le remonter en tête du bloc le place donc juste après. Ordre visuel
   seulement : le HTML, et avec lui les identifiants d'AQ, ne bouge pas. */
@media (max-width: 959px) {
  .fiche-body {
    display: flex;
    flex-direction: column;
  }

  .fiche-body > .fiche-body__rail {
    order: -1;
  }

  /* Cadrée comme le contenu des bandes (David, 16/09/2026) : sortie de tout
     .container, la barre prenait la pleine largeur de l'écran, photo comprise. */
  .fiche-body__rail,
  .page-rail__aside {
    max-width: var(--max-width);
    margin-inline: auto;
    padding: clamp(46px, 6vw, 82px) 20px;
  }
}

/* « Ma motivation » : texte à gauche comme le reste de la fiche (David,
   28/08/2026 — la bande était centrée, seule de la page, et elle porte
   maintenant la barre latérale). Mesure de lecture conservée là où la bande
   occupe toute la largeur (gabarit d'origine, sans barre latérale). */
.fiche-motivation p {
  max-width: 800px;
}

.card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5em;
}

/* --- Utilitaires d'alignement (28/08/2026) — règle du site : le texte est à
   gauche, seuls les CTA et les vignettes sont centrés. Ces classes remplacent
   les style="text-align:center" posés cas par cas dans les gabarits, qui
   donnaient une justification apparemment aléatoire d'une bande à l'autre. --- */
.u-center {
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 0.75em 1.2em;
  z-index: 1000;
}

.skip-link:focus {
  left: 0;
}

/* --- Header / nav --- */
.site-header {
  border-bottom: 1px solid var(--gray-light);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 100;
}

/* Ancres de défilement (liens du hero vers une section plus bas, 25/07/2026) :
   sans ce décalage, l'en-tête collant recouvre le haut de la cible visée. */
[id] {
  scroll-margin-top: 90px;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
}

.site-header__logo img {
  height: 48px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  /* La loupe suit le menu dans .site-header__bar : sans cette marge, l'espace
     libre de space-between se glisserait entre les deux au lieu d'être avant. */
  margin-left: auto;
}

/* Bouton « Prendre RV » du menu du haut encore trop haut après le passage de
   .btn à 0.5em, puis après un essai à 7px (25/08/2026, Guillemette : « encore
   trop haut » puis « flatter ») : 4px de chaque côté, seulement ici — les
   autres boutons .btn (barre latérale, etc.) restent à 0.5em. */
.nav > .btn {
  padding-block: 4px;
}

.nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
  position: relative;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: block;
  padding: 10px 14px;
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  border-radius: 8px;
  /* Les items avec sous-menu sont des <button> (app/lib/nav.php) : sans ce reset,
     les navigateurs leur appliquent l'habillage natif (fond, bordure) et ils
     tranchent visuellement avec les liens simples comme « Blogue » — constaté par
     David le 19/07/2026, le menu doit rester du texte plat comme le site actuel. */
  background: none;
  border: none;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

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

.nav__submenu {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: none;
  flex-direction: column;
  z-index: 50;
}

.nav__item:hover > .nav__submenu,
.nav__item:focus-within > .nav__submenu {
  display: flex;
}

.nav__submenu .nav__link {
  font-weight: 400;
  font-size: 14px;
}

/* Corail quand la page courante est cet item ou un de ses sous-items (exigence de
   David, 23/07/2026) — après .nav__submenu .nav__link (même spécificité, 2 classes)
   pour gagner aussi dans les sous-menus. */
.nav__link.is-active {
  color: var(--coral);
}

/* Sous-menu de 2e niveau (ex. Nos Services > Émotions > Stress & Anxiété) : ouvert
   en volet à droite plutôt qu'en dessous, sinon il recouvre les autres groupes du
   1er niveau (Habitudes & Santé, Performance...) — constaté par David le 19/07/2026. */
.nav__submenu .nav__submenu {
  top: -8px;
  left: 100%;
}

/* Item de menu proche du bord droit (Blogue et ses regroupements thématiques,
   David 26/07/2026) : les deux niveaux s'ouvrent vers la gauche, sinon le volet
   sort de la fenêtre. Le 2e niveau est plus large — ce sont des titres d'articles,
   pas des libellés de deux mots. */
.nav__item--align-right > .nav__submenu {
  left: auto;
  right: 0;
}

.nav__item--align-right .nav__submenu .nav__submenu {
  left: auto;
  right: 100%;
  min-width: 320px;
}

/* Sélecteur de langue FR/EN/ES (CLAUDE.md : header, jamais de géolocalisation). */
.nav__lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-inline: 6px;
  border-left: 1px solid var(--gray-light);
  margin-left: 4px;
}

.nav__lang-link {
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
  opacity: 0.55;
  text-decoration: none;
  border-radius: 4px;
}

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

.nav__lang-link.is-active {
  color: var(--navy);
  opacity: 1;
}

/* --- Loupe de recherche (parité avec le site actuel : icône à droite du menu,
   qui déplie un champ). <details>/<summary> plutôt qu'un bouton + JS : le
   dépliage, le clavier et l'état ouvert/fermé sont natifs, il n'y a rien à
   écrire dans site.js. --- */
.nav-search {
  position: relative;
  margin-left: 4px;
}

.nav-search__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--navy);
  cursor: pointer;
  /* Le triangle natif de <summary> n'a pas sa place dans une barre de menu. */
  list-style: none;
}

.nav-search__toggle::-webkit-details-marker {
  display: none;
}

.nav-search__toggle:hover,
.nav-search__toggle:focus-visible,
.nav-search[open] > .nav-search__toggle {
  color: var(--coral-txt);
  background: var(--blue-pale);
}

.nav-search__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  padding: 12px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.search-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-search__panel .search-form__field {
  width: 260px;
}

.search-form__field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--blue-light);
  border-radius: 8px;
}

.search-form__field:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

.search-form__submit {
  flex: 0 0 auto;
  padding-block: 8px;
}

/* --- Page de résultats (core/templates/pages/recherche.php) --- */
.search-results__intro {
  margin-top: 1.25rem;
}

.search-results {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.search-results__item + .search-results__item {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-light);
}

.search-results__link {
  font-weight: 700;
  font-size: 1.05rem;
}

.search-results__excerpt {
  margin-top: 0.25rem;
  padding-bottom: 0;
}

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

/* Bouton de fermeture et lien « Tout voir » : n'existent que dans le menu mobile. */
.nav__close,
.nav__item--all {
  display: none;
}

/* --- Menu mobile : plein écran, à la manière de coachingdv.ca (David, 21/09/2026).
   Le tiroir latéral d'avant ne défilait pas, n'avait pas de bouton de fermeture, et
   ses sections ne se repliaient pas (le :focus-within du bureau les gardait ouvertes
   après l'appui) — intenable sur un menu aussi long que celui du blogue. --- */
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    order: 2;
  }

  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--navy);
  }

  /* .nav sort du flux (position: fixed) : sans réordonner, la loupe se
     retrouverait après le bouton burger, donc au milieu de la barre. */
  .nav-search {
    order: 1;
    margin-left: auto;
  }

  .nav-search__panel {
    /* Le panneau déborderait de l'écran s'il gardait la largeur du bureau. */
    position: fixed;
    left: 12px;
    right: 12px;
    top: 72px;
  }

  .nav-search__panel .search-form__field {
    width: auto;
  }

  /* display:none plutôt qu'un glissement hors écran : fermé, le menu sort aussi de
     l'ordre de tabulation. */
  .nav {
    display: none;
    position: fixed;
    inset: 0;
    /* Devant la loupe et son panneau (60), qui suivent .nav dans l'en-tête. */
    z-index: 70;
    margin: 0;
    background: #fff;
    flex-direction: column;
    /* Aligné à gauche (David, 21/09/2026) : le padding de .nav tient la marge, les
       sous-menus s'indentent d'un cran par niveau. */
    align-items: flex-start;
    gap: 4px;
    padding: 12px 20px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: left;
  }

  .nav.is-open {
    display: flex;
  }

  /* La page derrière ne défile plus, et l'en-tête passe devant le bouton d'appel
     flottant (z-index 150) — la bannière de consentement (200) reste devant. */
  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .site-header {
    z-index: 160;
  }

  /* Collant : reste sous le pouce même au bout d'une longue section dépliée. */
  .nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 1;
    align-self: flex-end;
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
  }

  /* Le menu démarre sous la croix, jamais centré verticalement (David, 21/09/2026). */
  .nav > .nav__list {
    width: 100%;
  }

  /* Le CTA et le sélecteur de langue restent centrés, seuls les liens sont à gauche
     (David, 21/09/2026). */
  .nav > .btn {
    align-self: center;
    margin-top: 12px;
    padding-block: 0.5em;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .nav__item {
    width: 100%;
  }

  .nav__item--all {
    display: block;
  }

  /* flex et non inline-flex : la zone tactile couvre toute la largeur, pas juste le
     libellé maintenant qu'il n'est plus centré. */
  .nav .nav__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 48px;
    padding: 4px 16px;
    font-size: 20px;
    white-space: normal;
  }

  .nav__link[aria-haspopup="true"]::after {
    content: "";
    flex: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 200ms ease;
  }

  .nav__link[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  /* Le survol et le focus du bureau n'ouvrent rien ici : seul l'accordéon décide,
     sinon une section refermée resterait affichée tant que son bouton a le focus. */
  .nav .nav__submenu,
  .nav .nav__item:hover > .nav__submenu,
  .nav .nav__item:focus-within > .nav__submenu {
    display: none;
    position: static;
    min-width: 0;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }

  .nav .nav__item.is-expanded > .nav__submenu {
    display: flex;
  }

  /* Section ouverte : ni encadré (David, 21/09/2026 : « très étrange ») ni corail, qui
     dit déjà « page courante » — le chevron retourné et deux filets fins suffisent. */
  .nav > .nav__list > .nav__item.is-expanded > .nav__submenu {
    padding-block: 4px;
    /* --line plutôt que --gray-light : bandeaux.css redéfinit ce dernier à #f6f8fb,
       invisible sur le blanc du menu. Repli pour un site sans la couche bandeaux. */
    border-block: 1px solid var(--line, #e3e9f0);
  }

  /* Un cran de 28 px par niveau, par-dessus les 16 px du 1er niveau. */
  .nav .nav__submenu .nav__link {
    min-height: 40px;
    padding-left: 44px;
    font-size: 16px;
  }

  .nav .nav__submenu .nav__link[aria-haspopup="true"],
  .nav .nav__item--all > .nav__link {
    font-weight: 700;
  }

  .nav .nav__submenu .nav__submenu .nav__link {
    padding-left: 72px;
    font-size: 15px;
  }

  .nav__lang {
    align-self: center;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    gap: 8px;
  }

  .nav__lang-link {
    padding: 10px 12px;
    font-size: 15px;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .nav__link[aria-haspopup="true"]::after {
    transition: none;
  }
}

/* --- Footer --- */
.site-footer {
  background: var(--navy);
  color: #fff;
  padding-block: 3rem 1.5rem;
}

.site-footer a {
  color: #fff;
}

.site-footer__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 2rem;
  /* Typo réduite (David, 10/08/2026) : les colonnes sans titre n'ont plus besoin
     du 1em hérité du corps, même esprit que le 0.9em de .theme-sidebar__contacts. */
  font-size: 0.9em;
}

.site-footer__social-icons {
  display: flex;
  gap: 8px;
}

/* Mêmes pictogrammes que .theme-sidebar__social-icon (COM-FR-0042*, lib/social-icons.php),
   couleurs inversées pour rester lisibles sur le fond marine du pied de page.
   Sélecteur qualifié par « a » (David, 10/08/2026 : icônes invisibles, blanc sur
   blanc) : .site-footer a (0,1,1) l'emportait sur .site-footer__social-icon
   (0,1,0) malgré l'ordre dans la feuille — spécificité CSS, pas ordre de source. */
.site-footer a.site-footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  text-decoration: none;
}

.site-footer__social-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.site-footer a.site-footer__social-icon:hover {
  background: var(--coral);
  color: #fff;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.5rem;
  font-size: 13px;
  opacity: 0.85;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

/* --- Hero --- */
/* Hero « fond tramé blanc » (parité production, corrigé le 19/07/2026) : les fonds
   du site actuel sont des photos très claires passées au voile blanc, avec titres
   marine — jamais de voile sombre ni de texte blanc. */
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--navy);
  padding-block: clamp(3rem, 2.5rem + 3vw, 6rem);
  text-align: center;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
}

.hero h1,
.hero p {
  color: var(--navy);
}

.hero__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5em;
}

/* 4 liens de région serrés sur une seule ligne (David, 25/07/2026) : pas de
   repli tant que la largeur le permet, padding/police du .btn réduits pour que
   les 4 libellés tiennent côte à côte sous les CTA principaux du hero.
   La rangée réclame ~845 px, soit plus que les 760 px de .hero__inner : elle
   déborde donc symétriquement dans le blanc du hero, ce qui passe inaperçu tant
   que la fenêtre est large. En dessous, ce débordement pousserait une barre de
   défilement horizontale sur toute la page — d'où le repli en 2×2 dès 900 px
   (et non 560 px comme du temps où ils n'étaient que trois). */
.hero__actions--regions {
  flex-wrap: nowrap;
  margin-top: clamp(3.5rem, 2.5rem + 5vw, 7rem);
}

.hero__actions--regions .btn {
  padding: 0.55em 1em;
  font-size: 13px;
  gap: 0.4em;
  white-space: nowrap;
}

/* Réduit et harmonise « Prendre RV » + WhatsApp quand les deux cohabitent
   (Guillemette, 26/08/2026, pages thématiques ma) — même mécanique que
   --regions ci-dessus, tailles reprises à l'identique pour rester discret. */
.hero__actions--compact .btn {
  padding: 0.55em 1em;
  font-size: 13px;
  gap: 0.4em;
}

@media (max-width: 900px) {
  .hero__actions--regions {
    flex-wrap: wrap;
  }
}

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

.hero__below img {
  margin-inline: auto;
}

/* Petits drapeaux CSS (liens rapides du hero, accueil com, 25/07/2026) — pas
   d'émoji drapeau : rendu cassé sous Windows (affiche les lettres du code pays
   au lieu du drapeau), pas d'image à convertir/héberger non plus. */
.flag {
  display: inline-block;
  width: 29px;
  height: 20px;
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
  flex: 0 0 auto;
}

.flag svg {
  display: block;
}

.flag--fr {
  background: linear-gradient(90deg, #002395 33.33%, #fff 33.33% 66.66%, #ed2939 66.66%);
}

/* --- Page thématique (guide long, phase 3) --- */
.theme-article {
  max-width: 760px;
  margin-inline: auto;
}

.theme-article__rond {
  display: block;
  margin: 0 auto 1.5em;
  border-radius: 50%;
}

/* Articles de blogue (production, relevé le 20/07/2026 sur plusieurs articles) :
   les titres de section H2 du corps sont en corail, contrairement aux pages
   thématiques « Nos services » où la couleur varie au cas par cas (non reproduit
   ici — voir SUIVI_DAVID.md). H3 et le H1 de page restent marine. */
.theme-article--blog h2 {
  color: var(--coral);
}

.theme-article__intro {
  font-size: 1.1em;
  color: var(--navy);
}

/* Vidéos dans le texte principal (5/08/2026, pilote Stress & Anxiété) : les
   titres n'ont pas de margin-top propre (seulement 0.6em de margin-bottom,
   voir h1-h6 plus haut) — sans cette marge la grille de vidéos collait
   directement au h2 suivant. */
.theme-article__inline-videos {
  margin: 2em 0;
}

/* « Encadré corail » des intrants : fond corail pâle, comme les encarts du site
   actuel (#fad9c8) — pas de bleu. */
/* Table des matières des articles de blogue (générée depuis les ##/### du
   corps, core/lib/markdown.php::md_to_html) — insérée avant le premier titre
   dès que l'article compte au moins 2 sections. */
.theme-article__toc {
  background: var(--gray-light);
  border-radius: var(--radius-card);
  padding: 1em 1.4em;
  margin: 1.5em 0;
}

.theme-article__toc-title {
  margin: 0 0 0.5em;
  font-weight: 700;
  color: var(--navy);
}

.theme-article__toc ul {
  margin: 0;
  padding-left: 1.2em;
  /* Typo réduite (Guillemette, 11/08/2026) : la liste reprenait la taille du
     corps de texte (17px) et pesait plus lourd visuellement qu'un sommaire. */
  font-size: 14.5px;
}

.theme-article__toc li.theme-article__toc-h3 {
  list-style: none;
  margin-left: 1em;
}

.theme-article__toc a {
  color: var(--navy);
}

.theme-article__toc a:hover {
  color: var(--coral);
}

/* Rangée image+texte du corps d'article (alternance 2 colonnes, layout
   production — core/lib/markdown.php::md_to_html fusionne @@IMG@@ avec le
   paragraphe adjacent). Image carrée recadrée en object-fit, quelle que soit
   la résolution source. */
.theme-article__img-row {
  display: flex;
  gap: 1.25em;
  align-items: flex-start;
  margin: 1.5em 0;
}

.theme-article__img-row-img {
  flex: 0 0 25%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.theme-article__img-row-text {
  flex: 1 1 auto;
  min-width: 0;
}

.theme-article__img-row-text p {
  margin: 0;
}

@media (max-width: 640px) {
  .theme-article__img-row {
    flex-direction: column;
  }

  .theme-article__img-row-img {
    max-width: 220px;
    align-self: center;
  }
}

.theme-article__callout {
  background: var(--coral-light);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius-card);
  padding: 1em 1.2em;
  margin: 1.5em 0;
}

.theme-article__callout p {
  margin: 0;
}

/* Encadré en plusieurs paragraphes (18/09/2026) : un encadré qui trie entre
   plusieurs situations (« si… alors voyez… ») se lit mal en un seul pavé.
   Le sélecteur ne vise que le 2e paragraphe et les suivants, donc les encadrés
   d'une seule ligne — tous ceux d'avant cette date — sont inchangés. */
.theme-article__callout p + p {
  margin-top: 0.7em;
}

/* Citation au fil du texte (David, 10/09/2026, accroche en italique de « Devenir
   partenaire » : « il flotte dans le vide »). La balise n'était stylée nulle part,
   donc elle rendait avec l'indentation par défaut du navigateur et aucun marqueur.
   Filet corail à gauche plutôt que .theme-article__callout, dont bandeaux.css
   retire justement le filet : un encadré se distingue par sa teinte de fond, une
   citation par sa barre. :not([class]) laisse le verbatim du carrousel
   (.testimonial-verbatim__quote) intact. */
blockquote:not([class]) {
  margin: 0 0 1.2em;
  padding-left: 18px;
  border-left: 4px solid var(--coral);
}

.img-placeholder {
  display: block;
  width: 100%;
  background: var(--gray);
  border-radius: var(--radius-card);
}

.theme-article__cta {
  text-align: center;
  margin: 1.5em 0;
}

/* Signature discrète de fin d'article (E-E-A-T, partial partagé auteur.php) :
   3 lignes alignées à droite comme une signature de lettre, avatar minuscule
   (Guillemette, 06/09/2026 — essai à 3 mises en page, celle-ci retenue). */
.theme-article__auteur {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .85em;
  border-top: 1px solid var(--gray);
  margin-top: 1.5em;
  padding-top: 1.2em;
  margin-bottom: 2em;
}

.theme-article__auteur img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.theme-article__auteur p {
  margin: 0;
  font-size: .85em;
  font-style: italic;
  text-align: right;
  line-height: 1.5;
}

.theme-article__auteur a {
  color: var(--coral-txt);
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
}

.theme-article__auteur a:hover {
  text-decoration: underline;
}

.theme-article__table-wrap {
  overflow-x: auto;
  margin: 1.5em 0;
}

.theme-article__table {
  width: 100%;
  border-collapse: collapse;
}

.theme-article__table th,
.theme-article__table td {
  border: 1px solid var(--gray);
  padding: 0.6em 0.8em;
  text-align: left;
}

.theme-article__disclaimer {
  font-size: 0.85em;
  opacity: 0.75;
  border-top: 1px solid var(--gray);
  padding-top: 1em;
  margin-top: 1em;
}

.theme-article__video-note {
  font-size: 0.85em;
  opacity: 0.75;
  margin-bottom: 0.5em;
}

/* --- Formulaire de contact --- */
.contact-form__row {
  margin-bottom: 1em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-form__row label {
  font-weight: 700;
  color: var(--navy);
}

/* Astérisque des champs obligatoires et sa légende (Guillemette, 22/09/2026,
   page Contact de ma) — rendues seulement quand la page passe 'required_marks'
   à partials/contact-form.php. --coral-txt et non --coral : c'est du texte lu,
   soumis à la règle AA du projet. */
.contact-form__required {
  color: var(--coral-txt);
  font-weight: 700;
}

.contact-form__legend {
  margin: 0 0 1em;
  font-size: 14px;
  color: var(--ink-2);
}

.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 {
  font: inherit;
  padding: 0.6em 0.8em;
  border: 1px solid var(--gray);
  border-radius: 8px;
}

.contact-form__row--consent label {
  font-weight: 400;
  flex-direction: row;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.contact-form__field-error {
  color: var(--coral);
  font-size: 0.9em;
}

.contact-form__success {
  background: #fff;
  border-left: 4px solid var(--coral);
  padding: 1em;
  border-radius: 8px;
}

.contact-form__error {
  color: var(--coral);
  font-weight: 700;
}

.region-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.region-card__desc {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--navy);
  opacity: 0.75;
}

/* --- Topic families (grille "Ce que nous accompagnons") --- */
.topic-families__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.topic-families__group h3 {
  color: var(--navy);
  font-size: 1rem;
  margin-block: 0 0.5em;
}

.topic-families__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.topic-families__group a {
  color: var(--navy);
  text-decoration: none;
  font-size: 0.9rem;
}

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

.topic-families__group span.is-soon {
  color: var(--navy);
  opacity: 0.6;
  font-size: 0.9rem;
}

/* --- Carousel « thèmes » (réplique du widget dica de production) --- */
.carousel {
  position: relative;
  /* Sans ça, un carrousel posé dans une colonne de grille (accueil, bandeau
     témoignages, 20/08/2026) force sa colonne à la largeur de TOUT son
     contenu (min-width:auto par défaut sur un enfant de grille) au lieu de se
     limiter à sa part — .carousel__track défile en interne (overflow-x:auto)
     mais ça ne compte pas pour la taille minimale automatique, l'overflow
     étant posé sur un descendant, pas sur .carousel lui-même. Effet observé :
     le bandeau débordait très à droite ET la colonne voisine (le badge de
     satisfaction) était écrasée d'autant. */
  min-width: 0;
}

.carousel__track {
  /* Bloc conteneur des descendants positionnés : le « 5/5 » en .visually-hidden
     (position:absolute) d'une carte de témoignage prenait .carousel pour
     référence, hors du défilement interne, et s'inscrivait à sa place statique
     — 924 px à droite sur la fiche de David Veilleux en mobile (QA du
     02/09/2026, mesuré à 390 px : scrollWidth 924 pour 375 de large). Ancré
     ici, il reste dans le rail, que overflow-x recouvre. */
  position: relative;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  padding-inline: 40px;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 160px;
  text-align: center;
}

/* Carte (fond blanc + ombre) sur la variante icône seulement (Guillemette,
   10/08/2026 — la section « applications » de l'accueil manquait de relief,
   les icônes flottaient à même le fond de section). La variante large
   (témoignages) a déjà sa carte via .card + .testimonial, pas touchée ici. */
.carousel__item:not(.carousel__item--wide) {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.2em 1em;
}

/* Variante large — témoignages en carousel (fiches partenaires .ma) */
.carousel__item--wide {
  width: min(320px, 85vw);
  text-align: left;
}

.testimonial__avatar {
  border-radius: 50%;
}

.carousel__item-link {
  display: block;
  text-decoration: none;
  color: var(--navy);
}

.carousel__item-link img {
  margin-inline: auto;
}

.carousel__item-title {
  display: block;
  margin-top: 0.6em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.02em;
}

.carousel__item-subtitle {
  font-style: italic;
  font-size: 0.85em;
  margin: 0.5em 0 0.8em;
}

/* margin-top:auto pousse le CTA en bas de l'item, aligné sur la même ligne
   pour tous les items quelle que soit la longueur du sous-titre (1 ou 2
   lignes) — les items sont étirés à la même hauteur par align-items:stretch
   (comportement flex par défaut) sur .carousel__track. */
.carousel__item-cta {
  margin-top: auto;
  align-self: center;
  font-size: 12px;
  padding: 0.55em 1.3em;
}

/* L'ancienne variante « texte blanc sur fond corail » n'a plus lieu d'être
   (10/08/2026) : la variante icône a maintenant sa propre carte blanche
   (voir .carousel__item:not(.carousel__item--wide) ci-dessus), donc reste
   lisible en navy quelle que soit la couleur de la section qui l'entoure. */

.carousel__arrow {
  position: absolute;
  top: 46px;
  border: none;
  background: none;
  padding: 4px 6px;
  font-size: 32px;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
}

.carousel__arrow--prev {
  left: -6px;
}

.carousel__arrow--next {
  right: -6px;
}

.section--coral .carousel__arrow {
  color: #fff;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.carousel__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--navy);
  opacity: 0.3;
  cursor: pointer;
}

.carousel__dots button.is-active {
  opacity: 1;
}

.section--coral .carousel__dots button {
  background: #fff;
}

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

/* --- FAQ accordion --- */
.faq__item {
  border-bottom: 1px solid var(--gray);
}

.faq__question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1em 0;
  font-weight: 700;
  font-size: 1.05em;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.faq__icon {
  flex: none;
  transition: transform 200ms ease;
}

.faq__question[aria-expanded="true"] .faq__icon {
  transform: rotate(45deg);
}

.faq__answer {
  padding: 0 0 1em;
}

.faq__answer[hidden] {
  display: none;
}

/* --- Team tabs --- */
.team-tabs__list {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex-wrap: wrap;
}

.team-tabs__tab {
  border: none;
  background: var(--navy);
  color: #fff;
  padding: 0.7em 1.4em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  cursor: pointer;
}

.team-tabs__tab[aria-selected="true"] {
  background: var(--coral);
}

.team-tabs__panel[hidden] {
  display: none;
}

.praticien-card {
  text-align: center;
}

.praticien-card__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
  background: var(--gray);
}

.praticien-card__ville {
  color: var(--coral);
  font-weight: 700;
  font-size: 0.9em;
}

.praticien-card__nom {
  font-weight: 700;
  color: var(--navy);
  margin: 0.3em 0;
}

.praticien-card__services {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 1.1em;
}

/* --- Testimonials --- */
.testimonial {
  background: #fff;
}

.testimonial__stars {
  color: var(--coral);
  letter-spacing: 2px;
}

.testimonial__author {
  font-weight: 700;
  color: var(--coral);
  margin-top: 0.8em;
}

.testimonial p:not(.testimonial__author) {
  font-style: italic;
}

/* Variante resserrée (patron du bloc témoignages de la production, sans carte ni
   ombre) : nom + étoiles sur une même ligne, pas de retrait au-dessus de l'auteur
   puisqu'il n'est plus sous la citation. */
.testimonial--compact {
  background: none;
  box-shadow: none;
  padding: 0;
}

.testimonial--compact .testimonial__head {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0 0 0.3em;
}

.testimonial--compact .testimonial__author {
  margin-top: 0;
}

/* --- Témoignages en carrousel (partials/testimonials.php, clé 'carousel') :
   une citation à la fois, sur toute la largeur de sa colonne. Les 50 px de
   gouttière que bandeaux.css réserve sur .carousel aux flèches en tuiles du
   carrousel de thèmes n'ont pas lieu d'être ici — les commandes vivent sous le
   rail, la largeur revient donc au texte, et la citation s'aligne sur son titre.
   Deux classes pour l'emporter : .carousel de bandeaux.css est chargé après.
   Les items étant les enfants d'un flex sans align-items, ils prennent tous la
   hauteur du plus long : le bloc ne saute pas d'une citation à l'autre. --- */
.carousel.testimonials--carousel { padding-inline: 0; }

/* Pas de gouttière verticale non plus : le rail du carrousel de thèmes en garde
   pour les ombres de ses cartes, celle-ci n'en a pas et le blanc creusait l'écart
   avec la vidéo d'à côté. */
.testimonials--carousel .carousel__track { padding-block: 0; }

.testimonials--carousel .carousel__item { width: 100%; }

/* Guillemet ouvrant en filigrane : le repère qui dit « citation » quand une
   seule carte est visible. Décoratif — le `/ ""` en donne le texte de
   remplacement vide aux lecteurs d'écran qui lisent le contenu généré. */
.testimonials--carousel .testimonial {
  position: relative;
  padding-right: 3.2rem;
}

.testimonials--carousel .testimonial::before {
  content: "\201C" / "";
  position: absolute;
  top: 0.12em;
  right: 0.34em;
  font-size: 4rem;
  line-height: 1;
  color: var(--coral);
  opacity: 0.3;
  pointer-events: none;
}

.testimonials__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 14px;
}

.testimonials__nav .carousel__dots { margin-top: 0; }

.testimonials__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* --- Video block / youtube-embed --- */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--navy);
}

.video-embed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-embed__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 57, 88, 0.35);
  border: none;
  cursor: pointer;
}

.video-embed__play-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Verbatim replié sous une vidéo (09/09/2026) : <details> natif, aucun JS,
   comme la loupe du menu. Le « + » remplace le triangle par défaut, qui n'est
   ni cadré ni cohérent d'un navigateur à l'autre. --- */
.video-transcript {
  margin-top: 0.6em;
}

.video-transcript__toggle {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  color: var(--coral-txt);
  font-weight: 700;
  list-style: none;
}

.video-transcript__toggle::-webkit-details-marker {
  display: none;
}

.video-transcript__toggle::before {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.95em;
  line-height: 1;
}

.video-transcript[open] .video-transcript__toggle::before {
  content: "\2212"; /* signe moins, pas un trait d'union */
}

.video-transcript__texte {
  margin-top: 0.6em;
  max-height: 420px;
  overflow-y: auto;
  font-size: 0.95em;
}

.video-transcript__texte p {
  margin: 0 0 0.8em;
}

.video-transcript__disclaimer {
  font-size: 0.9em;
  font-style: italic;
  opacity: 0.8;
}

/* --- Carte de cabinet en façade (item 133, Loi 25) : rien n'est demandé à
   Google tant que le visiteur n'a pas cliqué. Même hauteur que l'ancienne
   iframe (260 px), pour que la fiche ne bouge pas au clic. --- */
.map-embed {
  margin-top: 0.8em;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-light);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.map-embed__show {
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.6em 1.4em;
  font: inherit;
  cursor: pointer;
}

.map-embed iframe {
  width: 100%;
  height: 260px;
  border: 0;
}

/* Vidéo unique intégrée au fil du texte (demande de Guillemette, 11/08/2026,
   page Anxiété) : centrée, la moitié de la largeur du texte sur desktop —
   .grid--3 est prévu pour plusieurs vidéos côte à côte, pas pour en isoler
   une seule. Repasse à 100% sous ~700px pour ne pas la réduire à une vignette. */
.theme-article__video-single {
  max-width: 66.66%;
  margin: 0 auto 24px;
}

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

/* Vidéo hors du pavé de texte, pleine largeur sur le fond de la bande
   (Guillemette, 11/08/2026) : pas de contrainte de largeur, contrairement à
   .theme-article__video-single ci-dessus qui reste bridée à la mesure du texte. */
.theme-article__video-banner {
  max-width: 50%;
  margin: 0 auto clamp(28px, 4vw, 44px);
}

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

/* --- Video promo (encart « Consultations par vidéo ») --- */
.video-promo {
  text-align: center;
  max-width: 640px;
  margin: 2em auto;
}

.video-promo h3 {
  margin: 0 0 0.5em;
}

/* --- Breadcrumb --- */
.breadcrumb {
  font-size: 13px;
  color: var(--navy);
  opacity: 0.8;
}

.breadcrumb a {
  color: inherit;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: '›';
  margin-left: 6px;
}

/* --- Blog card --- */
.blog-card {
  text-decoration: none;
  color: var(--navy);
  display: block;
}

.blog-card__img {
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 3;
  /* contain, pas cover : QA visuelle du 23/07/2026 — 45 des 81 couvertures ne sont
     pas au format 4/3 (16/9 ou carré, plusieurs avec le titre incrusté dans l'image
     à gauche) ; un cover centré rognait ce texte. contain ne rogne jamais, au prix
     d'un letterboxing blanc sur les images qui ne sont pas déjà en 4/3. */
  object-fit: contain;
  background: #fff;
}

.blog-card__title {
  margin-top: 0.6em;
  font-weight: 700;
}

/* Filtre par thématique (Guillemette, 20/08/2026) — form GET simple (voir
   blog-listing.php), pas de JS dédié : onchange soumet le formulaire, le bouton
   reste un repli fonctionnel sans JS. */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  margin: 1.5em 0;
}

.blog-filter label {
  font-weight: 700;
  color: var(--navy);
}

.blog-filter select {
  padding: 0.5em 0.8em;
  border-radius: var(--radius-pill);
  border: 2px solid var(--gray);
  background: #fff;
  color: var(--navy);
  font: inherit;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5em;
  margin: 1.5em 0;
}

.blog-pagination {
  display: flex;
  gap: 0.5em;
  justify-content: center;
  margin-top: 2em;
}

.blog-pagination a,
.blog-pagination span {
  padding: 0.4em 0.8em;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--navy);
}

.blog-pagination span[aria-current] {
  background: var(--coral);
  color: #fff;
  font-weight: 700;
}

/* --- Booking card (branding strict) --- */
.booking-card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5em;
  max-width: 360px;
}

.booking-card__title {
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 1em;
}

.booking-card__go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--coral);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0.8em 1em;
  margin-bottom: 12px;
}

.booking-card__go-badge {
  background: #fff;
  color: var(--gorendezvous-blue);
  font-weight: 900;
  font-size: 12px;
  border-radius: 8px;
  border: 2px solid var(--gorendezvous-blue);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-card__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--coral);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0.7em 1em;
}

/* Bouton WhatsApp du hero (branding strict, couleur officielle #128c7e —
   jamais le corail du site), même famille .btn que « Prendre RV » à côté
   duquel il vit (hero.php, variant 'whatsapp') — même logique de couleur
   dédiée que booking-card/youtube-embed. */
.btn-whatsapp {
  background: #fff;
  color: #128c7e;
  border-color: #128c7e;
}

/* Fond blanc, texte/icône vert (Guillemette, 26/08/2026 — revenu sur le
   premier choix fond vert/texte blanc) : currentColor sur le SVG suit déjà
   .btn-whatsapp, redondant mais explicite. */
.btn-whatsapp,
.btn-whatsapp svg {
  color: #128c7e;
}

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

/* --- Barre latérale collante des pages thèmes/blogue (David, 23/07/2026) ---
   Cartes plus compactes que .booking-card standard (praticien/rdv) : le
   sidebar empile plusieurs cartes à la suite, la marge généreuse d'origine
   le rendait trop long (David, 23/07/2026). */
.theme-layout {
  display: grid;
  gap: 2rem;
}

.theme-sidebar__sticky {
  display: grid;
  gap: 1rem;
}

.theme-sidebar__sticky .booking-card {
  padding: 1.2em;
  /* Même bug que .satisfaction-badge un peu plus haut (Guillemette,
     26/08/2026) : .booking-card garde le max-width:360px de sa règle de
     base (site.css), jamais retiré dans la barre latérale — invisible sur
     la carte RV/Tarifs (aucune autre carte pour comparer) mais visible dès
     que la barre latérale s'élargit sur mobile au-delà de 360px : la carte
     « Nous contacter » restait plus étroite que le badge satisfaction et la
     photo d'équipe juste au-dessus, tous deux déjà en pleine largeur. */
  max-width: none;
}

.theme-sidebar__sticky .booking-card__title {
  margin-bottom: 0.6em;
}

.theme-sidebar__cta {
  width: 100%;
  justify-content: center;
}

/* Bloc « réseau » (Guillemette, 14/08/2026 — refonte des « barres
   transversales » des pages thématiques) : texte + photo collective des
   praticiens. D'abord traité comme une carte (fond blanc, ombre, même
   traitement que .booking-card), puis l'aplat retiré le même jour
   (Guillemette : « pas besoin d'un aplat blanc en haut, laisse le texte et
   la photo équipe sans fond ») — juste le texte et la photo, sans fond. */
.sidebar-team-card {
  text-align: center;
}

.sidebar-team-card__text {
  color: var(--navy);
  margin: 0 0 0.8em;
}

.sidebar-team-card__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* Un seul praticien plutôt qu'un collage (ES, Guillemette, 14/08/2026 :
   « uniquement la photo en rond de Nuria Perez de Leon ») — photo déjà
   ronde à la source, pas d'intérêt à l'étirer sur toute la largeur de la
   carte comme le collage réseau. */
.sidebar-team-card__photo--round {
  width: 140px;
  margin: 0 auto;
  border-radius: 50%;
}

/* Nom sous la photo (ES, Guillemette, 19/08/2026 — encadré descendu après les
   chiffres de satisfaction, la photo seule ne disait plus qui elle montre une
   fois éloignée du texte « Solutions Hypnose » du haut de la carte). */
.sidebar-team-card__name {
  margin: 0.6em 0 0;
  color: var(--navy);
  font-weight: 700;
}

.theme-sidebar__contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6em;
  /* Même taille que .theme-sidebar__network-links juste en dessous (David,
     5/08/2026 : « diminue la typo des numéros de téléphone comme le texte
     plus bas ») — les numéros ressortaient plus gros que « Consulter... »
     faute de taille déclarée ici (hérite du 1em du corps). */
  font-size: 0.9em;
}

.theme-sidebar__contacts li {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* Mini drapeaux (David, 5/08/2026) : plus petits que le .flag de 29×20px des
   liens de région du hero (core/assets/css/site.css, bloc « Petits drapeaux
   CSS »), garde les proportions (29:20). */
.theme-sidebar__contacts .flag {
  width: 22px;
  height: 15px;
}

/* Slot d'icône à largeur fixe devant chaque coordonnée (téléphone/enveloppe/
   WhatsApp/drapeau) — Guillemette, 26/08/2026 : garantit que le texte qui
   suit démarre toujours au même x, que la ligne montre un drapeau (22px,
   régions multiples, ex. com) ou l'icône générique (16px, région unique/
   courriel/WhatsApp) — les deux ne cohabitent jamais sur une même ligne
   (sinon l'icône générique s'ajoutait au drapeau existant : décalage visible
   entre le texte de la ligne téléphone et celui de la ligne courriel).
   Largeur calée sur .flag (le plus large des deux), l'icône plus petite est
   centrée dedans. Aucune couleur ici : hérite du contexte (navy en barre
   latérale, blanc/bleu clair en pied de page) — partagé entre les deux. */
.contact-icon-slot {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  flex-shrink: 0;
}

/* display:contents (Guillemette, 26/08/2026) : sur la ligne WhatsApp, icône
   et texte vivent tous deux dans le même <a> (toute la ligne cliquable) —
   sans ça, l'espacement entre eux ne suivrait pas le gap du <li>/<p> comme
   sur les lignes téléphone/courriel (icône et lien séparés, gap direct).
   display:contents efface la boîte du lien : ses enfants deviennent des
   items flex du parent comme les autres lignes, sans rien perdre du lien
   (la zone cliquable reste portée par les descendants, inchangée). */
.contact-icon-link {
  display: contents;
}

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

.theme-sidebar__network-links {
  list-style: none;
  margin: 0.7em 0 0;
  padding: 0.7em 0 0;
  border-top: 1px solid var(--gray-light);
  display: grid;
  gap: 0.4em;
  font-size: 0.9em;
}

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

/* Icône d'un lien libre (💻 devant « Consulter par vidéo ») : mobile seulement,
   la liste de liens n'a pas d'icônes en colonne sur ordinateur. */
.theme-sidebar__network-links .contact-icon-slot {
  display: none;
}

/* Mobile : une ligne par pays — drapeau, « Consulter au Québec → », numéro —
   puis « Consulter par vidéo » et le courriel dessous (David, 16/09/2026, essai
   sur Gestion du Stress). Les deux listes et les lignes de téléphone s’effacent
   (display: contents) pour que drapeau, lien et numéro deviennent des cellules
   de la grille de la carte ; data-region les apparie, order les range. Un pays
   absent (EN sans Maroc, ES Québec seul) laisse simplement sa ligne vide. */
@media (max-width: 959px) {
  .booking-card:has(> .theme-sidebar__network-links) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.6em;
    align-items: center;
  }

  .booking-card:has(> .theme-sidebar__network-links) > * {
    grid-column: 1 / -1;
    order: 20;
  }

  .booking-card:has(> .theme-sidebar__network-links) > .booking-card__title { order: 0; }

  .booking-card:has(> .theme-sidebar__network-links) > .theme-sidebar__contacts,
  .booking-card:has(> .theme-sidebar__network-links) > .theme-sidebar__network-links,
  .booking-card:has(> .theme-sidebar__network-links) .theme-sidebar__contacts > li[data-region] {
    display: contents;
  }

  .booking-card:has(> .theme-sidebar__network-links) [data-region] > .contact-icon-slot { grid-column: 1; }
  .booking-card:has(> .theme-sidebar__network-links) .theme-sidebar__network-links > li:not([data-region]) { display: contents; }
  .booking-card:has(> .theme-sidebar__network-links) .theme-sidebar__network-links > li:not([data-region]) > a { grid-column: 2 / -1; order: 10; }
  .booking-card:has(> .theme-sidebar__network-links) .theme-sidebar__network-links > li:not([data-region]) > .contact-icon-slot { display: flex; grid-column: 1; order: 10; }
  .booking-card:has(> .theme-sidebar__network-links) .theme-sidebar__network-links > li[data-region] { grid-column: 2; }
  .booking-card:has(> .theme-sidebar__network-links) [data-region] > a[href^="tel:"] { grid-column: 3; }
  .booking-card:has(> .theme-sidebar__network-links) .theme-sidebar__contacts > li:not([data-region]) { grid-column: 1 / -1; order: 11; }

  .booking-card:has(> .theme-sidebar__network-links) [data-region="ca"] > .contact-icon-slot { order: 1; }
  .booking-card:has(> .theme-sidebar__network-links) li[data-region="ca"]:not(:has(> .contact-icon-slot)) { order: 2; }
  .booking-card:has(> .theme-sidebar__network-links) [data-region="ca"] > a[href^="tel:"] { order: 3; }
  .booking-card:has(> .theme-sidebar__network-links) [data-region="fr"] > .contact-icon-slot { order: 4; }
  .booking-card:has(> .theme-sidebar__network-links) li[data-region="fr"]:not(:has(> .contact-icon-slot)) { order: 5; }
  .booking-card:has(> .theme-sidebar__network-links) [data-region="fr"] > a[href^="tel:"] { order: 6; }
  .booking-card:has(> .theme-sidebar__network-links) [data-region="ma"] > .contact-icon-slot { order: 7; }
  .booking-card:has(> .theme-sidebar__network-links) li[data-region="ma"]:not(:has(> .contact-icon-slot)) { order: 8; }
  .booking-card:has(> .theme-sidebar__network-links) [data-region="ma"] > a[href^="tel:"] { order: 9; }
}

.theme-sidebar__tarifs {
  list-style: none;
  margin: 0 0 0.8em;
  padding: 0;
  display: grid;
  gap: 0.5em;
}

.theme-sidebar__tarifs li {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-size: 0.9em;
}

.theme-sidebar__tarifs li span:last-child {
  font-weight: 700;
  color: var(--navy);
  /* Un libellé long (« 1ère séance (environ 1 h 15) ») poussait le prix à la
     ligne, « 155 » et « $ » séparés (fiche David Veilleux, 25/08/2026). */
  white-space: nowrap;
  margin-left: 0.8em;
}

/* …mais un tarif multi-devises n'est plus un prix court : « 135 a 185 CAD$ / 60€ a
   110€ / 800 dírhams » fait 296 px insécables, et poussait la carte de la barre
   latérale à 409 px dans un écran de 375 — donc toute la fiche en défilement
   horizontal (fiche ES de Nuria Pérez de León, mesuré le 10/09/2026). Le nowrap
   garde son intérêt en desktop, où la place ne manque pas ; sous 480 px le prix
   passe simplement sous son libellé. « 155 $ » y reste d'une pièce : il tient
   largement sur une ligne, ce que le nowrap protégeait. */
@media (max-width: 480px) {
  .theme-sidebar__tarifs li {
    flex-wrap: wrap;
  }

  .theme-sidebar__tarifs li span:last-child {
    white-space: normal;
    margin-left: 0;
  }
}

.theme-sidebar__tarifs-note {
  font-size: 0.85em;
  opacity: 0.75;
  margin: 0 0 0.6em;
}

.theme-sidebar__assurances {
  margin: 0.7em 0 0;
  padding: 0.7em 0 0;
  border-top: 1px solid var(--gray-light);
}

/* Logo réduit de 157 à 110 px (David, 02/09/2026) : dans la carte Tarifs il
   prenait plus de place que les prix qu'il accompagne. */
.theme-sidebar__assurances-logo {
  display: block;
  margin: 0.5em 0;
  width: 110px;
  height: auto;
}

/* --- Badge de satisfaction (satisfaction-badge.php) — mise en page complète
   de l'image de production « Satisfaction Total FR » (étoiles, « SATISFACTION :
   97 % », phrase de recommandation, légende), Guillemette 14/08/2026. --- */
.satisfaction-badge {
  background: #fff;
  border: 2px solid var(--coral);
  border-radius: 14px;
  padding: 0.8em 1em;
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
}

.satisfaction-badge__stars {
  color: var(--coral);
  margin: 0 0 0.3em;
  font-size: 0.9em;
}

.satisfaction-badge__headline {
  margin: 0 0 0.5em;
  line-height: 1.2;
}

.satisfaction-badge__headline-label {
  color: var(--navy);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.85em;
}

.satisfaction-badge__stat-num {
  color: var(--coral);
  font-weight: 900;
  font-size: 1.4em;
}

.satisfaction-badge__stat-num--inline {
  font-size: 1em;
}

.satisfaction-badge__recommandation {
  color: var(--navy);
  font-size: 0.85em;
  line-height: 1.35;
  margin: 0 0 0.5em;
}

.satisfaction-badge__caption {
  color: var(--ink-2);
  font-size: 0.7em;
  opacity: 0.85;
  margin: 0;
}

.theme-sidebar__social {
  margin: 0.7em 0 0;
  padding: 0.7em 0 0;
  border-top: 1px solid var(--gray-light);
}

.theme-sidebar__social-label {
  display: block;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4em;
}

.theme-sidebar__social-icons {
  display: flex;
  gap: 8px;
}

/* Lien d'inscription à la lettre, sous les icônes sociales (com FR, 23/09/2026).
   Hors de .theme-sidebar__social, qui porte déjà son filet de séparation : ici un
   simple retrait suffit, le bloc reste dans la même carte. */
.theme-sidebar__newsletter {
  margin: 0.7em 0 0;
  font-size: 0.9em;
  font-weight: 700;
}

.theme-sidebar__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
}

/* Symboles SVG plutôt que les abréviations FB/IG/IN/YT (David, 5/08/2026 :
   « mets leurs symboles dans les ronds ») — voir lib/social-icons.php.
   currentColor hérite le blanc du lien parent. */
.theme-sidebar__social-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

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

@media (min-width: 960px) {
  .theme-layout {
    grid-template-columns: 1fr 300px;
  }

  /* Bande sans barre latérale (Guillemette, 11/08/2026, page Anxiété — bandeau
     « Comment l'anxiété se manifeste ») : la grille garde .theme-layout au cas
     où le bloc voudrait une colonne 300px ailleurs sur la page, donc sans ce
     modificateur le contenu resterait coincé dans la 1re colonne avec un vide
     à droite. */
  .theme-layout--full {
    grid-template-columns: 1fr;
  }

  .theme-sidebar__sticky {
    /* hauteur du header collant (~76px) + respiration */
    position: sticky;
    top: 96px;
    /* Une barre plus haute que l'écran devenait inatteignable par le bas une fois
       collée (mesuré le 28/08/2026 sur la fiche de David : 1006 px de cartes pour
       486 px de fenêtre sur un portable 1366×768 — la carte coordonnées et le logo
       RITMA n'apparaissaient jamais). On la borne à la hauteur visible et on lui
       laisse son propre défilement : l'ascenseur ne se montre que si ça déborde. */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* --- Consent banner (Loi 25) --- */
.consent-banner {
  position: fixed;
  inset: auto 0 0 0;
  background: var(--navy);
  color: #fff;
  padding: 1em 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  z-index: 200;
}

.consent-banner[hidden] {
  display: none;
}

.consent-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- Boutons flottants du mobile (partials/call-button.php) ---
   Rangée fixe en bas à gauche : disque d'appel (sauf com), disque « Nous
   contacter » (David, 22/09/2026, en remplacement de Tawk.to), pastille RV.
   Le conteneur laisse passer les clics hors des boutons. z-index sous la
   bannière de consentement (200), qui doit rester au-dessus tant qu'aucun
   choix n'est fait. */
.cta-mobile {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  gap: 12px;
  align-items: center;
  pointer-events: none;
  z-index: 150;
}

.cta-mobile > * {
  pointer-events: auto;
}

/* Disques (appel, contact). Fond en --coral (#e06a56, le « rose orangé » de la
   charte — demande de Guillemette, 28/08/2026 : c'est le corail brut, pas
   --coral-txt, qui habillait déjà ce bouton en production, jusque dans le
   SVG du plugin WordPress remplacé ici). Exception assumée à la règle
   générale « --coral-txt partout où le corail est LU » (CLAUDE.md) : ce
   bouton ne porte pas de texte, seule une icône pleine sur un aplat, régie
   par le seuil non-texte de 3:1 (WCAG 1.4.11) et non le seuil texte de
   4,5:1 — #e06a56 sur blanc donne 3,3:1, conforme. */
.call-button {
  display: flex;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(36, 57, 88, 0.35);
}

/* Anneau de focus À L'INTÉRIEUR du disque corail (offset négatif) : le bouton
   est flottant, l'anneau par défaut se poserait sur ce qui passe DERRIÈRE lui —
   corail sur le marine du pied de page = 2,18:1, sous les 3:1 exigés d'un
   indicateur de focus. Contre son propre fond (blanc sur --coral, 3,3:1),
   l'anneau reste conforme quelle que soit la page en dessous (item 128,
   28/08/2026 ; fond passé à --coral le 28/08/2026, voir plus haut). */
.call-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
}

/* --- CTA de rendez-vous flottant (mobile) ---
   Pastille posée à DROITE des disques, sur les pages qui ont leur propre rendez-vous : la fiche
   praticien, où « Prendre RV avec [Prénom] » est enfermé derrière le burger
   (David, 01/09/2026). Elle mène au calendrier du praticien, pas à la page de
   prise de RV générale.

   Fond en --coral, comme le disque d'appel juste au-dessus : les deux pastilles
   flottent côte à côte, elles doivent être de la même couleur (David,
   02/09/2026, item 104). Écart AA assumé et non un oubli : la pastille porte un
   libellé, donc c'est le seuil texte de 4,5:1 qui s'appliquerait, et blanc sur
   #e06a56 plafonne à 3,30:1 (le --coral-txt #b8452f qu'elle portait avant
   donnait 5,34:1). David a tranché le corail de la charte contre le seuil, ici
   comme sur les 6 règles de bandeaux.css relevées au même item.

   min-width: 0 : la pastille rétrécit dans la rangée plutôt que de déborder.
   Le libellé est court par construction (praticien.rv_avec_court), l'ellipsis
   n'est le filet que du cas extrême : « RV avec Anne-Géraldine » sur 320 px. */
.rdv-button {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 18px;
  border-radius: 28px;
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(36, 57, 88, 0.35);
}

.rdv-button__texte {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rdv-button svg {
  flex: none;
}

/* Même raisonnement que .call-button:focus-visible — anneau à l'intérieur de la
   pastille, pour ne pas dépendre de ce qui passe derrière elle. */
.rdv-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
}

@media (max-width: 900px) {
  .cta-mobile {
    display: flex;
  }

  /* Dégagement du pied de page sous les boutons flottants : dans bandeaux.css,
     juste après son .site-footer — ici il était écrasé par ce dernier (chargé
     après, même spécificité), donc sans effet sur les 4 sites. */
}

@media print {
  .cta-mobile {
    display: none;
  }
}