/* ==========================================================================
   Viaggio Ristorante — Orléans
   Feuille de style unique. Aucune dépendance externe (hors Google Fonts).
   Palette et identité reprises du site restaurant-viaggio.fr.
   ========================================================================== */

:root {
  --navy:        #16152E;
  --navy-2:      #1E1C3D;
  --navy-3:      #2E2B78;
  --gold:        #C9A24B;
  --gold-lt:     #E0BF71;
  --gold-dk:     #A8842F;
  --cream:       #FBF9F4;
  --cream-2:     #F6F1E7;
  --sand:        #E9E4D8;
  --ink:         #16152E;
  --muted:       #4A4864;
  --muted-2:     #6A6785;
  --muted-3:     #8480A0;
  --terra:       #B9402F;
  --it-green:    #0B7A3B;

  --shell:       1280px;
  --shell-tight: 1120px;

  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Great Vibes', 'Apple Chancery', cursive;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --r-sm: 3px;
  --r-md: 6px;
  --r-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* décalage pour l'en-tête collant lors des ancres */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.vg-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--gold-dk); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--terra); }
::selection { background: var(--gold); color: var(--navy); }

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

/* Lien d'évitement — accessibilité clavier */
.vg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--cream);
  padding: 12px 20px; border-radius: 0 0 var(--r-md) 0;
}
.vg-skip:focus { left: 0; color: var(--cream); }

/* ---------- Typographie ------------------------------------------------- */

.script {
  font-family: var(--script);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .005em;
  /* Great Vibes a des jambages très longs : on laisse respirer */
  padding-bottom: .12em;
}

/* block, et non inline-block : les grands titres script portent la classe
   .shine (inline-block), ils se placeraient sinon À CÔTÉ du sur-titre. */
.eyebrow {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
  margin: 0 0 12px;
}
.eyebrow.on-dark { color: var(--gold); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; }

.h-display {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(58px, 11vw, 156px);
  line-height: .9;
  letter-spacing: .01em;
  padding-bottom: .1em;
}
.h-1 {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: .98;
  padding-bottom: .1em;
}
.h-2 {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1.02;
  padding-bottom: .1em;
}
.h-3 {
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  letter-spacing: -.01em;
}

.lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.68;
  font-weight: 300;
  color: var(--muted);
  text-wrap: pretty;
}
.on-dark .lead, .lead.on-dark { color: var(--sand); }

.gold { color: var(--gold); }
.terra { color: var(--terra); }

/* Filet doré décoratif */
.rule {
  width: 64px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 18px 0 0;
}

/* ---------- Structure --------------------------------------------------- */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 20px; width: 100%; }
.shell-tight { max-width: var(--shell-tight); margin: 0 auto; padding: 0 20px; width: 100%; }

section { position: relative; }
.pad { padding: clamp(64px, 8vw, 118px) 0; }
.pad-sm { padding: clamp(44px, 5vw, 68px) 0; }

.bg-cream  { background: var(--cream); }
.bg-cream2 { background: var(--cream-2); }
.bg-navy   { background: var(--navy); color: var(--sand); }
.bg-navy h2, .bg-navy h3, .bg-navy .h-1, .bg-navy .h-2 { color: var(--cream); }

.grid-2 {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}

/* ---------- Barre de progression de lecture ----------------------------- */

#vg-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-dk), var(--gold-lt));
  z-index: 120; pointer-events: none;
}

/* ---------- Préchargeur (rideau) ---------------------------------------- */

#vg-curtain {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--navy);
  transition: opacity .5s var(--ease);
}
#vg-curtain .half {
  position: absolute; left: 0; right: 0; height: 50%;
  background: var(--navy);
  transition: transform 1s var(--ease-out);
}
#vg-curtain .half.top { top: 0; }
#vg-curtain .half.bottom { bottom: 0; }
#vg-curtain .mark {
  position: relative; z-index: 2;
  width: clamp(88px, 16vw, 132px); color: var(--gold);
  opacity: 0; transform: scale(.82);
  animation: vgMarkIn .9s var(--ease-out) .1s forwards;
}
#vg-curtain .mark-label {
  position: relative; z-index: 2;
  margin-top: 18px; color: var(--sand);
  font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase;
  opacity: 0; animation: vgMarkIn .8s var(--ease-out) .45s forwards;
}
#vg-curtain .stage { position: relative; z-index: 2; display: grid; place-items: center; transition: opacity .45s var(--ease); }
@keyframes vgMarkIn { to { opacity: 1; transform: scale(1); } }

body.vg-open #vg-curtain { pointer-events: none; }
body.vg-open #vg-curtain .stage { opacity: 0; }
body.vg-open #vg-curtain .half.top { transform: translateY(-101%); }
body.vg-open #vg-curtain .half.bottom { transform: translateY(101%); }
body.vg-done #vg-curtain { display: none; }

/* ---------- Réseaux sociaux --------------------------------------------- */

/* Réseaux sociaux : dans l'en-tête, entre le logo et Réserver, et SANS rond
   autour du glyphe — le cercle doré alourdissait inutilement la rangée. */
.socials { display: flex; align-items: center; gap: 14px; flex: none; }
.socials .label { display: none; }
.soc {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: none; background: none;
  color: var(--sand);
  transition: transform .3s var(--ease-out), color .3s var(--ease);
}
/* 20 px de glyphe dans un rond de 32 : l'encre occupe alors ~49 % du diamètre.
   À 17 px elle n'en occupait que 41 % et les logos flottaient au milieu. */
.soc svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.soc:hover { color: var(--gold); transform: translateY(-2px) scale(1.1); }
/* Toutes les icônes à la même taille : le hibou est plus large que les deux
   autres marques, l'agrandir en plus déséquilibrait le poids visuel de la
   rangée (119 px² d'encre contre 90 pour Instagram). */

/* ---------- En-tête collant -------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(22, 21, 46, .9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201, 162, 75, .22);
  transition: padding .35s var(--ease), background .35s var(--ease);
}
.site-header .inner {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 20px;
  max-width: var(--shell); margin: 0 auto;
  transition: padding .35s var(--ease);
}
.brand { display: flex; align-items: center; gap: 14px; flex: none; }
.brand img {
  height: 78px; width: auto;
  transition: height .35s var(--ease), filter .35s var(--ease);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}
.brand .brand-txt {
  display: grid; gap: 2px; line-height: 1;
}
.brand .brand-name {
  font-family: var(--script); font-size: 34px; color: var(--cream);
  line-height: .9; padding-bottom: .08em;
}
.brand .brand-sub {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
}
body.scrolled .site-header { background: rgba(22, 21, 46, .97); }
body.scrolled .site-header .inner { padding-top: 8px; padding-bottom: 8px; }
body.scrolled .brand img { height: 54px; }

.nav-main {
  margin-left: auto;
  display: flex; align-items: center; gap: 26px;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
}
.nav-main a { color: var(--sand); white-space: nowrap; position: relative; padding: 4px 0; }
.nav-main a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--gold);
  transition: right .35s var(--ease-out);
}
.nav-main a:hover { color: var(--gold); }
.nav-main a:hover::after { right: 0; }

.nav-scroll {
  display: none; margin-left: auto; gap: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  scrollbar-width: none;
  /* le fondu sur les bords montre qu'il reste des rubriques à faire glisser */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  touch-action: pan-x;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.nav-scroll::-webkit-scrollbar { display: none; }
.nav-scroll a { scroll-snap-align: start; }
/* arrivé au bout, plus besoin du fondu */
.nav-scroll.at-end {
  -webkit-mask-image: none; mask-image: none;
}
.nav-scroll a {
  color: var(--sand); white-space: nowrap; flex: none;
  border: 1px solid rgba(201, 162, 75, .32);
  border-radius: var(--r-pill); padding: 7px 13px;
}

/* ---------- Boutons ----------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  /* background explicite : sans lui, un <button> hérite du gris par défaut du
     navigateur et devient illisible sur fond sombre. */
  background: transparent;
  border: 1px solid transparent; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 15px 26px; border-radius: var(--r-pill);
  white-space: nowrap; text-align: center;
  transition: transform .28s var(--ease-out), background .28s var(--ease),
              color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold { background: var(--gold); color: var(--navy); box-shadow: 0 12px 28px -14px rgba(201, 162, 75, .8); }
.btn-gold:hover { background: var(--gold-lt); color: var(--navy); box-shadow: 0 18px 36px -14px rgba(201, 162, 75, .9); }

.btn-ghost { border-color: rgba(251, 249, 244, .42); color: var(--cream); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-dark { background: var(--navy); color: var(--cream); }
.btn-dark:hover { background: var(--navy-3); color: var(--cream); }

.btn-outline { border-color: rgba(22, 21, 46, .2); color: var(--ink); }
.btn-outline:hover { border-color: var(--terra); color: var(--terra); }

.btn-sm { padding: 10px 18px; font-size: 12.5px; }
.btn-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--terra); font-size: inherit; font-weight: 500;
  border-bottom: 1px solid rgba(185, 64, 47, .4);
}
.btn-link:hover { color: var(--gold-dk); border-color: var(--gold); }

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: grid; align-items: end;
  background: var(--navy);
  overflow: hidden;
}
.hero-media { position: absolute; inset: -8% 0 -8%; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .74;
  will-change: transform;
}
.hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 78% at 22% 8%, rgba(22, 21, 46, .18) 0%, rgba(22, 21, 46, .72) 62%, rgba(22, 21, 46, .96) 100%),
    linear-gradient(180deg, rgba(22, 21, 46, .58) 0%, rgba(22, 21, 46, .2) 34%, rgba(22, 21, 46, .95) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--shell); margin: 0 auto; width: 100%;
  padding: clamp(120px, 16vw, 190px) 20px clamp(52px, 6vw, 76px);
}
.hero h1 { color: var(--cream); margin: 0 0 20px; }
.hero .lead { max-width: 540px; color: var(--sand); margin: 0 0 36px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }

