/* ==========================================================================
   Best Istanbul Grill — feuille de style
   Direction artistique « Le grill » (refonte 10/2026) : le cuivre martelé de la hotte
   et ses lettres en relief, le charbon, la braise, le mur de briques et le cuir de la salle.
   Sommaire :
     1. Polices et jetons de design (couleurs, tailles, rythmes)
     2. Base
     3. Composants partagés (boutons, sourcils, cadres, titres)
     4. Navigation + menu mobile + barre d'actions mobile
     5. Accueil
     6. En-têtes des pages intérieures
     7. La carte
     8. Galerie + visionneuse
     9. Histoire
    10. Avis
    11. Infos pratiques + pied de page
    12. Apparitions au défilement, préférences d'accessibilité
   ========================================================================== */

/* ---------- 1. Polices et jetons ---------- */
/* Titres, prix, noms de plats : Barlow Semi Condensed ExtraBold, la police du logo et des lettres de
   l'enseigne (licence OFL ; remplace Bungee le 29/10/2026, PROMPT-FINITIONS-DA.md). Un seul fichier
   ExtraBold, déclaré pour toutes les graisses : jamais de faux gras ni de faux maigre.
   Texte : Figtree. Hébergées sur le site, découpées latin / latin étendu (İ, ş, ğ). */
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-sc-800.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-sc-800-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-ext.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Couleurs relevées sur les photos du restaurant (pipette, 28/10/2026). Les anciens noms sont gardés
     pour ne pas tout réécrire : « braise » = rouge de la carte et de la façade, « laiton » = ambre du néon. */
  --jour: #efe2cf;          /* crème des murs de la façade, boulevard Diderot : les sections « jour » */
  --nuit: #17110e;          /* noir chaud : fond de la carte imprimée, plafond de la salle */
  --nuit-2: #1f1713;        /* surfaces */
  --nuit-3: #281e18;        /* cartes */
  --nuit-4: #31251d;
  --creme: #f6eedf;         /* blanc des lettres « BEST » du néon et du texte de la carte */
  --creme-doux: rgba(246, 238, 223, 0.76);
  --fumee: #ad9f8d;         /* texte secondaire */
  --braise: #d42a33;        /* rouge des bandes de la carte et de la lueur de façade (#ef2b39) : actions, bandes */
  --braise-fonce: #b31f28;  /* rouge appuyé : survol, et texte des étiquettes de prix (contraste 5,6 sur la crème) */
  --braise-lueur: rgba(239, 43, 57, 0.35);
  --laiton: #f2b544;        /* ambre des lettres « ISTANBUL GRILL » du néon et des ampoules : prix, statut */
  --laiton-doux: rgba(242, 181, 68, 0.16);
  --brique: #9a3f27;        /* le mur de briques */
  --bois: #51260a;          /* les planches du lettrage de la salle */
  --velours: #331a0b;       /* le cuir des banquettes */
  --filet: rgba(246, 238, 223, 0.1);
  --filet-fort: rgba(246, 238, 223, 0.2);

  /* Typographie */
  --f-titre: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-texte: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rythme */
  --gouttiere: clamp(16px, 4vw, 56px);
  --section: clamp(64px, 7vw, 112px);
  --rayon: 10px;
  --rayon-in: 6px;
  --largeur: 1360px;

  /* Mouvement : courbes franches */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-neon: cubic-bezier(0.2, 0.7, 0.2, 1);   /* courbe unique des animations (PROMPT-ANIMATIONS.md § 5) */
  --duree: 0.6s;

  --hauteur-nav: 76px;
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--creme);
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
/* Grain de pellicule, fixe (ne repeint pas au défilement) */
body::after {
  display: none; /* grain retiré à la refonte */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, picture, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
::selection { background: var(--braise); color: #fff; }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 4px; border-radius: 6px; }

.ico { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 200; background: var(--creme); color: var(--nuit); padding: 12px 18px; border-radius: 999px; font-weight: 600; transition: top 0.3s var(--ease); }
.skip:focus { top: 16px; }

.conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--serree { padding-block: calc(var(--section) * 0.6); }

/* ---------- 3. Composants partagés ---------- */

/* Sourcil : courte indication au-dessus d'un titre, en cuivre, sans pastille ni capitales */
.sourcil {
  display: inline-block;
  justify-self: start;
  align-self: start;
  max-width: 100%;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--laiton);
}

/* Titres : la police de l'enseigne, capitales franches, jamais d'italique ni de mot recoloré */
.titre-xxl, .titre-xl, .titre-l, .titre-m {
  font-family: var(--f-titre); text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.005em;
  text-wrap: balance;
  margin: 0;
}
.titre-xxl { font-size: clamp(3rem, min(10.5vw, 13svh), 7.6rem); line-height: 0.92; }
.titre-xl { font-size: clamp(2.4rem, 5.6vw, 5.4rem); line-height: 0.95; }
.titre-l { font-size: clamp(2.1rem, 4.2vw, 4rem); line-height: 0.98; }
.titre-m { font-size: clamp(1.6rem, 2.5vw, 2.3rem); line-height: 1.02; }
.titre-xxl em, .titre-xl em, .titre-l em, .titre-m em { font-style: normal; color: inherit; }
/* Les titres-phrases respirent mieux en minuscules (PROMPT-COMPOSITION.md § 3.5) ; restent en capitales,
   comme sur l'enseigne et la carte imprimée : le très grand titre, les bandes de la carte, plats et prix */
.titre-xl, .titre-l, .titre-m { text-transform: none; letter-spacing: -0.005em; line-height: 1.02; }
.rubrique__entete .titre-l, .vedette__haut .titre-l { text-transform: uppercase; letter-spacing: 0.005em; }
.chapeau { font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--creme-doux); max-width: 46ch; font-weight: 400; text-wrap: pretty; }
.texte-doux { color: var(--creme-doux); }
.petit { font-size: 0.86rem; color: var(--fumee); }

