/* ---------- Police embarquée (Hanken Grotesk, OFL) ---------- */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/hanken-0.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/hanken-1.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/hanken-2.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/hanken-3.woff2') format('woff2');}

/* ---------- Tokens (palette « blanc clinique » v2) ---------- */
:root{
  --white:#ffffff; --paper:#ffffff;
  --stone:#f1f4f8;   /* galet du lac : gris-bleu très clair, retenu par la cliente */
  /* --mist était à 1,004:1 de --stone : il ne portait aucune information. Aliasé plutôt que
     supprimé, pour n'avoir rien à modifier dans ses 6 usages (dont 3 états de survol). */
  --mist:var(--stone);
  --blue-soft:#e4eef9;
  --navy:#004c92;        /* bleu du logo — titres, bandes foncées */
  --navy-deep:#003a71;   /* survol des surfaces bleues */
  --edge:#75828f;        /* bordures de contrôles : 3,93:1 sur blanc, 3,52:1 sur le papier */
  --edge-soft:#d5dde6;
  --blue-tint:#eaf1f6;
  --on-navy-soft:#cfe0f2; /* texte secondaire posé sur --navy */
  --stone-line:#dde5ee;
  /* La ligne d'eau : SEULE courbe du site, et seul séparateur de section. Elle doit rester
     plus CLAIRE que --edge (3,93:1, bordures de champs), sinon on la lirait comme un élément
     d'interface et non comme un trait de séparation. */
  --waterline:#7a94b0;   /* 3,14:1 sur blanc · 2,85:1 sur le galet · 2,68:1 sur le bleu clair */
  --danger:#c62828; --danger-soft:#fdecec; --danger-deep:#8e1f1f; --blue:#1263b5;
  --ink:#25313f; --muted:#4f6070;  /* assombri : sur le papier du pied de page l'ancien n'était qu'à 5,17:1 */ --line:#e1e8f0; --line-strong:#b9c0c9;
  /* ---- Échelle d'espacement ----
     Le site employait 27 valeurs de marge différentes, plus 13 écrites en dur dans les
     gabarits. Les valeurs autour des images étaient prises dans le bas de cette liste, celui
     réservé aux détails d'interface : une photographie de 475 px de haut recevait 16 px d'air.
     Six pas suffisent. Les trois premiers sont FIXES — ils lient un texte à son titre, ils
     suivent le corps de texte et non l'écran. Les deux derniers sont FLUIDES : ils séparent
     des objets qui grandissent avec l'écran. */
  --pas-1:4px;    /* micro-liaison : un sous-titre à son titre */
  --pas-2:8px;    /* intérieur de composant */
  --pas-3:16px;   /* rythme de paragraphe */
  /* --pas-4 est délibérément FIXE, et c'est l'arbitrage central : une légende posée à 48 px
     sous son image cesse d'être lue comme SA légende. Un lien typographique ne s'élargit pas
     avec l'écran ; un intervalle de mise en page, si. */
  --pas-4:24px;   /* le LIEN entre un objet et son libellé : légende, nom sous un portrait */
  --pas-5:clamp(32px, 2.2vw + 23px, 48px);  /* intervalle court */
  --pas-6:76px;   /* rythme de section, et air des photographies */
  --wrap:1180px;
  --r-card:18px; --r-img:20px; --r-pill:999px;
  --shadow:0 14px 34px -22px rgba(0,76,146,.28);
  --shadow-sm:0 8px 20px -16px rgba(0,76,146,.32);
  --fam:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Hanken Grotesk ne contient AUCUN idéogramme. Sans pile chinoise déclarée, le navigateur
     choisit seul et peut retomber sur une police à empattements ou à chasse fixe, illisible
     pour un texte courant. On nomme donc les polices système de chaque plate-forme, dans
     l'ordre : Apple, Windows, Android/Linux. Rien n'est téléchargé — une police chinoise pèse
     plusieurs mégaoctets, impensable pour notre première cible. */
  --fam-zh:'Hanken Grotesk', -apple-system, 'PingFang SC', 'Hiragino Sans GB',
           'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', 'WenQuanYi Micro Hei',
           sans-serif;
}

/* ---------- Reset léger ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--fam); font-weight:400; font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Le tiroir mobile fermé est poussé hors écran (translateX) : sans cela la page défile
   latéralement d'environ 330px sur mobile et tablette. « clip » (et non « hidden ») car il
   ne crée pas de conteneur de défilement et préserve donc le header sticky. Le repli pour
   les navigateurs sans « clip » reste le overflow-x:hidden de body ci-dessus. */
@supports (overflow:clip){ html,body{overflow-x:clip;} }
img{max-width:100%; display:block;}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}
a .arw{display:inline-block; text-decoration:none;}
h1,h2,h3,h4{color:var(--navy); font-weight:700; line-height:1.1; margin:0; text-wrap:balance; letter-spacing:-.01em;}
p{margin:0 0 1em;}
button{font-family:inherit;}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px;}
/* Sur fonds foncés, l'anneau bleu tomberait à 1.6:1 : on le passe en blanc. */
/* L'anneau de focus blanc n'a de sens que sur un fond SOMBRE : il ne s'applique donc qu'à la
   bande de contact. Il avait aussi été posé sur deux tuiles à fond clair, où il tombait à
   1,1:1 ; ces tuiles ont depuis été retirées de l'accueil. */
