/* =========================================================================
   MAISON LUMIÈRE — Feuille de styles unique
   Design system : « Élégance sombre & or »
   Palette, typo et échelles : voir design-system/MASTER.md
   ========================================================================= */

/* ---------- 0. POLICES (auto-hébergées) ----------
   Cormorant Garamond et Inter sont servies depuis assets/fonts/ et non
   depuis les serveurs de Google : aucune adresse IP de visiteur ne part
   vers un tiers, et deux connexions externes disparaissent du chargement.
   Sous-ensemble « latin » uniquement — il couvre l'intégralite du francais,
   accents, ligature oe et symbole euro compris.
   Les deux familles sont diffusees sous licence SIL Open Font.
   ------------------------------------------------------------------ */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-400-italic.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+2074,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-400.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+2074,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-500.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+2074,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-600.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+2074,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/inter-400.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+2074,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/inter-500.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+2074,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/inter-600.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+2074,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Sprite d'icones : hors flux, sans attribut style= en ligne, ce qui
   permet une CSP stricte sans 'unsafe-inline'. */
.sprite{ position:absolute; }

/* ---------- 1. TOKENS ---------- */
:root{
  /* Couleurs */
  --ink:        #0A0A0B;
  --ink-2:      #0F0F11;
  --ink-3:      #16161A;
  --ink-4:      #1D1D22;
  --line:       #26262B;
  --line-gold:  rgba(201,162,39,.22);
  --gold:       #C9A227;
  --gold-2:     #E5C86B;
  --gold-dim:   rgba(201,162,39,.10);
  --cream:      #F4F1EA;
  --muted:      #A9A296;
  --wine:       #E0645B;
  --green:      #7FB069;

  /* Typo */
  --f-display: "Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle d'espacement (4/8) */  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-10: 128px;

  /* Rythme vertical des sections */
  --sec-y: clamp(72px, 9vw, 136px);
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1240px;

  /* Formes & profondeur */
  --r-1: 3px; --r-2: 6px; --r-3: 12px; --r-pill: 999px;
  --sh-2: 0 10px 30px -12px rgba(0,0,0,.7);
  --sh-3: 0 30px 70px -24px rgba(0,0,0,.85);

  /* Mouvement */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,0,.35,1);
  --t-fast: 160ms;
  --t-base: 280ms;

  /* Plans */
  --z-hdr: 100; --z-drawer: 200; --z-lb: 300; --z-totop: 90;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none!important; }
*{ margin:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  color-scheme:dark;
}
body{
  min-height:100svh;
  background:var(--ink);
  color:var(--cream);
  font:400 clamp(15px,.42vw + 14px,17px)/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
table{ border-collapse:collapse; width:100%; }
h1,h2,h3{ font-weight:400; line-height:1.08; }

:focus-visible{
  outline:2px solid var(--gold-2);
  outline-offset:3px;
  border-radius:2px;
}
::selection{ background:var(--gold); color:var(--ink); }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:-100px; left:16px; z-index:400;
  background:var(--gold); color:var(--ink);
  padding:12px 20px; border-radius:var(--r-1); font-weight:600;
  transition:top var(--t-base) var(--e-out);
}
.skip-link:focus{ top:16px; }

.ico{ width:1.15em; height:1.15em; flex:none; }

/* ---------- 3. PRIMITIVES ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--sec-y); position:relative; }

.h2{
  font-family:var(--f-display);
  font-size:clamp(34px,5.2vw,64px);
  font-weight:400; letter-spacing:-.015em; line-height:1.06;
  text-wrap:balance;
}
.h2 em{ font-style:italic; color:var(--gold-2); }

/* Intertitre de section, un cran sous .h2. */
.h3{
  font-family:var(--f-display);
  font-size:clamp(22px,1.9vw,28px); font-weight:500; letter-spacing:-.01em;
  line-height:1.15; color:var(--cream);
}

.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:var(--s-4);
}
.eyebrow__line{ width:38px; height:1px; background:currentColor; opacity:.55; flex:none; }

.lede{
  color:var(--muted); font-size:clamp(16px,.4vw + 15px,19px);
  line-height:1.7; max-width:60ch; margin-top:var(--s-5);
}
.lede--center{ margin-inline:auto; text-align:center; }
.muted{ color:var(--muted); }

.sec-head{ text-align:center; margin-bottom:var(--s-8); }
.sec-head .eyebrow{ justify-content:center; }

.grid-2{ display:grid; gap:clamp(40px,6vw,88px); align-items:center; }
@media (min-width:900px){
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-2--tight{ grid-template-columns:1fr 1.05fr; align-items:center; }
  .grid-2--form{ grid-template-columns:.9fr 1.1fr; align-items:start; }
}

.link{
  color:var(--gold-2); display:inline-flex; align-items:center; gap:6px;
  border-bottom:1px solid var(--line-gold); padding-bottom:1px;
  transition:border-color var(--t-fast), color var(--t-fast);
}
.link:hover{ border-color:var(--gold-2); color:#F2DFA4; }

/* Boutons */
.btn{
  --btn-h:56px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--btn-h); padding:0 30px; border-radius:var(--r-1);
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:color var(--t-base) var(--e-out), border-color var(--t-base), transform var(--t-fast) var(--e-out);
  touch-action:manipulation;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:translateY(101%); transition:transform 420ms var(--e-out);
}
.btn:active{ transform:scale(.985); }
.btn--sm{ --btn-h:44px; padding:0 20px; font-size:12px; }
.btn--block{ display:flex; width:100%; }

.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold::before{ background:var(--gold-2); }
.btn--gold:hover::before{ transform:translateY(0); }

.btn--ghost{ border:1px solid var(--line); color:var(--cream); }
.btn--ghost::before{ background:var(--cream); }
.btn--ghost:hover{ color:var(--ink); border-color:var(--cream); }
.btn--ghost:hover::before{ transform:translateY(0); }

.btn .ico{ transition:transform var(--t-base) var(--e-out); }
.btn:hover .ico{ transform:translateX(4px); }

.rnd{
  display:grid; place-items:center; width:48px; height:48px; border-radius:var(--r-pill);
  border:1px solid var(--line); color:var(--cream); background:rgba(10,10,11,.6);
  backdrop-filter:blur(6px);
  transition:background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-fast);
}
.rnd:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.rnd:active{ transform:scale(.94); }
.rnd:disabled{ opacity:.35; cursor:not-allowed; }
.rnd:disabled:hover{ background:rgba(10,10,11,.6); border-color:var(--line); color:var(--cream); }

/* ---------- 4. ANIMATIONS DE BASE ---------- */
.reveal{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity 760ms var(--e-out), transform 760ms var(--e-out);
  transition-delay:calc(var(--d,0) * 85ms);
}
.reveal.is-in{ opacity:1; transform:none; }

[data-split]{ }
[data-split] .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; }
[data-split] .w > span{
  display:inline-block; transform:translate3d(0,115%,0); opacity:0;
  transition:transform 900ms var(--e-out), opacity 700ms var(--e-out);
  transition-delay:calc(var(--i,0) * 55ms + 120ms);
}
[data-split].is-in .w > span{ transform:none; opacity:1; }

/* ---------- 5. EN-TÊTE ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:var(--z-hdr);
  padding-top:env(safe-area-inset-top);
  transition:background 400ms var(--e-out), border-color 400ms, backdrop-filter 400ms;
  border-bottom:1px solid transparent;
}
.hdr::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,10,11,.75), transparent);
  opacity:1; transition:opacity 400ms;
}
.hdr.is-stuck{
  background:rgba(10,10,11,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line);
}
.hdr.is-stuck::after{ opacity:0; }

.hdr{ transition:background 400ms var(--e-out), border-color 400ms; }

.hdr__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:14px var(--gutter);
  display:flex; align-items:center; gap:var(--s-5);
  transition:padding 400ms var(--e-out);
}
.hdr.is-stuck .hdr__inner{ padding-block:9px; }

.hdr__progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:scaleX(0); transform-origin:0 50%;
  opacity:0; transition:opacity 300ms;
}
.hdr.is-stuck .hdr__progress{ opacity:1; }

.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
/* Version simplifiee du logo dans l'en-tete : uniquement le lettrage, donc
   lisible a petite taille. Le logo complet reste en pied de page. */
.brand__logo{
  display:block; width:auto; height:clamp(30px, 3.4vw, 40px);
  transition:height 400ms var(--e-out);
}
.hdr.is-stuck .brand__logo{ height:clamp(26px, 3vw, 34px); }

.nav{ display:none; }
@media (min-width:1080px){ .nav{ display:block; } }
.nav__list{ display:flex; gap:var(--s-6); }
.nav__list a{
  position:relative; display:block; padding:8px 0;
  font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--cream);
  transition:color var(--t-base);
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:2px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform 420ms var(--e-out);
}
.nav__list a:hover{ color:var(--gold-2); }
.nav__list a:hover::after,
.nav__list a.is-active::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav__list a.is-active{ color:var(--gold-2); }