/* Boutons : plaques franches, coins presque droits, icône à côté du texte */
.btn {
  --h: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 24px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.02rem;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn__ico { display: none; }
.btn__ico .ico { width: 19px; height: 19px; }
.btn--braise { background: var(--braise); color: #fff; }
.btn--braise:hover { background: var(--braise-fonce); box-shadow: 0 0 0 2px #ff5a63 inset, 0 0 18px rgba(239, 43, 57, 0.45); }
.btn--creme { background: var(--creme); color: var(--nuit); }
.btn--creme:hover { background: #fff6e6; box-shadow: 0 0 16px rgba(242, 232, 216, 0.35); }
.btn--verre { background: rgba(27, 20, 17, 0.55); color: var(--creme); box-shadow: 0 0 0 2px var(--filet-fort) inset; }
.btn--verre:hover { box-shadow: 0 0 0 2px var(--creme) inset, 0 0 16px rgba(242, 232, 216, 0.3); }   /* le contour s'allume comme un tube */
.btn--sm { --h: 46px; font-size: 0.95rem; padding: 0 18px; }
.btn--sm .btn__ico .ico { width: 16px; height: 16px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; color: var(--creme);
  padding-bottom: 4px;
  font-weight: 700;
  background: linear-gradient(var(--laiton), var(--laiton)) no-repeat 0 100% / 100% 2px;
  transition: color 0.2s var(--ease);
}
.lien-fleche:hover { color: var(--laiton); }
.lien-fleche .ico { width: 16px; height: 16px; color: var(--laiton); }

/* Cadre « double bezel » : une coque fine qui tient le contenu, comme une plaque dans un plateau */
.cadre {
  display: grid;
  padding: 0;
  border-radius: var(--rayon-in);
}
.cadre__in {
  position: relative;
  border-radius: var(--rayon-in);
  overflow: hidden;
  background: var(--nuit-3);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
  height: 100%;
}
.cadre__in > img, .cadre__in > picture, .cadre__in > picture > img { width: 100%; height: 100%; object-fit: cover; }

/* Arche : le cadre des fenêtres et des portes ottomanes */
/* Arches retirées à la refonte : la classe reste dans le HTML mais ne change plus la forme */
.arche { border-radius: var(--rayon-in); }

/* Photo : zoom doux au survol */
.photo { overflow: hidden; }
.photo img { transition: transform 1.4s var(--ease-sortie); }
@media (hover: hover) { .zoom-survol:hover .photo img, .photo.zoom-survol:hover img { transform: scale(1.05); } }

/* Puce de statut « ouvert / fermé » */
.statut { display: inline-flex; align-items: center; gap: 10px; }
.statut__point { width: 8px; height: 8px; border-radius: 50%; background: var(--fumee); flex: none; }
.statut[data-etat="ouvert"] .statut__point { background: var(--laiton); }
.statut[data-etat="ferme"] .statut__point { background: var(--braise); }
/* Le point grésille une fois quand le statut apparaît (main.js § 4), puis reste fixe */
.statut__point.allume { animation: allume 0.26s linear both; }

/* Mentions de plat (épicé, végétarien) : un mot en couleur, sans pilule ni pictogramme */
.pastille { display: inline; font-size: 0.85rem; font-weight: 700; color: var(--creme-doux); }
.pastille--epice { color: #ff8a80; }
.pastille--vege { color: #a7d7a0; }

/* ---------- 4. Navigation ---------- */
.nav {
  position: fixed;
  top: 16px;
  left: 0; right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding-inline: 12px;
  pointer-events: none;
  transition: transform 0.7s var(--ease);
}
.nav--cachee { transform: translateY(-130%); }
.nav__ilot {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 36px);
  width: min(100%, 1240px);
  height: 64px;
  padding: 0 8px 0 18px;
  border-radius: 8px;
  background: rgba(27, 20, 17, 0.92);
  box-shadow: 0 0 0 1px var(--filet) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.9);
}
/* Logo du menu : l'enseigne en version courte (flamme + nom), tirée de assets/logo/sprite.svg */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo__svg { display: block; width: auto; height: 26px; overflow: visible; }
@media (min-width: 1000px) { .logo__svg { height: 30px; } }
.nav__liens { display: none; gap: 4px; margin-left: auto; }
.nav__liens a {
  position: relative;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--creme-doux);
  transition: color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.nav__liens a:hover { color: var(--creme); background: rgba(243, 233, 218, 0.06); }
.nav__liens a[aria-current="page"] { color: var(--creme); }
.nav__liens a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--laiton);
}
.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__cta { display: none; }

.burger {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 6px;
  background: rgba(243, 233, 218, 0.08);
  box-shadow: 0 0 0 1px var(--filet) inset;
}
.burger span {
  position: absolute; left: 15px; right: 15px; height: 1.5px;
  background: var(--creme);
  border-radius: 2px;
  transition: transform 0.6s var(--ease), top 0.6s var(--ease);
}
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 23.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 23.5px; transform: rotate(-45deg); }

/* Choix de la langue : toujours visible dans la barre du haut, téléphone compris
   (les touristes arrivent souvent sur la carte par le QR code de leur table) */
.langue {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; padding: 0 12px;
  border-radius: 6px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--creme);
  background: rgba(243, 233, 218, 0.08);
  box-shadow: 0 0 0 1px var(--filet) inset;
  transition: background-color 0.4s var(--ease);
}
.langue:hover { background: rgba(243, 233, 218, 0.14); }
.langue .ico { width: 18px; height: 18px; color: var(--laiton); }
/* Petits téléphones : le logo se resserre pour laisser la place au choix de la langue */
@media (max-width: 374px) { .logo__svg { height: 22px; } .langue { padding: 0 10px; } }

@media (min-width: 1080px) {
  .nav__liens { display: flex; }
  .nav__actions { margin-left: 0; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }
  .langue { height: 40px; }
}

/* Menu mobile plein écran */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(var(--hauteur-nav) + 40px) var(--gouttiere) calc(32px + env(safe-area-inset-bottom));
  background: var(--nuit);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
  overflow-y: auto;
}
.menu-mobile[data-ouvert="true"] { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease); }
.menu-mobile__liens { display: grid; gap: 4px; }
.menu-mobile__liens a {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--f-titre); text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 1.12;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.8s var(--ease), opacity 0.8s var(--ease), color 0.3s var(--ease);
}
.menu-mobile__liens a small { font-family: var(--f-texte); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--fumee); }
.menu-mobile__liens a[aria-current="page"] { color: var(--laiton); }
.menu-mobile[data-ouvert="true"] .menu-mobile__liens a { transform: none; opacity: 1; }
.menu-mobile[data-ouvert="true"] .menu-mobile__liens a:nth-child(2) { transition-delay: 0.05s; }
.menu-mobile[data-ouvert="true"] .menu-mobile__liens a:nth-child(3) { transition-delay: 0.1s; }
.menu-mobile[data-ouvert="true"] .menu-mobile__liens a:nth-child(4) { transition-delay: 0.15s; }
.menu-mobile[data-ouvert="true"] .menu-mobile__liens a:nth-child(5) { transition-delay: 0.2s; }
.menu-mobile__pied { display: grid; gap: 18px; color: var(--creme-doux); font-size: 0.95rem; opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease) 0.25s, transform 0.8s var(--ease) 0.25s; }
.menu-mobile[data-ouvert="true"] .menu-mobile__pied { opacity: 1; transform: none; }
/* Les deux langues en toutes lettres, en tête du pied du menu ; la langue affichée est pleine */
.menu-mobile__langue { display: flex; align-items: center; gap: 8px; }
.menu-mobile__langue .ico { width: 22px; height: 22px; color: var(--laiton); margin-right: 4px; }
.menu-mobile__langue a {
  padding: 10px 16px; border-radius: 6px;
  font-weight: 700; color: var(--creme);
  box-shadow: 0 0 0 1px var(--filet-fort) inset;
}
.menu-mobile__langue a[aria-current="true"] { background: var(--creme); color: var(--nuit); box-shadow: none; }

