@font-face{font-family:'Cormorant';src:url(polices/cormorant-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Cormorant';src:url(polices/cormorant-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'OpenSans';src:url(polices/opensans-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'OpenSans';src:url(polices/opensans-400.woff2) format('woff2');font-weight:400;font-display:swap}
*,*::before,*::after{box-sizing:border-box}

/* ─────────────────────────────────────────────────────────────────────
   Direction 3, deuxième essai — dans l'esprit de NassifMD Med Spa.

   Référence donnée par Nicolas. J'ai mesuré la page plutôt que de
   l'imaginer : fond blanc, titres immenses en graisse 200 très espacés,
   corps de texte gris clair en sans-serif, un seul accent plein sur des
   boutons carrés, et une alternance photo/texte qui ne se referme jamais.

   Ce qu'elle optimise : le prestige. Elle fait de la peau un sujet, pas
   une prestation. Le titre occupe l'écran, les photographies sont grandes,
   et rien ne crie.

   Ce qu'elle sacrifie : la densité d'information au-dessus de la ligne de
   flottaison. La direction 2 met un agenda dans le hero ; ici le hero ne
   porte qu'un nom et une phrase. Les tarifs restent accessibles — ils sont
   l'argument du cabinet — mais ils vivent sur leur page.

   Elle ne reprend rien des deux autres : ni leur fond sombre, ni leurs
   polices (Jost et Questrial pour la 1, Archivo et Hanken pour la 2), ni
   leurs cartes à bouton.
   ───────────────────────────────────────────────────────────────── */
:root{
  --blanc:#FFFFFF; --pale:#F3F4F6; --encre:#15171A;
  /* 22/10/2026 — passe de contraste demandée. Le texte courant gagne un
     cran et demi (6,83 → 8,37:1), les mentions secondaires un cran
     (5,16 → 6,40:1), et les filets deviennent visibles au lieu d'être
     devinés : à #E3E5E8 ils donnaient 1,26 sur blanc, autant dire rien. */
  --gris:#4A4E54; --gris-c:#585E65; --filet:#D4D7DB;
  /* L'accent : un bleu d'encre, pas l'azur électrique. #10345C donne
     12,6:1 sous le blanc — il porte du texte blanc sans discuter. */
  --nuit:#10345C; --nuit-f:#1A4C83;
  /* Le 16/10/2026, sur une planche de quatre dorés posés sur blanc et sur
     noir, Hajar a écarté le jaune et choisi le deuxième : le bronze doré
     #A4823C, un aplat. Le métal brossé et le champagne #E6C45F sont donc
     abandonnés — c'était précisément ce clair-là qu'elle appelait du jaune.
     Un seul ton pour tout : mot-marque, titre du hero, filets et puces. */
  --or:#A4823C; --or-clair:#A4823C;
  /* Le même bronze, valeur descendue : même teinte (40,4°), mais 6,01:1
     sous le blanc là où #A4823C n'en donne que 3,35. Tout petit texte
     bronze passe par lui — le signe €, les prix, les filets porteurs. */
  --or-f:#7A5F28;
  /* Conservés le temps que les quatre directions soient alignées : ils ne
     portent plus de dégradé, seulement le même bronze. */
  --metal:#A4823C;
  --metal-c:#A4823C;
  /* Le bleu des noms de soins, calculé pour le blanc : 5,86:1. */
  --bleu:#1C5A99;
  --m:clamp(18px,5vw,64px); --max:1240px;
  /* Remplacée au chargement par la hauteur réelle de l'en-tête — elle
     passe de 71 à 139 px quand la navigation se replie. */
  --h-tete:72px;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blanc);color:var(--gris);
  font-family:'OpenSans',system-ui,sans-serif;font-weight:400;font-size:16px;
  line-height:1.78;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,.disp{font-family:'Cormorant',Georgia,serif;font-weight:300;
  color:var(--encre);margin:0;line-height:1.04;letter-spacing:.012em}
h1{font-size:clamp(2.6rem,8.4vw,7.6rem);text-transform:uppercase;letter-spacing:.075em;
  line-height:.98}
h2{font-size:clamp(1.9rem,5vw,4.1rem)}
h3{font-size:clamp(1.25rem,2vw,1.7rem);letter-spacing:.02em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.lab{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gris-c);margin-bottom:clamp(14px,1.6vw,22px)}
.bande{max-width:var(--max);margin-inline:auto;padding-inline:var(--m)}
.sec{padding-block:clamp(56px,8vw,128px)}
/* Une section qui ne porte qu'une image et sa légende n'a pas besoin du
   souffle d'une vraie section : ses 128 px de bas s'ajoutaient aux
   128 px de haut de la suivante, et il y avait un quart d'écran de
   blanc entre une légende et le titre d'après. */
.sec--mince{padding-block:clamp(20px,2.6vw,40px)}
.sec--pale{background:var(--pale)}

/* ─── les boutons : carrés, pleins, sans rayon ─────────────────────── */
.b{display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  padding:0 clamp(26px,3vw,42px);background:var(--nuit);color:#fff;
  border:1px solid var(--nuit);text-decoration:none;
  font-family:'Cormorant',Georgia,serif;font-weight:500;font-size:15px;
  letter-spacing:.17em;text-transform:uppercase;transition:background .25s,color .25s}
.b:hover{background:var(--nuit-f);border-color:var(--nuit-f)}
.b:focus-visible{outline:2px solid var(--nuit);outline-offset:3px}
.b--creux{background:transparent;color:var(--encre);border-color:var(--encre)}
.b--creux:hover{background:var(--encre);color:#fff}
.b--blanc{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.b--blanc:hover{background:#fff;color:var(--encre);border-color:#fff}
.b--plein-blanc{background:#fff;color:var(--nuit);border-color:#fff}
.b--plein-blanc:hover{background:transparent;color:#fff;border-color:#fff}
.lien{display:inline-flex;align-items:center;gap:11px;min-height:44px;
  font-family:'Cormorant',Georgia,serif;font-weight:500;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nuit);text-decoration:none}
.lien::after{content:"";width:28px;height:1px;background:currentColor;transition:width .3s}
.lien:hover::after{width:42px}

/* Le lien d'évitement se cache par découpe, pas en l'envoyant à
   -9999 px : en arabe, `dir="rtl"` retourne l'axe, et ce lien-là
   emportait la page dix mille pixels sur le côté — l'écran s'ouvrait
   sur du vide. La découpe le sort de la vue sans sortir du flux. */
.saut{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.saut:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;display:inline-flex;align-items:center;min-height:44px;
  padding-inline:20px;background:var(--nuit);color:#fff}

/* ─── l'en-tête ────────────────────────────────────────────────────── */
.tete{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--filet)}
.tete__in{max-width:1400px;margin-inline:auto;padding:10px var(--m);
  display:flex;align-items:center;gap:clamp(16px,3vw,44px)}
.marque img{height:clamp(22px,2.5vw,32px);width:auto;transition:height .3s}
.nav{display:flex;gap:clamp(16px,2.2vw,34px);margin-left:auto}
.nav a{font-family:'Cormorant',Georgia,serif;font-weight:500;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre);text-decoration:none;
  padding-block:12px;border-bottom:1px solid transparent;
  /* « De behandelingen », « Cadeau geven » : le néerlandais et l'anglais
     sont plus longs que le français et cassaient l'en-tête sur deux
     lignes. Une seule ligne, et l'interlettrage se resserre d'un
     cheveu quand la place manque. */
  white-space:nowrap}
@media (max-width:1320px){.nav a{letter-spacing:.1em;font-size:13.5px}
  .nav{gap:clamp(14px,1.6vw,26px)}}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--nuit)}
.tete .tel{font-family:'Cormorant',Georgia,serif;font-weight:500;font-size:15px;
  letter-spacing:.08em;color:var(--encre);text-decoration:none;white-space:nowrap}
.tete .b{min-height:48px;font-size:13px;padding-inline:24px;white-space:nowrap}
/* Le sélecteur de langue occupe la droite de l'en-tête. Entre 1100 et
   1500 px, la ligne devient juste : on resserre les écarts et le bouton
   plutôt que de laisser « Rendez-vous » casser sur deux lignes. */
@media (max-width:1500px){
  .tete__in{gap:clamp(12px,1.8vw,26px)}
  .tete .b{padding-inline:18px;font-size:12.5px}
  .lng{margin-left:8px}
  .lng__b{font-size:14px;padding:0 26px 0 11px}}

/* ─── le hero : une photographie, un nom, une phrase ───────────────── */
.hero{position:relative;min-height:clamp(520px,82vh,820px);display:grid;
  place-items:center;text-align:center;overflow:hidden}
.hero__i{position:absolute;inset:0}
.hero__i img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
/* Le cabinet de Hajar est blanc et très lumineux : un voile léger ne
   suffit pas à porter du texte blanc. Celui-ci ne descend jamais sous 46 %
   là où il y a du texte — 5,8:1 mesuré sur les pixels rendus. */
/* 22/10 — les photos sont remontées de 164 à 181 de luminance perçue (la
   story d'Hajar prise pour référence, à 195). Le voile gagne 6 points pour
   que le chapô blanc tienne au-dessus d'une fenêtre devenue plus claire :
   la photo reste plus lumineuse qu'avant, le texte reste lisible. */
.hero__i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,13,18,.66) 0%,rgba(10,13,18,.60) 24%,
             rgba(10,13,18,.58) 52%,rgba(10,13,18,.56) 74%,rgba(10,13,18,.78) 100%)}
