/* =========================================================
   CALM — Coiffeur & Barbier, Montpellier
   Palette dérivée des photos du salon : vert bouteille des murs,
   bois chaud, laiton du médaillon. Aucun noir pur.
   ========================================================= */

:root{
  /* fonds — deux tons proches qui alternent, jamais une seule dalle */
  --bg-0:#142A1D;          /* vert bouteille profond (mur du salon) */
  --bg-1:#1B3325;          /* un cran plus clair */
  --bg-2:#0F2016;          /* bande profonde */
  --card:#20372A;
  --line:rgba(194,181,131,.20);
  --line-soft:rgba(243,239,227,.12);

  /* encres — toutes ≥ 4.5:1 sur les fonds ci-dessus */
  --ink:#F3EFE3;           /* 13.2:1 */
  --ink-2:#D6D2C2;         /* 10.0:1 */
  --ink-3:#BDB9A6;         /*  7.7:1 */

  /* laiton du logo */
  --brand:#C2B583;         /*  7.4:1 */
  --brand-hi:#D9C88A;      /*  9.1:1 */
  --brand-ink:#0F2016;

  /* jetons des signature moments */
  --mmt-brand:#C2B583;
  --mmt-panel:#0B1810;     /* nettement plus sombre que --bg-0 */
  --mmt-panel-accent:#C2B583;

  /* jetons des démos du pack */
  --pack-brand:#C2B583;
  --pack-brand-ink:#0F2016;
  --pack-bg:#1B3325;
  --pack-text:#F3EFE3;

  /* échelle 8px */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --pad:clamp(20px,5vw,72px);
  --maxw:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg-0); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.68; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
/* pas d'overflow-x:hidden sur body : il force ScrollTrigger en pinType "fixed"
   et rend l'épinglage du hero moins stable. Le débordement est contenu à la source. */
html{overflow-x:clip}
/* height:auto neutralise l'attribut height (indice de présentation) : sans lui,
   un aspect-ratio CSS est ignoré parce que la hauteur reste définie. */
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-family:"Playfair Display",Georgia,serif; font-weight:700;
  letter-spacing:-.022em; line-height:1.02}
p{margin:0}
::selection{background:var(--brand); color:var(--brand-ink)}

:focus-visible{outline:2px solid var(--brand-hi); outline-offset:3px; border-radius:2px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0}

/* ---------- primitives typographiques ---------- */
.kicker{
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brand); margin:0;
}
.kicker--ink{color:var(--ink-3)}
.num{
  font-family:"Playfair Display",serif; font-size:13px; letter-spacing:.14em;
  color:var(--brand); font-weight:500;
}
.lede{font-size:clamp(17px,1.5vw,20px); line-height:1.72; color:var(--ink-2); max-width:56ch}
.rule{height:1px; background:var(--line); border:0; margin:0}
.rule--brand{height:2px; width:56px; background:var(--brand); border:0}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:clamp(72px,11vw,140px); position:relative}
.section--alt{background:var(--bg-1)}
.section--deep{background:var(--bg-2)}

.h2{font-size:clamp(34px,6.2vw,68px)}
.h3{font-size:clamp(24px,3.4vw,34px)}

