/* Polices auto-hébergées — aucun appel à un domaine tiers. Sous-ensembles latin + latin-ext.
   Bodoni Moda est variable (graisse 400–700, corps optique automatique). */
@font-face{
  font-family:'Bodoni Moda';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/bodoni-moda-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Bodoni Moda';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/bodoni-moda-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Bodoni Moda';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/bodoni-moda-roman-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Bodoni Moda';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/bodoni-moda-roman-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:200;
  font-display:swap;
  src:url('fonts/jost-200-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:200;
  font-display:swap;
  src:url('fonts/jost-200-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('fonts/jost-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('fonts/jost-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/jost-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/jost-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/jost-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/jost-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   BE HAIR BE — la maison
   Le héros est le salon lui-même, en vidéo plein cadre ; tout ce
   qui suit est en plein jour.
   Ivoire + encre pétrole (échantillonnée sur les portraits) + or du logo.
   Titres, prix, chiffres : Bodoni Moda · Texte, libellés : Jost
   ============================================================ */

:root{
  --ivory:      #F6F2EA;
  --paper:      #FFFDF8;
  --stone:      #ECE5D7;
  --line:       #D8CDB8;
  --ink:        #0F2A33;
  --ink-deep:   #0A1F26;
  --ink-soft:   #35505A;
  --ink-mute:   #54686E;
  --gold:       #EDC967;
  --gold-line:  #C9A34E;
  --gold-deep:  #7A5C16;
  --on-ink:     #F6F2EA;
  --on-ink-soft:#B7C6C8;
  --ink-line:   #244650;

  --display: "Bodoni Moda", "Bodoni 72", "Didot", "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --gut: clamp(1.25rem, 4.5vw, 4rem);
  --max: 1240px;
  --sec: clamp(5rem, 12vh, 9.5rem);

  /* Courbes : sortie exponentielle, rien ne rebondit dans un salon calme. */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --t-press: 140ms;
  --t-hover: 220ms;
  --t-enter: 700ms;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
  scrollbar-color:var(--gold-line) var(--ivory);
}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  caret-color:var(--gold-deep);
}
::selection{ background:var(--gold); color:var(--ink-deep); }
img,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

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

.skip{
  position:fixed; left:var(--gut); top:.75rem; z-index:100;
  background:var(--ink); color:var(--on-ink); padding:.75rem 1.1rem;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  transform:translateY(-200%);
}
.skip:focus{ transform:none; }
.sentinel{ position:absolute; top:0; left:0; width:1px; height:60px; pointer-events:none; }

/* ---------- typographie ---------- */
h1,h2,h3{
  font-family:var(--display); font-weight:400; color:var(--ink); margin:0;
  line-height:1.04; letter-spacing:-.015em; text-wrap:balance;
  font-optical-sizing:auto;
}
/* Bodoni en grand corps a des déliés très fins : pour les titres de section on
   force un corps optique bas (déliés plus épais) et une graisse au-dessus. */
h2{ font-variation-settings:"opsz" 22; font-weight:500; letter-spacing:-.005em; }
h2{ font-size:clamp(2.1rem,1.35rem + 3vw,3.75rem); line-height:1.08; }
h2 em, h1 em{ font-style:italic; color:var(--gold-deep); }
h3{ font-size:1.45rem; line-height:1.2; letter-spacing:-.005em; }
p{ margin:0 0 1.1em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
.lede{ font-size:clamp(1.1rem,1rem + .5vw,1.35rem); line-height:1.6; color:var(--ink-soft); max-width:46ch; }

/* petit libellé en capitales espacées */
.label{
  font-family:var(--sans); font-weight:500; font-size:.75rem;
  letter-spacing:.2em; text-transform:uppercase;
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  min-height:3.25rem; padding:.9rem 2rem;
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  border:1px solid var(--ink); background:var(--ink); color:var(--on-ink);
  cursor:pointer; user-select:none; touch-action:manipulation;
  transition:background var(--t-hover) var(--ease-out),
             color var(--t-hover) var(--ease-out),
             border-color var(--t-hover) var(--ease-out),
             transform var(--t-press) var(--ease-out);
}
.btn:active{ transform:scale(0.97); }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:var(--ink-deep); }
.btn--line{ background:transparent; color:var(--ink); }
.btn svg{ width:1.1rem; height:1.1rem; flex:none; transition:transform var(--t-hover) var(--ease-out); }

@media (hover: hover) and (pointer: fine){
  .btn:hover{ background:transparent; color:var(--ink); }
  .btn--gold:hover{ background:var(--ivory); border-color:var(--ivory); color:var(--ink-deep); }
  .btn--line:hover{ background:var(--ink); color:var(--on-ink); }
  .btn:hover svg{ transform:translateX(.3rem); }
}

:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }
.on-ink :focus-visible, .hero :focus-visible, .nav:not(.is-stuck) :focus-visible{ outline-color:var(--gold); }

/* lien texte souligné d'un filet or */
.link{
  display:inline-flex; align-items:center; gap:.6rem; color:var(--ink);
  font-weight:500; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  padding-block:.5rem; border-bottom:1px solid var(--gold-line);
  transition:border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.link svg{ width:1.1rem; height:1.1rem; transition:transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  .link:hover{ border-bottom-color:var(--ink); }
  .link:hover svg{ transform:translateX(.3rem); }
}

/* ---------- barre de navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; gap:2.25rem;
  height:4.75rem; box-sizing:content-box;
  padding:env(safe-area-inset-top) max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))) 0;
  color:var(--on-ink);
  border-bottom:1px solid transparent;
  transition:background 300ms var(--ease-out), border-color 300ms var(--ease-out), color 300ms var(--ease-out);
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--ivory) 90%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
  color:var(--ink);
}
.nav__logo{ display:flex; align-items:center; gap:.85rem; margin-right:auto; }
.nav__mark{ position:relative; width:44px; height:44px; flex:none; }
.nav__mark img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity 300ms var(--ease-out); }
.nav__mark .is-dark{ opacity:0; }
.nav.is-stuck .nav__mark .is-dark{ opacity:1; }
.nav.is-stuck .nav__mark .is-light{ opacity:0; }
.nav__word{
  font-family:var(--display); font-size:1.02rem; letter-spacing:.3em;
  text-transform:uppercase; white-space:nowrap;
}
.nav__links{ display:flex; gap:2.25rem; }
.nav__links a{
  font-size:.75rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  padding-block:.5rem; position:relative; white-space:nowrap;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){ .nav__links a:hover::after{ transform:scaleX(1); } }
.nav__links a:focus-visible::after{ transform:scaleX(1); }
.nav .btn{ min-height:2.75rem; padding:.6rem 1.5rem; }
.nav:not(.is-stuck) .btn{ background:var(--gold); border-color:var(--gold); color:var(--ink-deep); }
@media (hover: hover) and (pointer: fine){
  .nav:not(.is-stuck) .btn:hover{ background:var(--ivory); border-color:var(--ivory); }
}

/* bouton menu (mobile) */
.nav__burger{
  display:none; flex-direction:column; justify-content:center; gap:7px;
  width:44px; height:44px; padding:0 9px; margin-right:-9px;
  background:none; border:0; cursor:pointer; touch-action:manipulation;
  transition:transform var(--t-press) var(--ease-out);
}
.nav__burger:active{ transform:scale(0.92); }
.nav__burger span{ display:block; height:1.5px; background:currentColor; transition:transform 280ms var(--ease-out); }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(4.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-4.25px) rotate(-45deg); }
.nav.is-open{ color:var(--ink); background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.nav.is-open .nav__mark .is-dark{ opacity:1; }
.nav.is-open .nav__mark .is-light{ opacity:0; }

/* panneau de navigation plein écran */
.menu{
  position:fixed; inset:0; z-index:55; background:var(--ivory);
  display:flex; flex-direction:column; justify-content:center;
  padding:6.5rem var(--gut) calc(2.5rem + env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transition:opacity 180ms var(--ease-out), visibility 180ms var(--ease-out);
}
.menu.is-open{
  opacity:1; visibility:visible;
  transition:opacity 320ms var(--ease-out), visibility 320ms var(--ease-out);
}
.menu__links a{
  display:block; font-family:var(--display); font-size:clamp(2rem,9vw,2.75rem);
  line-height:1.1; color:var(--ink); letter-spacing:-.01em;
  padding-block:.9rem; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(.75rem);
  transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.menu.is-open .menu__links a{
  opacity:1; transform:none;
  transition:opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.menu.is-open .menu__links a:nth-child(2){ transition-delay:40ms }
.menu.is-open .menu__links a:nth-child(3){ transition-delay:80ms }
.menu.is-open .menu__links a:nth-child(4){ transition-delay:120ms }
.menu.is-open .menu__links a:nth-child(5){ transition-delay:160ms }
.menu__foot{ margin-top:2.25rem; display:grid; gap:1.25rem; font-size:.95rem; color:var(--ink-soft); }
.menu__foot a:not(.btn){ color:var(--ink); border-bottom:1px solid var(--gold-line); justify-self:start; }

@media (max-width:920px){
  .nav__links, .nav > .btn{ display:none; }
  .nav__burger{ display:flex; }
  .nav--page > .btn{ display:inline-flex; }   /* pages sans menu : le bouton reste */
}

/* ---------- HÉROS : la vidéo du salon, plein cadre ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:grid; align-items:end; overflow:clip;
  background:var(--ink-deep); color:var(--on-ink);
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform-origin:50% 40%;
}
/* Pas de voile sur toute l'image : on n'assombrit que là où le texte se pose. */
.hero__shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(10,31,38,.55) 0%, rgba(10,31,38,0) 22%),
    linear-gradient(to top, rgba(10,31,38,.92) 0%, rgba(10,31,38,.72) 26%, rgba(10,31,38,.28) 50%, rgba(10,31,38,0) 68%);
}
.hero__in{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:end; gap:2rem 3rem;
  padding-top:8rem; padding-bottom:calc(clamp(2.25rem,6vh,4.25rem) + env(safe-area-inset-bottom));
}
.hero h1{
  color:var(--on-ink);
  font-size:clamp(2.9rem,1.1rem + 7vw,6rem);
  line-height:.98; letter-spacing:-.02em;
  max-width:11ch; margin:0 0 1.4rem;
}
.hero h1 em{ color:var(--gold); }
.hero__sub{
  font-size:clamp(1.1rem,1rem + .6vw,1.45rem); line-height:1.5;
  color:var(--on-ink); max-width:30ch; margin:0 0 2.2rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; align-items:stretch; gap:1.25rem 1.75rem; }

/* le tarif du jour, à côté du bouton */
.today{
  display:grid; align-content:center; gap:.1rem;
  padding-left:1.75rem; border-left:1px solid var(--gold-line);
  color:var(--on-ink);
}
.today__day{ font-size:.75rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.today__price{ font-family:var(--display); font-size:1.3rem; line-height:1.3; font-variant-numeric:lining-nums; }
@media (hover: hover) and (pointer: fine){ .today:hover .today__price{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.3em; } }

.hero__side{ display:flex; align-items:center; gap:1.25rem; padding-bottom:.35rem; }
.status{ display:flex; align-items:center; gap:.7rem; font-size:.75rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; }
.status::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--on-ink-soft); }
.status.is-open::before{ background:var(--gold); }
.status:empty{ display:none; }
.hero__pause{
  width:44px; height:44px; display:grid; place-items:center; flex:none;
  background:transparent; border:1px solid rgba(246,242,234,.45); border-radius:50%;
  color:var(--on-ink); cursor:pointer; touch-action:manipulation;
  transition:border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.hero__pause:active{ transform:scale(0.92); }
.hero__pause svg{ width:14px; height:14px; }
.hero__pause .i-play{ display:none; }
.hero__pause[aria-pressed="true"] .i-play{ display:block; }
.hero__pause[aria-pressed="true"] .i-pause{ display:none; }
@media (hover: hover) and (pointer: fine){ .hero__pause:hover{ border-color:var(--gold); } }

@media (max-width:760px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__side{ justify-content:flex-end; order:-1; padding-bottom:0; }
  .hero__cta .btn{ flex:1 1 100%; }
  .today{ padding-left:1.1rem; }
}

/* Ouverture : une seule séquence écrite, le titre se lève ligne après ligne. */
.js .rise{ opacity:0; transform:translateY(1.4rem); animation:rise 1100ms var(--ease-out) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
.js .d1{ animation-delay:120ms } .js .d2{ animation-delay:240ms } .js .d3{ animation-delay:360ms }
.js .d4{ animation-delay:520ms }

/* La vidéo recule doucement quand on quitte le héros. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero__video{ animation:hero-out linear both; animation-timeline:scroll(root); animation-range:0 100svh; }
    @keyframes hero-out{ to{ transform:scale(1.08); } }
  }
}

/* ---------- COMPRIS : la carte des boissons ---------- */
.incl{ padding-block:var(--sec) calc(var(--sec) * .8); }
.incl__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.incl__grid h2{ max-width:9ch; }
.incl__list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.incl__list li{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:0 1rem;
  padding-block:clamp(1rem,2.4vw,1.6rem); border-bottom:1px solid var(--line);
}
.incl__list b{ font-family:var(--display); font-weight:400; font-style:italic; font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem); line-height:1.1; color:var(--ink); letter-spacing:-.01em; }
.incl__list i{ border-bottom:1px dotted var(--gold-line); transform:translateY(-.45em); }
.incl__list span{ color:var(--gold-deep); }
.incl__note{ margin-top:1.5rem; max-width:44ch; }
@media (max-width:820px){ .incl__grid{ grid-template-columns:1fr; } .incl__grid h2{ max-width:none; } }

/* ---------- LE SALON ---------- */
.place{ padding-block:calc(var(--sec) * .8) var(--sec); }
/* Un paragraphe reste un paragraphe : police de texte, plus grande que le
   courant, pour ne pas se confondre avec le titre au-dessus. */
.place__ask{
  color:var(--ink-soft);
  font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem); line-height:1.5;
  max-width:36ch; margin:clamp(1.25rem,3vw,2rem) 0 0;
}
.place__ask em{ font-style:normal; font-weight:500; color:var(--ink); }
.place__grid{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2.5rem,7vw,6.5rem);
  align-items:end; margin-top:clamp(3rem,7vw,5.5rem);
}
.place__body{ max-width:54ch; }
/* la règle de la maison : un panneau droit, comme le reste de la page */
.quote{
  margin:0; background:var(--stone); color:var(--ink);
  padding:clamp(2rem,4.5vw,3.5rem);
}
.quote p{ font-family:var(--display); font-style:italic; font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem); line-height:1.2; letter-spacing:-.005em; margin:0 0 1rem; }
.quote .label{ color:var(--gold-deep); }
/* les chiffres, écrits dans une phrase plutôt qu'en tuiles */
.place__facts{
  margin:clamp(3.5rem,8vw,6rem) 0 0; padding-top:clamp(1.75rem,4vw,2.5rem); border-top:1px solid var(--ink);
  color:var(--ink-soft);
  font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem); line-height:1.5; max-width:40ch;
}
.place__facts b{ font-weight:500; color:var(--gold-deep); white-space:nowrap; }
@media (max-width:860px){ .place__grid{ grid-template-columns:1fr; }  }

