/* ============================================
   O'DOUBLE K — site public
   Le rouge sombre et la trame du flyer, le crème du logo, des étiquettes de
   prix déchirées. Téléphone d'abord : c'est là que se passent les commandes.
   ============================================ */

/* Archivo, police variable hébergée sur le site (sous-ensemble latin de Google
   Fonts) : graisses 400 à 900 et largeurs 62 % à 125 % dans un seul fichier,
   d'où le font-stretch étroit des titres. */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url(../assets/polices/archivo-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: italic;
    font-weight: 400 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url(../assets/polices/archivo-latin-italique.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --fond: #3d060c;
    --rouge: #d3141c;
    --rouge-vif: #ec2a2f;
    --creme: #f7ecd6;
    --creme-2: rgba(247, 236, 214, .74);
    --creme-3: rgba(247, 236, 214, .52);
    --encre: #2a0408;
    --trait: rgba(247, 236, 214, .12);
    --or: #f2b33d;
    --vert: #5fd38a;
    --rayon: 24px;
    --largeur: 1240px;
    --gouttiere: clamp(16px, 3vw, 28px);
    --police: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ressort: cubic-bezier(.2, .9, .25, 1);
    --ombre: 0 24px 50px -24px rgba(0, 0, 0, .75);
    --dechire: polygon(2% 12%, 17% 3%, 35% 9%, 54% 0%, 77% 7%, 98% 2%, 95% 38%, 100% 71%, 97% 97%, 76% 91%, 53% 100%, 31% 93%, 9% 99%, 0% 67%, 4% 37%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.bloque-defilement, html.bloque-defilement body { overflow: hidden; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--police);
    background: var(--fond);
    color: var(--creme);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2.5px solid var(--or); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fond : rouge du flyer, lumière en haut, trame de points par-dessus */
.fond {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(80% 55% at 50% -8%, #7c111b 0%, transparent 62%),
        radial-gradient(60% 45% at 100% 100%, #5e0a13 0%, transparent 70%),
        linear-gradient(180deg, #4e0911 0%, #3b060c 55%, #2a0408 100%);
}
.fond::after {
    content: ""; position: absolute; inset: 0;
    background: url(../assets/marque/trame.webp) center / cover no-repeat;
    opacity: .38; mix-blend-mode: multiply;
}

/* ---------- Boutons ---------- */
.btn {
    --h: 50px;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: var(--h); padding: 0 24px;
    border: 0; border-radius: 999px;
    font-weight: 800; font-size: 16px; letter-spacing: -.01em; white-space: nowrap;
    cursor: pointer;
    transition: transform .25s var(--ressort), background .2s, color .2s, box-shadow .25s, opacity .2s;
    -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primaire {
    background: var(--creme); color: var(--encre);
    box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .7), inset 0 -3px 0 rgba(90, 10, 18, .16);
}
.btn-primaire:hover:not(:disabled) { background: #fff7e8; transform: translateY(-1px); }
.btn-contour { background: transparent; color: var(--creme); box-shadow: inset 0 0 0 1.5px rgba(247, 236, 214, .34); }
.btn-contour:hover:not(:disabled) { background: rgba(247, 236, 214, .07); box-shadow: inset 0 0 0 1.5px var(--creme); }
.btn-grand { --h: 58px; padding: 0 30px; font-size: 17px; }
.btn-plein { width: 100%; }
.btn.en-cours { pointer-events: none; }
.btn.en-cours::after {
    content: ""; width: 16px; height: 16px; border-radius: 50%;
    border: 2.5px solid currentColor; border-right-color: transparent;
    animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* Texte qui glisse vers le haut au survol (repris du portfolio) */
.glisse { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: top; }
.glisse > span { display: block; transition: transform .45s var(--ressort); }
.glisse > span::after { content: attr(data-texte); display: block; }
.btn:hover .glisse > span { transform: translateY(-50%); }

/* Bordure qui tourne autour du bouton de commande (repris du portfolio) */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.btn-anneau::before {
    content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 2px;
    background: conic-gradient(from var(--angle), transparent 0 68%, var(--or) 82%, var(--rouge-vif) 92%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: anneau 3.4s linear infinite;
    pointer-events: none;
}
@keyframes anneau { to { --angle: 360deg; } }

.pastille-nb {
    display: inline-grid; place-items: center;
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--rouge); color: var(--creme);
    font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rebond { animation: rebond .55s var(--ressort); }
@keyframes rebond { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 100% { transform: scale(1); } }

.point {
    flex: none; width: 9px; height: 9px; border-radius: 50%;
    background: var(--vert); animation: pouls 2s infinite;
}
.point-off { background: var(--or); animation: none; }
@keyframes pouls {
    0% { box-shadow: 0 0 0 0 rgba(95, 211, 138, .55); }
    70% { box-shadow: 0 0 0 9px rgba(95, 211, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(95, 211, 138, 0); }
}

/* ---------- Étiquette de prix ---------- */
.prix { display: inline-block; flex: none; transform: rotate(-5deg); filter: drop-shadow(2px 3px 0 rgba(18, 0, 3, .6)); }
.prix > span[aria-hidden] {
    display: block;
    padding: 7px 12px 5px 10px;
    background: var(--rouge); color: var(--creme);
    font-weight: 900; font-style: italic; font-stretch: 82%;
    font-size: 27px; line-height: 1; letter-spacing: -.02em;
    clip-path: var(--dechire);
}
.prix sup { position: relative; top: -.62em; margin-left: 1px; font-size: .52em; vertical-align: baseline; }
.prix-petit > span[aria-hidden] { font-size: 21px; padding: 6px 10px 4px 8px; }

/* ---------- En-tête ---------- */
.entete { position: relative; z-index: 20; padding: 14px var(--gouttiere) 0; }
.entete-pilule {
    max-width: var(--largeur); margin: 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 7px 7px 7px 14px; border-radius: 999px;
    background: rgba(247, 236, 214, .06);
    border: 1px solid rgba(247, 236, 214, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 34px -18px rgba(0, 0, 0, .7);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}
.entete-logo img { height: 46px; width: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); transition: transform .4s var(--ressort); }
.entete-logo:hover img { transform: rotate(-2deg) scale(1.03); }
.entete-nav { display: flex; gap: 2px; margin-left: auto; }
.entete-nav a { padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--creme-2); transition: color .2s, background .2s; }
.entete-nav a:hover { color: var(--creme); background: rgba(247, 236, 214, .07); }
.entete-actions { display: flex; align-items: center; gap: 8px; }
.entete-commande { --h: 48px; padding: 0 12px 0 18px; }

.appel { position: relative; }
.appel summary {
    list-style: none; cursor: pointer;
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--trait); background: rgba(247, 236, 214, .04);
    transition: background .2s;
}
.appel summary::-webkit-details-marker { display: none; }
.appel summary:hover, .appel[open] summary { background: rgba(247, 236, 214, .12); }
.appel-menu {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 5;
    min-width: 250px; padding: 6px; border-radius: 20px;
    background: #2b0409; border: 1px solid var(--trait); box-shadow: var(--ombre);
    animation: apparait .3s var(--ressort);
}
.appel-menu a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 700; color: var(--creme-2); }
.appel-menu a strong { color: var(--creme); font-size: 16px; font-weight: 850; font-variant-numeric: tabular-nums; }
.appel-menu a:hover { background: rgba(247, 236, 214, .08); }
@keyframes apparait { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.suivi-bandeau { max-width: var(--largeur); margin: 12px auto 0; padding: 0 var(--gouttiere); }
.suivi-bandeau button {
    width: 100%; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap;
    padding: 13px 18px; border-radius: 18px; cursor: pointer; text-align: left;
    background: rgba(242, 179, 61, .12); border: 1px solid rgba(242, 179, 61, .38);
    font-size: 15px;
}
.suivi-bandeau strong { font-weight: 850; }
.suivi-bandeau .sb-etat { color: var(--creme-2); }
.suivi-bandeau .sb-voir { margin-left: auto; font-weight: 800; color: var(--or); }

/* ---------- Hero ---------- */
.hero {
    max-width: var(--largeur); margin: 0 auto;
    padding: clamp(28px, 5vw, 60px) var(--gouttiere) clamp(36px, 5vw, 64px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(24px, 4vw, 60px); align-items: center;
}
/* Sur ordinateur, l'accueil remplit l'écran : la carte ne commence qu'au
   défilement. --haut-hero = hauteur de ce qui le précède (en-tête, bandeau de
   suivi de commande), mesurée par app.js. */
.hero-defiler { display: none; }
@media (min-width: 861px) {
    .hero {
        position: relative;
        min-height: calc(100vh - var(--haut-hero, 92px));
        min-height: calc(100svh - var(--haut-hero, 92px));
        align-content: center;
        padding-block: 24px 96px;
    }
    /* La flèche qui invite à descendre vers la carte. */
    .hero-defiler {
        position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
        color: var(--creme-2); transition: color .2s;
    }
    .hero-defiler svg {
        width: 46px; height: 46px; padding: 11px; border-radius: 50%;
        border: 1.5px solid rgba(247, 236, 214, .32); background: rgba(247, 236, 214, .05);
        animation: invite 1.9s var(--ressort) infinite;
        transition: border-color .2s, background .2s;
    }
    .hero-defiler:hover { color: var(--creme); }
    .hero-defiler:hover svg { border-color: var(--creme); background: rgba(247, 236, 214, .12); }
}
@keyframes invite { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }
.hero-sur {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 10px; border-radius: 999px;
    border: 1px solid var(--trait); background: rgba(247, 236, 214, .05);
    font-size: 14px; font-weight: 700; color: var(--creme-2);
}
.hero h1 {
    margin: 0 0 18px;
    font-size: clamp(38px, 4.8vw, 72px);
    font-weight: 900; font-style: italic; font-stretch: 76%;
    text-transform: uppercase; line-height: .92; letter-spacing: -.015em;
}
/* Retours à la ligne imposés : « BURGERS, PIZZAS / ET SALADES / À EMPORTER ». */
.hero h1 .titre-ligne { display: block; white-space: nowrap; }
.mot-etiquette {
    display: inline-block; margin-top: .1em;
    padding: .2em .2em .03em .14em;
    background: var(--rouge); color: var(--creme);
    clip-path: var(--dechire); transform: rotate(-2.5deg);
}
.hero-lead { max-width: 31em; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; color: var(--creme-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-etat { display: flex; align-items: center; gap: 10px; margin-top: 22px; min-height: 1.4em; font-size: 15px; font-weight: 700; color: var(--creme-2); }
/* Visuel d'accueil : la planche de plats (PNG détouré fait sur ChatGPT),
   posée directement sur le rouge du site, sans cadre. */
.hero-compo { position: relative; width: 100%; max-width: 640px; margin-left: auto; }
.hero-compo::before {
    content: ""; position: absolute; inset: 4% 2% 12%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(236, 42, 47, .42), rgba(236, 42, 47, 0));
}
.hero-plats {
    position: relative; width: 100%; height: auto;
    filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .55));
}
/* Safari (iPhone) coupe net l'ombre d'un élément animé, ce qui dessinait un cadre
   sombre autour de l'image : l'animation est donc sur le conteneur, jamais sur
   l'élément qui porte le drop-shadow, et sans « fill forwards » pour que Safari
   repeigne normalement une fois l'animation finie. Même règle plus bas (fiche, ticket). */
html.pret .hero-compo { animation: arrivee 1s var(--ressort) .1s backwards; }
html.pret .hero-texte { animation: monteTexte .9s var(--ressort) .22s backwards; }
@keyframes arrivee { from { opacity: 0; translate: 0 30px; scale: .95; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes monteTexte { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

.pause-bandeau {
    max-width: calc(var(--largeur) - 2 * var(--gouttiere)); margin: 0 auto 24px;
    display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 16px 20px; border-radius: 18px;
    background: rgba(242, 179, 61, .14); border: 1px solid rgba(242, 179, 61, .4);
}
@media (max-width: 1290px) { .pause-bandeau { margin-left: var(--gouttiere); margin-right: var(--gouttiere); } }

/* ---------- Carte ---------- */
.carte-grille {
    max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere);
    display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 36px; align-items: start;
    scroll-margin-top: 8px;
}
.carte-contenu { min-width: 0; }
.panier-lateral { position: sticky; top: 16px; }

.onglets-wrap { position: sticky; top: 10px; z-index: 30; display: flex; justify-content: center; pointer-events: none; }
.onglets {
    pointer-events: auto;
    display: flex; gap: 2px; max-width: 100%; padding: 5px;
    overflow-x: auto; scrollbar-width: none;
    border-radius: 999px;
    background: rgba(38, 4, 9, .62);
    border: 1px solid rgba(247, 236, 214, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 16px 34px -16px rgba(0, 0, 0, .8);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
}
.onglets::-webkit-scrollbar { display: none; }
.onglets a { flex: none; padding: 10px 20px; border-radius: 999px; font-weight: 800; font-size: 15px; color: var(--creme-2); transition: background .3s, color .3s; }
.onglets a:hover { color: var(--creme); }
.onglets a.actif { background: var(--creme); color: var(--encre); }

.rubrique { padding: 40px 0 16px; scroll-margin-top: 64px; }
.rubrique-titre { display: flex; justify-content: center; margin-bottom: 30px; }
.rubrique-titre img { height: clamp(60px, 8.5vw, 96px); width: auto; transform: rotate(-2deg); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.rubrique-sous { margin-bottom: 18px; text-align: center; font-size: 30px; font-weight: 900; font-style: italic; font-stretch: 80%; text-transform: uppercase; letter-spacing: -.01em; }

/* Apparition au défilement */
.revele { opacity: 0; }
.revele.vu { opacity: 1; animation: revele .85s var(--ressort) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.revele.deja { opacity: 1; }
@keyframes revele {
    from { opacity: 0; translate: 0 26px; filter: blur(10px); }
    to { opacity: 1; translate: 0 0; filter: blur(0); }
}

/* Cartes de plats (burgers, salades) */
.plats { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 16px; }
.plat {
    position: relative;
    display: flex; flex-direction: column; text-align: left;
    padding: 6px 16px 16px;
    border-radius: var(--rayon); border: 1px solid var(--trait);
    background: linear-gradient(180deg, rgba(247, 236, 214, .075), rgba(247, 236, 214, .015) 65%);
    cursor: pointer;
    transition: transform .45s var(--ressort), border-color .3s, background .3s;
    -webkit-tap-highlight-color: transparent;
}
.plat-photo { display: block; margin: 0 -10px; aspect-ratio: 1; }
.plat-photo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .35)); transition: transform .6s var(--ressort); }
.plat-corps { display: flex; flex: 1; flex-direction: column; gap: 6px; }
.plat-nom { font-size: 22px; font-weight: 850; letter-spacing: -.03em; line-height: 1.05; }
.plat-desc { font-size: 14px; line-height: 1.42; color: var(--creme-2); }
.plat-pied { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; }
.plat-plus {
    position: absolute; right: 16px; bottom: 16px;
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--creme); color: var(--encre);
    transition: transform .45s var(--ressort), background .25s, color .25s;
}
.plat:hover { transform: translateY(-5px); border-color: rgba(247, 236, 214, .26); background: linear-gradient(180deg, rgba(247, 236, 214, .11), rgba(247, 236, 214, .03) 65%); }
.plat:hover .plat-photo img { transform: scale(1.06) rotate(-2deg) translateY(-4px); }
.plat:hover .plat-plus { background: var(--rouge); color: var(--creme); transform: rotate(90deg); }
.plat-epuise { cursor: default; }
.plat-epuise:hover { transform: none; }
.plat-epuise .plat-photo img { filter: grayscale(1) brightness(.65); transform: none !important; }
.plat-epuise .plat-nom, .plat-epuise .plat-desc, .plat-epuise .prix { opacity: .55; }
.badge-epuise {
    display: inline-block; padding: 6px 10px; border-radius: 999px;
    background: rgba(247, 236, 214, .12); color: var(--creme-2);
    font-size: 12px; font-weight: 800; font-style: normal; text-transform: uppercase; letter-spacing: .05em;
}

.formule {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
    margin-top: 18px; padding: 12px 24px 12px 12px; border-radius: 26px;
    border: 1.5px dashed rgba(247, 236, 214, .24); background: rgba(20, 2, 5, .26);
}
.formule-visuels { display: flex; }
.formule-visuels img { width: 110px; height: 110px; object-fit: contain; }
.formule-visuels img + img { margin-left: -34px; }
.formule-texte h3 { font-size: 25px; font-weight: 900; letter-spacing: -.03em; }
.formule-texte p { margin-top: 2px; font-size: 15px; color: var(--creme-2); }
.formule-sticker { width: 120px; height: auto; transform: rotate(6deg); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }

/* Pizzas : un titre par base (tomate, crème) au-dessus de chaque grille de cartes. */
.groupe-titre { margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--creme); font-size: 28px; font-weight: 900; letter-spacing: -.035em; }
.plats + .groupe-titre { margin-top: 48px; }
@media (max-width: 640px) {
    .groupe-titre { margin-bottom: 14px; font-size: 24px; }
    .plats + .groupe-titre { margin-top: 36px; }
}
/* Lignes simples (rubrique `liste` sans photos). */
.pizza { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px dashed rgba(247, 236, 214, .16); }
.pizza-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.pizza-nom { font-size: 19px; font-weight: 850; letter-spacing: -.02em; line-height: 1.15; }
.pizza-desc { font-size: 14px; line-height: 1.35; color: var(--creme-2); }
.pizza-info:hover .pizza-nom { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pizza-epuisee .pizza-info, .pizza-epuisee .prix { opacity: .5; }
.ajout-rapide {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    border: 1.5px solid rgba(247, 236, 214, .32); background: transparent;
    transition: transform .4s var(--ressort), background .2s, color .2s, border-color .2s;
}
.ajout-rapide:hover:not(:disabled) { background: var(--creme); color: var(--encre); border-color: var(--creme); transform: rotate(90deg); }
.ajout-rapide:disabled { opacity: .3; cursor: default; }
/* Rubrique sans photos (boissons) : lignes sur deux colonnes, une sur téléphone. */
.liste-simple { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
@media (max-width: 760px) { .liste-simple { grid-template-columns: minmax(0, 1fr); } }

.sauces { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.sauces li { text-align: center; font-size: 13px; font-weight: 700; color: var(--creme-2); }
.sauces img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: 2px; transition: transform .45s var(--ressort); }
.sauces li:hover img { transform: translateY(-4px) rotate(-3deg); }

.plat-nom .portion { margin-left: 5px; font-size: .72em; font-weight: 800; letter-spacing: 0; color: var(--or); }

/* Boissons : petites cartes (2 par ligne sur téléphone). */
/* `.plats.plats-petits` : doit passer devant la règle `.plats` du bloc téléphone, plus bas. */
.plats.plats-petits { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.plats-petits .plat { padding: 4px 12px 12px; }
.plats-petits .plat-photo { margin: 0 -4px; }
.plats-petits .plat-nom { font-size: 16px; }
.plats-petits .plat-desc { font-size: 12.5px; }
.plats-petits .plat-plus { right: 12px; bottom: 12px; width: 36px; height: 36px; }
.plats-petits .prix > span[aria-hidden] { font-size: 21px; }
@media (max-width: 640px) {
    .plats.plats-petits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .plats-petits .plat { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 10px 10px; }
    .plats-petits .plat-photo { width: auto; margin: 0 -4px; }
    .plats-petits .plat-nom { font-size: 15px; }
    .plats-petits .plat-desc { -webkit-line-clamp: 1; }
}
/* Choix de la boisson dans un menu : la canette en miniature. */
.puce.puce-photo span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 5px; }
.puce.puce-photo img { flex: none; width: 30px; height: 30px; object-fit: contain; }
.rubrique-titre-petit img { height: clamp(48px, 6.5vw, 72px); }

/* Suppléments frites (sous la formule des burgers) */
.supplements {
    margin-top: 14px; padding: 16px 20px 14px; border-radius: 26px;
    border: 1.5px dashed rgba(247, 236, 214, .24); background: rgba(20, 2, 5, .26);
}
.supplements-titre { display: block; width: auto; height: 44px; margin: 0 0 6px; transform: rotate(-2deg); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .3)); }
.supplements-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.supplements-liste li { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 14px; font-weight: 750; }
.supplements-liste img { width: 100%; max-width: 170px; aspect-ratio: 1; object-fit: contain; }
.supplements-liste .prix { margin-top: 4px; }
.supplements-note { margin-top: 10px; text-align: center; font-size: 14px; color: var(--creme-2); }
.puce b { margin-left: 4px; font-weight: 800; opacity: .75; }
@media (max-width: 640px) {
    .supplements { padding: 14px 12px 12px; }
    .supplements-liste { gap: 6px; }
    .supplements-liste li { font-size: 12.5px; }
    .supplements-titre { height: 36px; }
}

/* ---------- Panier (colonne de droite, ordinateur) ---------- */
.pl {
    padding: 20px; border-radius: 28px;
    border: 1px solid var(--trait);
    background: rgba(25, 3, 7, .5);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: var(--ombre);
}
.pl-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.pl-tete h2 { font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
.pl-tete span { font-size: 14px; font-weight: 700; color: var(--creme-3); }
.pl-lignes { max-height: min(46vh, 430px); overflow-y: auto; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; scrollbar-color: rgba(247, 236, 214, .2) transparent; }
.pl-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; font-weight: 800; }
.pl-total strong { font-size: 26px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pl-vide { padding: 30px 10px 26px; text-align: center; color: var(--creme-2); }
.pl-vide svg { width: 44px; height: 44px; margin: 0 auto 12px; opacity: .55; }
.pl-vide p { font-size: 17px; font-weight: 800; color: var(--creme); }
.pl-vide span { font-size: 14px; }
.pl-retrait { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--creme-2); text-align: center; }

/* Lignes de panier (colonne et tunnel) */
.ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px dashed rgba(247, 236, 214, .14); }
.ligne-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ligne-info strong { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.ligne-info span { font-size: 13.5px; color: var(--creme-2); overflow-wrap: anywhere; }
.ligne-info em { font-size: 13px; font-weight: 700; font-style: normal; color: #ffb4a8; }
.ligne-droite { flex: none; display: flex; align-items: center; gap: 12px; }
.ligne-prix { min-width: 52px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.ligne-epuisee .ligne-info strong { text-decoration: line-through; opacity: .6; }

.stepper { flex: none; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(247, 236, 214, .08); border: 1px solid var(--trait); }
.stepper button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; font-size: 21px; font-weight: 700; cursor: pointer; transition: background .2s; }
.stepper button:hover:not(:disabled) { background: rgba(247, 236, 214, .13); }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper output { min-width: 26px; text-align: center; font-size: 17px; font-weight: 850; font-variant-numeric: tabular-nums; }
.stepper-petit { padding: 2px; }
.stepper-petit button { width: 32px; height: 32px; font-size: 18px; }
.stepper-petit output { min-width: 20px; font-size: 15px; }

/* ---------- Infos ---------- */
.infos {
    max-width: var(--largeur); margin: 80px auto 0; padding: 0 var(--gouttiere);
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px;
    scroll-margin-top: 20px;
}
.infos-bloc { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 36px); border-radius: 30px; border: 1px solid var(--trait); background: rgba(247, 236, 214, .045); }
.infos h2 { font-size: clamp(34px, 3.6vw, 46px); font-weight: 900; font-style: italic; font-stretch: 78%; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; }
/* Le panneau est planté en bas du bloc « Retrait » : droit, le poteau touche le
   bord inférieur, et le texte garde sa colonne à gauche sans chevauchement. */
.infos-retrait {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 15vw, 200px);
    grid-template-rows: repeat(4, auto) 1fr; column-gap: 20px; padding-bottom: 0;
}
.infos-retrait > :not(.infos-panneau) { grid-column: 1; }
.infos-retrait .infos-itineraire { justify-self: start; }
.infos-retrait .infos-note { align-self: start; padding-bottom: clamp(22px, 3vw, 36px); }
.infos-panneau {
    grid-column: 2; grid-row: 1 / span 5; align-self: end;
    width: 100%; margin: 0 4px 0 0; pointer-events: none;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35));
}
@media (max-width: 860px) {
    .infos-retrait { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .infos-retrait .infos-note { padding-bottom: 0; }
    .infos-panneau { grid-column: 1; grid-row: 6; justify-self: end; width: 150px; margin: 8px 18px 0 0; }
}
.infos-adresse { margin: 18px 0 16px; font-size: 19px; font-weight: 700; line-height: 1.35; }
.infos-tel { display: grid; gap: 8px; margin-top: 22px; }
.infos-tel a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--trait); background: rgba(20, 2, 5, .35); transition: border-color .2s, background .2s; }
.infos-tel a span { font-size: 14px; font-weight: 700; color: var(--creme-2); }
.infos-tel a strong { font-size: 19px; font-weight: 850; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.infos-tel a:hover { border-color: rgba(247, 236, 214, .35); background: rgba(20, 2, 5, .55); }
.infos-note { margin-top: 16px; font-size: 14px; color: var(--creme-2); }
.horaires { margin-top: 18px; }
.horaires li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed rgba(247, 236, 214, .14); font-size: 15px; }
.horaires li span:first-child { font-weight: 700; }
.horaires li span:last-child { text-align: right; color: var(--creme-2); font-variant-numeric: tabular-nums; }
.horaires li.aujourdhui span { color: var(--creme); }
.horaires li.aujourdhui span:first-child::after {
    content: "Aujourd'hui"; margin-left: 8px; padding: 3px 8px; border-radius: 999px;
    background: var(--creme); color: var(--encre);
    font-size: 11px; font-weight: 800; vertical-align: 2px;
}

.pied {
    max-width: var(--largeur); margin: 60px auto 0;
    padding: 28px var(--gouttiere) calc(36px + env(safe-area-inset-bottom));
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
    border-top: 1px solid var(--trait); font-size: 14px; color: var(--creme-3);
}
.pied img { height: 36px; width: auto; }

/* ---------- Avis Google ---------- */
.note-google {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px 10px 12px; border-radius: 999px;
    background: var(--creme); color: var(--encre);
    font-size: 14px; font-weight: 700; white-space: nowrap;
    box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .7);
    transition: transform .35s var(--ressort);
}
.note-google:hover { transform: translateY(-2px); }
.note-google strong { font-size: 18px; font-weight: 900; }
.note-google > span:last-child { color: rgba(42, 4, 8, .68); }
.etoiles { position: relative; display: inline-block; line-height: 0; }
.etoiles svg { flex: none; fill: currentColor; }
.etoiles-fond, .etoiles-pleines { display: inline-flex; gap: 1px; }
.etoiles-fond { color: rgba(42, 4, 8, .18); }
.etoiles-pleines { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #f5a623; }

.hero-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; }
.hero-bas .hero-etat { margin-top: 0; }
.hero-note { background: rgba(247, 236, 214, .07); color: var(--creme); box-shadow: inset 0 0 0 1px var(--trait); }
.hero-note > span:last-child { color: var(--creme-2); }
.hero-note .etoiles-fond { color: rgba(247, 236, 214, .22); }

.avis { max-width: var(--largeur); margin: 90px auto 0; padding: 0 var(--gouttiere); scroll-margin-top: 20px; }
.avis-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.avis-tete h2 { font-size: clamp(40px, 5vw, 66px); font-weight: 900; font-style: italic; font-stretch: 76%; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; }
/* Mur d'avis, repris de XVI Barber : colonnes qui défilent en sens alterné,
   posées en perspective. Les bords s'effacent par un masque plutôt que par des
   dégradés de couleur : le fond du site n'est pas uni, un fondu coloré ferait
   des bandes. Le mur déborde du conteneur pour couvrir toute la largeur. */
.mur {
    position: relative; height: 580px; overflow: hidden; perspective: 900px;
    margin: 6px calc(50% - 50vw) 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-composite: intersect;
}
.mur-scene {
    display: flex; justify-content: center; align-items: flex-start; gap: 16px; height: 100%;
    transform: rotateX(12deg) rotateZ(-6deg) scale(1.12); transform-origin: center;
}
.mur-colonne {
    --gap: 16px;
    display: flex; flex-direction: column; gap: var(--gap);
    width: 288px; flex: none;
    animation: mur-monte var(--duree, 26s) linear infinite;
    will-change: transform;
}
.mur-colonne[data-sens="haut"] { animation-direction: reverse; }
.mur-colonne:nth-child(2) { --duree: 32s; animation-delay: -11s; }
.mur-colonne:nth-child(3) { --duree: 28s; animation-delay: -4s; }
.mur-colonne:nth-child(4) { --duree: 35s; animation-delay: -17s; }
.mur-colonne:nth-child(5) { --duree: 30s; animation-delay: -8s; }
.mur-colonne:nth-child(6) { --duree: 24s; animation-delay: -21s; }
.mur-colonne:nth-child(7) { --duree: 33s; animation-delay: -14s; }
.mur-piste { display: flex; flex-direction: column; gap: var(--gap); flex: none; }
@keyframes mur-monte {
    from { transform: translateY(0); }
    to { transform: translateY(calc(-50% - var(--gap) / 2)); }
}

/* La carte, comme un avis sur Google (photo ronde, nom, ancienneté, G), mais
   transparente sur le rouge du site : Marwan la préfère ainsi aux cartes blanches. */
.avis-carte {
    margin: 0; padding: 18px; border-radius: 18px;
    border: 1px solid var(--trait); color: var(--creme);
    background: linear-gradient(180deg, rgba(247, 236, 214, .09), rgba(247, 236, 214, .025));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.avis-haut { display: flex; align-items: center; gap: 10px; }
.avis-photo { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: rgba(247, 236, 214, .12); }
.avis-initiale { display: grid; place-items: center; background: var(--rouge); color: var(--creme); font-size: 16px; font-weight: 800; }
.avis-haut figcaption { display: grid; flex: 1; min-width: 0; }
.avis-nom { overflow: hidden; font-size: 14px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.avis-date { font-size: 12px; color: var(--creme-3); }
.avis-google { flex: none; width: 18px; height: 18px; line-height: 0; }
.avis-google svg { width: 18px; height: 18px; }
.avis-etoiles { display: flex; gap: 2px; margin: 12px 0 8px; }
.avis-etoiles svg { width: 14px; height: 14px; fill: var(--or); }
.avis-texte {
    margin: 0; font-size: 14px; line-height: 1.55; color: var(--creme-2); white-space: pre-line;
    /* Un avis très long tiendrait toute la colonne : coupé à six lignes. */
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.avis-pied { margin-top: 18px; text-align: center; font-size: 14px; color: var(--creme-3); }
.avis-pied a { font-weight: 800; color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .mur-colonne { animation: none; } }
@media (max-width: 900px) {
    .mur { height: 520px; perspective: none; }
    .mur-scene { transform: none; gap: 12px; }
    .mur-colonne { --gap: 12px; width: 264px; }
}
@media (max-width: 760px) {
    .avis { margin-top: 64px; }
    .hero-note { padding: 8px 14px 8px 10px; }
}
@media (max-width: 640px) {
    .mur { height: 480px; }
    .mur-colonne { width: min(340px, calc(100vw - 40px)); }
}

/* ---------- Barre « Voir ma commande » (téléphone) ---------- */
.barre-panier {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
    display: flex; align-items: center; gap: 12px;
    height: 62px; padding: 0 20px 0 10px; border: 0; border-radius: 999px;
    background: var(--creme); color: var(--encre);
    font-size: 16px; font-weight: 800; cursor: pointer;
    box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .7);
    /* Cachée : sortie de l'écran ET invisible. Sur téléphone elle est remontée
       au-dessus de la barre d'onglets, un simple décalage la laissait dépasser
       derrière celle-ci. */
    transform: translateY(150%); visibility: hidden;
    transition: transform .5s var(--ressort), visibility 0s linear .5s;
    -webkit-tap-highlight-color: transparent;
}
.barre-panier.visible { transform: none; visibility: visible; transition: transform .5s var(--ressort); }
.bp-nb { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--rouge); color: var(--creme); font-variant-numeric: tabular-nums; }
.bp-texte { flex: 1; text-align: left; }
.bp-total { font-variant-numeric: tabular-nums; }

.toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 70;
    display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px);
    padding: 12px 20px 12px 14px; border-radius: 999px;
    background: var(--creme); color: var(--encre); box-shadow: var(--ombre);
    font-size: 15px; font-weight: 800;
    opacity: 0; transform: translate(-50%, 30px); pointer-events: none;
    transition: opacity .3s, transform .45s var(--ressort);
}
.toast svg { flex: none; color: #1d8a4b; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Fiche d'un plat ---------- */
.fiche { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.fiche-fond { position: absolute; inset: 0; background: rgba(12, 0, 3, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s; }
.fiche-boite {
    position: relative; width: min(520px, 100%); max-height: calc(100dvh - 48px);
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 30px; border: 1px solid rgba(247, 236, 214, .14);
    background: linear-gradient(180deg, #5b0b14 0%, #3e070d 100%);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85);
    opacity: 0; transform: translateY(26px) scale(.96);
    transition: opacity .3s, transform .5s var(--ressort);
}
.fiche.ouverte .fiche-fond { opacity: 1; }
.fiche.ouverte .fiche-boite { opacity: 1; transform: none; }
.fiche-defile { overflow-y: auto; overscroll-behavior: contain; }
.fiche-fermer {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 42px; height: 42px; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: rgba(20, 2, 5, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.fiche-photo { padding: 24px 60px 0; background: radial-gradient(55% 55% at 50% 58%, rgba(247, 236, 214, .17), transparent 70%); }
.fiche-photo img { width: 100%; max-width: 330px; margin: 0 auto; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .4)); }
.fiche-pose { display: block; animation: posePlat .75s var(--ressort) backwards; }
@keyframes posePlat { from { opacity: 0; transform: translateY(-20px) scale(.93); } to { opacity: 1; transform: none; } }
.fiche-sans-photo { height: 64px; }
.fiche-corps { display: grid; gap: 18px; padding: 6px 24px 22px; }
.fiche-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fiche-cat { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--creme-3); }
.fiche-tete h2 { margin-top: 4px; font-size: 32px; font-weight: 900; letter-spacing: -.035em; line-height: 1; }
.fiche-desc { margin-top: -8px; font-size: 16px; line-height: 1.5; color: var(--creme-2); }

.option-formule {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 8px 14px 8px 8px; border-radius: 18px; cursor: pointer;
    border: 1.5px solid var(--trait); background: rgba(20, 2, 5, .24);
    transition: border-color .2s, background .2s;
}
.option-formule input { position: absolute; opacity: 0; pointer-events: none; }
.of-visuels { flex: none; display: flex; }
.of-visuels img { width: 56px; height: 56px; object-fit: contain; }
.of-visuels img + img { margin-left: -20px; }
.of-texte { flex: 1; display: flex; flex-direction: column; }
.of-texte strong { font-size: 16px; font-weight: 800; }
.of-texte small { font-size: 13px; color: var(--creme-3); }
.of-prix { font-size: 16px; font-weight: 850; }
.of-coche { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(247, 236, 214, .42); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.option-formule:has(input:checked) { border-color: var(--creme); background: rgba(247, 236, 214, .1); }
.option-formule input:checked ~ .of-coche { background: var(--creme); border-color: var(--creme); }
.option-formule input:checked ~ .of-coche::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid var(--encre); border-bottom: 2.5px solid var(--encre); transform: translate(0, -1px) rotate(-45deg); }
.option-formule input:focus-visible ~ .of-coche { outline: 2.5px solid var(--or); outline-offset: 2px; }

.choix { padding: 0; border: 0; min-width: 0; }
.choix legend { margin-bottom: 10px; padding: 0; font-size: 16px; font-weight: 800; }
.choix legend span { margin-left: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--creme-3); }
.choix-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; cursor: pointer; }
.puce input { position: absolute; opacity: 0; }
.puce span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--trait); font-size: 15px; font-weight: 700; transition: background .2s, color .2s, border-color .2s; }
.puce:hover span { border-color: rgba(247, 236, 214, .4); }
.puce input:checked + span { background: var(--creme); border-color: var(--creme); color: var(--encre); }
.puce input:focus-visible + span { outline: 2.5px solid var(--or); outline-offset: 2px; }
.choix-erreur legend span { color: #ffb4a8; }
.choix-erreur .choix-liste { animation: secoue .4s; }
@keyframes secoue { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Composition : un ingrédient coché est dans le plat ; décoché, il est barré. */
.coche { position: relative; cursor: pointer; }
.coche input { position: absolute; opacity: 0; }
.coche span {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px 9px 9px; border-radius: 999px;
    border: 1.5px solid rgba(247, 236, 214, .55); background: rgba(247, 236, 214, .1);
    font-size: 15px; font-weight: 700;
    transition: background .2s, border-color .2s, color .2s;
}
.coche span::before {
    content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a0408' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
    transition: background-color .2s, box-shadow .2s;
}
.coche input:not(:checked) + span { border-color: var(--trait); background: transparent; color: var(--creme-3); text-decoration: line-through; }
.coche input:not(:checked) + span::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(247, 236, 214, .35); }
.coche input:focus-visible + span { outline: 2.5px solid var(--or); outline-offset: 2px; }

.fiche-note { display: grid; gap: 8px; }
.fiche-note > span { font-size: 16px; font-weight: 800; }
.fiche-pied { display: flex; align-items: center; gap: 12px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--trait); background: rgba(30, 3, 7, .65); }
.fiche-ajouter { flex: 1; }
.sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45; }

