/* ==================================================================
   Dilan Kebab Burger — feuille de style unique.
   Identité reprise du site vitrine : Anton en display, Instrument Sans
   en courant, Caveat pour les respirations manuscrites.
   ================================================================== */

:root {
    --brique:      #C2502A;
    --brique-fonce:#A33F1E;

    /* Rouge d'action. Réservé aux boutons qui déclenchent quelque chose :
       ajouter, commander, valider. Si c'est la seule chose rouge de
       l'écran, l'œil y va sans qu'on ait à crier.
       #DC2626 sur blanc = 4,83:1, conforme AA. En petit texte sur crème
       il tomberait à 4,43:1 : dans ce cas on prend --rouge-fonce. */
    --action:       #DC2626;
    --action-fonce: #B91C1C;
    --noir:        #17120E;
    --creme:       #FCF4E8;
    --creme-carte: #FFFBF4;
    --or:          #E9A63B;
    --vert:        #2F7D4F;
    --rouge:       #B3261E;

    --trait:       rgba(23, 18, 14, .14);
    --trait-clair: rgba(252, 244, 232, .18);
    --gris:        rgba(23, 18, 14, .62);

    --rayon:       16px;
    --rayon-lg:    24px;
    --ombre:       0 2px 8px rgba(23,18,14,.06), 0 12px 32px rgba(23,18,14,.07);
    --ombre-forte: 0 8px 24px rgba(23,18,14,.14), 0 32px 64px rgba(23,18,14,.16);

    --largeur:     1180px;
    --header-h:    64px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Les icônes SVG héritent de la couleur du texte et s'alignent dessus. */
.icone { flex: none; vertical-align: -.18em; }

/* L'attribut HTML `hidden` doit toujours l'emporter. Sans ce !important,
   la moindre règle `display:` d'un composant le neutralise en silence —
   c'est ainsi que le bandeau « commande prête » s'affichait trop tôt. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 56px); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--creme);
    color: var(--noir);
    font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
    overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, .display {
    font-family: 'Anton', Impact, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: 1;
    margin: 0;
}
h1 { font-size: clamp(44px, 10.5vw, 116px); line-height: .92; }
h2 { font-size: clamp(30px, 5.6vw, 58px); }
h3 { font-size: clamp(20px, 2.6vw, 26px); }

.manuscrit { font-family: 'Caveat', cursive; font-weight: 600; text-transform: none; letter-spacing: 0; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.section   { padding: clamp(48px, 8vw, 100px) 0; }
.section--sombre { background: var(--noir); color: var(--creme); }
.section--brique { background: var(--brique); color: var(--creme); }

.surtitre {
    font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
    font-size: 13px; letter-spacing: .2em; color: var(--brique); margin: 0 0 12px;
}
.section--sombre .surtitre { color: var(--or); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ */
/* Boutons                                                             */
/* ------------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 13px 22px; border: 0; border-radius: 999px;
    background: var(--action); color: #fff;
    text-decoration: none; cursor: pointer;
    min-height: 44px;              /* cible tactile confortable */
    box-shadow: 0 1px 2px rgba(185,28,28,.24), 0 6px 18px -6px rgba(185,28,28,.5);
    transition: transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s, box-shadow .18s;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover  {
    background: var(--action-fonce); transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(185,28,28,.28), 0 12px 26px -8px rgba(185,28,28,.55);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.btn--sombre  { background: var(--noir); box-shadow: none; }
.btn--sombre:hover { background: #2a211a; }
.btn--fantome {
    background: transparent; color: currentColor;
    box-shadow: inset 0 0 0 2px currentColor;
}
.btn--fantome:hover { box-shadow: inset 0 0 0 2px currentColor; }
.btn--fantome:hover { background: rgba(255,255,255,.08); }
.btn--clair { background: var(--creme); color: var(--noir); box-shadow: none; }
.btn--clair:hover { background: #fff; }
.btn--bloc  { width: 100%; }
.btn--petit { padding: 9px 16px; font-size: 12px; }
.btn--large { padding: 16px 30px; font-size: 15px; }

/* ------------------------------------------------------------------ */
/* En-tête                                                             */
/* ------------------------------------------------------------------ */
.entete {
    position: sticky; top: 0; z-index: 60;
    background: rgba(252, 244, 232, .93);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--trait);
}
.entete__inner {
    display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
    min-height: var(--header-h);
    max-width: var(--largeur); margin: 0 auto; padding: 8px clamp(16px, 4vw, 40px);
}
.logo {
    font-family: 'Anton', sans-serif; text-transform: uppercase;
    font-size: 22px; line-height: .9; text-decoration: none; letter-spacing: .01em;
    display: flex; flex-direction: column;
}
.logo span { font-size: 10px; letter-spacing: .22em; color: var(--brique); }

.nav-site {
    display: flex; align-items: center; gap: clamp(12px, 2vw, 26px);
    margin-left: auto;
    font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.nav-site a { text-decoration: none; opacity: .78; transition: opacity .15s; white-space: nowrap; }
.nav-site a:hover { opacity: 1; }
@media (max-width: 860px) { .nav-site { display: none; } }

.etat-pastille {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px; background: rgba(23,18,14,.06);
}
.etat-pastille::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge);
}
.etat-pastille--ouvert { background: rgba(47,125,79,.12); color: #1f5c39; }
.etat-pastille--ouvert::before { background: var(--vert); box-shadow: 0 0 0 3px rgba(47,125,79,.18); }

.bouton-panier {
    position: relative; margin-left: 4px;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 18px; border-radius: 999px; border: 0;
    background: var(--noir); color: var(--creme);
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    cursor: pointer; text-decoration: none;
    transition: background-color .18s, transform .18s;
}
.bouton-panier:hover { background: var(--action-fonce); transform: translateY(-1px); }
/* Panier plein = une action en attente : il s'allume. */
.bouton-panier[data-vide="0"] {
    background: var(--action);
    box-shadow: 0 1px 2px rgba(185,28,28,.24), 0 6px 18px -6px rgba(185,28,28,.5);
}
.bouton-panier[data-vide="0"]:hover { background: var(--action-fonce); }
.bouton-panier__compteur {
    min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px;
    background: var(--or); color: var(--noir);
    font-size: 12px; font-weight: 800; line-height: 21px; text-align: center;
}
.bouton-panier[data-vide="1"] .bouton-panier__compteur { display: none; }

/* ------------------------------------------------------------------ */
/* Héros                                                               */
/* ------------------------------------------------------------------ */
.heros {
    position: relative; display: flex; align-items: flex-end;
    min-height: min(58vh, 500px); overflow: hidden; background: var(--noir);
}
.heros__video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 50%;
    background: var(--noir);
}
.heros__voile {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(23,18,14,.94) 8%, rgba(23,18,14,.55) 46%, rgba(23,18,14,.25) 100%);
}
.heros__contenu {
    position: relative; z-index: 2; color: var(--creme);
    width: 100%; max-width: var(--largeur); margin: 0 auto;
    padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 40px);
}
.heros h1 { color: var(--creme); max-width: 15ch; margin-top: 14px; }
.heros__accroche {
    max-width: 52ch; margin: 20px 0 26px;
    font-size: clamp(15px, 1.9vw, 19px); color: rgba(252,244,232,.86);
}
.heros__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.heros__etoiles {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 26px; font-size: 13px; color: rgba(252,244,232,.72);
}
.etoiles { color: var(--or); letter-spacing: 2px; }

/* ------------------------------------------------------------------ */
/* Barre de mode (à emporter / sur place)                              */
/* ------------------------------------------------------------------ */
.barre-mode {
    position: sticky; top: var(--header-h); z-index: 55;
    background: var(--noir); color: var(--creme);
}
.barre-mode__inner {
    max-width: var(--largeur); margin: 0 auto;
    padding: 10px clamp(16px, 4vw, 40px);
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.barre-mode__libelle {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(252,244,232,.6); font-weight: 600;
}
.bascule {
    display: inline-flex; padding: 3px; border-radius: 999px;
    background: rgba(252,244,232,.1);
}
.bascule button {
    border: 0; background: transparent; color: rgba(252,244,232,.72);
    font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .03em;
    padding: 8px 18px; border-radius: 999px; cursor: pointer;
    transition: background-color .18s, color .18s;
}
.bascule button[aria-pressed="true"] { background: var(--creme); color: var(--noir); }
.bascule button:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

.barre-mode__note { font-size: 13px; color: rgba(252,244,232,.6); margin-left: auto; }
@media (max-width: 700px) { .barre-mode__note { display: none; } }

/* ------------------------------------------------------------------ */
/* Navigation des catégories                                           */
/* ------------------------------------------------------------------ */
.nav-cat {
    position: sticky; top: calc(var(--header-h) + 51px); z-index: 50;
    background: rgba(252,244,232,.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--trait);
}
.nav-cat__inner {
    max-width: var(--largeur); margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.nav-cat__inner::-webkit-scrollbar { display: none; }
.nav-cat a {
    flex: none; padding: 14px 14px 12px; text-decoration: none;
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gris); border-bottom: 3px solid transparent;
    transition: color .18s, border-color .18s; white-space: nowrap;
}
.nav-cat a:hover { color: var(--noir); }
.nav-cat a.actif { color: var(--brique); border-bottom-color: var(--brique); }

/* ------------------------------------------------------------------ */
/* Carte : catégories et produits                                      */
/* ------------------------------------------------------------------ */
.categorie { padding: clamp(36px, 5vw, 64px) 0 0; }
.categorie__entete { margin-bottom: 22px; }
.categorie__entete h2 { margin-bottom: 8px; }
.categorie__desc { max-width: 62ch; color: var(--gris); margin: 0; }
.categorie__note {
    display: inline-block; margin-top: 12px; padding: 6px 12px;
    background: rgba(233,166,59,.18); border-radius: 999px;
    font-size: 13px; font-weight: 600;
}

.grille-produits {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.produit {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--creme-carte); border: 1px solid var(--trait);
    border-radius: var(--rayon); padding: 18px 20px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.produit:hover { border-color: rgba(194,80,42,.4); box-shadow: var(--ombre); transform: translateY(-2px); }
.produit__haut { display: flex; align-items: baseline; gap: 12px; }
.produit__nom  { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 19px; letter-spacing: .01em; }
.produit__prix {
    margin-left: auto; font-family: 'Anton', sans-serif; font-size: 19px;
    color: var(--brique); white-space: nowrap;
}
.produit__desc { font-size: 14px; color: var(--gris); margin: 0; flex: 1; }
.produit__badge {
    align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brique);
    background: rgba(194,80,42,.1); padding: 4px 9px; border-radius: 999px;
}
.produit__pied { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.produit__pied .btn { margin-left: auto; }
.produit__mention { font-size: 12px; color: var(--gris); font-style: italic; }

.categorie--sombre { background: var(--noir); color: var(--creme); }
.categorie--sombre .produit {
    background: rgba(252,244,232,.04); border-color: var(--trait-clair);
}
.categorie--sombre .produit__desc { color: rgba(252,244,232,.66); }
/* Ces deux-là héritaient d'un gris pensé pour fond clair : sur fond noir
   ils devenaient illisibles. */
.categorie--sombre .produit__mention { color: rgba(252,244,232,.62); }
.categorie--sombre .produit__badge {
    color: var(--or); background: rgba(233,166,59,.16);
}
.categorie--sombre .produit__prix { color: var(--or); }
.categorie--sombre .categorie__desc { color: rgba(252,244,232,.7); }

/* Bandeau alcools, non commandable */
.bandeau-comptoir {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(233,166,59,.14); border: 1px dashed rgba(233,166,59,.5);
    border-radius: var(--rayon); padding: 14px 18px; font-size: 14px; margin-bottom: 18px;
}

/* ------------------------------------------------------------------ */
/* Modale de personnalisation                                          */
/* ------------------------------------------------------------------ */
.modale {
    position: fixed; inset: 0; z-index: 100;
    display: none; align-items: flex-end; justify-content: center;
    background: rgba(23,18,14,.55); backdrop-filter: blur(3px);
    padding: 0;
}
.modale[open], .modale.ouverte { display: flex; }
@media (min-width: 720px) { .modale { align-items: center; padding: 24px; } }

.modale__boite {
    background: var(--creme); width: 100%; max-width: 560px;
    max-height: 92vh; display: flex; flex-direction: column;
    border-radius: var(--rayon-lg) var(--rayon-lg) 0 0;
    box-shadow: var(--ombre-forte);
    animation: monte .28s cubic-bezier(.2,.8,.2,1);
}
@media (min-width: 720px) { .modale__boite { border-radius: var(--rayon-lg); } }
@keyframes monte { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.modale__entete {
    padding: 20px 22px 14px; border-bottom: 1px solid var(--trait);
    display: flex; align-items: flex-start; gap: 14px;
}
.modale__entete h3 { flex: 1; }
.modale__fermer {
    border: 0; background: rgba(23,18,14,.07); color: var(--noir);
    width: 34px; height: 34px; border-radius: 50%; font-size: 19px; line-height: 1;
    cursor: pointer; flex: none;
}
.modale__fermer:hover { background: rgba(23,18,14,.14); }
.modale__corps { padding: 4px 22px 18px; overflow-y: auto; flex: 1; }
.modale__pied {
    padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--trait); background: var(--creme-carte);
    display: flex; align-items: center; gap: 12px;
}

.groupe-option { padding: 18px 0; border-bottom: 1px solid var(--trait); }
.groupe-option:last-child { border-bottom: 0; }
.groupe-option__titre {
    display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px;
    font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 15px; letter-spacing: .1em;
}
.groupe-option__requis {
    font-family: 'Instrument Sans', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .08em; color: var(--brique); text-transform: uppercase;
}
.groupe-option__note { font-size: 13px; color: var(--gris); margin: 0 0 12px; }
.groupe-option__erreur { color: var(--rouge); font-size: 13px; font-weight: 600; margin: 8px 0 0; }

.choix-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.choix {
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--trait); background: var(--creme-carte);
    font-size: 14px; font-weight: 600;
    transition: border-color .16s, background-color .16s, color .16s;
    -webkit-tap-highlight-color: transparent;
}
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix:hover { border-color: rgba(194,80,42,.5); }
.choix:has(input:checked),
.choix.coche { background: var(--noir); border-color: var(--noir); color: var(--creme); }
.choix:has(input:focus-visible) { outline: 3px solid var(--or); outline-offset: 2px; }
.choix:has(input:disabled),
.choix.desactive { opacity: .4; cursor: not-allowed; }
.choix__badge {
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--or);
}
.choix__prix { font-size: 12px; opacity: .75; }