.flag {
  display: inline-flex; height: 13px; width: 26px; flex: none;
  overflow: hidden; border-radius: 1px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.flag i { flex: 1; }
.flag .g { background: var(--it-green); }
.flag .w { background: #F4F1E8; }
.flag .r { background: var(--terra); }

.place-tag {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
  color: var(--gold); font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase;
}

.stats {
  margin-top: clamp(38px, 5vw, 56px);
  padding-top: 26px;
  border-top: 1px solid rgba(251, 249, 244, .16);
  display: flex; flex-wrap: wrap; gap: 18px 40px;
  color: var(--sand); font-size: 14px;
}
.stats .num {
  color: var(--gold); font-size: 30px; font-weight: 300;
  letter-spacing: -.01em; line-height: 1.1; margin-bottom: 2px;
}
.stats .num .u { font-size: 19px; }
.stats .num .pre {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .75; font-weight: 500;
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 3; display: grid; place-items: center; gap: 7px;
  color: rgba(233, 228, 216, .6); font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase;
  pointer-events: none;
}
.scroll-hint .bar {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: vgScrollBar 2.4s var(--ease) infinite;
}
@keyframes vgScrollBar { 0% { opacity: 0; transform: scaleY(.2); transform-origin: top; } 45% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; } }

/* ---------- Bandeau défilant ------------------------------------------- */

.marquee {
  background: var(--navy);
  border-top: 1px solid rgba(201, 162, 75, .2);
  border-bottom: 1px solid rgba(201, 162, 75, .2);
  overflow: hidden; padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee .track {
  display: flex; width: max-content;
  animation: vgMarquee 42s linear infinite;
  color: var(--gold);
  font-size: 17px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
}
.marquee .track > div { display: flex; gap: 38px; padding-right: 38px; align-items: center; }
.marquee .star { opacity: .42; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes vgMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Cartes / visuels ------------------------------------------- */

.frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-sm);
  box-shadow: 0 40px 70px -40px rgba(22, 21, 46, .5);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame.tall { aspect-ratio: 4 / 5; }
/* bandeau, pas grand bloc : une photo portrait recadrée en 16/10 occupait près
   de 700 px de haut et écrasait la carte. */
.frame.wide { aspect-ratio: 2.5 / 1; }
@media (max-width: 700px) { .frame.wide { aspect-ratio: 3 / 2; } }
.frame .parallax { will-change: transform; }

.frame-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 22px 18px;
  background: linear-gradient(180deg, transparent, rgba(22, 21, 46, .88));
  color: var(--cream); font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase;
}

.quote-band {
  background: var(--navy); color: var(--cream);
  padding: clamp(56px, 7vw, 96px) 0;
  position: relative; overflow: hidden;
}
.quote-band .mark-bg {
  position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
  width: min(420px, 46vw); color: rgba(201, 162, 75, .07);
  pointer-events: none;
}
.quote-band p {
  font-family: var(--script); font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.15; margin: 0; max-width: 780px; position: relative;
  padding-bottom: .1em;
}

/* ---------- Pastilles livraison ---------------------------------------- */

.delivery-row { display: flex; gap: 12px; flex-wrap: wrap; }
.delivery-card {
  background: var(--cream); border: 1px solid rgba(22, 21, 46, .13);
  border-radius: var(--r-sm); padding: 14px 20px;
  display: flex; align-items: center; min-height: 64px;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.delivery-card:hover {
  transform: translateY(-3px); border-color: var(--gold);
  box-shadow: 0 16px 30px -18px rgba(22, 21, 46, .4);
}
.delivery-card img { height: 24px; width: auto; }
.delivery-card.soon { opacity: .55; }
.delivery-card.soon .soon-tag {
  margin-left: 10px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-3);
}

/* ---------- Le restaurant : texte à gauche, grandes photos à droite ----- */

.resto-grid {
  display: grid;
  grid-template-columns: minmax(260px, 36%) 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.resto-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.resto-photos .frame { aspect-ratio: 3 / 4; }
.resto-photos .frame:last-child { margin-top: clamp(20px, 4vw, 44px); }
@media (max-width: 900px) {
  .resto-grid { grid-template-columns: 1fr; }
  .resto-photos .frame:last-child { margin-top: 0; }
}
@media (max-width: 520px) {
  .resto-photos { grid-template-columns: 1fr; }
  .resto-photos .frame { aspect-ratio: 4 / 3; }
}

/* ---------- Commander : bandeau sombre --------------------------------- */

.cmd-head {
  display: flex; flex-wrap: wrap; gap: 16px clamp(24px, 4vw, 60px);
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.cmd-head .lead { max-width: 380px; margin: 0; }

.channels {
  display: grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: clamp(26px, 3.5vw, 40px);
}
.channel {
  position: relative;
  border: 1px solid rgba(201, 162, 75, .28);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.4vw, 26px);
  background: rgba(251, 249, 244, .035);
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease-out);
}
.channel:hover {
  border-color: rgba(201, 162, 75, .6);
  background: rgba(251, 249, 244, .06);
  transform: translateY(-3px);
}
.channel .ch-n {
  font-family: var(--script); font-size: 34px; color: var(--gold);
  line-height: .8; opacity: .85;
}
.channel h3 { color: var(--cream); }
.channel p { margin: 0; color: var(--sand); font-size: 15px; line-height: 1.6; flex: 1; }
.channel .btn { margin-top: 4px; align-self: flex-start; }
.channel .tel-line { margin: 2px 0 0; font-size: 14.5px; }
.channel .tel-line a { color: var(--gold); }

.partners { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.partner {
  background: var(--cream); border-radius: var(--r-sm);
  padding: 12px 16px; min-height: 58px;
  display: grid; place-items: center; flex: 0 1 auto;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
.partner img { height: 30px; width: auto; }
a.partner:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .6); }
/* Le logo Uber Eats est un carré de 300x300 : avec une marge intérieure
   généreuse, max-width:100% le rabotait à 33 px de large dans un cadre de
   77 px. On dimensionne donc le cadre, et l'image le remplit. */
.partner.big {
  padding: 7px; min-height: 0;
  width: 92px; height: 92px;
  align-self: flex-start;
}
.partner.big img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Bandeau Uber Eats ------------------------------------------ */

.uber-band {
  background: #06C167;   /* vert de marque Uber Eats */
  color: #0A2E1C;
  padding: clamp(22px, 3vw, 32px) 0;
}
.uber-band .inner {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 34px);
  flex-wrap: wrap; justify-content: center;
}
.uber-logo {
  background: #fff; border-radius: var(--r-md);
  padding: 7px; flex: none;
  width: 84px; height: 84px;
  display: grid; place-items: center;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45);
}
.uber-logo img { width: 100%; height: 100%; object-fit: contain; }
.uber-txt { flex: 1 1 260px; min-width: 0; }
.uber-txt h2 {
  margin: 0 0 3px; font-size: clamp(21px, 2.6vw, 30px);
  font-weight: 700; letter-spacing: -.015em; color: #062313;
}
.uber-txt p { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(6, 35, 19, .78); }
.uber-band .btn { flex: none; }
.uber-band .btn-dark { background: #062313; }
.uber-band .btn-dark:hover { background: #0A3D22; color: #fff; }
@media (max-width: 620px) {
  .uber-band .inner { flex-direction: column; text-align: center; }
  .uber-txt { flex: none; }
  .uber-band .btn { width: 100%; }
}

/* le panier, carte claire posée sur le bandeau sombre */
#emporter .cart {
  position: static;
  max-width: 640px; margin: 0 auto;
  border-color: rgba(201, 162, 75, .35);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .7);
}
.cart-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.cart-top .hint { margin: 2px 0 0; }

/* ---------- Avis compacts ---------------------------------------------- */

.avis-head {
  display: flex; flex-wrap: wrap; gap: 18px clamp(24px, 4vw, 48px);
  align-items: center; margin-bottom: 24px;
}
.avis-head .rating { margin: 0; flex: 1 1 420px; }
.reviews-row {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.avis-cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: 22px; border-top: 1px solid rgba(22, 21, 46, .1);
}
.avis-cta p {
  margin: 0; font-family: var(--script); font-size: 30px;
  color: var(--ink); line-height: 1; padding-bottom: .08em;
}

/* ---------- Bandeau « version d'essai » -------------------------------- */

.trial {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(185, 64, 47, .16);
  border: 1px solid rgba(185, 64, 47, .5);
  border-radius: var(--r-md);
  padding: 14px 17px; margin-bottom: 24px;
}
.trial .ico { color: #FFB4A6; font-size: 17px; line-height: 1.3; flex: none; }
.trial div { min-width: 0; }
.trial b {
  display: block; color: #FFC9BE; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 4px;
}
.trial p { margin: 0; color: var(--sand); font-size: 14.5px; line-height: 1.55; }

/* ---------- La carte ---------------------------------------------------- */

.menu-head {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 30px;
}
.menu-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.search-wrap {
  display: flex; align-items: center; gap: 9px;
  background: var(--cream); border: 1px solid rgba(22, 21, 46, .16);
  border-radius: var(--r-pill); padding: 10px 16px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  min-width: 240px;
}
.search-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 75, .14); }
.search-wrap svg { width: 15px; height: 15px; fill: var(--muted-3); flex: none; }
.search-wrap input {
  border: none; outline: none; background: transparent;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  width: 100%; min-width: 0;
}
/* iOS zoome la page dès qu'un champ fait moins de 16 px : au doigt, on monte
   à 16 px pour que toucher la recherche ne fasse plus sauter l'écran. */
@media (hover: none) and (pointer: coarse) {
  .search-wrap input { font-size: 16px; }
}
.search-clear {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  color: var(--muted-3); font-size: 19px; line-height: 1;
}
.search-clear:hover { color: var(--terra); }

/* Onglets : une seule ligne, avec flèches et dégradé qui montrent clairement
   qu'il reste des catégories à droite (« Pause gourmande » était coupé net). */
.tabs-wrap {
  position: relative;
  border-bottom: 1px solid rgba(22, 21, 46, .1);
  margin-bottom: 26px;
}
.tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-behavior: smooth;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs-wrap::before, .tabs-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 1px; width: 56px;
  pointer-events: none; z-index: 2; opacity: 0;
  transition: opacity .3s var(--ease);
}
.tabs-wrap::before { left: 0; background: linear-gradient(90deg, var(--cream) 20%, transparent); }
.tabs-wrap::after  { right: 0; background: linear-gradient(270deg, var(--cream) 20%, transparent); }
.tabs-wrap.can-prev::before { opacity: 1; }
.tabs-wrap.can-next::after  { opacity: 1; }

.tabs-arrow {
  position: absolute; top: 2px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
  border: none; cursor: pointer;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1; padding-bottom: 3px;
  box-shadow: 0 6px 16px -6px rgba(22, 21, 46, .6);
  transition: background .25s var(--ease), transform .25s var(--ease-out);
}
.tabs-arrow:hover { background: var(--gold); color: var(--navy); transform: scale(1.08); }
.tabs-arrow.prev { left: -4px; }
.tabs-arrow.next { right: -4px; }
@media (max-width: 760px) {
  .tabs-arrow { display: none; }
  .tabs-wrap::before, .tabs-wrap::after { width: 34px; }
}
.tab {
  flex: none; cursor: pointer; background: transparent;
  border: 1px solid rgba(22, 21, 46, .16);
  border-radius: var(--r-pill); padding: 9px 17px;
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: var(--muted); white-space: nowrap;
  transition: all .28s var(--ease);
}
.tab:hover { border-color: var(--gold); color: var(--ink); }
.tab[aria-selected="true"] {
  background: var(--navy); border-color: var(--navy); color: var(--cream);
}
.tab .count { opacity: .55; font-size: 11.5px; margin-left: 5px; }

