/* ==========================================================================
   ROSANA COIFFURE — 133 rue de Sèvres, 75006 Paris
   Charte : noir profond, or, ivoire. Vanilla CSS.
   ========================================================================== */

:root{
  --noir:#0E0E0E;
  --noir-2:#161513;
  --encre:#1C1B18;
  --or:#C6A15B;
  --or-clair:#E2C88E;
  --or-fonce:#A8843F;
  --ivoire:#FBF8F2;
  --ivoire-2:#F3EEE4;
  --gris:#6E6A62;
  --gris-clair:#B9B3A8;
  --ligne:rgba(28,27,24,.14);
  --ligne-claire:rgba(246,242,233,.16);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1180px;   /* élargie sur grands écrans, voir plus bas */
  --pad:clamp(20px,5vw,48px);
  --sec:clamp(72px,10vw,140px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

/* L'attribut `hidden` doit l'emporter sur toute règle de mise en page : sans
   cela, un `display:flex` de classe le neutralise et l'élément reste visible. */
[hidden]{display:none !important}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:96px;
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--ivoire);
  color:var(--encre);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--noir);color:var(--ivoire);padding:12px 20px;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--or);outline-offset:3px}

/* ---------------------------------------------------------------- Typo --- */

.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--or-fonce);
  margin:0 0 18px;
}
.eyebrow--light{color:var(--or-clair)}

.h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(30px,4.4vw,54px);
  line-height:1.12;
  letter-spacing:-.005em;
  margin:0 0 22px;
}
.h2--light{color:var(--ivoire)}

.rule{
  width:56px;height:1px;
  background:linear-gradient(90deg,var(--or),rgba(198,161,91,0));
  margin:0 0 26px;
}

p{margin:0 0 20px}

.link{
  display:inline-block;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--or-fonce);
  border-bottom:1px solid rgba(168,132,63,.35);
  padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.link span{display:inline-block;transition:transform .3s var(--ease)}
.link:hover{color:var(--encre);border-color:var(--encre)}
.link:hover span{transform:translateX(5px)}
.link--sm{font-size:11px}

/* -------------------------------------------------------------- Boutons -- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;
  padding:0 34px;
  font-family:var(--sans);
  font-size:11px;font-weight:400;
  letter-spacing:.20em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  position:relative;
  overflow:hidden;
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.btn:hover::after{transform:scaleX(1);transform-origin:left}

.btn--gold{
  background:var(--encre);
  color:var(--ivoire);
  border-color:var(--encre);
  isolation:isolate;
}
.btn--gold::after{background:var(--or)}
.btn--gold:hover{color:var(--encre);border-color:var(--or)}

.btn--ghost{
  color:var(--encre);
  /* Sans fond déclaré, le navigateur applique son gris par défaut aux
     <button> : invisible sur fond clair, illisible sur fond sombre. */
  background:transparent;
  border-color:var(--ligne);
  isolation:isolate;
}
.btn--ghost::after{background:var(--encre)}
.btn--ghost:hover{color:var(--ivoire);border-color:var(--encre)}

/* -------------------------------------------------------------- Topbar --- */

.topbar{
  background:var(--noir);
  color:var(--gris-clair);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.topbar__in{
  display:flex;align-items:center;justify-content:center;
  gap:14px;
  min-height:38px;
  text-align:center;
}
.topbar__sep{width:3px;height:3px;border-radius:50%;background:var(--or);flex:none;opacity:.8}

/* -------------------------------------------------------------- Header --- */

.header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,248,242,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ligne);
  transition:box-shadow .4s var(--ease),background .4s var(--ease);
}
.header.is-stuck{box-shadow:0 10px 40px -24px rgba(14,14,14,.4)}

.header__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  min-height:74px;
}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand__mark{width:26px;height:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--serif);
  font-size:22px;font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.brand__sub{
  font-size:8.5px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--or-fonce);margin-top:4px;
}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav a{
  font-size:11px;letter-spacing:.20em;text-transform:uppercase;
  text-decoration:none;color:var(--encre);
  position:relative;padding:6px 0;
  /* Sans cela, « Le salon » se coupe sur deux lignes et « Ma carte fidélité »
     sur trois : la barre de navigation se déforme dès que les entrées se
     multiplient. Une entrée de menu tient sur une ligne, ou elle passe dans
     le tiroir. */
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:var(--or);
  transform:scaleX(0);transform-origin:right;
  transition:transform .38s var(--ease);
}
.nav a:not(.nav__cta):hover::after,
.nav a.is-active::after{transform:scaleX(1);transform-origin:left}
.nav a.is-active{color:var(--or-fonce)}

