/* ==========================================================================
   Le Bistro Vénitien — Chez Marie · 29 Cours Julien, Marseille
   Palette tirée du lieu : velours rouge des fauteuils, murs carmin,
   fresque noir & blanc, laiton des lustres de Murano.
   Zéro dépendance externe : aucune requête réseau, rendu instantané.
   ========================================================================== */

:root{
  --carmin:#8E1C22;
  --carmin-clair:#B32830;
  --velours:#5E1216;
  --encre:#16130F;
  --charbon:#2A2521;
  --laiton:#C9A227;
  --laiton-clair:#E4C55C;
  --creme:#FAF6EF;
  --creme-2:#F2EBE0;
  --sable:#E6DCCB;
  --gris:#6E655B;
  --ligne:#DDD2C0;
  --vert-gf:#2F6B4F;          /* pastille sans gluten */
  --vert-gf-clair:#E8F2EC;

  /* Piles système complètes : replis Linux/Android inclus (modern-font-stacks) */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Palatino LT STD",Georgia,
          "Liberation Serif","Nimbus Roman No9 L","Times New Roman",Times,serif;
  --sans:"Avenir Next",Avenir,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,
         "Liberation Sans",Arial,sans-serif;
  --script:"Snell Roundhand","Savoye LET","Apple Chancery","Brush Script MT",
           "URW Chancery L",cursive;

  --pad:clamp(20px,5vw,40px);
  /* Hauteur réelle de l'en-tête collant, mesurée sur carte.html. Sert à caler
     la barre de catégories juste en dessous. Elle n'est PAS identique à toutes
     les largeurs : quand les liens de navigation disparaissent, l'en-tête perd
     7 px. La valeur mobile est posée dans la requête média plus bas. */
  --h-entete:77px;
  /* Hauteur de la barre d'action du bas, barre d'accueil de l'iPhone comprise.
     Sans env(), les deux boutons passent sous le trait blanc et deviennent
     inatteignables sur tout iPhone sans bouton d'accueil. */
  --h-barre:calc(78px + env(safe-area-inset-bottom,0px));
  --rythme:clamp(64px,9vw,116px);

  /* Grain de pellicule : SVG inline en data-URI, ~340 octets, zéro requête */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Transitions de page natives, sans JS ni routeur (Chrome 126+, Safari 18.2+) */
@view-transition{navigation:auto}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--creme);color:var(--encre);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;text-wrap:balance;margin:0}
h1{font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1.1em}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:760px}
.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--carmin);margin:0 0 14px;
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--encre);color:#fff;padding:12px 18px;border-radius:8px}
:focus-visible{outline:3px solid var(--laiton);outline-offset:3px}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:.02em;
  padding:15px 30px;border-radius:2px;border:1.5px solid transparent;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--carmin);color:#fff}