/* Police normale, PAS l'écriture cursive : la note des Pizze Napoletana fait
   quatre lignes, elle était illisible en script sur mobile. */
.menu-note {
  font-size: 15.5px; line-height: 1.6; color: var(--muted);
  margin: 0 0 24px; max-width: 780px;
  padding: 12px 0 12px 16px;
  border-left: 2px solid rgba(201, 162, 75, .55);
  font-style: italic;
}

.menu-sub {
  grid-column: 1 / -1;
  margin: 14px 0 2px;
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--terra);
}

.dishes { display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.dish {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 20px;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(22, 21, 46, .09);
  background: transparent;
  transition: background .3s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  transform-style: preserve-3d;
}
.dish:hover {
  background: var(--cream);
  box-shadow: 0 20px 40px -26px rgba(22, 21, 46, .45);
  z-index: 2;
}
.dish .name {
  font-size: 17.5px; font-weight: 600; color: var(--ink);
  line-height: 1.3; letter-spacing: -.005em;
}
.dish .price {
  font-size: 16px; font-weight: 600; color: var(--gold-dk);
  white-space: nowrap; text-align: right; padding-top: 1px;
}
.dish .desc {
  grid-column: 1 / -1;
  font-size: 14.5px; line-height: 1.55; color: var(--muted-2);
  margin: 0; text-wrap: pretty;
}
.dish .tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.tag {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(201, 162, 75, .14); color: var(--gold-dk);
  border: 1px solid rgba(201, 162, 75, .28);
}
.tag.veg { background: rgba(11, 122, 59, .1); color: #0B6A34; border-color: rgba(11, 122, 59, .25); }
.tag.hot { background: rgba(185, 64, 47, .1); color: var(--terra); border-color: rgba(185, 64, 47, .25); }
.tag.star { background: rgba(46, 43, 120, .1); color: var(--navy-3); border-color: rgba(46, 43, 120, .22); }

.dish-add {
  position: absolute; right: 14px; bottom: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
  border: none; cursor: pointer; display: grid; place-items: center;
  font-size: 17px; line-height: 1; padding-bottom: 2px;
  opacity: 0; transform: translateY(6px) scale(.85);
  transition: all .3s var(--ease-out);
}
.dish:hover .dish-add, .dish:focus-within .dish-add { opacity: 1; transform: translateY(0) scale(1); }
.dish-add:hover { background: var(--gold); color: var(--navy); }
.dish-add.done { background: var(--it-green); color: #fff; }

.menu-empty {
  grid-column: 1 / -1; padding: 40px 4px; color: var(--muted-2);
  font-size: 16px;
}

/* ---------- Passaporto -------------------------------------------------- */

.perks { display: grid; gap: 16px; }
.perk { display: flex; gap: 18px; align-items: flex-start; }
.perk .step {
  font-family: var(--script); font-size: 40px; color: var(--gold);
  line-height: .8; flex: none; width: 46px; padding-top: 4px;
}
.perk .h-3 { margin-bottom: 4px; }
.perk p { margin: 0; color: var(--muted-2); font-size: 15.5px; line-height: 1.6; }

/* Midi étudiant. Encadré et non aligné sur les paliers à tampons : c'est un
   statut, pas une récompense qu'on gagne en revenant. La bordure dorée le
   distingue sans crier — il ne doit pas voler la vedette au passeport lui-même. */
.etu {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 22px; padding: 16px 18px;
  border: 1px solid rgba(201, 162, 75, .38);
  border-radius: var(--r-md);
  background: rgba(201, 162, 75, .07);
}
.etu-ico { font-size: 22px; line-height: 1.2; flex: none; }
.etu div { min-width: 0; }
.etu p { color: var(--muted-2); font-size: 15.5px; line-height: 1.6; }
/* La ligne qui dit qu'aucun document n'est conservé. Plus petite, mais présente
   sur la page et pas seulement dans les mentions légales : c'est là qu'on se
   pose la question. */
.etu-preuve { font-size: 14px !important; color: var(--muted-3, var(--muted-2)); opacity: .92; }

@media (max-width: 620px) {
  .etu { padding: 14px 15px; gap: 11px; }
  .etu-ico { font-size: 19px; }
}

.pass-card {
  background: var(--navy); color: var(--cream);
  border: 1px solid rgba(201, 162, 75, .3);
  border-radius: var(--r-md); padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 44px 80px -40px rgba(22, 21, 46, .8);
  position: relative; overflow: hidden;
}
.pass-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 88% 4%, rgba(201, 162, 75, .16), transparent 62%);
  pointer-events: none;
}
.pass-card .field {
  display: grid; gap: 10px; position: relative;
}
.pass-card input {
  background: rgba(251, 249, 244, .06);
  border: 1px solid rgba(251, 249, 244, .18);
  color: var(--cream); padding: 15px 17px;
  border-radius: var(--r-sm); font-family: var(--sans); font-size: 16px;
  outline: none; transition: border-color .3s var(--ease), background .3s var(--ease);
  width: 100%;
}
.pass-card input::placeholder { color: rgba(251, 249, 244, .42); }
.pass-card input:focus { border-color: var(--gold); background: rgba(251, 249, 244, .1); }
.pass-error { color: #FFB4A6; font-size: 14px; margin: 4px 0 0; }
.pass-note { color: var(--muted-3); font-size: 12.5px; margin: 12px 0 0; line-height: 1.5; }

.pass-code {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(201, 162, 75, .1);
  border: 1px dashed rgba(201, 162, 75, .5);
  border-radius: var(--r-sm); padding: 15px 18px; margin-top: 14px;
}
.pass-code .val {
  font-size: 25px; font-weight: 600; letter-spacing: .26em; color: var(--cream);
}
.stamps { display: flex; gap: 9px; margin-top: 16px; }
.stamp {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, .4);
  display: grid; place-items: center;
  color: rgba(201, 162, 75, .5); font-size: 13px;
}
.stamp.on { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.stamp.fresh { animation: stampIn .45s var(--ease) both; }
@keyframes stampIn { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }

/* Tamponnage : le client saisit le code que l'équipe lui donne en salle. */
.stamp-add { margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(201, 162, 75, .3); }
.stamp-row { display: flex; gap: 9px; margin-top: 10px; flex-wrap: wrap; }
.stamp-row input {
  flex: 1; min-width: 130px; background: rgba(251, 249, 244, .06);
  border: 1px solid rgba(251, 249, 244, .2); border-radius: 10px;
  color: var(--cream); font-family: inherit; font-size: 17px;
  letter-spacing: .3em; padding: 12px 14px; min-height: 46px;
}
.stamp-row input::placeholder { letter-spacing: normal; color: var(--muted-3); font-size: 15px; }
.stamp-hint { margin: 9px 0 0; font-size: 12.8px; line-height: 1.55; color: var(--muted-3); }
.stamp-msg { margin: 10px 0 0; font-size: 14px; line-height: 1.55; min-height: 0; }
.stamp-msg.ok { color: var(--gold); }
.stamp-msg.ko { color: #E8977F; }

/* ---------- Panier à emporter ------------------------------------------ */

.order-grid { display: grid; gap: clamp(24px, 3vw, 44px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }

.cart {
  background: var(--cream); border: 1px solid rgba(22, 21, 46, .14);
  border-radius: var(--r-md); padding: clamp(20px, 2.4vw, 28px);
  position: sticky; top: 108px;
  box-shadow: 0 30px 60px -40px rgba(22, 21, 46, .4);
}
.cart h3 { margin-bottom: 4px; }
.cart .hint { color: var(--muted-2); font-size: 14.5px; margin: 0 0 16px; }
.cart-lines { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.cart-line {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px;
  align-items: center; font-size: 15px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(22, 21, 46, .08);
}
.cart-line .qty {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid rgba(22, 21, 46, .16); border-radius: var(--r-pill);
  padding: 2px;
}
.cart-line .qty button {
  width: 24px; height: 24px; border: none; background: transparent;
  cursor: pointer; border-radius: 50%; color: var(--muted);
  display: grid; place-items: center; font-size: 15px; line-height: 1;
}
.cart-line .qty button:hover { background: var(--navy); color: var(--cream); }
.cart-line .qty .n { min-width: 18px; text-align: center; font-size: 14px; font-weight: 600; }
.cart-line .li-name { line-height: 1.35; }
.cart-line .li-price { font-weight: 600; color: var(--gold-dk); white-space: nowrap; }
.cart-line .li-del {
  background: none; border: none; cursor: pointer; color: var(--muted-3);
  font-size: 17px; line-height: 1; padding: 0 2px;
}
.cart-line .li-del:hover { color: var(--terra); }
.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 12px; border-top: 1px solid rgba(22, 21, 46, .16);
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
}
.cart-total .sum { font-size: 27px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-transform: none; }
.cart-actions { display: grid; gap: 9px; margin-top: 16px; }
.cart-empty { color: var(--muted-2); font-size: 15px; font-style: italic; margin: 0 0 16px; }
.cart-warn { font-size: 12.5px; color: var(--muted-2); margin: 12px 0 0; line-height: 1.5; }

/* ---------- Infos pratiques -------------------------------------------- */

.info-grid { display: grid; gap: clamp(22px, 3vw, 48px); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hours li {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 9px; border-bottom: 1px solid rgba(22, 21, 46, .09);
  font-size: 15.5px;
}
.hours li.today { color: var(--terra); font-weight: 600; }
.hours li.closed { color: var(--muted-3); }
.hours .d { letter-spacing: .02em; }

.status-pill {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: var(--r-pill); padding: 8px 16px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent;
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status-pill.open { background: rgba(11, 122, 59, .1); color: #0B6A34; border-color: rgba(11, 122, 59, .3); }
.status-pill.open .dot { background: #0B7A3B; animation: vgPulse 2.2s var(--ease) infinite; }
.status-pill.shut { background: rgba(185, 64, 47, .08); color: var(--terra); border-color: rgba(185, 64, 47, .26); }
.status-pill.shut .dot { background: var(--terra); }
@keyframes vgPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.map-frame {
  border: 1px solid rgba(22, 21, 46, .14); border-radius: var(--r-sm);
  overflow: hidden; background: var(--cream-2); aspect-ratio: 16 / 10;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Bandeau de note globale */
.rating {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 38px);
  flex-wrap: wrap;
  background: var(--cream);
  border: 1px solid rgba(201, 162, 75, .38);
  border-radius: var(--r-md);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 32px);
  margin-bottom: 26px;
  box-shadow: 0 24px 50px -38px rgba(22, 21, 46, .5);
}
.rating .score { display: flex; align-items: baseline; gap: 6px; flex: none; }
.rating .score .val {
  font-size: clamp(46px, 6vw, 68px); font-weight: 300; line-height: 1;
  letter-spacing: -.02em; color: var(--ink);
}
.rating .score .out { font-size: 19px; color: var(--muted-3); font-weight: 500; }
.rating .meta { flex: 1 1 200px; min-width: 0; }
.rating .meta .stars { color: var(--gold); letter-spacing: .18em; font-size: 17px; margin-bottom: 4px; }
.rating .meta p { margin: 0; font-size: 15.5px; color: var(--muted); line-height: 1.5; }
.rating .links { display: grid; gap: 7px; flex: none; }
.rating .links a {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-dk); white-space: nowrap;
}
.rating .links a:hover { color: var(--terra); }
@media (max-width: 620px) {
  .rating { gap: 14px; }
  .rating .links a { white-space: normal; }
}

.review {
  background: var(--cream); border: 1px solid rgba(22, 21, 46, .12);
  border-radius: var(--r-sm); padding: 22px;
  display: grid; gap: 10px; align-content: start;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
.review:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(22, 21, 46, .4); }
.review .stars { color: var(--gold); letter-spacing: .16em; font-size: 15px; }
.review p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); font-style: italic; }
.review .who { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-3); }

/* ---------- Pied de page ------------------------------------------------ */

.site-footer { background: var(--navy); color: var(--sand); padding: clamp(52px, 6vw, 82px) 0 28px; position: relative; overflow: hidden; }
.site-footer .mark-bg {
  position: absolute; left: 50%; bottom: -18%; transform: translateX(-50%);
  width: min(560px, 90vw); color: rgba(201, 162, 75, .05); pointer-events: none;
}
.site-footer a { color: var(--sand); }
.site-footer a:hover { color: var(--gold); }
.footer-grid { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); position: relative; }
.footer-grid h4 { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; font-weight: 600; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.footer-bottom {
  margin-top: 44px; padding-top: 20px;
  border-top: 1px solid rgba(201, 162, 75, .18);
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between;
  font-size: 13px; color: var(--muted-3); position: relative;
}

/* ---------- Assistant IA ----------------------------------------------- */

.chat-fab {
  position: fixed; right: 18px; bottom: 88px; z-index: 90;
  display: flex; align-items: center; gap: 12px;
  background: var(--gold); color: var(--navy);
  border: none; border-radius: var(--r-pill);
  padding: 11px 21px 11px 12px; cursor: pointer;
  box-shadow: 0 22px 44px -16px rgba(22, 21, 46, .7);
  font-family: var(--sans); text-align: left;
  transition: transform .3s var(--ease-out), background .3s var(--ease), opacity .3s var(--ease);
}
.chat-fab:hover { background: var(--gold-lt); transform: translateY(-3px); }
.chat-fab .av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--navy); color: var(--gold);
  display: grid; place-items: center; padding: 6px;
}
.chat-fab .av svg { width: 100%; height: 100%; }
.chat-fab .t1 { display: block; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.25; }
.chat-fab .t2 { display: block; font-size: 12px; opacity: .78; line-height: 1.25; }
.chat-fab .ring {
  position: absolute; inset: -3px; border-radius: var(--r-pill);
  border: 1px solid var(--gold); opacity: 0;
  animation: vgRing 3.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes vgRing { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.14); } }
