/* Le Bagel's Street · direction A2 « Board doré » (17/10/2026) : charte du logo poussée, titres Titan One, annotations Oleo Script.
   Un seul fichier, le téléphone en media queries en bas. */
@font-face { font-family: 'Titan One'; src: url('polices/titan-one.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Oleo Script'; src: url('polices/oleo-script.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Baloo 2'; src: url('polices/baloo-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Baloo 2'; src: url('polices/baloo-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('polices/barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('polices/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('polices/barlow-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --creme: #FBF3E4; --vert-profond: #1F3D1C; --vert: #47742F; --dore: #E4A63A; --jaune: #F6C453;
  --toast: #CD7130; --toast-f: #B05A1C; --toast-texte: #A1501A; --rouge: #D7262A; --bleu: #2F6DB5; --encre: #17200F; --blanc: #fff; --gris: #3E3A33;
  --display: 'Titan One', 'Baloo 2', sans-serif; --script: 'Oleo Script', cursive; --texte: 'Barlow', system-ui, sans-serif;
  --largeur: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--h-entete, 76px) + 16px); }  /* une ancre (La carte, Le camion…) s'arrête sous l'en-tête collant, pas dessous ; --h-entete mesurée par script.js (30/10) */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--creme); color: var(--encre); font: 17px/1.5 var(--texte); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1; text-wrap: balance; }
p { margin: 0 0 1em; }
.contenu { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.saut { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--vert-profond); color: #fff; padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.saut:focus { top: 12px; }
[hidden] { display: none !important; }

/* ---- briques du style ---- */
.halftone { position: relative; isolation: isolate; }
.halftone::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--pt, rgba(0,0,0,.22)) 1.3px, transparent 1.7px); background-size: 11px 11px;
  -webkit-mask-image: linear-gradient(115deg, #000 10%, transparent 62%); mask-image: linear-gradient(115deg, #000 10%, transparent 62%); }
.grain::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.relief { text-transform: uppercase; letter-spacing: .01em; color: var(--vert-profond); text-shadow: 0.011em 0.011em 0 var(--creme), 0.022em 0.022em 0 var(--creme), 0.033em 0.033em 0 var(--creme), 0.044em 0.044em 0 var(--creme), 0.055em 0.055em 0 var(--creme), 0.066em 0.066em 0 var(--creme), .1em .1em 0 rgba(31,61,28,.35); }
.relief-dore { color: var(--creme); text-shadow: 0.011em 0.011em 0 var(--dore), 0.022em 0.022em 0 var(--dore), 0.033em 0.033em 0 var(--dore), 0.044em 0.044em 0 var(--dore), 0.055em 0.055em 0 var(--dore), 0.066em 0.066em 0 var(--dore), .1em .1em 0 rgba(0,0,0,.35); }
.sticker { display: inline-block; font: 800 15px/1 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .02em; padding: .5em .8em; background: var(--dore); color: var(--vert-profond);
  border: 4px solid var(--blanc); box-shadow: 5px 5px 0 var(--vert-profond); transform: rotate(-4deg); border-radius: 8px; text-decoration: none; }
.sticker.vert { background: var(--vert); color: #fff; box-shadow: 5px 5px 0 var(--encre); }
.sticker.mini { font-size: 14px; padding: .4em .7em; transform: rotate(-3deg); }
.sticker.prix { font-family: var(--display); font-weight: 400; font-size: 26px; background: var(--toast-f); color: #fff; transform: rotate(6deg); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; font: 800 19px/1 'Baloo 2', sans-serif; padding: 12px 22px; border-radius: 14px; text-decoration: none; cursor: pointer;
  border: 3px solid var(--encre); box-shadow: 5px 5px 0 var(--encre); transition: transform .15s ease-out, box-shadow .15s ease-out; }
.btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-toast { background: var(--toast-f); color: #fff; }
.btn-creme { background: var(--creme); color: var(--vert-profond); }
.btn-vert { background: var(--vert-profond); color: #fff; }
.annot { font-family: var(--script); font-weight: 700; font-size: 26px; line-height: 1; color: var(--toast-f); position: relative; display: inline-block; }
.annot svg { position: absolute; width: 70px; height: 40px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cadre { border: 6px solid var(--blanc); border-radius: 26px; box-shadow: 10px 10px 0 var(--vert-profond); overflow: hidden; background: var(--vert-profond); }
.cadre img { width: 100%; height: 100%; object-fit: cover; }
html.js .apparait { opacity: 0; transform: translateY(12px); transition: opacity .3s ease-out, transform .3s ease-out; }
html.js .apparait.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .apparait { opacity: 1; transform: none; transition: none; } }
@media (hover: hover) {
  .btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--encre); }
}
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--encre); }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }

/* ---- en-tête ---- */
.entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--jaune); color: var(--vert-profond); border-bottom: 4px solid var(--vert-profond); transition: box-shadow .2s; }
.entete.ombre { box-shadow: 0 6px 20px rgba(31,61,28,.18); }
.marque { display: flex; align-items: center; min-height: 44px; gap: 10px; font: 800 22px/1 'Baloo 2', sans-serif; text-decoration: none; white-space: nowrap; }
.marque img { width: 46px; height: 52px; object-fit: contain; }
.liens { display: flex; gap: 24px; font: 600 16px var(--texte); }
.liens a { text-decoration: none; padding: 13px 4px; }
.entete .btn { padding: 9px 16px; font-size: 17px; min-height: 44px; }
/* 04/11 : « Réserver le camion » dans la barre sur ordinateur ; les marges automatiques gardent les liens au milieu et collent les deux boutons */
.liens { margin-left: auto; }
.btn-camion { margin-left: auto; margin-right: 12px; }
@media (min-width: 821px) { .liens a[href="#evenements"] { display: none; } }
/* 04/11 soir (sa demande) : « À propos » (#camion) et « Nous contacter » (#contact, le pied) dans la barre, même typo que les autres liens.
   Sur ordinateur à partir de 1 100 px seulement : mesuré, il reste 19 px de marge à 1 100 px ; à 1 060 px il manquait 21 px, le nom se
   tassait et les deux boutons passaient sur deux lignes ; à 900 px il reste 222 px entre le nom et « Réserver le camion » pour 372 px de
   liens. En dessous de 1 100 px la barre reste celle du 04/11 matin. La barre du téléphone est pleine. */
.liens a[href="#camion"], .liens a[href="#contact"] { display: none; }
@media (min-width: 1100px) { .liens a[href="#camion"], .liens a[href="#contact"] { display: inline; } .liens a { white-space: nowrap; } }

/* ---- héros (21/10, ses références Burger King) : fond brun sombre, photo réaliste de trois bagels sur une table en bois (Higgsfield,
   img/2026-10-21/heros-pub/SOURCE.md), « Grosse faim ? » en crème posé sur le haut de la photo, les boutons à cheval sur la table.
   Le h1 dit quoi et où ; il est premier dans la page (lu en premier) et affiché sous les boutons (order). ---- */
.cache-ecran { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.heros { --brun: #0d0604; position: relative; isolation: isolate; display: flex; flex-direction: column; color: var(--creme); text-align: center; overflow: hidden;
  background: var(--brun); }  /* la couleur exacte des bords de la photo (mesurée) : aucun rectangle visible autour d'elle sur grand écran */
/* 22/10 (sa demande) : sa table au soleil devant le camion, en pleine largeur (Higgsfield, img/2026-10-22/heros-camion/SOURCE.md ; 02/11 : bagels réalistes, img/2026-11-02/heros-reel/SOURCE.md), le ciel
   assombri sous la phrase. L'animation d'arrivée (photo des bagels sur fond brun, puis recul) a été retirée le 23/10, sa décision.
   Hauteur réglée sur l'écran : boutons et ligne « quoi et où » dans le premier écran. */
.heros-scene { position: relative; display: grid; width: 100%; height: max(400px, min(100svh - 250px, 62vw)); overflow: hidden; }
.heros-scene > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }
.heros-photo { position: relative; z-index: 0; display: block; width: 100%; height: 100%; }
.heros-photo img { display: block; width: 100%; height: 100%; }
.heros-final img { object-fit: cover; object-position: 50% 25%; }  /* le haut de l'image (le camion) passe avant le bord de la table */
.heros-final::after { content: ""; position: absolute; inset: 0; pointer-events: none;  /* le ciel assombri sous la phrase, et le bas fondu dans le brun des boutons */
  background: linear-gradient(180deg, rgba(13,6,4,.86) 0%, rgba(13,6,4,.62) 20%, rgba(13,6,4,0) 42%), linear-gradient(0deg, var(--brun) 0%, rgba(13,6,4,0) 18%); }  /* 22/10 : plus sombre, le fond doré de sa table est lumineux */
