/* ============================================================
   PIZZA NOVA — v4.2 « NOTTE NAPOLETANA »
   Nuit de four à bois : noir braise dominant, bandes crème en
   contrepoint, brique et or en accents.

   Typo — deux familles seulement :
     Fraunces (variable, SOFT 100 / WONK 1) : titres, noms de plats,
       italiques d'accent. Serif chaleureuse et artisanale, choisie
       après comparaison rendue de 8 candidates (cf. README).
     Archivo (variable, wdth 62→125) : libellés, corps, et TOUS les
       chiffres, en tabulaires alignées.

   Composants — parti pris « éditorial » : aucun dégradé, aucune
   lueur colorée, ombres courtes, aplats francs. Le rouge n'est plus
   une couleur de bouton mais un accent.
   AA · prefers-reduced-motion · no-JS sûr (html.js-actif).
   ============================================================ */

:root{
  /* --- nuit --- */
  --noir:      #0A0806;
  --noir-2:    #120E09;
  --braise:    #1B1309;
  --braise-2:  #2A1C0D;
  /* --- jour --- */
  --os:        #F4E9D6;
  --os-2:      #E9DCC2;
  --craie:     #FBF5E9;
  /* --- accents (désaturés : terre cuite plutôt que rouge vif) --- */
  --brique:    #B23A24;
  --brique-c:  #CE4B31;
  --brique-f:  #7E2818;
  --or:        #E0A93C;
  --or-c:      #F0C775;
  --or-f:      #7A5512;
  --basilic:   #4C8B47;
  /* --- texte --- */
  --sur-nuit:  #F0E5D1;
  --sur-nuit-2:#BCA786;
  --sur-jour:  #241A10;
  --sur-jour-2:#6E5C46;

  --ligne-j:  rgba(36,26,16,.14);
  --ligne-n:  rgba(224,169,60,.22);

  --f-d:'Fraunces', Georgia, serif;              /* titres & noms de plats */
  --f-c:'Archivo', 'Helvetica Neue', sans-serif;  /* libellés, corps, chiffres */
  --wonk:"SOFT" 100, "WONK" 1;

  --pad: clamp(20px, 5.2vw, 84px);
  --max: 1280px;
  --r: 3px;
  --ease: cubic-bezier(.22,.68,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --hdr: 74px;
  --ombre-n: 0 24px 56px -28px rgba(0,0,0,.8);
  --ombre-j: 0 20px 48px -28px rgba(36,26,16,.38);
}

/* ---------------- reset ---------------- */
*{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--noir); }
body{
  font-family:var(--f-c); font-size:1rem; line-height:1.66; font-weight:400;
  background:var(--noir); color:var(--sur-nuit);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
::selection{ background:var(--brique); color:#fff; }
:focus-visible{ outline:2px solid var(--or); outline-offset:3px; border-radius:2px; }

/* tous les chiffres : tabulaires et alignés */
.chiffre, .pastille, .prix{
  font-variant-numeric:tabular-nums lining-nums;
}

/* titre présent pour la structure du document et les lecteurs d'écran,
   sans place dans la composition visuelle */
.hors-ecran{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:12px; left:12px; z-index:400;
  background:var(--or); color:var(--noir); font-weight:700;
  padding:.8em 1.3em; text-decoration:none; border-radius:2px;
  transform:translateY(-250%); transition:transform .25s;
}
.skip:focus-visible{ transform:none; }

/* filet tricolore permanent — rappel de l'enseigne */
.tricolore{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:200;
  background:linear-gradient(90deg,var(--basilic) 0 33.33%, var(--os) 33.33% 66.66%, var(--brique) 66.66%);
}

/* grain de farine */
body::after{
  content:""; position:fixed; inset:0; z-index:250; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1,h2,h3,h4{ font-weight:400; }

h2, .titre{
  font-family:var(--f-d); font-variation-settings:var(--wonk), "opsz" 144;
  font-weight:800; letter-spacing:-.018em; line-height:1.02;
  font-size:clamp(1.95rem, 4.4vw, 3.3rem);
  color:var(--sur-nuit);
}
h2 em, .titre em{
  font-style:italic; font-weight:600; letter-spacing:-.012em; color:var(--or);
}
.section--os h2, .section--os .titre, .bande-infos h3{ color:var(--sur-jour); }
.section--os h2 em, .section--os .titre em{ color:var(--brique); }

h3{
  font-family:var(--f-d); font-variation-settings:var(--wonk), "opsz" 36;
  font-weight:700; font-size:1.22rem; line-height:1.16; letter-spacing:-.012em;
}

/* sur-titre */
.kicker{
  display:flex; align-items:center; gap:.8em;
  font-family:var(--f-c); font-stretch:88%; font-size:.68rem; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase; color:var(--or);
  margin-bottom:1rem;
}
.kicker::before{
  content:""; width:2.2em; height:2px; flex:none;
  background:linear-gradient(90deg,var(--basilic) 0 33.33%, currentColor 33.33% 66.66%, var(--brique) 66.66%);
}
.section--os .kicker{ color:var(--brique-f); }

/* annotation — italique Fraunces, plus de police script */
.main-ecrite{
  font-family:var(--f-d); font-variation-settings:var(--wonk), "opsz" 60;
  font-style:italic; font-weight:500; font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.2; color:var(--or); letter-spacing:-.01em;
}
.section--os .main-ecrite{ color:var(--brique); }

.plomb{ color:var(--sur-nuit-2); font-size:1.04rem; max-width:52ch; }
.section--os .plomb{ color:var(--sur-jour-2); }

/* ============================================================
   BOUTONS — aplats francs, pas de dégradé ni de lueur
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--f-c); font-stretch:92%; font-weight:600; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:1.15em 1.9em; min-height:52px; border:1px solid transparent; border-radius:var(--r);
  cursor:pointer;
  transition:transform .3s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn svg{ width:1.15em; height:1.15em; flex:none; }

/* principal : ivoire plein sur fond sombre — contraste maximal, zéro effet */
.btn-plein{
  background:var(--sur-nuit); color:#17110A;
  border-color:rgba(255,255,255,.5);
  box-shadow:0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.7);
}
.btn-plein:hover{ background:#FFF9EC; transform:translateY(-2px); box-shadow:0 6px 14px -6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.8); }
.btn-plein:active{ transform:translateY(0); }
.section--os .btn-plein{
  background:var(--sur-jour); color:var(--os); border-color:rgba(0,0,0,.2);
  box-shadow:0 1px 2px rgba(36,26,16,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.section--os .btn-plein:hover{ background:#3A2A19; }

/* secondaire : filet seul */
.btn-contour{ color:var(--sur-nuit); border-color:rgba(240,229,209,.34); background:transparent; }
.btn-contour:hover{ border-color:rgba(240,229,209,.75); background:rgba(240,229,209,.07); transform:translateY(-2px); }
.section--os .btn-contour{ color:var(--sur-jour); border-color:rgba(36,26,16,.26); }
.section--os .btn-contour:hover{ border-color:rgba(36,26,16,.6); background:rgba(36,26,16,.05); }

/* lien fléché */
.lien-fleche{
  display:inline-flex; align-items:center; gap:.55em; text-decoration:none;
  font-family:var(--f-c); font-stretch:92%; font-weight:600; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--or);
  padding:.32em 0 .42em; min-height:26px; border-bottom:1px solid rgba(224,169,60,.3);
  transition:color .25s, border-color .25s, gap .25s;
}
.lien-fleche:hover{ gap:.95em; color:var(--or-c); border-color:var(--or); }
/* variante « sur fond clair » : par section, mais aussi pour la bande d'infos,
   bloc crème posé dans une section sombre — elle n'hérite pas de .section--os */
.section--os .lien-fleche,
.bande-infos .lien-fleche{ color:var(--brique-f); border-color:rgba(126,40,24,.28); }
.section--os .lien-fleche:hover,
.bande-infos .lien-fleche:hover{ color:var(--brique); border-color:var(--brique); }

/* ============================================================
   EN-TÊTE
   ============================================================ */
.entete{
  position:fixed; top:3px; left:0; right:0; z-index:190; height:var(--hdr);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  /* La rangée de la grille n'est PAS dimensionnée par la hauteur du bandeau
     mais par le médaillon de l'enseigne (119 px de haut, marge négative, soit
     ~77 px de boîte) — il déborde volontairement sous la barre. Sans
     align-content, réduire `height` à 62 px en mode compact ne réduisait donc
     pas la rangée : align-items continuait de centrer dans 77 px et tous les
     éléments restaient collés 7 px trop bas. On centre la rangée elle-même
     dans le bandeau, et tout suit la hauteur. */
  align-content:center;
  padding:0 var(--pad);
  background:linear-gradient(180deg, rgba(10,8,6,.8), rgba(10,8,6,.3));
  transition:background .4s var(--ease), backdrop-filter .4s, border-color .4s, height .4s var(--ease);
  border-bottom:1px solid transparent;
}
.entete--compacte{
  background:rgba(10,8,6,.93); backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:rgba(224,169,60,.18); height:62px;
}
.entete__nav{ display:none; gap:2.1rem; }
.entete__nav--g{ grid-column:1; justify-self:start; }
.entete__droite{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:1.8rem; }
.entete__nav a{
  position:relative; text-decoration:none; color:var(--sur-nuit);
  font-family:var(--f-c); font-stretch:92%; font-weight:500; font-size:.86rem;
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  padding:.5em 0; opacity:.85; transition:opacity .25s;
}
.entete__nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--or); transition:width .35s var(--ease);
}
.entete__nav a:hover{ opacity:1; }
.entete__nav a:hover::after{ width:100%; }
.entete__tel{ padding:.8em 1.3em; min-height:44px; font-size:.73rem; letter-spacing:.1em; }
/* bouton icône Instagram, à droite du bouton Réserver */
.entete__insta{
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--r);
  border:1px solid rgba(240,229,209,.3); color:var(--sur-nuit); text-decoration:none;
  transition:border-color .25s, background-color .25s, color .25s, transform .3s var(--ease);
}
.entete__insta svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; }
.entete__insta:hover{ border-color:var(--or); color:var(--or); background:rgba(224,169,60,.08); transform:translateY(-2px); }
.entete__droite{ gap:.85rem; }
@media (min-width:1000px){ .entete__droite{ gap:1.6rem; } }
@media (min-width:1000px){ .entete__nav{ display:flex; } }
@media (max-width:560px){
  .tel-txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .entete__tel{ padding:.8em .95em; min-width:46px; }
}

/* médaillon-enseigne suspendu */
.enseigne{
  position:relative; z-index:200; grid-column:2; justify-self:center;
  width:clamp(84px,9vw,118px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; transform-origin:top center;
  background:radial-gradient(circle at 34% 26%, #33230F, #14100A 76%);
  border:1px solid rgba(224,169,60,.45);
  box-shadow:0 0 0 5px var(--noir), 0 0 0 6px rgba(224,169,60,.22), 0 18px 34px -18px rgba(0,0,0,.85);
  margin-bottom:calc(-1 * clamp(26px,3.2vw,42px));
  transition:transform .5s var(--ease);
  animation:suspendre 1s var(--ease) .15s backwards;
}
@keyframes suspendre{
  0%{ opacity:0; transform:translateY(-130%) rotate(-6deg); }
  62%{ opacity:1; transform:translateY(0) rotate(2.4deg); }
  82%{ transform:rotate(-1.4deg); }
  100%{ transform:none; }
}
.enseigne img{ width:76%; filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.enseigne:hover{ transform:rotate(-3deg) scale(1.03); }
.entete--compacte .enseigne{ transform:scale(.62); }
.entete--compacte .enseigne:hover{ transform:scale(.66) rotate(-3deg); }
@media (max-width:719px){ .enseigne{ width:80px; margin-bottom:-22px; } }

.enseigne--pied{
  grid-column:auto; margin-bottom:0; width:108px; justify-self:start; animation:none;
  transform:none !important; box-shadow:0 0 0 5px var(--braise), 0 0 0 6px rgba(224,169,60,.22);
}

/* ============================================================
   HERO — tient dans un écran (contrôle automatisé, cf. README)
   ============================================================ */
.hero{
  position:relative; isolation:isolate; overflow:clip;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--hdr) + clamp(1rem,4vh,2.6rem)) var(--pad) clamp(1.4rem,4.5vh,3rem);
}
@media (max-width:999px){
  .hero{ padding-bottom:calc(clamp(1rem,3vh,2rem) + 70px); }
}
.hero__fond{ position:absolute; inset:0; z-index:-3; }
.hero__fond img{ width:100%; height:100%; object-fit:cover; object-position:46% 34%; }
.hero__voile{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(54% 42% at 28% 32%, rgba(240,110,25,.3), transparent 64%),
    linear-gradient(103deg, rgba(10,8,6,.94) 0 24%, rgba(10,8,6,.78) 48%, rgba(10,8,6,.46) 76%, rgba(10,8,6,.68) 100%),
    linear-gradient(180deg, rgba(10,8,6,.88) 0 8%, transparent 30% 62%, rgba(10,8,6,.96) 96%);
}
.hero__in{
  position:relative; width:100%; max-width:var(--max); margin:0 auto;
  display:grid; align-items:center; gap:clamp(1.2rem,3vh,2.6rem);
}
@media (min-width:960px){
  .hero__in{ grid-template-columns:minmax(0,1.1fr) minmax(0,.98fr); gap:clamp(1rem,2.4vw,2.2rem); }
}


/* titre */
.hero h1{ margin-bottom:clamp(.9rem,2.4vh,1.5rem); }
.hero__ligne1{
  display:block; font-family:var(--f-d);
  font-variation-settings:var(--wonk), "opsz" 144; font-weight:900;
  text-transform:uppercase; line-height:.9; letter-spacing:-.008em;
  font-size:clamp(2.5rem, min(9.6vw, 12.8vh), 7.4rem); color:var(--sur-nuit);
  text-shadow:0 4px 30px rgba(0,0,0,.5);
}
.hero__ligne2{
  display:block; font-family:var(--f-d);
  font-variation-settings:var(--wonk), "opsz" 144; font-weight:600; font-style:italic;
  line-height:.98; letter-spacing:-.028em;
  font-size:clamp(2.8rem, min(11.2vw, 15vh), 8.6rem);
  margin:-.04em 0 0 -.015em;
  color:var(--or-c);
  text-shadow:0 6px 30px rgba(0,0,0,.45);
}
.hero__ligne3{
  display:block; font-family:var(--f-c); font-stretch:88%; font-weight:500;
  text-transform:uppercase; letter-spacing:.28em; line-height:1.25;
  font-size:clamp(.72rem, 1.5vw, .95rem); color:var(--sur-nuit-2);
  margin-top:clamp(.6rem,1.6vh,1.1rem); padding-left:.2em;
}
.hero__pitch{
  font-size:clamp(.98rem,1.35vw,1.16rem); color:var(--sur-nuit-2);
  max-width:47ch; margin-bottom:clamp(1.1rem,3vh,1.9rem);
}
.hero__pitch strong{ color:var(--sur-nuit); font-weight:600; }
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; }
@media (max-width:520px){ .btn-long{ display:none; } }

/* disque de pizza — centré dans sa colonne, il équilibre la composition */
.hero__disque{
  position:relative; display:grid; place-items:center;
  margin-inline:auto; margin-top:clamp(.4rem,2.5vh,2rem);
}
@media (min-width:960px){ .hero__disque{ margin-top:0; justify-self:center; } }
.hero__disque .disque{
  position:relative; z-index:2; width:min(48vw, 71vh, 620px); aspect-ratio:1;
  filter:drop-shadow(0 34px 54px rgba(0,0,0,.7));
  animation:tourner 140s linear infinite;
}
.hero__disque::before{
  content:""; position:absolute; z-index:0;
  width:min(66vw, 96vh, 840px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(226,90,20,.34), rgba(178,58,36,.12) 46%, transparent 68%);
  filter:blur(14px); animation:respirer 8s ease-in-out infinite alternate;
}
.hero__disque::after{
  content:""; position:absolute; z-index:1;
  width:min(54vw, 80vh, 700px); aspect-ratio:1; border-radius:50%;
  border:1px dashed rgba(224,169,60,.42); animation:tourner 170s linear infinite reverse;
}
@media (max-width:959px){
  .hero__disque .disque{ width:min(58vw, 30vh, 430px); }
  .hero__disque::after{ width:min(67vw, 35vh, 496px); }
  .hero__disque::before{ width:min(82vw, 43vh, 590px); }
}
/* écrans bas : l'échelle se resserre pour que le premier écran tienne quand même */
@media (max-width:760px) and (max-height:820px){
  .hero__ligne1{ font-size:clamp(1.85rem, min(8.4vw, 8.6vh), 6.2rem); }
  .hero__ligne2{ font-size:clamp(2.05rem, min(10vw, 10.2vh), 7.4rem); }
  .hero__pitch{ font-size:.9rem; line-height:1.5; }
  .hero__cta .btn{ min-height:46px; padding:.85em 1.5em; font-size:.74rem; }
  .hero__disque .disque{ width:min(50vw, 21vh, 430px); }
  .hero__disque::after{ width:min(58vw, 25vh, 496px); }
  .hero__disque::before{ width:min(72vw, 31vh, 590px); }
}
/* très petits écrans. La 3e ligne du H1 porte « Bezons » : elle est réduite,
   jamais masquée — du texte caché dans un H1 est déprécié par les moteurs.
   La dernière phrase de l'accroche, elle, est reprise mot pour mot juste en
   dessous dans la bande d'infos : on peut la retirer sans rien perdre. */
@media (max-width:760px) and (max-height:780px){
  .hero__ligne3{ font-size:.62rem; letter-spacing:.16em; margin-top:.4rem; }
  .pitch-fin{ display:none; }
  .hero__pitch{ margin-bottom:.9rem; }
}
@keyframes tourner{ to{ transform:rotate(360deg); } }
@keyframes respirer{ from{ opacity:.6; transform:scale(.97); } to{ opacity:1; transform:scale(1.04); } }

/* apparition orchestrée */
@keyframes lever{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes lever-disque{ from{ opacity:0; transform:translateY(40px) scale(.92) rotate(-10deg); } to{ opacity:1; transform:none; } }
.lv{ opacity:0; animation:lever .9s var(--ease-out) forwards; }
.lv1{ animation-delay:.1s; } .lv2{ animation-delay:.2s; } .lv3{ animation-delay:.32s; }
.lv4{ animation-delay:.44s; } .lv5{ animation-delay:.56s; } .lv6{ animation-delay:.66s; } .lv7{ animation-delay:.76s; }
.lv-med{ opacity:0; animation:lever-disque 1.3s var(--ease-out) .25s forwards; }

/* ============================================================
   BANDE D'INFOS (crème)
   ============================================================ */
.bande-infos{ background:var(--os); color:var(--sur-jour); position:relative; }
.bande-infos__in{
  max-width:1140px; margin:0 auto; padding:clamp(2rem,3.6vw,3rem) var(--pad);
  display:grid; gap:0; grid-template-columns:1fr;
}
@media (min-width:640px){ .bande-infos__in{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .bande-infos__in{ grid-template-columns:.95fr 1.4fr 1fr .85fr; } }
.info{
  padding:1.15rem clamp(.9rem,1.8vw,1.7rem);
  border-top:1px solid var(--ligne-j);
  display:flex; flex-direction:column; align-items:flex-start; gap:.4rem;
}
@media (min-width:640px) and (max-width:999px){
  .info{ border-top:0; border-left:1px solid var(--ligne-j); }
  .info:nth-child(odd){ border-left:0; }
  .info:nth-child(n+3){ border-top:1px solid var(--ligne-j); }
}
@media (min-width:1000px){
  .info{ border-top:0; border-left:1px solid var(--ligne-j); }
  .info:first-child{ border-left:0; }
}
.info svg{ width:24px; height:24px; stroke:var(--brique); fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.3rem; }
.info h3{
  font-family:var(--f-c); font-stretch:88%; font-weight:700; font-size:.65rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--or-f);
}
.info p, .info address{ font-style:normal; font-size:.93rem; color:var(--sur-jour); line-height:1.55; }
.info small{ display:block; font-size:.79rem; color:var(--sur-jour-2); }
.info a:not(.lien-fleche){
  display:inline-block; padding-block:.3em; color:var(--brique-f); font-weight:600;
  text-decoration:none; border-bottom:1px solid rgba(126,40,24,.3);
}
.info a:not(.lien-fleche):hover{ border-color:var(--brique); }
.etat-ouvert,.etat-ferme{
  display:inline-flex; align-items:center; gap:.5em; font-size:.64rem; font-weight:700;
  font-family:var(--f-c); font-stretch:88%; letter-spacing:.1em; text-transform:uppercase;
  padding:.42em .9em .42em .8em; border-radius:99px; margin-top:.4rem; white-space:nowrap;
}
.etat-ouvert::before,.etat-ferme::before{ content:""; width:.5em; height:.5em; border-radius:50%; }
.etat-ouvert{ color:#2C6B33; background:rgba(76,139,71,.13); }
.etat-ouvert::before{ background:var(--basilic); box-shadow:0 0 0 3px rgba(76,139,71,.25); animation:pulse 2.6s ease-in-out infinite; }
.etat-ferme{ color:var(--brique-f); background:rgba(126,40,24,.1); }
.etat-ferme::before{ background:var(--brique-f); }
@keyframes pulse{ 50%{ box-shadow:0 0 0 6px rgba(76,139,71,0); } }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ position:relative; padding:clamp(52px,6.4vw,92px) var(--pad); scroll-margin-top:calc(var(--hdr) + 16px); }
.section__in{ max-width:var(--max); margin:0 auto; }
.section--os{ background:var(--os); color:var(--sur-jour); }
.section--os .plomb, .section--os p{ color:var(--sur-jour-2); }
.section--nuit{ background:var(--noir); }
.section--braise{ background:linear-gradient(180deg,var(--noir),var(--braise) 55%,var(--noir)); }

.tete{ display:grid; gap:1.4rem clamp(2rem,6vw,5rem); margin-bottom:clamp(2.2rem,4.4vw,3.4rem); align-items:end; }
@media (min-width:900px){ .tete{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); } }
.tete__note{ font-size:1rem; line-height:1.7; padding-bottom:.4rem; }
/* en-tête réduit au sur-titre et au titre : une seule colonne, et l'écart
   sous le titre se resserre puisqu'il n'y a plus de texte à équilibrer */
.tete--simple{ margin-bottom:clamp(1.6rem,3vw,2.4rem); }
@media (min-width:900px){ .tete--simple{ grid-template-columns:1fr; } }

/* ============================================================
   FILIGRANE D'ENSEIGNE
   Le médaillon posé très en retrait dans le fond de quelques sections
   sombres — présence de marque, pas décor bavard. Purement ornemental :
   il ne porte aucun texte et aucune information.

   `logo/logo-filigrane.webp` est la silhouette blanche du logo, obtenue en
   ne gardant que le canal alpha de `logo/logo-enseigne.png` et en peignant
   l'encre en blanc. L'intensité se règle donc uniquement en CSS, et le
   fichier fonctionne sur n'importe quel fond sombre. À regénérer si
   l'enseigne change :
     python -c "from PIL import Image; s=Image.open('logo/logo-enseigne.png').convert('RGBA'); b=Image.merge('RGBA',(Image.new('L',s.size,255),)*3+(s.getchannel('A'),)); b.resize((800,714)).save('logo/logo-filigrane.webp','WEBP',quality=70,alpha_quality=40,method=6)"

   Posé en `::after` et non en `::before` : `.commander::before` porte déjà
   ses dégradés d'ambiance.
   ============================================================ */
.filigrane{ position:relative; overflow:clip; }
.filigrane::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  aspect-ratio:800/714;
  background:url("../logo/logo-filigrane.webp") no-repeat center/contain;
}
/* le contenu repasse devant : les pseudo-éléments positionnés se peignent
   après le contenu en flux, sans ces deux lignes le filigrane voilerait le texte */
