/* ═══════════════════════════════════════════════════════════════
   Vanessa Bokanowski - Refonte premium
   Tokens issus du site source (thème Astra) + design Claude Design 1b
   ═══════════════════════════════════════════════════════════════ */

/* ─── Fontes locales ─── */
@font-face{
  font-family:'AGaramond';
  src:url('../fonts/AGaramondPro-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'AGaramond';
  src:url('../fonts/AGaramondPro-Italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Roboto';
  src:url('../fonts/roboto-300.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Roboto';
  src:url('../fonts/roboto-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Roboto';
  src:url('../fonts/roboto-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}

/* ─── Tokens ─── */
:root{
  --ink:#121212;
  --ink-soft:#3a3a3a;
  --ink-muted:#6f6a5f;
  --cream:#faf8f4;
  /* Gris clair des bandes separatrices : un cran plus soutenu que le
     beige du fond (#faf8f4). Vocabulaire arrete avec la cliente :
     « beige » = #faf8f4, « gris clair » = #e3e0da. */
  --sable:#e3e0da;
  --teal:#447583;
  --gold:#cab27a;
  /* Bleu clair du bouton WhatsApp flottant : --teal éclairci pour se
     détacher du fond crème sans virer au vert WhatsApp, hors palette
     ici. Contraste du blanc dessus : 4.6:1, suffisant pour une icône. */
  --wa:#5b97a8;
  --wa-fonce:#3d6b79;

  --font-display:'AGaramond', Georgia, serif;
  --font-body:'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

  --gut:72px;          /* gouttière horizontale desktop */
  /* Le hero occupe toute la fenêtre, sans plafond : l'ancien
     clamp(600px,100svh,900px) rendait la photo plus courte que l'écran
     dès 1080p. L'image est en object-fit:cover, elle rogne donc sur les
     côtés plutôt que de se déformer. Plancher de 600px conservé pour
     les fenêtres très basses (portables 13"), où le hero ne doit pas
     écraser la pagination. svh tient compte des barres mobiles. */
  --hero-h:max(600px, 100svh);
  --shell:1440px;      /* largeur maximale du site, centré au-delà */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* Défilement fluide pour toutes les ancres internes (« En savoir
     plus » vers les approches, liens du menu…). Neutralisé plus bas
     si le visiteur a demandé moins d'animations. */
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Toutes les cibles d'ancre dégagent la hauteur du header fixe. */
[id]{scroll-margin-top:140px}
/* Les titres ancres (sommaire des pages de contenu) portent l'ancre
   eux-memes. Un decalage negatif remonte la cible au-dela du haut de
   fenetre : le titre se cale tout en haut et la section precedente
   disparait entierement. Le header rappele ne masque rien, il se
   retire au defilement descendant. */
h2[id],h3[id]{scroll-margin-top:24px}
/* Premier titre de la page : on l'atteint avant que le header ne se
   soit retire du flux, il faut donc degager sa hauteur. Les titres
   suivants sont atteints en defilement descendant, header masque. */
.section--first > h2[id],
.section--first h2[id]:first-child,
.page__body > h2[id]:first-of-type{scroll-margin-top:132px}
/* Le bloc « Mes therapies » porte lui-meme 110px de marge interne :
   avec le decalage commun de 140px, l'ancre s'arretait bien au-dessus
   du titre et laissait voir la fin de la section precedente. Ici on ne
   veut qu'un filet d'air au-dessus du bloc encre, la hauteur du header
   rappele suffit. */
#therapies{scroll-margin-top:0}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ═══════════════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════════════ */
/* inline-flex : les boutons portent une icône WhatsApp devant leur
   libellé, il faut aligner les deux sur la même ligne de base. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:17px 36px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
/* L'icône hérite de la couleur du texte du bouton (currentColor). */
.btn__icon{
  width:16px;height:16px;
  flex:0 0 auto;
  fill:currentColor;
}
.btn--sm .btn__icon{width:13px;height:13px}
.btn--sm{padding:9px 18px;font-size:11.5px;letter-spacing:.19em}
.btn--primary{background:var(--teal);color:#fff}
.btn--primary:hover{background:#386272}
.btn--ghost{
  border:1px solid rgba(250,248,244,.65);
  color:var(--cream);
  /* Fond legerement assombri : le bouton reste lisible sur une image
     claire, et discret sur une image sombre. */
  background:rgba(18,18,18,.45);
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.btn--ghost:hover{border-color:var(--cream);background:rgba(18,18,18,.62)}

/* ═══════════════════════════════════════════════════════════════
   BLOC 1 · HERO
   ═══════════════════════════════════════════════════════════════ */
/* Pas de min-height ici : le max() de --hero-h porte déjà le plancher
   de 600px, un min-height séparé le contredirait. */
.hero{
  position:relative;
  height:var(--hero-h);
  background:var(--ink);
  overflow:hidden;
}

/* ─── Fondu enchaîné ─── */
.hero__slides{position:absolute;inset:0}
.hero__slide{
  position:absolute;inset:0;
  opacity:0;
  /* 1.1s de fondu pour 3s de slide : il reste ~1.9s de plein repos
     sur chaque image. Un fondu plus long ne se stabiliserait jamais. */
  transition:opacity 1.1s var(--ease);
  will-change:opacity;
}
.hero__slide.is-active{opacity:1}
.hero__slide img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 50%;
  /* Ken Burns très léger : donne de la vie au fondu sans distraire.
     Calé sur la durée de slide + le fondu. */
  transform:scale(1.05);
  transition:transform 4.2s linear;
}
.hero__slide.is-active img{transform:scale(1)}

/* Overlay piloté par slide via --overlay-* (défini en inline sur .hero__slide) */
/* Deux couches superposees :
   - un degrade vertical, qui assombrit surtout haut et bas ;
   - une nappe radiale centree sur le texte, qui garantit la lisibilite
     meme quand l'image est tres claire a cet endroit (une baie vitree,
     un mur blanc). Sans elle, le menu et les boutons disparaissent sur
     les zones lumineuses. */
.hero__slide::after{
  content:'';
  position:absolute;inset:0;
  background:
    /* Bandeau superieur : le menu et le logo s'y posent, il doit rester
       lisible meme sur une baie vitree en plein jour. */
    linear-gradient(180deg, rgba(18,18,18,.80) 0%, rgba(18,18,18,.42) 13%, transparent 24%),
    radial-gradient(ellipse 78% 62% at 50% 52%,
      rgba(18,18,18,.55), rgba(18,18,18,.18) 62%, transparent 78%),
    linear-gradient(180deg,
      rgba(18,18,18,var(--overlay-top,.74)),
      rgba(18,18,18,var(--overlay-mid,.42)) 45%,
      rgba(18,18,18,var(--overlay-bot,.80)));
}

/* L'image court sur toute la largeur, mais le contenu (logo, menu,
   titre, boutons) reste aligné sur la colonne de 1440px. */
.hero__inner{
  position:relative;
  height:100%;
  max-width:var(--shell);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
}

/* ─── Header ─── */
/* Par défaut le header est DANS le flux : au premier défilement il part
   vers le haut avec la page, comme le reste du contenu. Il n'est rappelé
   en position fixe qu'au moment où l'on remonte (.is-pinned), et repart
   si l'on redescend (.is-hidden).

   La barre occupe toute la largeur (c'est elle qui porte le fond) mais
   son CONTENU reste sur la colonne grâce au padding calculé : un fond
   borné à 1440px laisserait voir deux bandes plus sombres sur les côtés. */
.header{
  position:relative;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  /* max() : gouttière normale au centre, mais au-delà de 1440px le
     padding grandit pour que logo et menu restent sur la colonne. */
  padding:30px max(var(--gut), calc((100% - var(--shell)) / 2 + var(--gut)));
}

/* Rappelé : fixé en haut, fond flouté, un peu plus compact.

   La descente est jouée par une @keyframes et non par une transition :
   le passage de `position:relative` à `fixed` n'est pas animable, et une
   transition posée dans la même passe que le changement de position est
   ignorée par le navigateur (le header surgirait d'un coup). Une
   animation, elle, démarre toujours à son premier keyframe. */
/* Le padding reste celui de l'état normal : le resserrer décalait le
   logo de 14px, visible comme un saut au moment où le header du flux
   reprend la main en haut de page. C'est le fond flouté qui distingue
   l'état rappelé, pas la hauteur. */
.header.is-pinned{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:rgba(18,18,18,.86);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.75);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  animation:header-descend .6s cubic-bezier(.16,.84,.32,1) both;
}

/* Deux animations distinctes plutôt qu'une animation + une transition :
   couper l'animation d'entrée (`animation:none`) appliquait la position
   finale d'un coup, avant même que la transition ne démarre - d'où une
   disparition brutale. Chaque sens a désormais sa propre @keyframes. */
@keyframes header-descend{
  from{transform:translateY(-100%);opacity:0}
  to  {transform:translateY(0);opacity:1}
}
@keyframes header-remonte{
  from{transform:translateY(0);opacity:1}
  to  {transform:translateY(-100%);opacity:0}
}

/* Reparti vers le haut parce qu'on redescend. */
.header.is-pinned.is-hidden{
  animation:header-remonte .48s cubic-bezier(.5,0,.75,0) both;
}
.header__logo img{
  width:250px;
  /* height:auto est indispensable : les attributs width/height du HTML
     (poses pour eviter le decalage de mise en page) imposeraient sinon
     la hauteur intrinseque du SVG, soit 248px de header. */
  height:auto;
  filter:invert(1) brightness(1.15);
}

.nav{display:flex;align-items:center;gap:34px}
/* Le bouton encadré est plus haut que les liens (39px vs 23px) : centrés
   ensemble, leurs textes ne coïncident pas. On le remonte de la moitié
   du padding-bottom des liens pour aligner les lignes de base. */
.nav > .btn{margin-top:-3px}
.nav__link{
  font-size:11.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--cream);
  /* Le menu se pose sur l'image du hero : une ombre discrete le detache
     des zones claires sans alourdir le rendu sur fond sombre. */
  text-shadow:0 1px 10px rgba(0,0,0,.6);
  padding-bottom:3px;
  border-bottom:1.5px solid transparent;
  transition:border-color .3s var(--ease);
}
.nav__link:hover{border-bottom-color:rgba(202,178,122,.6)}
/* Le filet doré signale la page courante, rien d'autre : « Approches »
   ne le porte donc que sur la page Approches elle-même. */
.nav__link.is-current{border-bottom-color:var(--gold)}

/* ─── Contenu ─── */
/* ─── Apparition du texte du hero ───────────────────────────────
   Chaque element monte de quelques pixels en se revelant, dans l'ordre
   de lecture. Le decalage entre eux est court : l'ensemble doit se
   poser en un peu plus d'une seconde, sans faire attendre.
   L'animation part d'un etat visible (opacity:1 par defaut) : si le CSS
   se charge sans le JS, ou si le visiteur refuse les animations, le
   texte reste simplement affiche. */
@keyframes hero-apparition{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

.hero__eyebrow,
.hero__quote,
.hero__actions{
  animation:hero-apparition 1.15s var(--ease) both;
}
.hero__eyebrow{animation-delay:.15s}
.hero__quote{animation-delay:.42s}
.hero__actions{animation-delay:.78s}

/* La citation et sa signature se detachent legerement l'une de l'autre :
   la parole d'abord, l'auteur ensuite. */
.hero__cite{
  animation:hero-apparition 1.05s var(--ease) both;
  animation-delay:.95s;
}

.hero__content{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0 var(--gut);
}
.hero__eyebrow{
  margin:0 0 40px;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
}

/* Citation unique : la phrase de Peter Levine remplace la phrase
   cumulative en 5 segments (archive : 2026-08-19-hero-carousel). */
/* Contenu réservé aux lecteurs d'écran et aux moteurs de recherche :
   présent dans le document, invisible à l'écran. Ne jamais utiliser
   display:none, qui le retirerait aussi de l'arbre d'accessibilité. */
/* Selecteur de langue : les deux langues cote a cote, separees d'un
   filet. La courante est en dore et n'est pas cliquable. */
.nav__langs{
  display:inline-flex;
  align-items:center;
  gap:7px;
  align-self:center;
  /* Memes metriques que .nav__link, y compris le padding-bottom qui
     porte le soulignement : les lignes de base coincident exactement. */
  font-size:11.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  padding-bottom:3px;
}
/* La langue disponible est en blanc plein, comme les entrees du menu :
   a 60 % d'opacite elle etait illisible sur les zones claires de l'image. */
.nav__lang{color:var(--cream);opacity:1;transition:color .25s var(--ease)}
a.nav__lang:hover{color:var(--gold)}
.nav__lang.is-current{color:var(--gold)}
.nav__langs-sep{color:var(--cream);opacity:.55;font-weight:300}

/* .eyebrow porte par un h2 : le titre reste discret visuellement mais
   la hierarchie des titres devient correcte (les cartes en h3 ont
   desormais un h2 parent). */
/* Porte par un h2, l'intitule annonce une section entiere : il garde
   l'aspect discret d'un surtitre mais avec un peu plus de presence. */
h2.eyebrow{font-weight:inherit;line-height:inherit;font-size:15px;letter-spacing:.22em}


/* ─── Sous-menu Thérapies (restauré le 19/08/2026, une colonne) ───
   Repris de _archive/2026-08-19-sous-menu-mega/, adapté : le panneau
   ne porte plus qu'une colonne (les spécialités sont en brouillon). */

.nav__group{position:relative}
/* display:flex (pas inline-flex) : le lien garde la même boîte que les
   autres .nav__link, donc la même ligne de base. */
.nav__link--parent{display:flex;align-items:center;gap:9px}
.nav__chevron{
  /* flex-shrink:0 + boîte carrée sans marge : le chevron ne modifie pas
     la hauteur du lien, sinon le texte descend de quelques pixels et
     « Approches » se désaligne du reste du menu. */
  flex:0 0 auto;
  width:6px;height:6px;
  border-right:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
  transform:rotate(45deg) translateY(-1px);
  transition:transform .3s var(--ease);
}
/* Ouvert : le chevron pointe vers le haut. Le translateY est appliqué
   avant la rotation, d'où le +1px pour compenser l'inversion. */
.nav__group:hover .nav__chevron,
.nav__group.is-open .nav__chevron{transform:rotate(-135deg) translateY(-1px)}

/* ─── Mega-menu Approches (2 colonnes) ─── */
.mega{
  position:absolute;
  top:100%;
  right:-32px;
  z-index:40;
  width:460px;
  /* Le padding-top garde le survol continu entre le lien et le panneau ;
     le fond visuel est porté par ::before, en retrait de cette zone. */
  padding-top:20px;
  display:grid;
  grid-template-columns:1fr;
  text-transform:none;
  letter-spacing:normal;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mega::before{
  content:'';
  position:absolute;
  top:20px;left:0;right:0;bottom:0;
  background:rgba(15,15,15,.97);
  border-top:1px solid var(--gold);
  box-shadow:0 44px 90px -34px rgba(0,0,0,.7);
}
.nav__group:hover .mega,
.nav__group.is-open .mega{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.mega__main,
.mega__aside{position:relative;display:flex;flex-direction:column}
.mega__main{padding:34px 36px 30px}
.mega__aside{
  padding:34px 32px 30px;
  background:rgba(250,248,244,.05);
  border-left:1px solid rgba(202,178,122,.2);
}

.mega__label{
  margin:0 0 22px;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(250,248,244,.45);
}

/* Les 3 approches numérotées */
.mega__item{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:18px;
  padding:16px 0;
  border-top:1px solid rgba(202,178,122,.2);
  transition:background .25s var(--ease);
}
.mega__item:last-of-type{border-bottom:1px solid rgba(202,178,122,.2)}
.mega__item:hover{background:rgba(202,178,122,.07)}
.mega__num{
  font-family:var(--font-display);
  font-size:19px;
  line-height:1.2;
  color:var(--gold);
}
.mega__title{
  display:block;
  margin-bottom:5px;
  font-family:var(--font-display);
  font-size:23px;
  line-height:1.25;
  color:var(--cream);
}
.mega__desc{
  display:block;
  font-size:13.5px;
  line-height:1.6;
  color:rgba(250,248,244,.6);
}

/* Colonne de droite : motifs de consultation */
.mega__list{display:flex;flex-direction:column}
.mega__list a{
  padding:9px 0;
  font-size:14.5px;
  color:rgba(250,248,244,.85);
  border-bottom:1px solid rgba(250,248,244,.1);
  transition:color .25s var(--ease);
}
.mega__list a:last-child{border-bottom:0}
.mega__list a:hover{color:var(--gold)}

.mega__cta{
  margin-top:auto;
  padding-top:20px;
  font-size:11px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--gold);
  transition:opacity .25s var(--ease);
}
.mega__cta:hover{opacity:.7}


/* Duree et tarif en pied de chaque therapie, sur la page dediee.
   Meme traitement que sur l'accueil : petites capitales dorees. */
.therapie__meta{
  margin-top:26px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
}

/* Credit du concepteur : discret, il ferme le pied de page sans
   concurrencer les mentions legales. */
.footer__credit{
  margin:0;
  flex:1 0 100%;
  padding-top:22px;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--ink-muted);
  text-align:center;
}
.footer__credit a{color:inherit;border-bottom:1px solid currentColor;padding-bottom:1px}
.footer__credit a:hover{color:var(--gold)}

.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;
}

.hero__quote{margin:0}
.hero__title{
  /* Le H1 est desormais masque visuellement : la citation est un <p>,
     il faut donc lui redonner explicitement la police de titrage. */
  margin:0 0 22px;
  max-width:900px;
  font-family:var(--font-display);
  font-size:44px;
  font-weight:400;
  line-height:1.3;
  color:var(--cream);
  text-wrap:balance;
}
.hero__cite{
  display:block;
  margin:0 0 40px;
  font-size:12px;
  font-style:normal;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#e0c88f;
  /* Ombre portee : la signature reste lisible quelle que soit la zone
     de l'image qui passe derriere (les escaliers eclaires notamment). */
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 2px 16px rgba(0,0,0,.6);
}

/* margin-bottom : dégage les boutons du bas du hero */
.hero__actions{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:60px;
}


/* ═══════════════════════════════════════════════════════════════
   ÉLÉMENTS PARTAGÉS
   ═══════════════════════════════════════════════════════════════ */
.eyebrow{
  margin:0 0 22px;
  font-size:13px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--teal);
}
.link-underline{
  font-size:11.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--teal);
  border-bottom:1px solid rgba(68,117,131,.4);
  padding-bottom:4px;
  transition:border-color .3s var(--ease);
}
.link-underline:hover{border-bottom-color:var(--teal)}

/* ─── Signature : slogan de marque, entre le hero et À propos ───
   Distincte des citations d'auteurs (voir plus bas) : filets dorés au
   lieu de guillemets, taille plus modeste. Le contraste entre les deux
   crée la hiérarchie : signature discrète, citations en grand. */
.signature{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:54px var(--gut);
  /* Bande separatrice : gris clair sur le beige du fond, fermee par un filet
     dore. Le fond deborde la colonne de 1440px (.shell) pour courir sur
     toute la largeur, comme le pied de page. */
  background:var(--sable);
  border-bottom:1px solid var(--gold);
  max-width:none;
  padding-left:max(var(--gut), calc((100% - var(--shell)) / 2 + var(--gut)));
  padding-right:max(var(--gut), calc((100% - var(--shell)) / 2 + var(--gut)));
}
.signature__rule{
  width:60px;height:1px;
  background:rgba(202,178,122,.9);
  flex:0 0 auto;
}
.signature__text{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:26px;
  line-height:1.3;
  color:var(--ink);
  text-align:center;
  /* Tient sur une seule ligne : un slogan coupé en deux perd sa force. */
  white-space:nowrap;
}

/* Variante avec auteur : même registre visuel (filets dorés, taille
   modeste) mais la citation peut revenir à la ligne, elle est trop
   longue pour tenir sur une seule. */
.signature--quote{align-items:center}
.signature__block{margin:0;text-align:center}
.signature--quote .signature__text{
  white-space:normal;
  max-width:46ch;
  margin:0 0 12px;
}
.signature__author{
  font-style:normal;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--teal);
}

/* ═══════════════════════════════════════════════════════════════
   CITATIONS
   Le site actuel en compte 6, toutes à conserver (cf. CITATIONS.md).
   Deux variantes : --inline dans le flux d'un texte, --feature en
   bandeau autonome.
   ═══════════════════════════════════════════════════════════════ */
.quote{margin:0}
.quote p{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--ink);
}
.quote cite{
  font-style:normal;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--teal);
}

/* Dans le flux : filet doré à gauche, plus discret */
.quote--inline{
  margin:34px 0 0;
  padding-left:26px;
  border-left:2px solid rgba(202,178,122,.85);
}
.quote--inline p{font-size:19px;line-height:1.55}
/* Au milieu d'un corps de texte, la citation respire aussi en dessous ;
   collée sous un titre de section, elle n'ajoute pas d'air au-dessus. */
.page__body .quote--inline{margin:34px 0}
.section__title + .quote--inline{margin-top:0}

/* Bandeau autonome, centré : sépare deux sections. Pas de filet, c'est
   la respiration verticale qui marque la coupure. */
.quote-band{
  max-width:var(--shell);
  margin-inline:auto;
  padding:96px var(--gut);
  text-align:center;
}
.quote--feature p{
  margin:0 auto 22px;
  max-width:30ch;
  font-size:40px;
  line-height:1.4;
}
/* Guillemets français ajoutés en CSS : toutes les citations en bandeau
   les portent, sans avoir à les écrire dans le HTML. */
.quote--feature p::before{content:'« '}
.quote--feature p::after{content:' »'}

/* ═══════════════════════════════════════════════════════════════
   PAGES DE CONTENU
   Hero court avec fil d'Ariane, puis sommaire + corps de texte.
   ═══════════════════════════════════════════════════════════════ */
.pagehero{
  position:relative;
  height:520px;
  min-height:420px;
  background:var(--ink);
  overflow:hidden;
}
.pagehero__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 40%;
}
/* Voile réglable par page via --veil-top/--veil-bot (inline sur .pagehero),
   comme --overlay-* sur les slides du hero : les images claires (colombe)
   demandent plus d'assombrissement que les sombres (bibliothèque). */
.pagehero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(18,18,18,var(--veil-top,.7)),
    rgba(18,18,18,var(--veil-bot,.5)));
}
.pagehero__inner{
  position:relative;
  height:100%;
  max-width:var(--shell);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
}
/* Titre et chapô plaqués en bas du hero, sur deux colonnes.
   align-items:end aligne leurs lignes de base par le bas. */