/* Barre d'actions collée en bas, sur téléphone */
.barre-mobile {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(27, 20, 17, 0.96);
  box-shadow: 0 0 0 1px var(--filet) inset, 0 20px 40px -20px #000;
  transform: translateY(160%);
  transition: transform 0.7s var(--ease);
}
.barre-mobile--visible { transform: none; }
.barre-mobile a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: 6px;
  font-size: 0.92rem; font-weight: 700;
  color: var(--creme);
  background: rgba(243, 233, 218, 0.06);
}
.barre-mobile a:last-child { background: var(--braise); color: #fff; }
.barre-mobile .ico { width: 17px; height: 17px; }
@media (min-width: 900px) { .barre-mobile { display: none; } }

/* Signature Lutèce : pastille flottante en bas à droite, comme sur Burgz.
   Visible à l'arrêt ; main.js (section 11) l'efface pendant le défilement et la fait revenir 1 s après.
   Pas sur la carte (_dev/commun.py). Sur téléphone, elle se pose au-dessus de la barre d'actions quand celle-ci est sortie. */
.signature {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 49;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px;
  border-radius: 100px;
  font-size: 0.85rem;
  color: var(--creme-doux);
  background: rgba(23, 17, 14, 0.9);
  box-shadow: 0 0 0 1px rgba(242, 181, 68, 0.3) inset, 0 10px 30px -12px #000;
  transition: opacity 0.32s cubic-bezier(0.42, 0, 0.25, 1), transform 0.32s cubic-bezier(0.42, 0, 0.25, 1), bottom 0.7s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.signature strong { color: var(--laiton); font-weight: 600; }
.signature:hover { color: var(--creme); box-shadow: 0 0 0 1px var(--laiton) inset, 0 10px 30px -12px #000; }
.signature__logo { width: 30px; height: 30px; flex: none; border-radius: 8px; }
/* Pendant le défilement : la disparition est franche, pour libérer la lecture tout de suite */
.signature--heros { opacity: 0; pointer-events: none; }
.signature--cachee { opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), bottom 0.7s var(--ease); }
@media (max-width: 899px) {
  .signature { right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
  /* Sur téléphone, elle n'apparaît qu'avec la barre d'actions, posée au-dessus : en haut de page elle couvrirait les boutons */
  .barre-mobile:not(.barre-mobile--visible) ~ .signature { opacity: 0; pointer-events: none; }
  .barre-mobile--visible ~ .signature { bottom: calc(86px + env(safe-area-inset-bottom)); }
  body:has(.signature) .pied { padding-bottom: calc(36px + 76px + 60px); }
}
@media (min-width: 900px) { body:has(.signature) .pied { padding-bottom: 96px; } }

/* Bandeau cookies : seulement sur les pages qui ont le plan Google Maps (accueil, contact) et sur la page Cookies.
   « Refuser » et « Accepter » ont la même taille et le même rang (exigence de la CNIL) ; rien n'est bloqué derrière. */
.bandeau-cookies {
  position: fixed;
  left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  width: min(640px, calc(100vw - 24px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
  padding: 18px 20px;
  border-radius: var(--rayon);
  background: rgba(23, 17, 14, 0.97);
  box-shadow: 0 0 0 1px var(--filet-fort) inset, 0 22px 50px -18px #000;
  transition: bottom 0.7s var(--ease);
}
.barre-mobile--visible ~ .bandeau-cookies { bottom: calc(86px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .barre-mobile--visible ~ .bandeau-cookies { bottom: 20px; } }
.bandeau-cookies__texte { flex: 1 1 260px; font-size: 0.9rem; line-height: 1.5; color: var(--creme-doux); }
.bandeau-cookies__texte strong { display: block; margin-bottom: 4px; font-family: var(--f-titre); font-size: 1.1rem; text-transform: uppercase; color: var(--creme); }
.bandeau-cookies__texte a { color: var(--laiton); text-decoration: underline; text-underline-offset: 3px; }
.bandeau-cookies__actions { display: flex; gap: 8px; flex: 1 1 auto; }
.bandeau-cookies__actions .btn { flex: 1 1 0; min-width: 120px; justify-content: center; }
body.a-bandeau-cookies .signature { opacity: 0; pointer-events: none; }
/* Page Cookies : l'état du choix et le bouton pour le changer */
.choix-cookies { display: grid; gap: 14px; justify-items: start; margin: 4px 0 16px; padding: 18px 20px; border-radius: var(--rayon); background: var(--nuit-2); box-shadow: 0 0 0 1px var(--filet) inset; }
.choix-cookies strong { color: var(--laiton); }

/* ---------- 5. Accueil ---------- */

/* Héros : la vidéo du grill en plein écran, l'enseigne posée dessus (sans bandeau), et de quoi
   commander tout de suite. Le voile assombrit derrière le logo et en bas, là où sont le texte et les boutons. */
.heros {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--hauteur-nav) + 32px) 0 clamp(24px, 4vh, 48px);
  isolation: isolate;
  overflow: hidden;
  background: var(--nuit);
}
.heros__film { position: absolute; inset: 0; z-index: -2; }
.heros__film video { width: 100%; height: 100%; object-fit: cover; }
.heros__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 90% 26% at 50% 64%, rgba(18, 13, 11, 0.72), rgba(18, 13, 11, 0) 78%),
    linear-gradient(180deg, rgba(18, 13, 11, 0.62) 0%, rgba(18, 13, 11, 0.1) 22%, rgba(18, 13, 11, 0.22) 48%, rgba(18, 13, 11, 0.9) 80%, var(--nuit) 100%);
}
.heros__grille { display: grid; gap: clamp(24px, 4vh, 40px); }
.heros__logo { margin: 0; }
.heros__svg { display: block; width: 100%; height: auto; overflow: visible; }
.heros__bas { display: grid; gap: 18px; }
.heros__texte { display: grid; gap: 10px; justify-items: start; }
.heros__statut { font-weight: 700; color: var(--creme); }
.heros__accroche {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.35;
  font-weight: 600;
  text-wrap: balance;
}
.heros__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.heros__actions .btn:first-child { grid-column: 1 / -1; }

.heros__vitrine { display: none; }
@media (min-width: 1000px) {
  .heros { align-items: stretch; padding-bottom: clamp(28px, 5vh, 56px); }
  /* Trois vitrines séparées par un montant sombre, comme les baies de la façade : chaque vidéo verticale
     est affichée à peu près à sa taille réelle, donc nette (PROMPT-FINITIONS-DA.md § 4.3) */
  .heros__film { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: #120d0b; }
  .heros__vitrine { display: block; }
  .heros__film video { object-position: 50% 55%; }
  .heros__voile {
    background:
      radial-gradient(ellipse 72% 40% at 50% 50%, rgba(18, 13, 11, 0.86), rgba(18, 13, 11, 0) 82%),
      linear-gradient(180deg, rgba(18, 13, 11, 0.7) 0%, rgba(18, 13, 11, 0.32) 25%, rgba(18, 13, 11, 0.32) 60%, rgba(18, 13, 11, 0.92) 100%);
  }
  .heros__grille { grid-template-rows: 1fr auto; width: min(100% - 2 * var(--gouttiere), var(--largeur)); }
  .heros__logo { align-self: center; justify-self: center; width: min(100%, 1120px); }
  .heros__bas { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 40px; }
  .heros__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
}

/* L'enseigne s'allume au chargement, comme le néon du boulevard (PROMPT-COMPOSITION.md § 3.1).
   Les tubes éteints (.lg-eteint) sont visibles dès le début ; la lumière s'y allume par à-coups :
   la flamme prend en hésitant (0,1 s), BEST s'allume net (0,35 s), ISTANBUL hésite deux fois (0,6 s),
   GRILL une fois (1,15 s), les pylônes s'allument (1,2 s), puis les câbles le long du tube (1,3 à 2,1 s).
   Jamais plus de 3 baisses de lumière dans une même seconde. Le halo (filtre fixe) s'allume avec la
   lettre. La flamme vacille ensuite doucement, en pause quand le héros sort de l'écran (main.js § 5).
   Sans JS ou en « moins d'animations », l'enseigne est affichée allumée. */
@keyframes allume { 0% { opacity: 0; } 45% { opacity: 0.7; } 65% { opacity: 0.5; } 100% { opacity: 1; } }
@keyframes monte-lumiere { from { opacity: 0; } to { opacity: 1; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes neon-net { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }   /* allumé avant la fin : un arrondi du navigateur ne peut plus le laisser éteint */
@keyframes neon-prend { 0% { opacity: 0; } 25% { opacity: 0.9; } 45% { opacity: 0.15; } 65%, 100% { opacity: 1; } }
@keyframes neon-hesite-1 { 0% { opacity: 0; } 18% { opacity: 1; } 40% { opacity: 0.12; } 60%, 100% { opacity: 1; } }
@keyframes neon-hesite-2 { 0% { opacity: 0; } 12% { opacity: 1; } 24% { opacity: 0.12; } 40% { opacity: 1; } 52% { opacity: 0.15; } 68%, 100% { opacity: 1; } }
@keyframes vacille { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }
.js .heros__svg .lg-flamme { animation: neon-prend 0.4s steps(1, end) 0.1s both, vacille 2.4s ease-in-out 2.2s infinite; }
.js .heros__svg .lg-mot--1 { animation: neon-net 0.12s steps(1, end) 0.35s both; }
.js .heros__svg .lg-mot--2 { animation: neon-hesite-2 0.5s steps(1, end) 0.6s both; }
.js .heros__svg .lg-mot--3 { animation: neon-hesite-1 0.36s steps(1, end) 1.15s both; }
.js .heros__svg .lg-pylone { animation: neon-net 0.12s steps(1, end) 1.2s both; }
.js .heros__svg .lg-cable { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; animation: trace 0.8s var(--ease-neon) 1.3s both; }
.heros--hors .heros__svg .lg-flamme { animation-play-state: paused; }

@keyframes defile { to { transform: translateX(-50%); } }

/* Signatures : texte à gauche, piste de plats qui défile à droite */
.signatures { overflow: hidden; padding-block: var(--section); }

@media (min-width: 1024px) {
  
  
  .signatures__fenetre { min-width: 0; }
  
  
  
  .signatures--epinglee { padding-block: 0; }
  
  .signatures--epinglee .signatures__fenetre { overflow: hidden; padding-block: 40px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px); mask-image: linear-gradient(90deg, transparent 0, #000 90px); }
  
}

.citation { padding: 26px 28px; border-radius: var(--rayon-in); background: var(--nuit-2); border-left: 4px solid var(--laiton); }
.citation blockquote { margin: 0 0 14px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.45; font-weight: 600; }
.citation figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.85rem; color: var(--fumee); }

/* ---------- Accueil, refonte 10/2026 ---------- */
.tete-section { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(28px, 4vw, 48px); }

/* Les plats qu'on commande le plus : une grille visible d'un coup d'œil */
.vignettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
@media (min-width: 1000px) { .vignettes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; } }

/* La vitrine (PROMPT-FINITIONS-DA.md § 4.2) : le plat vedette en grand, le dessert en bande en bas.
   Téléphone : vedette et bande sur toute la largeur, les quatre autres en deux colonnes. */
.vignette--vedette, .vignette--bande { grid-column: 1 / -1; }
.vignette--vedette .vignette__photo { aspect-ratio: 4 / 3; }
.vignette--vedette .vignette__nom { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
.vignette--vedette a { position: relative; }
.vignette--vedette .vignette__prix { position: absolute; top: -12px; right: clamp(10px, 2vw, 22px); font-size: clamp(1.4rem, 2.4vw, 2.1rem); transform: rotate(-3deg); }   /* posée sur le coin de la photo, comme le 39 € du Duo */
.vignette--vedette .vignette__desc { display: block !important; font-size: 1rem; }
.vignette--bande a { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; column-gap: 18px; padding: 10px; border-radius: var(--rayon); background: var(--nuit-2); box-shadow: 0 0 0 1px var(--filet) inset; }   /* le dessert, en bande comme une ligne de la carte */
.vignette--bande .vignette__photo { grid-row: 1 / 3; aspect-ratio: 1; }
.vignette--bande .vignette__ligne { align-self: end; flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
.vignette--bande .vignette__desc { display: block !important; align-self: start; }
@media (min-width: 1000px) {
  .vignette--vedette { grid-column: 1 / 3; grid-row: 1 / 3; }
  .vignette--vedette a { height: 100%; grid-template-rows: minmax(0, 1fr) auto auto; }
  .vignette--vedette .vignette__photo { aspect-ratio: auto; min-height: 0; }
  .vignette--bande a { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 36px; padding: 14px; }
  .vignette--bande .vignette__photo { aspect-ratio: 21 / 9; }
  .vignette--bande .vignette__ligne { flex-direction: row; align-items: baseline !important; gap: 18px !important; }
  .vignette--bande .vignette__nom { font-size: clamp(1.5rem, 2.2vw, 2rem); }
}
.vignette a { display: grid; gap: 10px; }
.vignette__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rayon-in); background: var(--nuit-3); }
.vignette__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-sortie); }
@media (hover: hover) {
  .vignette a:hover .vignette__photo img { transform: scale(1.02); }
  .vignette a:hover .vignette__nom { color: var(--laiton); }
  .vignette__prix { transition: box-shadow 0.2s var(--ease); }
  .vignette a:hover .vignette__prix { box-shadow: 0 0 16px rgba(242, 232, 216, 0.5); }   /* C1 : l'étiquette s'allume */
}
.vignette__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vignette__nom { font-family: var(--f-titre); text-transform: uppercase; font-size: clamp(0.98rem, 1.6vw, 1.35rem); line-height: 1.1; transition: color 0.2s var(--ease); }
/* Le prix en étiquette, comme sur la carte imprimée : blanche, texte rouge, posée un peu de travers */
.vignette__prix { flex: none; padding: 5px 9px 4px; border-radius: 3px; background: var(--creme); color: var(--braise-fonce); font-family: var(--f-titre); text-transform: uppercase; font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1; white-space: nowrap; transform: rotate(-2deg); }
.vignette__desc { color: var(--fumee); font-size: 0.92rem; line-height: 1.4; }
@media (max-width: 520px) { .vignette__desc { display: none; } .vignette__ligne { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* Le Duo : la planche en grand, le prix en grand */
/* Le chemin de l'Adana : trois étapes reliées par le câble néon du pont (PROMPT-ANIMATIONS.md § 6).
   Téléphone : le câble descend le long du bord gauche. Ordinateur : il serpente entre photos et textes. */
.adana { background: #120d0b; overflow: hidden; }
.adana__corps { position: relative; }
.adana__cable { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke-linecap: round; }
.adana__cable-halo { stroke: rgba(242, 232, 216, 0.14); stroke-width: 10; }
.adana__cable-trait { stroke: #f2e8d8; stroke-width: 2.5; }
.js .adana__cable path { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
.adana__tete { position: relative; display: grid; gap: 14px; padding-bottom: clamp(40px, 6vw, 72px); }
.adana__etapes { list-style: none; margin: 0; padding: 0 0 0 36px; display: grid; gap: clamp(48px, 7vw, 96px); }
.adana__etape { display: grid; gap: 20px; }
.adana__photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--rayon-in); background: var(--nuit-2); }
.adana__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.adana__texte { position: relative; display: grid; gap: 10px; justify-items: start; }
.adana__texte > p { margin: 0; color: var(--creme-doux); max-width: 34ch; font-size: clamp(1rem, 1.3vw, 1.15rem); }
.adana__num { font-family: var(--f-titre); text-transform: uppercase; font-size: 1rem; color: var(--laiton) !important; letter-spacing: 0.04em; }
.adana__titre { font-family: var(--f-texte); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.08; margin: 0; }
.adana__texte .btns { margin-top: 10px; }

/* Les points d'attache du câble : éteints (contour), puis allumés avec un halo */
.adana__point { position: absolute; left: -36px; top: 0.3em; width: 12px; height: 12px; margin-left: 0; border-radius: 50%; background: #120d0b; box-shadow: 0 0 0 2.5px rgba(242, 232, 216, 0.4); }
.adana__point::after { content: ""; position: absolute; inset: -2.5px; border-radius: 50%; background: #f2e8d8; box-shadow: 0 0 12px 3px rgba(242, 232, 216, 0.5); opacity: 0; }
.adana__point--depart { left: 0; top: auto; bottom: 14px; }
.adana__point--fin { left: -36px; top: 50%; margin-top: -6px; }
.adana__point.allume::after { animation: allume 0.26s linear both; }

/* Le prix : l'étiquette de la carte (blanche, texte rouge), qui se pose quand le câble l'atteint */
.adana__prix { position: relative; display: inline-flex; align-items: baseline; gap: 10px; margin-top: 8px !important; padding: 8px 16px; border-radius: 4px; background: var(--creme); color: var(--nuit) !important; font-family: var(--f-titre); text-transform: uppercase; font-size: 1.05rem; transform: rotate(-2deg); }
.adana__prix strong { font-weight: 400; font-size: 1.6rem; color: var(--braise-fonce); }
@keyframes se-pose { from { opacity: 0; transform: translateY(-10px) rotate(-5deg); } to { opacity: 1; transform: rotate(-2deg); } }

/* États éteints / allumés (seulement avec JS ; sans JS ou en « moins d'animations », tout est allumé) */
.js .adana__etape .adana__num, .js .adana__etape .adana__titre, .js .adana__etape .adana__texte > p:not(.adana__prix) { opacity: 0.38; transition: opacity 0.4s var(--ease-neon); }
.js .adana__etape.allumee .adana__num, .js .adana__etape.allumee .adana__titre { animation: allume 0.26s linear both; opacity: 1; }
.js .adana__etape.allumee .adana__texte > p:not(.adana__prix) { opacity: 1; }
.js .adana__photo::after { content: ""; position: absolute; inset: 0; background: #120d0b; opacity: 0.6; transition: opacity 0.5s var(--ease-neon); }
.js .adana__etape.allumee .adana__photo::after { opacity: 0; }
.js .adana__prix { opacity: 0; }
.js .adana__prix.posee { animation: se-pose 0.28s var(--ease-neon) both; }
.js .adana__prix .adana__point { opacity: 1; }

@media (min-width: 900px) {
  .adana__tete > * { max-width: 640px; }
  .adana__etapes { padding-left: 0; }
  .adana__etape { grid-template-columns: minmax(0, 5fr) 170px minmax(0, 6fr); align-items: center; gap: 0; }
  .adana__photo { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; max-height: 72vh; }
  .adana__texte { grid-column: 3; grid-row: 1; }
  .adana__etape:nth-child(even) .adana__photo { grid-column: 3; }
  .adana__etape:nth-child(even) .adana__texte { grid-column: 1; justify-self: end; }
  /* Les points sont décalés vers le texte : le câble serpente d'une étape à l'autre */
  .adana__point { left: -44px; }
  .adana__etape:nth-child(even) .adana__point { left: auto; right: -44px; }
  .adana__point--depart { left: calc((100% - 170px) * 5 / 11 + 79px); }   /* au-dessus de l'allée entre photos et textes */
  .adana__point--fin { left: -30px; }
}

.duo-bloc { --fond-section: var(--nuit-2); background: var(--nuit-2); }
/* Le Duo : la planche en grand, le titre qui mord sur le bas de la photo (une bande de la couleur du
   fond qui entaille l'image), l'étiquette 39 € posée sur le coin (PROMPT-COMPOSITION.md § 3.3) */
.duo { display: grid; }
.duo__image { position: relative; width: min(100%, 1100px); }
.duo__photo { overflow: hidden; border-radius: var(--rayon-in); aspect-ratio: 4 / 3; }
.duo__photo img { width: 100%; height: 100%; object-fit: cover; }
.duo__prix { position: absolute; top: -16px; right: clamp(12px, 3vw, 36px); margin: 0; padding: 0.1em 0.24em 0.04em; border-radius: 6px; background: var(--creme); font-family: var(--f-titre); text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 0.95; color: var(--braise-fonce); white-space: nowrap; transform: rotate(-3deg); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6); }
.duo__titre { position: relative; justify-self: start; margin: -0.62em 0 0 !important; padding: 0.18em 0.5em 0 0; border-top-right-radius: var(--rayon-in); background: var(--fond-section, var(--nuit-2)); font-size: clamp(2.4rem, 6vw, 5.4rem) !important; }
.duo__bas { display: grid; gap: 24px; margin-top: clamp(18px, 2.6vw, 32px); }
.duo__texte { display: grid; gap: 18px; justify-items: start; align-content: start; }
.duo__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; width: 100%; margin: 0; padding: 18px 0; border-block: 1px solid var(--filet); }
@media (min-width: 1000px) {
  .duo__photo { aspect-ratio: 2 / 1; }
  .duo__bas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); max-width: 1100px; }
}
.duo__liste li { font-weight: 600; }

/* La maison : le texte et la vidéo du patron */
.maison__grille { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 960px) { .maison__grille { grid-template-columns: minmax(0, 1fr) 340px; } }
.maison__texte { display: grid; gap: 20px; justify-items: start; max-width: 60ch; }

/* En cuisine : les vidéos, sans compteur de vues */
.cuisine__item p { padding-inline: 0; color: var(--creme-doux); font-size: 0.98rem; }

/* Les avis, posés sur le vrai mur de briques de la salle */
.avis-mur { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(72px, 9vw, 128px); }
.avis-mur__fond { position: absolute; inset: 0; z-index: -1; }
.avis-mur__fond img { width: 100%; height: 100%; object-fit: cover; }
.avis-mur__fond::after { content: ""; position: absolute; inset: 0; background: rgba(23, 17, 14, 0.15); }
/* Un seul panneau sombre sur le mur, composé comme une page : la note, un avis en grand, deux plus
   courts (PROMPT-COMPOSITION.md § 3.6), au lieu de quatre boîtes pareilles */
.avis-mur__grille { display: grid; gap: 0; padding: clamp(8px, 1.4vw, 16px) clamp(22px, 3vw, 44px); border-radius: var(--rayon-in); background: var(--nuit); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.avis-mur__note, .avis-mur__avis { margin: 0; padding: clamp(20px, 2.4vw, 30px) 0; }
.avis-mur__avis { border-top: 1px solid var(--filet-fort); }
.avis-mur__grille > .avis-mur__avis:nth-child(2) blockquote { font-family: var(--f-titre); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.12; letter-spacing: -0.005em; }
@media (min-width: 1000px) {
  .avis-mur__grille { grid-template-columns: 0.8fr 1.5fr 1fr; column-gap: clamp(28px, 3.4vw, 56px); }
  .avis-mur__note { grid-row: 1 / 3; }
  .avis-mur__grille > .avis-mur__avis:nth-child(2) { grid-row: 1 / 3; border-top: 0; padding-left: clamp(28px, 3.4vw, 56px); border-left: 1px solid var(--filet-fort); }
  .avis-mur__grille > .avis-mur__avis:nth-child(3) { border-top: 0; }
}
.avis-mur__note { display: grid; gap: 10px; align-content: start; justify-items: start; }
.avis-mur__note h2 { margin: 0; font-family: var(--f-titre); text-transform: uppercase; font-weight: 400; font-size: 1.4rem; line-height: 1; }
.avis-mur__chiffre { display: block; font-size: 4.2rem; color: var(--laiton); margin-bottom: 4px; }
.avis-mur__note p { margin: 0; color: var(--creme-doux); }
.avis-mur__avis { display: grid; gap: 16px; align-content: space-between; }
.avis-mur__avis blockquote { margin: 0; font-size: 1.12rem; line-height: 1.45; font-weight: 500; }
.avis-mur__avis figcaption { color: var(--fumee); font-size: 0.9rem; }

/* Venir */
.venir__grille { display: grid; gap: clamp(28px, 5vw, 72px); align-items: stretch; }
@media (min-width: 960px) { .venir__grille { grid-template-columns: 1fr 0.9fr; } }
.venir__texte { display: grid; gap: 18px; align-content: start; }
.venir__statut { font-weight: 700; }
.venir__plan { border-radius: var(--rayon-in); overflow: hidden; min-height: 420px; }

/* ---------- 6. En-têtes des pages intérieures ---------- */
/* En-tête des pages intérieures : compact, le titre et l'essentiel tout de suite.
   Variante --briques : le vrai mur de la salle derrière, le texte posé sur un bloc plein. */
.entete-page {
  position: relative;
  padding: calc(var(--hauteur-nav) + clamp(40px, 6vw, 88px)) 0 clamp(36px, 5vw, 64px);
  overflow: hidden;
  isolation: isolate;
}
.entete-page__fond { display: none; }
.entete-page__contenu { display: grid; gap: 18px; justify-items: start; }
.entete-page__contenu .chapeau { max-width: 52ch; }
.entete-page--briques { padding-bottom: clamp(48px, 6vw, 88px); }
.entete-page--briques .entete-page__fond { display: block; position: absolute; inset: 0; z-index: -1; }
.entete-page--briques .entete-page__fond img { width: 100%; height: 100%; object-fit: cover; }
.entete-page--briques .entete-page__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 17, 14, 0.7) 0%, rgba(23, 17, 14, 0.12) 30%, rgba(23, 17, 14, 0.12) 80%, var(--nuit) 100%); }
.entete-page__bloc { display: grid; gap: 16px; justify-items: start; max-width: 760px; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--rayon-in); background: var(--nuit); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.9); }
.entete-page__bloc .fil { margin-bottom: 4px; }
/* En-tête « libre » (Histoire) : le titre posé directement sur le mur de briques, sans bloc */
.entete-page--libre { padding-top: calc(var(--hauteur-nav) + clamp(80px, 14vw, 200px)); }
.entete-page--libre .entete-page__fond::after { background: linear-gradient(180deg, rgba(23, 17, 14, 0.55) 0%, rgba(23, 17, 14, 0.35) 35%, rgba(23, 17, 14, 0.82) 78%, var(--nuit) 100%); }
.entete-page--libre .entete-page__bloc { padding: 0; background: none; box-shadow: none; max-width: 900px; }
.entete-page--libre .titre-xl { font-size: clamp(2.8rem, 7vw, 6.4rem); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }
.entete-page--libre .chapeau { color: var(--creme); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7); }
/* Fil d'Ariane posé directement sur les briques : plus clair, avec une ombre, pour rester lisible */
.entete-page--libre .fil { width: fit-content; padding: 6px 12px; border-radius: 6px; background: rgba(16, 11, 9, 0.78); }
.entete-page--libre .fil, .entete-page--libre .fil a { color: var(--creme); }

