/* ============================================================
   LE MIRAGE — charte & styles
   Registre : imprimé / éditorial. Coins vifs, filets 1px,
   aucune ombre douce, une seule couleur de bouton plein.
   Palette fixe : nuit et or. Le fond est porté par le body, les
   sections restent transparentes (une seule variable à changer
   pour essayer un autre fond : --bg).
   ============================================================ */

/* ---------- Polices auto-hébergées (latin, WOFF2, voir /fonts) ---------- */
@font-face{font-family:'Poiret One';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/poiret-one-latin.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;
  src:url('/fonts/jost-latin.woff2') format('woff2')}

:root{
  /* --- Or extrait du logo --- */
  --gold-deep:#8A7454;
  --gold:#C6A97E;
  --gold-bright:#F1DFA4;
  --gold-hi:#FFEFB1;

  /* --- Encres --- */
  --ink:#0B0B12;
  --cream:#F4ECDD;
  --cream-soft:#E9E0CF;

  /* --- Néons (nuit) --- */
  --neon-mag:#FF3D9A;
  --neon-cyan:#37E2FF;

  /* --- Palette fixe : nuit et or --- */
  --bg:#0B0B12;                       /* le fond de la page */
  --ink-now:#F4ECDD;                  /* texte courant */
  --accent-now:#C6A97E;               /* labels / filets */
  --rule-now:rgba(244,236,221,.2);

  /* --- Typo --- */
  --font-display:'Poiret One','Jost',system-ui,sans-serif;
  --font-body:'Jost',system-ui,-apple-system,sans-serif;

  --fs-xs:.75rem;
  --fs-sm:.9rem;
  --fs-base:1.02rem;
  --fs-md:clamp(1.08rem,1.6vw,1.35rem);
  --fs-lg:clamp(1.4rem,2.4vw,1.9rem);
  --fs-title:clamp(2.6rem,8vw,7rem);      /* C1 : titres de section */
  --fs-hero:clamp(2rem,10.5vw,8.6rem);    /* C1 : hero */
  --fs-date:clamp(3.4rem,9vw,7.5rem);     /* soirées : date énorme */

  --wrap:1280px;
  --pad:clamp(1.2rem,5vw,3.5rem);
  --radius:2px;                           /* B3 : coins vifs */
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:66px;
}


*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1.5rem);
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:transparent;            /* le fond (html) et la lumière de l'eau se voient au travers */
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--fs-base);
  color:var(--ink-now);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1;margin:0}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);position:relative}


/* ============================================================
   TYPO — labels, titres, accroches
   ============================================================ */
/* C2 : 500 pour les libellés */
.eyebrow,.label{
  font-family:var(--font-body);font-weight:500;
  font-size:var(--fs-xs);letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent-now);
  display:block;margin:0 0 1.1rem;
}
.label{margin-bottom:.6rem}

/* C1 : titres très grands, très fins, interlettrage large */
.section-title{
  font-size:var(--fs-title);
  letter-spacing:.055em;
  line-height:.92;
  margin:0 0 1.4rem;
  text-indent:-.03em;      /* compense le tracking sur la 1re lettre */
}
.hero__title{
  font-size:var(--fs-hero);
  letter-spacing:.05em;
  line-height:.92;
  margin:0 0 2.2rem;
  text-indent:-.03em;
}

/* C2 : 300 pour les accroches */
.lede{
  font-weight:300;
  font-size:var(--fs-md);
  line-height:1.5;
  max-width:44ch;
}

/* C4 : chiffres en chasse fixe */
.bill__date,.hours span,.footer__bottom,
input[type="date"],input[type="time"],input[type="tel"]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ============================================================
   B4 — un seul bouton plein, le reste en liens soulignés
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-body);font-weight:500;
  font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;
  padding:1.05em 2.2em;
  border:1px solid var(--gold);border-radius:var(--radius);
  background:var(--gold);color:#14100A;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.btn--block{width:100%;margin-top:.6rem}

/* Liens texte : soulignement qui se déplace + flèche */
.link{
  position:relative;display:inline-flex;align-items:baseline;gap:.55em;
  font-family:var(--font-body);font-weight:500;
  font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:.35em;color:inherit;
}
.link::before,.link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;
}
.link::before{transform:scaleX(1);transform-origin:100% 50%;
  transition:transform .28s var(--ease) .24s}
.link::after{transform:scaleX(0);transform-origin:0 50%;
  transition:transform .28s var(--ease)}
.link:hover::before,.link:focus-visible::before{transform:scaleX(0);transition-delay:0s}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1);transition-delay:.24s}
.link__arrow{display:inline-block;transition:transform .3s var(--ease)}
.link:hover .link__arrow,.link:focus-visible .link__arrow{transform:translateX(.35em)}
.link:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:var(--radius)}

/* ============================================================
   B5 — HEADER sobre, se cache en descendant
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:var(--header-h);
  padding-inline:var(--pad);
  transform:translateY(0);
  transition:transform .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header[data-hidden="true"]{transform:translateY(-102%)}
.site-header[data-solid="true"]{
  background:rgba(11,11,18,.9);
  border-bottom-color:var(--rule-now);
}
.site-header .brand{display:block;line-height:0}
.site-header .brand img{height:26px;width:auto}
.site-header .btn{padding:.75em 1.5em;font-size:.68rem}

/* ============================================================
   B2 — HERO décentré
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;color:var(--cream);
  padding:var(--header-h) 0 clamp(2rem,6vw,4.5rem);
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 78%}
/* La vidéo se pose par-dessus la photo et apparaît en fondu quand elle est
   prête à jouer (classe posée par script.js). Si elle ne charge jamais,
   elle reste à zéro et la photo fait le travail. */
.hero__video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:center 60%;
  opacity:0;transition:opacity 1.4s var(--ease);
  pointer-events:none;
}
.hero__video.is-playing{opacity:1}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,8,14,.68) 0%,rgba(8,8,14,.06) 32%,rgba(8,8,14,.88) 100%),
    linear-gradient(90deg,rgba(8,8,14,.66) 0%,rgba(8,8,14,0) 62%);
}
/* Le <picture> qui enveloppe la photo est en ligne par defaut : sans ca,
   l'image perd sa hauteur de reference et le hero s'effondre. */
.hero__media picture{position:absolute;inset:0;display:block}

/* Le voile passe AU-DESSUS de la video. C'etait le defaut de lisibilite :
   .hero__video est en z-index 1, le degrade de .hero__media::after n'avait
   pas de z-index (donc 0). Tant que seule la photo etait la, le voile
   fonctionnait ; des que la video apparaissait en fondu, elle recouvrait le
   degrade et le titre se retrouvait pose sur l'eau en plein soleil. */
.hero__media::after{z-index:2}

/* Telephone tenu debout : cadrage portrait, et un voile supplementaire sous
   le titre. La video portrait est deja recadree sur la bande visible, on la
   recentre donc au lieu de la decaler vers le bas. */
@media(max-width:759px) and (orientation:portrait){
  .hero__media img{object-position:center 50%}
  .hero__video{object-position:center 50%}
}
@media(max-width:759px){
  .hero__media::before{
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(6,8,14,.58) 0%,
      rgba(6,8,14,.16) 24%,
      rgba(6,8,14,.34) 50%,
      rgba(6,8,14,.84) 80%,
      rgba(6,8,14,.95) 100%);
  }
}

.hero__foot{position:relative;z-index:2;padding-inline:var(--pad);max-width:min(1280px,100%);
  margin-inline:auto;width:100%}
.hero__foot .eyebrow{color:var(--gold-bright)}
.hero__line{display:block}
.hero__title{color:var(--cream)}


.scroll-hint{
  position:absolute;z-index:2;bottom:clamp(2rem,6vw,4.5rem);right:var(--pad);
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--font-body);font-weight:500;
  font-size:var(--fs-xs);letter-spacing:.28em;text-transform:uppercase;
  color:var(--cream);opacity:.85;
}
.scroll-hint__rule{display:block;width:64px;height:1px;background:currentColor}
@media(max-width:720px){.scroll-hint{display:none}}

/* ============================================================
   SECTIONS — transparentes, sur le fond du body
   ============================================================ */
