/* ===========================================================================
   Institut de beauté — feuille de style commune aux quatre pages.

   Le registre vient de trois références : la capitale ultra-fine très espacée
   et le texte courant en serif du Four Seasons, les sections numérotées et les
   compteurs de YOA, le contraste noir/crème de NEvents. Rien d'inventé pour
   faire joli : ces trois-là vendent du haut de gamme, et un institut vend la
   même chose.

   Une seule couleur d'accent. Deux polices. Le reste, c'est du vide.
   =========================================================================== */

:root{
  --noir:#0E0C0A;          /* le fond des sections fortes */
  --noir-doux:#181513;
  --creme:#F2EDE4;         /* le fond courant */
  --creme-pur:#FAF7F1;
  --papier:#EAE3D7;        /* le ton intermédiaire, pour séparer sans trancher */
  --nude:#A87E58;          /* l'accent, pour les filets et les ornements */
  --nude-texte:#7A5330;    /* le même accent, assombri pour être LU (4,5:1 mesuré) */
  --nude-clair:#DFC6A8;
  --or:rgba(168,126,88,.34);
  --encre:#191512;         /* le texte sur crème */
  --gris:#655C52;          /* les textes secondaires : lisibles, pas décoratifs */
  --ligne:rgba(25,21,18,.16);
  --ligne-claire:rgba(242,237,228,.22);

  --titre:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --texte:'Cormorant Garamond', Garamond, Georgia, serif;
  /* Les chiffres d'un tarif doivent s'aligner en colonne et se lire d'un coup. */
  --chiffres:'Jost', 'Helvetica Neue', sans-serif;

  --max:1340px;
  --gouttiere:clamp(20px, 5vw, 68px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--creme); color:var(--encre);
  /* Le menu du mobile est un panneau plein écran poussé à droite. Sans ce
     verrou, il élargit la page et le doigt fait défiler de côté. */
  overflow-x:hidden;
  font-family:var(--texte); font-size:21px; line-height:1.68;
  font-weight:500; -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums tabular-nums;
  /* Aucun mot ne doit être coupé : on l'a payé assez cher une fois. */
  overflow-wrap:normal; word-break:keep-all; hyphens:manual;
}
img{max-width:100%; display:block}
a{color:inherit}

.enveloppe{max-width:var(--max); margin:0 auto; padding:0 var(--gouttiere)}

/* --------------------------------------------------------------- typographie
   Le contraste tient à une seule chose : les titres sont FINS et ESPACÉS,
   le texte courant est un serif chaleureux. L'inverse de ce que font tous
   les sites de salon, qui mettent du gras partout. */
.sur-titre{
  font-family:var(--titre); font-weight:500; font-size:.76rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--nude-texte);
  margin:0 0 26px; display:flex; align-items:center; gap:16px;
}
/* Un filet part du numéro et file vers la droite : c'est ce petit trait qui
   fait la différence entre « une page » et « une page tenue ». */
.sur-titre::after{content:''; flex:1 1 auto; height:1px; background:var(--or); max-width:120px}
.sur-titre .num{opacity:.62; font-variant-numeric:tabular-nums; font-weight:400}
.section.sombre .sur-titre{color:var(--nude-clair)}
.section.sombre .sur-titre::after{background:rgba(223,198,168,.3)}

h1,h2,h3{font-family:var(--titre); font-weight:200; text-transform:uppercase;
  margin:0; line-height:1.16; color:inherit}
h1{font-size:clamp(1.9rem, 5.4vw, 4rem); letter-spacing:.15em}
h2{font-size:clamp(1.35rem, 3.1vw, 2.35rem); letter-spacing:.17em}
h3{font-size:clamp(.95rem, 1.5vw, 1.12rem); letter-spacing:.19em; font-weight:300}
p{margin:0 0 1.15em}
.plomb{font-size:clamp(1.12rem, 1.75vw, 1.4rem); line-height:1.62; color:var(--encre)}
.discret{color:var(--gris)}
/* Une lettrine discrète sur le premier paragraphe d'une section : la marque
   des pages qu'on a pris le temps de composer. */
.chapo::first-letter{float:left; font-size:3.4em; line-height:.82; padding:.06em .12em 0 0;
  color:var(--nude-texte); font-weight:500}

