/* Accueil : la maquette V3 « le comptoir », reprise telle quelle par
   generer-accueil.py. Les polices sont servies par assets/polices.css.
   NE PAS EDITER A LA MAIN : la source est
   03-site-web/maquettes/site-v3/, produite par build-site-v3.py. */

/* =============================================================
   LA TABLE DES COPAINS — Design System
   tokens.css · source unique de vérité des décisions graphiques
   Agence PTL · v1.0 · 2026-09-25
   -------------------------------------------------------------
   Ce fichier est importé tel quel par :
     - la planche de charte (design-system.html)
     - la carte 4 pages (carte-4-pages.html)
     - l'affiche vitrine A3 (affiche-a3-vitrine.html)
   Toute modification de couleur, de graisse ou d'échelle se fait
   ICI et se propage à l'ensemble des supports.
   ============================================================= */

:root {
  /* ---------- 1. COULEURS ---------- */

  /* Primaires — issues du logo */
  --c-noir:        #101010;  /* Noir Ardoise — encre principale, aplats */
  --c-noir-pur:    #000000;  /* réservé au verrou logo v2 */
  --c-creme:       #D2B58D;  /* Crème Dorée — couleur de marque (échantillonnée sur le logo) */

  /* Fonds */
  --c-papier:      #F7F2EA;  /* Blanc Chaud — fond des supports clairs */
  --c-papier-2:    #EFE7DA;  /* Sable — fond des encarts, alternance de lignes */

  /* Texte */
  --c-texte:       #1A1A1A;  /* texte courant sur fond clair */
  --c-texte-clair: #F7F2EA;  /* texte courant sur fond noir */
  --c-fumee:       #66625C;  /* Gris Fumée — descriptions, mentions (AA sur papier ET sable) */
  --c-fumee-clair: #A9A199;  /* descriptions sur fond noir */

  /* Fonctionnelles — usage strictement limité aux signaux */
  --c-brique:      #A64530;  /* Brique — Happy Hour, nouveautés, prix mis en avant */
  --c-vert:        #2E4A3D;  /* Vert Bouteille — picto végétarien, bio */

  /* Filets */
  --c-filet:       rgba(16,16,16,.18);
  --c-filet-fort:  rgba(16,16,16,.42);
  --c-filet-sombre:rgba(210,181,141,.28);

  /* ---------- 2. TYPOGRAPHIE ---------- */
  --f-display: "Archivo Black", "Arial Black", sans-serif; /* titres, sections, prix vedette */
  --f-texte:   "Archivo", "Helvetica Neue", Arial, sans-serif; /* tout le reste */
  --f-script:  "Sacramento", cursive; /* accents manuscrits — mots isolés uniquement */

  /* Échelle typographique (base print = mm/pt, on raisonne en pt) */
  --t-xxl: 46pt;  /* titre d'affiche */
  --t-xl:  26pt;  /* titre de page */
  --t-l:   13pt;  /* titre de section */
  --t-m:   10pt;  /* sous-section, intertitre */
  --t-s:   8.5pt; /* nom de plat, prix */
  --t-xs:  6.8pt; /* description */
  --t-xxs: 6.1pt; /* mentions légales, légendes */

  --lh-serre:  1.12;
  --lh-normal: 1.26;
  --lh-aere:   1.50;

  --ls-titre:  .085em; /* interlettrage des capitales display */
  --ls-sur:    .22em;  /* surtitres, labels */

  /* ---------- 3. ESPACEMENTS (échelle 4) ---------- */
  --e-1: 1mm;
  --e-2: 2mm;
  --e-3: 3mm;
  --e-4: 4mm;
  --e-6: 6mm;
  --e-8: 8mm;
  --e-12: 12mm;

  /* ---------- 4. GRILLE ---------- */
  --marge-a4:  11mm;
  --marge-a3:  14mm;
  --gouttiere: 7mm;
}

/* =============================================================
   RESET MINIMAL
   ============================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
  font-family: var(--f-texte);
  color: var(--c-texte);
  background: var(--c-papier);
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

/* =============================================================
   COMPOSANTS — nommage b-* (bloc) / u-* (utilitaire)
   ============================================================= */

/* ---- Bandeau de section ------------------------------------ */
.b-section {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  margin: var(--e-6) 0 var(--e-3);
  break-after: avoid;
}
.b-section:first-child { margin-top: 0; }
.b-section__titre {
  font-family: var(--f-display);
  font-size: var(--t-l);
  line-height: var(--lh-serre);
  letter-spacing: var(--ls-titre);
  text-transform: uppercase;
  white-space: nowrap;
}
.b-section__note {
  font-size: var(--t-xxs);
  color: var(--c-fumee);
  font-style: italic;
  white-space: nowrap;
}
.b-section__filet { flex: 1; height: 2px; background: var(--c-noir); align-self: center; }

/* variante sur fond noir */
.u-sombre .b-section__filet { background: var(--c-creme); }
.u-sombre .b-section__titre { color: var(--c-creme); }
.u-sombre .b-section__note  { color: var(--c-fumee-clair); }

/* ---- Sous-section ------------------------------------------ */
.b-sous {
  font-family: var(--f-texte);
  font-weight: 700;
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-sur);
  text-transform: uppercase;
  color: var(--c-brique);
  margin: var(--e-3) 0 var(--e-1);
  break-after: avoid;
}

/* ---- Ligne de plat ----------------------------------------- */
.b-plat { margin-bottom: var(--e-2); break-inside: avoid; }
.b-plat__tete {
  display: flex;
  align-items: baseline;
  gap: 1.6mm;
}
.b-plat__nom {
  font-weight: 600;
  font-size: var(--t-s);
  line-height: var(--lh-serre);
}
.b-plat__points {
  flex: 1;
  border-bottom: 1px dotted var(--c-filet);
  transform: translateY(-1px);
  min-width: 3mm;
}
.b-plat__prix {
  font-weight: 600;
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.b-plat__desc {
  font-size: var(--t-xs);
  color: var(--c-fumee);
  line-height: var(--lh-normal);
  margin-top: .3mm;
}
.u-sombre .b-plat__desc { color: var(--c-fumee-clair); }
.u-sombre .b-plat__points { border-bottom-color: var(--c-filet-sombre); }

/* Prix multiples (petite faim / grande faim, simple / double) */
.b-plat__prix--duo { display: inline-flex; gap: 2.6mm; }
.b-plat__prix--duo span { font-variant-numeric: tabular-nums; }
.b-plat__prix--duo i {
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-xxs);
  color: var(--c-fumee);
  margin-right: .6mm;
}
.u-sombre .b-plat__prix--duo i { color: var(--c-fumee-clair); }

/* ---- Tableau de formats (bières, vins, spiritueux) --------- */
.b-tarifs { width: 100%; border-collapse: collapse; }
.b-tarifs th {
  font-size: var(--t-xxs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-fumee);
  text-align: right;
  padding: 0 0 1mm;
  white-space: nowrap;
}
.b-tarifs th:first-child { text-align: left; }
.b-tarifs td {
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 1.1mm 0;
  border-top: 1px solid var(--c-filet);
  white-space: nowrap;
}
.b-tarifs td:first-child {
  text-align: left;
  font-weight: 600;
  width: 99%;
  white-space: normal;
}
.b-tarifs td + td { padding-left: 3mm; }
.b-tarifs .u-hh { color: var(--c-brique); font-weight: 600; }
.u-sombre .b-tarifs td { border-top-color: var(--c-filet-sombre); }
.u-sombre .b-tarifs th { color: var(--c-fumee-clair); }
.u-sombre .b-tarifs .u-hh { color: var(--c-creme); }
.b-tarifs__deg {
  font-weight: 400;
  font-size: var(--t-xxs);
  color: var(--c-fumee);
  margin-left: 1.4mm;
}
.u-sombre .b-tarifs__deg { color: var(--c-fumee-clair); }

/* ---- Encart (formules, happy hour, info) ------------------- */
.b-encart {
  border: 1.6px solid var(--c-noir);
  padding: var(--e-3) var(--e-3);
  margin-bottom: var(--e-3);
  break-inside: avoid;
}
.b-encart--plein { background: var(--c-noir); color: var(--c-texte-clair); border-color: var(--c-noir); }
.b-encart--creme { background: var(--c-creme); border-color: var(--c-creme); }
.b-encart__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.b-encart__titre {
  font-family: var(--f-display);
  font-size: var(--t-m);
  letter-spacing: var(--ls-titre);
  text-transform: uppercase;
  line-height: var(--lh-serre);
}
.b-encart__prix {
  font-family: var(--f-display);
  font-size: var(--t-m);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.b-encart--plein .b-encart__prix { color: var(--c-creme); }
.b-encart__corps { font-size: var(--t-xs); margin-top: 1.4mm; line-height: var(--lh-normal); }
.b-encart--plein .b-encart__corps { color: var(--c-fumee-clair); }
.b-encart--plein .b-encart__corps strong { color: var(--c-texte-clair); font-weight: 600; }

/* ---- Bandeau Happy Hour ------------------------------------ */
.b-happy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  background: var(--c-noir);
  color: var(--c-creme);
  padding: var(--e-3) var(--e-4);
  break-inside: avoid;
}
.b-happy__titre {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  letter-spacing: var(--ls-titre);
  text-transform: uppercase;
  line-height: 1;
}
.b-happy__horaire {
  font-family: var(--f-display);
  font-size: var(--t-l);
  white-space: nowrap;
  color: var(--c-texte-clair);
}
.b-happy__detail { font-size: var(--t-xxs); color: var(--c-fumee-clair); max-width: 62mm; }