/* ---------- boutons ---------- */
.btn{
  --bg:var(--brand); --fg:var(--brand-ink);
  display:inline-flex; align-items:center; gap:12px; justify-content:center;
  min-height:52px; padding:14px 26px; border-radius:2px; border:1px solid var(--bg);
  background:var(--bg); color:var(--fg); text-decoration:none; cursor:pointer;
  font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
  will-change:transform;
}
.btn:hover{--bg:var(--brand-hi)}
.btn--ghost{--bg:transparent; --fg:var(--ink); border-color:rgba(243,239,227,.34)}
.btn--ghost:hover{--bg:rgba(243,239,227,.08); --fg:var(--ink); border-color:var(--brand)}
.btn__arrow{transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

.link-u{
  text-decoration:none; border-bottom:1px solid var(--line);
  padding-bottom:2px; transition:border-color .25s var(--ease),color .25s var(--ease);
}
.link-u:hover{border-color:var(--brand); color:var(--brand-hi)}

/* ---------- en-tête ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; gap:var(--s3);
  padding:12px var(--pad);
  transition:background .35s var(--ease),backdrop-filter .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(15,32,22,.82); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-soft);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.brand__mark{
  width:46px; height:46px; border-radius:50%; flex:none;
  box-shadow:0 0 0 1px rgba(243,239,227,.30), 0 6px 20px rgba(0,0,0,.45);
  transition:box-shadow .3s var(--ease),transform .4s var(--ease);
}
.brand:hover .brand__mark{box-shadow:0 0 0 1px var(--brand-hi),0 6px 24px rgba(0,0,0,.5); transform:rotate(-3deg)}
.brand__txt{display:none; line-height:1.15}
.brand__name{font-family:"Playfair Display",serif; font-size:17px; letter-spacing:.04em}
.brand__sub{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3)}
.nav{display:none; gap:var(--s4); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500}
.nav a{text-decoration:none; color:var(--ink-2); position:relative; padding-block:6px}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--brand); transition:right .35s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.hdr .btn{min-height:44px; padding:11px 18px; font-size:12px}
.hdr__tel-long{display:none}

@media(min-width:640px){ .brand__txt{display:block} .hdr__tel-long{display:inline} }
@media(min-width:1000px){ .nav{display:flex} }

/* =========================================================
   HERO — particle-dissolve
   ========================================================= */
.hero{position:relative}
.hero .mmt-pd__src{object-position:center 50%}

.hero__behind-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 42%;
}
.hero__veil{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(15,32,22,.30) 0%,rgba(15,32,22,.62) 48%,rgba(15,32,22,.92) 100%)}
.hero__behind-copy{
  position:absolute; inset:auto 0 0; padding:0 var(--pad) clamp(64px,12vh,120px);
  display:grid; gap:var(--s2); justify-items:start;
  width:100%; max-width:var(--maxw); margin-inline:auto; left:0; right:0;
}
.hero__behind-copy .h3{max-width:18ch}

.hero__content{
  height:100%; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(40px,9vh,96px);
  width:100%; max-width:var(--maxw); margin-inline:auto;
  pointer-events:none;
}
.hero__content > *{pointer-events:auto}
.hero__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(15,32,22,.72) 0%,rgba(15,32,22,0) 34%),
    linear-gradient(0deg,rgba(15,32,22,.90) 0%,rgba(15,32,22,.55) 26%,rgba(15,32,22,0) 62%);
}
.hero__kicker{margin-bottom:var(--s3)}
.hero__title{
  font-size:clamp(46px,12.5vw,148px); line-height:.92; letter-spacing:-.035em;
  margin:0 0 var(--s3); max-width:14ch;
  text-shadow:0 4px 40px rgba(9,20,13,.55);
}
.hero__title .ch{display:inline-block; will-change:transform,opacity}
.hero__title .wd{display:inline-block; white-space:nowrap}
.hero__title em{font-style:italic; color:var(--brand-hi)}
.hero__promise{
  font-size:clamp(16px,2vw,20px); color:var(--ink-2); max-width:38ch;
  margin-bottom:var(--s4); text-shadow:0 2px 18px rgba(9,20,13,.6);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center}
.hero__cue{
  display:none; position:absolute; z-index:3; right:var(--pad); bottom:clamp(40px,9vh,96px);
  writing-mode:vertical-rl; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-3); align-items:center; gap:12px;
}
.hero__cue::after{content:""; width:1px; height:56px; background:linear-gradient(180deg,var(--brand),transparent)}
@media(min-width:900px){ .hero__cue{display:flex} }

/* =========================================================
   ESPRIT
   ========================================================= */