.hdr__actions{ display:flex; align-items:center; gap:var(--s-3); }
.hdr__tel{
  display:none; align-items:center; gap:8px; padding-block:8px;
  font-size:13px; letter-spacing:.05em; color:var(--muted);
  transition:color var(--t-base);
}
.hdr__tel:hover{ color:var(--gold-2); }
@media (min-width:760px){ .hdr__tel{ display:flex; } }
.hdr__actions .btn{ display:none; }
@media (min-width:560px){ .hdr__actions .btn{ display:inline-flex; } }

.burger{
  display:grid; place-items:center; width:46px; height:46px;
  border:1px solid var(--line); border-radius:var(--r-1); color:var(--cream);
  transition:border-color var(--t-base), color var(--t-base);
}
.burger .ico{ width:22px; height:22px; }
.burger:hover{ border-color:var(--gold); color:var(--gold); }
@media (min-width:1080px){ .burger{ display:none; } }

/* ---------- 6. MENU MOBILE ---------- */
.drawer{ position:fixed; inset:0; z-index:var(--z-drawer); }
.drawer__scrim{
  position:absolute; inset:0; background:rgba(5,5,6,.72);
  backdrop-filter:blur(3px); opacity:0; transition:opacity 340ms var(--e-out);
}
.drawer__panel{
  position:absolute; inset:0 0 0 auto; width:min(420px,100%);
  background:var(--ink-2); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 20px) 28px calc(env(safe-area-inset-bottom) + 28px);
  transform:translate3d(100%,0,0); transition:transform 460ms var(--e-out);
  overflow-y:auto; overscroll-behavior:contain;
}
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer.is-open .drawer__panel{ transform:none; }

.drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-7); }
.drawer__title{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }
.drawer__close{
  display:grid; place-items:center; width:46px; height:46px; margin-right:-10px;
  border:1px solid var(--line); border-radius:var(--r-1); color:var(--cream);
  transition:border-color var(--t-base), color var(--t-base);
}
.drawer__close .ico{ width:20px; height:20px; }
.drawer__close:hover{ border-color:var(--gold); color:var(--gold); }

.drawer__list li + li{ border-top:1px solid var(--line); }
.drawer__list a{
  display:flex; align-items:baseline; gap:16px; min-height:64px; padding:14px 0;
  font-family:var(--f-display); font-size:30px; letter-spacing:.01em;
  transition:color var(--t-base), padding-left var(--t-base) var(--e-out);
}
.drawer__list a:hover{ color:var(--gold-2); padding-left:8px; }
.drawer__num{ font-family:var(--f-body); font-size:10px; letter-spacing:.2em; color:var(--gold); }

.drawer__foot{ margin-top:auto; padding-top:var(--s-7); }
.drawer__addr{ margin-top:var(--s-4); font-size:14px; color:var(--muted); text-align:center; }

/* ---------- 7. HERO ---------- */
/* Le texte se pose DANS la video, pas en dessous. Pour cela le hero epouse la
   hauteur du cadre 16:9 (56.25vw) au lieu de celle de l'ecran : la video le
   remplit alors entierement, sans rognage lateral, et le bloc de texte occupe
   la colonne libre de gauche. Sur un ecran 16:9 les deux coincident et le hero
   fait bien 100% de la hauteur. max() garantit qu'il grandit si le contenu
   depasse, plutot que de le rogner. */
.hero{
  position:relative;
  min-height:max(520px, min(100svh, 56.25vw));
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(env(safe-area-inset-top) + 92px) 0 clamp(32px,5vh,60px);
  overflow:hidden;
}
.hero__media{
  position:absolute; top:0; left:0; right:0; height:100%;
  z-index:-2; background:var(--ink);
}

.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 38%;
  background:var(--ink);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--ink) 3%, rgba(10,10,11,.93) 24%, rgba(10,10,11,.30) 45%, transparent 62%),
    linear-gradient(to bottom, rgba(10,10,11,.62) 0%, transparent 15%);
}
/* Le texte occupe la gauche, la pizza le centre : on assombrit une colonne
   plutot que toute la largeur, pour asseoir le texte sans noyer le sujet. */
@media (min-width:1025px), (min-width:900px) and (orientation:landscape){
  .hero__video{ object-position:center 42%; }
  .hero__veil{
    background:
      linear-gradient(to right, rgba(10,10,11,.86) 0%, rgba(10,10,11,.70) 14%, rgba(10,10,11,.42) 26%, rgba(10,10,11,.14) 40%, transparent 54%),
      linear-gradient(to top, var(--ink) 0%, rgba(10,10,11,.88) 9%, rgba(10,10,11,.30) 22%, transparent 40%),
      linear-gradient(to bottom, rgba(10,10,11,.55) 0%, transparent 18%);
  }
}
.hero__grain{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.hero__body{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  /* halo discret : garantit la lisibilite si un element clair de la video
     passe derriere le texte, sans assombrir davantage l'image */
  text-shadow:0 1px 22px rgba(10,10,11,.72), 0 1px 3px rgba(10,10,11,.45);
}
/* Le rognage plein ecran entame les bords : sur un 16:10 on perd ~8% de chaque
   cote. Le bloc de texte reste donc dans une colonne etroite, calee a gauche. */
@media (min-width:1025px), (min-width:900px) and (orientation:landscape){
  /* La video est pleine largeur, pas le reste du site. Centrer le bloc dans la
     colonne de 1240px le faisait deriver vers le milieu des que l'ecran
     depassait ~1370px : a 2000px il demarrait a 25% de la largeur et venait
     buter sur le lettrage, puis sur la pizza.
     La marge suit donc l'alignement du site — meme axe que le logo — jusqu'a
     164px, valeur atteinte a 1440px, puis se fige. Au-dela, le bloc reste cale
     a gauche pendant que la video continue de s'etaler. */
  .hero__body{
    max-width:none; margin-inline:0;
    padding-inline:clamp(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter)), 164px);
  }
  .hero__body > *{ max-width:min(440px, 33vw); }
  .hero__facts{ max-width:min(440px, 33vw); }
  .hero .eyebrow{ font-size:11px; letter-spacing:.3em; margin-bottom:var(--s-4); }
  .hero .eyebrow .eyebrow__line{ width:56px; opacity:.75; }
}
/* Le titre porte a lui seul le niveau haut de la hierarchie : sans lui, rien
   dans la colonne ne depassait 15px et l'oeil sautait le bloc pour aller au
   lettrage. Serif d'affichage, interlettrage negatif, accent italique or. */
.hero__title{
  font-family:var(--f-display); font-weight:400; color:var(--cream);
  font-size:clamp(34px, 3.4vw, 62px); line-height:1.03; letter-spacing:-.018em;
  margin-top:var(--s-2);
}
.hero__title em{ font-style:italic; color:var(--gold-2); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }
@media (min-width:1025px), (min-width:900px) and (orientation:landscape){
  /* Le lettrage mord sur la colonne des ~34% de la largeur. Sur une seule
     ligne, le lien secondaire finissait a 40% entre 1255 et 1700px : il se
     posait sur la volute du « A ». Il passe donc systematiquement a la ligne,
     ce qui le maintient dans la colonne quelle que soit la taille d'ecran. */
  .hero__cta{
    flex-direction:column; align-items:flex-start;
    gap:22px; margin-top:clamp(26px,3.2vh,40px);
  }
  .hero__cta .btn--gold{ padding:0 24px; letter-spacing:.12em; }
  .hero__cta .btn--ghost{
    min-height:24px; padding:0; border:0; background:none; overflow:visible;
    font-size:11px; letter-spacing:.14em; color:var(--cream);
  }
  .hero__cta .btn--ghost::before{ display:none; }
  .hero__cta .btn--ghost::after{
    content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px;
    background:rgba(201,162,39,.55); transition:background var(--t-base);
  }
  .hero__cta .btn--ghost:hover{ color:var(--gold-2); border-color:transparent; }
  .hero__cta .btn--ghost:hover::after{ background:var(--gold-2); }
}