.cta-band :focus-visible{outline-color:#ffffff;}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.eyebrow{font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 14px;}
.eyebrow.on-blue{color:var(--blue);}
.lead{font-size:1.14rem; color:var(--ink); max-width:62ch;}
.muted{color:var(--muted);}
.center{text-align:center;}
.edit{display:inline-block; font-size:.78em; font-weight:500; letter-spacing:.02em; color:var(--muted); vertical-align:middle; white-space:nowrap;}
/* ---------- Boutons pilule ---------- */
.btn{display:inline-flex; align-items:center; gap:.55em; font-weight:700; font-size:.98rem;
  padding:.82em 1.5em; border-radius:var(--r-pill); border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; text-decoration:none;}
.btn:hover{text-decoration:none; transform:translateY(-1px);}
.btn .dot{width:1.5em; height:1.5em; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.9em;}
.btn-primary{background:var(--blue); color:#fff; box-shadow:var(--shadow-sm);}
/* Le survol change de fond de 1,89:1 seulement : l'anneau porte le retour visuel, et lui seul
   subsiste quand le visiteur a demandé à son système de réduire les animations. */
.btn-primary:hover{background:var(--navy-deep); box-shadow:0 0 0 3px var(--blue-soft), var(--shadow-sm);}
.btn-primary .dot{background:rgba(255,255,255,.22);}
/* 18 des 26 boutons sont posés DANS .cta-band, dont le fond est --navy : un bouton bleu y serait
   à 1,4:1, donc invisible. Inversé en pastille blanche, il devient l'objet le plus lumineux du
   panneau (8,58:1), donc le plus vite repéré. */
.cta-band .btn-primary{background:#ffffff; color:var(--navy); box-shadow:none;}
.cta-band .btn-primary:hover{background:var(--blue-soft); box-shadow:0 0 0 3px rgba(255,255,255,.35);}
.cta-band .btn-primary .dot{background:rgba(0,76,146,.14);}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--edge-soft);}
.btn-ghost:hover{border-color:var(--navy); background:var(--mist);}
.btn-link{color:var(--blue); font-weight:700; display:inline-flex; align-items:center; gap:.4em; text-decoration:none;}
.btn-link:hover{text-decoration:none;}
.btn-link .lbl{text-decoration:none;}
.btn-link:hover .lbl{text-decoration:underline; text-underline-offset:3px;}
.btn-link .arw{display:inline-flex; text-decoration:none; transition:transform .18s ease;}
.btn-link:hover .arw{transform:translateX(3px);}

/* ---------- En-tête ---------- */
/* Fond OPAQUE, et non translucide. À 92 % d'opacité avec flou, le contenu qui défile
   transparaissait sous la barre : sur une page d'équipe, on voyait des visages passer derrière
   les rubriques. Un en-tête de navigation n'a rien à gagner à laisser voir ce qu'il recouvre.
   Le flou de fond disparaît avec : c'est l'un des effets les plus coûteux à l'affichage, et il
   était recalculé à chaque image pendant le défilement — sur un téléphone d'entrée de gamme,
   cela se sent. */
header.site{position:sticky; top:0; z-index:60; background:var(--paper);
  border-bottom:1px solid var(--line);}
.hrow{display:flex; align-items:center; gap:22px; padding-block:10px;}
/* La barre d'en-tête n'est pas une colonne de lecture : elle peut être plus large que le
   contenu éditorial (1180px). Contrainte à cette largeur, l'ensemble logo + 6 rubriques +
   sélecteur de langue + bouton ne tenait pas et « Prendre contact » sortait de l'écran —
   sans barre de défilement, puisque overflow-x:clip le masquait silencieusement. */
header.site .hrow{max-width:1340px;}
.brand{display:flex; align-items:center; flex-shrink:0; margin-right:auto;}
.brand img{height:88px; width:auto;}
.nav{display:flex; align-items:center; gap:4px; flex-shrink:0;}
.nav a{color:var(--navy); font-weight:500; font-size:.96rem; padding:.55em .72em; border-radius:var(--r-pill); white-space:nowrap;}
.nav a:hover{background:var(--mist); text-decoration:none;}
.nav a[aria-current="page"]{color:var(--blue); font-weight:700; background:var(--blue-soft);}
/* Le bouton « Contact » du tiroir mobile est un lien de .nav : la couleur des liens de menu
   (bleu marine, plus spécifique) l'emportait sur celle du bouton — texte bleu sur fond bleu. */
.nav a.btn-primary, .nav a.btn-primary:hover{color:#fff; background:var(--blue); font-weight:700;}
.nav a.btn-primary:hover{background:var(--navy-deep);}
.drawer-cta{display:none;} /* CTA réservé au tiroir mobile ; masqué sur desktop */
.htools{display:flex; align-items:center; gap:10px; flex-shrink:0;}
/* Palier intermédiaire : plutôt que de basculer en menu burger dès 1359px, on resserre
   la navigation pour garder les rubriques visibles sur les portables 13 et 14 pouces. */
@media (min-width:961px) and (max-width:1239px){ .brand img{height:76px;} }
@media (min-width:1240px) and (max-width:1359px){
  .hrow{gap:14px;}
  .brand img{height:76px;}
  .nav a{font-size:.9rem; padding:.55em .5em;}
  .htools{gap:8px;}
}

.lang{position:relative;}
.lang-btn{display:inline-flex; align-items:center; gap:.35em; background:none; border:1.5px solid var(--edge); color:var(--navy);
  font-weight:500; font-size:.9rem; padding:.5em .8em; border-radius:var(--r-pill); cursor:pointer;}
.lang-btn:hover{border-color:var(--navy);}
.lang-btn .chev{transition:transform .2s ease;}
.lang[data-open="true"] .chev{transform:rotate(180deg);}
.lang-menu{position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:6px; min-width:150px; display:none;}
.lang[data-open="true"] .lang-menu{display:block;}
.lang-menu button, .lang-menu a{display:flex; width:100%; justify-content:space-between; gap:12px; align-items:center; background:none; border:0;
  padding:.55em .7em; border-radius:9px; font-size:.92rem; color:var(--ink); cursor:pointer; text-align:left;}
.lang-menu button:hover, .lang-menu a:hover{background:var(--mist);}
.lang-menu button[aria-current="true"], .lang-menu a[aria-current="true"]{color:var(--blue); font-weight:700;}
.lang-menu .tag{font-size:.68rem; color:var(--muted);}
.burger{display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1.5px solid var(--edge); border-radius:12px; cursor:pointer;}
.burger span{width:20px; height:2px; background:var(--navy); border-radius:2px; transition:transform .25s ease, opacity .2s ease;}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .burger span:nth-child(2){opacity:0;}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.scrim{position:fixed; inset:0; background:rgba(0,76,146,.28); opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:55;}
body.nav-open .scrim{opacity:1; visibility:visible;}

/* ---------- Sections ---------- */
main{display:block;}
/* Lien d'évitement : masqué jusqu'à la tabulation, il permet de sauter l'en-tête. */
.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--navy); color:#fff;
  padding:.8em 1.2em; border-radius:0 0 12px 0; font-weight:700; text-decoration:none;}