/* ---------- L'EXPÉRIENCE : l'arc d'une visite ---------- */
.exp{ padding-block:var(--sec); background:var(--stone); }
.exp__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2rem,4vw,3.5rem);
  margin-top:clamp(2.75rem,6vw,4.5rem); padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--ink); position:relative;
}
.step{ position:relative; }
/* un point or sur le filet : le fil d'une même visite */
.step::before{
  content:""; position:absolute; left:0; top:calc(-1 * clamp(2rem,4vw,3rem) - 4.5px);
  width:9px; height:9px; border-radius:50%; background:var(--gold-deep);
}
.step h3{ font-style:italic; font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem); margin:0 0 1.1rem; }
.step__lead{ color:var(--ink); font-weight:500; margin:0 0 .6rem; }
.step p{ max-width:36ch; }
@media (max-width:860px){
  .exp__grid{ grid-template-columns:1fr; border-top:0; padding-top:0; gap:0; }
  .step{ padding:1.9rem 0 1.9rem 1.75rem; border-left:1px solid var(--ink); }
  .step::before{ left:-5px; top:2.55rem; }
}

/* ---------- LA CARTE ---------- */
.carte{ padding-block:var(--sec); }
.carte__head{ margin-bottom:clamp(2.25rem,5vw,3.5rem); }
.carte__note{ margin:1.25rem 0 0; max-width:52ch; }

