/* ============================================================
   Dr Fares Seffen — Design system
   Moderne / épuré — clinique de restauration capillaire
   ============================================================ */

:root {
  /* Couleurs */
  --ink:        #0F1417;
  --ink-soft:   #3D4A52;
  --ink-mute:   #6B7A83;
  --line:       #E4E1DA;
  --line-soft:  #F0EEE9;
  --paper:      #FFFFFF;
  --sand:       #FAF8F4;
  --sand-deep:  #F3EFE7;

  --accent:      #12484C;   /* teal profond */
  --accent-deep: #0B3134;
  --accent-soft: #E7F0EF;
  --gold:        #B08D3F;
  /* Un jaune-vert, hors charte, demandé par Fares le 11 septembre 2026
     pour la seule section « La Tunisie et votre confort de séjour ».
     Il n'a pas d'autre emploi sur le site. */
  --jaune-vert:  #E3EAC0;
  --logo-green:  #1E2E26;   /* vert profond de la charte du logotype */

  /* Typo — éditorial : serif de caractère + sans géométrique léger */
  --font-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Logotype : didone à fort contraste, conforme à la charte — inchangé */
  --font-logo:  "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;

  /* Mesures */
  --wrap: 1200px;
  --wrap-wide: 1400px;
  --wrap-narrow: 760px;
  --radius: 0px;
  --radius-lg: 2px;

  /* Espacement */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4rem;   --s7: 6rem;   --s8: 8rem;

  --header-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button { font: inherit; }
ul, ol { padding-left: 1.15em; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 500; }
h4 { font-size: 1.24rem; font-weight: 500; }
h5, h6 { font-family: var(--font-sans); font-size: .78rem; font-weight: 500;
         letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
p { margin: 0 0 1.15em; }
strong, b { color: var(--ink); font-weight: 600; }
em { font-style: italic; }

/* ---------- Utilitaires ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding: var(--s7) 0; }
.section-sm { padding: var(--s6) 0; }
.bg-sand { background: var(--sand); }
.bg-sand-deep { background: var(--sand-deep); }
/* Le teal de la marque, dilué au point de rester un fond de lecture.
   Il sert à séparer deux sections que le sable ne suffisait plus à
   distinguer : la page enchaînait trois blocs blancs de suite. */
.bg-accent-soft { background: var(--accent-soft); }
.bg-jaune-vert { background: var(--jaune-vert); }
.bg-jaune-vert .eyebrow { color: #6E6A2A; }
/* Le filet qui sépare les deux dernières sections de la page du séjour. */
.trait-or { width: 120px; height: 1px; background: var(--gold); margin: 0 auto; }
.bg-accent-soft .eyebrow { color: var(--accent); }
.bg-ink { background: var(--accent-deep); color: #D6E0DF; }
/* Le teal de la marque, un cran plus clair que celui des bandeaux :
   demandé par Fares le 11 septembre 2026 pour la chronologie de la page
   FUE, « le fameux vert, un peu moins foncé ». Même traitement que
   .bg-ink : titres blancs, surtitre or, texte clair. */
.bg-teal { background: var(--accent); color: #D6E0DF; }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4,
.bg-teal h1, .bg-teal h2, .bg-teal h3, .bg-teal h4 { color: #fff; }
.bg-ink h5, .bg-ink h6, .bg-teal h5, .bg-teal h6 { color: var(--gold); }
/* Le gras prend l'encre du texte courant : sur le vert, il devenait
   illisible. Il passe au blanc, comme les titres (15 septembre 2026, section
   « sans rasage » de la page femme). */
.bg-ink strong, .bg-ink b, .bg-teal strong, .bg-teal b { color: #fff; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .8rem;
  display: flex; align-items: center; gap: .7rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; flex: none;
}
.text-center .eyebrow { justify-content: center; }
.lede { font-size: 1.16rem; color: var(--ink-soft); }
.rule { height: 1px; background: var(--line); border: 0; margin: var(--s5) 0; }

/* ---------- Boutons — filet fin, remplissage depuis le bas au survol ---------- */
.btn {
  position: relative; z-index: 0; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.9rem;
  font-family: var(--font-sans);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radius);
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  transition: color .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .4s var(--ease);
}
.btn:hover { color: #fff; }
.btn:hover::before { transform: scaleY(1); }
.btn svg { width: 14px; height: 14px; }

.btn-outline { border-color: var(--line); color: var(--ink); }
.btn-outline::before { background: var(--ink); }
.btn-outline:hover { color: #fff; border-color: var(--ink); }

.btn-light { border-color: #fff; color: #fff; }
.btn-light::before { background: #fff; }
.btn-light:hover { color: var(--accent-deep); }

.btn-ghost-light { border-color: rgba(255,255,255,.4); color: #fff; }
.btn-ghost-light::before { background: var(--gold); }
.btn-ghost-light:hover { color: var(--accent-deep); border-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before { transition: none; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.text-center .btn-row { justify-content: center; }

/* ============================================================
   HEADER
   ============================================================ */
.topbar {
  background: var(--accent-deep); color: #B9C9C7;
  font-size: .78rem; letter-spacing: .02em;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 42px; padding-block: .35rem;
}
.topbar a { color: #EAF1F0; text-decoration: none; }
.topbar a:hover { color: var(--gold); }
.topbar-phone { font-weight: 600; letter-spacing: .04em; }
.topbar-social { display: flex; align-items: center; gap: .6rem; }
.topbar-social span { color: #8FA5A3; }
.topbar-social a {
  display: inline-flex; width: 26px; height: 26px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%;
  transition: background .2s, border-color .2s, color .2s;
}
.topbar-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--accent-deep); }
.topbar-social svg { width: 13px; height: 13px; }

/* Logotypes des deux forums : affichés en toutes lettres, sans pastille */
.topbar-social a.topbar-logo {
  width: auto; height: auto; border: 0; border-radius: 0;
  padding: 0 .15rem; opacity: .72;
  transition: opacity .25s var(--ease);
}
.topbar-social a.topbar-logo:hover { background: none; opacity: 1; }
.topbar-social a.topbar-logo img { width: auto; display: block; }
/* hauteurs ajustées séparément : les deux logotypes n'ont pas les mêmes proportions */
.topbar-social a[href*="hairrestorationnetwork"] img { height: 13px; }
.topbar-social a[href*="international-hairlossforum"] img { height: 15px; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--header-h);
  width: min(100% - 2.5rem, var(--wrap-wide));   /* plus large : la nav tient sur une ligne */
  flex-wrap: nowrap;
}
/* ============================================================
   Logotype « Dr SEFFEN — Hair Clinic »
   Composition typographique : nette à toutes les tailles,
   aucun fichier image à charger.
   ============================================================ */
.brand {
  display: inline-flex; align-items: center;
  text-decoration: none; flex: none;
}
.brand img { height: 46px; width: auto; }   /* si un fichier logo est ajouté un jour */

.brand-mark {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1;
}
.brand-name {
  font-family: var(--font-logo);
  font-weight: 500;
  font-size: 1.62rem;
  letter-spacing: .012em;
  color: var(--ink);
  white-space: nowrap;
}
/* Le « Dr » est en Bodoni Moda — choisi le 30 août parmi quatre italiques.
   « SEFFEN » reste en Playfair Display : c'est le contraste entre les deux
   qui fait le logotype. L'écart est passé de .12 à .20 em, l'italique et les
   capitales se touchant presque — puis ramené à .14, 0,20 détachant trop le
   « Dr » du nom. */
.brand-name .brand-dr {
  font-family: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  margin-right: .14em;
  letter-spacing: 0;
}

/* « HAIR CLINIC » encadré de deux filets dorés */
.brand-sub {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .42rem;
  font-family: var(--font-sans);
  font-size: .56rem; font-weight: 500;
  letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.brand-sub::before, .brand-sub::after {
  content: ""; height: 1px; width: 26px; background: var(--gold); flex: none;
}

/* Version sur fond sombre (pied de page) */
.site-footer .brand-mark { align-items: flex-start; }
.site-footer .brand-name { color: #F7F5F0; }
.site-footer .brand-sub { color: rgba(247,245,240,.72); }

@media (max-width: 1340px) {
  .brand-name { font-size: 1.42rem; }
  .brand-sub { font-size: .52rem; letter-spacing: .28em; }
  .brand-sub::before, .brand-sub::after { width: 18px; }
}
@media (max-width: 620px) {
  .brand-name { font-size: 1.2rem; }
  .brand-sub { font-size: .48rem; letter-spacing: .24em; margin-top: .3rem; }
  .brand-sub::before, .brand-sub::after { width: 12px; }
}

/* Navigation desktop */
.nav { display: flex; align-items: center; gap: .2rem; }
.nav > ul { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav li { position: relative; }
.nav a, .nav .nav-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .7rem .6rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  white-space: nowrap;              /* jamais de retour à la ligne dans un item */
  transition: color .2s;
}
.nav > ul > li > a::after, .nav > ul > li > .nav-toggle::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .45rem;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav > ul > li:hover > a::after,
.nav > ul > li:hover > .nav-toggle::after,
.nav > ul > li.is-current > a::after { transform: scaleX(1); }
.nav > ul > li:hover > a, .nav > ul > li:hover > .nav-toggle { color: var(--accent); }
.nav li.is-current > a { color: var(--accent); }
.nav .caret { width: 8px; height: 8px; opacity: .5; transition: transform .25s; }
.nav li:hover > .nav-toggle .caret { transform: rotate(180deg); }

.subnav {
  position: absolute; top: 100%; left: 0; min-width: 300px; max-width: 340px;
  list-style: none; margin: 0; padding: .5rem 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px -18px rgba(15,20,23,.24);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav li:hover > .subnav, .nav li:focus-within > .subnav {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.subnav a {
  display: block; width: 100%; padding: .62rem 1.15rem;
  font-size: .74rem; letter-spacing: .07em; color: var(--ink-soft);
}
.subnav a:hover { background: var(--accent-soft); color: var(--accent); }
/* Les derniers menus s'ouvrent vers la gauche pour ne pas déborder de l'écran */
.nav > ul > li:nth-last-child(-n+3) > .subnav { left: auto; right: 0; }
.nav > ul > li:nth-last-child(-n+3) .subnav .subnav { left: auto; right: 100%; }

.subnav .subnav {
  top: -.5rem; left: 100%; }
.subnav li > a.has-sub::after { content: "›"; float: right; opacity: .5; }

.header-actions { display: flex; align-items: center; gap: .7rem; flex: none; }
.lang-switch {
  display: flex; align-items: center; gap: .25rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; white-space: nowrap;
}
.lang-switch a { color: var(--ink-mute); text-decoration: none; padding: .2rem .25rem; }
.lang-switch a.is-active { color: var(--accent); }
.lang-switch span { color: var(--line); }
.header-cta { padding: .78rem 1.15rem; font-size: .72rem; white-space: nowrap; }
.topbar-phone, .topbar-social { white-space: nowrap; }

.burger {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.burger span { display: block; width: 19px; height: 1.5px; background: var(--ink); position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 1.5px; background: var(--ink);
  transition: transform .28s var(--ease), top .28s var(--ease);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .burger span::after  { top: 0; transform: rotate(-45deg); }

/* Menu mobile */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: #fff; padding: calc(var(--header-h) + 60px) 0 3rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
body.menu-open .mobile-nav { opacity: 1; visibility: visible; transform: translateY(0); }
body.menu-open { overflow: hidden; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > .wrap > ul > li { border-bottom: 1px solid var(--line-soft); }
.mobile-nav a {
  display: block; padding: .95rem 0;
  font-size: .95rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.mobile-nav .m-sub { padding-left: 1rem; }
.mobile-nav .m-sub a {
  font-size: .82rem; font-weight: 500; text-transform: none; letter-spacing: .01em;
  color: var(--ink-soft); padding: .55rem 0; border-top: 1px solid var(--line-soft);
}
.mobile-nav .m-sub .m-sub a { padding-left: 1rem; opacity: .85; }
/* Les deux boutons du bas du menu. La règle des liens du menu, juste au-
   dessus, leur retirait toute marge intérieure : le texte touchait le cadre
   (vu par Fares le 15 septembre 2026). Ils retrouvent leur marge et
   s'empilent en pleine largeur, le numéro de téléphone tenant ainsi sur une
   ligne. */
.mobile-nav .btn-row { display: grid; gap: .7rem; margin-top: 1.8rem; }
.mobile-nav .btn-row .btn { padding: 1rem 1.4rem; text-align: center; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; background: var(--accent-deep); color: #fff;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; opacity: .38;
  animation: heroZoom 24s ease-in-out infinite alternate;
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero-media img { animation: none; } }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(11,49,52,.94) 0%, rgba(11,49,52,.72) 48%, rgba(11,49,52,.30) 100%);
}

/* Bandeau dont l'image est le sujet, et non l'atmosphère.

   Le réglage ordinaire n'affiche la photographie qu'à trente-huit pour
   cent sous un voile presque opaque : c'est ce qu'il faut pour un fond,
   c'est trop pour une mosaïque de résultats qu'on demande au visiteur de
   regarder. L'image monte donc à soixante-dix pour cent, et le voile
   s'efface plus tôt vers la droite, là où elle se trouve.

   La colonne de texte, elle, reste sur la partie la plus opaque du
   dégradé : le contraste du titre ne bouge pas. */
.hero.hero-visuel .hero-media img { opacity: .70; }
.hero.hero-visuel::after {
  background: linear-gradient(105deg, rgba(11,49,52,.96) 0%, rgba(11,49,52,.88) 38%,
                              rgba(11,49,52,.34) 62%, rgba(11,49,52,.14) 100%);
}
/* Bandeau à trame dessinée.

   Une trame de fines lignes n'a pas la densité d'une photographie : sous le
   voile réglé pour une photo, à trente-huit pour cent, elle disparaît
   presque. Elle monte donc à cinquante-cinq, ce qui la laisse à sa place —
   une texture, pas un sujet — sans qu'on ait à la deviner. */
.hero.hero-trame .hero-media img { opacity: .55; }
/* La semaine de la page Consultation porte des heures et des étiquettes
   qu'il faut pouvoir lire : l'image y monte à quatre-vingt-cinq pour cent.
   Le mois de la page rendez-vous garde son réglage, qui plaisait. */
.hero.hero-trame-fort .hero-media img { opacity: .85; }
/* Son voile s'efface aussi plus tôt vers la droite, là où commencent les
   heures, comme sur le bandeau des témoignages. La colonne du titre et du
   chapô reste sur la partie opaque du dégradé. */
.hero.hero-trame-fort::after {
  background: linear-gradient(105deg, rgba(11,49,52,.96) 0%, rgba(11,49,52,.9) 44%,
                              rgba(11,49,52,.3) 54%, rgba(11,49,52,.14) 100%);
}

.hero .wrap { position: relative; z-index: 2; }
.hero-inner { padding: clamp(4.5rem, 11vw, 8.5rem) 0; max-width: 720px; }
.hero h1 { color: #fff; margin-bottom: .55em; }
.hero h1 em { font-style: normal; color: var(--gold); }

/* Le carrousel d'accueil porte des titres plus longs que les autres
   bandeaux : « Greffe de cheveux en Tunisie, où la science devient un
   art » tenait sur quatre lignes à la taille commune, contre deux pour
   « Créer ou compléter votre barbe ». Le corps est donc réduit, ici et
   sur .hslide-title juste en dessous : les trois diapositives doivent
   garder la même taille, sinon le titre saute d'une taille à l'autre à
   chaque rotation du carrousel. */
.hero-slider h1 { font-size: clamp(1.98rem, 4.0vw, 3.05rem); line-height: 1.14; }

/* La couverture anglaise, un cran plus bas.

   « Where science becomes an art » est plus long que « où la science
   devient un art », et à la taille commune la seconde ligne sortait de la
   colonne de texte pour venir buter sur la photographie. Le titre anglais
   perd donc douze pour cent, ce qui le ramène dans sa colonne sans qu'on
   voie la différence d'un écran à l'autre. */
html[lang="en"] .hero-slider h1,
html[lang="en"] .hslide-inner .hslide-title {
  font-size: clamp(1.86rem, 3.78vw, 2.9rem);
}
.hero p { color: #C6D6D4; font-size: 1.12rem; max-width: 56ch; }
.hero .eyebrow { color: var(--gold); }

/* Accueil : portrait affiché à sa taille réelle, jamais étiré */
.hero-split .wrap { position: relative; z-index: 2; }
.hero-split .hero-inner {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: none;
}
.hero-portrait { position: relative; justify-self: end; }
.hero-portrait img {
  width: 100%; max-width: 420px; height: auto;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.35));
}
.hero-portrait::before {
  content: ""; position: absolute; left: 50%; bottom: -6%;
  transform: translateX(-50%);
  width: 92%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(176,141,63,.22) 0%, transparent 68%);
  z-index: -1;
}
/* Le cartouche de la date du jour, sur le bandeau du diagnostic.
   Une feuille d'éphéméride posée sur le teal : filet d'or en tête,
   jour de la semaine en petites capitales, quantième en Cormorant. */
.hero-cartouche { justify-self: end; }
.date-jour {
  display: block; width: clamp(190px, 21vw, 250px);
  background: var(--sand); border-top: 3px solid var(--gold);
  padding: 1.5rem 1.2rem 1.3rem; text-align: center;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
}
.dj-jour-sem {
  display: block; font-family: var(--font-sans); font-size: .72rem;
  font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent);
}
.dj-num {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(3.2rem, 6.5vw, 4.6rem); line-height: 1; color: var(--ink);
  margin: .12em 0 .06em;
}
.dj-mois {
  display: block; font-family: var(--font-serif); font-size: 1.15rem;
  font-variant-caps: small-caps; letter-spacing: .1em; color: var(--accent);
}

@media (max-width: 900px) {
  .hero-split .hero-inner { grid-template-columns: 1fr; }
  .hero-portrait, .hero-cartouche { display: none; }
}

/* ---------- Carrousel de tête ---------- */
/* Les trois diapositives sont empilées dans une seule cellule de grille : le
   conteneur prend alors la hauteur de la plus haute, une fois pour toutes.
   Auparavant seule la diapositive active occupait le flux, et comme leurs
   textes n'ont pas la même longueur — 352 signes contre 215 — la page sautait
   à chaque changement. */
.hero-slider { position: relative; overflow: hidden; display: grid; }
.hero-slider::after { display: none; }        /* chaque diapositive porte son propre voile */

.hslide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
  display: flex; align-items: center;
}
.hslide.is-active { opacity: 1; visibility: visible; }
.hslide-media { position: absolute; inset: 0; }
.hslide-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
  transform: scale(1.06);
  transition: transform 5.5s linear;
}
.hslide.is-active .hslide-media img { transform: scale(1); }
.hslide-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(11,49,52,.95) 0%, rgba(11,49,52,.80) 45%, rgba(11,49,52,.42) 100%);
}
/* Planche sans voile.

   Le voile assombrit une photographie pour que le texte s'y détache. Quand
   le fond est déjà le vert de la charte et ne porte qu'un logotype, il n'a
   plus d'objet — et il nuit : mêlant 58 % de l'image à 42 % de vert, il
   plafonne un blanc pur à 170 de gris, si bien que le logotype vire au gris
   et que les filets or s'effacent. C'est de l'arithmétique, pas un réglage.
   Le texte, lui, reste lisible : il est blanc sur le teal foncé. */
.hslide.voile-aucun .hslide-media::after { background: none; }

/* La pastille du logotype sur écran étroit (15 septembre 2026).

   L'image de la première planche est un fond vert qui porte la pastille aux
   trois quarts de sa largeur. Rognée pour remplir la hauteur, elle faisait
   tomber la pastille sur le texte jusqu'à 1024 pixels de large : Fares l'a
   vu sur son téléphone. Mesuré dans le navigateur, le titre la touchait à
   390 et à 768 pixels, et ne s'en écartait que de 24 pixels à 1024.

   Sur écran étroit, l'image s'efface donc : le fond de la planche est le
   même vert, #0B3134, au pixel près, et rien ne se voit. La pastille revient
   entière et plus petite au-dessus du titre, découpée dans la même image :
   le cercle doré y occupe les pixels 1120 à 1720 en largeur et 205 à 805 en
   hauteur, recadrés ici avec dix pixels de marge. */
@media (max-width: 1024px) {
  .hslide.pastille .hslide-media img { display: none; }
  .hslide.pastille .hslide-inner { padding-top: clamp(2.5rem, 7vw, 4rem); }
  .hslide.pastille .hslide-inner::before {
    --d: clamp(112px, 22vw, 168px);
    content: ""; display: block;
    width: var(--d); height: var(--d);
    margin: 0 0 1.6rem;
    background: #0B3134 url("../img/clinique/pastille-accueil.jpg") no-repeat;
    background-size: calc(var(--d) * 3.0968) auto;
    background-position: calc(var(--d) * -1.7903) calc(var(--d) * -0.3145);
  }
}

/* Le cadrage d'une planche sur écran étroit (15 septembre 2026).

   Rognée pour remplir la hauteur, une photographie ne garde que son centre.
   Celle de la barbe porte son sujet à droite, entre 62 et 82 % de la
   largeur : sur téléphone, il ne restait que le mur gris. Une planche peut
   donc désigner le point à garder, par « cadrage_mobile » dans son contenu.
   Le sélecteur sur l'attribut l'emporte sur le réglage commun de 620 pixels,
   plus bas, qui ne vise que les planches sans cadrage propre. */
@media (max-width: 1024px) {
  .hslide-media img[style*="--cadrage-mobile"] { object-position: var(--cadrage-mobile); }
}
.hslide .wrap { position: relative; z-index: 2; width: min(100% - 2.5rem, var(--wrap)); }
.hslide-inner { padding: clamp(4.5rem, 11vw, 8.5rem) 0; max-width: 700px; }
/* Un seul H1 par page : les diapositives suivantes portent un H2, dont
   l'apparence reste strictement identique. */
.hslide-inner h1,
.hslide-inner .hslide-title { color: #fff; margin-bottom: .5em; }
.hslide-inner h1 em,
.hslide-inner .hslide-title em { font-style: normal; color: var(--gold); }
.hslide-inner .hslide-title {
  font-size: clamp(1.98rem, 4.0vw, 3.05rem); font-weight: 400; line-height: 1.14;
}
.hslide-inner p { color: #C6D6D4; font-size: 1.12rem; max-width: 54ch; }
.hslide-inner .eyebrow { color: var(--gold); }

/* L'enseigne de la couverture.

   Le style .eyebrow est fait pour des intitulés de rubrique : capitales,
   graisse, vingt-deux millièmes d'interlettrage, un filet devant. Appliqué
   au nom de la clinique, il le crie plutôt qu'il ne le pose.

   Ici le nom revient au Cormorant du titre, en petites capitales, posé sur
   un filet d'or aussi large que lui : la même voix que le titre, une
   octave plus bas, et une ligne qui sert de socle au lieu d'un tiret qui
   la coupait en deux. */
.hslide-inner .enseigne,
.hero .enseigne {
  font-family: var(--font-serif); font-style: normal; font-weight: 500;
  font-size: clamp(1.46rem, 1.95vw, 1.92rem); line-height: 1.26;
  /* Petites capitales, mais pas sur l'initiale : le « C » de Clinique et le
     « D » de Docteur gardent leur pleine hauteur. La ligne paraît plus
     grande à taille égale, et aucune abréviation n'a à être composée. */
  font-variant-caps: small-caps; font-feature-settings: "smcp";
  letter-spacing: .095em; text-transform: none;
  color: var(--gold);
  display: inline-block; margin: 0 0 1.2rem;
  padding-bottom: .62rem;
  border-bottom: 1px solid rgba(176, 141, 63, .34);
}
.enseigne::before { content: none; }

.hero-nav {
  position: absolute; left: 0; right: 0; bottom: clamp(1.2rem, 3vw, 2.2rem);
  z-index: 4; display: flex; align-items: center; justify-content: center; gap: 1.2rem;
}
.harrow {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(11,49,52,.35);
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .22s, border-color .22s;
}
.harrow:hover { background: var(--gold); border-color: var(--gold); color: var(--accent-deep); }
.hdots { display: flex; gap: .55rem; }
.hdot {
  width: 30px; height: 3px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.35); transition: background .25s, width .25s;
}
.hdot.is-active { background: var(--gold); width: 46px; }
@media (max-width: 620px) {
  .harrow { display: none; }
  .hslide-media img { object-position: center 22%; }
}
@media (prefers-reduced-motion: reduce) {
  .hslide, .hslide-media img { transition: none; }
}

.hero-slim { padding: 0; }
.hero-slim .hero-inner { padding: clamp(3.2rem, 7vw, 5.6rem) 0; }
.hero-slim h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); }

.breadcrumb {
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 1.4rem;
}
.breadcrumb a { color: rgba(255,255,255,.82); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { margin: 0 .5rem; opacity: .5; }

/* Bandeau de confiance */
.trust {
  background: var(--sand); border-bottom: 1px solid var(--line);
}
.trust .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
}
.trust-item {
  background: var(--sand); padding: 1.7rem 1.4rem; text-align: center;
}
.trust-item strong {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: 1.75rem; color: var(--accent); line-height: 1;
}
.trust-item span {
  display: block; margin-top: .45rem;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
}

/* ============================================================
   CONTENU
   ============================================================ */
.prose > *:first-child { margin-top: 0; }
.prose h2 { margin-top: 2.4em; }
.prose h3 { margin-top: 2em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
/* Une étiquette annonce le titre qui la suit : les 2,4 em prévus pour séparer
   deux blocs de texte n'ont pas lieu d'être entre les deux. Sans cette règle,
   « Le médecin » et « Notre philosophie » flottaient à 115 px de leur titre. */
.prose .eyebrow + h2, .prose .eyebrow + h3 { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.3em; }
.prose li { margin-bottom: .55em; }
.prose li::marker { color: var(--accent); }
.prose a:not(.btn):not(.card):not(.card-link) {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.prose a:not(.btn):not(.card):not(.card-link):hover { color: var(--gold); }

/* Les boutons gardent leur habillage même à l'intérieur d'un bloc de texte :
   chaque variante gère déjà sa propre couleur (voir .btn plus haut), le
   sélecteur :not(.btn) ci-dessus suffit à éviter tout conflit. */
.prose a.btn { text-decoration: none; }
.prose figure { margin: 2.5rem 0; }
.prose figure img { border-radius: var(--radius-lg); }
.prose figcaption { margin-top: .7rem; font-size: .82rem; color: var(--ink-mute); }
.prose blockquote {
  margin: 2rem 0; padding: 1.4rem 0 1.4rem 1.8rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.55; color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Encadré "en savoir plus" (détails repliables) */
.details {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--sand); margin: 2rem 0; overflow: hidden;
}
.details > summary {
  list-style: none; cursor: pointer;
  padding: 1.1rem 1.5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.details > summary::-webkit-details-marker { display: none; }
.details > summary::after {
  content: "+"; font-size: 1.3rem; font-weight: 300; line-height: 1; transition: transform .25s var(--ease);
}
.details[open] > summary::after { transform: rotate(45deg); }
.details .details-body { padding: 0 1.5rem 1.4rem; font-size: .97rem; }
.details .details-body > *:last-child { margin-bottom: 0; }

/* Grille deux colonnes */
.split {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.split.reverse > *:first-child { order: 2; }
.split-media img { border-radius: var(--radius-lg); width: 100%; }

/* Logotype en grand format — bloc de présentation du médecin.
   Reprend la version principale de la charte : crème sur vert profond. */
.split-media.logo-showcase {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--logo-green);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative; overflow: hidden;
}
.split-media.logo-showcase::before,
.split-media.logo-showcase::after {
  content: ""; position: absolute; border: 1px solid rgba(176,141,63,.28);
}
.split-media.logo-showcase::before { inset: 18px; border-radius: 4px; }
.split-media.logo-showcase::after {
  width: 220px; height: 220px; border-radius: 50%;
  right: -80px; bottom: -80px; border-color: rgba(176,141,63,.18);
}
.brand-xl { position: relative; z-index: 1; align-items: center; }
.brand-xl .brand-name {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  color: #F7F5F0;
  letter-spacing: .015em;
}
.brand-xl .brand-sub {
  margin-top: 1rem;
  font-size: clamp(.6rem, 1.1vw, .74rem);
  letter-spacing: .42em; text-indent: .42em;
  color: rgba(247,245,240,.78);
}
.brand-xl .brand-sub::before, .brand-xl .brand-sub::after {
  width: clamp(28px, 5vw, 56px);
  background: var(--gold); opacity: .9;
}

/* Portrait : jamais agrandi au-delà de sa taille native, donc jamais pixelisé.
   Il est posé sur un fond dégradé plutôt qu'étiré pour remplir la colonne. */
.split-media.portrait {
  display: flex; align-items: flex-end; justify-content: center;
  /* Le teal de la marque, franc en haut et dissous vers le bas, plutôt
     que l'accent clair d'origine, qui se distinguait à peine du sable.
     Le portrait se détache ainsi sans que le bloc devienne un aplat. */
  background:
    linear-gradient(160deg, rgba(18,72,76,.26) 0%, rgba(18,72,76,.09) 48%,
                    rgba(18,72,76,0) 100%),
    var(--sand);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 0;
  position: relative; overflow: hidden;
}
.split-media.portrait::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(18,72,76,.14), transparent);
}
.split-media.portrait img {
  /* 420 px laissaient le portrait plus court que le paragraphe d'en face. */
  width: auto; max-width: min(100%, 520px); height: auto;
  border-radius: 0; position: relative; z-index: 1;
  image-rendering: auto;
}
.split-media.framed {
  position: relative;
}
.split-media.framed::before {
  content: ""; position: absolute; inset: -14px -14px 14px 14px;
  border: 1px solid var(--gold); border-radius: var(--radius-lg); z-index: 0;
}
.split-media.framed img { position: relative; z-index: 1; }

/* ---------- Section plein largeur, alternée photo / texte ---------- */
.split-bleed {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  min-height: 60vh;
}
.split-bleed.reverse { direction: rtl; }
.split-bleed.reverse > * { direction: ltr; }
.split-bleed-media { position: relative; overflow: hidden; background: var(--sand-deep); }
.split-bleed-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08); transition: transform 1.6s var(--ease);
}
.split-bleed.is-in .split-bleed-media img { transform: scale(1); }
.split-bleed-content {
  position: relative;
  display: flex; align-items: center;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 6vw, 5.5rem);
}
@media (max-width: 900px) {
  .split-bleed { grid-template-columns: 1fr; min-height: 0; }
  .split-bleed-media { aspect-ratio: 4/3; }
  .split-bleed.reverse { direction: ltr; }
  .split-bleed-media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .split-bleed-media img { transition: none; transform: none; }
}

/* Portrait du médecin en intervention — bloc « Le médecin » de l'accueil */
.split-media.portrait-op {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand-deep);
}
.split-media.portrait-op img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 1;
}
.split-media.portrait-op::after {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(176,141,63,.45); pointer-events: none;
}

/* Cartes */
.cards { display: grid; gap: 1.5rem; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none;
  transition: border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
a.card:hover {
  border-color: var(--accent); transform: translateY(-3px);
  box-shadow: 0 22px 44px -26px rgba(15,20,23,.3);
}
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-deep); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a.card:hover .card-media img { transform: scale(1.045); }
.card-body { padding: 1.5rem 1.6rem 1.7rem; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.card-body p { font-size: .94rem; color: var(--ink-mute); margin-bottom: 1rem; }
.card-body p:last-child { margin-bottom: 0; }
.card-link {
  margin-top: auto; font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: .45rem;
}
.card-link::after { content: "→"; transition: transform .25s var(--ease); }
a.card:hover .card-link::after { transform: translateX(4px); }
.card-date { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .55rem; }

/* Étapes numérotées */
.steps { counter-reset: step; display: grid; gap: 1.2rem; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 58px 1fr; gap: 1.5rem;
  padding: 1.5rem 0; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-serif); font-size: 1.55rem; color: var(--gold); line-height: 1.1;
}
.step h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.step p { font-size: .95rem; margin-bottom: 0; }

/* ---------- Chronologie du parcours patient ---------- */
/* Géométrie de la chronologie.
   Le trait et les pastilles doivent tomber au milieu de la gouttière, jamais
   sur la colonne de gauche : les pastilles étaient centrées sur son bord droit
   et recouvraient la dernière lettre des repères longs — « À DISTANCE »
   s'affichait « À DISTANC⊙ ». Le trait, lui, était à 118 px quand les
   pastilles étaient à 100 : ils n'étaient pas même alignés entre eux.
   Une seule mesure gouverne désormais les trois : --tl-col. */
.timeline {
  position: relative; margin: 0; padding: 0; list-style: none;
  --tl-col: 120px;          /* largeur de la colonne des repères */
  --tl-gout: 2.6rem;        /* gouttière entre le repère et le texte */
}
.timeline::before {
  content: ""; position: absolute;
  left: calc(var(--tl-col) + var(--tl-gout) / 2);
  top: 12px; bottom: 12px;
  width: 1px; background: var(--line);
}
.tl-item {
  position: relative; display: grid;
  grid-template-columns: var(--tl-col) 1fr;
  gap: var(--tl-gout); padding: 1.5rem 0;
}
.tl-when {
  text-align: right; padding-top: .15rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.tl-when small { display: block; font-size: .68rem; font-weight: 500; letter-spacing: .06em;
                 text-transform: none; color: var(--ink-mute); margin-top: .25rem; }
.tl-body { position: relative; }
.tl-body::before {
  content: ""; position: absolute;
  left: calc(var(--tl-gout) / -2); top: .5rem;
  transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--accent);
}
.tl-item.is-key .tl-body::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.bg-sand .tl-body::before { background: var(--sand); }
.bg-sand .tl-item.is-key .tl-body::before { background: var(--accent); }
.tl-body h3 { font-size: 1.22rem; margin-bottom: .4rem; }
.tl-body p { font-size: .96rem; margin-bottom: 0; }
.tl-body ul { margin: .7rem 0 0; font-size: .94rem; }
.tl-body li { margin-bottom: .35rem; }
.tl-body li::marker { color: var(--gold); }

/* La chronologie sur une bande sombre.
   Ses couleurs ont été réglées pour un fond clair : repères en teal,
   pastilles teal, rail gris. Sur le teal, tout cela disparaît. Les
   horaires passent en blanc plutôt qu'en or : l'or, sur ce teal, ne
   donne pas assez de contraste pour de petits caractères. L'or reste aux
   pastilles des temps forts, là où il souligne. */
.bg-ink .timeline::before, .bg-teal .timeline::before { background: rgba(255, 255, 255, .22); }
.bg-ink .tl-when, .bg-teal .tl-when { color: #fff; }
.bg-ink .tl-when small, .bg-teal .tl-when small { color: rgba(214, 224, 223, .72); }
.bg-ink .tl-body::before { background: var(--accent-deep); border-color: rgba(255, 255, 255, .6); }
.bg-teal .tl-body::before { background: var(--accent); border-color: rgba(255, 255, 255, .6); }
.bg-ink .tl-item.is-key .tl-body::before,
.bg-teal .tl-item.is-key .tl-body::before {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(176, 141, 63, .28);
}
.bg-ink .tl-body li, .bg-teal .tl-body li { color: #C6D6D4; }

@media (max-width: 720px) {
  .timeline::before { left: 5px; }
  .tl-item { grid-template-columns: 1fr; gap: .5rem; padding-left: 1.9rem; }
  .tl-when { text-align: left; }
  .tl-body::before { left: -1.9rem; top: .35rem; transform: none; }
}

/* ---------- Grille d'indications / cas traités ---------- */
.indics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line);
          border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.indic { background: #fff; padding: 1.8rem 1.9rem; }
.indic h3 {
  font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: .7rem;
}
.indic p { font-size: .95rem; margin: 0; }
.indic ul { margin: .6rem 0 0; padding-left: 1.1em; font-size: .93rem; }
.indic li { margin-bottom: .3rem; }
.indic li::marker { color: var(--gold); }
@media (max-width: 780px) { .indics { grid-template-columns: 1fr; } }
/* La case blanche qui complète une grille impaire : inutile, et vide, sur
   une seule colonne (15 septembre 2026). */
@media (max-width: 780px) { .indic-vide { display: none; } }

/* Paragraphes côte à côte, sous leur titre : la section « sans rasage » de
   la page femme, passée au vert des bandeaux et sans photographie à la
   demande de Fares le 15 septembre 2026. Ils s'empilent sur écran étroit. */
.paragraphes-cote {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem); margin-top: 1.6rem;
}
.paragraphes-cote p { margin: 0; }
@media (max-width: 900px) { .paragraphes-cote { grid-template-columns: 1fr; gap: 1.1rem; } }

/* ---------- Fiche technique d'intervention ---------- */
.specs {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; overflow: hidden; margin: 0;
}
.specs dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.specs .spec { background: #fff; padding: 1.1rem 1.4rem; }
.specs dt {
  font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: .3rem;
}
.specs dd {
  margin: 0; font-family: var(--font-serif); font-size: 1.22rem; color: var(--ink); line-height: 1.25;
}
.specs .spec-wide { grid-column: 1 / -1; }
.specs .spec-wide dd { font-family: var(--font-sans); font-size: .96rem; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 620px) { .specs dl { grid-template-columns: 1fr; } }

/* Comparateur avant / après plein format */
.ba-large { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.ba-large figure { margin: 0; position: relative; border-radius: var(--radius-lg);
                   overflow: hidden; background: var(--sand-deep); }
.ba-large img { width: 100%; display: block; }
/* Les étiquettes « Avant » et « Après », dans leur figure. La règle visait
   toutes les légendes du comparateur : la phrase sous l'avant/après empilé
   de la page sourcils, qui n'est pas dans une figure, prenait la position
   absolue et s'affichait en haut de la page, sur la bande des réseaux
   sociaux (vu le 15 septembre 2026, à la remise en ligne de la page). */
.ba-large figure figcaption {
  position: absolute; top: .8rem; left: .8rem;
  background: rgba(15,20,23,.75); color: #fff;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 2px;
}
@media (max-width: 620px) { .ba-large { grid-template-columns: 1fr; } }

/* Variante empilée : gros plans très larges (sourcils) */
.ba-large.ba-stack { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; gap: .8rem; }
.ba-stack .ba-stack-cap {
  margin-top: .3rem; font-size: .84rem; color: var(--ink-mute); text-align: center;
}

/* ---------- Article ---------- */
.article-meta {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center;
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
  padding-bottom: 1.6rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--line);
}
.article-meta a { color: var(--accent); text-decoration: none; }
.article-hero-img { border-radius: var(--radius-lg); margin-bottom: 2.4rem; width: 100%; }
.article-nav {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.6rem;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
}
.article-nav a { color: var(--accent); text-decoration: none; font-weight: 600; }
.article-nav a:hover { color: var(--gold); }

/* Liste de faits / diplômes */
.facts { list-style: none; padding: 0; margin: 0; }
.facts li {
  position: relative; padding: .75rem 0 .75rem 1.9rem;
  border-bottom: 1px solid var(--line-soft); font-size: .96rem;
}
.facts li::before {
  content: ""; position: absolute; left: 0; top: 1.4rem;
  width: 9px; height: 9px; border: 1px solid var(--accent); border-radius: 50%;
}
.facts li:last-child { border-bottom: 0; }

/* Avant / après */
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; counter-reset: ba; }
/* Deux cas seulement : sur trois colonnes, la troisième restait vide. Les deux
   cartes se centrent sur deux colonnes, et s'empilent sur téléphone
   (page femme, 15 septembre 2026). */
.ba-deux .ba-grid { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
@media (max-width: 620px) { .ba-deux .ba-grid { grid-template-columns: 1fr; } }
.ba-card {
  counter-increment: ba;
  position: relative;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.ba-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 50px -28px rgba(15,20,23,.32);
  border-color: var(--line);
}
.ba-card::after {
  content: counter(ba, decimal-leading-zero);
  position: absolute; top: .7rem; right: .8rem; z-index: 2;
  font-family: var(--font-serif); font-style: italic; font-size: 1rem;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); overflow: hidden; }
.ba-pair figure { margin: 0; position: relative; background: var(--sand-deep); overflow: hidden; }
.ba-pair img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .6s var(--ease); }
.ba-card:hover .ba-pair img { transform: scale(1.06); }
.ba-pair figure::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, rgba(15,20,23,.45), transparent);
  opacity: 0; transition: opacity .4s var(--ease); pointer-events: none;
}
.ba-card:hover .ba-pair figure::after { opacity: 1; }
.ba-pair figcaption {
  position: absolute; top: .6rem; left: .6rem; z-index: 1;
  background: rgba(15,20,23,.72); color: #fff;
  font-size: .62rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 0;
}
.ba-foot { padding: .95rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ba-foot span { font-size: .78rem; color: var(--ink-mute); letter-spacing: .04em; }
.ba-foot a { font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.ba-foot a:hover { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .ba-card, .ba-pair img, .ba-pair figure::after { transition: none; }
}

/* ---------- Carrousel avant / après ----------
   Demandé par Fares le 16 septembre 2026, d'après une clinique madrilène :
   une grande dalle au centre, les voisines réduites et estompées de part et
   d'autre. Seules les paires en haute définition y entrent, les vignettes de
   450 pixels de l'ancien site se verraient floues à cette taille. */
.bashow {
  --dalle: min(820px, 76vw);          /* largeur de la dalle active */
  --pas: calc(var(--dalle) * .8);      /* distance entre deux dalles voisines */
  --fondu: cubic-bezier(.22, .61, .36, 1);
  position: relative; margin-top: 2.8rem;
}
/* La fenêtre reçoit sa hauteur du script, celle de la dalle active : les
   dalles sont posées en absolu, chacune décalée de son rang (--o) par rapport
   à la dalle du milieu. Le tour est circulaire : après la dernière vient la
   première, dans le même sens, sans jamais rembobiner. */
.bashow-fenetre {
  position: relative; overflow: hidden; padding-block: 1.4rem;
  perspective: 1800px; transition: height .7s var(--fondu);
}
/* Les dalles voisines se dissolvent sur les bords au lieu d'être coupées net.
   Les flèches sont en dehors de cette fenêtre : le fondu ne les touche pas. */
@media (min-width: 901px) {
  .bashow-fenetre {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  }
}
.bashow-slide {
  --o: 0;
  position: absolute; top: 50%; left: 50%;
  width: var(--dalle); margin-left: calc(var(--dalle) / -2);
  background: #fff; border: 1px solid var(--line);
  /* Centrées verticalement : un montage, moins haut qu'une paire, reste au
     milieu de la fenêtre au lieu de laisser un vide sous lui. */
  transform: translate(calc(var(--o) * var(--pas)), -50%) scale(.8) rotateY(calc(var(--o) * -12deg));
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .85s var(--fondu), opacity .85s var(--fondu), visibility 0s .85s;
}
.bashow-slide[data-o="-1"], .bashow-slide[data-o="1"] {
  opacity: .45; visibility: visible; transition-delay: 0s;
  pointer-events: auto; cursor: pointer;   /* un clic l'amène au centre */
}
.bashow-slide.is-active {
  transform: translate(0, -50%) scale(1) rotateY(0);
  opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
  box-shadow: 0 34px 60px -34px rgba(15,20,23,.4);
}
.bashow-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
/* Un montage de l'ancien site, avant et après dans une seule image */
.bashow-montage figure { margin: 0; background: var(--sand-deep); }
.bashow-montage img { width: 100%; display: block; }
.bashow-pair figure { margin: 0; position: relative; background: var(--sand-deep); overflow: hidden; }
.bashow-pair img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.bashow-pair figcaption {
  position: absolute; top: .7rem; left: .7rem; z-index: 1;
  background: rgba(15,20,23,.72); color: #fff;
  font-size: .66rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  padding: .3rem .6rem;
}
.bashow-foot {
  padding: 1rem 1.3rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.bashow-foot span { font-size: .84rem; color: var(--ink-mute); letter-spacing: .03em; }
.bashow-foot a {
  font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
}
.bashow-foot a:hover { color: var(--gold); }
.bashow-fleche {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 3rem; height: 3rem; display: grid; place-items: center; padding: 0;
  background: rgba(255,255,255,.94); border: 1px solid var(--line); cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.bashow-fleche:hover { background: #fff; border-color: var(--accent); }
.bashow-fleche::before {
  content: ""; width: .6rem; height: .6rem;
  border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);
}
.bashow-prec { left: calc(50% - var(--dalle) / 2 - 4rem); }
.bashow-suiv { right: calc(50% - var(--dalle) / 2 - 4rem); }
.bashow-prec::before { transform: rotate(-135deg); margin-left: .22rem; }
.bashow-suiv::before { transform: rotate(45deg); margin-right: .22rem; }
.bashow-points { display: flex; justify-content: center; gap: .5rem; margin-top: 1.8rem; }
.bashow-point {
  width: 28px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: var(--line); transition: background .3s var(--ease);
}
.bashow-point.is-active { background: var(--accent); }

/* Sur téléphone et tablette, la dalle prend presque toute la largeur : les
   flèches passent alors sur ses bords, faute de place à côté. */
@media (max-width: 900px) {
  .bashow { --dalle: min(820px, 88vw); --pas: calc(var(--dalle) * .92); }
  .bashow-fleche { width: 2.5rem; height: 2.5rem; }
  .bashow-prec { left: .3rem; }
  .bashow-suiv { right: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bashow-fenetre, .bashow-slide { transition: none; }
}

.pagination { display: flex; justify-content: center; gap: .4rem; margin-top: var(--s5); flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .84rem; text-decoration: none; color: var(--ink-soft); padding: 0 .8rem;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .is-current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* FAQ */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  list-style: none; cursor: pointer;
  padding: 1.35rem 2.5rem 1.35rem 0; position: relative;
  font-family: var(--font-serif); font-size: 1.16rem; color: var(--ink); line-height: 1.35;
  transition: color .2s;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--accent); }
.faq-item > summary::after {
  content: ""; position: absolute; right: .4rem; top: 1.85rem;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg); transition: transform .28s var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(-135deg); top: 2rem; }
.faq-answer { padding: 0 2.5rem 1.6rem 0; font-size: .98rem; }
.faq-answer > *:last-child { margin-bottom: 0; }

/* Témoignages */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem 2.1rem; display: flex; flex-direction: column;
}
.quote p {
  font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.6; color: var(--ink);
  margin: 0 0 1.3rem;
}
.quote::before {
  content: "”"; font-family: var(--font-serif); font-size: 3rem; line-height: .6;
  color: var(--gold); margin-bottom: .8rem; display: block;
}
.quote cite {
  margin-top: auto; font-style: normal;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
}

.quote-who { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.quote-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.quote-who cite { margin: 0; }

/* Bandeau de logos (sociétés savantes) */
.logos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  align-items: center; justify-items: center;
}
.logo-item {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.5rem; width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .25s var(--ease);
}
.logo-item:hover { border-color: var(--gold); }
.logo-item img { max-height: 90px; width: auto; object-fit: contain; }
@media (max-width: 700px) { .logos { grid-template-columns: 1fr; } }

/* Image d'illustration dans le fil du texte */
.prose figure.inline-fig { margin: 2rem auto; max-width: 460px; }
.prose figure.wide-fig { margin: 2.5rem 0; }
.prose figure.wide-fig img { width: 100%; }

/* Bandeau CTA */
.cta-band { background: var(--accent-deep); color: #C6D6D4; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; top: -40%; right: -10%;
  width: 520px; height: 520px; border: 1px solid rgba(176,141,63,.3); border-radius: 50%;
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band-inner {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 3rem; align-items: center;
  padding: var(--s6) 0;
}
.cta-band h2 { color: #fff; margin-bottom: .5rem; }
.cta-band p { margin-bottom: 0; }
.cta-band .btn-row { margin-top: 0; justify-content: flex-end; }

/* Bloc contact */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.contact-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.9rem 1.8rem;
}
.contact-item h3, .contact-item h4 {
  font-family: var(--font-sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .7rem;
}
.contact-item p { margin: 0; font-size: .98rem; color: var(--ink); }
.contact-item a { color: var(--ink); text-decoration: none; }
.contact-item a:hover { color: var(--accent); }

.hours { list-style: none; padding: 0; margin: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line-soft); font-size: .95rem;
}
.hours li:last-child { border-bottom: 0; }
.hours span:last-child { color: var(--ink); font-weight: 500; }

.map-embed {
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16/9; background: var(--sand-deep);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Galerie */
/* Titre de section réservé à la structure : lu par les lecteurs d'écran et
   les moteurs, invisible à l'écran là où le titre de page suffit déjà. */
.sr-titre {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Page Vidéos ---------- */
.videos-grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem 1.4rem;
  margin-top: 2rem;
}
.videos-grille.grille-large { grid-template-columns: repeat(2, 1fr); gap: 2.2rem; }
@media (max-width: 900px) { .videos-grille, .videos-grille.grille-large { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .videos-grille, .videos-grille.grille-large { grid-template-columns: 1fr; } }

.video-carte { display: flex; flex-direction: column; }

/* L'affiche est un bouton : le lecteur n'arrive qu'au clic. */
.video-affiche {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: var(--accent-deep); cursor: pointer; overflow: hidden;
  border-radius: var(--radius-lg); aspect-ratio: 16 / 9;
}
.video-affiche img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease), opacity .3s;
}
.video-affiche:hover img { transform: scale(1.04); opacity: .82; }
.video-affiche:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 49, 52, .82); color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.video-affiche:hover .video-play { background: var(--gold); color: var(--accent-deep); transform: scale(1.06); }
.video-play svg { width: 24px; height: 24px; margin-left: 3px; }
.est-grande .video-play { width: 70px; height: 70px; }
.est-grande .video-play svg { width: 29px; height: 29px; }

.video-corps { padding: 1rem .1rem 0; }
.video-corps h3 {
  font-family: var(--font-sans); font-size: 1rem; font-weight: 500;
  line-height: 1.4; margin: 0 0 .3rem; color: var(--ink);
}
.est-grande .video-corps h3 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; }
.video-corps p { margin: 0; font-size: .92rem; color: var(--ink-mute); line-height: 1.55; }

/* Le lecteur, une fois chargé, prend la place de l'affiche. */
.video-carte iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--radius-lg); display: block; background: #000;
}

.videos-note {
  text-align: center; font-size: .86rem; color: var(--ink-mute);
  max-width: 46ch; margin: 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  .video-affiche img, .video-play { transition: none; }
  .video-affiche:hover img { transform: none; }
}

/* Cas dont la photographie est un montage : avant et après y figurent déjà,
   on l'affiche pleine largeur au lieu de le répéter dans les deux cases. */
.ba-montage img { width: 100%; display: block; }

/* Fiches patients : montages avant/après, une image par angle de vue */
.cas-vues { display: grid; gap: 2.2rem; margin-top: 1.4rem; }
/* Trois clichés d'une même étape, côte à côte.
   .cas-vues empile en pleine largeur, ce qui convient à un montage composite
   de 700 x 357 mais écraserait la page avec trois portraits 4:5 de 1200 px.
   Ajouté le 12 septembre 2026 pour la fiche du patient 97, dont chaque étape
   compte trois angles là où le vis-à-vis .ba-large n'en accepte que deux. */
.cas-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.4rem; }
@media (max-width: 860px) { .cas-trio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cas-trio { grid-template-columns: 1fr; } }
.figure-cas { margin: 0; }
.figure-cas img { width: 100%; border-radius: var(--radius-lg); background: var(--sand-deep); }
.figure-cas figcaption {
  font-size: .84rem; color: var(--ink-mute); margin-top: .6rem; line-height: 1.5;
}

/* Galerie d'ambiance — purement illustrative : ni lien, ni agrandissement,
   ni effet au survol. Rien n'y est cliquable. */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem 1rem; }
.gallery figure { margin: 0; }
.gallery img {
  aspect-ratio: 1; object-fit: cover; width: 100%;
  border-radius: var(--radius-lg); background: var(--sand-deep);
}
.gallery figcaption {
  font-size: .8rem; color: var(--ink-mute); margin-top: .55rem; line-height: 1.45;
}

/* Vidéo */
.video-embed {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--accent-deep);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Tableau simple */
.table-wrap { overflow-x: auto; margin: 2rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-sans); font-size: .72rem; font-weight: 600;
     letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--accent-deep); color: #A9BDBB; padding-top: var(--s6); }