.pagehero__title{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:end;
  padding:0 var(--gut) 60px;
}
.pagehero__title h1{
  margin:0;
  max-width:14ch;
  font-size:72px;
  line-height:1.06;
  color:var(--cream);
}
/* Filet doré à gauche, texte clair : le chapô est sur l'image. */
.pagehero__lead{
  margin:0 0 12px;
  padding-left:30px;
  border-left:1px solid rgba(202,178,122,.75);
  font-size:17.5px;
  line-height:1.85;
  color:rgba(250,248,244,.85);
}

.breadcrumb{
  margin-bottom:22px;
  display:flex;
  gap:10px;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.breadcrumb a{transition:color .25s var(--ease)}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb span[aria-hidden]{color:var(--gold)}

/* ─── Grille sommaire + corps ─── */
/* .page.shell et non .page seul : WordPress ajoute la classe « page » au
   <body> des pages, qui deviendrait alors lui-meme une grille et
   comprimerait tout le site dans deux colonnes. Voir docs/recette-parite.md. */
.page.shell{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:0 96px;
  padding:80px var(--gut) 110px;
}

/* Sommaire collant : il suit la lecture sans occuper d'espace fixe.
   top dégage la hauteur du header rappelé (119px) : sinon le sommaire
   se colle en haut de fenêtre et passe dessous. La valeur est fixe pour
   que rien ne saute quand le header apparaît ou disparaît. */
.toc{
  position:sticky;
  top:142px;
  align-self:start;
}
.toc__label{
  margin:0 0 18px;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.toc__nav{
  display:flex;
  flex-direction:column;
  gap:13px;
  padding-left:16px;
  border-left:1px solid rgba(18,18,18,.14);
}
.toc__link{
  font-size:14px;
  line-height:1.4;
  color:var(--ink);
  transition:color .25s var(--ease);
}
.toc__link:hover{color:var(--teal)}
/* Section en cours de lecture, mise à jour par le JS */
.toc__link.is-active{color:var(--teal)}

.toc__cta{
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid rgba(18,18,18,.12);
}
.toc__question{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:19px;
  color:var(--ink);
}

/* ─── Corps de texte ─── */
/* container-type : rend `cqi` (1% de la largeur du conteneur) utilisable
   dans les titres, pour qu'ils suivent la colonne et non la fenêtre. */
.page__body{max-width:74ch;container-type:inline-size}
.page__lead{
  margin:0 0 52px;
  font-family:var(--font-display);
  font-size:30px;
  line-height:1.5;
  color:var(--ink);
}
.page__body p{
  margin:0 0 24px;
  font-size:17px;
  line-height:1.9;
  color:var(--ink-soft);
}

.section{
  padding-top:44px;
  margin-bottom:72px;
  border-top:1px solid rgba(18,18,18,.14);
  /* scroll-margin : dégage la hauteur du header rappelé (119px), sans
     plus : au-delà, le titre visé arrive trop bas et laisse un vide
     au-dessus de lui. La section porte déjà 44px de padding-top. */
  scroll-margin-top:76px;
}
/* La première section ouvre le corps : ni filet ni espace au-dessus. */
.section--first{padding-top:0;border-top:0}
.section--last{margin-bottom:0}
.section__head{
  display:flex;
  align-items:baseline;
  gap:22px;
  margin-bottom:22px;
}
.section__num{
  font-family:var(--font-display);
  font-size:30px;
  line-height:1;
  color:var(--gold);
}
/* clamp : le titre s'adapte à la largeur de la colonne plutôt que de
   passer sur deux lignes. « Pourquoi ces trois approches ensemble ? »
   est le plus long : il tient à 38px dans les 656px disponibles. */
.section__title{
  margin:0 0 22px;
  font-size:clamp(27px, 5.8cqi, 44px);
  line-height:1.12;
  color:var(--ink);
  text-wrap:balance;
}
.section__head .section__title{margin-bottom:0}
.section__sub{
  display:block;
  margin-top:4px;
  font-style:italic;
  font-size:26px;
  color:var(--ink-muted);
}
.section__img{
  width:100%;
  height:340px;
  object-fit:cover;
  margin-bottom:26px;
}
.section__img--diagram{
  height:auto;
  object-fit:contain;
}

/* Passage mis en exergue, encadré de filets dorés */
.pull{
  /* Le filet du bas doit respirer autant que celui du haut : sans marge
     basse, le paragraphe suivant venait s'y coller. */
  margin:36px 0 34px !important;
  padding:28px 0;
  border-top:1px solid rgba(202,178,122,.6);
  border-bottom:1px solid rgba(202,178,122,.6);
  font-family:var(--font-display);
  font-size:26px !important;
  line-height:1.5 !important;
  color:var(--ink) !important;
}

/* ─── Balises nues dans le corps de texte ───
   Règle de compatibilité WordPress : dans une zone de contenu éditable,
   Gutenberg produit du HTML sans classes (p, h3, ul, blockquote…). On
   style donc les balises elles-mêmes, jamais des classes maison, pour
   que le même contenu s'affiche à l'identique après la migration. */
/* Intertitre nu d'article (sortie directe de Gutenberg, sans classe ni
   <section> englobante) : filet + air, échelle sous le titre de page. */
.page__body > h2:not([class]){
  margin:56px 0 20px;
  padding-top:40px;
  border-top:1px solid rgba(18,18,18,.14);
  font-size:clamp(25px, 4.6cqi, 34px);
  line-height:1.22;
  color:var(--ink);
  text-wrap:balance;
}
/* En ouverture de corps (pages légales), pas de filet ni d'air au-dessus */
.page__body > h2:not([class]):first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.page__body h3{
  margin:36px 0 14px;
  font-size:23px;
  line-height:1.3;
  color:var(--ink);
}
.page__body p a:not(.btn):not(.link-underline),
.page__body li a{
  color:var(--teal);
  border-bottom:1px solid rgba(68,117,131,.35);
  transition:border-color .25s var(--ease);
}
.page__body p a:not(.btn):not(.link-underline):hover,
.page__body li a:hover{border-bottom-color:var(--teal)}
.page__body ul{
  margin:0 0 24px;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.page__body ul li{
  position:relative;
  padding-left:28px;
  font-size:16.5px;
  line-height:1.7;
  color:var(--ink-soft);
}
/* Tiret doré en guise de puce : plus proche du registre typographique
   du site qu'un disque noir. */
/* Un point plutot qu'un tiret : le tiret long tirait l'oeil vers la
   marge et alourdissait les listes de formation. */
.page__body ul li::before{
  content:'';
  position:absolute;
  left:3px;
  top:.62em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
}
/* Citation sans classe (sortie Gutenberg) : même rendu que .quote--inline */
.page__body blockquote:not([class]){
  margin:34px 0;
  padding-left:26px;
  border-left:2px solid rgba(202,178,122,.85);
}
.page__body blockquote:not([class]) p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:19px;
  line-height:1.55;
  color:var(--ink);
}
/* Note de bas de page, crédits : discret */
.page__body small,
.page__body .footnote{
  display:block;
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid rgba(18,18,18,.12);
  font-size:13px;
  line-height:1.6;
  color:var(--ink-muted);
}

/* ─── Variantes du hero de page ─── */
/* Sans image : fond encre uni, hauteur naturelle. Pour les pages
   éditoriales (articles, légales) qui n'ont pas d'image dédiée. */
.pagehero--plain{height:auto;min-height:0}
.pagehero--plain .pagehero__title{padding-top:64px}
.pagehero--plain .pagehero__title h1{
  font-size:clamp(40px, 4.6vw, 62px);
  max-width:22ch;
}
/* Titre seul, sans chapô en seconde colonne */
.pagehero__title--single{grid-template-columns:1fr}
/* Ligne de métadonnées sous le titre (date, auteur d'un article) */
.pagehero__meta{
  margin:26px 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(250,248,244,.65);
}
.pagehero__meta .sep{
  width:1px;height:11px;
  background:rgba(250,248,244,.25);
}

/* ─── Page à colonne unique (légales, articles sans sommaire) ───
   Pas de .shell ici : .page--narrow porte sa propre largeur maximale.
   (.shell est déclaré en fin de fichier et gagnerait sinon.) */
.page--narrow{
  display:block;
  max-width:920px;
  margin-inline:auto;
}

/* Encadré d'avertissement éditorial (textes légaux en attente) */
.notice{
  margin:0 0 44px;
  padding:22px 28px;
  border:1px solid rgba(202,178,122,.55);
  background:rgba(202,178,122,.08);
  font-size:14.5px;
  line-height:1.75;
  color:var(--ink-soft);
}
.notice strong{font-weight:400;color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════
   LISTE DES ARTICLES
   Même mécanique de séparateurs que la grille des spécialités :
   gap de 1px sur fond gris entre des cartes crème.
   ═══════════════════════════════════════════════════════════════ */
.articles{padding:80px var(--gut) 110px}
.articles__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:rgba(18,18,18,.12);
}
.card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  padding:46px 44px 42px;
  background:var(--cream);
  transition:background .3s var(--ease);
}
a.card:hover{background:#f2efe8}
.card__date{
  margin:0;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--teal);
}
.card__title{
  margin:0;
  font-size:30px;
  line-height:1.22;
  color:var(--ink);
  text-wrap:balance;
}
.card__excerpt{
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:var(--ink-muted);
}
/* Le lien « Lire l'article » se pose en bas de carte, à hauteur égale
   quel que soit le volume du texte au-dessus. */
.card .link-underline,
.card__soon{margin-top:auto}
.card__soon{
  padding-top:8px;
  font-size:11px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-muted);
}