/* ---- Liste d'extras / mentions courtes --------------------- */
.b-extras {
  font-size: var(--t-xs);
  background: var(--c-papier-2);
  padding: 1.8mm 2.4mm;
  margin: var(--e-2) 0 var(--e-3);
  break-inside: avoid;
}
.b-extras strong { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: var(--t-xxs); }

/* ---- Note fléchée ------------------------------------------ */
.b-note {
  font-size: var(--t-xxs);
  color: var(--c-fumee);
  font-style: italic;
  margin: var(--e-1) 0 var(--e-2);
}
/* La flèche est dessinée, pas composée : le glyphe « → » (U+2192) n'existe
   dans aucune des trois polices de la charte. Composé, il bascule sur une
   police système — et devient un carré sur un RIP qui ne l'a pas. */
.b-note::before {
  content: ""; display: inline-block; width: .95em; height: .42em;
  margin-right: .34em; vertical-align: .04em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'><path d='M1 5h19M16 1l4.5 4-4.5 4' fill='none' stroke='%23A64530' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.u-sombre .b-note { color: var(--c-fumee-clair); }

/* ---- Pictos ------------------------------------------------ */
.u-veg {
  display: inline-block;
  font-size: var(--t-xxs);
  color: var(--c-vert);
  font-weight: 700;
  border: 1px solid var(--c-vert);
  border-radius: 50%;
  width: 3.2mm; height: 3.2mm;
  line-height: 3mm;
  text-align: center;
  vertical-align: .3mm;
}
.u-nouveau {
  font-size: var(--t-xxs);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-brique);
  text-transform: uppercase;
}

/* ---- Utilitaires ------------------------------------------- */
.u-script { font-family: var(--f-script); font-weight: 400; }
.u-creme  { color: var(--c-creme); }
.u-brique { color: var(--c-brique); }
.u-sombre { background: var(--c-noir); color: var(--c-texte-clair); }
.u-cols-2 { column-count: 2; column-gap: var(--gouttiere); }
.u-cols-3 { column-count: 3; column-gap: var(--gouttiere); }
.u-nobreak { break-inside: avoid; }
.u-logo { width: 100%; height: auto; display: block; }

/* ---- Mentions légales -------------------------------------- */
.b-legal {
  font-size: var(--t-xxs);
  color: var(--c-fumee);
  line-height: var(--lh-normal);
  border-top: 1px solid var(--c-filet);
  padding-top: var(--e-2);
}
.u-sombre .b-legal { color: var(--c-fumee-clair); border-top-color: var(--c-filet-sombre); }

/* =============================================================
   FORMATS D'IMPRESSION
   ============================================================= */
.page {
  position: relative;
  width: 210mm;
  height: 297mm;
  padding: var(--marge-a4);
  overflow: hidden;
  background: var(--c-papier);
  display: flex;
  flex-direction: column;
}
.page--a3 { width: 297mm; height: 420mm; padding: var(--marge-a3); }

@page { size: A4 portrait; margin: 0; }
@media print { .page { break-after: page; } .page:last-child { break-after: auto; } }

/* =============================================================
   LA TABLE DES COPAINS — Design System · couche ÉCRAN
   tokens-web.css · v1.0 · 2026-09-25
   -------------------------------------------------------------
   Se charge TOUJOURS APRÈS tokens.css, jamais à la place.
   tokens.css garde la main sur les couleurs, les familles et les
   espacements ; ce fichier ne redéfinit que ce qui change entre
   le papier et l'écran :
     1. l'échelle typographique (pt → rem)
     2. les composants qui n'existent pas en print
        (navigation, héro, boutons, onglets, formulaire, pied)
   ============================================================= */

:root {
  /* ---------- 1. ÉCHELLE ÉCRAN ---------- */
  /* Le print raisonne en points, l'écran en rem sur une base de 16 px.
     Les rôles restent les mêmes, les valeurs montent : à l'écran on lit
     plus loin, et la carte doit rester lisible sur un téléphone. */
  --t-xxl: clamp(2.8rem, 8vw, 5.5rem);   /* titre de héro */
  --t-xl:  clamp(1.9rem, 4.2vw, 2.9rem); /* titre de section */
  --t-l:   1.32rem;                      /* titre de bloc, nom de formule */
  --t-m:   1.06rem;                      /* intertitre, prix de formule */
  --t-s:   1rem;                         /* nom de plat, prix */
  --t-xs:  .875rem;                      /* description */
  --t-xxs: .75rem;                       /* légendes, labels, mentions */

  --lh-normal: 1.55;
  --lh-aere:   1.7;

  /* ---------- 2. ESPACEMENTS ÉCRAN ---------- */
  --w-1: .25rem;  --w-2: .5rem;   --w-3: .75rem;  --w-4: 1rem;
  --w-6: 1.5rem;  --w-8: 2rem;    --w-12: 3rem;   --w-16: 4rem;
  --w-24: 6rem;

  --w-max: 1180px;   /* largeur de contenu */
  --w-etroit: 760px; /* largeur de lecture confortable */
  --w-gout: 2rem;    /* marge latérale mobile */

  --w-transition: 180ms ease;
}

html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  font-size: var(--t-xs);
  line-height: var(--lh-normal);
  background: var(--c-papier);
  color: var(--c-texte);
}

img, svg { max-width: 100%; }
a { color: inherit; }

/* =============================================================
   CONTENEURS
   ============================================================= */
.w-wrap { width: 100%; max-width: var(--w-max); margin: 0 auto; padding: 0 var(--w-gout); }
.w-wrap--etroit { max-width: var(--w-etroit); }

/* `overflow-x: clip` (et non `hidden`, qui créerait un conteneur de défilement
   et casserait la navigation collante) : les éléments décalés en attente
   d'apparition ne doivent pas élargir la page. */
.w-section { padding: var(--w-24) 0; overflow-x: clip; }
.w-section--serre { padding: var(--w-16) 0; }
.w-section--noire { background: var(--c-noir); color: var(--c-texte-clair); }
.w-section--sable { background: var(--c-papier-2); }

.w-tete { margin-bottom: var(--w-12); }
.w-tete__sur {
  font-size: var(--t-xxs); letter-spacing: var(--ls-sur); text-transform: uppercase;
  color: var(--c-brique); font-weight: 700; display: block; margin-bottom: var(--w-3);
}
.w-section--noire .w-tete__sur { color: var(--c-creme); }
.w-tete__t {
  font-family: var(--f-display); font-size: var(--t-xl);
  letter-spacing: var(--ls-titre); text-transform: uppercase; line-height: 1.05;
}
.w-tete__s {
  margin-top: var(--w-4); max-width: 58ch; color: var(--c-fumee);
  font-size: var(--t-s); line-height: var(--lh-aere);
}
.w-section--noire .w-tete__s { color: var(--c-fumee-clair); }

/* =============================================================
   NAVIGATION
   ============================================================= */
.w-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-noir); color: var(--c-texte-clair);
  border-bottom: 1px solid var(--c-filet-sombre);
}
.w-nav__in {
  display: flex; align-items: center; gap: var(--w-6);
  height: 72px; max-width: var(--w-max); margin: 0 auto; padding: 0 var(--w-gout);
}
.w-nav__marque {
  display: flex; align-items: center; gap: var(--w-3);
  text-decoration: none; margin-right: auto; color: var(--c-creme);
}
.w-nav__marque svg { height: 30px; width: auto; flex: 0 0 auto; }
.w-nav__nom {
  font-family: var(--f-display); font-size: .82rem; letter-spacing: var(--ls-titre);
  text-transform: uppercase; line-height: 1.15; color: var(--c-texte-clair);
}
.w-nav__liens { display: flex; align-items: center; gap: var(--w-6); }
.w-nav__liens a {
  font-size: var(--t-xxs); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; text-decoration: none; color: var(--c-texte-clair);
  padding: var(--w-2) 0; border-bottom: 2px solid transparent;
  transition: border-color var(--w-transition), color var(--w-transition);
}
.w-nav__liens a:hover { color: var(--c-creme); border-bottom-color: var(--c-creme); }
.w-nav__burger {
  display: none; background: none; border: 1px solid var(--c-filet-sombre);
  color: var(--c-creme); width: 42px; height: 42px; cursor: pointer;
  font-size: 1.1rem; line-height: 1;
}

/* =============================================================
   BOUTONS
   ============================================================= */
.w-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--w-2);
  font-family: var(--f-texte); font-weight: 700; font-size: var(--t-xxs);
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: .95rem 1.6rem; border: 2px solid currentColor; cursor: pointer;
  background: none; color: inherit; transition: background var(--w-transition),
  color var(--w-transition), border-color var(--w-transition);
  white-space: nowrap;
}
.w-btn--plein { background: var(--c-creme); border-color: var(--c-creme); color: var(--c-noir); }
.w-btn--plein:hover { background: var(--c-texte-clair); border-color: var(--c-texte-clair); }
.w-btn--encre { background: var(--c-noir); border-color: var(--c-noir); color: var(--c-texte-clair); }
.w-btn--encre:hover { background: var(--c-brique); border-color: var(--c-brique); }
.w-btn--ligne:hover { background: var(--c-noir); color: var(--c-papier); }
.w-section--noire .w-btn--ligne:hover { background: var(--c-creme); color: var(--c-noir); }
.w-btns { display: flex; flex-wrap: wrap; gap: var(--w-4); }

/* =============================================================
   HÉRO
   ============================================================= */