.hero__facts{
  display:grid; gap:var(--s-4); margin-top:clamp(24px,4vh,46px);
  padding-top:var(--s-5); border-top:1px solid rgba(244,241,234,.14);
}
@media (max-width:719px){
  /* Format compact : la ligne d'infos doit rester au-dessus de la ligne de flottaison */
  .hero__facts{ gap:var(--s-3); margin-top:var(--s-5); padding-top:var(--s-4); }
  .fact{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .fact dt{ margin-bottom:0; }
  .fact dd{ font-size:14px; }
}
.fact dt{
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin-bottom:6px;
}
.fact dd{ font-size:15px; color:#DCD6C9; }
.fact dd strong{ color:var(--cream); font-weight:600; }
.fact sup{ font-size:.65em; }

@media (min-width:1025px), (min-width:900px) and (orientation:landscape){
  /* Un filet or court, repris du sur-titre : il ouvre le bloc d'informations
     sans creer de second axe d'alignement — tout reste cale sur la meme
     verticale que le titre. */
  .hero__facts{
    position:relative; margin-top:clamp(30px,4.6vh,54px);
    border-top:0; padding:clamp(24px,3vh,34px) 0 0; gap:var(--s-4);
  }
  .hero__facts::before{
    content:""; position:absolute; top:0; left:0;
    width:56px; height:1px; background:var(--gold); opacity:.75;
  }
  .hero__facts .fact dt{ font-size:10px; letter-spacing:.24em; margin-bottom:5px; }
  .hero__facts .fact dd{ font-size:16.5px; line-height:1.35; color:var(--cream); }
  .hero__facts .fact dd strong{
    font-family:var(--f-display); font-weight:500; font-size:1.4em;
    line-height:1; color:var(--gold-2);
  }
}

.hero__tools{
  position:absolute; right:var(--gutter); bottom:clamp(36px,6vh,76px);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-4);
}
.hero__toggle{ width:44px; height:44px; }
.hero__toggle .ico{ width:16px; height:16px; }
.hero__toggle .ico--play{ display:none; }
.hero__toggle[aria-pressed="true"] .ico--pause{ display:none; }
.hero__toggle[aria-pressed="true"] .ico--play{ display:block; }

.hero__scroll{
  display:none; flex-direction:column; align-items:center; gap:12px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  writing-mode:vertical-rl;
  transition:color var(--t-base);
}
.hero__scroll:hover{ color:var(--gold-2); }
@media (min-width:1025px), (min-width:900px) and (orientation:landscape){ .hero__scroll{ display:flex; } }
.hero__scroll-line{ width:1px; height:64px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; inset:0 0 auto; height:22px; background:var(--gold-2);
  animation:scrollDot 2.4s var(--e-io) infinite;
}
@keyframes scrollDot{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} }

/* Sous 900px en portrait, c'est le montage vertical qui est charge : le hero
   reste plein ecran, le sujet occupe le haut, le texte se pose dans le bas. */
@media (max-width:899px), (max-width:1024px) and (orientation:portrait){
  /* Meme principe que sur grand ecran : le hero epouse la video au lieu de
     l'ecran. 114vw coupe le cadre vertical juste sous la planche, la table
     n'apparait pas, et rien n'est rogne sur les cotes — le lettrage reste
     entier. Le bloc de texte remonte ensuite sur le bas de l'image, que le
     degrade a fondu en noir : il se lit comme integre a la video. */
  .hero{
    min-height:0;
    justify-content:flex-start;
    padding:calc(env(safe-area-inset-top) + 72px) 0 clamp(32px,5vh,56px);
  }
  .hero__media{
    position:relative; inset:auto; z-index:0;
    /* 114vw place la coupe a 64% de la video : c'est le creux de luminance,
       juste sous la planche. Au-dela, la table eclairee reapparait et laisse
       une bande claire (mesure : 12 a 64%, 34-50 entre 67% et 79%). */
    height:114vw; width:100%;
  }
  .hero__video{ object-position:center top; }
  /* Fondu court et bas : il noie la table sans mordre sur la pizza. Un voile
     leger en haut assoit les boutons sur le noir du cadre. */
  .hero__veil{
    background:
      linear-gradient(to top, rgba(10,10,11,.72) 0%, rgba(10,10,11,.24) 3%, transparent 6.5%),
      linear-gradient(to bottom, rgba(10,10,11,.62) 0%, rgba(10,10,11,.28) 26%, transparent 42%);
  }
  /* position + z-index : sans quoi le media, qui est positionne, recouvrirait
     la premiere ligne du titre remontee par la marge negative. */
  /* Le haut-gauche du cadre vertical est noir : on y pose les deux boutons et
     l'horaire du jour, par-dessus la video. Le titre n'est pas affiche — le
     lettrage de la video porte deja le message — mais reste dans le document
     pour les moteurs de recherche et les lecteurs d'ecran. */
  .hero__body{
    position:absolute; z-index:1; margin-top:0;
    top:calc(env(safe-area-inset-top) + 72px); left:0; right:0;
    /* Centre le bloc dans la portion de cadre situee AU-DESSUS du lettrage :
       le lettrage demarre vers 85vw. Le bloc est aligne sur le bas de cette
       zone : il descend dans le cadre sans jamais mordre sur le sujet. */
    height:87vw;
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  /* Colonne de gauche : le bloc ne mord pas sur le lettrage, qui occupe la
     moitie droite du cadre. */
  .hero__body > *{ max-width:min(58%, 240px); }
  /* Le sur-titre s'aligne sur la largeur du bouton principal : corps et
     interlettrage reduits, filet raccourci, pour tenir sur une ligne sans le
     depasser. */
  .hero .eyebrow{
    max-width:none; width:fit-content; gap:9px; margin-bottom:var(--s-3);
    font-size:9px; letter-spacing:.12em;
  }
  .hero .eyebrow .eyebrow__line{ width:18px; }
  /* Empiles et a leur largeur naturelle : les libelles tiennent sur une ligne
     et le bloc reste cale a gauche, dans le noir du haut du cadre. */
  /* Le lettrage de la video porte deja le message dans le cadre vertical : le
     titre reste dans le document pour les moteurs et les lecteurs d'ecran,
     mais n'est pas affiche. */
  .hero__title{
    position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .hero__cta{ margin-top:0; gap:var(--s-2); flex-direction:column; align-items:flex-start; }
  .hero__cta .btn{ --btn-h:44px; padding:0 18px; font-size:10.5px; letter-spacing:.11em; white-space:nowrap; }
  .hero__cta .btn .ico{ width:14px; height:14px; }
  /* Les trois informations tiennent en colonne sous les boutons, dans la
     portion de cadre situee au-dessus du lettrage. Interlignes resserres. */
  .hero__facts{
    margin-top:var(--s-3); padding-top:var(--s-2); gap:var(--s-2);
    border-top-color:rgba(244,241,234,.18);
  }
  .hero__facts .fact{ display:block; }
  .hero__facts .fact dt{ margin-bottom:2px; font-size:9.5px; letter-spacing:.16em; }
  .hero__facts .fact dd{ font-size:12.5px; line-height:1.35; }
  .hero__tools{ bottom:auto; top:calc(env(safe-area-inset-top) + 80px); }
  .hero__scroll{ display:none; }
}

/* ---------- Tablettes en portrait (720-1024px) ----------
   Le montage vertical est charge comme sur telephone, mais la place double :
   les reglages compresses du format telephone — colonne de 240px, sur-titre de
   9px, boutons de 10,5px — laissaient un bloc minuscule perdu dans un grand
   cadre, et la rangee d'informations, mise sur trois colonnes dans ces 240px,
   se brisait mot par mot. Tout est remis a l'echelle de l'ecran. */
@media (min-width:720px) and (max-width:1024px) and (orientation:portrait){
  /* Le lettrage demarre a 68% de la hauteur du cadre, soit 78vw. La zone du
     bloc s'arrete donc a 75vw : le texte se pose juste au-dessus, sans jamais
     mordre dessus, quelle que soit la diagonale de la tablette. */
  .hero__body{ height:calc(75vw - 72px); }
  .hero__body > *{ max-width:min(64%, 430px); }
  .hero .eyebrow{
    max-width:none; width:fit-content; gap:14px; margin-bottom:var(--s-4);
    font-size:11px; letter-spacing:.26em;
  }
  .hero .eyebrow .eyebrow__line{ width:48px; }
  /* Au-dessus du lettrage la hauteur ne manque pas : le titre reprend sa place
     et le bloc retrouve le meme niveau haut de hierarchie que sur ordinateur. */
  .hero__title{
    position:static!important; width:auto; height:auto; margin:0; padding:0;
    overflow:visible; clip:auto; clip-path:none; white-space:normal;
    font-size:clamp(30px, 4.4vw, 40px);
  }
  .hero__cta{ gap:14px; margin-top:var(--s-5); }
  .hero__cta .btn{ --btn-h:52px; padding:0 24px; font-size:12px; letter-spacing:.12em; }
  .hero__cta .btn .ico{ width:16px; height:16px; }
  .hero__facts{
    grid-template-columns:1fr; gap:var(--s-3);
    margin-top:var(--s-4); padding-top:var(--s-3);
  }
  .hero__facts .fact dt{ font-size:10px; letter-spacing:.2em; margin-bottom:4px; }
  .hero__facts .fact dd{ font-size:15px; line-height:1.4; }
}

/* Ecrans courts (iPhone SE et assimiles) : sans resserrage, les boutons
   passeraient sous la ligne de flottaison. La video cede la place. */
@media (max-width:899px) and (max-height:740px){
  .hero{ padding-top:calc(env(safe-area-inset-top) + 58px); }
  .hero__body{ top:calc(env(safe-area-inset-top) + 74px); }
}


/* ---------- Statut d'ouverture ----------
   La ligne « Aujourd'hui » ne dit plus les horaires du jour mais l'etat reel a
   l'heure ou on regarde : ouvert, bientot ferme, a emporter, ferme. */
.pastille{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-right:9px; vertical-align:middle; position:relative; top:-1px;
  background:var(--muted);
}
[data-etat="ouvert"] .pastille{ background:#6FBF73; box-shadow:0 0 0 3px rgba(111,191,115,.16); }
[data-etat="bientot"] .pastille,
[data-etat="emporter"] .pastille{ background:var(--gold-2); box-shadow:0 0 0 3px rgba(229,200,107,.16); }
[data-etat="ferme"] .pastille{ background:#8A8A93; }
.statut{
  display:flex; align-items:center; margin-bottom:var(--s-3);
  font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--cream);
}
.statut[data-etat="ferme"]{ color:var(--muted); font-weight:500; }
.hours__note{ margin-top:var(--s-3); font-size:12.5px; }

/* ---------- Actions directes ----------
   Appeler, WhatsApp, itineraire : les trois gestes qui transforment un visiteur
   en client. Traites comme des boutons a filet, pas comme des liens de texte. */
.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s-4); }
.action{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 16px; border-radius:var(--r-pill);
  border:1px solid var(--line); color:var(--cream);
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:border-color var(--t-base), color var(--t-base), background var(--t-base);
  touch-action:manipulation;
}
.action .ico{ width:16px; height:16px; color:var(--gold); transition:color var(--t-base); }
.action:hover{ border-color:var(--gold); color:var(--gold-2); background:var(--gold-dim); }
.action:hover .ico{ color:var(--gold-2); }

/* ---------- Barre de contact rapide (mobile) ----------
   Fixee en bas, elle n'apparait qu'une fois le hero passe : avant, les boutons
   du hero suffisent et la barre ne ferait que masquer la video. */
.quickbar{
  position:fixed; z-index:60; left:0; right:0;
  bottom:calc(env(safe-area-inset-bottom) + 0px);
  display:none; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,10,11,.94); border-top:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transform:translateY(110%); transition:transform 420ms var(--e-out);
}
.quickbar.is-on{ transform:none; }
.quickbar__b{
  flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:46px; padding:0 8px; border-radius:var(--r-1);
  border:1px solid var(--line); color:var(--cream);
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; touch-action:manipulation;
}
.quickbar__b .ico{ width:16px; height:16px; flex:none; }
.quickbar__b--gold{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
@media (max-width:719px){
  .quickbar{ display:flex; }
  /* La barre fixe recouvrait les 67 derniers pixels de la page — donc les liens
     legaux, qui sont le tout dernier bloc. On reserve la hauteur. */
  body.quickbar-on{ padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
  /* Le bouton « haut de page » se cale au-dessus de la barre. */
  body.quickbar-on .totop{ bottom:calc(env(safe-area-inset-bottom) + 78px); }
}
@media (prefers-reduced-motion:reduce){
  .quickbar{ transition:none; }
}

/* Envoi impossible : distinct des erreurs de saisie, qui sont, elles, corrigeables. */
.errsum--net{ margin-bottom:var(--s-5); }
.errsum--net p{ margin-top:8px; }

/* ---------- Groupes & événements ---------- */
.evenements{ background:var(--ink-2); border-block:1px solid var(--line); }
.evt__txt > p{ color:var(--muted); margin-top:var(--s-4); max-width:52ch; }
/* Trois cartes bordees plutot qu'une liste : elles repondent aux cartes des
   soirees, dans l'autre colonne de la meme section. Deux par ligne sur
   telephone, ou une colonne unique etirait le bloc pour rien. */
.evt__chiffres{
  display:grid; gap:10px; margin-top:var(--s-6);
  grid-template-columns:repeat(2,1fr);
}
.evt__chiffres > div{
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-2);
  background:var(--ink-3);
  transition:border-color 360ms var(--e-out);
}
.evt__chiffres > div:hover{ border-color:var(--line-gold); }
/* Le stationnement n'a pas de chiffre : il prend la largeur restante. */
.evt__chiffres > div:last-child{ grid-column:1 / -1; }
@media (min-width:760px){
  .evt__chiffres{ grid-template-columns:repeat(3,1fr); }
  .evt__chiffres > div:last-child{ grid-column:auto; }
}
.evt__chiffres dt{
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.evt__chiffres dt .ico{ width:15px; height:15px; }
.evt__chiffres dd{ font-size:15px; color:#DCD6C9; }
.evt__chiffres dd strong{
  font-family:var(--f-display); font-size:1.9em; font-weight:500;
  line-height:1; color:var(--gold-2); margin-right:4px;
}
.evt__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-5); margin-top:var(--s-6); }
/* Un bouton plein, un lien souligne : deux cadres cote a cote se disputeraient
   le regard, et passeraient a la ligne dans une colonne de cette largeur. */
.lien-souligne{
  /* 24 px de haut minimum : c'est le seuil WCAG 2.2 pour une cible de pointage
     autonome. La hauteur vient du remplissage, l'aspect ne change pas. */
  position:relative; display:inline-flex; align-items:center; min-height:24px;
  padding-bottom:5px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream); transition:color var(--t-base);
}
.lien-souligne::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(201,162,39,.55); transition:background var(--t-base);
}
.lien-souligne:hover{ color:var(--gold-2); }
.lien-souligne:hover::after{ background:var(--gold-2); }
.evt__soirees > p{ margin-top:var(--s-4); max-width:48ch; }