.skip-link:focus{left:0;}
/* L'en-tête collant (~103px) recouvrirait la cible des ancres (#contenu, #contactForm...). */
html{scroll-padding-top:130px;}
[id]{scroll-margin-top:120px;}
/* .page display:none retiré (collision avec la classe WP body_class « page ») */
.page.is-active{display:block;}
.sec{padding-block:var(--pas-6);}
/* 52px contre 54px pour .sec sur téléphone : l'écart était de 2 px, donc nul. Toutes les
   sections se lisaient comme un seul bloc. Le pas court rétablit la hiérarchie. */
.sec-tight{padding-block:var(--pas-5);}
.band-stone{background:var(--stone);}
.band-blue{background:var(--blue-soft);}
.sec h2,.sec-tight h2{font-size:clamp(1.7rem,3.6vw,2.5rem);}
.sec .sec-intro{max-width:60ch; color:var(--ink); font-size:1.08rem;}

/* Page légale : le contenu occupe la largeur de la page.
   Une colonne de 65 caractères centrée dans un cadre de 1180 px laissait deux marges
   vides et ne s'alignait plus sur le titre posé juste au-dessus — d'où l'impression
   de bloc flottant. Pleine largeur, donc. Mais une ligne de cette longueur se relit
   mal : chaque article est désormais annoncé par un filet et un titre de taille
   raisonnable. L'œil retrouve son point de reprise par la STRUCTURE, ce que la
   mesure courte faisait auparavant. Un titre de 2,5 rem sur « 1. Éditeur du site »
   annonçait par ailleurs un chapitre là où il n'y a qu'un article. */
/* max-width:none aurait laissé la page légale courir d'un bord à l'autre de l'écran,
   alors que le titre juste au-dessus s'arrête à 1180 px : le décalage aurait simplement
   changé de sens. On reprend donc la mesure de .wrap, celle de tout le reste du site. */
.legal{max-width:var(--wrap);}
/* « > » et non un descendant quelconque : le filet est destiné aux ARTICLES numérotés, qui
   sont enfants directs. Sans lui, la règle attrapait aussi le titre de la bande de contact
   posée en fin de page — un filet gris pâle traversait le pavé bleu marine. */
.legal > h2{font-size:1.3rem; margin-top:var(--pas-5); padding-top:var(--pas-3);
            border-top:1px solid var(--line);}
.legal > h2:first-of-type{margin-top:0; padding-top:0; border-top:0;}

/* Page title (mini-hero par page) */
.phead{padding-block:var(--pas-6) var(--pas-5);}
.phead .eyebrow{margin-bottom:12px;}
.phead h1{font-size:clamp(2rem,5vw,3.1rem);}
.phead p{max-width:60ch; color:var(--muted); font-size:1.1rem; margin-top:14px;}

/* ---------- Chinois ---------- */
/* Le chinois n'obéit pas aux mêmes règles que l'alphabet latin, et les réglages calés pour le
   français lui NUISENT :
   · letter-spacing négatif — les idéogrammes sont déjà denses et de chasse fixe ; les resserrer
     les fait se toucher. On remet à zéro.
   · line-height 1,1 sur les titres — un idéogramme occupe toute la hauteur de sa case, sans
     jambages ni hampes pour créer de l'air. Il faut plus d'interligne, pas moins.
   · le corps de texte passe de 1,62 à 1,75 : un bloc de chinois à interligne latin se lit comme
     un mur.
   · word-break — le chinois se coupe entre n'importe quels caractères, mais PAS avant une
     ponctuation en début de ligne. line-break:strict applique cette règle. */
html[lang^="zh"] body,
html[lang^="zh"] input, html[lang^="zh"] select, html[lang^="zh"] textarea, html[lang^="zh"] button{
  font-family:var(--fam-zh);
  line-height:1.75;
  line-break:strict;
}
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] h4{
  letter-spacing:0; line-height:1.35;
}
/* Le filigrane géant et les chiffres-clés portent un crénage négatif prononcé, dessiné pour
   des lettres : sur des idéogrammes il produit un chevauchement. */

/* Un mot de 2 idéogrammes n'a pas la largeur d'un mot latin de 10 lettres : le filigrane
   doit être redimensionné, sinon il reste minuscule au centre de la bande. */
/* 4 idéogrammes larges plutôt que 2 très gros : le filigrane retrouve la même EMPRISE que le
   mot français, donc le même rôle de texture. Deux blocs denses centrés se posaient sur le
   chiffre du milieu et lui disputaient la lecture. */


/* Règle unique de cette passe : de l'air blanc du côté du TEXTE, zéro du côté d'un APLAT ou
   d'une COURBE. Une bande colorée ou une ligne d'eau sont faites pour toucher la photographie ;
   un paragraphe, non. */
.wl + .bande-photo{margin-top:0;}
.bande-photo + .band-stone, .bande-photo + .band-blue{margin-top:calc(var(--pas-6) * -1);}
/* La section qui SUIT une photographie a déjà reçu son air de la marge de celle-ci. */
.bande-photo + .sec:not(.band-stone):not(.band-blue),
.bande-photo + .sec-tight:not(.band-stone):not(.band-blue),
.hero-band + .hero{padding-top:0;}

/* Affinage seulement. Sans :has() — vieux iPad, Android anciens — la section qui précède
   garde son rembourrage et la page respire un peu PLUS que prévu : jamais moins, jamais
   cassée. Le fichier réserve déjà :has() à la décoration au survol ; rien de portant ne lui
   est confié ici non plus. */
.phead:has(+ .bande-photo),
.sec:has(+ .bande-photo),
.sec-tight:has(+ .bande-photo){padding-bottom:0;}
.sec:has(> .bande-photo:last-child),
.sec-tight:has(> .bande-photo:last-child){padding-bottom:0;}
.sec > .bande-photo:last-child,
.sec-tight > .bande-photo:last-child{margin-bottom:0;}

/* Légende sous un cadre. Ces valeurs vivaient en style INLINE dans dix gabarits (10 et 12px),
   donc hors de tout système : elles ne suivaient ni le thème, ni l'écran, ni les corrections. */
.frame + p, .carte + p{margin-top:var(--pas-4);}