.w-hero {
  background: var(--c-noir); color: var(--c-texte-clair);
  position: relative; overflow: hidden;
  padding: var(--w-24) 0 0;
  text-align: center;
}
.w-hero__logo { width: min(460px, 78vw); margin: 0 auto; color: var(--c-creme); }
.w-hero__logo svg { width: 100%; height: auto; display: block; }
.w-hero__base {
  margin-top: var(--w-8); font-size: var(--t-xxs); letter-spacing: .34em;
  text-transform: uppercase; color: var(--c-creme);
}
.w-hero__script {
  font-family: var(--f-script); font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.1; margin-top: var(--w-6);
}
.w-hero__btns { justify-content: center; margin-top: var(--w-12); }
.w-hero__bandeau {
  margin-top: var(--w-24); background: var(--c-creme); color: var(--c-noir);
}
.w-hero__bandeau .w-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--w-8); padding-top: var(--w-6); padding-bottom: var(--w-6); text-align: left;
}
.w-hh__t {
  font-family: var(--f-display); font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  letter-spacing: var(--ls-titre); text-transform: uppercase; line-height: 1;
}
.w-hh__d { font-size: var(--t-xxs); margin-top: var(--w-2); max-width: 46ch; }
.w-hh__h {
  font-family: var(--f-display); font-size: clamp(1.4rem, 3.4vw, 2rem);
  white-space: nowrap; text-align: right;
}

/* =============================================================
   GRILLES ET CARTES
   ============================================================= */
.w-grille { display: grid; gap: var(--w-8); }
/* Sans cette ligne, un item dont le contenu a un min-content large (un prix en
   « white-space: nowrap », par exemple) élargit sa colonne et fait déborder
   toute la grille : `min-width` vaut `auto` par défaut sur un enfant de grille. */
.w-grille > * { min-width: 0; }
.w-grille--2 { grid-template-columns: repeat(2, 1fr); }
.w-grille--3 { grid-template-columns: repeat(3, 1fr); }
.w-grille--4 { grid-template-columns: repeat(4, 1fr); }
.w-grille--texte { grid-template-columns: 1fr 1fr; gap: var(--w-16); align-items: center; }

.w-carte { border-top: 3px solid var(--c-noir); padding-top: var(--w-6); }
.w-section--noire .w-carte { border-top-color: var(--c-creme); }
.w-carte__num {
  font-family: var(--f-display); font-size: var(--t-xxs); letter-spacing: .2em;
  color: var(--c-brique); display: block; margin-bottom: var(--w-3);
}
.w-section--noire .w-carte__num { color: var(--c-creme); }
.w-carte__t {
  font-family: var(--f-display); font-size: var(--t-l);
  letter-spacing: var(--ls-titre); text-transform: uppercase; line-height: 1.15;
}
.w-carte__d { margin-top: var(--w-3); color: var(--c-fumee); line-height: var(--lh-aere); }
.w-section--noire .w-carte__d { color: var(--c-fumee-clair); }

/* zone photo à fournir — signalée, jamais masquée */
.w-photo {
  position: relative; background: var(--c-papier-2);
  border: 2px dashed var(--c-filet-fort);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--w-3); padding: var(--w-8); min-height: 300px; text-align: center;
}
.w-section--noire .w-photo { background: rgba(210,181,141,.06); border-color: var(--c-filet-sombre); }
.w-photo svg { width: 64px; height: auto; color: var(--c-filet-fort); }
.w-section--noire .w-photo svg { color: var(--c-creme); opacity: .55; }
.w-photo__l {
  font-size: var(--t-xxs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-fumee); font-weight: 700;
}
.w-section--noire .w-photo__l { color: var(--c-fumee-clair); }
.w-photo__n { font-size: var(--t-xxs); color: var(--c-fumee); max-width: 32ch; }
.w-section--noire .w-photo__n { color: var(--c-fumee-clair); }

/* =============================================================
   CARTE / MENU — onglets
   ============================================================= */
.w-onglets {
  display: flex; flex-wrap: wrap; gap: var(--w-2);
  border-bottom: 2px solid var(--c-noir); margin-bottom: var(--w-12);
  padding-bottom: 0;
}
.w-onglet {
  font-family: var(--f-texte); font-weight: 700; font-size: var(--t-xxs);
  letter-spacing: .12em; text-transform: uppercase;
  padding: var(--w-3) var(--w-6); border: none; background: none; cursor: pointer;
  color: var(--c-fumee); border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color var(--w-transition), border-color var(--w-transition);
}
.w-onglet:hover { color: var(--c-texte); }
.w-onglet[aria-selected="true"] { color: var(--c-texte); border-bottom-color: var(--c-brique); }

.w-panneau[hidden] { display: none; }
.w-menu { columns: 2; column-gap: var(--w-16); }
.w-menu__grp { break-inside: avoid-column; margin-bottom: var(--w-12); }
.w-menu__gt {
  font-family: var(--f-display); font-size: var(--t-m);
  letter-spacing: var(--ls-titre); text-transform: uppercase;
  padding-bottom: var(--w-2); border-bottom: 2px solid var(--c-noir);
  margin-bottom: var(--w-4);
}
.w-menu__note { font-size: var(--t-xxs); color: var(--c-fumee); font-style: italic;
                margin: calc(var(--w-4) * -1) 0 var(--w-4); }

.w-menu ul { list-style: none; }
.w-item { break-inside: avoid; margin-bottom: var(--w-6); }
/* Sur grand écran le tarif reste aligné à droite : c'est le nom du plat qui passe
   à la ligne. Sur mobile, le bloc de tarifs bascule sous le nom (voir media query). */
.w-item__l { display: flex; align-items: baseline; gap: var(--w-3); }
.w-item__n { font-weight: 600; font-size: var(--t-s); line-height: 1.25; min-width: 0; }
.w-item__p { flex: 1 1 2rem; border-bottom: 1px dotted var(--c-filet);
             transform: translateY(-3px); }
/* Le bloc de prix peut passer à la ligne entre deux formats (un vin en propose
   trois), mais jamais à l'intérieur d'un couple format + tarif. */
.w-item__pr { font-weight: 600; font-size: var(--t-s); font-variant-numeric: tabular-nums;
              white-space: normal; text-align: right; }
.w-item__pr > span { white-space: nowrap; }
.w-item__pr i { font-style: normal; font-weight: 400; font-size: var(--t-xxs);
                color: var(--c-fumee); margin-right: .25rem; }
.w-item__pr span + span { margin-left: var(--w-4); }
.w-item__d { font-size: var(--t-xs); color: var(--c-fumee); margin-top: var(--w-1);
             line-height: 1.5; }

.w-extras {
  background: var(--c-papier-2); padding: var(--w-4) var(--w-6); margin-bottom: var(--w-8);
  font-size: var(--t-xs); break-inside: avoid;
}
.w-extras strong { display: block; font-size: var(--t-xxs); letter-spacing: .12em;
                   text-transform: uppercase; margin-bottom: var(--w-2); }

/* tableau bières — 5 formats ne tiennent pas sur un téléphone :
   on le rend défilable horizontalement plutôt que de sacrifier une colonne. */
.w-tab-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.w-tab-wrap__note { display: none; font-size: var(--t-xxs); color: var(--c-fumee);
                    font-style: italic; margin-bottom: var(--w-2); }
.w-tab { width: 100%; border-collapse: collapse; min-width: 480px; }
.w-tab th {
  font-size: var(--t-xxs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-fumee); text-align: right; padding: 0 0 var(--w-3) var(--w-4);
  white-space: nowrap;
}
.w-tab th:first-child { text-align: left; padding-left: 0; }
.w-tab td {
  font-size: var(--t-s); text-align: right; padding: var(--w-3) 0 var(--w-3) var(--w-4);
  border-top: 1px solid var(--c-filet); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.w-tab td:first-child { text-align: left; width: 99%; font-weight: 600; white-space: normal;
                        padding-left: 0; }
.w-tab .hh { color: var(--c-brique); font-weight: 700; }
.w-tab__style {
  display: inline-block; min-width: 92px; font-weight: 400; font-size: var(--t-xxs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-fumee);
}
.w-tab__deg { font-weight: 400; font-size: var(--t-xxs); color: var(--c-fumee);
              margin-left: var(--w-2); }

/* =============================================================
   FORMULES
   ============================================================= */
.w-formule { border: 2px solid var(--c-noir); padding: var(--w-6); display: flex;
             flex-direction: column; }
.w-formule--creme { background: var(--c-creme); border-color: var(--c-creme); }
.w-formule__tete { display: flex; flex-wrap: wrap; align-items: baseline;
                   justify-content: space-between; gap: var(--w-2) var(--w-4); }
.w-formule__n { font-family: var(--f-display); font-size: var(--t-l);
                letter-spacing: var(--ls-titre); text-transform: uppercase; line-height: 1.1; }
.w-formule__pr { font-family: var(--f-display); font-size: var(--t-l); white-space: nowrap; }
.w-formule__q { font-size: var(--t-xxs); letter-spacing: .14em; text-transform: uppercase;
                font-weight: 700; color: var(--c-brique); margin-top: var(--w-3); }
.w-formule__d { font-size: var(--t-xs); color: var(--c-fumee); margin-top: var(--w-2);
                line-height: 1.55; }
.w-formule--creme .w-formule__q,
.w-formule--creme .w-formule__d { color: var(--c-noir); }

/* =============================================================
   INFOS PRATIQUES & FORMULAIRE
   ============================================================= */
.w-info { border-top: 3px solid var(--c-creme); padding-top: var(--w-6); }
.w-info__l { font-size: var(--t-xxs); letter-spacing: .2em; text-transform: uppercase;
             color: var(--c-creme); font-weight: 700; margin-bottom: var(--w-3); }
.w-info__v { font-size: var(--t-s); line-height: var(--lh-aere); }

/* Réseaux sociaux : picto + pseudo, alignés sur la ligne de base du texte. */
.w-social { display: grid; gap: var(--w-2); }
.w-social__l {
  display: flex; align-items: center; gap: var(--w-3);
  font-size: var(--t-s); text-decoration: none;
  transition: color var(--a-court) ease;
}
.w-social__l svg { flex: 0 0 auto; }
a.w-social__l:hover { color: var(--c-brique); }
.w-section--noire a.w-social__l:hover, .w-pied a.w-social__l:hover { color: var(--c-creme); }

.w-form { display: grid; gap: var(--w-4); }
.w-form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--w-4); }
.w-champ { display: flex; flex-direction: column; gap: var(--w-2); }
.w-champ label { font-size: var(--t-xxs); letter-spacing: .14em; text-transform: uppercase;
                 font-weight: 700; color: var(--c-fumee); }