.hero__t{position:relative;z-index:2;padding:clamp(80px,12vw,150px) var(--m)}
/* Le titre du hero est blanc, et c'est une conséquence de son bronze. Le
   champagne #E6C45F tenait au-dessus d'une photo à peine voilée ; le bronze
   #A4823C, plus sombre, exige un voile à 0,84 pour atteindre 3:1 — et à ce
   compte-là on ne voit plus le cabinet. Entre un titre doré sur une photo
   noyée et un titre blanc sur son cabinet clair, c'est le cabinet qui vend.
   Le bronze reste au mot-marque, au filet et aux puces.
   Pour revenir au titre doré : color:var(--or-clair) ici, et remonter le
   voile de .hero__i::after à .88/.85/.84/.82/.92 (et .90/.87/.86/.93 sous
   520 px) — mesuré à 3,46:1 au pire pixel. */
.hero h1{color:#FFFFFF;max-width:14ch;margin-inline:auto;
  text-shadow:0 2px 30px rgba(8,12,18,.55)}
.hero .lab{color:rgba(255,255,255,.86)}
.hero__s{margin:clamp(20px,2.6vw,34px) auto 0;max-width:50ch;font-weight:300;
  font-size:clamp(17px,1.5vw,21px);color:rgba(255,255,255,.94);line-height:1.65;
  text-shadow:0 1px 18px rgba(8,12,18,.5)}
.hero__a{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(26px,3.2vw,42px)}

/* ─── le bandeau de mentions, sous le hero ─────────────────────────── */
.mentions{border-bottom:1px solid var(--filet)}
.mentions ul{max-width:var(--max);margin-inline:auto;padding:0 var(--m);list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:0}
.mentions li{flex:1 1 180px;text-align:center;padding:22px 16px;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gris-c);
  border-left:1px solid var(--filet)}
.mentions li:first-child{border-left:0}

/* ─── l'ouverture, centrée — la seule section qui l'est ────────────── */
.ouvre{text-align:center}
.ouvre h2{max-width:17ch;margin-inline:auto}
.ouvre p{max-width:62ch;margin-inline:auto;font-weight:300;
  font-size:clamp(17px,1.4vw,19.5px);margin-top:clamp(18px,2vw,28px)}
.ouvre .lien{margin-top:clamp(22px,2.4vw,34px)}
/* Les bandes pleine largeur passent de 560 à 720 px de haut : ce sont
   elles qui portent les photographies du cabinet, elles méritent la
   place. */
.large{margin-top:clamp(38px,5vw,76px);overflow:hidden}
.large img{width:100%;height:clamp(300px,46vw,720px);object-fit:cover;
  transform:scale(1.055);transition:transform 1.5s cubic-bezier(.16,.84,.44,1)}
.rev.vu .large img,.large.vu img{transform:none}