/* Page Contact */
.contact__grille { display: grid; gap: clamp(36px, 5vw, 80px); }
@media (min-width: 960px) { .contact__grille { grid-template-columns: 1.1fr 0.9fr; } }
.contact__coord { display: grid; gap: 0; }
.contact__ligne { display: grid; gap: 10px; justify-items: start; padding: 24px 0; border-top: 1px solid var(--filet); }
.contact__ligne:first-child { border-top: 0; padding-top: 0; }
.contact__ligne h2 { margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--laiton); }
.contact__ligne p { margin: 0; color: var(--creme-doux); }
/* Les réseaux du restaurant (seulement ceux qui existent : Instagram et la fiche Google, vérifiés le 30/10/2026) */
.contact__reseaux { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.contact__reseaux a { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--rayon-in); box-shadow: 0 0 0 1px var(--filet-fort) inset; transition: box-shadow 0.2s var(--ease); }
.contact__reseaux a:hover { box-shadow: 0 0 0 2px var(--laiton) inset, 0 0 16px rgba(242, 181, 68, 0.25); }
.contact__reseaux strong { font-family: var(--f-titre); text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; }
.contact__reseaux span { color: var(--fumee); font-size: 0.92rem; }
.contact__grand { font-family: var(--f-titre); text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1; white-space: nowrap; }
.contact__grand:hover { color: var(--laiton); }
.contact__adresse { font-size: 1.25rem; font-weight: 700; color: var(--creme) !important; }
.contact__horaires { display: grid; gap: 16px; align-content: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--rayon-in); background: var(--nuit-2); }
.contact__plan { min-height: clamp(320px, 42vw, 520px); border-radius: var(--rayon-in); overflow: hidden; }