body.chat-on .chat-fab { opacity: 0; pointer-events: none; transform: translateY(10px) scale(.94); }

/* ---------- Annonce de nouveauté ---------------------------------------- */

/* petite pastille « Nouveau » dans un bouton */
.tag-new {
  display: inline-block; flex: none;
  background: var(--terra); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--r-pill); line-height: 1.2;
}

/* badge sur la pastille flottante */
.fab-new {
  position: absolute; top: -7px; right: -6px;
  background: var(--terra); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill);
  box-shadow: 0 4px 12px -3px rgba(0, 0, 0, .5);
  pointer-events: none; white-space: nowrap;
}
body.chat-seen .fab-new { display: none; }

/* bulle d'annonce, une fois par visiteur */
.fab-teaser {
  position: fixed; right: 18px; bottom: 156px; z-index: 92;
  width: min(300px, calc(100vw - 36px));
  background: var(--cream); color: var(--ink);
  border: 1px solid rgba(201, 162, 75, .5);
  border-radius: var(--r-md);
  padding: 16px 18px 15px;
  box-shadow: 0 26px 54px -18px rgba(22, 21, 46, .6);
  animation: vgTeaser .6s var(--ease-out) both;
}
.fab-teaser::after {
  content: ''; position: absolute; right: 26px; bottom: -7px;
  width: 12px; height: 12px; background: var(--cream);
  border-right: 1px solid rgba(201, 162, 75, .5);
  border-bottom: 1px solid rgba(201, 162, 75, .5);
  transform: rotate(45deg);
}
.fab-teaser p { margin: 0 0 13px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.fab-teaser strong {
  color: var(--terra); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  display: inline-block; margin-bottom: 3px;
}
.teaser-x {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer;
  color: var(--muted-3); font-size: 22px; line-height: 1; padding: 2px 5px;
}
.teaser-x:hover { color: var(--terra); }
@keyframes vgTeaser { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
body.chat-on .fab-teaser { display: none; }

.chat-panel {
  position: fixed; right: 18px; bottom: 88px; z-index: 95;
  width: min(400px, calc(100vw - 28px));
  max-height: min(76vh, 660px);
  display: flex; flex-direction: column;
  background: var(--navy-2);
  border: 1px solid rgba(201, 162, 75, .34);
  border-radius: var(--r-md);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .8);
  overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none;
  transition: opacity .3s var(--ease), transform .35s var(--ease-out);
}
body.chat-on .chat-panel { opacity: 1; transform: none; pointer-events: auto; }

.chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(201, 162, 75, .2);
  background: rgba(201, 162, 75, .07);
  flex: none;
}
.chat-head .live { width: 8px; height: 8px; border-radius: 50%; background: #7BC47F; flex: none; animation: vgPulse 2.4s var(--ease) infinite; }
.chat-head .ttl { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.chat-head .sub { font-size: 11px; color: var(--muted-3); letter-spacing: .04em; }
.chat-x {
  margin-left: auto; background: transparent; border: none;
  color: var(--muted-3); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.chat-x:hover { color: var(--gold); }

.chat-log {
  flex: 1; overflow-y: auto; padding: 16px 15px;
  display: flex; flex-direction: column; gap: 13px;
  scrollbar-width: thin; scrollbar-color: rgba(201, 162, 75, .4) transparent;
}
.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-thumb { background: rgba(201, 162, 75, .35); border-radius: 3px; }

.msg { display: flex; gap: 9px; align-items: flex-start; animation: vgMsgIn .35s var(--ease-out) both; }
@keyframes vgMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg .av { width: 22px; height: 22px; flex: none; color: var(--gold); margin-top: 2px; }
.msg .bub {
  background: rgba(251, 249, 244, .07);
  border: 1px solid rgba(251, 249, 244, .1);
  padding: 11px 14px; border-radius: 3px 14px 14px 14px;
  color: var(--sand); font-size: 15px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg.me { flex-direction: row-reverse; }
.msg.me .bub {
  background: var(--gold); border-color: var(--gold);
  color: var(--navy); border-radius: 14px 3px 14px 14px; font-weight: 500;
}
.msg.err .bub { border-color: rgba(255, 180, 166, .4); color: #FFD6CE; }

.typing { display: flex; gap: 8px; align-items: center; color: var(--muted-3); font-size: 14.5px; font-style: italic; }
.typing .d { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: vgDot 1.2s var(--ease) infinite; }
.typing .d:nth-child(2) { animation-delay: .18s; }
.typing .d:nth-child(3) { animation-delay: .36s; }
@keyframes vgDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.chat-act { display: grid; gap: 7px; margin-top: 2px; }
.chat-act button {
  background: rgba(201, 162, 75, .14); border: 1px solid var(--gold);
  color: var(--gold); border-radius: var(--r-sm); padding: 10px 14px;
  cursor: pointer; font-size: 13.5px; font-weight: 600; text-align: left;
  display: flex; align-items: center; gap: 9px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.chat-act button:hover { background: var(--gold); color: var(--navy); }

.chips { display: flex; gap: 7px; overflow-x: auto; padding: 0 15px 10px; flex: none; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; background: transparent; border: 1px solid rgba(201, 162, 75, .4);
  color: var(--gold); border-radius: var(--r-pill); padding: 7px 13px;
  font-size: 12.5px; cursor: pointer; white-space: nowrap;
  transition: background .25s var(--ease);
}
.chip:hover { background: rgba(201, 162, 75, .14); }

.chat-form {
  border-top: 1px solid rgba(201, 162, 75, .2);
  padding: 9px 11px 9px 15px;
  display: flex; gap: 8px; align-items: center;
  background: rgba(0, 0, 0, .2); flex: none;
}
.chat-form input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--cream); font-family: var(--sans); font-size: 16px; padding: 9px 0;
}
.chat-form input::placeholder { color: var(--muted-3); }
.chat-send {
  background: var(--gold); color: var(--navy); border: none;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  cursor: pointer; display: grid; place-items: center;
  transition: background .25s var(--ease), transform .25s var(--ease-out);
}
.chat-send svg { width: 17px; height: 17px; fill: currentColor; }
.chat-send:hover { background: var(--gold-lt); transform: scale(1.06); }
.chat-send:disabled { opacity: .45; cursor: default; transform: none; }

/* ---------- Fenêtre modale (Zenchef) ----------------------------------- */

.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 16px;
  background: rgba(11, 10, 26, .78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.modal.on { opacity: 1; pointer-events: auto; }
.modal-box {
  background: var(--cream); border-radius: var(--r-md);
  width: min(660px, 100%); max-height: min(90vh, 880px);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .7);
  transform: translateY(16px) scale(.98); transition: transform .35s var(--ease-out);
}
.modal.on .modal-box { transform: none; }
.modal-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid rgba(22, 21, 46, .12);
  background: var(--navy); color: var(--cream); flex: none;
}
.modal-head .h { font-family: var(--script); font-size: 30px; line-height: 1; padding-bottom: .06em; }
.modal-x {
  margin-left: auto; background: transparent; border: none; cursor: pointer;
  color: var(--sand); font-size: 26px; line-height: 1; padding: 0 4px;
}
.modal-x:hover { color: var(--gold); }
.modal-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 460px; }
.modal-body iframe { flex: 1; width: 100%; border: 0; display: block; min-height: 460px; }
.modal-ask {
  background: rgba(201, 162, 75, .14); border-bottom: 1px solid rgba(201, 162, 75, .35);
  padding: 11px 18px; font-size: 14.5px; color: var(--ink); flex: none;
}
.modal-ask b { color: var(--gold-dk); }

/* ---------- Barre d'action basse --------------------------------------- */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(22, 21, 46, .96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(201, 162, 75, .3);
  padding: 10px 16px;
  display: flex; gap: 10px; align-items: center; justify-content: center;
  flex-wrap: nowrap;
}
.sticky-cta .txt { color: var(--sand); font-size: 13.5px; letter-spacing: .03em; }
.sticky-cta .btn { padding: 11px 19px; font-size: 12.5px; }
.cart-badge {
  display: none; align-items: center; gap: 7px;
}
.cart-badge.on { display: inline-flex; }
.cart-badge .n {
  background: var(--terra); color: #fff; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; padding: 1px 7px; min-width: 20px; text-align: center;
}

/* ---------- Animations d'apparition ------------------------------------ */

/* RÈGLE DE SÛRETÉ : tout ce qui masque du contenu est conditionné à la classe
   .js, posée par un script en tête de page. Si le JavaScript est bloqué, échoue
   ou n'a pas encore tourné, RIEN n'est caché — on ne peut donc jamais se
   retrouver avec un grand bloc blanc à la place de la carte.
   (C'est exactement le bug constaté en ligne le 27/07.) */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }

.js [data-reveal="left"]  { transform: translateX(-32px); }
.js [data-reveal="right"] { transform: translateX(32px); }
.js [data-reveal="zoom"]  { transform: scale(.94); }
.js [data-reveal="mask"]  { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out); }
.js [data-reveal="mask"].in { clip-path: inset(0 0 0 0); }

