/* ============================================================
   MARCHÉO — REDESIGN ÉDITORIAL v2 (App Commerçant)
   Match du proto Claude Design (zjzOpUYy3Nws827EtW5wdQ)
   Inspiration : Apple (structure) + UberEats (énergie) + Dish (chaleur)
   Senior-friendly : 17px+ base, hit targets 56-64px, contraste élevé
   Typo : Fraunces (display serif) + Inter (UI)
   Palette : crème chaude #F7F1E6 + ink coffee #1C1814 + tomate #C5462A
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Couleurs ── */
  --bg:           #F7F1E6;
  --creme:        #F7F1E6;
  --creme-fonce:  #EDE3CF;
  --blanc:        #FFFCF6;
  --surface-2:    #F0E9DA;
  --texte:        #1C1814;
  --texte-doux:   rgba(28,24,20,0.62);
  --texte-leger:  rgba(28,24,20,0.42);
  --border:       rgba(28,24,20,0.08);
  --divider:      rgba(28,24,20,0.05);

  /* Accents */
  --accent:       #C5462A;          /* tomate Dish */
  --accent-deep:  #8E2F18;
  --accent-soft:  rgba(197,70,42,0.12);

  --vert:         #4A6F4F;          /* sage marché */
  --vert-fonce:   #2F4F35;
  --vert-clair:   #4A6F4F;
  --vert-soft:    rgba(74,111,79,0.12);
  --vert-ok:      #4A6F4F;
  --vert-ok-clair:#E7EFE6;
  --or:           #B8862B;
  --or-clair:     #B8862B;
  --terracotta:   #C5462A;
  --tomate:       #C5462A;
  --bleu-nuit:    #1C1814;

  /* Fonts */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-ui:      'Inter', -apple-system, system-ui, sans-serif;
}

/* ============================================================
   GLOBAL
   ============================================================ */
body {
  font-family: var(--font-ui), 'Manrope', system-ui, sans-serif !important;
  background: var(--bg) !important;
  color: var(--texte) !important;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11' 1, 'ss01' 1;
}

/* Reset des styles inline qui forcent Manrope */
[style*="font-family:'Manrope'"],
[style*='font-family:"Manrope"'],
[style*="font-family: 'Manrope'"],
[style*='font-family: "Manrope"'] {
  font-family: var(--font-ui) !important;
}

/* ============================================================
   HEADER BANDEAU "Espace Primeur"
   ============================================================ */
.dash-header {
  background: var(--texte) !important;
  color: #fff !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
  margin: 12px !important;
  box-shadow: 0 4px 16px rgba(28,24,20,0.12);
}

.dash-header h1, #dashTitre {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.5px !important;
  font-size: 22px !important;
  color: #fff !important;
}

.dash-header [id*="statutBoutique"],
#statutBoutique {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.6) !important;
  font-weight: 500 !important;
}

/* PAUSE button orange */
button[onclick*="togglePause"], #btnPause {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
  border: none !important;
  font-family: var(--font-ui) !important;
  letter-spacing: 0.3px;
}

/* Déco button outline */
button[onclick*="seDeconnecter"] {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: var(--font-ui) !important;
}

/* ============================================================
   STATS CARD (Retraits / CA / À préparer / Demain)
   ============================================================ */
.stats-card {
  background: var(--texte) !important;
  margin: 0 12px 12px !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-shadow: 0 4px 16px rgba(28,24,20,0.08);
}

.stats-date {
  font-size: 13px !important;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 14px !important;
  font-weight: 500;
  text-transform: capitalize;
}

#btnTestNotif {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-family: var(--font-ui) !important;
}

/* CHIFFRES KPI ÉNORMES en Fraunces */
.stat-val {
  font-family: var(--font-display) !important;
  font-size: 56px !important;
  font-weight: 400 !important;
  letter-spacing: -2px !important;
  line-height: 1 !important;
  color: #fff !important;
  font-feature-settings: 'tnum' 1;
}

.stat-lbl {
  font-size: 12px !important;
  color: rgba(255,255,255,0.55) !important;
  margin-top: 6px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px;
  font-family: var(--font-ui) !important;
}

.stats-grid {
  gap: 18px !important;
}

/* ============================================================
   ALERTE BAR
   ============================================================ */
.alerte-bar {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 12px !important;
  margin: 0 12px 10px !important;
  padding: 14px 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px;
}

/* ============================================================
   FILTRES PILLS COMMANDES (Toutes / Nouvelles / En prépa / Prêtes)
   ============================================================ */