.nav__cta{
  border:1px solid var(--encre);
  padding:12px 22px !important;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.nav__cta:hover{background:var(--encre);color:var(--ivoire)}

.burger{
  display:none;
  width:44px;height:44px;
  background:none;border:0;padding:10px;
  cursor:pointer;
}
.burger span{
  display:block;height:1px;background:var(--encre);
  margin:5px 0;transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------------- Hero --- */

.hero{
  position:relative;
  padding:clamp(64px,10vw,120px) 0 clamp(72px,9vw,110px);
  background:
    radial-gradient(120% 90% at 50% -10%,#FFFFFF 0%,var(--ivoire) 45%,var(--ivoire-2) 100%);
  overflow:hidden;
  text-align:center;
}
.hero__deco{
  position:absolute;inset:0;
  opacity:.85;
  pointer-events:none;
}
.hero__deco svg{width:100%;height:100%}

.hero__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}

.hero__logo{
  width:clamp(230px,32vw,360px);
  margin-bottom:clamp(26px,4vw,40px);
}

.hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(38px,7vw,82px);
  line-height:1.06;
  letter-spacing:-.01em;
  margin:0 0 24px;
  max-width:16ch;
}
.hero__title em{
  font-style:italic;
  color:var(--or-fonce);
}

.hero__lead{
  max-width:54ch;
  margin-inline:auto;
  max-width:56ch;
  color:var(--gris);
  font-size:clamp(15px,1.35vw,17.5px);
  line-height:1.85;
  margin-bottom:38px;
}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

.hero__facts{
  list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(28px,6vw,72px);
  margin:clamp(48px,7vw,80px) 0 0;
  padding:clamp(30px,4vw,40px) 0 0;
  border-top:1px solid var(--ligne);
  width:100%;max-width:820px;
}
.hero__facts li{display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__facts strong{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px,3.4vw,38px);
  line-height:1;
  color:var(--encre);
}
.hero__facts strong span{color:var(--or);font-size:.6em;vertical-align:super}
.hero__factLbl{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
}

.hero__scroll{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  width:1px;height:52px;background:var(--ligne);overflow:hidden;z-index:2;
}
.hero__scroll span{
  display:block;width:100%;height:22px;background:var(--or);
  animation:scrollDot 2.4s var(--ease) infinite;
}
@keyframes scrollDot{
  0%{transform:translateY(-24px)}
  60%,100%{transform:translateY(54px)}
}

/* ------------------------------------------------------------- Marquee --- */

.marquee{
  background:var(--noir);
  color:var(--ivoire);
  padding:16px 0;
  overflow:hidden;
  border-block:1px solid rgba(198,161,91,.2);
}
.marquee__track{
  display:flex;align-items:center;gap:28px;
  width:max-content;
  animation:slide 42s linear infinite;
}
.marquee span{
  font-family:var(--serif);
  font-size:clamp(16px,2vw,22px);
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  font-weight:300;
}
.marquee i{color:var(--or);font-style:normal;font-size:11px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------ Sections --- */

.section{padding:var(--sec) 0}
.section--alt{background:var(--ivoire-2)}

.secHead{max-width:660px;margin:0 auto clamp(48px,6vw,72px);text-align:center}
.secHead__lead{color:var(--gris);font-size:clamp(15px,1.2vw,16.5px);margin:0}

.grid2{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(40px,6vw,90px);
  align-items:center;
}
.col-txt p{color:var(--gris);max-width:52ch}

.col-fig{margin:0}
.frame{
  position:relative;
  aspect-ratio:4/5;
  background:linear-gradient(160deg,#FFFFFF,var(--ivoire-2));
  border:1px solid var(--ligne);
  display:grid;place-items:center;
  padding:18%;
}
.frame::before{
  content:"";position:absolute;inset:14px;
  border:1px solid rgba(198,161,91,.32);
  pointer-events:none;
}
.frame img{width:100%;opacity:.9}
.col-fig figcaption{
  margin-top:16px;text-align:center;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
}

/* --------------------------------------------------------------- Cards --- */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--ligne);
  border:1px solid var(--ligne);
}
@media (max-width:900px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .cards{grid-template-columns:1fr} }
.card{
  background:var(--ivoire-2);
  padding:clamp(30px,3.6vw,44px);
  position:relative;
  transition:background .45s var(--ease),transform .45s var(--ease);
}
.card::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--or);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.card:hover{background:#FFFFFF}
.card:hover::after{transform:scaleX(1)}
.card__num{
  font-family:var(--serif);
  font-size:12px;letter-spacing:.24em;
  color:var(--or-fonce);
  display:block;margin-bottom:18px;
}
.card h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(21px,2.2vw,26px);
  line-height:1.25;
  margin:0 0 12px;
  letter-spacing:.01em;
}
.card p{color:var(--gris);font-size:14.5px;margin:0;line-height:1.8}

.cards__note{
  text-align:center;
  margin:clamp(36px,4vw,48px) 0 0;
  color:var(--gris);
  font-size:14px;
}
.cards__note .link{margin-left:10px}

/* --------------------------------------------------------------- Steps --- */

.steps{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(28px,3.4vw,44px);
}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }
.step{
  position:relative;
  padding-top:30px;
  border-top:1px solid var(--ligne);
}
.step__n{
  font-family:var(--serif);
  font-size:13px;letter-spacing:.3em;
  color:var(--or);
  display:block;margin-bottom:14px;
}
.step h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(20px,2.1vw,25px);
  margin:0 0 10px;
}
.step p{color:var(--gris);font-size:14.5px;margin:0;line-height:1.8}

/* ---------------------------------------------------------------- Band --- */

.band{
  position:relative;
  background:var(--noir);
  color:var(--ivoire);
  padding:clamp(80px,10vw,140px) 0;
  text-align:center;
  overflow:hidden;
}
.band__deco{
  position:absolute;inset:0;
  background:
    radial-gradient(60% 60% at 50% 0%,rgba(198,161,91,.16),transparent 70%),
    radial-gradient(40% 50% at 85% 100%,rgba(198,161,91,.08),transparent 70%);
}
.band__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.band__mark{width:56px;margin-bottom:26px;opacity:.9}
.band__lead{
  max-width:62ch;
  color:rgba(246,242,233,.76);
  font-size:clamp(15px,1.3vw,17px);
  line-height:1.9;
  margin-bottom:34px;
}
.band__lead strong{color:var(--or-clair);font-weight:400}
.band__tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.band__tags span{
  border:1px solid var(--ligne-claire);
  padding:10px 20px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(246,242,233,.8);
}

/* ------------------------------------------------------------- Booking --- */

.booking{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(40px,6vw,84px);
  align-items:center;
}
.booking__txt p{color:var(--gris);max-width:48ch}
.booking__txt .btn{margin-top:6px}
.booking__note{font-size:13.5px;margin:24px 0 0}