.filigrane > .section__in,
.filigrane > .rappel__in{ position:relative; z-index:1; }

/* Positions volontairement différentes d'une section à l'autre : répété au
   même endroit, le motif se lirait comme une texture de gabarit. */
.filigrane--avis::after{
  width:min(62vw,560px); right:-9%; top:52%; transform:translateY(-50%); opacity:.05;
}
.filigrane--commander::after{
  width:min(58vw,480px); left:-12%; bottom:-16%; opacity:.045;
}
/* Bienvenue : à gauche, derrière la colonne de texte. La colonne de droite
   porte le collage photo, opaque — un filigrane posé de ce côté disparaîtrait
   entièrement dessous. Descendu sous le milieu pour se caler derrière le bas
   du texte plutôt que derrière le titre. */
.filigrane--bienvenue::after{
  width:min(64vw,580px); left:-7%; top:62%; transform:translateY(-50%); opacity:.05;
}
/* le bloc de rappel est bas (~300 px) : un médaillon plus large que ça le
   remplirait bord à bord au lieu de l'accompagner */
.filigrane--rappel::after{
  width:min(34vw,240px); right:3%; top:50%; transform:translateY(-50%); opacity:.06;
}
/* sous 700 px le médaillon passe derrière le texte au lieu de le border :
   on le recentre et on l'efface encore un peu */