.esprit{display:grid; gap:var(--s5)}
.esprit__fig{position:relative; order:-1}
.esprit__img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 40%; border-radius:2px}
.esprit__stamp{
  position:absolute; right:-10px; bottom:-18px; width:92px; height:92px; border-radius:50%;
  box-shadow:0 0 0 1px rgba(243,239,227,.28),0 10px 30px rgba(0,0,0,.5);
}
.esprit__q{
  font-family:"Playfair Display",serif; font-style:italic; font-weight:400;
  font-size:clamp(22px,3.2vw,30px); line-height:1.35; color:var(--ink);
  border-left:2px solid var(--brand); padding-left:var(--s3); margin-block:var(--s4);
}
.esprit__q cite{display:block; font-style:normal; font-family:Inter,sans-serif;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-top:var(--s2)}
.esprit__team{font-size:15px; color:var(--ink-3); margin-top:var(--s3)}
@media(min-width:900px){
  .esprit{grid-template-columns:1.05fr .95fr; gap:clamp(48px,6vw,96px); align-items:center}
  .esprit__fig{order:0}
}

/* =========================================================
   PRESTATIONS — rythme alterné, tailles d'images variables
   ========================================================= */
.svc-head{display:grid; gap:var(--s3); margin-bottom:clamp(48px,7vw,88px)}
@media(min-width:900px){
  .svc-head{grid-template-columns:1fr 1fr; align-items:end; gap:var(--s6)}
}
.svc{
  display:grid; gap:var(--s3); align-items:center;
  padding-block:clamp(36px,5vw,58px); border-top:1px solid var(--line-soft);
}
.svc:first-of-type{border-top:0}
.svc__fig{position:relative; overflow:hidden; border-radius:2px; background:var(--bg-2)}
.svc__fig img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease)}
.svc:hover .svc__fig img{transform:scale(1.045)}
.svc__body{display:grid; gap:var(--s2); align-content:center}
.svc__meta{display:flex; align-items:center; gap:var(--s2)}
.svc__meta .rule{flex:1; max-width:64px}
.svc__name{font-size:clamp(28px,4.6vw,46px)}
.svc__desc{color:var(--ink-2); max-width:44ch}
.svc__price{
  display:inline-flex; align-items:baseline; gap:10px; margin-top:var(--s1);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.svc__price b{font-family:"Playfair Display",serif; font-size:19px; letter-spacing:0;
  text-transform:none; color:var(--brand-hi); font-weight:500}
.svc__proof{
  font-size:12.5px; color:var(--brand); letter-spacing:.04em; margin-top:var(--s1);
  display:flex; gap:8px; align-items:baseline;
}
.svc__proof::before{content:"★"; font-size:11px}

@media(min-width:820px){
  .svc{grid-template-columns:var(--colA) var(--colB); gap:clamp(32px,5vw,80px)}
  /* rythme : chaque ligne a sa propre géométrie */
  .svc--a{--colA:0.86fr; --colB:1.14fr}
  .svc--b{--colA:1.2fr;  --colB:0.8fr}
  .svc--c{--colA:0.62fr; --colB:1.38fr}
  .svc--d{--colA:1fr;    --colB:1fr}
  .svc--rev .svc__fig{order:2}
  .svc--a .svc__fig{aspect-ratio:3/4}
  .svc--b .svc__fig{aspect-ratio:16/11}
  .svc--c .svc__fig{aspect-ratio:1/1}
  .svc--d .svc__fig{aspect-ratio:4/5}
}
.svc__fig{aspect-ratio:4/3}
@media(max-width:819px){ .svc--c .svc__fig{aspect-ratio:1/1} }

/* =========================================================
   PLEIN CADRE — cinematic camera
   ========================================================= */
.fullbleed{position:relative; margin:0}
.mmt-cam{margin:0; position:relative}
/* un plan large ne tient pas dans un cadre vertical : on lui garde son format */
.cam--wide{aspect-ratio:4/3}
.cam--tall{height:clamp(430px,78svh,780px)}
@media(min-width:760px){
  .cam--wide{aspect-ratio:auto; height:clamp(460px,74svh,760px)}
  .cam--tall{height:clamp(460px,86svh,820px)}
}
/* le travelling élargit l'image à 130 % : le max-width global la rognerait */
.mmt-cam__img,.mmt-cam__blur{max-width:none}
/* le module pose .mmt-cam__cap en position:relative — on reprend la main */
.mmt-cam .mmt-cam__cap{
  position:absolute; inset:auto 0 0; z-index:2;
  padding:var(--s6) var(--pad) clamp(28px,6vw,64px);
  background:linear-gradient(0deg,rgba(11,24,16,.94),rgba(11,24,16,.62) 46%,transparent);
}
.mmt-cam__cap .inner{max-width:var(--maxw); margin-inline:auto; display:grid; gap:10px}
.mmt-cam__cap h2{font-size:clamp(23px,4.6vw,54px); max-width:16ch; text-shadow:0 2px 24px rgba(9,20,13,.7)}
.mmt-cam__cap p{color:var(--ink-2); max-width:46ch; font-size:14.5px; line-height:1.6}
@media(min-width:760px){ .mmt-cam__cap p{font-size:16px} }

/* =========================================================
   GALERIE — cursor-reactive tiles
   ========================================================= */
.gal{display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:var(--s5);
  --mmt-tile-pad:14px}
@media(min-width:860px){ .gal{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; --mmt-tile-pad:22px} }
.mmt-tile{margin:0; aspect-ratio:4/5; border-radius:2px; overflow:hidden; background:var(--bg-2)}
.mmt-tile img{width:100%; height:100%; object-fit:cover}
.mmt-tile__cap{padding:var(--s2)}
.mmt-tile__cap h3{font-family:Inter,sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.mmt-tile__cap p{font-size:13px; color:var(--ink-2); margin-top:4px; line-height:1.5}
@media(min-width:860px){ .mmt-tile__cap p{font-size:13.5px} }

/* =========================================================
   AVIS
   ========================================================= */
.rate{display:grid; gap:var(--s4); align-items:end; margin-bottom:clamp(48px,7vw,80px)}
@media(min-width:820px){ .rate{grid-template-columns:auto 1fr; gap:clamp(40px,6vw,80px)} }
.rate__big{display:flex; align-items:flex-start; gap:var(--s2)}
.rate__score{
  font-family:"Playfair Display",serif; font-size:clamp(72px,15vw,150px); line-height:.8;
  letter-spacing:-.05em; color:var(--brand-hi); font-weight:500; font-variant-numeric:tabular-nums;
}
.rate__over{font-size:14px; color:var(--ink-3); letter-spacing:.1em; padding-top:12px}
.rate__stars{display:flex; gap:5px; color:var(--brand); font-size:19px; letter-spacing:.1em; margin-bottom:12px}
.rate__count{font-size:clamp(18px,2.4vw,24px); color:var(--ink)}
.rate__count b{font-family:"Playfair Display",serif; font-weight:600; color:var(--brand-hi);
  font-variant-numeric:tabular-nums; font-size:1.24em}
.rate__src{font-size:12.5px; color:var(--ink-3); letter-spacing:.08em; margin-top:8px}

.avis{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr))}
.avis__card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:2px;
  padding:var(--s4) var(--s3); display:grid; gap:var(--s2); align-content:start;
  transition:border-color .3s var(--ease),transform .5s var(--ease);
}
.avis__card:hover{border-color:var(--line); transform:translateY(-3px)}
.avis__stars{color:var(--brand); font-size:13px; letter-spacing:.22em}
.avis__txt{font-size:15.5px; line-height:1.66; color:var(--ink-2)}
.avis__who{
  display:flex; align-items:center; gap:10px; margin-top:auto;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.avis__who b{font-family:"Playfair Display",serif; font-size:16px; letter-spacing:.02em;
  text-transform:none; color:var(--ink); font-weight:600}

/* =========================================================
   RÉSERVATION (démo, volontairement discrète)
   ========================================================= */
.resa{display:grid; gap:var(--s4)}
@media(min-width:960px){ .resa{grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,80px); align-items:start} }
.resa__note{font-size:14px; color:var(--ink-3); line-height:1.6; max-width:42ch}
/* Sous 420 px le module tombe sur repeat(auto-fill, minmax(0,1fr)) : avec une piste
   de minimum 0, Chrome en déduit des dizaines de colonnes larges de 0 px et les
   créneaux se superposent. On fixe un nombre de colonnes, sans toucher au module. */