.booking__qr{
  margin:0;
  background:#FFFFFF;
  border:1px solid var(--ligne);
  padding:clamp(24px,3vw,34px);
  text-align:center;
  position:relative;
}
.booking__qr::before{
  content:"";position:absolute;inset:12px;
  border:1px solid rgba(198,161,91,.3);
  pointer-events:none;
}
.booking__qr img{width:100%;max-width:230px;margin-inline:auto}
.booking__qr figcaption{
  margin-top:18px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
}

/* --------------------------------------------------------------- Infos --- */

.infos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(26px,3vw,40px);
  margin-bottom:clamp(44px,5vw,64px);
}
@media (max-width:900px){ .infos{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .infos{grid-template-columns:1fr} }
.info{border-top:1px solid var(--ligne);padding-top:24px}
.info h3{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--or-fonce);font-weight:400;margin:0 0 14px;
}
.info p{
  font-family:var(--serif);
  font-size:clamp(18px,1.9vw,22px);
  line-height:1.5;color:var(--encre);margin:0;
}

/* ==========================================================================
   ITINÉRAIRE
   --------------------------------------------------------------------------
   Remplace le plan intégré : celui-ci s'affichait en gris tant qu'il n'était
   pas chargé, imposait son bandeau de mentions par-dessus, et détonnait.
   Un visiteur veut de toute façon l'itinéraire dans SON application.
   ========================================================================== */
.itineraire{
  margin-top:clamp(38px,4.5vw,56px);
  padding:clamp(30px,4vw,46px) clamp(24px,3vw,40px);
  text-align:center;
  background:var(--ivoire);
  border:1px solid var(--ligne);
  border-radius:2px;
}
.itineraire__adresse{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(24px,3vw,34px);
  font-weight:400;
  line-height:1.25;
}
.itineraire__note{
  margin:14px auto 0;
  max-width:46ch;
  font-size:14.4px;
  color:var(--gris);
}
.itineraire__cta{margin-top:clamp(22px,2.6vw,30px)}

/* -------------------------------------------------------------- Footer --- */

.footer{background:var(--noir);color:rgba(246,242,233,.7);padding:clamp(60px,7vw,90px) 0 0}
.footer__in{
  display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);
  gap:clamp(30px,4vw,56px);
  padding-bottom:clamp(44px,5vw,64px);
}
.footer__brand img{width:170px;margin-bottom:20px}
.footer__brand p{
  font-family:var(--serif);
  font-size:17px;font-style:italic;
  color:rgba(246,242,233,.62);margin:0;
}
.footer__col h4{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--or);font-weight:400;margin:0 0 16px;
}
.footer__col p{font-size:14px;line-height:1.85;margin:0 0 10px}
.footer__col a{
  text-decoration:none;
  border-bottom:1px solid rgba(198,161,91,.4);
  padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.footer__col a:hover{color:var(--or-clair);border-color:var(--or-clair)}

.footer__bottom{
  display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;
  padding-block:22px;
  border-top:1px solid var(--ligne-claire);
}
.footer__bottom{justify-content:center}
.footer__bottom p{margin:0;font-size:11px;letter-spacing:.14em}
.footer__copy{color:rgba(246,242,233,.45)}

/* ----------------------------------------------------------------- FAB --- */

.fab{
  position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);
  z-index:90;
  display:none;
  background:var(--encre);color:var(--ivoire);
  text-decoration:none;
  padding:15px 40px;
  font-size:11px;letter-spacing:.20em;text-transform:uppercase;
  border:1px solid var(--or);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.6);
  transition:transform .45s var(--ease);
}
.fab.is-on{transform:translate(-50%,0)}

/* -------------------------------------------------------------- Reveal --- */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}
.reveal.is-in{opacity:1;transform:none}

/* ---------------------------------------------------------- Responsive --- */

@media (max-width:960px){
  .grid2{grid-template-columns:1fr}
  .col-fig{max-width:380px;margin-inline:auto;order:-1}
  .booking{grid-template-columns:1fr}
  .booking__qr{max-width:340px;margin-inline:auto}
  .footer__in{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  .burger{display:block}
  .topbar__item--hide{display:none}

  /* backdrop-filter cree un bloc conteneur qui enfermerait le panneau
     de navigation en position:fixed — on le neutralise sur mobile. */
  .header{
    background:var(--ivoire);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .nav{
    position:fixed;inset:0 0 0 auto;
    width:min(340px,84vw);
    background:var(--ivoire);
    border-left:1px solid var(--ligne);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:26px;
    padding:0 clamp(28px,7vw,44px);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .5s var(--ease),visibility .5s var(--ease);
    box-shadow:-30px 0 60px -30px rgba(0,0,0,.4);
  }
  .nav.is-open{transform:none;visibility:visible}
  .nav a{font-size:13px;letter-spacing:.22em}
  .nav__cta{width:100%;text-align:center}

  body.nav-open{overflow:hidden}
  body.nav-open::after{
    content:"";position:fixed;inset:0;z-index:99;
    background:rgba(14,14,14,.42);
    backdrop-filter:blur(2px);
  }
  .header{z-index:101}
  .nav{z-index:100}
}

@media (max-width:640px){
  .hero__cta{width:100%;flex-direction:column}
  .hero__cta .btn{width:100%}
  .hero__facts{gap:26px 0;justify-content:space-between}
  .hero__facts li{flex:1 1 40%}
  .footer__in{grid-template-columns:1fr;text-align:left}
  .footer__bottom{justify-content:center;text-align:center}
  .fab{display:block}
  .marquee span{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}

@media print{
  body{background:#fff;color:#000}
  /* À l'impression, on ne garde que le contenu : ni navigation, ni bandeau,
     ni bouton flottant, qui n'ont aucun sens sur papier. */
  .header,.topbar,.fab,.marquee,.hero__scroll{display:none}
}

/* ==========================================================================
   GALERIE DES RÉALISATIONS
   ========================================================================== */
.gal{
  list-style:none;
  margin:clamp(38px,5vw,58px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));
  gap:clamp(14px,1.8vw,22px);
}

.gal__item{min-width:0}

.gal__btn{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:var(--ivoire-2);
  cursor:zoom-in;
  font:inherit;
  color:inherit;
  text-align:left;
  border-radius:2px;
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.gal__btn:hover,
.gal__btn:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -22px rgba(14,14,14,.55);
}
.gal__btn:focus-visible{outline:2px solid var(--or);outline-offset:3px}

.gal__cadre{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--ivoire-2);
}
.gal__cadre img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s var(--ease);
}
.gal__btn:hover .gal__cadre img{transform:scale(1.045)}

.gal__legende{
  padding:14px 16px 16px;
  border-top:1px solid var(--ligne);
}
.gal__legende b{
  display:block;
  font-family:var(--serif);
  font-size:1.16rem;
  font-weight:500;
  letter-spacing:.01em;
}
.gal__legende span{
  display:block;
  margin-top:3px;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--or-fonce);
}