/* ─── FILET DE SÉCURITÉ, EN CSS PUR ─────────────────────────────────────────
   Constaté par Cameron le 31/07 sur cln-nexus.fr/apercu/viaggio, sur ordinateur :
   un grand vide entre l'introduction et la carte. Mesuré sur la page : 23 blocs
   de plus de 100 px restaient invisibles, dont deux photos de 389 px.

   La cause n'est ni l'image ni la mise en page. C'est que TOUTE la page est
   masquée par « opacity: 0 » et n'attend que le JavaScript pour reparaître. Il
   existait déjà un balayage de secours (site.js) — mais écrit en JavaScript,
   avec setInterval : il tombe en panne exactement dans les cas qu'il devait
   couvrir. Chrome bride setInterval à une fois par minute dans un onglet
   d'arrière-plan, et diffère l'IntersectionObserver. Le filet partageait le
   mode de défaillance de ce qu'il protégeait.

   Celui-ci n'est que du CSS. Il ne dépend d'aucun script, d'aucun observateur
   et d'aucun minuteur : passé 5 secondes, le contenu apparaît, quoi qu'il soit
   arrivé au JavaScript. Si l'animation normale a eu lieu avant, la classe
   « .in » est posée, le sélecteur ne correspond plus et ce filet est annulé —
   il ne se voit donc jamais quand tout va bien.

   Un site de restaurant qui affiche du vide à la place de sa carte perd le
   client sur-le-champ. Aucune animation ne vaut ce risque. */
@keyframes vg-secours       { to { opacity: 1; transform: none; } }
@keyframes vg-secours-mask  { to { clip-path: inset(0 0 0 0); } }

.js [data-reveal]:not(.in)          { animation: vg-secours .45s var(--ease-out) 5s both; }
.js [data-reveal="mask"]:not(.in)   { animation: vg-secours-mask .7s var(--ease-out) 5s both; }

.word { display: inline-block; }
.js .word {
  opacity: 0; transform: translateY(.5em) rotate(1.6deg);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--wd, 0ms);
}
.js .words.in .word { opacity: 1; transform: none; }

/* Éclat doré qui balaye les grands titres script.
   PAS de display:inline-block ici : sur un <h2>, la boîte serait alignée sur la
   ligne de base du parent et remonterait dans la marge du sur-titre, jusqu'à se
   placer carrément à côté de lui. Bug constaté en ligne le 27/07. */
.shine { position: relative; }
.shine::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 200% 0;
  -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000);
  pointer-events: none; opacity: 0;
}
.shine.in::after { animation: vgShine 1.5s var(--ease) .5s 1 forwards; }
@keyframes vgShine {
  0%   { opacity: 0; background-position: 200% 0; }
  22%  { opacity: 1; }
  100% { opacity: 0; background-position: -80% 0; }
}

/* ---------- Réglages fins et repli ------------------------------------- */

/* Le nom « Viaggio · Napoletana contemporanea » à côté du badge coûte 236 px.
   On le retire d'abord : la rangée logo + menu + réseaux + Réserver réclame
   1 309 px avec le nom, et seulement 1 061 px sans. Seuil relevé à 1 400 px
   depuis l'ajout des trois réseaux sociaux dans l'en-tête. */
@media (max-width: 1400px) {
  .brand .brand-txt { display: none; }
  .brand img { height: 66px; }
  .nav-main { gap: 20px; }
}

@media (max-width: 980px) {
  .nav-main { display: none; }
  .brand img { height: 60px; }
  body.scrolled .brand img { height: 48px; }
  .brand .brand-txt { display: none; }
  .cart { position: static; }

  /* Le menu passe sur une DEUXIÈME LIGNE, sur toute la largeur.
     Avant, il se partageait ~140 px avec le logo et le bouton Réserver :
     « RESTAURANT » s'affichait « T » et « À EMPORTER » était coupé. */
  /* Ligne 1 : logo · réseaux · Réserver — tout doit tenir, sinon le bouton
     part sur une troisième ligne et l'en-tête grimpe à 187 px. */
  .site-header .inner { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; gap: 12px; }
  .brand { margin-right: auto; }
  .socials { gap: 8px; }
  .soc { width: 30px; height: 30px; }
  .soc svg { width: 22px; height: 22px; }
  .site-header .inner > .btn { padding: 12px 18px; font-size: 12.5px; }
  .site-header .inner > .btn { order: 2; }
  .nav-scroll {
    display: flex; order: 3;
    flex: 1 0 100%; width: 100%; margin-left: 0;
    padding: 9px 0 10px;
    border-top: 1px solid rgba(201, 162, 75, .16);
    gap: 7px;
  }
  .nav-scroll a { padding: 8px 14px; font-size: 12.5px; }
  /* l'en-tête est plus haut : les ancres doivent s'arrêter en dessous */
  html { scroll-padding-top: 132px; }
  body.scrolled .site-header .inner { padding-top: 6px; }
}

@media (max-width: 760px) {
  body { font-size: 16.5px; }

  /* Assistant : pastille RONDE, sans texte. La version large recouvrait
     « Réserver une table » dans le haut de page et masquait la description
     des plats sur la carte. */
  .chat-fab {
    width: 56px; height: 56px; padding: 0;
    border-radius: 50%; justify-content: center;
  }
  .chat-fab .txt { display: none; }
  .chat-fab .av { width: 34px; height: 34px; padding: 5px; }

  /* et elle s'efface quand un bouton d'action est à l'écran */
  body.fab-off .chat-fab {
    opacity: 0; transform: translateY(10px) scale(.85); pointer-events: none;
  }
  body.fab-off .fab-teaser { display: none; }
  .fab-teaser { right: 12px; bottom: 146px; }
  .dishes { grid-template-columns: 1fr; }
  .dish-add { opacity: 1; transform: none; }
  .stats { gap: 16px 26px; }
  .stats .num { font-size: 25px; }
  .chat-panel, .chat-fab { right: 12px; bottom: 78px; }
  .chat-panel { max-height: 72vh; }
  .sticky-cta { padding: 9px 12px; gap: 8px; }
  .sticky-cta .txt { display: none; }
  .hero { min-height: 88vh; }
  .quote-band .mark-bg { display: none; }
}

/* ---- Écrans étroits : on laisse les libellés revenir à la ligne -----------
   Sans ça, .btn { white-space: nowrap } empêchait « Aidez-moi à choisir ma
   pizza » de se couper : la grille du hero s'élargissait à 402 px sur un écran
   de 352 et le contenu était rogné par overflow:hidden. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-wrap: balance; }
  .hero { display: block; }
  .hero-inner { min-width: 0; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn { width: 100%; }
  .hero .lead { max-width: none; }
  .stats { gap: 14px 22px; }
  .stats > div { flex: 1 1 130px; }
}

@media (max-width: 420px) {
  .sticky-cta .btn { padding: 10px 13px; font-size: 11.5px; letter-spacing: .04em; }
  .rating .score .val { font-size: 42px; }
}

/* ---- Confort tactile ------------------------------------------------------
   Apple et Google recommandent 44 px de côté minimum. */
@media (hover: none) and (pointer: coarse) {
  .soc { width: 40px; height: 40px; }
  .nav-scroll a { min-height: 42px; display: flex; align-items: center; }
  .tab { min-height: 42px; }
  .btn-link { padding: 4px 0; }
  .search-clear, .teaser-x, .chat-x, .modal-x { min-width: 40px; min-height: 40px; }
  .dish-add { width: 38px; height: 38px; font-size: 20px; }
  .cart-line .qty button { width: 32px; height: 32px; }
  .li-del { min-width: 34px; min-height: 34px; }
}

/* Utilisateurs qui préfèrent moins d'animation : on coupe tout mouvement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal], .word { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  #vg-curtain { display: none !important; }
  .marquee .track { animation: none; }
}

/* Appareil peu puissant : le script pose cette classe, on allège. */
body.vg-lite .marquee .track { animation-duration: 70s; }
body.vg-lite .hero-media img { transform: none !important; }
body.vg-lite .frame .parallax { transform: none !important; }
body.vg-lite .shine::after { display: none; }
body.vg-lite .chat-fab .ring { display: none; }

/* ==========================================================================
   Page « La carte » (carte.html) — présentation carte de restaurant
   ========================================================================== */

body.page-carte { background: var(--cream); }

/* L'en-tête ne colle PLUS en haut. Il était `sticky` quand c'était une barre
   fine (logo + titre + boutons) ; devenu un accueil de 419 px, il occupait
   65 % de l'écran en permanence et les tuiles défilaient dessous, cachées.
   Défaut invisible à la mesure — seule une capture d'écran l'a montré.
   C'est la barre de retour qui reste collée, et elle seule : elle fait 56 px
   et sert à ressortir d'une catégorie. */
.carte-header {
  position: static;
  background: var(--navy);
  border-bottom: 1px solid rgba(201, 162, 75, .3);
}
/* L'en-tête était une barre (logo à gauche, titre, boutons à droite). C'est
   devenu un accueil centré — le bloc « Benvenuto » plus bas porte la mise en
   page. Les anciennes déclarations sont retirées plutôt que surchargées :
   deux règles qui se battent sur le même sélecteur finissent toujours par
   se départager dans le mauvais sens (constaté ici sur la hauteur du logo). */
.carte-header .ch-top { padding: clamp(18px, 3.5vw, 30px) 20px; }
.ch-title { flex: 1; min-width: 0; }
.ch-title .eyebrow { margin-bottom: 2px; font-size: 11px; }
.ch-title h1 { color: var(--cream); font-size: clamp(30px, 4vw, 46px); }
.ch-actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