/* ─── les tuiles de familles de soins ──────────────────────────────── */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(12px,1.6vw,26px);margin-top:clamp(30px,3.6vw,50px)}
.tuile{text-decoration:none;display:block}
.tuile__i{overflow:hidden}
.tuile img{width:100%;height:clamp(290px,30vw,420px);object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tuile:hover img{transform:scale(1.045)}
.tuile b{display:block;margin-top:16px;font-family:'Cormorant',Georgia,serif;
  font-weight:500;font-size:17px;letter-spacing:.055em;text-transform:uppercase;
  color:var(--encre);line-height:1.3}
.tuile span{display:block;margin-top:6px;font-size:13.5px;color:var(--gris-c)}

/* ─── l'alternance photo / texte ───────────────────────────────────── */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:clamp(26px,4.6vw,78px);align-items:center}
.duo--inv .duo__i{order:2}
/* Dans un duo, la photographie et le texte se partagent la largeur :
   on donne six dixièmes à l'image. */
.duo{grid-template-columns:1fr}
@media (min-width:900px){.duo{grid-template-columns:1.18fr 1fr}
  .duo--inv{grid-template-columns:1fr 1.18fr}}
.duo__i{overflow:hidden}
.duo__i img{width:100%;height:clamp(320px,44vw,660px);object-fit:cover;
  transform:scale(1.05);transition:transform 1.5s cubic-bezier(.16,.84,.44,1)}
.rev.vu .duo__i img{transform:none}
.duo__t p{margin-top:1.1em;max-width:50ch}
.duo__t .lien{margin-top:clamp(20px,2.2vw,30px)}
.duo__l{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px;padding:0;list-style:none}
.duo__l li{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-c)}

/* ─── les chiffres : une ligne, pas des cartes ─────────────────────── */
.chiffres{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px)}
.chiffre{flex:1 1 190px}
.chiffre b{display:block;font-family:'Cormorant',Georgia,serif;font-weight:300;
  font-size:clamp(3rem,5.6vw,4.6rem);line-height:1;color:var(--encre)}
.chiffre span{display:block;margin-top:12px;font-size:14.5px;max-width:24ch}

/* ─── ce qu'on traite : une liste, pas une grille ──────────────────── */
.traite{columns:3 210px;column-gap:clamp(26px,4vw,60px);margin:clamp(26px,3vw,40px) 0 0;
  padding:0;list-style:none}
.traite li{break-inside:avoid;padding:11px 0;
  font-size:15.5px;color:var(--encre)}

/* ─── la carte des soins ───────────────────────────────────────────── */
/* 22/10/2026 — « les tarifs doivent être en doré, beaucoup plus beaux ».
   Ce qui a changé, et pourquoi :

     - **une ligne de conduite**, le filet pointillé qui relie le nom au
       prix. C'est la typographie des cartes depuis toujours, et elle fait
       deux choses : elle guide l'œil jusqu'au chiffre, et elle fabrique
       le décalage demandé entre le titre et sa description ;
     - **le prix en chiffres alignés**. Cormorant sort par défaut des
       chiffres elzéviriens — le 3 et le 5 descendent sous la ligne. Dans
       une colonne de prix, ça danse. `lining-nums` les remet sur la ligne,
       `tabular-nums` leur donne tous la même chasse, et la colonne devient
       une colonne ;
     - **le doré en dégradé**, du bronze foncé au bronze de la marque, qui
       balaie au survol. Le dégradé reste entre 6,0:1 et 3,4:1 sous le
       blanc, et le chiffre fait au moins 24 px : le seuil des grands
       caractères est 3:1, on est au-dessus partout ;
     - **la durée passe à droite**, contre le prix : on lit « 110 € pour
       45 minutes » d'un seul mouvement, au lieu de chercher la durée au
       bout de la description ;
     - **la description descend d'une ligne et se décale**, en plus petit
       et plus clair. C'est elle, le décalage demandé.

   Trois techniques qu'on n'avait pas encore employées ici :
   `@property` pour animer un dégradé (une propriété personnalisée non
   déclarée ne s'anime pas), les requêtes de conteneur pour que la ligne
   se réorganise selon SA largeur et non celle de la fenêtre, et les
   animations liées au défilement, qui remplacent l'observateur JavaScript
   sur cette page-là. Les trois se dégradent proprement : sans elles, la
   carte reste lisible, elle ne bouge simplement plus. */

.fam{margin-bottom:clamp(44px,5.4vw,84px);container-type:inline-size;container-name:carte}
.fam > h2{font-size:clamp(1.5rem,2.6vw,2.2rem);margin-bottom:.5em}
/* Les titres de familles portent eux aussi son bronze : un filet qui
   s'épaissit sous le mot et s'efface vers la droite. */
.fam h3{position:relative;padding-bottom:.42em;margin-bottom:.2em}
.fam h3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  /* Le trait de famille garde sa tête dorée et s'éteint : plus de queue
     grise qui traversait toute la largeur. */
  background:linear-gradient(to right,var(--or) 0%,
             color-mix(in srgb,var(--or) 40%,transparent) 22%,
             transparent 58%)}
.fam__c{max-width:64ch;margin-bottom:2em;font-weight:300}

/* Le dégradé du prix. Sans @property, `--balai` serait une chaîne de
   caractères : le navigateur ne saurait pas l'interpoler et le survol
   sauterait au lieu de glisser. */
@property --balai{syntax:'<percentage>';inherits:false;initial-value:-32%}

/* 23/10/2026 — « enlève toutes les lignes grises comme ça ». Les
   séparateurs des listes empilées sont retirés partout. Ce qui sépare
   désormais, c'est l'air : chaque ligne respire davantage, et le nom en
   Cormorant avec son prix doré suffit à marquer le début de la
   suivante. */
.rang{border-top:0}
.rang + .rang{margin-top:clamp(8px,1vw,16px)}
.rang__h{display:grid;
  grid-template-columns:auto minmax(28px,1fr) auto auto;
  grid-template-areas:"nom filet duree prix" "desc desc desc desc"
                      "plus plus plus plus";
  column-gap:clamp(12px,1.6vw,22px);row-gap:10px;align-items:baseline;
  padding:clamp(20px,2.4vw,30px) 0;cursor:pointer;list-style:none}
.rang__h::-webkit-details-marker{display:none}
.rang--fixe .rang__h{cursor:default}