.w-champ input, .w-champ select, .w-champ textarea {
  font-family: var(--f-texte); font-size: var(--t-s); color: var(--c-texte);
  background: var(--c-papier); border: 1.5px solid var(--c-filet-fort);
  padding: .8rem 1rem; width: 100%;
}
.w-champ textarea { resize: vertical; min-height: 120px; }
.w-champ input:focus, .w-champ select:focus, .w-champ textarea:focus {
  outline: 2px solid var(--c-brique); outline-offset: 1px; border-color: var(--c-brique);
}

/* marqueur de contenu à fournir */
.w-todo { outline: 2px dashed var(--c-brique); outline-offset: 6px; }
.w-section--noire .w-todo { outline-color: var(--c-creme); }
.w-todo__tag {
  display: inline-block; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--c-papier); background: var(--c-brique);
  padding: .2rem .5rem; margin-bottom: var(--w-3);
}

/* =============================================================
   PIED DE PAGE
   ============================================================= */
.w-pied { background: var(--c-noir); color: var(--c-fumee-clair); padding: var(--w-16) 0 var(--w-8); }
.w-pied__haut { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--w-12);
                padding-bottom: var(--w-12); border-bottom: 1px solid var(--c-filet-sombre); }
.w-pied__logo { width: 210px; color: var(--c-creme); }
.w-pied__logo svg { width: 100%; height: auto; display: block; }
.w-pied__t { font-size: var(--t-xxs); letter-spacing: .2em; text-transform: uppercase;
             color: var(--c-creme); font-weight: 700; margin-bottom: var(--w-4); }
.w-pied ul { list-style: none; display: grid; gap: var(--w-2); }
.w-pied a { text-decoration: none; }
.w-pied a:hover { color: var(--c-creme); }
.w-pied__bas { padding-top: var(--w-6); font-size: var(--t-xxs); line-height: 1.6; }
.w-pied__bas p + p { margin-top: var(--w-2); }

/* =============================================================
   MOUVEMENT
   -------------------------------------------------------------
   Trois principes :
   1. Le mouvement sert la lecture — il annonce une section, il
      ne décore pas. Une seule idée d'animation par section.
   2. Rien ne bouge tant que ce n'est pas à l'écran (IntersectionObserver).
   3. Tout se coupe sous `prefers-reduced-motion` (fin de fichier),
      et la page reste entièrement lisible sans JavaScript.
   ============================================================= */

:root {
  --a-court:  .35s;
  --a-moyen:  .7s;
  --a-souple: cubic-bezier(.2, .7, .2, 1);   /* sortie douce, entrée franche */
  --a-rebond: cubic-bezier(.34, 1.4, .64, 1); /* léger dépassement */
}

/* ---- Apparition au défilement ------------------------------ */
/* `no-js` reste la classe par défaut du <html> : sans JS, rien n'est masqué. */
.js .a-reveal { opacity: 0; transform: translateY(30px); }
.js .a-reveal--g { transform: translateX(-40px); }
.js .a-reveal--d { transform: translateX(40px); }
.js .a-reveal--zoom { transform: scale(.94); }
.a-reveal {
  transition: opacity var(--a-moyen) var(--a-souple),
              transform var(--a-moyen) var(--a-souple);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js .a-reveal.is-in { opacity: 1; transform: none; }

/* ---- Bandeaux défilants -------------------------------------
   Deux bandeaux, deux rôles opposés — la tension du logo rejouée :
   « LE GARDE-MANGER » énonce des provenances en capitales,
   « LA SALLE » laisse parler la maison, à la main.
   Ils ne partagent que le mécanisme de défilement ; tout le reste
   (fond, police, casse, rythme, séparateur) les oppose.          */
.a-bande { overflow: hidden; }
.a-bande__drift { transform: translateX(var(--drift, 0px)); will-change: transform; }
.a-bande__piste {
  display: flex; width: max-content; align-items: center;
  animation: a-defile 46s linear infinite;
}
.a-bande--inv .a-bande__piste { animation-direction: reverse; }
.a-bande:hover .a-bande__piste { animation-play-state: paused; }
@keyframes a-defile { to { transform: translateX(-50%); } }

.a-bande__el { display: flex; align-items: center; white-space: nowrap; }

/* --- 1. Le garde-manger : l'ardoise des labels ---------------
   Chaque entrée est un objet typographique à deux niveaux, comme
   une étiquette de cave : le produit, et dessous sa certification.
   Ni icône, ni slogan — c'est ce qui le distingue d'un bandeau
   promotionnel interchangeable.                                 */
.a-bande--garde {
  background: var(--c-noir); color: var(--c-texte-clair);
  border-top: 1px solid var(--c-filet-sombre);
  border-bottom: 1px solid var(--c-filet-sombre);
  padding: var(--w-4) 0;
}
.a-bande--garde .a-bande__piste { gap: var(--w-6); align-items: stretch; }
.a-bande__el--label { flex-direction: column; align-items: flex-start; gap: 3px; }
.a-bande__prod {
  font-family: var(--f-texte); font-weight: 600;
  font-size: .95rem; letter-spacing: .02em; line-height: 1.1;
}
.a-bande__cert {
  font-family: var(--f-texte); font-weight: 700;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-creme);
}
/* séparateur : un filet vertical, comme sur une ardoise */
.a-bande__rule {
  display: block; width: 1px; align-self: stretch;
  background: currentColor; opacity: .22; flex: 0 0 auto;
}

/* --- 2. La salle : la voix de la maison, à la main, fond crème --- */
.a-bande--salle {
  background: var(--c-creme); color: var(--c-noir);
  border-top: 2px solid var(--c-noir); border-bottom: 2px solid var(--c-noir);
  padding: var(--w-4) 0 var(--w-2);
}
.a-bande--salle .a-bande__piste { gap: var(--w-8); animation-duration: 62s; }
.a-bande__el--voix {
  font-family: var(--f-script); font-weight: 400;
  font-size: 2.1rem; line-height: 1.15; letter-spacing: 0; text-transform: none;
  padding-bottom: .35rem;   /* les déliés de la script descendent bas */
}
.a-bande__picto { display: block; flex: 0 0 auto; opacity: .55; }
.a-bande__picto svg { width: 26px; height: 26px; display: block; }

/* ---- Illustration en défilement horizontal ------------------ */
.a-glisse { overflow: hidden; padding: var(--w-8) 0; }
.a-glisse__ill {
  display: block; width: 150%; max-width: none; height: auto;
  transform: translateX(var(--px, 0px)); will-change: transform;
}
.a-glisse__ill svg { display: block; width: 100%; height: auto; }

/* ---- Le dressage de la planche ------------------------------
   La planche se trace d'abord, puis les pièces se posent une à une,
   dans l'ordre où on garnirait vraiment une planche : les fromages,
   la charcuterie, les accompagnements, le couteau pour finir.
   `pathLength="1"` sur le contour évite d'avoir à mesurer le tracé. */
