/* ============================================================
   Sit 'n Dip — Storefront SPA themes (themes.css)
   Mobile-first (375px base). Enhancements via min-width ≥640px only.
   Consumes JS-set vars on :root: --sf-primary, --sf-accent, --sf-bg, --sf-font
   html[data-theme="noir|signature|nuit-gourmande|fraicheur|apple-noir|terroir"]
   html[dir="ltr|rtl"], .sf-grid[data-card="..."]
   ============================================================ */

/* ---------- 0. Reset boîte : width inclut padding/border (anti-débordement mobile) ---------- */
.sf-checkout *, .sf-checkout *::before, .sf-checkout *::after,
.sf-sheet *, .sf-sheet *::before, .sf-sheet *::after,
.sf-modal *, .sf-modal *::before, .sf-modal *::after { box-sizing: border-box; }

/* ---------- 1. Base tokens (fallbacks; JS overrides inline) ---------- */
:root {
  --sf-primary: #161616;
  --sf-accent: #161616;
  --sf-bg: #FFFFFF;
  --sf-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;

  /* theme-derived tokens (themes override below) */
  --sf-surface: #FFFFFF;
  --sf-surface-2: #F5F5F5;
  --sf-text: #161616;
  --sf-muted: #6B6B6B;
  --sf-border: #E5E5E5;
  --sf-radius: 18px;
  --sf-radius-sm: 12px;
  --sf-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  --sf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --sf-hero-shade: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  --sf-success: #1FA855;
  --sf-danger: #E5484D;
  --sf-card-bg: #FFFFFF;
  --sf-header-bg: #FFFFFF;
  --sf-badge-text: #FFFFFF;
  --sf-input-bg: #FFFFFF;
  --sf-sheet-bg: #FFFFFF;
  --sf-sheet-radius: 22px;
  --sf-divider: #EEE;

  /* Easing Apple : doux et presque imperceptible, partout pareil. */
  --sf-ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* Échelle de police (Dashboard → Site web → Taille de la police). JS écrit
     --sf-fs-m (mobile) et --sf-fs-d (desktop) ; le breakpoint choisit. */
  --sf-fs-m: 1;
  --sf-fs-d: 1;
  --sf-fs: var(--sf-fs-m);
}
@media (min-width: 768px) {
  :root { --sf-fs: var(--sf-fs-d); }
}

/* ---------- 2. Generic components ---------- */
.sf-hidden { display: none !important; }

.sf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 44px; padding: 0 18px;
  font-family: var(--sf-font); font-size: calc(14px * var(--sf-fs, 1)); font-weight: 600;
  color: var(--sf-text);
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sf-btn, .sf-card-add, .sf-ccbtn, .sf-geobtn, #promoApply, .sf-map-result, .sf-modal-list button, .sf-qty button {
  transition: transform .12s var(--sf-ease);
}
.sf-btn:active { transform: scale(0.97); }
button:active { transform: scale(0.97); }
button:disabled:active { transform: none; }
.sf-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.sf-btn-primary {
  background: var(--sf-primary);
  border-color: var(--sf-primary);
  color: #fff;
  box-shadow: var(--sf-shadow-sm);
  width: 100%;
}
.sf-btn-primary:disabled { background: var(--sf-primary); border-color: var(--sf-primary); }

.sf-btn-whatsapp {
  background: #25D366; border-color: #25D366; color: #fff;
  width: 100%;
  font-size: calc(15px * var(--sf-fs, 1));
}
/* CTA aux couleurs de la marque du moyen de paiement : logo + libellé. */
#placeOrder {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background-color .25s var(--sf-ease), border-color .25s var(--sf-ease), color .25s var(--sf-ease), transform .12s var(--sf-ease), opacity .2s var(--sf-ease);
}
#placeOrder .sf-cta-logo {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  object-fit: contain; background: #fff; display: block; padding: 2px;
}
#placeOrder .sf-cta-label { transition: opacity .2s var(--sf-ease); }
/* Logos de paiement dans le résumé de l'accordéon (plus petits, alignés). */
.sf-sum-logo {
  width: 26px; height: 20px; border-radius: 4px; flex-shrink: 0;
  object-fit: contain; background: #fff; padding: 1px 3px;
  margin-right: 4px; vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
  #placeOrder, #placeOrder .sf-cta-label { transition: none; }
}

.sf-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--sf-font); font-size: calc(14px * var(--sf-fs, 1)); /* ≥16px: no iOS zoom */
  color: var(--sf-text);
  background: var(--sf-input-bg);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
  -webkit-appearance: none; appearance: none;
}
.sf-input:focus { outline: 2px solid var(--sf-primary); outline-offset: 0; border-color: var(--sf-primary); }
/* iOS anti-zoom (règle Elhadji 2026-10-07) : calc(14px * --sf-fs) vaut
   14px à l'échelle par défaut → Safari zoome au toucher du champ.
   Sur tactile, plancher 16px (l'échelle boutique reste respectée
   au-delà). Garde « ios-form-overflow ». */
@media (pointer: coarse) {
  .sf-input { font-size: max(16px, calc(14px * var(--sf-fs, 1))); }
  .sf-account-body .sf-input { font-size: max(16px, calc(14px * var(--sf-fs, 1))); }
  .sf-toolbar.is-stuck select.sf-input { font-size: max(16px, calc(11px * var(--sf-fs, 1))); }
  #bookPhoneWrap .pf-num { font-size: max(16px, calc(14px * var(--sf-fs, 1))); }
}
select.sf-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--sf-muted) 50%), linear-gradient(135deg, var(--sf-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
  padding-inline-end: 32px;
}
textarea.sf-input { min-height: 88px; resize: vertical; }

.sf-section-title {
  font-family: var(--sf-font);
  font-size: calc(16px * var(--sf-fs, 1)); font-weight: 700;
  color: var(--sf-text);
  margin: 0 0 10px;
  padding-inline: 16px;
}

/* Toast */
.sf-toast {
  position: fixed; inset-inline: 16px; bottom: 24px;
  z-index: 1000;
  background: #1B1A21; color: #fff;
  font-family: var(--sf-font); font-size: calc(13px * var(--sf-fs, 1));
  padding: 14px 18px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s var(--sf-ease), transform .3s var(--sf-ease);
  pointer-events: none;
  max-width: 560px; margin-inline: auto;
  text-align: center;
}
.sf-toast.show { opacity: 1; transform: translateY(0); }

/* Modal */
.sf-modal {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end; justify-content: center;
}
.sf-modal-box {
  width: 100%; max-width: 560px;
  max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--sf-surface);
  border-radius: var(--sf-sheet-radius) var(--sf-sheet-radius) 0 0;
  overflow: hidden;
}
.sf-modal-list {
  scroll-behavior: smooth;
  background: var(--sf-surface);
  width: 100%;
  flex: 1 1 auto; min-height: 0;
  max-height: 70vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  padding: 12px 8px 8px;
}
.sf-modal-list::before {
  content: ""; display: block;
  width: 44px; height: 5px; border-radius: 3px;
  background: var(--sf-border); margin: 6px auto 12px;
}
.sf-modal-list button {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 48px;
  padding: 8px 16px;
  font-family: var(--sf-font); font-size: calc(14px * var(--sf-fs, 1));
  color: var(--sf-text); background: none; border: 0;
  border-bottom: 1px solid var(--sf-divider);
  cursor: pointer; text-align: start;
}
.sf-modal-list button:last-child { border-bottom: 0; }
.sf-modal-list button:active { background: var(--sf-surface-2); }
.sf-modal-box > .sf-btn {
  margin: 8px 16px calc(16px + env(safe-area-inset-bottom));
}
.sf-modal-title {
  margin: 0; padding: 18px 20px 4px;
  font-size: calc(16px * var(--sf-fs, 1)); font-weight: 800; letter-spacing: -.3px;
  color: var(--sf-text);
}
/* Sélecteur de langue plein écran — utilise tout l'écran (mobile-first). */
#langModal.sf-fullscreen {
  align-items: stretch; justify-content: stretch;
  background: var(--sf-surface);
}
#langModal.sf-fullscreen .sf-modal-box {
  max-width: none; max-height: none; max-height: none;
  height: 100%; height: 100dvh;
  border-radius: 0;
}
#langModal.sf-fullscreen .sf-modal-list {
  max-height: none;
  padding: 8px 8px calc(16px + env(safe-area-inset-bottom));
}
#langModal.sf-fullscreen .sf-modal-list::before { display: none; }
#langModal.sf-fullscreen .sf-modal-list button {
  min-height: 56px; font-size: calc(15px * var(--sf-fs, 1));
  border-bottom: 1px solid var(--sf-divider);
}
/* Erreurs de validation inline (checkout) */
.sf-input.sf-invalid {
  border-color: #c0392b;
  background: #fff7f6;
}
.sf-err {
  margin: 6px 2px 10px;
  font-size: calc(11px * var(--sf-fs, 1)); font-weight: 600;
  color: #c0392b;
}

/* Overlay */
.sf-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--sf-ease);
}
.sf-overlay.show { opacity: 1; pointer-events: auto; }

