/*
 * ═══════════════════════════════════════════════════════════════
 * HooYia Market — Design System v3.0
 * ═══════════════════════════════════════════════════════════════
 *
 * CHARTE GRAPHIQUE
 * ─────────────────
 * Navbar        : Blanc pur (#ffffff) avec ombre subtile
 * Brand deep    : Bleu marine foncé (#0D1F5C) — titres, footer
 * Brand main    : Bleu marine (#1E3A8A) — boutons secondaires, liens
 * Accent        : Orange (#F97316) — 1 seul CTA principal par vue
 * Fond global   : Gris bleuté très clair (#F4F7FC) — jamais blanc pur
 * Surfaces      : Blanc (#ffffff) — cartes, modales, inputs
 * Footer        : Bleu très foncé (#091747)
 *
 * TYPOGRAPHIE
 * ─────────────
 * Police unique : Poppins (Google Fonts)
 *   - 400 : texte courant
 *   - 500 : labels, nav links
 *   - 600 : boutons, sous-titres
 *   - 700 : titres de section
 *   - 800 : grands titres hero
 *
 * BOUTONS (règle d'or : 1 seul .btn-primary par vue)
 * ─────────────────────────────────────────────────────
 *   .btn-primary   → fond orange  — action principale (Acheter, Confirmer…)
 *   .btn-secondary → contour bleu — action secondaire (Annuler, Retour…)
 *   .btn-ghost     → texte seul   — action tertiaire  (Voir plus, Lien…)
 *   Modificateurs  : .btn-sm (petit) | .btn-lg (grand)
 *
 * CONTRASTES (conformité WCAG AA)
 * ─────────────────────────────────
 *   Texte principal  sur fond blanc  : #0F1923  → ratio ~17:1 ✓
 *   Texte secondaire sur fond blanc  : #4A5568  → ratio ~7:1  ✓
 *   Texte muted      sur fond blanc  : #8898AA  → ratio ~3.5:1 ✓ (décoratif)
 *   Blanc sur orange (#F97316)       : ratio ~3:1 ✓ (grands textes)
 *   Blanc sur brand-600 (#0D1F5C)    : ratio ~15:1 ✓
 *
 * STRUCTURE DU FICHIER
 * ─────────────────────
 *   1. Import fonts
 *   2. Variables CSS (tokens)
 *   3. Reset & base
 *   4. Typographie
 *   5. Boutons
 *   6. Cards
 *   7. Badges
 *   8. Formulaires
 *   9. Toasts / Flash messages
 *  10. Product card
 *  11. Statuts commande
 *  12. Divider & Container
 *  13. Section title
 *  14. Scrollbar
 *  15. Utilitaires
 * ═══════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════
   1. IMPORT FONTS
   On charge uniquement les graisses utilisées pour optimiser
   le temps de chargement (pas de graisse inutile).
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');


/* ═══════════════════════════════════════════════════════════════
   2. VARIABLES CSS (DESIGN TOKENS)
   Toutes les valeurs du design system sont centralisées ici.
   Pour modifier la charte, on ne touche qu'à cette section.
═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Couleurs Brand ── */
  --brand-50:  #eff4ff;   /* Fond très clair (hover, badge bg) */
  --brand-100: #dce7fd;   /* Fond clair (badge, highlight) */
  --brand-200: #b8d0fb;   /* Bordure bleue légère */
  --brand-500: #1E3A8A;   /* Bleu principal (boutons, liens) */
  --brand-600: #0D1F5C;   /* Bleu foncé (titres, navbar texte) */
  --brand-700: #091747;   /* Bleu très foncé (footer) */

  /* ── Couleurs Accent (orange) ── */
  --accent:       #F97316; /* Orange principal — CTA unique par vue */
  --accent-dark:  #ea6000; /* Orange foncé — hover du CTA */
  --accent-light: #ffedd5; /* Orange très clair — badge promo bg */

  /* ── Surfaces & Fonds ── */
  --bg:        #F4F7FC;   /* Fond global des pages */
  --surface:   #ffffff;   /* Fond des cartes, modales, inputs */
  --surface-2: #f9fafb;   /* Fond secondaire (alternance, hover) */
  --surface-3: #f0f3fa;   /* Fond tertiaire (sections légères) */

  /* ── Bordures ── */
  --border:   #E2E8F0;    /* Bordure par défaut */
  --border-2: #d1dae8;    /* Bordure plus marquée */

  /* ── Textes ── */
  --text-primary:   #0F1923; /* Texte principal — titres, body */
  --text-secondary: #4A5568; /* Texte secondaire — descriptions */
  --text-muted:     #8898AA; /* Texte muet — dates, placeholders */

  /* ── Ombres ── */
  /* Toutes les ombres sont dans les tons bleu marine pour cohérence */
  --shadow-sm:     0 1px 3px rgba(13,31,92,0.06), 0 1px 2px rgba(13,31,92,0.04);
  --shadow-md:     0 4px 16px rgba(13,31,92,0.09);
  --shadow-lg:     0 8px 32px rgba(13,31,92,0.13);
  --shadow-accent: 0 4px 14px rgba(249,115,22,0.35); /* Ombre orange pour btn-primary */

  /* ── Transition globale ── */
  /* Utilisée sur tous les éléments interactifs pour une cohérence d'animation */
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ═══════════════════════════════════════════════════════════════
   3. RESET & BASE
   Reset minimal pour assurer un comportement cohérent
   cross-browser sans écraser les styles Tailwind.
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* Défilement fluide pour les ancres */
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.9375rem;     /* 15px — légèrement plus grand qu'Inter pour Poppins */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;  /* Rendu plus fin sur macOS/iOS */
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;   /* Permet au footer de rester en bas */
}