.pl-item { transform-box: fill-box; transform-origin: center; }
.js .a-planche .pl-planche { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .a-planche .pl-item { opacity: 0; transform: scale(.7); }

.a-planche.is-in .pl-planche { animation: pl-trace 1.1s var(--a-souple) forwards; }
.a-planche.is-in .pl-item {
  animation: pl-pose .55s var(--a-rebond) forwards;
  animation-delay: calc(620ms + var(--i, 0) * 65ms);
}
@keyframes pl-trace { to { stroke-dashoffset: 0; } }
@keyframes pl-pose  { to { opacity: 1; transform: none; } }

/* ---- Parallaxe vertical léger ------------------------------- */
.a-flotte { transform: translateY(var(--py, 0px)); will-change: transform; }

/* ---- Le trinquement ----------------------------------------- */
.a-trinque svg { width: 100%; height: auto; display: block; }
.tr-chope, .tr-eclats, .tr-gouttes, .tr-goutte {
  transform-box: fill-box; transform-origin: center;
}
.tr-eclats, .tr-gouttes { opacity: 0; }

/* `is-actif` et non `is-in` : le bloc porte aussi `.a-reveal`, dont le `is-in`
   est définitif. Deux états distincts, deux classes — sans quoi la sortie
   d'écran du trinquement annulerait aussi son apparition. */
.a-trinque.is-actif .tr-chope--g { animation: tr-g 3s var(--a-rebond) infinite; }
.a-trinque.is-actif .tr-chope--d { animation: tr-d 3s var(--a-rebond) infinite; }
.a-trinque.is-actif .tr-eclats   { animation: tr-eclat 3s ease-out infinite; }
.a-trinque.is-actif .tr-gouttes  { animation: tr-eclat 3s ease-out infinite; }
.a-trinque.is-actif .tr-goutte--1 { animation: tr-goutte-g 3s ease-out infinite; }
.a-trinque.is-actif .tr-goutte--2 { animation: tr-goutte-d 3s ease-out infinite; }
.a-trinque.is-actif .tr-goutte--3 { animation: tr-goutte-h 3s ease-out infinite; }

@keyframes tr-g {
  0%, 16%   { transform: translateX(-30px) rotate(-5deg); }
  30%       { transform: translateX(6px)  rotate(3deg); }
  38%       { transform: translateX(-3px) rotate(-1deg); }
  50%, 100% { transform: translateX(-30px) rotate(-5deg); }
}
@keyframes tr-d {
  0%, 16%   { transform: translateX(30px)  rotate(5deg); }
  30%       { transform: translateX(-6px)  rotate(-3deg); }
  38%       { transform: translateX(3px)   rotate(1deg); }
  50%, 100% { transform: translateX(30px)  rotate(5deg); }
}
@keyframes tr-eclat {
  0%, 27%  { opacity: 0; transform: scale(.55); }
  32%      { opacity: 1; transform: scale(1); }
  46%      { opacity: 0; transform: scale(1.3); }
  100%     { opacity: 0; transform: scale(1.3); }
}
@keyframes tr-goutte-g {
  0%, 28% { transform: translate(0, 0); }
  48%     { transform: translate(-16px, -22px); }
  100%    { transform: translate(-16px, -22px); }
}
@keyframes tr-goutte-d {
  0%, 28% { transform: translate(0, 0); }
  48%     { transform: translate(16px, -26px); }
  100%    { transform: translate(16px, -26px); }
}
@keyframes tr-goutte-h {
  0%, 28% { transform: translate(0, 0); }
  48%     { transform: translate(0, -30px); }
  100%    { transform: translate(0, -30px); }
}

/* ---- Le logo au survol --------------------------------------
   Les quatre blocs du verrou — « LA TABLE », « DES », « Copains »
   et le pictogramme — portent chacun une classe, posée au moment
   de générer les déclinaisons (`logos/generer-declinaisons.py`),
   jamais à la main dans le SVG.
   Le geste : le verrou respire de bas en haut, puis le pictogramme
   fait un petit bond — la chaise qu'on tire pour s'asseoir.
   Le dessin n'est jamais déformé, seulement déplacé.

   ATTENTION : chaque tracé du logo porte déjà son propre attribut
   `transform` — la matrice de placement issue du PDF. Une règle CSS
   `transform` sur ces éléments l'écraserait et disloquerait le dessin,
   lettre par lettre. On anime donc par la propriété `translate`, qui
   se compose avec la matrice au lieu de la remplacer. Pas de `scale`
   non plus : chaque bloc est fait de plusieurs tracés indépendants,
   qui se dilateraient chacun autour de son propre centre.            */
.a-logo:hover .lg-table   { animation: lg-monte .62s var(--a-souple); }
.a-logo:hover .lg-des     { animation: lg-monte .62s var(--a-souple) 70ms; }
.a-logo:hover .lg-copains { animation: lg-monte .62s var(--a-souple) 140ms; }
.a-logo:hover .lg-picto   { animation: lg-bond .8s var(--a-rebond) 210ms; }
/* dans la navigation, seul le pictogramme est visible : il bondit aussitôt */
.w-nav__marque:hover .lg-picto { animation: lg-bond .7s var(--a-rebond); }

@keyframes lg-monte {
  0%, 100% { translate: 0 0; }
  42%      { translate: 0 -9px; }
}
@keyframes lg-bond {
  0%   { translate: 0 0; }
  32%  { translate: 0 -26px; }
  62%  { translate: 0 4px; }
  100% { translate: 0 0; }
}

/* ---- Micro-interactions ------------------------------------- */
.w-nav { transition: box-shadow var(--a-court) ease; }
.w-nav__in { transition: height var(--a-court) var(--a-souple); }
.w-nav__marque svg { transition: height var(--a-court) var(--a-souple); }
.w-nav--compact .w-nav__in { height: 58px; }
.w-nav--compact .w-nav__marque svg { height: 24px; }
.w-nav--compact { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }

.w-nav__liens a { position: relative; border-bottom: none; }
.w-nav__liens a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--c-creme); transform: scaleX(0); transform-origin: left;
  transition: transform var(--a-court) var(--a-souple);
}
.w-nav__liens a:hover::after, .w-nav__liens a:focus-visible::after { transform: scaleX(1); }
.w-nav__liens .w-btn::after { display: none; }

.w-carte, .w-formule {
  transition: transform var(--a-court) var(--a-souple),
              border-color var(--a-court) ease;
}
.w-carte:hover { transform: translateY(-7px); }
.w-formule:hover { transform: translateY(-7px); }
.w-btn { transition: background var(--a-court) ease, color var(--a-court) ease,
                     border-color var(--a-court) ease, transform var(--a-court) var(--a-rebond); }
.w-btn:hover { transform: translateY(-3px); }
.w-btn:active { transform: translateY(0); }

.w-item { transition: transform var(--a-court) var(--a-souple); }
.w-item:hover { transform: translateX(5px); }

.w-panneau { animation: a-panneau .5s var(--a-souple); }
@keyframes a-panneau { from { opacity: 0; transform: translateY(16px); } }

.w-photo svg { transition: transform 1.2s var(--a-souple); }
.w-photo:hover svg { transform: rotate(-4deg) scale(1.06); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 980px) {
  :root { --w-24: 4rem; --w-16: 3rem; --w-gout: 1.5rem; }
  .w-grille--3, .w-grille--4 { grid-template-columns: repeat(2, 1fr); }
  .w-grille--texte { grid-template-columns: 1fr; gap: var(--w-8); }
  .w-menu { columns: 1; }
  .w-pied__haut { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .w-nav__liens {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-noir); border-bottom: 1px solid var(--c-filet-sombre);
    padding: var(--w-2) var(--w-gout) var(--w-6);
  }
  .w-nav__liens[hidden] { display: none; }
  .w-nav__liens a { padding: var(--w-4) 0; border-bottom: 1px solid var(--c-filet-sombre); }
  .w-nav__liens .w-btn { margin-top: var(--w-4); justify-content: center; }
  .w-nav__burger { display: block; }
  .w-grille--2, .w-grille--3, .w-grille--4 { grid-template-columns: 1fr; }
  .w-hero__bandeau .w-wrap { flex-direction: column; align-items: flex-start; gap: var(--w-4); }
  .w-hh__h { text-align: left; }
  .w-form__duo { grid-template-columns: 1fr; }
  .w-pied__haut { grid-template-columns: 1fr; gap: var(--w-8); }
  .w-onglets { gap: 0; }
  .w-onglet { padding: var(--w-3) var(--w-4); }
  .w-tab-wrap__note { display: block; }
  .w-tab__style { min-width: 0; display: block; }
  .w-item__l { flex-wrap: wrap; }
  .w-item__pr { text-align: left; }
  .w-item__pr span + span { margin-left: var(--w-3); }
}

@media (max-width: 760px) {
  /* Le défilement lié au scroll est coûteux et peu lisible sur un petit écran.
     L'illustration garde du format — débordante et recadrée au centre —
     mais ne bouge plus : à 100 % de large, elle deviendrait minuscule. */
  .a-glisse__ill { width: 160%; transform: translateX(-18.75%); }
  .a-bande__drift { transform: none; }
  .a-bande__prod { font-size: .82rem; }
  .a-bande__cert { font-size: .56rem; letter-spacing: .18em; }
  /* la script garde sa taille : trop réduite, ses déliés se referment */
  .a-bande__el--voix { font-size: 1.6rem; }
  .a-bande__picto svg { width: 20px; height: 20px; }
  .w-item:hover { transform: none; }
}

/* =============================================================
   MOUVEMENT RÉDUIT — respecte le réglage système de l'utilisateur.
   Rien ne clignote, rien ne glisse, tout reste lisible.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .a-reveal, .js .a-reveal.is-in { opacity: 1 !important; transform: none !important; }
  .js .a-planche .pl-item { opacity: 1 !important; transform: none !important; }
  .js .a-planche .pl-planche { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .a-bande__piste { animation: none !important; }
  .a-bande__drift, .a-flotte { transform: none !important; }
  .a-glisse__ill { --px: 0px; }
  .tr-eclats, .tr-gouttes { opacity: 1; }
  .w-carte:hover, .w-formule:hover, .w-btn:hover, .w-item:hover { transform: none; }
}

@media print {
  .w-nav, .w-onglets, .w-form, .w-btn, .a-bande { display: none !important; }
  .w-panneau[hidden] { display: block !important; }
  .js .a-reveal { opacity: 1 !important; transform: none !important; }
}


/* ================= RÉGLAGES V3 ================= */
:root {
  --v3-a-souple: cubic-bezier(.22,.61,.36,1);
  --v3-a-rebond: cubic-bezier(.34,1.56,.64,1);
  --v3-nav-h: 60px;
  --v3-filet: rgba(16,16,16,.13);
  --v3-filet-nuit: rgba(210,181,141,.20);
}
html { scroll-padding-top: 110px; }
body { background: var(--c-papier); }

/* ================= 1. CURSEUR DE MARQUE =================
   Ne s'active que sur un pointeur fin qui sait survoler : sur un écran
   tactile la classe `a-cur` n'est jamais posée et le curseur natif reste.
   Le curseur système n'est masqué QUE si le JS a pu construire le nôtre —
   sans quoi on laisserait l'utilisateur sans aucun pointeur. */
/* Pas de `will-change` ici : il ferait de ce conteneur le bloc englobant de
   ses enfants en `position: fixed`. Ce sont eux qui bougent, c'est à eux de
   le porter. */
.v3-cur { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none;
          opacity: 0; }
.v3-cur__part, .v3-cur__etiq, .v3-cur__eclats { will-change: transform; }
.a-cur, .a-cur * { cursor: none; }
.a-cur a, .a-cur button, .a-cur input, .a-cur select, .a-cur textarea,
.a-cur label, .a-cur [data-cur] { cursor: none; }

/* `transform` est posé en ligne à chaque image par le JS : aucune règle de
   cette feuille ne doit s'en servir, elle serait sans effet. Les changements
   d'état passent donc par la largeur, la couleur et l'opacité. */