.slogan { position: relative; z-index: 2; align-self: start; margin: 0; padding: 2.4% 20px 0; line-height: 0; }
.slogan img { display: inline-block; width: min(100%, 600px); height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 4px 14px rgba(0,0,0,.55)); }  /* 22/10 : un peu plus petite, le toit du camion reste visible */
.heros-texte { position: relative; z-index: 3; margin-top: -30px; padding: 0 24px 18px; }
.actions { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 14px; }
.heros-infos { order: 1; padding: 0 24px 44px; font: 800 21px/1.25 'Baloo 2', sans-serif; color: var(--creme); }
.heros-infos span { display: block; }
.heros-ou { margin-top: 2px; font: 500 17px/1.4 var(--texte); color: #E6D7C1; }

/* ---- bandeau ---- */
/* 04/11 (sa demande : le défilement des noms « faisait site généré ») : la bande est immobile et dit les horaires, bâtis par construit-carte.py
   depuis carte.json ; elle peut revenir à la ligne sur téléphone, une étoile sépare les segments */
.bandeau { margin: 0; text-align: center; background: var(--vert-profond); color: var(--jaune); font: 400 21px/1.35 var(--display); text-transform: uppercase; padding: 11px 24px; border-top: 4px solid var(--encre); border-bottom: 4px solid var(--encre); }
.bandeau span { display: inline-block; padding: 0 10px; }
.bandeau span + span::before { content: "★"; margin-right: 20px; font-size: .8em; opacity: .8; }

/* ---- vitrines (20/10 au soir : les mêmes sur les deux écrans) : Les Bagel's en large, Frites | Bowls, Paninis | Bagnats, Américains en large.
   Ce sont des vitrines sans prix : tout le cadre ouvre la fenêtre de sa famille, où l'on choisit et commande. ---- */
.vitrines { background: var(--creme); --pt: rgba(31,61,28,.2); padding: 120px 0 40px; overflow: hidden; }
.vitrines .contenu { max-width: 1340px; }  /* plus large que le reste de la page : les cadres prennent la place, pas le fond */
.flyers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 110px 34px; }
.flyer-bagels { grid-column: 1 / -1; }
/* le flyer : ses coins et ses pinceaux sont les images d'Antoine ; bord, liserés, trame et vignette sont en CSS pour s'adapter à toute hauteur */
.flyer { position: relative; isolation: isolate; --k: 1.15; padding: 80px 40px 104px; }
.flyer::before, .flyer::after { content: ""; position: absolute; pointer-events: none; z-index: 0; background-repeat: no-repeat; background-size: 100% 100%; }
.flyer > * { position: relative; z-index: 1; }
.flyer-jaune { color: var(--vert-profond); }
.flyer-vert { color: var(--creme); }
.flyer-vertical { padding-top: 92px; }
/* cadres:debut */
/* généré par outils/construit-cadres.py à partir de cadres.json : ne pas retoucher à la main */
.tuile-jaune { border: calc(var(--k) * 8.0px) solid #08300C; border-radius: calc(var(--k) * 36.1px); background-color: #FCC91B;
  background-image: radial-gradient(ellipse at center, transparent 48%, rgba(252, 198, 21, 0.55) 100%), radial-gradient(circle, #E5B719 2.1px, transparent 2.7px);
  background-size: 100% 100%, 9.4px 9.4px; box-shadow: inset 0 0 0 calc(var(--k) * 6.7px) #FBF7DA, inset 0 0 0 calc(var(--k) * 9.4px) #082804, inset 0 0 0 calc(var(--k) * 19.4px) #FCD304, inset 0 0 0 calc(var(--k) * 22.8px) #0D2D07, 0 calc(var(--k) * 6.7px) 0 #0E310E, 0 0 calc(var(--k) * 26px) rgba(6, 40, 10, .45); }
.tuile-jaune::before { right: calc(var(--k) * 22.8px); top: calc(var(--k) * 22.8px); border-top-right-radius: calc(var(--k) * 5.4px); width: 22.91%; aspect-ratio: 269 / 314; background-image: url("img/cadres/jaune-v-hd.webp"); }
.tuile-jaune::after { left: calc(var(--k) * 22.8px); bottom: calc(var(--k) * 22.8px); border-bottom-left-radius: calc(var(--k) * 5.4px); width: 34.40%; aspect-ratio: 404 / 732; background-image: url("img/cadres/jaune-v-bg.webp"); }
.tuile-vert { border: calc(var(--k) * 7.6px) solid #063011; border-radius: calc(var(--k) * 29.8px); background-color: #0E381A;
  background-image: radial-gradient(ellipse at center, transparent 48%, rgba(14, 54, 24, 0.55) 100%), radial-gradient(circle, #1B542B 2.0px, transparent 2.6px);
  background-size: 100% 100%, 8.9px 8.9px; box-shadow: inset 0 0 0 calc(var(--k) * 6.3px) #F9F6DD, inset 0 0 0 calc(var(--k) * 8.2px) #021D0A, inset 0 0 0 calc(var(--k) * 18.4px) #FAC628, inset 0 0 0 calc(var(--k) * 23.5px) #0B240D, 0 calc(var(--k) * 7.6px) 0 #021D03, 0 0 calc(var(--k) * 26px) rgba(6, 40, 10, .45); }
.tuile-vert::before { right: calc(var(--k) * 23.5px); top: calc(var(--k) * 23.5px); border-top-right-radius: calc(var(--k) * 0.0px); width: 34.09%; aspect-ratio: 423 / 761; background-image: url("img/cadres/vert-v-hd.webp"); }
.tuile-vert::after { left: calc(var(--k) * 23.5px); bottom: calc(var(--k) * 23.5px); border-bottom-left-radius: calc(var(--k) * 0.0px); width: 34.16%; aspect-ratio: 424 / 766; background-image: url("img/cadres/vert-v-bg.webp"); }
/* cadres:fin */
.panneau-titre { position: absolute; left: -22px; top: -72px; z-index: 4; margin: 0; line-height: 0; }
.panneau-titre img { width: min(44vw, 540px); height: auto; filter: drop-shadow(5px 7px 0 rgba(0,0,0,.28)); transform: rotate(-5deg); transform-origin: left bottom; }
.flyer-vertical .panneau-titre { left: 50%; top: -64px; transform: translateX(-50%); }
.flyer-vertical .panneau-titre img { width: min(26vw, 340px); transform: rotate(-4deg); transform-origin: center; }
#frites .panneau-titre img { width: min(22vw, 280px); }
/* 28/10 : les familles qui n'ont pas encore leur lettrage en image (Sandwichs, Assiettes, Desserts, Boissons) : le nom en texte, Titan One en relief,
   à cheval sur le bord du cadre comme les lettrages. À remplacer par une image quand Antoine la fournit (lot 3 du plan v3). */
.panneau-texte { line-height: 1; }
.flyer-vertical .panneau-texte { top: -28px; }
.panneau-texte span { display: inline-block; padding: 0 8px; font: 400 clamp(32px, 3.2vw, 48px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; transform: rotate(-4deg); white-space: nowrap; }
.flyer-jaune .panneau-texte span { color: var(--vert-profond); text-shadow: 0.02em 0.02em 0 var(--creme), 0.04em 0.04em 0 var(--creme), 0.06em 0.06em 0 var(--creme), .11em .11em 0 rgba(31,61,28,.35); }
.flyer-vert .panneau-texte span { color: var(--jaune); text-shadow: 0.02em 0.02em 0 var(--encre), 0.04em 0.04em 0 var(--encre), 0.06em 0.06em 0 var(--encre), .11em .11em 0 rgba(0,0,0,.4); }
/* les produits : des images seules (noms, prix et « Ajouter » sont dans la fenêtre) */
.vedettes { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: 48px; }
.produits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; align-items: end; }
.produit { display: block; }
.produit .visuel { position: relative; display: block; }
.produit img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 12px rgba(0,0,0,.32)) drop-shadow(0 4px 3px rgba(0,0,0,.2)); }
.vedettes .produit img { filter: drop-shadow(8px 10px 0 rgba(31,61,28,.28)); }
.vedettes .produit[data-id="la-bete"] .visuel { transform: rotate(-4deg); }       /* inclinés comme sur sa maquette */
.vedettes .produit[data-id="monster-et-cie"] .visuel { transform: rotate(8deg); }
.note-illus { margin: 28px 24px 0; font-size: 15px; color: var(--gris); text-align: center; }
/* le lien qui couvre tout le cadre et ouvre sa fenêtre */
.ouvrir { display: flex; position: absolute; inset: 0; z-index: 3; align-items: flex-end; justify-content: center; padding-bottom: 32px; border-radius: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ouvrir span { font: 800 17px/1 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .03em; padding: .8em 1.3em; background: var(--creme); color: var(--vert-profond); border: 3px solid var(--blanc); border-radius: 12px; box-shadow: 4px 4px 0 var(--vert-profond); transform: rotate(-2deg); transition: transform .12s ease-out, box-shadow .12s ease-out; }
.flyer-vert .ouvrir span { background: var(--jaune); box-shadow: 4px 4px 0 var(--encre); }
.ouvrir:active span { transform: rotate(-2deg) translate(2px, 2px); box-shadow: 1px 1px 0 var(--vert-profond); }
@media (hover: hover) { .ouvrir:hover span { transform: rotate(-2deg) translate(2px, 2px); box-shadow: 2px 2px 0 var(--vert-profond); } }
.ouvrir:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }

/* ---- la vitrine des américains (20/10) : une photo, et tout le cadre ouvre la fenêtre des 24 viandes, sur les deux écrans ---- */
.flyer-americains { grid-column: 1 / -1; padding-bottom: 104px; text-align: center; }
.americains-des { margin: 0 auto 6px; max-width: 640px; font: 700 19px/1.35 var(--texte); color: var(--vert-profond); }
.americains-visuel img { display: block; width: min(100%, 980px); height: auto; margin: 0 auto; filter: drop-shadow(0 18px 14px rgba(0,0,0,.3)) drop-shadow(0 4px 3px rgba(0,0,0,.18)); }
#americains .ouvrir { padding-bottom: 34px; }
#americains .ouvrir span { font: 800 18px/1 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .03em; padding: .8em 1.3em; background: var(--vert-profond); color: var(--jaune); border: 3px solid var(--blanc); border-radius: 12px; box-shadow: 4px 4px 0 var(--encre); transform: rotate(-2deg); transition: transform .12s ease-out, box-shadow .12s ease-out; }
@media (hover: hover) { #americains .ouvrir:hover span { box-shadow: 2px 2px 0 var(--encre); } }
/* la fenêtre : le format en haut (reste visible au défilement), puis les viandes par famille */
.famille { margin: 16px 0 2px; font-family: var(--display); font-weight: 400; font-size: 18px; text-transform: uppercase; color: var(--toast-f); }

/* ---- les fenêtres de produits : un toucher sur un cadre (téléphone) ouvre sa famille, qui monte du bas ---- */
.feuille { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; height: 92dvh; max-height: 92dvh; border-radius: 22px 22px 0 0; background: var(--creme); color: var(--encre); overflow: hidden; flex-direction: column; box-shadow: 0 -6px 0 var(--encre); }
.feuille[open] { display: flex; animation: feuille-monte .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes feuille-monte { from { transform: translateY(48px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .feuille[open] { animation: none; } }
.feuille::backdrop { background: rgba(23,32,15,.6); }
.feuille-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 12px 14px; background: var(--jaune); border-bottom: 4px solid var(--encre); }
.feuille-tete h2 { margin: 0; line-height: 0; }
.feuille-tete h2 img { width: min(56vw, 250px); height: auto; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.28)); transform: rotate(-4deg); }
.feuille .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }  /* au-dessus du bouton « Voir ma commande » de la fenêtre */
@media (min-width: 821px) { .feuille .toast { bottom: auto; top: 14px; } }  /* sur ordinateur la fenêtre est centrée : le message passe au-dessus d'elle */
.feuille .fermer { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--encre); background: var(--creme); color: var(--vert-profond); font: 800 26px/1 'Baloo 2', sans-serif; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; box-shadow: 3px 3px 0 var(--encre); }
.feuille .fermer:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
.feuille-corps { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: 4px 14px 18px; }
.feuille-tete h2 .titre-texte { display: inline-block; font: 400 28px/1 var(--display); text-transform: uppercase; color: var(--vert-profond); transform: rotate(-3deg); text-shadow: .06em .06em 0 var(--creme), .12em .12em 0 rgba(31,61,28,.3); }
.fiche-tag { display: inline-block; margin: 6px 0 0; font: 800 12px/1 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 5px 8px; border-radius: 6px; background: rgba(31,61,28,.12); color: var(--vert-profond); }
/* audit du 20/10 : les choix d'un plat (taille des frites, format des américains et des nuggets, version du Bagel's) ; depuis le 31/10 dans la fiche du plat */
.choix { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.choix label, .evt-types label { position: relative; }
.choix input, .evt-types input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix span, .evt-types span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 4px; border: 3px solid var(--encre); border-radius: 12px; background: #fff; font: 800 16px/1.1 'Baloo 2', sans-serif; color: var(--vert-profond); }
.choix small { font: 600 14px/1.1 var(--texte); color: var(--gris); }
.choix input:checked + span, .evt-types input:checked + span { background: var(--vert-profond); color: var(--jaune); box-shadow: 3px 3px 0 var(--dore); }
.choix input:checked + span small { color: var(--creme); }
.choix input:focus-visible + span, .evt-types input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }
/* 28/10 (lot 2) : le bowl sur mesure, dans la fenêtre Bowls et dans le composeur : des cases à cocher par groupe, une sauce, le prix qui suit (script.js) */
.mesure { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; border: 0; min-width: 0; }
.mesure legend { float: left; width: 100%; padding: 0 0 6px; font: 800 12px/1 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--vert-profond); }
.mesure label { position: relative; }
.mesure input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mesure span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 11px; border: 3px solid var(--encre); border-radius: 10px; background: #fff; font: 800 14px/1.1 'Baloo 2', sans-serif; color: var(--vert-profond); }
.mesure small { font: 600 12px/1 var(--texte); color: var(--gris); }
.mesure input:checked + span { background: var(--vert-profond); color: var(--jaune); box-shadow: 3px 3px 0 var(--dore); }
.mesure input:checked + span small { color: var(--creme); }
.mesure input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }
.fiche-mesure .mesure, .fiche-mesure .mesure-note { grid-column: 1 / -1; }
.mesure-note { margin: 10px 0 0; font-size: 14px; color: var(--gris); }
.mesure-aide { font-weight: 700; }  /* 30/10 : « Coche au moins un ingrédient », tant que le bowl est vide */
.cmp-options.cmp-mesure { flex-direction: column; align-items: stretch; }  /* plus précis que .cmp-options, sinon les petits groupes se centrent */
.cmp-mesure .mesure legend { color: var(--jaune); }
.cmp-mesure .mesure-note { color: #E6D7C1; }
.cmp-mesure-ok { display: none; }
.btn-ajout { min-height: 44px; padding: 0 16px; border: 3px solid var(--encre); border-radius: 12px; background: var(--vert-profond); color: var(--jaune); font: 800 16px/1 'Baloo 2', sans-serif; cursor: pointer; box-shadow: 3px 3px 0 var(--dore); -webkit-tap-highlight-color: transparent; }
.btn-ajout:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--dore); }
.formats-aide { margin: 0 0 6px; font-size: 15px; color: var(--gris); }  /* 30/10 (réponse 16) : ce que contient chaque format, hors de la barre collée */
.vers-panier { width: 100%; font-size: 17px; }
/* 31/10 (lot 2) : la fiche du plat. Téléphone : une feuille qui monte du bas, à la hauteur de son contenu (92 % de l'écran au plus) ;
   ordinateur : une fenêtre au centre (règles de .feuille). La photo sur la couleur et la trame de sa famille, le nom, le prix, la
   composition, le choix ; les deux boutons restent collés en bas pendant qu'on fait défiler. */
