/* =========================================================
   Direction : le ticket de caisse.
   Le site entier est une bande de papier thermique posée
   sur du kraft. Prix, quantités et références en monospace,
   séparateurs pointillés, bords déchirés.
   ========================================================= */

:root{
  --papier:#FAF6EE;
  --papier-creux:#F1EBDF;
  --encre:#17130F;
  --encre-douce:#6E655A;
  --rouge:#D22D1E;
  --moutarde:#E9A400;
  --kraft:#241D16;
  --trait:#D8CFBE;

  --r:14px;
  --gouttiere:18px;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --texte:"Inter Tight",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--kraft);
  color:var(--encre);
  font-family:var(--texte);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-bottom:96px;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;}
:focus-visible{outline:3px solid var(--moutarde);outline-offset:2px;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* --- bande de papier --- */
.ticket{
  max-width:560px;
  margin:0 auto;
  background:var(--papier);
  min-height:100vh;
}
@media(min-width:600px){
  .ticket{min-height:auto;margin:22px auto 40px;box-shadow:0 18px 50px rgba(0,0,0,.35);}
}
.ticket-bord{height:10px;background-repeat:repeat-x;display:none;}
@media(min-width:600px){
  .ticket-bord{display:block;}
  .ticket-bord--haut{
    background:
      linear-gradient(-45deg,transparent 33.4%,var(--papier) 33.4%,var(--papier) 66.6%,transparent 66.6%),
      linear-gradient(45deg,transparent 33.4%,var(--papier) 33.4%,var(--papier) 66.6%,transparent 66.6%);
    background-size:14px 20px;background-position:bottom;
  }
  .ticket-bord--bas{
    background:
      linear-gradient(-135deg,transparent 33.4%,var(--papier) 33.4%,var(--papier) 66.6%,transparent 66.6%),
      linear-gradient(135deg,transparent 33.4%,var(--papier) 33.4%,var(--papier) 66.6%,transparent 66.6%);
    background-size:14px 20px;background-position:top;
  }
}

/* --- en-tête --- */
.entete{padding:22px var(--gouttiere) 14px;}
.entete-haut{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
.enseigne{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(30px,8vw,40px);
  line-height:.95;
  letter-spacing:-.02em;
  margin:0;
  text-transform:uppercase;
}
.baseline{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--encre-douce);
  margin:8px 0 0;
}
.statut{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--trait);border-radius:999px;padding:5px 10px;white-space:nowrap;
  display:flex;align-items:center;gap:6px;
}
.statut::before{content:"";width:7px;height:7px;border-radius:50%;background:#1E9E5A;}
.statut.ferme::before{background:var(--rouge);}

/* --- écran d'entrée : on choisit le service avant de voir la carte --- */
.accueil{
  position:fixed;inset:0;z-index:90;background:var(--papier);
  overflow-y:auto;display:flex;flex-direction:column;justify-content:center;
  padding:34px 22px calc(34px + env(safe-area-inset-bottom));
}
.accueil[hidden]{display:none;}
.accueil-inner{max-width:460px;margin:0 auto;width:100%;}
.accueil .enseigne{font-size:clamp(34px,10vw,46px);}
.accueil-question{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-douce);margin:34px 0 12px;
}
.choix-service{
  display:block;width:100%;text-align:left;
  border:1.5px solid var(--encre);border-radius:var(--r);
  padding:16px 18px;margin-bottom:12px;background:var(--papier);
}
.choix-service:disabled{opacity:.4;border-color:var(--trait);cursor:not-allowed;}
.choix-titre{
  font-family:var(--display);font-weight:800;font-size:21px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
}
.choix-titre .fleche{font-family:var(--texte);font-size:19px;}
.choix-detail{font-size:13.5px;color:var(--encre-douce);margin-top:5px;}
.choix-meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-douce);margin-top:9px;display:flex;gap:14px;flex-wrap:wrap;
}
.accueil-retour{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-douce);border-bottom:1px solid var(--trait);margin-bottom:20px;display:inline-block;
}
.accueil-ferme{
  background:var(--rouge);color:#fff;border-radius:10px;
  padding:13px 15px;font-size:14px;line-height:1.4;margin-top:20px;
}

/* --- résumé du service choisi, en tête de carte --- */
.resume{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  margin-top:18px;border:1.5px solid var(--encre);border-radius:var(--r);padding:11px 14px;
}
.resume-corps{flex:1;min-width:0;}
.resume-mode{display:block;font-weight:600;font-size:15px;}
.resume-detail{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--encre-douce);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.resume-lien{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--trait);border-radius:999px;padding:5px 10px;flex-shrink:0;
}

/* --- bandeau restaurant fermé --- */
.bandeau-ferme{
  position:sticky;top:0;z-index:30;margin:0;
  background:var(--rouge);color:#fff;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;padding:11px 14px;
}
.bandeau-ferme[hidden]{display:none;}
body.ferme .rayons{top:41px;}