.sheet{
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(1.25rem,5vw,4.5rem) clamp(1.1rem,6vw,5.5rem) clamp(2rem,6vw,4.75rem);
  position:relative;
}
.sheet > input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.sheet__bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; margin-bottom:clamp(1.75rem,4vw,2.75rem); }
.tabs{ display:inline-flex; border:1px solid var(--ink); }
.tabs label{
  min-height:2.9rem; display:inline-flex; align-items:center; padding:0 1.6rem;
  font-size:.78rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  cursor:pointer; user-select:none; touch-action:manipulation;
  transition:background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
#t-d:checked ~ .sheet__bar label[for="t-d"],
#t-h:checked ~ .sheet__bar label[for="t-h"]{ background:var(--ink); color:var(--on-ink); }
#t-d:focus-visible ~ .sheet__bar label[for="t-d"],
#t-h:focus-visible ~ .sheet__bar label[for="t-h"]{ outline:2px solid var(--gold-deep); outline-offset:3px; }
.sheet__day{ margin:0; font-size:.95rem; color:var(--ink-soft); }
.sheet__day b{ font-weight:500; color:var(--ink); }

.panel{ display:none; }
#t-d:checked ~ .panels .panel--d{ display:block; }
#t-h:checked ~ .panels .panel--h{ display:block; }

.sheet{ --pc:7rem; --pg:1.25rem; }
.cols{
  display:grid; grid-template-columns:1fr var(--pc) var(--pc); gap:0 var(--pg);
  align-items:end; padding-bottom:.9rem; border-bottom:1px solid var(--ink);
  position:sticky; top:4.75rem; z-index:2; background:var(--paper); padding-top:.9rem;
}
.cols__hint{ font-size:.85rem; color:var(--ink-mute); }
.col{
  appearance:none; background:none; border:0; padding:.35rem 0; margin:0; cursor:pointer;
  text-align:right; font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.35; color:var(--ink-mute);
  touch-action:manipulation; position:relative;
  transition:color var(--t-hover) var(--ease-out);
}
.col small{ display:block; font-size:.72rem; letter-spacing:.08em; font-weight:400; }
.col::after{
  content:""; position:absolute; left:0; right:0; bottom:calc(-.9rem - 1px); height:3px;
  background:var(--gold-deep); transform:scaleX(0); transform-origin:right;
  transition:transform 320ms var(--ease-out);
}
.col .sm{ display:none; }

.group{ margin-top:clamp(2.25rem,5vw,3.25rem); }
.group:first-of-type{ margin-top:1.75rem; }
.group__t{ font-size:clamp(1.35rem,1.15rem + .7vw,1.7rem); font-style:italic; margin:0 0 .6rem; }
.row{
  display:grid; grid-template-columns:auto 1fr var(--pc) var(--pc); gap:0 var(--pg);
  align-items:baseline; padding-block:.7rem; border-bottom:1px solid transparent;
}
.row__n{ color:var(--ink); }
.row__n small{ display:block; font-size:.85rem; color:var(--ink-mute); line-height:1.4; }
.row__lead{ border-bottom:1px dotted var(--gold-line); transform:translateY(-.35em); }
.row__p{
  font-family:var(--display); text-align:right; white-space:nowrap;
  font-size:1.15rem; line-height:1.3; font-variant-numeric:lining-nums tabular-nums;
  color:var(--ink-mute);
  transition:color 260ms var(--ease-out);
}
/* Les deux tarifs restent visibles ; celui du jour choisi passe devant. */
.sheet[data-tier="soft"] .row__p--soft,
.sheet[data-tier="full"] .row__p:not(.row__p--soft){ color:var(--ink); font-weight:600; }
.sheet[data-tier="soft"] .col--soft,
.sheet[data-tier="full"] .col--full{ color:var(--ink); }
.sheet[data-tier="soft"] .col--soft::after,
.sheet[data-tier="full"] .col--full::after{ transform:scaleX(1); }
@media (hover: hover) and (pointer: fine){
  .col:hover{ color:var(--ink); }
  .row:hover .row__lead{ border-bottom-color:var(--ink); }
}
.sheet__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem 2rem; margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:clamp(1.5rem,3vw,2rem); border-top:1px solid var(--ink); }
.sheet__foot p{ margin:0; max-width:40ch; font-size:.95rem; }