/* ------------------------------ visionneuse ------------------------------ */
.lb{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(6px,2vw,26px);
  padding:clamp(14px,4vw,44px);
  background:rgba(9,9,9,.94);
  animation:lbIn .28s var(--ease);
}
@keyframes lbIn{from{opacity:0}to{opacity:1}}

.lb__fig{
  margin:0;
  max-width:min(760px,100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.lb__fig img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 190px);
  margin:0 auto;
  object-fit:contain;
  border-radius:2px;
}

.lb__cap{text-align:center;color:var(--ivoire)}
.lb__cap b{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  font-weight:500;
  color:var(--or-clair);
}
.lb__cap span{
  display:block;
  margin-top:5px;
  font-size:.94rem;
  font-weight:300;
  color:var(--gris-clair);
}

.lb__fermer,
.lb__nav{
  flex:0 0 auto;
  border:1px solid var(--ligne-claire);
  background:transparent;
  color:var(--ivoire);
  cursor:pointer;
  border-radius:50%;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  line-height:1;
}
.lb__fermer:hover,.lb__nav:hover,
.lb__fermer:focus-visible,.lb__nav:focus-visible{
  background:rgba(198,161,91,.18);
  border-color:var(--or);
}
.lb__fermer:focus-visible,.lb__nav:focus-visible{outline:2px solid var(--or);outline-offset:2px}

.lb__nav{width:52px;height:52px;font-size:2rem;padding:0 0 5px}
.lb__fermer{
  position:absolute;
  top:clamp(12px,3vw,26px);
  right:clamp(12px,3vw,26px);
  width:44px;height:44px;
  font-size:1.7rem;
  padding:0 0 3px;
}

@media (max-width:640px){
  .lb{gap:4px;padding:12px}
  .lb__nav{width:42px;height:42px;font-size:1.6rem}
  .lb__fig img{max-height:calc(100vh - 210px)}
}

@media (prefers-reduced-motion:reduce){
  .gal__btn,.gal__cadre img{transition:none}
  .lb{animation:none}
}

/* ------------------------- photos du salon ------------------------- */
/* Le cadre a été dessiné pour un monogramme centré : fort rembourrage et
   image éclaircie. Avec une vraie photographie, elle doit remplir le cadre —
   on ne garde que le liseré doré, réduit à un passe-partout de 10 px. */