/* --- rayons --- */
.rayons{
  position:sticky;top:0;z-index:20;
  display:flex;gap:8px;overflow-x:auto;
  padding:12px var(--gouttiere);
  background:var(--papier);
  border-bottom:1px solid var(--trait);
  scrollbar-width:none;
}
.rayons::-webkit-scrollbar{display:none;}
.rayon{
  white-space:nowrap;padding:7px 14px;border-radius:999px;
  border:1px solid var(--trait);font-size:14px;font-weight:500;
  background:var(--papier);
}
.rayon.actif{background:var(--encre);color:var(--papier);border-color:var(--encre);}

/* --- carte --- */
.carte{padding:0 var(--gouttiere);}
.chargement{
  font-family:var(--mono);font-size:12px;color:var(--encre-douce);
  text-align:center;padding:60px 0;letter-spacing:.1em;text-transform:uppercase;
}
.section-titre{
  display:flex;align-items:center;gap:12px;
  margin:32px 0 6px;
}
.section-titre h2{
  font-family:var(--display);font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.06em;margin:0;
}
.section-titre .fil{flex:1;border-bottom:1px dashed var(--trait);}
.section-titre .compte{font-family:var(--mono);font-size:11px;color:var(--encre-douce);}

.produit{
  display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;
  padding:16px 0;border-bottom:1px dashed var(--trait);
}
.produit-corps{flex:1;min-width:0;}
.produit-nom{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.15;margin:0;}
.produit-desc{
  font-size:13.5px;color:var(--encre-douce);margin:5px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.produit-prix{font-family:var(--mono);font-size:14px;font-weight:700;margin-top:9px;display:block;}
.produit-visuel{position:relative;flex-shrink:0;width:84px;height:84px;}
.vignette{
  width:84px;height:84px;border-radius:10px;object-fit:cover;display:block;background:var(--papier-creux);
}
.monogramme{
  width:84px;height:84px;border-radius:10px;background:var(--papier-creux);
  border:1px solid var(--trait);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:30px;font-weight:800;color:var(--trait);
}
.ajouter{
  position:absolute;right:-6px;bottom:-6px;
  width:32px;height:32px;border-radius:50%;
  background:var(--rouge);color:#fff;
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 0 rgba(0,0,0,.18);
}
.produit.epuise{opacity:.5;cursor:not-allowed;}
.produit.epuise .ajouter{display:none;}
.badge-epuise{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--encre);border-radius:4px;
  padding:2px 6px;margin-top:9px;
}

/* --- pied --- */
.pied{padding:34px var(--gouttiere) 40px;text-align:center;border-top:1px dashed var(--trait);margin-top:30px;}
.pied-ligne{font-family:var(--mono);font-size:11.5px;color:var(--encre-douce);margin:0 0 5px;}
.pied-mentions{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--trait);margin:16px 0 0;}

/* --- barre panier --- */
.barre-panier{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:0 var(--gouttiere) calc(14px + env(safe-area-inset-bottom));
  max-width:560px;margin:0 auto;
}
.barre-btn{
  position:relative;width:100%;
  background:var(--encre);color:var(--papier);
  border-radius:var(--r);padding:15px 16px;
  display:flex;align-items:center;gap:12px;
}
.barre-btn::before{
  content:"";position:absolute;left:0;right:0;top:-9px;height:10px;
  background:
    linear-gradient(-45deg,transparent 33.4%,var(--encre) 33.4%,var(--encre) 66.6%,transparent 66.6%),
    linear-gradient(45deg,transparent 33.4%,var(--encre) 33.4%,var(--encre) 66.6%,transparent 66.6%);
  background-size:14px 20px;background-position:bottom;
}
.barre-btn.ajoute{animation:tampon .28s ease-out;}
@keyframes tampon{40%{transform:scale(1.025);}100%{transform:scale(1);}}
@media(prefers-reduced-motion:reduce){.barre-btn.ajoute{animation:none;}}
.barre-compteur{
  font-family:var(--mono);font-size:13px;font-weight:700;
  background:var(--papier);color:var(--encre);
  min-width:26px;height:26px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
}
.barre-texte{flex:1;text-align:left;font-weight:600;}
.barre-total{font-weight:700;}

/* --- feuille modale --- */
.voile{position:fixed;inset:0;background:rgba(10,7,4,.55);z-index:50;}
.feuille{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  max-width:560px;margin:0 auto;
  background:var(--papier);
  border-radius:20px 20px 0 0;
  max-height:92vh;display:flex;flex-direction:column;
  animation:monte .22s ease-out;
}
/* l'attribut hidden doit gagner sur display:flex */
.feuille[hidden],.voile[hidden],.barre-panier[hidden]{display:none;}
@keyframes monte{from{transform:translateY(100%);}to{transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.feuille{animation:none;}}

.feuille-entete{
  padding:16px var(--gouttiere) 12px;border-bottom:1px dashed var(--trait);
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-shrink:0;
}
.feuille-titre{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.1;margin:0;}
.feuille-sous{font-size:13.5px;color:var(--encre-douce);margin:6px 0 0;}
.fermer{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--trait);border-radius:999px;padding:6px 12px;flex-shrink:0;
}
.feuille-corps{overflow-y:auto;padding:4px var(--gouttiere) 20px;-webkit-overflow-scrolling:touch;}
.feuille-pied{
  padding:12px var(--gouttiere) calc(14px + env(safe-area-inset-bottom));
  border-top:1px dashed var(--trait);flex-shrink:0;background:var(--papier);
}