@media (max-width:699px){
  .filigrane--avis::after,
  .filigrane--commander::after,
  .filigrane--rappel::after,
  .filigrane--bienvenue::after{
    width:min(78vw,340px); left:50%; right:auto; top:50%; bottom:auto;
    transform:translate(-50%,-50%); opacity:.038;
  }
}

/* ============================================================
   BIENVENUE — présentation courte
   ============================================================ */
.bienvenue{ display:grid; gap:clamp(2.4rem,5.5vw,4.6rem); align-items:center; }
@media (min-width:960px){ .bienvenue{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.bienvenue__txt h2{ font-size:clamp(1.95rem,4vw,3.05rem); }
.bienvenue__txt .plomb{ margin-top:1.2rem; font-size:1.1rem; line-height:1.65; max-width:40ch; }
.bienvenue__points{ display:grid; gap:1.3rem; margin-top:2.2rem; }
@media (min-width:560px){ .bienvenue__points{ grid-template-columns:repeat(3,1fr); } }
.point{ border-top:1px solid rgba(224,169,60,.3); padding-top:.85rem; }
.point strong{
  display:block; font-family:var(--f-d); font-variation-settings:var(--wonk),"opsz" 24;
  font-weight:700; font-size:1.02rem; color:var(--or); margin-bottom:.15rem;
}
.point span{ font-size:.86rem; color:var(--sur-nuit-2); line-height:1.5; }
.bienvenue .main-ecrite{ margin-top:2rem; }

.bienvenue__visuel{ position:relative; }
.bienvenue__visuel .cadre{ position:relative; overflow:hidden; box-shadow:var(--ombre-n); }
.bienvenue__visuel .cadre img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.bienvenue__visuel:hover .cadre img{ transform:scale(1.04); }
.bienvenue__visuel .cadre--1{ aspect-ratio:9/10; width:min(100%,450px); margin-left:auto; border:1px solid rgba(224,169,60,.26); }
.bienvenue__visuel .cadre--2{
  position:absolute; left:-2%; bottom:clamp(-52px,-3.2vw,-26px); z-index:2;
  width:min(46%,232px); aspect-ratio:1;
  border:7px solid var(--noir); outline:1px solid rgba(224,169,60,.26);
}
/* le petit cadre du collage déborde sous la section : on rend cette hauteur au
   rythme vertical, sinon l'écart avec la section suivante paraît plus serré */
#bienvenue{ padding-bottom:calc(clamp(52px,6.4vw,92px) + clamp(26px,3.4vw,54px)); }
.bienvenue__visuel .etiquette{
  position:absolute; right:-8px; top:7%; z-index:3; transform:rotate(2.5deg);
  background:var(--os); color:var(--sur-jour); padding:.55rem 1.05rem;
  font-family:var(--f-d); font-variation-settings:var(--wonk),"opsz" 24;
  font-style:italic; font-weight:600; font-size:.92rem;
  box-shadow:var(--ombre-j);
}


/* ============================================================
   PLATS — vedette + grille
   ============================================================ */
.vedette{
  position:relative; display:grid; gap:0; margin-bottom:clamp(1.8rem,3.4vw,2.8rem);
  background:var(--braise); border:1px solid rgba(224,169,60,.3);
  color:var(--sur-nuit); overflow:hidden; box-shadow:var(--ombre-j);
}
@media (min-width:840px){ .vedette{ grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); } }
.vedette__img{
  position:relative; min-height:clamp(280px,36vw,420px);
  display:grid; place-items:center; padding:clamp(1.3rem,2.4vw,2rem);
  background:radial-gradient(circle at 50% 45%, #2E1F0E, var(--braise) 72%);
}
.vedette__img img{
  width:min(88%,430px); aspect-ratio:1; border-radius:50%;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.6));
  transition:transform 1s var(--ease-out);
}
.vedette:hover .vedette__img img{ transform:rotate(-5deg) scale(1.03); }
.vedette__img::after{
  content:""; position:absolute; width:min(96%,470px); aspect-ratio:1; border-radius:50%;
  border:1px dashed rgba(224,169,60,.3);
}
.vedette__txt{
  position:relative; padding:clamp(1.9rem,3.6vw,3rem) clamp(1.5rem,3.6vw,3rem);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.85rem;
  border-left:1px solid rgba(224,169,60,.16);
}
@media (max-width:839px){ .vedette__txt{ border-left:0; border-top:1px solid rgba(224,169,60,.16); } }
.vedette__txt .etiq{
  font-family:var(--f-c); font-stretch:88%; font-weight:600; font-size:.63rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--or);
  border:1px solid rgba(224,169,60,.4); padding:.42em 1em; border-radius:99px;
}
.vedette__txt h3{ font-size:clamp(1.9rem,3.8vw,2.9rem); font-weight:800; letter-spacing:-.025em; line-height:1; }
.vedette__txt .desc{ font-size:1rem; color:var(--sur-nuit-2); max-width:38ch; }
.vedette__txt .pastille{ font-size:1.5rem; letter-spacing:.02em; }
/* la vedette est un panneau sombre posé dans une section claire :
   il faut lui redonner les variantes « sur fond sombre » */
