/* ScanPlat — feuille de style du menu client.
   Reprise fidele de la maquette validee (maquettes/scanplat-menu.html).
   Palette : creme #faf6ef, vert #1f6f54, dore #b98a2f, Georgia pour les titres. */

/* L'attribut "hidden" doit toujours l'emporter. Sans cette ligne, la moindre
   classe qui impose un "display" rallume l'element que le code croit cache :
   c'est ainsi qu'une fenetre restait affichee en permanence par-dessus
   l'appli du commercial, et qu'elle bloquait tout. */
[hidden] { display: none !important; }

:root{
  --bg:#faf6ef; --card:#ffffff; --ink:#22201c; --muted:#7a746a;
  --accent:#1f6f54; --accent-soft:#e3f0ea; --gold:#b98a2f; --gold-soft:#f6ecd8;
  --danger:#b3432f; --line:#eee7da; --shadow:0 2px 14px rgba(40,30,10,.07);
  --radius:16px;
}
[data-theme="dark"]{
  --bg:#171512; --card:#211e1a; --ink:#f0ebe2; --muted:#a49b8d;
  --accent:#4fae8a; --accent-soft:#1e332b; --gold:#d8a94f; --gold-soft:#332a18;
  --line:#322d26; --shadow:0 2px 14px rgba(0,0,0,.35);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#d8d2c6;color:var(--ink)}
.phone{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;box-shadow:0 0 40px rgba(0,0,0,.18)}
h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif}

/* Bandeau « Démonstration » : uniquement dans le restaurant de demo d'un
   commercial. Volontairement dans le flux, en tete de page : il ne recouvre
   aucun bouton et n'entre en conflit avec aucun en-tete collant (.tabs,
   .backhead, .sheet-head sont tous en position: sticky top: 0). */
.demo-strip{background:#9a2c2c;color:#fff;padding:8px 14px;
  font-size:12.5px;line-height:1.35;text-align:center;letter-spacing:.2px}
.demo-strip b{font-weight:800}