/* ---------- Bandes photographiques ---------- */
/* Elles sortent de la colonne de lecture et occupent toute la largeur. Le format s'OUVRE avec
   l'écran — presque carré sur téléphone, très allongé sur grand écran — pour la même raison que
   le bandeau d'accueil : un format figé donne soit une image écrasée sur mobile, soit une image
   qui mange toute la page sur un ordinateur.
   Elles restent volontairement PLUS BASSES que le bandeau d'accueil (480px contre 514px à
   1440) : le haut de page doit garder la vedette. */
/* Le défaut mesuré : ce composant n'avait aucune marge, son air était donc ce que le voisin
   précédent laissait traîner. Pour une MÊME bande, 0 px sur « Traitement », 17 sur « La
   Clinique », 105 sur « La thérapie » — 105 px d'écart entre deux pages du même site. Sur
   « Traitement », un lien et une photographie de 475 px se touchaient à 0,0 px exactement.
   La bande porte désormais son propre air, comme n'importe quelle section. */
.bande-photo{position:relative; width:100%; aspect-ratio:3/2; overflow:hidden;
  background:var(--stone); margin-block:var(--pas-6);}
.bande-photo img{display:block; width:100%; height:100%; object-fit:cover;}
@media (min-width:700px){ .bande-photo{aspect-ratio:2/1;} }
@media (min-width:1100px){ .bande-photo{aspect-ratio:3/1;} }

/* ---------- La ligne d'eau ---------- */
/* Une seule ligne traverse tout le site. Elle est DROITE partout, sauf deux fois par page où
   elle ondule : à l'ouverture de la page et à l'entrée du pied de page. La courbe ouvre et
   ferme ; entre les deux, la même ligne reste droite.
   Ce n'est plus la couleur qui sépare les sections — elle ne le peut plus : le galet et le bleu
   clair ne diffèrent que de 1,06:1, le galet et l'ancien --mist de 1,00:1. C'est ce trait, à
   3,14:1 sur blanc, qui rend les frontières de section à nouveau lisibles. */
.wl{
  --wl-to:var(--stone);
  display:block; width:100%; line-height:0;
  /* Fond propre, à la couleur du plan AU-DESSUS. L'ancienne vague du pied de page n'en avait
     pas : son aplat galet était peint sur un pied de page galet, donc invisible (1,00:1). */
  background:var(--paper);
  /* La hauteur vient du CSS et non du rapport du viewBox : la houle fait 11 px à 1440 et 5,5 px
     à 390, soit environ 40 % d'une ligne de texte. Sous la demi-ligne on lit un filet, au-delà
     de la ligne pleine on lit un objet. */
  height:clamp(11px, 1.4vw + 4px, 22px);
  margin-bottom:-1px;   /* garde anti sous-pixel aux zooms fractionnaires */
}
.wl svg{display:block; width:100%; height:100%;}
.wl .a{fill:var(--wl-to);}     /* l'aplat prend la couleur du plan EN DESSOUS */
/* 1,2 px et non 1 px : dans les pentes, l'anti-crénelage dilue le trait ; à 1 px il pèserait
   optiquement moins que les filets droits. NE JAMAIS retirer vector-effect : sans lui, le
   preserveAspectRatio="none" étire le trait de 1,4 px à 0,4 px selon la largeur d'écran, et la
   casse serait silencieuse. */
.wl .t{fill:none; stroke:var(--waterline); stroke-width:1.2; vector-effect:non-scaling-stroke;}
.wl.to-blue{--wl-to:var(--blue-soft);}   /* seule variante : entrée dans une bande bleue */

/* La MÊME ligne, droite, sur toutes les autres frontières de bande. Aucune balise, aucun octet
   par occurrence : cette seule règle produit 13 filets, et couvrira le chinois et l'allemand
   sans qu'on y revienne. */
.band-stone,.band-blue{border-top:1px solid var(--waterline); border-bottom:1px solid var(--waterline);}
/* Une bande ouverte par une courbe n'a pas de filet haut : la courbe EST sa frontière. On
   neutralise la COULEUR et non la bordure, pour que la hauteur reste identique d'une bande à
   l'autre. Sélecteur de frère adjacent, donc pas de :has() : compatible avec les vieux appareils. */
.wl + .band-stone, .wl + .band-blue{border-top-color:transparent;}
/* Deux bandes colorées qui se touchent ne doivent pas empiler deux filets de 1 px. */
.band-stone + .band-stone, .band-stone + .band-blue,
.band-blue + .band-stone, .band-blue + .band-blue{border-top:0;}

/* ---------- Hero accueil ---------- */
/* ---------- Bandeau d'ouverture ---------- */
/* La photographie occupe toute la largeur de l'écran, sans marge ni cadre. Son FORMAT change
   avec la largeur : presque carré sur téléphone, très allongé sur grand écran. C'est ce qui
   permet de montrer le bâtiment entier sur un petit écran sans que le bandeau n'occupe toute
   la hauteur sur un grand. L'image est livrée en pleine trame 3:2 et c'est le recadrage qui
   s'adapte, plutôt qu'un format figé à la production. */
.hero-band{position:relative; width:100%; aspect-ratio:3/2; overflow:hidden;
  background:var(--stone); margin-bottom:var(--pas-6);}
.hero-band img{display:block; width:100%; height:100%; object-fit:cover;
  /* 62 % et non le centre : la ligne d'intérêt est le bâtiment et les bateaux, pas le ciel. */
  object-position:center 62%;}
@media (min-width:700px){ .hero-band{aspect-ratio:12/5;} }
@media (min-width:1100px){ .hero-band{aspect-ratio:14/5;} }

.hero{padding-block:var(--pas-5);}
/* Le texte n'est plus dans une colonne étroite à côté de l'image : il faut donc le brider
   explicitement, sinon les lignes s'étireraient sur 1180 px et deviendraient illisibles. */
.hero-copy{max-width:34rem;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;}
.hero h1{font-size:clamp(2.2rem,4.8vw,3.5rem); margin-bottom:18px;}
.hero .lead{margin-bottom:28px;}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px;}
.hero-fig{position:relative;}
.frame{border-radius:var(--r-img); overflow:hidden; box-shadow:var(--shadow); background:var(--mist); border:1px solid var(--line);}
.frame img{width:100%; height:100%; object-fit:cover;}
.hero-fig .frame{aspect-ratio:4/3;}
.hero-trust{display:flex; flex-wrap:wrap; gap:22px; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted);}
.hero-trust b{color:var(--navy); font-weight:700;}