.vedette .pastille{ color:var(--or); }
.vedette .btn-contour{ color:var(--sur-nuit); border-color:rgba(240,229,209,.34); }
.vedette .btn-contour:hover{ color:var(--sur-nuit); border-color:rgba(240,229,209,.75); background:rgba(240,229,209,.07); }

/* grille */
.grille-plats{ display:grid; gap:clamp(1.1rem,2.2vw,1.7rem); }
@media (min-width:600px){ .grille-plats{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .grille-plats{ grid-template-columns:repeat(3,1fr); } }
/* catégories courtes : moins de colonnes, donc des photos plus grandes */
@media (min-width:600px){ .grille-plats--large{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .grille-plats--large{ grid-template-columns:repeat(2,1fr); } }
.grille-plats--large .plat__tete h3{ font-size:1.45rem; }
/* catégorie de quatre plats — les desserts : une seule ligne, jamais trois
   cartes puis une orpheline. Entre 600 et 1100 px la ligne de quatre serrerait
   trop les photos, on repasse donc par un carré de deux sur deux.
   Ces règles suivent celles de .grille-plats : à spécificité égale, c'est
   l'ordre du fichier qui tranche. */
@media (min-width:600px){ .grille-plats--quatre{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .grille-plats--quatre{ grid-template-columns:repeat(4,1fr); } }

.plat{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--craie); border:1px solid var(--ligne-j); border-radius:var(--r);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .35s;
}
.section--nuit .plat{ background:var(--braise); border-color:rgba(224,169,60,.16); }
.section--os .plat, .menu-section:nth-of-type(even) .plat{ box-shadow:0 3px 12px -8px rgba(36,26,16,.35); }
.plat:hover{ transform:translateY(-6px); box-shadow:var(--ombre-j); border-color:rgba(224,169,60,.45); }
.section--nuit .plat:hover{ box-shadow:var(--ombre-n); }
.plat__img{ position:relative; aspect-ratio:1; background:#1B1309; overflow:hidden; }
.plat__zoom{ position:absolute; inset:0; overflow:hidden; }
.plat__zoom img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out); }
.plat:hover .plat__zoom img{ transform:scale(1.05); }

.plat__label{
  position:absolute; top:12px; left:12px; z-index:3;
  font-family:var(--f-c); font-stretch:88%; font-weight:600; font-size:.58rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--os);
  background:rgba(10,8,6,.7); backdrop-filter:blur(4px);
  border:1px solid rgba(240,229,209,.32); padding:.4em .85em; border-radius:99px;
}