/* ═══════════════════════════════════════════════════════════════
   PAGE CONTACT
   ═══════════════════════════════════════════════════════════════ */
.contactpage{padding:80px var(--gut) 110px}
.contactpage__intro{
  max-width:62ch;
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:28px;
  line-height:1.5;
  color:var(--ink);
}
.contactpage__text{
  max-width:68ch;
  margin:0 0 36px;
  font-size:16.5px;
  line-height:1.85;
  color:var(--ink-soft);
}

/* Prise de rendez-vous. Le bouton porte le libelle ; la precision du
   canal et le numero se posent a sa droite, alignes sur son axe. */
.rdv{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 20px;
  margin:0 0 34px;
}
.rdv .btn{flex:0 0 auto}
.rdv__label{
  font-size:15px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
.rdv__tel{
  font-size:15px;
  letter-spacing:.06em;
  color:var(--ink-muted);
  /* tabular-nums : les chiffres gardent la meme chasse, le numero ne
     tressaute pas d'une page a l'autre. */
  font-variant-numeric:tabular-nums;
}

/* Sur mobile le bouton WhatsApp ouvre directement la conversation :
   afficher le numero en plus n'apporte rien. La mention passe sous le
   bouton, la ligne devenant trop etroite. */
@media (max-width:700px){
  .rdv__tel{display:none}
  .rdv{gap:12px}
  .rdv .btn{width:100%;justify-content:center}
}

.contactgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(18,18,18,.12);
  margin-top:56px;
}
.contactgrid__cell{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:38px 34px;
  background:var(--cream);
}
.contactgrid__label{
  margin:0 0 12px;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--teal);
}
.contactgrid__cell p,
.contactgrid__cell address{
  margin:0;
  font-style:normal;
  font-size:15.5px;
  line-height:1.8;
  color:var(--ink-soft);
}
.contactgrid__cell a{
  color:var(--teal);
  transition:opacity .25s var(--ease);
}
.contactgrid__cell a:hover{opacity:.7}