.commandes-filtres {
  padding: 12px 16px !important;
  background: var(--blanc) !important;
  border-bottom: 1px solid var(--border) !important;
  gap: 8px !important;
}

.filtre-pill {
  background: var(--surface-2) !important;
  color: var(--texte-doux) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--font-ui) !important;
  min-height: 40px;
}

.filtre-pill.actif {
  background: var(--texte) !important;
  color: #fff !important;
}

/* ============================================================
   TAB BAR — bottom nav style iOS 17 (chip arrondi sur l'actif)
   ============================================================ */
.tabs {
  background: var(--blanc) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: none !important;
  box-shadow: 0 -4px 16px rgba(28,24,20,0.06) !important;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom)) !important;
}

.tab-btn {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  color: var(--texte-doux) !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  border-radius: 16px !important;
  padding: 10px 8px !important;
  margin: 0 2px !important;
  transition: all .2s ease !important;
}

.tab-btn[data-icon]::before {
  font-size: 22px !important;
  margin-bottom: 4px !important;
  opacity: 1 !important;
  filter: none !important;
  transition: transform .2s ease;
}

/* Tab actif STYLE PROTO : tomate accent (icône + label), zéro chip */
.tab-btn.active {
  background: transparent !important;
  color: var(--accent) !important;        /* tomate #C5462A */
  border-bottom: none !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Emojis : taille uniforme, anti-aliasing propre */
.tab-btn[data-icon]::before {
  font-size: 22px !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
  opacity: 0.78 !important;
  filter: grayscale(0.3);                  /* léger désaturation pour matcher style outline */
  display: block !important;
  transition: opacity .15s, transform .15s, filter .15s;
}

.tab-btn.active[data-icon]::before {
  opacity: 1 !important;
  filter: grayscale(0) saturate(1.4) hue-rotate(-5deg);
  transform: scale(1.05);
}

/* Cache l'icône si emoji absent et garde uniquement la version SVG (futur) */
.tab-btn:not([data-icon])::before { display: none !important; }

.tab-badge {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: 2px solid var(--blanc) !important;
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
}

.tab-btn.active .tab-badge {
  border-color: var(--texte) !important;
}

/* ============================================================
   COMMANDES — cartes éditoriales
   ============================================================ */
.commande-card {
  background: var(--blanc) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  margin: 0 12px 12px !important;
  box-shadow: 0 1px 3px rgba(28,24,20,0.03), 0 6px 16px rgba(28,24,20,0.04);
  padding: 14px !important;
}

.commande-card.nouvelle {
  border-left: 4px solid var(--accent) !important;
}
.commande-card.en-preparation {
  border-left: 4px solid var(--or) !important;
}
.commande-card.prete {
  border-left: 4px solid var(--vert-ok) !important;
  background: var(--vert-ok-clair) !important;
}

.commande-client {
  font-family: var(--font-display) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  letter-spacing: -0.3px;
  color: var(--texte) !important;
}

.commande-montant {
  font-family: var(--font-display) !important;
  font-feature-settings: 'tnum' 1;
  font-weight: 500 !important;
  letter-spacing: -0.5px;
  color: var(--accent) !important;
  font-size: 20px;
}

.commande-meta { color: var(--texte-doux); }

.meta-pill {
  background: var(--surface-2) !important;
  color: var(--texte) !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  padding: 5px 12px !important;
  font-weight: 600;
  border: none !important;
}

/* ============================================================
   RÉGLAGES — sections iOS-style éditoriales
   ============================================================ */
.reg-section-titre,
.reg-group-titre {
  color: var(--texte-doux) !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-top: 24px !important;
  margin-bottom: 10px !important;
  padding-left: 14px !important;
}

.reg-list {
  background: var(--blanc) !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  overflow: hidden;
  margin: 0 !important;
}

.reg-row {
  padding: 16px 14px !important;
  border-bottom: 1px solid var(--divider) !important;
  background: transparent !important;
  transition: background .15s ease;
}
.reg-row:last-child { border-bottom: none !important; }

.reg-row:hover, .reg-row:active {
  background: var(--surface-2) !important;
}

/* reg-icon style proto : carré arrondi beige tint, SVG outline ink coffee */
.reg-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  background: var(--creme-fonce) !important;
  color: var(--texte) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  filter: none !important;
}
.reg-icon svg {
  width: 20px !important;
  height: 20px !important;
  display: block;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

/* TOUTES les variantes de couleur sont annulées : fond uniforme tint beige */
.reg-row .reg-icon {
  background: var(--creme-fonce) !important;
  color: var(--texte) !important;
}

/* Cadres : on retire les borders cosmétiques sur les sections proto-style */
.reg-list,
[id^="reg-"][class~="reg-section-anchor"] {
  border: 1px solid rgba(28,24,20,0.06) !important;
  background: var(--blanc) !important;
}

/* Chevron en SVG (injecté par svg-icons.js) */
.reg-chevron {
  font-size: 0 !important;
  color: var(--texte-doux) !important;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reg-chevron svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.reg-label {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--texte) !important;
  font-family: var(--font-ui) !important;
}

.reg-sub {
  color: var(--texte-doux) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
}

.reg-chevron {
  color: var(--texte-leger) !important;
  font-size: 22px !important;
}

/* ============================================================
   BOUTONS PRIMAIRES (override des inline vert→tomate)
   ============================================================ */
button[style*="background:var(--vert)"]:not([style*="rgba"]),
button[style*="background: var(--vert)"]:not([style*="rgba"]),
button[style*="background:#5BBE3A"],
button[style*="background: #5BBE3A"],
button[style*="background:linear-gradient(135deg,#5BBE3A"],
button[style*="background: linear-gradient(135deg,#5BBE3A"] {
  background: var(--accent) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  letter-spacing: -0.1px;
}

button[style*="background:var(--vert)"]:hover {
  background: var(--accent-deep) !important;
}

/* ============================================================
   MODALES & DRAWER
   ============================================================ */
.modal-titre {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.4px;
  font-size: 22px !important;
}

.modal {
  background: var(--blanc) !important;
  border-radius: 24px 24px 0 0 !important;
}

/* ============================================================
   INPUTS
   ============================================================ */
input, select, textarea {
  font-family: var(--font-ui) !important;
  border-radius: 12px !important;
  border-color: var(--border) !important;
  background: var(--blanc) !important;
  color: var(--texte) !important;
  font-size: 16px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}

/* ============================================================
   TOASTS
   ============================================================ */
.toast {
  background: var(--texte) !important;
  color: var(--blanc) !important;
  border-radius: 999px !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: 0 12px 40px rgba(28,24,20,0.25);
}

/* ============================================================
   CRM TABS
   ============================================================ */
.crm-tab {
  font-family: var(--font-ui) !important;
  background: var(--surface-2) !important;
  border: none !important;
  color: var(--texte-doux) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

.crm-tab.actif {
  background: var(--accent) !important;
  color: #fff !important;
}

/* CRM : couleurs des segments */
.crm-segment-pill { font-family: var(--font-ui) !important; }
.crm-seg-vip { background: var(--or-soft, #FFF1D7) !important; color: var(--or) !important; }
.crm-seg-fidele { background: var(--vert-soft) !important; color: var(--vert) !important; }
.crm-seg-actif { background: var(--accent-soft) !important; color: var(--accent) !important; }
.crm-seg-nouveau { background: var(--vert-soft) !important; color: var(--vert) !important; }
.crm-seg-inactif_14j, .crm-seg-inactif_30j, .crm-seg-inactif_60j {
  background: rgba(184,134,43,0.12) !important; color: var(--or) !important;
}
.crm-seg-gros_panier { background: var(--accent-soft) !important; color: var(--accent) !important; }

/* ============================================================
   KPI CARDS (admin / autres pages dashboard)
   ============================================================ */
[id*="crmStat"],
[id*="statRet"], [id*="statCA"], [id*="statAPrep"], [id*="statDem"] {
  font-family: var(--font-display) !important;
  font-feature-settings: 'tnum' 1;
  font-weight: 400 !important;
  letter-spacing: -1px !important;
}

/* ============================================================
   CALENDRIER
   ============================================================ */
.cal-day { font-family: var(--font-ui) !important; }
.cal-day .cal-num { font-family: var(--font-display) !important; font-weight: 500; }
.cal-day.has-activity {
  background: var(--accent-soft) !important;
  color: var(--accent-deep) !important;
}
.cal-day.is-today {
  border: 2px solid var(--accent) !important;
}

/* ============================================================
   BANDEAU DEMO
   ============================================================ */
#demo-dash-banner {
  background: var(--texte) !important;
  font-family: var(--font-ui) !important;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  letter-spacing: 0.2px;
}

/* ============================================================
   PRODUITS LIST
   ============================================================ */
[id*="produitsAdmin"] > div, .demo-produit {
  background: var(--blanc) !important;
  border-bottom-color: var(--divider) !important;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes mFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-content.active {
  animation: mFadeIn .25s ease;
}

/* ============================================================
   SENIOR-FRIENDLY : taille de touche minimale
   ============================================================ */
@media (max-width: 540px) {
  button:not(.tab-btn):not(.filtre-pill):not(.crm-tab):not(.reg-row) {
    min-height: 44px;
  }
  .tab-btn {
    min-height: 60px;
  }
}

/* ============================================================
   COMPTE / PROFIL bandeau bleu nuit → ink coffee
   ============================================================ */
[style*="background:linear-gradient(135deg,#0F2C52,#1a3a6d)"],
[style*="background: linear-gradient(135deg,#0F2C52,#1a3a6d)"],
[style*="background:linear-gradient(135deg,#0F2C52"],
[style*="background: linear-gradient(135deg, #0F2C52"] {
  background: linear-gradient(135deg, var(--texte), #2A241D) !important;
}

/* ============================================================
   OVERRIDES INLINE — couleurs vertes vives → tomate
   (CTA, gradients verts, headers, etc.)
   ============================================================ */
[style*="background:linear-gradient(135deg,#5BBE3A,#2A6F3F)"],
[style*="background: linear-gradient(135deg,#5BBE3A,#2A6F3F)"],
[style*="background:linear-gradient(135deg,#5BBE3A"],
[style*="background: linear-gradient(135deg, #5BBE3A"],
[style*="background:linear-gradient(135deg,#1a2e26"],
[style*="background: linear-gradient(135deg, #1a2e26"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
}

/* Couleurs vertes inline (color:#5BBE3A, var(--vert)) → tomate sage selon contexte */
[style*="color:#5BBE3A"],
[style*="color: #5BBE3A"] {
  color: var(--vert) !important;     /* sage marché */
}
[style*="color:#207d4a"],
[style*="color: #207d4a"] {
  color: var(--vert) !important;
}

/* Pause button orange sur fond noir : adouci */
[style*="background:#E65533"],
[style*="background: #E65533"] {
  background: var(--accent) !important;
}

/* Bandeaux verts soft → sage soft */
[style*="background:#eaf7ee"],
[style*="background: #eaf7ee"] {
  background: var(--vert-ok-clair) !important;
}
[style*="background:#d4ecdb"],
[style*="background: #d4ecdb"] {
  background: var(--vert-soft) !important;
}

/* Bordure verte → sage */
[style*="border:2px solid #5BBE3A"],
[style*="border: 2px solid #5BBE3A"],
[style*="border-color:#5BBE3A"],
[style*="border-color: #5BBE3A"] {
  border-color: var(--vert) !important;
}

/* ============================================================
   EMOJIS : améliore le rendu (Apple Color Emoji propre)
   ============================================================ */
.tab-btn[data-icon]::before,
.m-menu-icon,
.reg-icon,
button[data-icon]::before {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif !important;
  font-feature-settings: normal !important;
  font-variant-emoji: emoji;
  text-rendering: optimizeQuality;
}

/* ============================================================
   SECTION DU BAS — agenda/planning header polish
   ============================================================ */
#content-creneaux > div > div:first-child,
#content-planning > div > div:first-child,
.content-titre,
.tab-content > div > div:first-child[style*="font-size:20px"] {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.5px !important;
  font-size: 28px !important;
  color: var(--texte) !important;
}

/* Bandeau "Mode édition" sur Agenda */
#creneauxModeBanner {
  background: var(--mustard-soft, rgba(184,134,43,0.12)) !important;
  border-left-color: var(--or) !important;
  color: var(--accent-deep) !important;
  border-radius: 12px !important;
}

/* Agenda toggle Type (Retrait / Livraison / Résa) */
#creneauxTypeToggle {
  background: var(--surface-2) !important;
  padding: 4px !important;
  border-radius: 999px !important;
}
#creneauxTypeToggle button {
  font-family: var(--font-ui) !important;
  border-radius: 999px !important;
}
#creneauxTypeToggle button[style*="background:var(--vert)"] {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Vue pills (Liste / Calendrier) */
.vue-pill {
  background: var(--surface-2) !important;
  color: var(--texte-doux) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
}
.vue-pill.actif {
  background: var(--texte) !important;
  color: #fff !important;
}

/* Calendrier mensuel : harmoniser */
#vueCalendrier {
  background: var(--blanc) !important;
  border-color: var(--border) !important;
  border-radius: 18px !important;
}