.plat__corps{ padding:1.15rem 1.2rem 1.35rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
/* nom à gauche, prix à droite sur la même ligne de base — pas de macaron */
.plat__tete{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.plat__tete h3{ font-size:1.24rem; color:var(--sur-jour); }
.section--nuit .plat__tete h3{ color:var(--sur-nuit); }
.pastille{
  font-family:var(--f-c); font-stretch:100%; font-weight:600; font-size:1rem;
  letter-spacing:.02em; color:var(--or); white-space:nowrap;
}
.section--os .pastille, .menu-section:nth-of-type(even) .pastille{ color:var(--brique); }
/* …sauf dans la vedette, panneau sombre posé dans une section claire */
.section--os .vedette .pastille{ color:var(--or); }
.plat__desc{ font-size:.885rem; line-height:1.55; color:var(--sur-jour-2); }
.section--nuit .plat__desc{ color:var(--sur-nuit-2); }
.plat--signature{ border-color:rgba(224,169,60,.42); }
.badge-halal{
  align-self:flex-start; margin-top:.3rem; font-family:var(--f-c); font-stretch:88%;
  font-size:.58rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--basilic); border:1px solid currentColor; border-radius:99px; padding:.28em .8em;
}


/* ============================================================
   AVIS — parti pris « palmarès de guide »
   Plus de cartes encadrées : deux notes posées sur une bande réglée, puis
   trois citations en exergue. Les cadres opaques d'avant bouchaient le
   filigrane d'enseigne posé dans le fond de la section.
   ============================================================ */
.h2--mini{
  font-size:clamp(1.35rem,2.4vw,1.95rem); letter-spacing:-.018em; line-height:1.15;
  color:var(--sur-nuit); margin-bottom:clamp(1.4rem,2.6vw,2.2rem);
}

/* Échelle unique pour toute la section : une seule taille de chiffre, une
   seule taille de micro-libellé, une seule taille d'étoiles. Les valeurs
   vivent ici et nulle part ailleurs — c'est ce qui garantit que la note, le
   volume d'avis et les citations restent accordés. */
#avis{
  --avis-chiffre: clamp(2.45rem, 4.7vw, 3.875rem); /* note ET volume d'avis — 62 px au plafond */
  --avis-micro:   .68rem;                          /* libellés et signatures */
  --avis-etoiles: 104px;
  --avis-carte:   rgba(27,19,9,.5);                /* translucide : le filigrane reste lisible dessous */
  --avis-filet:   rgba(224,169,60,.18);
}

/* étoiles en SVG : chasse et graisse identiques partout, contrairement au
   caractère ★ qui part en emoji sur certaines plateformes */
.etoiles{ display:block; width:var(--avis-etoiles); height:auto; fill:var(--or); }

/* --- socle commun des cartes de la section --- */
.note-plateforme, .avis{
  background:var(--avis-carte); border:1px solid var(--avis-filet);
  border-radius:var(--r);
}

/* --- le palmarès --- */
.palmares{ display:grid; gap:clamp(1rem,1.8vw,1.4rem); }
/* deux colonnes à partir de 760 px : en dessous, les deux chiffres ne
   tiendraient plus côte à côte dans une carte */
@media (min-width:760px){ .palmares{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.note-plateforme{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.5rem,3vw,2.2rem);
  padding:clamp(1.8rem,3.2vw,2.6rem) clamp(1.2rem,2.6vw,2rem);
}
.note-plateforme__tete{ display:flex; flex-direction:column; align-items:center; gap:.85rem; }
.note-plateforme__marque{ width:auto; flex:none; }
/* Hauteurs différentes, et c'est volontaire : mesurées sur les deux fichiers,
   la capitale de « Google » occupe 81 % de sa boîte contre 68 % pour TheFork,
   dont l'icône ronde déborde du lettrage. À boîte égale, TheFork paraîtrait
   plus petit. Le rapport 1,19 égalise les hauteurs de capitale. */
.note-plateforme__marque--google{ height:clamp(21px,2.3vw,27px); }
.note-plateforme__marque--thefork{ height:clamp(25px,2.7vw,32px); }

/* Les deux chiffres forment un couple centré dans la carte. Les pousser aux
   extrémités creusait un trou au milieu ; centrés, les marges sont symétriques
   et se lisent comme de la composition, pas comme du vide. */
.note-plateforme__corps{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(1.6rem,4vw,3.2rem); width:100%;
}
.donnee{ display:flex; flex-direction:column; align-items:center; gap:.55rem; min-width:0; }
.donnee__val{
  font-family:var(--f-d); font-variation-settings:var(--wonk),"opsz" 144; font-weight:900;
  font-size:var(--avis-chiffre); line-height:.82; letter-spacing:-.04em; color:#fff;
  font-variant-numeric:tabular-nums lining-nums; white-space:nowrap;
}
/* unité et exposant collés à la valeur, sur sa ligne de base */
.donnee__unite{
  font-family:var(--f-c); font-stretch:92%; font-weight:600; font-size:.3em;
  letter-spacing:.01em; color:var(--or); margin-left:.1em;
  font-variant-numeric:tabular-nums lining-nums;
}
.donnee__lib{
  font-family:var(--f-c); font-stretch:88%; font-weight:600; font-size:var(--avis-micro);
  letter-spacing:.2em; text-transform:uppercase; color:var(--sur-nuit-2); white-space:nowrap;
}

/* --- les citations --- */
.avis-grille{ display:grid; gap:clamp(1rem,1.8vw,1.4rem); margin-top:clamp(1rem,1.8vw,1.4rem); }
@media (min-width:880px){ .avis-grille{ grid-template-columns:repeat(3,1fr); } }
.avis{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:1rem;
  padding:clamp(1.6rem,2.8vw,2.2rem) clamp(1.4rem,2.4vw,1.9rem);
  /* contexte d'empilement propre : sans lui, le guillemet en z-index négatif
     passerait derrière le fond de la carte et disparaîtrait */
  isolation:isolate;
}
/* guillemet ouvrant en exergue, posé en haut à droite dans la carte : à gauche
   il percutait les étoiles, deux ors superposés qui se brouillaient */
.avis::before{
  content:"“"; position:absolute; top:.06em; right:.12em; z-index:-1;
  font-family:var(--f-d); font-variation-settings:var(--wonk),"opsz" 144;
  font-weight:900; font-style:italic; font-size:clamp(3.6rem,6vw,4.8rem); line-height:1;
  color:var(--or); opacity:.14; user-select:none; pointer-events:none;
}
.avis p{
  font-family:var(--f-d); font-variation-settings:var(--wonk),"opsz" 36;
  font-style:italic; font-weight:500; font-size:1.08rem; line-height:1.55;
  color:var(--sur-nuit);
}
/* même corps et même graisse que les libellés du palmarès : les signatures et
   les mentions « note moyenne » appartiennent au même niveau de lecture */
.avis cite{
  font-style:normal; font-family:var(--f-c); font-stretch:88%; font-weight:600;
  font-size:var(--avis-micro); letter-spacing:.2em; text-transform:uppercase;
  color:var(--sur-nuit-2);
  display:flex; align-items:center; gap:.7em; margin-top:auto;
}
.avis cite::before{ content:""; width:22px; height:1px; background:var(--or); flex:none; }

/* ============================================================
   PRATIQUE
   ============================================================ */
.pratique{ display:grid; gap:clamp(2rem,5vw,3.6rem); align-items:start; }
@media (min-width:920px){ .pratique{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }
.pratique dl{ display:grid; gap:1.5rem; }
.pratique dt{
  font-family:var(--f-c); font-stretch:88%; font-size:.64rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--or-f); margin-bottom:.3rem;
}
.pratique dd{ font-size:1.04rem; color:var(--sur-jour); }
.pratique dd a{
  display:inline-block; padding-block:.24em; color:var(--brique-f); font-weight:600;
  text-decoration:none; border-bottom:1px solid rgba(126,40,24,.3);
}
.pratique dd a:hover{ border-color:var(--brique); }
.horaires div{
  display:flex; justify-content:space-between; gap:1.5rem; max-width:400px;
  padding:.48rem 0; border-bottom:1px solid var(--ligne-j); font-size:.96rem;
}
.horaires div span:first-child{ font-family:var(--f-c); font-stretch:92%; font-weight:600; letter-spacing:.03em; }
.horaires div span:last-child{ font-variant-numeric:tabular-nums lining-nums; }
.horaires .ferme{ color:var(--brique-f); font-weight:700; }
.pratique__cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.9rem; }
.pratique__carte{
  position:relative; min-height:min(62vw,420px); overflow:hidden;
  border:1px solid rgba(36,26,16,.18); background:var(--os-2); box-shadow:var(--ombre-j);
}
.pratique__carte iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.35) sepia(.32) saturate(.9) contrast(1.03); }
.pratique__carte .epingle{
  position:absolute; left:0; bottom:0; z-index:2; background:var(--noir); color:var(--sur-nuit);
  padding:.9rem 1.3rem; font-family:var(--f-c); font-stretch:88%; font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase; border-top:2px solid var(--brique);
}