/* ------------------------------------------------------------------ boutons */
.bouton{
  display:inline-block; font-family:var(--titre); font-size:.7rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; text-decoration:none;
  padding:20px 42px; border:1px solid currentColor; background:none;
  cursor:pointer; transition:background .35s, color .35s, border-color .35s;
}
.bouton.plein{background:var(--noir); color:var(--creme); border-color:var(--noir)}
.bouton.plein:hover{background:var(--nude); border-color:var(--nude); color:var(--noir)}
.bouton.clair{color:var(--creme); border-color:var(--ligne-claire)}
.bouton.clair:hover{background:var(--creme); color:var(--noir); border-color:var(--creme)}
.bouton:not(.plein):not(.clair):hover{background:var(--noir); color:var(--creme)}

/* -------------------------------------------------------------------- entête
   Trois zones, comme une enseigne : le nom à gauche, la navigation au centre,
   l'action à droite. Le centre est vraiment centré — il est ancré sur la page,
   pas sur ce qui reste entre le logo et le bouton, sinon le menu se déporte
   dès que le nom de l'institut s'allonge.

   Elle reste posée en permanence, et devient opaque au premier défilement.
   Sur l'image d'accueil elle est transparente : le titre doit occuper l'écran
   entier, pas commencer sous un bandeau. */
.entete{
  position:fixed; inset:0 0 auto; z-index:60; padding:22px 0;
  transition:background .4s, padding .4s, border-color .4s, box-shadow .4s;
  border-bottom:1px solid transparent;
}
.entete.posee{background:rgba(242,237,228,.95); backdrop-filter:blur(16px) saturate(1.1);
  padding:13px 0; border-bottom-color:var(--or); box-shadow:0 1px 22px rgba(25,21,18,.06)}
.entete .dedans{display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:26px}

.marque{grid-column:1; justify-self:start;
  font-family:var(--titre); font-weight:300; font-size:.98rem; letter-spacing:.3em;
  text-transform:uppercase; text-decoration:none; color:var(--creme); transition:color .4s;
  white-space:nowrap; line-height:1.2}
.marque .fin{display:block; font-size:.52rem; letter-spacing:.4em; opacity:.66; margin-top:6px}
.entete.posee .marque{color:var(--encre)}

.nav-centre{grid-column:2; justify-self:center}
.menu{display:flex; align-items:center; gap:38px; list-style:none; margin:0; padding:0}
.menu a{position:relative; font-family:var(--titre); font-size:.7rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; text-decoration:none;
  color:var(--creme); opacity:.86; transition:color .4s, opacity .3s; padding:6px 0;
  white-space:nowrap}
.entete.posee .menu a{color:var(--encre)}
/* Le soulignement pousse depuis le centre : c'est le détail qui distingue un
   menu tenu d'un menu par défaut. */
.menu a::after{content:''; position:absolute; left:50%; right:50%; bottom:0; height:1px;
  background:var(--nude); transition:left .35s cubic-bezier(.2,.7,.2,1), right .35s cubic-bezier(.2,.7,.2,1)}
.menu a:hover, .menu a[aria-current="page"]{opacity:1}
.menu a:hover::after, .menu a[aria-current="page"]::after{left:0; right:0}

/* L'action à droite, encadrée : elle doit se distinguer des liens sans crier. */
.entete .action{grid-column:3; justify-self:end}
.entete .rdv{display:inline-block; font-family:var(--titre); font-size:.68rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; text-decoration:none;
  padding:14px 28px; border:1px solid rgba(242,237,228,.5); color:var(--creme);
  transition:background .35s, color .35s, border-color .35s; white-space:nowrap}
.entete .rdv:hover{background:var(--creme); border-color:var(--creme); color:var(--noir)}
.entete.posee .rdv{border-color:var(--encre); color:var(--encre)}
.entete.posee .rdv:hover{background:var(--nude-texte); border-color:var(--nude-texte); color:var(--creme-pur)}

.burger{display:none; background:none; border:0; cursor:pointer; padding:8px;
  color:var(--creme); grid-column:3; justify-self:end}
.entete.posee .burger{color:var(--encre)}
.burger span{display:block; width:26px; height:1px; background:currentColor; margin:6px 0;
  transition:transform .3s, opacity .3s}