@media(max-width:419px){
  #reservation .pack-booking-slots{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{display:grid; gap:var(--s5)}
@media(min-width:960px){ .contact{grid-template-columns:.9fr 1.1fr; gap:clamp(40px,6vw,88px)} }
.hours{width:100%; border-collapse:collapse; margin-top:var(--s3); font-size:15.5px}
.hours th,.hours td{text-align:left; padding:11px 0; border-bottom:1px solid var(--line-soft); font-weight:400}
.hours th{color:var(--ink-3); font-weight:500; text-transform:capitalize}
.hours td{text-align:right; color:var(--ink); font-variant-numeric:tabular-nums}
.hours tr.is-closed td{color:var(--ink-3)}
.hours tr.is-today th{color:var(--brand-hi)}
.hours tr.is-today td{color:var(--brand-hi)}
.contact__block{margin-bottom:var(--s4)}
.contact__label{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--brand); margin-bottom:10px}
.contact__tel{
  font-family:"Playfair Display",serif; font-size:clamp(28px,4.4vw,42px);
  text-decoration:none; letter-spacing:-.01em; display:inline-block;
  transition:color .25s var(--ease)
}
.contact__tel:hover{color:var(--brand-hi)}
.map{
  position:relative; width:100%; aspect-ratio:4/3; border:1px solid var(--line-soft);
  border-radius:2px; overflow:hidden; background:var(--bg-2);
}
.map iframe{width:100%; height:100%; border:0; display:block; filter:grayscale(.36) contrast(1.06)}
@media(min-width:960px){ .map{aspect-ratio:1/1} }

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.ftr{background:var(--bg-2); padding-block:var(--s6) var(--s5); border-top:1px solid var(--line-soft)}
.ftr__grid{display:grid; gap:var(--s4)}
@media(min-width:760px){ .ftr__grid{grid-template-columns:1.2fr 1fr 1fr; gap:var(--s5)} }
.ftr__mark{width:64px; height:64px; border-radius:50%;
  box-shadow:0 0 0 1px rgba(243,239,227,.24),0 8px 24px rgba(0,0,0,.45); margin-bottom:var(--s3)}