.rang__n{grid-area:nom;font-family:'Cormorant',Georgia,serif;font-weight:500;
  font-size:clamp(1.15rem,1.75vw,1.5rem);letter-spacing:.02em;color:var(--encre);
  line-height:1.2;max-width:34ch;transition:color .25s}
.rang__h:hover .rang__n{color:var(--nuit)}

/* La ligne de conduite : des points, pas un trait plein — un trait plein
   ferait barre et couperait la ligne en deux. */
.rang__fil{grid-area:filet;align-self:center;height:2px;margin-top:.35em;
  background-image:radial-gradient(circle,var(--or-f) 1px,
                   transparent 1.2px);
  background-size:6px 2px;background-repeat:repeat-x;background-position:0 center;
  opacity:.55;transition:opacity .25s}
.rang__h:hover .rang__fil{opacity:1}

.rang__t{grid-area:duree;font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gris-c);white-space:nowrap;align-self:center;margin-top:.3em}
.rang__t s{text-decoration-thickness:1.5px;text-decoration-color:var(--or);
  text-decoration-skip-ink:none;color:var(--gris)}

/* Le prix. Les chiffres d'abord, le signe ensuite et plus discret : c'est
   le nombre qu'on vient lire. */
.rang__p{grid-area:prix;display:inline-flex;align-items:baseline;gap:.18em;
  white-space:nowrap;font-family:'Cormorant',Georgia,serif;font-weight:500;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
  min-width:3.4ch;justify-content:flex-end}
/* Le doré d'Hajar, joué comme une feuille d'or et non comme un aplat.
   Cinq valeurs du MÊME bronze — de #4A3812 à #B08C42 — posées en biais :
   c'est l'écart entre elles qui fait le métal, pas le fait d'aller vers le
   clair. On reste donc entre 11,3:1 et 3,2:1 sous le blanc, au-dessus du
   seuil des grands caractères (3:1) sur toute la longueur du chiffre.
   Le #D7B46A du fichier logo, lui, ne donne que 1,98:1 : il n'entre pas.
   Par-dessus, une bande de lumière qui traverse au survol — elle part
   hors cadre à -32 % et s'arrête à 130 %. */
.rang__v{font-size:clamp(1.55rem,2.7vw,2.15rem);line-height:1;letter-spacing:.01em;
  background-image:
    linear-gradient(100deg, transparent calc(var(--balai) - 20%),
      rgba(176,140,66,.92) var(--balai), transparent calc(var(--balai) + 20%)),
    linear-gradient(104deg, #4A3812 0%, #A4823C 22%, #52400F 46%,
      #B08C42 70%, #634C1A 100%);
  background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:--balai .7s cubic-bezier(.16,.84,.44,1)}
.rang__e{font-size:clamp(.95rem,1.3vw,1.15rem);color:var(--or-f);
  transform:translateY(-.12em)}
.rang__h:hover .rang__v,.rang[open] .rang__v{--balai:132%}
/* Si background-clip:text n'est pas supporté, le chiffre doit rester
   visible : on repose un aplat sûr. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .rang__v{color:var(--or-f);background-image:none}
}

/* La description : une ligne plus bas, décalée, plus claire. C'est le
   décalage demandé entre le titre et ce qu'il annonce. */
.rang__d{grid-area:desc;padding-left:clamp(16px,2.2vw,34px);
  border-left:2px solid color-mix(in srgb,var(--or) 70%,transparent);
  font-size:14.5px;line-height:1.6;color:var(--gris);max-width:62ch;
  font-weight:300}

/* L'invitation à ouvrir. Sans elle, rien ne disait que la ligne cachait
   un protocole : on lisait l'objectif et on passait au soin suivant.
   Même micro-typographie que la durée, et le chevron se retourne quand
   la ligne est ouverte. Le libellé est un vrai texte, pas un
   `content:` — autrement il échapperait aux traductions. */
.rang__plus{grid-area:plus;justify-self:start;display:inline-flex;
  align-items:center;gap:8px;margin-left:clamp(16px,2.2vw,34px);
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--or-f);transition:color .2s ease}
.rang__plus::after{content:"";width:6px;height:6px;flex:none;
  border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .25s ease}
.rang[open] .rang__plus::after{transform:rotate(225deg) translate(-1px,-1px)}
.rang__h:hover .rang__plus{color:var(--nuit)}
.rang--fixe .rang__plus{display:none}
@media (prefers-reduced-motion:reduce){.rang__plus::after{transition:none}}

.rang__q p{font-size:14.5px;color:var(--gris);max-width:72ch;
  padding:0 0 clamp(18px,2.2vw,26px) clamp(16px,2.2vw,34px);line-height:1.65}

/* Sous 520 px de LIGNE — pas de fenêtre : le prix passe sous le nom et le
   filet disparaît, il n'a plus rien à relier. */
@container carte (max-width:520px){
  .rang__h{grid-template-columns:1fr auto;
    grid-template-areas:"nom prix" "duree duree" "desc desc" "plus plus";
    row-gap:8px}
  .rang__fil{display:none}
  .rang__t{margin-top:0;align-self:start}
  .rang__n{max-width:none}
}

/* La révélation ligne à ligne, pilotée par le défilement lui-même. Pas
   d'observateur, pas de script : le navigateur lit la position de la
   ligne dans la fenêtre et en fait l'avancement de l'animation. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes rang-entre{from{opacity:0;transform:translateY(14px)}
                          to{opacity:1;transform:none}}
    .rang{animation:rang-entre linear both;
      animation-timeline:view();animation-range:entry 0% entry 42%}
  }
}

.prose{max-width:66ch;font-weight:300}
.prose h3{margin:1.6em 0 .5em}
.prose ul{padding-left:1.1em}
.prose li{margin-bottom:.5em}

/* ─── l'appel final ────────────────────────────────────────────────── */
.rdv{background:var(--nuit);color:#fff;text-align:center;
  padding-block:clamp(56px,8vw,118px)}