/* ---------- 3. Header / hours / hero / cats / promo / toolbar ---------- */
.sf-header {
  position: sticky; top: 0; z-index: 500;
  background: var(--sf-header-bg);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--sf-divider);
  border-radius: 0 0 20px 20px;
}
.sf-logo { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.sf-head-brand {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
}
.sf-brand-name {
  font-family: var(--sf-font); font-weight: 600; font-size: calc(16px * var(--sf-fs, 1)); letter-spacing: -0.2px;
  color: var(--sf-text); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-head-actions { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
.sf-head-actions button {
  position: relative;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sf-surface-2); border: 1px solid var(--sf-border);
  border-radius: 12px;
  font-family: var(--sf-font); font-size: calc(13px * var(--sf-fs, 1)); font-weight: 600;
  color: var(--sf-text); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* Slot du bouton chat (v1.8.407) : le widget chat y monte son bouton sigle.
   Toujours rendu (largeur 0 tant qu'il est vide) pour que le widget puisse
   le détecter comme emplacement disponible. */
.sf-head-actions .tcw-slot { display: inline-flex; align-items: center; }

/* Icône commande groupée dans l'en-tête (v1.8.408) : le module partagé
   group-order.js monte le bouton dans .grp-hdr-slot ; le chrome vient de la
   règle générique .sf-head-actions button ci-dessus, seule la couleur de
   l'icône est propre à la boutique : couleur principale du site web. */
.sf-head-actions .grp-hdr-slot { display: inline-flex; align-items: center; }
.sf-head-actions .grp-hdr-btn { color: var(--sf-primary, #161616); }

/* Bouton hamburger : même gabarit que les boutons d'en-tête, à gauche du logo. */
.sf-menubtn {  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sf-surface-2); border: 1px solid var(--sf-border);
  border-radius: 12px; color: var(--sf-text); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* ---------- Drawer latéral ---------- */
.sf-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 900;
  width: min(320px, 84vw);
  background: var(--sf-surface);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
  box-shadow: 12px 0 40px rgba(0,0,0,0.18);
  transform: translateX(-105%);
  transition: transform .32s var(--sf-ease), visibility .32s;
  visibility: hidden;
}
html[dir="rtl"] .sf-drawer { left: auto; right: 0; transform: translateX(105%); box-shadow: -12px 0 40px rgba(0,0,0,0.18); }
.sf-drawer.open { transform: none; visibility: visible; }
.sf-drawer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--sf-divider);
}
.sf-drawer-name {
  flex: 1; min-width: 0;
  font-family: var(--sf-font); font-size: calc(15px * var(--sf-fs, 1)); font-weight: 600; letter-spacing: -0.2px;
  color: var(--sf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-drawer-x {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  font-size: calc(15px * var(--sf-fs, 1)); color: var(--sf-muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sf-drawer-nav { padding: 8px 0 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sf-drawer-nav button {
  width: 100%; min-height: 54px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: transparent; border: 0; border-bottom: 1px solid var(--sf-divider);
  font-family: var(--sf-font); font-size: calc(14px * var(--sf-fs, 1)); font-weight: 500; color: var(--sf-text);
  text-align: start; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .25s var(--sf-ease);
}
.sf-drawer-nav button:active { background: var(--sf-surface-2); }
.sf-drawer-nav button > span:first-child { flex: 1; }
.sf-drawer-chev { color: var(--sf-muted); font-size: calc(18px * var(--sf-fs, 1)); font-weight: 400; }
#cartCount {
  position: absolute; top: -6px; inset-inline-end: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--sf-accent); color: #fff;
  font-size: calc(10px * var(--sf-fs, 1)); font-weight: 700;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Hours banner */
.sf-hours {
  font-family: var(--sf-font); font-size: calc(12px * var(--sf-fs, 1)); font-weight: 600;
  text-align: center; padding: 8px 16px;
}
.sf-hours.open { background: #E7F7ED; color: #127A3E; }
.sf-hours.closed { background: #FDECEA; color: #B4232A; }
/* ---------- bloc « magasin fermé » (jumeau du marketplace /r/, ext. n°7) ---------- */
.sf-closed-block{display:flex;gap:12px;align-items:flex-start;background:#fef6e8;border:1px solid #f0dfb8;
  border-radius:14px;padding:14px 16px;margin:12px 16px}
.sf-closed-icon{flex:none;width:36px;height:36px;border-radius:50%;background:#f5c518;display:flex;
  align-items:center;justify-content:center;color:#111}
.sf-closed-icon svg{width:20px;height:20px}
.sf-closed-text{display:flex;flex-direction:column;gap:2px;font-size:13px;color:#5c4a1a}
.sf-closed-text strong{font-size:14px;color:#111}
.sf-closed-next{font-weight:700;color:#111;margin-top:4px}
@media (prefers-color-scheme: dark){
  .sf-closed-block{background:#3a2f10;border-color:#6b5518}
  .sf-closed-text{color:#e8cf8a}
  .sf-closed-text strong,.sf-closed-next{color:#ffe9a8}
}
/* Panneau Infos : rendu par le composant partagé public/shared/boutique-info.css
   (v1.8.427) — les anciennes classes locales du panneau sont supprimées. */

/* Hero */
.sf-hero {
  position: relative; min-height: 220px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--sf-surface-2);
  border-radius: 0 0 24px 24px;
}
.sf-hero-media { position: absolute; inset: 0; }
.sf-hero-media img, .sf-hero-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sf-hero-shade { position: absolute; inset: 0; background: var(--sf-hero-shade); pointer-events: none; }
.sf-hero-content {
  position: relative; z-index: 2;
  padding: 20px 16px 24px; width: 100%;
  color: #fff;
}
.sf-hero-content h1 {
  margin: 0 0 6px; font-family: var(--sf-font);
  font-size: calc(24px * var(--sf-fs, 1)); font-weight: 600; line-height: 1.2; letter-spacing: -0.4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.sf-hero-content p { margin: 0 0 14px; font-size: calc(13px * var(--sf-fs, 1)); opacity: 0.92; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.sf-hero-content .sf-btn { width: auto; min-width: 160px; }

/* Réseaux sociaux après la ligne Itinéraire/Appeler : pastilles 44px */
.sf-store-social { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.sf-store-social a {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sf-surface-2); color: var(--sf-text);
  border: 1px solid var(--sf-divider);
  transition: transform .18s ease, background .18s ease;
}
.sf-store-social a:active { transform: scale(.93); }
.sf-store-social svg { width: 22px; height: 22px; display: block; }

/* Categories : UNE SEULE barre sticky, défilement horizontal */
.sf-cats {
  position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 400;
  background: color-mix(in srgb, var(--sf-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sf-divider);
}
#catList {
  display: flex; gap: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 16px;
  scrollbar-width: none;
}
#catList::-webkit-scrollbar { display: none; }
.sf-cat {
  flex-shrink: 0; min-height: 40px;
  padding: 8px 16px;
  font-family: var(--sf-font); font-size: calc(13px * var(--sf-fs, 1)); font-weight: 600;
  color: var(--sf-muted);
  background: var(--sf-surface-2); border: 1px solid var(--sf-border);
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .3s var(--sf-ease), color .3s var(--sf-ease), border-color .3s var(--sf-ease);
}
.sf-cat.active {
  background: var(--sf-primary); border-color: var(--sf-primary); color: #fff;
}

/* Promo banners */
#promoBanners { padding: 12px 16px 0; display: grid; gap: 10px; }
.sf-promo-banner {
  font-family: var(--sf-font); font-size: calc(13px * var(--sf-fs, 1)); font-weight: 600;
  color: #fff;
  background: linear-gradient(120deg, var(--sf-primary), var(--sf-accent));
  border-radius: var(--sf-radius);
  padding: 14px 16px;
  box-shadow: var(--sf-shadow-sm);
}

/* Toolbar */
/* Sentinelle (invisible) : détecte quand la barre de recherche atteint le header */
#menuSentinel { height: 1px; }
#menuTitle { scroll-margin-top: calc(140px + env(safe-area-inset-top)); }
.sf-toolbar {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 16px;
  /* Toujours sticky sous le header : en se collant, elle "rejoint" la barre du haut */
  position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 450;
  transition: padding .35s var(--sf-ease), background-color .35s var(--sf-ease),
    box-shadow .35s var(--sf-ease), border-color .35s var(--sf-ease);
  border-bottom: 1px solid transparent;
  border-radius: 0 0 20px 20px;
}
.sf-toolbar .sf-input { flex: 1; min-width: 0; }
.sf-toolbar select.sf-input { flex: 0 1 130px; }
/* État collé : la recherche se compacte et fusionne visuellement avec le header */
.sf-toolbar.is-stuck {
  padding: 9px 12px;
  background: color-mix(in srgb, var(--sf-header-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--sf-divider);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.sf-toolbar .sf-input {
  transition: min-height .35s var(--sf-ease), height .35s var(--sf-ease),
    font-size .35s var(--sf-ease), padding .35s var(--sf-ease),
    border-radius .35s var(--sf-ease), background-color .35s var(--sf-ease);
}
.sf-toolbar.is-stuck #searchInput {
  min-height: 0; height: 38px;
  font-size: calc(14px * var(--sf-fs, 1)); /* ≥16px : pas de zoom auto iOS */
  border-radius: 999px;
}
/* Le filtre devient un beau petit bouton compact en haut */
.sf-toolbar.is-stuck select.sf-input {
  flex: 0 0 auto; width: auto; max-width: 42vw;
  min-height: 0; height: 38px;
  padding: 0 30px 0 14px;
  font-size: calc(11px * var(--sf-fs, 1)); font-weight: 700;
  border-radius: 999px;
  background-color: var(--sf-surface-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Les pastilles restent en dessous de la barre compacte */
.sf-cats {
  top: calc(60px + 56px + env(safe-area-inset-top));
}
.sf-catsec { scroll-margin-top: calc(200px + env(safe-area-inset-top)); }
@media (prefers-reduced-motion: reduce) {
  .sf-toolbar, .sf-toolbar .sf-input { transition: none; }
}

/* ---------- 4. Product grid & cards (base = classique) ---------- */
.sf-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  padding: 4px 16px 12px;
}

/* ---------- 4b. Category sections (one per category) ---------- */
#menuSections { padding-bottom: 28px; transition: opacity .28s var(--sf-ease); }
#menuSections.sf-catswap-out { opacity: 0; transition-duration: .12s; }
.sf-catsec { scroll-margin-top: calc(140px + env(safe-area-inset-top)); }
.sf-catsec-title {
  font-family: var(--sf-font);
  font-size: calc(17px * var(--sf-fs, 1)); font-weight: 600; letter-spacing: -0.2px;
  color: var(--sf-text);
  margin: 0; padding: 18px 16px 10px;
  display: flex; align-items: center; gap: 8px;
}
.sf-catsec-count {
  font-size: calc(11px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-muted);
  background: var(--sf-surface-2); border: 1px solid var(--sf-border);
  border-radius: 999px; padding: 2px 10px;
}
.sf-no-results {
  text-align: center; color: var(--sf-muted);
  font-family: var(--sf-font); font-size: calc(13px * var(--sf-fs, 1));
  padding: 36px 24px;
}

/* ---------- 4c. Scroll reveal (JS adds .sf-in via IntersectionObserver) ---------- */
.sf-card, .sf-catsec-title {
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s var(--sf-ease), transform .4s var(--sf-ease);
}
.sf-card.sf-in, .sf-catsec-title.sf-in { opacity: 1; transform: none; }
/* Grille sans animation : cartes fixes, visibles immédiatement. */
.sf-noanim .sf-card, .sf-noanim .sf-catsec-title {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .sf-card, .sf-catsec-title { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.sf-card {
  background: var(--sf-card-bg);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  overflow: hidden;
  box-shadow: var(--sf-shadow-sm);
  display: flex; flex-direction: column;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sf-card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sf-surface-2); }
.sf-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-card-badge {
  position: absolute; top: 8px; inset-inline-start: 8px;
  background: var(--sf-accent); color: var(--sf-badge-text, #fff);
  font-size: calc(10px * var(--sf-fs, 1)); font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  max-width: calc(100% - 16px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-card-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sf-card-name {
  font-family: var(--sf-font); font-size: calc(13px * var(--sf-fs, 1)); font-weight: 700;
  color: var(--sf-text); margin: 0; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-card-desc {
  font-size: calc(11px * var(--sf-fs, 1)); color: var(--sf-muted); margin: 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-card-foot {
  margin-top: auto; padding-top: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sf-card-price { font-size: calc(14px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-text); white-space: nowrap; }
/* Prix de base barré quand une promo produit est active (menu façon Ayda). */
.sf-card-oldprice { font-size: calc(10px * var(--sf-fs, 1)); font-weight: 400; color: var(--sf-muted); text-decoration: line-through; white-space: nowrap; }
/* Équivalent approximatif dans la devise d'affichage — discret, style Apple. */
.sf-card-prices { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.sf-card-approx { font-size: calc(10px * var(--sf-fs, 1)); font-weight: 400; color: var(--sf-muted); white-space: nowrap; }
/* Classique (défaut) : pastille "+" circulaire — ajout en un tap. */
.sf-card-add {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sf-primary); color: #fff;
  border: 0; border-radius: 50%;
  font-size: calc(22px * var(--sf-fs, 1)); font-weight: 600; line-height: 1;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  flex-shrink: 0;
}
/* Les 14 autres styles : bouton "Ajouter" pleine largeur (traitements existants). */
.sf-grid:not([data-card="classique"]) .sf-card-foot {
  flex-direction: column; align-items: stretch;
}
.sf-grid:not([data-card="classique"]) .sf-card-add {
  width: 100%; height: auto; min-height: 44px;
  border-radius: 12px;
  font-family: var(--sf-font); font-size: calc(14px * var(--sf-fs, 1)); line-height: 1.2;
  padding: 10px 12px; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.sf-card-add:active { transform: scale(0.97); }
.sf-card-unavail {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; font-size: calc(12px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-muted);
}

/* ----- Card style variants (on .sf-grid[data-card="X"] .sf-card) ----- */

/* classique = base (explicit restatement for clarity) */
.sf-grid[data-card="classique"] .sf-card { /* inherits base */ }

/* sombre — dark card */
.sf-grid[data-card="sombre"] .sf-card {
  background: #1E1D24; border-color: #33323B; color: #F2F1F5;
}
.sf-grid[data-card="sombre"] .sf-card-name { color: #F2F1F5; }
.sf-grid[data-card="sombre"] .sf-card-desc { color: #A9A6B3; }
.sf-grid[data-card="sombre"] .sf-card-price { color: #FFD37A; }
.sf-grid[data-card="sombre"] .sf-card-img { background: #2A2932; }

/* minimal — no image, text-only row */
.sf-grid[data-card="minimal"] { grid-template-columns: 1fr; gap: 0; }
.sf-grid[data-card="minimal"] .sf-card {
  flex-direction: row; align-items: center;
  border: 0; border-bottom: 1px solid var(--sf-divider);
  border-radius: 0; box-shadow: none;
  padding: 6px 0;
}
.sf-grid[data-card="minimal"] .sf-card-img,
.sf-grid[data-card="minimal"] .sf-card-badge { display: none; }
.sf-grid[data-card="minimal"] .sf-card-body { padding: 6px 0; }
.sf-grid[data-card="minimal"] .sf-card-desc { display: none; }
.sf-grid[data-card="minimal"] .sf-card-foot { padding-top: 0; }
.sf-grid[data-card="minimal"] .sf-card-add { min-height: 40px; font-size: calc(13px * var(--sf-fs, 1)); font-weight: 600; }

/* detaille — image left, desc + meta */
.sf-grid[data-card="detaille"] { grid-template-columns: 1fr; }
.sf-grid[data-card="detaille"] .sf-card { flex-direction: row; }
.sf-grid[data-card="detaille"] .sf-card-img { width: 110px; min-width: 110px; aspect-ratio: auto; align-self: stretch; }
.sf-grid[data-card="detaille"] .sf-card-body { padding: 10px 12px; }
.sf-grid[data-card="detaille"] .sf-card-desc { -webkit-line-clamp: 3; }

/* grande — large image, overlaid name */
.sf-grid[data-card="grande"] { grid-template-columns: 1fr; }
.sf-grid[data-card="grande"] .sf-card-img { aspect-ratio: 16 / 9; }
.sf-grid[data-card="grande"] .sf-card-name {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 28px 12px 10px; margin: 0;
  color: #fff; font-size: calc(17px * var(--sf-fs, 1));
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.72));
  -webkit-line-clamp: 2;
}
.sf-grid[data-card="grande"] .sf-card-img { position: relative; }
.sf-grid[data-card="grande"] .sf-card-desc { -webkit-line-clamp: 2; }

/* compact — horizontal slim row, small thumb */
.sf-grid[data-card="compact"] { grid-template-columns: 1fr; gap: 8px; }
.sf-grid[data-card="compact"] .sf-card { flex-direction: row; align-items: center; border-radius: 12px; }
.sf-grid[data-card="compact"] .sf-card-img { width: 64px; min-width: 64px; height: 64px; aspect-ratio: auto; margin: 8px; border-radius: 8px; }
.sf-grid[data-card="compact"] .sf-card-badge { display: none; }
.sf-grid[data-card="compact"] .sf-card-body { padding: 8px 0; flex-direction: row; align-items: center; gap: 8px; }
.sf-grid[data-card="compact"] .sf-card-desc { display: none; }
.sf-grid[data-card="compact"] .sf-card-name { font-size: calc(12px * var(--sf-fs, 1)); flex: 1; -webkit-line-clamp: 1; }
.sf-grid[data-card="compact"] .sf-card-foot { padding-top: 0; margin: 0; }
.sf-grid[data-card="compact"] .sf-card-price { font-size: calc(12px * var(--sf-fs, 1)); }
.sf-grid[data-card="compact"] .sf-card-add { border-radius: 10px; }

/* aurora — gradient border glow */
.sf-grid[data-card="aurora"] .sf-card {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--sf-card-bg), var(--sf-card-bg)) padding-box,
    linear-gradient(135deg, var(--sf-primary), var(--sf-accent), #00E5FF) border-box;
  box-shadow: 0 0 18px rgba(76,53,222,0.25);
}

/* elegant — serif name, airy */
.sf-grid[data-card="elegant"] .sf-card { border: 0; box-shadow: none; border-bottom: 1px solid var(--sf-border); border-radius: 0; }
.sf-grid[data-card="elegant"] .sf-card-img { border-radius: var(--sf-radius); aspect-ratio: 16 / 10; }
.sf-grid[data-card="elegant"] .sf-card-name {
  font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: calc(18px * var(--sf-fs, 1)); letter-spacing: 0.2px;
}
.sf-grid[data-card="elegant"] .sf-card-body { padding: 14px 4px; }
.sf-grid[data-card="elegant"] .sf-card-desc { font-style: italic; }
.sf-grid[data-card="elegant"] .sf-card-add { background: none; border: 1.5px solid var(--sf-primary); color: var(--sf-primary); border-radius: 999px; min-height: 42px; }

/* heritage — vintage badge, sepia tint */
.sf-grid[data-card="heritage"] .sf-card { border: 1px solid #C9A876; background: #FBF6EC; }
.sf-grid[data-card="heritage"] .sf-card-img img { filter: sepia(0.35) contrast(0.98); }
.sf-grid[data-card="heritage"] .sf-card-badge {
  background: #8A5A2B; border: 1px dashed #F3E4C8; border-radius: 6px;
  font-family: Georgia, serif; letter-spacing: 1px; text-transform: uppercase; font-size: calc(9px * var(--sf-fs, 1));
}
.sf-grid[data-card="heritage"] .sf-card-name { font-family: Georgia, serif; color: #5C3D1E; }
.sf-grid[data-card="heritage"] .sf-card-price { color: #8A5A2B; }
.sf-grid[data-card="heritage"] .sf-card-add { background: #8A5A2B; border-radius: 6px; }

/* sale-promo — bold promo badge, punchy red */
.sf-grid[data-card="sale-promo"] .sf-card { border: 2px solid #E5484D; }
.sf-grid[data-card="sale-promo"] .sf-card-badge {
  background: #E5484D; color: #fff;
  font-size: calc(12px * var(--sf-fs, 1)); font-weight: 900; font-style: italic;
  transform: rotate(-4deg); border-radius: 6px;
  box-shadow: 0 4px 10px rgba(229,72,77,0.4);
}
.sf-grid[data-card="sale-promo"] .sf-card-price { color: #E5484D; font-size: calc(16px * var(--sf-fs, 1)); }
.sf-grid[data-card="sale-promo"] .sf-card-add { background: #E5484D; border-radius: 999px; }

/* nuit — dark glass */
.sf-grid[data-card="nuit"] .sf-card {
  background: rgba(28, 27, 36, 0.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.14);
  color: #F2F1F5;
}
.sf-grid[data-card="nuit"] .sf-card-name { color: #F2F1F5; }
.sf-grid[data-card="nuit"] .sf-card-desc { color: #B9B6C4; }
.sf-grid[data-card="nuit"] .sf-card-price { color: #fff; }
.sf-grid[data-card="nuit"] .sf-card-img { border-radius: var(--sf-radius) var(--sf-radius) 0 0; }

/* sahara — warm sand tones */
.sf-grid[data-card="sahara"] .sf-card {
  background: linear-gradient(160deg, #FDF3E3, #F7E3C4);
  border: 1px solid #E8C98F;
}
.sf-grid[data-card="sahara"] .sf-card-name { color: #7A4A1F; }
.sf-grid[data-card="sahara"] .sf-card-desc { color: #A67B4B; }
.sf-grid[data-card="sahara"] .sf-card-price { color: #B4551F; }
.sf-grid[data-card="sahara"] .sf-card-add { background: #C97B2D; }
.sf-grid[data-card="sahara"] .sf-card-badge { background: #C97B2D; }

/* insta-feed — square 1:1 image grid */
.sf-grid[data-card="insta-feed"] { gap: 3px; padding-inline: 0; }
.sf-grid[data-card="insta-feed"] .sf-card { border: 0; border-radius: 0; box-shadow: none; }
.sf-grid[data-card="insta-feed"] .sf-card-img { aspect-ratio: 1 / 1; }
.sf-grid[data-card="insta-feed"] .sf-card-body { padding: 8px 6px; }
.sf-grid[data-card="insta-feed"] .sf-card-desc { display: none; }
.sf-grid[data-card="insta-feed"] .sf-card-name { font-size: calc(11px * var(--sf-fs, 1)); -webkit-line-clamp: 1; }
.sf-grid[data-card="insta-feed"] .sf-card-price { font-size: calc(12px * var(--sf-fs, 1)); }
.sf-grid[data-card="insta-feed"] .sf-card-add { font-size: calc(13px * var(--sf-fs, 1)); font-weight: 600; border-radius: 999px; min-height: 40px; }

/* insta-reel — vertical 9:16 story cards, price overlaid */
.sf-grid[data-card="insta-reel"] { grid-template-columns: repeat(2, 1fr); }
.sf-grid[data-card="insta-reel"] .sf-card { border: 0; border-radius: 16px; position: relative; }
.sf-grid[data-card="insta-reel"] .sf-card-img { aspect-ratio: 9 / 16; position: relative; }
.sf-grid[data-card="insta-reel"] .sf-card-body {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: 30px 10px 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
  border-radius: 0 0 16px 16px;
}
.sf-grid[data-card="insta-reel"] .sf-card-name { color: #fff; font-size: calc(12px * var(--sf-fs, 1)); }
.sf-grid[data-card="insta-reel"] .sf-card-desc { display: none; }
.sf-grid[data-card="insta-reel"] .sf-card-price { color: #fff; font-size: calc(13px * var(--sf-fs, 1)); }
.sf-grid[data-card="insta-reel"] .sf-card-badge { font-size: calc(9px * var(--sf-fs, 1)); }
.sf-grid[data-card="insta-reel"] .sf-card-add { border-radius: 999px; background: rgba(255,255,255,0.92); color: #111; }

/* ---------- 5. Product bottom sheet ---------- */
.sf-sheet {
  position: fixed; z-index: 850;
  /* Centré à l'écran (pas en bas) */
  top: 50%; left: 50%;
  width: min(480px, calc(100vw - 32px));
  max-height: min(88vh, 88dvh);
  background: var(--sf-sheet-bg);
  border-radius: var(--sf-sheet-radius);
  display: flex; flex-direction: column;
  transform: translate(-50%, -50%) scale(.96);
  opacity: 0; pointer-events: none;
  transition: transform .3s var(--sf-ease), opacity .3s var(--sf-ease);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  overflow: hidden;
}
.sf-sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
/* Poignée de drag supprimée : le popup est centré, pas un bottom-sheet. */
.sf-sheet::before { display: none; }
#sheetImg { width: 100%; height: 180px; object-fit: cover; flex-shrink: 0; }
.sf-sheet h2 {
  font-family: var(--sf-font); font-size: calc(18px * var(--sf-fs, 1)); font-weight: 600; letter-spacing: -0.2px;
  color: var(--sf-text); margin: 12px 16px 4px;
}
.sf-sheet p#sheetDesc { font-size: calc(12px * var(--sf-fs, 1)); color: var(--sf-muted); margin: 0 16px 12px; line-height: 1.5; }
#sheetGroups { overflow-y: auto; padding: 0 16px 12px; flex: 1; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.sf-mgroup { margin-bottom: 16px; }
.sf-mgroup-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.sf-mgroup-name { font-size: calc(14px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-text); }
.sf-badge-req, .sf-badge-opt {
  font-size: calc(9px * var(--sf-fs, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 999px;
}
.sf-badge-req { background: #161616; color: #FFFFFF; }
.sf-badge-opt { background: var(--sf-surface-2); color: var(--sf-muted); border: 1px solid var(--sf-border); }
.sf-mcount { margin-inline-start: auto; font-size: calc(11px * var(--sf-fs, 1)); color: var(--sf-muted); }
.sf-mopt {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 52px;
  padding: 8px 12px; margin-bottom: 6px;
  background: var(--sf-surface); border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
  font-family: var(--sf-font); font-size: calc(14px * var(--sf-fs, 1)); color: var(--sf-text);
  cursor: pointer; text-align: start;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .25s var(--sf-ease), border-color .25s var(--sf-ease), background-color .25s var(--sf-ease);
}
.sf-mopt.selected { border-color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 7%, var(--sf-surface)); }
.sf-mopt-check {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--sf-border); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(12px * var(--sf-fs, 1)); color: #fff;
}
.sf-mopt.selected .sf-mopt-check { background: var(--sf-primary); border-color: var(--sf-primary); }
.sf-mopt.selected .sf-mopt-check::after { content: ""; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-1px, -1px); display: block; }
.sf-mopt-name { flex: 1; }
.sf-mopt-price { font-weight: 700; color: var(--sf-muted); }
.sf-mopt.selected .sf-mopt-price { color: var(--sf-primary); }
.sf-mopt:active { transform: scale(0.98); }
/* Cartes d'options compactes : petits carrés aux angles arrondis (modèle ModQty). */
.sf-mopt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (max-width: 380px) { .sf-mopt-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; } }
.sf-mopt-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 4px;
  aspect-ratio: 1; /* carré */
  background: var(--sf-surface); border: 1.5px solid var(--sf-border);
  border-radius: 12px; /* angles arrondis */
  font-family: var(--sf-font); font-size: calc(11px * var(--sf-fs, 1)); color: var(--sf-text);
  cursor: pointer; text-align: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .2s var(--sf-ease), background-color .2s var(--sf-ease), transform .15s var(--sf-ease);
  overflow: hidden;
}
.sf-mopt-card:active { transform: scale(.96); }
.sf-mopt-card.selected { border-color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 8%, var(--sf-surface)); }
.sf-mopt-card .sf-mopt-name { font-weight: 600; line-height: 1.15; font-size: calc(8px * var(--sf-fs, 1)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-mopt-card .sf-mopt-price { font-size: calc(8px * var(--sf-fs, 1)); color: var(--sf-muted); font-weight: 600; }
.sf-mopt-card.selected .sf-mopt-price { color: var(--sf-primary); }
.sf-mopt-card .sf-included { font-weight: 400; }
.sf-mopt-stepper {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 1px;
}
.sf-step {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--sf-border); background: var(--sf-surface);
  font-size: calc(11px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.sf-step:disabled { opacity: .25; cursor: default; }
.sf-step:not(:disabled):active { transform: scale(.9); }
.sf-mopt-qty { min-width: 14px; text-align: center; font-weight: 700; font-size: calc(10px * var(--sf-fs, 1)); }
#sheetFoot {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sf-divider);
  background: var(--sf-sheet-bg);
}
#sheetPrice { font-size: calc(18px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-text); flex: 1; }
#sheetAdd { flex: 2; }
#sheetClose {
  position: absolute; top: 12px; inset-inline-end: 12px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,0.45); color: #fff; border: 0;
  font-size: calc(16px * var(--sf-fs, 1)); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- 5. Floating cart bar (visible only when the cart has items) ---------- */
#cartBar {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 700;
  display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 10px 18px;
  background: var(--sf-primary); color: #fff;
  border: 0; border-radius: 999px;
  font-family: var(--sf-font); font-size: calc(14px * var(--sf-fs, 1)); font-weight: 600; line-height: 1.2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#cartBar .sf-cartbar-icon { font-size: calc(20px * var(--sf-fs, 1)); }
#cartBarTotal { margin-inline-start: auto; text-align: end; }
#cartBarTotal .sf-price-main, #cartBarTotal .sf-price-approx { display: block; }
/* Total du panier sur l'icône header : devise boutique uniquement (pas de
   place pour le « ≈ », visible sur la barre flottante). */
#cartBtnTotal { font-size: calc(9px * var(--sf-fs, 1)); font-weight: 700; margin-inline-start: 2px; max-width: 84px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cartBtnTotal .sf-price-approx { display: none; }
/* Prix : devise boutique (principale) + équivalent « ≈ » en devise d'affichage. */
.sf-price-main { font-weight: inherit; }
.sf-price-approx { font-size: calc(10px * var(--sf-fs, 1)); font-weight: 400; color: var(--sf-muted); white-space: nowrap; }
.sf-card-prices .sf-price-approx { margin-top: 1px; }
#cartBar .sf-cartbar-chev { font-size: calc(24px * var(--sf-fs, 1)); font-weight: 400; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  #cartBar.pop { animation: sf-cart-pop .4s var(--sf-ease); }
  #cartBtn.pop { animation: sf-cart-pop .4s var(--sf-ease); }
}
@keyframes sf-cart-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ---------- 5b. Product page (full screen, #/p/<id>) ---------- */
#productPage {
  position: fixed; inset: 0; z-index: 750;
  background: var(--sf-bg);
  display: flex; flex-direction: column;
}
#productPage:not(.sf-hidden) { animation: sf-pp-in .38s var(--sf-ease); }
@keyframes sf-pp-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #productPage:not(.sf-hidden) { animation: none; } }
.sf-pp-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
.sf-pp-media { position: relative; background: var(--sf-surface-2); }
.sf-pp-track {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; touch-action: pan-x pan-y;
}
.sf-pp-track::-webkit-scrollbar { display: none; }
.sf-pp-slide {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  aspect-ratio: 4 / 3; background: var(--sf-surface-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sf-pp-slide img, .sf-pp-slide video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sf-pp-noimg span { font-size: calc(62px * var(--sf-fs, 1)); font-weight: 600; color: var(--sf-muted); }
#ppBack {
  position: absolute; z-index: 2;
  top: calc(12px + env(safe-area-inset-top)); inset-inline-start: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.45); color: #fff; border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#ppBack svg { display: block; }
html[dir="rtl"] #ppBack svg { transform: scaleX(-1); }
.sf-pp-dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  display: flex; justify-content: center; gap: 6px;
  pointer-events: none;
}
.sf-pp-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: auto; cursor: pointer;
}
.sf-pp-dots span.on { background: #fff; }
.sf-pp-count {
  position: absolute; bottom: 12px; inset-inline-end: 12px; z-index: 2;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: calc(11px * var(--sf-fs, 1)); font-weight: 700;
  border-radius: 999px; padding: 4px 10px;
}
.sf-pp-body { padding: 16px 16px 24px; }
.sf-pp-body h2 {
  font-family: var(--sf-font); font-size: calc(19px * var(--sf-fs, 1)); font-weight: 600; letter-spacing: -0.3px;
  color: var(--sf-text); margin: 0 0 6px;
}
.sf-pp-price {
  font-family: var(--sf-font); font-size: calc(16px * var(--sf-fs, 1)); font-weight: 700;
  color: var(--sf-primary); margin-bottom: 2px;
}
.sf-pp-approx {
  font-family: var(--sf-font); font-size: calc(11px * var(--sf-fs, 1)); font-weight: 400;
  color: var(--sf-muted); margin-bottom: 10px;
}
#ppDesc {
  font-size: calc(13px * var(--sf-fs, 1)); line-height: 1.55; color: var(--sf-text);
  margin: 0 0 16px; white-space: pre-wrap;
}
.sf-pp-qty {
  display: flex; align-items: center; gap: 18px;
  margin: 20px 0 8px;
}
.sf-pp-qty button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--sf-border); background: var(--sf-surface);
  color: var(--sf-text); font-size: calc(20px * var(--sf-fs, 1)); font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  flex-shrink: 0;
}
.sf-pp-qty button:active { transform: scale(0.94); }
#ppQtyVal {
  font-family: var(--sf-font); font-size: calc(16px * var(--sf-fs, 1)); font-weight: 700;
  color: var(--sf-text); min-width: 2ch; text-align: center;
}
.sf-pp-bar {
  flex: 0 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--sf-bg); border-top: 1px solid var(--sf-divider);
}
.sf-pp-bar .sf-btn { width: 100%; min-height: 52px; font-size: calc(15px * var(--sf-fs, 1)); }
.sf-pp-bar .sf-btn:disabled { opacity: 0.5; }

/* ---------- 6. Checkout : UNE SEULE PAGE (mobile-first) ---------- */
.sf-checkout {
  position: fixed; inset: 0; z-index: 850;
  background: var(--sf-sheet-bg);
  display: flex; flex-direction: column;
}
.sf-checkout-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--sf-divider);
  background: var(--sf-sheet-bg);
  flex-shrink: 0;
}
.sf-checkout-head h2 { margin: 0; font-size: calc(17px * var(--sf-fs, 1)); font-weight: 600; letter-spacing: -0.2px; color: var(--sf-text); font-family: var(--sf-font); flex: 1; text-align: center; }
.sf-back {
  min-width: 44px; min-height: 44px; border-radius: 12px;
  background: var(--sf-surface-2); border: 1px solid var(--sf-border);
  color: var(--sf-text); font-size: calc(16px * var(--sf-fs, 1)); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sf-head-spacer { min-width: 44px; }

.sf-checkout-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  padding: 12px 16px 24px;
  width: 100%; max-width: 640px; margin: 0 auto;
  counter-reset: sf-step; /* numérotation auto des sections */
}

/* Section = une carte blanche avec numéro d'étape */
.sf-sec {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  padding: 14px;
  margin: 0 0 12px;
  box-shadow: var(--sf-shadow-sm);
}
.sf-sec-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sf-font); font-size: calc(14px * var(--sf-fs, 1)); font-weight: 600; letter-spacing: -0.2px;
  color: var(--sf-text); margin: 0 0 10px;
  counter-increment: sf-step;
}
.sf-sec-title::before {
  content: counter(sf-step);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sf-primary); color: #fff;
  font-size: calc(12px * var(--sf-fs, 1)); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* ---------- Accordéon du checkout (sections 1-5 repliables) ---------- */
.sf-sec-head {
  width: 100%; min-height: 48px;
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: start; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sf-sec-head .sf-sec-title { margin: 0; flex-shrink: 0; }
.sf-sec-sum {
  flex: 1; min-width: 0;
  font-family: var(--sf-font); font-size: calc(11px * var(--sf-fs, 1)); font-weight: 500;
  color: var(--sf-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: end;
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px;
}
.sf-sec-sum img { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: #fff; flex-shrink: 0; }
.sf-sec-chev {
  flex-shrink: 0; width: 26px; text-align: center;
  font-size: calc(20px * var(--sf-fs, 1)); font-weight: 400; color: var(--sf-muted); line-height: 1;
  transform: rotate(90deg); /* ouvert : pointe vers le bas */
  transition: transform .3s var(--sf-ease);
}
.sf-sec.closed .sf-sec-chev { transform: none; } /* fermé : › */
.sf-sec-body {
  display: grid; grid-template-rows: 1fr;
  margin-top: 12px; opacity: 1;
  transition: grid-template-rows .3s var(--sf-ease), opacity .3s var(--sf-ease), margin .3s var(--sf-ease);
}
.sf-sec-clip { overflow: hidden; min-height: 0; }
.sf-sec.closed .sf-sec-body { grid-template-rows: 0fr; margin-top: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .sf-sec-body, .sf-sec-chev { transition: none; }
}

.sf-citem {
  display: grid; grid-template-columns: 1fr auto;
  gap: 6px 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sf-divider);
}
.sf-citem:last-child { border-bottom: 0; padding-bottom: 4px; }
.sf-citem-name { font-size: calc(13px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-text); font-family: var(--sf-font); }
.sf-citem-opts { font-size: calc(11px * var(--sf-fs, 1)); color: var(--sf-muted); grid-column: 1; }
.sf-citem-price { font-size: calc(13px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-text); grid-column: 2; grid-row: 1; }
.sf-qty {
  display: inline-flex; align-items: center; gap: 10px;
  grid-column: 1;
}
.sf-qty button {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--sf-surface-2); border: 1px solid var(--sf-border);
  color: var(--sf-text); font-size: calc(18px * var(--sf-fs, 1)); font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sf-qty span { font-size: calc(14px * var(--sf-fs, 1)); font-weight: 700; min-width: 24px; text-align: center; color: var(--sf-text); }
.sf-citem-remove {
  grid-column: 2; justify-self: end; align-self: center;
  min-width: 44px; min-height: 44px;
  background: none; border: 0; color: var(--sf-danger);
  font-size: calc(18px * var(--sf-fs, 1)); cursor: pointer;
}
.sf-citem-note { grid-column: 1 / -1; margin-top: 2px; }
.sf-citem-note-link {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-size: calc(12px * var(--sf-fs, 1)); color: var(--sf-accent, #007aff);
  text-decoration: underline; text-underline-offset: 2px;
  min-height: 32px; touch-action: manipulation;
}
.sf-citem-note-input {
  width: 100%; box-sizing: border-box;
  font-size: 16px; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--sf-border); background: var(--sf-surface);
  color: var(--sf-text); margin-top: 4px;
}
.sf-citem-note-input:focus { outline: none; border-color: var(--sf-accent, #007aff); }
.sf-citem-note-saved {
  font-size: calc(12px * var(--sf-fs, 1)); color: var(--sf-muted);
  font-style: italic; padding: 4px 0;
}

#promoRow { display: flex; gap: 8px; align-items: flex-start; }
#promoRow .sf-input { flex: 1; }
#promoApply { min-height: 48px; min-width: 64px; flex-shrink: 0; }
#promoMsg { font-size: calc(11px * var(--sf-fs, 1)); margin: 8px 0 0; color: var(--sf-muted); }
#promoMsg.ok { color: var(--sf-success); }
#promoMsg.err { color: var(--sf-danger); }

.sf-fld-label {
  display: block; font-size: calc(12px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-text);
  margin: 0 0 8px; font-family: var(--sf-font);
}
#zoneRow { margin-top: 10px; }

#modeSeg { display: block; }
/* 3 cartes : toute la largeur, tailles identiques, coins arrondis uniformes. */
.sf-mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sf-mode-cards button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 78px; min-width: 0; padding: 10px 4px;
  font-family: var(--sf-font); font-size: calc(11px * var(--sf-fs, 1)); font-weight: 700; line-height: 1.25; text-align: center;
  background: var(--sf-surface-2); border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius-sm); color: var(--sf-text); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .25s var(--sf-ease), background-color .25s var(--sf-ease), color .25s var(--sf-ease);
}
/* Sélectionné : contour/couleur uniquement, JAMAIS de changement de taille. */
.sf-mode-cards button.active { border-color: var(--sf-primary); color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 8%, var(--sf-surface)); }
.sf-mode-cards button.active .sf-mode-ic { color: var(--sf-primary); }
.sf-mode-ic { display: inline-flex; width: 22px; height: 22px; flex: none; }
.sf-mode-ic svg { width: 100%; height: 100%; }
.sf-mode-lb { display: block; }
@media (max-width: 360px) {
  .sf-mode-cards button { font-size: calc(10px * var(--sf-fs, 1)); min-height: 72px; }
  .sf-mode-ic { width: 20px; height: 20px; }
}
/* Zone livraison inline : titre + 2 options, sous les cartes. */
.sf-deliv-zone { margin-top: 12px; }
.sf-deliv-title { font-family: var(--sf-font); font-size: calc(12px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-text); margin: 0 0 8px; }
.sf-deliv-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf-deliv-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 60px; min-width: 0; padding: 10px 12px;
  font-family: var(--sf-font); color: var(--sf-text); text-align: left; cursor: pointer;
  background: var(--sf-surface); border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius-sm);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .25s var(--sf-ease), background-color .25s var(--sf-ease), color .25s var(--sf-ease);
}
.sf-deliv-opt-t { font-size: calc(12px * var(--sf-fs, 1)); font-weight: 700; }
.sf-deliv-opt-s { font-size: calc(10px * var(--sf-fs, 1)); font-weight: 500; color: var(--sf-muted); }
.sf-deliv-opt.active { border-color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 8%, var(--sf-surface)); }
.sf-deliv-opt.active .sf-deliv-opt-t { color: var(--sf-primary); }
.sf-deliv-days { margin-top: 10px; }
.sf-deliv-zone .sf-sched-grid { margin-top: 4px; }

.sf-switch {
  display: flex; align-items: center; gap: 10px;
  font-size: calc(13px * var(--sf-fs, 1)); font-weight: 600; color: var(--sf-text);
  cursor: pointer; min-height: 44px;
}
.sf-switch input { width: 24px; height: 24px; accent-color: var(--sf-primary); }
.sf-check { display: flex; align-items: center; gap: 10px; font-size: calc(12px * var(--sf-fs, 1)); color: var(--sf-text); min-height: 44px; cursor: pointer; }
.sf-check input { width: 22px; height: 22px; accent-color: var(--sf-primary); }
#giftFields { display: grid; gap: 8px; margin-top: 8px; }

/* Paiement : rangée horizontale de tuiles logos */
#payMethods { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; }
#payMethods::-webkit-scrollbar { display: none; }
.sf-paytile {
  flex: 0 0 auto; width: 72px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sf-surface); border: 1.5px solid var(--sf-border); border-radius: 14px;
  cursor: pointer; padding: 5px; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  position: relative;
  transition: transform .25s var(--sf-ease), border-color .25s var(--sf-ease), box-shadow .25s var(--sf-ease);
}
.sf-paytile img, .sf-paytile svg { max-width: 100%; max-height: 100%; border-radius: 9px; display: block; }
/* Logos officiels (JPG) : entièrement visibles, jamais déformés, coins arrondis. */
.sf-paytile img[src$=".jpg"] { width: 100%; height: 100%; object-fit: contain; border-radius: 9px; background: #fff; }
/* Marques cartes (SVG) : 3 logos côte à côte dans la tuile. */
.sf-paytile img.sf-paytile-logo[src$=".svg"] {
  width: 31%; max-height: 64%; object-fit: contain;
  background: #fff; border-radius: 5px; padding: 3px 2px; margin: 0 1px;
}
.sf-paytile.selected {
  border-color: var(--sf-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sf-primary) 35%, transparent);
  transform: scale(1.04);
}
.sf-paytile:active { transform: scale(0.96); }
.sf-paytile-check {
  position: absolute; top: -7px; inset-inline-end: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sf-primary);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.5);
  transition: opacity .25s var(--sf-ease), transform .25s var(--sf-ease);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  pointer-events: none;
}
.sf-paytile.selected .sf-paytile-check { opacity: 1; transform: scale(1); }
.sf-paytile-text { font-family: var(--sf-font); font-size: calc(11px * var(--sf-fs, 1)); font-weight: 600; color: var(--sf-text); text-align: center; line-height: 1.25; }
/* Sélecteur de zone de livraison : recherche + liste de quartiers. */
.sf-zone-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sf-zone {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 52px; padding: 10px 14px;
  background: var(--sf-surface); border: 1.5px solid var(--sf-border); border-radius: 14px;
  font-family: var(--sf-font); cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .2s var(--sf-ease), box-shadow .2s var(--sf-ease), transform .15s var(--sf-ease);
}
.sf-zone:active { transform: scale(0.98); }
.sf-zone.selected {
  border-color: var(--sf-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sf-primary) 30%, transparent);
}
.sf-zone-name { font-size: calc(12px * var(--sf-fs, 1)); font-weight: 600; color: var(--sf-text); }
.sf-zone-price { font-size: calc(11px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-primary); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .sf-paytile { transition: none; }
  .sf-paytile.selected, .sf-paytile:active { transform: none; }
}
/* Téléphone : bouton indicatif + champ */
.sf-phone-row { display: flex; gap: 8px; }
.sf-phone-row .sf-input { flex: 1 1 auto; min-width: 0; }
.sf-ccbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 0 12px;
  background: var(--sf-input-bg, var(--sf-surface)); border: 1.5px solid var(--sf-border); border-radius: 12px;
  font-family: var(--sf-font); font-size: calc(14px * var(--sf-fs, 1)); color: var(--sf-text);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#phoneCcFlag { font-size: calc(18px * var(--sf-fs, 1)); line-height: 1; }
.sf-cc-search { padding: 16px 16px 4px; }
.sf-cc-dial { color: var(--sf-muted); font-size: calc(12px * var(--sf-fs, 1)); flex-shrink: 0; }
/* Sélecteur de devise (style XE) */
.sf-cur-sec {
  padding: 14px 16px 6px;
  font-size: calc(10px * var(--sf-fs, 1)); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sf-muted);
}
.sf-cur-sec:first-child { padding-top: 4px; }
.sf-cur-left { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.sf-cur-flag { font-size: calc(18px * var(--sf-fs, 1)); line-height: 1; flex-shrink: 0; }
.sf-cur-code { font-weight: 600; font-size: calc(13px * var(--sf-fs, 1)); }
.sf-cur-name { color: var(--sf-muted); font-size: calc(12px * var(--sf-fs, 1)); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-cur-check { color: var(--sf-accent, #0A84FF); font-size: calc(14px * var(--sf-fs, 1)); font-weight: 600; flex-shrink: 0; min-width: 20px; text-align: end; }
html[dir="rtl"] .sf-cur-sec { text-align: right; }
.sf-pay {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 14px;
  border: 1.5px solid var(--sf-border); border-radius: var(--sf-radius-sm);
  font-family: var(--sf-font); font-size: calc(14px * var(--sf-fs, 1)); color: var(--sf-text);
  cursor: pointer;
}
.sf-pay.selected { border-color: var(--sf-primary); background: color-mix(in srgb, var(--sf-primary) 6%, var(--sf-surface)); }
.sf-pay::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--sf-border); flex-shrink: 0;
}
.sf-pay.selected::before { border-color: var(--sf-primary); background: radial-gradient(circle, var(--sf-primary) 45%, transparent 50%); }
.sf-hint { font-size: calc(11px * var(--sf-fs, 1)); color: var(--sf-muted); margin: 8px 0 0; line-height: 1.45; }

#loyaltyBox .sf-input { margin-bottom: 8px; }
#pinPad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 10px 0; max-width: 320px;
}
.sf-pin {
  aspect-ratio: 1.6; min-height: 56px;
  border-radius: 999px;
  background: var(--sf-surface-2); border: 1px solid var(--sf-border);
  font-family: var(--sf-font); font-size: calc(20px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-text);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sf-pin:active { background: var(--sf-border); }
.sf-pin.filled { background: var(--sf-primary); border-color: var(--sf-primary); color: #fff; }
.sf-pin-dots { display: flex; gap: 10px; justify-content: center; margin-bottom: 4px; grid-column: 1 / -1; }
.sf-pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--sf-border); }
.sf-pin-dot.filled { background: var(--sf-primary); border-color: var(--sf-primary); }
#pinMsg { font-size: calc(11px * var(--sf-fs, 1)); color: var(--sf-muted); min-height: 20px; margin: 4px 0; }
#pinMsg.err { color: var(--sf-danger); }
#pinMsg.ok { color: var(--sf-success); }
#loyaltyCheck { margin-bottom: 8px; width: 100%; }
#loyaltyInfo { font-size: calc(12px * var(--sf-fs, 1)); color: var(--sf-muted); background: var(--sf-surface-2); border-radius: var(--sf-radius-sm); padding: 10px 12px; }

#cartTotals { padding: 2px 0; }
.sf-trow { display: flex; justify-content: space-between; font-size: calc(13px * var(--sf-fs, 1)); color: var(--sf-muted); padding: 3px 0; font-family: var(--sf-font); }
.sf-trow.sf-total { font-size: calc(18px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-text); padding-top: 10px; margin-top: 6px; border-top: 2px solid var(--sf-border); }
#tDiscount { color: var(--sf-success); }
#chargedInNote { font-size: calc(10px * var(--sf-fs, 1)); color: var(--sf-muted); text-align: end; margin-top: 2px; }

#checkoutForm { display: grid; gap: 10px; }

/* LE seul bouton : sticky en bas, style WhatsApp */
.sf-checkout-foot {
  flex-shrink: 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sf-divider);
  background: var(--sf-sheet-bg);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
}
.sf-cart-empty { font-size: calc(15px * var(--sf-fs, 1)); font-weight: 600; color: var(--sf-text); text-align: center; margin: 16px 0 4px; font-family: var(--sf-font); }
.sf-cart-empty + .sf-hint { text-align: center; }
.sf-btn-big { font-size: calc(15px * var(--sf-fs, 1)); min-height: 52px; width: 100%; border-radius: 14px; font-weight: 600; }

/* ---------- 7. Confirm view ---------- */
.sf-confirm {
  padding: 48px 24px 40px; text-align: center;
  max-width: 520px; margin: 0 auto;
  font-family: var(--sf-font);
}
.sf-confirm-check {
  width: 84px; height: 84px; border-radius: 50%;
  background: #E7F7ED; color: var(--sf-success);
  font-size: calc(38px * var(--sf-fs, 1)); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.sf-confirm h2 { font-size: calc(21px * var(--sf-fs, 1)); font-weight: 600; letter-spacing: -0.3px; color: var(--sf-text); margin: 0 0 8px; }
.sf-confirm p { font-size: calc(13px * var(--sf-fs, 1)); color: var(--sf-muted); margin: 4px 0; }
#confOrderNum { font-size: calc(16px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-primary); }
#confTotal { font-size: calc(20px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-text); margin: 8px 0 20px; }
.sf-confirm .sf-btn, .sf-confirm a.sf-btn { margin-top: 10px; }
#waSend { text-decoration: none; }
#newCardBox {
  margin: 18px 0; padding: 14px;
  background: color-mix(in srgb, var(--sf-primary) 7%, var(--sf-surface));
  border: 1px dashed var(--sf-primary); border-radius: var(--sf-radius-sm);
  font-size: calc(12px * var(--sf-fs, 1)); color: var(--sf-text);
}

/* ---------- 8. Skeleton shimmer ---------- */
.sf-skeleton {
  position: relative; overflow: hidden;
  background: var(--sf-surface-2);
  border-radius: var(--sf-radius-sm);
  min-height: 60px;
}
.sf-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.55) 50%, transparent 80%);
  animation: sf-shimmer 1.4s infinite;
}
html[data-theme="nuit-gourmande"] .sf-skeleton::after,
html[data-theme="apple-noir"] .sf-skeleton::after {
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.08) 50%, transparent 80%);
}
@keyframes sf-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
html[dir="rtl"] .sf-skeleton::after { animation-name: sf-shimmer-rtl; }
@keyframes sf-shimmer-rtl { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* ============================================================
   THEMES
   ============================================================ */

/* ---------- Theme 1: signature — warm & friendly ---------- */
/* ---------- Theme 0: noir — noir & blanc (thème par défaut) ---------- */
html[data-theme="noir"] {
  --sf-primary: #161616;
  --sf-accent: #161616;
  --sf-surface: #FFFFFF;
  --sf-surface-2: #F5F5F5;
  --sf-text: #161616;
  --sf-muted: #6B6B6B;
  --sf-border: #E5E5E5;
  --sf-radius: 18px;
  --sf-radius-sm: 12px;
  --sf-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  --sf-shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.08);
  --sf-divider: #EEEEEE;
  --sf-header-bg: #FFFFFF;
  --sf-sheet-bg: #FFFFFF;
  --sf-input-bg: #FFFFFF;
  --sf-card-bg: #FFFFFF;
  --sf-badge-text: #FFFFFF;
  --sf-hero-shade: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
  --sf-success: #1FA855;
  --sf-danger: #E5484D;
  background: #FFFFFF;
}
html[data-theme="noir"] body { background: #FFFFFF; font-family: var(--sf-font); }
html[data-theme="noir"] .sf-cat.active { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
html[data-theme="noir"] #heroCta { border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

/* ---------- Theme 1: signature — warm cream (conservé, choix du propriétaire) ---------- */
html[data-theme="signature"] {
  --sf-surface: #FFFFFF;
  --sf-surface-2: #FAF7F2;
  --sf-text: #221D16;
  --sf-muted: #8A7E6C;
  --sf-border: #EDE3D3;
  --sf-radius: 18px;
  --sf-radius-sm: 12px;
  --sf-shadow: 0 10px 28px rgba(120, 70, 20, 0.12);
  --sf-shadow-sm: 0 3px 10px rgba(120, 70, 20, 0.08);
  --sf-divider: #F0E8D9;
  --sf-header-bg: #FFFDF9;
  --sf-sheet-bg: #FFFDF9;
  --sf-input-bg: #FFFFFF;
  --sf-hero-shade: linear-gradient(180deg, rgba(60,30,0,0) 0%, rgba(60,30,0,0.6) 100%);
  background: #FFF9F1;
}
html[data-theme="signature"] body { background: #FFF9F1; font-family: var(--sf-font); }
html[data-theme="signature"] .sf-hero { border-radius: 0 0 24px 24px; }
html[data-theme="signature"] .sf-cat.active { box-shadow: 0 4px 12px color-mix(in srgb, var(--sf-primary) 40%, transparent); }
html[data-theme="signature"] #heroCta { border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

/* ---------- Theme 2: nuit-gourmande — dark, amber glow ---------- */
html[data-theme="nuit-gourmande"] {
  --sf-surface: #1C1A20;
  --sf-surface-2: #26232D;
  --sf-text: #F5F2EA;
  --sf-muted: #A39DAC;
  --sf-border: #38343F;
  --sf-radius: 16px;
  --sf-radius-sm: 10px;
  --sf-shadow: 0 12px 32px rgba(0,0,0,0.5);
  --sf-shadow-sm: 0 3px 10px rgba(0,0,0,0.4);
  --sf-divider: #2E2A35;
  --sf-header-bg: rgba(24, 22, 29, 0.92);
  --sf-sheet-bg: #1C1A20;
  --sf-input-bg: #26232D;
  --sf-card-bg: #221F28;
  --sf-hero-shade: linear-gradient(180deg, rgba(10,8,4,0.1) 0%, rgba(10,8,4,0.85) 100%);
  --sf-success: #4ADE80;
  --sf-danger: #F87171;
  background: #141218;
}
html[data-theme="nuit-gourmande"] body { background: #141218; color: var(--sf-text); font-family: var(--sf-font); }
html[data-theme="nuit-gourmande"] .sf-header { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-theme="nuit-gourmande"] .sf-hero-content h1 {
  font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: 0.5px;
  color: #FFE9B8; text-shadow: 0 0 24px rgba(255, 190, 90, 0.35);
}
html[data-theme="nuit-gourmande"] .sf-cat.active {
  box-shadow: 0 0 16px color-mix(in srgb, var(--sf-primary) 55%, transparent);
}
html[data-theme="nuit-gourmande"] .sf-card-add,
html[data-theme="nuit-gourmande"] #sheetAdd,
html[data-theme="nuit-gourmande"] #placeOrder {
  box-shadow: 0 0 18px color-mix(in srgb, var(--sf-primary) 45%, transparent);
}
html[data-theme="nuit-gourmande"] .sf-hours.open { background: #14331F; color: #4ADE80; }
html[data-theme="nuit-gourmande"] .sf-hours.closed { background: #3A1B1B; color: #F87171; }
html[data-theme="nuit-gourmande"] .sf-modal-list button:active { background: #26232D; }
html[data-theme="nuit-gourmande"] select.sf-input {
  background-image: linear-gradient(45deg, transparent 50%, #A39DAC 50%), linear-gradient(135deg, #A39DAC 50%, transparent 50%);
}

/* ---------- Theme 3: fraicheur — light airy, green/teal ---------- */
html[data-theme="fraicheur"] {
  --sf-surface: #FFFFFF;
  --sf-surface-2: #F2FAF7;
  --sf-text: #10261F;
  --sf-muted: #5F7A70;
  --sf-border: #DDEDE7;
  --sf-radius: 14px;
  --sf-radius-sm: 10px;
  --sf-shadow: 0 8px 22px rgba(30, 120, 95, 0.08);
  --sf-shadow-sm: 0 2px 6px rgba(30, 120, 95, 0.06);
  --sf-divider: #E6F2ED;
  --sf-header-bg: rgba(255,255,255,0.9);
  --sf-sheet-bg: #FFFFFF;
  --sf-input-bg: #FFFFFF;
  --sf-hero-shade: linear-gradient(180deg, rgba(8,60,45,0) 0%, rgba(8,60,45,0.55) 100%);
  background: #FBFEFD;
}
html[data-theme="fraicheur"] body { background: #FBFEFD; font-family: var(--sf-font); }
html[data-theme="fraicheur"] .sf-card { border-width: 1px; box-shadow: none; }
html[data-theme="fraicheur"] .sf-hero { min-height: 200px; }
html[data-theme="fraicheur"] .sf-hero-content h1 { font-weight: 700; letter-spacing: -0.2px; }
html[data-theme="fraicheur"] .sf-cat:not(.active) { background: #fff; }
html[data-theme="fraicheur"] .sf-grid { gap: 18px; }
html[data-theme="fraicheur"] .sf-toolbar { padding-top: 16px; padding-bottom: 16px; }

/* ---------- Theme 4: apple-noir — pure black minimal ---------- */
html[data-theme="apple-noir"] {
  --sf-surface: #000000;
  --sf-surface-2: #101010;
  --sf-text: #F5F5F7;
  --sf-muted: #86868B;
  --sf-border: #2C2C2E;
  --sf-radius: 12px;
  --sf-radius-sm: 10px;
  --sf-shadow: none;
  --sf-shadow-sm: none;
  --sf-divider: #1D1D1F;
  --sf-header-bg: rgba(0, 0, 0, 0.86);
  --sf-sheet-bg: #0A0A0A;
  --sf-input-bg: #101010;
  --sf-card-bg: #000000;
  --sf-hero-shade: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.8) 100%);
  --sf-success: #30D158;
  --sf-danger: #FF453A;
  background: #000;
}
html[data-theme="apple-noir"] body { background: #000; color: var(--sf-text); font-family: var(--sf-font); -webkit-font-smoothing: antialiased; }
html[data-theme="apple-noir"] .sf-header { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-theme="apple-noir"] .sf-brand-name { font-weight: 700; font-size: calc(15px * var(--sf-fs, 1)); letter-spacing: -0.3px; }
html[data-theme="apple-noir"] .sf-hero-content h1 { font-size: calc(30px * var(--sf-fs, 1)); font-weight: 700; letter-spacing: -0.6px; text-shadow: none; }
html[data-theme="apple-noir"] .sf-hero-content p { opacity: 0.75; text-shadow: none; }
html[data-theme="apple-noir"] .sf-card { border: 0; border-bottom: 1px solid var(--sf-divider); border-radius: 0; box-shadow: none; }
html[data-theme="apple-noir"] .sf-card-img { border-radius: 10px; }
html[data-theme="apple-noir"] .sf-card-name { font-size: calc(13px * var(--sf-fs, 1)); font-weight: 600; letter-spacing: -0.2px; }
html[data-theme="apple-noir"] .sf-card-price { font-weight: 600; }
html[data-theme="apple-noir"] .sf-cat:not(.active) { background: #101010; border-color: #2C2C2E; }
html[data-theme="apple-noir"] .sf-hours.open { background: #0B2E17; color: #30D158; }
html[data-theme="apple-noir"] .sf-hours.closed { background: #33110D; color: #FF453A; }
html[data-theme="apple-noir"] .sf-toast { background: #2C2C2E; }
html[data-theme="apple-noir"] #heroCta { border-radius: 999px; }
html[data-theme="apple-noir"] .sf-grid .sf-card-add { border-radius: 999px; }
html[data-theme="apple-noir"] select.sf-input {
  background-image: linear-gradient(45deg, transparent 50%, #86868B 50%), linear-gradient(135deg, #86868B 50%, transparent 50%);
}

/* ---------- Theme 5: terroir — earthy, rustic ---------- */
html[data-theme="terroir"] {
  --sf-surface: #FFF8EF;
  --sf-surface-2: #F6EAD6;
  --sf-text: #3A2412;
  --sf-muted: #8C6B4A;
  --sf-border: #E4CFA8;
  --sf-radius: 20px;
  --sf-radius-sm: 14px;
  --sf-shadow: 0 10px 26px rgba(90, 50, 10, 0.14);
  --sf-shadow-sm: 0 3px 10px rgba(90, 50, 10, 0.10);
  --sf-divider: #EDDCBE;
  --sf-header-bg: #FFF6E8;
  --sf-sheet-bg: #FFF8EF;
  --sf-input-bg: #FFFDF8;
  --sf-card-bg: #FFFDF7;
  --sf-hero-shade: linear-gradient(180deg, rgba(50,25,5,0) 0%, rgba(50,25,5,0.65) 100%);
  background: linear-gradient(180deg, #FBF2E2 0%, #F7E9D0 100%);
}
html[data-theme="terroir"] body {
  font-family: var(--sf-font);
  background: linear-gradient(180deg, #FBF2E2 0%, #F7E9D0 100%);
  background-attachment: fixed;
}
html[data-theme="terroir"] .sf-card {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 60%),
    var(--sf-card-bg);
  border: 1.5px solid var(--sf-border);
}
html[data-theme="terroir"] .sf-hero { border-radius: 0 0 28px 28px; }
html[data-theme="terroir"] .sf-hero-content h1 { font-family: Georgia, serif; font-weight: 600; }
html[data-theme="terroir"] .sf-card-name { font-weight: 700; }
html[data-theme="terroir"] .sf-cat:not(.active) { background: #FFFDF8; }
html[data-theme="terroir"] .sf-promo-banner {
  background: linear-gradient(120deg, #8A5A2B, #C97B2D);
}

/* ============================================================
   RTL tweaks
   ============================================================ */
html[dir="rtl"] select.sf-input {
  background-position: calc(0% + 20px) 50%, calc(0% + 15px) 50%;
}
html[dir="rtl"] .sf-checkout-foot { direction: rtl; }
html[dir="rtl"] .sf-hero-content .sf-btn { direction: rtl; }
html[dir="rtl"] #catList { direction: rtl; }
html[dir="rtl"] .sf-promo-banner { direction: rtl; }
html[dir="rtl"] .sf-toast { direction: rtl; }
html[dir="rtl"] .sf-mopt { text-align: right; }
html[dir="rtl"] .sf-modal-list button { text-align: right; }

/* ============================================================
   ≥640px enhancements (min-width only)
   ============================================================ */
@media (min-width: 640px) {
  .sf-grid { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; }
  .sf-grid[data-card="minimal"],
  .sf-grid[data-card="detaille"],
  .sf-grid[data-card="compact"] { grid-template-columns: repeat(2, 1fr); }
  .sf-grid[data-card="grande"] { grid-template-columns: repeat(2, 1fr); }
  .sf-grid[data-card="insta-feed"] { grid-template-columns: repeat(3, 1fr); }
  .sf-grid[data-card="insta-reel"] { grid-template-columns: repeat(4, 1fr); }

  .sf-hero { min-height: 320px; }
  .sf-hero-content { max-width: 900px; margin: 0 auto; }
  .sf-hero-content h1 { font-size: calc(38px * var(--sf-fs, 1)); }

  .sf-toolbar, .sf-section-title { max-width: 900px; margin-inline: auto; }
  .sf-toolbar { margin-bottom: 4px; }

  .sf-sheet { inset-inline: 0; max-width: 560px; margin-inline: auto; border-radius: var(--sf-sheet-radius); bottom: 24px; max-height: 86vh; }
  .sf-modal { align-items: center; }
  .sf-modal-list { border-radius: var(--sf-sheet-radius); }

  .sf-confirm { padding-top: 72px; }
  #sheetGroups { padding-inline: 20px; }
}

/* ---------- 10. Carte de livraison (style Uber) ---------- */
#mapWrap { margin-top: 10px; }
.sf-map-searchrow { display: flex; gap: 8px; margin-bottom: 8px; }
.sf-map-searchrow .sf-input { flex: 1 1 auto; min-width: 0; margin: 0; }
.sf-geobtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 0 14px;
  background: var(--sf-surface); border: 1.5px solid var(--sf-border); border-radius: 12px;
  font-family: var(--sf-font); font-size: calc(12px * var(--sf-fs, 1)); font-weight: 600; color: var(--sf-primary);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  white-space: nowrap;
}
.sf-geobtn:active { transform: scale(0.97); }
.sf-map-results {
  background: var(--sf-surface); border: 1px solid var(--sf-border); border-radius: 12px;
  margin-bottom: 8px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.sf-map-result {
  display: block; width: 100%; text-align: start;
  padding: 12px 14px; min-height: 48px;
  font-family: var(--sf-font); font-size: calc(13px * var(--sf-fs, 1)); color: var(--sf-text);
  background: none; border: 0; border-bottom: 1px solid var(--sf-divider); cursor: pointer;
}
.sf-map-result:last-child { border-bottom: 0; }
.sf-map-result:active { background: var(--sf-surface-2); }
.sf-map-noresult { padding: 12px 14px; font-size: calc(12px * var(--sf-fs, 1)); color: var(--sf-muted); font-family: var(--sf-font); }
#delivMapWrap {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--sf-border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
#delivMap { height: 230px; width: 100%; z-index: 1; background: var(--sf-surface-2); }
#delivMap .leaflet-control-attribution { font-size: calc(8px * var(--sf-fs, 1)); background: rgba(255,255,255,0.7); }
#delivMap .leaflet-control-zoom { border-radius: 10px; overflow: hidden; }
/* Repère boutique (marqueur local, sans assets externes). */
/* Pin teardrop couleur marque (Leaflet). */
.leaflet-container .sf-shop-pin { background: none; border: 0; }
.sf-pin-drop { display: block; width: 26px; height: 26px; border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
/* Popup carte custom : TOUT le contenu boutique (photo + nom + adresse +
   boutons Itinéraire/Appeler/Ma position + Réserver + X).
   Mobile : bottom sheet presque plein écran. Desktop : carte centrée.
   Apparition lente et élégante : fondu + léger slide/scale, ~450ms ease-out. */
.sf-shop-popup {
  position: fixed; z-index: 2000;
  left: 0; right: 0; bottom: 0; top: auto;
  max-height: 92dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--sf-surface); color: var(--sf-text);
  border: 1px solid var(--sf-border); border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 48px rgba(0,0,0,.28);
  display: none;
  opacity: 0; transform: translateY(40px);
  transition: opacity .45s ease-out, transform .45s var(--sf-ease);
  pointer-events: none;
}
.sf-shop-popup-show { display: block; }
.sf-shop-popup-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sf-shop-popup-hide { opacity: 0; transform: translateY(24px); transition-duration: .22s; pointer-events: none; }
.sf-shop-popup-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.sf-shop-popup-body { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
.sf-shop-popup-body::before {
  content: ""; display: block; width: 40px; height: 4px; border-radius: 999px;
  background: var(--sf-border); margin: -6px auto 12px;
}
@media (min-width: 900px) {
  .sf-shop-popup-body::before { display: none; }
  .sf-shop-popup-body { padding-bottom: 16px; }
}
.sf-shop-popup-body b { display: block; font-size: calc(14px * var(--sf-fs, 1)); }
.sf-shop-popup-addr { display: block; font-size: calc(11px * var(--sf-fs, 1)); color: var(--sf-muted); margin-top: 2px; }
.sf-shop-popup-actions { display: flex; gap: 8px; margin-top: 12px; }
.sf-shop-popup-btn {
  flex: 1; min-height: 40px; padding: 8px 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sf-font); font-size: calc(11px * var(--sf-fs, 1)); font-weight: 600;
  color: var(--sf-text); text-decoration: none;
  background: var(--sf-surface-2); border: 1px solid var(--sf-border);
  border-radius: 12px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sf-shop-popup-btn:active { transform: scale(.96); }
.sf-shop-popup-btn:disabled { opacity: .5; }
.sf-shop-popup-book {
  width: 100%; min-height: 48px; margin-top: 10px;
  border: 0; border-radius: 14px; cursor: pointer;
  font-family: var(--sf-font); font-size: calc(14px * var(--sf-fs, 1)); font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .12s var(--sf-ease);
}
.sf-shop-popup-book:active { transform: scale(.98); }
.sf-shop-popup-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: calc(18px * var(--sf-fs, 1)); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.sf-shop-popup-x:active { transform: scale(.9); }
@media (min-width: 900px) {
  .sf-shop-popup {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(430px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    border-bottom: 1px solid var(--sf-border);
    border-radius: 24px;
    transform: translate(-50%, -46%) scale(.96);
  }
  .sf-shop-popup-open { transform: translate(-50%, -50%) scale(1); }
  .sf-shop-popup-hide { transform: translate(-50%, -46%) scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-shop-popup { transition: none; }
}
/* Résultat "boutique" en tête des suggestions de recherche. */
.sf-map-result-shop { display: flex; align-items: center; gap: 10px; background: var(--sf-surface-2); }
.sf-map-result-shop .sf-map-pin { font-size: calc(18px * var(--sf-fs, 1)); flex-shrink: 0; }
.sf-map-result-shop small { display: block; font-size: calc(11px * var(--sf-fs, 1)); color: var(--sf-muted); font-weight: 400; }
/* Mini-carte de la boutique (section adresse). */
.sf-store-map { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--sf-border); margin: 10px 16px 12px; }
/* Section boutique : rythme horizontal cohérent (16px) — titre, adresse, carte, boutons alignés. */
#storeAddress { padding-inline: 16px; margin: 0 0 10px; color: var(--sf-muted); font-size: calc(12px * var(--sf-fs, 1)); }
#storeMap { height: 170px; width: 100%; z-index: 1; background: var(--sf-surface-2); }
#storeMap .leaflet-control-attribution { font-size: calc(8px * var(--sf-fs, 1)); background: rgba(255,255,255,0.7); }
.sf-map-pin {
  position: absolute; left: 50%; top: 50%; z-index: 500;
  transform: translate(-50%, -100%);
  margin-top: -2px;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3));
}
.sf-map-pin.bounce { animation: sf-pin-bounce .3s var(--sf-ease); }
@keyframes sf-pin-bounce {
  0% { transform: translate(-50%,-100%) scale(1); }
  40% { transform: translate(-50%,-94%) scale(1.1); }
  100% { transform: translate(-50%,-100%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-map-pin.bounce { animation: none; }
  .sf-paytile, .sf-mode-cards button, .sf-deliv-opt, .sf-mopt { transition: none; }
}

/* ---------- Phase D : tables, galerie, compte « Ma carte » ---------- */

/* Bandeau « Table X » (QR sur place). */
.sf-table-banner {
  font-family: var(--sf-font); font-size: calc(12px * var(--sf-fs, 1)); font-weight: 600;
  text-align: center; padding: 9px 16px;
  background: var(--sf-surface-2); color: var(--sf-text);
  border-bottom: 1px solid var(--sf-divider);
}

/* Sélecteur de table (mode sur place, étape Mode du checkout). */
.sf-table-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 10px;
}
.sf-table {
  min-height: 52px; padding: 8px 6px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--sf-surface-2); border: 1.5px solid var(--sf-border); border-radius: 12px;
  font-family: var(--sf-font); font-size: calc(13px * var(--sf-fs, 1)); font-weight: 600; color: var(--sf-text);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .2s var(--sf-ease), background-color .2s var(--sf-ease);
}
.sf-table:active { transform: scale(0.96); }
.sf-table.selected { border-color: var(--sf-primary); background: var(--sf-surface); }

/* Galerie produit : miniatures + badge vidéo. */
.sf-pp-thumbs {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3;
  display: flex; gap: 8px; justify-content: center;
  padding: 0 16px; pointer-events: none;
}
.sf-thumb {
  pointer-events: auto;
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden; padding: 0;
  border: 2px solid rgba(255,255,255,0.55); background: rgba(0,0,0,0.45);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color .2s var(--sf-ease), transform .2s var(--sf-ease);
}
.sf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-thumb.on { border-color: #fff; transform: scale(1.06); }
.sf-thumb-video { display: flex; align-items: center; justify-content: center; color: #fff; font-size: calc(16px * var(--sf-fs, 1)); }
.sf-pp-slide { position: relative; }
.sf-pp-videobadge {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; font-size: calc(22px * var(--sf-fs, 1));
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* Compte « Ma carte ». */
.sf-account-box { max-height: 92vh; max-height: 92dvh; }
.sf-account-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 16px 12px; border-bottom: 1px solid var(--sf-divider);
}
.sf-account-head h2 {
  margin: 0; flex: 1; min-width: 0;
  font-family: var(--sf-font); font-size: calc(18px * var(--sf-fs, 1)); font-weight: 700; letter-spacing: -0.3px;
  color: var(--sf-text);
}
.sf-account-body {
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 12px;
}
.sf-acct-sub { margin: 0; font-size: calc(13px * var(--sf-fs, 1)); color: var(--sf-muted); }
.sf-account-body .sf-input { font-size: calc(14px * var(--sf-fs, 1)); }
.sf-account-body .sf-btn { min-height: 50px; font-size: calc(14px * var(--sf-fs, 1)); }
.sf-acct-msg { margin: 0; font-size: calc(12px * var(--sf-fs, 1)); font-weight: 600; color: var(--sf-primary); }
.sf-acct-err { color: #B4232A; }
#tsAccount { display: flex; justify-content: center; }
/* Carte fidélité visuelle. */
.sf-acct-card {
  border-radius: 18px; padding: 18px; color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--sf-font);
}
.sf-acct-card-top { font-size: calc(11px * var(--sf-fs, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; opacity: 0.9; }
.sf-acct-card-num { font-size: calc(18px * var(--sf-fs, 1)); font-weight: 600; letter-spacing: 2px; }
.sf-acct-card-name { font-size: calc(13px * var(--sf-fs, 1)); opacity: 0.9; }
.sf-acct-card-pts { font-size: calc(13px * var(--sf-fs, 1)); }
.sf-acct-card-pts strong { font-size: calc(20px * var(--sf-fs, 1)); }
.sf-acct-newcard {
  font-size: calc(20px * var(--sf-fs, 1)); font-weight: 700; letter-spacing: 2px; text-align: center;
  padding: 16px; border: 1.5px dashed var(--sf-border); border-radius: 14px;
  color: var(--sf-text); background: var(--sf-surface-2);
}
.sf-acct-progress .sf-acct-bar {
  height: 8px; border-radius: 4px; background: var(--sf-surface-2); overflow: hidden;
}
.sf-acct-progress .sf-acct-bar span { display: block; height: 100%; border-radius: 4px; transition: width .5s var(--sf-ease); }
.sf-acct-line { margin: 0; font-size: calc(13px * var(--sf-fs, 1)); color: var(--sf-text); }
.sf-acct-hist { display: flex; flex-direction: column; border-top: 1px solid var(--sf-divider); }
.sf-acct-hrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--sf-divider);
  font-size: calc(12px * var(--sf-fs, 1)); color: var(--sf-text);
}
.sf-acct-hrow strong { color: var(--sf-primary); white-space: nowrap; }
/* Bouton géolocalisation dans la section boutique. */
.sf-store-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-inline: 16px; }
.sf-store-actions .sf-btn { flex: 1 1 auto; min-height: 48px; }

@media (prefers-reduced-motion: reduce) {
  .sf-thumb, .sf-table, .sf-acct-progress .sf-acct-bar span { transition: none; }
}

/* ---------- 12. Réservation de table (popup bottom-sheet) ---------- */
#bookSheet { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
#bookTitle { position: relative; padding-inline-end: 44px; }
.sf-book-x {
  position: absolute; top: 14px; inset-inline-end: 12px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--sf-border); background: var(--sf-surface-2);
  color: var(--sf-text); font-size: calc(14px * var(--sf-fs, 1)); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#bookBody, #bookDone { overflow-y: auto; padding: 0 16px 8px; -webkit-overflow-scrolling: touch; }
.sf-book-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sf-book-field > span:first-child { font-size: calc(11px * var(--sf-fs, 1)); font-weight: 600; color: var(--sf-muted); }
.sf-book-phone { display: flex; align-items: center; gap: 0; }
.sf-book-dial {
  font-size: calc(14px * var(--sf-fs, 1)); font-weight: 600; color: var(--sf-text);
  background: var(--sf-surface-2); border: 1px solid var(--sf-border); border-inline-end: 0;
  border-start-start-radius: 12px; border-end-start-radius: 12px;
  padding: 0 12px; height: 52px; display: flex; align-items: center; flex-shrink: 0;
}
.sf-book-phone .sf-input { border-start-start-radius: 0; border-end-start-radius: 0; }
.sf-book-duo { display: flex; gap: 12px; }
.sf-book-duo .sf-book-field { flex: 1; min-width: 0; }
.sf-book-stepper {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--sf-border); border-radius: 12px; height: 52px; padding: 0 6px;
  background: var(--sf-surface);
}
.sf-book-stepper button {
  width: 44px; height: 44px; border-radius: 10px; border: 0;
  background: var(--sf-surface-2); color: var(--sf-text);
  font-size: calc(20px * var(--sf-fs, 1)); font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sf-book-stepper strong { font-size: calc(16px * var(--sf-fs, 1)); color: var(--sf-text); min-width: 28px; text-align: center; }
.sf-book-slots { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.sf-book-hint { font-size: calc(11px * var(--sf-fs, 1)); color: var(--sf-muted); }
.sf-slot {
  min-width: 72px; min-height: 44px; padding: 10px 14px; border-radius: 999px;
  border: 1.5px solid var(--sf-border); background: var(--sf-surface);
  color: var(--sf-text); font-size: calc(13px * var(--sf-fs, 1)); font-weight: 600; cursor: pointer;
  transition: all .2s var(--sf-ease);
}
.sf-slot.sel { border-color: var(--sf-primary); background: var(--sf-primary); color: #fff; }
.sf-slot.multi { border-style: dashed; }
.sf-book-multi { font-size: calc(11px * var(--sf-fs, 1)); color: var(--sf-muted); margin: 8px 0 0; line-height: 1.45; }
.sf-book-ts { margin: 4px 0 10px; min-height: 0; }
.sf-book-ts:empty { display: none; }
.sf-book-err { font-size: calc(12px * var(--sf-fs, 1)); color: #B4232A; background: #FDECEA; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.sf-book-submit { width: 100%; min-height: 52px; font-size: calc(14px * var(--sf-fs, 1)); margin-bottom: 8px; }
.sf-book-ok { font-size: calc(50px * var(--sf-fs, 1)); text-align: center; margin: 8px 0 4px; }
/* OTP e-mail (réservation) */
.sf-book-otprow { display: flex; gap: 8px; align-items: center; }
.sf-book-otprow .sf-book-otpinput { flex: 1; min-width: 0; text-align: center; letter-spacing: 6px; font-size: calc(16px * var(--sf-fs, 1)); font-weight: 700; }
.sf-btn-otp { flex: none; min-height: 44px; padding: 0 16px; font-size: calc(12px * var(--sf-fs, 1)); font-weight: 600;
  border: 1.5px solid var(--sf-primary); color: var(--sf-primary); background: transparent; }
.sf-book-okmsg { font-size: calc(11px * var(--sf-fs, 1)); font-weight: 600; color: #1B7A3D; margin: 0; }
#bookPhoneWrap .pf-wrap { margin-top: 0; }
#bookPhoneWrap .pf-num { font-size: calc(14px * var(--sf-fs, 1)); }
#bookDone h3 { text-align: center; font-size: calc(18px * var(--sf-fs, 1)); margin: 0 0 8px; color: var(--sf-text); }
#bookDone p { text-align: center; font-size: calc(13px * var(--sf-fs, 1)); color: var(--sf-muted); margin: 0 0 8px; line-height: 1.5; }
.sf-book-ref { font-size: calc(14px * var(--sf-fs, 1)); }
.sf-book-ref strong { color: var(--sf-primary); letter-spacing: 1px; }
#bookDoneClose { width: 100%; min-height: 52px; margin: 12px 0 4px; }

/* ---------- 12b. Réservation en PAGE COMPLÈTE ---------- */
#bookSheet.sf-book-full {
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; max-width: none; height: 100%; max-height: none; height: 100dvh;
  border-radius: 0; transform: none; opacity: 1;
  background: var(--sf-bg);
}
#bookSheet.sf-book-full.open { transform: none; }
.sf-book-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sf-book-page-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid var(--sf-border); background: var(--sf-bg);
  flex: none; position: relative;
}
.sf-book-page-head h2 { margin: 0; font-size: calc(18px * var(--sf-fs, 1)); }
.sf-book-page-head .sf-book-x { position: static; }
.sf-book-page-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sf-book-page-main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.sf-book-page-side { display: none; }
@media (min-width: 900px) {
  .sf-book-page-grid { display: grid; grid-template-columns: 1fr 380px; overflow: hidden; }
  .sf-book-page-main { padding: 28px 32px; max-width: 640px; }
  .sf-book-page-side {
    display: flex; flex-direction: column; gap: 0;
    border-inline-start: 1px solid var(--sf-border); background: var(--sf-surface);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .sf-book-side-photo { aspect-ratio: 16/9; overflow: hidden; background: var(--sf-surface-2); flex: none; }
  .sf-book-side-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sf-book-side-photo img[src=""], .sf-book-side-photo img:not([src]) { display: none; }
  .sf-book-side-info { padding: 20px 24px; }
  .sf-book-side-info h3 { margin: 0 0 4px; font-size: calc(18px * var(--sf-fs, 1)); }
  .sf-book-side-info p { margin: 0 0 12px; color: var(--sf-muted); font-size: calc(12px * var(--sf-fs, 1)); }
  .sf-book-side-recap { border-top: 1px solid var(--sf-border); padding-top: 12px; font-size: calc(12px * var(--sf-fs, 1)); display: flex; flex-direction: column; gap: 8px; }
  .sf-book-side-recap div { display: flex; justify-content: space-between; gap: 12px; }
  .sf-book-side-recap dt { color: var(--sf-muted); } .sf-book-side-recap dd { margin: 0; font-weight: 600; text-align: end; }
}

@media (min-width: 640px) {
  #bookSheet { inset-inline: auto; left: 50%; transform: translate(-50%, 105%); width: min(480px, 94vw); border-radius: 22px; bottom: 3vh; max-height: 88vh; }
  #bookSheet.open { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-slot { transition: none; }
}

/* =====================================================
   14. Protection anti-copie (opt-out par boutique)
   Activée par body.sf-protected (Dashboard → Website → ).
   - Désactive la sélection du texte partout SAUF dans les champs
     de saisie (le client doit pouvoir corriger son nom/téléphone).
   - -webkit-touch-callout: none désactive le menu d'appui long iOS
     (Copier / Enregistrer l'image) sur le contenu.
   - Les images ne sont pas déplaçables (anti drag & drop).
   ===================================================== */
body.sf-protected, body.sf-protected *:not(input):not(textarea):not([contenteditable="true"]) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.sf-protected input, body.sf-protected textarea {
  -webkit-user-select: text;
  user-select: text;
}
body.sf-protected img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* =====================================================
   15. Bannière d'opt-in aux notifications push (PWA)
   Discrète, style Apple : carte flottante en bas d'écran,
   animation d'apparition douce. Affichée une fois / 7 jours
   maximum, jamais automatique.
   ===================================================== */
.sf-push-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 700;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 12px 12px 12px 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  transform: translateY(140%);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  max-width: 480px;
  margin-inline: auto;
}
.sf-push-banner.show { transform: translateY(0); }
.sf-push-icon {
  font-size: calc(24px * var(--sf-fs, 1)); flex: 0 0 auto;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sf-primary-soft, #F6EDE8);
  border-radius: 14px;
}
.sf-push-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-push-text strong { font-size: calc(13px * var(--sf-fs, 1)); font-weight: 700; color: var(--sf-text); }
.sf-push-text span { font-size: calc(11px * var(--sf-fs, 1)); color: var(--sf-muted); line-height: 1.35; }
.sf-push-ok {
  flex: 0 0 auto;
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: var(--sf-primary); color: #fff;
  font-size: calc(13px * var(--sf-fs, 1)); font-weight: 700;
  cursor: pointer;
}
.sf-push-later {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--sf-muted);
  font-size: calc(15px * var(--sf-fs, 1)); cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .sf-push-banner { background: rgba(28, 28, 30, 0.92); border-color: rgba(255, 255, 255, 0.12); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-push-banner { transition: none; transform: none; }
}

/* ---------- Planification (scheduling) : noir & blanc, mobile-first ---------- */
/* Fenêtre de planification : pleine hauteur avec marges gauche / haut / droite,
   bouton figé en bas, contour translucide noirâtre */
.sf-modal-centered { align-items: stretch; padding: 24px 16px 0; background: rgba(0,0,0,.55); }
.sf-modal-centered .sf-modal-box {
  border-radius: 20px 20px 0 0;
  max-height: none; height: calc(100dvh - 24px);
  display: flex; flex-direction: column; overflow: hidden;
}
.sf-sched-box { padding: 0; }
.sf-sched-box .sf-modal-title { padding: 20px 20px 0; font-size: calc(16px * var(--sf-fs, 1)); font-weight: 700; }
.sf-sched-box .sf-hint { padding: 4px 20px 0; }
.sf-sched-box .sf-modal-title, .sf-sched-box .sf-hint { flex: none; }
.sf-sched-body { flex: 1; padding: 12px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sf-sched-foot {
  flex: none; display: flex; gap: 10px;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--sf-surface); border-top: 1px solid rgba(0,0,0,.08);
}
.sf-sched-foot .sf-btn { flex: 1; }
/* Résumé sous le sélecteur de mode */
.sf-sched-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding: 10px 14px;
  background: var(--sf-surface-2); border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-sm); font-size: calc(12px * var(--sf-fs, 1)); font-weight: 600;
}
.sf-sched-change {
  flex-shrink: 0; min-height: 36px; padding: 0 14px;
  background: var(--sf-text); color: #fff; border: 0;
  border-radius: 999px; font-size: calc(11px * var(--sf-fs, 1)); font-weight: 600; cursor: pointer;
}
.sf-sched-choose {
  width: 100%; min-height: 44px;
  background: none; border: 1.5px dashed var(--sf-border);
  border-radius: var(--sf-radius-sm); font-size: calc(12px * var(--sf-fs, 1)); font-weight: 600;
  color: var(--sf-text); cursor: pointer;
}
/* ASAP / Programmer */
.sf-sched-seg { display: flex; gap: 8px; margin-bottom: 12px; }
.sf-sched-opt {
  flex: 1; min-height: 48px; padding: 0 12px;
  background: var(--sf-surface); border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius-sm); font-size: calc(13px * var(--sf-fs, 1)); font-weight: 600;
  color: var(--sf-text); cursor: pointer;
}
.sf-sched-opt.active { border-color: var(--sf-primary); background: var(--sf-text); color: #fff; }
.sf-sched-asap-note { text-align: center; color: var(--sf-muted); font-size: calc(12px * var(--sf-fs, 1)); padding: 12px 0; }
/* Jours (7 prochains) */
.sf-sched-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; -webkit-overflow-scrolling: touch; }
.sf-sched-day {
  flex: 0 0 auto; min-width: 72px; min-height: 56px; padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--sf-surface); border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius-sm); font-size: calc(10px * var(--sf-fs, 1)); font-weight: 600;
  color: var(--sf-text); cursor: pointer;
}
.sf-sched-day small { font-weight: 400; color: var(--sf-muted); font-size: calc(8px * var(--sf-fs, 1)); }
.sf-sched-day.active { border-color: var(--sf-primary); background: var(--sf-text); color: #fff; }
.sf-sched-day.active small { color: #ccc; }
.sf-sched-day.closed { opacity: 0.4; }
.sf-sched-day:disabled { cursor: default; }
/* Créneaux */
.sf-sched-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sf-sched-slot {
  min-height: 44px; padding: 8px 4px;
  background: var(--sf-surface); border: 1.5px solid var(--sf-border);
  border-radius: var(--sf-radius-sm); font-size: calc(12px * var(--sf-fs, 1)); font-weight: 600;
  color: var(--sf-text); cursor: pointer;
}
.sf-sched-slot.active { border-color: var(--sf-primary); background: var(--sf-text); color: #fff; }
.sf-sched-empty { text-align: center; color: var(--sf-muted); padding: 20px 0; font-size: calc(12px * var(--sf-fs, 1)); }
.sf-table-actions { margin-top: 10px; display: flex; justify-content: flex-end; }

/* ==========================================================================
   DARK MODE STRICT (Elhadji 2026-10-03) — s'applique aux thèmes sombres
   Règles sans exception :
   1. Bouton noir + texte blanc (light) → bouton blanc + texte noir (dark)
   2. Texte noir ou gris (light) → texte blanc (dark)
   3. Champs : contour blanc translucide (dark)
   ========================================================================== */

/* ---------- Point 4 : bouton panier = blanc / noir en dark ---------- */
html[data-theme="nuit-gourmande"] #cartBar,
html[data-theme="apple-noir"] #cartBar {
  background: #FFFFFF !important; color: #000000 !important;
  border: 1px solid #FFFFFF !important;
}
html[data-theme="nuit-gourmande"] #cartBar *,
html[data-theme="apple-noir"] #cartBar * {
  color: #000000 !important; -webkit-text-fill-color: #000000 !important;
}
/* Bouton commander (placeOrder) = blanc / noir en dark */
html[data-theme="nuit-gourmande"] #placeOrder,
html[data-theme="apple-noir"] #placeOrder {
  background: #FFFFFF !important; border-color: #FFFFFF !important;
  color: #000000 !important; -webkit-text-fill-color: #000000 !important;
}
html[data-theme="nuit-gourmande"] #placeOrder *,
html[data-theme="apple-noir"] #placeOrder * {
  color: #000000 !important; -webkit-text-fill-color: #000000 !important;
}

/* ---------- Point 3 : boutons +/- et quantité en dark ---------- */
html[data-theme="nuit-gourmande"] .sf-qty button,
html[data-theme="apple-noir"] .sf-qty button,
html[data-theme="nuit-gourmande"] .sf-card-add,
html[data-theme="apple-noir"] .sf-card-add {
  background: #000000 !important; color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.4) !important;
}
html[data-theme="nuit-gourmande"] .sf-qty span,
html[data-theme="apple-noir"] .sf-qty span {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}

/* ---------- Point 5 : sélection = blanc/noir en dark ---------- */
html[data-theme="nuit-gourmande"] .sf-mode-cards button,
html[data-theme="apple-noir"] .sf-mode-cards button,
html[data-theme="nuit-gourmande"] .sf-deliv-opt,
html[data-theme="apple-noir"] .sf-deliv-opt,
html[data-theme="nuit-gourmande"] .sf-sched-opt,
html[data-theme="apple-noir"] .sf-sched-opt,
html[data-theme="nuit-gourmande"] .sf-paytile,
html[data-theme="apple-noir"] .sf-paytile,
html[data-theme="nuit-gourmande"] .sf-table,
html[data-theme="apple-noir"] .sf-table {
  background: #000000 !important; color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.4) !important;
}
html[data-theme="nuit-gourmande"] .sf-mode-cards button.active,
html[data-theme="apple-noir"] .sf-mode-cards button.active,
html[data-theme="nuit-gourmande"] .sf-sched-opt.active,
html[data-theme="apple-noir"] .sf-sched-opt.active,
html[data-theme="nuit-gourmande"] .sf-deliv-opt.active,
html[data-theme="apple-noir"] .sf-deliv-opt.active,
html[data-theme="nuit-gourmande"] .sf-paytile.selected,
html[data-theme="apple-noir"] .sf-paytile.selected,
html[data-theme="nuit-gourmande"] .sf-table.selected,
html[data-theme="apple-noir"] .sf-table.selected {
  background: #FFFFFF !important; color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-color: #FFFFFF !important;
}
html[data-theme="nuit-gourmande"] .sf-mode-cards button.active *,
html[data-theme="apple-noir"] .sf-mode-cards button.active *,
html[data-theme="nuit-gourmande"] .sf-sched-opt.active *,
html[data-theme="apple-noir"] .sf-sched-opt.active *,
html[data-theme="nuit-gourmande"] .sf-deliv-opt.active *,
html[data-theme="apple-noir"] .sf-deliv-opt.active *,
html[data-theme="nuit-gourmande"] .sf-paytile.selected *,
html[data-theme="apple-noir"] .sf-paytile.selected *,
/* Cartes de mode / options livraison : contour blanc bien visible en dark. */
html[data-theme="nuit-gourmande"] .sf-mode-cards button,
html[data-theme="apple-noir"] .sf-mode-cards button,
html[data-theme="nuit-gourmande"] .sf-deliv-opt,
html[data-theme="apple-noir"] .sf-deliv-opt {
  border: 1.5px solid rgba(255,255,255,.85) !important;
}
html[data-theme="nuit-gourmande"] .sf-mode-cards button .sf-mode-ic,
html[data-theme="apple-noir"] .sf-mode-cards button .sf-mode-ic {
  color: #FFFFFF !important;
}
html[data-theme="nuit-gourmande"] .sf-mode-cards button.active .sf-mode-ic,
html[data-theme="apple-noir"] .sf-mode-cards button.active .sf-mode-ic,
html[data-theme="nuit-gourmande"] .sf-deliv-opt.active .sf-deliv-opt-s,
html[data-theme="apple-noir"] .sf-deliv-opt.active .sf-deliv-opt-s {
  color: #000000 !important; -webkit-text-fill-color: #000000 !important;
}
html[data-theme="nuit-gourmande"] .sf-table.selected * {
  color: #000000 !important; -webkit-text-fill-color: #000000 !important;
}

/* ---------- Point 9+10 : téléphone et liste pays en dark ---------- */
html[data-theme="nuit-gourmande"] .sf-ccbtn,
html[data-theme="apple-noir"] .sf-ccbtn,
html[data-theme="nuit-gourmande"] #custPhone,
html[data-theme="apple-noir"] #custPhone {
  background: #000000 !important; color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}
html[data-theme="nuit-gourmande"] .sf-ccbtn *,
html[data-theme="apple-noir"] .sf-ccbtn * {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
html[data-theme="nuit-gourmande"] #custPhone::placeholder,
html[data-theme="apple-noir"] #custPhone::placeholder {
  color: rgba(255,255,255,.5) !important; -webkit-text-fill-color: rgba(255,255,255,.5) !important;
}
/* Liste pays : fond noir, textes blancs, sélection blanc/noir */
html[data-theme="nuit-gourmande"] .sf-modal-list,
html[data-theme="apple-noir"] .sf-modal-list {
  background: #000000 !important;
}
html[data-theme="nuit-gourmande"] .sf-modal-list button,
html[data-theme="apple-noir"] .sf-modal-list button {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  border-color: rgba(255,255,255,.1) !important;
}
html[data-theme="nuit-gourmande"] .sf-modal-list button.selected,
html[data-theme="apple-noir"] .sf-modal-list button.selected {
  background: #FFFFFF !important; color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* ---------- Point 1 : bouton Directions = blanc/noir en dark ---------- */
html[data-theme="nuit-gourmande"] #navLink,
html[data-theme="apple-noir"] #navLink {
  background: #FFFFFF !important; color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-color: #FFFFFF !important;
}
html[data-theme="nuit-gourmande"] #navLink svg,
html[data-theme="apple-noir"] #navLink svg {
  stroke: #000000 !important; fill: #000000 !important;
}

/* ---------- Point 2 : fond cohérent, pas de bandes blanches ---------- */
html[data-theme="nuit-gourmande"] .sf-checkout,
html[data-theme="apple-noir"] .sf-checkout,
html[data-theme="nuit-gourmande"] .sf-cart-drawer,
html[data-theme="apple-noir"] .sf-cart-drawer {
  background: var(--sf-sheet-bg) !important;
}
html[data-theme="nuit-gourmande"] .sf-sec,
html[data-theme="apple-noir"] .sf-sec {
  background: transparent !important;
}

/* ---------- Point 8 : iOS — pas de zoom forcé, pas de débordement ---------- */
.sf-checkout input, .sf-checkout select, .sf-checkout textarea,
.sf-sheet input, .sf-sheet select, .sf-sheet textarea,
.sf-modal input, .sf-modal select, .sf-modal textarea {
  font-size: 16px !important;
  max-width: 100%;
}
.sf-phone-row, .sf-checkout .sf-fld {
  max-width: 100%; overflow: hidden;
}

/* ---------- Point 7 : header checkout sticky ---------- */
.sf-checkout-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--sf-sheet-bg);
  padding-top: env(safe-area-inset-top);
}

/* ---------- Point 6 : scroll fluide ---------- */
.sf-checkout-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Point 1 : barre Ouvert/Fermé lisible en dark (apple-noir) */
html[data-theme="apple-noir"] .sf-hours.open { background: #0A2E1A; color: #30D158; }
html[data-theme="apple-noir"] .sf-hours.closed { background: #3A1B1B; color: #FF453A; }

/* Point 10 : message aucun résultat */
.sf-cc-empty { padding: 24px 16px; text-align: center; color: var(--sf-muted); font-size: calc(12px * var(--sf-fs, 1)); }

/* ---------- Animation "fly to cart" premium ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fly-clone {
    position: fixed; left: 0; top: 0; z-index: 9999;
    border-radius: 18px; overflow: hidden; pointer-events: none;
    box-shadow: 0 12px 32px rgba(0,0,0,.28);
    will-change: transform, opacity;
  }
  .fly-clone img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .fly-clone-dot { border-radius: 50%; background: var(--sf-primary, #111); }
  .fly-trail {
    position: fixed; left: 0; top: 0; z-index: 9998;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--sf-primary, #111);
    pointer-events: none; will-change: transform, opacity;
  }
  .fly-land { animation: fly-land .42s cubic-bezier(.22,1,.36,1); }
  .fly-count { animation: fly-count .42s cubic-bezier(.22,1,.36,1); display: inline-block; }
}
@keyframes fly-land {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); }
  70% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@keyframes fly-count {
  0% { transform: scale(.4); opacity: 0; }
  55% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== Ergonomie options (alignée POS, demande d'Elhadji 2026-10-12) ===== */
.sf-note-wrap { margin: 14px 16px 0; }
.sf-note-label { display: block; font-size: calc(13px * var(--sf-fs, 1)); font-weight: 600; color: var(--sf-text); margin-bottom: 6px; font-family: var(--sf-font); }
.sf-note-wrap textarea {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--sf-border); border-radius: 10px;
  padding: 10px; font: inherit; font-size: 16px; background: var(--sf-surface); color: var(--sf-text); resize: vertical;
}
.sf-pp-scroll .sf-note-wrap { margin: 14px 0 0; }
@media (max-width: 640px) {
  /* Options : cartes horizontales DEUX par ligne, compteur EN BAS de
   * chaque carte, toujours visible (comme la caisse). */
  .sf-mopt-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sf-mopt-card { aspect-ratio: auto; min-height: 112px; justify-content: flex-start; padding: 10px 8px 8px; gap: 4px; }
  .sf-mopt-card .sf-mopt-name { font-size: calc(12px * var(--sf-fs, 1)); }
  .sf-mopt-card .sf-mopt-price { font-size: calc(11px * var(--sf-fs, 1)); }
  .sf-mopt-stepper { margin-top: auto; padding-top: 6px; }
  .sf-step { width: 30px; height: 30px; font-size: calc(14px * var(--sf-fs, 1)); }
  .sf-mopt-qty { font-size: calc(12px * var(--sf-fs, 1)); min-width: 18px; }
}

/* Porte des horaires (loi Elhadji 2026-10-14) : boutique fermée et aucun
   créneau « plus tard » choisi = boutons d'ajout verrouillés visiblement. */
body.sf-closed-locked .sf-card-add { opacity: .38; pointer-events: none; }
body.sf-closed-locked #ppAdd { opacity: .55; }
.sf-closed-later { margin-top: 10px; }