.ftr__t{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--brand); margin-bottom:var(--s2)}
.ftr a{text-decoration:none; color:var(--ink-2); display:block; padding-block:5px; font-size:15px}
.ftr a:hover{color:var(--brand-hi)}
.ftr__legal{
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3);
  justify-content:space-between; line-height:1.6;
}

/* ---------- révélations au scroll (état de repos posé par JS seulement) ---------- */
.js-anim [data-rv]{will-change:transform,opacity}

/* =========================================================
   ÉTAT STATIQUE
   En prefers-reduced-motion les modules ne montent pas — et n'injectent
   donc pas leur CSS structurelle. On la pose nous-mêmes : l'état sans
   animation doit être une mise en page correcte, pas un repli dégradé.
   (Sélecteurs plus spécifiques que ceux des modules, valeurs identiques :
   quand un module monte, rien ne change.)
   ========================================================= */
.hero .mmt-pd__behind{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero .mmt-pd__stage{position:relative; z-index:1; height:100svh; min-height:520px; overflow:hidden}
.hero .mmt-pd__media{position:absolute; inset:0; z-index:1}
.hero .mmt-pd__src{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero .mmt-pd__content{position:relative; z-index:2; height:100%}

.fullbleed .mmt-cam{overflow:hidden; isolation:isolate}
.fullbleed .mmt-cam__img{position:absolute; top:0; left:0; width:100%; height:100%;
  max-width:none; object-fit:cover; display:block}

.gal .mmt-tile{position:relative}
.gal .mmt-tile > img,.gal .mmt-tile__inner > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.gal .mmt-tile__cap{position:absolute; inset:auto 0 0; z-index:2;
  background:linear-gradient(0deg,rgba(11,24,16,.90),rgba(11,24,16,.42) 62%,transparent)}

/* ---------- mouvement réduit : tout reste lisible et statique ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .svc__fig img{transition:none}
}