.section{
  position:relative;background:transparent;
  padding:clamp(4.5rem,12vw,9.5rem) 0;
  color:var(--ink-now);
}

/* ---------- 2. PISCINE : image plein bleed, texte dans le coin ---------- */
.s-pool{padding:0}
.bleed{margin:0;position:relative;height:clamp(560px,92svh,940px)}
.bleed img{width:100%;height:100%;object-fit:cover}
.bleed::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,22,31,0) 26%,rgba(5,22,31,.55) 62%,rgba(5,22,31,.94) 100%),
    linear-gradient(90deg,rgba(5,22,31,.74) 0%,rgba(5,22,31,.2) 46%,rgba(5,22,31,0) 68%);
}
.bleed__corner{
  position:absolute;z-index:2;left:var(--pad);bottom:clamp(2rem,6vw,4rem);
  max-width:min(42rem,88vw);color:#F4FBFD;
}
.bleed__corner .eyebrow{color:#FFFFFF;text-shadow:2px 2px 0 rgba(4,20,28,.5)}
.bleed__corner .lede{margin-bottom:1.8rem;color:#EAF6FB;max-width:34ch}
/* « ombres nettes » : décalage franc, zéro flou */
.cut{text-shadow:6px 6px 0 rgba(4,20,28,.55)}
@media(max-width:720px){.cut{text-shadow:3px 3px 0 rgba(4,20,28,.55)}}

/* ---------- 3. RESTAURANT : triptyque asymétrique, images qui chevauchent ---------- */
.tryptique{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0 clamp(.6rem,1.6vw,1.4rem);
  align-items:start;
}
.tryptique__text{grid-column:1/13;margin-bottom:clamp(2.5rem,6vw,4rem)}
.tryptique__plate{margin:0;position:relative}
.tryptique__plate img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.tryptique__plate .label{
  margin:.7rem 0 0;font-size:.68rem;letter-spacing:.26em;color:var(--accent-now);
}
.tryptique__plate--1{grid-column:1/8;aspect-ratio:4/5}
.tryptique__plate--2{grid-column:6/12;aspect-ratio:3/4;margin-top:22%;z-index:2}
.tryptique__plate--3{grid-column:2/9;aspect-ratio:16/10;margin-top:14%}
.tryptique__plate--1 img,.tryptique__plate--3 img{height:100%}
.tryptique__plate--2 img{height:calc(100% - 0px)}

@media(max-width:899px){
  /* la cascade se lit aussi en mobile : chaque image mord sur la précédente */
  .tryptique__text{grid-column:1/13;grid-row:1}
  .tryptique__plate--1{grid-column:1/10;grid-row:2;aspect-ratio:4/5;margin-top:0}
  .tryptique__plate--2{grid-column:5/13;grid-row:3;aspect-ratio:3/4;margin-top:-20%;z-index:2}
  .tryptique__plate--3{grid-column:2/12;grid-row:4;aspect-ratio:16/10;margin-top:-12%;z-index:3}
}
@media(min-width:900px){
  .tryptique__text{
    grid-column:1/6;grid-row:1;margin-bottom:0;
    position:sticky;top:calc(var(--header-h) + 4rem);
    align-self:start;
  }
  .tryptique__text .section-title{font-size:clamp(2.4rem,6vw,5.4rem)}
  .tryptique__plate--1{grid-column:6/11;grid-row:1;aspect-ratio:4/5;margin-top:0}
  .tryptique__plate--2{grid-column:9/13;grid-row:1;aspect-ratio:3/4;margin-top:34%;z-index:2}
  .tryptique__plate--3{grid-column:7/12;grid-row:1;aspect-ratio:16/10;margin-top:106%;z-index:3}
}
/* le chevauchement se lit grâce à un filet clair sur l'image du dessus */
.tryptique__plate--2 img{outline:1px solid rgba(255,255,255,.5);outline-offset:-1px}

/* ---------- 4. BAR : portrait vertical + colonne étroite ---------- */
.portrait{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,5vw,4rem);align-items:end;
}
.portrait__glass{margin:0;position:relative;max-width:min(30rem,100%)}
.portrait__glass img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
.portrait__glass::after{
  content:"";position:absolute;inset:10px;border:1px solid rgba(246,231,194,.34);pointer-events:none;
}
.portrait__col{max-width:30ch}
.portrait__col .lede{max-width:28ch}
.portrait__col .link{margin-top:1.8rem}
@media(min-width:900px){
  .portrait{grid-template-columns:minmax(0,.62fr) minmax(0,.38fr);gap:clamp(2.5rem,6vw,6rem)}
  .portrait__glass{margin-left:auto;max-width:36rem}
}

/* ---------- 5. TERRASSE : panoramique épinglé ---------- */
.s-terrasse{padding:0}
.pano{position:relative;height:150vh}                 /* piste de scroll, 1,5 écran */
.pano__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;
}
.pano__media{position:absolute;inset:0;margin:0}
.pano__media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.pano__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(24,10,30,.3) 0%,rgba(24,10,30,0) 28%,rgba(24,10,30,.55) 64%,rgba(24,10,30,.9) 100%),
    linear-gradient(90deg,rgba(24,10,30,.5) 0%,rgba(24,10,30,0) 54%);
}
.pano__copy{
  position:relative;z-index:2;width:100%;
  max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad) clamp(3rem,9vw,6rem);
  color:#FFF3EA;
}
.pano__copy .eyebrow{color:#FFE6C9}
.pano__copy .lede{margin-bottom:1.8rem}

/* ---------- 6. SOIRÉES : liste éditoriale ---------- */
.s-soirees .lede{margin-bottom:clamp(2.5rem,7vw,4.5rem)}
.bill{border-top:1px solid var(--rule-now)}
.bill__row{
  position:relative;
  display:grid;grid-template-columns:1fr;gap:.4rem clamp(1.5rem,4vw,3.5rem);
  padding:clamp(1.8rem,4vw,2.8rem) 0 clamp(1.8rem,4vw,2.8rem) 1.2rem;
  border-bottom:1px solid var(--rule-now);
}
/* un accent néon par ligne */
.bill__row::before{
  content:"";position:absolute;left:0;top:clamp(1.8rem,4vw,2.8rem);bottom:clamp(1.8rem,4vw,2.8rem);
  width:2px;background:var(--neon);
}
.bill__date{
  font-family:var(--font-display);
  font-size:var(--fs-date);line-height:.86;letter-spacing:.02em;
  color:var(--ink-now);display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
}
.bill__date b{font-weight:400}
.bill__date i{
  font-family:var(--font-body);font-style:normal;font-weight:500;
  font-size:var(--fs-xs);letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-now);
}
.bill__day{margin-bottom:.5rem;color:var(--neon)}
.bill__title{font-size:var(--fs-lg);letter-spacing:.06em;margin-bottom:.5rem}
.bill__meta{font-weight:300;font-size:var(--fs-sm);opacity:.85;max-width:52ch}
.bill__foot{margin-top:clamp(2rem,5vw,3rem)}
@media(min-width:820px){
  .bill__row{grid-template-columns:minmax(8rem,20%) 1fr;align-items:center;padding-left:1.6rem}
}

/* ---------- 7. CARTE ---------- */
.menu__tabs{
  display:flex;gap:clamp(1.4rem,4vw,2.6rem);flex-wrap:wrap;
  margin:2.2rem 0 clamp(2.2rem,6vw,3.4rem);
  border-bottom:1px solid var(--rule-now);
}
.menu__tab{
  position:relative;
  font-family:var(--font-body);font-weight:500;
  font-size:var(--fs-sm);letter-spacing:.2em;text-transform:uppercase;
  padding:.6rem 0 1.05rem;margin:0;     /* 44 px de cible tactile */
  background:none;border:0;border-radius:0;cursor:pointer;
  color:var(--ink-now);opacity:.55;
  transition:opacity .3s var(--ease);
}
.menu__tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s var(--ease);
}
.menu__tab:hover{opacity:.85}
.menu__tab[aria-selected="true"]{opacity:1}
.menu__tab[aria-selected="true"]::after{transform:scaleX(1)}
.menu__tab:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.menu__panel{display:none}
.menu__panel.active{display:block;animation:panelIn .5s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.menu__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.6rem)}
@media(min-width:640px){.menu__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.menu__grid{grid-template-columns:repeat(3,1fr)}}