/* ═══════════════════════════════════════════════════════════════
   BLOC 2 · À PROPOS
   ═══════════════════════════════════════════════════════════════ */
/* Photo à 320px (480px de haut en 2:3), contre 560px dans le design
   d'origine. Le texte se centre sur cette hauteur. */
.about{
  display:grid;
  grid-template-columns:320px 1fr;
  /* stretch : les deux colonnes font la même hauteur, celle du plus grand
     des deux contenus. Le texte se centre alors dans cette hauteur et son
     bas retombe sur celui de la photo, quelle que soit la largeur. */
  align-items:stretch;
  /* La gouttière aligne la photo sur le logo : un seul axe vertical pour
     le logo, la photo et le texte, jusqu'au bord du bouton Rendez-vous. */
  gap:0 56px;
  /* Le rythme vertical de la section est porté ici, jamais sur les
     colonnes : elles doivent commencer et finir exactement ensemble. */
  padding:44px var(--gut);
}
/* La colonne ne s'étire pas sur toute la hauteur du texte : à 280px de
   large, une image pleine hauteur donnerait un rectangle de 900px, trop
   étroit et trop long. On garde le ratio du portrait (2:3).

   Le fond reprend le dégradé du bord gauche de la photo (relevé au pixel
   sur l'image : sombre en haut, gris clair au milieu, brun en bas). La
   photo se fond ainsi dans son support au lieu de découper un rectangle
   blanc dans la page. */