@media (max-width:680px){
  .sheet{ --pc:5.5rem; --pg:.35rem; }
  .row{ grid-template-columns:1fr var(--pc) var(--pc); }
  .row__lead{ display:none; }
  .row{ border-bottom-color:var(--line); }
  .row__p{ font-size:.98rem; }
  .row__n{ padding-right:.5rem; }
  .col .lg{ display:none; }
  .col .sm{ display:inline; }
  .cols__hint{ font-size:.78rem; }
  .cols{ top:4.75rem; }
  .tabs{ width:100%; }
  .tabs label{ flex:1; justify-content:center; }
  .sheet__foot .btn{ width:100%; }
}

/* ---------- L'ÉQUIPE ---------- */
.team{ padding-block:var(--sec); background:var(--stone); }
.team__head{ margin-bottom:clamp(3rem,7vw,5rem); }
.team__head .lede{ font-size:inherit; margin:1.25rem 0 0; max-width:52ch; }
.team__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2.75rem,5vw,4.5rem) clamp(1.5rem,3vw,3rem); margin:0; padding:0; list-style:none; }
.mem{ text-align:center; }
.mem__ph{ width:min(100%,264px); aspect-ratio:1; margin:0 auto 1.5rem; border-radius:50%; overflow:hidden; }
.mem__ph img{ width:100%; height:100%; transition:transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine){ .mem:hover .mem__ph img{ transform:scale(1.04); } }
.mem h3{ font-size:clamp(1.3rem,1.15rem + .5vw,1.6rem); margin:0 0 .5rem; }
.mem__roles{
  margin:0 auto; padding:0; list-style:none; max-width:17rem;
  display:flex; flex-wrap:wrap; justify-content:center; gap:0 .7em;
  font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); line-height:1.7;
}
.mem__roles li{ white-space:nowrap; }
.mem__roles li:not(:last-child)::after{ content:"·"; margin-left:.7em; color:var(--gold-line); }
.mem__roles .is-partner{ color:var(--gold-deep); }
.team__foot{ display:flex; justify-content:center; margin-top:clamp(3rem,6vw,4.5rem); }
@media (max-width:820px){
  .team__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mem__roles{ display:block; font-size:.7rem; }
  .mem__roles li::after{ display:none; }
}
@media (max-width:380px){ .team__grid{ grid-template-columns:1fr; } }