.fiche-plat { height: fit-content; }  /* une fenêtre modale est tenue en haut et en bas de l'écran : « auto » l'étirait jusqu'à 92 % ; elle prend la hauteur de son contenu */
.fiche-plat > .fermer { position: absolute; top: 10px; right: 10px; z-index: 3; }
.fp-corps { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.fp { display: flex; flex-direction: column; }
.fp[hidden] { display: none; }
.fp-photo { display: grid; place-items: center; padding: 26px 20px 18px; border-bottom: 4px solid var(--encre); background: radial-gradient(circle, #E5B719 2.1px, transparent 2.7px) 0 0 / 9.4px 9.4px, #FCC91B; }
.fp-vert .fp-photo { background: radial-gradient(circle, #1B542B 2px, transparent 2.6px) 0 0 / 8.9px 8.9px, #0E381A; }
.fp-photo img { width: min(72vw, 330px); max-height: 34dvh; height: auto; object-fit: contain; filter: drop-shadow(0 12px 10px rgba(0,0,0,.3)); }
.fp-texte { padding: 16px 18px 0; }
.fp-sans-photo .fp-texte { padding: 22px 70px 0 18px; }  /* pas de photo : la croix est à côté du nom */
.fp-texte h2 { margin: 0; font: 400 26px/1.05 var(--display); text-transform: uppercase; color: var(--vert-profond); text-wrap: balance; }
.fp-prix { margin: 6px 0 0; font: 800 19px/1.2 'Baloo 2', sans-serif; color: var(--encre); }
.fp-desc { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--gris); }
.fp .choix, .fp .mesure, .fp .formats-aide, .fp .mesure-note { margin-left: 18px; margin-right: 18px; }
.fp .choix { margin-top: 16px; }
.fp .choix legend { padding: 0 0 8px; font: 800 13px/1 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--vert-profond); }
.fp .choix:has(label:nth-of-type(4)) { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* 4 choix et plus (menu enfant) : sur deux rangées */
.fp .formats-aide { margin-top: 10px; }
.fp-note { margin: 14px 18px 0; font-size: 14px; line-height: 1.45; color: var(--gris); }
.fp-pied { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 8px; margin-top: 18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 3px solid var(--encre); background: var(--creme); }
.fp-ajouter { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; min-height: 54px; font-size: 18px; }
.fp-ajouter .px { font: inherit; color: inherit; }
.fp-sep { margin: 0 .4em; }
.fp-ajouter[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* 02/11 nuit (sa demande) : « En faire un menu » vient d'abord et prend le grand bouton vert ; « Ajouter à ma commande » passe dessous en blanc.
   Seul (desserts, boissons, menu enfant), « Ajouter » garde le grand bouton vert. */
.fp-menu { min-height: 54px; border: 3px solid var(--encre); border-radius: 12px; background: var(--vert-profond); color: var(--jaune); font: 800 18px/1 'Baloo 2', sans-serif; cursor: pointer; box-shadow: 3px 3px 0 var(--dore); -webkit-tap-highlight-color: transparent; }
.fp-menu:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--dore); }
.fp-menu + .fp-ajouter { min-height: 48px; background: #fff; color: var(--vert-profond); font-size: 16px; box-shadow: none; }
.fp-menu + .fp-ajouter:active { box-shadow: none; }
.fp-ajouter:focus-visible, .fp-menu:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
@media (min-width: 821px) { .feuille.fiche-plat { width: 520px; height: fit-content; } .fp-photo { padding: 18px 20px 14px; } .fp-photo img { width: 250px; max-height: 210px; } }  /* .feuille (560 px) est écrite plus bas ;
   revue du 02/11 : son « height: auto » écrasait le fit-content de la fiche, étirée à 86 % de l'écran avec un grand vide sous les boutons */
@media (min-width: 821px) {  /* sur ordinateur, la fenêtre se pose au centre */
  .feuille { margin: auto; width: 560px; height: auto; max-height: 86vh; border: 4px solid var(--encre); border-radius: 22px; box-shadow: 10px 10px 0 var(--dore); }
}
.produits .produit:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 50%; }  /* 5 bagnats : le dernier au centre */
/* des miettes au pied des deux bagels (semis généré sur Higgsfield) : seulement chez Les Bagel's, son choix du 20/10 */
#bagels .produit .visuel::before { content: ""; position: absolute; z-index: 0; left: -8%; right: -8%; bottom: 8%; aspect-ratio: 3.98; transform: translateY(50%);
  background: url("img/miettes-bagels.webp") center / 100% 100% no-repeat; pointer-events: none; }
#bagels .produit:nth-child(even) .visuel::before { transform: translateY(50%) scaleX(-1); }
/* l'ordre et la cascade de ses maquettes : la colonne de gauche descend chez Frites et Paninis ; bowls : chèvre et tenders, puis apéro et norvégienne */
#frites .produit[data-id="nuggets-x5"] { order: 1; }
#frites .produit[data-id="frites-nature"] { order: 2; }
#frites .produit[data-id="frites-cheddar-bacon"] { order: 3; }
#frites .produit[data-id="frites-cheddar"] { order: 4; }
#frites .produit[data-id="nuggets-x5"], #frites .produit[data-id="frites-cheddar-bacon"], #paninis .produit:nth-child(odd) { transform: translateY(14%); }
#frites .produits, #paninis .produits { padding-bottom: 9%; }
#bowls .produit[data-id="salade-de-chevre"] { order: 1; }
#bowls .produit[data-id="salade-de-tenders"] { order: 2; }
#bowls .produit[data-id="la-bowls-apero"] { order: 3; }
#bowls .produit[data-id="la-norvegienne"] { order: 4; }
.produit.a-venir .visuel { aspect-ratio: 1; max-width: 190px; margin: 0 auto; border: 3px dashed currentColor; border-radius: 50%; opacity: .55; display: grid; place-content: center; gap: 4px; font: 800 13px/1.2 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 20px; box-sizing: border-box; }
.produit.a-venir b { font: 800 15px/1.15 'Baloo 2', sans-serif; letter-spacing: .02em; }  /* 28/10 : le nom du plat qui attend sa photo, la pastille plafonnée à 190 px */
.produit.a-venir small { font-size: 11px; }
/* le « + » des accordéons de la carte */
.plus-ligne { width: 44px; height: 44px; border-radius: 50%; background: var(--vert-profond); color: var(--jaune); border: 3px solid #fff; box-shadow: 3px 3px 0 rgba(31,61,28,.35); font: 800 26px/1 'Baloo 2', sans-serif; cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform .15s ease-out, box-shadow .15s ease-out; }
.plus-ligne:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(31,61,28,.35); }
@media (hover: hover) { .plus-ligne:hover { transform: translate(1px, 1px); } }

/* le bloc sous les vitrines : le menu enfant (choix du plat, Ajouter) et le mur des sauces, dans l'allure des cartes de « Venir nous voir » */
/* 22/10 (sa demande) : le menu enfant et le mur des sauces, deux cadres comme les autres (cadre vert, cadre jaune), à la suite des Américains */
.extra-note { margin: 12px 0 0; font-size: 15px; color: var(--gris); }
.sauces-sous { margin: 0; font: 800 18px/1.2 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--vert-profond); }
.mur-sauces { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }  /* deux colonnes : le mur remplit son cadre, à la hauteur du menu enfant */
.sauce { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; cursor: pointer; text-align: left;
  background: var(--creme); color: var(--vert-profond); border: 3px solid var(--encre); border-radius: 12px; box-shadow: 3px 3px 0 var(--encre);
  font: 800 16px/1.1 'Baloo 2', sans-serif; text-transform: uppercase; transition: transform .15s ease-out; -webkit-tap-highlight-color: transparent; }
.sauce svg { flex: none; width: 20px; height: 24px; fill: var(--sc); stroke: var(--encre); stroke-width: 1.6; }
.sauce:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
@media (hover: hover) and (pointer: fine) { .sauce:hover { transform: translateY(-2px); } }
.sauces-note { margin: 4px 0 0; font: 600 15px/1.3 var(--texte); color: var(--vert-profond); text-align: center; }
/* 28/10 : Desserts et Boissons, deux cadres en listes avec + (depuis les catégories de la carte) ; une ligne sans prix (bières, Red Bull) n'a pas de + */
.flyer-extra { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.flyer-extra .panneau-titre { position: absolute; }
.flyer-vert .sauces-note, .flyer-vert .sauces-sous, .flyer-vert .extra-note { color: var(--creme); }
.extra-carte { width: 100%; max-width: 440px; background: var(--creme); color: var(--encre); border: 3px solid var(--encre); border-radius: 18px; box-shadow: 6px 6px 0 var(--dore); padding: 6px 18px 10px; }
.extra-carte .plats { margin-top: 0; }
.extra-carte .plats li { padding: 7px 0; }
.extra-carte .plats li:last-child { border-bottom: 0; }
.extra-carte .prixl { font-size: 19px; }
.prixl.a-confirmer { font: 700 14px/1.2 var(--texte); color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.extra-note-centre { text-align: center; max-width: 440px; }
html:not(.js) .extra-carte .plus-ligne { display: none; }  /* sans script, pas de panier */
html:not(.js) .btn-panier, html:not(.js) .rayon-action { display: none; }  /* revue du 30/10 : sans script, « Ma commande » et « Choisir ma sauce dans un menu » ne feraient rien */
/* ---- Ma commande (panier) ---- */
.btn-panier .compte { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--toast-f); color: #fff; font: 800 14px/22px 'Baloo 2', sans-serif; text-align: center; border: 2px solid #fff; }
.toast { width: max-content; max-width: calc(100vw - 32px); text-align: center; position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 60; background: var(--vert-profond); color: var(--creme); border: 3px solid var(--creme); box-shadow: 5px 5px 0 var(--encre); border-radius: 12px; padding: 12px 18px; font: 800 16px 'Baloo 2', sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s ease-out, transform .2s ease-out; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.barre-commande { display: none; }
.panier { border: 4px solid var(--encre); border-radius: 22px; padding: 0; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--creme); color: var(--encre); box-shadow: 10px 10px 0 var(--dore); overflow: hidden; }
.panier::backdrop { background: rgba(23,32,15,.55); }
.panier-tete { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--jaune); border-bottom: 4px solid var(--encre); }
.panier-tete h2 { font-size: 28px; text-transform: uppercase; color: var(--vert-profond); }
.fermer { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--encre); background: var(--creme); color: var(--encre); font: 800 26px/1 'Baloo 2', sans-serif; cursor: pointer; box-shadow: 3px 3px 0 var(--encre); display: grid; place-items: center; padding: 0; }
.panier-corps { padding: 16px 20px 20px; overflow: auto; max-height: calc(100dvh - 32px - 84px); }
.panier-vide { margin: 6px 0 14px; color: var(--gris); }
.panier-liste { list-style: none; margin: 0; padding: 0; }
.panier-liste li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 2px dashed #D9CFBB; }
.panier-liste .nom { display: block; font: 800 16px/1.2 'Baloo 2', sans-serif; text-transform: uppercase; color: var(--vert-profond); }
.panier-liste .sous { display: block; font-size: 14px; color: var(--gris); }
.qte { display: inline-flex; align-items: center; gap: 6px; }
.qte button { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--encre); background: var(--jaune); color: var(--vert-profond); font: 800 22px/1 'Baloo 2', sans-serif; cursor: pointer; padding: 0; box-shadow: 2px 2px 0 var(--encre); }
.qte .n { min-width: 26px; text-align: center; font-family: var(--display); font-size: 18px; }
.montant-ligne { grid-column: 2; text-align: right; font-family: var(--display); font-size: 17px; color: var(--vert-profond); }
.panier-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 6px; font: 800 18px 'Baloo 2', sans-serif; text-transform: uppercase; }
.panier-total strong { font-family: var(--display); font-weight: 400; font-size: 28px; color: var(--vert-profond); }
.panier-note { font-size: 14px; color: var(--gris); margin: 0 0 12px; }
.panier-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.panier-champs label { display: grid; gap: 4px; font: 700 13px var(--texte); text-transform: uppercase; letter-spacing: .06em; color: var(--vert-profond); }
.panier-champs input, .panier-champs textarea { font: 500 16px var(--texte); padding: 10px 12px; border: 3px solid var(--encre); border-radius: 10px; background: #fff; min-height: 44px; color: var(--encre); }
.panier-champs .large, .panier-champs .aide { grid-column: 1 / -1; }
.panier-champs textarea { min-height: 66px; line-height: 1.35; resize: vertical; }
.panier-champs .aide { margin: -4px 0 2px; font-size: 14px; color: var(--gris); }
/* 03/11 (la gérante) : « Je paierai en espèces », pour que le camion prépare la monnaie ; lue dans le SMS et le journal */
.panier-champs .case { display: flex; align-items: center; gap: 10px; min-height: 44px; text-transform: none; letter-spacing: 0; font: 600 15px var(--texte); color: var(--encre); }
.panier-champs .case input { width: 24px; height: 24px; min-height: 0; margin: 0; padding: 0; accent-color: var(--vert); }
.panier-ordi { margin: 2px 0 0; font-size: 14px; color: var(--gris); }
.carte-action { margin: 16px 0 0; text-align: center; }
.panier-actions { display: grid; gap: 10px; }
.panier-actions .btn { width: 100%; }
.panier-actions .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.vider { background: none; border: 0; color: var(--gris); font: 600 14px var(--texte); text-decoration: underline; cursor: pointer; padding: 10px; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .toast, .barre-commande, .ouvrir span, .plus-ligne { transition: none; } }

.plats { list-style: none; margin: 14px 0 0; padding: 0; }
.plats li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid #E6DCC8; }
.plats .plat-l { display: block; flex: 1 1 auto; }
.plats li .plus-ligne { flex: none; align-self: center; }  /* bagels et bowls se commandent aussi depuis la carte */
.plats .nom { display: block; font-weight: 700; color: var(--vert-profond); }
.plats .desc { display: block; font-size: 16px; color: var(--gris); }
.prixl { font-family: var(--display); font-size: 20px; color: var(--vert-profond); white-space: nowrap; }
.nuage { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; font: 800 17px/1.3 'Baloo 2', sans-serif; text-transform: uppercase; color: var(--vert-profond); }
/* revue du 30/10 : les sauces ne se touchent pas ; en étiquettes à cadre et ombre, elles ressemblaient à des boutons. Une liste écrite,
   séparée par des étoiles comme le bandeau des bagels (l'étoile est muette pour les lecteurs d'écran qui comprennent « / "" ») */
.nuage li { white-space: nowrap; }
.nuage li:not(:last-child)::after { content: "★"; content: "★" / ""; margin: 0 10px; font-size: .75em; vertical-align: .1em; color: var(--toast-texte); }
/* ---- le camion ---- */
/* ---- « Compose ton repas » (22/10, sa demande, d'après le ticket de la démo Street) : un bagel, un accompagnement, une sauce ;
   l'aperçu change et le ticket de caisse s'imprime en direct (script.js). Sans JavaScript la section est cachée (elle ne ferait rien). ---- */
html:not(.js) .composeur { display: none; }
.composeur { background: var(--vert-profond); color: var(--creme); --pt: rgba(255,255,255,.12); padding: 64px 0 72px; }
.composeur h2 { font-size: clamp(34px, 5vw, 56px); }
.cmp-intro { max-width: 640px; margin: 10px 0 0; font-size: 18px; color: #E6D7C1; }
.cmp { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; margin-top: 30px; }
.cmp-apercu { position: sticky; top: 96px; display: grid; justify-items: center; gap: 26px; }
.cmp-scene { position: relative; width: min(100%, 380px); aspect-ratio: 1.12; }
.cmp-scene::before { content: ""; position: absolute; inset: 12% 10% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(246,196,83,.45), transparent 72%); filter: blur(18px); }
.cmp-bagel { position: absolute; left: 0; top: 0; width: 78%; height: 88%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 18px rgba(0,0,0,.5)); transition: opacity .18s ease-out, transform .22s ease-out; }
.cmp-cote { position: absolute; right: 0; bottom: 0; width: 44%; height: 50%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)); transition: opacity .18s ease-out, transform .22s ease-out; }
.cmp-bagel.swap, .cmp-cote.swap { opacity: 0; transform: scale(.92) translateY(8px); }
.cmp-cote.cache { opacity: 0; transform: scale(.4) translateY(20px); }
/* le ticket de caisse : papier, bord déchiré, bout de scotch, total au tampon */
.ticket { position: relative; width: min(100%, 310px); background: #FBF6EA; color: #221F1A; border-radius: 3px 3px 0 0; padding: 18px 18px 20px;
  font: 400 15px/1.5 ui-monospace, 'SF Mono', Menlo, 'Courier New', monospace; transform: rotate(-1.2deg); box-shadow: 0 18px 30px -14px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.3); }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px;
  background: linear-gradient(-45deg, transparent 7px, #FBF6EA 0) 0 0 / 14px 10px repeat-x, linear-gradient(45deg, transparent 7px, #FBF6EA 0) 7px 0 / 14px 10px repeat-x; }
.ticket::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 24px; transform: translateX(-50%) rotate(-2.4deg); background: rgba(255,255,255,.3); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.ticket-tete { text-align: center; padding-bottom: 8px; border-bottom: 2px dashed rgba(0,0,0,.28); }
.ticket-marque { font: 400 20px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--vert-profond); }
.ticket-tete small { display: block; margin-top: 2px; font-size: 13px; color: #6B6455; }
.ticket-lignes { list-style: none; margin: 0; padding: 10px 0; min-height: 4.5em; border-bottom: 2px dashed rgba(0,0,0,.28); }
.ticket-lignes li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ticket-lignes b { font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ticket-lignes li.neuve { animation: imprime .22s ease-out; }
@keyframes imprime { from { opacity: 0; transform: translateY(-5px); } }
.ticket-total { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; }
.ticket-total > span { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: #4D463A; }
.ticket-tampon { display: inline-block; font: 400 24px/1.2 var(--display); color: var(--toast-f); border: 3px solid var(--toast-f); border-radius: 7px; padding: 1px 10px; transform: rotate(-4deg); font-variant-numeric: tabular-nums; }
.ticket-merci { margin: 12px 0 0; text-align: center; font-style: italic; font-size: 13px; color: #6B6455; }
.ticket.pulse { animation: ticket-pop .45s cubic-bezier(.2, 1.2, .35, 1); }
@keyframes ticket-pop { 40% { transform: rotate(.5deg) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .ticket.pulse, .ticket-lignes li.neuve { animation: none; } .cmp-bagel, .cmp-cote { transition: none; } }
/* les choix : une carte par plat, une puce par sauce ; le choix coché passe en jaune avec sa coche */
.cmp-etape { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.cmp-etape legend { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0; font: 800 16px/1 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--jaune); }
.cmp-etape legend i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--jaune); color: var(--vert-profond); font-style: normal; font-size: 15px; }
.cmp-rang { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.cmp-carte, .cmp-puce { position: relative; cursor: pointer; background: var(--creme); color: var(--vert-profond); border: 3px solid var(--encre); box-shadow: 3px 3px 0 var(--encre);
  transition: transform .15s ease-out, background-color .15s ease-out; -webkit-tap-highlight-color: transparent; }
.cmp-carte { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 10px; border-radius: 14px; text-align: center; }
.cmp-carte input, .cmp-puce input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cmp-img { display: grid; place-items: center; width: 100%; height: 78px; }
.cmp-img img { max-width: 100%; max-height: 78px; width: auto; height: auto; filter: drop-shadow(0 5px 5px rgba(0,0,0,.25)); }
.cmp-sans { font: 400 22px/1 var(--display); color: rgba(31,61,28,.35); text-transform: uppercase; }
.cmp-img.cmp-avenir { width: 66px; height: 66px; margin: 6px auto; padding: 8px; border: 2px dashed rgba(31,61,28,.35); border-radius: 50%; font: 800 10px/1.2 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .04em; color: rgba(31,61,28,.5); text-align: center; }  /* 28/10 : un plat sans photo */
.cmp-puce .cmp-px { margin-left: 8px; font-size: 14px; }  /* 28/10 : les boissons montrent leur prix (1 € ou 2 €) */
.cmp-note { margin-top: 12px; font: 600 14px/1.35 var(--texte); text-transform: none; letter-spacing: 0; color: #E6D7C1; max-width: 560px; }  /* 28/10 : la mention sur l'alcool, sous les bières de l'étape 4 */
.cmp-sous-titre.cmp-note { display: block; }
.cmp-nom { font: 800 15px/1.15 'Baloo 2', sans-serif; }
.cmp-px { font: 600 15px/1.2 var(--texte); color: var(--gris); }
.cmp-sauces { display: flex; flex-wrap: wrap; gap: 10px; }
.cmp-puce { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 13px; border-radius: 10px; font: 800 15px/1 'Baloo 2', sans-serif; text-transform: uppercase; }
.cmp-carte.on, .cmp-puce.on { background: var(--jaune); box-shadow: 3px 3px 0 var(--dore); transform: translateY(-2px); }
.cmp-carte.on::after, .cmp-puce.on::after { content: "✓"; position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--toast-f); color: #fff; border: 2px solid var(--encre); font: 800 13px/1 'Baloo 2', sans-serif; }
.cmp-carte:has(input:focus-visible), .cmp-puce:has(input:focus-visible) { outline: 3px solid var(--jaune); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .cmp-carte:hover, .cmp-puce:hover { transform: translateY(-2px); } }
.cmp-ajouter { margin-top: 4px; }
.cmp-pas, .cmp-changer, .cmp-sous-titre, .ticket-actions, .cmp-options-plat, .cmp-opt-img { display: none; }
/* ---- 29/10 (sa demande) : la carte en 12 tuiles, à la place des 12 grands cadres. Le cadre vient de outils/construit-cadres.py
   (.tuile-jaune, .tuile-vert : couleurs de cadres.json) ; l'image ne remplit que l'intérieur ; le lettrage chevauche la bordure du haut,
   le bouton celle du bas. Toute la tuile est le lien : elle ouvre le composeur (ou la fenêtre du menu enfant, des desserts). ---- */
.tuiles { background: var(--creme); --pt: rgba(31,61,28,.2); padding: 24px 0 4px; }
/* 30/10 (sa demande, d'après Uber Eats) : les tuiles en carrousel ; la marge haute et basse de la rangée laisse la place au lettrage et au
   bouton qui débordent du cadre (une rangée qui défile coupe ce qui dépasse) */
.carrousel { position: relative; }
/* 04/11 (sa demande) : sur ordinateur la rangée va d'un bord à l'autre de l'écran, gouttière de 24 px, 5 tuiles par vue (la largeur se
   calcule sur la rangée elle-même, pas sur 100vw qui compte la barre de défilement) ; au-delà de 290 px par tuile, on en montre plus */
.tuiles .contenu { max-width: none; padding: 0; }
.tuiles-rang { display: flex; gap: 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none;
  margin: 0; padding: 56px 24px 46px; }
.tuiles-rang::-webkit-scrollbar { display: none; }
.car-fleche { display: none; }
.tuile { flex: 0 0 auto; width: clamp(220px, calc((100% - 104px) / 5), 290px); scroll-snap-align: start; position: relative; isolation: isolate; display: block; aspect-ratio: 1; --k: .43; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .15s ease-out; }
.tuile::before, .tuile::after { content: ""; position: absolute; z-index: 2; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.tuile.tuile-jaune::before { width: 15%; }
.tuile.tuile-jaune::after { width: 14%; }
.tuile.tuile-vert::before, .tuile.tuile-vert::after { width: 16%; }  /* les pinceaux des cadres verticaux, à l'échelle d'une tuile carrée */
.tuile-photo { position: absolute; inset: calc(var(--k) * 23px); z-index: -1; overflow: hidden; border-radius: calc(var(--k) * 12px); }
.tuile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tuile-titre { position: absolute; left: 50%; top: -15%; z-index: 4; width: 70%; margin: 0; transform: translateX(-50%); line-height: 0; }
.tuile-titre img { width: 100%; height: auto; transform: rotate(-4deg); filter: drop-shadow(5px 7px 0 rgba(0,0,0,.28)); }
.tuile-cta { position: absolute; left: 50%; bottom: calc(var(--k) * -26px); z-index: 4; transform: translateX(-50%) rotate(-2deg); white-space: nowrap;
  font: 800 15px/1 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .03em; padding: .8em 1.1em; border: 3px solid #fff; border-radius: 12px;
  box-shadow: 4px 4px 0 var(--encre); transition: transform .12s ease-out, box-shadow .12s ease-out; }
.tuile-cta .cta-court { display: none; }
.tuiles-points { display: none; }
.tuile-jaune .tuile-cta { background: var(--vert-profond); color: var(--jaune); }
.tuile-vert .tuile-cta { background: var(--jaune); color: var(--vert-profond); }
.tuile:active .tuile-cta { transform: translateX(-50%) rotate(-2deg) translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
@media (hover: hover) and (pointer: fine) { .tuile:hover { transform: translateY(-4px); } .tuile:hover .tuile-cta { box-shadow: 2px 2px 0 var(--encre); } }
.tuile:focus-visible { outline: 3px solid var(--bleu); outline-offset: 6px; border-radius: 12px; }
/* pas encore de visuel (sandwichs, assiettes : composition attendue des gérantes) : la tuile écrit les noms des plats */
.tuile-liste { position: absolute; inset: 20% 8% 17%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .3em;
  font: 400 clamp(14px, 1.3vw, 19px)/1.1 var(--display); text-transform: uppercase; text-align: center; white-space: nowrap; }  /* un nom par ligne, jamais coupé */
.tuile-jaune .tuile-liste { color: var(--vert-profond); }
.tuile-vert .tuile-liste { color: var(--jaune); }
.tuile-liste span:nth-child(odd) { transform: rotate(-2deg); }
.tuile-liste span:nth-child(even) { transform: rotate(1.5deg); }
@media (hover: hover) and (pointer: fine) and (min-width: 821px) {  /* ordinateur : deux flèches de part et d'autre du carrousel */
  html.js .car-fleche { display: grid; place-items: center; position: absolute; top: 50%; z-index: 6; width: 48px; height: 48px; margin-top: -24px; padding: 0 0 4px;
    border: 3px solid var(--encre); border-radius: 50%; background: var(--creme); color: var(--vert-profond); font: 800 30px/1 'Baloo 2', sans-serif; cursor: pointer;
    box-shadow: 3px 3px 0 var(--encre); transition: opacity .2s ease-out, transform .15s ease-out; }
  .car-prec { left: 10px; }
  .car-suiv { right: 10px; }
  html.js .car-fleche:disabled { opacity: 0; pointer-events: none; }
  .car-fleche:active { transform: translate(2px, 2px); }
}

/* ---- 30/10 (sa demande, PLAN-carte-facon-appli-2026-10-30.md) : la carte façon appli de livraison. La barre des onglets se colle sous
   l'en-tête (--h-entete, mesurée par script.js) tant qu'on est dans la carte, et souligne le rayon où l'on se trouve ; puis « Notre
   sélection », « Parcourez le menu » et un rayon par famille : des cartes (photo, +, nom, prix, description), ou des rangées pour les
   listes sans photo. La structure vient d'Uber Eats, l'allure reste celle du site. ---- */
.onglets { position: sticky; top: var(--h-entete, 76px); z-index: 15; display: flex; align-items: stretch;
  padding: 0 max(12px, calc((100% - var(--largeur)) / 2 + 12px)); background: var(--creme); border-bottom: 2px solid #D9CFBB; }
.onglets-tout { flex: none; display: grid; place-items: center; width: 50px; min-height: 52px; padding: 0; background: none; border: 0; color: var(--vert-profond); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.onglets-tout svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
html:not(.js) .onglets-tout { display: none; }
.onglets-rang { position: relative; flex: 1; min-width: 0; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.onglets-rang::-webkit-scrollbar { display: none; }
.onglets-rang a { flex: none; display: flex; align-items: center; min-height: 52px; padding: 0 14px; color: var(--gris); font: 800 16px/1 'Baloo 2', sans-serif; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -4px 0 transparent; transition: color .15s ease-out, box-shadow .15s ease-out; -webkit-tap-highlight-color: transparent; }
.onglets-rang a[aria-current] { color: var(--vert-profond); box-shadow: inset 0 -4px 0 var(--vert-profond); }
.onglets :focus-visible { outline-offset: -3px; }
.rayons { height: auto; }  /* la liste des rayons (☰) : une feuille à sa hauteur */
.rayons-liste { list-style: none; margin: 0; padding: 4px 0 8px; }
.rayons-liste a { display: flex; align-items: center; min-height: 52px; padding: 0 4px; border-bottom: 2px dashed #D9CFBB; color: var(--vert-profond); font: 800 19px/1.1 'Baloo 2', sans-serif; text-decoration: none; }
.rayons-liste a[aria-current] { color: var(--toast-f); }
.menu { background: var(--creme); padding: 4px 0 48px; }
.rayon { padding: 36px 0 8px; scroll-margin-top: 38px; }  /* + les 16 px de l'ancre (html) = les 54 px de la barre des onglets : le rayon s'arrête juste dessous */
.rayon:focus { outline: none; }
.rayon-tete { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 16px; margin-bottom: 18px; }
.rayon-lettrage { margin: 0; line-height: 0; }
.rayon-lettrage img { width: auto; height: 72px; transform: rotate(-3deg); transform-origin: left bottom; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.22)); }
.rayon-sous { margin: 0 0 4px; font: 800 14px/1.2 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--toast-texte); }  /* --toast-texte : l'orange du site assombri, lisible en petit sur le crème (5,2:1 ; --toast-f n'y fait que 4,4:1) */
.rayon-titre { margin: 0 0 18px; font-size: clamp(26px, 3vw, 36px); text-transform: uppercase; color: var(--vert-profond); text-shadow: .06em .06em 0 var(--jaune); }
.rayon-intro { margin: -4px 0 4px; color: var(--gris); }
.rayon-groupe { margin: 22px 0 2px; font: 400 19px/1.1 var(--display); text-transform: uppercase; color: var(--toast-texte); }
.rayon-note { margin: 18px 0 0; font-size: 15px; color: var(--gris); }
.rayon-action { margin: 20px 0 0; }
/* une carte de plat : toute la carte s'ouvre au toucher (script.js) ; au clavier, le + */
.cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.pc { position: relative; display: flex; flex-direction: column; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pc-photo { order: -1; position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; aspect-ratio: 1; min-height: 0; margin-bottom: 12px; padding: 9%; border: 3px solid var(--encre); border-radius: 18px;
  background: radial-gradient(circle, rgba(228,166,58,.32) 1.4px, transparent 1.9px) 0 0 / 11px 11px, #F7E8C2; box-shadow: 4px 4px 0 var(--encre); transition: transform .15s ease-out, box-shadow .15s ease-out; }
.pc-photo img { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0,0,0,.28)); }  /* 02/11 : le cadre reste carré, une photo en hauteur (La Bête) s'y range au lieu de l'allonger */
.pc-vide { display: grid; place-items: center; width: 72%; aspect-ratio: 1; padding: 10px; border: 3px dashed rgba(31,61,28,.35); border-radius: 50%; font: 800 12px/1.2 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); text-align: center; }
.pc-nom { margin: 0; font: 400 19px/1.1 var(--display); text-transform: uppercase; color: var(--vert-profond); overflow-wrap: anywhere; }
.pc-prix { margin: 5px 0 0; font: 800 17px/1.2 'Baloo 2', sans-serif; color: var(--encre); }
.pc-desc { margin: 4px 0 0; font-size: 15px; line-height: 1.35; color: var(--gris); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-plus { position: absolute; right: 10px; bottom: 10px; z-index: 1; display: grid; place-items: center; text-decoration: none; width: 44px; height: 44px; padding: 0 0 2px; border: 3px solid #fff; border-radius: 50%;
  background: var(--vert-profond); color: var(--jaune); font: 800 26px/1 'Baloo 2', sans-serif; box-shadow: 3px 3px 0 rgba(31,61,28,.35); cursor: pointer; -webkit-tap-highlight-color: transparent; }
html:not(.js) .pc-plus { display: none; }  /* sans script, pas de panier : la carte se lit, on commande par téléphone */
html:not(.js) .pc { cursor: auto; }
.pc:active .pc-photo { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--encre); }
@media (hover: hover) and (pointer: fine) { .pc:hover .pc-photo { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--encre); } }
@media (prefers-reduced-motion: reduce) { .pc-photo, .onglets-rang a { transition: none; } }
/* une rangée sans photo : les 24 viandes des américains, les boissons, les desserts, les familles qui attendent leurs photos */
.lignes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.pl { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 0; border-bottom: 2px dashed #D9CFBB; }
html.js .pl:has(.pc-plus[data-feuille]) { cursor: pointer; }
.pl-texte { flex: 1; min-width: 0; }
.pl-nom { display: block; font: 800 18px/1.2 'Baloo 2', sans-serif; color: var(--vert-profond); }
.pl-nom .surg { margin-left: 2px; color: var(--toast-texte); }
.pl-desc { display: block; margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--gris); }
.pl-prix { flex: none; font: 800 17px/1 'Baloo 2', sans-serif; color: var(--encre); white-space: nowrap; }
.pl .pc-plus { position: static; flex: none; }
.a-confirmer { font: 700 13px/1.2 var(--texte); text-transform: uppercase; letter-spacing: .04em; color: var(--gris); white-space: normal; }
@media (min-width: 821px) {  /* ordinateur : la sélection en trois colonnes (six menus, deux rangs pleins) */
  #selection .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
}
/* le composeur en fenêtre : plein écran sur téléphone (plus bas), grande fenêtre sur ordinateur ; son en-tête reste en haut */
dialog.composeur { position: fixed; inset: 0; margin: auto; padding: 0;  /* fixed : .halftone (position: relative) écrasait celui des fenêtres modales, la fenêtre suivait alors le défilement de la page */
   border: 4px solid var(--encre); border-radius: 22px; width: min(1240px, 100% - 48px); max-width: none; height: calc(100dvh - 48px); max-height: none;
  overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 84px; box-shadow: 10px 10px 0 var(--dore); }
dialog.composeur::backdrop { background: rgba(10, 22, 9, .72); }
.cmp-tete { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; background: var(--vert-profond); border-bottom: 2px dashed rgba(251,243,228,.25); }
.composeur .cmp-tete h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); }
.cmp-tete .fermer { flex: none; }
dialog.composeur > .contenu { padding: 18px 24px 40px; }
dialog.composeur .cmp-apercu { top: 84px; }
.cmp-sans-plat { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .tuile, .tuile-cta { transition: none; } }
  /* téléphone seulement (plus bas) */
/* étape 1 : les fenêtres de familles, plus grandes, puis le panneau de la famille ouverte */
.cmp-familles, .cmp-cotes { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* 28/10 : 7 familles et 7 accompagnements, sur deux rangées (4 + 3) */
.cmp-fam { padding: 10px 6px 12px; }
.cmp-fam .cmp-img { height: 84px; }
.cmp-fam .cmp-img img { max-height: 84px; }
.cmp-fam .cmp-nom { font: 400 15px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.cmp-panneau { margin-top: 16px; padding-top: 16px; border-top: 2px dashed rgba(251,243,228,.28); }
.cmp-puces { display: flex; flex-wrap: wrap; gap: 10px; }
/* le choix d'un plat à variantes (version, format, taille) : un bandeau sous le plat, ouvert seulement quand il compte */
.cmp-options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(251,243,228,.1); border: 2px solid rgba(246,196,83,.5); }
.cmp-options[hidden] { display: none; }
.cmp-options-titre { flex-basis: 100%; font: 800 14px/1 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--jaune); }
.cmp-options-aide { flex-basis: 100%; margin: 0; font-size: 15px; color: #E6D7C1; }  /* 30/10 : sous Sandwich et Américain, sur le fond sombre du composeur */
.cmp-opt { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 96px; min-height: 52px; padding: 6px 12px;
  cursor: pointer; background: var(--creme); color: var(--vert-profond); border: 3px solid var(--encre); border-radius: 12px; box-shadow: 3px 3px 0 var(--encre); transition: transform .15s ease-out; -webkit-tap-highlight-color: transparent; }
.cmp-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cmp-opt .cmp-nom { font: 800 15px/1.1 'Baloo 2', sans-serif; }
.cmp-opt.on { background: var(--jaune); box-shadow: 3px 3px 0 var(--dore); transform: translateY(-2px); }
.cmp-opt.off { opacity: .4; }
.cmp-opt:has(input:focus-visible) { outline: 3px solid var(--jaune); outline-offset: 3px; }

.camion { background: var(--jaune); color: var(--vert-profond); --pt: rgba(31,61,28,.25); padding: 64px 0; overflow: hidden; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
/* 22/10 (sa demande, ses photos) : le camion aux paillotes en panorama, puis le comptoir, la cuisine et l'équipe en photos légendées */
.camion-pano { position: relative; margin: 0 0 64px; aspect-ratio: 2200 / 850; transform: rotate(-1deg); overflow: visible; }
.camion-pano img { border-radius: 20px; }
.camion-pano .annot { position: absolute; z-index: 3; left: 4%; bottom: -50px; transform: rotate(-5deg); color: var(--vert-profond); font-size: 30px; }
.camion-pano .annot svg { left: 100%; top: -46px; width: 120px; height: 60px; transform: rotate(-28deg); transform-origin: 0 50%; color: var(--vert-profond); }
.camion-galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; align-items: center; padding: 6px; }
.polaroid { margin: 0; padding: 9px 9px 4px; background: #fff; border-radius: 6px; box-shadow: 7px 7px 0 var(--vert-profond); }
.polaroid img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.polaroid figcaption { padding: 6px 2px 4px; font: 700 24px/1 var(--script); color: var(--vert-profond); text-align: center; }
.polaroid.p1 { grid-column: 1 / -1; transform: rotate(-1.5deg); }
.polaroid.p2 { transform: rotate(2.5deg); }
.polaroid.p2 img { aspect-ratio: 3 / 4; }
.polaroid.p3 { transform: rotate(-3deg); }
.camion h2 { font-size: clamp(32px, 4vw, 48px); margin: 18px 0 18px; }
.camion p { font-size: 18px; max-width: 480px; }
.citation { font-family: var(--script); font-weight: 700; font-size: 30px; line-height: 1.15; color: var(--vert-profond); margin: 10px 0 24px; }

/* ---- venir ---- */
.venir { background: var(--vert-profond); color: var(--creme); --pt: rgba(255,255,255,.16); padding: 56px 0 64px; }
.infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; }
.info { background: var(--creme); color: var(--encre); border: 4px solid var(--encre); border-radius: 22px; box-shadow: 8px 8px 0 var(--dore); padding: 26px 22px 24px; position: relative; }
.info .sticker { position: absolute; top: -16px; left: 16px; }
.info .grand { font-family: var(--display); font-size: 24px; line-height: 1.1; color: var(--vert-profond); margin: 10px 0 12px; }
.info .grand a { text-decoration: none; display: inline-block; padding: 9px 0; }
.info p { font-size: 16px; color: var(--gris); }
.info .btn { margin-top: 6px; }
.horaires { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }  /* 28/10 : les horaires de la carte, écrits par le générateur */
.horaires b { display: block; font: 800 15px/1.2 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--vert-profond); }
.horaires span { display: block; font-size: 16px; color: var(--gris); }
.pied-contact a { color: var(--jaune); }

/* ---- événements (02/11, PLAN-evenements-2026-11-02.md) : un passage court entre le camion jaune et « Venir nous voir », bande crème à bord
   net ; sa fenêtre « Demander une date » reprend les champs et les boutons de Ma commande ---- */
.evenements { background: var(--creme); color: var(--vert-profond); --pt: rgba(31,61,28,.12); padding: 48px 0; border-top: 4px solid var(--encre); }
.evt-bande { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 48px; align-items: center; }
.evenements h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 16px 0 10px; }
.evenements p { font-size: 18px; max-width: 620px; margin: 0; }
.evt-sans-js { display: flex; flex-wrap: wrap; gap: 12px; }
html.js .evt-sans-js, html:not(.js) .evt-ouvrir { display: none; }  /* sans script, deux liens simples au lieu de la fenêtre */
.evt-form { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }  /* le bouton du bas reste au-dessus de la barre d'accueil de l'iPhone */
.evt-intro { margin: 12px 0 14px; font-size: 16px; color: var(--gris); }
.evt-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.evt-types legend { padding: 0; margin-bottom: 6px; font: 700 15px var(--texte); text-transform: uppercase; letter-spacing: .06em; color: var(--vert-profond); }
.evt-types span { text-align: center; font-size: 15px; }
.evt-champs label { font-size: 15px; }
.evt-champs [aria-invalid="true"] { border-color: var(--rouge); background: #FFF1F1; }
.evt-erreur { margin: 0 0 12px; padding: 10px 12px; border: 3px solid var(--rouge); border-radius: 10px; background: #fff; color: #A3191C; font: 700 16px/1.35 var(--texte); }
@media (min-width: 821px) { .evt-boutons { grid-template-columns: 1fr 1fr; } .evt-ordi { grid-column: 1 / -1; } }  /* ordinateur : SMS et mail côte à côte, la note dessous */
.evt-pret { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--vert-profond); color: var(--jaune); font: 800 17px/1.3 'Baloo 2', sans-serif; text-align: center; }
@media (max-width: 820px) {
  .evenements { padding: 40px 0 44px; }
  .evt-bande { grid-template-columns: 1fr; }
  .evenements p { font-size: 17px; }
  .evt-types { grid-template-columns: repeat(2, 1fr); }
}

/* ---- pied ---- */
.pied { background: var(--encre); color: var(--creme); padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 16px; }
.pied p a { display: inline-block; padding: 12px 0; }
.pied-marque { display: flex; align-items: center; gap: 10px; font: 800 20px 'Baloo 2', sans-serif; }
.pied a { color: var(--jaune); }

/* ---- page simple (mentions) ---- */
.texte-simple { padding: 40px 24px 80px; max-width: 760px; }
.texte-simple h1 { font-size: clamp(36px, 6vw, 56px); margin-bottom: 16px; }
.texte-simple h2 { font-size: 24px; margin: 28px 0 8px; color: var(--vert-profond); text-transform: uppercase; }

/* ====== téléphone ====== */
@media (max-width: 820px) {
  html { scroll-padding-top: calc(var(--h-entete, 56px) + 16px); }
  /* en-tête du téléphone (sa demande du 20/10 au soir) : logo, « La carte », « Le camion », « Venir », « Ma commande » */
  .entete { gap: 4px; padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top)); }
  .marque { font-size: 15px; gap: 5px; white-space: normal; line-height: .95; }
  .marque img { width: 32px; height: 36px; }
  .marque { min-width: 44px; }  /* cible de 44 px même quand seul le logo reste */
  .liens { gap: 0; font-size: 14px; margin-left: auto; }
  .liens a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; white-space: nowrap; }
  .marque-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* le logo porte le nom ; il reste lu par les lecteurs d'écran */
  .contenu { padding: 0 16px; }
  .texte-simple { padding-top: 32px; padding-bottom: 64px; }  /* mentions légales : le titre ne colle plus à l'en-tête */
  /* héros : la photo verticale en pleine largeur, la phrase sur son haut */
  .heros-scene { height: auto; aspect-ratio: 1856 / 2304; }  /* la photo verticale entière : les deux images ont le même cadre */
  .heros-final img { object-position: 50% 50%; }
  .heros-final::after { background: linear-gradient(180deg, rgba(13,6,4,.9) 0%, rgba(13,6,4,.72) 14%, rgba(13,6,4,0) 30%), linear-gradient(0deg, var(--brun) 0%, rgba(13,6,4,0) 16%); }
  .slogan { padding: 7% 20px 0; }
  .slogan img { width: 100%; }
  .heros-texte { margin-top: -26px; padding: 0 12px 14px; }
  .heros-infos { padding: 0 16px 30px; font-size: 18px; }
  .heros-ou { font-size: 15px; }
  .actions { gap: 10px; }
  .actions .btn { width: auto; padding-left: 10px; padding-right: 10px; font-size: 15px; }
  .actions .btn-toast { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .actions .btn-creme { flex: none; }
  .bandeau { font-size: 17px; padding: 9px 16px; }
  .bandeau span { padding: 0 6px; }
  .bandeau span + span::before { margin-right: 12px; }
  .btn-camion { display: none; }  /* la barre du téléphone est pleine : le lien « Le camion » y reste */
  .venir { padding: 44px 0 52px; }
  /* vitrines : la même composition que l'ordinateur, resserrée */
  .vitrines { padding: 50px 0 18px; }
  .vitrines .contenu { padding: 0 8px; }
  .flyers { gap: 50px 8px; }
  .flyer { --k: .32; padding: 30px 8px 52px; }
  .flyer-vertical { padding: 42px 6px 52px; }
  .panneau-titre { left: -6px; top: -30px; }
  .panneau-titre img { width: min(40vw, 240px); }
  .flyer-vertical .panneau-titre { top: -32px; }
  .flyer-vertical .panneau-titre img { width: min(40vw, 240px); }
  #frites .panneau-titre img { width: min(32vw, 200px); }
  .vedettes { grid-template-columns: repeat(2, minmax(0, min(38vw, 280px))); gap: 16px; }
  .produits { gap: 2px 4px; }
  #bagels .produit .visuel::before { left: -6%; right: -6%; }
  .note-illus { margin: 14px 4px 0; }
  .ouvrir { padding-bottom: 12px; }
  .ouvrir span { font-size: 14px; padding: .7em 1em; border-radius: 10px; box-shadow: 3px 3px 0 var(--vert-profond); }
  .flyer-vert .ouvrir span { box-shadow: 3px 3px 0 var(--encre); }
  .flyer-americains { padding: 34px 8px 74px; }
  .americains-des { font-size: 15px; margin-bottom: 0; }
  #americains .ouvrir { padding-bottom: 14px; }
  #americains .ouvrir span { font-size: 14px; padding: .7em 1em; }
  .entete .btn { font-size: 14px; padding: 8px 8px; gap: 5px; }
  .entete .btn svg { width: 17px; height: 17px; }
  .btn-panier { white-space: nowrap; }
  .btn-panier:has(.compte:not([hidden])) svg { display: none; }  /* le compteur prend la place du sac : « Ma commande » reste sur une ligne */
  .btn-panier .compte { min-width: 22px; height: 22px; line-height: 18px; font-size: 13px; padding: 0 5px; }
  .barre-commande { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 55; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; background: var(--vert-profond); color: var(--creme); border: 3px solid var(--creme); border-radius: 16px; box-shadow: 5px 5px 0 var(--encre); transform: translateY(130%); visibility: hidden; transition: transform .25s ease-out, visibility 0s .25s; }
  .barre-commande.visible { transform: none; visibility: visible; transition: transform .25s ease-out; }
  .barre-commande .resume { font: 800 15px 'Baloo 2', sans-serif; }
  .barre-commande .btn { padding: 9px 14px; font-size: 16px; min-height: 44px; }
  body.avec-barre .pied { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  body.avec-barre > .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }  /* revue du 30/10 : le message « Ajouté » passe au-dessus de la barre « Voir ma commande », sans la cacher */
  .pied-sep { display: none; }  /* revue du 30/10 : une information par ligne, les points s'effacent */
  .pied p:not(.pied-marque) { margin: 8px 0 0; }
  .pied-bout { display: block; line-height: 44px; }  /* un pas régulier de 44 px : chaque lien garde sa zone de toucher sans marge en plus */
  .pied .pied-bout a { padding: 0; }
  .panier { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); margin: auto 8px 8px; }
  .panier-corps { max-height: calc(100dvh - 16px - 84px); }
  .panier-champs { grid-template-columns: 1fr; }
  .deux-colonnes { grid-template-columns: 1fr; gap: 28px; }
  .camion { padding: 48px 0; }
  /* « Compose ton repas » sur téléphone (23/10, sa demande) : une étape à la fois (barre .cmp-pas), les plats en grille, un plat à
     variantes ouvre son choix en grand (.sous), et le ticket se colle en bas de l'écran tant que la section est là (position: sticky
     dans .cmp : il revient à sa place en fin de section). L'aperçu en image s'efface : les plats sont déjà illustrés. */
  /* 30/10 : le carrousel des tuiles, la barre des onglets, les cartes en deux colonnes. 04/11 (sa demande : une tuile par écran, trop
     gros) : deux rangées qui défilent ensemble, 4 tuiles par écran, 12 tuiles en 3 écrans ; l'écart entre les rangées laisse la place au
     lettrage du bas et au bouton du haut ; le bouton dit juste « Choisir » (le lettrage nomme déjà la famille) */
  .tuiles { padding: 14px 0 0; }
  .tuiles-rang { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: calc((100% - 16px) / 2); gap: 58px 16px;
    margin: 0; padding: 36px 16px 34px; scroll-padding-inline: 16px; }
  .tuile { width: auto; --k: .27; }
  /* on lit un écran de 4 tuiles ligne par ligne (bagels, américains / paninis, bagnats) : la grille en colonnes place le 2e du DOM en bas à
     gauche, l'ordre visuel échange donc le 2e et le 3e de chaque groupe de 4 ; l'ordre de lecture et de tabulation reste celui de la carte */
  .tuile:nth-child(1) { order: 1; }
  .tuile:nth-child(2) { order: 3; }
  .tuile:nth-child(3) { order: 2; }
  .tuile:nth-child(4) { order: 4; }
  .tuile:nth-child(5) { order: 5; }
  .tuile:nth-child(6) { order: 7; }
  .tuile:nth-child(7) { order: 6; }
  .tuile:nth-child(8) { order: 8; }
  .tuile:nth-child(9) { order: 9; }
  .tuile:nth-child(10) { order: 11; }
  .tuile:nth-child(11) { order: 10; }
  .tuile:nth-child(12) { order: 12; }
  .tuile-cta { font-size: 12px; padding: .7em .9em; border-width: 2px; border-radius: 9px; box-shadow: 3px 3px 0 var(--encre); }
  .tuile-cta .cta-long { display: none; }
  .tuile-cta .cta-court { display: inline; }
  .tuiles-points { display: flex; justify-content: center; gap: 8px; margin: -8px 0 0; }
  .tuiles-points span { width: 8px; height: 8px; border-radius: 50%; background: rgba(31,61,28,.25); transition: background .2s, transform .2s; }
  .tuiles-points span.on { background: var(--vert-profond); transform: scale(1.25); }
  .note-illus { margin: 14px 16px 0; }
  .tuile-liste { font-size: 19px; }
  .onglets { padding: 0; }
  .onglets-tout { width: 46px; }
  .onglets-rang a { padding: 0 11px; font-size: 15px; }
  .rayon { padding: 26px 0 4px; }
  .rayon-tete { margin-bottom: 14px; }
  .rayon-lettrage img { height: 54px; }
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .pc-photo { margin-bottom: 9px; border-radius: 14px; box-shadow: 3px 3px 0 var(--encre); }
  .pc-plus { right: 6px; bottom: 6px; }
  .pc-nom { font-size: 16px; }
  .pc-prix { font-size: 15px; }
  .pc-desc { font-size: 15px; }
  .lignes { grid-template-columns: minmax(0, 1fr); }
  .pl-nom { font-size: 17px; }
  dialog.composeur { margin: 0; width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; scroll-padding-top: 66px; }
  .cmp-tete { padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .composeur .cmp-tete h2 { font-size: 24px; }
  dialog.composeur > .contenu { padding: 12px 16px 0; }
  #compose .toast { top: calc(72px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -20px); }  /* le message passe en haut : en bas, il couvrirait le ticket */
  #compose .toast.visible { transform: translate(-50%, 0); }
  .cmp.sous .cmp-sans-plat { display: none; }
  .cmp-intro, .cmp-scene, .cmp-choix > .cmp-ajouter { display: none; }
  /* au moins un écran sous l'en-tête : une étape courte (tailles, accompagnements) garde son ticket en bas de l'écran, au lieu de le
     remonter au milieu avec la vitrine suivante dessous (lvh : la grande hauteur, sans trou quand la barre de Safari se replie) */
  .cmp { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 4px; min-height: calc(100dvh - 66px); }  /* 29/10 : la hauteur de la fenêtre moins son en-tête */
  .cmp-choix { flex: 1 0 auto; min-width: 0; padding-bottom: 22px; }  /* min-width : sinon la rangée des familles l'élargit à 540 px (page qui déborde) */
  .cmp-etape { margin: 0; }
  .cmp-etape > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* lue, la barre des étapes la montre ; « > » : les légendes des groupes du bowl restent visibles (28/10) */
  .cmp[data-etape="1"] .cmp-etape:not([data-etape="1"]), .cmp[data-etape="2"] .cmp-etape:not([data-etape="2"]), .cmp[data-etape="3"] .cmp-etape:not([data-etape="3"]), .cmp[data-etape="4"] .cmp-etape:not([data-etape="4"]) { display: none; }
  /* la barre des étapes : 1 Plat, 2 Accompagnement, 3 Sauce, 4 Boisson (28/10) ; une étape faite prend sa coche, la suivante s'ouvre quand la précédente est choisie */
  .cmp-pas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 6px; padding: 0; list-style: none; }
  .cmp-pas li { position: relative; display: flex; }
  .cmp-pas li + li::before { content: ""; position: absolute; top: 21px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 3px; border-radius: 2px; background: rgba(251,243,228,.22); }
  .cmp-pas li:has(> button:not(:disabled))::before { background: var(--creme); }
  .cmp-pas button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 64px; padding: 4px 2px; background: none; border: 0; border-radius: 10px;
    color: #E6D7C1; font: 800 11px/1.1 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; -webkit-tap-highlight-color: transparent; }  /* 28/10 : quatre étapes, « Accompagnement » doit tenir à 390 px */
  .cmp-pas i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(251,243,228,.5); font: 800 16px/1 'Baloo 2', sans-serif; font-style: normal; color: var(--creme); transition: background-color .2s ease-out; }
  .cmp-pas button.fait i { background: var(--creme); border-color: var(--creme); color: var(--vert-profond); font-size: 0; }
  .cmp-pas button.fait i::before { content: "✓"; font-size: 17px; }
  .cmp-pas button[aria-current] { color: var(--jaune); }
  .cmp-pas button[aria-current] i { background: var(--jaune); border-color: var(--jaune); color: var(--vert-profond); font-size: 16px; box-shadow: 0 0 0 5px rgba(246,196,83,.22); }
  .cmp-pas button[aria-current] i::before { content: none; }
  .cmp-pas button:disabled { opacity: .5; cursor: default; }
  .cmp-pas button:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
  /* les choix : familles en rangée qui défile au doigt (5 fenêtres), puis plats, accompagnements et sauces en grille */
  .cmp-rang { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; padding: 14px 0 4px; }
  .cmp-familles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100px; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin: 0 -16px; padding: 14px 16px 12px; scrollbar-width: none; }
  .cmp-familles::-webkit-scrollbar { display: none; }
  .cmp-familles > * { scroll-snap-align: center; }
  .cmp-fam { padding: 8px 4px 9px; }
  .cmp-fam .cmp-img, .cmp-fam .cmp-img img { height: 58px; max-height: 58px; }
  .cmp-fam .cmp-nom { font-size: 13px; }
  .cmp-panneau { margin-top: 4px; padding-top: 2px; }
  .cmp-img { height: 72px; }
  .cmp-img img { max-height: 72px; }
  .cmp-puces, .cmp-sauces { display: flex; flex-wrap: wrap; gap: 10px 8px; }
  .cmp-sous-titre { display: block; margin: 4px 0 0; font: 800 14px/1 'Baloo 2', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--jaune); }
  /* un plat à variantes choisi : la liste laisse la place à son choix, en grand */
  .cmp:not(.sous) .cmp-options, .cmp.sous .cmp-options:not(.actif), .cmp.sous .cmp-rang, .cmp.sous .cmp-panneau { display: none; }
  .cmp.sous .cmp-changer { display: inline-flex; }
  .cmp.sous .cmp-mesure-ok { display: inline-flex; width: 100%; margin-top: 12px; }  /* le bowl sur mesure : on valide pour passer à l'accompagnement */
  .cmp-changer { align-items: center; gap: 6px; min-height: 44px; margin: 2px 0 4px; padding: 0 6px 0 0; background: none; border: 0; color: var(--creme);
    font: 800 15px 'Baloo 2', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cmp-changer::before { content: "‹"; display: inline-block; font-size: 24px; line-height: 1; text-decoration: none; }
  .cmp-changer:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; border-radius: 6px; }
  .cmp-options { margin-top: 0; padding: 16px 12px 18px; gap: 12px 10px; }
  .cmp-options-plat { display: block; margin-bottom: 6px; font: 400 26px/1.05 var(--display); color: var(--creme); text-transform: uppercase; letter-spacing: .01em; }
  .cmp-opt { min-width: 0; flex: 1 1 0; min-height: 76px; padding: 8px 4px 10px; gap: 2px; }
  .cmp-opt .cmp-nom { font-size: 16px; }
  .cmp-opt-img { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 84px; }
  .cmp-opt-img img { width: auto; height: calc(84px * var(--t)); max-width: 100%; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(0,0,0,.25)); }
  /* le ticket, collé en bas de l'écran : bord déchiré en haut (il sort de la caisse), sans en-tête ni scotch pour laisser la place aux plats */
  .cmp-apercu { order: 2; position: sticky; bottom: 0; z-index: 4; display: block; }
  .ticket { width: 100%; transform: none; border-radius: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); font-size: 13px; letter-spacing: -.02em;
    box-shadow: 0 -12px 26px -10px rgba(0,0,0,.6), 0 -2px 6px rgba(0,0,0,.2); }
  .ticket::before, .ticket-tete, .ticket-merci { display: none; }
  .ticket::after { top: -9px; bottom: auto; transform: scaleY(-1); }
  .ticket-lignes { min-height: 0; padding: 2px 0 6px; }
  .ticket-lignes:empty::before { content: "Ton ticket s'imprime ici, au fil de tes choix."; color: #6B6455; font-style: italic; }
  .ticket-lignes li { gap: 8px; }
  .ticket-total { padding-top: 6px; }
  .ticket-tampon { font-size: 20px; }
  .cmp.pret .ticket-actions { display: grid; gap: 4px; margin-top: 10px; }  /* 29/10 : dès qu'un article est au ticket (plat facultatif) */
  .ticket-actions .btn { width: 100%; min-height: 48px; padding: 10px 14px; font-size: 17px; }
  .cmp.ajoute .ticket-actions .cmp-ajouter, .cmp:not(.ajoute) .ticket-actions .vers-panier, .cmp:not(.ajoute) .cmp-autre { display: none; }
  .cmp-autre { min-height: 44px; background: none; border: 0; color: var(--vert-profond); font: 800 16px 'Baloo 2', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .cmp-autre:focus-visible { outline: 3px solid var(--toast-f); outline-offset: 2px; border-radius: 6px; }
  /* tant que le ticket tient le bas de l'écran, la barre « Voir ma commande » s'efface et les messages passent en haut */
  .camion-pano { aspect-ratio: 16 / 10; margin-bottom: 58px; }
  .camion-pano img { object-position: 46% 60%; }
  .camion-pano .annot { font-size: 26px; bottom: -46px; }
  .camion-pano .annot svg { width: 80px; height: 44px; top: -34px; }
  .camion-galerie { gap: 18px 14px; }
  .polaroid figcaption { font-size: 20px; }
  .camion p { font-size: 17px; }
  .camion h2 { line-height: 1.05; }
  .citation { font-size: 26px; }
  .infos { grid-template-columns: 1fr; gap: 30px; }
  .flyer-vertical .panneau-texte { top: -22px; }
  .panneau-texte span { font-size: 30px; }
  .produit.a-venir .visuel { padding: 10px; }
  .produit.a-venir b { font-size: 12px; }
  .mur-sauces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 430px) { .actions .cmd-long { display: none; } }  /* 22/10 : à côté de « Compose ton menu », le bouton d'appel garde le téléphone et le numéro */
@media (max-width: 389px) {  /* iPhone SE, mini, Android 360 : l'icône du sac s'efface pour que les trois liens et « Ma commande » tiennent */
  .entete .btn-panier svg { display: none; }
  .liens a { padding: 0 3px; }
  /* panier non vide : le sac et le compteur remplacent le texte (la barre du bas dit « Voir ma commande », le bouton garde son nom pour les lecteurs d'écran) */
  .entete .btn-panier:has(.compte:not([hidden])) svg { display: block; }
  .btn-panier:has(.compte:not([hidden])) .texte { display: none; }
}
@media (min-width: 560px) and (max-width: 820px) {  /* tablettes : bordures des cadres un peu plus épaisses */
  .flyer { --k: .5; }
}
@media (min-width: 420px) and (max-width: 820px) {  /* grands iPhone : le bouton Commander a la place de grandir */
  .actions .btn { font-size: 17px; padding-left: 12px; padding-right: 12px; }
}

/* 03/11 (lot 2 de l'espace de gestion) : la rupture du jour, lue dans la base au chargement (script.js) : plat grisé, + éteint, badge */
.pc.rupture, .pl.rupture { opacity: .55; }
.pc.rupture .pc-photo img, .fp.rupture .fp-photo img { filter: grayscale(1); }
.pc.rupture .pc-plus, .pl.rupture .pc-plus { opacity: .35; cursor: not-allowed; }
.rupture-badge { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; vertical-align: middle; background: var(--encre); color: var(--creme); font: 700 11px/1.3 var(--texte); letter-spacing: .03em; text-transform: uppercase; }
.fp-rupture { margin: 14px 18px 0; padding: 10px 12px; border-radius: 10px; background: var(--rouge); color: #fff; font: 700 15px/1.3 var(--texte); }
.fp.rupture .fp-pied button { opacity: .45; }
.cmp-carte.rupture, .cmp-puce.rupture, .cmp-opt.rupture { opacity: .4; pointer-events: none; }

/* 03/11 (la gérante) : la personnalisation (« Sans … », viandes du bowl frites, sauce, gratiné) : les mêmes cases que le bowl sur mesure */
.perso legend .perso-compte { font-weight: 600; text-transform: none; letter-spacing: 0; }
.perso label.off { opacity: .4; }
.perso label.off input { cursor: not-allowed; }
.fp .perso { margin: 12px 18px 0; }
.cmp-perso-bloc .perso { width: 100%; }
.cmp-perso-bloc .perso-aide { color: #E6D7C1; }
.cmp-perso-ok { display: none; }
.ticket-lignes .cmp-perso { margin-left: 8px; padding: 2px 8px; border: 2px solid currentColor; border-radius: 999px; background: none; color: inherit; font: 700 12px/1.2 var(--texte); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 820px) {
  .cmp-perso-ok { display: inline-flex; width: 100%; justify-content: center; margin-top: 12px; }
}

/* 03/11 (lot G, sa demande) : « Retirer des ingrédients » à côté de la photo, et le plat éclaté en couches dessinées (#eclate).
   Les cases « sans … » restent le moteur, masquées : la fenêtre les coche. */
.perso-sans { display: none !important; }
.fp-photo { position: relative; }
.fp-eclate { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 3px solid var(--encre); border-radius: 12px; background: #fff; color: var(--vert-profond); font: 800 14px/1 'Baloo 2', sans-serif; box-shadow: 3px 3px 0 var(--encre); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-eclate svg, .cmp-eclate svg { width: 18px; height: 18px; flex: none; }
.fp-eclate.actif { background: var(--jaune); }
.fp-eclate:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
.fp-eclate-seul { display: flex; justify-content: flex-end; padding: 12px 18px 0; }
.fp-eclate-seul .fp-eclate { position: static; }
.fp-sans-resume { margin: 10px 18px 0; font: 700 14px/1.35 var(--texte); color: var(--rouge); }
.cmp-eclate { display: inline-flex; gap: 8px; width: 100%; justify-content: center; }
.cmp-perso-bloc .fp-sans-resume { width: 100%; margin: 4px 0 0; color: #FFB9AC; }
.eclate { width: min(100% - 16px, 520px); max-height: 92dvh; margin: auto; padding: 0; border: 3px solid var(--encre); border-radius: 20px; background: radial-gradient(circle, rgba(31,61,28,.14) 1.6px, transparent 2px) 0 0 / 10px 10px, var(--creme); color: var(--encre); overflow: auto; overscroll-behavior: contain; }
.eclate::backdrop { background: rgba(23,32,15,.55); }
.eclate-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 12px 16px; border-bottom: 3px solid var(--encre); background: var(--creme); }
.eclate-tete h2 { font: 400 21px/1.05 var(--display); text-transform: uppercase; color: var(--vert-profond); }
.eclate-aide { margin: 12px 16px 0; font: 600 14px/1.35 var(--texte); color: var(--gris); }
.eclate-pile { display: grid; gap: 0; padding: 8px 6px 14px; }
.couche { display: grid; grid-template-columns: minmax(92px, 1fr) minmax(0, 150px) minmax(92px, 1fr); align-items: center; gap: 4px; width: 100%; min-height: 46px; margin: 0; padding: 0; border: 0; background: none; color: var(--encre); font: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.couche.pain { cursor: default; }
.couche .forme { display: block; width: 100%; height: auto; transition: opacity .2s ease-out, transform .2s ease-out, filter .2s ease-out; }
.couche-nom { display: flex; align-items: center; gap: 3px; min-width: 0; font: 700 13px/1.15 var(--texte); }
.couche-nom.g { justify-content: flex-end; text-align: right; }
.couche-nom.d { justify-content: flex-start; }
.couche-lib { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.couche-nom.g .couche-lib { align-items: flex-end; }
.couche-nom.d .couche-lib { align-items: flex-start; }
.couche-texte { overflow-wrap: normal; word-break: normal; hyphens: none; }
.couche-nom .fleche { width: 18px; flex: none; color: var(--gris); }
.couche-nom.d .fleche { transform: scaleX(-1); }
.couche.pain .couche-nom { color: var(--gris); font-weight: 600; }
.couche-retire { padding: 1px 6px; border-radius: 999px; background: var(--rouge); color: #fff; font: 800 10px/1.4 var(--texte); text-transform: uppercase; letter-spacing: .04em; }
.couche[aria-pressed="true"] .forme { opacity: .2; filter: grayscale(1); transform: scale(.88); }
.couche[aria-pressed="true"] .couche-texte { text-decoration: line-through; color: var(--rouge); }
.couche:focus-visible { outline: 3px solid var(--bleu); outline-offset: 1px; border-radius: 10px; }
.eclate-pied { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 3px solid var(--encre); background: var(--creme); }
.eclate-pied .btn { min-height: 48px; }
@media (hover: hover) { .couche[data-valeur]:hover .forme { transform: translateX(6px); } .couche[aria-pressed="true"]:hover .forme { transform: scale(.88); } }
@media (min-width: 600px) { .couche { grid-template-columns: minmax(110px, 1fr) minmax(0, 220px) minmax(110px, 1fr); } .couche-nom { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .couche .forme { transition: none; } }