.frame--photo{padding:10px;aspect-ratio:3/4;background:var(--ivoire-2)}
.frame--photo::before{inset:10px;z-index:1}
.frame--photo img{
  opacity:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* La bande Kérastase reste centrée sur mobile ; à partir de 900 px la photo
   du mur de produits passe à gauche du texte, sans rompre la composition. */
.band__photo{
  margin:0 auto clamp(26px,3.4vw,36px);
  width:min(220px,62%);
  flex:0 0 auto;
}
.band__photo img{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:2px;
  border:1px solid var(--ligne-claire);
}
.band__txt{display:flex;flex-direction:column;align-items:center;min-width:0}

@media (min-width:900px){
  .band__in{flex-direction:row;align-items:center;gap:clamp(38px,5vw,72px);justify-content:center}
  .band__photo{margin:0;width:clamp(210px,22vw,278px)}
  .band__txt{align-items:flex-start;text-align:left;max-width:620px}
  .band__txt .band__lead{text-align:left;margin-left:0;margin-right:0}
  .band__tags{justify-content:flex-start}
}

.repere{
  margin:clamp(34px,4vw,48px) 0 0;
  text-align:center;
}
.repere img{
  display:block;
  width:100%;
  max-height:340px;
  object-fit:cover;
  object-position:center 38%;
  border-radius:2px;
}
.repere figcaption{
  margin-top:12px;
  font-size:.86rem;
  letter-spacing:.06em;
  color:var(--gris);
}

/* ==========================================================================
   ESPACE CLIENTE ET ESPACE SALON
   ========================================================================== */

/* Les pages secondaires n'ont pas de hero : l'en-tête y est opaque dès le
   chargement, sinon le titre passerait sous une barre translucide. */
.page-secondaire{background:var(--ivoire)}
.header.is-solid{background:var(--ivoire);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav a.is-active{color:var(--or-fonce)}

.chargement{padding:80px 0;text-align:center;color:var(--gris)}

.etat-vide{
  max-width:520px;margin:0 auto;padding:60px 0 40px;text-align:center;
}
.etat-vide p{color:var(--gris);margin:0 0 28px}

/* ----------------------------- messages ---------------------------------- */
.msg{
  margin:0;max-height:0;overflow:hidden;opacity:0;
  border-left:2px solid var(--or);
  background:var(--ivoire-2);
  font-size:14px;
  transition:max-height .35s var(--ease),opacity .3s var(--ease),padding .35s var(--ease);
  padding:0 18px;
}
.msg.is-on{max-height:220px;opacity:1;padding:14px 18px;margin-bottom:26px}
.msg--ok{border-color:#5C8A5E;background:rgba(92,138,94,.08)}
.msg--err{border-color:#A8443F;background:rgba(168,68,63,.07)}

/* ----------------------------- formulaires ------------------------------- */
.champ{margin-bottom:20px;min-width:0}
.champ label{
  display:block;margin-bottom:8px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
}
.champ .req{color:var(--or-fonce)}
.champ input,.champ select,.champ textarea{
  width:100%;
  padding:14px 16px;
  font-family:var(--sans);font-size:15px;font-weight:300;
  color:var(--encre);
  background:#FFF;
  border:1px solid var(--ligne);
  border-radius:2px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.champ textarea{resize:vertical;line-height:1.65;min-height:120px}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--or);
  box-shadow:0 0 0 3px rgba(198,161,91,.16);
}
.champ input:disabled{background:var(--ivoire-2);color:var(--gris)}
.champ small{display:block;margin-top:7px;font-size:12.4px;color:var(--gris)}

.rang2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:560px){ .rang2{grid-template-columns:1fr} }

.case{
  display:flex;gap:11px;align-items:flex-start;
  margin:0 0 24px;font-size:13.4px;line-height:1.6;color:var(--gris);cursor:pointer;
}
.case input{margin-top:3px;accent-color:var(--or-fonce);flex:none;width:16px;height:16px}

.btn--sm{min-height:40px;padding:0 18px;font-size:10px;letter-spacing:.16em}
.btn--danger{border-color:rgba(168,68,63,.4);color:#A8443F}
.btn--danger::after{background:#A8443F}
.btn--danger:hover{color:#FFF;border-color:#A8443F}
.btn[disabled]{opacity:.5;pointer-events:none}

.lien-danger{
  margin-top:22px;padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:12.4px;color:var(--gris);
  text-decoration:underline;text-underline-offset:4px;
}
.lien-danger:hover{color:#A8443F}

/* ------------------------------- onglets --------------------------------- */
.onglets{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:26px}
.onglet{
  padding:12px 20px;
  border:1px solid var(--ligne);background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris);border-radius:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.onglet:hover{color:var(--encre)}
.onglet.is-on{background:var(--encre);border-color:var(--encre);color:var(--ivoire)}
.onglets--admin{margin:34px 0 30px}

/* ============================ INSCRIPTION ================================= */
.auth{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,88px);align-items:start;
}
@media (max-width:900px){ .auth{grid-template-columns:1fr} }

.auth__pitch p{color:var(--gris)}
.auth__avantages{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:1px;background:var(--ligne)}
.auth__avantages li{
  background:var(--ivoire);padding:15px 2px;
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
}
.auth__avantages b{font-family:var(--serif);font-size:1.16rem;font-weight:500;flex:none}
.auth__avantages span{font-size:13.4px;color:var(--gris)}
.auth__note{margin-top:24px;font-size:13px;color:var(--or-fonce);letter-spacing:.04em}

.auth__carte{
  background:#FFF;border:1px solid var(--ligne);
  padding:clamp(26px,3.4vw,40px);border-radius:2px;
  box-shadow:0 30px 70px -50px rgba(14,14,14,.5);
}
.auth__carte .onglets{margin-bottom:28px}
.auth__carte .btn{width:100%}
.auth__bas{margin:16px 0 0;text-align:center;font-size:12.6px;color:var(--gris)}

/* ============================ ESPACE CLIENTE ============================== */
.espace__tete{
  display:flex;flex-wrap:wrap;gap:20px;
  align-items:flex-end;justify-content:space-between;
  margin-bottom:clamp(34px,4vw,52px);
}
.espace__tete .h2{margin:0}

.espace__grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,44px);align-items:start}
@media (max-width:900px){ .espace__grille{grid-template-columns:1fr} }

.bloc{
  background:#FFF;border:1px solid var(--ligne);border-radius:2px;
  padding:clamp(22px,2.6vw,32px);margin-bottom:26px;
}
.h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2vw,25px);line-height:1.2;margin:0 0 18px;
}
.bloc__lead{color:var(--gris);font-size:14.4px;margin:0 0 22px}

/* --------------------------- carte de fidélité --------------------------- */
.fid{margin-bottom:26px}
.fid__carte{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--noir) 0%,var(--encre) 55%,#25231E 100%);
  color:var(--ivoire);
  border-radius:6px;
  padding:clamp(24px,3vw,34px);
  aspect-ratio:1.586;                 /* proportions d'une carte bancaire */
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 30px 60px -34px rgba(14,14,14,.72);
}
.fid__carte::before{
  content:"";position:absolute;inset:10px;
  border:1px solid rgba(198,161,91,.34);border-radius:3px;pointer-events:none;
}
.fid__carte::after{
  content:"";position:absolute;right:-70px;top:-70px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,161,91,.22),transparent 68%);
  pointer-events:none;
}
.fid__haut{display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.fid__logo{height:26px;width:auto}
.fid__palier{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--or-clair);border:1px solid rgba(198,161,91,.45);
  padding:5px 11px;border-radius:99px;white-space:nowrap;
}
.fid__solde{margin:0;position:relative;font-family:var(--serif);font-size:clamp(15px,1.6vw,17px);color:var(--gris-clair)}
.fid__solde b{display:block;font-size:clamp(38px,5.4vw,60px);color:var(--ivoire);line-height:1}
.fid__equiv{margin:6px 0 0;position:relative;font-size:12.6px;color:var(--or-clair)}
.fid__bas{
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:flex-end;
  position:relative;font-size:11px;letter-spacing:.20em;text-transform:uppercase;
}
.fid__num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:var(--gris-clair)}
.fid__nom{color:var(--ivoire)}