/* Champs de saisie */
.saisie, .champ input, .champ textarea {
    width: 100%; min-height: 54px; padding: 14px 16px;
    border-radius: 16px; border: 1.5px solid rgba(247, 236, 214, .16);
    background: rgba(20, 2, 5, .35); color: var(--creme);
    font: 500 16px/1.4 var(--police);
    transition: border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none; appearance: none;
}
.champ textarea { min-height: 96px; resize: vertical; }
.saisie::placeholder, .champ input::placeholder, .champ textarea::placeholder { color: rgba(247, 236, 214, .36); }
.saisie:focus, .champ input:focus, .champ textarea:focus { outline: none; border-color: var(--creme); background: rgba(20, 2, 5, .5); box-shadow: 0 0 0 4px rgba(247, 236, 214, .12); }
input:-webkit-autofill { -webkit-text-fill-color: var(--creme); box-shadow: 0 0 0 100px #3a060c inset; caret-color: var(--creme); }

/* ---------- Tunnel de commande ---------- */
.tunnel {
    position: fixed; inset: 0; z-index: 50;
    display: none; flex-direction: column;
    background: linear-gradient(180deg, #4b0911 0%, #33050b 100%);
    opacity: 0; transform: translateY(18px);
    transition: opacity .35s, transform .5s var(--ressort);
}
.tunnel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../assets/marque/trame.webp) center / cover no-repeat; opacity: .3; mix-blend-mode: multiply; pointer-events: none; }
.tunnel.actif { display: flex; }
.tunnel.entre { opacity: 1; transform: none; }
.tunnel-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gouttiere); border-bottom: 1px solid var(--trait); }
.tunnel-quitter { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 16px 0 8px; border: 0; border-radius: 999px; background: rgba(247, 236, 214, .07); font-size: 15px; font-weight: 800; cursor: pointer; }
.tunnel-quitter:hover { background: rgba(247, 236, 214, .13); }
.tunnel-logo { height: 38px; width: auto; }
.tunnel-cale { width: 110px; }
.tunnel-corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 26px var(--gouttiere) 40px; }
.etapes { display: flex; gap: 10px; max-width: 1080px; margin: 0 auto 28px; }
.etape { flex: 1; display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 3px solid var(--trait); font-size: 14px; font-weight: 800; color: var(--creme-3); transition: color .3s, border-color .3s; }
.etape span { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 13px; transition: background .3s, color .3s, border-color .3s; }
.etape.faite { border-color: rgba(247, 236, 214, .5); color: var(--creme-2); cursor: pointer; }
.etape.active { border-color: var(--creme); color: var(--creme); }
.etape.active span { background: var(--creme); border-color: var(--creme); color: var(--encre); }
.tunnel-grille { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.tunnel-principal { min-width: 0; }
.t-panneau { display: none; }
.t-panneau.actif { display: block; animation: panneau .5s var(--ressort) both; }
@keyframes panneau { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.t-panneau h2 { margin-bottom: 8px; font-size: clamp(32px, 4.4vw, 46px); font-weight: 900; font-style: italic; font-stretch: 78%; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; }
.t-intro { margin-bottom: 22px; color: var(--creme-2); }
.t-intro:has(+ .t-estimation) { margin-bottom: 10px; }
.t-estimation {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 20px;
    padding: 7px 14px 7px 10px; border-radius: 999px;
    background: rgba(242, 179, 61, .12); border: 1px solid rgba(242, 179, 61, .35);
    font-size: 14px; font-weight: 750; color: var(--creme);
}
.t-note { margin-top: 18px; font-size: 14px; color: var(--creme-3); }
.t-erreur { margin-top: 18px; padding: 13px 16px; border-radius: 14px; background: rgba(255, 120, 100, .12); border: 1px solid rgba(255, 138, 122, .4); color: #ffd1c9; font-weight: 700; }
.t-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 18px; font-weight: 800; }
.t-total strong { font-size: 30px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.t-vide { padding: 40px 0; text-align: center; color: var(--creme-2); }
.t-vide svg { width: 48px; height: 48px; margin: 0 auto 12px; opacity: .55; }
.t-vide p { margin-bottom: 18px; font-size: 18px; font-weight: 800; color: var(--creme); }
.t-info { display: flex; gap: 12px; padding: 18px; border-radius: 18px; background: rgba(242, 179, 61, .12); border: 1px solid rgba(242, 179, 61, .35); }
.t-info svg { flex: none; margin-top: 3px; }
.t-info a { font-weight: 800; white-space: nowrap; text-decoration: underline; }

.jours { display: flex; gap: 10px; margin-bottom: 18px; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: none; }
.jours::-webkit-scrollbar { display: none; }
.jour {
    flex: 1 0 120px; max-width: 190px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 14px 16px; border-radius: 18px; text-align: left; cursor: pointer;
    border: 1.5px solid var(--trait); background: rgba(20, 2, 5, .3);
    transition: background .25s, border-color .25s, color .25s;
}
.jour-nom { font-size: 17px; font-weight: 850; letter-spacing: -.02em; }
.jour-date { font-size: 14px; color: var(--creme-2); }
.jour-etat { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--creme-3); }
.jour:hover:not(:disabled) { border-color: rgba(247, 236, 214, .42); }
.jour.choisi { background: var(--creme); border-color: var(--creme); color: var(--encre); }
.jour.choisi .jour-date, .jour.choisi .jour-etat { color: rgba(42, 4, 8, .65); }
.jour:disabled { opacity: .42; cursor: not-allowed; }
.service + .service { margin-top: 24px; }
.service h3 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 18px; font-weight: 850; }
.service h3 small { font-size: 14px; font-weight: 600; color: var(--creme-3); }
.service-fini { padding: 14px 16px; border-radius: 14px; background: rgba(20, 2, 5, .3); color: var(--creme-3); font-size: 15px; }
.creneaux-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.creneau {
    height: 62px; border-radius: 16px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    border: 1.5px solid var(--trait); background: rgba(20, 2, 5, .3);
    font-size: 17px; font-weight: 850; font-variant-numeric: tabular-nums;
    transition: transform .25s var(--ressort), background .2s, border-color .2s, color .2s;
}
.creneau span { font-size: 11px; font-weight: 700; color: var(--or); }
.creneau:hover:not(:disabled) { border-color: rgba(247, 236, 214, .45); transform: translateY(-2px); }
.creneau.choisi { background: var(--creme); border-color: var(--creme); color: var(--encre); }
.creneau.choisi span { color: var(--rouge); }
.creneau:disabled { opacity: .38; cursor: not-allowed; }
.creneau:disabled span { color: var(--creme-3); }

.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ-large { grid-column: 1 / -1; }
.champ label { font-size: 15px; font-weight: 800; }
.champ label em { margin-left: 4px; font-size: 13px; font-weight: 600; font-style: normal; color: var(--creme-3); }
.champ.erreur input { border-color: #ff8a7a; box-shadow: 0 0 0 4px rgba(255, 138, 122, .15); }
.champ-erreur { font-size: 13.5px; font-weight: 700; color: #ffb4a8; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.t-recap { position: sticky; top: 0; }
.recap { padding: 20px; border-radius: 24px; border: 1px solid var(--trait); background: rgba(20, 2, 5, .35); }
.recap-bloc { padding: 12px 0; border-bottom: 1px dashed rgba(247, 236, 214, .14); display: flex; flex-direction: column; gap: 3px; }
.recap-bloc:first-child { padding-top: 0; }
.recap-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--creme-3); }
.recap-bloc strong { font-size: 16px; font-weight: 800; }
.recap-muet { font-size: 14px; color: var(--creme-3); }
.recap-articles ul { display: grid; gap: 4px; margin-top: 4px; font-size: 14.5px; }
.recap-articles li span { font-weight: 800; }
.recap-articles small { color: var(--creme-3); }
.recap-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-weight: 700; color: var(--creme-2); }
.recap-total strong { font-size: 22px; color: var(--creme); font-variant-numeric: tabular-nums; }
.recap-paiement { padding-top: 12px; font-size: 13.5px; color: var(--creme-3); }