.site-footer a { color: #D8E4E2; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem;
  padding-bottom: var(--s5);
}
.footer-brand img { height: 52px; margin-bottom: 1.1rem; }
.footer-brand p { font-size: .92rem; max-width: 34ch; }
.footer-col h4 {
  font-family: var(--font-sans); color: #fff; font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .6rem; font-size: .92rem; }
.footer-social { display: flex; gap: .7rem; margin-top: 1.3rem; }
.footer-social a {
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .22s, border-color .22s, color .22s;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--accent-deep); }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 1.5rem 0; display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between; font-size: .82rem;
}

/* Bouton WhatsApp flottant */
.float-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #128C7E; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px -8px rgba(18,140,126,.6);
  transition: transform .25s var(--ease);
}
.float-wa:hover { transform: scale(1.07); }
.float-wa svg { width: 27px; height: 27px; }

/* Photo de façade placée sous la carte, sur l'accueil */
.figure-facade { margin: 1rem 0 0; }
.figure-facade img { width: 100%; }
.figure-facade figcaption {
  font-size: .82rem; color: var(--ink-mute); margin-top: .55rem; line-height: 1.5;
}

/* Pied de page : réseaux sociaux en pastilles, puis les deux forums affichés
   avec leur vrai logotype — ce sont des marques, elles doivent être reconnues.
   Hauteurs réduites par rapport à la barre du haut : au pied de page elles
   accompagnent, elles n'annoncent pas. */