.dish{display:flex;flex-direction:column}
.dish__img{overflow:hidden;border-radius:var(--radius);aspect-ratio:4/5;
  border:1px solid var(--rule-now)}
.dish__img img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease)}
.dish:hover .dish__img img{transform:scale(1.05)}
.dish__name{font-size:var(--fs-lg);letter-spacing:.05em;margin:0}
.dish__desc{font-weight:300;font-size:var(--fs-sm);opacity:.88;line-height:1.55}
/* mobile : visuel plus bas pour ne pas étirer la carte sur 10 écrans */
@media(max-width:639px){.dish__img{aspect-ratio:16/10}}

/* ---------- 8. RÉSERVATION ---------- */
.s-reservation .lede{margin-bottom:clamp(2.5rem,6vw,4rem)}
.reserve__grid{display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,6vw,5rem);align-items:start}
@media(min-width:900px){.reserve__grid{grid-template-columns:1fr .78fr}}

.reserve-form{border-top:1px solid var(--rule-now);padding-top:clamp(1.8rem,4vw,2.6rem)}
.field{margin-bottom:1.6rem}
.field > label,.field--set > legend{
  display:block;float:none;padding:0;
  font-family:var(--font-body);font-weight:500;
  font-size:var(--fs-xs);letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-now);margin-bottom:.6rem;
}
.field--set{border:0;padding:0;margin-inline:0}
.field input,.field select{
  width:100%;padding:.7em 0;border:0;border-bottom:1px solid var(--rule-now);
  border-radius:0;background:transparent;color:var(--ink-now);
  font-family:var(--font-body);font-weight:300;font-size:var(--fs-base);
  transition:border-color .25s;color-scheme:dark;
  -webkit-appearance:none;appearance:none;
}
.field input::placeholder{color:currentColor;opacity:.62}
.field input:focus,.field select:focus{outline:none;border-bottom-color:var(--gold)}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='%23C6A97E' d='M5.5 7 0 0h11z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .2em center;padding-right:2em;
}
.field select option{background:#0B0B12;color:var(--cream)}

.form-msg{
  margin-top:1.4rem;padding:1rem 1.1rem;border-radius:var(--radius);
  border:1px solid var(--gold);color:var(--gold-bright);
  font-size:var(--fs-sm);font-weight:300;display:none;
}
.form-msg.show{display:block}
.form-err{color:#FFC6C6;border-color:#FF9A9A}

.reserve__aside{border-top:1px solid var(--rule-now);padding-top:clamp(1.8rem,4vw,2.6rem)}
.reserve__aside .lede{margin-bottom:1.8rem}
.reserve__aside ul{display:grid}
.reserve__aside li{
  display:grid;gap:.2rem;font-size:var(--fs-sm);
  border-bottom:1px solid var(--rule-now);padding:.9rem 0;
}
.reserve__aside li b{
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  font-size:var(--fs-xs);color:var(--accent-now);
}
.reserve__aside li span{font-weight:300;opacity:.9}

/* ---------- 9. FOOTER ---------- */
.footer{
  position:relative;background:transparent;color:var(--ink-now);
  padding:clamp(3.5rem,9vw,6rem) 0 2.5rem;
  border-top:1px solid var(--rule-now);
}
.footer__grid{display:grid;grid-template-columns:1fr;gap:2.8rem}
@media(min-width:760px){.footer__grid{grid-template-columns:1.25fr 1fr 1fr}}
.footer p{font-weight:300;font-size:var(--fs-sm);max-width:34ch}
.footer__links{margin-top:1.4rem}
.footer__logo{width:180px;margin-bottom:1.4rem}
.hours{display:grid;gap:.1rem;font-size:var(--fs-sm);font-weight:300}
.hours li{
  display:flex;justify-content:space-between;gap:1.2rem;
  border-bottom:1px solid var(--rule-now);padding:.65rem 0;
}
.hours span{opacity:.72;text-align:right}
.footer__place{margin-top:1.4rem;overflow:hidden;border:1px solid var(--rule-now);border-radius:var(--radius)}
.footer__place img{width:100%;height:140px;object-fit:cover;object-position:center 70%}
.footer__bottom{
  margin-top:clamp(2.5rem,6vw,4rem);padding-top:1.6rem;border-top:1px solid var(--rule-now);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-size:var(--fs-xs);letter-spacing:.1em;opacity:.7;
}

/* ============================================================
   ANIMATIONS SCROLL
   ============================================================ */
.reveal-up{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-up.in{opacity:1;transform:none}
.reveal-up.d1{transition-delay:.1s}
.reveal-up.d2{transition-delay:.2s}

/* Mode capture : /?shot=1 */
html.shot{scroll-behavior:auto}
.shot .hero{min-height:820px}
.shot .reveal-up{opacity:1!important;transform:none!important}
.shot .menu__panel.active{animation:none}



/* ============================================================
   D2 — LA CARTE CHIFFREE : nom, filet de points, prix, allergenes
   Le prix est en Poiret One comme les grands nombres de la page
   (dates des soirees), en chasse fixe pour que la colonne tienne.
   ============================================================ */
.dish__head{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.1rem .7rem;
  margin:1rem 0 .5rem;padding-top:.9rem;border-top:1px solid var(--rule-now);
}
.dish__dots{
  flex:1 1 2rem;min-width:1.2rem;align-self:flex-end;
  height:0;margin-bottom:.42em;border-bottom:1px dotted var(--rule-now);
}
.dish__price{
  font-family:var(--font-display);font-size:var(--fs-lg);
  letter-spacing:.04em;line-height:1;white-space:nowrap;color:var(--ink-now);
}
.dish__aller{
  margin-top:.7rem;font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.5;
  color:var(--ink-now);
}
.dish__aller span{color:var(--accent-now)}
.dish__aller span::after{content:" \00b7 "}
.menu__note{
  margin-top:clamp(2rem,5vw,3rem);padding-top:1.2rem;
  border-top:1px solid var(--rule-now);
  font-size:var(--fs-xs);font-weight:400;letter-spacing:.06em;
  line-height:1.7;max-width:62ch;color:var(--accent-now);
}

/* ============================================================
   D3 — LA PHOTO QUI SUIT LE CURSEUR (desktop, pointeur fin)
   La classe .menu-follow est posee par script.js : elle n'apparait
   que si le survol existe vraiment ET que le mouvement est permis.
   Sans elle, la carte reste la grille illustree d'origine.
   ============================================================ */
.menu__follow{
  position:fixed;left:0;top:0;z-index:50;
  width:clamp(220px,19vw,320px);aspect-ratio:4/5;
  overflow:hidden;border:1px solid var(--rule-now);border-radius:var(--radius);
  pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity .26s var(--ease),visibility 0s linear .26s;
}
.menu__follow.is-on{opacity:1;visibility:visible;transition-delay:0s,0s}
.menu__follow img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.07);transition:transform .6s var(--ease);
}
.menu__follow.is-on img{transform:none}
/* un filet net a l'interieur, dans le registre .portrait__glass */
.menu__follow::after{
  content:"";position:absolute;inset:7px;
  border:1px solid rgba(246,231,194,.3);
}

@media(min-width:1000px){
  /* la carte devient une liste : le plat se lit, la photo vient au curseur */
  html.menu-follow .menu__grid{grid-template-columns:1fr;gap:0}
  html.menu-follow .dish__img{display:none}
  html.menu-follow .dish{
    display:grid;grid-template-columns:minmax(0,1fr);
    padding:clamp(1.1rem,2vw,1.7rem) 0 clamp(1.1rem,2vw,1.7rem) 0;
    border-bottom:1px solid var(--rule-now);
    transition:padding-left .4s var(--ease);
  }
  html.menu-follow .menu__grid .dish:first-child{border-top:1px solid var(--rule-now)}
  html.menu-follow .dish:hover{padding-left:1.2rem}
  html.menu-follow .dish__head{margin:0 0 .45rem;padding-top:0;border-top:0}
  html.menu-follow .dish__name{font-size:clamp(1.5rem,2.5vw,2.15rem)}
  html.menu-follow .dish__price{font-size:clamp(1.5rem,2.5vw,2.15rem)}
  html.menu-follow .dish__desc{max-width:58ch}
}

/* ============================================================
   D4 — COMPTE A REBOURS (vraie date, calculee en JS)
   ============================================================ */
.countdown{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .8rem;
  margin:0 0 clamp(2rem,5vw,3rem);
  padding:1.1rem 1.3rem 1.1rem 1.5rem;
  border:1px solid var(--rule-now);border-left:2px solid var(--neon-cyan);
  border-radius:var(--radius);
  font-size:var(--fs-sm);
}
.countdown[hidden]{display:none}
.countdown__label{
  font-weight:500;font-size:var(--fs-xs);letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent-now);
}
.countdown__event{font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.countdown__sep{opacity:.5}
.countdown__when{font-weight:300}
.countdown__left{
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  padding-left:.8rem;margin-left:auto;border-left:1px solid var(--rule-now);
}
@media(max-width:640px){
  .countdown{display:grid;gap:.45rem}
  .countdown__sep{display:none}
  .countdown__left{margin-left:0;padding-left:0;border-left:0}
}
/* la ligne de la prochaine soiree porte une etiquette */
.bill__row[hidden]{display:none}
.bill__tag{
  align-self:start;
  font-weight:500;font-size:var(--fs-xs);letter-spacing:.24em;text-transform:uppercase;
  color:var(--neon);
}
@media(min-width:820px){
  .bill__row{grid-template-columns:minmax(8rem,20%) 1fr auto}
}

/* ============================================================
   D6 — CRENEAUX EN PASTILLES + ZONES ILLUSTREES
   ============================================================ */
.slots__group{margin-bottom:1.1rem}
.slots__group[hidden]{display:none}
.slots__title{
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-now);opacity:.85;margin-bottom:.55rem;
}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;display:block}
.chip[hidden]{display:none}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.chip span{
  display:block;padding:.75em 1.15em;border-radius:var(--radius);
  border:1px solid var(--rule-now);cursor:pointer;
  font-size:var(--fs-sm);font-weight:500;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  color:var(--ink-now);background:transparent;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
/* l'input couvre toute la pastille : c'est .chip qui recoit le survol */
.chip:hover span{border-color:var(--gold)}
.chip input:checked+span{background:var(--gold);border-color:var(--gold);color:#14100A}
.chip input:focus-visible+span{outline:2px solid var(--gold-hi);outline-offset:3px}
.slots__none{
  margin-top:.4rem;font-size:var(--fs-sm);font-weight:300;color:var(--accent-now);
}
.slots__none[hidden]{display:none}

.zones{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
@media(min-width:1100px){.zones{grid-template-columns:repeat(4,1fr)}}
.zone{position:relative;display:block}
.zone input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.zone__box{
  display:block;cursor:pointer;overflow:hidden;
  border:1px solid var(--rule-now);border-radius:var(--radius);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.zone__img{display:block;aspect-ratio:4/3;overflow:hidden}
.zone__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.zone:hover .zone__img img{transform:scale(1.06)}
.zone__name{
  display:block;padding:.75rem .8rem .1rem;
  font-weight:500;font-size:var(--fs-sm);letter-spacing:.1em;color:var(--ink-now);
}
.zone__hours{
  display:block;padding:0 .8rem .85rem;
  font-style:normal;font-weight:300;font-size:var(--fs-xs);letter-spacing:.06em;
  color:var(--accent-now);
}
.zone:hover .zone__box{border-color:var(--gold)}
.zone input:checked+.zone__box{border-color:var(--gold);background:rgba(198,169,126,.14)}
.zone input:checked+.zone__box .zone__name{color:var(--gold-bright)}
.zone input:focus-visible+.zone__box{outline:2px solid var(--gold-hi);outline-offset:3px}

.form-hint{
  margin-top:1rem;font-size:var(--fs-xs);font-weight:400;line-height:1.7;
  letter-spacing:.04em;color:var(--accent-now);
}
.form-hint a{text-decoration:underline;text-underline-offset:.25em}
.form-msg a{color:inherit;text-decoration:underline;text-underline-offset:.25em}

/* ============================================================
   F — NAVIGATION, APPEL DIRECT, BARRE D'ACTION
   Le récit midi → nuit reste la colonne vertébrale de la page,
   mais celui qui vient chercher la carte, l'adresse ou le
   téléphone doit pouvoir sortir du récit en un geste.
   ============================================================ */

/* Lien d'évitement : hors de l'écran tant qu'il n'a pas le focus clavier. */
.skip-link{
  position:fixed;top:.6rem;left:.6rem;z-index:200;
  transform:translateY(-250%);
  padding:.75em 1.3em;
  border:1px solid var(--gold);border-radius:var(--radius);
  background:#0B0B12;color:var(--gold-bright);
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0)}
/* la cible du lien d evitement ne doit pas afficher de halo de focus */
#contenu:focus{outline:none}

/* ---------- Navigation du header ---------- */
.site-nav{display:none;gap:clamp(1.2rem,2.6vw,2.4rem)}
@media(min-width:900px){.site-nav{display:flex}}
.site-nav a{
  position:relative;padding:.5rem 0;opacity:.78;
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .3s var(--ease);
}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.site-nav a:hover,.site-nav a:focus-visible{opacity:1}
.site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1)}
.site-nav a:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ---------- Le numéro, en clair dès qu'il y a la place ---------- */
.site-header__actions{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem)}
.header-tel{
  display:none;align-items:center;gap:.55em;padding:.5rem 0;
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
@media(min-width:760px){.header-tel{display:inline-flex}}
.header-tel:hover{color:var(--gold-bright)}
.header-tel:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:var(--radius)}
.ico-tel{width:1em;height:1em;flex:none}