/* ============================================================
   COMMANDER
   ============================================================ */
.commander{ position:relative; overflow:clip; background:var(--braise); }
.commander::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(58% 68% at 12% 108%, rgba(178,58,36,.3), transparent 62%),
    radial-gradient(50% 64% at 88% -12%, rgba(224,169,60,.16), transparent 60%);
}
.commander .section__in{ position:relative; }
.commander__duo{ display:grid; gap:clamp(2rem,4.5vw,3.6rem); align-items:stretch; }
@media (min-width:960px){ .commander__duo{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); } }
.commander__visuel{ position:relative; display:flex; }
.commander__visuel .cadre-photo{
  position:relative; overflow:hidden; flex:1;
  min-height:clamp(290px,40vw,560px); box-shadow:var(--ombre-n);
  border:1px solid rgba(224,169,60,.24);
}
.commander__visuel img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.commander__visuel .cadre-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(126,40,24,.34), rgba(10,8,6,.18) 45%, rgba(10,8,6,.82));
}
.commander__visuel .sceau{
  position:absolute; z-index:2; right:-16px; bottom:30px;
  width:clamp(100px,10.5vw,134px); aspect-ratio:1; border-radius:50%;
  display:grid; place-content:center; text-align:center; gap:.15em; transform:rotate(-5deg);
  background:var(--os); color:var(--sur-jour);
  border:1px solid rgba(122,85,18,.4);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.7);
}
.commander__visuel .sceau b{
  font-family:var(--f-c); font-stretch:88%; font-weight:600; text-transform:uppercase;
  font-size:.66rem; letter-spacing:.13em; line-height:1.35;
}
.commander__visuel .sceau span{ font-family:var(--f-d); font-style:italic; font-size:.76rem; color:var(--or-f); }

.commander__txt{ display:flex; flex-direction:column; align-items:flex-start; }
.commander__txt .plomb{ margin-top:1.1rem; }
.services{ list-style:none; display:grid; gap:0; width:100%; margin:1.9rem 0 2.1rem; }
@media (min-width:620px){ .services{ grid-template-columns:repeat(3,1fr); gap:1.4rem; } }
.services li{
  display:flex; flex-direction:column; gap:.35rem; padding-top:.95rem;
  border-top:1px solid rgba(224,169,60,.28);
}
@media (max-width:619px){ .services li{ padding:.95rem 0; } }
.services svg{ width:22px; height:22px; stroke:var(--or); fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.services b{
  font-family:var(--f-d); font-variation-settings:var(--wonk),"opsz" 24;
  font-weight:700; font-size:1rem; color:var(--sur-nuit); letter-spacing:-.01em;
}
.services span{ font-size:.84rem; color:var(--sur-nuit-2); line-height:1.5; }
.commander__grille{ display:grid; gap:.9rem; width:100%; }
@media (min-width:520px){ .commander__grille{ grid-template-columns:repeat(2,1fr); } }
.plateforme{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:1.7rem 1.2rem 1.5rem; text-decoration:none; overflow:hidden;
  background:rgba(10,8,6,.5); border:1px solid rgba(240,229,209,.2); border-radius:var(--r);
  transition:transform .35s var(--ease-out), border-color .3s, background-color .3s;
}
.plateforme b{
  font-family:var(--f-d); font-variation-settings:var(--wonk),"opsz" 24;
  font-weight:700; font-size:1.06rem; color:var(--sur-nuit); letter-spacing:-.012em;
}
.plateforme small{ font-family:var(--f-c); font-size:.82rem; color:var(--sur-nuit-2); letter-spacing:.04em; }
.plateforme:hover{ transform:translateY(-4px); border-color:rgba(240,229,209,.55); background:rgba(10,8,6,.72); }
/* Plateformes de livraison : la marque est signalée par sa couleur officielle
   et son nom, sans reproduire le logo déposé (Deliveroo #00CCBC, Uber Eats #06C167).
   Pour poser les vrais logos, récupérer le kit de marque partenaire de chaque
   plateforme et remplacer .plateforme__marque par le SVG fourni. */
.plateforme__marque{
  display:inline-flex; align-items:center; gap:.5em; margin-bottom:.15rem;
  font-family:var(--f-c); font-stretch:96%; font-weight:700; font-size:.78rem;
  letter-spacing:.06em; text-transform:none;
}
.plateforme__marque::before{
  content:""; width:9px; height:9px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
.plateforme--deliveroo .plateforme__marque{ color:#00CCBC; }
.plateforme--ubereats .plateforme__marque{ color:#06C167; }
.plateforme--deliveroo:hover{ border-color:rgba(0,204,188,.6); }
.plateforme--ubereats:hover{ border-color:rgba(6,193,103,.6); }
.plateforme--deliveroo::after, .plateforme--ubereats::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  transform:scaleX(0); transition:transform .4s var(--ease-out);
}
.plateforme--deliveroo::after{ background:#00CCBC; }
.plateforme--ubereats::after{ background:#06C167; }
.plateforme--deliveroo:hover::after, .plateforme--ubereats:hover::after{ transform:scaleX(1); }

/* le téléphone reste l'action principale : c'est la seule sans commission */
.plateforme--fort{ background:var(--sur-nuit); border-color:var(--sur-nuit); }
.plateforme--fort b{ color:#17110A; }
.plateforme--fort small{ color:#5A4A33; }
.plateforme--fort:hover{ background:#FFF9EC; border-color:#FFF9EC; }
.ouvert-7j{ color:#2C6B33; font-weight:700; }
.commander__tel{ margin-top:2rem; }
.commander__tel a{
  font-family:var(--f-c); font-weight:600; font-size:clamp(1.7rem,4.2vw,2.7rem);
  color:var(--or); text-decoration:none; letter-spacing:.02em;
  font-variant-numeric:tabular-nums lining-nums;
  border-bottom:1px solid rgba(224,169,60,.35); transition:color .3s, border-color .3s;
}
.commander__tel a:hover{ color:var(--or-c); border-color:var(--or-c); }
.commander__tel p{ font-family:var(--f-c); font-stretch:88%; font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--sur-nuit-2); margin-bottom:.65rem; }

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.pied{ position:relative; background:var(--noir); padding:clamp(56px,7vw,92px) var(--pad) 1.4rem; overflow:clip; }
.pied::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--basilic) 0 33.33%, var(--os) 33.33% 66.66%, var(--brique) 66.66%);
}
.pied__in{ position:relative; max-width:var(--max); margin:0 auto; display:grid; gap:2.4rem; }
@media (min-width:860px){ .pied__in{ grid-template-columns:auto 1fr auto auto; align-items:start; gap:3rem; } }
.pied address{ font-style:normal; line-height:1.8; color:var(--sur-nuit-2); font-size:.93rem; }
.pied address strong{
  display:block; font-family:var(--f-d); font-variation-settings:var(--wonk),"opsz" 36;
  font-weight:800; font-size:1.25rem; color:var(--sur-nuit); margin-bottom:.25rem; letter-spacing:-.015em;
}
.pied address a{ color:var(--or); text-decoration:none; font-weight:500; }
.pied nav{ display:grid; gap:.65rem; align-content:start; }
.pied nav a{
  color:var(--sur-nuit-2); text-decoration:none; font-family:var(--f-c); font-stretch:92%;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; transition:color .25s;
}
.pied nav a:hover{ color:var(--or); }
.pied__mot{
  position:relative; max-width:var(--max); margin:clamp(2.4rem,5vw,4rem) auto 0;
  font-family:var(--f-d); font-variation-settings:var(--wonk),"opsz" 144;
  font-weight:900; text-transform:uppercase;
  font-size:clamp(2.8rem,13vw,10rem); line-height:.86; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1px rgba(224,169,60,.32);
  white-space:nowrap; text-align:center; user-select:none; pointer-events:none;
}
.pied__bas{
  max-width:var(--max); margin:clamp(1.5rem,3vw,2.2rem) auto 0; padding-top:1.2rem;
  border-top:1px solid rgba(224,169,60,.14);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--f-c); font-stretch:92%; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sur-nuit-2);
}

/* ============================================================
   BARRE D'ACTION MOBILE
   ============================================================ */
.barre-action{
  position:fixed; left:0; right:0; bottom:0; z-index:180;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem;
  background:rgba(10,8,6,.95); backdrop-filter:blur(16px);
  border-top:1px solid rgba(224,169,60,.2);
  padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom));
  transition:transform .4s var(--ease);
}
.barre-action.cachee{ transform:translateY(115%); }
.barre-action a{
  display:flex; flex-direction:column; align-items:center; gap:.22rem;
  text-decoration:none; color:var(--sur-nuit); padding:.5rem .2rem; border-radius:2px;
  font-family:var(--f-c); font-stretch:90%; font-size:.62rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
}
.barre-action svg{ width:19px; height:19px; }
.barre-action .principal{ background:var(--sur-nuit); color:#17110A; }
@media (min-width:1000px){ .barre-action{ display:none; } }
@media (max-width:999px){ body{ padding-bottom:74px; } }

/* ============================================================
   PAGE CARTE
   ============================================================ */
.menu-tete{
  position:relative; overflow:clip; isolation:isolate;
  min-height:min(60svh,500px); display:flex; align-items:flex-end;
  padding-top:calc(var(--hdr) + 3rem);
}
.menu-tete__fond{ position:absolute; inset:0; z-index:-3; }
.menu-tete__fond img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.menu-tete::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    /* le texte occupe la gauche : on l'assombrit franchement et on laisse
       respirer la droite, où se trouve le foyer */
    linear-gradient(100deg, rgba(10,8,6,.93) 0 28%, rgba(10,8,6,.6) 56%, rgba(10,8,6,.1) 88%),
    linear-gradient(180deg, rgba(10,8,6,.82) 0 8%, rgba(10,8,6,.05) 38% 62%, rgba(10,8,6,.92) 96%);
}
.menu-tete__in{ position:relative; max-width:var(--max); margin:0 auto; width:100%; padding:0 var(--pad) clamp(2.4rem,4.5vw,3.6rem); }
.menu-tete h1{ margin-bottom:1rem; }
.menu-tete .plomb{ max-width:50ch; }
.menu-tete__meta{
  display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.4rem;
  font-family:var(--f-c); font-stretch:88%; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sur-nuit-2);
}
.menu-tete__meta span{ display:inline-flex; align-items:center; gap:.6em; }
.menu-tete__meta span::before{ content:""; width:5px; height:5px; background:var(--or); border-radius:50%; }