/* Header */
.cover{position:relative;height:170px;background:linear-gradient(135deg,#2c3e35,#1f6f54 60%,#3f8f6f);overflow:hidden}
.cover::after{content:"🍽️ 🥂 🥖 🧀 🍷";position:absolute;font-size:52px;opacity:.16;top:18px;left:-10px;letter-spacing:18px;white-space:nowrap;transform:rotate(-8deg)}
.cover-inner{position:absolute;bottom:14px;left:18px;right:18px;color:#fff}
.cover-inner h1{font-size:25px;letter-spacing:.3px}
.cover-inner p{font-size:12.5px;opacity:.85;margin-top:3px}
.cover-top{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center}
.pillbtn{border:none;background:rgba(255,255,255,.92);color:#22201c;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow)}
[data-theme="dark"] .pillbtn{background:rgba(30,28,24,.92);color:#f0ebe2}

.infobar{display:flex;gap:8px;padding:10px 14px;overflow-x:auto;scrollbar-width:none}
.infobar::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--muted);display:flex;gap:5px;align-items:center}
.chip-table{border-color:var(--accent);color:var(--accent);font-weight:700}

/* Search + filters */
.toolbar{padding:2px 14px 8px;display:flex;gap:8px}
.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.search input{border:none;outline:none;background:transparent;font-size:14px;width:100%;color:var(--ink)}
.fbtn{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:0 13px;font-size:15px;cursor:pointer;position:relative;color:var(--ink)}
.fdot{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* Category tabs */
.tabs{display:flex;gap:6px;padding:4px 14px 10px;overflow-x:auto;position:sticky;top:0;background:var(--bg);z-index:20;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;border:none;background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;cursor:pointer}
.tab.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* Sections & cards */
.section{padding:4px 14px 6px}
.section h2{font-size:19px;margin:12px 2px 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;cursor:pointer;display:flex}
.card.rupture{opacity:.55}
.thumb{width:108px;min-height:108px;flex:0 0 108px;display:flex;align-items:center;justify-content:center;font-size:46px}
.thumb.photo{overflow:hidden;background:#eceae3}
.thumb.photo img{width:100%;height:100%;min-height:108px;object-fit:cover;display:block}
.cbody{padding:11px 12px;flex:1;min-width:0}
.cbody h3{font-size:15.5px;line-height:1.25}
.cbody .desc{font-size:12.5px;color:var(--muted);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crow{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.price{font-weight:700;font-size:15px}
.addbtn{border:1.5px solid var(--accent);color:var(--accent);background:transparent;border-radius:999px;width:30px;height:30px;font-size:18px;font-weight:700;cursor:pointer;line-height:1}
.addbtn.in{background:var(--accent);color:#fff}
.badges{display:flex;gap:5px;margin-bottom:4px;flex-wrap:wrap}
.badge{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border-radius:6px;padding:2.5px 7px}
.b-pop{background:var(--gold-soft);color:var(--gold)}
.b-new{background:var(--accent-soft);color:var(--accent)}
.b-day{background:#fdeae5;color:var(--danger)}
.b-out{background:#eee;color:#777}
[data-theme="dark"] .b-day{background:#3a231e}
[data-theme="dark"] .b-out{background:#2b2620;color:#a49b8d}
.tagrow{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.tag{font-size:10.5px;border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:2px 6px}
.hidden-msg{padding:26px 14px;text-align:center;color:var(--muted);font-size:14px}

/* Bottom bar */
.bottombar{position:sticky;bottom:0;z-index:30;display:flex;gap:10px;padding:10px 14px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%)}
.bigbtn{flex:1;border:none;border-radius:14px;padding:14px;font-size:14.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.bb-cart{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(31,111,84,.35)}
.bb-waiter{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--ink);padding:14px 16px}
.cartcount{background:#fff;color:var(--accent);border-radius:999px;min-width:22px;height:22px;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:800;padding:0 5px}

/* Sheets / modals */
.overlay{position:fixed;inset:0;background:rgba(15,12,8,.5);z-index:40;display:none;align-items:flex-end;justify-content:center}
.overlay.open{display:flex}
.sheet{width:100%;max-width:430px;background:var(--bg);border-radius:22px 22px 0 0;max-height:88vh;overflow-y:auto;animation:up .22s ease}
@keyframes up{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}
.sheet-head{position:sticky;top:0;background:var(--bg);display:flex;justify-content:space-between;align-items:center;padding:14px 18px 8px;z-index:2}
.sheet-head h3{font-size:18px}
.x{border:none;background:var(--card);border:1px solid var(--line);border-radius:50%;width:32px;height:32px;font-size:15px;cursor:pointer;color:var(--ink)}
.sheet-body{padding:4px 18px 26px}
.hero-emoji{height:150px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:74px;margin-bottom:14px}
.hero-emoji.photo{overflow:hidden;background:#eceae3}
.hero-emoji.photo img{width:100%;height:100%;object-fit:cover;display:block}
.modal-price{font-size:20px;font-weight:800;margin:6px 0 8px}
.modal-desc{font-size:14px;color:var(--muted);line-height:1.55}
.subh{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.allergen-list{display:flex;flex-wrap:wrap;gap:6px}
.al{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:12.5px}
.al.warn{border-color:var(--danger);color:var(--danger);font-weight:600}
.pairing{display:flex;gap:12px;background:var(--gold-soft);border-radius:14px;padding:12px;align-items:center}
.pairing .pi{font-size:30px}
.pairing b{font-size:13.5px}
.pairing p{font-size:12px;color:var(--muted);margin-top:2px}
.upsell-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.upsell-row::-webkit-scrollbar{display:none}
.up{flex:0 0 118px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;cursor:pointer}
.up .ue{font-size:30px}
.up .un{font-size:12px;font-weight:600;margin-top:5px;line-height:1.2}
.up .up-price{font-size:12px;color:var(--muted);margin-top:3px}
.modal-add{width:100%;margin-top:20px;border:none;background:var(--accent);color:#fff;border-radius:14px;padding:15px;font-size:15px;font-weight:700;cursor:pointer}
.modal-add[disabled]{background:var(--line);color:var(--muted);cursor:not-allowed}

/* Filters sheet */
.fgroup{display:flex;flex-wrap:wrap;gap:8px}
.fopt{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;font-size:13.5px;cursor:pointer}
.fopt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.fopt.excl.on{border-color:var(--danger);background:#fdeae5;color:var(--danger)}
[data-theme="dark"] .fopt.excl.on{background:#3a231e}
.clearbtn{width:100%;margin-top:18px;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:12px;padding:12px;font-size:14px;cursor:pointer}

/* Cart */
.cline{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.cline .ce{font-size:26px}
.cline .cn{flex:1;min-width:0}
.cline .cn b{font-size:14px}
.cline .cn p{font-size:12px;color:var(--muted)}
.qty{display:flex;align-items:center;gap:9px}
.qty button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;width:26px;height:26px;cursor:pointer;font-weight:700}
.total{display:flex;justify-content:space-between;font-size:16px;font-weight:800;margin:14px 0 4px}
.note{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}

/* Toast */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:90px;background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:13.5px;font-weight:600;opacity:0;transition:.25s;z-index:60;pointer-events:none;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Lang sheet */
.langopt{display:flex;align-items:center;gap:12px;width:100%;border:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:15px;margin-bottom:8px;cursor:pointer;color:var(--ink)}
.langopt.on{border-color:var(--accent);background:var(--accent-soft);font-weight:700}
.langopt:disabled,.langsearch:disabled{opacity:.5;cursor:default}

/* « Toutes les langues du monde » : recherche + longue liste */
.langopts{margin-bottom:6px}
.langsearch{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:11px 14px;font-size:15px;color:var(--ink);margin:4px 0 10px;outline:none}
.langsearch:focus{border-color:var(--accent)}
.langmonde{max-height:44vh;overflow-y:auto}
.langopt-monde{flex-direction:column;align-items:flex-start;gap:2px}
.langopt-monde small{color:var(--muted);font-size:12px;font-weight:400}
.langmonde-vide{text-align:center;color:var(--muted);font-size:13.5px;padding:14px 0}
.langspinner{text-align:center;color:var(--muted);font-size:13.5px;padding:10px 0 2px}

/* Barre d'avancement de la premiere traduction d'une langue */
.langprog{padding:12px 2px 2px}
.langprog-txt{text-align:center;color:var(--ink);font-size:14px;font-weight:600;margin:0 0 9px}
.langprog-barre{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.langprog-barre i{display:block;height:100%;width:5%;border-radius:99px;background:var(--accent);transition:width .5s ease}
.langprog-note{text-align:center;color:var(--muted);font-size:12.5px;line-height:1.45;margin:10px 0 0}
.footer{padding:22px 0 30px;text-align:center;color:var(--muted);font-size:11.5px}
.footer b{color:var(--accent)}

/* Les reseaux du restaurant, en pied de carte : discret, jamais tape-a-l'oeil.
   Ce sont de simples liens — aucun script d'Instagram ou de Facebook n'est
   charge dans la page. */
.socials{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:20px 6px 2px;border-top:1px solid var(--line);margin-top:16px}
.socials:empty{display:none}
.soc-t{color:var(--muted);font-size:12px;font-weight:600;width:100%;text-align:center;margin-bottom:2px}
.soc{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:var(--card,transparent);color:var(--ink);font-size:12.5px;font-weight:600;text-decoration:none}
.soc:active{opacity:.65}
.soc-i{font-size:15px;line-height:1}
.soc-map{border-color:var(--accent);color:var(--accent)}

/* ================================================================ Table commune */

/* Un seul ecran visible a la fois (rejoindre / accueil / menu / commander). */
.screen{display:none}
.screen.on{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* En-tete vert des ecrans hors menu */
.jhead{background:linear-gradient(135deg,#2c3e35,#1f6f54 60%,#3f8f6f);color:#fff;padding:12px 16px 20px}
.jhead h1{font-size:23px;margin-top:14px;letter-spacing:.3px}
.jhead .sub{font-size:13px;opacity:.88;margin-top:4px}
.toprow{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pill{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600}
.jbody{padding:14px 14px calc(24px + env(safe-area-inset-bottom))}

.cardbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:12px}
.cardbox.center{text-align:center}
.cardbox .gros{font-size:40px;line-height:1.2}
.cardbox b{font-size:15.5px;display:block}
.wholine{font-size:13.5px;color:var(--muted);margin-top:5px}
.field{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px;padding:13px 14px;font-size:16px;outline:none;margin-bottom:12px}
.field:focus{border-color:var(--accent)}
.bigbtn.wide{width:100%}
/* Raccourci vers le paiement, sur l'ecran Commander : present mais moins fort
   que le bouton d'envoi en cuisine, pour ne pas voler la vedette a la commande. */
.bb-pay{margin-top:9px;background:var(--card);color:var(--accent);border:1.5px solid var(--accent)}
/* Cache un element sans casser la mise en page des boutons qui suivent. */
.cache{display:none !important}
.ghostbtn{width:100%;margin-top:9px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:12px;padding:12px;font-size:13.5px;font-weight:600;cursor:pointer}

/* Bandeau "table commune" */
.groupcard{position:relative;border-color:var(--accent);background:var(--accent-soft)}
.groupcard .gx{position:absolute;top:8px;right:8px;border:none;background:transparent;color:var(--muted);font-size:13px;cursor:pointer;padding:4px}
.gtop{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.avatars{display:flex}
.av{width:34px;height:34px;border-radius:50%;border:2px solid var(--card);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-left:-9px}
.av:first-child{margin-left:0}
.livedot{width:9px;height:9px;border-radius:50%;background:#3bb273;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.groupcard b{font-size:14px}
.gnote{text-align:left;margin-top:6px;color:var(--muted)}

/* Les 4 grosses tuiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 12px;font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px}
.tile .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px}
.ic-menu{background:var(--accent-soft)}
.ic-order{background:var(--gold-soft)}
.ic-pay{background:#e6eef7}
.ic-review{background:#fdeae5}
[data-theme="dark"] .ic-pay{background:#1d2733}
[data-theme="dark"] .ic-review{background:#3a231e}
.tile.off{opacity:.55}
.badge-count{position:absolute;top:10px;right:12px;background:var(--danger);color:#fff;border-radius:999px;min-width:20px;height:20px;font-size:11px;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 6px}
.badge-count.on{display:flex}

.banner{margin-top:12px;background:var(--gold-soft);border:1px solid var(--gold);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--ink);display:flex;gap:10px;align-items:center;cursor:pointer}
.banner .be{font-size:26px}
.banner b{display:block;font-size:13.5px}
.banner span{font-size:12px;color:var(--muted)}

/* Le bandeau « Ma commande » : meme forme que le plat du jour, mais aux
   couleurs de l'accent pour qu'on ne confonde pas une suggestion avec un
   suivi. Sur la carte il porte ses propres marges : il vit hors du bloc
   d'accueil et doit s'aligner sur les autres rangees. */
.banner.cmd{background:var(--accent-soft);border-color:var(--accent)}
.banner.cmd .cmd-go{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap}
#cmdBannerMenu{margin:0 14px 12px}
/* Le compteur se pose sur ce bouton-la : sans reperage, il partirait se coller
   dans un coin de la page. */
.bb-recap{position:relative}

/* Appeler le serveur : la feuille de choix rapide. */
.ap-liste{display:flex;flex-direction:column;gap:8px}
.ap-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer}
.ap-emo{font-size:22px;width:40px;height:40px;border-radius:12px;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ap-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ap-txt b{font-size:14.5px;color:var(--ink)}
.ap-txt i{font-style:normal;font-size:12px;color:var(--muted)}
.ap-go{font-size:20px;color:var(--muted)}
.ap-sep{margin:16px 0 8px;font-size:12px;font-weight:700;color:var(--muted)}
.ap-dm{display:flex;flex-wrap:wrap;gap:8px}
.ap-chip{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.ap-chip.deja{opacity:.5}
.ap-chip:disabled{cursor:default}
.ap-note{margin-top:14px;font-size:12px;color:var(--muted);text-align:center}

/* En-tete des sous-ecrans */
.backhead{display:flex;align-items:center;gap:12px;padding:14px 14px 10px;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
.backbtn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:50%;width:34px;height:34px;font-size:16px;cursor:pointer;flex:0 0 auto}
.backhead h2{font-size:18px}
.hsub{font-size:12px;color:var(--muted);margin-top:2px}

/* Commande de la table */
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.row:last-child{border-bottom:none}
.row .who{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.row b{white-space:nowrap}
.qline{display:flex;align-items:center;gap:6px}
.attente{color:var(--gold);font-weight:800}
.totalrow{display:flex;justify-content:space-between;font-size:16px;font-weight:800;margin-top:12px;padding-top:12px;border-top:2px solid var(--line)}

/* Le recapitulatif d'avant l'envoi.
   MES lignes sont en grand, avec le multiplicateur et la croix. Celles qui sont
   deja parties, et celles des voisins, restent grises et sans bouton : on ne
   touche pas a la commande d'un autre, ni a un plat deja en cuisine. */
.mline{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)}
.mline:last-of-type{border-bottom:none}
.mn{font-size:14px;font-weight:700;line-height:1.35}
.mu{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.mp{font-size:14px;white-space:nowrap}
.mx{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:9px;width:30px;height:30px;font-size:13px;cursor:pointer}
.mx:hover{border-color:var(--danger);color:var(--danger)}
.totalrow.mien{font-size:15px;margin-top:10px;padding-top:10px;border-top-width:1px}
.subh.gris{color:var(--muted);opacity:.85}
.row.fige{opacity:.72}
.row.fige b{font-weight:600}
/* La porte du rattrapage : nette, mais jamais aussi verte que « Envoyer ». */
.addbtn{width:100%;margin-bottom:9px;border:1.5px solid var(--accent);background:var(--card);color:var(--accent);border-radius:14px;padding:13px;font-size:14.5px;font-weight:700;cursor:pointer}
#addMoreNote{margin:0 0 10px}

/* Multiplicateur − n + sur les plats */
.step{display:flex;align-items:center;gap:7px}
.step button{border:1.5px solid var(--accent);color:var(--accent);background:transparent;border-radius:999px;width:29px;height:29px;font-size:17px;font-weight:700;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.step button.plein{background:var(--accent);color:#fff}
.step .val{min-width:16px;text-align:center;font-weight:800;color:var(--accent);font-size:15px}

/* Avis du client */
.rv-q{font-size:15px;font-weight:700;text-align:center;margin:10px 0 4px}
.stars{display:flex;justify-content:center;gap:6px;margin:6px 0 2px}
.star{border:none;background:transparent;color:var(--line);font-size:36px;line-height:1;padding:2px 4px;cursor:pointer;transition:transform .12s,color .12s}
.star.on{color:var(--gold)}
.star:active{transform:scale(1.18)}
.rv-lbl{text-align:center;font-size:13px;font-weight:700;color:var(--muted);min-height:19px}
.rv-txt{resize:vertical;font-family:inherit;line-height:1.5}
.rv-fin{text-align:center;padding:6px 0 2px}
.rv-emo{font-size:52px;margin-bottom:8px}
.rv-msg{font-size:14px;color:var(--muted);line-height:1.6}
.rv-google{display:block;text-align:center;text-decoration:none}

/* Paiement */
.py-load{text-align:center;color:var(--muted);font-size:14px;padding:26px 0}
.py-msg{text-align:center;font-size:14.5px;line-height:1.6;padding:18px 6px}
.py-recap{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:4px}
.py-l{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;padding:3px 0;color:var(--muted)}
.py-l b{color:var(--ink);white-space:nowrap}
.py-reste{font-size:16px;font-weight:800;color:var(--ink);margin-top:6px;padding-top:9px;border-top:2px solid var(--line)}
.py-reste b{color:var(--accent);font-size:19px}

.py-modes{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.py-mode{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px 11px;text-align:left;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;gap:3px}
.py-mode:active{border-color:var(--accent)}
.py-mode-t{font-size:14.5px;font-weight:700}
.py-mode-s{font-size:11.5px;color:var(--muted);line-height:1.35}
.py-mode-m{font-size:15px;font-weight:800;color:var(--accent);margin-top:3px}

.py-parts{display:flex;align-items:center;justify-content:center;gap:18px;margin:4px 0 14px}
.py-parts b{font-size:30px;font-weight:800;min-width:44px;text-align:center}
.py-pm{border:1.5px solid var(--accent);color:var(--accent);background:transparent;border-radius:999px;width:42px;height:42px;font-size:22px;font-weight:700;cursor:pointer;line-height:1}
.py-montant{text-align:center;font-size:22px;font-weight:800}

.py-stripe{margin:14px 0 4px;min-height:60px}
.py-secure{text-align:center;font-size:12px;color:var(--muted);margin-top:14px}
.py-test{text-align:center;font-size:12px;color:var(--gold);line-height:1.5;margin-top:8px}
.py-err{text-align:center;font-size:13px;color:#c0392b;line-height:1.5;min-height:18px;margin-top:8px}
.py-suite{font-size:13px;color:var(--muted);margin:8px 0 14px}
/* Quand il reste une part a payer, la phrase ne doit pas passer inapercue :
   c'est elle qui explique pourquoi un bouton "Payer le reste" est propose. */
.py-suite-reste{font-size:15px;font-weight:700;color:var(--accent)}
.py-note{font-size:12px;color:var(--muted);text-align:center;line-height:1.45;margin-top:10px}

/* Le pourboire. Deux gros boutons pour la question, quatre montants ronds
   ensuite : le doigt doit trouver sans viser. */
.py-tip-ouinon{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.py-tips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 10px}
.py-tip{border:1.5px solid var(--accent);color:var(--accent);background:transparent;border-radius:14px;padding:16px 8px;font-size:20px;font-weight:800;cursor:pointer;font-family:inherit}
.py-tip:active{background:var(--accent);color:#fff}
.py-tip-autre{margin-bottom:6px}
.py-tip-l b{color:var(--accent)}

/* Page 404 */
.vide{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}
.vide .gros{font-size:56px}
.vide h1{font-size:22px}
.vide p{font-size:14px;color:var(--muted);line-height:1.6}

/* Reprise de session : on masque une fraction de seconde l'ecran "rejoindre"
   le temps de savoir si le telephone retrouve sa place a la table. */
html[data-reprise] #s-join{visibility:hidden}

/* Suggestion "ajouter a l'ecran d'accueil" : une barre discrete en bas, jamais
   un ecran bloquant. Elle glisse, elle se ferme, elle ne revient plus. */
.pwatip{position:fixed;left:50%;bottom:14px;transform:translateX(-50%) translateY(140%);width:min(410px,calc(100% - 20px));
  display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:11px 12px;box-shadow:0 8px 26px rgba(30,25,10,.18);z-index:70;transition:transform .3s ease}
.pwatip.show{transform:translateX(-50%) translateY(0)}
.pwatip-ico{border-radius:10px;flex:0 0 auto}
.pwatip-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pwatip-txt b{font-size:13px;line-height:1.25}
.pwatip-txt span{font-size:11.5px;color:var(--muted);line-height:1.3}
.pwatip-go{flex:0 0 auto;border:none;background:var(--accent);color:#fff;border-radius:999px;
  padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer}
.pwatip-x{flex:0 0 auto;border:none;background:transparent;color:var(--muted);font-size:14px;cursor:pointer;padding:6px}

/* Suggestions apéritif / digestif : une liste qu'on tape du pouce, jamais un mur.
   Chaque ligne est un article ; le prix reste lisible sans qu'on le cherche. */
.up-intro{font-size:14px;color:var(--muted);line-height:1.55;margin:2px 0 12px;text-align:center}
/* Premier temps : la question seule, et deux boutons assez gros pour etre
   tapes du pouce sans regarder, meme en terrasse. */
.up-q{font-size:19px;font-weight:800;line-height:1.35;text-align:center;margin:6px 0 18px}
.up-ouinon{display:flex;gap:11px}
.up-gros{flex:1;border-radius:16px;padding:20px 10px;font:inherit;font-size:19px;font-weight:800;cursor:pointer;line-height:1}
.up-oui{border:none;background:var(--accent);color:#fff}
.up-non{border:1.5px solid var(--line);background:transparent;color:var(--muted)}
.up-gros:active{transform:scale(.98)}
/* Deuxieme temps : la liste, avec le meme multiplicateur − n + que le menu.
   Une tablee de quatre commande deux pastis et deux kirs en un seul envoi. */
.up-liste{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.up-art{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:11px 13px;font:inherit;color:inherit}
.up-art.choisi{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.up-art .ae{font-size:26px;flex:0 0 auto;line-height:1}
.up-art .an{flex:1;min-width:0;font-size:14.5px;font-weight:700;line-height:1.25}
.up-art .ap{flex:0 0 auto;font-size:14.5px;font-weight:800;color:var(--accent)}
.up-art .step{flex:0 0 auto}
#upGo{margin-top:14px}
#upGo[disabled]{opacity:.45;cursor:default}
.up-recaps{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:2px 0 14px}
.up-recap{font-size:12.5px;font-weight:700;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px}
.up-legal{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.4;margin-top:14px;opacity:.85}
.up-ok{text-align:center;padding:10px 0 2px}
.up-ok .rv-emo{font-size:46px}

/* L'offre spéciale de la maison. Le prix plein reste visible, barre, a cote du
   prix remise : le client voit ce qu'il economise, il ne le devine pas. */
.of-accroche{font-size:16.5px;font-weight:800;line-height:1.35;text-align:center;margin:4px 0 12px}
.of-combo{font-size:13px;line-height:1.4;text-align:center;margin:-6px 0 14px;color:var(--muted);
  background:var(--accent-soft);border-radius:12px;padding:9px 11px}
.of-combo b{color:var(--accent)}
.of-groupe+.of-groupe{margin-top:14px}
.of-h{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 7px}
#ofListes{max-height:44vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.of-art{margin-bottom:8px}
.of-art .ap{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.barre{font-size:12px;font-weight:600;color:var(--muted);opacity:.8}
.of-prix{font-size:15px;font-weight:800;color:var(--accent)}
.of-eco{display:block;font-size:11.5px;font-weight:700;opacity:.9;margin-top:2px}
#ofGo{margin-top:14px}
#ofGo[disabled]{opacity:.45;cursor:default}
/* Écran 1 : la phrase qui constate ce qui manque a la table, avant l'accroche. */
.of-manque{font-size:13.5px;line-height:1.4;text-align:center;color:var(--muted);margin:2px 0 6px}
/* Écran 3 : le recapitulatif complet, juste avant que la commande parte. */
.of-recap{max-height:40vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:4px 12px 12px}
.of-recap .row:first-child{border-top:none}
.of-eco-total{font-size:13.5px;font-weight:800;text-align:center;color:var(--accent);margin:10px 0 2px}
/* Le prix barre sur l'addition et le recapitulatif de commande. */
.remise{font-size:11px;font-weight:800;color:var(--accent);margin-left:3px}
.py-remise span i{display:block;font-style:normal;font-size:11px;color:var(--accent);font-weight:700}
.py-eco b{color:var(--accent)}

/* ==================== OPTIONS DE PLAT, NOTE LIBRE, FUSION ====================
   La feuille de choix qui s'ouvre sur un plat a cuisson, retraits ou
   supplements. Rien n'y est decoratif : la cuisson doit sauter aux yeux, le
   prix d'un supplement doit se lire avant d'etre choisi, et l'avertissement
   sur les allergies graves ne doit jamais passer inapercu. */

.opt-plat{display:flex;align-items:center;gap:10px;padding:2px 0 14px;border-bottom:1px solid var(--line)}
.opt-e{font-size:28px;line-height:1}
.opt-n b{display:block;font-size:15.5px;font-family:Georgia,"Times New Roman",serif}
.opt-n i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted)}

.opt-g{padding:14px 0;border-bottom:1px solid var(--line)}
.opt-g:last-of-type{border-bottom:none}
.opt-h{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.opt-req{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.03em;
  text-transform:none;color:var(--danger);background:rgba(179,67,47,.1);
  border-radius:999px;padding:2px 8px}
.opt-gratuit{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.03em;
  text-transform:none;color:var(--accent);background:var(--accent-soft);
  border-radius:999px;padding:2px 8px}

.opt-vs{display:flex;flex-direction:column;gap:7px}
.opt-v{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:12px;padding:11px 12px;font-size:14.5px;font-weight:600}
.opt-v.on{border-color:var(--accent);background:var(--accent-soft)}
.opt-case{flex:0 0 auto;width:21px;height:21px;border:1.5px solid var(--line);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;
  color:var(--accent);background:var(--card)}
.opt-v.rond .opt-case{border-radius:999px}
.opt-v.on .opt-case{border-color:var(--accent)}
.opt-lbl{flex:1}
.opt-lbl i{font-style:normal;font-weight:800;color:var(--accent);margin-left:4px}

/* Un groupe obligatoire encore vide, apres une tentative d'ajout. */
.opt-g.manque{background:rgba(179,67,47,.06);border-radius:12px;padding:12px 10px;
  box-shadow:inset 0 0 0 1.5px rgba(179,67,47,.35)}
.opt-stop{margin-top:14px;font-size:13.5px;font-weight:700;color:var(--danger);text-align:center}

#opQui,#opNote{width:100%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:12px;padding:11px 12px;font-size:14.5px;font-family:inherit;resize:none}
#opQui:focus,#opNote:focus{outline:none;border-color:var(--accent)}
.opt-hint{margin-top:6px;font-size:11.5px;color:var(--muted);line-height:1.4}
.opt-hint.alerte{color:var(--danger);font-weight:600}

.opt-qte{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 0 2px;font-size:13.5px;font-weight:700}
.modal-add.gris{background:var(--line);color:var(--muted)}

/* Le detail d'une ligne, au recapitulatif comme sur les lignes figees. */
.lo-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.lo-row span{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap}
/* La cuisson, en premier et bien lisible : c'est elle qui fait renvoyer une assiette. */
.lo-cui{font-size:11.5px!important;text-transform:uppercase;letter-spacing:.04em;
  color:#fff;background:var(--danger)}
.lo-ret{color:var(--muted);background:var(--line)}
.lo-sup{color:var(--accent);background:var(--accent-soft)}
.lo-qui{color:var(--gold);background:var(--gold-soft)}
.lo-note{margin-top:5px;font-size:12px;font-weight:600;line-height:1.4;color:var(--ink);
  background:var(--gold-soft);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:5px 8px}
.lo-edit{border:none;background:transparent;cursor:pointer;font-size:12px;padding:0 2px;
  opacity:.6;vertical-align:middle}
.lo-edit:hover{opacity:1}
.mline.avec-opt{align-items:start}
.mline.avec-opt .qty,.mline.avec-opt .mp,.mline.avec-opt .mx{margin-top:2px}

/* La fusion des notes, sur l'ecran Payer. */
.fu-open{width:100%;margin:12px 0 2px;border:1.5px solid var(--accent);background:var(--card);
  color:var(--accent);border-radius:14px;padding:13px;font-size:14.5px;font-weight:700;cursor:pointer}
.fu-verrou{margin:12px 0 2px;border-radius:14px;padding:13px 14px;
  background:var(--accent-soft);border:1.5px solid var(--accent)}
.fu-verrou b{display:block;font-size:15px;color:var(--accent)}
.fu-verrou span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.fu-porte{margin:12px 0 2px;border-radius:14px;padding:13px 14px;
  background:var(--gold-soft);border:1.5px solid var(--gold)}
.fu-porte b{display:block;font-size:14.5px;color:var(--ink)}
.fu-undo{margin-top:8px;border:1px solid var(--line);background:var(--card);color:var(--muted);
  border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:700;cursor:pointer}
.fu-undo:hover{border-color:var(--danger);color:var(--danger)}

.fu-intro{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:12px}
.fu-list{display:flex;flex-direction:column;gap:8px}
.fu-c{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:12px;padding:10px 12px}
.fu-c.on{border-color:var(--accent);background:var(--accent-soft)}
.fu-c.off{opacity:.5;cursor:not-allowed}
.fu-n{flex:1;min-width:0}
.fu-n b{display:block;font-size:14.5px}
.fu-n i{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.fu-m{font-size:14px;font-weight:800;white-space:nowrap}

/* Les demandes gratuites (pain, carafe…). Elles ne ressemblent pas a un plat :
   pas de prix, pas de photo, pas de − / + — une vignette en pointilles et un
   seul bouton « Demander ». */
.dm-note{margin:-4px 0 10px;font-size:12.5px;color:var(--muted)}
.dm-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.dm-item{display:flex;flex-direction:column;gap:8px;padding:10px 12px;
  background:var(--card);border:1.5px dashed var(--line);border-radius:14px}
.dm-item.deja{border-style:solid;border-color:var(--gold);background:var(--gold-soft)}
.dm-haut{display:flex;align-items:center;gap:8px;min-width:0}
.dm-emo{flex:none;font-size:22px}
.dm-nom{flex:1;min-width:0;font-size:13.5px;font-weight:700;line-height:1.25}
.dm-nom i{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--accent)}
.dm-btn{width:100%;border:1.5px solid var(--accent);background:var(--card);color:var(--accent);
  border-radius:999px;padding:7px 10px;font-size:13px;font-weight:800;cursor:pointer}
.dm-item.deja .dm-btn{border-color:var(--gold);background:transparent;color:var(--ink);cursor:default}