.soirees{ display:grid; gap:12px; margin-top:var(--s-5); }
.soiree{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-2);
  background:var(--ink-3);
  transition:border-color 360ms var(--e-out), transform 360ms var(--e-out);
}
.soiree:hover{ border-color:var(--line-gold); transform:translateY(-2px); }
.soiree__ico{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border-radius:50%; border:1px solid var(--line-gold); color:var(--gold);
}
.soiree__ico .ico{ width:16px; height:16px; }
.soiree strong{ display:block; font-size:14.5px; color:var(--cream); font-weight:600; }
.soiree span{ display:block; margin-top:3px; font-size:13px; color:var(--muted); line-height:1.5; }
.evt__note{ margin-top:var(--s-5); font-size:13px; color:var(--muted); }

/* ---------- Questions fréquentes ----------
   <details> natif : ouverture au clavier, lisible par les lecteurs d'ecran,
   et zero ligne de JavaScript. */
.faq{ background:var(--ink-2); border-top:1px solid var(--line); }
.faq__list{ max-width:820px; margin-inline:auto; }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__i summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:56px; padding:16px 0; cursor:pointer; list-style:none;
  font-family:var(--f-display); font-size:clamp(18px,1.5vw,21px); font-weight:500;
  color:var(--cream); transition:color var(--t-base);
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary:hover{ color:var(--gold-2); }
.faq__chev{
  width:18px; height:18px; flex:none; color:var(--gold);
  transform:rotate(90deg); transition:transform 320ms var(--e-out);
}
.faq__i[open] > summary{ color:var(--gold-2); }
.faq__i[open] .faq__chev{ transform:rotate(-90deg); }
.faq__a{ padding:0 0 20px; }
.faq__a p{ color:var(--muted); font-size:14.5px; line-height:1.7; max-width:68ch; }
.faq__i[open] .faq__a{ animation:faqIn 320ms var(--e-out) both; }
@keyframes faqIn{ from{ opacity:0; transform:translate3d(0,-6px,0); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .faq__chev{ transition:none; }
  .faq__i[open] .faq__a{ animation:none; }
}

/* ---------- Pages satellites ----------
   Carte, privatisation, soirees : meme charte, meme en-tete, meme pied de page.
   Elles n'ont pas de video : un en-tete typographique tient lieu de hero. */
.page-int{ padding-top:0; }
.page-hero{
  background:var(--ink); border-bottom:1px solid var(--line);
  padding-block:calc(env(safe-area-inset-top) + 132px) var(--s-8);
}
.page-hero__t{
  font-family:var(--f-display); font-weight:400; color:var(--cream);
  font-size:clamp(38px,5.4vw,68px); line-height:1.04; letter-spacing:-.018em;
  margin-top:var(--s-4); text-wrap:balance;
}
.page-hero .lede{ max-width:56ch; }
.page-hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-5); margin-top:var(--s-6); }