/* Menu du téléphone : deux boutons en bas */
.menu-mobile__pied .btn { width: 100%; }
.fil { display: flex; gap: 10px; font-size: 0.82rem; color: var(--fumee); }
.fil a:hover { color: var(--creme); }
.fil span[aria-hidden] { color: var(--laiton); }

/* ---------- 7. La carte ---------- */
.carte-outils {
  position: sticky;
  top: calc(var(--hauteur-nav) + 14px);
  z-index: 40;
  margin-bottom: clamp(40px, 6vw, 72px);
  transition: top 0.7s var(--ease);
}
.nav--cachee ~ main .carte-outils { top: 14px; }
.carte-outils__ilot {
  display: flex; align-items: center; gap: 8px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(23, 17, 14, 0.96);
  box-shadow: 0 0 0 1px var(--filet) inset, 0 20px 40px -24px #000;
}
.carte-cats { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.carte-cats::-webkit-scrollbar { display: none; }
.carte-cats a {
  flex: none;
  padding: 10px 16px; border-radius: 6px;
  font-size: 0.92rem; font-weight: 600; color: var(--creme-doux); white-space: nowrap;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.carte-cats a:hover { color: var(--creme); }
.carte-cats a.actif { background: var(--braise); color: #fff; animation: allume 0.26s linear both; }
.carte-recherche { position: relative; flex: none; }
.carte-recherche input {
  width: 46px; height: 46px;
  padding: 0 0 0 44px;
  border: 0; border-radius: 6px;
  background: rgba(246, 238, 223, 0.07);
  outline: none;
  transition: width 0.6s var(--ease), background-color 0.4s var(--ease);
  cursor: pointer;
}
.carte-recherche input:focus, .carte-recherche input:not(:placeholder-shown) { width: min(260px, 52vw); cursor: text; background: rgba(243, 233, 218, 0.12); }
.carte-recherche input::placeholder { color: var(--fumee); }
.carte-recherche .ico { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; color: var(--creme-doux); }
.carte-recherche input:focus-visible { outline: 2px solid var(--laiton); outline-offset: 2px; }

.rubrique { scroll-margin-top: calc(var(--hauteur-nav) + 110px); padding-block: clamp(48px, 6vw, 84px); border-top: 1px solid var(--filet); }
.rubrique__entete { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 52px); }
.rubrique__entete .titre-l { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }

.rubrique__note { color: var(--fumee); max-width: 60ch; }
/* B4 : le titre de rubrique sur une bande rouge, comme sur la carte imprimée ; la bande s'allume à son arrivée */
.rubrique__entete .titre-l, .vedette__haut .titre-l { position: relative; isolation: isolate; width: fit-content; padding: 0.16em 0.34em 0.08em; }
.rubrique__entete .titre-l::before, .vedette__haut .titre-l::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px; background: var(--braise); }
.js .rubrique__entete .titre-l::before, .js .vedette__haut .titre-l::before { opacity: 0; }
.js .allumee .titre-l::before { animation: allume 0.26s linear both; }
/* C1 : au survol, la photo de la rubrique grossit à peine */
.rubrique__photo img { transition: transform 0.6s var(--ease-sortie); }
@media (hover: hover) { .rubrique__photo:hover img { transform: scale(1.02); } }
.rubrique__corps { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1000px) { .rubrique__corps--photo { grid-template-columns: 0.8fr 1.2fr; align-items: start; } .rubrique__photo { position: sticky; top: calc(var(--hauteur-nav) + 110px); } }
.rubrique__photo .cadre { aspect-ratio: 4 / 5; }
/* Carte sur téléphone (ouverte par les QR codes des tables et le NFC) : les plats d'abord.
   En-tête resserré sans le bouton Appeler (déjà dans la barre du bas) ni le fil d'Ariane,
   photo de chaque rubrique en bandeau, après la liste. */
@media (max-width: 999px) {
  .entete-page--carte { padding-top: calc(var(--hauteur-nav) + 20px); padding-bottom: 20px; }
  .entete-page--carte .entete-page__bloc { gap: 8px; padding: 18px 20px; }
  .entete-page--carte .titre-xxl { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .entete-page--carte .fil, .entete-page--carte .btns { display: none; }
  .entete-page--carte .chapeau { font-size: 0.98rem; }
  .carte-outils { margin-bottom: 8px; }
  .rubrique { padding-block: 28px; }
  .rubrique__entete { margin-bottom: 20px; }
  .rubrique__corps--photo .rubrique__photo { order: 2; }
  .rubrique__corps--photo .rubrique__photo .cadre { aspect-ratio: 16 / 9; }
}

.plats { display: grid; column-gap: 56px; }
@media (min-width: 760px) { .plats--2 { grid-template-columns: 1fr 1fr; } }
/* Rubrique sans photo (burgers) : la liste garde la largeur des autres, pas de pointillés d'un bord à l'autre */
.plats--seule { max-width: 780px; }
.plat { padding: 20px 0; border-bottom: 1px dashed var(--filet-fort); display: grid; gap: 6px; }
.plat__ligne { display: flex; align-items: baseline; gap: 12px; }
.plat__nom { font-family: var(--f-titre); text-transform: uppercase; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.1; }
.plat__points { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(242, 181, 68, 0.35); transform: translateY(-6px); }
.plat__prix { font-family: var(--f-titre); text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--laiton); font-size: clamp(1.05rem, 1.5vw, 1.3rem); white-space: nowrap; }
.plat__prix small { font-family: var(--f-texte); color: var(--fumee); font-weight: 600; font-size: 0.78rem; margin-right: 4px; }
.plat__desc { color: var(--fumee); font-size: 0.95rem; margin: 0; }
.plat__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.plat[hidden], .rubrique[hidden] { display: none; }
.carte-vide { text-align: center; padding: 80px 0; color: var(--fumee); }
.carte-vide strong { display: block; font-family: var(--f-titre); text-transform: uppercase; font-size: 2.2rem; color: var(--creme); font-weight: 400; margin-bottom: 8px; }

/* Encadré mis en avant (Duo, formule) */
.vedette {
  display: grid; gap: 28px;
  padding: clamp(26px, 4vw, 48px);
  border-radius: var(--rayon-in);
  background: var(--nuit-2);
  border-left: 4px solid var(--laiton);
}
.vedette__haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.vedette__prix { padding: 0.1em 0.24em 0.04em; border-radius: 6px; background: var(--creme); font-family: var(--f-titre); text-transform: uppercase; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 0.95; color: var(--braise-fonce); transform: rotate(-2deg); }
.vedette ul { display: flex; flex-wrap: wrap; gap: 8px; }

.mentions-carte { margin-top: clamp(48px, 6vw, 80px); padding: 28px; border-radius: var(--rayon-in); background: var(--nuit-2); box-shadow: 0 0 0 1px var(--filet) inset; display: grid; gap: 10px; font-size: 0.9rem; color: var(--fumee); }

/* ---------- 8. Galerie ---------- */
.filtres { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 56px); }
.filtres button {
  padding: 11px 18px; border-radius: 6px;
  font-size: 0.95rem; font-weight: 600; color: var(--creme-doux);
  box-shadow: 0 0 0 1px var(--filet-fort) inset;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.filtres button:hover { color: var(--creme); }
.filtres button[aria-pressed="true"] { background: var(--braise); color: #fff; box-shadow: none; }
.filtres button sup { font-size: 0.65em; margin-left: 4px; opacity: 0.6; vertical-align: 0.6em; }

.mur { columns: 1; column-gap: 14px; }
@media (min-width: 620px) { .mur { columns: 2; } }
@media (min-width: 1000px) { .mur { columns: 3; column-gap: 18px; } }
.mur__item { break-inside: avoid; margin-bottom: 14px; }
@media (min-width: 1000px) { .mur__item { margin-bottom: 18px; } }
.mur__item[hidden] { display: none; }
.mur__bouton { display: block; width: 100%; text-align: left; border-radius: var(--rayon-in); }
.mur__bouton .cadre__in { aspect-ratio: auto; }
.mur__bouton img { width: 100%; height: auto; }
.mur__legende { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; display: flex; justify-content: space-between; align-items: end; gap: 12px; background: linear-gradient(transparent, rgba(14, 11, 9, 0.85)); opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.mur__legende strong { font-family: var(--f-titre); text-transform: uppercase; font-size: 1.05rem; font-weight: 400; line-height: 1.1; }
.mur__legende .ico { width: 20px; height: 20px; color: var(--laiton); }
@media (hover: hover) { .mur__bouton:hover .mur__legende, .mur__bouton:focus-visible .mur__legende { opacity: 1; transform: none; } }
@media (hover: none) { .mur__legende { opacity: 1; transform: none; padding-top: 30px; } .mur__legende strong { font-size: 1.15rem; } }

.visionneuse {
  position: fixed; inset: 0; z-index: 120;
  display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(8, 6, 5, 0.95);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s;
}
.visionneuse[data-ouverte="true"] { opacity: 1; visibility: visible; transition: opacity 0.25s var(--ease); }
/* Pendant que la photo retourne dans sa vignette, le haut et le bas s'effacent */
.visionneuse__haut, .visionneuse__bas { transition: opacity 0.2s linear; }
.visionneuse.se-ferme .visionneuse__haut, .visionneuse.se-ferme .visionneuse__bas { opacity: 0; }
.visionneuse__haut { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--gouttiere); font-size: 0.85rem; color: var(--fumee); }
.visionneuse__scene { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 0 var(--gouttiere); min-height: 0; touch-action: pan-y; }   /* une seule case de taille fixe : la photo y tient toujours entière */
.visionneuse__scene img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--rayon-in); transition: opacity 0.35s var(--ease), transform 0.5s var(--ease); }
.visionneuse__scene img.change { opacity: 0; transform: scale(0.98); }
.visionneuse__bas { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px var(--gouttiere) calc(18px + env(safe-area-inset-bottom)); }
.visionneuse__titre { font-family: var(--f-titre); text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2rem); }
.rond {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(243, 233, 218, 0.08);
  box-shadow: 0 0 0 1px var(--filet) inset;
  transition: background-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.rond:hover { background: rgba(243, 233, 218, 0.16); }
.rond:active { transform: scale(0.94); }
.rond .ico { width: 20px; height: 20px; }
.visionneuse__nav { display: flex; gap: 8px; }

/* ---------- 9. Histoire ---------- */
.chapitre { display: grid; gap: 24px; max-width: 760px; }
.prose { display: grid; gap: 26px; font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.7; color: var(--creme-doux); max-width: 62ch; }
.prose strong { color: var(--creme); font-weight: 700; }

.villes { display: grid; gap: 14px; }
@media (min-width: 900px) { .villes { grid-template-columns: repeat(3, 1fr); } }
.ville { display: grid; grid-template-rows: auto 1fr; }
.ville .cadre { aspect-ratio: 3 / 3.6; }
.ville__texte { display: grid; gap: 10px; padding: 26px 8px 0; align-content: start; }

.ville h3 { font-family: var(--f-titre); text-transform: uppercase; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.05; }
.ville p { color: var(--fumee); margin: 0; font-size: 0.98rem; }

/* La salle : la porte cachée et la banquette, côte à côte */
/* B6 : la salle en profondeur, le mur de briques derrière les deux photos (main.js § 6) */
.salle { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 8vw, 128px); }
.salle__fond { position: absolute; inset: -8% 0; z-index: -1; }
.salle__fond img { width: 100%; height: 100%; object-fit: cover; }
.salle__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--nuit) 0%, rgba(23, 17, 14, 0.78) 26%, rgba(23, 17, 14, 0.78) 74%, var(--nuit) 100%); }
.salle .salle-duo__photo img { box-shadow: 0 0 0 1px rgba(246, 238, 223, 0.14), 0 40px 60px -30px rgba(0, 0, 0, 0.95); }
.salle .salle-duo__photo figcaption { color: var(--creme); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.salle-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
@media (min-width: 1024px) { .salle-duo { width: min(100% - 2 * var(--gouttiere), 1080px); align-items: start; } .salle-duo__photo:nth-child(2) { margin-top: 14vh; } }
.salle-duo__photo { margin: 0; display: grid; gap: 10px; }
.salle-duo__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon-in); }
.salle-duo__photo figcaption { color: var(--fumee); font-size: 0.92rem; }
.photo-large { position: relative; }
.photo-large .cadre { aspect-ratio: 16 / 8; }
@media (max-width: 700px) { .photo-large .cadre { aspect-ratio: 4 / 5; } }