.footer-social { flex-wrap: wrap; align-items: center; gap: .5rem; row-gap: .7rem; }
.footer-social a { width: 28px; height: 28px; }
.footer-social svg { width: 13px; height: 13px; }

.footer-social a.footer-logo {
  width: auto; height: auto; border: 0; border-radius: 0;
  padding: 0 .1rem; opacity: .7;
  transition: opacity .25s var(--ease);
}
.footer-social a.footer-logo:hover { background: none; opacity: 1; }
.footer-social a.footer-logo img { width: auto; display: block; }
/* hauteurs séparées : les deux logotypes n'ont pas les mêmes proportions */
.footer-social a[href*="hairrestorationnetwork"] img { height: 12px; }
.footer-social a[href*="international-hairlossforum"] img { height: 14px; }

/* Bandeau cookies */
.cookie-bar {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 95;
  max-width: 640px; margin-inline: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px -20px rgba(15,20,23,.35);
  padding: 1.15rem 1.4rem;
  display: none; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  font-size: .88rem;
}
.cookie-bar.is-visible { display: flex; }
.cookie-bar p { margin: 0; flex: 1 1 320px; }
.cookie-bar .btn { padding: .65rem 1.3rem; font-size: .72rem; }

/* Animations d'apparition */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Dévoilement des images, à l'arrivée dans l'écran.

   Le cadre est masqué par le bas puis se lève, en sept dixièmes de
   seconde : l'image se découvre du haut vers le bas au lieu d'apparaître
   d'un bloc. C'est ce que Fares a vu sur fuegenix.com et voulu ici.

   Le décalage entre les cartes d'une même rangée les fait arriver l'une
   après l'autre, ce qui se remarque plus que l'effet lui-même.

   Rien n'est masqué pour qui n'a pas de JavaScript : c'est .is-in qui
   déclenche, et sans lui l'image reste simplement visible.

   Les avant/après en sont exclus, à la demande de Fares : sur une
   grille de paires, le dévoilement retarde la seule chose qu'on est
   venu voir. Elles s'affichent directement. */