.carte-nav {
  display: flex; gap: 7px; overflow-x: auto;
  padding: 0 20px 11px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.carte-nav::-webkit-scrollbar { display: none; }
.cat-link {
  flex: none; white-space: nowrap;
  border: 1px solid rgba(201, 162, 75, .34);
  border-radius: var(--r-pill); padding: 7px 14px;
  color: var(--sand); font-size: 12.5px; letter-spacing: .04em;
  transition: all .25s var(--ease);
}
.cat-link .n { opacity: .5; margin-left: 5px; font-size: 11px; }
.cat-link:hover { border-color: var(--gold); color: var(--gold); }
.cat-link.on { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 600; }
.cat-link.on .n { opacity: .7; }

/* ---------- Benvenuto : en-tête de la carte à table ---------- */
.carte-header .ch-top { display: block; text-align: center; padding-bottom: clamp(14px, 2.5vw, 22px); }
/* Le logo est l'accueil : chez le restaurant il occupe près d'un quart de la
   largeur de l'écran, et c'est ce qui donne l'impression d'arriver quelque
   part. En vignette de 74 px il n'était plus qu'un détail perdu en haut. */
.carte-header .brand { display: block; margin: 0 auto 10px; }
/* margin-inline auto et pas seulement text-align : les images du site sont en
   display:block (règle globale), et un bloc ne se centre pas avec text-align.
   Le logo restait collé à gauche malgré un en-tête centré. */
.carte-header .brand img {
  height: clamp(112px, 30vw, 168px); width: auto;
  display: block; margin-inline: auto;
}
.benvenuto {
  font-family: var(--script); font-weight: 400; color: var(--gold);
  font-size: clamp(52px, 13vw, 92px); line-height: 1; margin: 0 0 14px;
  /* la cursive porte des jambages : sans marge basse le « ! » touche le texte */
  padding-bottom: .08em;
}
.benvenuto-p { color: var(--sand); font-size: clamp(15px, 1.7vw, 17.5px); line-height: 1.7; margin: 0; }
.benvenuto-p em { font-family: var(--script); font-size: 1.5em; color: var(--gold); font-style: normal; }

/* ---------- Tuiles de catégories ---------- */
/* ⚠️ `display` sur un élément qu'on masque par [hidden] : sans cette règle,
   la déclaration de classe gagne sur la feuille du navigateur et l'élément
   reste affiché malgré hidden=true. Bug réel du 10/08 — la barre de retour
   s'affichait sur l'accueil et les tuiles restaient visibles dans une
   catégorie. Un test qui lit la propriété .hidden ne le voit PAS : il faut
   lire le display calculé. */
[hidden] { display: none !important; }

/* Ancrage de défilement coupé sur les deux zones dont le contenu est remplacé
   quand on change d'écran. Sans ça Chrome « compense » la disparition de
   l'accueil et des tuiles en repoussant le défilement vers le bas, et on
   atterrit au milieu de la catégorie au lieu de son début. */
#vg-carte, .tuiles { overflow-anchor: none; }

/* Une tuile par ligne sur mobile. Deux colonnes serraient les libellés en
   cursive au point d'en couper certains sur deux lignes (« Pizze
   Napoletana »), et douze petites vignettes d'un coup formaient un mur qu'on
   ne lisait plus. Une par ligne : on lit, on tape. */
.tuiles {
  display: grid; gap: 14px; grid-template-columns: 1fr;
  padding: clamp(18px, 3vw, 28px) 20px 4px;
}
@media (min-width: 680px)  { .tuiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tuiles { grid-template-columns: repeat(3, 1fr); } }
.tuile {
  position: relative; overflow: hidden; border-radius: 16px;
  min-height: clamp(122px, 26vw, 168px); display: grid; place-items: center;
  isolation: isolate; text-decoration: none;
  border: 1px solid rgba(201, 162, 75, .3);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.tuile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
/* Voile obligatoire : les photos de la maison n'ont ni le même cadrage ni la
   même lumière, et un libellé clair posé dessus deviendrait illisible sur les
   plus claires. */
.tuile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(22,21,46,.45) 0%, rgba(22,21,46,.72) 100%);
  transition: background .25s var(--ease);
}
.tuile:hover, .tuile:focus-visible { transform: translateY(-2px); border-color: var(--gold); }
.tuile:hover::after, .tuile:focus-visible::after { background: rgba(22,21,46,.55); }
.tuile-t {
  font-family: var(--script); color: var(--cream); text-align: center;
  font-size: clamp(34px, 7.4vw, 46px); line-height: 1.05; padding: 0 16px .12em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}
/* Arrivée en cascade des tuiles. --i est posé par carte.js.
   Sous .js uniquement : sans JavaScript rien n'est masqué.
   Course plus longue et décalage plus large qu'au premier essai : à 45 ms et
   14 px l'effet passait inaperçu, Cameron a cru que rien ne bougeait. */
/* Rythme d'ensemble ralenti le 11/08 à la demande de Cameron. Les durées et
   les décalages sont volontairement plus longs qu'un réglage « web » habituel :
   la page s'ouvre à table, le client vient de s'asseoir et n'est pas pressé —
   une arrivée posée fait maison, une arrivée sèche fait borne de commande. */