/* ---------- PARTENAIRES ---------- */
.part{ padding-block:clamp(3rem,7vh,4.75rem); border-bottom:1px solid var(--line); }
.part__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(2rem,6vw,5.5rem); }
.part__lbl{ margin:0; color:var(--ink-mute); }
.part img{
  width:auto; opacity:.62;
  filter:brightness(0) saturate(100%) invert(12%) sepia(22%) saturate(1500%) hue-rotate(150deg);   /* silhouette encre */
  transition:opacity var(--t-hover) var(--ease-out);
}
/* hauteurs calées sur le contenu utile de chaque PNG, pas sur son cadre */
.part img[data-l="keune"]  { height:46px; }
.part img[data-l="matrix"] { height:29px; }
.part img[data-l="belmont"]{ height:54px; }
@media (hover: hover) and (pointer: fine){ .part img:hover{ opacity:1; } }
@media (max-width:560px){
  .part__in{ gap:1.5rem 1.75rem; }
  .part__lbl{ flex-basis:100%; text-align:center; }
  .part img[data-l="keune"]  { height:38px; }
  .part img[data-l="matrix"] { height:23px; }
  .part img[data-l="belmont"]{ height:43px; }
}

/* ---------- AVIS ---------- */
.rev{ padding-block:var(--sec); }
.rev__head{ margin-bottom:clamp(2.5rem,6vw,4rem); }
.rev__score{ margin-top:1.25rem; }
.rev__stars{ color:var(--gold-deep); letter-spacing:.3em; font-size:1.1rem; margin:0 0 .3rem; }
.rev__meta{ font-size:.9rem; color:var(--ink-mute); margin:0; }
.rev__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(2rem,6vw,5rem); border-top:1px solid var(--ink); }
.rev__c{ padding-block:clamp(1.75rem,4vw,2.75rem); }
.rev__q{ font-family:var(--display); font-style:italic; font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem); color:var(--ink); line-height:1.45; margin:0 0 1.25rem; }
.rev__a{ font-size:.75rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:0; }
.rev__date{ font-size:.85rem; color:var(--ink-mute); margin:.2rem 0 0; }
.rev__nav{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; padding-top:1.75rem; border-top:1px solid var(--line); }
.rev__arrows{ display:flex; align-items:center; gap:.9rem; }
.rev__btn{
  width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--ink); border-radius:50%; color:var(--ink); cursor:pointer;
  touch-action:manipulation;
  transition:background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.rev__btn svg{ width:1.1rem; height:1.1rem; }