.rdv h2{color:#fff;max-width:18ch;margin-inline:auto}
.rdv p{margin:1.1em auto 0;max-width:52ch;color:rgba(255,255,255,.9);font-weight:300}
.rdv__a{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:clamp(26px,3vw,40px)}

/* ─── le pied ──────────────────────────────────────────────────────── */
.pied{border-top:1px solid var(--filet);padding-block:clamp(40px,5vw,72px);
  font-size:14.5px}
.pied__in{max-width:var(--max);margin-inline:auto;padding-inline:var(--m);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:clamp(22px,3vw,44px)}
.pied b{display:block;font-family:'Cormorant',Georgia,serif;font-weight:500;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--encre);
  margin-bottom:12px}
.pied a{display:flex;align-items:center;color:var(--gris);
  text-decoration:none;min-height:44px}
.pied a:hover{color:var(--nuit)}

/* ─── les boutons flottants ────────────────────────────────────────── */
.fab{position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,28px);
  z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
/* 23/10 — rond, comme le logo WhatsApp juste au-dessus. Un carré à côté d'un
   disque, ce sont deux boutons de deux sites. Et l'ombre est doublée : une
   large et douce pour le décollement, une courte et dense au ras du bouton,
   qui le détache aussi bien d'un fond blanc que du hero presque noir — un
   bleu marine posé sur du #05070A disparaissait. */
.fab__b{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  border:0;padding:0;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 26px rgba(16,26,44,.26),0 2px 6px rgba(16,26,44,.22);
  transition:transform .22s,background .22s,box-shadow .22s}
.fab__b:hover{transform:translateY(-2px)}
.fab__b svg{width:26px;height:26px;display:block}
/* 22/10 — le bouton WhatsApp n'est plus un carré vert avec un pictogramme
   dedans : il EST le logo. Pas de fond, pas de contour, pas d'angle. Le
   relief vient d'une ombre portée calée sur la silhouette elle-même, et le
   survol la soulève comme les autres boutons. */
.fab__wa{background:none;box-shadow:none;width:58px;height:58px}
.fab__wa .wa-l{width:58px;height:58px;
  filter:drop-shadow(0 9px 18px rgba(16,26,44,.26))}
.fab__wa:hover .wa-l{filter:drop-shadow(0 13px 22px rgba(16,26,44,.32))}
/* Le liseré bronze est ce qui sauve le bouton sur fond sombre : il reprend
   l'or du logo et pose une arête là où le marine se confondait avec la photo.
   Sur fond clair il ne se voit presque pas, et c'est très bien. */
.fab__ia{background:var(--nuit);color:#fff;
  box-shadow:0 0 0 1px rgba(215,180,106,.55),0 10px 26px rgba(16,26,44,.26),
             0 2px 6px rgba(16,26,44,.22)}
.fab__ia:hover{background:var(--nuit-f);
  box-shadow:0 0 0 1px rgba(215,180,106,.85),0 14px 30px rgba(16,26,44,.32),
             0 2px 6px rgba(16,26,44,.24)}