.selecteur-qte {
    display: inline-flex; align-items: center; gap: 2px;
    border: 1.5px solid var(--trait); border-radius: 999px; background: var(--creme-carte);
}
.selecteur-qte button {
    width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer;
    font-size: 20px; line-height: 1; color: var(--noir); border-radius: 50%;
}
.selecteur-qte button:hover { background: rgba(23,18,14,.07); }
.selecteur-qte span { min-width: 26px; text-align: center; font-weight: 700; }

/* ------------------------------------------------------------------ */
/* Tiroir panier                                                       */
/* ------------------------------------------------------------------ */
.tiroir {
    position: fixed; inset: 0; z-index: 90; display: none;
}
.tiroir.ouvert { display: block; }
.tiroir__voile { position: absolute; inset: 0; background: rgba(23,18,14,.5); }
.tiroir__panneau {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(420px, 100%); background: var(--creme);
    display: flex; flex-direction: column;
    box-shadow: var(--ombre-forte);
    animation: glisse .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes glisse { from { transform: translateX(100%); } to { transform: none; } }

.tiroir__entete {
    padding: 20px 22px 14px; border-bottom: 1px solid var(--trait);
    display: flex; align-items: center; gap: 12px;
}
.tiroir__entete h3 { flex: 1; }
.tiroir__corps { flex: 1; overflow-y: auto; padding: 6px 22px 18px; }
.tiroir__pied {
    border-top: 1px solid var(--trait); background: var(--creme-carte);
    padding: 16px 22px calc(16px + env(safe-area-inset-bottom));
}

.ligne-panier { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--trait); }
.ligne-panier:last-child { border-bottom: 0; }
.ligne-panier__corps { flex: 1; min-width: 0; }
.ligne-panier__nom { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 16px; }
.ligne-panier__options { font-size: 13px; color: var(--gris); margin: 4px 0 10px; }
.ligne-panier__options li { list-style: none; }
.ligne-panier__prix { font-family: 'Anton', sans-serif; font-size: 16px; white-space: nowrap; }
.ligne-panier__actions { display: flex; align-items: center; gap: 10px; }
.lien-supprimer {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-size: 13px; color: var(--gris); text-decoration: underline; font-family: inherit;
}
.lien-supprimer:hover { color: var(--rouge); }

.totaux { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.totaux__ligne { display: flex; justify-content: space-between; font-size: 14px; color: var(--gris); }
.totaux__total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 24px;
    padding-top: 10px; border-top: 1px solid var(--trait);
}

.panier-vide { text-align: center; padding: 48px 12px; color: var(--gris); }
.panier-vide__emoji {
    display: flex; justify-content: center;
    margin-bottom: 14px; color: var(--trait);
}
.panier-vide__emoji svg { opacity: .55; }