.rev__btn:active:not(:disabled){ transform:scale(0.94); }
@media (hover: hover) and (pointer: fine){ .rev__btn:hover:not(:disabled){ background:var(--ink); color:var(--on-ink); } }
.rev__btn:disabled{ opacity:.3; cursor:default; }
.rev__pos{ font-family:var(--display); font-size:1rem; color:var(--ink-mute); min-width:3.5rem; text-align:center; font-variant-numeric:tabular-nums lining-nums; }
@media (max-width:820px){ .rev__grid{ grid-template-columns:1fr; } .rev__c + .rev__c{ border-top:1px solid var(--line); } }

/* ---------- CONTACT : la page se referme sur l'encre ---------- */
.on-ink{ background:var(--ink); color:var(--on-ink-soft); }
.on-ink h2, .on-ink h3{ color:var(--on-ink); }
.on-ink ::selection{ background:var(--gold); color:var(--ink-deep); }
.contact{ padding-block:var(--sec); }
.contact__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(2.75rem,7vw,6.5rem); align-items:start; }
.contact h2{ margin-bottom:1.25rem; }
.contact .status{ margin:0 0 clamp(1.5rem,3vw,2.25rem); color:var(--on-ink); }
.hours{ margin:0; border-top:1px solid var(--ink-line); }
.hours div{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; padding-block:1rem; border-bottom:1px solid var(--ink-line); }
.hours dt{ color:var(--on-ink); }
.hours dd{ margin:0; font-family:var(--display); font-size:1.2rem; color:var(--on-ink); font-variant-numeric:lining-nums tabular-nums; }
.hours .is-closed dd{ color:var(--on-ink-soft); font-style:italic; }
.hours .is-today dt::after{ content:"aujourd'hui"; margin-left:.8rem; font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.coord{ margin:clamp(2rem,4vw,2.75rem) 0 0; display:grid; gap:1.25rem; font-style:normal; }
.coord a,.coord span{ display:block; color:var(--on-ink); font-size:1.05rem; }
.coord small{ display:block; font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--on-ink-soft); margin-bottom:.1rem; }
.coord a{ justify-self:start; }
@media (hover: hover) and (pointer: fine){ .coord a:hover{ color:var(--gold); } }
/* le panneau de réservation : même forme droite */
.book{
  background:var(--ivory); color:var(--ink-soft);
  padding:clamp(2rem,4.5vw,3.5rem);
}
.on-ink .book h3{ color:var(--ink); font-size:clamp(2rem,1.5rem + 2vw,3rem); font-style:italic; margin:0 0 1.1rem; }
.book p{ max-width:40ch; }
.book__soft{ color:var(--gold-deep); font-weight:500; }
.book .btn{ width:100%; margin-top:1.75rem; }
.book ::selection{ background:var(--gold); color:var(--ink-deep); }
.book :focus-visible{ outline-color:var(--gold-deep); }
@media (max-width:860px){ .contact__grid{ grid-template-columns:1fr; }  }