/* Plus de dégradé : c'est le bloc citation qui structure désormais la
   page, la photo n'a plus besoin d'être fondue dans son support.

   La photo remplit toute la hauteur de sa colonne (fixée par le texte,
   plus long) : sans ça, elle s'arrêterait à sa hauteur naturelle en
   laissant un vide de plusieurs dizaines de pixels sous elle. */
.about__media{
  margin:0;
  display:flex;
}
.about__media img{
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  object-position:50% 8%;
}
/* Le texte occupe toute la largeur restante de la colonne, jusqu'au bord
   aligné sur le bouton Rendez-vous.

   AUCUN padding vertical ici : il créerait un vide dans la colonne texte,
   la photo (qui remplit sa colonne) descendrait alors plus bas que le
   badge. Le haut et le bas des deux colonnes coïncident exactement ;
   l'air autour de la section est porté par .about. */
.about__body{
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.about__title{
  margin:0 0 28px;
  font-size:52px;
  line-height:1.08;
  color:var(--ink);
}
/* Le sous-titre est un libelle, pas un second titre : il ne doit pas
   concurrencer le nom. Sans italique et nettement plus petit, la
   hierarchie se lit d'un coup et le decalage optique entre le « V » du
   nom et la ligne du dessous disparait. */
.about__subtitle{
  display:block;
  margin-top:10px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:400;
  font-style:normal;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal);
}
.about__lead{
  margin:0 0 22px;
  font-size:17.5px;
  line-height:1.85;
  color:var(--ink-soft);
}
.about__text{
  margin:0 0 20px;
  font-size:16px;
  line-height:1.85;
  color:var(--ink-soft);
}

/* Le lien suit le texte plutot que d'attendre en pied de bloc : il se
   lit dans la foulee du paragraphe qu'il prolonge. */
.about__more{
  margin:0 0 34px;
}

/* nowrap : badge, lien et mentions restent sur une seule ligne. Les
   mentions absorbent la place restante via flex:1. */
.about__footer{display:flex;align-items:center;gap:22px;flex-wrap:nowrap}
/* height:auto indispensable : sans lui, les attributs width/height du
   HTML imposent leur hauteur et le badge (ratio 4.7:1) est ecrase. */
.about__badge{width:198px;height:auto;flex:0 0 auto}
.about__footer .link-underline{flex:0 0 auto;white-space:nowrap}

/* Mentions légales sur la même ligne que le badge et « Mon parcours ».
   Séparateur vertical à gauche plutôt qu'un filet horizontal : elles
   font partie de la ligne, elles ne la referment pas. */
.about__meta{
  margin:0;
  padding-left:22px;
  border-left:1px solid rgba(18,18,18,.12);
  display:flex;
  flex:1 1 auto;
  flex-wrap:wrap;
  gap:1px 18px;
  font-size:10.5px;
  line-height:1.45;
  color:var(--ink-muted);
}
.about__meta-row{display:flex;gap:4px}
.about__meta dt{flex:0 0 auto}
.about__meta dt::after{content:' :'}
.about__meta dd{margin:0;color:var(--ink-soft)}

/* ═══════════════════════════════════════════════════════════════
   BLOC 3 · LES TROIS APPROCHES
   ═══════════════════════════════════════════════════════════════ */
/* Le fond encre court sur toute la largeur ; le contenu reste dans la
   colonne de 1440px, aligné sur le logo et le bouton Rendez-vous. */
.approaches{background:var(--ink)}
.approaches__inner{padding:110px var(--gut)}

.approaches__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:32px;
  padding-bottom:26px;
  border-bottom:1px solid rgba(202,178,122,.4);
  margin-bottom:60px;
}
.approaches__title{
  margin:0;
  font-size:50px;
  line-height:1.1;
  color:var(--cream);
}

.approaches__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:52px 60px;
}

/* Le chiffre romain sert de repère visuel, pas de texte : il est en
   aria-hidden dans le HTML pour ne pas être lu à voix haute. */
.approach__num{
  margin:0 0 22px;
  font-family:var(--font-display);
  font-size:44px;
  line-height:1;
  color:rgba(202,178,122,.85);
}
.approach__title{
  margin:0 0 18px;
  font-size:30px;
  line-height:1.2;
  color:var(--cream);
}
/* Sous-titre de l'approche (« Respiration consciente connectée ») :
   sur sa propre ligne, en italique, plus discret. */
.approach__sub{
  display:block;
  margin-top:4px;
  font-style:italic;
  font-size:21px;
  color:rgba(250,248,244,.6);
}
.approach__text{
  margin:0 0 22px;
  font-size:15.5px;
  line-height:1.85;
  color:rgba(250,248,244,.72);
}

/* Accroche en tête de carte (thérapie individuelle, couple) */
.approach__hook{
  margin:0 0 14px;
  font-family:var(--serif);
  font-size:19px;
  font-style:italic;
  line-height:1.45;
  color:var(--gold);
}
/* Durée et tarif en pied de carte */
.approach__meta{
  margin:16px 0 0;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
}
/* Citation posée sur le fond encre du bloc thérapies */
.signature--on-ink{margin-top:70px;padding:0;align-items:flex-start}
/* Les filets se calent sur la premiere ligne de la citation plutot que
   sur le milieu du bloc (le nom de l'auteur tire le centre vers le bas). */
.signature--on-ink .signature__rule{margin-top:.85em}
.signature--on-ink .signature__text{color:var(--cream)}
.signature--on-ink .signature__author{color:var(--gold)}

.link-gold{
  font-size:11.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--gold);
  transition:opacity .25s var(--ease);
}
.link-gold:hover{opacity:.68}