.burger.ouvert span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.ouvert span:nth-child(2){opacity:0}
.burger.ouvert span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------------------------------------------------------------- hero */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--creme); background:var(--noir); overflow:hidden}
.hero .fond{position:absolute; inset:0}
.hero .fond img{width:100%; height:100%; object-fit:cover; opacity:.62}
.hero .voile{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,14,12,.62) 0%, rgba(16,14,12,.18) 38%, rgba(16,14,12,.86) 100%)}
.hero .dedans{position:relative; padding-bottom:clamp(56px, 9vh, 108px); width:100%}
.hero h1{margin-bottom:26px}
.hero .plomb{max-width:44ch; color:rgba(245,241,234,.86); margin-bottom:38px}
.hero .actes{display:flex; gap:16px; flex-wrap:wrap}

/* ------------------------------------------------------------------ sections */
.section{padding:clamp(72px, 11vh, 140px) 0}
.section.sombre{background:var(--noir); color:var(--creme)}
.section.sombre .discret{color:rgba(245,241,234,.62)}
.section.pure{background:var(--creme-pur)}
.section.papier{background:var(--papier)}
.section.pure, .section.papier{
  background-image:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.55), transparent 62%)}
/* Un filet doré sépare deux sections claires : sans lui, elles se touchent
   sans qu'on sache où l'une finit. */
.section.pure + .section, .section + .section.pure{border-top:1px solid var(--or)}
.entete-section{max-width:62ch; margin-bottom:clamp(40px, 6vh, 76px)}
.entete-section h2{margin-bottom:22px}

/* ------------------------------------------------------------------ chiffres
   Repris de YOA : trois nombres, rien autour. Ce sont ses vrais chiffres
   Google, jamais des chiffres décoratifs. */
.chiffres{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ligne-claire)}
.chiffre{background:var(--noir); padding:clamp(30px,4.5vw,54px) 26px; text-align:center}
.chiffre .n{font-family:var(--titre); font-weight:200; font-size:clamp(2.4rem,5vw,3.8rem);
  letter-spacing:.03em; color:var(--nude-clair); line-height:1; display:block;
  font-variant-numeric:lining-nums}
.chiffre .l{font-family:var(--titre); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(242,237,228,.68); margin-top:18px; display:block; line-height:1.7}

/* ---------------------------------------------------------------- prestations
   Une ligne par soin, comme une carte. Le prix est aligné à droite et se lit
   en diagonale — c'est la première chose qu'une cliente cherche. */
.famille{margin-bottom:clamp(42px,6vh,72px)}
.famille > h3{padding-bottom:18px; margin-bottom:6px; color:var(--nude-texte);
  font-size:clamp(1.06rem,1.8vw,1.3rem); letter-spacing:.24em; font-weight:400;
  /* Un filet double, fin puis très fin : la reliure d'une carte de restaurant. */
  border-bottom:1px solid var(--nude);
  box-shadow:0 3px 0 -2px var(--or)}
.section.sombre .famille > h3{border-bottom-color:var(--ligne-claire)}
/* `flex-wrap` est indispensable : sans lui, la description reste collée sur
   la même ligne que le prix au lieu de passer dessous, et la ligne s'étire. */
.soin{display:flex; flex-wrap:wrap; align-items:baseline; gap:18px; padding:19px 0;
  border-bottom:1px solid var(--ligne)}
.section.sombre .soin{border-bottom-color:var(--ligne-claire)}
.soin{transition:background .3s}
.soin:hover{background:rgba(168,126,88,.055)}
.soin .nom{font-family:var(--titre); font-weight:400; font-size:.95rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--encre); flex:none; max-width:52%}
.soin .pointille{flex:1 1 auto; border-bottom:1px dotted rgba(25,21,18,.3);
  transform:translateY(-5px); min-width:24px}
.section.sombre .soin .pointille{border-bottom-color:var(--ligne-claire)}
/* La durée s'efface, le prix ressort : ce sont les deux informations que
   l'œil cherche, mais pas avec la même urgence. */
.soin .duree{font-family:var(--chiffres); font-size:.88rem; letter-spacing:.08em;
  color:var(--gris); flex:none; font-variant-numeric:lining-nums tabular-nums}
.section.sombre .soin .duree{color:rgba(242,237,228,.52)}
.soin .prix{font-family:var(--chiffres); font-weight:500; font-size:1rem; letter-spacing:.06em;
  color:var(--encre); flex:none; min-width:7.2em; text-align:right;
  font-variant-numeric:lining-nums tabular-nums}