/* ---------- PIED DE PAGE ---------- */
.foot{ background:var(--ink-deep); color:var(--on-ink-soft); padding-block:clamp(2.75rem,6vh,4.25rem) 2rem; }
.foot__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem 3rem; align-items:center; }
.foot__brand{ display:flex; align-items:center; gap:.85rem; color:var(--on-ink); }
.foot__brand img{ width:46px; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:.75rem 2rem; }
.foot__nav a{ font-size:.75rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; padding-block:.5rem; }
.foot__soc{ display:flex; gap:.5rem; }
.foot__soc a{ width:44px; height:44px; display:grid; place-items:center; }
.foot__soc img{ width:20px; opacity:.6; filter:brightness(0) invert(1); transition:opacity var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  .foot__nav a:hover{ color:var(--gold); }
  .foot__soc a:hover img{ opacity:1; }
}
.foot__base{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--ink-line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem 2rem;
  font-size:.85rem;
}
.foot__base a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em; }

/* ---------- barre de réservation (mobile) ---------- */
.dock{
  position:fixed; inset:auto 0 0; z-index:50; display:none;
  align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--ivory) 94%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid var(--line);
  transform:translateY(110%); visibility:hidden;
  transition:transform 420ms var(--ease-out), visibility 420ms;
}
.dock.is-on{ transform:none; visibility:visible; }
.dock__txt{ display:grid; line-height:1.3; min-width:0; }
.dock__txt b{ font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); }
.dock__txt span{ font-family:var(--display); font-size:1.05rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:lining-nums; }
.dock .btn{ min-height:3rem; padding:.7rem 1.4rem; flex:none; }
@media (max-width:920px){
  .dock{ display:flex; }
  .foot{ padding-bottom:calc(6rem + env(safe-area-inset-bottom)); }
}