.miettes ol{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.miettes li{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.miettes li + li::before{ content:"/"; margin-right:10px; opacity:.5; }
.miettes a{ color:var(--gold); transition:color var(--t-base); }
.miettes a:hover{ color:var(--gold-2); }
.miettes [aria-current]{ color:var(--cream); }

.carte-page{ background:var(--ink-2); }
.carte-page__t{ margin-bottom:var(--s-6); }
.carte-page .cartes-cols + .h2{ margin-top:var(--s-8); }
.carte-page .drink h3{ font-size:15.5px; font-weight:500; color:var(--cream); line-height:1.35; }
.sec-head__lien{ margin-top:var(--s-5); }
.soirees--large .soiree{ padding:20px 22px; }
@media (min-width:760px){ .soirees--large{ grid-template-columns:repeat(3,1fr); align-items:start; } }

/* Piege a robots : hors de l'ecran plutot que display:none, que certains
   robots detectent. Retire du parcours au clavier et de l'arbre d'accessibilite. */
.piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Mention d'information du formulaire — remplace une case a cocher qui
   demandait un consentement la ou la loi n'en exige pas. */
.rgpd{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; margin-bottom:var(--s-5);
  border:1px solid var(--line); border-radius:var(--r-2); background:var(--ink-3);
  font-size:13px; line-height:1.6; color:var(--muted);
}
.rgpd .ico{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--gold); }

/* ---------- Pages légales ----------
   Du texte long, lu au besoin : une seule colonne etroite, des intertitres
   nettement detaches, et un reperage visuel de ce qui reste a completer. */
.legal{ background:var(--ink-2); }
.legal__corps{ max-width:760px; margin-inline:auto; }
.legal__corps h2{
  font-family:var(--f-display); font-size:clamp(21px,2vw,27px); font-weight:500;
  color:var(--cream); margin:var(--s-7) 0 var(--s-4); padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.legal__corps h2:first-child{ margin-top:0; }
.legal__corps p{ color:#C9C3B8; font-size:15px; line-height:1.75; margin-bottom:var(--s-4); }
.legal__corps strong{ color:var(--cream); font-weight:600; }

.legal__resume{
  padding:18px 22px; margin-bottom:var(--s-6);
  border:1px solid var(--line-gold); border-radius:var(--r-2); background:var(--gold-dim);
}
.legal__resume p{ margin:0; color:#E6DCC0; }

.legal__fiche{ display:grid; gap:0; }
.legal__fiche > div{
  display:grid; gap:2px 20px; padding:11px 0; border-bottom:1px solid var(--line);
}
@media (min-width:560px){ .legal__fiche > div{ grid-template-columns:230px 1fr; align-items:baseline; } }
.legal__fiche dt{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.legal__fiche dd{ color:#DCD6C9; font-size:15px; font-variant-numeric:tabular-nums; }

.legal__table{ width:100%; border-collapse:collapse; margin-bottom:var(--s-4); font-size:14px; }
.legal__table th, .legal__table td{
  text-align:left; vertical-align:top; padding:12px 14px 12px 0;
  border-bottom:1px solid var(--line); color:#C9C3B8;
}
.legal__table th{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600;
}
.legal__liste{ margin:0 0 var(--s-4); padding-left:20px; list-style:disc; }
.legal__liste li{ color:#C9C3B8; font-size:15px; line-height:1.75; margin-bottom:10px; }
.legal__liste::marker, .legal__liste li::marker{ color:var(--gold); }

/* Ce qui n'est pas encore renseigne doit se voir, pas se fondre dans le texte. */
.legal__note{
  padding:12px 16px; border-left:2px solid var(--gold);
  background:rgba(201,162,39,.06); font-size:13.5px !important; font-style:italic;
}
.a-completer{
  background:var(--gold); color:var(--ink); padding:1px 8px; border-radius:var(--r-pill);
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  font-style:normal; white-space:nowrap;
}
.legal__maj{ margin-top:var(--s-7); font-size:13px !important; color:var(--muted) !important; }

/* ---------- 20. IMPRESSION ----------
   Un seul bloc : deux @media print concurrents se contredisaient sur le
   traitement des liens. Sert aussi bien la page carte que l'accueil, ou tous
   les onglets sont deplies pour que la carte s'imprime en entier. */
@media print{
  .hdr, .drawer, .drawer__scrim, .quickbar, .totop, .lb, .ftr,
  .hero__scroll, .marquee, .avis__nav, .gal__ov, .pager,
  .page-hero__cta, .miettes, .skip-link{ display:none !important; }
  body{ background:#fff; color:#111; }
  .section{ padding-block:24px; break-inside:avoid; }
  .carte-page, .page-hero{ background:#fff; border:0; }
  /* Tous les onglets deplies : la carte s'imprime d'un bloc. */
  .panel[hidden], .subpanel[hidden]{ display:block !important; }
  .dish[hidden]{ display:list-item !important; }
  .page-hero__t, .h2, .h3, .drink h3, .dish h3, .dish h4, .groupe__t{ color:#111; }
  .lede, .drink p, .dish p, .panel__note, .muted{ color:#444; }
  .dish__price{ color:#111; }
  .dish__dots{ background-image:radial-gradient(circle,#bbb 1px,transparent 1px); }
  .groupe__t{ border-bottom-color:#ccc; }
  .drinks > li + li, .dishes > li + li{ border-top-color:#e4e4e4; }
  .cartes-cols{ columns:2; }
  .groupe{ break-inside:avoid; }
  /* Pas d'URL recopiee derriere chaque lien : le document doit rester lisible. */
  a[href]::after{ content:"" !important; }
}

/* ---------- 8. BANDEAU DÉFILANT ---------- */
.marquee{
  position:relative;
  border-block:1px solid var(--line); background:var(--ink-2);
  overflow:hidden; padding-block:18px;
}
/* La duree est ajustee par palier : la serie retrecit avec le corps du texte
   sur petit ecran, une duree unique la ferait ramper. Vise ~45 px/s partout. */
.marquee__track{ display:flex; width:max-content; animation:marq 28s linear infinite; }
@media (max-width:719px){ .marquee__track{ animation-duration:19s; } }
.marquee:hover .marquee__track,
.marquee.is-paused .marquee__track{ animation-play-state:paused; }

/* Discret au repos, lisible au survol et au clavier : le bandeau reste decoratif. */
.marquee__stop{
  position:absolute; z-index:2; right:10px; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:rgba(10,10,11,.7); color:var(--muted);
  opacity:.35; transition:opacity var(--t-base), color var(--t-base), border-color var(--t-base);
  touch-action:manipulation;
}
.marquee:hover .marquee__stop,
.marquee__stop:focus-visible,
.marquee.is-paused .marquee__stop{ opacity:1; color:var(--gold-2); border-color:var(--line-gold); }
.marquee__stop .ico{ width:13px; height:13px; }
.marquee__stop .ico--play{ display:none; }
.marquee__stop[aria-pressed="true"] .ico--pause{ display:none; }
.marquee__stop[aria-pressed="true"] .ico--play{ display:block; }
.marquee__set{ display:flex; align-items:center; gap:0; padding-right:0; }
.marquee b{
  display:inline-flex; align-items:center; gap:13px;
  font-family:var(--f-display); font-size:clamp(19px,2.2vw,28px); font-weight:400;
  letter-spacing:.01em; color:var(--cream); white-space:nowrap; padding-inline:var(--s-5);
}
/* L'icone suit le corps du texte : elle grandit avec lui d'un ecran a l'autre. */
.marquee b .ico{ width:.66em; height:.66em; flex:none; color:var(--gold); }
.marquee i{ color:var(--gold); font-size:9px; font-style:normal; }
@keyframes marq{ to{ transform:translate3d(-50%,0,0); } }

/* ---------- 9. LA MAISON ---------- */
.maison{ background:var(--ink); }
.maison__media{ position:relative; }
.frame{
  position:relative; overflow:hidden; border-radius:var(--r-2);
  border:1px solid var(--line); box-shadow:var(--sh-3);
}
.frame img{ position:absolute; top:-7%; left:0; width:100%; height:114%; object-fit:cover; will-change:transform; }
.frame--tall{ aspect-ratio:4/5; }
.frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,11,.5), transparent 45%);
}

/* Traitement noir et blanc partiel : la chaleur des lampes cuivre reste
   perceptible, la photo cesse de concurrencer l'or de la charte.
   top/height annulent le debord de 7% que .frame img reserve a la parallaxe :
   cette photo est deja exactement au format 4:5 du cadre, donc elle le remplit
   sans qu'aucun bord ne soit rogne — le sujet reste entier. */
.frame--bw img{
  filter:grayscale(.72) contrast(1.05);
  top:0; height:100%;
}
.badge-year{
  position:absolute; right:-14px; bottom:-18px;
  display:flex; align-items:baseline; gap:10px;
  padding:18px 24px; background:var(--gold); color:var(--ink);
  border-radius:var(--r-2); box-shadow:var(--sh-2);
}
@media (max-width:520px){ .badge-year{ right:8px; bottom:-14px; padding:14px 18px; } }
.badge-year__n{ font-family:var(--f-display); font-size:44px; line-height:1; font-weight:500; }
.badge-year__t{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; line-height:1.35; font-weight:600; }

/* Les paragraphes du recit ont besoin d'air : le reset a supprime les marges. */
.maison__txt p + p{ margin-top:var(--s-4); }
/* Ailleurs le chapeau est isole et le gris lui va ; ici il precede des
   paragraphes en creme, et paraissait eteint par comparaison. */
.maison__txt .lede{ color:var(--cream); }

.signature{ margin-top:var(--s-6); }
/* Le PNG a un fond reellement transparent : aucun detourage n'est necessaire. */
.signature__img{ width:clamp(230px, 54%, 330px); height:auto; }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4);
  margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--line);
}
@media (min-width:520px){ .stats{ gap:var(--s-5); } }
/* Trois colonnes meme sur petit ecran : on reduit les corps plutot que d'empiler. */
@media (max-width:519px){
  .stats{ gap:var(--s-3); }
  .stat dt{ font-size:26px; }
  .stat dd{ font-size:10.5px; line-height:1.35; margin-top:6px; }
}
.stat dt{
  font-family:var(--f-display); font-size:clamp(34px,4vw,46px); color:var(--gold-2);
  line-height:1; font-variant-numeric:tabular-nums;
}
.stat dd{ font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.45; }

/* ---------- 10. LA CARTE ---------- */
.carte{ background:var(--ink-2); border-block:1px solid var(--line); }

.tabs__bar{
  position:relative; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  padding:6px; margin-bottom:var(--s-8);
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--ink);
  scroll-snap-type:x proximity;
}
.tabs__bar::-webkit-scrollbar{ display:none; }
@media (min-width:820px){ .tabs__bar{ width:max-content; margin-inline:auto; } }
/* Sous 720px les cinq onglets ne tiennent pas sur une ligne : plutot que de les
   faire defiler — la moitie resterait invisible — on les laisse passer a la
   ligne. La pilule suit en X et en Y (voir movePill dans main.js). */
@media (max-width:719px){
  .tabs__bar{
    flex-wrap:wrap; justify-content:center; overflow:visible;
    border-radius:var(--r-3); gap:4px;
  }
  .tab{ flex:0 0 auto; padding:0 clamp(14px,4vw,22px); }
}
.tabs__pill{
  position:absolute; top:0; left:0;
  background:var(--gold); border-radius:var(--r-pill);
  transition:transform 480ms var(--e-out), width 480ms var(--e-out), height 480ms var(--e-out);
  will-change:transform,width;
}
.tab{
  position:relative; z-index:1; flex:none; scroll-snap-align:center;
  min-height:48px; padding:0 clamp(18px,2.4vw,30px); border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
  transition:color 320ms var(--e-out);
  touch-action:manipulation;
}
.tab:hover{ color:var(--cream); }
.tab[aria-selected="true"]{ color:var(--ink); }

.panel{ display:grid; gap:clamp(32px,5vw,64px); }
@media (min-width:940px){ .panel{ grid-template-columns:.72fr 1fr; align-items:start; } }
.panel[hidden]{ display:none; }
.panel.is-anim > *{ animation:panelIn 620ms var(--e-out) both; }
.panel.is-anim > *:nth-child(2){ animation-delay:70ms; }
@keyframes panelIn{ from{ opacity:0; transform:translate3d(0,22px,0);} to{ opacity:1; transform:none; } }

.panel__media{ position:relative; }
.panel__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-2); border:1px solid var(--line);
}
.panel__media figcaption{
  margin-top:var(--s-3); font-size:12.5px; color:var(--muted); font-style:italic;
}
@media (max-width:939px){ .panel__media img{ aspect-ratio:16/10; } }

/* La colonne de droite du panneau : bandeau, intertitres et listes de plats. */
.panel__body{ min-width:0; }

/* Les listes longues (19 pizzas) : la photo suit le defilement. */
@media (min-width:940px){
  .panel__media{ position:sticky; top:104px; }
}

.panel__note{
  padding:14px 18px; margin-bottom:var(--s-5);
  border:1px solid var(--line-gold); border-radius:var(--r-2);
  background:var(--gold-dim); color:#E6DCC0; font-size:14px; line-height:1.55;
}
.panel__note strong{ color:var(--gold-2); font-weight:600; }

/* Sous-onglets : plus discrets que la barre principale — un simple filet dore
   sous l'onglet actif, pour ne pas creer deux barres concurrentes. */
.subtabs__bar{
  display:flex; flex-wrap:wrap; gap:0 var(--s-5);
  border-bottom:1px solid var(--line); margin-bottom:var(--s-5);
}
.subtab{
  position:relative; min-height:44px; padding:0 0 12px;
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
  transition:color var(--t-base);
  touch-action:manipulation;
}
.subtab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform 420ms var(--e-out);
}
.subtab:hover{ color:var(--cream); }
.subtab[aria-selected="true"]{ color:var(--gold-2); }
.subtab[aria-selected="true"]::after{ transform:scaleX(1); }
.subpanel[hidden]{ display:none; }

/* ---------- Carte des boissons ----------
   Une liste de prix, pas une galerie : le panneau se passe de la colonne
   photo et occupe toute la largeur, puis se repartit en deux colonnes des
   qu'il y a la place. Pas de pagination non plus — 71 references en lignes
   courtes se parcourent d'un coup d'oeil, la tourner page a page genererait
   plus de clics que de lecture. */
@media (min-width:940px){ .panel--liste{ grid-template-columns:1fr; } }
.cartes-cols{ column-gap:clamp(32px,4vw,64px); }
@media (min-width:680px){ .cartes-cols{ columns:2; } }
.groupe{ break-inside:avoid; margin-bottom:var(--s-7); }
.groupe:last-child{ margin-bottom:0; }
.groupe__t{
  font-family:var(--f-body); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  padding-bottom:10px; margin-bottom:var(--s-4);
  border-bottom:1px solid var(--line-gold);
}
.groupe__note{
  margin:calc(var(--s-4) * -1 + 2px) 0 var(--s-4);
  color:var(--muted); font-size:12.5px; font-style:italic;
}
.drinks > li + li{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.drink__head{ display:flex; align-items:baseline; gap:12px; }
.drink h5{ font-size:15.5px; font-weight:500; color:var(--cream); line-height:1.35; }
.drink__vol{ margin-left:4px; color:var(--muted); font-size:12.5px; font-weight:400; }
.drink p{ margin-top:5px; color:var(--muted); font-size:13px; line-height:1.5; max-width:46ch; }
.subpanel.is-anim{ animation:panelIn 520ms var(--e-out) both; }

/* Plats sans prix affiche : le titre occupe la ligne, sans filet de pointilles. */
.dish--noprice .dish__head{ display:block; }

.dishes > li + li{ margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px solid var(--line); }
/* Plat cliquable : le bouton epouse le bloc sans rien changer a sa mise en page. */
.dish__btn{
  display:block; width:100%; text-align:left; padding:0;
  color:inherit; cursor:pointer;
  transition:opacity var(--t-base);
}
.dish__btn:hover h3, .dish__btn:hover h4{ color:var(--gold-2); }
.dish[data-photo] h3, .dish[data-photo] h4{ transition:color var(--t-base); }
.dish.is-shown h3, .dish.is-shown h4{ color:var(--gold-2); }
.dish.is-shown{
  position:relative;
}
.dish.is-shown::before{
  content:""; position:absolute; left:-16px; top:2px; bottom:2px; width:2px;
  background:var(--gold); border-radius:2px;
}
@media (max-width:939px){ .dish.is-shown::before{ left:-10px; } }

.dish__head{ display:flex; align-items:baseline; gap:12px; }
.dish h3{
  font-family:var(--f-display); font-size:clamp(22px,2.2vw,28px); font-weight:500;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.dish__dots{
  flex:1 1 auto; min-width:20px; height:1px; align-self:center;
  background-image:radial-gradient(circle, #45444B 1px, transparent 1px);
  background-size:6px 1px; background-repeat:repeat-x; opacity:.9;
}
.dish__price{
  font-size:16px; font-weight:600; color:var(--gold-2); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dish p{ color:var(--muted); font-size:14.5px; margin-top:8px; max-width:56ch; }

.tag{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f-body); font-size:9.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill); border:1px solid currentColor;
  white-space:nowrap;
}
.tag .ico{ width:12px; height:12px; }
.tag--gold{ color:var(--gold); }
.tag--green{ color:var(--green); }

/* Pagination des listes de plats */
.pager{
  display:flex; align-items:center; gap:var(--s-4);
  margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px solid var(--line);
}
.pager__btn{
  display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-pill);
  border:1px solid var(--line); color:var(--cream); background:transparent;
  transition:background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-fast);
  touch-action:manipulation;
}
.pager__btn:hover:not(:disabled){ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.pager__btn:active:not(:disabled){ transform:scale(.94); }
.pager__btn:disabled{ opacity:.3; cursor:not-allowed; }
.pager__count{
  font-size:12px; letter-spacing:.16em; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.dishes > li.is-turn{ animation:panelIn 460ms var(--e-out) both; }
/* Le premier plat visible d'une page ne doit pas garder le filet du precedent. */
.dishes > li[hidden] + li{ margin-top:0; padding-top:0; border-top:0; }

/* ---------- Menu enfant ----------
   Photographie a gauche, offre a droite. Le cadre est dore franc et non plus
   a 22% d'opacite : le bloc devait se distinguer du fond, pas s'y fondre. */
.enfant{
  display:grid; gap:0; overflow:hidden;
  margin-top:clamp(48px,7vw,88px);
  border:1px solid var(--line-gold); border-radius:var(--r-3);
  background:linear-gradient(135deg, rgba(201,162,39,.09), var(--ink-3) 55%);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
  transition:border-color 420ms var(--e-out), transform 420ms var(--e-out);
}
.enfant:hover{ border-color:var(--gold); transform:translateY(-3px); }
@media (min-width:720px){ .enfant{ grid-template-columns:minmax(0,.62fr) 1fr; align-items:stretch; } }

.enfant__media{ position:relative; overflow:hidden; background:var(--ink-2); }
.enfant__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio:4/3;
}
/* La source est en portrait : laissee libre, elle imposait sa hauteur au bloc et
   creusait du vide sous le texte. Elle remplit desormais la colonne, c'est le
   texte qui donne la hauteur. */
@media (min-width:720px){
  .enfant{ min-height:320px; }
  .enfant__media img{
    position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto;
  }
}
/* Un degrade fond la photo dans le cadre du cote du texte. */
.enfant__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,11,.55), transparent 45%);
}
@media (min-width:720px){
  .enfant__media::after{
    background:linear-gradient(to right, transparent 55%, rgba(22,22,26,.75));
  }
}

.enfant__txt{ padding:clamp(26px,3.2vw,42px); }
.enfant__k{
  display:flex; align-items:center; gap:9px;
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.enfant__k .ico{ width:16px; height:16px; }
.enfant__t{
  font-family:var(--f-display); font-weight:500; color:var(--cream);
  font-size:clamp(27px,3vw,38px); line-height:1.1; letter-spacing:-.012em;
  margin-top:var(--s-3);
}
.enfant__t em{ font-style:italic; color:var(--gold-2); }

/* Les deux plats deviennent deux entrees numerotees, au lieu d'une phrase
   ou le « ou » se perdait au milieu du titre. */
.enfant__choix{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin-top:var(--s-5); padding-top:var(--s-5);
  border-top:1px solid var(--line);
}
.enfant__choix li{
  display:inline-flex; align-items:center; gap:11px;
  font-size:15.5px; color:var(--cream);
}
.enfant__num{
  display:grid; place-items:center; width:26px; height:26px; flex:none;
  border-radius:50%; border:1px solid var(--line-gold);
  font-family:var(--f-display); font-size:15px; color:var(--gold-2);
}
.enfant__ou{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.enfant__d{
  margin-top:var(--s-4); font-size:14px; line-height:1.65; color:var(--muted); max-width:46ch;
}
/* En colonne sur petit ecran : a l'horizontale, le « ou » se retrouvait rejete
   en bout de premiere ligne, detache des deux plats qu'il separe. */
@media (max-width:559px){
  .enfant__choix{ flex-direction:column; align-items:flex-start; gap:9px; }
  .enfant__ou{ margin-left:37px; }
}
@media (prefers-reduced-motion:reduce){ .enfant:hover{ transform:none; } }

/* ---------- 11. GALERIE ---------- */
.galerie{ background:var(--ink); }
.gal{ display:grid; gap:var(--s-3); grid-template-columns:repeat(2,1fr); }
.gal__item--wide{ grid-column:span 2; }
.gal__btn{
  position:relative; display:block; width:100%; height:100%; overflow:hidden;
  border-radius:var(--r-2); border:1px solid var(--line); background:var(--ink-3);
  aspect-ratio:1/1;
}
.gal__item--wide .gal__btn{ aspect-ratio:3/2; }

@media (min-width:900px){
  .gal{
    gap:var(--s-4);
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:clamp(160px,15.5vw,224px);
    grid-template-areas:
      "a a b c"
      "a a f f"
      "d e f f";
  }
  .gal__item:nth-child(1){ grid-area:a; }
  .gal__item:nth-child(2){ grid-area:b; }
  .gal__item:nth-child(3){ grid-area:c; }
  .gal__item:nth-child(4){ grid-area:f; }
  .gal__item:nth-child(5){ grid-area:d; }
  .gal__item:nth-child(6){ grid-area:e; }
  .gal__btn,.gal__item--wide .gal__btn{ aspect-ratio:auto; }
}
.gal__btn img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 900ms var(--e-out), filter 600ms var(--e-out);
  filter:saturate(.86) brightness(.86);
}
.gal__ov{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(to top, rgba(10,10,11,.82), rgba(10,10,11,.05) 60%);
  opacity:0; transition:opacity 420ms var(--e-out);
  color:var(--gold-2);
}
.gal__ov .ico{ width:34px; height:34px; transform:scale(.8); transition:transform 480ms var(--e-out); }
.gal__cap{
  position:absolute; left:16px; right:16px; bottom:14px; text-align:left;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream);
  transform:translateY(10px); opacity:0; transition:transform 440ms var(--e-out), opacity 440ms;
}
.gal__btn:hover img,.gal__btn:focus-visible img{ transform:scale(1.06); filter:saturate(1) brightness(1); }
.gal__btn:hover .gal__ov,.gal__btn:focus-visible .gal__ov{ opacity:1; }
.gal__btn:hover .gal__ov .ico,.gal__btn:focus-visible .gal__ov .ico{ transform:scale(1); }
.gal__btn:hover .gal__cap,.gal__btn:focus-visible .gal__cap{ transform:none; opacity:1; }

/* ---------- 12. AVIS ---------- */
.avis{ background:var(--ink-2); border-block:1px solid var(--line); }
.avis__wrap{ position:relative; }
.avis__list{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,1fr);
  gap:var(--s-4); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--s-4); scrollbar-width:none;
  scroll-behavior:smooth;
}
.avis__list::-webkit-scrollbar{ display:none; }
/* Six avis : les cartes gardent une largeur plancher, la liste deborde donc et
   le carrousel reste utile aussi sur grand ecran (quatre visibles a la fois). */
@media (min-width:1024px){ .avis__list{ grid-auto-columns:minmax(272px, calc(25% - 12px)); } }
.avis__card{
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  padding:clamp(24px,2.6vw,32px); border:1px solid var(--line); border-radius:var(--r-2);
  background:var(--ink-3);
  transition:border-color 360ms var(--e-out), transform 360ms var(--e-out);
}
.avis__card:hover{ border-color:var(--line-gold); transform:translateY(-4px); }
.stars{ display:flex; gap:3px; color:var(--gold); margin-bottom:var(--s-4); }
.stars .ico{ width:15px; height:15px; }
.stars .ico--off{ color:var(--line); }
.avis__card blockquote p{ font-size:15.5px; line-height:1.72; color:#DCD6C9; }
.avis__by{
  display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:var(--s-5);
  font-size:13.5px;
}
.avis__who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.avis__who strong{ font-weight:600; }
.avis__who span{ color:var(--muted); font-weight:400; font-size:12px; }
.avis__av{
  display:grid; place-items:center; width:36px; height:36px; border-radius:var(--r-pill);
  background:var(--gold-dim); border:1px solid var(--line-gold); color:var(--gold-2);
  font-size:11.5px; font-weight:600; letter-spacing:.06em; flex:none;
}
.avis__nav{ display:flex; gap:var(--s-2); justify-content:center; margin-top:var(--s-5); }


/* ---------- 13. À EMPORTER ---------- */
.emporter{ background:var(--ink); }
.note{
  display:flex; gap:12px; align-items:flex-start; margin-top:var(--s-5);
  padding:16px 18px; border-radius:var(--r-2);
  background:var(--gold-dim); border:1px solid var(--line-gold);
  font-size:14px; color:#E6DCC0;
}
.note .ico{ color:var(--gold); margin-top:2px; }

.orderlinks{ display:grid; gap:var(--s-3); }
.olink{
  display:flex; align-items:center; gap:var(--s-4); min-height:88px;
  padding:18px 22px; border:1px solid var(--line); border-radius:var(--r-2);
  background:var(--ink-3);
  transition:border-color 340ms var(--e-out), background 340ms, transform 340ms var(--e-out);
}
.olink:hover{ border-color:var(--line-gold); background:var(--ink-4); transform:translateX(6px); }
.olink__ico{
  display:grid; place-items:center; width:46px; height:46px; flex:none;
  border-radius:var(--r-pill); background:var(--gold-dim); color:var(--gold);
  border:1px solid var(--line-gold);
}
.olink__txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.olink__txt strong{ font-size:16px; font-weight:600; }
.olink__txt small{ font-size:13px; color:var(--muted); line-height:1.45; overflow-wrap:anywhere; }
.olink__go{ margin-left:auto; color:var(--gold); flex:none; transition:transform 340ms var(--e-out); }
.olink:hover .olink__go{ transform:translateX(5px); }

/* ---------- 14. RÉSERVATION ---------- */
.reserver{ background:var(--ink); border-top:1px solid var(--line); }

.infos{ display:grid; gap:var(--s-5); margin-top:var(--s-7); }
.infos > li{ display:flex; gap:var(--s-4); }
.infos__ico{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border-radius:var(--r-pill); border:1px solid var(--line-gold);
  background:var(--gold-dim); color:var(--gold);
}
.infos h3{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin-bottom:8px; font-weight:600;
}
.infos p{ font-size:14.5px; line-height:1.6; }
.infos .link{ margin-top:8px; padding-block:3px; font-size:13.5px; }

.hours th,.hours td{ text-align:left; padding:5px 0; font-size:14px; font-weight:400; vertical-align:top; }
.hours th{ color:var(--muted); padding-right:18px; white-space:nowrap; }
.hours td{ font-variant-numeric:tabular-nums; }
.hours tr.is-today th{ color:var(--gold-2); font-weight:600; }
.hours tr.is-today td{ color:var(--gold-2); }

.resa__form{
  padding:clamp(24px,3.4vw,44px);
  border:1px solid var(--line); border-radius:var(--r-3);
  background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
  box-shadow:var(--sh-3);
}

.f-row{ display:grid; gap:var(--s-4); }
@media (min-width:600px){
  .f-row{ grid-template-columns:repeat(3,1fr); }
  .f-row--2{ grid-template-columns:repeat(2,1fr); }
}
.field{ margin-bottom:var(--s-4); }
.field > label{
  display:block; margin-bottom:8px;
  font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#CFC8B8;
}
.req{ color:var(--gold); }
.opt{ font-weight:400; letter-spacing:.06em; text-transform:none; color:var(--muted); font-size:11px; }

input[type="text"],input[type="tel"],input[type="email"],input[type="date"],select,textarea{
  width:100%; min-height:52px; padding:14px 16px;
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r-1);
  color:var(--cream); font-size:16px; /* 16px = pas de zoom auto iOS */
  transition:border-color 240ms var(--e-out), background 240ms, box-shadow 240ms;
  -webkit-appearance:none; appearance:none;
}
textarea{ min-height:96px; resize:vertical; line-height:1.6; }
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A9A296' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px;
}
input::placeholder,textarea::placeholder{ color:#6E6A62; }
input:hover,select:hover,textarea:hover{ border-color:#3A3A41; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.16);
}
input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(.7) sepia(.5) saturate(3) hue-rotate(5deg); cursor:pointer; }

.hint{ font-size:12.5px; color:var(--muted); margin-top:7px; }
.err{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--wine); margin-top:7px; font-weight:500;
}
.err::before{ content:"—"; opacity:.7; }
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{ border-color:var(--wine); }
.field.is-bad input:focus,.field.is-bad select:focus{ box-shadow:0 0 0 3px rgba(224,100,91,.18); }