/* LA PART DE PIZZA.
   Un anneau avec un point au centre est devenu le curseur sur mesure par
   défaut : on le voit partout, il ne dit rien de la maison. Une part de
   pizza en dit quelque chose, et surtout sa POINTE fait un vrai point de
   visée, là où un rond ne vise rien.

   Deux éléments imbriqués, et c'est volontaire : le porteur reçoit la
   position à chaque image, la part reçoit les changements d'état. Mélanger
   les deux dans un seul `transform` rendrait le suivi élastique, puisque la
   transition s'appliquerait aussi au déplacement. */
.v3-cur__part {
  position: fixed; top: 0; left: 0; width: 30px; height: 30px;
  /* la pointe du triangle est à 3/32 du coin : on décale d'autant pour
     qu'elle tombe exactement sur le point visé */
  margin: -2.8px 0 0 -2.8px;
}
.v3-cur__pizza {
  width: 100%; height: 100%; display: block;
  transform-origin: 9.4% 9.4%;
  color: var(--c-noir);
  filter: drop-shadow(0 1px 2px rgba(16, 16, 16, .32));
  transition: rotate .3s var(--v3-a-rebond), scale .25s var(--v3-a-souple),
              color .25s ease;
}
.est-nuit .v3-cur__pizza {
  color: var(--c-creme);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}

/* L'étiquette NE VIT PAS dans l'anneau : elle se pose en bas à droite du
   pointeur, décalée, pour ne jamais recouvrir ce qu'on s'apprête à lire ni à
   cliquer. C'est le défaut de la version précédente, où un disque plein de
   62 px masquait le mot survolé.

   Son porteur fait 0 × 0 et reçoit le `transform` du JS ; l'étiquette, elle,
   n'en a aucun et peut donc utiliser `scale` sans que son décalage soit mis
   à l'échelle. */
.v3-cur__etiq { position: fixed; top: 0; left: 0; width: 0; height: 0; }
.v3-cur__mot {
  position: absolute; top: 20px; left: 20px; transform-origin: 0 0;
  opacity: 0; scale: .82;
  transition: opacity .2s ease, scale .28s var(--v3-a-rebond);
  white-space: nowrap; font-family: var(--f-texte);
  font-size: .6rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-papier);
  background: var(--c-noir); padding: .36rem .66rem; border-radius: 999px;
}
.est-nuit .v3-cur__mot { color: var(--c-noir); background: var(--c-creme); }

/* --- survol d'un élément actif ---
   La part grossit un peu et s'incline, comme si on la soulevait. Elle fait
   30 px : à cette taille elle ne recouvre pas ce qu'on s'apprête à lire,
   contrairement au disque plein qu'elle remplace. */
.v3-cur.est-survol .v3-cur__pizza { rotate: -14deg; scale: 1.2; }
/* --- appui : on l'enfonce --- */
.v3-cur.est-appui .v3-cur__pizza { rotate: -6deg; scale: .88; }

/* un mot a été donné : l'étiquette se pose à côté du pointeur */
.v3-cur.est-mot .v3-cur__mot { opacity: 1; scale: 1; }

/* --- clic : on trinque. Six éclats partent du point de contact,
       comme ceux de l'illustration `trinquer.svg`.
       L'éclat compose sa rotation et son éloignement dans un SEUL
       `transform` : les propriétés `rotate` et `translate` séparées
       s'appliquent dans l'ordre translate → rotate, ce qui déplacerait
       les six éclats dans la même direction avant de les faire pivoter
       sur eux-mêmes. --- */
.v3-cur__eclats { position: fixed; top: 0; left: 0; width: 0; height: 0; }
.v3-cur__eclat {
  position: absolute; top: -1px; left: 0; width: 13px; height: 2px; border-radius: 2px;
  background: var(--c-noir); opacity: 0; transform-origin: 0 50%;
  transform: rotate(var(--r, 0deg)) translateX(14px) scaleX(.35);
}
.est-nuit .v3-cur__eclat { background: var(--c-creme); }
.v3-cur.est-clic .v3-cur__eclat { animation: v3-eclat .5s var(--v3-a-souple) forwards; }
@keyframes v3-eclat {
  0%   { opacity: 0; transform: rotate(var(--r)) translateX(14px) scaleX(.35); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--r)) translateX(40px) scaleX(1); }
}
/* Un anneau d'onde part en même temps — c'est le « ting » du verre.
   Il vit DANS le porteur d'éclats, que le JS déplace : lui-même ne reçoit
   aucun transform en ligne, son animation peut donc s'en servir librement. */
.v3-cur__onde {
  position: absolute; top: 0; left: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1.5px solid var(--c-noir); border-radius: 50%; opacity: 0;
}
.est-nuit .v3-cur__onde { border-color: var(--c-creme); }
.v3-cur.est-clic .v3-cur__onde { animation: v3-onde .55s var(--v3-a-souple) forwards; }
@keyframes v3-onde {
  0%   { opacity: .9; transform: scale(.55); }
  100% { opacity: 0;  transform: scale(2.1); }
}

/* ================= 2. NAVIGATION FLOTTANTE =================
   Une pastille, pas une barre : elle ne touche aucun bord. */
.v3-nav {
  position: fixed; inset: clamp(12px, 1.8vw, 22px) 0 auto 0; z-index: 90;
  display: flex; justify-content: center; padding: 0 var(--w-4);
  pointer-events: none;
  transition: translate .45s var(--v3-a-souple), opacity .3s ease;
}
.v3-nav.est-cache { translate: 0 -180%; opacity: 0; }
.v3-nav__pil {
  pointer-events: auto;
  display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.1rem);
  height: var(--v3-nav-h); padding: 0 .5rem 0 .9rem;
  border-radius: 999px;
  background: rgba(16, 16, 16, .58);
  border: 1px solid var(--v3-filet-nuit);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  transition: background-color .35s ease, box-shadow .35s ease, height .35s var(--v3-a-souple);
  max-width: 100%;
}
.v3-nav.est-bas .v3-nav__pil {
  background: rgba(16, 16, 16, .9);
  box-shadow: 0 14px 38px rgba(16, 16, 16, .28);
}

.v3-nav__m { display: flex; align-items: center; gap: .55rem; text-decoration: none; flex: none; }
.v3-nav__m svg { width: 26px; height: 26px; display: block; }
.v3-nav__m svg path { fill: var(--c-creme); transition: fill .25s ease; }
.v3-nav__nom {
  font-family: var(--f-display); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--c-papier); line-height: 1.15;
  white-space: nowrap;
}
@media (max-width: 1060px) { .v3-nav__nom { display: none; } }

.v3-nav__sep { width: 1px; height: 22px; background: var(--v3-filet-nuit); flex: none; }

.v3-nav__l { display: flex; align-items: center; gap: clamp(.3rem, 1.1vw, .9rem); }
.v3-nav__l a {
  position: relative; text-decoration: none; white-space: nowrap;
  font-size: .78rem; color: rgba(247, 242, 234, .74);
  padding: .5rem .15rem; transition: color .2s ease;
}
.v3-nav__l a:hover, .v3-nav__l a:focus-visible { color: var(--c-papier); }
/* Le repère de section : un point, pas un soulignement. */
.v3-nav__l a::after {
  content: ""; position: absolute; left: 50%; bottom: .1rem;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--c-creme); opacity: 0; scale: .3;
  transition: opacity .25s ease, scale .3s var(--v3-a-rebond);
}
.v3-nav__l a.est-ici { color: var(--c-papier); }
.v3-nav__l a.est-ici::after { opacity: 1; scale: 1; }

.v3-nav__cta {
  flex: none; text-decoration: none; white-space: nowrap;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-noir); background: var(--c-creme);
  padding: .72rem 1.15rem; border-radius: 999px;
  transition: background-color .25s ease, color .25s ease;
}
.v3-nav__cta:hover, .v3-nav__cta:focus-visible { background: var(--c-papier); }

.v3-nav__b {
  display: none; flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: transparent; color: var(--c-papier); font-size: 1.1rem; line-height: 1;
}
@media (max-width: 860px) {
  .v3-nav__b { display: grid; place-items: center; }
  .v3-nav__sep { display: none; }
  .v3-nav__pil { padding-right: .35rem; }
  .v3-nav__l {
    position: absolute; top: calc(var(--v3-nav-h) + 10px); left: var(--w-4); right: var(--w-4);
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(16, 16, 16, .95); border: 1px solid var(--v3-filet-nuit);
    border-radius: 22px; padding: .5rem; backdrop-filter: blur(18px);
  }
  .v3-nav__l a { padding: .85rem 1rem; font-size: .92rem; }
  .v3-nav__l a::after { left: .45rem; top: 50%; bottom: auto; margin-top: -2px; }
  .v3-nav__cta { font-size: .68rem; padding: .66rem .9rem; }

  /* Sans JavaScript, le panneau n'a personne pour le refermer et il
     recouvrirait le héro. Il redevient alors une simple rangée de liens
     dans la pastille, et le bouton d'ouverture disparaît. */
  .no-js .v3-nav__b { display: none; }
  .no-js .v3-nav__l {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 0 .6rem;
    background: none; border: 0; border-radius: 0; padding: 0; backdrop-filter: none;
  }
  .no-js .v3-nav__l a { padding: .5rem .15rem; font-size: .78rem; }
  .no-js .v3-nav__pil { height: auto; flex-wrap: wrap; padding: .6rem .9rem; }
}

/* ================= 3. HÉRO ================= */
.v3-hero {
  position: relative; min-height: 100svh; background: var(--c-noir);
  color: var(--c-texte-clair); display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: calc(var(--v3-nav-h) + 6rem) var(--w-gout) 7rem;
  overflow: hidden;
}
/* Une seule trame, très discrète : la lumière d'un comptoir. */
.v3-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%;
  background: radial-gradient(ellipse at 50% 0%, rgba(210,181,141,.16), transparent 62%);
  pointer-events: none;
}
.v3-hero__logo { position: relative; width: min(560px, 82vw); margin: 0 auto;
                 translate: 0 var(--py, 0px); }