.panneau{width:min(360px,calc(100vw - 28px));max-height:min(540px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;background:#fff;
  border:1px solid var(--filet);box-shadow:0 18px 46px rgba(16,26,44,.18)}
.panneau[hidden]{display:none}
.panneau__h{display:flex;gap:14px;align-items:flex-start;padding:18px;
  border-bottom:1px solid var(--filet)}
.panneau__t{font-family:'Cormorant',Georgia,serif;font-weight:500;font-size:16px;
  letter-spacing:.06em;color:var(--encre)}
.panneau__s{font-size:13px;margin-top:3px;color:var(--gris-c)}
.panneau__x{margin-left:auto;background:none;border:0;cursor:pointer;padding:0;
  width:44px;height:44px;display:grid;place-items:center;flex:none;color:var(--gris)}
.panneau__x svg{width:17px;height:17px}
.panneau__c{overflow-y:auto;padding:0 18px;flex:1}
.qr summary{cursor:pointer;padding:13px 0;font-size:14.5px;list-style:none;display:flex;
  align-items:center;gap:10px;min-height:44px;border-bottom:1px solid var(--filet);
  color:var(--encre)}
.qr summary::-webkit-details-marker{display:none}
.qr summary::after{content:"+";margin-left:auto;color:var(--nuit)}
.qr[open] summary::after{content:"–"}
.qr p{font-size:14px;line-height:1.6;padding:12px 0 15px;color:var(--gris)}
.panneau__p{display:flex;flex-direction:column;gap:9px;padding:14px 18px 18px;
  border-top:1px solid var(--filet)}
.panneau__b{display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;text-decoration:none;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;font-family:'Cormorant',Georgia,serif;font-weight:500;
  transition:.2s}
.panneau__b svg{width:18px;height:18px;flex:none}
.panneau__b--wa{background:#25D366;color:#fff}
.panneau__b--wa:hover{background:#1FB857}
.panneau__b:not(.panneau__b--wa){background:var(--nuit);color:#fff}
.panneau__b:not(.panneau__b--wa):hover{background:var(--nuit-f)}

/* ─── la révélation au défilement ──────────────────────────────────── */
.rev{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.rev.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .tuile img,.lien::after{transition:none}
  .large img,.duo__i img{transform:none!important;transition:none}
}

/* ─── sous 900 px ──────────────────────────────────────────────────── */
@media (max-width:900px){
  /* Pas de menu replié : les quatre liens restent visibles, sur une
     deuxième ligne qui défile si l'écran est trop étroit. Une maquette
     qui cache sa navigation ne ressemble plus à un site. */
  .tete .tel{display:none}
  .tete__in{flex-wrap:wrap;justify-content:space-between;padding-bottom:0}
  .marque{display:inline-flex;align-items:center;min-height:44px;margin-right:auto}
  .nav{order:3;width:100%;margin-left:0;gap:22px;overflow-x:auto;
    border-top:1px solid var(--filet);-webkit-overflow-scrolling:touch}
  .nav a{white-space:nowrap;font-size:13px;padding-block:14px}
  .duo--inv .duo__i{order:0}
  /* Sur mobile la photo est recadrée sur sa partie la plus claire et le
     titre descend plus bas : le voile doit être plus dense qu'au large,
     sans quoi le bronze tombe à 2,05:1 sur le pire pixel. */
  .hero__i::after{background:linear-gradient(to bottom,rgba(10,13,18,.66) 0%,
    rgba(10,13,18,.60) 36%,rgba(10,13,18,.58) 70%,rgba(10,13,18,.80) 100%)}
  .mentions li{flex:1 1 44%;border-left:0;padding:16px 10px}
  .traite{columns:1}
}
@media (max-width:520px){
  .fab{right:12px;bottom:12px;gap:10px}.fab__b{width:52px;height:52px}
  .b{width:100%}
  /* …sauf celui de l'en-tête, qui doit laisser respirer le logo. */
  .tete .b{width:auto;padding-inline:18px;font-size:12px}
  .hero__a{flex-direction:column}
}

/* Les pages intérieures ouvrent sur la même image pleine largeur, plus
   basse : le titre y est une entrée en matière, pas une affiche. */
.hero--court{min-height:clamp(380px,52vh,600px)}
.hero--court h1{font-size:clamp(2.1rem,5.4vw,4.4rem);max-width:20ch}
.hero--court .hero__t{padding-block:clamp(56px,8vw,96px)}

/* ── l'axe naturel ──────────────────────────────────────────────────
   Trois affirmations, pas trois cartes : des filets, un numéro en chiffres
   clairs, et rien d'encadré. La section reprend le fond blanc de la
   direction — c'est la respiration entre deux sections pâles. */
.naturel .lab{margin-bottom:.9em}
.nat{margin-top:clamp(34px,4.4vw,64px);display:grid;
  grid-template-columns:minmax(0,1fr);gap:0}
.nat__b{padding:clamp(24px,3vw,38px) 0;
  display:grid;grid-template-columns:clamp(58px,7vw,110px) minmax(0,1fr);
  gap:0 clamp(16px,2.4vw,36px);align-items:start}

.nat__n{font-family:'Cormorant',Georgia,serif;font-weight:300;
  font-size:clamp(26px,3.2vw,46px);line-height:1;color:var(--or-t,#826A1C)}
.nat__b h3{grid-column:2;font-family:'Cormorant',Georgia,serif;font-weight:300;
  font-size:clamp(22px,2.3vw,34px);line-height:1.12;color:var(--encre);margin:0 0 .45em}
.nat__b p{grid-column:2;margin:0;max-width:62ch;color:var(--gris)}
@media (max-width:720px){
  .nat__b{grid-template-columns:minmax(0,1fr)}
  .nat__b h3,.nat__b p{grid-column:1}
  .nat__n{margin-bottom:.3em}
}

/* ── l'ouverture du protocole ─────────────────────────────────────────
   `interpolate-size` laisse le navigateur interpoler jusqu'à `auto` : on
   anime la hauteur réelle du texte sans la mesurer en JavaScript. Là où
   ce n'est pas encore implémenté — Firefox, Safari — le texte apparaît
   d'un coup, ce qui est le comportement normal d'un <details>. */
:root{interpolate-size:allow-keywords}
.rang::details-content{
  block-size:0;overflow:hidden;opacity:0;content-visibility:hidden;
  transition:block-size .3s cubic-bezier(.16,.84,.44,1),opacity .22s ease,
             content-visibility .3s allow-discrete}
.rang[open]::details-content{block-size:auto;opacity:1;content-visibility:visible}
@media (prefers-reduced-motion:reduce){
  .rang::details-content,.rang__h::after{transition:none}
}

/* ── le sélecteur de langue ───────────────────────────────────────────
   Pas de drapeaux. Un drapeau désigne un pays, pas une langue : il n'en
   existe aucun pour l'arabe, et celui qu'on choisirait pour l'anglais
   ou l'espagnol écarterait la moitié de ceux qui les parlent. Chaque
   langue s'écrit donc dans sa propre langue. */
.lng{position:relative;flex:none;margin-left:14px}
.lng__b{min-height:44px;padding:0 30px 0 14px;font-family:'Cormorant',Georgia,serif;
  font-weight:500;font-size:15px;color:var(--encre);background:transparent;
  border:1px solid var(--filet);border-radius:2px;cursor:pointer;
  position:relative;white-space:nowrap;letter-spacing:.02em}
.lng__b::after{content:"";position:absolute;right:13px;top:calc(50% - 3px);
  width:6px;height:6px;border-right:1.3px solid currentColor;
  border-bottom:1.3px solid currentColor;transform:rotate(45deg);
  transition:transform .2s ease}
.lng__b[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-3px)}
.lng__b:hover{border-color:var(--nuit);color:var(--nuit)}
.lng__m{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:176px;
  background:var(--blanc);border:1px solid var(--filet);
  box-shadow:0 18px 42px -20px rgba(16,52,92,.45);padding:5px;
  display:flex;flex-direction:column}
.lng__m[hidden]{display:none}
.lng__l,.lng__a{display:flex;align-items:center;min-height:44px;padding:0 14px;
  font-size:15px;text-decoration:none;font-family:'Cormorant',Georgia,serif;
  font-weight:500;letter-spacing:.02em}
.lng__l{color:var(--encre)}
.lng__l:hover{background:var(--pale);color:var(--nuit)}
.lng__a{color:var(--gris);cursor:default}
.lng__a::after{content:"";margin-left:auto;width:5px;height:5px;border-radius:50%;
  background:var(--or)}
@media (max-width:720px){.lng{margin-left:auto}}

/* L'arabe a été retiré le 22/10/2026. Les règles de sens inverse et les
   trois polices Noto sont archivées dans _sauvegardes/ — rien à réécrire
   si la décision change. */

/* ─── le hero filmé ────────────────────────────────────────────────── */
/* L'affiche est posée en fond de .hero__i plutôt que sur la balise vidéo :
   c'est le seul moyen que le téléphone n'affiche pas une seconde l'affiche
   du grand écran avant que le script ne choisisse son fichier. Elle sert
   aussi d'image de hero quand le film ne se charge pas du tout — mouvement
   réduit demandé, économie de données, 2G. */
.hero--film .hero__i{background:var(--encre) url(video/cabinet-large.jpg) 50% 50%/cover no-repeat}
.hero--film .hero__v{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .7s ease}
.hero--film .hero__v.pret{opacity:1}
.hero--film .hero__i::after{z-index:1}
@media (max-width:760px){
  .hero--film .hero__i{background-image:url(video/cabinet.jpg)}
}

/* ═══════════════════════════════════════════════════════════════════
   Le journal « Conseils peau », 22/10/2026.
   Même vocabulaire que le reste : pas de cartes à ombre, pas de
   vignettes — des filets, du Cormorant et beaucoup de blanc. Un article
   se lit, il ne se survole pas.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── la liste des articles ────────────────────────────────────────── */
.arts{display:grid;gap:0;margin-top:clamp(20px,3vw,40px)}
.art{display:block;text-decoration:none;padding:clamp(22px,3vw,36px) 0;
  position:relative}
.art__d{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris-c)}
.art__t{margin-top:12px;font-family:'Cormorant',Georgia,serif;font-weight:300;
  font-size:clamp(1.5rem,3.1vw,2.5rem);line-height:1.08;color:var(--encre);
  max-width:32ch;transition:color .25s}
.art:hover .art__t{color:var(--nuit)}
.art__c{margin-top:14px;max-width:58ch;font-weight:300;color:var(--gris);
  font-size:clamp(15px,1.15vw,17.5px);line-height:1.62}
.art__l{display:inline-flex;align-items:center;gap:11px;min-height:44px;margin-top:10px;
  font-family:'Cormorant',Georgia,serif;font-weight:500;font-size:14px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--nuit)}
.art__l::after{content:"";width:28px;height:1px;background:currentColor;transition:width .3s}
.art:hover .art__l::after{width:44px}
.art:focus-visible{outline:2px solid var(--nuit);outline-offset:4px}

/* les trois renvois en bas d'article, plus serrés */
.arts--mini{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:0 clamp(24px,3vw,48px)}
.art--mini{padding:clamp(20px,2.4vw,30px) 0}
.art--mini .art__t{font-size:clamp(1.15rem,1.7vw,1.5rem);margin-top:0;max-width:22ch}
.art--mini .art__l{margin-top:6px;font-size:13px}

/* ─── l'article lui-même ───────────────────────────────────────────── */
/* Pas de hero photographique sur un article : on entre dans le texte.
   La colonne est étroite — 68 caractères — parce qu'un article de santé
   se lit en entier ou ne se lit pas. */
.journal{padding-top:clamp(40px,6vw,84px)}
.retour{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris-c);text-decoration:none}
.retour::before{content:"";width:26px;height:1px;background:currentColor}
.retour:hover{color:var(--nuit)}
.journal__t{margin-top:18px;font-size:clamp(2rem,4.6vw,3.8rem);max-width:19ch;
  text-transform:none;letter-spacing:.01em;line-height:1.06}
.journal__c{margin-top:clamp(16px,2vw,26px);max-width:60ch;font-weight:300;
  font-size:clamp(17px,1.5vw,20px);color:var(--gris);line-height:1.6}
.journal__s{margin-top:18px;padding-top:18px;border-top:1px solid var(--filet);
  max-width:60ch;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris-c)}
.journal__p{max-width:68ch;margin-top:clamp(28px,3.4vw,48px)}
.journal__p h3{margin-top:clamp(32px,3.6vw,52px);font-size:clamp(1.3rem,2.1vw,1.8rem)}
.journal__p p{margin-top:1em}
.journal__p ul{margin:1.2em 0 0;padding:0;list-style:none}
.journal__p li{position:relative;padding:0 0 0 24px;margin-bottom:.9em}
.journal__p li::before{content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--or)}