.btn-primary:hover{background:var(--velours)}
.btn-ghost{border-color:currentColor;color:var(--encre);background:transparent}
.btn-ghost:hover{background:var(--encre);color:var(--creme)}
.btn-light{border-color:rgba(255,255,255,.7);color:#fff}
.btn-light:hover{background:#fff;color:var(--encre)}
.btn-gf{background:var(--vert-gf);color:#fff}
.btn-gf:hover{background:#245239}

/* ---------- En-tête ---------- */
header{
  position:sticky;top:0;z-index:100;background:rgba(250,246,239,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne);
  view-transition-name:entete;
}
.brand{view-transition-name:marque}
.nav{display:flex;align-items:center;gap:28px;max-width:1180px;margin:0 auto;padding:14px var(--pad)}
.brand{display:flex;flex-direction:column;line-height:1;margin-right:auto}
.brand .b1{font-family:var(--serif);font-size:1.16rem;letter-spacing:.01em}
.brand .b2{font-family:var(--script);font-size:1.5rem;color:var(--carmin);margin-top:-2px}
.nav nav{display:flex;gap:26px;font-size:.9rem;font-weight:500}
.nav nav a{color:var(--charbon);padding-bottom:3px;border-bottom:2px solid transparent}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--carmin);border-color:var(--carmin)}
.nav .btn{padding:11px 22px;font-size:.87rem}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(86vh,720px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%}
.hero img{object-fit:cover;filter:brightness(.52) saturate(1.05);view-transition-name:fresque}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,19,15,.35) 0%,rgba(22,19,15,.15) 40%,rgba(22,19,15,.86) 100%),
             var(--grain);
  background-blend-mode:normal,overlay;
}
/* La fresque garde son identité d'une page à l'autre */
::view-transition-old(fresque),::view-transition-new(fresque){
  animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1);
}
::view-transition-old(root){animation:140ms cubic-bezier(.4,0,1,1) both vt-out}
::view-transition-new(root){animation:260ms cubic-bezier(0,0,.2,1) both vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(44px,7vw,84px);padding-top:120px;color:#fff}
.hero .eyebrow{color:var(--laiton-clair)}
.hero h1{color:#fff;max-width:15ch}
.hero h1 em{font-family:var(--script);font-style:normal;color:var(--laiton-clair);font-size:1.15em}
.hero .lead{font-size:clamp(1.05rem,1.7vw,1.3rem);max-width:52ch;color:rgba(255,255,255,.92);margin:20px 0 30px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero .meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);font-size:.9rem;color:rgba(255,255,255,.85)}
.hero .meta b{color:#fff}
/* ⚠️ Ne PAS forcer de couleur ici. Cette feuille décrit un hero sombre
   (`.hero .lead` en blanc à 92 %), mais l'Acte IV de vivant.css l'a repassé en
   papier crème avec du texte foncé — et il a le dernier mot. Un `color:#fff`
   posé ici donne du blanc sur crème, donc invisible (constaté le 31/08).
   La graisse seule suffit, et elle marche sur les deux fonds. */
.hero .lead strong{font-weight:600}
.stars{color:var(--laiton-clair);letter-spacing:2px}

/* ---------- Bandeau défilant ---------- */
.marquee{background:var(--encre);color:var(--creme);overflow:hidden;padding:13px 0;white-space:nowrap}
.marquee .track{display:inline-block;animation:defile 34s linear infinite;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.marquee .track span{margin:0 26px}
.marquee .track i{color:var(--laiton);font-style:normal}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section{padding:var(--rythme) 0}
.sec-head{margin-bottom:clamp(34px,5vw,58px)}
.sec-head p{color:var(--gris);max-width:62ch;font-size:1.05rem}
.center{text-align:center}
.center .sec-head p{margin-left:auto;margin-right:auto}

/* ---------- Bloc sans gluten (le différenciateur) ---------- */
.gf{background:var(--vert-gf);color:#fff}
.gf .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px);align-items:center}
.gf .eyebrow{color:#BFE3CE}
.gf h2{color:#fff;margin-bottom:22px}
.gf p{color:rgba(255,255,255,.9)}
.gf .chiffre{font-family:var(--serif);font-size:clamp(3.4rem,8vw,6rem);line-height:1;color:#fff}
.gf .chiffre small{display:block;font-family:var(--sans);font-size:.86rem;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:#BFE3CE;margin-top:18px}
.gf-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);padding:36px 34px;border-radius:3px}
.gf-card > p{border-top:1px solid rgba(255,255,255,.18);padding-top:22px}
.gf-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.gf-list li{padding-left:30px;position:relative;color:rgba(255,255,255,.94)}
.gf-list li::before{content:"✓";position:absolute;left:0;color:#BFE3CE;font-weight:700}

/* ---------- Galerie ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:min(24vw,240px);gap:14px}
.bento figure{position:relative;overflow:hidden;margin:0;background:var(--sable);isolation:isolate}
/* <picture> est INLINE par défaut. Sans ce display:block, le height:100% de
   l'image n'a plus de boîte de référence et la photo s'effondre à sa hauteur
   intrinsèque, hors de la case de la grille. */
.bento picture{display:block;width:100%;height:100%}
.bento img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.bento figure:hover img{transform:scale(1.05)}
/* Grain sur l'ambiance — jamais assez fort pour ternir une assiette */
.bento figure::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);opacity:.05;mix-blend-mode:overlay;
}
.bento figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 20px 16px;color:#fff;font-size:.88rem;
  background:linear-gradient(transparent,rgba(22,19,15,.8));
}
.b-wide{grid-column:span 2;grid-row:span 2}
.b-tall{grid-row:span 2}

/* ---------- Avis ---------- */
.avis-zone{background:var(--creme-2)}
.avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.avis{background:#fff;border:1px solid var(--ligne);padding:30px 28px}
.avis .stars{font-size:1rem}
.avis p{font-family:var(--serif);font-size:1.06rem;line-height:1.55;margin:14px 0 18px}
.avis cite{font-style:normal;font-size:.86rem;color:var(--gris);letter-spacing:.04em}
.note-globale{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:44px;font-size:.95rem;color:var(--gris)}
.note-globale b{font-family:var(--serif);font-size:2.4rem;color:var(--encre);line-height:1}

/* ---------- Infos pratiques ---------- */
.infos{background:var(--encre);color:var(--creme)}
.infos h2{color:#fff}
.infos .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,70px)}
.infos .eyebrow{color:var(--laiton)}
.horaires{list-style:none;padding:0;margin:0;border-top:1px solid rgba(255,255,255,.16)}
.horaires li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.13);font-size:.98rem}
.horaires .jour{color:rgba(255,255,255,.72)}
.horaires .ferme{color:rgba(255,255,255,.42)}
.horaires b{font-weight:600}
.contact-list{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:14px}
.contact-list a{border-bottom:1px solid rgba(255,255,255,.3)}
.contact-list a:hover{color:var(--laiton-clair);border-color:var(--laiton-clair)}