/* ═══════════════════════════════════════════════════════════════
   BLOC 4 · CE POUR QUOI L'ON ME CONSULTE
   ═══════════════════════════════════════════════════════════════ */
.specialties{padding:100px var(--gut)}

/* Les séparateurs sont obtenus par un gap de 1px sur fond gris : les
   cartes en crème laissent apparaître le fond entre elles. Une seule
   déclaration donne toutes les lignes intérieures, sans bordure sur
   les bords extérieurs de la grille. */
/* En-tete du bloc articles : intitule a gauche, lien vers la liste
   complete a droite, alignes sur la meme ligne de base. */
.articles__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
/* Trois cartes exactement : plus de case vide en fin de grille. */
.specialties__grid--trois{grid-template-columns:repeat(3,1fr)}
.specialties__grid--trois::after{display:none}
/* Invitation a lire, en pied de carte. Le bloc entier reste cliquable :
   ce n'est pas un lien imbrique, seulement un reperage visuel. */
.spec__more{
  margin-top:auto;
  padding-top:18px;
  color:var(--gold);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:opacity .3s var(--ease);
}
.spec:hover .spec__more{opacity:.7}

.specialties__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(18,18,18,.12);
  margin-top:44px;
}
/* 8 cartes dans une grille de 3 : la derniere ligne n'en compte que 2.
   Sans cette regle, la case vide laisse voir le fond des gouttieres. */
.specialties__grid > .spec:nth-last-child(2):nth-child(3n+1),
.specialties__grid > .spec:last-child:nth-child(3n+2){grid-column:span 1}
.specialties__grid::after{
  content:"";
  background:var(--cream);
  grid-column:auto;
}
.spec{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:34px 30px;
  background:var(--cream);
  transition:background .3s var(--ease);
}
.spec:hover{background:#f2efe8}
.spec__title{
  margin:0;
  font-size:26px;
  line-height:1.25;
  color:var(--ink);
}
.spec__text{
  margin:0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-muted);
}

/* Citation à l'intérieur d'une carte (case Traumatismes) : reprend le
   registre des citations de la page, à l'échelle de la carte. */
.spec__quote{margin:0}
.spec__quote p{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink-soft);
}
.spec__quote p::before{content:'« '}
.spec__quote p::after{content:' »'}
.spec__quote cite{
  font-style:normal;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--teal);
}

/* ═══════════════════════════════════════════════════════════════
   BLOC 5 · PRENDRE RENDEZ-VOUS
   ═══════════════════════════════════════════════════════════════ */
/* Bandeau bas, tout sur une ligne : titre + sous-titre à gauche,
   numéro et bouton à droite. Le fond encre court sur toute la largeur. */
.contact{background:var(--ink)}
.contact__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  flex-wrap:wrap;
  /* padding bas réduit : la ligne des coordonnées porte le sien. */
  padding:56px var(--gut) 34px;
}
.contact__title{
  margin:0 0 14px;
  font-size:46px;
  line-height:1.1;
  color:var(--cream);
}
.contact__text{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:rgba(250,248,244,.72);
}

/* WhatsApp est le seul moyen de contact affiché : ni téléphone, ni
   e-mail ne sont publiés sur la page. */
.contact__action{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}

/* Ligne discrète des coordonnées complètes, sous le bandeau.
   Volontairement effacée : c'est de l'information de référence, le
   bouton WhatsApp reste l'action principale. */