.menu-nav{
  position:sticky; top:calc(var(--hdr) - 12px); z-index:150;
  background:rgba(10,8,6,.94); backdrop-filter:blur(14px);
  border-block:1px solid rgba(224,169,60,.18);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity;
}
.menu-nav::-webkit-scrollbar{ display:none; }
.menu-nav__in{ display:flex; gap:.4rem; padding:.55rem var(--pad); max-width:calc(var(--max) + 2*var(--pad)); margin:0 auto; }
.menu-nav a{
  flex:none; scroll-snap-align:center; text-decoration:none; white-space:nowrap;
  font-family:var(--f-c); font-stretch:90%; font-weight:500; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sur-nuit-2);
  padding:.7em 1.1em; border:1px solid transparent; border-radius:99px;
  min-height:44px; display:inline-flex; align-items:center; gap:.45em;
  transition:color .25s, background-color .25s, border-color .25s;
}
.menu-nav a small{ font-family:var(--f-c); font-size:.9em; letter-spacing:.04em; opacity:.65; font-variant-numeric:tabular-nums; }
.menu-nav a:hover{ color:var(--or); border-color:rgba(224,169,60,.35); }
.menu-nav a.actif{ background:var(--sur-nuit); border-color:var(--sur-nuit); color:#17110A; }
.menu-nav a.actif small{ opacity:.7; }

/* alternance des sections de la carte */
.menu-section{ padding:clamp(48px,7vw,92px) var(--pad); scroll-margin-top:calc(var(--hdr) + 60px); background:var(--noir); }
.menu-section:nth-of-type(even){ background:var(--os); color:var(--sur-jour); }
.menu-section:nth-of-type(even) h2{ color:var(--sur-jour); }
.menu-section:nth-of-type(even) .num{ color:var(--brique-f); }
.menu-section:nth-of-type(even) .note-cat,
.menu-section:nth-of-type(even) .note-rail{ color:var(--sur-jour-2); }
.menu-section:nth-of-type(even) .plat{ background:var(--craie); border-color:var(--ligne-j); }
.menu-section:nth-of-type(even) .plat__tete h3{ color:var(--sur-jour); }
.menu-section:nth-of-type(even) .plat__desc{ color:var(--sur-jour-2); }
.menu-section:nth-of-type(odd) .plat{ background:var(--braise); border-color:rgba(224,169,60,.16); }
.menu-section:nth-of-type(odd) .plat__tete h3{ color:var(--sur-nuit); }
.menu-section:nth-of-type(odd) .plat__desc{ color:var(--sur-nuit-2); }
.menu-section__in{ max-width:var(--max); margin:0 auto; }
.menu-section h2{ margin-bottom:.6rem; }
/* numéro de catégorie : discret, en Archivo tabulaire */
.num{
  display:block; font-family:var(--f-c); font-stretch:92%; font-weight:600;
  font-size:.72rem; letter-spacing:.26em; color:var(--or);
  margin-bottom:.7rem; font-variant-numeric:tabular-nums lining-nums;
}
.note-cat, .note-rail{
  font-family:var(--f-d); font-style:italic; font-weight:500;
  font-size:1.02rem; color:var(--sur-nuit-2); margin-bottom:.4rem;
}
.note-rail{ margin-top:1.3rem; }
.menu-section .grille-plats{ margin-top:1.8rem; }

.rail-signatures{
  display:flex; gap:1.1rem; overflow-x:auto; padding:.6rem .2rem 1.5rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  scroll-behavior:smooth; margin-top:1rem;
}
.rail-signatures::-webkit-scrollbar{ display:none; }
.rail-signatures .plat{ flex:0 0 min(76vw,330px); scroll-snap-align:center; }

/* Flèches de défilement — posées par main.js, donc absentes sans JS
   (le rail reste alors défilable au doigt et au trackpad). */
.rail{ position:relative; }
.rail__fleche{
  position:absolute; top:calc(50% - 1.5rem); z-index:4;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(10,8,6,.82); backdrop-filter:blur(6px);
  border:1px solid rgba(224,169,60,.45); color:var(--or-c);
  transition:opacity .3s, transform .3s var(--ease), background-color .25s, border-color .25s;
}
.rail__fleche svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rail__fleche--g{ left:-6px; }
.rail__fleche--d{ right:-6px; }
.rail__fleche:hover{ background:var(--or); border-color:var(--or); color:var(--noir); transform:scale(1.06); }
.rail__fleche[disabled]{ opacity:0; pointer-events:none; }
.menu-section:nth-of-type(even) .rail__fleche{
  background:rgba(244,233,214,.9); border-color:rgba(126,40,24,.35); color:var(--brique-f);
}
.menu-section:nth-of-type(even) .rail__fleche:hover{ background:var(--brique); border-color:var(--brique); color:var(--os); }
@media (max-width:860px){ .rail__fleche{ display:none; } }

/* listes de carte */
.liste-plats{ list-style:none; display:grid; gap:0 clamp(1.6rem,4.5vw,4rem); margin-top:1.8rem; }
@media (min-width:760px){ .liste-plats{ grid-template-columns:1fr 1fr; } }
.plat-ligne{
  display:grid; grid-template-columns:64px auto 1fr auto; gap:1rem; align-items:center;
  padding:.85rem 0; border-bottom:1px solid rgba(224,169,60,.14);
}
.menu-section:nth-of-type(even) .plat-ligne{ border-bottom-color:var(--ligne-j); }
.plat-ligne--sans{ grid-template-columns:auto 1fr auto; }
.plat-ligne img{ width:64px; aspect-ratio:1; object-fit:cover; border-radius:50%; border:1px solid rgba(224,169,60,.26); }
.plat-ligne h3{ font-size:1.08rem; color:var(--sur-nuit); }
.menu-section:nth-of-type(even) .plat-ligne h3{ color:var(--sur-jour); }
.plat-ligne .desc{ font-size:.84rem; color:var(--sur-nuit-2); line-height:1.45; }
.menu-section:nth-of-type(even) .plat-ligne .desc{ color:var(--sur-jour-2); }
.pointille{ align-self:center; height:1px; min-width:14px; border-bottom:1px dotted rgba(224,169,60,.4); }
.menu-section:nth-of-type(even) .pointille{ border-bottom-color:rgba(36,26,16,.26); }
.prix{
  font-family:var(--f-c); font-weight:600; font-size:1.04rem; color:var(--or);
  white-space:nowrap; letter-spacing:.02em;
}
.menu-section:nth-of-type(even) .prix{ color:var(--brique); }

/* Plat vedette d'une catégorie : une grande photo, le reste en liste.
   Volontairement sans cadre — ni bordure, ni fond, ni ombre.
   Le bloc occupe toute la largeur de la section, comme les grilles de cartes
   des autres catégories : mêmes bords gauche et droit, donc même trame.
   La liste des autres plats vit dans la colonne de droite — sinon celle-ci
   restait à moitié vide et l'ensemble paraissait décentré. */
.plat-vedette{ display:grid; gap:clamp(1.6rem,3.4vw,3.2rem); margin-top:2rem; }
@media (min-width:840px){ .plat-vedette{ grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); } }
.plat-vedette__img{ position:relative; overflow:hidden; border-radius:var(--r); }
.plat-vedette__img img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform 1.4s var(--ease-out);
}
.plat-vedette:hover .plat-vedette__img img{ transform:scale(1.03); }
/* le texte en haut, la liste en bas : les deux extrémités de la colonne
   s'alignent sur celles de la photo */
