/* =====================================================================
   APEX BURGER · PRISE DE COMMANDE
   ---------------------------------------------------------------------
   Même contrainte que le reste du site : tout ce qui bouge n'anime que
   « transform » et « opacity ». Les variables de couleur, de rayon et de
   police viennent de la feuille principale — rien n'est redéfini ici, la
   commande doit rester dans le thème même si le thème change.
   ===================================================================== */

/* ============================ 1 · LE CHOIX DU MODE ============================ */
#modeSheet .sheet__pn{ background:linear-gradient(178deg,#fdf9f2 0%,#f2e8d8 100%); }

.cmo{ padding:8px var(--pad) 26px; }
.cmo__intro{ text-align:center; padding-top:6px }
.cmo__orn{ display:block; width:44px; height:44px; margin:0 auto 14px; color:var(--ember) }
.cmo__orn svg{ width:100%; height:100% }
.cmo__q{
  font-family:var(--disp); font-weight:600; font-size:clamp(23px,6.6vw,29px);
  line-height:1.12; color:var(--txt-dark); text-transform:uppercase;
}
.cmo__sub{ margin-top:9px; font-size:14.5px; line-height:1.65; color:var(--txt-soft); max-width:32em; margin-inline:auto }

/* l'état du service, repris de la pastille « ouvert » du site */
.cmo__etat{
  display:inline-flex; align-items:center; gap:7px; margin:16px auto 0;
  padding:6px 13px; border-radius:999px; font-size:12.5px; letter-spacing:.05em;
  background:rgba(46,125,64,.12); color:#2e7d40;
}
.cmo__etat i{ width:6px; height:6px; border-radius:50%; background:currentColor; font-style:normal; flex:0 0 auto }
.cmo__etat.is-closed{ background:rgba(140,40,40,.1); color:#a03535 }

.cmo__grid{ display:grid; gap:11px; margin-top:24px }
.cmo__c{
  position:relative; overflow:hidden; text-align:left;
  display:flex; align-items:center; gap:15px;
  padding:19px 18px; border-radius:17px;
  background:#fff; border:1px solid var(--line-l);
  transition:transform .22s cubic-bezier(.3,.9,.3,1), border-color .22s ease, box-shadow .22s ease;
}
.cmo__c:active{ transform:scale(.975) }
.cmo__c:hover,.cmo__c:focus-visible{ border-color:rgba(189,64,15,.45); box-shadow:0 16px 34px -20px rgba(189,64,15,.9) }
.cmo__ic{
  flex:0 0 auto; width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(140deg,rgba(226,83,31,.14),rgba(224,161,60,.16));
}
.cmo__ic svg{ width:25px; height:25px; stroke:var(--ember); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.cmo__x{ flex:1 1 auto; min-width:0 }
.cmo__t{ font-family:var(--disp); font-weight:600; font-size:19px; line-height:1.15; color:var(--txt-dark); text-transform:uppercase; letter-spacing:.02em }
.cmo__d{ margin-top:4px; font-size:13.5px; line-height:1.5; color:var(--txt-soft) }
.cmo__m{ margin-top:7px; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--brass); font-family:var(--disp); font-weight:600 }
.cmo__go{ flex:0 0 auto; width:16px; height:16px; stroke:var(--txt-soft); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.5 }
.cmo__foot{ margin-top:20px; text-align:center; font-size:12.5px; line-height:1.6; color:rgba(35,26,22,.5) }
.cmo__reprendre{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  margin-top:13px; padding:13px 16px; border-radius:13px;
  border:1px dashed rgba(189,64,15,.4); background:rgba(189,64,15,.05);
  font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ember);
}

/* ============================ 2 · LA FEUILLE DE COMMANDE ============================ */
#cmdSheet .sheet__pn--full{
  background:linear-gradient(178deg,#fdf9f2 0%,#f2e8d8 100%);
}
.cmd{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto }

/* -------- en-tête -------- */
.chd{ display:flex; align-items:center; gap:12px; padding:14px var(--pad) 12px; flex:0 0 auto; border-bottom:1px solid var(--line-l) }
.chd__b{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(35,26,22,.07); flex:0 0 auto;
}
.chd__b svg{ width:16px; height:16px; stroke:var(--txt-dark); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.chd__t{ flex:1 1 auto; min-width:0 }
.chd__k{ font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--brass) }
.chd__ttl{ font-family:var(--disp); font-weight:600; font-size:22px; line-height:1.1; color:var(--txt-dark); margin-top:2px; text-transform:uppercase }

/* la pastille de mode, cliquable pour basculer livraison / emporter */
.cmode{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  padding:5px 11px 5px 9px; border-radius:999px;
  background:rgba(189,64,15,.1); border:1px solid rgba(189,64,15,.25);
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  font-family:var(--disp); font-weight:600; color:#a8410f;
}
.cmode svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.cmode b{ font-weight:600 }
.cmode em{ font-style:normal; opacity:.6; font-size:10.5px }