/* ---------- Formulaire de réservation ---------- */
.resa{background:var(--creme-2)}
.form-card{background:#fff;border:1px solid var(--ligne);padding:clamp(26px,4vw,44px);max-width:720px;margin:0 auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-size:.84rem;font-weight:600;letter-spacing:.03em;color:var(--charbon)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;padding:13px 14px;border:1.5px solid var(--ligne);
  border-radius:2px;background:var(--creme);color:var(--encre);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--carmin);outline:none;background:#fff}
.field textarea{resize:vertical;min-height:88px}
.field .hint{font-size:.79rem;color:var(--gris)}
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--creme);border:1px solid var(--ligne);padding:16px;margin:6px 0 22px}
.consent input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--carmin)}
.consent label{font-size:.87rem;color:var(--charbon);line-height:1.5}
.form-card .btn{width:100%}
.form-note{font-size:.8rem;color:var(--gris);text-align:center;margin:14px 0 0}
.creneaux{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.creneau{
  padding:11px 17px;border:1.5px solid var(--ligne);background:var(--creme);
  font-size:.92rem;cursor:pointer;border-radius:2px;font-family:inherit;
  transition:background .15s,border-color .15s,color .15s;user-select:none;
}
.creneau:hover{border-color:var(--carmin);color:var(--carmin)}
/* Sélection et focus pilotés par le radio réel : fonctionne sans JavaScript
   et conserve tout le comportement clavier natif (flèches, Espace). */
.creneau:has(input:checked){background:var(--carmin);border-color:var(--carmin);color:#fff}
.creneau:has(input:focus-visible){outline:3px solid var(--laiton);outline-offset:2px}
.creneau:has(input:disabled){opacity:.4;cursor:not-allowed;text-decoration:line-through}
.form-msg{padding:16px;margin-top:18px;font-size:.94rem;border-radius:2px;display:none}
.form-msg.ok{display:block;background:var(--vert-gf-clair);border:1px solid var(--vert-gf);color:#1F4A36}
.form-msg.err{display:block;background:#FDECEC;border:1px solid var(--carmin);color:var(--velours)}

/* ---------- Carte / menu ---------- */
.menu-sec{border-top:1px solid var(--ligne)}
/* minmax(0,1fr) et non 1fr : une piste de grille a min-width:auto par défaut,
   donc elle refuse de descendre sous la largeur max-content de son contenu —
   la description d'un plat poussait le prix hors de l'écran sur téléphone. */
.menu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(34px,5vw,64px)}
/* La ligne de plat est une grille à trois colonnes : nom · pointillés · prix,
   la description passant en dessous sur toute la largeur. En flex, le nom et
   la description formaient un seul bloc insécable. */
.plat{
  display:grid;grid-template-columns:auto minmax(14px,1fr) auto;
  column-gap:14px;align-items:baseline;padding:17px 0;border-bottom:1px dotted var(--ligne);
}
.plat .nom{grid-column:1;min-width:0;font-family:var(--serif);font-size:1.1rem}
.plat .pointille{grid-column:2;border-bottom:1px dotted var(--ligne);transform:translateY(-4px)}
.plat .prix{grid-column:3;font-family:var(--serif);font-size:1.06rem;white-space:nowrap}
.plat .desc{grid-column:1/-1;font-family:var(--sans);font-size:.88rem;color:var(--gris);margin-top:3px}
.tag-gf{
  display:inline-block;background:var(--vert-gf-clair);color:var(--vert-gf);border:1px solid #C4DED0;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;margin-left:8px;vertical-align:middle;
}

/* ---------- Bandeau d'aperçu ----------
   Présent tant que le site n'est pas sur le domaine de Marie.
   À retirer à la mise en ligne : voir APERCU.md. */
.demo{
  background:var(--encre);color:var(--sable);text-align:center;
  font-size:.75rem;line-height:1.5;letter-spacing:.02em;padding:9px 16px;
}
.demo b{color:var(--laiton-clair);font-weight:600}

/* ---------- Encart d'information ---------- */
.encart{
  background:#FFF8E6;border-left:3px solid var(--laiton);
  padding:22px 26px;margin:0 0 clamp(30px,4vw,48px);
}
.encart p{margin:0;font-size:.96rem;color:var(--charbon)}
.encart p + p{margin-top:10px}
.encart strong{color:var(--encre)}

/* ---------- Pied de page ---------- */
footer{background:var(--charbon);color:#B5ACA1;padding:56px 0 40px;font-size:.87rem}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h4{font-family:var(--serif);color:var(--creme);font-size:1.05rem;margin:0 0 14px;font-weight:600}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
footer a:hover{color:#fff}
.footer-bas{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;font-size:.8rem;color:#8B8279}

/* ---------- Barre d'action mobile ---------- */
.ctabar{
  position:fixed;bottom:0;left:0;right:0;z-index:120;display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(250,246,239,.97);backdrop-filter:blur(10px);border-top:1px solid var(--ligne);
}
.ctabar .btn{flex:1;padding:14px 6px;font-size:.86rem;white-space:nowrap}
@media (max-width:360px){.ctabar .btn{font-size:.79rem;padding:13px 4px}}

/* ---------- Responsive ---------- */

/* Seuil de navigation — 1000 px et non 900.
   Mesuré direction par direction : la marque, les cinq liens et le bouton
   cessent de tenir sur une ligne à 968 px (Nuit) et 982 px (Éditorial, dont
   les liens sont en capitales espacées). En dessous, l'en-tête passait à deux
   lignes et gagnait 23 à 59 px : la barre de catégories de la carte, calée
   sous une hauteur d'en-tête d'une seule ligne, se retrouvait dessous.
   1000 px laisse une marge et garde la nav complète sur iPad paysage (1024).
   Les trois règles ci-dessous vont ensemble et doivent partager leur seuil :
   si les liens disparaissent sans que la barre d'action apparaisse, il n'y a
   plus aucune navigation du tout. */
@media (max-width:1000px){
  .nav nav{display:none}
  .ctabar{display:flex}
  /* La barre est FIXE au bas de l'écran : tout défilement vers une ancre
     amenait la fin de la cible dessous, cachée. Mesuré sur /reserver : la
     dernière option du carnet (« 9 et + · on s'appelle ») passait sous les
     75 px de la barre. scroll-padding-bottom réserve la place à chaque
     défilement piloté — ancres, scrollIntoView, focus clavier. */
  html{scroll-padding-bottom:96px}
  body{padding-bottom:var(--h-barre)}
}

@media (max-width:900px){
  .gf .wrap,.infos .wrap{grid-template-columns:1fr}
  .menu-grid{grid-template-columns:minmax(0,1fr)}
  .avis-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:44vw}
  .b-wide,.b-tall{grid-column:span 2;grid-row:span 1}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  /* Ce n'est pas la disparition des liens de nav qui raccourcit l'en-tête,
     c'est celle du bouton « Réserver » : c'est lui le plus haut. */
  :root{--h-entete:70px}
  .nav .btn{display:none}
  .grid-2{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr}
  .hero{min-height:78vh}
}

/* ---------- Accessibilité : kill-switch global des animations ----------
   Le sélecteur * ne cible PAS les pseudo-éléments de View Transitions :
   ils doivent être neutralisés explicitement, sinon les transitions
   continuent de jouer malgré la préférence système. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto!important}
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
  @view-transition{navigation:none}
  .bento figure:hover img{transform:none}
}

/* ---------- Impression ---------- */
@media print{
  header,.ctabar,.marquee,.hero .ctas,.demo{display:none}
  body{background:#fff;font-size:12pt}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- Utilitaires de texte ---------- */
.mute{color:var(--gris)}
.texte p{color:var(--gris);max-width:64ch;font-size:1.03rem}
.texte h3{color:var(--encre);margin-top:38px;margin-bottom:10px}
.texte p:first-of-type{color:var(--encre)}

/* ==========================================================================
   LA CARTE — page conçue pour être scannée à table
   Quelqu'un d'assis, sur son téléphone, en 4G, dans une salle sombre.
   D'où : aucune image, des pastilles de section collantes atteignables au
   pouce, et le sans gluten annoncé d'entrée puisque toute la carte le permet.
   ========================================================================== */
.carte-nav{
  position:sticky;top:var(--h-entete);z-index:60;background:var(--creme);
  border-bottom:1px solid var(--ligne);margin-bottom:clamp(22px,3vw,36px);
}
.carte-nav ul{
  display:flex;gap:8px;overflow-x:auto;list-style:none;margin:0;
  padding:12px var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.carte-nav ul::-webkit-scrollbar{display:none}
.carte-nav a{
  display:block;white-space:nowrap;font-size:.84rem;font-weight:600;
  padding:10px 17px;border-radius:999px;background:var(--creme-2);
  border:1px solid var(--ligne);color:var(--charbon);
}
.carte-nav a:hover{background:var(--carmin);border-color:var(--carmin);color:#fff}

.gf-bandeau{
  background:var(--vert-gf);color:#fff;padding:22px 26px;border-radius:3px;
  margin:0 0 clamp(24px,3.5vw,40px);
}
.gf-bandeau b{display:block;font-family:var(--serif);font-size:1.22rem;margin-bottom:6px}
.gf-bandeau p{margin:0;font-size:.94rem;color:rgba(255,255,255,.9);max-width:62ch}
.gf-bandeau p + p{margin-top:8px}

.menu-sec{scroll-margin-top:calc(var(--h-entete) + 88px);border-top:1px solid var(--ligne);padding:clamp(34px,5vw,58px) 0 0}
.menu-sec:first-of-type{border-top:0;padding-top:0}
.menu-sec > .wrap > h2{font-size:clamp(1.5rem,3vw,2.1rem)}
/* Dans le bloc sans gluten, `.gf p` (spécificité 0,1,1) l'emportait sur
   `.menu-note` (0,1,0) et repassait le texte en blanc — blanc sur vert pâle,
   donc illisible. On remonte la spécificité au même niveau. */
.gf .menu-note,.menu-note{
  display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--vert-gf);background:var(--vert-gf-clair);
  border:1px solid #C4DED0;border-radius:999px;padding:5px 13px;margin:10px 0 0;
}
.menu-sec .sec-head{margin-bottom:clamp(20px,3vw,30px)}
.plat .desc{margin-top:4px}
.plat .prix{font-weight:600}
.carte-pied{
  border-top:1px solid var(--ligne);margin-top:clamp(34px,5vw,54px);
  padding-top:clamp(24px,3.5vw,36px);
}
.carte-pied p{color:var(--gris);font-size:.93rem}
.carte-pied .avertis{font-size:.84rem}

@media (max-width:900px){
  .carte-nav a{padding:11px 18px}
}