/* ------------------------------------------------------------------ */
/* Formulaires                                                         */
/* ------------------------------------------------------------------ */
.champ { margin-bottom: 18px; }
.champ label {
    display: block; margin-bottom: 6px;
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.champ input, .champ textarea, .champ select {
    width: 100%; padding: 13px 15px; font: inherit; color: inherit;
    background: var(--creme-carte); border: 1.5px solid var(--trait);
    border-radius: 12px; transition: border-color .16s;
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
    outline: 0; border-color: var(--brique);
}
.champ textarea { min-height: 88px; resize: vertical; }
.champ__aide { font-size: 12.5px; color: var(--gris); margin: 6px 0 0; }
.champ--erreur input, .champ--erreur textarea { border-color: var(--rouge); }

.creneaux { display: flex; flex-direction: column; gap: 18px; }
.creneaux__jour h4 {
    font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 13px;
    letter-spacing: .16em; color: var(--brique); margin: 0 0 10px;
}
.creneaux__liste { display: flex; flex-wrap: wrap; gap: 8px; }

.carte-choix {
    display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
    padding: 16px 18px; border: 1.5px solid var(--trait); border-radius: var(--rayon);
    background: var(--creme-carte); transition: border-color .16s, background-color .16s;
}
.carte-choix:has(input:checked),
.carte-choix.coche { border-color: var(--brique); background: rgba(194,80,42,.06); }
.carte-choix input { margin-top: 3px; accent-color: var(--brique); flex: none; }
.carte-choix strong { display: block; }
.carte-choix span { font-size: 13.5px; color: var(--gris); }

.alerte {
    padding: 14px 18px; border-radius: var(--rayon); margin-bottom: 20px;
    font-size: 14.5px; border: 1px solid;
}
.alerte--erreur  { background: rgba(179,38,30,.08);  border-color: rgba(179,38,30,.3);  color: #7d1b16; }
.alerte--succes  { background: rgba(47,125,79,.1);   border-color: rgba(47,125,79,.32); color: #1f5c39; }
.alerte--info    { background: rgba(233,166,59,.14); border-color: rgba(233,166,59,.45); }

/* ------------------------------------------------------------------ */
/* Grilles de contenu (vitrine)                                        */
/* ------------------------------------------------------------------ */
.grille-3 { display: grid; gap: clamp(20px, 3vw, 34px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grille-2 { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }

.bloc-arg h3 { margin-bottom: 8px; }
.bloc-arg p  { color: var(--gris); margin: 0; }
.bloc-arg__num {
    font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: .2em;
    color: var(--brique); display: block; margin-bottom: 10px;
}

.photo-ronde { border-radius: var(--rayon-lg); overflow: hidden; }
.photo-ronde img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.avis {
    background: rgba(252,244,232,.05); border: 1px solid var(--trait-clair);
    border-radius: var(--rayon); padding: 22px;
}
.avis blockquote { margin: 10px 0 14px; font-size: 16px; line-height: 1.5; }
.avis figcaption { font-size: 13px; color: rgba(252,244,232,.6); }

.liste-puces { list-style: none; padding: 0; margin: 0; }
.liste-puces li {
    padding: 12px 0 12px 26px; border-bottom: 1px solid var(--trait); position: relative;
}
.liste-puces li::before {
    content: '·'; position: absolute; left: 6px; top: 8px;
    color: var(--brique); font-size: 26px; line-height: 1;
}
.section--sombre .liste-puces li { border-color: var(--trait-clair); }

.horaires-liste { list-style: none; padding: 0; margin: 0; }
.horaires-liste li {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--trait-clair);
}
.horaires-liste li.aujourdhui { color: var(--or); font-weight: 700; }

details.faq {
    border-bottom: 1px solid var(--trait); padding: 4px 0;
}
details.faq summary {
    cursor: pointer; list-style: none; padding: 16px 30px 16px 0; position: relative;
    font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 17px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
    content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 22px; color: var(--brique); transition: transform .2s;
}
details.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details.faq p { margin: 0 0 18px; color: var(--gris); }

/* ------------------------------------------------------------------ */
/* Pied de page                                                        */
/* ------------------------------------------------------------------ */
.pied { background: var(--noir); color: var(--creme); padding: clamp(44px, 6vw, 72px) 0 28px; }
.pied a { color: rgba(252,244,232,.72); text-decoration: none; }
.pied a:hover { color: var(--creme); }
.pied__grille { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pied h4 {
    font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 13px;
    letter-spacing: .2em; color: var(--or); margin: 0 0 14px;
}
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
.pied__bas {
    margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--trait-clair);
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
    font-size: 12.5px; color: rgba(252,244,232,.5);
}

/* Barre panier fixe sur mobile */
.barre-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(23,18,14,.96); backdrop-filter: blur(10px);
    display: none;
}
.barre-mobile .btn { width: 100%; }
@media (max-width: 720px) {
    .barre-mobile[data-vide="0"] { display: block; }
    body:has(.barre-mobile[data-vide="0"]) { padding-bottom: 76px; }
}

/* ------------------------------------------------------------------ */
/* Pages simples (confirmation, légal)                                 */
/* ------------------------------------------------------------------ */
.page-etroite { max-width: 720px; margin: 0 auto; padding: clamp(40px, 7vw, 80px) clamp(16px, 4vw, 40px); }
.page-etroite h2 { margin: 36px 0 12px; font-size: clamp(22px, 3vw, 30px); }
.page-etroite p, .page-etroite li { color: var(--gris); }

.recap {
    background: var(--creme-carte); border: 1px solid var(--trait);
    border-radius: var(--rayon-lg); padding: clamp(20px, 4vw, 32px);
}
.recap__ref {
    font-family: 'Anton', sans-serif; font-size: clamp(34px, 7vw, 54px);
    color: var(--brique); letter-spacing: .04em;
}
.recap__grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 22px 0; }
.recap__item span {
    display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gris); margin-bottom: 3px;
}
.recap__item strong { font-size: 16px; }

/* Catégorie rappelée à côté du nom : « Kebab » la pizza et « Kebab simple »
   le sandwich se confondent sinon sur un ticket de cuisine. */
.ligne-panier__cat {
    display: inline-block; margin-left: 6px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brique); background: rgba(194,80,42,.12);
    padding: 2px 7px; border-radius: 999px; vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Suivi de commande                                                   */
/* ------------------------------------------------------------------ */
.frise { list-style: none; padding: 0; margin: 0 0 26px; position: relative; }

.frise__etape {
    position: relative; display: flex; gap: 16px; align-items: flex-start;
    padding: 0 0 26px 0;
}
/* Le trait qui relie les puces, tiré depuis chaque étape sauf la dernière. */
.frise__etape::before {
    content: ''; position: absolute; left: 13px; top: 26px; bottom: 0;
    width: 2px; background: var(--trait);
}
.frise__etape:last-child { padding-bottom: 0; }
.frise__etape:last-child::before { display: none; }

.frise__puce {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--trait); background: var(--creme);
    position: relative; z-index: 1;
    transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.frise__titre  { display: block; font-size: 17px; }
.frise__detail { display: block; font-size: 14px; color: var(--gris); }

/* Étape franchie */
.frise__etape--faite::before { background: var(--vert); }
.frise__etape--faite .frise__puce { background: var(--vert); border-color: var(--vert); }
.frise__etape--faite .frise__puce::after {
    content: ''; position: absolute; left: 8px; top: 4px;
    width: 6px; height: 11px; border: solid #fff;
    border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* Étape en cours : la seule qui respire, pour attirer l'œil */
.frise__etape--courante .frise__puce {
    background: var(--brique); border-color: var(--brique);
    box-shadow: 0 0 0 5px rgba(194,80,42,.18);
    animation: pouls 2s ease-in-out infinite;
}
.frise__etape--courante .frise__titre { font-weight: 800; color: var(--brique); }

@keyframes pouls {
    0%, 100% { box-shadow: 0 0 0 5px rgba(194,80,42,.18); }
    50%      { box-shadow: 0 0 0 11px rgba(194,80,42,.05); }
}
@media (prefers-reduced-motion: reduce) {
    .frise__etape--courante .frise__puce { animation: none; }
}

.frise__etape--avenir .frise__titre,
.frise__etape--avenir .frise__detail { opacity: .45; }

.pret {
    display: flex; gap: 16px; align-items: center;
    background: rgba(47,125,79,.12); border: 2px solid var(--vert);
    border-radius: var(--rayon-lg); padding: 18px 22px; margin-bottom: 22px;
}
.pret__emoji {
    flex: none; display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--vert); color: #fff;
}
.pret strong { display: block; font-size: 19px; color: #1f5c39; }
.pret span   { font-size: 14.5px; color: var(--gris); }

/* Option de paiement indisponible : elle doit se lire comme telle au premier
   coup d'œil, sinon le client s'acharne à cliquer dessus. */
.carte-choix--inactive {
    opacity: .55;
    cursor: not-allowed;
    background: rgba(23,18,14,.03);
    border-style: dashed;
}
.carte-choix--inactive input { cursor: not-allowed; }

/* ==================================================================
   Bandeaux de catégorie
   Une photo en tête de section, le titre posé dessus. Le voile en
   dégradé garantit que le texte reste lisible quelle que soit la
   photo — sans lui, un titre clair sur des frites dorées disparaît.
   ================================================================== */
.cat-banniere {
    position: relative;
    border-radius: var(--rayon-lg);
    overflow: hidden;
    margin-bottom: clamp(20px, 3vw, 32px);
    background: var(--noir);
    box-shadow: var(--ombre);
}
.cat-banniere__photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Les photos du comptoir sont un peu ternes : on les réveille un peu. */
    filter: saturate(1.08) contrast(1.04);
}
.cat-banniere::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg,
        rgba(23,18,14,.94) 0%,
        rgba(23,18,14,.82) 38%,
        rgba(23,18,14,.35) 72%,
        rgba(23,18,14,.15) 100%);
}
.cat-banniere__contenu {
    position: relative;               /* au-dessus du voile */
    z-index: 1;
    display: flex; flex-direction: column; justify-content: center;
    min-height: clamp(96px, 11vw, 136px);
    padding: clamp(22px, 3.4vw, 40px);
    max-width: 40rem;
    color: var(--creme);
}
.cat-banniere__contenu h2 { color: var(--creme); margin-bottom: 8px; }
.cat-banniere__contenu .surtitre { color: var(--or); }
.cat-banniere__desc {
    margin: 0;
    color: rgba(252,244,232,.82);
    font-size: clamp(14px, 1.5vw, 15.5px);
    max-width: 52ch;
}
.cat-banniere__note {
    display: inline-flex; align-items: center; gap: 7px;
    align-self: flex-start;
    margin-top: 14px; padding: 7px 14px;
    background: var(--or); color: var(--noir);
    border-radius: 999px;
    font-size: 13px; font-weight: 700;
}

/* Sur fond sombre, le bandeau doit se détacher du fond de section. */
.categorie--sombre .cat-banniere { box-shadow: 0 0 0 1px var(--trait-clair); }

@media (max-width: 560px) {
    .cat-banniere::after {
        background: linear-gradient(to top,
            rgba(23,18,14,.95) 0%, rgba(23,18,14,.78) 55%, rgba(23,18,14,.45) 100%);
    }
}

/* ------------------------------------------------------------------ */
/* Cartes produit — un peu plus de tenue                               */
/* ------------------------------------------------------------------ */
.produit {
    position: relative;
    overflow: hidden;
}
/* Filet coloré qui apparaît au survol : signale la carte active sans
   déplacer quoi que ce soit (donc aucun décalage de mise en page). */
.produit::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--action);
    transform: scaleY(0); transform-origin: center;
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.produit:hover::before, .produit:focus-within::before { transform: scaleY(1); }
.produit:focus-within { border-color: rgba(220,38,38,.45); }

/* Le prix est l'information qu'on cherche : on lui donne du poids. */
.produit__prix { font-size: 20px; letter-spacing: .01em; }

@media (prefers-reduced-motion: reduce) {
    .produit:hover { transform: none; }
    .produit::before { transition: none; }
}

/* ==================================================================
   Composition par étapes
   On ne montre qu'une question à la fois : le client répond, voit son
   choix s'ajouter au récapitulatif, puis continue. Beaucoup moins
   intimidant qu'un formulaire de trente cases d'un seul tenant.
   ================================================================== */

.etapes-barre {
    padding: 16px clamp(18px, 3vw, 28px) 14px;
    border-bottom: 1px solid var(--trait);
    background: var(--creme);
}
.etapes-barre__piste {
    height: 4px; border-radius: 999px;
    background: rgba(23, 18, 14, .12);
    overflow: hidden;
}
.etapes-barre__piste > span {
    display: block; height: 100%; width: 0;
    border-radius: 999px;
    background: var(--action);
    transition: width .28s ease;
}
.etapes-barre__libelle {
    margin: 10px 0 0;
    font-size: 13px; font-weight: 700;
    letter-spacing: .02em;
    color: var(--gris);
}

/* Récapitulatif : ce que le client a déjà choisi, toujours sous les yeux. */
.recap-choix {
    display: flex; flex-wrap: wrap; gap: 6px;
    list-style: none; margin: 10px 0 0; padding: 0;
}
.recap-choix:empty { display: none; }
.recap-choix__puce {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--noir); color: var(--creme);
    font-size: 12.5px; font-weight: 600;
}

/* ==================================================================
   Choix avec quantité
   Deux cordons bleus dans le même tacos : impossible à exprimer avec
   une case à cocher, d'où ce réglage en plus/moins.
   ================================================================== */

.choix-liste--qte { display: grid; gap: 8px; }

.choix-qte {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px 10px 16px;
    border: 1.5px solid var(--trait);
    border-radius: var(--rayon);
    background: var(--creme-carte);
    transition: border-color .15s ease, background .15s ease;
}
.choix-qte.coche {
    border-color: var(--action);
    background: rgba(220, 38, 38, .05);
}
.choix-qte__nom { flex: 1; font-weight: 600; }