/* ---------- apparition au défilement ----------
   Sans JavaScript, tout est visible : les états cachés n'existent que sous .js */
.js .reveal{
  opacity:0; transform:translateY(1.5rem);
  transition:opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* Les panneaux se dévoilent de bas en haut, comme on lève un rideau. */
/* L'état d'attente est une opacité nulle et non un masque : un élément
   entièrement masqué par clip-path n'est jamais vu par l'observateur. */
.js .unveil{ opacity:0; }
.js .unveil.is-in{ opacity:1; animation:unveil 1100ms var(--ease-out) both; }
@keyframes unveil{
  from{ clip-path:inset(100% 0 0 0); }
  to{ clip-path:inset(0 0 0 0); }
}

/* Cascade : les éléments d'un groupe entrent l'un après l'autre. */
.js .stagger > *{
  opacity:0; transform:translateY(1rem);
  transition:opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
}
.js .stagger.is-in > *{ opacity:1; transform:none; }
.js .stagger.is-in > *:nth-child(2){ transition-delay:70ms }
.js .stagger.is-in > *:nth-child(3){ transition-delay:140ms }
.js .stagger.is-in > *:nth-child(4){ transition-delay:210ms }
.js .stagger.is-in > *:nth-child(5){ transition-delay:280ms }
.js .stagger.is-in > *:nth-child(6){ transition-delay:350ms }

/* Mouvement réduit : on garde des fondus courts, on retire les déplacements. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .rise, .js .reveal, .js .stagger > *, .menu__links a{
    opacity:1; transform:none; animation:none; transition:opacity 200ms ease;
  }
  .js .unveil, .js .unveil.is-in{ opacity:1; animation:none; clip-path:none; }
  .js .stagger.is-in > *{ transition-delay:0ms; }
  .mem:hover .mem__ph img, .btn:hover svg, .link:hover svg{ transform:none; }
  .dock{ transition:none; }
  .col::after{ transition:none; }
}

/* ============================================================
   PAGES LÉGALES — mise en page de lecture longue
   ============================================================ */
.legal{ padding-block:clamp(8rem,16vh,11rem) var(--sec); }
.legal__head{ margin-bottom:clamp(2.5rem,6vh,4rem); }
.legal__head h1{ font-size:clamp(2.4rem,1.6rem + 3.4vw,4.25rem); max-width:16ch; }
.legal__date{ font-size:.9rem; color:var(--ink-mute); margin-top:1.5rem; }
.legal__body{ max-width:66ch; }
.legal__body h2{
  font-size:clamp(1.5rem,1.25rem + 1vw,2.1rem);
  margin:clamp(2.75rem,6vh,4rem) 0 1rem;
  padding-top:clamp(2.75rem,6vh,4rem); border-top:1px solid var(--line);
}
.legal__body h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal__body h3{ font-size:1.25rem; font-style:italic; margin:2rem 0 .6rem; }
.legal__body ul{ margin:0 0 1.1em; padding-left:1.1rem; }
.legal__body li{ margin-bottom:.5rem; }
.legal__body li::marker{ color:var(--gold-line); }
.legal__body a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold-line); text-decoration-thickness:1px; text-underline-offset:.25em; }
.legal__body a:hover{ text-decoration-color:var(--ink); }
.legal__body strong{ color:var(--ink); font-weight:500; }
.legal__note{ background:var(--stone); padding:clamp(1.25rem,3vw,1.75rem); margin:1.75rem 0; }
.legal__ident{ display:grid; gap:.35rem; margin:0 0 1.5rem; }
.legal__ident span{ color:var(--ink); }
.legal__back{ margin-top:clamp(3rem,7vh,4.5rem); }