.fid__prog{
  background:#FFF;border:1px solid var(--ligne);border-top:0;
  border-radius:0 0 2px 2px;padding:22px clamp(20px,2.4vw,28px);
}
.fid__prog p{margin:0 0 12px;font-size:14.2px}
.jauge{height:4px;background:var(--ivoire-2);border-radius:99px;overflow:hidden}
.jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--or-fonce),var(--or-clair));transition:width .8s var(--ease)}
.fid__avantage{margin:14px 0 0 !important;font-size:12.8px;color:var(--or-fonce);letter-spacing:.04em}

/* ----------------------------- mouvements -------------------------------- */
.mouvements{list-style:none;margin:0;padding:0}
.mouvements li{
  display:grid;grid-template-columns:auto 1fr auto;gap:6px 14px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--ligne);font-size:13.8px;
}
.mouvements li:last-child{border-bottom:0}
.mouvements__d{font-size:11.6px;color:var(--gris);white-space:nowrap}
.mouvements__l{min-width:0}
.mouvements b{font-family:var(--serif);font-size:1.1rem;white-space:nowrap}
.mouvements .plus{color:#5C8A5E}
.mouvements .moins{color:#A8443F}

/* ------------------------------- paliers --------------------------------- */
.paliers{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--ligne)}
.paliers li{background:#FFF;padding:14px 2px;display:grid;gap:2px}
.paliers li.is-atteint b,.paliers li.is-actuel b{color:var(--encre)}
.paliers li:not(.is-atteint):not(.is-actuel){opacity:.55}
.paliers li.is-actuel{background:rgba(198,161,91,.09);padding-inline:12px}
.paliers b{font-family:var(--serif);font-size:1.16rem;font-weight:500}
.paliers__seuil{font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--or-fonce)}
.paliers__av{font-size:13.2px;color:var(--gris)}

/* -------------------------------- avis ----------------------------------- */
.etoiles{display:inline-flex;gap:2px;color:var(--or);font-size:15px;line-height:1}
.etoiles i{font-style:normal}
.etoiles i.off{color:var(--ligne)}
.etoiles--lg{font-size:22px}

.note-choix{display:flex;gap:6px}
.note-choix button{
  width:44px;height:44px;font-size:22px;line-height:1;
  border:1px solid var(--ligne);background:#FFF;color:var(--ligne);
  cursor:pointer;border-radius:2px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.note-choix button:hover{border-color:var(--or)}
.note-choix button.is-on{color:var(--or);border-color:var(--or)}

.liste-avis{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.avis{
  background:#FFF;border:1px solid var(--ligne);border-radius:2px;
  padding:clamp(18px,2.2vw,26px);
}
.avis p{margin:0 0 10px;font-size:14.6px;line-height:1.72}
.avis__tete{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:12px}
.avis__qui{font-family:var(--serif);font-size:1.18rem;font-weight:500}
.avis__date{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.avis__prest{font-size:11px !important;letter-spacing:.20em;text-transform:uppercase;color:var(--or-fonce)}
.avis__mail{font-size:12px !important;color:var(--gris)}
.avis__etat{font-size:12.4px !important;color:var(--gris)}
.avis__etat.is-ok{color:#5C8A5E}
.avis__rep{
  margin:14px 0 0;padding:14px 18px;
  background:var(--ivoire-2);border-left:2px solid var(--or);
  font-size:14px;line-height:1.7;
}
.avis__rep b{display:block;margin-bottom:5px;font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--or-fonce)}
.avis__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.avis--attente{border-left:2px solid var(--or)}
.avis--mien{border-left:2px solid var(--or)}

.badge{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:4px 10px;border:1px solid var(--ligne);border-radius:99px;color:var(--gris);
}
.badge--ok{border-color:rgba(92,138,94,.4);color:#5C8A5E}

/* ============================= ESPACE SALON =============================== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne);border:1px solid var(--ligne)}
@media (max-width:700px){ .kpis{grid-template-columns:repeat(2,1fr)} }
.kpi{background:#FFF;padding:22px 20px;display:grid;gap:5px}
.kpi b{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:400;line-height:1}
.kpi span{font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--gris)}
.kpi--alerte b{color:var(--or-fonce)}

.tableau-enrobe{overflow-x:auto;border:1px solid var(--ligne);background:#FFF}
.tableau{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.tableau th,.tableau td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--ligne);vertical-align:top}
.tableau th{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris);font-weight:400;background:var(--ivoire-2);white-space:nowrap;
}
.tableau tr:last-child td{border-bottom:0}
.tableau .num{text-align:right}
.tableau .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.6px;white-space:nowrap}
.muted{color:var(--gris);font-size:12.6px}

/* ================================ POPUP =================================== */
.popup{
  position:fixed;inset:0;z-index:130;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(9,9,9,.72);
  animation:popIn .3s var(--ease);
}
@keyframes popIn{from{opacity:0}to{opacity:1}}
.popup__in{
  position:relative;
  max-width:440px;width:100%;
  background:var(--ivoire);
  border:1px solid var(--ligne);border-radius:3px;
  padding:clamp(30px,4vw,44px);
  text-align:center;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  animation:popUp .45s var(--ease);
}
@keyframes popUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.popup__in p{color:var(--gris);margin:0 0 26px}
.popup__in .btn{width:100%}
.popup__mark{width:52px;height:auto;margin:0 auto 18px;display:block}
.popup__x{
  position:absolute;top:12px;right:12px;
  width:38px;height:38px;font-size:24px;line-height:1;
  border:0;background:none;color:var(--gris);cursor:pointer;border-radius:50%;
}
.popup__x:hover{color:var(--encre);background:var(--ivoire-2)}

@media (prefers-reduced-motion:reduce){
  .popup,.popup__in{animation:none}
  .jauge i{transition:none}
}

/* ==========================================================================
   AVIS SUR L'ACCUEIL
   ========================================================================== */
.liste-avis--accueil{
  grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
  margin-top:clamp(34px,4vw,52px);
}
.liste-avis--accueil .avis{background:var(--ivoire);border-left:2px solid var(--or)}
.avis__cta{margin:clamp(30px,4vw,44px) 0 0;text-align:center}

/* ==========================================================================
   GRANDS ÉCRANS
   --------------------------------------------------------------------------
   La largeur était figée à 1180 px : au-delà de 1600 px, la page se réduisait
   à une colonne étroite au milieu du vide. Elle respire maintenant avec
   l'écran, sans jamais laisser les paragraphes s'allonger au point de devenir
   pénibles à lire — les blocs de texte gardent leur propre plafond.
   ========================================================================== */
@media (min-width:1600px){
  :root{
    --wrap:1340px;
    --pad:56px;
    --sec:clamp(96px,7.5vw,168px);
  }
  body{font-size:17px}
  .gal{grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr))}
}

@media (min-width:2000px){
  :root{
    --wrap:1520px;
    --pad:64px;
  }
  body{font-size:18px}
  .h2{font-size:clamp(46px,3.4vw,62px)}
  .gal{grid-template-columns:repeat(auto-fill,minmax(min(292px,100%),1fr))}
  /* Le confort de lecture prime sur le remplissage : une ligne trop longue
     fatigue, quelle que soit la taille de l'écran. */
  .secHead{max-width:760px}
  .col-txt p,.band__lead{max-width:66ch}
}

/* ==========================================================================
   CHIFFRES
   --------------------------------------------------------------------------
   Cormorant Garamond utilise par défaut des chiffres elzéviriens, dont les
   hampes descendent sous la ligne : isolé, un « 1 » se lit « I » et un « 0 »
   se lit « O ». Partout où un nombre porte l'information, on impose les
   chiffres bas de casse alignés.
   ========================================================================== */
.kpi b,
.fid__solde b,
.mouvements b,
.paliers__seuil,
.tableau .num,
.tableau .mono,
.fid__num,
.auth__avantages b{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}

/* ==========================================================================
   ÉLÉMENTS PILOTÉS DEPUIS L'ADMINISTRATION
   ========================================================================== */

/* Prix et durée d'une prestation, renseignés depuis le back-office. */
.card__meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  margin:14px 0 0 !important;
  padding-top:12px;border-top:1px solid var(--ligne);
}
.card__meta span{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
}
.card__meta b{
  margin-left:auto;
  font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--or-fonce);
  font-variant-numeric:lining-nums;
}

/* Section libre créée depuis l'administration. */
.bloc-libre .h2{text-align:center;max-width:20ch;margin-inline:auto}
.bloc-libre__media{
  display:block;width:100%;max-width:900px;margin:clamp(28px,4vw,44px) auto 0;
  border-radius:2px;
}
.bloc-libre__txt{
  max-width:66ch;margin:clamp(24px,3vw,36px) auto 0;
}
.bloc-libre__txt p{margin:0 0 1em}
.bloc-libre__txt p:last-child{margin-bottom:0}

/* ==========================================================================
   ACCUEIL AU SALON — boissons et Wi-Fi
   --------------------------------------------------------------------------
   La seule section du site posée sur un fond chaud. Le reste de la page joue
   l'ivoire et le noir ; ici on réchauffe, parce que c'est le moment où l'on
   s'assoit et où l'on souffle.
   ========================================================================== */
.accueil-salon{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(198,161,91,.13), transparent 62%),
    linear-gradient(180deg, #F7F0E3, #F2E9D9);
  position:relative;
}
.accueil-salon .h2 em{
  font-style:italic;
  color:var(--or-fonce);
}

.boissons{
  list-style:none;
  margin:clamp(30px,4vw,44px) auto 0;
  padding:0;
  max-width:920px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 12px;
}
/* Pas de pictogramme : cinq fois la même tasse alourdirait plus que ça
   n'informe. Le nom de la boisson suffit. */
.boissons li{
  display:inline-flex;
  align-items:center;
  padding:11px 22px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(168,132,63,.26);
  border-radius:99px;
  font-family:var(--serif);
  font-size:clamp(1.06rem,1.5vw,1.24rem);
  letter-spacing:.01em;
  white-space:nowrap;
}

.boissons__wifi{
  margin:clamp(26px,3vw,34px) auto 0;
  max-width:46ch;
  text-align:center;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--or-fonce);
}