.v3-hero__logo svg { width: 100%; height: auto; display: block; }
.v3-hero__logo svg path { fill: var(--c-creme); }

.v3-hero__base {
  position: relative; margin-top: var(--w-8);
  font-size: .72rem; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(247, 242, 234, .72);
}
.v3-hero__script {
  position: relative; font-family: var(--f-script);
  font-size: clamp(2rem, 5vw, 3.1rem); color: var(--c-creme); margin-top: var(--w-6);
  line-height: 1;
}
.v3-hero__act { position: relative; display: flex; flex-wrap: wrap;
                justify-content: center; gap: var(--w-4); margin-top: var(--w-12); }

/* Les liens de la V3 : un trait qui se dessine, pas un bouton plein. */
.v3-lien {
  position: relative; text-decoration: none; padding: .95rem .2rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: inherit;
}
.v3-lien::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .55rem; height: 1px;
  background: currentColor; scale: 1 1; transform-origin: right;
  transition: scale .4s var(--v3-a-souple);
}
.v3-lien:hover::after, .v3-lien:focus-visible::after {
  transform-origin: left; animation: v3-trait .55s var(--v3-a-souple);
}
@keyframes v3-trait {
  0% { scale: 1 1; transform-origin: right; }
  49% { scale: 0 1; transform-origin: right; }
  50% { scale: 0 1; transform-origin: left; }
  100% { scale: 1 1; transform-origin: left; }
}
.v3-lien--plein {
  color: var(--c-noir); background: var(--c-creme); border-radius: 999px;
  padding: 1rem 1.7rem; transition: background-color .25s ease;
}
.v3-lien--plein::after { display: none; }
.v3-lien--plein:hover, .v3-lien--plein:focus-visible { background: var(--c-papier); }

/* Le bandeau happy hour, posé au bas du héro */
.v3-hero__hh {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--v3-filet-nuit);
  padding: var(--w-4) var(--w-gout);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: var(--w-2) var(--w-6); text-align: center;
}
.v3-hero__hh b { color: var(--c-creme); font-family: var(--f-display);
                 letter-spacing: .08em; text-transform: uppercase; font-size: .84rem; }
.v3-hero__hh span { font-size: .78rem; color: rgba(247, 242, 234, .66); }

.v3-descendre {
  position: absolute; bottom: 5.2rem; left: 50%; margin-left: -1px;
  width: 1px; height: 46px; background: linear-gradient(var(--c-creme), transparent);
  opacity: .8;
}
@media (max-width: 620px) { .v3-descendre { display: none; } }

/* ================= 4. SECTIONS ÉPURÉES ================= */
.v3-sec { padding: clamp(5rem, 11vw, 9.5rem) 0; overflow-x: clip; }
.v3-sec--nuit { background: var(--c-noir); color: var(--c-texte-clair); }
.v3-sec--sable { background: var(--c-papier-2); }
.v3-sec + .v3-sec:not(.v3-sec--nuit):not(.v3-sec--sable) { border-top: 1px solid var(--v3-filet); }

/* Le titre de section : un numéro, un filet, un intitulé. Rien d'autre. */
.v3-tete { display: grid; grid-template-columns: auto 1fr; gap: var(--w-6);
           align-items: start; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.v3-tete__num {
  font-family: var(--f-display); font-size: .76rem; letter-spacing: .14em;
  color: var(--c-brique); padding-top: .55rem;
}
.v3-sec--nuit .v3-tete__num { color: var(--c-creme); }
.v3-tete__t {
  font-family: var(--f-display); font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.02;
}
.v3-tete__s { margin-top: var(--w-6); max-width: 56ch; color: var(--c-fumee);
              font-size: 1rem; line-height: 1.72; }
.v3-sec--nuit .v3-tete__s { color: var(--c-fumee-clair); }
.v3-tete__s strong { color: var(--c-texte); }
.v3-sec--nuit .v3-tete__s strong { color: var(--c-creme); }
@media (max-width: 600px) {
  .v3-tete { grid-template-columns: 1fr; gap: var(--w-3); }
  .v3-tete__num { padding-top: 0; }
}

/* Le manifeste : du texte en grand, quelques mots à la main. */
.v3-manif {
  font-size: clamp(1.25rem, 2.7vw, 1.95rem); line-height: 1.5; max-width: 22ch;
  font-weight: 500;
}
.v3-manif em { font-family: var(--f-script); font-style: normal;
               font-size: 1.5em; color: var(--c-brique); line-height: .8; }

/* Liste à filets — remplace les cartes encadrées de la V1 */
.v3-liste { border-top: 1px solid var(--v3-filet); }
.v3-sec--nuit .v3-liste, .v3-sec--nuit .v3-ligne { border-color: var(--v3-filet-nuit); }
.v3-ligne {
  display: grid; grid-template-columns: 3.2rem minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--w-6); align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--v3-filet);
}
.v3-ligne__n { font-family: var(--f-display); font-size: .74rem; color: var(--c-brique); }
.v3-sec--nuit .v3-ligne__n { color: var(--c-creme); }
.v3-ligne__t { font-family: var(--f-display); font-size: clamp(1.05rem, 2vw, 1.4rem);
               letter-spacing: .05em; text-transform: uppercase; }
.v3-ligne__d { color: var(--c-fumee); font-size: .95rem; line-height: 1.7; }
.v3-sec--nuit .v3-ligne__d { color: var(--c-fumee-clair); }
@media (max-width: 760px) {
  .v3-ligne { grid-template-columns: 2.4rem 1fr; gap: var(--w-3) var(--w-4); }
  .v3-ligne__d { grid-column: 2; }
}

/* Variante étroite : dans une demi-colonne, trois colonnes de texte
   deviendraient illisibles — le descriptif passe sous l'intitulé. */
.v3-liste--serre .v3-ligne {
  /* `auto` : la première colonne accueille indifféremment un pictogramme
     de 28 px ou une contenance écrite (« 1,5 L »). */
  grid-template-columns: minmax(2.8rem, auto) minmax(0, 1fr);
  gap: var(--w-2) var(--w-4); align-items: start;
}
.v3-liste--serre .v3-ligne__d { grid-column: 2; }
/* `display:block` est indispensable : la largeur ne s'applique pas
   à un span resté en ligne, et le pictogramme se réduirait de moitié. */
.v3-ligne__ic {
  display: block; width: 30px; height: 30px; grid-row: span 2;
  align-self: start; margin-top: .1rem; color: var(--c-brique);
}
.v3-sec--nuit .v3-ligne__ic { color: var(--c-creme); }
.v3-ligne__ic svg { width: 100%; height: 100%; display: block; }

/* Repères chiffrés, en ligne, sans cadre */
.v3-reperes { display: grid; grid-template-columns: repeat(4, 1fr);
              gap: var(--w-8); margin-top: clamp(2.5rem, 5vw, 4rem); }
.v3-repere { border-top: 2px solid var(--c-noir); padding-top: var(--w-4); }
.v3-sec--nuit .v3-repere { border-top-color: var(--c-creme); }
.v3-repere__l { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
                color: var(--c-fumee); }
.v3-repere__v { font-family: var(--f-display); font-size: clamp(1.1rem, 2.2vw, 1.5rem);
                margin-top: var(--w-2); letter-spacing: .03em; }
.v3-repere__n { font-size: .78rem; color: var(--c-fumee); margin-top: var(--w-1); }
@media (max-width: 860px) { .v3-reperes { grid-template-columns: repeat(2, 1fr);
                                          gap: var(--w-6); } }

/* La planche de la V1 occupe 150 % de la largeur ; son rapport de 720/320
   la porte alors à près de 960 px de haut au format bureau, ce qui écrase
   une page qui cherche l'épure. Ramenée à 118 %, elle reste plus large que
   la fenêtre — le glissement au défilement subsiste, l'amplitude est encore
   de 260 px — sans dominer la section.
   La règle est bornée au-dessus de 760 px : en deçà, tokens-web.css applique
   son propre recadrage (160 % figé), qu'il ne faut pas contrarier. */
@media (min-width: 761px) { .a-glisse__ill { width: 118%; } }

/* Deux colonnes de texte + illustration */
.v3-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5.5rem);
          align-items: center; }
/* Quand la colonne de droite est une longue liste, centrer la gauche la
   ferait flotter au milieu d'un grand vide : elle s'aligne en haut et suit. */
.v3-duo--haut { align-items: start; }
.v3-duo--haut > :first-child { position: sticky; top: calc(var(--v3-nav-h) + 3.5rem); }
/* L'illustration prend toute sa colonne — sinon elle flotte au centre
   d'un vide qui la fait passer pour une vignette. */
.v3-duo .a-trinque svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .v3-duo { grid-template-columns: 1fr; }
  .v3-duo--haut > :first-child { position: static; }
}

/* ================= 5. ONGLETS DE LA CARTE ================= */
.v3-ongs {
  display: flex; flex-wrap: wrap; gap: clamp(.9rem, 2.4vw, 2.2rem);
  border-bottom: 1px solid var(--v3-filet); margin-bottom: clamp(2rem, 4vw, 3.4rem);
}
.v3-ong {
  position: relative; border: 0; background: none; padding: 0 0 1.1rem;
  font-family: var(--f-texte); font-size: .8rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--c-fumee);
  transition: color .22s ease;
}
.v3-ong::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--c-noir); scale: 0 1; transform-origin: left;
  transition: scale .34s var(--v3-a-souple);
}
.v3-ong:hover { color: var(--c-texte); }
.v3-ong[aria-selected="true"] { color: var(--c-texte); }
.v3-ong[aria-selected="true"]::after { scale: 1 1; }