/* ---------- Barre d'action : là où le pouce décide, donc mobile ---------- */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule-now);
  border-top:1px solid var(--rule-now);
  padding-bottom:env(safe-area-inset-bottom,0);
}
@media(min-width:760px){.action-bar{display:none}}
.action-bar a{
  display:flex;align-items:center;justify-content:center;gap:.55em;
  min-height:56px;
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.action-bar__call{
  background:#14131C;
  color:var(--ink-now);
}
.action-bar__book{background:var(--gold);color:#14100A}
.action-bar a:focus-visible{outline:2px solid currentColor;outline-offset:-5px}
/* la barre ne doit pas manger la dernière ligne du footer */
@media(max-width:759px){.footer{padding-bottom:calc(2.5rem + 56px)}}

/* ---------- Adresse et téléphone du footer ---------- */
.footer__address{
  font-style:normal;display:grid;gap:.45rem;max-width:34ch;
  font-size:var(--fs-sm);font-weight:300;
}
.footer__access{opacity:.78}
.footer__contact{margin-top:1.1rem}
.footer__tel{
  display:inline-block;padding-bottom:.15em;
  border-bottom:1px solid var(--rule-now);
  font-size:var(--fs-md);font-weight:300;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  transition:border-color .25s var(--ease);
}
.footer__tel:hover{border-bottom-color:var(--gold)}
.footer__tel:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ---------- Aides du formulaire ---------- */
.field__hint{
  margin:-.2rem 0 .9rem;max-width:46ch;
  font-size:var(--fs-xs);font-weight:300;line-height:1.65;opacity:.8;
}
.field__opt{letter-spacing:.14em;font-weight:400;opacity:.6}
.field__warn{color:#FFC6C6;opacity:1}

/* ============================================================
   E — prefers-reduced-motion coupe tout
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal-up{opacity:1;transform:none}
  .pano{height:auto}
  .pano__stage{position:static;height:auto;min-height:80svh}

  /* La video du hero ne demarre pas : la photo tient le role. */
  .hero__video{display:none}

  /* D3 : pas de photo qui suit le curseur ; la carte garde ses vignettes. */
  .menu__follow{display:none}
  .zone:hover .zone__img img{transform:none}
}

/* --------------------------------------------------------------------------
   Créneaux indisponibles
   --------------------------------------------------------------------------
   Posé par booking-bridge.js quand le serveur ne propose pas l'heure : la
   pastille reste visible — le client voit qu'il a visé juste mais trop tard —
   mais elle ne se choisit plus.
   -------------------------------------------------------------------------- */
/* Créneau indisponible : barré, mais encore lisible (contraste > 4,5:1 sur
   le fond de nuit) ; la raison est dans le title et l'aria-label. */
.chip--indispo > span {
  opacity: .58;
  text-decoration: line-through;
  cursor: not-allowed;
}
.chip--indispo:hover span{border-color:var(--rule-now)}
.slots__loading{
  margin:.2rem 0 .6rem;font-size:var(--fs-sm);font-weight:300;opacity:.8;
}

/* Hero : le bouton Réserver et, à côté, la pause de la vidéo (WCAG 2.2.2 :
   tout mouvement de plus de 5 s doit pouvoir être arrêté). */
.hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.6rem;margin:0}
.hero__pause{
  appearance:none;background:none;border:0;padding:.6rem 0;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:var(--fs-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--cream);opacity:.85;
  text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px;
}
.hero__pause[hidden]{display:none}

/* La note Google, même registre que les liens du hero ; l'étoile prend l'or du logo. */
.hero__rating{
  display:inline-flex;align-items:center;gap:.45em;padding:.6rem 0;
  font-family:var(--font-body);font-weight:500;font-size:var(--fs-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--cream);opacity:.9;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.hero__rating-star{color:var(--gold-bright);font-size:1.25em;line-height:1;letter-spacing:0}
.hero__rating:hover{opacity:1;text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:1px}
.hero__rating:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:var(--radius)}
.reserve__aside li a{text-decoration:underline;text-underline-offset:.25em}
.footer__legal a{text-decoration:underline;text-underline-offset:.25em}
.footer__legal a:hover{color:var(--gold-bright)}
.hero__pause:hover{opacity:1}
.hero__pause:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:var(--radius)}