/* l'encadré « quand il faut voir un médecin » : un filet bronze à gauche,
   pas une boîte colorée. Il doit se voir sans crier. */
.avis{margin-top:clamp(34px,4vw,56px);padding:clamp(20px,2.4vw,30px) 0
  clamp(20px,2.4vw,30px) clamp(20px,2.6vw,32px);
  border-left:2px solid var(--or);background:var(--pale)}
.avis h3{margin-top:0;font-size:clamp(1.1rem,1.7vw,1.4rem)}
.avis p{margin-top:.7em;font-size:15.5px}

.journal__f{max-width:68ch;margin-top:clamp(40px,5vw,72px);
  padding-top:clamp(28px,3vw,42px);border-top:1px solid var(--filet)}
.journal__f p{max-width:52ch;font-weight:300}
.journal__f .b{margin-top:22px}
.journal__f .lien{margin-left:18px}
.journal__a{margin-top:clamp(48px,6vw,86px);font-size:clamp(1.3rem,2.2vw,1.9rem)}
@media (max-width:620px){.journal__f .lien{margin-left:0;margin-top:14px}}

/* ─── le journal : une photographie par article ────────────────────── */
/* Dans la liste, la vignette tient la colonne de gauche et le texte la
   droite ; sous 700 px de ligne, elle repasse au-dessus. Dans l'article,
   elle fait toute la largeur de la colonne de lecture, juste sous la
   signature — assez large pour qu'on la regarde, assez basse pour qu'on
   continue de lire. */
.arts{container-type:inline-size;container-name:liste}
.art{display:grid;grid-template-columns:clamp(200px,29cqi,360px) 1fr;
  gap:clamp(20px,3.4cqi,52px);align-items:start}
.art__i{display:block;overflow:hidden;background:var(--pale)}
.art__i img{width:100%;height:clamp(132px,18cqi,220px);object-fit:cover;
  transition:transform .6s cubic-bezier(.16,.84,.44,1)}
.art:hover .art__i img{transform:scale(1.05)}
.art__x{display:block;min-width:0}
.art__t{margin-top:10px}
@container liste (max-width:700px){
  .art{grid-template-columns:1fr;gap:16px}
  .art__i img{height:clamp(150px,34cqi,220px)}
}
/* les trois renvois de bas d'article n'ont pas de vignette */
.arts--mini{container-type:normal}
.art--mini{display:block}

.journal__i{margin:clamp(26px,3.4vw,44px) 0 0;max-width:68ch}
.journal__i img{width:100%;height:auto;display:block}

/* ─── les trois cartes : femme, homme, adolescents ─────────────────── */
/* Elles ne se distinguaient que par un titre dans le flux blanc : on
   passait de l'une à l'autre sans s'en apercevoir. Chacune reçoit sa
   bande sombre, pleine largeur, avec son numéro, sa photographie et ses
   trois chiffres. Le voile monte à 0,80 — le texte blanc y est mesuré
   au-dessus de 10:1, et la photographie reste lisible dessous. */