.section.sombre .soin .prix{color:var(--nude-clair)}
/* `flex:0 0 100%` et RIEN qui limite la largeur : un `max-width` ici ramènerait
   la taille théorique de la description sous l'espace restant, et flexbox la
   garderait sur la ligne du prix. La longueur de lecture se règle donc par un
   retrait à droite, pas par une largeur maximale. */
.soin .detail{flex:0 0 100%; font-size:1.02rem; color:var(--gris); margin-top:-4px;
  line-height:1.62; padding-right:clamp(0px, 26%, 380px)}
.section.sombre .soin .detail{color:rgba(245,241,234,.55)}

/* ------------------------------------------------------ la carte en vignettes
   Le motif du Four Seasons : une image carrée par prestation, trois par rangée.
   Une carte de tarifs en colonnes de texte se lit comme un tableur ; en
   vignettes, on voit ce qu'on achète avant d'en voir le prix. */
.vignettes{display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px,2.2vw,34px); max-width:1010px}
.vignette{display:flex; flex-direction:column; background:none}
.vignette .image{position:relative; overflow:hidden; background:var(--noir-doux); margin-bottom:18px}
.vignette .image img{width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.vignette:hover .image img{transform:scale(1.05)}

.vignette .famille-etiq{font-family:var(--titre); font-size:.6rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--nude-texte); margin-bottom:11px}
.vignette h3{font-size:clamp(.88rem,1.15vw,1rem); letter-spacing:.13em; font-weight:300;
  color:var(--encre); margin-bottom:12px; line-height:1.4}
/* Le trait entre le titre et le prix : c'est lui qui donne l'air « tenu ». */
.vignette .fil{width:34px; height:1px; background:var(--nude); margin-bottom:14px}
.vignette .duo-prix{display:flex; align-items:baseline; gap:14px; margin-bottom:12px;
  font-family:var(--chiffres); font-variant-numeric:lining-nums tabular-nums}
.vignette .duo-prix .duree{font-size:.84rem; color:var(--gris); letter-spacing:.08em}
.vignette .duo-prix .prix{font-size:1rem; font-weight:500; color:var(--encre); letter-spacing:.05em}
.vignette p{font-size:.94rem; line-height:1.58; color:var(--gris); margin:0}

/* Une variante rattachée à sa prestation : la retouche sous le maquillage,
   le forfait sous la séance. Elle n'a pas besoin de sa propre image. */
.vignette .variante{margin-top:16px; padding-top:14px; border-top:1px solid var(--ligne);
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.vignette .variante .v-nom{font-family:var(--titre); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--encre)}
.vignette .variante .v-prix{margin-left:auto; font-family:var(--chiffres); font-size:.88rem;
  color:var(--encre); font-variant-numeric:lining-nums tabular-nums}
.vignette .variante .v-duree{font-family:var(--chiffres); font-size:.8rem; color:var(--gris)}

/* Une prestation ajoutée depuis l'espace de gestion n'a pas encore de photo :
   elle prend la même place, avec un aplat sobre au lieu d'une image. */
.vignette.sans-image .image{aspect-ratio:1/1; display:flex; align-items:center;
  justify-content:center; background:var(--papier)}
.vignette.sans-image .image::after{content:''; width:46px; height:1px; background:var(--nude)}