@media (prefers-reduced-motion: no-preference) {
  .reveal .card-media,
  .reveal .split-bleed-media,
  .devoile {
    clip-path: inset(0 0 100%);
    transition: clip-path .7s cubic-bezier(.65, 0, .35, 1);
  }
  .reveal.is-in .card-media,
  .reveal.is-in .split-bleed-media,
  .reveal.is-in .devoile,
  .devoile.is-in { clip-path: inset(0 0 0); }

  .reveal.is-in .card-media { transition-delay: .05s; }
  .cards > *:nth-child(2) .card-media { transition-delay: .16s; }
  .cards > *:nth-child(3) .card-media { transition-delay: .27s; }
  .cards > *:nth-child(4) .card-media { transition-delay: .38s; }
  .cards > *:nth-child(5) .card-media { transition-delay: .49s; }
}

/* Barre de progression de lecture */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--gold); z-index: 200; transition: width .1s linear;
}

/* Titres révélés mot à mot */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word-in {
  display: inline-block; transform: translateY(112%);
  transition: transform .8s var(--ease);
}
.is-split.is-in .word-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .word-in { transform: none; transition: none; }
  .scroll-progress { display: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Paliers intermédiaires : on libère de la place avant de basculer en menu mobile */
@media (max-width: 1340px) {
  .brand-tag { display: none; }
  .nav a, .nav .nav-toggle { padding: .7rem .48rem; letter-spacing: .04em; }
  .nav > ul > li > a::after, .nav > ul > li > .nav-toggle::after { left: .48rem; right: .48rem; }
}
@media (max-width: 1220px) {
  .brand-text { display: none; }
  .header-cta { display: none; }
}

@media (max-width: 1080px) {
  .nav, .header-cta { display: none; }
  .burger { display: inline-flex; }
  .brand-text { display: flex; }
  .brand-tag { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .section { padding: var(--s6) 0; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split.reverse > *:first-child { order: 0; }
  /* Sur une seule colonne, le portrait passe avant le texte qui présente la
     personne : empilé dans l'ordre de la page, il arrivait après tout le
     paragraphe. Fares l'a demandé le 15 septembre 2026. */
  .split-media.portrait { order: -1; }
  .cards-3, .cards-2 { grid-template-columns: 1fr; }
  .ba-grid { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .trust .wrap { grid-template-columns: repeat(2, 1fr); }
  .cta-band-inner { grid-template-columns: 1fr; gap: 1.6rem; text-align: left; }
  .cta-band .btn-row { justify-content: flex-start; }
  .topbar-phone { display: none; }
}
@media (max-width: 620px) {
  :root { --header-h: 70px; }
  .brand img { height: 38px; }
  .brand-name { font-size: 1.05rem; }
  .topbar { font-size: .72rem; }
  .topbar .wrap { justify-content: center; }
  /* place limitée : on garde les liens, on retire le libellé et on resserre */
  .topbar-social > span { display: none; }
  .topbar-social { gap: .6rem; }
  .topbar-social a[href*="hairrestorationnetwork"] img { height: 11px; }
  .topbar-social a[href*="international-hairlossforum"] img { height: 16px; }
  .cards-4, .ba-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .step { grid-template-columns: 40px 1fr; gap: 1rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .float-wa { width: 48px; height: 48px; right: 14px; bottom: 14px; }
  .cookie-bar { left: 12px; right: 12px; bottom: 12px; }
}

/* Impression */
@media print {
  .site-header, .topbar, .site-footer, .float-wa, .cookie-bar, .cta-band { display: none !important; }
  body { color: #000; }
}

/* ---------- Fils de patients sur les forums ----------
   Une ligne par discussion : le pseudonyme à gauche, ce qu'on va y trouver
   à droite. On peut en aligner quarante sans que la page s'allonge, et le
   lecteur repère celui qui ressemble à son cas. */
.fils {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  border-top: 1px solid var(--line);
}
.fils li { border-bottom: 1px solid var(--line); }
.fils a {
  display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.05rem .2rem; text-decoration: none;
  transition: background .2s var(--ease), padding-left .2s var(--ease);
}
.fils a:hover { background: var(--sand); padding-left: .8rem; }
.fil-who {
  font-family: var(--font-serif); font-size: 1.24rem; color: var(--ink);
  flex: 0 0 auto; min-width: 9.5rem;
}
.fil-what { font-size: .95rem; color: var(--ink-mute); flex: 1 1 16rem; }
/* La flèche dit que le lien sort du site, sans ajouter de texte. */
.fils a::after {
  content: "\2197"; color: var(--accent); flex: none;
  opacity: 0; transition: opacity .2s var(--ease);
}
.fils a:hover::after { opacity: 1; }
.fils a:hover .fil-who { color: var(--accent); }
.bg-sand .fils a:hover { background: var(--paper); }
@media (max-width: 620px) {
  .fils a { gap: .2rem; }
  .fil-who { min-width: 100%; }
}

/* Sur fond sombre, l'étiquette en teal disparaît : elle passe à l'or. */
.bg-ink .eyebrow, .bg-teal .eyebrow { color: var(--gold); }
.bg-ink .lede, .bg-ink p, .bg-teal .lede, .bg-teal p { color: #C6D6D4; }

.forum-cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem; margin-top: 2.5rem;
}
.forum-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 2.2rem 2rem; text-decoration: none;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-lg);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.forum-card:hover { border-color: var(--gold); background: rgba(255,255,255,.04); }
.forum-logo { display: block; margin-bottom: 1.4rem; }
.forum-logo img { height: 26px; width: auto; opacity: .85; }
.forum-card p { color: #C6D6D4; font-size: .96rem; margin-bottom: 1.4rem; }
.forum-go {
  margin-top: auto;
  font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
}
.forum-go::after { content: " \2197"; }
@media (max-width: 760px) { .forum-cards { grid-template-columns: 1fr; } }

/* ---------- Bandeau de saison ----------
   Une ligne au-dessus de tout, qui change avec les mois. Le vert profond du
   logotype plutôt que le teal de la barre de contact : les deux bandes se
   distinguent, sans que la page prenne deux couleurs de plus. */
.bandeau-saison {
  background: var(--logo-green);
  color: #E8EFE9;
  font-size: .875rem;
  line-height: 1.4;
}
.bandeau-saison .wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 1.1rem; flex-wrap: wrap;
  padding: .62rem 0;
  text-align: center;
}
.bandeau-saison a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; font-size: .74rem;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.bandeau-saison a::after { content: " \2192"; }
.bandeau-saison a:hover { border-bottom-color: var(--gold); }

@media (max-width: 560px) {
  .bandeau-saison { font-size: .82rem; }
  .bandeau-saison .wrap { gap: .5rem; padding: .55rem 1rem; }
}

/* ---------- Fiches des maladies du cuir chevelu ----------
   Quatorze fiches dépliables. L'étiquette de droite dit d'emblée si la
   greffe a sa place : c'est l'information que le patient cherche, elle ne
   doit pas obliger à déplier. Trois couleurs, sémantiques et non
   décoratives : vert pour l'indication, ambre pour les conditions
   strictes, rouge sourd pour le refus. */
.maladies { margin-top: 2.6rem; border-top: 1px solid var(--line); }
.maladie { border-bottom: 1px solid var(--line); }
.maladie > summary {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap;
  padding: 1.15rem .2rem;
  cursor: pointer; list-style: none;
  transition: padding-left .2s var(--ease);
}
.maladie > summary::-webkit-details-marker { display: none; }
.maladie > summary:hover { padding-left: .7rem; }
.mc-nom {
  font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink);
  flex: 1 1 18rem; line-height: 1.25;
}
.mc-tag {
  flex: none;
  font-size: .7rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .7rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.mc-oui     .mc-tag { color: #2F6B4F; }
.mc-parfois .mc-tag { color: #8A6516; }
.mc-non     .mc-tag { color: #8C3A32; }

.maladie[open] > summary { padding-bottom: .4rem; }
.maladie[open] .mc-nom { color: var(--accent); }
.maladie-corps {
  padding: 0 0 1.6rem;
  max-width: 74ch;
}
.maladie-corps p { font-size: .97rem; margin: 0 0 1rem; }
.maladie-corps h4 {
  font-family: var(--font-sans);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
  margin: 1.4rem 0 .45rem;
}
/* Le signe qui indique qu'on peut déplier. */
.maladie > summary::after {
  content: "+"; order: 3; flex: none;
  font-size: 1.25rem; line-height: 1; color: var(--ink-mute);
  transition: transform .25s var(--ease);
}
.maladie[open] > summary::after { transform: rotate(45deg); color: var(--accent); }

@media (max-width: 620px) {
  .mc-nom { flex: 1 1 100%; font-size: 1.15rem; }
  .maladie > summary { padding-right: 1.6rem; position: relative; }
  .maladie > summary::after { position: absolute; right: 0; top: 1.2rem; }
}

/* ---------- Ce qui est compris dans le forfait ----------
   Huit lignes, pictogramme à gauche. Le trait est le même que celui des
   icônes du pied de page : 1.6, sans remplissage, sur une grille de 24. */
.services-inclus {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem 2rem; margin-top: 2.6rem;
}
.si-item { display: flex; flex-direction: column; gap: .9rem; }
.si-ico {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  color: var(--accent);
  flex: none;
}
.si-ico svg { width: 21px; height: 21px; }
.si-item p {
  margin: 0; font-size: .92rem; line-height: 1.5;
  color: var(--ink-soft); max-width: 24ch;
}
.bg-sand .si-ico { background: var(--paper); }
@media (max-width: 900px) { .services-inclus { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .services-inclus { grid-template-columns: 1fr; gap: 1.5rem; }
  .si-item { flex-direction: row; align-items: flex-start; gap: 1rem; }
  .si-item p { max-width: none; padding-top: .5rem; }
}

/* ---------- Schéma de la repousse ----------
   Une courbe de densité visible, du jour de l'intervention au douzième
   mois. Le creux de la troisième semaine est le sujet du dessin : c'est
   l'étape qui inquiète, et la voir remonter rassure mieux qu'un texte.

   Le dessin ne porte que des numéros et des repères de temps courts. Les
   titres d'étape sont dans les cartes, sous le schéma : écrits sur l'axe,
   ils se chevauchaient. */
.sr-bloc { margin: 0; }
.sr-schema { width: 100%; height: auto; display: block; overflow: visible; }
.sr-axe   { stroke: var(--line); stroke-width: 1; }
.sr-trace { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.sr-tige  { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.sr-point { fill: var(--accent); stroke: var(--paper); stroke-width: 3; }
.bg-sand .sr-point { stroke: var(--sand); }
.sr-num {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  fill: #fff;
}
.sr-stop-haut { stop-color: var(--accent); stop-opacity: .14; }
.sr-stop-bas  { stop-color: var(--accent); stop-opacity: 0; }
.sr-repere {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-mute);
}
.sr-bloc figcaption {
  margin-top: 1.4rem; font-size: .9rem; color: var(--ink-mute); text-align: center;
}
.sr-bloc figcaption em { color: var(--ink); font-style: italic; }

.sr-details {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; margin-top: 3rem;
  border-top: 1px solid var(--line); padding-top: 2.4rem;
}
.sr-detail { display: grid; grid-template-columns: 2rem 1fr; gap: 0 1rem; }
.sr-detail-num {
  font-family: var(--font-sans); font-size: .82rem; font-weight: 500;
  width: 1.85rem; height: 1.85rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--accent);
}
.bg-sand .sr-detail-num { background: var(--paper); }
.sr-detail-quand {
  display: block;
  font-family: var(--font-sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .35rem; padding-top: .35rem;
}
.sr-detail h4 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.16rem; color: var(--ink);
  margin: 0 0 .4rem; line-height: 1.25;
}
.sr-detail p { margin: 0; font-size: .93rem; }

@media (max-width: 1000px) and (min-width: 641px) {
  .sr-details { grid-template-columns: repeat(2, 1fr); }
  .sr-repere { font-size: 18px; }
  .sr-num { font-size: 16px; }
}
/* Sous 640px la courbe devient illisible : on la retire, les six cartes
   disent la même chose. */
@media (max-width: 640px) {
  .sr-bloc { display: none; }
  .sr-details { grid-template-columns: 1fr; border-top: 0; padding-top: 0; margin-top: 1.5rem; }
}
/* Sous 720px le dessin devient illisible : on le retire et les six
   paragraphes, qui disent la même chose, suffisent. */
@media (max-width: 720px) {
  .sr-bloc { display: none; }
  .sr-details { grid-template-columns: 1fr; border-top: 0; padding-top: 0; margin-top: 1.5rem; }
}
@media (max-width: 1000px) and (min-width: 721px) {
  .sr-details { grid-template-columns: repeat(2, 1fr); }
  .sr-etape { font-size: 27px; }
  .sr-repere { font-size: 17px; }
}