/* ---------- 10. Avis ---------- */
.avis-resume { display: grid; gap: 28px; align-items: center; }
.avis-resume .avis-mur__note { background: var(--nuit-2); box-shadow: none; }
.avis-resume__mots { margin: 0; }
@media (min-width: 980px) { .avis-resume { grid-template-columns: 1fr 1fr; } }

.theme__barre { grid-column: 1 / -1; height: 2px; border-radius: 2px; background: var(--filet); overflow: hidden; }
.theme__barre span { display: block; height: 100%; background: linear-gradient(90deg, var(--braise), var(--laiton)); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform 1.6s var(--ease-sortie); }
.theme__barre:not(.vu) span { transform: scaleX(0); }

.mur-avis { columns: 1; column-gap: 14px; }
@media (min-width: 700px) { .mur-avis { columns: 2; } }
@media (min-width: 1100px) { .mur-avis { columns: 3; } }
.mur-avis .citation { break-inside: avoid; margin-bottom: 14px; display: block; }
.citation--grande blockquote { font-size: clamp(1.25rem, 2vw, 1.6rem); }

.appel-avis { display: grid; gap: 24px; padding: clamp(28px, 4vw, 52px); border-radius: var(--rayon-in); background: var(--nuit-2); border-top: 4px solid var(--braise); }
@media (min-width: 900px) { .appel-avis { grid-template-columns: 1fr auto; align-items: center; } }