@media (max-width:980px){ .vignettes{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:600px){ .vignettes{grid-template-columns:1fr; gap:38px} }

/* Une famille sans photos se présente en liste. C'est un parti pris, pas un
   trou : mieux vaut une belle liste qu'une image détournée d'un autre soin. */
.liste-soins{border-top:1px solid var(--ligne); max-width:1010px}
.liste-soins .soin:first-child{padding-top:22px}

/* Le titre d'une famille au-dessus de sa grille de vignettes. */
.famille-titre{display:flex; align-items:baseline; gap:20px; margin:clamp(46px,7vh,84px) 0 28px;
  padding-bottom:16px; border-bottom:1px solid var(--nude); max-width:1010px}
.famille-titre:first-of-type{margin-top:0}
.famille-titre h2{font-size:clamp(1.06rem,1.8vw,1.34rem); letter-spacing:.24em; font-weight:400;
  color:var(--nude-texte)}
.famille-titre .compte{margin-left:auto; font-family:var(--chiffres); font-size:.74rem;
  letter-spacing:.16em; color:var(--gris); text-transform:uppercase}

/* ------------------------------------------------------------- bande d'image
   Une image pleine largeur entre deux familles de soins. C'est ce qui empêche
   une carte de tarifs de ressembler à un tableur : on respire, et on voit le
   travail dont on est en train de lire le prix. */
.bande{position:relative; height:clamp(240px, 42vh, 460px); overflow:hidden; background:var(--noir)}
.bande img{width:100%; height:100%; object-fit:cover; opacity:.88}
.bande .mot{position:absolute; inset:auto 0 0; padding:clamp(24px,4vw,48px) var(--gouttiere);
  color:var(--creme);
  background:linear-gradient(180deg, rgba(14,12,10,0), rgba(14,12,10,.78))}
.bande .mot p{margin:0; max-width:34ch; font-size:clamp(1.02rem,1.5vw,1.24rem);
  line-height:1.58; color:rgba(242,237,228,.94)}
.bande .mot .sur-titre{color:var(--nude-clair); margin-bottom:12px}
.bande .mot .sur-titre::after{background:rgba(223,198,168,.34)}

/* ------------------------------------------------------------------- galerie */
.galerie{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.galerie figure{margin:0; position:relative; overflow:hidden; background:var(--noir-doux)}
.galerie img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/4;
  transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.galerie figure:hover img{transform:scale(1.045)}
.galerie figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 22px 20px;
  font-family:var(--titre); font-size:.65rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--creme); font-weight:400;
  background:linear-gradient(180deg, rgba(16,14,12,0), rgba(16,14,12,.82))}
.galerie .haute{grid-row:span 2}

/* ---------------------------------------------------------------- deux colonnes */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,86px); align-items:center}
.duo img{width:100%; aspect-ratio:4/5; object-fit:cover}

/* --------------------------------------------------------------------- avis
   Uniquement de vrais avis Google. Jamais d'exemple, jamais d'invention. */
.avis{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px;
  background:var(--ligne)}
.avis blockquote{margin:0; background:var(--creme); padding:clamp(28px,3.4vw,42px)}
.section.pure .avis blockquote{background:var(--creme-pur)}
.section.papier .avis blockquote{background:var(--papier)}
.section.papier .famille > h3{border-bottom-color:var(--nude)}
/* Un guillemet ouvrant en filigrane : l'avis se lit comme une citation, pas
   comme un bloc de texte de plus. */
.avis blockquote{position:relative}
.avis blockquote::before{content:'\201C'; position:absolute; top:-.18em; left:.22em;
  font-size:6rem; line-height:1; color:var(--nude); opacity:.15; pointer-events:none}
.avis .etoiles{color:var(--nude-texte); letter-spacing:.3em; font-size:.86rem; margin-bottom:20px}
.avis p{font-size:1.1rem; line-height:1.66; color:var(--encre); position:relative}
.avis cite{font-family:var(--titre); font-style:normal; font-size:.66rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--nude-texte); font-weight:500}

/* ------------------------------------------------------------------ pratique */
.pratique{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ligne-claire)}
.pratique > div{background:var(--noir); padding:clamp(30px,4vw,52px)}
.horaires{list-style:none; margin:0; padding:0}
.horaires li{display:flex; justify-content:space-between; gap:20px; padding:13px 0;
  border-bottom:1px solid var(--ligne-claire); font-size:1.05rem}
.horaires li.aujourdhui{background:rgba(223,198,168,.07)}
.horaires li:last-child{border-bottom:0}
.horaires .j{font-family:var(--titre); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(242,237,228,.76)}
.horaires li.aujourdhui .j{color:var(--nude-clair)}
.horaires .h{font-family:var(--chiffres); font-size:.95rem; color:rgba(242,237,228,.9);
  font-variant-numeric:lining-nums tabular-nums}
.carte{width:100%; height:100%; min-height:340px; border:0; filter:grayscale(1) contrast(.92)}

/* ------------------------------------------------------------------- contact */
.coordonnees{list-style:none; margin:0; padding:0}
.coordonnees li{padding:20px 0; border-bottom:1px solid var(--ligne-claire)}
.coordonnees .e{display:block; font-family:var(--titre); font-size:.6rem; letter-spacing:.28em;
  text-transform:uppercase; color:rgba(245,241,234,.5); margin-bottom:8px}