.errsum{
  padding:18px 20px; margin-bottom:var(--s-5);
  border:1px solid var(--wine); border-radius:var(--r-2); background:rgba(224,100,91,.08);
}
.errsum h3{ display:flex; align-items:center; gap:9px; font-family:var(--f-body); font-size:14.5px; font-weight:600; color:var(--wine); }
.errsum ul{ margin-top:10px; padding-left:2px; display:grid; gap:5px; }
.errsum a{ font-size:13.5px; color:#EFB3AD; border-bottom:1px solid rgba(224,100,91,.5); }
.errsum a:hover{ color:#fff; border-color:#fff; }

#resaSubmit{ margin-top:var(--s-5); }
.btn__spin{
  position:absolute; width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(10,10,11,.25); border-top-color:var(--ink);
  opacity:0; animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn.is-loading{ pointer-events:none; }
.btn.is-loading .btn__label,.btn.is-loading .btn__arrow{ opacity:0; }
.btn.is-loading .btn__spin{ opacity:1; }

.form-foot{ text-align:center; font-size:13.5px; color:var(--muted); margin-top:var(--s-4); }

.ok{ text-align:center; padding:var(--s-5) 0; }
.ok__ico{
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto var(--s-4);
  border-radius:var(--r-pill); background:var(--gold-dim); border:1px solid var(--line-gold); color:var(--gold);
  animation:pop 620ms var(--e-out) both;
}
.ok__ico .ico{ width:30px; height:30px; }
@keyframes pop{ from{ transform:scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
.ok h3{ font-family:var(--f-display); font-size:32px; margin-bottom:var(--s-3); }
.ok p{ font-size:15px; margin-bottom:var(--s-3); }
.ok .btn{ margin-top:var(--s-3); }

/* ---------- 15. PIED DE PAGE ---------- */
.ftr{ background:var(--ink); border-top:1px solid var(--line); padding-top:var(--sec-y); }
.ftr__grid{ display:grid; gap:var(--s-7); }
@media (min-width:720px){ .ftr__grid{ grid-template-columns:repeat(2,1fr); } }
/* Sur telephone : la marque en pleine largeur, puis les deux menus cote a cote,
   les horaires en pleine largeur. Une colonne unique etirait le pied de page
   sur trois ecrans. */
@media (max-width:719px){
  .ftr__grid{ grid-template-columns:repeat(2,1fr); gap:var(--s-6) var(--s-5); }
  .ftr__brand, .ftr__hours{ grid-column:1 / -1; }
}
@media (min-width:1024px){ .ftr__grid{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--s-6); } }
.ftr__logo{ display:block; width:clamp(190px, 62%, 260px); height:auto; margin-bottom:var(--s-4); }
.ftr__tag{ font-size:14px; color:var(--muted); margin-top:var(--s-3); line-height:1.7; }
.social{ display:flex; gap:var(--s-2); margin-top:var(--s-5); }
.social a{
  display:grid; place-items:center; width:46px; height:46px;
  border:1px solid var(--line); border-radius:var(--r-pill); color:var(--muted);
  transition:color var(--t-base), border-color var(--t-base), transform var(--t-base) var(--e-out);
}
.social a:hover{ color:var(--gold); border-color:var(--gold); transform:translateY(-3px); }

.ftr h2{
  font-family:var(--f-body); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--s-4);
}
.ftr__nav ul{ display:grid; gap:11px; }
.ftr__nav a{ display:inline-block; padding-block:4px; font-size:14.5px; color:var(--muted); transition:color var(--t-base), padding-left var(--t-base) var(--e-out); }
.ftr__nav a:hover{ color:var(--gold-2); padding-left:5px; }
.ftr__hours p{ font-size:13px; color:#CFC8B8; margin-bottom:12px; }
.ftr__hours p span{ color:var(--muted); font-variant-numeric:tabular-nums; }

.ftr__bar{
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between; align-items:center;
  margin-top:var(--sec-y); padding-block:var(--s-5);
  border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted);
  padding-bottom:calc(var(--s-5) + env(safe-area-inset-bottom));
}
.ftr__legal{ display:flex; flex-wrap:wrap; gap:var(--s-5); }
.ftr__legal a{ display:inline-block; padding-block:5px; transition:color var(--t-base); }
.ftr__legal a:hover{ color:var(--gold-2); }

/* ---------- 16. RETOUR EN HAUT ---------- */
.totop{
  position:fixed; z-index:var(--z-totop);
  right:clamp(16px,3vw,32px); bottom:calc(clamp(16px,3vw,32px) + env(safe-area-inset-bottom));
  display:grid; place-items:center; width:52px; height:52px; border-radius:var(--r-pill);
  background:var(--gold); color:var(--ink); box-shadow:var(--sh-2);
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
  transition:opacity 380ms var(--e-out), transform 380ms var(--e-out), background 240ms;
}
.totop.is-on{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:var(--gold-2); }
.totop:active{ transform:scale(.94); }

/* ---------- 17. LIGHTBOX ---------- */
.lb{ position:fixed; inset:0; z-index:var(--z-lb); display:grid; place-items:center; }
.lb__scrim{ position:absolute; inset:0; background:rgba(5,5,6,.94); opacity:0; transition:opacity 320ms var(--e-out); }
.lb.is-open .lb__scrim{ opacity:1; }
.lb__box{
  position:relative; width:min(1180px,100%); padding:clamp(56px,7vw,80px) clamp(16px,4vw,72px);
  display:grid; place-items:center; gap:var(--s-4);
  opacity:0; transform:scale(.96); transition:opacity 340ms var(--e-out), transform 420ms var(--e-out);
}
.lb.is-open .lb__box{ opacity:1; transform:none; }
.lb__img{
  max-width:100%; max-height:74svh; width:auto; object-fit:contain;
  border-radius:var(--r-2); box-shadow:var(--sh-3);
}
.lb__cap{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:center; }
.lb__close{ position:absolute; top:clamp(10px,2vw,20px); right:clamp(10px,2vw,20px); }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); }
.lb__nav--prev{ left:clamp(6px,1.5vw,18px); }
.lb__nav--next{ right:clamp(6px,1.5vw,18px); }
.lb__nav:active{ transform:translateY(-50%) scale(.94); }
@media (max-width:640px){
  .lb__nav{ top:auto; bottom:14px; transform:none; }
  .lb__nav:active{ transform:scale(.94); }
  .lb__nav--prev{ left:22%; } .lb__nav--next{ right:22%; }
  .lb__cap{ margin-bottom:64px; }
}

/* ---------- 18. NO-SCROLL (modales) ---------- */
body.is-locked{ overflow:hidden; }

/* ---------- 19. PRÉFÉRENCE DE MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .reveal{ opacity:1!important; transform:none!important; }
  [data-split] .w > span{ opacity:1!important; transform:none!important; }
  .marquee__track{ animation:none; transform:none; }
  .hero__scroll-line::after{ animation:none; }
  .hero__video{ transform:none!important; }
  .frame img{ transform:none!important; top:0!important; height:100%!important; }
  .avis__list{ scroll-behavior:auto; }
}