/* --- groupes d'options --- */
.groupe{margin-top:22px;}
.groupe-entete{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;}
.groupe-nom{font-family:var(--display);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.05em;margin:0;}
.groupe-regle{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-douce);}
.groupe-regle.obligatoire{color:var(--rouge);}

.opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 0;border-bottom:1px dashed var(--trait);
}
.opt-marque{
  width:21px;height:21px;flex-shrink:0;border:1.5px solid var(--encre-douce);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--papier);
}
.opt[data-forme="rond"] .opt-marque{border-radius:50%;}
.opt[data-forme="carre"] .opt-marque{border-radius:6px;}
.opt.coche .opt-marque{background:var(--encre);border-color:var(--encre);}
.opt-nom{flex:1;font-size:15px;}
.opt-prix{font-family:var(--mono);font-size:13px;color:var(--encre-douce);}
.opt.indispo{opacity:.4;}
.opt.indispo .opt-prix{text-transform:uppercase;font-size:10px;letter-spacing:.08em;}

/* retraits : la ligne se barre quand on enlève l'ingrédient */
.opt-retrait.coche .opt-nom{text-decoration:line-through;color:var(--rouge);}
.opt-retrait .opt-marque{border-radius:6px;}
.opt-retrait.coche .opt-marque{background:var(--rouge);border-color:var(--rouge);}

/* --- quantité --- */
.quantite{display:flex;align-items:center;gap:6px;border:1.5px solid var(--encre);border-radius:10px;padding:3px;}
.quantite button{width:34px;height:34px;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;}
.quantite button[disabled]{opacity:.3;}
.quantite span{font-family:var(--mono);font-weight:700;min-width:24px;text-align:center;}

.principal{
  width:100%;background:var(--rouge);color:#fff;border-radius:var(--r);
  padding:15px;font-weight:600;font-size:16px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.principal[disabled]{background:var(--trait);color:var(--encre-douce);cursor:not-allowed;}
.principal .mono{font-weight:700;}
.secondaire{
  width:100%;border:1.5px solid var(--encre);border-radius:var(--r);
  padding:13px;font-weight:600;text-align:center;margin-top:10px;
}
.pied-double{display:flex;gap:10px;align-items:center;}
.pied-double .principal{flex:1;}

/* --- panier façon ticket --- */
.ticket-ligne{padding:13px 0;border-bottom:1px dashed var(--trait);}
.ticket-tete{display:flex;align-items:baseline;gap:8px;}
.ticket-qte{font-family:var(--mono);font-weight:700;font-size:13px;}
.ticket-nom{flex:1;font-weight:600;font-size:15px;}
.ticket-prix{font-family:var(--mono);font-size:14px;font-weight:700;}
.ticket-opt{
  font-family:var(--mono);font-size:11.5px;color:var(--encre-douce);
  margin:4px 0 0 24px;line-height:1.6;
}
.ticket-opt .retire{color:var(--rouge);}
.ticket-actions{display:flex;gap:14px;margin:8px 0 0 24px;}
.ticket-actions button{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-douce);border-bottom:1px solid var(--trait);
}
.totaux{margin-top:18px;}
.total-ligne{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:13px;padding:5px 0;}
.total-ligne .fil{flex:1;border-bottom:1px dotted var(--trait);}
.total-ligne.grand{font-size:19px;font-weight:700;padding-top:12px;}
.total-ligne.grand .fil{border-bottom-style:dashed;border-color:var(--encre);}

.vide{text-align:center;padding:50px 10px;}
.vide p{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--encre-douce);text-transform:uppercase;}

/* --- formulaire --- */
.champ{margin-top:14px;}
.champ label{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-douce);margin-bottom:5px;
}
.champ input,.champ textarea{
  width:100%;font-family:var(--texte);font-size:16px;
  padding:12px;border:1.5px solid var(--trait);border-radius:10px;
  background:var(--papier);color:var(--encre);
}
.champ input:focus,.champ textarea:focus{border-color:var(--encre);outline:none;}
.champ textarea{resize:vertical;min-height:70px;}
.duo{display:grid;grid-template-columns:1fr 2fr;gap:10px;}
.alerte{
  background:#FBE9E6;border:1px solid var(--rouge);color:#8E1B10;
  border-radius:10px;padding:11px 13px;font-size:14px;margin-top:14px;
}