main {
  flex: 1; /* Pousse le footer tout en bas même si le contenu est court */
}

a {
  color: inherit;
  text-decoration: none; /* On gère les underlines manuellement selon le contexte */
}

img {
  display: block;     /* Supprime l'espace blanc sous les images inline */
  max-width: 100%;    /* Images responsives par défaut */
}


/* ═══════════════════════════════════════════════════════════════
   4. TYPOGRAPHIE
   Poppins est une police géométrique — les titres en 700/800
   donnent un impact fort sans agressivité visuelle.
   Les tailles utilisent clamp() pour être responsives nativement.
═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--brand-600);  /* Bleu marine foncé pour tous les titres */
  line-height: 1.25;
  font-weight: 700;
}

/* clamp(min, préféré, max) : s'adapte fluidement entre mobile et desktop */
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem);  font-weight: 800; }
h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }


/* ═══════════════════════════════════════════════════════════════
   5. BOUTONS
   Règle d'or : UN SEUL .btn-primary par vue/page.
   L'orange est réservé à l'action la plus importante.
   Toutes les variantes partagent la même base .btn.
═══════════════════════════════════════════════════════════════ */

/* ── Base commune à toutes les variantes ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;   /* 10px 20px */
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;          /* 14px */
  font-weight: 600;
  border-radius: 0.5rem;        /* 8px — cohérent avec les cartes */
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1;
  outline: none;
  user-select: none;
}

/* Accessibilité : indicateur de focus clavier visible */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* État désactivé : même style pour <button disabled> et .btn[disabled] */
.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Variante 1 : Primary (orange) ──
   Usage : Ajouter au panier, Confirmer commande, S'inscrire
   Règle : 1 seul par vue — c'est le CTA qui capte l'œil en premier */
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 6px 18px rgba(249,115,22,0.42);
  transform: translateY(-1px); /* Légère élévation au survol */
}
.btn-primary:active {
  transform: translateY(0);    /* Retour à plat au clic */
  box-shadow: var(--shadow-accent);
}

/* ── Variante 2 : Secondary (contour bleu) ──
   Usage : Annuler, Retour, Voir détails, Modifier
   Discret mais professionnel — ne concurrence pas le primary */
.btn-secondary {
  background: transparent;
  color: var(--brand-500);
  border-color: var(--brand-500);
}
.btn-secondary:hover {
  background: var(--brand-50);  /* Fond bleu très clair au survol */
  border-color: var(--brand-600);
  color: var(--brand-600);
  transform: translateY(-1px);
}
.btn-secondary:active { transform: translateY(0); }

/* ── Variante 3 : Ghost (texte seul) ──
   Usage : Voir plus, Mot de passe oublié, Liens dans les formulaires
   Aucun fond ni bordure — s'intègre dans du texte courant */
.btn-ghost {
  background: transparent;
  color: var(--brand-500);
  border-color: transparent;
  padding-left: 0.25rem;   /* Padding réduit car pas de fond visible */
  padding-right: 0.25rem;
  box-shadow: none;
}
.btn-ghost:hover {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 3px; /* Espace entre texte et soulignement */
}

/* ── Modificateurs de taille ──
   À combiner avec une variante : class="btn btn-primary btn-sm" */
.btn-sm {
  padding: 0.4375rem 0.875rem; /* 7px 14px */
  font-size: 0.8125rem;         /* 13px */
}
.btn-lg {
  padding: 0.8125rem 1.75rem;  /* 13px 28px */
  font-size: 1rem;              /* 16px */
}