/* ============================================================
   F2 — LA COUCHE D'INFORMATION PAR-DESSUS LE RÉCIT
   Hero informatif + réservation express, bandeau d'infos pratiques,
   menu mobile, header fixe sur ordinateur, formulaire réordonné.
   Même charte : filets 1px, coins vifs, Poiret One pour les chiffres.
   ============================================================ */

/* ---------- Hero ---------- */
.hero__title{margin-bottom:1.1rem}
.hero__promise{
  font-weight:300;font-size:var(--fs-md);line-height:1.45;max-width:44ch;
  margin:0 0 1.5rem;color:var(--cream-soft);
}
.express{
  margin-top:clamp(1.6rem,3vw,2.4rem);max-width:760px;
  border-top:1px solid rgba(244,236,221,.32);padding-top:1.1rem;
}
.express__label{
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-bright);margin:0 0 .9rem;
}
.express__row{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem 1.4rem;align-items:end}
.express__field{display:grid;gap:.35rem;min-width:0}
.express__field span{
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.85;
}
.express__field input,.express__field select{
  width:100%;min-height:2.6rem;background:transparent;border:0;border-radius:0;
  border-bottom:1px solid rgba(244,236,221,.55);color:var(--cream);
  font:inherit;font-size:var(--fs-base);padding:.45em 0;color-scheme:dark;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.express__field select{
  appearance:none;-webkit-appearance:none;padding-right:1.6em;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.express__field select option{background:#0B0B12;color:var(--cream)}
.express__field input:focus,.express__field select:focus{outline:none;border-bottom-color:var(--gold)}
.express__field input:focus-visible,.express__field select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.express__go{white-space:nowrap;gap:.7em}
.express__go span{transition:transform .3s var(--ease)}
.express__go:hover span{transform:translateX(.3em)}
@media(max-width:640px){
  .express__row{grid-template-columns:1fr 1fr}
  .express__go{grid-column:1/-1;width:100%}
  .hero__promise{font-size:var(--fs-base)}
}

/* ---------- Bandeau d'infos pratiques ---------- */
.infos{
  position:relative;color:var(--ink-now);
  padding:clamp(1.8rem,3.5vw,2.8rem) 0;
  border-bottom:1px solid var(--rule-now);
}
.infos__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.6rem}
@media(min-width:900px){.infos__grid{grid-template-columns:1.45fr 1.25fr 1fr .9fr;gap:2.4rem}}
.infos__cell{padding-left:1rem;border-left:1px solid var(--rule-now);min-width:0}
.infos__cell .label{margin-bottom:.4rem}
.infos__cell--today{display:flex;gap:1rem;align-items:flex-start}
@media(max-width:899px){.infos__cell--today{grid-column:1/-1}}
.infos__date{
  display:grid;line-height:.9;font-family:var(--font-display);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.infos__date b{font-weight:400;font-size:clamp(2.6rem,5vw,3.6rem);letter-spacing:.02em}
.infos__date i{
  font-family:var(--font-body);font-style:normal;font-weight:500;font-size:var(--fs-xs);
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent-now);margin-top:.35rem;
}
.infos__big{
  font-family:var(--font-display);font-size:clamp(1.3rem,2.1vw,1.85rem);
  line-height:1.15;letter-spacing:.035em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.infos__big a{border-bottom:1px solid var(--rule-now);transition:border-color .25s var(--ease)}
.infos__big a:hover{border-bottom-color:currentColor}
.infos__sep{opacity:.45;margin:0 .1em}
.infos__note{font-size:var(--fs-xs);font-weight:300;line-height:1.55;opacity:.82;margin-top:.4rem}
/* Plat du jour saisi dans l'app : une ligne dorée sous le texte de la carte */
.lede--jour{color:var(--gold-bright);margin-top:-.5rem}
.lede--jour b{font-weight:500}
.lede--jour[hidden]{display:none}
.infos__more{margin-top:.7rem}
.infos__more .link{font-size:var(--fs-xs)}
.infos__status{
  display:inline-flex;align-items:center;gap:.6em;margin-top:.55rem;
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-now);
}
.infos__dot{position:relative;flex:none;width:.5em;height:.5em;border-radius:50%;background:currentColor}
.infos__dot::after{
  content:"";position:absolute;inset:-.3em;border-radius:50%;
  border:1px solid currentColor;opacity:0;
  animation:infos-pulse 2.6s var(--ease) infinite;
}
.infos__status[data-state="closed"]{opacity:.8}
.infos__status[data-state="closed"] .infos__dot{background:transparent;border:1px solid currentColor}
.infos__status[data-state="closed"] .infos__dot::after{animation:none}
@keyframes infos-pulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.7);opacity:0}}