html[lang^="zh"] .stat .n{letter-spacing:0;}

/* ---------- Bande chiffres ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center;}
.stat .n{font-size:clamp(2.6rem,6vw,4rem); font-weight:800; color:var(--navy); line-height:1; letter-spacing:-.02em;}
.stat .k{margin-top:12px; color:var(--muted); font-size:.98rem;}
.stat .k b{color:var(--ink); font-weight:500;}

/* ---------- Split contenu générique ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
/* Section dont l'image est passée en bande pleine largeur : il ne reste qu'une colonne de
   texte, qu'il faut brider — sans cela les lignes s'étireraient sur 1180px et deviendraient
   illisibles, ce que la grille à deux colonnes empêchait jusqu'ici. */
.split-solo > *{max-width:38rem;}
.split.narrow-media{grid-template-columns:1.1fr .9fr;}
.split .media .frame{aspect-ratio:5/4;}
.split ul.ticks{list-style:none; padding:0; margin:20px 0 0;}
.split ul.ticks li{position:relative; padding:0 0 .7em 1.7em; color:var(--ink);}
.split ul.ticks li::before{content:""; position:absolute; left:.15em; top:.48em;
  width:.6em; height:.32em; border-left:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform:rotate(-45deg); transform-origin:center;}

/* ---------- Photo à venir (jamais wireframe) ---------- */
.photo-todo{border-radius:var(--r-img); background:linear-gradient(150deg,var(--blue-soft),var(--stone));
  display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted);
  font-size:.82rem; font-weight:500; padding:24px; border:1px solid var(--line); min-height:220px; letter-spacing:.01em;}
.photo-todo span{display:block; max-width:22ch; line-height:1.4;}
.photo-todo .cam{font-size:1.5rem; display:block; margin-bottom:8px; opacity:.55;}

/* ---------- Cartes génériques ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px;}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:26px; box-shadow:var(--shadow-sm);}
.card h3{font-size:1.16rem; color:var(--navy); margin-bottom:8px;}
.card p{font-size:.96rem; color:var(--ink); margin-bottom:0;}
.card .kicker{font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;}

/* ---------- Équipe ---------- */
/* Le réglage était INVERSÉ : minmax(240px) ajoute des COLONNES quand l'écran grandit, au lieu
   d'agrandir les portraits. Mesuré : 354 px sur téléphone, 263 px sur ordinateur — ils étaient
   au plus petit précisément là où on les regarde. En 320px la grille passe de 4 à 3 colonnes à
   1440 (345 px, +31 %) et de 3 à 2 à 1024 (450 px, +48 %).
   Cinq membres dans quatre colonnes laissaient en outre une fiche seule devant trois cellules
   vides ; en trois colonnes la grille devient 3 + 2. */
/* justify-content:center et une piste BORNÉE (au lieu de 1fr) : sans cela la dernière rangée,
   incomplète, resterait collée à gauche devant une cellule vide. Cinq personnes ne remplissent
   jamais une grille de trois. */
/* Aligné à GAUCHE sur la colonne de texte. Centrer la grille la décalait vers l'intérieur :
   les portraits ne commençaient pas au même endroit que le sur-titre et le titre au-dessus,
   ce qui se voit immédiatement. */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  justify-content:start; row-gap:var(--pas-6); column-gap:var(--pas-5);}
/* TROIS colonnes sur grand écran, à la demande de la cliente : Isabelle, Edouard et Nathalie
   sur la première ligne, Nicolas et Patrick à la suite. Le plafond de 450px qui donnait deux
   colonnes est retiré — trois pistes dans 1132px font 345px chacune. C'est en dessous des 450px
   possibles, mais toujours très au-dessus des 263px d'origine, et bien dans la limite de
   netteté : 345px demandent 690px de source sur un écran à densité double, le portrait le plus
   petit du site en offre 900. */
/* Plafond de netteté, et non de mise en page : le portrait du Dr Edouard n'existe qu'en
   900×900 px. Sur un écran à densité double il faut deux pixels de source par pixel affiché,
   soit 450 px au maximum. C'est le portrait du directeur qui fixe la limite pour tous.
   Posé sur .member et non sur .portrait : sinon le nom se décale de 3,9 px sous l'image. */
/* margin-inline:0 et non auto : une piste plus large que 450px laisserait sinon la fiche
   flotter en son milieu, et le bord gauche des portraits ne serait plus aligné d'une rangée
   à l'autre. */
.member{max-width:450px; margin-inline:0;}
.member .portrait{border-radius:var(--r-img); overflow:hidden; aspect-ratio:1/1; background:var(--mist); border:1px solid var(--line); box-shadow:var(--shadow-sm);}
.member .portrait img{width:100%; height:100%; object-fit:cover; object-position:center 20%;}
.member h3{font-size:1.14rem; margin:var(--pas-4) 0 2px;}
.member .role{color:var(--muted); font-weight:500; font-size:.9rem;}
.member p{font-size:.94rem; color:var(--muted); margin-top:8px;}