.coordonnees a{text-decoration:none; font-size:1.2rem; border-bottom:1px solid transparent;
  transition:border-color .3s}
.coordonnees a:hover{border-bottom-color:var(--nude)}

/* ---------------------------------------------------------------- pied de page */
.pied{background:var(--noir); color:rgba(245,241,234,.6); padding:clamp(56px,7vh,88px) 0 34px;
  border-top:1px solid var(--ligne-claire)}
.pied .haut{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px; margin-bottom:52px}
.pied h3{color:var(--creme); margin-bottom:20px; font-size:.66rem; letter-spacing:.26em}
.pied a{text-decoration:none} .pied a:hover{color:var(--nude-clair)}
.pied ul{list-style:none; margin:0; padding:0}
.pied li{margin-bottom:11px; font-size:1rem}
.pied .bas{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--ligne-claire);
  font-family:var(--titre); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase}

/* --------------------------------------------------------- barre fixe mobile
   Sur téléphone, appeler et réserver doivent rester à portée de pouce en
   permanence. C'est de là que viennent les rendez-vous. */
.barre-mobile{display:none; position:fixed; inset:auto 0 0; z-index:70;
  background:rgba(16,14,12,.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--ligne-claire)}
.barre-mobile a{flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:17px 8px; text-decoration:none; color:var(--creme);
  font-family:var(--titre); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase}
.barre-mobile a + a{border-left:1px solid var(--ligne-claire); background:var(--nude); color:var(--noir)}

/* ---------------------------------------------------------------- apparition */
.monte{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.monte.vu{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .monte{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .galerie figure:hover img{transform:none}
}

/* ------------------------------------------------------------------ adaptatif */
@media (max-width:980px){
  .duo, .pratique{grid-template-columns:1fr}
  .pied .haut{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:19px}
  .burger{display:block}
  .entete .dedans{grid-template-columns:1fr auto}
  .entete .action{display:none}          /* le rendez-vous est dans la barre du bas */
  /* `justify-self:center`, hérité du menu de bureau, continue de rétrécir
     l'élément à la largeur de son contenu même en position fixe : le panneau
     ne faisait que 134 px et translateX(100%) ne le sortait pas de l'écran.
     D'où la largeur imposée. */
  .nav-centre{position:fixed; inset:0; z-index:65; background:var(--noir);
    width:100%; height:100%; justify-self:stretch;
    display:flex; align-items:center; justify-content:center;
    transform:translateX(100%); transition:transform .45s cubic-bezier(.4,0,.2,1)}
  .nav-centre.ouvert{transform:none}
  /* Le panneau passe par-dessus tout, y compris le bouton qui l'a ouvert :
     sans ces trois lignes, le menu s'ouvre et ne se referme plus. L'entête
     repasse donc au-dessus, et redevient transparente pour ne pas poser une
     barre crème sur le panneau noir. */
  .entete{z-index:70}
  /* Le panneau et le bouton sont frères dans la même pile : sans rang propre,
     le bouton reste dessous et le menu ne se referme plus. Le nom passe aussi
     devant, sinon l'entête paraît vide une fois le menu ouvert. */
  .burger{position:relative; z-index:80}
  .marque{position:relative; z-index:80}
  body.menu-ouvert .entete{background:transparent; border-bottom-color:transparent;
    box-shadow:none; backdrop-filter:none}
  body.menu-ouvert .marque, body.menu-ouvert .burger{color:var(--creme)}
  body.menu-ouvert .marque .fin{opacity:0}
  .menu{flex-direction:column; gap:32px}
  .menu a{color:var(--creme) !important; font-size:.9rem; letter-spacing:.3em}
  .menu a::after{background:var(--nude-clair)}
  .chiffres{grid-template-columns:1fr}
  .pied .haut{grid-template-columns:1fr; gap:34px}
  .barre-mobile{display:flex}
  body{padding-bottom:58px}
  .soin{flex-wrap:wrap}
  .soin .nom{max-width:100%; flex:1 1 auto}
  .soin .pointille{display:none}
  .galerie .haute{grid-row:auto}
}

/* --------------------------------------------------------------- impression */
@media print{
  .entete,.barre-mobile,.hero .fond,.carte{display:none}
  body{background:#fff; color:#000; font-size:11pt}
  .section{padding:14pt 0; break-inside:avoid}
}