/* SMASH RIOT — Click & Collect : styles propres au plugin + repli hors thème.
   Les éléments structurels (.grid, .card, .sr-order, .sr-cart, .sr-slots, .sr-track)
   sont stylés par le thème SMASH RIOT ; ici on ne fait qu'ajouter ce qui est
   spécifique au plugin et un repli minimal si le thème est absent. */

/* ---------- Personnalisation produit (Composer) ---------- */
.srcc-pick-body{ min-width:0; }
.srcc-pick-actions{ display:flex; align-items:center; gap:12px; }
.srcc-custo{ margin-top:12px; padding-top:12px; border-top:1px dashed rgba(128,128,128,.35); display:grid; gap:12px; }
.srcc-custo-grp{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.srcc-custo-h{ flex:0 0 100%; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.6; }
.srcc-chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:7px 11px; border-radius:999px; border:1.5px solid rgba(128,128,128,.35); cursor:pointer; user-select:none; line-height:1; white-space:nowrap; }
.srcc-chip input{ margin:0; accent-color:currentColor; }
/* ingrédient décoché = retiré → barré */
.srcc-chip:has(.srcc-ing:not(:checked)){ opacity:.5; text-decoration:line-through; }
.srcc-chip--add:has(.srcc-addon:checked){ border-color:currentColor; font-weight:700; }
/* base / protéine au choix (radio) */
.srcc-chip--base{ }
.srcc-chip--base:has(.srcc-base:checked){ border-color:var(--sr-accent,#FF5A1F); box-shadow:inset 0 0 0 2px var(--sr-accent,#FF5A1F); font-weight:700; }
.srcc-chip--base em{ font-style:normal; opacity:.7; font-weight:600; }
.srcc-add--custom{ justify-self:start; }

/* ---------- Grille « tous les produits » (page Commander) ---------- */
.srcc-pick-cat{ font-size:15px; text-transform:uppercase; letter-spacing:.04em; opacity:.65; margin:22px 0 10px; }
.srcc-pick-cat:first-of-type{ margin-top:0; }
.srcc-prodgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.srcc-prodcard{ display:flex; align-items:center; gap:12px; text-align:left; padding:10px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); border-radius:16px; background:var(--sr-surface,#fff); cursor:pointer; font:inherit; color:inherit; transition:transform .14s ease, box-shadow .14s ease, border-color .14s; position:relative; }
.srcc-prodcard:hover{ transform:translateY(-3px); border-color:var(--sr-accent,#FF5A1F); box-shadow:var(--sr-shadow,0 8px 24px -12px rgba(0,0,0,.3)); }
.srcc-prodcard__img{ width:56px; height:56px; border-radius:11px; background-size:cover; background-position:center; background-color:rgba(128,128,128,.12); flex:0 0 auto; }
.srcc-prodcard__b{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.srcc-prodcard__name{ font-weight:700; font-size:15px; line-height:1.15; }
.srcc-prodcard__price{ font-family:var(--sr-fdisp,inherit); color:var(--sr-accent,#FF5A1F); font-weight:700; }
.srcc-prodcard__plus{ width:28px; height:28px; border-radius:50%; background:var(--sr-accent,#FF5A1F); color:#fff; font-size:18px; line-height:28px; text-align:center; flex:0 0 auto; }

/* ---------- Modale fiche produit ---------- */
.srcc-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.srcc-modal[hidden]{ display:none; }
.srcc-modal__backdrop{ position:absolute; inset:0; background:rgba(15,12,10,.62); backdrop-filter:blur(3px); }
.srcc-modal__panel{ position:relative; z-index:1; width:100%; max-width:520px; max-height:90vh; overflow:auto; background:var(--sr-surface,#fff); color:var(--sr-ink,#1a1a1a); border-radius:22px; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }
.srcc-modal__x{ position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; background:rgba(0,0,0,.5); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.srcc-modal__img{ height:200px; background-size:cover; background-position:center; background-color:rgba(128,128,128,.15); }
.srcc-modal__main{ padding:22px 24px 26px; }
.srcc-modal__name{ font-size:26px; margin:0 0 6px; }
.srcc-modal__desc{ color:var(--sr-muted,#6b6b63); font-size:14px; margin:0 0 18px; }
.srcc-modal__main .srcc-custo-grp{ margin-bottom:16px; }
.srcc-modal__bar{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.srcc-qty{ display:inline-flex; align-items:center; gap:14px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); border-radius:999px; padding:8px 14px; }
.srcc-qty button{ width:26px; height:26px; border-radius:50%; border:1px solid currentColor; background:transparent; color:inherit; font-weight:700; cursor:pointer; line-height:1; }
.srcc-qv{ min-width:18px; text-align:center; font-weight:700; }
.srcc-modal-add{ flex:1; justify-content:center; }
.srcc-modal__added{ margin:14px 0 0; text-align:center; font-weight:700; color:#1f7a35; font-size:14px; }

/* ---------- Pages Composition / Commander ---------- */
.sr-order--compose{ display:flex; flex-direction:column; gap:28px; max-width:880px; margin:0 auto; }
.sr-order--compose .sr-cart{ position:static; }

.sr-order--checkout{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; max-width:920px; margin:0 auto; }
.sr-order--checkout .sr-cart{ position:sticky; top:90px; }
.sr-checkout{ border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); border-radius:var(--sr-radius,18px); background:var(--sr-surface,#fff); box-shadow:var(--sr-shadow,0 10px 30px -16px rgba(0,0,0,.3)); padding:24px; }
.srcc-checkout-h{ font-size:22px; margin:0 0 16px; }
.srcc-backcompose{ display:inline-block; margin-top:14px; font-size:13px; font-weight:700; color:var(--sr-muted,#6b6b63); text-decoration:none; }
.srcc-backcompose:hover{ color:var(--sr-accent,#FF5A1F); }
#srcc-tocheckout{ display:flex; justify-content:center; width:100%; margin-top:18px; text-decoration:none; }
@media(max-width:820px){ .sr-order--checkout{ grid-template-columns:1fr; } .sr-order--checkout .sr-cart{ position:static; } }

/* ---------- Parcours guidé : grandes tuiles d'étapes ---------- */
.srcc-stepper{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:30px; }
.srcc-step{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:22px 14px; border-radius:18px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); background:var(--sr-surface,#fff); color:inherit; font:inherit; cursor:pointer; transition:border-color .15s, background .15s, color .15s, transform .12s; }
.srcc-step:hover{ border-color:var(--sr-accent,#FF5A1F); transform:translateY(-3px); }
.srcc-step__n{ width:40px; height:40px; border-radius:50%; background:rgba(128,128,128,.16); color:inherit; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .15s, color .15s; }
.srcc-step__l{ font-weight:800; font-size:16px; line-height:1.1; text-transform:uppercase; letter-spacing:-.01em; }
.srcc-step.active{ background:var(--sr-accent,#FF5A1F); border-color:var(--sr-accent,#FF5A1F); color:#fff; }
.srcc-step.active .srcc-step__n{ background:rgba(255,255,255,.28); color:#fff; }
.srcc-step.done{ border-color:#1f7a35; }
.srcc-step.done .srcc-step__n{ background:#1f7a35; color:#fff; font-size:0; }
.srcc-step.done .srcc-step__n::after{ content:"✓"; font-size:18px; }

.srcc-step-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.srcc-step-head h3{ font-size:clamp(24px,3.4vw,34px); margin:0; }
.srcc-step-skip{ background:transparent; border:0; color:var(--sr-muted,#6b6b63); font:inherit; font-weight:700; cursor:pointer; }
.srcc-step-skip:hover{ color:var(--sr-accent,#FF5A1F); }
.srcc-step-intro{ color:var(--sr-muted,#6b6b63); margin:0 0 18px; }

.srcc-menujump{ display:flex; flex-wrap:wrap; gap:10px; }
.srcc-jump{ padding:14px 20px; border-radius:14px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); background:transparent; color:inherit; font:inherit; font-weight:700; cursor:pointer; transition:border-color .15s, transform .12s; }
.srcc-jump:hover{ border-color:var(--sr-accent,#FF5A1F); transform:translateY(-2px); }

.srcc-step-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:22px; }
.srcc-step-prev{ background:transparent; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); color:inherit; }
.srcc-step-nav .srcc-step-next{ margin-left:auto; }

a.srcc-prodlink.srcc-prodcard{ text-decoration:none; }

/* ---------- Formules (étape « Le menu ») ---------- */
.srcc-formulas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:8px; }
.srcc-formula-card{ display:flex; align-items:center; gap:14px; text-align:left; padding:12px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); border-radius:18px; background:var(--sr-surface,#fff); color:inherit; font:inherit; cursor:pointer; transition:transform .14s, border-color .14s, box-shadow .14s; }
.srcc-formula-card:hover{ transform:translateY(-3px); border-color:var(--sr-accent,#FF5A1F); box-shadow:var(--sr-shadow,0 8px 24px -12px rgba(0,0,0,.3)); }
.srcc-formula-card__img{ width:72px; height:72px; border-radius:12px; background-size:cover; background-position:center; background-color:rgba(128,128,128,.12); flex:0 0 auto; }
.srcc-formula-card__b{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.srcc-formula-card__name{ font-weight:800; font-size:17px; }
.srcc-formula-card__desc{ font-size:12.5px; color:var(--sr-muted,#6b6b63); }
.srcc-formula-card__steps{ font-size:12px; font-weight:700; color:var(--sr-accent,#FF5A1F); text-transform:uppercase; letter-spacing:.02em; margin-top:2px; }
.srcc-formula-card__price{ font-family:var(--sr-fdisp,inherit); font-weight:800; font-size:22px; flex:0 0 auto; }

/* Constructeur de formule (dans la modale) */
.srcc-fstep{ margin-bottom:18px; }
.srcc-fopts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.srcc-fopt{ width:108px; border:1.5px solid var(--sr-line,#e0d8c8); border-radius:12px; background:transparent; color:inherit; font:inherit; cursor:pointer; padding:8px; text-align:center; transition:border-color .14s, transform .12s; }
.srcc-fopt:hover{ border-color:var(--sr-accent,#FF5A1F); transform:translateY(-2px); }
.srcc-fcompo{ margin-top:12px; padding:14px; border:1.5px dashed var(--sr-line,#e0d8c8); border-radius:12px; }
.srcc-fcompo .srcc-custo-grp{ margin-bottom:12px; }
.srcc-fcompo .srcc-custo-grp:last-child{ margin-bottom:0; }
.srcc-fopt.sel{ border-color:var(--sr-accent,#FF5A1F); box-shadow:inset 0 0 0 2px var(--sr-accent,#FF5A1F); }
.srcc-fopt__img{ display:block; width:100%; aspect-ratio:1/1; border-radius:8px; background-size:cover; background-position:center; background-color:rgba(128,128,128,.12); margin-bottom:6px; }
.srcc-fopt__name{ font-size:12px; font-weight:700; line-height:1.2; display:block; }
.srcc-formula-fix{ font-family:var(--sr-fdisp,inherit); font-weight:800; font-size:18px; }
.srcc-formula-add{ margin-left:auto; }

/* ---------- Cartes best-sellers cliquables (accueil) ---------- */
.srcc-open{ cursor:pointer; }
.card.srcc-prodcard, .srcc-card{ cursor:pointer; }
.srcc-featured{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.srcc-card{ -webkit-appearance:none; appearance:none; border:0; margin:0; padding:0; font:inherit; color:inherit; text-align:left; background:transparent; display:flex; flex-direction:column; width:100%; }
.srcc-card__img{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; }
.srcc-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.srcc-card:hover .srcc-card__img img{ transform:scale(1.05); }
.srcc-card__b{ display:flex; flex-direction:column; gap:8px; padding:16px 4px 4px; }
.srcc-card__name{ font-family:var(--sr-fdisp,inherit); font-weight:800; font-size:22px; text-transform:uppercase; letter-spacing:-.01em; }
.srcc-card__desc{ color:var(--sr-muted,#6b6b63); font-size:13.5px; }
.srcc-card__row{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.srcc-card__cta{ font-weight:700; color:var(--sr-accent,#FF5A1F); font-size:14px; }

/* ---------- Accompagnements (dans la fiche) ---------- */
.srcc-sides-row{ display:flex; flex-wrap:wrap; gap:10px; }
.srcc-side{ display:flex; align-items:center; gap:8px; border:1.5px solid rgba(128,128,128,.35); border-radius:12px; background:transparent; color:inherit; font:inherit; cursor:pointer; padding:6px 12px 6px 6px; transition:border-color .15s, background .15s; }
.srcc-side:hover{ border-color:var(--sr-accent,#FF5A1F); }
.srcc-side.is-added{ border-color:#1f7a35; }
.srcc-side__img{ width:34px; height:34px; border-radius:8px; background-size:cover; background-position:center; background-color:rgba(128,128,128,.15); flex:0 0 auto; }
.srcc-side__name{ font-weight:600; font-size:13px; }
.srcc-side__price{ font-size:12px; opacity:.7; }
.srcc-side__add{ width:22px; height:22px; border-radius:50%; background:var(--sr-accent,#FF5A1F); color:#fff; font-size:14px; line-height:22px; text-align:center; flex:0 0 auto; }

/* ---------- Transition inter-documents (page → page) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-group(srcc-hero){ animation-duration:.42s; }
  ::view-transition-old(srcc-hero), ::view-transition-new(srcc-hero){ mix-blend-mode:normal; }
  ::view-transition-group(*){ animation-duration:.42s; }
}

/* cartes-liens (accueil + carte) */
a.srcc-prodlink, a.srcc-card{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
a.srcc-prodlink:hover, a.srcc-card:hover{ text-decoration:none; }

/* ---------- Page produit (fiche individuelle) ---------- */
.srcc-detail-wrap{ padding:40px 0 80px; }
.srcc-detail{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.srcc-detail__media{ position:sticky; top:90px; }
.srcc-detail__img{ position:relative; width:100%; aspect-ratio:1/1; border-radius:22px; background-size:cover; background-position:center; background-color:rgba(128,128,128,.12); box-shadow:var(--sr-shadow,0 18px 50px -20px rgba(0,0,0,.4)); }
.srcc-detail__img .flag, .srcc-detail__img .chip, .srcc-detail__img .sticker{ position:absolute; top:16px; left:16px; }
.srcc-detail__main{ padding:0; }
.srcc-detail__back{ display:inline-block; margin-bottom:14px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--sr-muted,#6b6b63); text-decoration:none; }
.srcc-detail__back:hover{ color:var(--sr-accent,#FF5A1F); }
.srcc-detail .srcc-modal__name{ font-size:clamp(34px,4vw,52px); }
.srcc-detail .srcc-modal__bar{ position:sticky; bottom:16px; background:var(--sr-surface,#fff); padding:12px; border-radius:16px; box-shadow:0 10px 30px -12px rgba(0,0,0,.3); }
@media(max-width:840px){
  .srcc-detail{ grid-template-columns:1fr; gap:22px; }
  .srcc-detail__media{ position:static; }
  .srcc-detail__img{ aspect-ratio:4/3; }
}

/* ---------- Lignes de résumé enrichies (photo + perso) ---------- */
.sr-li--rich{ display:grid; grid-template-columns:46px 1fr auto; gap:12px; align-items:center; }
.srcc-li-img{ width:46px; height:46px; border-radius:10px; object-fit:cover; background:rgba(128,128,128,.12); }
.srcc-li-img--ph{ display:block; }
.srcc-li-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.srcc-li-name{ font-weight:700; }
.srcc-li-name .q{ opacity:.6; }
.srcc-li-rm{ font-size:12px; color:#c0392b; }
.srcc-li-add{ font-size:12px; color:#1f7a35; }
.srcc-li-base{ font-size:12px; color:#6c4ab6; font-weight:600; }
.srcc-li-right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; white-space:nowrap; }
.srcc-li-price{ font-weight:700; }
.srcc-li-controls{ display:inline-flex; gap:5px; }

/* Boutons + / – / × dans le résumé */
.srcc-li-controls button{ width:24px; height:24px; border-radius:6px; border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; font-weight:700; line-height:1; opacity:.7; transition:opacity .15s; }
.srcc-li-controls button:hover{ opacity:1; }
.srcc-li-controls .srcc-rm{ color:#c0392b; }

/* Champs du panier (page commander) */
.srcc-lbl{ display:block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.7; margin:18px 0 10px; }
.srcc-select{ width:100%; font:inherit; padding:13px 15px; border-radius:10px; border:2px solid currentColor; background:transparent; color:inherit; margin-bottom:6px; }
.srcc-fields{ display:grid; gap:10px; margin:16px 0; }
.srcc-fields input{ font:inherit; padding:13px 15px; border-radius:10px; border:2px solid; border-color:rgba(128,128,128,.4); background:rgba(127,127,127,.06); color:inherit; }
.srcc-pay-btn{ width:100%; justify-content:center; margin-top:8px; }
.srcc-pay-btn:disabled{ opacity:.45; cursor:not-allowed; }
.srcc-fineprint{ font-size:12px; opacity:.6; text-align:center; margin-top:12px; }
.srcc-fineprint em{ opacity:.8; }

/* Confirmation de commande */
.srcc-confirm{ margin-top:18px; }
.srcc-ok-card{ text-align:center; padding:26px 20px; border-radius:16px; border:2px solid rgba(128,128,128,.3); }
.srcc-ok-check{ width:54px; height:54px; border-radius:50%; background:#2e9e5b; color:#fff; font-size:30px; line-height:54px; margin:0 auto 12px; }
.srcc-ok-code{ font-size:34px; font-weight:800; letter-spacing:.04em; margin:6px 0 12px; }
.srcc-track-link{ margin-top:14px; }

/* Suivi */
.srcc-trackform{ display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.srcc-trackform input{ flex:1; min-width:200px; font:inherit; padding:15px 18px; border-radius:12px; border:2px solid rgba(128,128,128,.4); background:rgba(127,127,127,.06); color:inherit; }
.srcc-tcaption{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.65; font-weight:700; margin-bottom:4px; }
.srcc-tstatus{ margin-left:auto; font-weight:700; }
.srcc-track-foot{ margin-top:14px; font-size:14px; opacity:.8; }

.srcc-empty{ opacity:.7; }

/* ---------- Repli minimal si le thème SMASH RIOT est absent ---------- */
.srcc-flag{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:999px; background:#FF5A1F; color:#fff; }
.srcc-flag--accent2{ background:#222; }
.srcc-flag--ghost{ background:#3F7D34; }
.srcc-add-btn{ border:0; cursor:pointer; padding:10px 16px; border-radius:10px; font-weight:700; font-size:13px; background:var(--sr-accent,#FF5A1F); color:#fff; }

/* Si aucun thème ne définit .btn, donner un minimum vital */
body:not(.smash-riot) .btn:not([class*="--"]){ background:#FF5A1F; color:#fff; }

/* ---------- Choix du restaurant (carte) ---------- */
.srcc-spotsel{ display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:start; }
.srcc-spotsel__map{ height:420px; border-radius:var(--sr-radius,18px); overflow:hidden; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); z-index:0; }
.srcc-spotsel__list{ display:flex; flex-direction:column; gap:12px; }
.srcc-spotsel__h{ font-size:22px; margin:0 0 4px; }
.srcc-spotcard{ display:flex; flex-direction:column; gap:3px; text-align:left; padding:16px 18px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); border-radius:16px; background:var(--sr-surface,#fff); color:inherit; font:inherit; cursor:pointer; transition:border-color .14s, transform .12s, box-shadow .14s; }
.srcc-spotcard:hover{ border-color:var(--sr-accent,#FF5A1F); transform:translateY(-2px); box-shadow:var(--sr-shadow,0 8px 24px -12px rgba(0,0,0,.3)); }
.srcc-spotcard.sel{ border-color:var(--sr-accent,#FF5A1F); box-shadow:inset 0 0 0 2px var(--sr-accent,#FF5A1F); }
.srcc-spotcard__name{ font-weight:800; font-size:18px; }
.srcc-spotcard__addr{ font-size:14px; color:var(--sr-muted,#6b6b63); }
.srcc-spotcard__hours{ font-size:12px; font-weight:700; color:#1f7a35; text-transform:uppercase; letter-spacing:.03em; }
.srcc-spotcard__cta{ margin-top:8px; font-weight:700; color:var(--sr-accent,#FF5A1F); font-size:14px; }
@media(max-width:820px){ .srcc-spotsel{ grid-template-columns:1fr; } .srcc-spotsel__map{ height:300px; } }

/* ---------- Bandeau spot sélectionné ---------- */
.srcc-spotbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); border-radius:14px; background:var(--sr-surface,#fff); margin-bottom:22px; }
.srcc-spotbar strong{ font-weight:800; }
.srcc-spotbar a{ margin-left:auto; font-weight:700; color:var(--sr-accent,#FF5A1F); text-decoration:none; }

/* ---------- Compte client + fidélité ---------- */
.srcc-account{ max-width:680px; }
.srcc-account--auth{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.srcc-authform{ display:flex; flex-direction:column; gap:10px; border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); border-radius:16px; padding:22px; background:var(--sr-surface,#fff); }
.srcc-authform input{ font:inherit; padding:12px 14px; border-radius:10px; border:1.5px solid rgba(128,128,128,.4); background:var(--sr-bg,#fff); color:inherit; }
.srcc-acc-h{ font-size:20px; margin:0 0 4px; }
.srcc-acc-perk{ font-size:12px; color:var(--sr-muted,#6b6b63); margin:4px 0 0; }
.srcc-acc-notice{ background:#fde8e6; color:#b5261b; padding:10px 14px; border-radius:10px; font-weight:600; }
.srcc-loyalty{ border:var(--sr-bw,2px) solid var(--sr-line,#e0d8c8); border-radius:16px; padding:20px; background:var(--sr-surface,#fff); margin:14px 0; }
.srcc-loyalty__top{ display:flex; align-items:baseline; gap:8px; }
.srcc-loyalty__pts{ font-family:var(--sr-fdisp,inherit); font-size:42px; font-weight:800; color:var(--sr-accent,#FF5A1F); line-height:1; }
.srcc-loyalty__bar{ height:10px; border-radius:999px; background:rgba(128,128,128,.18); overflow:hidden; margin:12px 0 10px; }
.srcc-loyalty__bar span{ display:block; height:100%; background:var(--sr-accent,#FF5A1F); }
.srcc-loyalty__reward{ font-weight:700; color:#1f7a35; }
.srcc-loyalty__hint{ color:var(--sr-muted,#6b6b63); }
@media(max-width:680px){ .srcc-account--auth{ grid-template-columns:1fr; } }

/* Bandeau défilant — vitesse pilotée par --srcc-marquee-duration */
.srcc-marquee { overflow: hidden; }
.srcc-marquee__track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: srcc-marquee calc(var(--srcc-marquee-duration, 28) * 1s) linear infinite;
}
.srcc-marquee__track span { display: inline-block; }
.srcc-marquee__track .sep { opacity: .5; }
@keyframes srcc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.srcc-marquee:hover .srcc-marquee__track { animation-play-state: paused; }

/* ══════════════════════════════════════════════════════════════
   BORNE DE COMMANDE (widget srcc_compose)
   Interface kiosk : sidebar catégories + grille + récap fixe
   ══════════════════════════════════════════════════════════════ */

.srcc-kiosk {
  --sk-bg:       var(--sr-bg,      #E4E1D8);
  --sk-surface:  var(--sr-surface, #F2F0E9);
  --sk-surface2: var(--sr-surface2,#D6D2C6);
  --sk-ink:      var(--sr-ink,     #1A1A1A);
  --sk-muted:    var(--sr-muted,   #6B6B63);
  --sk-line:     var(--sr-line,    #1A1A1A);
  --sk-accent:   var(--sr-accent,  #FF5A1F);
  --sk-radius:   var(--sr-radius,  4px);
  --sk-bw:       var(--sr-bw,      2px);
  --sk-shadow:   var(--sr-shadow,  none);
  --sk-fdisp:    var(--f-disp,"Anton",sans-serif);
  --sk-fbody:    var(--f-body,"DM Sans",sans-serif);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--sk-bg);
  font-family: var(--sk-fbody);
  color: var(--sk-ink);
}
.srcc-kiosk * { box-sizing: border-box; }

/* ── Topbar ── */
.srcc-kiosk__top {
  position: sticky; top: 0; z-index: 100;
  background: var(--sk-surface);
  border-bottom: var(--sk-bw) solid var(--sk-line);
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.srcc-kiosk__title {
  font-family: var(--sk-fdisp);
  font-size: 20px; font-weight: 900;
  text-transform: uppercase; letter-spacing: -.01em; margin: 0;
}
.srcc-kiosk__steps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srcc-kstep {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--sk-muted); padding: 6px 12px; border-radius: var(--sk-radius);
  transition: all .15s;
}
.srcc-kstep.is-active { background: var(--sk-accent); color: #fff; }
.srcc-kstep.is-done   { color: var(--sk-accent); }
.srcc-kstep__arrow    { color: var(--sk-muted); font-size: 16px; }

/* ── Stage ── */
.srcc-kiosk__stage { flex: 1; display: flex; flex-direction: column; }
.srcc-kiosk__stage--hidden { display: none !important; }

/* ── Body étape 1 ── */
.srcc-kiosk__body { display: flex; flex: 1; overflow: hidden; }

/* ── Sidebar catégories ── */
.srcc-kiosk__cats {
  width: 190px; flex-shrink: 0;
  background: var(--sk-surface);
  border-right: var(--sk-bw) solid var(--sk-line);
  display: flex; flex-direction: column; overflow-y: auto;
  position: sticky; top: 56px; max-height: calc(100vh - 56px - 68px);
  scrollbar-width: none;
}
.srcc-kiosk__cats::-webkit-scrollbar { display: none; }
.srcc-kcat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; font-family: var(--sk-fbody);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--sk-muted); background: transparent; border: none;
  border-bottom: 1px solid rgba(0,0,0,.06);
  cursor: pointer; text-align: left; transition: all .15s;
  position: relative;
}
.srcc-kcat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--sk-accent); transition: width .2s;
}
.srcc-kcat.is-active { color: var(--sk-ink); background: var(--sk-bg); }
.srcc-kcat.is-active::before { width: 4px; }
.srcc-kcat:hover { color: var(--sk-ink); background: var(--sk-bg); }
.srcc-kcat__lbl { flex: 1; }
.srcc-kcat__cnt {
  font-size: 11px; font-family: monospace; font-weight: 700;
  background: var(--sk-line); color: var(--sk-surface);
  padding: 2px 6px; border-radius: calc(var(--sk-radius) + 2px); opacity: .45;
}
.srcc-kcat.is-active .srcc-kcat__cnt { background: var(--sk-accent); opacity: 1; color: #fff; }

/* ── Produits ── */
.srcc-kiosk__products { flex: 1; overflow-y: auto; padding: 18px 20px; }
.srcc-kiosk__filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.srcc-kflt {
  padding: 7px 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  border: var(--sk-bw) solid var(--sk-line); border-radius: var(--sk-radius);
  background: transparent; color: var(--sk-muted); cursor: pointer; transition: all .15s;
}
.srcc-kflt.is-active, .srcc-kflt:hover { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }

/* ── Grille produits ── */
.srcc-kiosk__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }
.srcc-kitem {
  background: var(--sk-surface); border: var(--sk-bw) solid var(--sk-line);
  border-radius: var(--sk-radius); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--sk-shadow); transition: transform .14s, box-shadow .14s;
}
.srcc-kitem:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.srcc-kitem__img {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--sk-surface2);
}
.srcc-kitem__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.srcc-kitem:hover .srcc-kitem__img img { transform: scale(1.04); }
.srcc-kitem__flag {
  position: absolute; top: 8px; left: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: calc(var(--sk-radius) + 1px); color: #fff; line-height: 1;
}
.srcc-kitem__flag--accent  { background: var(--sk-accent); }
.srcc-kitem__flag--accent2 { background: var(--sr-accent2, #2B2F36); }
.srcc-kitem__flag--ghost   { background: rgba(0,0,0,.55); }
.srcc-kitem__body { padding: 12px 14px 8px; flex: 1; }
.srcc-kitem__name { font-family: var(--sk-fdisp); font-size: 17px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 5px; line-height: 1.05; }
.srcc-kitem__desc { font-size: 12px; color: var(--sk-muted); margin: 0; line-height: 1.5; }
.srcc-kitem__foot {
  padding: 10px 14px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.srcc-kitem__price { font-family: var(--sk-fdisp); font-size: 20px; font-weight: 900; }
.srcc-kiosk__addbtn {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 8px 12px; background: var(--sk-accent); color: #fff;
  border: none; border-radius: var(--sk-radius); cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.srcc-kiosk__addbtn:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Qty stepper inline grille */
.srcc-kqty {
  display: flex; align-items: center; gap: 0;
  border: var(--sk-bw) solid var(--sk-line); border-radius: var(--sk-radius); overflow: hidden;
}
.srcc-kqd, .srcc-kqu {
  width: 32px; height: 32px; font-size: 16px; font-weight: 700;
  background: var(--sk-bg); border: none; cursor: pointer; color: var(--sk-ink); transition: background .1s;
}
.srcc-kqd:hover, .srcc-kqu:hover { background: var(--sk-accent); color: #fff; }
.srcc-kqv { min-width: 30px; text-align: center; font-weight: 700; font-size: 14px; border-left: 1px solid rgba(0,0,0,.1); border-right: 1px solid rgba(0,0,0,.1); }

/* ── Barre récap ── */
.srcc-kiosk__recapbar {
  position: sticky; bottom: 0; z-index: 90;
  background: var(--sk-ink); color: #fff;
  box-shadow: 0 -4px 24px rgba(0,0,0,.2);
}
@keyframes srcc-kflash { 0%{transform:scaleY(1)} 30%{transform:scaleY(1.02);background:var(--sk-accent)} 100%{transform:scaleY(1)} }
.srcc-kiosk__recapbar--flash { animation: srcc-kflash .4s ease; }
.srcc-kiosk__recap-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 22px; background: transparent; border: none; color: #fff; cursor: pointer; gap: 16px;
}
.srcc-kiosk__recap-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.srcc-kiosk__recap-icon { font-size: 20px; flex-shrink: 0; }
.srcc-kiosk__recap-count {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--sk-accent); padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.srcc-kiosk__recap-preview {
  font-size: 13px; color: rgba(255,255,255,.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srcc-kiosk__recap-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.srcc-kiosk__recap-total { font-family: var(--sk-fdisp); font-size: 24px; font-weight: 900; color: var(--sk-accent); }
.srcc-kiosk__recap-chevron { font-size: 14px; color: rgba(255,255,255,.4); transition: transform .2s; }
.srcc-kiosk__recap-toggle[aria-expanded="true"] .srcc-kiosk__recap-chevron { transform: rotate(180deg); }

/* Panel récap */
.srcc-kiosk__recap-panel {
  background: var(--sk-ink); border-top: 1px solid rgba(255,255,255,.1);
  max-height: 50vh; overflow-y: auto; padding: 0 22px;
}
.srcc-kiosk__recap-empty { padding: 20px 0; text-align: center; color: rgba(255,255,255,.4); font-style: italic; }
.srcc-kiosk__recap-line {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.srcc-kiosk__recap-thumb { width: 44px; height: 36px; object-fit: cover; border-radius: calc(var(--sk-radius) - 1px); flex-shrink: 0; }
.srcc-kiosk__recap-lname { flex: 1; font-weight: 600; font-size: 14px; color: rgba(255,255,255,.9); }
.srcc-kiosk__rqty { display: flex; align-items: center; gap: 0; border: 1px solid rgba(255,255,255,.2); border-radius: var(--sk-radius); overflow: hidden; }
.srcc-krqty { width: 28px; height: 28px; background: rgba(255,255,255,.08); border: none; color: #fff; cursor: pointer; font-size: 15px; transition: background .1s; }
.srcc-krqty:hover { background: var(--sk-accent); }
.srcc-kiosk__rqty span { min-width: 26px; text-align: center; font-weight: 700; font-size: 13px; border-left: 1px solid rgba(255,255,255,.15); border-right: 1px solid rgba(255,255,255,.15); }
.srcc-kiosk__recap-lprice { font-family: var(--sk-fdisp); font-size: 16px; font-weight: 900; color: var(--sk-accent); min-width: 56px; text-align: right; }
.srcc-kiosk__recap-footer { padding: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.srcc-kiosk__recap-sub { display: flex; gap: 14px; font-size: 14px; color: rgba(255,255,255,.55); }
.srcc-kiosk__recap-sub span:last-child { font-weight: 700; color: #fff; }

/* ── Boutons communs ── */
.srcc-kiosk__btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sk-fbody); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  padding: 14px 22px; background: var(--sk-accent); color: #fff;
  border: none; border-radius: var(--sk-radius); cursor: pointer; transition: all .15s;
}
.srcc-kiosk__btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.srcc-kiosk__btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; }
.srcc-kiosk__btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sk-fbody); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 12px 20px; background: transparent; color: var(--sk-ink);
  border: var(--sk-bw) solid var(--sk-line); border-radius: var(--sk-radius); cursor: pointer; transition: all .15s;
}
.srcc-kiosk__btn-secondary:hover { background: var(--sk-ink); color: var(--sk-surface); }
.srcc-kiosk__btn-order { flex-shrink: 0; white-space: nowrap; }

/* ── Checkout (étapes 2, 3, 4) ── */
.srcc-kiosk__checkout { max-width: 620px; margin: 40px auto; padding: 0 24px; }
.srcc-kiosk__checkout-h { font-family: var(--sk-fdisp); font-size: clamp(26px,4vw,44px); font-weight: 900; text-transform: uppercase; margin: 0 0 24px; }
.srcc-kiosk__back { background: none; border: none; font-size: 13px; font-weight: 700; color: var(--sk-muted); cursor: pointer; padding: 0 0 18px; text-transform: uppercase; letter-spacing: .04em; }
.srcc-kiosk__back:hover { color: var(--sk-ink); }
.srcc-kiosk__lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sk-accent); margin: 0 0 10px; display: block; }
.srcc-kiosk__spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 10px; margin-bottom: 4px; }
.srcc-kiosk__spot {
  display: flex; flex-direction: column; gap: 3px; padding: 13px 16px; text-align: left;
  border: var(--sk-bw) solid var(--sk-line); border-radius: var(--sk-radius);
  background: var(--sk-surface); cursor: pointer; font-family: var(--sk-fbody); color: var(--sk-ink); transition: all .14s; box-shadow: var(--sk-shadow);
}
.srcc-kiosk__spot strong { font-size: 14px; font-weight: 700; }
.srcc-kiosk__spot small  { font-size: 12px; color: var(--sk-muted); }
.srcc-kiosk__spot-hrs    { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sk-accent); margin-top: 4px; }
.srcc-kiosk__spot.is-active { border-color: var(--sk-accent); box-shadow: 0 0 0 2px var(--sk-accent); }
.srcc-kiosk__spot:hover:not(.is-active) { border-color: var(--sk-ink); }
.srcc-kiosk__slots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.srcc-kiosk__slot {
  padding: 10px 16px; font-family: monospace; font-size: 14px; font-weight: 700;
  border: var(--sk-bw) solid var(--sk-line); border-radius: var(--sk-radius);
  background: var(--sk-surface); cursor: pointer; color: var(--sk-ink); transition: all .14s;
}
.srcc-kiosk__slot.is-active { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }
.srcc-kiosk__slot:hover:not(.is-active) { border-color: var(--sk-accent); color: var(--sk-accent); }
.srcc-kiosk__input {
  display: block; width: 100%; padding: 13px 16px; font-family: var(--sk-fbody); font-size: 15px;
  border: var(--sk-bw) solid var(--sk-line); border-radius: var(--sk-radius);
  background: var(--sk-surface); color: var(--sk-ink); margin-bottom: 10px; transition: border-color .15s;
}
.srcc-kiosk__input:focus { outline: none; border-color: var(--sk-accent); }

/* Paiement */
.srcc-kiosk__pay-recap { background: var(--sk-surface); border: var(--sk-bw) solid var(--sk-line); border-radius: var(--sk-radius); padding: 14px 18px; margin-bottom: 18px; }
.srcc-kiosk__pay-line { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; border-bottom: 1px solid rgba(0,0,0,.06); }
.srcc-kiosk__pay-line:last-child { border-bottom: none; }
.srcc-kiosk__pay-line--spot,.srcc-kiosk__pay-line--slot { color: var(--sk-muted); font-size: 13px; }
.srcc-kiosk__pay-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.srcc-kiosk__pay-total-val { font-family: var(--sk-fdisp); font-size: 30px; font-weight: 900; color: var(--sk-accent); }
.srcc-kiosk__pay-secure { text-align: center; font-size: 12px; color: var(--sk-muted); margin: 12px 0 0; }

/* ── Confirmation ── */
.srcc-kiosk__confirm { max-width: 460px; margin: 60px auto; padding: 0 24px; text-align: center; }
.srcc-kiosk__confirm-icon { width: 70px; height: 70px; border-radius: 50%; background: var(--sk-accent); color: #fff; font-size: 34px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.srcc-kiosk__confirm h2 { font-family: var(--sk-fdisp); font-size: 38px; text-transform: uppercase; margin: 0 0 8px; }
.srcc-kiosk__confirm-sub { color: var(--sk-muted); margin: 0 0 24px; }
.srcc-kiosk__confirm-code { font-family: monospace; font-size: 30px; font-weight: 700; letter-spacing: .1em; color: var(--sk-accent); background: var(--sk-surface); padding: 14px 28px; border-radius: var(--sk-radius); margin-bottom: 14px; display: inline-block; }
.srcc-kiosk__confirm-meta { display: flex; justify-content: center; gap: 24px; color: var(--sk-muted); font-size: 14px; margin-bottom: 28px; }

/* ── Modale fiche produit ── */
.srcc-kiosk__modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; justify-content: center; }
.srcc-kiosk__modal--hidden { display: none !important; }
.srcc-kiosk__modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }
.srcc-kiosk__modal-card {
  position: relative; z-index: 1; background: var(--sk-surface); color: var(--sk-ink);
  border-radius: calc(var(--sk-radius) + 8px) calc(var(--sk-radius) + 8px) 0 0;
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  padding-bottom: 24px;
  animation: srcc-kslideup .3s cubic-bezier(.23,1,.32,1);
}
@keyframes srcc-kslideup { from{transform:translateY(100%)} to{transform:translateY(0)} }
.srcc-kiosk__modal-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.12); border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; z-index: 2; }
.srcc-kiosk__modal-close:hover { background: rgba(0,0,0,.25); }
.srcc-kiosk__mimg { height: 200px; background-size: cover; background-position: center; background-color: var(--sk-surface2); }
.srcc-kiosk__mbody { padding: 20px 22px 0; }
.srcc-kiosk__mname { font-family: var(--sk-fdisp); font-size: 26px; text-transform: uppercase; margin: 0 0 6px; }
.srcc-kiosk__mdesc { font-size: 14px; color: var(--sk-muted); margin: 0 0 16px; }
.srcc-kcusto { margin-bottom: 14px; }
.srcc-kcusto__h { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--sk-muted); margin-bottom: 8px; }
.srcc-ksides { display: flex; gap: 8px; flex-wrap: wrap; }
.srcc-kside {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px; border: var(--sk-bw) solid var(--sk-line); border-radius: var(--sk-radius);
  background: var(--sk-surface); cursor: pointer; font-family: var(--sk-fbody); color: var(--sk-ink); transition: all .14s; min-width: 72px;
}
.srcc-kside:hover { border-color: var(--sk-accent); }
.srcc-kside__img { width: 52px; height: 42px; border-radius: calc(var(--sk-radius) - 1px); background-size: cover; background-position: center; background-color: var(--sk-surface2); display: block; }
.srcc-kside__name { font-size: 11px; font-weight: 700; text-align: center; }
.srcc-kside__price { font-size: 11px; color: var(--sk-accent); font-weight: 700; }
.srcc-kside__add { font-size: 18px; line-height: 1; color: var(--sk-accent); }
.srcc-kiosk__mbar { display: flex; align-items: center; gap: 12px; padding: 16px 0 0; position: sticky; bottom: 0; background: var(--sk-surface); border-top: 1px solid rgba(0,0,0,.06); margin-top: 12px; }
.srcc-kiosk__maddcart { flex: 1; padding: 14px; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .srcc-kiosk__cats { width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; position: relative; top: 0; border-right: none; border-bottom: var(--sk-bw) solid var(--sk-line); scrollbar-width: none; }
  .srcc-kcat { flex-direction: column; padding: 10px 14px; white-space: nowrap; gap: 3px; border-bottom: none; border-right: 1px solid rgba(0,0,0,.06); flex-shrink: 0; }
  .srcc-kcat__cnt { display: none; }
  .srcc-kcat::before { width: 100%; height: 0; bottom: 0; top: auto; transition: height .2s; }
  .srcc-kcat.is-active::before { height: 3px; width: 100%; }
  .srcc-kiosk__body { flex-direction: column; }
  .srcc-kiosk__grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
  .srcc-kiosk__steps { display: none; }
  .srcc-kiosk__recap-preview { display: none; }
}

/* ================================================================
   INTERFACE BORNE KIOSK — [sr_compose]
   Sidebar catégories · grille produits · récap barre fixe
   ================================================================ */

.srcc-kiosk {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--sr-bg, #E4E1D8);
  color: var(--sr-ink, #1A1A1A);
  font-family: var(--f-body, "DM Sans", sans-serif);
}
.srcc-kiosk * { box-sizing: border-box; }

/* Topbar étapes */
.srcc-k-topbar {
  position: sticky; top: 0; z-index: 80;
  background: var(--sr-surface, #F2F0E9);
  border-bottom: var(--sr-bw, 2px) solid var(--sr-line, #1A1A1A);
  padding: 10px 0;
}
.srcc-k-topbar__in {
  max-width: 1400px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: flex-end;
}
.srcc-k-steps { display: flex; align-items: center; gap: 8px; }
.srcc-k-step {
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--sr-muted, #6B6B63);
  padding: 5px 12px; border-radius: var(--sr-radius, 2px);
  transition: all .15s;
}
.srcc-k-step.is-active { background: var(--sr-accent, #FF5A1F); color: #fff; }
.srcc-k-step.is-done   { color: var(--sr-accent, #FF5A1F); }
.srcc-k-arrow { color: var(--sr-muted, #6B6B63); font-size: 16px; }

/* Stage */
.srcc-k-stage { flex: 1; display: flex; flex-direction: column; }
.srcc-k-stage--hidden { display: none !important; }

/* Body = sidebar + grille */
.srcc-k-body { display: flex; flex: 1; overflow: hidden; }

/* ── Sidebar catégories ──────────────────────────────────── */
.srcc-k-cats {
  width: 180px; flex-shrink: 0;
  background: var(--sr-surface, #F2F0E9);
  border-right: var(--sr-bw, 2px) solid var(--sr-line, #1A1A1A);
  display: flex; flex-direction: column;
  overflow-y: auto; scrollbar-width: none;
  position: sticky; top: 52px;
  max-height: calc(100vh - 52px - 68px);
}
.srcc-k-cats::-webkit-scrollbar { display: none; }

.srcc-k-cat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--sr-muted, #6B6B63);
  background: transparent; border: none;
  border-bottom: 1px solid rgba(0,0,0,.06);
  cursor: pointer; text-align: left;
  transition: all .15s; position: relative;
}
.srcc-k-cat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 0; background: var(--sr-accent, #FF5A1F); transition: width .2s;
}
.srcc-k-cat.is-active,
.srcc-k-cat:hover { color: var(--sr-ink, #1A1A1A); background: var(--sr-bg, #E4E1D8); }
.srcc-k-cat.is-active::before { width: 3px; }
.srcc-k-cat__count {
  font-size: 10px; font-family: monospace; font-weight: 700;
  background: rgba(0,0,0,.12); padding: 2px 6px;
  border-radius: 999px; opacity: .6;
}
.srcc-k-cat.is-active .srcc-k-cat__count {
  background: var(--sr-accent, #FF5A1F); color: #fff; opacity: 1;
}

/* ── Zone produits ───────────────────────────────────────── */
.srcc-k-products-wrap { flex: 1; overflow-y: auto; padding: 20px; }

.srcc-k-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

/* Carte produit */
.srcc-k-item {
  display: flex; flex-direction: column;
  background: var(--sr-surface, #F2F0E9);
  border: var(--sr-bw, 2px) solid var(--sr-line, #1A1A1A);
  border-radius: var(--sr-radius, 2px);
  overflow: hidden; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  box-shadow: var(--sr-shadow, none);
  transition: transform .14s ease, box-shadow .14s ease;
}
.srcc-k-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

.srcc-k-item__img {
  position: relative; aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  background-color: var(--sr-surface2, #D6D2C6);
}
.srcc-k-item__img .flag, .srcc-k-item__img .srcc-flag {
  position: absolute; top: 8px; left: 8px;
}

.srcc-k-item__body {
  padding: 12px 14px 4px; flex: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.srcc-k-item__name {
  font-family: var(--f-disp, "Anton", sans-serif);
  font-size: 16px; font-weight: 900; text-transform: uppercase;
  line-height: 1.05; letter-spacing: -.01em;
}
.srcc-k-item__desc {
  font-size: 11px; color: var(--sr-muted, #6B6B63);
  line-height: 1.4; flex: 1;
}

.srcc-k-item__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.srcc-k-item__price {
  font-family: var(--f-disp, "Anton", sans-serif);
  font-size: 18px; font-weight: 900; color: var(--sr-ink, #1A1A1A);
}
.srcc-k-item__add {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sr-accent, #FF5A1F); color: #fff;
  font-size: 22px; line-height: 32px; text-align: center;
  flex-shrink: 0;
}

/* ── Barre récap fixe en bas ─────────────────────────────── */
.srcc-k-recapbar {
  position: sticky; bottom: 0; z-index: 70;
  background: var(--sr-ink, #1A1A1A); color: #fff;
  box-shadow: 0 -4px 24px rgba(0,0,0,.2);
}
@keyframes srcc-k-flash {
  0%  { background: var(--sr-ink, #1A1A1A); }
  30% { background: var(--sr-accent, #FF5A1F); }
  100%{ background: var(--sr-ink, #1A1A1A); }
}
.srcc-k-flash { animation: srcc-k-flash .45s ease; }

.srcc-k-recap-toggle {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; padding: 14px 24px;
  background: transparent; border: none; color: #fff; cursor: pointer; gap: 16px;
}
.srcc-k-recap-left  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.srcc-k-recap-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.srcc-k-recap-icon { font-size: 20px; }
.srcc-k-recap-count {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; background: var(--sr-accent, #FF5A1F);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.srcc-k-recap-preview {
  font-size: 12px; color: rgba(255,255,255,.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srcc-k-recap-total {
  font-family: var(--f-disp, "Anton", sans-serif);
  font-size: 22px; font-weight: 900; color: var(--sr-accent, #FF5A1F);
}
.srcc-k-recap-chevron { font-size: 14px; color: rgba(255,255,255,.35); transition: transform .2s; }
.srcc-k-recap-toggle[aria-expanded="true"] .srcc-k-recap-chevron { transform: rotate(180deg); }

.srcc-k-recap-panel {
  background: var(--sr-ink, #1A1A1A);
  border-top: 1px solid rgba(255,255,255,.1);
  max-height: 50vh; overflow-y: auto; padding: 0 24px;
}
.srcc-k-lines .sr-li--rich {
  grid-template-columns: 46px 1fr auto;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 10px 0;
}
.srcc-k-lines .sr-li--rich .srcc-li-name { color: rgba(255,255,255,.9); }
.srcc-k-lines .sr-li--rich .srcc-li-price { color: var(--sr-accent, #FF5A1F); }
.srcc-k-lines .srcc-li-controls button { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.2); }
.srcc-k-lines .srcc-li-controls button:hover { opacity: 1; color: #fff; }

.srcc-k-recap-footer {
  padding: 14px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.srcc-k-subtotal {
  display: flex; gap: 12px; font-size: 14px; color: rgba(255,255,255,.55);
}
.srcc-k-subtotal span:last-child { font-weight: 700; color: #fff; }
.srcc-k-btn-order {
  white-space: nowrap; flex-shrink: 0; justify-content: center;
}

/* ── Checkout (étapes 2, 3) ──────────────────────────────── */
.srcc-k-checkout { max-width: 640px; margin: 40px auto; padding: 0 24px; }
.srcc-k-checkout-title {
  font-family: var(--f-disp, "Anton", sans-serif);
  font-size: clamp(28px, 5vw, 48px); font-weight: 900;
  text-transform: uppercase; margin: 0 0 24px;
}
.srcc-k-back {
  background: none; border: none; font-size: 13px; font-weight: 700;
  color: var(--sr-muted, #6B6B63); cursor: pointer; padding: 0 0 18px;
  text-transform: uppercase; letter-spacing: .04em;
  transition: color .15s;
}
.srcc-k-back:hover { color: var(--sr-ink, #1A1A1A); }

.srcc-k-spots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px; margin-bottom: 4px;
}

/* Paiement recap */
.srcc-k-pay-recap {
  background: var(--sr-surface, #F2F0E9);
  border: var(--sr-bw, 2px) solid var(--sr-line, #1A1A1A);
  border-radius: var(--sr-radius, 2px);
  padding: 14px 18px; margin-bottom: 16px;
}
.srcc-k-pay-line {
  display: flex; justify-content: space-between;
  padding: 7px 0; font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.srcc-k-pay-line:last-child { border-bottom: none; }
.srcc-k-pay-line--info { color: var(--sr-muted, #6B6B63); font-size: 13px; }
.srcc-k-pay-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 20px;
}
.srcc-k-pay-total-val {
  font-family: var(--f-disp, "Anton", sans-serif);
  font-size: 30px; font-weight: 900; color: var(--sr-accent, #FF5A1F);
}

/* ── Modale menu/combo ───────────────────────────────────── */
.srcc-k-menumodal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: flex-end; justify-content: center;
}
.srcc-k-menumodal--hidden { display: none; }
.srcc-k-menumodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
}
.srcc-k-menumodal__card {
  position: relative; z-index: 1;
  background: var(--sr-surface, #F2F0E9);
  border-radius: calc(var(--sr-radius, 2px) + 10px) calc(var(--sr-radius, 2px) + 10px) 0 0;
  padding: 26px 26px 32px; width: 100%; max-width: 560px;
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0,0,0,.25);
  animation: srcc-k-slideup .3s cubic-bezier(.23,1,.32,1);
}
@keyframes srcc-k-slideup { from{ transform:translateY(100%); } to{ transform:translateY(0); } }

.srcc-k-menumodal__title {
  font-family: var(--f-disp, "Anton", sans-serif);
  font-size: 24px; text-transform: uppercase; margin: 0 0 6px;
}
.srcc-k-menumodal__sub { font-size: 13px; color: var(--sr-muted, #6B6B63); margin: 0 0 18px; }
.srcc-k-menumodal__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.srcc-k-menumodal__actions { display: flex; justify-content: center; }

.srcc-k-formula {
  border: var(--sr-bw, 2px) solid var(--sr-line, #1A1A1A);
  border-radius: var(--sr-radius, 2px); padding: 14px 16px;
  box-shadow: var(--sr-shadow, none);
}
.srcc-k-formula__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.srcc-k-formula__head strong { font-size: 16px; font-weight: 700; }
.srcc-k-formula__price {
  font-weight: 700; color: var(--sr-accent, #FF5A1F);
  background: rgba(255,90,31,.08); padding: 3px 10px; border-radius: 999px;
  font-size: 14px;
}
.srcc-k-formula__desc { font-size: 13px; color: var(--sr-muted, #6B6B63); margin: 0 0 8px; }
.srcc-k-formula__steps { font-size: 12px; color: var(--sr-muted, #6B6B63); margin: 0 0 12px; }
.srcc-k-formula-add { width: 100%; justify-content: center; }

.srcc-k-menu-skip {
  background: none; border: none; font-size: 13px; font-weight: 700;
  color: var(--sr-muted, #6B6B63); cursor: pointer; padding: 8px 16px;
  border-radius: 999px; transition: color .15s;
}
.srcc-k-menu-skip:hover { color: var(--sr-ink, #1A1A1A); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 700px) {
  .srcc-k-body { flex-direction: column; }
  .srcc-k-cats {
    width: 100%; flex-direction: row; overflow-x: auto;
    overflow-y: hidden; max-height: none; position: relative; top: 0;
    border-right: none; border-bottom: var(--sr-bw,2px) solid var(--sr-line,#1A1A1A);
    scrollbar-width: none;
  }
  .srcc-k-cat {
    flex-direction: column; gap: 3px; padding: 10px 14px;
    white-space: nowrap; flex-shrink: 0;
    border-bottom: none; border-right: 1px solid rgba(0,0,0,.06);
  }
  .srcc-k-cat__count { display: none; }
  .srcc-k-cat::before { width: 100%; height: 0; bottom: 0; top: auto; transition: height .2s; }
  .srcc-k-cat.is-active::before { height: 3px; width: 100%; }
  .srcc-k-products-wrap { padding: 12px; }
  .srcc-k-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; }
  .srcc-k-item__name { font-size: 14px; }
  .srcc-k-recap-preview { display: none; }
  .srcc-k-steps { display: none; }
  .srcc-k-spots { grid-template-columns: 1fr; }
}

/* ── Grille formules dans le kiosk ───────────────────────── */
.srcc-k-grid--formulas {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.srcc-k-formula-card {
  display: flex;
  flex-direction: column;
  background: var(--sr-surface, #F2F0E9);
  border: var(--sr-bw, 2px) solid var(--sr-line, #1A1A1A);
  border-radius: var(--sr-radius, 2px);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  box-shadow: var(--sr-shadow, none);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.srcc-k-formula-card:hover {
  transform: translateY(-3px);
  border-color: var(--sr-accent, #FF5A1F);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.srcc-k-formula-card__img {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: var(--sr-surface2, #D6D2C6);
  flex-shrink: 0;
}
.srcc-k-formula-card__img--ph {
  background: linear-gradient(135deg, var(--sr-accent, #FF5A1F), var(--sr-accent2, #2B2F36));
}

.srcc-k-formula-card__body {
  padding: 14px 16px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.srcc-k-formula-card__name {
  font-family: var(--f-disp, "Anton", sans-serif);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
}
.srcc-k-formula-card__desc {
  font-size: 12px;
  color: var(--sr-muted, #6B6B63);
  line-height: 1.4;
}
.srcc-k-formula-card__steps {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sr-accent, #FF5A1F);
  opacity: .8;
  margin-top: 2px;
}

.srcc-k-formula-card__foot {
  padding: 10px 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.srcc-k-formula-card__price {
  font-family: var(--f-disp, "Anton", sans-serif);
  font-size: 22px;
  font-weight: 900;
  color: var(--sr-ink, #1A1A1A);
}
.srcc-k-formula-card__cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: var(--sr-accent, #FF5A1F);
  color: #fff;
  border-radius: var(--sr-radius, 2px);
  transition: background .15s;
}
.srcc-k-formula-card:hover .srcc-k-formula-card__cta {
  background: var(--sr-ink, #1A1A1A);
}

/* Cat "Nos menus" : style distinct */
.srcc-k-cat--formulas {
  border-left: 3px solid var(--sr-accent, #FF5A1F);
}
.srcc-k-cat--formulas .srcc-k-cat__count {
  background: var(--sr-accent, #FF5A1F);
  color: #fff;
  opacity: 1;
}

/* ── Popup "En faire un menu ?" ──────────────────────────── */
.srcc-k-proposal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: flex-end; justify-content: center;
}
.srcc-k-proposal--hidden { display: none; }

.srcc-k-proposal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(4px);
}
.srcc-k-proposal-card {
  position: relative; z-index: 1;
  background: var(--sr-surface, #F2F0E9);
  border-radius: calc(var(--sr-radius,2px) + 12px) calc(var(--sr-radius,2px) + 12px) 0 0;
  width: 100%; max-width: 600px;
  max-height: 82vh; overflow-y: auto;
  padding: 24px 24px 32px;
  box-shadow: 0 -10px 48px rgba(0,0,0,.22);
  animation: srcc-k-slideup .3s cubic-bezier(.23,1,.32,1);
}

.srcc-k-proposal-head { margin-bottom: 18px; }
.srcc-k-proposal-head h3 {
  font-family: var(--f-disp,"Anton",sans-serif);
  font-size: 22px; text-transform: uppercase; margin: 0 0 5px;
}
.srcc-k-proposal-head p {
  font-size: 13px; color: var(--sr-muted,#6B6B63); margin: 0;
}

.srcc-k-proposal-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}

/* Carte formule dans le popup */
.srcc-k-proposal-formula {
  display: flex; align-items: center; gap: 14px;
  background: var(--sr-bg, #E4E1D8);
  border: var(--sr-bw,2px) solid var(--sr-line,#1A1A1A);
  border-radius: var(--sr-radius,2px);
  padding: 12px;
  cursor: pointer; font: inherit; color: inherit; text-align: left;
  box-shadow: var(--sr-shadow,none);
  transition: border-color .14s, transform .12s, box-shadow .14s;
}
.srcc-k-proposal-formula:hover {
  border-color: var(--sr-accent,#FF5A1F);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}

.srcc-k-pf-img {
  width: 64px; height: 64px; border-radius: calc(var(--sr-radius,2px) + 2px);
  background-size: cover; background-position: center;
  background-color: var(--sr-surface2,#D6D2C6);
  flex-shrink: 0;
}
.srcc-k-pf-img--ph {
  background: linear-gradient(135deg,var(--sr-accent,#FF5A1F),var(--sr-accent2,#2B2F36));
}

.srcc-k-pf-body {
  display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0;
}
.srcc-k-pf-name {
  font-family: var(--f-disp,"Anton",sans-serif);
  font-size: 17px; font-weight: 900; text-transform: uppercase;
  line-height: 1.05;
}
.srcc-k-pf-desc {
  font-size: 12px; color: var(--sr-muted,#6B6B63); line-height: 1.35;
}
.srcc-k-pf-steps {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sr-accent,#FF5A1F); opacity: .85;
}

.srcc-k-pf-price {
  font-family: var(--f-disp,"Anton",sans-serif);
  font-size: 18px; font-weight: 900;
  color: var(--sr-ink,#1A1A1A); flex-shrink: 0;
}

.srcc-k-proposal-footer {
  display: flex; justify-content: center;
}
.srcc-k-proposal-skip {
  background: none; border: none;
  font-size: 13px; font-weight: 700;
  color: var(--sr-muted,#6B6B63);
  cursor: pointer; padding: 8px 16px;
  border-radius: 999px;
  transition: color .15s;
}
.srcc-k-proposal-skip:hover { color: var(--sr-ink,#1A1A1A); }