@media (max-width:520px){
  .boissons{gap:8px}
  .boissons li{padding:9px 15px;font-size:1rem}
}

/* ==========================================================================
   TYPES DE CHEVEUX
   --------------------------------------------------------------------------
   Savoir travailler le cheveu frisé et crépu est un engagement, pas un détail
   à glisser dans un paragraphe : cette affirmation est donc posée en toutes
   lettres, avant la liste des prestations.
   ========================================================================== */
.natures{
  text-align:center;
  margin:0 auto clamp(40px,5vw,60px);
  padding-bottom:clamp(34px,4vw,46px);
  border-bottom:1px solid var(--ligne);
  max-width:900px;
}
.natures__titre{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2rem);
  line-height:1.2;
}
.natures__liste{
  list-style:none;
  margin:clamp(18px,2.4vw,26px) 0 0;
  padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:0;
}
.natures__liste li{
  padding:0 clamp(12px,1.8vw,20px);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--or-fonce);
  border-right:1px solid var(--ligne);
  line-height:1.9;
}
.natures__liste li:last-child{border-right:0}
.natures__note{
  margin:clamp(16px,2vw,22px) auto 0;
  max-width:44ch;
  font-size:13.6px;
  color:var(--gris);
}
@media (max-width:520px){
  .natures__liste li{padding:0 10px;font-size:10.8px;letter-spacing:.16em}
}