.js .tuile { animation: tuileIn 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 130ms); }
@keyframes tuileIn {
  from { opacity: 0; transform: translateY(40px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
/* La photo se dézoome bien plus longtemps que la tuile n'arrive : le
   mouvement continue après que le libellé s'est posé, ce qui donne cette
   impression de respiration au lieu d'un simple surgissement. */
.js .tuile img { animation: photoIn 2.4s var(--ease) both; animation-delay: calc(var(--i, 0) * 130ms); }
@keyframes photoIn { from { transform: scale(1.22); } to { transform: scale(1); } }
/* Le libellé arrive après sa tuile, jamais en même temps. */
.js .tuile-t { animation: titreIn .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 130ms + 260ms); }
@keyframes titreIn {
  from { opacity: 0; transform: translateY(14px); letter-spacing: .06em; }
  to   { opacity: 1; transform: none; letter-spacing: normal; }
}

/* L'accueil se révèle de haut en bas : logo, titre, texte. */
.js .carte-header .brand { animation: logoIn 1.3s var(--ease) both; }
@keyframes logoIn {
  from { opacity: 0; transform: translateY(24px) scale(.86); }
  to   { opacity: 1; transform: none; }
}
.js .benvenuto   { animation: heroIn 1.2s var(--ease) .3s both; }
.js .benvenuto-p { animation: heroIn 1.2s var(--ease) .55s both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Le bloc assistant entre en dernier, une fois l'accueil posé. */
.js .tableau-in .h-2 { animation: heroIn 1s var(--ease) .75s both; }
.js .tableau-p       { animation: heroIn 1s var(--ease) .88s both; }
.js .envie           { animation: heroIn .8s var(--ease) both; }
.js .envie:nth-child(1) { animation-delay: 1s; }
.js .envie:nth-child(2) { animation-delay: 1.1s; }
.js .envie:nth-child(3) { animation-delay: 1.2s; }
.js .envie:nth-child(4) { animation-delay: 1.3s; }
.js .tableau-cta     { animation: heroIn .9s var(--ease) 1.45s both; }
/* La photo respire au survol : le zoom porte sur l'image, jamais sur la
   tuile — agrandir la tuile décalerait toute la grille. */
.tuile img { transition: transform .6s var(--ease); }
.tuile:hover img, .tuile:focus-visible img { transform: scale(1.07); }
.tuile:active { transform: scale(.985); }

/* ---------- Barre de retour (dans une catégorie) ---------- */
.retour-bar {
  position: sticky; top: 0; z-index: 40; width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; background: rgba(22, 21, 46, .96);
  backdrop-filter: blur(10px); border: none;
  border-bottom: 1px solid rgba(201, 162, 75, .28);
  font: inherit; text-align: left; cursor: pointer; min-height: 56px;
  animation: barIn .6s var(--ease) both;
  -webkit-tap-highlight-color: transparent;
}
@keyframes barIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
/* Le nom de la catégorie glisse depuis la flèche, après la barre. */
.js .retour-t { animation: heroIn .7s var(--ease) .18s both; }
.retour-fleche {
  font-size: 22px; color: var(--gold); line-height: 1; flex: none;
  transition: transform .25s var(--ease);
}
.retour-bar:hover .retour-fleche, .retour-bar:focus-visible .retour-fleche { transform: translateX(-4px); }
.retour-t {
  font-family: var(--script); font-size: clamp(28px, 6vw, 34px);
  color: var(--gold); line-height: 1; padding-bottom: .1em;
}

/* ---------- Accueil à table (page carte, ouverte depuis le QR) ----------
   La photo de fond a été retirée : avec douze tuiles illustrées juste en
   dessous, une treizième image au-dessus ne faisait qu'ajouter du bruit et
   repoussait les catégories à 779 px, hors du premier écran. Le bloc est
   devenu une bande sobre — il attire toujours l'œil par le doré, mais il
   laisse voir les tuiles tout de suite. */
.tableau { position: relative; background: var(--navy-2); border-bottom: 1px solid rgba(201,162,75,.22); }
.tableau-in { padding: clamp(18px, 3.4vw, 26px) 20px clamp(16px, 3vw, 22px); }
.tableau-in .h-2 { color: var(--cream); margin: 4px 0 6px; font-size: clamp(24px, 5.4vw, 34px); }
.tableau-p { color: var(--sand); font-size: 14.5px; line-height: 1.55; max-width: 44ch; margin: 0 0 14px; }
/* Mention « en test » de l'assistant. Discrète mais présente : elle règle
   l'attente du client avant qu'il pose sa question, et couvre le restaurant si
   la réponse est imparfaite. Une IA qui se présente comme infaillible déçoit ;
   une IA annoncée en test surprend agréablement. */
.beta {
  display: inline-block; margin-left: 6px; padding: 2px 9px;
  border: 1px solid rgba(201, 162, 75, .55); border-radius: 999px;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap; vertical-align: 2px;
}

.envies { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.envie {
  background: rgba(251, 249, 244, .07); border: 1px solid rgba(201, 162, 75, .45);
  color: var(--sand); border-radius: 999px; padding: 10px 16px;
  font-family: inherit; font-size: 14.5px; cursor: pointer; min-height: 42px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.envie:hover, .envie:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.tableau-cta { min-height: 48px; }
.tableau-note { color: var(--muted-3); font-size: 13px; margin: 14px 0 0; }
@media (max-width: 480px) {
  .envies { gap: 7px; }
  .envie { font-size: 13.5px; padding: 9px 13px; }
  .tableau-cta { width: 100%; }
}

.carte-tools { padding: clamp(20px, 3vw, 30px) 20px 4px; display: grid; gap: 12px; }
.carte-tools .search-wrap { max-width: 420px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filt {
  background: transparent; border: 1px solid rgba(22, 21, 46, .18);
  border-radius: var(--r-pill); padding: 8px 15px;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  cursor: pointer; transition: all .25s var(--ease);
}
.filt:hover { border-color: var(--gold); color: var(--ink); }
.filt.on { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.carte-count { margin: 0; font-size: 14px; color: var(--terra); min-height: 1em; }

.carte-body { padding: clamp(16px, 2vw, 26px) 20px clamp(40px, 5vw, 60px); }

.mi-sec { margin-bottom: clamp(34px, 4.5vw, 54px); }
.mi-sec-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(201, 162, 75, .5);
}
.mi-sec-head h2 {
  font-family: var(--script); font-weight: 400;
  font-size: clamp(32px, 4vw, 46px); line-height: 1; color: var(--ink);
  padding-bottom: .06em;
}
.mi-it { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--terra); }
.mi-sub {
  font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-3); margin: 26px 0 12px;
}

.mi { padding: 11px 0; border-bottom: 1px dotted rgba(22, 21, 46, .12); }
.mi:last-child { border-bottom: none; }
.mi-head { display: flex; align-items: baseline; gap: 4px; }
.mi-n { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.mi-dots {
  flex: 1; min-width: 18px; height: 1px;
  border-bottom: 1px dotted rgba(22, 21, 46, .35);
  transform: translateY(-4px);
}
.mi-p { font-size: 16px; font-weight: 600; color: var(--gold-dk); white-space: nowrap; }
.mi-d { margin: 3px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted-2); max-width: 760px; text-wrap: pretty; }
.mi-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- Plat repliable : nom + prix, détail au tap ---------- */
/* Le titre est devenu un <button> : on annule l'apparence native, sinon on
   hérite du gris et de la bordure du navigateur (piège déjà rencontré le
   27/07 sur .btn utilisé à la fois en <button> et en <a>). */
.mi.pliable > .mi-head {
  width: 100%; background: transparent; border: none; padding: 4px 0;
  font: inherit; text-align: left; cursor: pointer; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mi.pliable > .mi-head:hover .mi-n { color: var(--gold-dk); }
.mi-chev {
  width: 8px; height: 8px; flex: none; margin-left: 8px;
  border-right: 1.5px solid var(--muted-3); border-bottom: 1.5px solid var(--muted-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .28s var(--ease), border-color .2s var(--ease);
}
.mi-head[aria-expanded="true"] .mi-chev {
  transform: rotate(-135deg) translateY(-2px); border-color: var(--gold-dk);
}
/* Le dépliage s'anime sans dépendre d'une hauteur calculée en JS :
   grid-template-rows 0fr→1fr laisse le contenu décider de sa taille. */
.mi-det { display: grid; grid-template-rows: 1fr; }
.mi-det > * { min-height: 0; }
.js .mi-det:not([hidden]) { animation: detIn .55s var(--ease) both; }
@keyframes detIn { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }

/* Apparition des plats à la lecture. .a-voir n'est posé que par JS. */
.js .mi.a-voir { opacity: 0; transform: translateY(20px); }
.js .mi.a-voir.vu {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--j, 0) * 55ms);
}
@media (prefers-reduced-motion: reduce) {
  /* Tout ce qui entre en scène sur la carte doit figurer ici : ces éléments
     partent d'une opacité 0 dans leur image-clé, donc un oubli ne « laisse
     pas juste une animation » — il rend le contenu INVISIBLE pour qui a
     demandé moins d'animations. À compléter à chaque ajout. */
  .js .tuile, .js .tuile img, .js .tuile-t, .js .mi.a-voir,
  .js .mi-det:not([hidden]), .retour-bar, .js .retour-t,
  .js .carte-header .brand, .js .benvenuto, .js .benvenuto-p,
  .js .tableau-in .h-2, .js .tableau-p, .js .envie, .js .tableau-cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .js .mi.a-voir { opacity: 1; transform: none; }
  .tuile:hover img, .tuile:focus-visible img { transform: none; }
}

/* deux colonnes sur grand écran, comme une vraie carte */
@media (min-width: 1000px) {
  .mi-sec { columns: 2; column-gap: clamp(34px, 4vw, 60px); }
  .mi-sec-head { column-span: all; }
  .mi-sec .menu-note { column-span: all; }
  .mi { break-inside: avoid; }
  .mi-sub { break-after: avoid; }
}

.carte-foot {
  padding: 0 20px clamp(90px, 10vw, 120px);
  border-top: 1px solid rgba(22, 21, 46, .1);
  padding-top: 24px;
}
.carte-foot p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: var(--muted-2); max-width: 820px; }

@media (max-width: 760px) {
  /* L'en-tête de la carte n'est plus une barre (logo + titre + boutons) mais
     un accueil centré : les règles de reflow qui la traitaient en barre ont
     été retirées, et surtout la hauteur de logo à 46 px — placée APRÈS la
     nouvelle règle, elle la battait en silence et le logo restait minuscule
     sur téléphone, l'écran même où il compte le plus. */
  .mi-n { font-size: 16.5px; }
}

/* ==========================================================================
   Correctifs mobile du 27/07 (relevés sur iPhone en portrait)
   ========================================================================== */
@media (max-width: 760px) {

  /* « DÉCOUVRIR » et son trait se superposaient aux statistiques du hero. */
  .scroll-hint { display: none; }

  /* Icônes un peu plus grandes au doigt, sans rond autour. */
  .socials { gap: 12px; }
  .soc { width: 34px; height: 34px; }
  .soc svg { width: 24px; height: 24px; }

  /* Le bouton + était en position absolue en bas à droite du plat : la
     pastille flottante de l'assistant venait juste par-dessus. On le remet
     dans le flux, à côté du prix — plus visible et plus rien ne le couvre. */
  .dish { grid-template-columns: 1fr auto auto; align-items: start; }
  .dish-add {
    position: static; opacity: 1; transform: none;
    grid-row: 1; align-self: center; margin-left: 4px;
  }
  .dish .desc, .dish .tags { grid-column: 1 / -1; }

  /* Flèches de catégories aussi sur mobile, plus grandes, avec la place
     réservée pour qu'elles ne recouvrent pas le premier ni le dernier onglet. */
  .tabs-arrow { display: grid; width: 40px; height: 40px; font-size: 24px; }
  .tabs-arrow.prev { left: 0; }
  .tabs-arrow.next { right: 0; }
  .tabs { padding-left: 46px; padding-right: 46px; }
  .tabs-wrap:not(.can-prev) .tabs { padding-left: 0; }
  .tabs-wrap:not(.can-next) .tabs { padding-right: 0; }
  .tabs-wrap::before, .tabs-wrap::after { width: 46px; }
}

/* ---- Très petits écrans (iPhone SE, vieux Android) ------------------------
   Logo + 3 réseaux + Réserver réclament 316 px pour 280 disponibles à 320 px
   de large : le bouton partait sur une 3e ligne. On resserre tout. */
@media (max-width: 400px) {
  .site-header .inner { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .brand img { height: 52px; }
  body.scrolled .brand img { height: 44px; }
  .socials { gap: 6px; }
  .soc { width: 26px; height: 26px; }
  .soc svg { width: 21px; height: 21px; }
  .site-header .inner > .btn { padding: 10px 13px; font-size: 11.5px; letter-spacing: .05em; }
  .nav-scroll { padding-left: 0; padding-right: 0; }
  .nav-scroll a { padding: 7px 12px; font-size: 12px; }
}

@media print {
  .site-header, .sticky-cta, .chat-fab, .chat-panel, #vg-curtain, .modal,
  .carte-nav, .carte-tools, .ch-actions, .fab-teaser, #vg-progress { display: none !important; }
  body { background: #fff; color: #000; }

  /* La carte doit s'imprimer proprement : tout visible, deux colonnes, sans
     fond sombre qui viderait la cartouche d'encre. */
  body.page-carte [data-reveal], body.page-carte .word { opacity: 1 !important; transform: none !important; }
  .carte-header { position: static; background: #fff; border-color: #999; }
  .carte-header .brand img { height: 48px; }
  .ch-title h1, .mi-sec-head h2 { color: #000; }
  .ch-title .eyebrow, .mi-it { color: #444; }
  .mi-p { color: #000; }
  .mi-d { color: #333; font-size: 11pt; }
  .mi-sec { columns: 2; column-gap: 24pt; break-inside: auto; }
  .mi-sec-head { column-span: all; break-after: avoid; }
  .mi { break-inside: avoid; padding: 5pt 0; }
  .mi-tags { display: none; }
  .carte-foot { padding: 12pt 0 0; }
  a[href]::after { content: ''; }
}

/* ─── PLAT ÉPUISÉ ────────────────────────────────────────────────────────────
   Signalé par la maison depuis son espace, en direct, sans redéploiement.

   Le plat RESTE sur la carte, estompé et marqué : le retirer laisserait croire
   qu'il n'existe pas, alors qu'il revient au prochain service. Il reste aussi
   parfaitement lisible — une carte est un document qu'on parcourt, pas une
   liste de disponibilités. */
.dish.is-indispo,
.mi.is-indispo { opacity: .55; }
.dish.is-indispo .name,
.mi.is-indispo .mi-n { text-decoration: line-through; text-decoration-thickness: 1px; }

.dish-indispo,
.mi-indispo {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b4462f;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE EN PAGES — refonte du 31/07/2026

   Demande de Cameron : « la page est hyper longue, fais plusieurs onglets,
   je veux que ça se rapproche d'un site haut de gamme ».

   Ce que font réellement les grandes maisons, et qu'on applique ici :
     · une page ne traite qu'UN sujet, et s'ouvre sur une image plein cadre ;
     · beaucoup de vide — le blanc est ce qui signale le luxe, pas l'or ;
     · peu de mots, en grand ;
     · des animations lentes et discrètes, jamais rebondissantes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Plus d'air entre les sections. Une page haut de gamme respire : le contenu
   occupe moins de la moitié de la hauteur, le reste est du silence. */
.pad    { padding: clamp(84px, 11vw, 168px) 0; }
.pad-sm { padding: clamp(56px, 7vw, 96px) 0; }

/* ─── Ouverture d'une page intérieure ─────────────────────────────────────── */
/* Aucune page ne commence par du texte collé au menu : chacune s'ouvre sur une
   image, un surtitre, un titre. C'est le geste qui fait « maison », et il coûte
   une image qu'on a déjà. */
.page-hero {
  position: relative;
  min-height: min(62vh, 620px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy);
}
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  transform: scale(1.06);
}
.page-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,21,46,.62) 0%, rgba(22,21,46,.34) 45%, rgba(22,21,46,.88) 100%);
}
.page-hero-inner { position: relative; padding-bottom: clamp(38px, 5vw, 70px); padding-top: clamp(96px, 12vw, 150px); }

.page-eyebrow {
  display: inline-block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 14px;
}
.page-title {
  margin: 0;
  font-family: var(--serif, 'Great Vibes', cursive);
  font-size: clamp(46px, 9vw, 104px);
  line-height: .95;
  color: var(--cream);
  font-weight: 400;
}
.page-lead {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.6vw, 18.5px);
  line-height: 1.75;
  color: rgba(251,249,244,.86);
}

/* ─── Les portes de l'accueil ─────────────────────────────────────────────── */
/* Ce qui remplace six sections empilées : quatre grandes cartes qui laissent
   CHOISIR. Un visiteur qui choisit reste ; un visiteur qui déroule abandonne. */
.portes-sur {
  margin: 0 0 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-dk);
}
.portes {
  display: grid;
  gap: clamp(16px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  margin-top: clamp(30px, 4vw, 54px);
}
.porte {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  color: var(--cream);
  background: var(--navy);
  aspect-ratio: 3 / 4;
  isolation: isolate;
}
.porte-img { position: absolute; inset: 0; display: block; }
.porte-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Le mouvement lent au survol : c'est LE détail qui sépare un site soigné
     d'un site fait vite. Une seconde et demie, pas trois dixièmes. */
  transition: transform 1.4s var(--ease-out, cubic-bezier(.16,1,.3,1));
  transform: scale(1.02);
}
.porte::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,21,46,.12) 0%, rgba(22,21,46,.52) 52%, rgba(22,21,46,.92) 100%);
  transition: opacity .6s var(--ease, ease);
}
.porte-txt {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: clamp(18px, 2.4vw, 28px);
  display: block;
}
.porte-n {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .3em;
  color: var(--gold-lt);
  margin-bottom: 8px;
}
.porte-txt strong {
  display: block;
  font-size: clamp(20px, 2.3vw, 27px);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 5px;
}
.porte-txt em {
  display: block;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(251,249,244,.74);
}
/* Le trait doré qui se tire sous le titre : discret, et il donne le sentiment
   que la carte « répond » sans bouger d'un pixel. */
.porte-txt strong::after {
  content: '';
  display: block;
  width: 0; height: 2px;
  margin-top: 10px;
  background: var(--gold);
  transition: width .7s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
@media (hover: hover) {
  .porte:hover .porte-img img { transform: scale(1.1); }
  .porte:hover .porte-txt strong::after { width: 54px; }
  .porte:hover::after { opacity: .88; }
}
.porte:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* La page courante, signalée dans le menu. Un site haut de gamme dit toujours
   où l'on se trouve. */
.nav-main a[aria-current="page"],
.nav-scroll a[aria-current="page"] { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .porte-img img, .porte-txt strong::after, .porte::after { transition: none; }
  .page-hero-media img { transform: none; }
}

/* ─── FORMULAIRE DE COMMANDE ────────────────────────────────────────────────
   Remplace le lien « mailto: », qui ne faisait rien sur un téléphone sans
   messagerie configurée. Champs hauts, visés au pouce, en salle ou dans la rue. */
.cart-form { margin-top: 14px; display: grid; gap: 11px; }
.cart-form-intro { margin: 0; font-size: 13.5px; color: var(--muted-2, #6d655c); }
.cart-form label { display: grid; gap: 5px; }
.cart-form label > span { font-size: 12.5px; font-weight: 600; }
.cart-form label em { font-style: normal; font-weight: 400; opacity: .7; }
.cart-form input,
.cart-form textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(22,21,46,.16);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 15px;      /* 16 px minimum sur iOS, sinon Safari zoome au focus */
  color: var(--navy);
  outline: none;
}
.cart-form input:focus,
.cart-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,75,.18); }
.cart-form textarea { resize: vertical; min-height: 62px; }
.cart-form-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 3px; }
.cart-form-msg:empty { display: none; }
.cart-form-msg {
  margin: 4px 0 0; padding: 9px 12px;
  border-radius: 9px;
  background: rgba(180,70,47,.09);
  border: 1px solid rgba(180,70,47,.3);
  font-size: 13px; line-height: 1.55; color: #8f2f1b;
}

/* La confirmation. C'est ce qui transforme « j'ai cliqué » en « ma commande
   existe » : sans référence affichée, le client doute et rappelle. */
.cart-done {
  margin-top: 14px; padding: 16px 17px;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: rgba(201,162,75,.08);
}
.cart-done-ref { margin: 0 0 6px; display: flex; align-items: baseline; gap: 9px; }
.cart-done-ref span { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.cart-done-ref strong { font-size: 25px; font-weight: 700; letter-spacing: .06em; color: var(--gold-dk); }
.cart-done-txt { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; }

/* ============================================================ BARRE DE RÉSERVATION
   Le restaurant voulait retrouver le bouton toujours visible de son ancien
   site. Doré, pas orange Zenchef : choix de Cameron le 14/08/2026 — la couleur
   de la maison plutôt que celle d'un logiciel tiers.

   POURQUOI padding-right ET PAS UNE SUPERPOSITION. La pastille de Gino est
   posée par cln-nexus.fr en position fixe, 62 px, à 18 px du bas et de la
   droite. La barre lui réserve donc 92 px (18 + 62 + 12 de respiration) au
   lieu de passer dessous. Deux boutons empilés dans le même coin, c'est
   exactement le défaut corrigé en juillet quand la pastille recouvrait
   « Réserver une table ».

   Téléphone uniquement : sur un écran large les boutons dorés de la page sont
   déjà bien visibles, et une barre collante y mangerait de la hauteur pour
   rien. */
.resa-bar { display: none; }

@media (max-width: 860px) {
  .resa-bar {
    position: fixed;
    z-index: 60;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: 12px 92px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
    border-top: 1px solid rgba(22, 21, 46, .09);
    background: rgba(251, 249, 244, .95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .resa-bar .btn { width: 100%; justify-content: center; }

  /* Sans cette réserve, la barre recouvre la fin du pied de page — donc les
     mentions légales et les allergènes, qui sont obligatoires. */
  body.has-resa-bar { padding-bottom: 78px; }
}

@media (prefers-reduced-motion: no-preference) {
  .resa-bar { animation: resaBarIn .5s var(--ease, ease) both; }
  @keyframes resaBarIn { from { transform: translateY(100%); } to { transform: none; } }
}

/* LES RÉSEAUX DANS LEURS VRAIES COULEURS.
   Demandé par l'oncle de Cameron le 16/08/2026. Les trois logos étaient crème
   (#E9E4D8) comme le reste du bandeau : lisibles, mais on ne les reconnaissait
   qu'après les avoir regardés. Une marque se reconnaît à sa couleur avant sa
   forme — c'est tout l'intérêt de mettre ces logos-là.

   Le ciblage passe par le title, déjà présent sur chaque lien pour l'infobulle :
   aucune classe à ajouter dans les huit pages HTML, et un lien qu'on ajouterait
   plus tard sans title garderait simplement la couleur crème.

   Le survol ne passe plus en doré — il éclaircit la couleur de la marque. Virer
   au doré aurait défait ce qu'on vient de faire au moment précis où l'on
   désigne l'icône. */
.soc[title="Instagram"] { color: #E1306C; }
.soc[title="Facebook"] { color: #1877F2; }
.soc[title="Avis Tripadvisor"] { color: #34E0A1; }
.soc[title="Instagram"]:hover { color: #F4699A; }
.soc[title="Facebook"]:hover { color: #4D95F5; }
.soc[title="Avis Tripadvisor"]:hover { color: #6BEBBC; }

/* Écran de choix de la maison — voir le bloc « villes » dans site.js.
   Invisible tant qu'une seule maison est ouverte : il n'est jamais inséré dans
   la page. Ces règles ne coûtent donc rien aujourd'hui, elles attendent Tours. */
.villes-ecran {
  position: fixed; inset: 0; z-index: 9998;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(12, 11, 26, .94);
  backdrop-filter: blur(6px);
}
.villes-boite { width: min(440px, 100%); text-align: center; }
.villes-titre {
  margin: 0 0 22px;
  color: var(--sand); font-size: clamp(17px, 4.4vw, 21px); line-height: 1.35;
}
/* Une colonne sur téléphone, deux dès qu'il y a la place : deux villes côte à
   côte se comparent d'un regard, empilées elles se lisent l'une après l'autre. */
.villes-liste { display: grid; gap: 12px; }
@media (min-width: 460px) { .villes-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.villes-choix {
  display: grid; gap: 4px;
  padding: 20px 16px;
  border: 1px solid rgba(201, 162, 75, .45);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  color: var(--sand);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.villes-choix strong { font-size: 19px; letter-spacing: .02em; }
.villes-choix span { font-size: 12.5px; opacity: .68; }
.villes-choix:hover, .villes-choix:focus-visible {
  border-color: var(--gold);
  background: rgba(201, 162, 75, .12);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .villes-choix { transition: none; } .villes-choix:hover { transform: none; } }

/* ====================================================== INTRO : LOGO PUIS ÉCLATS
   Le voile est peint par ::before sur <html> et NON par un élément inséré en
   JavaScript : à ce moment-là, <body> n'existe pas encore. C'est la seule façon
   de couvrir la page avant son premier rendu — sinon on verrait le site
   apparaître une fraction de seconde, puis se faire recouvrir, ce qui donne
   exactement l'impression inverse de celle qu'on cherche.

   Tout dépend de la classe posée par le script de tête de page. S'il ne tourne
   pas — JavaScript coupé, erreur, robot d'indexation — aucune de ces règles ne
   s'applique et le site s'affiche entièrement. Une animation ne conditionne
   jamais la visibilité d'un contenu : leçon du 27/07/2026. */
html.intro-en-cours { overflow: hidden; }
html.intro-en-cours::before {
  content: ''; position: fixed; inset: 0; z-index: 9998;
  background: var(--navy, #16152E);
  transition: opacity .52s ease;
}
html.intro-fin::before { opacity: 0; }

.intro-scene {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  /* Aucun clic ne doit être avalé : si l'intro traînait pour une raison
     quelconque, le site resterait utilisable en dessous. */
  pointer-events: none;
}
.intro-logo { position: relative; width: clamp(112px, 30vmin, 168px); aspect-ratio: 1; }

/* Chaque éclat porte le monogramme ENTIER et n'en laisse voir que sa part
   (clip-path posé en ligne par intro.js). Réunis, ils redessinent le logo au
   pixel près ; écartés, ils le disloquent pour de bon. */
.intro-eclat {
  position: absolute; inset: 0;
  color: var(--gold, #C9A24B);
  opacity: 0; transform: scale(.84);
}
.intro-eclat svg { width: 100%; height: 100%; display: block; }

html.intro-pose .intro-eclat {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .52s cubic-bezier(.16, 1, .3, 1);
}
html.intro-eclate .intro-eclat {
  opacity: 0;
  transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.07);
  transition: opacity .5s ease var(--d), transform .62s cubic-bezier(.32, .72, .3, 1) var(--d);
}

/* Qui refuse les animations ne voit pas l'intro DU TOUT : le script de tête ne
   pose même pas la classe. Cette règle n'est qu'une ceinture de plus. */
@media (prefers-reduced-motion: reduce) {
  html.intro-en-cours { overflow: auto; }
  html.intro-en-cours::before, .intro-scene { display: none; }
}