/* ---------- Frise / timeline ---------- */
.timeline{position:relative; display:flex; flex-direction:column; gap:12px; margin-top:10px;}
.day:nth-child(1),.tl:nth-child(1){--i:0;}
.day:nth-child(2),.tl:nth-child(2){--i:1;}
.day:nth-child(3),.tl:nth-child(3){--i:2;}
.day:nth-child(4),.tl:nth-child(4){--i:3;}
.day:nth-child(5),.tl:nth-child(5){--i:4;}
.day:nth-child(6),.tl:nth-child(6){--i:5;}
.day:nth-child(7),.tl:nth-child(7){--i:6;}
.tl{position:relative; display:grid; grid-template-columns:28px 1fr; align-items:start; gap:18px;}
.tl:not(:last-child)::after{content:''; position:absolute; left:11px; top:36px; height:calc(100% - 2px); width:4px; z-index:0; background-image:radial-gradient(circle, var(--line-strong) 1.3px, transparent 1.6px); background-size:4px 8px; background-repeat:repeat-y;}
.tl:not(:last-child)::before{content:''; position:absolute; left:11px; top:36px; height:calc(100% - 2px); width:4px; z-index:1; background-image:radial-gradient(circle, var(--blue) 1.3px, transparent 1.6px); background-size:4px 8px; background-repeat:repeat-y; transform:scaleY(0); transform-origin:top center; transition:transform .3s ease; transition-delay:calc(var(--i,0)*.05s);}
.tl .node{position:relative; z-index:2; width:14px; height:14px; margin:22px 0 0 6px; border-radius:50%; background:#fff; border:2px solid var(--line-strong); transition:transform .22s ease, background .22s ease, border-color .22s ease; transition-delay:calc(var(--i,0)*.05s);}
.tl:first-child .node{background:var(--navy); border-color:var(--navy);}
.tl .content{display:grid; grid-template-columns:104px 1fr; gap:22px; align-items:start; padding:20px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-sm); transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;}
.tl .yr{font-size:1.5rem; font-weight:800; color:var(--blue); line-height:1.1; transition:color .22s ease;}
/* La dernière entrée d'une frise ne porte pas une année mais un MOT — « Aujourd'hui », « Heute »,
   « Today ». À 1,5rem en graisse 800, « Aujourd'hui » mesure 131 px pour une colonne de 104 :
   il débordait sur le titre voisin. Le mot descend donc à la taille d'un intertitre, ce qui le
   fait tenir ET le distingue des quatre nombres au-dessus — c'est un repère, pas une date.
   Le calage vertical compense la différence de hauteur de capitale, sans quoi le mot flotterait
   au-dessus de la ligne des titres. */
.tl .yr.mot{font-size:1.05rem; line-height:1.3; padding-top:.22em;}
.tl h3{font-size:1.08rem; margin-bottom:6px;}
.tl p{font-size:.96rem; color:var(--ink); margin:0;}
.tl:hover .node{background:var(--blue); border-color:var(--blue); transform:scale(1.45);}
.tl:has(~ .tl:hover) .node{background:var(--blue); border-color:var(--blue);}
.tl:has(~ .tl:hover)::before{transform:scaleY(1);}
.tl:hover .content{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue), 0 16px 32px -18px rgba(18,99,181,.42); transform:translateX(6px);}

/* ---------- Encart / callout ---------- */
.note{background:var(--blue-soft); border-left:3px solid var(--blue); border-radius:12px; padding:16px 20px; font-size:.92rem; color:var(--navy); margin-top:24px;}
.note b{font-weight:700;}

/* ---------- Séjour : déroulé jour par jour ---------- */
.days{position:relative; display:flex; flex-direction:column; gap:12px;}
.day:not(:last-child)::after{content:''; position:absolute; left:11px; top:36px; height:calc(100% - 2px); width:4px; z-index:0; background-image:radial-gradient(circle, var(--line-strong) 1.3px, transparent 1.6px); background-size:4px 8px; background-repeat:repeat-y;}
.day:not(:last-child)::before{content:''; position:absolute; left:11px; top:36px; height:calc(100% - 2px); width:4px; z-index:1; background-image:radial-gradient(circle, var(--blue) 1.3px, transparent 1.6px); background-size:4px 8px; background-repeat:repeat-y; transform:scaleY(0); transform-origin:top center; transition:transform .3s ease; transition-delay:calc(var(--i,0)*.05s);}
.day{position:relative; display:grid; grid-template-columns:28px 1fr; align-items:start; gap:18px;}
.day .node{position:relative; z-index:2; width:14px; height:14px; margin:22px 0 0 6px; border-radius:50%; background:#fff; border:2px solid var(--line-strong); transition:transform .22s ease, background .22s ease, border-color .22s ease; transition-delay:calc(var(--i,0)*.05s);}
.day:first-child .node{background:var(--navy); border-color:var(--navy);}
.day .content{display:grid; grid-template-columns:158px 1fr; gap:22px; align-items:start; padding:20px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-sm); transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;}
.day .d{font-weight:800; color:var(--navy); font-size:1.02rem; transition:color .22s ease;}
.day .d span{display:block; color:var(--muted); font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-top:4px;}
.day .body{color:var(--ink); font-size:.97rem;}
.day .body p{margin:0 0 .4em;}
.day:last-child .body p{margin:0;}
.day:hover .node{background:var(--blue); border-color:var(--blue); transform:scale(1.45);}
.day:has(~ .day:hover) .node{background:var(--blue); border-color:var(--blue);}
.day:has(~ .day:hover)::before{transform:scaleY(1);}
.day:hover .content{border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue), 0 16px 32px -18px rgba(18,99,181,.42); transform:translateX(6px);}

/* ---------- Liste traitements ---------- */
.treat{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;}
.trow{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:24px 26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;}
.trow h3{font-size:1.2rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.trow p{margin:.6em 0 0; color:var(--ink); font-size:.97rem;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start;}
.field{margin-bottom:18px;}
.field label{display:block; font-weight:500; font-size:.9rem; color:var(--navy); margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  padding:.8em .95em; border:1.5px solid var(--edge); border-radius:14px; background:#fff; transition:border-color .18s ease;}
.field textarea{min-height:130px; resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);}
.field.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:.88rem; color:var(--muted); margin:6px 0 22px;}
.consent input{width:20px; height:20px; margin-top:2px; flex-shrink:0; accent-color:var(--blue);}
.form-ok{display:block; background:var(--blue-soft); border:1px solid var(--blue); border-radius:14px; padding:18px 20px; color:var(--navy); font-weight:500; margin-bottom:24px;}
.form-err{display:block; background:var(--danger-soft); border:1px solid var(--danger); border-radius:14px; padding:18px 20px; color:var(--danger-deep); font-weight:500; margin-bottom:24px;}
.info-block{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:28px; box-shadow:var(--shadow-sm);}
.info-block h3{font-size:1.15rem; margin-bottom:16px;}
.info-line{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); font-size:.96rem;}
.info-line:last-child{border-bottom:0;}
.info-line .ic{width:34px; height:34px; border-radius:10px; background:var(--blue-soft); color:var(--blue); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:700;}
.info-line b{color:var(--navy); display:block;}
.info-line a{color:var(--blue);}
.wechat-qr{margin-top:var(--pas-4);}
.wechat-qr img{width:140px; height:auto; border:1px solid var(--line); border-radius:12px; background:#fff; padding:8px;}
.chan{display:inline-flex; gap:8px; align-items:center; background:var(--stone); border-radius:var(--r-pill); padding:.5em 1em; font-size:.85rem; font-weight:500; color:var(--navy); margin:6px 8px 0 0;}
.info-line .ic svg{width:18px; height:18px;}
.photo-todo .cam svg{width:30px; height:30px; margin:0 auto 8px; color:var(--muted); opacity:.7;}
/* Le canal WhatsApp est un LIEN, pas une simple étiquette : il doit se comporter comme tel —
   curseur, survol, anneau de sélection au clavier. Il garde l'allure des autres pastilles pour
   ne pas déséquilibrer la rangée. */
.chan-lien{text-decoration:none; transition:background-color .18s ease, color .18s ease;}
.chan-lien:hover{background:var(--blue-soft); color:var(--blue);}
.chan-lien:hover svg{color:var(--blue);}
.chan svg{width:16px; height:16px; color:var(--blue); flex-shrink:0;}
@media (min-width:961px){ .stats .stat-grid{gap:0;} }
.stats .stat{padding:4px 30px;}
.stats .stat + .stat{border-left:1px solid var(--line);}
/* Le plan de situation. Le cadre porte le format : une iframe Google n'a pas de proportion
   propre et s'effondrerait à 150 px de haut sans hauteur imposée. Le format s'ouvre avec
   l'écran, comme partout ailleurs sur le site.
   isolation:isolate — sans lui, WebKit ne découpe pas l'iframe aux angles arrondis du parent
   et le plan déborde du cadre par les quatre coins. */
.carte{position:relative; isolation:isolate; margin-top:22px; aspect-ratio:4/3;
  border-radius:var(--r-img); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); background:var(--blue-tint);}