/* ==========================================================================
   NOUS ÉCRIRE
   ========================================================================== */
.contact{
  max-width:720px;
  margin:clamp(34px,4vw,50px) auto 0;
  background:#FFF;
  border:1px solid var(--ligne);
  border-radius:2px;
  padding:clamp(24px,3vw,38px);
}
.contact__onglets{justify-content:center;margin-bottom:26px}
.contact .btn{width:100%;margin-top:6px}
.contact__note{
  margin:0 0 18px;
  font-size:12.8px;
  color:var(--gris);
}
.contact__merci{text-align:center;padding:26px 0 10px}
.contact__merci-titre{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.4vw,1.8rem);
  margin:0 0 10px;
}
.contact__merci p{margin:0;color:var(--gris);max-width:44ch;margin-inline:auto}

/* ==========================================================================
   TYPOGRAPHIE — PASSE DE FINITION
   --------------------------------------------------------------------------
   Trois défauts mesurés sur la page rendue, corrigés ici :
     · des titres qui laissaient un mot seul sur la dernière ligne ;
     · des paragraphes allant de 33 à 155 caractères par ligne, alors que
       l'œil lit confortablement entre 60 et 75 ;
     · des césures manquantes qui creusaient des trous dans le texte justifié
       à gauche sur mobile.
   ========================================================================== */

/* Un titre ne doit jamais finir sur un mot esseulé. `balance` répartit les
   lignes, `pretty` s'occupe des paragraphes là où le navigateur le sait. */
h1, h2, h3, h4,
.h2, .hero__title, .natures__titre, .adm-titre, .contact__merci-titre{
  text-wrap:balance;
}
p, li, dd, figcaption, small{
  text-wrap:pretty;
}

/* Longueur de ligne. Aucun bloc de texte courant ne dépasse 72 caractères :
   au-delà, l'œil perd le début de la ligne suivante. */
.secHead__lead,
.col-txt p,
.band__lead,
.booking__txt p,
.contact__note,
.natures__note,
.bloc-libre__txt p{
  /* 54ch donne ici environ 70 caractères par ligne — mesuré, pas estimé :
     la largeur moyenne d'un caractère de cette police est de 7,67 px pour
     un corps de 17,5 px. C'est la fourchette où l'œil retrouve sans effort
     le début de la ligne suivante. */
  max-width:54ch;
  margin-inline:auto;
}
.col-txt p{margin-inline:0}          /* colonne de gauche : pas de centrage */

/* La note sous les prestations s'étalait sur 155 caractères. */
.cards__note{
  max-width:62ch;
  margin-inline:auto;
  text-align:center;
}

/* Sur mobile, les mots longs (« personnalisée », « professionnels ») créaient
   des trous ; la césure les évite sans justifier le texte. */
@media (max-width:640px){
  .secHead__lead, .col-txt p, .band__lead, .card p, .step p, .avis p{
    hyphens:auto;
    -webkit-hyphens:auto;
  }
}

/* Les nombres alignés en colonne se lisent mieux avec des chiffres de
   largeur constante. */
.hero__facts strong, .natures__liste, .card__meta b{
  font-variant-numeric:lining-nums tabular-nums;
}

/* ==========================================================================
   ALIGNEMENT DES BLOCS EN GRILLE
   --------------------------------------------------------------------------
   Trois cartes côte à côte n'ont jamais le même nombre de lignes. Sans
   contrainte, leur trait de séparation et leur libellé de catégorie flottent
   à trois hauteurs différentes : la ligne entière paraît bâclée. On pousse
   donc le pied de carte en bas, quelle que soit la longueur du texte.
   ========================================================================== */
.card{
  display:flex;
  flex-direction:column;
}
/* Le pied de carte est lui aussi un <p> : il faut l'exclure, sinon il
   grandit avec le reste et ne descend jamais. */
.card p:not(.card__meta){flex:1}
.card__meta{margin-top:auto}         /* le pied reste collé en bas */

/* Même principe pour les étapes de la section Expertise. */
.step{display:flex;flex-direction:column}
.step p{flex:1;margin-bottom:0}

/* Et pour les avis de l'accueil, dont les textes sont de longueurs libres. */
.liste-avis--accueil .avis{display:flex;flex-direction:column}
.liste-avis--accueil .avis__rep{margin-top:auto}

/* --------------------------------------------------------------------------
   La colonne de texte de « Réservation » est plus courte que le QR code :
   centrées, elles laissaient un vide au-dessous. Alignées en haut, le bloc
   se referme.
   -------------------------------------------------------------------------- */
.booking{align-items:start}

/* ==========================================================================
   PAGE « AVIS CLIENTES »
   ========================================================================== */
.avis-filtres{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin:clamp(28px,3.4vw,40px) 0 clamp(30px,3.6vw,44px);
}
.avis-filtres__n{
  margin-left:6px;
  font-variant-numeric:lining-nums tabular-nums;
  opacity:.65;
}
.liste-avis--page{
  grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));
  align-items:start;
}
.liste-avis--page .avis{background:#FFF}
.avis__source{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris);border:1px solid var(--ligne);
  padding:3px 9px;border-radius:99px;
}
.avis__cta{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}

/* Coordonnées : rendues cliquables, sans surcharge visuelle. */
.info a[data-cms-site],
.footer__col a[data-cms-site]{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.info a[data-cms-site]:hover{border-bottom-color:var(--or)}
.footer__col a[data-cms-site]:hover{color:var(--or-clair)}