/* ---------- Menu mobile ---------- */
.menu-btn{
  display:inline-flex;align-items:center;gap:.6em;min-height:44px;
  background:none;border:0;padding:.5rem .1rem;cursor:pointer;color:inherit;
  font-family:var(--font-body);font-weight:500;font-size:var(--fs-xs);
  letter-spacing:.2em;text-transform:uppercase;
}
@media(min-width:900px){.menu-btn{display:none}}
.menu-btn__bars{
  display:block;width:18px;height:9px;
  border-top:1px solid currentColor;border-bottom:1px solid currentColor;
}
.menu-btn:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:var(--radius)}
.menu-panel{
  position:fixed;inset:0;z-index:90;overflow:auto;
  background:#0B0B12;color:var(--cream);
  padding:0 var(--pad) calc(2rem + env(safe-area-inset-bottom,0));
}
.menu-panel[hidden]{display:none}
.menu-panel__inner{display:flex;flex-direction:column;min-height:100%;gap:clamp(1.8rem,5vh,3rem)}
.menu-panel__top{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h)}
.menu-panel__top img{height:30px;width:auto}
.menu-panel__close{
  background:none;border:1px solid var(--gold);border-radius:var(--radius);
  color:var(--gold-bright);padding:.6em 1.1em;cursor:pointer;
  font-family:var(--font-body);font-weight:500;font-size:var(--fs-xs);
  letter-spacing:.2em;text-transform:uppercase;
}
.menu-panel__close:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.menu-panel__nav ol{display:grid}
.menu-panel__nav a{
  display:flex;align-items:baseline;gap:1rem;padding:1rem 0;
  border-top:1px solid rgba(244,236,221,.18);
  font-family:var(--font-display);font-size:clamp(1.8rem,7.5vw,2.5rem);
  letter-spacing:.04em;line-height:1.05;
}
.menu-panel__nav li:last-child a{border-bottom:1px solid rgba(244,236,221,.18)}
.menu-panel__nav a i{
  font-family:var(--font-body);font-style:normal;font-weight:500;font-size:var(--fs-xs);
  letter-spacing:.2em;color:var(--gold);min-width:2.4em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.menu-panel__nav a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.menu-panel__nav li{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu-panel.is-open .menu-panel__nav li{opacity:1;transform:none}
.menu-panel.is-open .menu-panel__nav li:nth-child(2){transition-delay:.05s}
.menu-panel.is-open .menu-panel__nav li:nth-child(3){transition-delay:.1s}
.menu-panel.is-open .menu-panel__nav li:nth-child(4){transition-delay:.15s}
.menu-panel.is-open .menu-panel__nav li:nth-child(5){transition-delay:.2s}
.menu-panel__foot{margin-top:auto;display:grid;gap:.55rem;font-size:var(--fs-sm);font-weight:300}
.menu-panel__foot a{color:var(--gold-bright)}
html.menu-open{overflow:hidden}
html.menu-open .site-header{transform:none}

/* ---------- Panorama terrasse : plus court, et statique sur téléphone ---------- */
@media(max-width:760px){
  .pano{height:auto}
  .pano__stage{position:static;height:auto;min-height:78svh}
}

/* ---------- Formulaire : date et couverts côte à côte, espaces compacts ---------- */
.field--pair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.field--pair .field{min-width:0}
@media(max-width:480px){.field--pair{grid-template-columns:1fr}}
@media(max-width:899px){
  .zone__img{display:none}
  .zone__name{padding-top:.7rem}
}

/* ---------- Le pied de page ne se cache plus sous la barre d'action ---------- */
@media(prefers-reduced-motion:reduce){
  .menu-panel__nav li{opacity:1;transform:none;transition:none}
  .infos__dot::after{animation:none}
}


/* ============================================================
   F3 — MOBILE : moins d'écrans, des gestes natifs
   Bande à crans pour les photos du restaurant, plats en lignes avec
   vignette, onglets qui défilent, espaces en pastilles, express sur une
   ligne, hero dégagé de la barre d'action. Rien ne change au-dessus de
   900 px, sauf la cible tactile des liens.
   ============================================================ */

.tryptique__strip{display:contents}              /* n'existe que sur téléphone */
.express__go-arrow{display:inline-block;transition:transform .3s var(--ease)}
.express__go:hover .express__go-arrow{transform:translateX(.3em)}

@media(pointer:coarse){
  .link{padding-top:.5rem}                        /* ≥ 40 px de cible, filet inchangé */
}

@media(max-width:899px){
  /* Restaurant : les trois photos défilent, pleine largeur d'écran */
  .tryptique__strip{
    display:flex;gap:.75rem;grid-column:1/13;grid-row:2;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(-1 * var(--pad));padding:0 var(--pad) .5rem;
    /* le cran se cale sur le bord INTÉRIEUR (la marge), pas sur le bord de l'écran */
    scroll-padding-inline:var(--pad);
  }
  .tryptique__strip::-webkit-scrollbar{display:none}
  .tryptique__strip .tryptique__plate{
    flex:0 0 min(78vw,380px);grid-column:auto;grid-row:auto;
    aspect-ratio:4/5;margin-top:0;z-index:auto;scroll-snap-align:start;
  }
  .tryptique__strip .tryptique__plate--2 img{outline:0}

  /* Espaces du formulaire : des pastilles, pas des cartes illustrées */
  .zones{display:flex;flex-wrap:wrap;gap:.5rem}
  .zone{flex:0 0 auto}
  .zone__name{padding:.75rem .95rem;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase}
  .zone__hours{display:none}
}

@media(max-width:760px){
  /* Respiration des sections : 72 px → 52 px, et la piscine moins haute */
  .section{padding:3.25rem 0}
  .s-pool{padding:0}
  .bleed{height:clamp(460px,70svh,940px)}

  /* Hero : la marque en grand, l'express sur une ligne, le bas dégagé
     de la barre Appeler / Réserver (56 px) */
  .hero{padding-bottom:calc(56px + 1.4rem + env(safe-area-inset-bottom,0))}
  .hero__title{font-size:clamp(3.4rem,16vw,4.6rem)}
  .hero__promise{max-width:32ch;margin-bottom:1.1rem}
  .hero__actions .btn{display:none}                /* la barre du bas et l'express suffisent */
  .express{margin-top:1.3rem;padding-top:.9rem}
  .express__label{margin-bottom:.7rem}
  .express__row{grid-template-columns:1fr 1fr auto;gap:.75rem}
  .express__go{grid-column:auto;width:auto;min-width:48px;min-height:2.6rem;padding:0 .95em}
  .express__go-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .express__go-arrow{font-size:1.15rem}

  /* Bandeau d'infos : plus serré */
  .infos{padding:1.3rem 0}
  .infos__grid{gap:1rem .9rem}
  .infos__cell{padding-left:.8rem}
  .infos__cell--today{gap:.8rem}
  .infos__date b{font-size:2.4rem}
  .infos__big{font-size:1.12rem}
  .infos__note{margin-top:.2rem}
  .infos__more{margin-top:.4rem}

  /* Soirées : la date à gauche, le reste à droite */
  .bill__row{grid-template-columns:auto 1fr;column-gap:.9rem;align-items:start;padding:1.15rem 0 1.15rem .9rem}
  .bill__row::before{top:1.15rem;bottom:1.15rem}
  .bill__date{font-size:2.5rem;flex-direction:column;align-items:flex-start;gap:.2rem;min-width:2.6ch;line-height:.9}
  .bill__date i{letter-spacing:.18em}
  .bill__day{margin-bottom:.25rem}
  .bill__title{font-size:1.3rem}
  .bill__tag{grid-column:2}

  /* Formulaire : l'encart en deux colonnes */
  .reserve__aside{padding-top:1.4rem}
  .reserve__aside .lede{font-size:var(--fs-base);margin-bottom:1rem}
  .reserve__aside ul{grid-template-columns:1fr 1fr;gap:0 1.2rem}
  .reserve__aside li{padding:.75rem 0}

  /* Pied de page : sans la façade, plus serré */
  .footer__place{display:none}
  .footer__grid{gap:2rem}
}

@media(max-width:639px){
  /* Carte : onglets qui défilent sur une ligne, plats en lignes avec vignette */
  .menu__tabs{
    flex-wrap:nowrap;gap:1.5rem;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);
  }
  .menu__tabs::-webkit-scrollbar{display:none}
  .menu__tab{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
  .menu__grid{gap:0}
  .dish{padding:.95rem 0;border-top:1px solid var(--rule-now)}
  .dish--photo{display:grid;grid-template-columns:84px 1fr;column-gap:.9rem;align-items:start}
  .dish--photo .dish__img{aspect-ratio:1;grid-row:1/span 3;border:0}
  .dish__head{margin:0 0 .3rem;padding-top:0;border-top:0}
  .dish__name{font-size:1.12rem}
  .dish__price{font-size:1.12rem}
  .dish__desc{font-size:var(--fs-xs);line-height:1.5}
  .dish__aller{margin-top:.4rem}
}


/* ============================================================
   F4 — MOBILE, RETOUCHES D'APRÈS CAPTURE
   L'express ne déborde plus (compteur de couverts, date bornée),
   le bandeau d'infos casse ses lignes proprement.
   ============================================================ */
.express__field input{min-width:0}
.express__count{
  display:inline-grid;grid-template-columns:2.4rem minmax(2.2rem,auto) 2.4rem;align-items:center;
  min-height:2.6rem;border-bottom:1px solid rgba(244,236,221,.55);
}
.express__step{
  appearance:none;background:none;border:0;padding:0;min-height:2.6rem;cursor:pointer;
  color:var(--cream);font-family:var(--font-body);font-size:1.25rem;line-height:1;
}
.express__step:hover{color:var(--gold-bright)}
.express__step:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--radius)}
.express__count output{
  display:block;text-align:center;font-family:var(--font-display);font-size:1.35rem;
  line-height:1;color:var(--cream);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.express__row{grid-template-columns:minmax(0,1fr) auto auto}
.infos__today-word + [data-today-weekday]:not(:empty)::before{content:" · "}
.infos__tel{white-space:nowrap}

@media(max-width:760px){
  .express__row{grid-template-columns:minmax(0,1fr) auto 48px;gap:.7rem}
  .express__field input{font-size:1rem;padding-right:.2em}
  /* bandeau : le jour seul, les deux services l'un sous l'autre,
     l'adresse sur toute la largeur, le point d'état calé sur la 1re ligne */
  .infos__today-word,.infos__today-word + [data-today-weekday]::before{display:none}
  .infos__svc{display:block}
  .infos__sep{display:none}
  .infos__cell:nth-child(2){grid-column:1/-1}
  .infos__big{font-size:1.15rem;line-height:1.25}
  .infos__status{align-items:flex-start;letter-spacing:.1em;line-height:1.5}
  .infos__dot{margin-top:.42em}
}


/* ============================================================
   F5 — LE MOUVEMENT : A · C · E
   A  la lumière de l'eau, fixe derrière la page (z-index -1)
   C  la braise, dans la section restaurant
   E  le néon, dans la section soirées
   Tout en transformations et opacité ; reduced-motion coupe tout.
   ============================================================ */

/* ---------- A · caustiques ---------- */
.water{position:fixed;inset:-10%;z-index:-1;pointer-events:none;opacity:.8;overflow:hidden}
.water i{position:absolute;border-radius:50%;filter:blur(2px);mix-blend-mode:screen;will-change:transform}
.water i:nth-child(1){width:60vmax;height:36vmax;left:-8%;top:8%;
  background:radial-gradient(closest-side,rgba(55,226,255,.26),rgba(55,226,255,0) 70%);
  animation:water-1 24s ease-in-out infinite alternate}
.water i:nth-child(2){width:48vmax;height:30vmax;right:-6%;top:34%;
  background:radial-gradient(closest-side,rgba(241,223,164,.2),rgba(241,223,164,0) 70%);
  animation:water-2 29s ease-in-out infinite alternate}
.water i:nth-child(3){width:70vmax;height:26vmax;left:14%;bottom:-6%;
  background:radial-gradient(closest-side,rgba(15,60,74,.9),rgba(15,60,74,0) 72%);
  animation:water-1 35s ease-in-out infinite alternate-reverse}
@media(min-width:900px){.water{filter:url(#water-filter)}}
@keyframes water-1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,-4vh,0) scale(1.12)}}
@keyframes water-2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-7vw,5vh,0) scale(.95)}}