.carte iframe{display:block; width:100%; height:100%; border:0;}
@media (min-width:961px){ .carte{aspect-ratio:3/2;} }
.carte-lien{margin-top:var(--pas-3);}

/* ---------- Héritage / signature ---------- */
/* Flex et non grid : la vignette de portrait a disparu (la seule image dont nous disposions
   était l'archive Pie XII de 300 px, servie ici recadrée et légendée « portrait gravé du Prof.
   Niehans » — ce qu'elle n'est pas). Une grille à deux colonnes aurait laissé le texte dans une
   colonne « auto » et l'aurait fait déborder ; en flex il occupe simplement la ligne. Le jour où
   la clinique fournit une gravure en HD, il suffit de remettre le .por devant. */
.heritage{display:flex; flex-wrap:wrap; gap:28px; align-items:center;}
.heritage > div{max-width:44rem;}
.heritage{justify-content:space-between;}
.heritage .por{width:120px; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); flex-shrink:0;}
.heritage .sig{margin-block:var(--pas-4); height:38px; width:auto; opacity:.9;}
/* La même signature ouvre maintenant la page « La Clinique », dans l'en-tête.
   Un cran plus petite : elle y suit un paragraphe, elle ne clôt plus une citation. */
.phead .sig{margin-top:var(--pas-4); height:34px; width:auto; opacity:.9;}
.heritage blockquote{margin:0; font-size:1.15rem; color:var(--navy); font-weight:500; line-height:1.5;}

/* ---------- Bande contact CTA ---------- */
.cta-band{background:var(--navy); border-radius:24px; padding:44px; color:#fff; display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center;}
.cta-band h2{color:#fff; font-size:1.7rem;}
.cta-band p{color:var(--on-navy-soft); margin:8px 0 0; max-width:46ch;}
.cta-band .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5);}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.1); border-color:#fff;}

/* ---------- Footer clair, bord ondulé ---------- */
footer.site{background:var(--stone); color:var(--ink); position:relative;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:34px;
  padding-block:var(--pas-6) var(--pas-5);}
/* width:auto est INDISPENSABLE ici. Les images du site portent leurs dimensions en
   attributs HTML — 318×92 pour le logo — afin que le navigateur réserve la place et que la
   page ne saute pas au chargement. Mais un attribut width= reste la largeur utilisée tant
   que le CSS ne dit rien : avec height:44px seul, le logo était rendu en 318×44 au lieu de
   152×44, soit étiré de 109 % en largeur. L'en-tête ne souffrait pas du défaut parce que sa
   règle de base déclare width:auto, dont héritent ses variantes responsives. */
.foot-brand img{height:44px; width:auto; margin-bottom:16px;}
.foot-brand p{font-size:.92rem; color:var(--muted); max-width:34ch;}
.foot-col h4{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:14px;}
.foot-col a, .foot-col p{display:block; color:var(--ink); font-size:.94rem; margin:0 0 9px; text-decoration:none;}
.foot-col a:hover{color:var(--blue);}
.foot-bottom{border-top:1px solid var(--stone-line); padding:20px 0 34px; display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; font-size:.82rem; color:var(--muted);}
.foot-bottom a{color:var(--muted);}

/* ---------- Transition de page ---------- */
@keyframes fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.page.is-active{animation:fade .38s ease both;}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid,.split,.split.narrow-media,.contact-grid{grid-template-columns:1fr; gap:34px;}
  .stat-grid{gap:22px;}
    .cta-band{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .hero-fig{order:-1;}
  .brand img{height:68px;}
  .treat{grid-template-columns:repeat(2,1fr);}
}
/* Bascule en tiroir dès 1180px : entre 821 et 1180 le rail desktop (logo 70px + 6 liens +
   sélecteur de langue + bouton) dépassait la largeur du viewport et le bouton « Prendre
   contact » sortait de l'écran. Largeur intrinsèque mesurée du rail : logo 242 + nav 647 +
   outils 259 + gouttières = 1240px de viewport minimum. En dessous, on passe en tiroir. */