.choix-qte__reglage {
    display: inline-flex; align-items: center; gap: 2px;
    border: 1.5px solid var(--trait);
    border-radius: 999px;
    background: #fff;
}
.choix-qte__btn {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; border-radius: 999px;
    background: transparent; color: var(--noir);
    font: inherit; font-size: 19px; font-weight: 700; line-height: 1;
    cursor: pointer;
}
.choix-qte__btn:hover:not(:disabled) { background: rgba(23, 18, 14, .07); }
.choix-qte__btn:disabled { opacity: .28; cursor: default; }
.choix-qte__val {
    min-width: 22px; text-align: center;
    font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ==================================================================
   Une couleur par catégorie
   Le bandeau, la pastille et le filet de tête prennent la teinte de la
   catégorie : on se repère à la couleur en faisant défiler la carte.
   ================================================================== */

.categorie { --accent: var(--brique); }

#cat-formules   { --accent: #E9A63B; }
#cat-kebab      { --accent: #C2502A; }
#cat-tacos      { --accent: #D64545; }
#cat-crousty    { --accent: #D08A1E; }
#cat-burger     { --accent: #A8762C; }
#cat-texmex     { --accent: #CC6B2C; }
#cat-vegetarien { --accent: #3F8F5B; }
#cat-panini     { --accent: #B5793A; }
#cat-pizzas     { --accent: #C0392B; }
#cat-assiette   { --accent: #8E6A3A; }
#cat-barquettes { --accent: #A9742E; }
#cat-boissons   { --accent: #2F7D8F; }
#cat-desserts   { --accent: #9B5A8C; }
#cat-alcools    { --accent: #6B5B7B; }

.categorie__entete,
.cat-banniere { border-top: 3px solid var(--accent); }
.cat-banniere { border-radius: var(--rayon-lg); }
.categorie__entete { padding-top: 18px; }

.cat-banniere__note { background: var(--accent); }
.cat-banniere__contenu .surtitre,
.categorie__entete .surtitre { color: var(--accent); }
.categorie__note {
    display: inline-block;
    padding: 6px 13px; border-radius: 999px;
    background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 700;
}

/* ==================================================================
   Direction claire
   Le patron ne veut pas de fonds noirs : la page reste crème d'un bout
   à l'autre. Seul le héros garde son voile, posé sur une photo.
   ================================================================== */

.barre-mode {
    background: var(--creme-carte);
    color: var(--noir);
    border-bottom: 1px solid var(--trait);
}
.barre-mode__libelle,
.barre-mode__note { color: var(--gris); }
.bascule { background: rgba(23, 18, 14, .07); }
.bascule button { color: var(--gris); }

.pied {
    background: var(--creme-carte);
    color: var(--noir);
    border-top: 3px solid var(--action);
}
.pied a { color: var(--gris); }
.pied a:hover { color: var(--noir); }
.pied h4 { color: var(--brique); }
.pied__bas { border-top: 1px solid var(--trait); color: var(--gris); }

/* L'entête de catégorie porte désormais seule le titre : on lui donne
   l'air d'un vrai intertitre plutôt que d'un reliquat de bandeau. */
.categorie__entete {
    padding: 20px 0 clamp(18px, 2.5vw, 28px);
    margin-bottom: clamp(16px, 2.4vw, 26px);
    border-bottom: 1px solid var(--trait);
}
.categorie__desc { color: var(--gris); max-width: 58ch; }

/* ==================================================================
   Vert pour ce qu'on choisit, rouge pour ce qu'on déclenche
   Un coup d'œil doit suffire : vert = c'est pris, rouge = ça engage.
   ================================================================== */

:root {
    --vert-vif:   #15803D;
    --vert-bord:  #16A34A;
    --vert-fond:  #DCFCE7;
}

.choix:hover { border-color: var(--vert-bord); }
.choix:has(input:checked),
.choix.coche {
    background: var(--vert-vif);
    border-color: var(--vert-vif);
    color: #fff;
}
.choix:has(input:checked) .choix__badge,
.choix.coche .choix__badge { color: #BBF7D0; }
.choix:has(input:checked) .choix__prix,
.choix.coche .choix__prix { opacity: .92; }
.choix:has(input:focus-visible) { outline: 3px solid var(--vert-bord); outline-offset: 2px; }

.choix-qte.coche {
    border-color: var(--vert-bord);
    background: var(--vert-fond);
}
.bascule button[aria-pressed="true"] { background: var(--vert-vif); color: #fff; }

/* La progression d'une commande en cours : verte aussi, c'est un état,
   pas une action. */
.etapes-barre__piste > span { background: var(--vert-vif); }
.recap-choix__puce { background: var(--vert-vif); color: #fff; }

/* Les boutons secondaires ne sont plus noirs : contour sobre, pour que
   le seul aplat de couleur de l'écran reste le bouton rouge. */
.btn--sombre {
    background: transparent;
    color: var(--noir);
    box-shadow: inset 0 0 0 2px var(--trait);
}
.btn--sombre:hover { background: rgba(23, 18, 14, .06); color: var(--noir); }
.btn--clair {
    background: transparent; color: var(--noir);
    box-shadow: inset 0 0 0 2px var(--trait);
}
.btn--clair:hover { background: rgba(23, 18, 14, .06); }

/* La vignette de catégorie remplace l'ancien bandeau pleine largeur :
   même information, une fraction de la place, et plus de photo écrasée
   en hauteur. */
.categorie__entete {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(14px, 2vw, 22px);
}
.categorie__entete > :not(.categorie__vignette) { grid-column: 2; }
.categorie__vignette {
    grid-row: 1 / span 3;
    width: clamp(64px, 9vw, 92px);
    height: clamp(64px, 9vw, 92px);
    border-radius: 18px;
    object-fit: cover;
    box-shadow: var(--ombre);
}
@media (max-width: 520px) {
    .categorie__vignette { width: 58px; height: 58px; border-radius: 14px; }
}

/* ==================================================================
   Palette par catégorie, version vive
   Deux teintes par catégorie : --neon pour les contours et les filets,
   qui doit claquer, et --accent pour le texte et les aplats, assez
   soutenu pour rester lisible. Sans ce couple, soit c'est fade, soit
   c'est illisible.
   ================================================================== */

.categorie#cat-formules,   .nav-cat a[data-nav-cat="formules"]   { --accent:#B45309; --neon:#FBBF24; }
.categorie#cat-kebab,      .nav-cat a[data-nav-cat="kebab"]      { --accent:#C2410C; --neon:#FB7A1E; }
.categorie#cat-tacos,      .nav-cat a[data-nav-cat="tacos"]      { --accent:#BE123C; --neon:#FB3B64; }
.categorie#cat-crousty,    .nav-cat a[data-nav-cat="crousty"]    { --accent:#A21CAF; --neon:#E935FF; }
.categorie#cat-burger,     .nav-cat a[data-nav-cat="burger"]     { --accent:#92400E; --neon:#E8912B; }
.categorie#cat-texmex,     .nav-cat a[data-nav-cat="texmex"]     { --accent:#9A3412; --neon:#FF6B2C; }
.categorie#cat-vegetarien, .nav-cat a[data-nav-cat="vegetarien"] { --accent:#15803D; --neon:#22E06B; }
.categorie#cat-panini,     .nav-cat a[data-nav-cat="panini"]     { --accent:#A16207; --neon:#EAB308; }
.categorie#cat-pizzas,     .nav-cat a[data-nav-cat="pizzas"]     { --accent:#B91C1C; --neon:#FF3B3B; }
.categorie#cat-assiette,   .nav-cat a[data-nav-cat="assiette"]   { --accent:#78350F; --neon:#D98324; }
.categorie#cat-barquettes, .nav-cat a[data-nav-cat="barquettes"] { --accent:#854D0E; --neon:#E0A80E; }
.categorie#cat-boissons,   .nav-cat a[data-nav-cat="boissons"]   { --accent:#0E7490; --neon:#1FC8E8; }
.categorie#cat-desserts,   .nav-cat a[data-nav-cat="desserts"]   { --accent:#BE185D; --neon:#FF4FA3; }
.categorie#cat-alcools,    .nav-cat a[data-nav-cat="alcools"]    { --accent:#6D28D9; --neon:#A78BFA; }

/* La navigation : une pastille par catégorie, bordée de sa couleur. */
.nav-cat__inner { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
.nav-cat a {
    padding: 9px 14px;
    border: 2px solid var(--neon, var(--trait));
    border-radius: 999px;
    color: var(--accent, var(--gris));
    background: #fff;
    border-bottom-width: 2px;
}
.nav-cat a:hover {
    color: #fff;
    background: var(--accent, var(--noir));
}
.nav-cat a.actif {
    color: #fff;
    background: var(--accent, var(--brique));
    border-color: var(--accent, var(--brique));
    border-bottom-color: var(--accent, var(--brique));
}
/* Le Crousty est la nouveauté qu'on pousse : il brille. */
.nav-cat a[data-nav-cat="crousty"] { box-shadow: 0 0 0 3px rgba(233, 53, 255, .18); }

/* ==================================================================
   Ouvert ou fermé : l'information qu'on ne doit pas rater
   Toute la pastille prend la couleur, texte en noir pour le contraste.
   ================================================================== */

.etat-pastille {
    background: #DC2626; color: #000;
    font-weight: 800; padding: 7px 14px;
}
.etat-pastille::before { background: #000; box-shadow: none; }
.etat-pastille--ouvert { background: #16C04E; color: #000; }
.etat-pastille--ouvert::before { background: #000; box-shadow: none; }

/* « À emporter / sur place » : c'est un choix de commande, donc rouge. */
.bascule button[aria-pressed="true"] { background: var(--action); color: #fff; }

/* ==================================================================
   Les cartes produits
   Intérieur blanc, contour à la couleur de la catégorie : sur le fond
   crème, chaque bulle se détache au lieu de s'y fondre.
   ================================================================== */

.produit {
    background: #fff;
    border: 2px solid var(--neon, var(--action));
}
.produit:hover {
    border-color: var(--accent, var(--action));
    box-shadow: 0 10px 28px -12px var(--neon, rgba(220,38,38,.5));
}
.produit__prix { color: var(--accent, var(--brique)); }
.produit__nom  { color: var(--noir); }

/* Les mentions à ne pas manquer passent en couleur pleine. */
.produit__badge {
    color: #fff;
    background: var(--accent, var(--brique));
}
.categorie__note {
    background: var(--accent, var(--brique));
    color: #fff;
    font-weight: 700;
}
.produit__mention { color: var(--accent, var(--gris)); font-weight: 600; font-style: normal; }
.groupe-option__note {
    color: var(--action-fonce);
    font-weight: 600;
}
.cat-banniere__note { background: var(--accent); color: #fff; }

/* Le filet de tête de catégorie reprend la teinte vive. */
.categorie__entete { border-top: 4px solid var(--neon, var(--action)); }

/* L'image entière, pas un détail recadré : « contain » laisse voir tout
   le plat quelle que soit la forme de la photo. Le fond blanc du cadre
   se confond avec l'intérieur de la bulle, donc les bandes ne se voient
   pas. */
.categorie__vignette {
    width: clamp(78px, 11vw, 116px);
    height: clamp(78px, 11vw, 116px);
    object-fit: contain;
    background: #fff;
    padding: 4px;
    border: 2px solid var(--neon, var(--trait));
    border-radius: 16px;
    box-shadow: none;
}
@media (max-width: 520px) {
    .categorie__vignette { width: 68px; height: 68px; border-radius: 13px; }
}

/* La photo du produit, à gauche de son nom. Petite, l'image entière
   visible, sur fond blanc : la plupart des visuels du restaurant sont
   détourés, donc le fond disparaît. */
.produit__haut { gap: 12px; align-items: center; }
.produit__vignette {
    flex: none;
    width: 56px; height: 56px;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
}
@media (max-width: 520px) {
    .produit__vignette { width: 46px; height: 46px; }
}

/* Fenêtre de commande sur mobile.
   « vh » se calcule sur la fenêtre barre d'adresse repliée : sur un
   téléphone la boîte dépassait l'écran et le bouton « Continuer » tombait
   hors champ. « dvh » suit la hauteur réellement visible. */
@supports (height: 100svh) {
    /* « svh » = hauteur quand la barre du navigateur est VISIBLE, donc la
       plus petite. La boîte tient alors dans tous les cas ; avec dvh elle
       dépassait dès que la barre était déployée. */
    .modale { height: 100svh; }
    .modale__boite { max-height: 94svh; }
}
/* Le pied ne défile jamais avec le contenu : le bouton d'action reste
   sous le pouce, quelle que soit la longueur de la liste d'options. */
.modale__pied { flex: none; position: sticky; bottom: 0; }
.modale__corps { min-height: 0; }

/* Certains utilisateurs désactivent les animations au niveau du système :
   on respecte ce réglage, et la fenêtre s'ouvre alors sans translation. */
@media (prefers-reduced-motion: reduce) {
    .modale__boite { animation: none; }
    .btn, .produit, .choix, .choix-qte { transition: none; }
}

/* ==================================================================
   Vidéo d'accueil
   La source est au format portrait. En fond pleine largeur sur un écran
   d'ordinateur, il ne resterait qu'une bande de 23 % de sa hauteur et les
   plats seraient coupés en deux. Donc : fond plein écran sur mobile, où
   les proportions coïncident presque, et carte verticale à droite du
   texte sur grand écran, où le plat reste entier.
   ================================================================== */

@media (min-width: 900px) {
    .heros {
        align-items: center;
        min-height: min(68vh, 560px);
    }
    /* Le voile servait à rendre le texte lisible par-dessus la photo.
       Le texte est maintenant sur le fond sombre : il n'a plus lieu d'être,
       et il assombrissait la vidéo. */
    .heros__voile { background: none; }
    .heros__contenu { padding-right: min(36vw, 400px); }
    .heros__video {
        inset: auto;
        right: max(24px, calc((100% - var(--largeur)) / 2 + 24px));
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: min(74%, 430px);
        border-radius: var(--rayon-lg);
        box-shadow: var(--ombre-forte);
    }
}

/* Sur mobile le texte passe par-dessus la vidéo. Comme l'image change
   en permanence, le voile doit garantir la lisibilité sur le plan le
   plus clair du montage, pas seulement sur le plus sombre. */
@media (max-width: 899px) {
    .heros__voile {
        background: linear-gradient(to top,
            rgba(23,18,14,.96) 10%,
            rgba(23,18,14,.82) 52%,
            rgba(23,18,14,.58) 100%);
    }
}

/* Les images du produit sur leur propre ligne. Un menu enfant en affiche
   quatre (frites, boisson, compote, sucette) : collées au nom, elles le
   compressaient à cinquante pixels sur un téléphone. */
.produit__vignettes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
}
.produit__haut { gap: 12px; }

/* ==================================================================
   DIRECTION 02 — « Le comptoir »
   Le vert-jaune du menu enfant en fond de page, validé par Tahsin le
   16/10. Tout ce qui suit remplace la direction crème précédente.
   Les combinaisons de couleurs sont celles qu'il a validées : blanc sur
   rouge, jaune sur rouge, foncé sur vert, blanc sur magenta. Jamais de
   rouge sur jaune ni de noir sur rouge.
   ================================================================== */

:root {
    --fond-page:  #C9E61B;
    --encre:      #16240A;
    --encre-pale: rgba(22, 36, 10, .70);
    --filet:      rgba(22, 36, 10, .22);
    --rouge-vif:  #E3001B;
    --rouge-fonce:#A80014;
    --jaune-vif:  #FFE500;
    --vert-vif:   #00A651;
    --magenta:    #B5008F;
}

body {
    background: var(--fond-page);
    color: var(--encre);
    font-size: 17px;              /* Tahsin veut des textes plus grands */
}

/* Les sections héritent du fond : on neutralise les anciens aplats. */
.section, .categorie { background: transparent; color: var(--encre); }
.categorie__desc, .produit__desc { color: var(--encre-pale); font-size: 15px; }

/* La barre de navigation des catégories reprend le fond de page. */
.nav-cat {
    background: rgba(201, 230, 27, .96);
    border-bottom: 2px solid var(--encre);
}
.nav-cat a { background: #fff; font-size: 13.5px; }

/* ---- Ouvert ou fermé : l'information qu'on ne doit pas rater ------- */
.etat-pastille {
    background: var(--rouge-vif);
    color: var(--jaune-vif);
    font-weight: 800; font-size: 13px; padding: 8px 15px;
}
.etat-pastille::before { background: var(--jaune-vif); box-shadow: none; }
.etat-pastille--ouvert { background: var(--vert-vif); color: #06240D; }
.etat-pastille--ouvert::before { background: #06240D; box-shadow: none; }

/* ---- Mode de retrait : vert pour emporter, rouge pour sur place ---- */
.barre-mode {
    background: #fff;
    border-bottom: 2px solid var(--encre);
}
.barre-mode__libelle, .barre-mode__note { color: var(--encre-pale); }
.bascule { background: rgba(22, 36, 10, .09); }
.bascule button { color: var(--encre); font-size: 13.5px; }
.bascule button[aria-pressed="true"] {
    background: var(--vert-vif); color: #06240D;
    animation: respire-mode 2.4s ease-in-out infinite;
}
.bascule button[data-mode="surplace"][aria-pressed="true"] {
    background: var(--rouge-vif); color: #fff;
}
/* Pulsation lente plutôt que clignotement : même effet d'attention,
   sans gêner les personnes photosensibles. */
@keyframes respire-mode {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(0,0,0,0); }
    50%      { transform: scale(1.045); box-shadow: 0 0 0 6px rgba(22,36,10,.12); }
}

/* ---- Entêtes de catégorie et fiches produits ----------------------- */
.categorie__entete { border-top-width: 5px; }
.categorie__vignette,
.produit__vignette {
    border-radius: 50%;
    background: var(--jaune-vif);
    border: 3px solid var(--encre);
    padding: 6px;
}
.categorie__note { background: var(--rouge-vif); color: #fff; font-size: 14px; }

.produit { background: #fff; border-width: 3px; }
.produit__nom  { font-size: 21px; }
.produit__prix { font-size: 21px; color: var(--rouge-fonce); }
.produit__badge { background: var(--rouge-vif); color: #fff; font-size: 11.5px; }
.produit__mention { color: var(--rouge-fonce); font-size: 13px; }

/* ---- La fenêtre de commande ---------------------------------------- */
.modale__boite { background: #fff; }
.modale__entete { background: #fff; }
.etapes-barre { background: var(--fond-page); border-bottom: 2px solid var(--encre); }
.etapes-barre__piste > span { background: var(--rouge-vif); }
.etapes-barre__libelle { color: var(--encre); font-weight: 800; }
.modale__pied { background: #fff; border-top: 2px solid var(--filet); }

/* Le titre de l'étape : encadré rouge, texte blanc, et la règle juste
   dessous pour que le client la lise AVANT de choisir. */
.groupe-option__titre {
    display: block; width: 100%;
    background: var(--rouge-vif); color: #fff;
    padding: 12px 16px; border-radius: 10px;
    font-family: 'Anton', sans-serif; text-transform: uppercase;
    font-size: clamp(18px, 2.2vw, 22px); letter-spacing: .02em;
}
/* Les notes d'étape sont des consignes : bandeau violet sobre. */
.groupe-option__note {
    margin: 10px 0 14px;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--violet-pale);
    color: var(--encre);
    font-size: 14px; font-weight: 700;
}
/* Sauf celles qui annoncent un prix : le supplément est la ligne qui
   provoque les litiges au comptoir, elle passe donc en rouge plein. */
.groupe-option__note--tarif {
    background: var(--rouge-vif);
    color: #fff;
    font-size: 14.5px; font-weight: 800;
}
.groupe-option__erreur { color: var(--rouge-fonce); font-weight: 700; }

/* ---- Une couleur par choix ----------------------------------------- */
/* Chaque choix porte sa teinte même sans être pris : il est écrit en
   couleur sur fond blanc, puis se remplit quand on le sélectionne.
   Aucun choix n'est gris. La teinte vient de la carte (clé « couleur »),
   avec un repli neutre pour les groupes qui n'en déclarent pas. */
.choix {
    --c: #16240A;
    background: #fff; color: var(--c);
    border: 2.5px solid var(--c);
    font-size: 14.5px; font-weight: 800;
    padding: 10px 16px;
}
.choix:hover { border-color: var(--c); background: rgba(22, 36, 10, .04); }
.choix:has(input:checked),
.choix.coche {
    background: var(--c);
    color: var(--sur-c, #fff);
    border-color: var(--c);
}
.choix:has(input:focus-visible) { outline: 3px solid var(--encre); outline-offset: 2px; }
.choix__badge { color: inherit; opacity: .8; }
.choix__prix  { color: inherit; opacity: .85; }

/* Réglage en quantité : même logique de couleur. */
.choix-qte { border-width: 2.5px; background: #fff; }
.choix-qte.coche { border-color: var(--vert-vif); background: rgba(0, 166, 81, .10); }
.choix-qte__nom { font-size: 15px; }

/* ---- Le récapitulatif ---------------------------------------------- */
.recap-choix__puce {
    background: var(--jaune-vif); color: var(--encre);
    font-size: 13.5px; font-weight: 800;
    border: 2px solid var(--encre);
}

/* ---- Boutons -------------------------------------------------------- */
.btn { font-size: 14px; }
.btn--sombre { box-shadow: inset 0 0 0 2.5px var(--encre); color: var(--encre); }
.btn--sombre:hover { background: rgba(22, 36, 10, .08); }

/* ---- Pied de page --------------------------------------------------- */
.pied { background: #fff; border-top: 5px solid var(--rouge-vif); color: var(--encre); }
.pied a { color: var(--encre-pale); }
.pied a:hover { color: var(--encre); }
.pied h4 { color: var(--rouge-fonce); }
.pied__bas { border-top: 1px solid var(--filet); color: var(--encre-pale); }

@media (prefers-reduced-motion: reduce) {
    .bascule button[aria-pressed="true"] { animation: none; }
}

/* Le récapitulatif : une pastille pleine par choix fait, une case vide
   en pointillés pour chaque étape qui reste. Elle respire doucement
   jusqu'à ce que le client y réponde. */
.recap-choix__puce {
    --c: #16240A;
    background: var(--c); color: #fff;
}
.recap-choix__puce--vide {
    background: transparent;
    color: var(--encre-pale);
    border: 2px dashed var(--filet);
    animation: respire-mode 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .recap-choix__puce--vide { animation: none; }
}

/* Flèches de défilement des catégories. À la souris on ne peut pas faire
   glisser la barre : ces deux boutons règlent le problème sans gêner le
   geste tactile, qui continue de fonctionner. */
.nav-cat {
    display: flex; align-items: center; gap: 6px;
    padding: 0 clamp(8px, 2vw, 16px);
}
.nav-cat__inner { flex: 1; min-width: 0; scroll-behavior: smooth; }
.nav-cat__fleche {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    border: 2.5px solid var(--encre); background: #fff; color: var(--encre);
    font-size: 18px; line-height: 1; cursor: pointer; font-family: inherit;
    display: grid; place-items: center;
}
.nav-cat__fleche:hover { background: var(--jaune-vif); }
@media (max-width: 560px) { .nav-cat__fleche { display: none; } }

/* ==================================================================
   DIRECTION 03 — « Violet doux »
   Remplace les directions 01 et 02. Fond blanc violacé, accents violet
   lavande, cadres bordeaux. Le rouge est désormais réservé aux seules
   actions : ajouter, composer, commander. Toute la couleur de décor
   passe au violet, pour que le rouge reste un signal et pas un motif.
   Règles de contraste conservées : blanc sur bordeaux, blanc sur rouge,
   blanc sur violet, encre sur fond clair.
   ================================================================== */

:root {
    --fond-page:  #FAF8FD;
    --encre:      #241B2E;
    --encre-pale: rgba(36, 27, 46, .68);
    --filet:      rgba(36, 27, 46, .16);

    --violet:      #7B4FA8;
    --violet-fonce:#5E3785;
    --violet-pale: #EDE7F6;

    /* Rouge d'action et bordeaux de cadre. */
    --rouge-vif:  #C1121F;
    --rouge-fonce:#8E1A2F;

    /* Anciens noms conservés : toute la feuille les référence encore.
       Le « jaune » est devenu le lavande des pastilles, le « magenta »
       le bordeaux des cadres. */
    --jaune-vif:  var(--violet-pale);
    --magenta:    #8E1A2F;
    --vert-vif:   #1E7A4C;

    /* Jetons de base réalignés sur la nouvelle palette. */
    --action:       #C1121F;
    --action-fonce: #8E1A2F;
    --brique:       #7B4FA8;
    --brique-fonce: #5E3785;
    --or:           #C98A1F;
    --trait:        rgba(36, 27, 46, .14);
    --gris:         rgba(36, 27, 46, .64);
    --creme:        #FAF8FD;
    --creme-carte:  #FFFFFF;
}

body { background: var(--fond-page); color: var(--encre); }

/* L'en-tête gardait le crème de l'ancienne direction : il jurait avec
   le blanc violacé du reste de la page. */
.entete { background: rgba(250, 248, 253, .94); border-bottom-color: var(--filet); }
.logo span { color: var(--violet-fonce); }

.nav-cat { background: rgba(250, 248, 253, .97); border-bottom: 2px solid var(--violet); }
.nav-cat a { background: #fff; border: 2px solid var(--filet); border-radius: 999px; color: var(--encre-pale); }
/* Le survol hérite du fond --accent plus haut : sans forcer le texte en
   blanc ici, on obtenait du foncé sur foncé et l'onglet devenait illisible. */
.nav-cat a:hover {
    background: var(--accent, var(--violet));
    border-color: var(--accent, var(--violet));
    color: #fff;
}
.nav-cat__fleche { border-color: var(--violet); color: var(--violet-fonce); }
.nav-cat__fleche:hover { background: var(--violet-pale); }

/* Les deux modes portent leur propre violet : « À emporter » le plus
   soutenu, « Sur place » le plus clair. Comme le mode change les prix
   (pizzas et 1,25 L majorées sur place), celui qui est retenu garde un
   cerclage net — sans lui, deux pastilles colorées se ressemblent et le
   client peut commander au mauvais tarif sans s'en rendre compte. */
/* Le sélecteur porte [aria-pressed] sans valeur : il faut dépasser la
   règle plus ancienne qui repeignait « Sur place » en rouge une fois
   sélectionné, et la pulsation qui écrasait le cerclage. */
.bascule button { font-weight: 700; transition: box-shadow .18s, background-color .18s; }
.bascule button[data-mode="emporter"][aria-pressed] { background: #C7B0DE; color: #2E1B42; }
.bascule button[data-mode="surplace"][aria-pressed] { background: #EDE7F6; color: #3B2352; }
.bascule button[aria-pressed="true"] {
    animation: none;
    box-shadow: inset 0 0 0 2.5px var(--violet-fonce);
    font-weight: 800;
}
.bascule button[aria-pressed="false"] { opacity: .68; }

/* Panier : le libellé reste gris, la valeur choisie passe en rouge gras.
   Sans ce contraste « Vos sauces : blanche » se lit comme une seule phrase
   et le client ne retrouve pas ce qu'il a commandé. */
.ligne-panier__val { color: var(--rouge-vif); font-weight: 800; }
.ligne-panier__sup { color: var(--violet-fonce); font-weight: 700; }

.etat-pastille { background: var(--rouge-fonce); color: #fff; }
.etat-pastille::before { background: #fff; }
.etat-pastille--ouvert { background: var(--vert-vif); color: #fff; }
.etat-pastille--ouvert::before { background: #fff; }

/* Le contour des fiches passe au bordeaux. */
.produit { border-color: var(--magenta); }
.produit:hover { border-color: var(--violet); box-shadow: 0 10px 28px -12px rgba(123, 79, 168, .45); }

/* Les pastilles de photo reprennent le lavande. */
.categorie__vignette,
.produit__vignette { background: var(--violet-pale); border-color: var(--violet); }

/* L'en-tête de catégorie et la barre de mode s'alignent sur le violet. */
.categorie__entete { border-top-color: var(--violet); }
/* Le rappel « en formule… » est une information, pas une action : il
   prend la teinte de la catégorie et laisse le rouge aux boutons. */
.categorie__note { background: var(--accent, var(--violet-fonce)); color: #fff; }
/* Même raison pour les badges « la plus prise » : deux rouges à l'écran,
   dont un seul cliquable, et le client hésite. Le badge passe au
   bordeaux, le rouge vif reste au bouton. */
.produit__badge { background: var(--rouge-fonce); }
.barre-mode { border-bottom-color: var(--violet); }
.bascule { background: var(--violet-pale); }
.surtitre { color: var(--violet-fonce); }
.pied { border-top-color: var(--violet); }
.pied h4 { color: var(--violet-fonce); }
.recap-choix__puce { background: var(--violet-pale); color: var(--encre); border-color: var(--violet); }
.groupe-option__titre { background: var(--violet); }
.etapes-barre { background: var(--violet-pale); border-bottom-color: var(--violet); }
.etapes-barre__piste > span { background: var(--violet); }
.choix { --c: var(--violet-fonce); }
.ligne-panier__cat { color: var(--violet-fonce); background: var(--violet-pale); }
.recap__ref { color: var(--violet-fonce); }
.frise__etape--courante .frise__puce {
    background: var(--violet); border-color: var(--violet);
    box-shadow: 0 0 0 5px rgba(123, 79, 168, .18);
}
.frise__etape--courante .frise__titre { color: var(--violet-fonce); }
@keyframes pouls {
    0%, 100% { box-shadow: 0 0 0 5px rgba(123, 79, 168, .18); }
    50%      { box-shadow: 0 0 0 11px rgba(123, 79, 168, .05); }
}
.carte-choix:has(input:checked),
.carte-choix.coche { border-color: var(--violet); background: rgba(123, 79, 168, .07); }
.carte-choix input { accent-color: var(--violet); }
.alerte--info { background: var(--violet-pale); border-color: var(--violet); }

/* ==================================================================
   Page courte : on doit pouvoir commander sans défiler
   Le héros devient un bandeau, les trois arguments tiennent sur une
   ligne, et les catégories sont des onglets : une seule est affichée,
   toujours au même endroit. C'est ce qui fait passer la page de
   cinquante écrans à deux.
   ================================================================== */

.heros--court { min-height: clamp(190px, 30vh, 300px); align-items: center; background: #4A3566; }
/* Voile prune plutôt que noir, et assez clair pour laisser voir la vidéo
   derrière. Il reste opaque à gauche : c'est là que le titre blanc se pose. */
.heros--court .heros__voile {
    background: linear-gradient(100deg,
        rgba(74, 53, 102, .92) 0%, rgba(74, 53, 102, .82) 45%,
        rgba(74, 53, 102, .40) 78%, rgba(74, 53, 102, .18) 100%);
}
.heros--court .heros__contenu { padding: clamp(22px, 3.5vw, 36px) clamp(16px, 4vw, 40px); }
.heros--court h1 {
    font-size: clamp(30px, 5.2vw, 56px);
    max-width: 18ch; margin-top: 0;
}
.heros--court .heros__accroche {
    margin: 10px 0 14px;
    font-size: clamp(14px, 1.5vw, 16.5px);
    max-width: 56ch;
}
.heros--court .heros__etoiles { margin-top: 0; gap: 12px; }

/* Sur grand écran la vidéo est une carte posée à droite du texte. Le
   bandeau court la réduisait à une vignette, et le voile prune la
   ternissait : on lui redonne de la hauteur et on laisse le dégradé
   s'effacer avant d'atteindre la carte. */
@media (min-width: 900px) {
    .heros--court { min-height: clamp(320px, 44vh, 420px); }
    .heros--court .heros__voile {
        background: linear-gradient(100deg,
            rgba(74, 53, 102, .94) 0%, rgba(74, 53, 102, .86) 38%,
            rgba(74, 53, 102, .30) 58%, rgba(74, 53, 102, 0) 72%);
    }
    .heros--court .heros__video { height: min(82%, 370px); }
}

/* Sur mobile le texte est posé directement sur la vidéo : le dégradé
   horizontal du grand écran n'y suffit pas, il laisserait la fin des
   lignes sur un plan clair. On repasse à un voile vertical dense. */
@media (max-width: 899px) {
    .heros--court .heros__voile {
        background: linear-gradient(to top,
            rgba(36, 27, 46, .95) 10%,
            rgba(36, 27, 46, .82) 52%,
            rgba(36, 27, 46, .58) 100%);
    }
}

.heros__tel {
    font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
    color: #fff;
}

/* Le panneau de catégorie : il commence juste sous les onglets. */
.categorie { padding: clamp(20px, 3vw, 32px) 0 0; }
.categorie__entete { margin-bottom: 16px; }

/* ------------------------------------------------------------------ */
/* Mobile : une seule barre collante                                   */
/* ------------------------------------------------------------------ */
/* En-tête + barre de mode + onglets, c'était 218 px bloqués en haut
   d'un écran de 812, soit un quart de l'écran perdu en permanence. Le
   mode de retrait se choisit une fois au début : il peut défiler. Les
   onglets, eux, servent en continu et restent collés. */

@media (max-width: 720px) {
    .barre-mode { position: static; }
    .barre-mode__libelle { display: none; }
    .barre-mode__inner { padding-top: 12px; padding-bottom: 12px; }
    .nav-cat { top: var(--header-h); }

    /* Le bandeau d'accueil se resserre pour que la carte arrive plus vite. */
    .heros--court { min-height: 0; }
    .heros--court h1 { font-size: clamp(26px, 8.4vw, 38px); max-width: 14ch; }
    .heros--court .heros__accroche { margin: 8px 0 12px; font-size: 14px; }

    /* L'état d'ouverture est déjà dans l'en-tête : le répéter dans le
       bandeau prenait une ligne entière pour rien. */
    .heros--court .heros__etoiles .etat-pastille { display: none; }
}

/* Le renvoi vers horaires, avis et FAQ. */
.bande-infos {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px clamp(18px, 3vw, 28px);
    background: #fff; border: 2px solid var(--violet);
    border-radius: var(--rayon-lg); text-decoration: none; color: var(--encre);
    transition: background-color .18s, transform .18s;
}
.bande-infos:hover { background: var(--violet-pale); transform: translateY(-1px); }
.bande-infos__titre {
    font-family: 'Anton', sans-serif; text-transform: uppercase;
    font-size: clamp(15px, 2vw, 19px); letter-spacing: .01em;
}
.bande-infos__fleche { font-size: 28px; line-height: 1; color: var(--violet-fonce); }

/* ------------------------------------------------------------------ */
/* Une teinte par catégorie, toutes dans la même famille              */
/* ------------------------------------------------------------------ */
/* Les catégories gardent chacune leur couleur, mais prises dans la
   gamme violet–bordeaux au lieu de l'arc-en-ciel précédent : on
   distingue toujours une catégorie d'une autre sans casser la palette.
   Seul le végétarien garde son vert, qui est un repère alimentaire. */

.categorie#cat-formules,   .nav-cat a[data-nav-cat="formules"]   { --accent:#5E3785; --neon:#B9A2D4; }
.categorie#cat-kebab,      .nav-cat a[data-nav-cat="kebab"]      { --accent:#8E1A2F; --neon:#D8A3AD; }
.categorie#cat-tacos,      .nav-cat a[data-nav-cat="tacos"]      { --accent:#7B4FA8; --neon:#C7B0DE; }
.categorie#cat-crousty,    .nav-cat a[data-nav-cat="crousty"]    { --accent:#A3246B; --neon:#E3A6C6; }
.categorie#cat-burger,     .nav-cat a[data-nav-cat="burger"]     { --accent:#6B3FA0; --neon:#BFA8DC; }
.categorie#cat-texmex,     .nav-cat a[data-nav-cat="texmex"]     { --accent:#9B2242; --neon:#DDA6B5; }
.categorie#cat-vegetarien, .nav-cat a[data-nav-cat="vegetarien"] { --accent:#1E7A4C; --neon:#9CCFB4; }
.categorie#cat-panini,     .nav-cat a[data-nav-cat="panini"]     { --accent:#7E4A8E; --neon:#CCADD6; }
.categorie#cat-pizzas,     .nav-cat a[data-nav-cat="pizzas"]     { --accent:#A01F33; --neon:#DFA4AE; }
.categorie#cat-assiette,   .nav-cat a[data-nav-cat="assiette"]   { --accent:#5B4580; --neon:#B6A9CE; }
.categorie#cat-barquettes, .nav-cat a[data-nav-cat="barquettes"] { --accent:#8A3F6E; --neon:#D3A8C3; }
.categorie#cat-boissons,   .nav-cat a[data-nav-cat="boissons"]   { --accent:#4A5FA8; --neon:#AFB9DC; }
.categorie#cat-desserts,   .nav-cat a[data-nav-cat="desserts"]   { --accent:#9B4E8C; --neon:#D9B1D0; }
.categorie#cat-alcools,    .nav-cat a[data-nav-cat="alcools"]    { --accent:#4C3B6E; --neon:#AFA4C6; }

/* Le Crousty reste la nouveauté qu'on pousse. */
.nav-cat a[data-nav-cat="crousty"] { box-shadow: 0 0 0 3px rgba(163, 36, 107, .16); }

/* Les avis et les horaires vivent maintenant sur fond clair : les
   couleurs crème héritées du fond sombre y étaient illisibles. */
.avis { background: #fff; border: 2px solid var(--violet); }
.avis figcaption { color: var(--encre-pale); }
.horaires-liste li { border-color: var(--filet); }
.horaires-liste li.aujourdhui { color: var(--violet-fonce); }
.liste-puces li { border-color: var(--filet); }

/* ==================================================================
   Photos plus grandes et plus présentes
   Tahsin veut voir le produit, pas la pastille. On agrandit le cadre et
   on réduit la marge intérieure : l'image gagne en surface sans être
   recadrée, donc aucun plat n'est coupé.
   ================================================================== */

.produit__vignette {
    width: 76px; height: 76px;
    padding: 3px;
    border-width: 2.5px;
}
.categorie__vignette {
    width: clamp(96px, 13vw, 140px);
    height: clamp(96px, 13vw, 140px);
    padding: 4px;
}
@media (max-width: 520px) {
    .produit__vignette   { width: 62px; height: 62px; }
    .categorie__vignette { width: 84px; height: 84px; }
}

/* ==================================================================
   Ajustements demandés par le restaurant — novembre 2026
   ================================================================== */

/* La croix barre toute la pastille, d'un coin à l'autre : posée à côté du
   mot elle passait pour une puce décorative. Deux traits fins plutôt qu'un
   gros caractère « ✕ » — celui-ci avalait les noms courts comme « Miel ». */
/* Panier : trop petit sur ordinateur, on remonte d'un cran. */
.ligne-panier__nom     { font-size: 18px; }
.ligne-panier__options { font-size: 14.5px; line-height: 1.55; }
@media (min-width: 900px) {
    .ligne-panier__nom     { font-size: 20px; }
    .ligne-panier__options { font-size: 15.5px; }
}

/* Une étape franchie passe au vert : le client voit d'un coup d'œil ce
   qui est réglé et ce qui l'attend encore. */
.recap-choix__puce {
    background: var(--vert-fond, #DCFCE7);
    color: #06321B;
    border-color: #1E7A4C;
}
.recap-choix__puce--vide {
    background: transparent;
    color: var(--encre-pale);
    border-color: var(--filet);
}

/* Description mise en avant : bloc rouge plein, pour qu'on ne puisse pas
   la manquer. Les ingrédients ne peuvent plus être rouges sur rouge : ils
   se détachent par la graisse, pas par la couleur. */
.categorie__desc--vedette {
    background: var(--rouge-vif);
    color: #fff;
    font-weight: 700;
    font-size: clamp(15.5px, 1.5vw, 17px);
    line-height: 1.5;
    padding: clamp(12px, 1.6vw, 16px) clamp(14px, 1.8vw, 20px);
    border-radius: 12px;
    max-width: 68ch;
}
.categorie__desc--vedette .ingredient {
    color: #fff;
    font-weight: 900;
}

/* Le nom du restaurant porte l'enseigne : il mérite plus de place. */
.logo { font-size: 28px; }
.logo span { font-size: 11.5px; }
@media (min-width: 900px) {
    .logo { font-size: 34px; }
    .logo span { font-size: 13px; }
}

/* Alcool : l'interdiction en rouge, la solution en vert. Deux messages
   distincts, deux traitements — mélangés, le client ne retenait ni l'un
   ni l'autre. */
.bandeau-comptoir--interdit {
    background: #FDE8EA;
    border: 2px solid var(--rouge-vif);
    color: #5E0A14;
}
.bandeau-comptoir--interdit strong { color: var(--rouge-vif); }
.bandeau-comptoir--retrait {
    background: #DCFCE7;
    border: 2px solid #1E7A4C;
    color: #06321B;
    font-size: 16px;
    font-weight: 800;
}

/* ==================================================================
   Page allergènes
   Information réglementaire : elle doit se lire vite, sur un téléphone
   tenu d'une main, par quelqu'un qui cherche UN mot précis.
   ================================================================== */

.allerg-recherche { margin: 0 0 clamp(24px, 3vw, 34px); max-width: 560px; }
.allerg-recherche__label {
    display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--encre-pale); margin-bottom: 8px;
}
.allerg-recherche input {
    width: 100%; font: inherit; font-size: 16px; /* 16px : évite le zoom auto iOS */
    padding: 13px 16px; border-radius: var(--rayon);
    border: 2px solid var(--trait); background: #fff; color: var(--encre);
}
.allerg-recherche input:focus {
    outline: none; border-color: var(--brique);
    box-shadow: 0 0 0 4px rgba(194, 80, 42, .14);
}
.allerg-recherche__vide {
    margin: 12px 0 0; font-size: 15px; color: var(--encre-pale);
}

.allerg-groupe { margin-bottom: clamp(26px, 3.5vw, 40px); }
.allerg-groupe__titre {
    font-family: 'Anton', sans-serif; text-transform: uppercase;
    font-size: clamp(19px, 2.6vw, 24px); letter-spacing: .02em;
    margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--encre);
}

.allerg-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 900px) {
    .allerg-liste { grid-template-columns: repeat(2, 1fr); }
}

.allerg-item {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
    background: var(--creme-carte); border: 1px solid var(--trait);
    border-radius: var(--rayon); padding: 13px 16px;
}
.allerg-item__nom {
    font-weight: 800; font-size: 16px; color: var(--encre);
    flex: 1 1 11ch; min-width: 11ch;
}
.allerg-item__tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    flex: 1 1 auto; justify-content: flex-start;
}
@media (min-width: 560px) {
    .allerg-item__tags { justify-content: flex-end; }
}

.allerg-tag {
    font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    background: rgba(23, 18, 14, .08); color: var(--encre);
}
/* Chaque allergène garde la même couleur partout : on le reconnaît
   d'un coup d'œil d'une ligne à l'autre sans relire le mot. */
.allerg-tag--gluten       { background: #F6E3C4; color: #6B4A12; }
.allerg-tag--oeufs        { background: #FBEFC2; color: #6E5406; }
.allerg-tag--lait         { background: #D8E8F7; color: #1C4A72; }
.allerg-tag--moutarde     { background: #F7E2B6; color: #6D4D08; }
.allerg-tag--sesame       { background: #EADFD1; color: #5B452C; }
.allerg-tag--arachides    { background: #F0DCC4; color: #6A4718; }
.allerg-tag--soja         { background: #D9EBD2; color: #27551F; }
.allerg-tag--poissons     { background: #D4E7EC; color: #1B4C58; }
.allerg-tag--crustaces    { background: #F6D9D2; color: #7A3322; }
.allerg-tag--mollusques   { background: #E4DCEF; color: #46356B; }
.allerg-tag--fruits_coque { background: #EBDCCB; color: #5E4123; }
.allerg-tag--celeri       { background: #DDEBCB; color: #3B5218; }
.allerg-tag--sulfites     { background: #E6E3D4; color: #4E4A32; }
.allerg-tag--lupin        { background: #F4DCE6; color: #712B49; }
.allerg-tag--aucun        { background: rgba(47, 125, 79, .16); color: #1B5636; }

.allerg-legende {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.allerg-legende .allerg-tag { font-size: 13px; padding: 7px 13px; }

.allerg-avertissement {
    display: flex; align-items: flex-start; gap: 12px;
    background: rgba(179, 38, 30, .07);
    border: 2px solid rgba(179, 38, 30, .28);
    border-radius: var(--rayon); padding: 16px 18px;
    margin-top: clamp(22px, 3vw, 32px);
    font-size: 15px; line-height: 1.55; color: var(--encre);
}
.allerg-avertissement .icone { color: var(--rouge); margin-top: 2px; }

/* ==================================================================
   Rendez-vous du 14 novembre 2026 — se repérer de loin
   Le restaurant lit son site sur une tablette posée au comptoir, et le
   client sur un téléphone en pleine rue. Quatre repères devaient se
   voir sans s'approcher : ouvert ou fermé, emporter ou sur place, le
   panier, et le prix d'une portion.
   ================================================================== */

/* ---- Ouvert / Fermé ----------------------------------------------- */
/* « Ouvert — Service jusqu'à 18:30 » se lisait d'un bloc : on ne savait
   plus si 18h30 était l'heure d'ouverture ou celle de fermeture. Le mot
   passe en gras sur la couleur pleine, l'horaire dans un cartouche clair
   posé à côté. Deux formes différentes, deux informations distinctes. */
.etat-pastille {
    gap: 8px;
    padding: 5px 6px 5px 13px;
    font-size: 13px; letter-spacing: .06em;
    color: #fff;
}
/* La puce ronde faisait doublon avec la couleur pleine de la pastille. */
.etat-pastille::before { display: none; }

.etat-pastille__mot { font-weight: 900; font-size: 14px; letter-spacing: .1em; }
.etat-pastille__detail {
    font-weight: 800; font-size: 12px; letter-spacing: .02em;
    text-transform: none; white-space: nowrap;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .95);
}

.etat-pastille--ouvert {
    background: #0B8F49; color: #fff;
    box-shadow: 0 0 0 3px rgba(22, 230, 120, .34), 0 2px 10px -3px rgba(11, 143, 73, .6);
}
.etat-pastille--ouvert .etat-pastille__detail { color: #05421F; }

.etat-pastille--ferme {
    background: #D61021; color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 60, 80, .32), 0 2px 10px -3px rgba(214, 16, 33, .6);
}
.etat-pastille--ferme .etat-pastille__detail { color: #5E0A14; }

/* ---- Panier -------------------------------------------------------- */
/* Vide ou plein, le panier reste rouge : c'est le point de sortie du
   parcours, il doit se trouver sans le chercher. Seule la halo change
   d'intensité quand quelque chose attend dedans. */
.bouton-panier,
.bouton-panier[data-vide="1"] {
    background: #D61021; color: #fff;
    font-size: 13.5px; font-weight: 800;
    box-shadow: 0 0 0 3px rgba(255, 60, 80, .22), 0 6px 18px -6px rgba(214, 16, 33, .6);
}
.bouton-panier[data-vide="0"] {
    background: #D61021;
    box-shadow: 0 0 0 4px rgba(255, 60, 80, .32), 0 8px 22px -6px rgba(214, 16, 33, .72);
}
.bouton-panier:hover,
.bouton-panier[data-vide="0"]:hover { background: #AC0C1A; }
/* Le compteur s'inverse : rond blanc, chiffre rouge. L'or d'avant se
   perdait sur le rouge. */
.bouton-panier__compteur { background: #fff; color: #D61021; font-weight: 900; }

/* ---- À emporter / Sur place ---------------------------------------- */
/* Les deux violets de la direction 03 se ressemblaient trop. Comme le
   mode change le prix des pizzas, les confondre fait commander au mauvais
   tarif : « Sur place » prend un jaune-vert qu'on ne peut pas prendre
   pour du violet, même du coin de l'œil. */
.bascule { background: #EFEAF7; padding: 4px; gap: 4px; }
.bascule button[data-mode="emporter"][aria-pressed]  { background: #C7B0DE; color: #2E1B42; }
.bascule button[data-mode="surplace"][aria-pressed]  { background: #EDF6BE; color: #2B3300; }
.bascule button[data-mode="emporter"][aria-pressed="true"] {
    background: #7B4FA8; color: #fff;
    box-shadow: inset 0 0 0 2.5px #3F2160;
}
.bascule button[data-mode="surplace"][aria-pressed="true"] {
    background: #D4FF00; color: #1A1F00;
    box-shadow: inset 0 0 0 2.5px #5C7000;
}
.bascule button[aria-pressed="false"] { opacity: .72; }

/* ---- L'année d'ouverture ------------------------------------------- */
/* Le jaune n'est utilisé que là : ni un état, ni un mode, ni une action
   — rien à quoi on puisse le confondre. */
.millesime {
    display: inline-block;
    padding: 1px 13px 3px; border-radius: 999px;
    background: #FFD400; color: #1F1800;
    font-weight: 900; font-size: 1.1em; letter-spacing: .01em;
    box-shadow: 0 0 0 2px rgba(31, 24, 0, .2);
}

/* ---- Tailles Tex-Mex : « ×4 = 7,20 € » ----------------------------- */
/* « ×4 7,20 € » se lisait comme un seul nombre, et quatre portions à
   sept euros devenaient « 47,20 ». La quantité et le prix portent
   chacun leur pastille, séparés par le signe égal. */
.choix--taille { gap: 9px; padding-right: 7px; }
.choix__taille {
    padding: 2px 11px; border-radius: 999px;
    background: #EDE7F6; color: #3F2160;
    font-weight: 900; font-size: 14.5px;
}
.choix__prix--egal {
    opacity: 1; white-space: nowrap;
    padding: 2px 11px; border-radius: 999px;
    background: #FFE9A8; color: #5A3B00;
    font-weight: 900; font-size: 13.5px;
}
/* Cochée, la ligne devient foncée : les deux pastilles doivent alors
   s'éclaircir, sinon le violet sur violet disparaît. */
.choix--taille:has(input:checked) .choix__taille,
.choix--taille.coche .choix__taille { background: #fff; color: #3F2160; }
.choix--taille:has(input:checked) .choix__prix--egal,
.choix--taille.coche .choix__prix--egal { background: #FFD966; color: #4A3000; }

/* ---- En-tête : trois blocs qui ne tiennent plus sur une ligne ------ */
/* « Langueux » rallonge le sous-titre du logo, et la pastille porte
   désormais l'horaire : à trois sur 390 px, le nom du restaurant se
   coupait en quatre. Le tracking se resserre, et sur téléphone l'état
   d'ouverture descend sur sa propre ligne plutôt que d'écraser le reste. */
.logo span { letter-spacing: .14em; white-space: nowrap; }

@media (max-width: 860px) {
    .entete__inner { flex-wrap: wrap; row-gap: 9px; padding-bottom: 11px; }
    .entete__inner .bouton-panier { margin-left: auto; }
    .entete__inner .etat-pastille { order: 3; flex: 1 0 100%; justify-content: center; }
}

/* Le prix d'une taille garde sa pastille pleine une fois la ligne
   cochée : la règle générale des suppléments le ternissait. */
.choix--taille .choix__prix--egal,
.choix--taille:has(input:checked) .choix__prix--egal,
.choix--taille.coche .choix__prix--egal { opacity: 1; }

/* ---- Ajouter une sauce en touchant son nom ------------------------- */
/* Viser le « + » de 36 px, une sauce après l'autre, est pénible sur un
   téléphone tenu d'une main. Le nom devient lui aussi un bouton
   d'ajout : toute la largeur de la ligne ajoute, et le « − » reste le
   seul moyen d'en retirer — on ne peut donc pas se tromper de sens. */
.choix-qte__nom {
    flex: 1;
    -webkit-appearance: none; appearance: none;
    margin: 0; padding: 11px 10px 11px 0;
    border: 0; background: none;
    font: inherit; font-size: 15px; font-weight: 700;
    color: inherit; text-align: left;
    cursor: pointer; border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease;
}
.choix-qte__nom:hover:not(:disabled) { color: var(--vert-vif); }
.choix-qte__nom:active:not(:disabled) { background: rgba(0, 166, 81, .1); }
.choix-qte__nom:disabled { cursor: default; opacity: .5; }
.choix-qte__nom:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
/* La ligne garde la même hauteur : le bouton porte désormais le calage
   vertical que le conteneur assurait. */
.choix-qte { padding-top: 0; padding-bottom: 0; }

/* ---- Groupe d'exclusion : cocher veut dire retirer ----------------- */
/* L'inverse du groupe « à retirer » des pizzas : ici rien n'est coché,
   et ce qui est coché sort du sandwich. Le rouge barré d'une croix dit
   la même chose dans les deux cas — ce qui est rouge n'y sera pas —
   pour qu'au comptoir on lise un ticket sans se demander le sens. */
[data-exclusion] .choix,
[data-exclusion] .choix:not(.coche) {
    background: #fff;
    color: var(--encre);
    border-color: var(--encre);
}
[data-exclusion] .choix.coche,
[data-exclusion] .choix:has(input:checked) {
    background: var(--rouge-vif);
    color: #fff;
    border-color: var(--rouge-fonce);
}
[data-exclusion] .choix.coche::before,
[data-exclusion] .choix:has(input:checked)::before {
    content: "";
    position: absolute; inset: 0; margin: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(to top right,
            transparent calc(50% - 1.7px), #000 calc(50% - 1.7px),
            #000 calc(50% + 1.7px), transparent calc(50% + 1.7px)),
        linear-gradient(to bottom right,
            transparent calc(50% - 1.7px), #000 calc(50% - 1.7px),
            #000 calc(50% + 1.7px), transparent calc(50% + 1.7px));
}

/* ---- Choisir sa boisson sur photo ---------------------------------- */
/* Dix-huit canettes en liste de texte, c'est un mur de mots où personne
   ne retrouve la sienne. En grille, on reconnaît la couleur de la canette
   avant d'avoir lu l'étiquette — c'est le geste du comptoir. */
.choix-liste--images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}
.choix--image {
    flex-direction: column; gap: 8px;
    padding: 12px 8px 10px;
    border-radius: var(--rayon);
    text-align: center;
}
.choix__img {
    width: auto; height: 76px;
    object-fit: contain;
    /* La canette flotte sur le fond de la pastille : une ombre portée
       douce lui redonne l'assise que le détourage lui a enlevée. */
    filter: drop-shadow(0 3px 5px rgba(23, 18, 14, .22));
}
/* L'eau n'a pas de canette à montrer : une bouteille dessinée tient la
   place, sinon sa case paraît vide à côté des dix-huit autres. Le masque
   lui fait prendre la couleur du texte, foncée ou blanche selon l'état. */
.choix__img--vide {
    height: 76px; width: 44px;
    background: currentColor; opacity: .55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M10 2h4v3.2c0 .7.3 1.4.8 1.9l.9.9c.8.8 1.3 1.9 1.3 3V20a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-9c0-1.1.5-2.2 1.3-3l.9-.9c.5-.5.8-1.2.8-1.9V2Z'/%3E%3Cpath d='M7 13h10'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M10 2h4v3.2c0 .7.3 1.4.8 1.9l.9.9c.8.8 1.3 1.9 1.3 3V20a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-9c0-1.1.5-2.2 1.3-3l.9-.9c.5-.5.8-1.2.8-1.9V2Z'/%3E%3Cpath d='M7 13h10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.choix__nom {
    font-size: 12.5px; font-weight: 700; line-height: 1.25;
    display: block; hyphens: auto;
}
/* Sélectionnée, la pastille devient foncée : la vignette garde sa place
   et c'est le cadre qui change, pas la photo. */
.choix--image:has(input:checked),
.choix--image.coche { box-shadow: inset 0 0 0 2px var(--sur-c, #fff); }

@media (max-width: 520px) {
    .choix-liste--images { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
    .choix__img { height: 64px; }
    .choix__img--vide { height: 64px; width: 38px; }
    .choix__nom { font-size: 11.5px; }
}