.contact__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 20px;
  padding:0 var(--gut) 46px;
  font-size:12.5px;
  color:rgba(250,248,244,.5);
}
.contact__meta a{
  color:rgba(250,248,244,.62);
  transition:color .25s var(--ease);
}
.contact__meta a:hover{color:var(--gold)}
.contact__meta address{font-style:normal}
.contact__sep{
  width:1px;
  height:11px;
  background:rgba(250,248,244,.22);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  padding:44px var(--gut);
  border-top:1px solid rgba(18,18,18,.12);
}
.footer__logo{width:200px;height:auto;opacity:.85}
.footer__links{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.footer__links a{
  color:var(--ink-muted);
  transition:color .25s var(--ease);
}
.footer__links a:hover{color:var(--teal)}

/* ─── Burger (mobile) ─── */
/* z-index au-dessus du panneau mobile (70) : le burger sert aussi à
   refermer le menu, il doit rester cliquable par-dessus. */
.burger{display:none;position:relative;z-index:80;flex-direction:column;gap:5px;padding:8px}
.burger span{
  display:block;width:24px;height:1.5px;
  background:var(--cream);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  :root{--gut:40px}
  .nav{gap:24px}
  .header__logo img{width:210px}
  .hero__title{font-size:38px}
}

/* Écrans courts (portables 13", fenêtre réduite) : on resserre le type
   et les espacements plutôt que de laisser le contenu déborder. */
@media (max-height:820px) and (min-width:901px){
  .hero__title{font-size:36px;margin-bottom:18px}
  .hero__eyebrow{margin-bottom:26px}
  .hero__cite{margin-bottom:30px}
  .hero__actions{margin-bottom:24px}
}
@media (max-height:700px) and (min-width:901px){
  .hero__title{font-size:30px;margin-bottom:14px}
  .hero__eyebrow{margin-bottom:18px}
  .hero__cite{margin-bottom:24px}
  .hero .btn{padding:13px 28px}
  .hero__actions{margin-bottom:18px}
}

@media (max-width:1000px){
  .hero__title{font-size:38px}
  /* La signature reste sur une ligne : sa taille suit la largeur dispo. */
  .signature{gap:18px;padding:44px var(--gut)}
  .signature__text{font-size:22px}
  .signature__rule{width:40px}
  .about{grid-template-columns:220px 1fr}
  .about__title{font-size:42px}
  .about__subtitle{font-size:13px}

  .approaches__inner{padding:80px var(--gut)}
  .approaches__title{font-size:38px}
  .approaches__grid{gap:40px}
  .approach__title{font-size:26px}
  .approach__sub{font-size:18px}
  .approach__num{font-size:36px;margin-bottom:16px}

  /* 9 cartes sur 2 colonnes : la dernière occupe toute la largeur */
  .specialties{padding:80px var(--gut)}
  .specialties__grid{grid-template-columns:repeat(2,1fr)}
  .spec{padding:28px 26px}
  .spec__title{font-size:23px}

  .pagehero{height:440px}
  .pagehero__title{gap:40px}
  .pagehero__title h1{font-size:50px}
  .pagehero__lead{font-size:16px;padding-left:22px}
  .page.shell,
  .page--narrow{grid-template-columns:220px 1fr;gap:0 56px;padding:60px var(--gut) 80px}
  .section__title{font-size:36px}
  .section__sub{font-size:22px}

  .contact__inner{padding:44px var(--gut);gap:32px}
  .contact__title{font-size:36px}
  .contact__action{gap:24px}

  .articles{padding:60px var(--gut) 80px}
  .card{padding:36px 30px 32px}
  .card__title{font-size:26px}
  .contactpage{padding:60px var(--gut) 80px}
  .contactgrid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  /* Menu deplie : le pagehero et le hero portent overflow:hidden pour
     contenir leur image de fond. Le menu, bien qu'en position:fixed, y
     etait donc decoupe a la hauteur du bloc. On leve le recadrage le
     temps que le menu est ouvert (classe posee sur <body> par le JS). */
  body.menu-ouvert .pagehero,
  body.menu-ouvert .hero{overflow:visible}
  body.menu-ouvert{overflow:hidden}

  /* Header rappele : backdrop-filter et animation creent chacun un
     contexte de rendu qui piege les enfants en position:fixed. Le menu
     s'y trouvait reduit a la hauteur du header (120px au lieu de 844).
     On les neutralise le temps que le menu est ouvert : le flou du
     header n'a de toute facon aucun interet quand il est recouvert. */
  body.menu-ouvert .header.is-pinned{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    animation:none;
    background:transparent;
    box-shadow:none;
  }

  /* Mega-menu replié en accordéon : une seule colonne, plus de survol.
     Le panneau de 880px n'a pas de sens ici. */
  .nav__group{width:100%;text-align:center}
  /* Le soulignement de l'entree active traverse tout l'ecran en mobile
     (les liens y sont pleine largeur) : on le retire. */
  .nav__link--parent{justify-content:center;border-bottom:0}
  .nav .nav__link.is-current{border-bottom:0}

  .mega{
    position:static;
    width:100%;
    padding-top:0;
    grid-template-columns:1fr;
    max-height:0;
    overflow:hidden;
    opacity:1;
    visibility:visible;
    transform:none;
    transition:max-height .45s var(--ease);
  }
  /* display:none ne suffit pas si la regle desktop porte encore le
     filet dore : on neutralise aussi la bordure du panneau replie. */
  .mega::before{display:none;border-top:0}
  .mega{border-top:0}
  .nav__group:hover .mega{max-height:0}          /* pas d'ouverture au survol */
  .nav__group.is-open .mega{max-height:560px}

  .mega__main{padding:6px 24px 14px}
  .mega__aside{
    padding:6px 24px 14px;
    background:none;
    border-left:0;
    border-top:1px solid rgba(202,178,122,.18);
  }
  .mega__label{margin-bottom:12px;font-size:9px}

  .mega__item{
    grid-template-columns:24px 1fr;
    gap:12px;
    padding:11px 0;
    text-align:left;
  }
  .mega__num{font-size:15px}
  .mega__title{font-size:17px;margin-bottom:2px}
  .mega__desc{font-size:12px}

  .mega__list a{padding:8px 0;font-size:13.5px;text-align:left}
  .mega__cta{margin-top:14px;padding-top:0;font-size:10px}


  :root{--gut:24px;--hero-h:100svh}

  .burger{display:flex}

  /* Menu plein écran en mobile. z-index au-dessus du header fixe (60),
     sinon le panneau passerait dessous. */
  .nav{
    position:fixed;
    inset:0;
    z-index:70;
    flex-direction:column;
    justify-content:center;
    gap:8px;
    /* Opaque : à .97, les titres clairs de la page fantômaient à travers
       le panneau sur les pages intérieures (fond crème). */
    background:var(--ink);
    opacity:0;
    visibility:hidden;
    transition:opacity .4s var(--ease), visibility .4s;
    /* Accordéon déplié sur petit écran : le menu défile de lui-même
       plutôt que de rogner ses dernières entrées. */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:80px 0 40px;
    justify-content:flex-start;
  }
  .nav.is-open{opacity:1;visibility:visible}
  .nav__link{font-size:15px;letter-spacing:.14em;padding:14px 0}
  .nav .btn{margin-top:18px}

  .hero__title{
    font-size:24px;
    line-height:1.4;
    margin-bottom:16px;
  }
  .hero__cite{font-size:11px;margin-bottom:28px}
  .hero__eyebrow{font-size:9.5px;letter-spacing:.24em;margin-bottom:22px}
  .hero__actions{flex-direction:column;width:100%;max-width:320px;margin-bottom:40px}
  .hero__actions .btn{text-align:center}

  /* À propos : la photo passe au-dessus du texte */
  .about{grid-template-columns:1fr}
  .about__media img{height:420px;aspect-ratio:auto;object-position:50% 8%}
  .about__body{padding:52px var(--gut) 60px;max-width:none}
  .about__title{font-size:34px;margin-bottom:22px}
  .about__subtitle{font-size:12.5px;letter-spacing:.12em;line-height:1.65;margin-top:12px}
  .about__lead{font-size:16px;line-height:1.8}
  .about__text{font-size:15px;line-height:1.8}
  /* La ligne unique n'a pas la place en mobile : on autorise le retour
     et les mentions passent sous le badge, séparées par un filet. */
  .about__footer{gap:18px;flex-wrap:wrap}
  .about__meta{
    flex:1 1 100%;
    font-size:11px;
    padding-left:0;
    padding-top:16px;
    border-left:0;
    border-top:1px solid rgba(18,18,18,.12);
    gap:3px 18px;
  }

  /* Les filets seraient trop à l'étroit : on les retire et le slogan
     garde sa ligne unique en 15px. */
  .signature{gap:0;padding:34px var(--gut)}
  .signature__rule{display:none}
  .signature__text{font-size:15px}

  /* Les 3 approches passent en colonne unique, séparées par un filet
     doré discret pour garder la lecture rythmée. */
  .approaches__inner{padding:58px var(--gut)}
  .approaches__head{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    margin-bottom:38px;
    padding-bottom:20px;
  }
  .approaches__title{font-size:29px}
  .approaches__grid{grid-template-columns:1fr;gap:0}
  .approach{
    padding:30px 0;
    border-top:1px solid rgba(202,178,122,.22);
  }
  .approach:first-child{border-top:0;padding-top:0}
  .approach:last-child{padding-bottom:0}
  .approach__num{font-size:28px;margin-bottom:12px}
  .approach__title{font-size:23px;margin-bottom:12px}
  .approach__sub{font-size:16px}
  .approach__text{font-size:14.5px;line-height:1.8}

  /* Une seule colonne : le gap de 1px suffit à séparer les cartes. */
  .specialties{padding:58px var(--gut)}
  .specialties__grid{grid-template-columns:1fr;margin-top:30px}
  .spec{padding:24px 0;background:transparent}
  .spec:hover{background:transparent}
  /* Sans fond de carte, le gap ne dessine plus rien : filet explicite. */
  .specialties__grid{background:none;gap:0}
  .spec + .spec{border-top:1px solid rgba(18,18,18,.12)}
  .spec__title{font-size:21px}
  .spec__text{font-size:13.5px}
  .spec__quote p{font-size:14.5px}

  /* Page de contenu : le sommaire passe au-dessus du texte, à plat */
  /* Le chapô passe sous le titre : deux colonnes n'ont pas la place. */
  .pagehero{height:auto;min-height:0}
  .pagehero__title{
    grid-template-columns:1fr;
    gap:22px;
    padding:150px var(--gut) 44px;
  }
  .pagehero__title h1{font-size:33px;max-width:none}
  .pagehero__lead{font-size:14.5px;padding-left:18px;margin-bottom:0}
  .breadcrumb{margin-bottom:14px;font-size:9.5px;letter-spacing:.2em}

  .page.shell,
  .page--narrow{grid-template-columns:1fr;gap:0;padding:40px var(--gut) 60px}
  .toc{
    position:static;
    margin-bottom:44px;
    padding-bottom:34px;
    border-bottom:1px solid rgba(18,18,18,.12);
  }
  .toc__nav{gap:11px}
  .toc__link{font-size:13.5px}
  .toc__cta{margin-top:24px}
  .toc__cta .btn{width:100%}

  .page__body{max-width:none}
  .page__lead{font-size:21px;margin-bottom:36px}
  .page__body p{font-size:15.5px;line-height:1.8}
  .section{padding-top:32px;margin-bottom:48px}
  .section__head{gap:14px;margin-bottom:16px}
  .section__num{font-size:22px}
  .section__title{font-size:27px}
  .section__sub{font-size:18px}
  .section__img{height:220px;margin-bottom:20px}
  .pull{font-size:19px !important;padding:22px 0}

  /* Le bandeau s'empile : titre, puis numéro et bouton */
  .contact__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
    padding:44px var(--gut);
  }
  .contact__title{font-size:29px;margin-bottom:10px}
  .contact__text{font-size:15px}
  .contact__action{width:100%;gap:18px;flex-direction:column;align-items:flex-start}
  .contact__action{width:100%}
  .contact .btn{width:100%}
  /* Les coordonnées passent en liste verticale : les séparateurs
     n'ont plus de sens entre des lignes empilées. */
  .contact__meta{
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
    padding-bottom:38px;
    font-size:12px;
  }
  .contact__sep{display:none}

  .footer{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    padding:34px var(--gut);
  }
  .footer__logo{width:170px}
  .footer__links{gap:16px 22px;font-size:10px}

  .quote-band{padding:58px var(--gut)}
  .quote--feature p{font-size:25px;line-height:1.42;max-width:none}
  .quote--inline{margin-top:26px;padding-left:18px}
  .quote--inline p{font-size:17px}

  /* Pages de contenu : variantes et listes */
  .pagehero--plain .pagehero__title{padding-top:130px}
  .pagehero--plain .pagehero__title h1{font-size:31px}
  .pagehero__meta{margin-top:18px;font-size:9.5px}
  .page__body > h2:not([class]){margin-top:40px;padding-top:28px;font-size:24px}
  .page__body h3{font-size:20px;margin-top:28px}
  .page__body ul li{font-size:15px}
  .page__body blockquote:not([class]){margin:26px 0;padding-left:18px}
  .page__body blockquote:not([class]) p{font-size:17px}

  /* Cartes d'articles : colonne unique, séparées par un filet */
  .articles{padding:44px var(--gut) 60px}
  .articles__grid{grid-template-columns:1fr;background:none;gap:0}
  .card{padding:26px 0;background:transparent}
  a.card:hover{background:transparent}
  .card + .card{border-top:1px solid rgba(18,18,18,.12)}
  .card__title{font-size:23px}
  .card__excerpt{font-size:14px}

  .contactpage{padding:44px var(--gut) 60px}
  .contactpage__intro{font-size:21px}
  .contactpage__text{font-size:15.5px}
  .contactgrid{grid-template-columns:1fr;background:none;gap:0;margin-top:36px}
  .contactgrid__cell{padding:24px 0;background:transparent}
  .contactgrid__cell + .contactgrid__cell{border-top:1px solid rgba(18,18,18,.12)}

  .notice{padding:18px 20px;font-size:13.5px;margin-bottom:32px}
}