@media (max-width:1239px){
  .htools .lang, .htools .cta-head{display:none;}
  .burger{display:flex;}
  .htools{margin-left:auto;}
  /* Tiroir mobile : hors-champ via transform + visibility (glisse en douceur, hors tabulation quand fermé) */
  .nav{position:fixed; top:0; right:0; height:100%; width:min(84vw,340px); background:#fff; z-index:58;
    flex-direction:column; align-items:stretch; gap:6px; padding:92px 20px 30px; transform:translateX(105%); visibility:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1), visibility .3s; box-shadow:-20px 0 50px -30px rgba(0,76,146,.5); overflow-y:auto;}
  body.nav-open .nav{transform:none; visibility:visible;}
  .nav a{font-size:1.05rem; padding:.75em 1em;}
  .nav .drawer-lang{display:block; order:-1; margin-bottom:14px; padding-bottom:16px; border-bottom:1px solid var(--line);}
  .nav .drawer-lang .dl-title{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:10px;}
  .nav .drawer-lang .dl-opts{display:flex; gap:8px; flex-wrap:wrap;}
  .nav .drawer-lang button, .drawer-lang a{border:1.5px solid var(--edge); background:#fff; color:var(--navy); border-radius:var(--r-pill);
    padding:.45em .9em; font-weight:500; font-size:.9rem; cursor:pointer;}
  .nav .drawer-lang button[aria-current="true"], .drawer-lang a[aria-current="true"]{background:var(--blue-soft); color:var(--blue); border-color:var(--blue);}
  .nav .drawer-cta{display:inline-flex; margin-top:14px;}
}
@media (min-width:1240px){ .drawer-lang{display:none;} }
/* Le rythme de section faisait une MARCHE : 54px sous 560px, 76px au-dessus. Un clamp unique
   qui relierait 54 à 88 passerait par 62px sur tablette, donc RETIRERAIT de l'air là où la
   cliente en demande. On garde la marche et on n'ajoute qu'au-delà de 1100px, là où la
   photographie fait 475px de haut et où le défaut a été constaté. */
@media (min-width:1100px){ :root{ --pas-6:clamp(76px, 2.4vw + 50px, 88px); } }
@media (max-width:560px){ :root{ --pas-6:54px; }

  body{font-size:16px;}
  /* .sec suit désormais --pas-6, qui vaut déjà 54px sous 560px. */
  .wrap{padding-inline:18px;}
  .stat-grid{grid-template-columns:1fr; gap:26px;}
  .stats .stat + .stat{border-left:0; padding:0;}
  .foot-grid{grid-template-columns:1fr;}
  .day .content{grid-template-columns:1fr; gap:6px;}
  .heritage > div{max-width:none;}
    .cta-band{padding:30px;}
  .field.row2{grid-template-columns:1fr;}
  .tl .content{grid-template-columns:1fr; gap:4px;}
  .tl .yr{font-size:1.3rem;}
  .treat{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  /* Cliquet : cette direction n'introduit AUCUNE animation. La règle ne corrige rien
     aujourd'hui — elle est là pour qu'une dérive future (« et si la ligne bougeait
     un peu au survol ? ») ne passe pas inaperçue. */
  .wl svg, .wl .a, .wl .t{animation:none !important; transition:none !important; transform:none !important;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  .btn:hover{transform:none;}
  .day:hover .node, .day:hover .content, .tl:hover .node, .tl:hover .content{transform:none;}
  .day .node, .tl .node, .day::before, .tl::before{transition-delay:0s !important;}
  .day::before, .tl::before{transition:none !important;}
}
/* Mono-thème clair assumé : on force la palette claire même en mode sombre navigateur */
@media (prefers-color-scheme:dark){
  body{background:#fff; color:var(--ink);}
}

/* ---------- Enrichissements pages (ajout v2.2, réutilise les tokens) ---------- */
.check{list-style:none; padding:0; margin:14px 0 0;}
.check li{position:relative; padding:0 0 .6em 1.8em; color:var(--ink); font-size:.96rem;}
.check li:last-child{padding-bottom:0;}
/* La pastille ronde cerclée d'un halo était le motif générique par excellence. Elle est
   remplacée par une marque qui DIT ce qu'elle sépare : un crochet pour ce qui est compris,
   un trait pour ce qui reste à prévoir. La forme porte le sens au lieu de le décorer — un
   daltonien, une impression en noir et blanc ou un écran mal réglé la lisent aussi bien.
   Tracée en CSS, sans police d'icônes ni caractère spécial : elle suit la couleur du texte
   et reste nette à tout agrandissement. */
.check li::before{content:""; position:absolute; left:.15em; top:.42em;
  width:.62em; height:.33em; border-left:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform:rotate(-45deg); transform-origin:center;}
/* Les deux listes de « Votre séjour » sont côte à côte et typographiquement identiques :
   seule la puce les distingue, et c'est une information TARIFAIRE (compris dans la cure ou
   facturé en plus). Le bronze en était le seul porteur. La distinction passe donc de la
   COULEUR à la FORME — puce pleine = compris, anneau creux = à prévoir — ce qui tient aussi
   pour un daltonien, en noir et blanc, et sur un écran mal réglé. */
/* Un simple trait : ce n'est pas un manque signalé en rouge, c'est une ligne du devis qui
   se règle ailleurs. Le gris de bordure suffit, l'alerte serait déplacée. */
.check.warn li::before{width:.62em; height:0; border-left:0; border-bottom:2px solid var(--edge);
  transform:none; top:.72em;}
.incl-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.incl-col{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:26px 28px; box-shadow:var(--shadow-sm);}
.incl-col h3{font-size:1.12rem; margin-bottom:2px;}
@media (max-width:820px){ .incl-grid{grid-template-columns:1fr;} }
/* Bouton « Contact » de l'en-tête : à la hauteur des pastilles du menu et du sélecteur de
   langue (≈ 38 px), et non plus à celle des grands boutons de page (53 px), qui l'isolait
   comme un élément étranger à la barre. Les boutons dans les pages gardent leur taille. */
.htools .cta-head{font-size:.92rem; padding:.5em 1.1em .5em .85em; gap:.5em; box-shadow:none;}
.htools .cta-head .dot{width:1.35em; height:1.35em;}
.htools .lang-btn{padding:.68em .95em;}   /* même hauteur que le menu et le bouton Contact */

/* Photo d'archive (le Prof. Niehans et Pie XII, la cellule) : seules des versions de 300 px
   existent ; affichées petites, avec leur légende. */
.archive{margin:0; width:min(300px,100%); flex:0 0 auto;}
.archive img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line);}
.archive figcaption{margin-top:10px; font-size:.82rem; line-height:1.45; color:var(--muted);}
.archive-petit{width:min(220px,100%); margin-top:var(--pas-4);}
.frise-archive{align-items:start;}
.frise-archive .archive{justify-self:end; margin-top:56px;}
@media (max-width:960px){ .frise-archive .archive{justify-self:start; margin-top:8px;} }