/* ═══════════════════════════════════════════════════════════════
   6. CARDS
   Deux classes séparées : .card pour le style de base,
   .card-hover pour l'animation au survol (cartes cliquables).
   On ne met pas hover sur toutes les cartes (ex: récap commande).
═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;       /* 12px */
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

/* À ajouter uniquement sur les cartes interactives/cliquables */
.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════
   7. BADGES
   Petites étiquettes pour les statuts, promotions, catégories.
   Toujours en pill (border-radius: 999px) pour les distinguer
   visuellement des boutons et cartes.
═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.625rem;  /* Compact mais lisible */
  font-size: 0.75rem;         /* 12px */
  font-weight: 600;
  border-radius: 999px;       /* Pill shape */
  line-height: 1.4;
  font-family: 'Poppins', sans-serif;
}

/* Couleurs sémantiques des badges */
.badge-brand   { background: var(--brand-100);   color: var(--brand-600); }  /* Info générale */
.badge-accent  { background: var(--accent-light); color: var(--accent-dark); } /* Promo, nouveauté */
.badge-success { background: #ecfdf5; color: #065f46; }  /* Livré, disponible */
.badge-warning { background: #fffbeb; color: #92400e; }  /* En attente, stock faible */
.badge-error   { background: #fef2f2; color: #991b1b; }  /* Annulé, rupture */
.badge-muted   { background: var(--surface-3);   color: var(--text-muted); }  /* Archivé, inactif */


/* ═══════════════════════════════════════════════════════════════
   8. FORMULAIRES
   Tous les champs du système utilisent .input-field.
   Focus visible avec box-shadow bleu pour accessibilité.
   Les labels sont gérés globalement pour cohérence.
═══════════════════════════════════════════════════════════════ */
.input-field {
  width: 100%;
  padding: 0.625rem 0.875rem;   /* 10px 14px */
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 0.5rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input-field::placeholder {
  color: var(--text-muted);
}
.input-field:focus {
  border-color: var(--brand-500);
  /* Halo bleu subtil — indique le focus sans être agressif */
  box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.input-field:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Labels des champs — style global cohérent dans tout le système */
label {
  display: block;
  font-size: 0.8125rem;   /* 13px */
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}


/* ═══════════════════════════════════════════════════════════════
   9. TOASTS / FLASH MESSAGES
   Notifications temporaires affichées en haut à droite.
   La bordure gauche colorée permet d'identifier le type
   d'un seul coup d'œil sans lire le texte.
═══════════════════════════════════════════════════════════════ */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-lg);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  font-family: 'Poppins', sans-serif;
  pointer-events: auto;
  animation: toastIn 0.2s ease;
}

/* La bordure gauche est le seul indicateur coloré — sobre et efficace */
.toast-success { border-left: 3px solid #10b981; }
.toast-error   { border-left: 3px solid #ef4444; }
.toast-warning { border-left: 3px solid #f59e0b; }
.toast-info    { border-left: 3px solid var(--brand-500); }

/* Animation d'entrée : glisse depuis la droite */
@keyframes toastIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Animation de sortie : utilisée via JS pour dismiss */
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(12px); }
}


/* ═══════════════════════════════════════════════════════════════
   10. PRODUCT CARD
   Composant central du catalogue. Structure flex verticale
   pour que le prix reste toujours en bas quelle que soit
   la longueur du nom du produit (margin-top: auto).
═══════════════════════════════════════════════════════════════ */
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;             /* Clip l'image dans le radius */
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;       /* Image en haut, body + prix en bas */
}
.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Ratio carré pour toutes les images produit — cohérence visuelle */
.product-card-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  background: var(--surface-2); /* Fond si l'image est absente */
}

.product-card-body {
  padding: 0.875rem;
  flex: 1;                      /* Prend tout l'espace restant */
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Troncature sur 2 lignes max — évite les cartes de hauteur variable */
.product-card-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;                /* Propriété standard (future-proof) */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prix en bas de la carte grâce à margin-top: auto */
.product-card-price {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-600);
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Prix barré pour les promotions */
.product-card-price-old {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════
   11. STATUTS COMMANDE
   Chaque statut a une couleur sémantique reconnaissable
   instantanément. Utilisés comme .badge + .status-[valeur].
   Les valeurs correspondent exactement aux choix du modèle FSM.
═══════════════════════════════════════════════════════════════ */
.status-en_attente     { background: #fffbeb; color: #92400e; } /* Jaune — en cours */
.status-confirmee      { background: #dce7fd; color: #1E3A8A; } /* Bleu — validé */
.status-en_preparation { background: #ffedd5; color: #c2410c; } /* Orange — actif */
.status-expediee       { background: #ede9fe; color: #5b21b6; } /* Violet — en route */
.status-livree         { background: #ecfdf5; color: #065f46; } /* Vert — terminé */
.status-annulee        { background: #fef2f2; color: #991b1b; } /* Rouge — annulé */


/* ═══════════════════════════════════════════════════════════════
   12. DIVIDER & CONTAINER
   .divider : séparateur horizontal léger
   .container : largeur max 1400px, centré, padding responsive
═══════════════════════════════════════════════════════════════ */
.divider {
  height: 1px;
  background: var(--border);
  margin: 1.25rem 0;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 768px) {
  /* Plus d'espace sur tablette et desktop */
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   13. SECTION TITLE
   Titre de section avec accent orange optionnel sur un mot clé.
   Usage : <h2 class="section-title">Produits <span>en vedette</span></h2>
═══════════════════════════════════════════════════════════════ */
.section-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--brand-600);
  margin-bottom: 1.25rem;
}
.section-title span {
  color: var(--accent); /* Mot clé en orange pour attirer l'œil */
}


/* ═══════════════════════════════════════════════════════════════
   14. SCROLLBAR CUSTOM
   Scrollbar fine et discrète sur desktop (Chrome/Safari).
   Firefox utilise scrollbar-width pour un résultat similaire.
═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }


/* ═══════════════════════════════════════════════════════════════
   15. UTILITAIRES
   Classes helper rapides pour les cas fréquents.
   À utiliser dans les templates Django directement.
═══════════════════════════════════════════════════════════════ */
.text-accent  { color: var(--accent); }       /* Texte orange */
.text-brand   { color: var(--brand-500); }    /* Texte bleu principal */
.text-muted   { color: var(--text-muted); }   /* Texte gris clair */
.bg-page      { background: var(--bg); }      /* Fond global */
.bg-surface   { background: var(--surface); } /* Fond carte/blanc */
.rounded-card { border-radius: 0.75rem; }     /* Radius cohérent avec .card */
.shadow-card  { box-shadow: var(--shadow-sm); } /* Ombre légère */

/* ═══════════════════════════════════════════════════════════════
   16. DARK MODE
   Variables remplacées via html.dark — scope global
═══════════════════════════════════════════════════════════════ */
html.dark {
  --bg:             #0F1117;
  --surface:        #1A1D27;
  --surface-2:      #22263A;
  --surface-3:      #2A2F45;
  --border:         #2E3350;
  --border-2:       #3A4060;
  --text-primary:   #E8ECF4;
  --text-secondary: #9BA8C0;
  --text-muted:     #5E6A88;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.4);
  --shadow-md:      0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:      0 8px 32px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* Navbar dark — les variables CSS dans navbar.html gèrent l'essentiel.
   On surcharge ici uniquement les styles inline restants dans le HTML. */

/* En-tête dropdown profil : nom + email + séparateur */
html.dark .nav-dropdown-menu [style*="border-bottom:1px solid #E2E8F0"],
html.dark .nav-dropdown-menu [style*="border-top:1px solid #E2E8F0"],
html.dark #notif-dropdown [style*="border-bottom:1px solid #E2E8F0"],
html.dark #notif-dropdown [style*="border-top:1px solid #E2E8F0"] {
  border-color: #2E3350 !important;
}
html.dark .nav-dropdown-menu [style*="color:#0F1923"] { color: #E8ECF4 !important; }
html.dark .nav-dropdown-menu [style*="color:#8898AA"] { color: #5E6A88 !important; }
html.dark .nav-dropdown-menu [style*="color:#1E3A8A"] { color: #93B4FF !important; }
/* Dropdown notifications */
html.dark #notif-dropdown { background: #1A1D27 !important; border-color: #2E3350 !important; }
html.dark #notif-dropdown [style*="color:#0D1F5C"] { color: #E8ECF4 !important; }
html.dark #notif-dropdown [style*="background:#F4F7FC"],
html.dark #notif-dropdown [style*="border-top:1px solid #E2E8F0"] { background: #22263A !important; }
html.dark #notif-dropdown a[style*="background:#f8f9ff"] { background: #22263A !important; border-left-color: #F97316 !important; }
/* Lien "Voir toutes les notifications" */
html.dark #notif-dropdown [style*="color:#1E3A8A"] { color: #93B4FF !important; }
/* dropdown langue */
html.dark .nav-dropdown-menu [style*="color:#0F1923;"] { color: #E8ECF4 !important; }
html.dark .nav-dropdown-menu [style*="color:#8898AA;"] { color: #5E6A88 !important; }

/* Cards, inputs, boutons */
html.dark .card,
html.dark .pcard { background: var(--surface) !important; border-color: var(--border) !important; }
html.dark input, html.dark textarea, html.dark select {
  background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-primary) !important;
}
html.dark .footer { background: #080A10 !important; }

/* Dashboard dark */
html.dark .da-sidebar { background: var(--surface) !important; border-color: var(--border) !important; }
html.dark .da-topbar  { background: var(--surface) !important; border-color: var(--border) !important; }
html.dark .da-card    { background: var(--surface) !important; border-color: var(--border) !important; }
html.dark .da-topbar-btn { color: var(--text-secondary) !important; }
html.dark .da-topbar-btn:hover { background: var(--surface-2) !important; color: var(--text-primary) !important; }
html.dark .sb-item    { color: var(--text-secondary) !important; }
html.dark .sb-item:hover, html.dark .sb-item.active { background: var(--surface-2) !important; color: var(--text-primary) !important; }
html.dark table       { color: var(--text-primary) !important; }
html.dark th          { background: var(--surface-2) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
html.dark td          { border-color: var(--border) !important; }
html.dark tr:hover td { background: var(--surface-2) !important; }

/* ════════════════════════════════════════════════════════════════
   DARK MODE — Site public (home, produits, détail, pages légales)
   Couvre tous les fonds hardcodés #fff/#ffffff dans les templates
════════════════════════════════════════════════════════════════ */

/* Fond global body + main */
html.dark body  { background: var(--bg) !important; color: var(--text-primary) !important; }
html.dark main  { background: var(--bg) !important; }

/* Sections et conteneurs avec fond blanc hardcodé */
html.dark section,
html.dark [style*="background:#ffffff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:white"],
html.dark [style*="background: white"] { background: var(--bg) !important; }

/* Fonds légèrement gris (#F4F7FC) */
html.dark [style*="background:#F4F7FC"],
html.dark [style*="background: #F4F7FC"],
html.dark [style*="background:#f4f7fc"] { background: var(--surface) !important; }

/* Textes sombres hardcodés */
html.dark [style*="color:#0D1F5C"],
html.dark [style*="color:#1E3A8A"],
html.dark [style*="color:#0F1923"] { color: var(--text-primary) !important; }
html.dark [style*="color:#4A5568"] { color: var(--text-secondary) !important; }
html.dark [style*="color:#6B7280"],
html.dark [style*="color:#8898AA"] { color: var(--text-muted) !important; }

/* Bordures hardcodées */
html.dark [style*="border:1px solid #E2E8F0"],
html.dark [style*="border: 1px solid #E2E8F0"],
html.dark [style*="border-color:#E2E8F0"] { border-color: var(--border) !important; }

/* Cards produits et génériques */
html.dark .card,
html.dark .pcard,
html.dark .product-card { background: var(--surface) !important; border-color: var(--border) !important; }
html.dark .product-card-name { color: var(--text-primary) !important; }
html.dark .product-card-price { color: var(--text-primary) !important; }

/* Section titles */
html.dark .section-title { color: var(--text-primary) !important; }
html.dark .section-title span { color: var(--accent) !important; }

/* Hero & bannières — on n'écrase PAS hero-banner-inner (a son propre gradient) */
html.dark .hero { background: var(--surface) !important; }
html.dark .hero-banner { background: var(--bg) !important; }
/* hero-banner-inner garde son gradient bleu — on corrige juste l'image de fond */
html.dark .hero-banner-bg {
  opacity: 0.25 !important;
  mix-blend-mode: normal !important;
}

/* Filtres & inputs sur pages liste/détail */
html.dark input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark textarea,
html.dark select {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* Icônes valeurs (value-icon) */
html.dark .value-icon,
html.dark [style*="background:#fff7ed"],
html.dark [style*="background:#fff1f2"],
html.dark [style*="background:#f0fdf4"],
html.dark [style*="background:#EFF6FF"],
html.dark [style*="background:#FFF7ED"] { background: var(--surface-2) !important; }

/* Reviews section */
html.dark .reviews-home-section { background: var(--bg) !important; }

html.dark .section-vedette  { background: var(--bg) !important; }
html.dark .section-arrivages { background: var(--bg) !important; }
html.dark .section-valeurs  { background: var(--bg) !important; }

/* Footer link colors */
html.dark .footer-link { color: var(--text-secondary) !important; }
html.dark .footer-link:hover { color: var(--text-primary) !important; }

/* ── Produits en vedette / nouveaux arrivages ── */
html.dark .pcard-sm {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html.dark .pcard-sm:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
}
html.dark .pcard-img-wrap,
html.dark .pcard-img-placeholder {
  background: var(--surface-2) !important;
}
html.dark .pcard-cat { color: var(--text-muted) !important; }
html.dark .pcard-name { color: var(--text-primary) !important; }
html.dark .pcard-footer {
  border-top-color: var(--border) !important;
}
html.dark .pcard-price { color: var(--text-primary) !important; }
html.dark .pcard-price-old { color: var(--text-muted) !important; }
html.dark .pcard-cart-btn {
  background: #F97316 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(249,115,22,0.3) !important;
}
html.dark .pcard-cart-btn:hover {
  background: #ea6000 !important;
  color: #ffffff !important;
}

/* ── Titres de section ── */
html.dark .section-heading h2 { color: var(--text-primary) !important; }
html.dark .section-sub { color: var(--text-secondary) !important; }

/* ── Boutons nav carousel ── */
html.dark .vedette-nav-btn {
  background: var(--surface-2) !important;
  color: var(--text-secondary) !important;
}
html.dark .vedette-nav-btn:hover {
  background: #1E3A8A !important;
  color: #ffffff !important;
}
html.dark .vedette-nav-btn.btn-next-primary {
  background: #1E3A8A !important;
  color: #ffffff !important;
}

/* ── Value cards (Ce qui nous distingue) ── */
html.dark .value-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .value-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.35) !important;
}
html.dark .value-card h3 { color: var(--text-primary) !important; }
html.dark .value-card p  { color: var(--text-secondary) !important; }

/* ── Reviews cards ── */
html.dark .rhc {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .rhc:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.35) !important;
}
html.dark .rhc-text   { color: var(--text-secondary) !important; }
html.dark .rhc-author { color: var(--text-primary) !important; }
html.dark .rhc-role   { color: var(--text-muted) !important; }
html.dark .rhc-quote  { color: var(--surface-3) !important; }

/* Skeletons en dark */
html.dark .rhc-sk {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .rhc-sk-line {
  background: linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%) !important;
  background-size: 400% 100% !important;
}

/* ── Couleurs icônes valeur en dark ── */
html.dark [style*="background:#ecfdf5"],
html.dark [style*="background:#ede9fe"],
html.dark [style*="background:#eff4ff"] { background: var(--surface-2) !important; }

/* ── Logo navbar — bords arrondis */
.nav-logo img,
.navbar-logo img { border-radius: 10px; }

/* ════════════════════════════════════════════════════════════════
   DARK MODE — Page catalogue produits (list.html)
════════════════════════════════════════════════════════════════ */

/* Barre de recherche catalogue */
html.dark .header-search-wrap {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
html.dark .header-search-wrap:focus-within {
  background: var(--surface-3) !important;
  border-color: #1E3A8A !important;
}
html.dark .header-search-input {
  color: var(--text-primary) !important;
}
html.dark .header-search-input::placeholder { color: var(--text-muted) !important; }

/* Bouton Catégories (tab secondaire) */
html.dark .header-tab-secondary {
  color: #93B4FF !important;
  border-color: #2E4A8A !important;
}
html.dark .header-tab-secondary:hover { background: var(--surface-2) !important; }

/* Dropdown catégories header */
html.dark .header-cat-dropdown {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
html.dark .hcat-link { color: var(--text-secondary) !important; }
html.dark .hcat-link:hover { background: var(--surface-2) !important; color: var(--text-primary) !important; }
html.dark .hcat-link.active { background: var(--surface-2) !important; color: #93B4FF !important; }
html.dark .hcat-link.sub { color: var(--text-muted) !important; }
html.dark .hcat-divider { background: var(--border) !important; }

/* Sous-barre tri */
html.dark .catalogue-sort label { color: var(--text-secondary) !important; }
html.dark .catalogue-sort select {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html.dark .btn-filter-mobile {
  color: #93B4FF !important;
  border-color: #2E4A8A !important;
}
html.dark .btn-filter-mobile:hover { background: var(--surface-2) !important; }

/* Sidebar filtres */
html.dark .filter-sidebar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}
html.dark .filter-sidebar::-webkit-scrollbar-thumb { background: var(--border) !important; }
html.dark .filter-sidebar-header {
  border-color: var(--border) !important;
}
html.dark .filter-sidebar-title { color: var(--text-primary) !important; }
html.dark .filter-burger-btn {
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html.dark .filter-burger-btn:hover { background: var(--surface-2) !important; color: var(--text-primary) !important; }

/* Sections accordéon sidebar */
html.dark .filter-section { border-color: var(--border) !important; }
html.dark .filter-section-header {
  background: var(--surface-2) !important;
}
html.dark .filter-section-header:hover { background: var(--surface-3) !important; }
html.dark .filter-section-label { color: var(--text-primary) !important; }
html.dark .filter-section-icon {
  background: var(--surface-3) !important;
  color: var(--text-secondary) !important;
}
html.dark .filter-section-chevron { color: var(--text-muted) !important; }

/* Recherche dans sidebar */
html.dark .filter-search-wrap input {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html.dark .filter-search-wrap input:focus { background: var(--surface-3) !important; border-color: #1E3A8A !important; }
html.dark .filter-search-wrap svg { color: var(--text-muted) !important; }

/* Items catégories sidebar */
html.dark .cat-item { color: var(--text-secondary) !important; }
html.dark .cat-item:hover { background: var(--surface-2) !important; color: var(--text-primary) !important; }
html.dark .cat-item.active { background: var(--surface-2) !important; color: #93B4FF !important; }
html.dark .cat-checkbox { background: var(--surface-2) !important; border-color: var(--border) !important; }
html.dark .cat-item.active .cat-checkbox { background: #1E3A8A !important; border-color: #1E3A8A !important; }
html.dark .cat-item-arrow { color: var(--text-muted) !important; }
html.dark .cat-sub-group { border-color: var(--border) !important; }
html.dark .cat-divider { background: var(--border) !important; }
html.dark .cat-item-row:hover { background: var(--surface-2) !important; }
html.dark .cat-item-row.active { background: var(--surface-2) !important; }
html.dark .cat-item-link { color: var(--text-secondary) !important; }
html.dark .cat-item-link.active { color: #93B4FF !important; }
html.dark .cat-collapse-btn { color: var(--text-muted) !important; }
html.dark .cat-collapse-btn:hover { color: #93B4FF !important; background: var(--surface-2) !important; }

/* Checkbox promos */
html.dark .filter-promo-label { color: var(--text-secondary) !important; }

/* Bouton reset */
html.dark .filter-reset {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
html.dark .filter-reset:hover { color: #93B4FF !important; border-color: #2E4A8A !important; }

/* Compte produits */
html.dark .products-count { color: var(--text-muted) !important; }

/* Cartes produit (pcard sur page liste) */
html.dark .pcard {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .pcard:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.3) !important; }
html.dark .pcard-img-wrap,
html.dark .pcard-img-placeholder { background: var(--surface-2) !important; }
html.dark .pcard-footer { border-top-color: var(--border) !important; }
html.dark .pcard-cart-btn { background: #F97316 !important; color: #fff !important; box-shadow: 0 2px 6px rgba(249,115,22,0.3) !important; }
html.dark .pcard-cart-btn:hover { background: #ea6000 !important; }

/* Empty state */
html.dark .empty-state {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .empty-state h3 { color: var(--text-primary) !important; }
html.dark .empty-state p  { color: var(--text-muted) !important; }

/* Pagination */
html.dark .page-btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html.dark .page-btn:hover { border-color: #1E3A8A !important; color: #93B4FF !important; }
html.dark .page-btn.active { background: #1E3A8A !important; border-color: #1E3A8A !important; color: #fff !important; }

/* ════════════════════════════════════════════════════════════════
   DARK MODE — Pages légales & institutionnelles
   (apropos, faq, assistance, contact, conditions, mentions, politique)
════════════════════════════════════════════════════════════════ */

/* Fond global de la page */
html.dark .about-wrap,
html.dark .faq-wrap,
html.dark .help-wrap,
html.dark .contact-wrap,
html.dark .legal-wrap,
html.dark .legal-content { background: var(--bg) !important; color: var(--text-primary) !important; }

/* ── Stats (À propos) ── */
html.dark .about-stat {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .about-stat .val { color: var(--text-primary) !important; }
html.dark .about-stat .lbl { color: var(--text-secondary) !important; }

/* ── Sections de contenu ── */
html.dark .about-section h2,
html.dark .help-section h2,
html.dark .legal-section h2,
html.dark .faq-group-title { color: var(--text-primary) !important; }

html.dark .about-section p,
html.dark .help-section p,
html.dark .legal-section p,
html.dark .legal-section ul,
html.dark .legal-section li,
html.dark .legal-table td { color: var(--text-secondary) !important; }

/* ── Cartes MVV (Mission / Vision / Valeurs) ── */
html.dark .about-mvv-card.mission { background: #1F1408 !important; border-color: #7C3A0A !important; }
html.dark .about-mvv-card.vision  { background: #0D1829 !important; border-color: #1E3A6A !important; }
html.dark .about-mvv-card.valeurs { background: #0B1F10 !important; border-color: #166534 !important; }
html.dark .about-mvv-card p { color: var(--text-secondary) !important; }

/* ── Cartes équipe ── */
html.dark .about-team-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .about-team-card h4 { color: var(--text-primary) !important; }
html.dark .about-team-card p  { color: var(--text-secondary) !important; }

/* ── FAQ ── */
html.dark .faq-item {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .faq-q:hover { background: var(--surface-2) !important; }
html.dark .faq-q-text { color: var(--text-primary) !important; }
html.dark .faq-a {
  color: var(--text-secondary) !important;
  border-top-color: var(--border) !important;
  background: var(--surface) !important;
}
html.dark .faq-a a { color: #93B4FF !important; }
html.dark .faq-search input {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
html.dark .faq-filter {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html.dark .faq-filter.active { background: #1E3A8A !important; border-color: #1E3A8A !important; color: #fff !important; }
html.dark .faq-cta {
  background: #1A1008 !important;
  border-color: #7C3A0A !important;
}
html.dark .faq-cta div h3 { color: var(--text-primary) !important; }
html.dark .faq-cta div p  { color: var(--text-secondary) !important; }
html.dark #faq-no-results { color: var(--text-muted) !important; }

/* ── Assistance ── */
html.dark .help-channel {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .help-channel h3 { color: var(--text-primary) !important; }
html.dark .help-channel p  { color: var(--text-secondary) !important; }
html.dark .help-channel a  { background: var(--surface-2) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
html.dark .help-channel a:hover { background: var(--surface-3) !important; color: var(--text-primary) !important; }
html.dark .help-topic {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .help-topic h4 { color: var(--text-primary) !important; }
html.dark .help-topic p  { color: var(--text-secondary) !important; }
html.dark .help-step-body h4 { color: var(--text-primary) !important; }
html.dark .help-step-body p  { color: var(--text-secondary) !important; }
html.dark .help-step-line { background: var(--border) !important; }
html.dark .help-cta {
  background: #1A1008 !important;
  border-color: #7C3A0A !important;
}
html.dark .help-search-bar input { background: var(--surface-2) !important; color: var(--text-primary) !important; }

/* ── Contact ── */
html.dark .contact-form-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .contact-form-card h2 { color: var(--text-primary) !important; }
html.dark .cf-group label { color: var(--text-secondary) !important; }
html.dark .cf-group input,
html.dark .cf-group select,
html.dark .cf-group textarea {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html.dark .contact-info-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .contact-info-card h4 { color: var(--text-primary) !important; }
html.dark .contact-info-card p  { color: var(--text-secondary) !important; }
html.dark .contact-info-card a  { color: #93B4FF !important; }

/* ── Légal commun (conditions, mentions, politique) ── */
html.dark .legal-toc {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .legal-toc h2 { color: var(--text-primary) !important; }
html.dark .legal-toc a  { color: #93B4FF !important; }
html.dark .legal-section { border-color: var(--border) !important; }
html.dark .legal-section h2 .num {
  background: var(--surface-2) !important;
  color: #93B4FF !important;
}
html.dark .legal-info-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark .legal-info-card .label { color: var(--text-muted) !important; }
html.dark .legal-info-card .value { color: var(--text-primary) !important; }
html.dark .legal-contact-box {
  background: #0D1829 !important;
  border-color: #1E3A6A !important;
}
html.dark .legal-contact-box h3 { color: var(--text-primary) !important; }
html.dark .legal-contact-box p  { color: var(--text-secondary) !important; }
html.dark .legal-contact-box a  { color: #F97316 !important; }
html.dark .legal-highlight {
  background: #1A1008 !important;
  border-left-color: #F97316 !important;
  color: #FDBA74 !important;
}
html.dark .legal-badge {
  background: #0B1F10 !important;
  color: #4ADE80 !important;
}
html.dark .legal-table th {
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
html.dark .legal-table td { border-color: var(--border) !important; }
html.dark .legal-table tr:nth-child(even) td { background: var(--surface) !important; }

/* Inline styles hardcodés dans les templates légaux */
html.dark [style*="color:#374151"],
html.dark [style*="color: #374151"] { color: var(--text-secondary) !important; }
html.dark [style*="color:#0D1F5C"],
html.dark [style*="color:#1E3A8A"] { color: var(--text-primary) !important; }
html.dark [style*="background:#F8FAFC"],
html.dark [style*="background: #F8FAFC"],
html.dark [style*="background:#EFF6FF"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html.dark [style*="background:#FFF7ED"] { background: #1A1008 !important; }