.tunnel-pied { padding: 12px var(--gouttiere) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--trait); background: rgba(33, 3, 8, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.tunnel-pied-in { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; gap: 12px; }
.tunnel-pied-in .btn-primaire { min-width: 260px; }
.tunnel-pied-in .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.tunnel.fini .etapes, .tunnel.fini .t-recap, .tunnel.fini .tunnel-pied { display: none; }
.tunnel.fini .tunnel-grille { grid-template-columns: minmax(0, 1fr); }

/* Écran final : le ticket de caisse */
.fin { max-width: 560px; margin: 0 auto; padding-top: 6px; text-align: center; }
.fin-sur { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(95, 211, 138, .14); color: #a4f0c0; font-size: 14px; font-weight: 800; }
.fin-titre { margin: 16px 0 28px; font-size: clamp(36px, 6vw, 54px); font-weight: 900; font-style: italic; font-stretch: 78%; text-transform: uppercase; line-height: .94; letter-spacing: -.01em; text-wrap: balance; }
.ticket-ombre { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5)); }
.ticket-pose { transform: rotate(-1deg); animation: ticket 1s var(--ressort) backwards; }
@keyframes ticket { from { opacity: 0; transform: translateY(-34px) rotate(-5deg); } to { opacity: 1; transform: rotate(-1deg); } }
.ticket {
    padding: 28px 24px 24px; text-align: left;
    background: var(--creme); color: var(--encre);
    -webkit-mask:
        radial-gradient(circle 7px at 50% 0, transparent 97%, #000) top / 18px 51% repeat-x,
        radial-gradient(circle 7px at 50% 100%, transparent 97%, #000) bottom / 18px 51% repeat-x;
    mask:
        radial-gradient(circle 7px at 50% 0, transparent 97%, #000) top / 18px 51% repeat-x,
        radial-gradient(circle 7px at 50% 100%, transparent 97%, #000) bottom / 18px 51% repeat-x;
}
.ticket-num { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 2px dashed rgba(42, 4, 8, .25); }
.ticket-num span, .ticket-infos span, .ticket-total span { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: rgba(42, 4, 8, .56); }
.ticket-num strong { font-size: 58px; font-weight: 900; font-style: italic; font-stretch: 76%; line-height: .85; color: var(--rouge); }
.ticket-infos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px 0; border-bottom: 2px dashed rgba(42, 4, 8, .25); }
.ticket-infos strong { font-size: 16px; font-weight: 850; line-height: 1.25; }
.ticket-lignes { display: grid; gap: 9px; padding: 14px 0; border-bottom: 2px dashed rgba(42, 4, 8, .25); font-size: 15px; }
.ticket-lignes li { display: flex; justify-content: space-between; gap: 12px; }
.ticket-lignes li > span:first-child { font-weight: 700; }
.ticket-lignes li > span:last-child { font-variant-numeric: tabular-nums; }
.ticket-lignes small { display: block; font-size: 13px; font-weight: 500; color: rgba(42, 4, 8, .6); }
.ticket-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; }
.ticket-total strong { font-size: 30px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

.suivi { margin: 34px 0 6px; }
.suivi ol { display: grid; grid-template-columns: repeat(4, 1fr); }
.suivi li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--creme-3); }
.suivi li::before { content: ""; position: absolute; top: 8px; left: -50%; right: 50%; height: 3px; background: rgba(247, 236, 214, .15); }
.suivi li:first-child::before { display: none; }
.suivi li span { position: relative; z-index: 1; width: 19px; height: 19px; border-radius: 50%; border: 3px solid rgba(247, 236, 214, .28); background: #3f070d; }
.suivi li.passe, .suivi li.courant { color: var(--creme); }
.suivi li.passe::before, .suivi li.courant::before { background: var(--creme); }
.suivi li.passe span { background: var(--creme); border-color: var(--creme); }
.suivi li.courant span { background: var(--or); border-color: var(--or); animation: poulsOr 1.8s infinite; }
@keyframes poulsOr {
    0% { box-shadow: 0 0 0 0 rgba(242, 179, 61, .6); }
    70% { box-shadow: 0 0 0 10px rgba(242, 179, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(242, 179, 61, 0); }
}
.suivi p { margin-top: 16px; font-size: 16px; color: var(--creme-2); }
.suivi-annule ol { opacity: .35; }
.suivi-annule p { color: #ffb4a8; font-weight: 700; }
.fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
/* Raccourcis GPS après la commande : l'appli s'ouvre déjà guidée vers le snack. */
.gps { margin-top: 28px; }
.gps-titre { margin-bottom: 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--creme-3); }
.gps-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gps-bouton {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 62px; padding: 0 14px; border-radius: 18px;
    background: #fff; color: #202124; font-size: 16px; font-weight: 800;
    box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .75);
    transition: transform .25s var(--ressort), box-shadow .25s;
}
.gps-bouton svg { flex: none; width: 30px; height: 30px; }
.gps-bouton span { white-space: nowrap; }
@media (max-width: 400px) { .gps-bouton { gap: 7px; padding: 0 10px; font-size: 15px; } .gps-bouton svg { width: 26px; height: 26px; } }
.gps-bouton:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -16px rgba(0, 0, 0, .8); }
.gps-bouton:active { transform: scale(.97); }
.fin-aide { margin-top: 20px; font-size: 14px; color: var(--creme-3); }
.fin-aide a { font-weight: 800; color: var(--creme); white-space: nowrap; }

.confettis { position: fixed; inset: 0; z-index: 80; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 1079px) {
    .carte-grille { grid-template-columns: minmax(0, 1fr); }
    .panier-lateral { display: none; }
    body.panier-plein .pied { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
    body.panier-plein .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1080px) { .barre-panier { display: none; } }

@media (max-width: 900px) {
    .tunnel-grille { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .t-recap { position: static; order: -1; }
    .tunnel[data-etape="1"] .t-recap { display: none; }
    .recap { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 16px; border-radius: 18px; }
    .recap-bloc { flex: 1 1 140px; padding: 0; border: 0; }
    .recap-articles ul, .recap-paiement, .recap-nom { display: none; }
    .recap-total { margin-top: 0; }
    .tunnel-pied-in .btn-primaire { min-width: 0; flex: 1; }
}

@media (max-width: 860px) {
    .hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 16px; }
    .hero-visuel { order: -1; }
    .hero-compo { max-width: 420px; margin: 0 auto; }
    /* Sur téléphone, le texte d'accueil et le titre des avis sont centrés. */
    .hero-texte { text-align: center; }
    .hero-lead { margin-inline: auto; }
    .hero-actions, .hero-bas { justify-content: center; }
    .avis-tete { flex-direction: column; align-items: center; text-align: center; }
    .hero h1 { margin-top: 16px; }
    .infos { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
}

@media (max-width: 760px) {
    .entete-nav { display: none; }
    .entete-actions { margin-left: auto; }
    .entete-logo img { height: 40px; }
    .entete-pilule { padding-left: 10px; }
    .sauces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
    .formule { grid-template-columns: auto 1fr; grid-template-areas: "v s" "t t"; gap: 4px 12px; padding: 12px 16px 18px; }
    .formule-visuels { grid-area: v; }
    .formule-texte { grid-area: t; }
    .formule-sticker { grid-area: s; justify-self: end; width: 96px; }
    .tunnel-cale { width: 44px; }
    .tunnel-quitter span { display: none; }
    .tunnel-quitter { width: 44px; padding: 0; justify-content: center; }
}

@media (max-width: 640px) {
    .entete-commande-txt { display: none; }
    .entete-commande { padding: 0 10px 0 14px; }
    .plats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .plat { flex-direction: row-reverse; align-items: center; gap: 8px; padding: 12px 10px 12px 16px; border-radius: 20px; }
    .plat-photo { flex: none; width: 128px; margin: 0; }
    .plat-corps { gap: 4px; align-self: stretch; }
    .plat-nom { font-size: 19px; }
    .plat-desc { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .plat-pied { padding-top: 10px; }
    .plat-plus { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; }
    .prix > span[aria-hidden] { font-size: 23px; }
    .rubrique { padding-top: 32px; }
    .rubrique-titre { margin-bottom: 22px; }
    .fiche { padding: 0; place-items: end stretch; }
    .fiche-boite { width: 100%; max-height: 94dvh; border-radius: 28px 28px 0 0; opacity: 1; transform: translateY(100%); transition: transform .5s var(--ressort); }
    .fiche-boite::before { content: ""; position: absolute; top: 8px; left: 50%; z-index: 4; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(247, 236, 214, .32); }
    .fiche-photo { padding: 26px 72px 0; }
    .fiche-tete h2 { font-size: 28px; }
    .champs { grid-template-columns: minmax(0, 1fr); }
    .jour { flex-basis: 108px; padding: 12px 14px; }
    .creneaux-grille { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
    .creneau { height: 58px; font-size: 16px; }
    .ticket { padding: 24px 18px 20px; }
    .ticket-num strong { font-size: 48px; }
    .ticket-infos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .tunnel-pied-in .btn-contour { padding: 0 18px; }
}

/* Écrans tactiles : pas d'état « survol » qui reste collé après un appui (iOS) */
@media (hover: none) {
    .plat:hover { transform: none; border-color: var(--trait); background: linear-gradient(180deg, rgba(247, 236, 214, .075), rgba(247, 236, 214, .015) 65%); }
    .plat:hover .plat-photo img, .sauces li:hover img { transform: none; }
    .plat:hover .plat-plus { transform: none; background: var(--creme); color: var(--encre); }
    .plat:active { transform: scale(.985); }
    .ajout-rapide:hover:not(:disabled) { transform: none; background: transparent; color: inherit; border-color: rgba(247, 236, 214, .32); }
    .ajout-rapide:active:not(:disabled) { background: var(--creme); color: var(--encre); }
    .creneau:hover:not(:disabled) { transform: none; }
    .btn:hover .glisse > span { transform: none; }
    .pizza-info:hover .pizza-nom { text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .revele { opacity: 1; }
}

/* ---------- Barre d'onglets façon application (téléphone) ----------
   Posée tout en bas, en verre dépoli sombre ; la barre « Voir ma commande »
   remonte juste au-dessus. Le tunnel de commande et la fiche d'un plat la
   recouvrent (z-index plus élevés). */
.barre-onglets { display: none; }
@media (max-width: 760px) {
    .barre-onglets {
        /* Flottante et arrondie, détachée des bords de l'écran. */
        position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45;
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 6px;
        border-radius: 30px;
        background: rgba(34, 3, 8, .78);
        -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
        border: 1px solid rgba(247, 236, 214, .14);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 36px -14px rgba(0, 0, 0, .85);
    }
    .barre-onglets a, .barre-onglets button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        min-width: 0; height: 54px; padding: 0; border: 0; border-radius: 24px;
        background: transparent; color: var(--creme-3);
        font: 700 11px/1 var(--police); letter-spacing: .01em; white-space: nowrap;
        cursor: pointer; -webkit-tap-highlight-color: transparent;
        transition: color .2s;
    }
    .barre-onglets svg { width: 23px; height: 23px; transition: transform .35s var(--ressort); }
    .barre-onglets .actif { color: var(--creme); }
    .barre-onglets .actif svg { transform: translateY(-1px) scale(1.06); }
    .barre-onglets a:active svg, .barre-onglets button:active svg { transform: scale(.9); }
    /* L'onglet du milieu : la commande, en pastille crème. */
    .onglet-icone {
        position: relative; display: grid; place-items: center;
        width: 46px; height: 30px; border-radius: 999px;
        background: var(--creme); color: var(--encre);
    }
    .onglet-commande { color: var(--creme) !important; }
    .onglet-icone svg { width: 20px; height: 20px; }
    .onglet-icone .pastille-nb {
        position: absolute; top: -7px; right: -9px;
        min-width: 19px; height: 19px; padding: 0 5px;
        font-size: 11px; box-shadow: 0 0 0 2px rgba(34, 3, 8, .9);
    }

    body { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
    .barre-panier { bottom: calc(88px + env(safe-area-inset-bottom)); }
    .toast { bottom: calc(94px + env(safe-area-inset-bottom)); }
    body.panier-plein .toast { bottom: calc(162px + env(safe-area-inset-bottom)); }
    body.panier-plein .pied { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    /* Le bouton « Ma commande » de l'en-tête ferait doublon avec l'onglet. */
    .entete-commande { display: none; }
}
@media (max-width: 760px) and (hover: none) {
    .barre-onglets a:hover, .barre-onglets button:hover { color: inherit; }
}

/* Bloc « Retrait sur place » : Waze et Google Maps côte à côte (mêmes boutons que l'écran de fin). */
.infos-retrait .infos-gps { max-width: 420px; margin: 2px 0 0; }
.infos-gps .gps-bouton { height: 56px; }

/* Images : pas de glisser-déposer, pas de sélection, pas de menu « Enregistrer
   l'image » à l'appui long sur iPhone. Ça n'empêche pas une capture d'écran,
   mais ça coupe les moyens simples de récupérer les photos. */
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---------- Écran de chargement ----------
   Crème, le logo flotte doucement au centre. Quand la page est prête, le script
   de index.html pose .part : le logo prend un léger élan puis tout l'écran
   descend et sort par le bas, en s'arrondissant par le haut. */
.ecran-logo {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: 100vh; height: 100lvh;
    display: grid; place-items: center;
    background: var(--creme);
}
.ecran-logo-in { display: grid; justify-items: center; gap: 16px; width: min(70vw, 340px); }
.ecran-logo img { width: 100%; height: auto; animation: logoFlotte 1.7s ease-in-out infinite; }
.ecran-logo-ombre {
    width: 58%; height: 16px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(42, 4, 8, .24), rgba(42, 4, 8, 0));
    animation: ombreFlotte 1.7s ease-in-out infinite;
}
@keyframes logoFlotte { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(-2deg); } }
@keyframes ombreFlotte { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.8); opacity: .55; } }
.ecran-logo.part { pointer-events: none; animation: ecranDescend .95s cubic-bezier(.7, 0, .22, 1) forwards; }
.ecran-logo.part .ecran-logo-in { animation: logoElan .95s cubic-bezier(.7, 0, .22, 1) forwards; }
@keyframes ecranDescend {
    from { transform: translateY(0); border-radius: 0; }
    to { transform: translateY(100%); border-radius: 50% 50% 0 0 / 140px 140px 0 0; }
}
@keyframes logoElan {
    0% { transform: none; }
    28% { transform: translateY(-18px) scale(1.04); }
    100% { transform: translateY(90px) scale(.9); opacity: 0; }
}