/* Le contenu de la carte réemploie les composants .w-* du design system.
   La V3 n'en retouche que l'espacement, pour tenir le parti « épuré ». */
.v3-menu .w-menu { columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 860px) { .v3-menu .w-menu { columns: 1; } }
.v3-menu .w-menu__grp { break-inside: avoid; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.v3-menu .w-menu__gt {
  font-family: var(--f-display); font-size: .88rem; letter-spacing: .16em;
  text-transform: uppercase; padding-bottom: var(--w-3);
  border-bottom: 1px solid var(--v3-filet); margin-bottom: var(--w-4);
}
.v3-menu .w-item { padding: .62rem 0; }
.v3-menu .w-item + .w-item { border-top: 1px solid rgba(16,16,16,.07); }

/* ================= 6. INFOS & FORMULAIRE ================= */
.v3-infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--w-8); }
@media (max-width: 860px) { .v3-infos { grid-template-columns: 1fr; } }
.v3-info { border-top: 2px solid var(--c-noir); padding-top: var(--w-4); }
.v3-info__l { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
              color: var(--c-brique); }
.v3-info__v { margin-top: var(--w-3); font-size: 1rem; line-height: 1.75; }
.v3-info__v a { text-decoration: none; }
.v3-info__n { margin-top: var(--w-3); font-size: .8rem; color: var(--c-fumee); }

.v3-social { display: flex; gap: var(--w-4); margin-top: var(--w-4); flex-wrap: wrap; }
.v3-social__l { display: inline-flex; align-items: center; gap: .45rem;
                font-size: .82rem; text-decoration: none; }
.v3-social__l svg { width: 19px; height: 19px; }

.v3-form { display: grid; gap: var(--w-6); margin-top: clamp(2rem, 4vw, 3rem); }
.v3-duoform { display: grid; grid-template-columns: 1fr 1fr; gap: var(--w-6); }
@media (max-width: 600px) { .v3-duoform { grid-template-columns: 1fr; } }
.v3-champ label { display: block; font-size: .68rem; letter-spacing: .18em;
                  text-transform: uppercase; color: var(--c-fumee); margin-bottom: var(--w-2); }
.v3-champ input, .v3-champ select, .v3-champ textarea {
  width: 100%; font-family: var(--f-texte); font-size: 1rem; color: var(--c-texte);
  background: transparent; border: 0; border-bottom: 1px solid var(--c-filet);
  padding: .7rem 0; transition: border-color .25s ease;
}
.v3-champ textarea { min-height: 6rem; resize: vertical; }
.v3-champ input:focus, .v3-champ select:focus, .v3-champ textarea:focus {
  outline: none; border-bottom-color: var(--c-noir);
}

/* ================= BOUTON DE RÉSERVATION FLOTTANT =================
   En bas à gauche, à l'opposé du bouton « Réserver » de la pastille : les
   deux ne se recouvrent jamais et le pouce droit atteint celui-ci sur un
   téléphone. Il s'ouvre en pastille large au survol, se réduit à son
   pictogramme sur petit écran. */
.v3-wa {
  position: fixed; z-index: 95;
  left: clamp(.9rem, 2.5vw, 1.6rem);
  bottom: calc(clamp(.9rem, 2.5vw, 1.6rem) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.3rem .85rem 1rem;
  background: var(--c-noir); color: var(--c-papier);
  border: 1px solid var(--c-filet-sombre); border-radius: 999px;
  text-decoration: none; box-shadow: 0 10px 30px rgba(16, 16, 16, .3);
  transition: background-color .25s var(--v3-a-souple),
              translate .35s var(--v3-a-souple), box-shadow .3s ease;
  translate: 0 0;
}
.v3-wa:hover, .v3-wa:focus-visible {
  background: #1d1d1d; box-shadow: 0 14px 38px rgba(16, 16, 16, .42);
}
.v3-wa__ic { display: block; width: 22px; height: 22px; flex: none; color: #25D366; }
.v3-wa__ic svg { width: 100%; height: 100%; display: block; }
.v3-wa__t {
  font-size: .76rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; white-space: nowrap;
}
/* Il arrive une fois le héro passé : au chargement, le visiteur a déjà deux
   appels à l'action sous les yeux, un troisième serait du bruit. */
.js .v3-wa { translate: 0 calc(100% + 2rem); }
.js .v3-wa.est-la { translate: 0 0; }
@media (max-width: 560px) {
  .v3-wa { padding: .85rem; }
  .v3-wa__t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .v3-wa, .js .v3-wa.est-la { translate: 0 0; transition: none; }
}
/* ================= LE PLAN =================
   Façade avant chargement : aucune requête vers Google tant que le visiteur
   n'a pas cliqué. Une fois ouvert, l'iframe prend toute la boîte. */
.v3-plan {
  position: relative; border: 1px solid var(--c-filet); border-radius: 3px;
  background: var(--c-papier-2); overflow: hidden;
  min-height: clamp(320px, 42vw, 440px);
}
.v3-sec--sable .v3-plan { background: var(--c-papier); }
.v3-plan__repli {
  position: absolute; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: var(--w-4); padding: var(--w-8);
  text-align: center;
}
.v3-plan__ic { width: 40px; height: 40px; color: var(--c-fumee); opacity: .55; }
.v3-plan__ad {
  font-size: var(--t-s); line-height: 1.75; font-weight: 600;
}
.v3-plan__btns {
  display: flex; flex-wrap: wrap; gap: var(--w-4);
  align-items: center; justify-content: center; margin-top: var(--w-2);
}
.v3-plan__btns button { font-family: var(--f-texte); border: 0; cursor: pointer; }
.v3-plan__note {
  font-size: var(--t-xxs); color: var(--c-fumee); max-width: 42ch;
  line-height: 1.6;
}

/* Le bouton d'ouverture passait inaperçu : il avait l'allure d'un lien parmi
   d'autres sur un bloc gris. Il est désormais plein, plus grand, précédé d'un
   repère de carte, et il respire une fois à l'entrée dans l'écran — le temps
   qu'on le remarque, pas davantage. */
.v3-plan__ouvrir {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8rem; padding: 1rem 1.6rem;
}
.v3-plan__ouvrir svg { width: 18px; height: 18px; flex: none; }
.v3-plan.est-vu .v3-plan__ouvrir { animation: v3-plan-appel 2.4s var(--v3-a-souple) .4s 2; }
@keyframes v3-plan-appel {
  0%, 62%, 100% { scale: 1; box-shadow: 0 0 0 0 rgba(210, 181, 141, 0); }
  70%  { scale: 1.045; box-shadow: 0 0 0 8px rgba(210, 181, 141, .22); }
  82%  { scale: 1; box-shadow: 0 0 0 16px rgba(210, 181, 141, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .v3-plan.est-vu .v3-plan__ouvrir { animation: none; }
}
/* L'iframe remplace la façade, sans rien laisser dépasser. */
.v3-plan iframe {
  display: block; width: 100%; height: 100%; border: 0;
  position: absolute; inset: 0;
}
.v3-plan.est-ouvert { background: var(--c-noir); }

/* Emplacements photo — la maquette dit franchement ce qui manque. */
.v3-photo {
  border: 1px dashed var(--c-filet-fort); border-radius: 3px;
  min-height: 300px; display: grid; place-items: center; align-content: center;
  gap: var(--w-3); padding: var(--w-8); text-align: center; background: var(--c-papier-2);
}
.v3-sec--sable .v3-photo { background: var(--c-papier); }
.v3-photo svg { width: 46px; height: 46px; opacity: .3; }
.v3-photo__l { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
               color: var(--c-fumee); }
.v3-photo__n { font-size: .8rem; color: var(--c-fumee); max-width: 34ch; line-height: 1.6; }

/* ================= 7. PIED ================= */
.v3-pied { background: var(--c-noir); color: var(--c-texte-clair);
           padding: clamp(4rem, 8vw, 6.5rem) 0 var(--w-12); }
.v3-pied__haut { display: grid; grid-template-columns: 1.4fr 1fr 1fr;
                 gap: var(--w-12); padding-bottom: var(--w-12);
                 border-bottom: 1px solid var(--v3-filet-nuit); }
@media (max-width: 860px) { .v3-pied__haut { grid-template-columns: 1fr; gap: var(--w-8); } }
.v3-pied__logo { width: min(300px, 70vw); }
.v3-pied__logo svg { width: 100%; height: auto; display: block; }
.v3-pied__logo svg path { fill: var(--c-creme); }
.v3-pied__t { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
              color: var(--c-creme); margin-bottom: var(--w-4); }
.v3-pied ul { list-style: none; display: grid; gap: var(--w-2); }
.v3-pied a { text-decoration: none; color: rgba(247, 242, 234, .78); font-size: .9rem; }
.v3-pied a:hover { color: var(--c-papier); }
.v3-pied li { font-size: .9rem; color: rgba(247, 242, 234, .78); }
.v3-pied__bas { padding-top: var(--w-8); font-size: .72rem; line-height: 1.7;
                color: var(--c-fumee-clair); display: grid; gap: var(--w-2); }

/* Marque « à compléter » — reprise de la V1, même signal partout. */
.v3-todo { outline: 1px dashed var(--c-brique); outline-offset: 7px; }

/* ================= 8. APPARITIONS ================= */
.js .v3-up { opacity: 0; translate: 0 26px;
             transition: opacity .7s var(--v3-a-souple) var(--d, 0ms),
                         translate .7s var(--v3-a-souple) var(--d, 0ms); }
.js .v3-up.is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .v3-up { opacity: 1; translate: 0 0; transition: none; }
  .v3-nav { transition: none; }
  .v3-cur { display: none; }
}