.pubs{position:sticky;top:var(--h-tete);z-index:40;display:flex;flex-wrap:wrap;
  gap:0;background:var(--blanc);border-block:1px solid var(--filet)}
.pubs a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 clamp(14px,2vw,28px);text-decoration:none;
  font-family:'Cormorant',Georgia,serif;font-weight:500;font-size:13.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gris);
  border-left:1px solid var(--filet);transition:background .22s,color .22s}
.pubs a:first-child{border-left:0}
.pubs a:hover{background:var(--encre);color:#fff}
@media (max-width:620px){.pubs a{flex:1 1 50%;font-size:12px}}

.pub{position:relative;overflow:hidden;background:var(--encre);
  scroll-margin-top:calc(var(--h-tete) + 52px);
  margin-top:clamp(40px,5vw,76px)}
.pub:first-of-type{margin-top:0}
.pub__i{position:absolute;inset:0}
.pub__i img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.pub__i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(10,13,18,.92) 0%,rgba(10,13,18,.86) 46%,
             rgba(10,13,18,.72) 100%)}
.pub__in{position:relative;z-index:2;display:grid;
  grid-template-columns:auto 1fr;gap:clamp(18px,3.2vw,52px);align-items:start;
  padding-block:clamp(42px,5.6vw,86px)}
.pub__n{font-family:'Cormorant',Georgia,serif;font-weight:300;line-height:.86;
  font-size:clamp(3.2rem,7vw,6.4rem);color:transparent;
  -webkit-text-stroke:1px rgba(188,151,73,.72);
  text-stroke:1px rgba(188,151,73,.72)}
.pub__t{min-width:0}
.pub .lab{color:rgba(255,255,255,.72)}
.pub h2{color:#fff;font-size:clamp(2.1rem,5.2vw,4.2rem);letter-spacing:.02em}
.pub__c{margin-top:clamp(14px,1.8vw,24px);max-width:56ch;font-weight:300;
  font-size:clamp(15.5px,1.3vw,18px);line-height:1.7;color:rgba(255,255,255,.92)}
.pub__m{display:flex;flex-wrap:wrap;gap:clamp(22px,3.4vw,56px);
  margin:clamp(24px,3vw,40px) 0 0;padding:0;list-style:none}
.pub__m li{display:block}
.pub__m b{display:block;font-family:'Cormorant',Georgia,serif;font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1;color:#D7B46A;
  font-variant-numeric:lining-nums tabular-nums}
.pub__m span{display:block;margin-top:8px;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.74)}
@media (max-width:620px){
  .pub__in{grid-template-columns:1fr;gap:10px}
  .pub__n{font-size:clamp(2.6rem,13vw,3.6rem)}
}

/* L'ancre des cures tombe sous les deux barres, elle aussi. */
#cures{scroll-margin-top:calc(var(--h-tete) + 52px)}

/* ─── un objet montré, pas une bande ───────────────────────────────── */
/* Le chèque cadeau tenait toute la largeur sur 720 px de haut : il
   devenait le sujet de la page, et son fond flouté se voyait plus que
   les cartes. Une figure contenue, avec sa légende sous un filet. */
.objet{margin:0;max-width:760px}
.objet img{width:100%;height:auto;display:block}
.objet figcaption{margin-top:16px;max-width:56ch;
  font-size:13.5px;line-height:1.6;color:var(--gris-c)}

/* ─── les trois points de la bulle ─────────────────────────────────── */
/* Ils ne bougent qu'au survol, et chacun à son tour : au repos, une icône
   qui clignote toute seule dans un coin est une sollicitation, pas une
   information. Le mouvement est coupé net si la visiteuse a demandé moins
   d'animation. */
@keyframes ia-point{0%,70%,100%{opacity:1;transform:translateY(0)}
                    35%{opacity:.45;transform:translateY(-1.2px)}}
@media (prefers-reduced-motion:no-preference){
  .fab__ia:hover .ia-p,.fab--ouvert .ia-p{
    animation:ia-point 1.25s ease-in-out infinite;transform-box:fill-box;
    transform-origin:center}
  .fab__ia:hover .ia-p:nth-of-type(2),.fab--ouvert .ia-p:nth-of-type(2){
    animation-delay:.16s}
  .fab__ia:hover .ia-p:nth-of-type(3),.fab--ouvert .ia-p:nth-of-type(3){
    animation-delay:.32s}
}

/* ─── les deux pôles, la page des soins ────────────────────────────── */
.poles{display:grid;gap:clamp(14px,2vw,26px);margin-top:clamp(22px,3vw,38px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.pole{display:block;padding:clamp(20px,2.4vw,30px);text-decoration:none;color:inherit;
  border:1px solid var(--filet);background:#fff;
  transition:border-color .35s ease,transform .35s cubic-bezier(.16,.84,.44,1)}
.pole:hover,.pole:focus-visible{border-color:var(--or);transform:translateY(-3px)}
.pole__l{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or-f);font-weight:600}
.pole h3{margin:.5em 0 .45em;font-size:clamp(1.15rem,1.8vw,1.42rem);line-height:1.2}
.pole p{color:var(--gris-c);font-size:.96rem;line-height:1.6}
/* Les lignes du pôle médical n'ont ni durée ni prix : la description reprend
   toute la largeur au lieu de laisser deux colonnes vides. */
.rang__d--large{grid-column:1/-1;max-width:74ch}
/* Les quatre points du cadre privé : deux colonnes, filet de séparation —
   pas des cartes. Le site n'en a aucune et n'en prendra pas ici. */
/* Deux colonnes, pas trois : ils sont quatre, et une grille de trois laisse
   le quatrième seul sur sa ligne. */
.cadre{display:grid;gap:0 clamp(26px,4vw,64px);margin-top:clamp(20px,2.6vw,34px)}
@media (min-width:720px){.cadre{grid-template-columns:1fr 1fr}}
.cadre__b{padding:clamp(18px,2vw,26px) 0}
.cadre__b h3{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.25}
.cadre__b p{margin-top:.5em;color:var(--gris-c);font-size:.96rem;line-height:1.62}
/* Deux liens côte à côte sous la bande médicale. */
.deux-liens{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px)}