/* -------- fil des étapes -------- */
.cstep{ display:flex; align-items:center; gap:6px; padding:11px var(--pad) 0; flex:0 0 auto }
.cstep__i{ display:flex; align-items:center; gap:7px; flex:1 1 0; min-width:0 }
.cstep__n{
  width:21px; height:21px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-family:var(--disp); font-weight:600; font-size:11px;
  background:rgba(35,26,22,.09); color:rgba(35,26,22,.45);
  transition:background .3s ease, color .3s ease;
}
.cstep__l{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(35,26,22,.42); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cstep__i.is-on .cstep__n{ background:var(--ember); color:#fff6ee }
.cstep__i.is-on .cstep__l{ color:var(--txt-dark) }
.cstep__i.is-done .cstep__n{ background:rgba(46,125,64,.16); color:#2e7d40 }
.cstep__bar{ flex:0 0 auto; width:14px; height:1px; background:rgba(35,26,22,.16) }

/* -------- corps défilant -------- */
.cbody{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; padding:0 0 20px;
}
.cpage{ display:none; padding:0 var(--pad) }
.cpage.is-on{ display:block }

/* ============================ 3 · LE CATALOGUE ============================ */
/* onglets collants */
.cnav{
  position:sticky; top:0; z-index:6; display:flex; gap:5px;
  padding:11px var(--pad) 11px; overflow-x:auto; scrollbar-width:none;
  background:linear-gradient(180deg,#fdf9f2 72%,rgba(253,249,242,0));
  border-bottom:1px solid var(--line-l);
}
.cnav::-webkit-scrollbar{ display:none }
.cnav__b{
  flex:0 0 auto; padding:8px 14px; border-radius:999px; white-space:nowrap;
  font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-soft); border:1px solid transparent;
  transition:color .25s ease, background .25s ease, border-color .25s ease;
}
.cnav__b.is-on{ color:#fff6ee; background:var(--ember); border-color:var(--ember) }

.csec{ padding-top:24px; scroll-margin-top:56px }
.csec__k{ font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--brass) }
.csec__t{ font-family:var(--disp); font-weight:600; font-size:26px; line-height:1.08; color:var(--txt-dark); margin-top:3px; text-transform:uppercase }
.csec__d{ margin-top:6px; font-size:13.5px; line-height:1.6; color:var(--txt-soft); max-width:34em }
.csec__rule{ height:1px; background:var(--line-l); margin-top:15px }

.cit{
  position:relative; display:flex; gap:14px; align-items:stretch;
  width:100%; text-align:left; padding:15px 0; border-bottom:1px solid rgba(35,26,22,.09);
  transition:transform .2s cubic-bezier(.3,.9,.3,1), opacity .25s ease;
}
.cit:active{ transform:scale(.988) }
.cit__x{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column }
.cit__t{ font-family:var(--disp); font-weight:600; font-size:17px; line-height:1.22; color:var(--txt-dark) }
.cit__d{ margin-top:4px; font-size:13px; line-height:1.52; color:var(--txt-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.cit__f{ margin-top:auto; padding-top:9px; display:flex; align-items:center; gap:9px; flex-wrap:wrap }
.cit__p{ font-family:var(--disp); font-weight:600; font-size:16.5px; color:var(--ember) }
.cit__opt{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(35,26,22,.42) }
.cit__tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px }
.ctag{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--disp); font-weight:600; color:var(--brass) }
.ctag--veg{ color:#4a7a4f }
.ctag--hot{ color:#c0361a }
.ctag--best{ color:var(--ember) }

/* la vignette : image quand elle existe, monogramme gravé sinon */
.cit__ph{
  position:relative; flex:0 0 auto; width:92px; height:92px; border-radius:14px; overflow:hidden;
  background:linear-gradient(150deg,#efe4d2,#e2d3ba); border:1px solid rgba(35,26,22,.08);
}
.cit__ph img{ width:100%; height:100%; object-fit:cover; display:block }
.cit__ph--vide{ display:grid; place-items:center }
.cit__ph--vide svg{ width:34px; height:34px; opacity:.3; color:var(--txt-dark) }
.cit__add{
  position:absolute; right:6px; bottom:6px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:var(--ember); color:#fff6ee;
  box-shadow:0 8px 18px -8px rgba(226,83,31,.95);
  transition:transform .2s cubic-bezier(.3,.9,.3,1);
}
.cit:active .cit__add{ transform:scale(.9) }
.cit__add svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round }
.cit__qte{
  position:absolute; left:6px; top:6px; min-width:24px; height:24px; padding:0 7px; border-radius:999px;
  display:grid; place-items:center; background:rgba(11,8,7,.82); color:var(--cream);
  font-family:var(--disp); font-weight:600; font-size:12px;
}

/* épuisé : l'article reste lisible mais devient inerte */
.cit.is-hs{ opacity:.42; pointer-events:none }
.cit.is-hs .cit__p{ color:var(--txt-soft); text-decoration:line-through }
.cit.is-hs .cit__add{ display:none }
.cit__hs{
  display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:4px 9px; border-radius:999px;
  background:rgba(140,40,40,.1); color:#a03535;
  font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
}
/* hors service (menu du midi commandé le soir) : commandable en précommande */
.cit.is-hors .cit__p{ opacity:.6 }
.cit__hors{
  display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:4px 9px; border-radius:999px;
  background:rgba(224,161,60,.16); color:#8a6118;
  font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
}

/* bandeau d'alerte en haut du catalogue */
.cnote{
  display:flex; gap:11px; align-items:flex-start; margin-top:18px; padding:14px 15px; border-radius:14px;
  background:rgba(224,161,60,.12); border:1px solid rgba(224,161,60,.32);
}
.cnote svg{ flex:0 0 auto; width:17px; height:17px; margin-top:1px; stroke:#8a6118; fill:none; stroke-width:1.7; stroke-linecap:round }
.cnote p{ font-size:13px; line-height:1.55; color:#6b4d12 }
.cnote--rouge{ background:rgba(140,40,40,.08); border-color:rgba(140,40,40,.25) }
.cnote--rouge svg{ stroke:#a03535 }
.cnote--rouge p{ color:#8c3030 }

/* ============================ 4 · LA FICHE ARTICLE ============================ */
#artSheet{ z-index:140 }
#artSheet .sheet__pn{ background:linear-gradient(178deg,#fdf9f2 0%,#f2e8d8 100%); max-height:94vh; max-height:94svh; height:94vh; height:94svh }
.art{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto }
.art__ph{ position:relative; flex:0 0 auto; height:190px; overflow:hidden; background:linear-gradient(150deg,#efe4d2,#e2d3ba) }
.art__ph img{ width:100%; height:100%; object-fit:cover; display:block }
.art__ph--vide{ display:grid; place-items:center; height:120px }
.art__ph--vide svg{ width:56px; height:56px; opacity:.24; color:var(--txt-dark) }
.art__x{
  position:absolute; right:12px; top:12px; z-index:2; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:rgba(253,249,242,.92); box-shadow:0 6px 16px -6px rgba(0,0,0,.5);
}
.art__x svg{ width:15px; height:15px; stroke:var(--txt-dark); fill:none; stroke-width:1.9; stroke-linecap:round }
.art__b{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:20px var(--pad) 22px }
.art__t{ font-family:var(--disp); font-weight:600; font-size:25px; line-height:1.1; color:var(--txt-dark); text-transform:uppercase }
.art__d{ margin-top:8px; font-size:14px; line-height:1.62; color:var(--txt-soft) }
.art__p{ margin-top:11px; font-family:var(--disp); font-weight:600; font-size:20px; color:var(--ember) }

.grp{ margin-top:26px }
.grp__h{ display:flex; align-items:baseline; gap:10px }
.grp__t{ font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-dark) }
.grp__r{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:999px;
  background:rgba(35,26,22,.07); color:rgba(35,26,22,.5); font-family:var(--disp); font-weight:600;
}
.grp__r.is-req{ background:rgba(189,64,15,.12); color:#a8410f }
.grp__l{ margin-top:10px; display:grid; gap:7px }

.chx{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:13px 14px; border-radius:13px; background:#fff; border:1px solid var(--line-l);
  transition:transform .18s cubic-bezier(.3,.9,.3,1), border-color .18s ease, box-shadow .18s ease;
}
.chx:active{ transform:scale(.985) }
.chx.is-on{ border-color:var(--ember); box-shadow:0 10px 24px -18px rgba(226,83,31,1) }
.chx__m{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:1.5px solid rgba(35,26,22,.28);
  display:grid; place-items:center; position:relative;
}
.chx__m--carre{ border-radius:6px }
.chx__m::after{
  content:""; width:10px; height:10px; border-radius:50%; background:var(--ember);
  transform:scale(0); transition:transform .2s cubic-bezier(.3,.9,.3,1);
}
.chx__m--carre::after{ border-radius:3px }
.chx.is-on .chx__m{ border-color:var(--ember) }
.chx.is-on .chx__m::after{ transform:scale(1) }
.chx__n{ flex:1 1 auto; min-width:0; font-size:14.5px; line-height:1.4; color:var(--txt-dark) }
.chx__s{ flex:0 0 auto; font-family:var(--disp); font-weight:600; font-size:13.5px; color:var(--ember) }
.chx__c{
  flex:0 0 auto; min-width:22px; text-align:center; font-family:var(--disp); font-weight:600;
  font-size:13px; color:var(--txt-dark);
}
.chx.is-off{ opacity:.4; pointer-events:none }
.chx__hs{ flex:0 0 auto; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#a03535; font-family:var(--disp); font-weight:600 }
/* compteur des groupes répétables (la Tablée) */
.chx__pm{ display:flex; align-items:center; gap:8px; flex:0 0 auto }
.chx__pm button{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-l); background:#fff;
}
.chx__pm button svg{ width:12px; height:12px; stroke:var(--txt-dark); fill:none; stroke-width:2.2; stroke-linecap:round }
.chx__pm button:disabled{ opacity:.3 }

/* « note » est deja pris par la feuille du site, en display:flex :
   le libelle et la zone de saisie se retrouvaient cote a cote. */
.artnote{ margin-top:26px }
.artnote textarea{
  width:100%; margin-top:10px; padding:13px 14px; border-radius:13px; resize:none;
  background:#fff; border:1px solid var(--line-l); color:var(--txt-dark);
  font-family:var(--sans); font-size:14.5px; line-height:1.5;
}
.artnote textarea:focus{ outline:none; border-color:rgba(189,64,15,.5) }

/* pied d'article : quantité + ajout */
.art__f{
  flex:0 0 auto; display:flex; align-items:center; gap:11px;
  padding:12px var(--pad) calc(var(--sab) + 14px);
  border-top:1px solid var(--line-l); background:rgba(253,249,242,.94);
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .art__f{ background:rgba(253,249,242,.8); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px) }
}
.qte{ flex:0 0 auto; display:flex; align-items:center; gap:3px; padding:4px; border-radius:13px; border:1px solid var(--line-l); background:#fff }
.qte button{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center }
.qte button svg{ width:14px; height:14px; stroke:var(--txt-dark); fill:none; stroke-width:2.2; stroke-linecap:round }
.qte button:disabled{ opacity:.28 }
.qte b{ min-width:26px; text-align:center; font-family:var(--disp); font-weight:600; font-size:16px; color:var(--txt-dark) }
.art__f .btn{ flex:1 1 auto; padding:15px 16px; font-size:12.5px; gap:8px }
.art__f .btn b{ font-weight:600 }

/* ============================ 5 · LE PANIER ============================ */
.pan{ padding-top:20px }
.pan__l{ display:flex; gap:13px; padding:15px 0; border-bottom:1px solid rgba(35,26,22,.09) }
.pan__x{ flex:1 1 auto; min-width:0 }
.pan__t{ font-family:var(--disp); font-weight:600; font-size:16px; line-height:1.25; color:var(--txt-dark) }
.pan__o{ margin-top:5px; font-size:12.5px; line-height:1.55; color:var(--txt-soft) }
.pan__o span{ display:block }
.pan__n{ margin-top:5px; font-size:12.5px; line-height:1.5; color:#8a6118; font-style:italic }
.pan__r{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:10px }
.pan__p{ font-family:var(--disp); font-weight:600; font-size:16px; color:var(--ember); white-space:nowrap }
.pan__q{ display:flex; align-items:center; gap:2px; padding:3px; border-radius:11px; border:1px solid var(--line-l); background:#fff }
.pan__q button{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center }
.pan__q button svg{ width:13px; height:13px; stroke:var(--txt-dark); fill:none; stroke-width:2.2; stroke-linecap:round }
.pan__q b{ min-width:20px; text-align:center; font-family:var(--disp); font-weight:600; font-size:14px }
.pan__edit{ font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--txt-soft); font-family:var(--disp); font-weight:600; text-decoration:underline; text-underline-offset:3px }

.tot{ margin-top:22px; padding:18px 18px 19px; border-radius:16px; background:#fff; border:1px solid var(--line-l) }
.tot__r{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:14.5px; color:var(--txt-soft); padding:5px 0 }
.tot__r b{ font-family:var(--disp); font-weight:600; color:var(--txt-dark); font-size:15.5px }
.tot__r.is-free b{ color:#2e7d40 }
.tot__sep{ height:1px; background:var(--line-l); margin:9px 0 }
.tot__g{ display:flex; justify-content:space-between; align-items:baseline; gap:14px }
.tot__g span{ font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--txt-dark) }
.tot__g b{ font-family:var(--disp); font-weight:600; font-size:26px; color:var(--ember) }
.tot__mini{ margin-top:11px; font-size:12.5px; line-height:1.55; color:#a03535 }

.pan__vide{ padding:56px 0 40px; text-align:center }
.pan__vide svg{ width:52px; height:52px; margin:0 auto 16px; display:block; opacity:.22; color:var(--txt-dark) }
.pan__vide p{ font-size:15px; line-height:1.6; color:var(--txt-soft) }
.pan__vide .btn{ width:auto; margin:20px auto 0; padding:14px 26px; font-size:12px }

.suggest{ margin-top:28px }
.suggest__k{ font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); display:flex; align-items:center; gap:11px }
.suggest__k::after{ content:""; flex:1 1 auto; height:1px; background:currentColor; opacity:.3 }
.suggest__l{ display:flex; gap:9px; margin-top:13px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px }
.suggest__l::-webkit-scrollbar{ display:none }
.sug{
  flex:0 0 auto; width:132px; padding:13px 13px 12px; border-radius:14px; text-align:left;
  background:#fff; border:1px solid var(--line-l);
  transition:transform .2s cubic-bezier(.3,.9,.3,1), border-color .2s ease;
}
.sug:active{ transform:scale(.97) }
.sug__t{ font-family:var(--disp); font-weight:600; font-size:13.5px; line-height:1.25; color:var(--txt-dark) }
.sug__f{ margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:8px }
.sug__p{ font-family:var(--disp); font-weight:600; font-size:13.5px; color:var(--ember) }
.sug__a{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:rgba(189,64,15,.12) }
.sug__a svg{ width:12px; height:12px; stroke:var(--ember); fill:none; stroke-width:2.4; stroke-linecap:round }

/* ============================ 6 · COORDONNÉES ============================ */
.frm{ padding-top:22px }
.frm__k{ font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); display:flex; align-items:center; gap:11px; margin-top:26px }
.frm__k:first-child{ margin-top:0 }
.frm__k::after{ content:""; flex:1 1 auto; height:1px; background:currentColor; opacity:.3 }
.fld{ margin-top:13px }
.fld__l{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-soft); margin-bottom:7px; font-family:var(--disp); font-weight:600 }
.fld input,.fld textarea{
  width:100%; padding:14px 15px; border-radius:13px;
  background:#fff; border:1px solid var(--line-l); color:var(--txt-dark);
  font-family:var(--sans); font-size:16px; line-height:1.4; resize:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.fld input:focus,.fld textarea:focus{ outline:none; border-color:rgba(189,64,15,.5); box-shadow:0 0 0 3px rgba(226,83,31,.1) }
.fld.is-bad input,.fld.is-bad textarea{ border-color:rgba(160,53,53,.6) }
.fld__e{ margin-top:6px; font-size:12.5px; color:#a03535; display:none }
.fld.is-bad .fld__e{ display:block }
.fld__h{ margin-top:6px; font-size:12.5px; line-height:1.5; color:rgba(35,26,22,.5) }
.fld__2{ display:grid; grid-template-columns:1fr 1fr; gap:10px }

/* créneaux */
.crn{ margin-top:13px }
.crn__asap{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:15px 16px; border-radius:15px; background:#fff; border:1px solid var(--line-l);
  transition:border-color .2s ease, box-shadow .2s ease, transform .18s cubic-bezier(.3,.9,.3,1);
}
.crn__asap:active{ transform:scale(.985) }
.crn__asap.is-on{ border-color:var(--ember); box-shadow:0 12px 28px -20px rgba(226,83,31,1) }
.crn__ic{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(140deg,rgba(226,83,31,.14),rgba(224,161,60,.16)) }
.crn__ic svg{ width:20px; height:20px; stroke:var(--ember); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.crn__x{ flex:1 1 auto; min-width:0 }
.crn__t{ font-family:var(--disp); font-weight:600; font-size:15.5px; color:var(--txt-dark); text-transform:uppercase; letter-spacing:.02em }
.crn__d{ margin-top:3px; font-size:12.5px; line-height:1.45; color:var(--txt-soft) }
.crn__h{ flex:0 0 auto; font-family:var(--disp); font-weight:600; font-size:19px; color:var(--ember) }

.crn__plus{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  margin-top:10px; padding:12px 16px; border-radius:13px;
  border:1px dashed rgba(35,26,22,.24); background:transparent;
  font-family:var(--disp); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-soft);
}
.crn__plus svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s cubic-bezier(.3,.9,.3,1) }
.crn__plus.is-open svg{ transform:rotate(180deg) }
.crn__jour{ margin-top:17px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(35,26,22,.45); font-family:var(--disp); font-weight:600 }
.crn__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:7px; margin-top:9px }
.crn__c{
  padding:11px 6px; border-radius:11px; background:#fff; border:1px solid var(--line-l);
  font-family:var(--disp); font-weight:600; font-size:14px; color:var(--txt-dark);
  transition:border-color .18s ease, color .18s ease, background .18s ease, transform .18s cubic-bezier(.3,.9,.3,1);
}
.crn__c:active{ transform:scale(.95) }
.crn__c.is-on{ background:var(--ember); border-color:var(--ember); color:#fff6ee }
.crn__c:disabled{ opacity:.3; text-decoration:line-through }
.crn__liste{ display:none }
.crn__liste.is-open{ display:block }

/* ============================ 7 · PAIEMENT ============================ */
.pay{ padding-top:22px }
.pay__c{
  position:relative; display:flex; gap:14px; align-items:flex-start; width:100%; text-align:left;
  padding:18px 17px; border-radius:16px; background:#fff; border:1px solid var(--line-l); margin-top:11px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .18s cubic-bezier(.3,.9,.3,1);
}
.pay__c:first-of-type{ margin-top:0 }
.pay__c:active{ transform:scale(.985) }
.pay__c.is-on{ border-color:var(--ember); box-shadow:0 14px 32px -22px rgba(226,83,31,1) }
.pay__ic{ flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(140deg,rgba(226,83,31,.13),rgba(224,161,60,.16)) }
.pay__ic svg{ width:22px; height:22px; stroke:var(--ember); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.pay__x{ flex:1 1 auto; min-width:0 }
.pay__t{ font-family:var(--disp); font-weight:600; font-size:16.5px; line-height:1.2; color:var(--txt-dark); text-transform:uppercase; letter-spacing:.02em }
.pay__d{ margin-top:5px; font-size:13px; line-height:1.55; color:var(--txt-soft) }
.pay__cb{ display:flex; gap:6px; margin-top:11px; align-items:center }
.pay__cb i{ width:30px; height:20px; border-radius:4px; background:rgba(35,26,22,.07); display:grid; place-items:center; font-style:normal; font-size:8px; letter-spacing:.04em; font-family:var(--disp); font-weight:600; color:var(--txt-soft) }

.recap{ margin-top:24px; padding:18px 18px 19px; border-radius:16px; background:rgba(35,26,22,.035); border:1px solid var(--line-l) }
.recap__k{ font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--brass) }
.recap__r{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-bottom:1px solid rgba(35,26,22,.07); font-size:13.5px; line-height:1.5 }
.recap__r:last-child{ border-bottom:0; padding-bottom:0 }
.recap__l{ flex:0 0 84px; color:rgba(35,26,22,.5); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding-top:2px; font-family:var(--disp); font-weight:600 }
.recap__v{ flex:1 1 auto; min-width:0; color:var(--txt-dark) }
.recap__v b{ font-family:var(--disp); font-weight:600 }

/* ============================ 8 · CONFIRMATION ============================ */
.cfm{ padding:26px var(--pad) 30px; text-align:center }
.cfm__seal{ width:78px; height:78px; margin:0 auto 20px; position:relative }
.cfm__seal svg{ width:100%; height:100%; overflow:visible }
.cfm__seal .ring{ fill:none; stroke:var(--ember); stroke-width:1.6; opacity:.35 }
.cfm__seal .disc{ fill:rgba(226,83,31,.1) }
.cfm__seal .tick{
  fill:none; stroke:var(--ember); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:34; stroke-dashoffset:34;
}
.is-in .cfm__seal .tick{ animation:ctick .55s cubic-bezier(.3,.9,.3,1) .18s forwards }
@keyframes ctick{ to{ stroke-dashoffset:0 } }
.cfm__k{ font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--brass) }
.cfm__t{ margin-top:6px; font-family:var(--disp); font-weight:600; font-size:clamp(26px,7.4vw,34px); line-height:1.08; color:var(--txt-dark); text-transform:uppercase }
.cfm__num{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:8px 16px; border-radius:999px;
  background:rgba(35,26,22,.06); font-family:var(--disp); font-weight:600; font-size:15px;
  letter-spacing:.14em; color:var(--txt-dark);
}
.cfm__sub{ margin-top:14px; font-size:14.5px; line-height:1.65; color:var(--txt-soft); max-width:30em; margin-inline:auto }

.cfm__heure{
  margin-top:24px; padding:22px 18px 20px; border-radius:18px;
  background:linear-gradient(160deg,#1f1613,#150f0d); color:var(--cream);
  border:1px solid rgba(224,161,60,.28); position:relative; overflow:hidden;
}
.cfm__heure::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(224,161,60,.18),transparent 60%);
}
.cfm__hk{ font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--brass) }
.cfm__hv{ margin-top:7px; font-family:var(--disp); font-weight:600; font-size:clamp(38px,12vw,52px); line-height:1; color:var(--cream) }
.cfm__hj{ margin-top:7px; font-size:13px; letter-spacing:.08em; color:rgba(248,242,232,.6); text-transform:uppercase }
.cfm__ha{ margin-top:13px; padding-top:13px; border-top:1px solid rgba(248,242,232,.14); font-size:14px; line-height:1.6; color:rgba(248,242,232,.85) }
.cfm__ha b{ font-weight:600; color:var(--cream) }

.cfm__bloc{ margin-top:14px; padding:18px; border-radius:16px; background:#fff; border:1px solid var(--line-l); text-align:left }
.cfm__bk{ font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); display:flex; align-items:center; gap:11px }
.cfm__bk::after{ content:""; flex:1 1 auto; height:1px; background:currentColor; opacity:.3 }
.cfm__li{ display:flex; gap:11px; align-items:baseline; padding:10px 0; border-bottom:1px solid rgba(35,26,22,.08); font-size:14px }
.cfm__li:last-of-type{ border-bottom:0 }
.cfm__lq{ flex:0 0 auto; font-family:var(--disp); font-weight:600; color:var(--ember); min-width:22px }
.cfm__ln{ flex:1 1 auto; min-width:0; color:var(--txt-dark) }
.cfm__ln small{ display:block; margin-top:3px; font-size:12px; line-height:1.5; color:var(--txt-soft) }
.cfm__lp{ flex:0 0 auto; font-family:var(--disp); font-weight:600; color:var(--txt-dark) }

.cfm__pay{
  margin-top:14px; padding:17px 18px; border-radius:16px; text-align:left;
  display:flex; align-items:center; gap:13px;
  background:rgba(46,125,64,.08); border:1px solid rgba(46,125,64,.26);
}
.cfm__pay.is-du{ background:rgba(224,161,60,.12); border-color:rgba(224,161,60,.35) }
.cfm__pi{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(46,125,64,.14) }
.cfm__pay.is-du .cfm__pi{ background:rgba(224,161,60,.2) }
.cfm__pi svg{ width:19px; height:19px; stroke:#2e7d40; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.cfm__pay.is-du .cfm__pi svg{ stroke:#8a6118 }
.cfm__px{ flex:1 1 auto; min-width:0 }
.cfm__pt{ font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#2e7d40 }
.cfm__pay.is-du .cfm__pt{ color:#8a6118 }
.cfm__pd{ margin-top:3px; font-size:13px; line-height:1.5; color:var(--txt-soft) }
.cfm__pv{ flex:0 0 auto; font-family:var(--disp); font-weight:600; font-size:22px; color:var(--txt-dark) }

.cfm__etat{ margin-top:14px; padding:15px 16px; border-radius:14px; background:rgba(35,26,22,.035); border:1px solid var(--line-l); text-align:left; display:flex; align-items:center; gap:12px }
.cfm__pulse{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--ember); position:relative }
.cfm__pulse::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--ember); opacity:0; animation:cpulse 2s ease-out infinite }
@keyframes cpulse{ 0%{ transform:scale(.5); opacity:.8 } 100%{ transform:scale(1.4); opacity:0 } }
.cfm__ex{ flex:1 1 auto; min-width:0 }
.cfm__et{ font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-dark) }
.cfm__ed{ margin-top:2px; font-size:12.5px; color:var(--txt-soft) }

.cfm__acts{ display:grid; gap:9px; margin-top:22px }
.cfm__foot{ margin-top:20px; font-size:12.5px; line-height:1.65; color:rgba(35,26,22,.5) }
.cfm__foot a{ color:var(--ember); text-decoration:underline; text-underline-offset:3px }

/* ============================ 9 · BARRE DE PIED ============================ */
.cbar{
  flex:0 0 auto; padding:11px var(--pad) calc(var(--sab) + 13px);
  border-top:1px solid var(--line-l); background:rgba(253,249,242,.94);
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .cbar{ background:rgba(253,249,242,.8); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4) }
}
.cbar[hidden]{ display:none }
.cbar .btn{ width:100%; padding:15px 18px; font-size:12.5px }
.cbar .btn:disabled{ opacity:.45; box-shadow:none }
.cbar__x{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100% }
.cbar__n{
  display:inline-grid; place-items:center; min-width:23px; height:23px; padding:0 7px; border-radius:999px;
  background:rgba(255,255,255,.22); font-size:12px;
}
.cbar__l{ flex:1 1 auto; text-align:left; display:flex; align-items:center; gap:9px }
.cbar__p{ flex:0 0 auto; font-size:15px; letter-spacing:.02em }
.cbar__note{ margin-top:9px; text-align:center; font-size:11.5px; line-height:1.5; color:rgba(35,26,22,.5) }

/* le bouton « Commander » ajouté sous « Voir le menu complet » */
.btn--order{ margin-top:11px }

/* la barre du bas du site : deux boutons quand la commande est ouverte */
#dock .btn--cmd{ flex:1 1 auto; padding:15px 12px }

/* ------------------------------------------------- écrans larges */
@media (min-width:760px){
  #cmdSheet .sheet__pn--full{ width:min(760px,94vw) }
  #artSheet .sheet__pn{ width:min(620px,94vw); height:min(720px,92vh); border-radius:24px }
  .cmo__grid{ grid-template-columns:1fr 1fr }
  .cmo__c{ flex-direction:column; align-items:flex-start; padding:24px 22px 22px }
  .cmo__go{ position:absolute; right:18px; top:26px }
  .cit__ph{ width:110px; height:110px }
  .crn__grid{ grid-template-columns:repeat(auto-fill,minmax(90px,1fr)) }
}

/* ------------------------------------------------- mouvement réduit */
@media (prefers-reduced-motion:reduce){
  .cfm__seal .tick{ stroke-dashoffset:0; animation:none }
  .cfm__pulse::after{ animation:none }
}

/* =====================================================================
   10 · LES RUPTURES, RÉPERCUTÉES SUR LE SITE
   ---------------------------------------------------------------------
   Le patron retire un burger depuis la page de gestion : il se grise ici,
   dans le carrousel de la section « La carte » comme dans le menu complet.
   ===================================================================== */
.hs-badge{
  display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  padding:4px 10px; border-radius:999px;
  background:rgba(140,40,40,.12); color:#a03535;
  font-family:var(--disp); font-weight:600; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
}
.sec--dark .hs-badge{ background:rgba(255,90,90,.14); color:#ff8a8a }

.dish.is-hs .dish__t,.dish.is-hs .dish__d,.dish.is-hs .dish__tag{ opacity:.45 }
.dish.is-hs .dish__p{ opacity:.45; text-decoration:line-through }
.dish.is-hs .dish__see{ opacity:.35; pointer-events:none }

.mit.is-hs .mit__t,.mit.is-hs .mit__d{ opacity:.45 }
.mit.is-hs .mit__p{ opacity:.45; text-decoration:line-through }
.mit.is-hs .hs-badge{ margin-top:6px }

/* un groupe d'options obligatoire encore vide, signalé au moment du clic */
.grp.is-need .grp__t{ color:#a03535 }
.grp.is-need .grp__r{ background:rgba(160,53,53,.14); color:#a03535 }
.grp.is-need .grp__l{ animation:cshake .4s ease }
@keyframes cshake{
  0%,100%{ transform:translate3d(0,0,0) }
  25%{ transform:translate3d(-4px,0,0) }
  75%{ transform:translate3d(4px,0,0) }
}
@media (prefers-reduced-motion:reduce){ .grp.is-need .grp__l{ animation:none } }

/* =====================================================================
   11 · RATTRAPAGE DE FLUX
   ---------------------------------------------------------------------
   Ces conteneurs sont des <span> : à l'intérieur d'un <button>, seul un
   élément en ligne est valide, donc pas de <div>. Mais un span reste en
   flux EN LIGNE, et ses enfants se collaient bout à bout
   (« LIVRAISONChez vous, chaud… »). On leur rend explicitement leur
   comportement de bloc : c'est le seul endroit où cette règle vit, plutôt
   qu'un display posé au hasard sur chaque enfant.
   ===================================================================== */
.cmo__x,.crn__x,.pay__x,.cfm__px,.cfm__ex{ display:flex; flex-direction:column }
.cfm__px,.cfm__ex{ gap:3px }
.cmo__t,.cmo__d,.cmo__m,
.crn__t,.crn__d,
.pay__t,.pay__d,
.cfm__pt,.cfm__pd,
.cfm__et,.cfm__ed,
.sug__t,
.cit__t,.cit__d{ display:block }

/* l'ornement du choix du mode : même traitement que les icônes des cartes,
   sinon le tracé se remplit de noir au lieu de rester au trait */
.cmo__orn svg{ stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round }

/* La barre d'onglets n'est pas dans la zone défilante : elle est une rangée
   de la colonne. Sans « flex:0 0 auto » elle se laissait comprimer par le
   corps et les libellés se retrouvaient coupés en deux. */
.cnav{ position:static; flex:0 0 auto }

/* « COORDONNÉES » ne tenait pas dans son tiers et se terminait en points de
   suspension : on resserre l'interlettrage plutôt que d'abréger le mot. */
.cstep__l{ font-size:10px; letter-spacing:.07em }

/* le bouton d'ajout porte un libellé ET un prix : même mise en page que la
   barre du bas, sinon le prix passait à la ligne et se coupait */
.art__f .btn{ font-size:11px; letter-spacing:.08em }

/* Le défilement vers une catégorie se calcule avec offsetTop, qui se mesure
   depuis le premier ancêtre POSITIONNÉ. Sans cette ligne, l'ancêtre était la
   feuille elle-même : on ajoutait la hauteur de l'en-tête au calcul et le
   titre de section passait sous la barre d'onglets. */
.cbody{ position:relative }

/* Le bouton « Voir le menu complet » et le bouton « Commander » se suivent
   dans la section « La carte ». Deux aplats orange l'un sous l'autre
   s'annulent — c'est la règle que le site s'applique déjà dans sa barre de
   navigation. La consultation passe en contour, la commande garde l'aplat :
   une seule action pleine par écran, et c'est celle qui compte. */
.btn--ghost.btn--menu::after{ content:none }
.btn--order{ box-shadow:0 16px 36px -16px rgba(226,83,31,.95) }

/* Le bouton en contour tient sa couleur du fond sombre des sections : il
   écrit en crème, et n'est repassé en encre que dans « .sec--light » et
   « .sec--sand ». Or les feuilles sont crème elles aussi — le libellé y
   devenait invisible (« Réserver une table » sous la carte, « Revenir au
   site » sous la confirmation). Les feuilles rejoignent donc la règle des
   fonds clairs. La barre du bas du site, elle, reste sombre : elle n'est
   pas concernée. */
.sheet__pn .btn--ghost{ color:var(--txt-dark); border-color:var(--line-l) }

/* La colonne de texte d'un article est une colonne flex : ses enfants
   s'étirent sur toute la largeur par défaut. Les deux pastilles doivent au
   contraire s'arrêter à leur texte, sinon « Servi le soir » traverse tout
   l'écran sur un grand format. */
.cit__hs,.cit__hors{ align-self:flex-start }

/* ---------------------------------------------------------------------
   Le règlement n'est plus un choix : tout se paie au comptoir ou à la
   livraison. La carte de paiement devient donc un simple rappel — pas de
   pastille de sélection, pas d'état actif, et le montant à sortir affiché
   en grand pour que le client sache d'avance ce qu'il prépare.
   --------------------------------------------------------------------- */
.pay__c--seul{
  border-color:rgba(224,161,60,.4); background:rgba(224,161,60,.07);
  align-items:center; cursor:default;
}
.pay__c--seul:active{ transform:none }
.pay__v{
  flex:0 0 auto; font-family:var(--disp); font-weight:600; font-size:22px;
  color:var(--txt-dark); white-space:nowrap;
}

/* Un dessin est une composition centrée : on le montre en ENTIER, sur le
   fond sombre du dessin lui-même prolongé par le cadre. Le recadrage,
   réservé aux photographies, lui coupait la moitié de la barquette. */
.art__ph--dessin{ background:#140e0b }
.art__ph--dessin img{ object-fit:contain; padding:10px 0 }