/* ═══════════════════════════════════════════════════════════════════
   Le Coin Pizza — thème « logo » du site de commande (2026-09-29)
   Chargé APRÈS style.css : redéfinit la palette (variables) puis les
   composants qui avaient des couleurs sombres en dur. Maquette :
   canevas Claude Design « Le Coin Pizza · App client ».
   Couleurs du logo : rouge #cc0c0c · vert #305424 · bleu #0c3c78 ·
   crème #fcf0c0 (fond #fff7e3) · jaune #f0d818 · encre #1c2a16
═══════════════════════════════════════════════════════════════════ */
:root {
  --lcp-red: #cc0c0c; --lcp-red-dark: #a30a0a; --lcp-red-shadow: #8f0808;
  --lcp-green: #305424; --lcp-green-dark: #1f3a1a;
  --lcp-blue: #0c3c78; --lcp-cream: #fcf0c0; --lcp-ground: #fff7e3;
  --lcp-yellow: #f0d818; --lcp-ink: #1c2a16; --lcp-muted: #5d6b58;

  /* style.css */
  --bg-abyss: var(--lcp-ground); --bg-primary: var(--lcp-ground); --bg-secondary: var(--lcp-cream);
  --bg-card: #ffffff; --bg-elevated: var(--lcp-cream); --bg-input: #ffffff; --bg-surface2: var(--lcp-cream); --braise-deep: var(--lcp-cream);
  --ember: var(--lcp-red); --ember-deep: var(--lcp-red-dark); --amber: var(--lcp-red); --amber-soft: var(--lcp-blue);
  --rouge-four: var(--lcp-red); --rouge-sombre: var(--lcp-red-shadow); --basilic: var(--lcp-green); --basilic-deep: var(--lcp-green);
  --error: #b91c1c; --error-soft: #dc2626; --warning: #b45309; --success: var(--lcp-green);
  --text-primary: var(--lcp-ink); --text-secondary: #3a4a34; --text-muted: var(--lcp-muted); --text-on-cta: #ffffff; --text-on-amber: var(--lcp-ink);
  --hairline: rgba(48, 84, 36, 0.18); --hairline-strong: rgba(48, 84, 36, 0.34); --overlay: rgba(28, 42, 22, 0.55);
  --glow-ember: rgba(204, 12, 12, 0.22); --glow-hearth: rgba(240, 216, 24, 0.0); --focus-ring: rgba(48, 84, 36, 0.28);
  --grad-cta: linear-gradient(180deg, #d81010, #cc0c0c); --grad-bandeau: linear-gradient(180deg, #d81010, #cc0c0c);
  --font-display: 'Lilita One', 'Arial Rounded MT Bold', cursive; --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; --font: var(--font-body);
  --brand: var(--lcp-red); --brand-primary: var(--lcp-red); --brand-hover: #e01414; --brand-dark: var(--lcp-red-dark); --brand-deep: var(--lcp-red-shadow); --brand-glow: rgba(204, 12, 12, 0.3);
  /* shared-theme.css */
  --bg: var(--lcp-ground); --text: var(--lcp-ink); --text-dim: #7a8874; --border: rgba(48, 84, 36, 0.25); --border-subtle: rgba(48, 84, 36, 0.12);
  --danger: var(--lcp-red); --info: var(--lcp-blue);
  --shadow-sm: 0 2px 8px rgba(48, 84, 36, 0.10); --shadow-md: 0 6px 18px rgba(48, 84, 36, 0.14); --shadow-lg: 0 12px 32px rgba(48, 84, 36, 0.18); --shadow-glow: 0 0 0 3px rgba(204, 12, 12, 0.18);
}

/* ---------- fond de page ---------- */
body { background: var(--lcp-ground) !important; color: var(--lcp-ink); font-family: var(--font-body); }
.view { background: var(--lcp-ground); }

/* ---------- accueil ---------- */
.hero-gradient { background: none !important; }
.floating-pizzas { display: none !important; }
.hero-content { padding-top: 14px; }
.hero-badge { background: var(--lcp-green) !important; border: 2px solid var(--lcp-green) !important; color: #ffffff !important; font-weight: 800; }
.hero-badge .status-dot { background: var(--lcp-yellow) !important; box-shadow: none !important; }
.hero-badge .status-today { color: var(--lcp-cream) !important; }
.hours-toggle { color: var(--lcp-blue) !important; font-weight: 800; text-decoration: underline; background: transparent !important; border: 0 !important; }
.hours-panel { background: #ffffff; border: 2px solid var(--lcp-cream); border-radius: 14px; color: var(--lcp-ink); }
.hero-title { margin: 4px 0 8px 0; }
.hero-title .title-emoji, .hero-title .title-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-logo { display: block; width: min(62vw, 250px); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 10px rgba(48, 84, 36, 0.18)); }
.hero-card { position: relative; margin: 6px 0 14px 0; padding: 20px 18px 16px 18px; border-radius: 24px; background: var(--lcp-red); color: var(--lcp-cream); box-shadow: 0 10px 24px rgba(204, 12, 12, 0.22); overflow: hidden; text-align: left; }
.hero-tagline { font-family: var(--font-display); font-size: clamp(1.9rem, 9vw, 2.5rem); line-height: 1; letter-spacing: 0.5px; margin: 0 0 10px 0; max-width: 62%; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.18); color: var(--lcp-cream); }
.hero-card .hero-location { color: #ffffff !important; font-weight: 700; margin: 0 0 12px 0; justify-content: flex-start; font-size: 0.9rem; }
.hero-card .hero-location .icon-pin { color: #ffffff; }
.hero-mascot { position: absolute; right: -4px; top: 6px; width: 34%; max-width: 132px; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25)); pointer-events: none; }
.hero-card .hero-info { margin: 0; padding: 0; background: transparent; border: 0; gap: 10px; }
.hero-card .info-item { flex: 1; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); align-items: flex-start; text-align: left; }
.hero-card .info-divider { display: none; }
.hero-card .info-icon { font-size: 0.85rem; }
.hero-card .info-label { color: var(--lcp-cream) !important; font-weight: 700; font-size: 0.75rem; order: -1; }
.hero-card .info-value { color: #ffffff !important; font-family: var(--font-body) !important; font-weight: 800; font-size: 1.15rem !important; }
.hero-cta { background: var(--lcp-green) !important; color: #ffffff !important; font-family: var(--font-display) !important; font-size: 1.35rem !important; letter-spacing: 0.5px; border-radius: 18px !important; box-shadow: 0 6px 0 var(--lcp-green-dark) !important; min-height: 58px; }
.hero-cta:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--lcp-green-dark) !important; }
.hero-features { gap: 10px; }
.feature { background: #ffffff; border: 2px solid var(--lcp-cream); border-radius: 14px; padding: 10px 12px; color: var(--lcp-green) !important; font-weight: 800; }
.feature:nth-child(2) { color: var(--lcp-red) !important; }
.action-pill { background: #ffffff !important; border: 2px solid var(--lcp-green) !important; color: var(--lcp-green) !important; font-weight: 800; }
.action-pill + .action-pill { border-color: var(--lcp-blue) !important; color: var(--lcp-blue) !important; }
.pill-badge { background: var(--lcp-red); color: #ffffff; }

/* ---------- menu ---------- */
.menu-header, .simple-header, .checkout-header, .account-header { background: var(--lcp-cream) !important; border-bottom: 3px solid var(--lcp-green) !important; backdrop-filter: none !important; }
.header-btn { background: #ffffff !important; border: 2px solid var(--lcp-green) !important; color: var(--lcp-green) !important; border-radius: 999px !important; }
.header-btn.cart-btn { background: var(--lcp-red) !important; border-color: var(--lcp-red) !important; color: #ffffff !important; box-shadow: 0 3px 0 var(--lcp-red-shadow); }
.cart-badge { background: var(--lcp-yellow) !important; color: var(--lcp-ink) !important; border: 2px solid #ffffff !important; font-weight: 800; }
.header-brand { gap: 8px; }
.header-brand .brand-icon { display: none; }
.brand-logo { height: 40px; width: auto; display: block; }
.brand-name, .header-title, .drawer-title { font-family: var(--font-display) !important; color: var(--lcp-red) !important; letter-spacing: 0.4px; font-weight: 400 !important; }
.search-bar { background: #ffffff !important; border: 2px solid var(--lcp-cream) !important; }
.search-bar input { color: var(--lcp-ink) !important; }
.search-bar input::placeholder { color: var(--lcp-muted); }
.categories-nav { background: var(--lcp-ground) !important; }
.cat-btn { background: #ffffff !important; border: 2px solid var(--lcp-green) !important; color: var(--lcp-green) !important; font-weight: 800; }
.cat-btn.active { background: var(--lcp-red) !important; border-color: var(--lcp-red) !important; color: #ffffff !important; box-shadow: 0 3px 0 var(--lcp-red-shadow) !important; }
.section-title { font-family: var(--font-display) !important; color: var(--lcp-green) !important; letter-spacing: 0.4px; font-weight: 400 !important; }
.section-header .section-title { color: var(--lcp-red) !important; }
.product-card { background: #ffffff !important; border: 2px solid var(--lcp-cream) !important; box-shadow: 0 2px 0 rgba(48, 84, 36, 0.08) !important; }
.product-card:hover, .product-card:active { border-color: var(--lcp-green) !important; }
.product-name { color: var(--lcp-ink) !important; font-weight: 800; }
.product-price { color: var(--lcp-red) !important; font-weight: 800; }
.add-btn { background: var(--lcp-green) !important; color: #ffffff !important; border: 0 !important; }
.floating-cart { background: var(--lcp-red) !important; color: #ffffff !important; box-shadow: 0 6px 0 var(--lcp-red-shadow), 0 10px 24px rgba(204, 12, 12, 0.25) !important; border-radius: 18px !important; font-weight: 800; }
.floating-cart .fc-total { color: #ffffff !important; }

/* ---------- panier ---------- */
.cart-drawer { background: var(--lcp-ground) !important; box-shadow: -12px 0 32px rgba(48, 84, 36, 0.18) !important; }
.drawer-header { background: var(--lcp-cream) !important; border-bottom: 3px solid var(--lcp-green) !important; }
.drawer-footer { background: var(--lcp-cream) !important; border-top: 3px solid var(--lcp-green) !important; }
.cart-item, .cart-summary { background: #ffffff; border: 2px solid var(--lcp-cream); border-radius: 18px; }
.qty-btn { background: var(--lcp-ground) !important; border: 2px solid var(--lcp-cream) !important; color: var(--lcp-green) !important; }
.qty-value { color: var(--lcp-ink) !important; font-weight: 800; }
.delete-btn { color: var(--lcp-red) !important; }
.total-line.total, .details-total { font-family: var(--font-display); color: var(--lcp-red) !important; }
.checkout-btn, .submit-btn, .new-order-btn { background: var(--lcp-red) !important; color: #ffffff !important; font-family: var(--font-display) !important; font-size: 1.3rem !important; letter-spacing: 0.5px; border-radius: 18px !important; box-shadow: 0 6px 0 var(--lcp-red-shadow) !important; }
.checkout-btn:active, .submit-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--lcp-red-shadow) !important; }

/* ---------- fiche produit / feuilles ---------- */
.modal-overlay, .drawer-overlay { background: var(--overlay) !important; }
.modal-sheet { background: var(--lcp-ground) !important; color: var(--lcp-ink); }
.sheet-handle { background: var(--lcp-green) !important; opacity: 0.5; }
.sheet-close { background: var(--lcp-cream) !important; color: var(--lcp-green) !important; border: 2px solid var(--lcp-green) !important; }
.product-header .product-price, .product-header .price { color: var(--lcp-red) !important; }
.type-option, .variants-grid button, .sauce-list button, .supplements-list .supp-item, .input-group input, .notes-input, textarea { background: #ffffff !important; border: 2px solid var(--lcp-cream) !important; color: var(--lcp-ink) !important; border-radius: 14px; }
.type-option.active, .type-option.selected, .variants-grid button.active, .variants-grid button.selected, .sauce-list button.active, .sauce-list button.selected { background: var(--lcp-red) !important; border-color: var(--lcp-red) !important; color: #ffffff !important; }
.supplements-list .supp-item.selected, .supplements-list .supp-item.active { border-color: var(--lcp-green) !important; }
.supp-title, .section-label { font-family: var(--font-display) !important; color: var(--lcp-green) !important; font-weight: 400 !important; letter-spacing: 0.3px; }
.supp-subtitle { color: var(--lcp-muted) !important; }
.add-section { background: var(--lcp-cream) !important; border-top: 3px solid var(--lcp-green) !important; }
.input-group input:focus, .notes-input:focus, textarea:focus, .search-bar input:focus { border-color: var(--lcp-green) !important; box-shadow: 0 0 0 3px var(--focus-ring) !important; outline: none; }
.input-group label, .form-section label { color: var(--lcp-muted) !important; font-weight: 800; }

/* ---------- commande ---------- */
.checkout-sheet { background: var(--lcp-ground) !important; }
.form-section { background: #ffffff; border: 2px solid var(--lcp-cream); border-radius: 18px; }
.type-options .type-option.active { background: var(--lcp-red) !important; }
.pv-btn-verify { background: var(--lcp-green) !important; color: #ffffff !important; border: 0 !important; font-weight: 800; }
.saved-badge { background: var(--lcp-green) !important; color: #ffffff !important; }
.summary-section, .order-totals { background: #ffffff; border: 2px solid var(--lcp-cream); border-radius: 18px; }
.delivery-section { border-color: var(--lcp-blue) !important; }
.step-time, .time-option, .time-chip { background: #ffffff !important; border: 2px solid var(--lcp-blue) !important; color: var(--lcp-blue) !important; font-weight: 800; border-radius: 999px; }
.step-time.active, .time-option.active, .time-chip.active { background: var(--lcp-blue) !important; color: #ffffff !important; }

/* ---------- suivi de commande ---------- */
.tracking-header { background: var(--lcp-red) !important; border-bottom: 0 !important; color: #ffffff; }
.tracking-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.2rem; color: #ffffff !important; letter-spacing: 0.4px; }
.tracking-brand img { height: 46px; width: auto; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)); }
.tracking-close-btn { background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; border: 0 !important; border-radius: 999px !important; }
.tracking-order-card { background: #ffffff; border: 2px solid var(--lcp-cream); border-radius: 18px; }
.order-number { font-family: var(--font-display); color: var(--lcp-red) !important; letter-spacing: 0.4px; }
.order-type-badge { background: var(--lcp-cream) !important; color: var(--lcp-green) !important; font-weight: 800; }
.tracking-status-card { background: var(--lcp-green) !important; color: #ffffff !important; border: 0 !important; border-radius: 22px !important; position: relative; overflow: hidden; }
.tracking-status-card .status-title { font-family: var(--font-display) !important; color: #ffffff !important; font-weight: 400 !important; letter-spacing: 0.4px; }
.tracking-status-card .status-subtitle { color: #e6f0dd !important; }
.tracking-status-card .status-emoji { filter: none; }
.tracking-mascot { position: absolute; right: 8px; top: 8px; width: 74px; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3)); pointer-events: none; }
.progress-step .step-indicator { background: #ffffff !important; border: 3px solid rgba(255, 255, 255, 0.5) !important; color: var(--lcp-green); }
.progress-step.done .step-indicator, .progress-step.completed .step-indicator { background: var(--lcp-yellow) !important; border-color: var(--lcp-yellow) !important; color: var(--lcp-ink) !important; }
.progress-step.active .step-indicator, .progress-step.current .step-indicator { background: var(--lcp-red) !important; border-color: #ffffff !important; color: #ffffff !important; }
.progress-step .step-label { color: #ffffff !important; font-weight: 700; }
.step-pulse { background: rgba(255, 255, 255, 0.35) !important; }
.tracking-eta-card { background: var(--lcp-yellow) !important; color: var(--lcp-ink) !important; border: 0 !important; border-radius: 18px !important; font-weight: 800; }
.tracking-eta-card * { color: var(--lcp-ink) !important; }
.tracking-ready-alert { background: var(--lcp-red) !important; color: #ffffff !important; border: 0 !important; border-radius: 18px !important; }
.tracking-ready-alert .ready-title { font-family: var(--font-display) !important; color: #ffffff !important; }
.tracking-details-card, .tracking-contact-card { background: #ffffff; border: 2px solid var(--lcp-cream); border-radius: 18px; }
.tracking-contact-card a, .tracking-footer a { color: var(--lcp-blue) !important; font-weight: 800; }
.tracking-footer { background: var(--lcp-cream); border-top: 3px solid var(--lcp-green); color: var(--lcp-muted); }

/* ---------- divers ---------- */
.toast { background: var(--lcp-green) !important; color: #ffffff !important; border: 0 !important; box-shadow: 0 8px 24px rgba(48, 84, 36, 0.3) !important; }
.toast.error { background: var(--lcp-red) !important; }
.account-sheet { background: var(--lcp-ground) !important; }
::selection { background: rgba(240, 216, 24, 0.55); }

/* ---------- retouches après captures (2026-09-29) ---------- */
/* commande : cartes À emporter / Livraison (fond sombre en dur) */
.type-card { background: #ffffff !important; border: 2px solid var(--lcp-cream) !important; color: var(--lcp-ink) !important; }
.type-option input:checked + .type-card { background: var(--lcp-red) !important; border-color: var(--lcp-red) !important; color: #ffffff !important; box-shadow: 0 4px 0 var(--lcp-red-shadow) !important; }
.type-option input:checked + .type-card * { color: #ffffff !important; }
.type-icon { background: var(--lcp-cream) !important; box-shadow: none !important; }
.type-option input:checked + .type-card .type-icon { background: rgba(255, 255, 255, 0.22) !important; }
/* suivi : heures des étapes = simple texte (pas des champs), étape active rouge, terminée jaune */
.step-time { background: transparent !important; border: 0 !important; color: var(--lcp-cream) !important; font-weight: 700; padding: 0 !important; border-radius: 0 !important; }
.step-label { color: #ffffff !important; }
.step-indicator { background: #ffffff !important; box-shadow: none !important; }
.step-indicator.active { background: var(--lcp-red) !important; border: 3px solid #ffffff !important; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25) !important; }
.step-indicator.completed { background: var(--lcp-yellow) !important; }
.step-indicator.completed .step-icon, .step-indicator.active .step-icon { filter: none; }
.step-indicator.completed + .step-info .step-label, .step-indicator.active + .step-info .step-label { color: #ffffff !important; }
.progress-line { background: rgba(255, 255, 255, 0.35) !important; }
.order-number { font-size: 1.5rem !important; letter-spacing: 0.02em !important; }
/* accueil : badge Fermé lisible sur le vert */
.hero-badge.closed { background: var(--lcp-red) !important; border-color: var(--lcp-red) !important; }
.hero-badge.closed .status-dot { background: var(--lcp-yellow) !important; }
.hero-badge.closed .status-text { color: #ffffff !important; }
/* panier : bouton fermer et corbeille aux couleurs du thème */
.drawer-header .header-btn, .drawer-header button { background: #ffffff !important; border: 2px solid var(--lcp-green) !important; color: var(--lcp-green) !important; border-radius: 999px !important; }
.delete-btn { background: rgba(204, 12, 12, 0.1) !important; border-radius: 10px; }

/* ---------- retouches 2 (captures client 2026-09-29) ---------- */
/* fiche produit : tailles (variant-chip) — texte blanc sur la taille choisie */
.variant-chip { background: #ffffff !important; border: 2px solid var(--lcp-cream) !important; color: var(--lcp-ink) !important; }
.variant-chip .variant-name { color: var(--lcp-ink) !important; }
.variant-chip .variant-price { color: var(--lcp-red) !important; }
.variant-chip.selected { background: var(--lcp-red) !important; border-color: var(--lcp-red) !important; box-shadow: 0 3px 0 var(--lcp-red-shadow) !important; }
.variant-chip.selected .variant-name, .variant-chip.selected .variant-price, .variant-chip.selected * { color: #ffffff !important; }
.variant-chip.out-of-stock { opacity: 0.5; }
/* menu : badge « 3 choix » lisible sur les photos */
.card-variants-badge { background: var(--lcp-yellow) !important; color: var(--lcp-ink) !important; border: 0 !important; font-weight: 800 !important; text-shadow: none !important; backdrop-filter: none !important; }
/* toast : texte blanc sur le vert */
.toast, .toast * { color: #ffffff !important; }
.toast-icon { background: transparent !important; }
/* sauces / suppléments : ligne sélectionnée en vert, cases à cocher visibles */
.supp-item.selected, .sauce-item.selected, .ingredient-item.selected { border-color: var(--lcp-green) !important; background: #f3f8ee !important; }
.supp-check, .sauce-check, .check-circle { border: 2px solid var(--lcp-green) !important; background: #ffffff !important; }
.selected .supp-check, .selected .sauce-check, .selected .check-circle { background: var(--lcp-green) !important; color: #ffffff !important; }