/* Le 216 · commande à emporter par WhatsApp (page Street food). Complète style.css : mêmes variables, mêmes formes (pilules, 14 px). */

/* Boutons « Ajouter » : visibles seulement quand le script est chargé (sans JavaScript la carte reste une simple carte).
   Au contour (plus léger qu'une cinquantaine de pastilles pleines), pleins au survol et après l'ajout. */
.ajout{display:none;order:4;flex:0 0 auto;margin-left:6px;align-items:center;justify-content:center;min-width:96px;min-height:44px;padding:0 16px;border:0;border-radius:999px;font:inherit;font-size:15px;font-weight:700;background:transparent;color:var(--piment);box-shadow:inset 0 0 0 2px currentColor;cursor:pointer;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease),scale .2s var(--ease)}
.cmd .ajout{display:inline-flex}
.ajout:active{scale:.96}
.ajout.ok{background:var(--piment);color:var(--charbon)}
@media (hover:hover) and (pointer:fine){.ajout:hover{background:var(--piment);color:var(--charbon)}}
.ajout:focus-visible{outline:3px solid var(--lait);outline-offset:3px}

/* Lignes de la carte avec bouton : le nom prend la place, le prix et le bouton restent alignés à droite (avec ou sans prix) */
.cmd .carte li[data-art]{flex-wrap:nowrap;align-items:center;gap:10px}
.cmd .carte li[data-art]::after{display:none}
.cmd .carte li[data-art] .nom{flex:1 1 0;min-width:0}
.cmd .carte li[data-art] .prix{flex:0 0 auto;min-width:3.6ch;text-align:right}
/* Emplacement de la vignette réservé : les noms restent alignés même sans photo */
.cmd .carte:has(.vignette) li[data-art]:not(:has(.vignette))::before{content:"";order:0;flex:0 0 56px;margin-right:4px}
@media (max-width:480px){
  .cmd .carte:has(.vignette) li[data-art]:not(:has(.vignette))::before{flex-basis:48px}
  /* petit écran : le bouton devient un « + » rond de 44 px (nom complet dans son aria-label), pour laisser la place aux noms */
  .ajout{min-width:44px;width:44px;padding:0;margin-left:0;font-size:0}
  .ajout::before{content:"+";font-size:26px;font-weight:400;line-height:1}
  .ajout.ok::before{content:"✓";font-size:20px;font-weight:700}
}
/* Taille des pizzas */
.choix-taille{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;border:0;padding:0}
.choix-taille legend{width:100%;padding:0;margin:0 0 8px;color:var(--gris-clair);font-size:15px}
.choix-taille label{position:relative;display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:999px;background:var(--charbon-2);color:var(--lait);font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 2px #3a3432}
.choix-taille input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choix-taille label:has(input:checked){background:var(--harissa);color:#fff;box-shadow:inset 0 0 0 2px var(--piment)}
.choix-taille label:has(input:focus-visible){outline:3px solid var(--piment);outline-offset:3px}
.cmd-note{color:var(--gris-clair);font-size:15px;margin:10px 0 0;max-width:60ch}

/* Choix en ligne (paninis, tex-mex, boissons) : même format que les lignes de la carte (nom, prix, bouton), plus de pilules */
.puces{display:grid;grid-template-columns:1fr;column-gap:56px;margin:14px 0 0;padding:0;list-style:none}
@media (min-width:768px){.puces{grid-template-columns:1fr 1fr}}
.puces li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:2px dotted rgba(246,195,67,.35)}
.puces li span{flex:1 1 0;min-width:0;font-weight:600}
.puces li small{flex:0 0 auto;min-width:3.6ch;text-align:right;color:var(--piment);font-size:16px;font-weight:600}
.puces .ajout{margin:0}
.a-table .puces li{border-bottom-color:rgba(31,63,166,.35)}
.a-table .puces li small{color:var(--bleu)}

/* Composeur de tacos */
.tacos-form{margin:8px 0 0;max-width:760px}
.tacos-form fieldset{border:0;margin:0 0 22px;padding:0}
.tacos-form legend{padding:0;margin:0 0 10px;font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:26px;letter-spacing:.02em;color:var(--lait)}
.tacos-form legend span{font-family:var(--sans);text-transform:none;font-weight:400;font-size:15px;color:var(--gris-clair);letter-spacing:0;margin-left:8px}
.tacos-form .tailles{margin:0}
.tacos-form .taille-radio{position:relative}
.tacos-form .taille-radio input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tacos-form .taille-radio .taille{pointer-events:none}
.tacos-form .taille-radio input:checked + .taille{background:var(--harissa);box-shadow:0 0 0 3px var(--piment)}
.tacos-form .taille-radio input:checked + .taille .t{color:#fff}
.tacos-form .taille-radio input:checked + .taille .v{color:#ffe3e7}
.tacos-form .taille-radio input:focus-visible + .taille{outline:3px solid var(--piment);outline-offset:3px}
.cases{display:flex;flex-wrap:wrap;gap:8px}
.cases label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--charbon-2);box-shadow:inset 0 0 0 2px #2f2a28;cursor:pointer;font-size:16px}
.cases input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cases label:has(input:checked){background:var(--piment);color:var(--charbon);font-weight:700;box-shadow:none}
.cases label:has(input:disabled){opacity:.4;cursor:not-allowed}
.cases label:has(input:focus-visible){outline:3px solid var(--piment);outline-offset:3px}
.tacos-bas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:8px}
.tacos-prix{font-family:var(--cond);font-weight:700;font-size:40px;color:#fff;min-width:3ch}
.tacos-msg{margin:12px 0 0;min-height:1.5em;color:var(--piment);font-weight:700}
.tacos-form .btn{min-height:52px}
.tacos-form button.btn{border:2px solid transparent;font-family:inherit;cursor:pointer}

/* Bouton « Ma commande » (barre du bas et en-tête de la carte) */
.btn .n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;margin-left:8px;border-radius:999px;background:var(--piment);color:var(--charbon);font-size:14px;font-weight:700}
.btn .n[hidden]{display:none}
button.btn{font-family:inherit;cursor:pointer}

/* Fenêtre du panier */
dialog.panier{width:min(640px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:var(--r);background:var(--charbon-2);color:var(--lait);box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 0 0 1px #2f2a28}
dialog.panier::backdrop{background:rgba(0,0,0,.72)}
.panier-in{display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
.panier-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 12px}
.panier-tete h2{margin:0;font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:40px;line-height:1;color:var(--piment)}
.panier-ferme{min-width:48px;min-height:48px;border:0;border-radius:999px;background:#2a2524;color:var(--lait);font:inherit;font-size:24px;line-height:1;cursor:pointer}
.panier-corps{overflow:auto;overscroll-behavior:contain;padding:0 20px 20px;-webkit-overflow-scrolling:touch}
.panier-vide{margin:8px 0 20px;color:var(--gris-clair)}
.panier-lignes{list-style:none;margin:0;padding:0}
.panier-lignes li{display:grid;grid-template-columns:1fr auto auto;gap:4px 12px;align-items:center;padding:10px 0;border-bottom:1px solid #332e2c}
.l-nom{font-weight:700;min-width:0}
.l-nom small{display:block;margin-top:2px;font-weight:400;font-size:14px;color:var(--gris-clair);line-height:1.35}
.l-qte{display:flex;align-items:center;gap:2px}
.l-qte button{min-width:44px;min-height:44px;border:0;border-radius:999px;background:#2a2524;color:var(--lait);font:inherit;font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.l-qte .q{min-width:2ch;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.l-prix{min-width:4.2ch;text-align:right;font-weight:700;color:var(--piment);font-variant-numeric:tabular-nums lining-nums}
@media (max-width:420px){.panier-lignes li{grid-template-columns:1fr auto}.l-nom{grid-column:1/-1}.l-qte{grid-column:1}.l-prix{grid-column:2}}
.panier-totaux{margin:12px 0 4px;display:grid;gap:4px}
.panier-totaux .total{display:none}
.panier-totaux div{display:flex;justify-content:space-between;gap:12px;color:var(--gris-clair)}
.panier-totaux .remise{color:var(--piment)}
.panier-totaux .total{margin-top:6px;padding-top:10px;border-top:1px solid #332e2c;color:#fff;font-family:var(--cond);font-weight:700;font-size:34px;line-height:1}
.panier-form{display:grid;gap:12px;margin-top:16px}
.panier-form label{display:grid;gap:6px;font-weight:700;font-size:15px}
.panier-form input,.panier-form select,.panier-form textarea{width:100%;min-height:48px;padding:10px 14px;border:2px solid #3a3432;border-radius:12px;background:var(--charbon);color:var(--lait);font:inherit;font-weight:400;font-size:17px}
.panier-form textarea{min-height:76px;resize:vertical}
.panier-form :focus-visible{outline:3px solid var(--piment);outline-offset:2px}
.panier-erreur{margin:0;min-height:1.4em;color:var(--piment);font-weight:700}
.panier-envoi{display:flex;flex-wrap:wrap;gap:10px}
.panier-envoi .btn{flex:1 1 220px}
.panier-envoye{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#2a2524;color:var(--lait);font-size:15px}
.panier-info{margin:12px 0 0;color:var(--gris-clair);font-size:14px}
.panier-vider{border:0;background:none;color:var(--gris-clair);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;min-height:44px;padding:0 6px;align-self:center}
.panier-form .panier-envoi{align-items:center;justify-content:space-between}
.panier-form .panier-envoi .btn{flex:0 1 auto}
/* Barre collante en bas de la fenêtre : le total et l'envoi restent visibles pendant qu'on défile */
.panier-barre{position:sticky;bottom:-20px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px -20px -20px;padding:12px 20px calc(14px + env(safe-area-inset-bottom));background:var(--charbon-2);box-shadow:0 -1px 0 #332e2c,0 -14px 18px -8px rgba(0,0,0,.45)}
.panier-barre-total{display:grid;line-height:1.1;color:var(--gris-clair);font-size:14px}
.panier-barre-total b{white-space:nowrap;font-family:var(--cond);font-weight:700;font-size:32px;color:#fff;font-variant-numeric:tabular-nums lining-nums}
.panier-barre .btn{flex:1 1 auto;max-width:280px;padding:0 16px}
.a-table .panier-barre{background:var(--chaux);box-shadow:0 -1px 0 #ddd3c1,0 -14px 18px -8px rgba(20,32,80,.18)}
.a-table .panier-barre-total{color:var(--gris)}
.a-table .panier-barre-total b{color:var(--bleu);font-family:var(--serif);font-weight:600;font-size:28px}

/* Livraison par les plateformes */
.livraison[hidden]{display:none}
.livraison .btns{margin-top:14px}

/* Sans JavaScript : la carte et le texte des tacos d'origine ; avec le script : le composeur et les choix de taille */
.tacos-form,.choix-taille{display:none}
.cmd .tacos-form{display:block}
.cmd .choix-taille{display:flex}
.cmd .tacos-compo,.cmd .tacos-note{display:none}
.cmd .tacos-form + .tacos-note{display:none}

/* Icône du panier dans la barre du haut (pages Restaurant et Street food) */
.nav-panier{display:none}
.cmd .nav-panier{display:block}
.cart-btn{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:2px;border:0;border-radius:999px;background:transparent;color:var(--encre);cursor:pointer;transition:background .25s var(--ease)}
.express .cart-btn{color:var(--lait)}
.cart-btn:active{background:var(--chaux-2)} .express .cart-btn:active{background:var(--charbon-2)}
@media (hover:hover) and (pointer:fine){.cart-btn:hover{background:var(--chaux-2)} .express .cart-btn:hover{background:var(--charbon-2)}}
.cart-btn .n{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--piment);color:var(--charbon);font-weight:700;line-height:1;position:absolute;top:1px;right:-1px;min-width:20px;height:20px;margin:0;padding:0 5px;font-size:12px}
.cart-btn .n[hidden]{display:none}
.galerie-pause{display:flex;align-items:center;gap:8px;min-height:44px;margin:10px auto 0;padding:0 18px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:15px;font-weight:600;box-shadow:inset 0 0 0 2px currentColor;cursor:pointer}
.a-table .cart-btn .n{background:var(--bleu);color:var(--chaux)}

/* Page Restaurant : boutons « Ajouter » aux couleurs de la salle (bleu et chaux) */
.a-table .ajout{background:transparent;color:var(--bleu)}
.a-table .ajout.ok{background:var(--bleu);color:var(--chaux)}
@media (hover:hover) and (pointer:fine){.a-table .ajout:hover{background:var(--bleu);color:var(--chaux)}}
.a-table .ajout:focus-visible{outline-color:var(--bleu)}
.a-table .btn .n{background:var(--bleu);color:var(--chaux)}
.a-table .btn-bleu .n{background:var(--chaux);color:var(--bleu)}

/* Petite fenêtre de choix (sauces, garniture) */
.choix-groupe{border:0;margin:0 0 18px;padding:0}
.choix-groupe legend{padding:0;margin:0 0 10px;font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:24px;letter-spacing:.02em;color:var(--lait)}
dialog.choix .panier-tete h2{font-size:32px}

/* Choix du mode : Click & Collect ou livraison à domicile */
.mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.mode-choix{position:relative;display:block;cursor:pointer}
.mode-choix input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.mode-carte{display:grid;gap:2px;justify-items:start;align-content:start;height:100%;padding:14px;border-radius:var(--r);background:var(--charbon);color:var(--lait);box-shadow:inset 0 0 0 2px #3a3432;transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.mode-carte svg{margin-bottom:6px;color:var(--piment)}
.mode-carte b{font-size:16px;line-height:1.2}
.mode-carte small{font-size:13px;line-height:1.35;color:var(--gris-clair)}
.mode-choix input:checked + .mode-carte{background:var(--harissa);box-shadow:inset 0 0 0 2px var(--piment)}
.mode-choix input:checked + .mode-carte svg{color:#fff}
.mode-choix input:checked + .mode-carte small{color:#ffe3e7}
.mode-choix input:focus-visible + .mode-carte{outline:3px solid var(--piment);outline-offset:3px}
#panier-livraison .panier-envoi{margin-top:14px}
@media (max-width:400px){.mode-carte{padding:12px}.mode-carte small{font-size:12px}}

/* un élément marqué hidden doit rester caché même quand une règle lui donne un display (ligne de remise à 0) */
dialog.panier [hidden]{display:none !important}

/* Page Restaurant : le panier et la petite fenêtre de choix prennent les couleurs de la salle (chaux et bleu roi), comme la page */
.a-table dialog.panier{background:var(--chaux);color:var(--encre);box-shadow:0 30px 80px rgba(20,32,80,.5),inset 0 0 0 1px #d9ceb9}
.a-table dialog.panier::backdrop{background:rgba(18,28,70,.6)}
.a-table .panier-tete h2{font-family:var(--serif);font-weight:600;text-transform:none;color:var(--bleu);font-size:34px}
.a-table dialog.choix .panier-tete h2{font-size:28px}
.a-table .panier-ferme{background:var(--chaux-2);color:var(--encre)}
.a-table .panier-vide,.a-table .panier-info,.a-table .l-nom small,.a-table .panier-vider{color:var(--gris)}
.a-table .panier-lignes li{border-bottom-color:#ddd3c1}
.a-table .l-qte button{background:var(--chaux-2);color:var(--encre)}
.a-table .l-prix{color:var(--bleu)}
.a-table .panier-totaux div{color:var(--gris)}
.a-table .panier-totaux .remise{color:var(--terre);font-weight:700}
.a-table .panier-totaux .total{border-top-color:#ddd3c1;color:var(--bleu);font-family:var(--serif);font-weight:600;font-size:30px}
.a-table .panier-form input,.a-table .panier-form select,.a-table .panier-form textarea{background:#fff;color:var(--encre);border-color:#d9ceb9}
.a-table .panier-form :focus-visible{outline-color:var(--bleu)}
.a-table .panier-erreur{color:var(--terre)}
.a-table .panier-envoye{background:var(--chaux-2);color:var(--encre)}
.a-table dialog.panier .btn-harissa{background:var(--bleu);color:var(--chaux)}
.a-table dialog.panier .btn-ligne{color:var(--bleu);border-color:var(--bleu)}
.a-table .mode-carte{background:#fff;color:var(--encre);box-shadow:inset 0 0 0 2px #d9ceb9}
.a-table .mode-carte svg{color:var(--bleu)}
.a-table .mode-carte small{color:var(--gris)}
.a-table .mode-choix input:checked + .mode-carte{background:var(--bleu);color:var(--chaux);box-shadow:inset 0 0 0 2px var(--safran)}
.a-table .mode-choix input:checked + .mode-carte svg{color:var(--safran)}
.a-table .mode-choix input:checked + .mode-carte small{color:#dfe5ff}
.a-table .mode-choix input:focus-visible + .mode-carte{outline-color:var(--bleu)}
.a-table .choix-groupe legend{font-family:var(--serif);font-weight:600;text-transform:none;font-size:20px;color:var(--bleu)}
.a-table dialog.panier .cases label{background:#fff;color:var(--encre);box-shadow:inset 0 0 0 2px #d9ceb9}
.a-table dialog.panier .cases label:has(input:checked){background:var(--bleu);color:var(--chaux);box-shadow:none}
.a-table dialog.panier .cases label:has(input:focus-visible){outline-color:var(--bleu)}

/* Réseaux sociaux du 216 (pied de page des trois pages) */
.reseaux{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.reseaux a{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:2px solid currentColor;border-radius:50%;text-decoration:none;color:var(--bleu)}
.express .reseaux a{color:var(--piment)}
@media (hover:hover) and (pointer:fine){.reseaux a:hover{background:rgba(31,63,166,.08)} .express .reseaux a:hover{background:rgba(246,195,67,.12)}}

@media (max-width:420px){dialog:not(.choix) .panier-tete h2{font-size:32px}}
.panier-tete{gap:8px}
.panier-tete h2{min-width:0}
.panier-ferme{flex:0 0 auto}
@media (max-width:420px){
  .a-table dialog:not(.choix) .panier-tete h2{font-size:27px;line-height:1.05}
}

/* Logo du 216 devant « Ma commande » */
.panier-id{display:flex;align-items:center;gap:10px;min-width:0}
.logo-panier{flex:0 0 auto;height:40px;width:auto}
.panier-vide{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panier-vide p{margin:0 0 14px}
.panier-vide[hidden]{display:none}
@media (max-width:420px){
  .logo-panier{height:34px}
  dialog:not(.choix) .panier-tete h2{font-size:28px}
  .a-table dialog:not(.choix) .panier-tete h2{font-size:25px}
}

/* Livraison par le 216 : champs d'adresse, paiement à la livraison, seuil de livraison offerte */
.panier-livr{display:grid;gap:12px}
.panier-livr[hidden],.panier-seuil[hidden],#panier-livr-ligne[hidden],.pay[hidden]{display:none}
.panier-2c{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px}
.panier-2c label{min-width:0}
.facultatif{font-weight:400;color:var(--gris-clair);font-size:14px}
.panier-paiement{margin:0;padding:0;border:0;display:grid;gap:8px}
.panier-paiement legend{padding:0;margin:0 0 8px;font-weight:700;font-size:15px}
.pay{position:relative;display:block;cursor:pointer}
.panier-form .pay input{position:absolute;opacity:0;inset:0;margin:0;min-height:0;width:100%;height:100%;cursor:pointer}
.pay span{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border-radius:12px;background:var(--charbon);box-shadow:inset 0 0 0 2px #3a3432;font-weight:700}
.pay small{font-weight:400;color:var(--gris-clair);font-size:13px}
.pay span::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--gris-clair)}
.pay input:checked + span{background:var(--harissa);box-shadow:inset 0 0 0 2px var(--piment)}
.pay input:checked + span small{color:#ffe3e7}
.pay input:checked + span::before{background:#fff;box-shadow:inset 0 0 0 5px var(--harissa),0 0 0 2px #fff}
.pay input:focus-visible + span{outline:3px solid var(--piment);outline-offset:3px}
.panier-seuil{margin:8px 0 0;padding:8px 12px;border-radius:10px;background:#2a2524;color:var(--lait);font-weight:700;font-size:15px}
.a-table .facultatif,.a-table .pay small{color:var(--gris)}
.a-table .pay span{background:#fff;color:var(--encre);box-shadow:inset 0 0 0 2px #d9ceb9}
.a-table .pay span::before{box-shadow:inset 0 0 0 2px var(--gris)}
.a-table .pay input:checked + span{background:var(--bleu);color:var(--chaux);box-shadow:inset 0 0 0 2px var(--safran)}
.a-table .pay input:checked + span small{color:#dfe5ff}
.a-table .pay input:checked + span::before{background:#fff;box-shadow:inset 0 0 0 5px var(--bleu),0 0 0 2px #fff}
.a-table .pay input:focus-visible + span{outline-color:var(--bleu)}
.a-table .panier-seuil{background:#f3ecdd;color:var(--encre)}
@media (max-width:400px){.panier-2c{grid-template-columns:1fr}}