.plat-vedette__txt{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(1.8rem,4vw,3rem);
}
.plat-vedette__tete{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; }
/* un filet court remplace le cadre : il ouvre le bloc de texte */
.plat-vedette__tete::before{
  content:""; width:56px; height:2px; background:var(--or); margin-bottom:.5rem;
}
.plat-vedette__txt h3{ font-size:clamp(2rem,3.8vw,3rem); font-weight:800; letter-spacing:-.025em; line-height:1; }
.plat-vedette__txt .pastille{ font-size:1.45rem; }
.plat-vedette__txt .plat__desc{ font-size:1.02rem; max-width:34ch; }
.plat-vedette__txt .liste-simple{ max-width:none; margin-top:0; }
.plat-vedette .main-ecrite{ margin-bottom:.1rem; }
.menu-section:nth-of-type(even) .plat-vedette__tete::before{ background:var(--brique); }
.menu-section:nth-of-type(even) .plat-vedette__txt h3{ color:var(--sur-jour); }
.menu-section:nth-of-type(even) .plat-vedette__txt .plat__desc{ color:var(--sur-jour-2); }

.liste-simple{ display:grid; gap:.15rem; margin-top:1.5rem; max-width:640px; }
/* liste posée sous un plat vedette : un peu plus d'air et de largeur */
.liste-simple--large{ max-width:760px; margin-top:2rem; }
.liste-simple--large li{ padding:.85rem 0; }
.liste-simple--large li > span:first-child{ font-size:1.08rem; }
.liste-simple li{ list-style:none; display:flex; align-items:baseline; gap:.8rem; padding:.65rem 0; border-bottom:1px solid rgba(224,169,60,.14); }
.menu-section:nth-of-type(even) .liste-simple li{ border-bottom-color:var(--ligne-j); }
.liste-simple li > span:first-child{ font-family:var(--f-d); font-variation-settings:var(--wonk),"opsz" 24; font-weight:600; font-size:1rem; }
.liste-simple .pointille{ flex:1; transform:translateY(-4px); }
.parfums{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.3rem; list-style:none; }
.parfums li{
  border:1px solid rgba(224,169,60,.3); border-radius:99px; padding:.42em 1.1em;
  font-family:var(--f-c); font-stretch:90%; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sur-nuit-2);
}
.menu-section:nth-of-type(even) .parfums li{ border-color:rgba(36,26,16,.2); color:var(--sur-jour-2); }

.mentions{
  max-width:var(--max); margin:0 auto; padding:clamp(1.8rem,3.6vw,2.8rem) var(--pad) clamp(2.8rem,5vw,4rem);
  display:grid; gap:.35rem; font-family:var(--f-c); font-stretch:92%;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sur-nuit-2);
  background:var(--noir);
}

.rappel{ background:var(--noir); padding:0 var(--pad) clamp(2.8rem,5.5vw,4.5rem); }
.rappel__in{
  max-width:var(--max); margin:0 auto; padding:clamp(1.8rem,3.6vw,2.8rem);
  border:1px solid rgba(224,169,60,.22);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
  background:linear-gradient(120deg, rgba(178,58,36,.1), transparent 60%);
}

/* ============================================================
   PAGES SECONDAIRES (contact, mentions légales)
   ============================================================ */
.page-tete{
  position:relative; background:var(--noir);
  padding:calc(var(--hdr) + clamp(3rem,7vw,5.5rem)) var(--pad) clamp(2.4rem,5vw,3.8rem);
  border-bottom:1px solid rgba(224,169,60,.16);
}
.page-tete::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 90% at 18% 120%, rgba(226,90,20,.16), transparent 66%);
}
.page-tete__in{ position:relative; max-width:var(--max); margin:0 auto; }
.page-tete h1{ margin-bottom:1rem; }
.page-tete .hero__ligne1{ font-size:clamp(2.1rem,5.6vw,4.2rem); }
.page-tete .hero__ligne2{ font-size:clamp(2.4rem,6.6vw,5rem); }
.page-tete--sobre::before{ display:none; }

.prose{ max-width:74ch; }
.prose--etroit{ max-width:64ch; }
.prose h2{ font-size:clamp(1.5rem,3vw,2.2rem); margin:clamp(2.2rem,4vw,3rem) 0 .9rem; }
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--sur-nuit-2); margin-bottom:1rem; line-height:1.72; }
.prose strong{ color:var(--sur-nuit); font-weight:600; }
.prose a{ color:var(--or); text-decoration:none; border-bottom:1px solid rgba(224,169,60,.35); }
.prose a:hover{ color:var(--or-c); border-color:var(--or-c); }
.prose__liste{ list-style:none; display:grid; gap:.7rem; margin:.4rem 0 1.2rem; }
.prose__liste li{
  position:relative; padding-left:1.4rem; color:var(--sur-nuit-2); line-height:1.65;
}
.prose__liste li::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--or);
}
.prose__maj{ margin-top:2.4rem; font-size:.82rem; color:var(--sur-nuit-2); font-style:italic; }

.faq{ display:grid; gap:0; margin-top:.6rem; }
.faq dt{
  font-family:var(--f-d); font-variation-settings:var(--wonk),"opsz" 36;
  font-weight:700; font-size:1.08rem; color:var(--sur-nuit);
  padding-top:1.1rem; border-top:1px solid rgba(224,169,60,.18);
}
.faq dd{ color:var(--sur-nuit-2); padding:.35rem 0 1.1rem; line-height:1.65; }

/* ============================================================
   RÉVÉLATION AU SCROLL
   ============================================================ */
html.js-actif .rvl{
  opacity:0; transform:translateY(30px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
html.js-actif .rvl.in{ opacity:1; transform:none; }
html.js-actif .rvl--tard{ transition-delay:.13s; }

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

@media print{
  .entete,.menu-nav,.pied,.barre-action,.hero__cta,.pratique__carte,.tricolore{ display:none !important; }
  body{ background:#fff; color:#000; padding-bottom:0; }
  .menu-section, .menu-section:nth-of-type(even){ background:#fff; color:#000; }
  /* le filigrane et le guillemet d'exergue sortiraient en aplats gris sales */
  .filigrane::after, .avis::before{ display:none !important; }
}