@media (max-width:480px){
  .hero__title{font-size:21px}
}
@media (max-width:360px){
  .hero__title{font-size:19px}
}

/* ─── Accessibilité : respecte la préférence système ─── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__slide,
  .hero__slide img{transition-duration:.01ms;transition-delay:0s}
  /* Aucune apparition : le texte est la des le premier rendu. */
  .hero__eyebrow,
  .hero__quote,
  .hero__cite,
  .hero__actions{animation:none}
  .hero__slide img{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   COLONNE DU SITE
   Le hero va de bord à bord ; tout le reste est borné à 1440px et
   centré. Déclaré EN FIN DE FICHIER : à spécificité égale, la dernière
   règle gagne, donc .shell n'est plus écrasé par les .about, .contact,
   .footer… déclarés plus haut.
   ═══════════════════════════════════════════════════════════════ */
.shell{
  max-width:var(--shell);
  margin-inline:auto;
}

/* ═══════════════════════════════════════════════════════════════
   RETOUR EN HAUT
   Anneau de progression : la jauge se remplit à mesure qu'on descend.
   Traits fins (1.5px) pour rester dans la retenue du site — la
   référence utilisait 3px, trop appuyé ici.
   Couleurs : le trait est posé sur le fond ardoise, il ne peut donc
   pas prendre le bleu des boutons (#447583 → 1.79:1, illisible). Il
   prend --teal, éclairci pour ce fond (5.49:1).
   ═══════════════════════════════════════════════════════════════ */
.haut{
  position:fixed;
  right:28px;
  bottom:28px;
  /* Sous le header rappelé au scroll (60) et le menu mobile (70), au
     dessus du contenu courant. */
  z-index:50;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  /* Le bouton reste dans le flux d'accessibilité mais invisible tant
     qu'on est en haut de page. `hidden` en HTML couvre le cas sans JS. */
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .3s var(--ease), visibility .3s, transform .3s var(--ease);
}
.haut[hidden]{display:none}
.haut.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.haut__anneau,
.haut__fleche{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

/* Rotation d'un quart de tour : sans elle le remplissage démarrerait à
   3 heures. On veut qu'il parte du sommet. */
.haut__anneau{transform:translate(-50%,-50%) rotate(-90deg)}

.haut__piste{
  fill:none;
  stroke:var(--ink-muted);
  stroke-width:1.5;
  opacity:.45;
}

/* 2πr avec r=20 → 125.66. La longueur du trait vaut la circonférence
   entière ; le JS ne fait varier que le décalage. */
.haut__jauge{
  fill:none;
  stroke:var(--teal);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-dasharray:125.66;
  stroke-dashoffset:125.66;
  transition:stroke-dashoffset .12s linear, stroke .3s var(--ease);
}

.haut__fleche{
  width:20px;
  height:20px;
  fill:none;
  stroke:var(--ink);
  stroke-width:1.5;    /* même finesse que l'anneau */
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
  transition:stroke .3s var(--ease);
}

.haut:hover .haut__jauge,
.haut:focus-visible .haut__jauge{stroke:var(--gold)}
.haut:hover .haut__fleche,
.haut:focus-visible .haut__fleche{stroke:var(--gold)}

.haut:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:4px;
  border-radius:50%;
}

@media (max-width:900px){
  .haut{right:16px;bottom:16px}
}

/* Menu mobile ouvert : le bouton flotterait par-dessus le panneau. */
body.menu-ouvert .haut{opacity:0;visibility:hidden;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .haut{transition:opacity .01ms}
  .haut__jauge{transition:none}
}

@media print{
  .haut{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   WHATSAPP FLOTTANT
   Pastille ronde permanente, à gauche du retour-en-haut. Elle
   grandit au survol et déploie son libellé. Le libellé part de
   max-width:0 : une largeur `auto` ne s'anime pas en CSS.
   Le grossissement passe par transform:scale, composé par le GPU,
   là où animer width/height provoquerait un reflow par frame.
   ═══════════════════════════════════════════════════════════════ */
.wa-flottant{
  position:fixed;
  /* 28px (marge du .haut) + 48px (son diamètre) + 14px d'écart. */
  right:90px;
  bottom:31px;    /* recentré verticalement sur le .haut, plus haut de 6px */
  z-index:50;
  /* Apparaît et disparaît avec le retour-en-haut : la classe is-visible
     est posée par le même requestAnimationFrame (hero.js). */
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .3s var(--ease), visibility .3s, transform .3s var(--ease);
}
.wa-flottant.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.wa-flottant__lien{
  display:flex;
  align-items:center;
  /* Un peu plus petit que le retour-en-haut (48px) : la pastille pleine
     pèse visuellement plus lourd qu'un simple anneau à diamètre égal. */
  height:42px;
  background:var(--wa);
  border-radius:21px;
  box-shadow:0 6px 20px rgba(18,18,18,.18);
  color:#fff;
  text-decoration:none;
  overflow:hidden;
  transform-origin:right center;   /* la pilule pousse vers la gauche */
  transition:transform .3s var(--ease), background .3s var(--ease),
             box-shadow .3s var(--ease);
}

.wa-flottant__lien:hover,
.wa-flottant__lien:focus-visible{
  transform:scale(1.08);
  background:var(--wa-fonce);
  box-shadow:0 10px 26px rgba(68,117,131,.38);
}

.wa-flottant__lien:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* Carré fixe : l'icône reste centrée quand le libellé s'ouvre. */
.wa-flottant__icone{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
}
.wa-flottant__icone svg{
  width:20px;
  height:20px;
  color:#fff;
}

.wa-flottant__texte{
  max-width:0;
  padding-right:0;
  white-space:nowrap;
  font-family:var(--font-body);
  font-size:.875rem;
  font-weight:400;
  letter-spacing:.02em;
  opacity:0;
  transition:max-width .32s var(--ease), opacity .25s var(--ease),
             padding-right .32s var(--ease);
}
.wa-flottant__lien:hover .wa-flottant__texte,
.wa-flottant__lien:focus-visible .wa-flottant__texte{
  max-width:200px;
  padding-right:20px;
  opacity:1;
}

@media (max-width:900px){
  /* 16px + 48px + 12px, aligné sur la marge mobile du .haut. */
  .wa-flottant{right:76px;bottom:19px}
}

/* Le survol n'existe pas au doigt : sur tactile la pilule reste
   compacte, une icône seule suffit et évite de manger l'écran. */
@media (hover:none){
  .wa-flottant__lien:hover{transform:none}
  .wa-flottant__lien:hover .wa-flottant__texte{max-width:0;padding-right:0;opacity:0}
}

/* Menu mobile ouvert : même règle que le retour-en-haut. Sélecteur
   assez spécifique pour l'emporter sur .is-visible posé par le JS. */
body.menu-ouvert .wa-flottant,
body.menu-ouvert .wa-flottant.is-visible{opacity:0;visibility:hidden;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .wa-flottant{transition:opacity .01ms;transform:none}
  .wa-flottant.is-visible{transform:none}
  .wa-flottant__lien{transition:background .01ms}
  .wa-flottant__lien:hover,
  .wa-flottant__lien:focus-visible{transform:none}
  .wa-flottant__texte{transition:none}
}

@media print{
  .wa-flottant{display:none}
}