/* ---------- C · braise ---------- */
.s-restaurant{overflow:hidden;
  background:radial-gradient(70% 45% at 50% 108%,rgba(224,116,58,.3) 0%,rgba(224,116,58,0) 70%)}
.s-restaurant > .wrap{z-index:1}
.heat{position:absolute;inset:auto 0 0 0;height:45%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(224,116,58,0),rgba(224,116,58,.08));
  mask-image:linear-gradient(180deg,transparent,#000);-webkit-mask-image:linear-gradient(180deg,transparent,#000)}
.embers{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.embers i{position:absolute;bottom:-6px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,#FFE6B0 0%,#E0743A 45%,rgba(224,116,58,0) 72%);
  opacity:0;animation:ember-rise var(--d) linear infinite;animation-delay:var(--delay);will-change:transform,opacity}
@keyframes ember-rise{
  0%{transform:translate3d(0,0,0) scale(.5);opacity:0}
  8%{opacity:.95}
  60%{opacity:.7}
  100%{transform:translate3d(var(--dx),-78vh,0) scale(1.15);opacity:0}
}

/* ---------- E · néon ---------- */
.s-soirees{background:linear-gradient(180deg,#1A1226 0%,rgba(11,11,18,0) 100%)}
.s-soirees > .wrap{z-index:1}
.neon-frame{position:absolute;inset:clamp(.6rem,1.8vw,1.6rem);z-index:0;pointer-events:none;border-radius:var(--radius);
  border:1px solid rgba(55,226,255,.5);
  box-shadow:0 0 10px rgba(55,226,255,.32),inset 0 0 10px rgba(55,226,255,.16);
  animation:neon-flicker 9s linear infinite}
@keyframes neon-flicker{0%,100%{opacity:1}3%{opacity:.35}4%{opacity:1}42%{opacity:1}43%{opacity:.5}44%{opacity:1}}
.bill__title{color:#fff;text-shadow:0 0 6px var(--neon),0 0 18px var(--neon),0 0 40px var(--neon)}
.bill__row::before{box-shadow:0 0 8px var(--neon)}
.countdown__event{color:#fff;text-shadow:0 0 6px var(--neon-cyan),0 0 16px var(--neon-cyan)}

/* ---------- Photos plein cadre sur téléphone : plus courtes, donc moins
   agrandies (la terrasse est un portrait, le bord de piscine un 16:9 qui
   devait couvrir 1,7 fois sa hauteur), et cadrées sur ce qui compte ---------- */
@media(max-width:760px){
  .pano__stage{min-height:0;height:clamp(380px,62svh,640px)}
  .pano__media img{object-position:center 82%}
  .bleed{height:clamp(380px,58svh,940px)}
  .bleed img{object-position:center 70%}
  .neon-frame{inset:.55rem}
}

@media(prefers-reduced-motion:reduce){
  .water{filter:none}
  .water i,.embers i,.neon-frame{animation:none}
  .embers{display:none}
}


/* ============================================================
   F6 — MOBILE, D'APRÈS CAPTURE : hero et bandeau
   ============================================================ */
.hero__pause{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.45rem .75rem;border:1px solid rgba(244,236,221,.32);border-radius:var(--radius);
  font-size:.66rem;letter-spacing:.16em;text-decoration:none;opacity:.75;
}
.hero__pause:hover{opacity:1;text-decoration:none}
.hero__pause-ico{font-size:.7em;letter-spacing:0;line-height:1}
.express__field select{text-overflow:ellipsis}

@media(max-width:760px){
  .hero__eyebrow-more{display:none}
  /* bandeau : libellés moins espacés, valeurs qui tiennent dans leur case */
  .infos__cell .label{letter-spacing:.2em}
  .infos__tel{font-size:1rem;letter-spacing:.01em}
  .infos__cell:nth-child(4) .infos__big{font-size:1.05rem}
  .infos__status{font-size:.68rem;letter-spacing:.06em}
  .infos__note{font-size:.72rem}
}
/* très petits écrans (360 px et moins) : tout sur une colonne */
@media(max-width:360px){
  .infos__grid{grid-template-columns:1fr}
  .infos__cell{grid-column:auto}
}


/* ---------- Espace grisé (pas de soirée ni de fête ce jour-là) ---------- */
.zone input:disabled+.zone__box{opacity:.42;cursor:not-allowed}
.zone input:disabled+.zone__box .zone__img img{filter:grayscale(1)}
.zone:has(input:disabled):hover .zone__box{border-color:var(--rule-now)}
.zone:has(input:disabled):hover .zone__img img{transform:none}


/* ============================================================
   F7 — LA CARTE ET LES SOIRÉES VIENNENT DE L'APPLICATION
   ============================================================ */
/* la photo d'ambiance d'une soirée, choisie ou envoyée par le restaurateur */
.bill__photo{
  float:right;margin:0 0 .6rem 1rem;width:72px;height:72px;overflow:hidden;
  border:1px solid var(--rule-now);border-radius:var(--radius);
}
.bill__photo[hidden]{display:none}
.bill__photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:820px){.bill__photo{width:104px;height:104px;margin-left:1.4rem}}

/* ---------- Piscine : la photo de jour, en 16:9 ----------
   Sur téléphone, la bande visible (45 % de la largeur) est cadrée sur la table
   du premier plan et le bassin ; sur un écran très large, qui rogne en hauteur,
   on garde le bassin plutôt que le ciel. */
.bleed picture{display:block;width:100%;height:100%}
.bleed img{object-position:62% 72%}

/* ============================================================
   HERO · BRIEF DU 30/09/2026
   Un décor fixe (la photo de nuit, le nom, l'accroche) et une actualité
   qui change (la prochaine soirée), puis une réassurance compacte.
   ============================================================ */
.hero__media img{object-position:52% 40%}
.hero__promise{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.45rem,2.6vw,2.15rem);line-height:1.2;
  color:var(--cream);max-width:24ch;margin:0 0 .55rem;
}
.hero__sub{
  font-weight:300;font-size:var(--fs-base);line-height:1.5;
  color:var(--cream-soft);max-width:40ch;margin:0 0 clamp(1.2rem,2.4vw,1.8rem);
}

/* Module soirée : un cartouche sombre, filet dans la couleur de la soirée
   (or tant qu'aucune n'est annoncée), et le bouton principal du hero. */
.hero-event{
  --neon:var(--gold);
  display:flex;align-items:center;flex-wrap:wrap;gap:.9rem 1.4rem;
  max-width:660px;padding:1rem 1.15rem;
  border:1px solid rgba(244,236,221,.24);border-left:2px solid var(--neon);
  border-radius:var(--radius);
  background:rgba(8,8,14,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 30px -14px var(--neon);
}
.hero-event__photo{flex:none;width:68px;height:68px;overflow:hidden;border-radius:var(--radius)}
.hero-event__photo[hidden]{display:none}
.hero-event__photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-event__body{flex:1 1 15rem;min-width:0}
.hero-event__label{
  display:flex;align-items:center;gap:.55rem;margin:0 0 .35rem;
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--neon);
}
.hero-event__dot{
  position:relative;flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--neon);box-shadow:0 0 10px var(--neon);
}
.hero-event[data-state="soiree"] .hero-event__dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--neon);
  animation:infos-pulse 1.8s var(--ease) infinite;
}
.hero-event__title{
  margin:0 0 .3rem;font-family:var(--font-display);
  font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.2;color:#fff;
  text-shadow:0 0 16px var(--neon);
}
.hero-event__title[hidden]{display:none}
.hero-event__text{margin:0;font-weight:300;font-size:var(--fs-sm);line-height:1.45;color:var(--cream-soft)}
.hero-event__cta{flex:none;white-space:nowrap}

/* Réassurance : une ligne discrète, qui passe sur deux au besoin. */
.hero__trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;
  margin:clamp(1rem,2vw,1.4rem) 0 0;
  font-size:var(--fs-xs);letter-spacing:.04em;line-height:1.5;color:var(--cream-soft);
}
.hero__score{font-weight:500;color:var(--cream);white-space:nowrap}
.hero__score .hero__rating-star{font-size:1.2em}
.hero__reviews{
  display:inline-flex;align-items:center;min-height:34px;padding:0 .8rem;
  border:1px solid rgba(244,236,221,.4);border-radius:999px;
  font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.hero__reviews:hover,.hero__reviews:focus-visible{border-color:var(--gold-bright);color:var(--gold-bright)}
.hero__trust-sep{opacity:.45}
.hero__today{white-space:normal}
.hero__tel{color:var(--cream);white-space:nowrap;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}

/* Écran debout : la photo carrée se pose en haut, l'enseigne entière ; le
   texte, calé en bas du hero, passe dessous sur un fond de nuit. */
@media(max-aspect-ratio:1/1){
  .hero{background:var(--bg)}
  .hero__media{inset:0 0 auto 0;height:auto;aspect-ratio:1/1}
  .hero__media img{object-position:50% 50%}
  .hero__media::before{display:none}
  .hero__media::after{
    background:linear-gradient(180deg,rgba(8,8,14,.5) 0%,rgba(8,8,14,0) 22%,rgba(8,8,14,0) 58%,rgba(11,11,18,.9) 88%,#0B0B12 100%);
  }
}

@media(max-width:640px){
  .hero-event{padding:.85rem .9rem;gap:.75rem}
  .hero-event__body{flex-basis:100%}
  .hero-event__cta{flex:1 1 auto;justify-content:center;text-align:center}
  .hero__promise{font-size:1.5rem}
  .hero__sub{font-size:var(--fs-sm);margin-bottom:1.1rem}
  .hero__trust{gap:.3rem .6rem}
}

/* Téléphone court (SE, petits Android) : l'enseigne ne doit pas passer sous le
   texte. Le surtitre s'efface, et le téléphone de la réassurance aussi : la
   barre du bas propose déjà « Appeler ». */
@media(max-aspect-ratio:1/1) and (max-height:700px){
  .hero__foot .eyebrow,.hero__tel,.hero__trust-sep--tel{display:none}
}
@media(max-aspect-ratio:1/1) and (max-height:660px){.hero__sub{display:none}}

/* Écran couché : l'enseigne occupe le haut de la photo (jusqu'à 40 % de sa
   hauteur), le texte doit tenir dessous. Le titre se règle sur la hauteur de
   l'écran, et sur un écran large le module et la réassurance partagent une
   rangée. Sans ça, sur un portable de 768 px de haut, le texte montait sur
   l'enseigne. */
@media(min-aspect-ratio:1/1){
  .hero__title{font-size:clamp(3.2rem,min(9vw,12.5vh),8rem);margin-bottom:.9rem}
  .hero__sub{margin-bottom:clamp(1rem,2.2vh,1.6rem)}
}
/* Portable bas (768, 720 px de haut) : moins de marge sous le texte, un titre
   et une accroche plus sobres. */
@media(min-aspect-ratio:1/1) and (max-height:820px){
  .hero{padding-bottom:2rem}
  .hero__title{font-size:clamp(3rem,11vh,7rem)}
  .hero__promise{font-size:clamp(1.3rem,4vh,1.8rem)}
}
@media(min-aspect-ratio:1/1) and (min-width:1000px){
  .hero__row{display:flex;align-items:flex-end;gap:clamp(1.6rem,3vw,3rem)}
  .hero__row .hero-event{flex:0 1 620px}
  .hero__row .hero__trust{flex:0 1 24rem;margin:0 0 .2rem}
}

/* ---------- Salle et cuisine : deux blocs dans la colonne du triptyque ---------- */
.tryptique__bloc + .tryptique__bloc{
  margin-top:clamp(2rem,4.5vw,3rem);padding-top:clamp(1.6rem,3.2vw,2.2rem);
  border-top:1px solid var(--rule-now);
}
@media(min-width:900px){
  .tryptique__text .section-title{font-size:clamp(2.2rem,4vw,3.7rem)}
}

/* ---------- Fêtes de fin d'année et privatisation ---------- */
.fetes{
  display:grid;gap:1.4rem clamp(2rem,6vw,5rem);
  padding-block:clamp(2.2rem,5vw,3.4rem);
  border-top:1px solid var(--rule-now);border-bottom:1px solid var(--rule-now);
}
@media(min-width:900px){.fetes{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end}}
.s-fetes{padding-block:clamp(2.5rem,6vw,4.5rem)}
.fetes .section-title{max-width:18ch;font-size:clamp(2rem,4.2vw,3.6rem);margin-bottom:0}
.fetes .lede{max-width:38ch;margin-bottom:1.6rem}
.fetes__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin:0}
.fetes__tel{font-family:var(--font-display);font-size:1.4rem;color:var(--gold-bright);white-space:nowrap}

/* ---------- Carte : une phrase d'introduction par onglet ---------- */
.menu__intro{
  margin:0 0 1.3rem;font-family:var(--font-display);
  font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.3;color:var(--gold-bright);
}

/* ---------- Bar : deux liens côte à côte (cocktails, boissons) ---------- */
/* « On boit un coup ? » est plus long que l'ancien titre : la colonne prend
   toute sa cellule, le titre reste sur deux lignes. */
.portrait__col{max-width:none}
#bar .section-title{font-size:clamp(2.6rem,5vw,4.6rem)}
.portrait__links{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;margin:1.8rem 0 0}
.portrait__links .link{margin-top:0;font-size:.8rem;letter-spacing:.14em}
@media(max-width:640px){
  .portrait__links{gap:.8rem 1rem}
  .portrait__links .link{font-size:.68rem;letter-spacing:.1em}
}