.horaires { display: grid; }
.horaires li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--filet); font-variant-numeric: tabular-nums; }
.horaires li:last-child { border-bottom: 0; }
.horaires li.aujourdhui { color: var(--creme); font-weight: 500; }
.horaires li.aujourdhui { color: var(--laiton); font-weight: 700; }
.horaires li.aujourdhui span:last-child { color: var(--laiton); }
.horaires li span:last-child { color: var(--creme-doux); }
.horaires li.ferme span:last-child { color: var(--fumee); }

.carte-plan { position: relative; min-height: 340px; display: grid; place-items: end center; text-align: center; background: var(--nuit-2); }
.carte-plan__apercu { position: absolute; inset: 0; }
.carte-plan__apercu img { width: 100%; height: 100%; object-fit: cover; }
.carte-plan__apercu::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 17, 14, 0) 40%, rgba(23, 17, 14, 0.85) 100%); }
.carte-plan__action { position: relative; display: grid; gap: 16px; justify-items: center; padding: 24px; }
.carte-plan__action .petit { padding: 6px 12px; border-radius: 6px; background: rgba(16, 11, 9, 0.78); color: var(--creme); }
.carte-plan iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.15) contrast(1.05); }

.pied { position: relative; padding: clamp(48px, 6vw, 80px) 0 calc(36px + 76px); background: #100b09; border-top: 1px solid var(--filet); overflow: hidden; }
@media (min-width: 900px) { .pied { padding-bottom: 36px; } }
/* Pages sans barre d'actions (la carte) : pas de place à lui réserver */
body:not(:has(.barre-mobile)) .pied { padding-bottom: 36px; }

.pied__colonnes { display: grid; gap: 40px; padding-block: 56px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pied__colonnes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pied__colonnes { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.pied h2 { font-size: 0.95rem; color: var(--laiton); font-weight: 700; margin-bottom: 14px; font-family: var(--f-texte); }
.pied__logo { margin: 0 0 16px; }
.pied__logo img { display: block; width: min(100%, 300px); height: auto; }
.pied__liste { display: grid; gap: 10px; color: var(--creme-doux); }
.pied__liste a { transition: color 0.3s var(--ease); }
.pied__liste a:hover { color: var(--creme); }

.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 28px; font-size: 0.85rem; color: var(--fumee); }
.pied__bas a:hover { color: var(--creme); }

/* Pages légales */
.texte-legal { max-width: 760px; display: grid; gap: 40px; color: var(--creme-doux); }
.texte-legal h2 { font-family: var(--f-titre); text-transform: uppercase; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.1; margin-bottom: 12px; color: var(--laiton); }
.texte-legal a { text-decoration: underline; text-decoration-color: var(--laiton); text-underline-offset: 3px; }
.a-completer { color: var(--braise); font-weight: 500; }

/* Photo en fond de section, assombrie pour garder le texte lisible */
.section--photo { position: relative; isolation: isolate; overflow: hidden; }

/* ---------- Vidéos ---------- */
/* Vidéo du restaurant, avec le son */
.film__grille { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }

.film__lecteur { justify-self: center; width: min(100%, 380px); }
.film__cadre { aspect-ratio: 9 / 16; }
.film__cadre video { width: 100%; height: 100%; object-fit: cover; background: var(--nuit-3); }
.film__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px;
  padding-bottom: 10%;
  background: linear-gradient(180deg, transparent 50%, rgba(23, 17, 14, 0.8));
  color: var(--creme); font-size: 0.95rem; font-weight: 600;
  transition: opacity 0.4s var(--ease);
}
.film__play-rond {
  display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--braise); color: #fff;
  transition: background-color 0.2s var(--ease);
}
.film__play-rond .ico { width: 30px; height: 30px; margin-left: 4px; }
.film__play:hover .film__play-rond { background: var(--braise-fonce); }
.film--lecture .film__play { opacity: 0; pointer-events: none; }

/* Boucles « En cuisine » */
.cuisine__grille { display: grid; gap: 14px; grid-auto-flow: column; grid-auto-columns: min(72vw, 320px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; margin-inline: calc(var(--gouttiere) * -1); padding-inline: var(--gouttiere); scroll-padding-inline: var(--gouttiere); }
.cuisine__grille::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .cuisine__grille { grid-auto-flow: row; grid-template-columns: 1.3fr 1fr 1fr; align-items: start; gap: clamp(16px, 2.4vw, 32px); overflow: visible; margin-inline: 0; padding-inline: 0; }
  /* Trois vidéos de tailles et de hauteurs différentes, au lieu de trois cadres alignés */
  .cuisine__item:nth-child(2) { margin-top: clamp(48px, 7vw, 110px); }
  .cuisine__item:nth-child(3) { margin-top: clamp(20px, 3vw, 44px); }
}
.cuisine__item { scroll-snap-align: start; display: grid; gap: 18px; align-content: start; }
.cuisine__item .cadre { aspect-ratio: 9 / 16; }
.cuisine__item video { width: 100%; height: 100%; object-fit: cover; }

.cuisine__item p { margin: 0; padding-inline: 6px; color: var(--fumee); font-size: 0.95rem; }

/* ---------- 11 ter. Sections « jour » : le crème de la façade (PROMPT-COMPOSITION.md § 3.2) ----------
   L'accueil alterne la nuit du néon et le jour de la façade. Les couleurs de texte, les filets et les
   boutons « verre » s'inversent ; les étiquettes de prix restent celles de la carte, blanches. */
.section--jour {
  --fond-section: var(--jour);
  --creme-doux: rgba(23, 17, 14, 0.8);
  --fumee: #5f4f42;
  --filet: rgba(23, 17, 14, 0.14);
  --filet-fort: rgba(23, 17, 14, 0.3);
  background: var(--jour);
  color: var(--nuit);
}
.section--jour .lien-fleche { color: var(--nuit); }
.section--jour .lien-fleche:hover, .section--jour .lien-fleche .ico { color: var(--braise-fonce); }
.section--jour .btn--verre { background: transparent; color: var(--nuit); box-shadow: 0 0 0 2px var(--filet-fort) inset; }
.section--jour .btn--verre:hover { box-shadow: 0 0 0 2px var(--nuit) inset; }
.section--jour .vignette__prix, .section--jour .duo__prix { background: #fffaf3; box-shadow: 0 0 0 1px rgba(23, 17, 14, 0.12), 0 6px 14px -8px rgba(23, 17, 14, 0.5); }
@media (hover: hover) { .section--jour .vignette a:hover .vignette__nom { color: var(--braise-fonce); } .section--jour .vignette a:hover .vignette__prix { box-shadow: 0 0 0 2px var(--braise-fonce); } }
.section--jour .vignette--bande a { background: #e6d6bf; box-shadow: none; }
.section--jour .vignette__photo, .section--jour .cadre__in { background: #e0cfb6; }
.section--jour :focus-visible { outline-color: var(--braise-fonce); }

/* ---------- 11 bis. D1 : la bande rouge entre deux pages (PROMPT-ANIMATIONS.md § 6) ----------
   Transition entre pages du navigateur (View Transitions) : l'ancienne page part vers la droite, la
   nouvelle arrive juste derrière, et la bande rouge de la carte passe dans l'espace entre les deux
   (400 ms en tout). Le menu et la barre du téléphone ne bougent pas. Les navigateurs qui ne connaissent
   pas cette fonction changent de page normalement ; rien en « moins d'animations ». */
@view-transition { navigation: auto; }
.nav { view-transition-name: nav; }
.barre-mobile { view-transition-name: barre; }
::view-transition { background: var(--braise); }
::view-transition-group(nav), ::view-transition-group(barre) { animation: none; }
::view-transition-old(root) { animation: 0.34s cubic-bezier(0.45, 0, 0.25, 1) both sort-a-droite; }
::view-transition-new(root) { animation: 0.34s cubic-bezier(0.45, 0, 0.25, 1) 0.06s both entre-par-la-gauche; }
@keyframes sort-a-droite { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes entre-par-la-gauche { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- 12. Apparitions, accessibilité ---------- */
/* Plus de fondu qui monte générique : le texte s'affiche tel quel. Les photos chargées à l'approche
   font seulement un fondu de 200 ms quand elles arrivent, pour ne pas surgir d'un coup (main.js § 4). */
@keyframes apparait { from { opacity: 0; } }

/* B5 : les étiquettes de prix se posent quand la grille arrive à l'écran (main.js § 4), de gauche à droite */
.js [data-etiquettes] .vignette__prix, .js .duo__prix { opacity: 0; }
.js [data-etiquettes] .vignette__prix.posee, .js .duo__prix.posee { animation: se-pose 0.28s var(--ease-neon) both; animation-delay: var(--retard, 0s); }

/* A4 : la flamme du logo du menu s'allume au chargement */
.js .logo__flamme { animation: monte-lumiere 0.26s linear 0.1s both; }

/* B7 : sur la photo de la façade, la nuit tombe et l'enseigne rougeoie quand on arrive à « Venir » (main.js § 6) */
.carte-plan__nuit, .carte-plan__lueur { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.carte-plan__nuit { background: #120d0b; opacity: 0; }
.carte-plan__lueur { background: radial-gradient(ellipse 90% 55% at 50% 22%, rgba(239, 43, 57, 0.42), rgba(239, 43, 57, 0) 72%); opacity: 0; }
.carte-plan__apercu img { position: relative; z-index: 0; }
.js img.en-charge { opacity: 0; }
.js img.arrivee { animation: apparait 0.2s linear; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .js .heros__svg .lg-flamme, .js .heros__svg .lg-mot, .js .heros__svg .lg-pylone, .js .heros__svg .lg-cable { animation: none; }
  .js .heros__svg .lg-cable { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .adana__etape .adana__num, .js .adana__etape .adana__titre, .js .adana__etape .adana__texte > p, .js .adana__prix { opacity: 1; animation: none; }
  .js .adana__photo::after { opacity: 0; }
  .js .adana__cable path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .adana__point::after { opacity: 1; animation: none; }
  .js [data-etiquettes] .vignette__prix, .js .duo__prix, .js .logo__flamme { opacity: 1; animation: none; }
  .carte-plan__lueur { opacity: 1; }
  .js .rubrique__entete .titre-l::before, .js .vedette__haut .titre-l::before { opacity: 1; animation: none; }
}

/* Petits écrans : sécurité anti-débordement */
@media (max-width: 420px) {
  .btn { --h: 56px; padding-left: 22px; }
}