/**
 * =====================================================================
 * CHARTE GRAPHIQUE & CONFIGURATION DES COULEURS CANDIDE E-COMMERCE
 * =====================================================================
 * Définition centralisée de toutes les variables de couleurs du site.
 * Toutes les teintes officielles (Bleu Nuit, Vert Sauge #A7B4A0, Émeraude, Canvas)
 * sont configurées ici pour faciliter toute modification globale.
 */

:root {
  /* ===================================================================
   * CHARTE OFFICIELLE CANDIDE BABY GROUP
   * Palette de couleurs de référence
   * =================================================================== */
  --color-candide-navy: #013b5a;     /* Bleu nuit profond */
  --color-candide-blue: #4f91a5;     /* Bleu canard / doux */
  --color-candide-ice: #dcecf0;      /* Bleu ciel glacé */
  --color-candide-sand: #f7f3ec;     /* Sable doux / Écru */
  --color-candide-white: #ffffff;    /* Blanc pur */
  --color-candide-slate: #64727a;    /* Gris ardoise */
  --color-candide-beige: #d9c6ae;    /* Sable doré / Warm taupe */

  /* ===================================================================
   * 1. NAVIGATION & EN-TÊTE MARCHAND (Amazon-Grade Executive Theme)
   * =================================================================== */
  /* Top Bar Réassurance (Niveau 1) */
  --color-topbar: #dcecf0;
  --color-topbar-border: rgba(79, 145, 165, 0.2);
  --color-topbar-text: #013b5a;

  /* Barre Principale Bleu Doux Candide (Niveau 2) */
  --color-header-navy: #4f91a5;
  --color-header-navy-dark: #3e7889;
  --color-header-navy-light: #5fa5ba;
  --color-header-border: #3e7889;

  /* Bandeau Sous-Navigation Rayons & Catégories (Niveau 3) */
  --color-subnav-navy: #3e7889;
  --color-subnav-dark: #326270;
  --color-subnav-border: #326270;

  /* ===================================================================
   * 2. SECTIONS HERO, HERO BANNER & BILLBOARDS
   * =================================================================== */
  /* Arrière-plan de la section 'Boutique Officielle Candide' (Beige officiel #D9C6AE) */
  --color-hero-start: #d9c6ae;
  --color-hero-end: #cfbba1;
  --color-hero-border: #cfbba1;

  /* ===================================================================
   * 3. ACCENTS D'ACTION & LABELS (Teintes Signature Candide)
   * =================================================================== */
  --color-amber: #4f91a5;
  --color-amber-rgb: 79, 145, 165;
  --color-amber-50: #f4f8fa;
  --color-amber-100: #dcecf0;
  --color-amber-200: #b9dbe3;
  --color-amber-300: #88c0ce;
  --color-amber-400: #4f91a5;
  --color-amber-500: #3e7586;
  --color-amber-600: #35606e;
  --color-amber-700: #2e4f5a;
  --color-amber-800: #2a434d;
  --color-amber-900: #013b5a;
  --color-amber-950: #01293e;
  --color-amber-hover: #3e7586;
  --color-amber-active: #35606e;
  --color-amber-light: #dcecf0;
  --color-amber-badge-bg: rgba(79, 145, 165, 0.15);
  --color-amber-badge-border: rgba(79, 145, 165, 0.35);

  /* Noms explicites pour le bleu/vert Candide */
  --color-green-candide: #4f91a5;
  --color-green-candide-hover: #3e7586;
  --color-green-candide-active: #35606e;
  --color-sage: #4f91a5;

  /* Teintes Vert Émeraude (Oeko-Tex 100, Sécurité Médicale) */
  --color-emerald: #059669;
  --color-emerald-dark: #047857;
  --color-emerald-light: #d1fae5;

  /* ===================================================================
   * 4. FOND MARCHAND, SURFACES & BOÎTES PRODUITS
   * =================================================================== */
  /* Fond de page e-commerce soft canvas (#eaeded style Amazon) */
  --color-canvas: #eaeded;
  /* Cartes produits et surfaces blanches */
  --color-card-bg: #ffffff;
  --color-card-border: rgba(226, 232, 240, 0.9);
  --color-card-shadow: rgba(0, 0, 0, 0.05);

  /* ===================================================================
   * 5. TYPOGRAPHIE & TEXTES
   * =================================================================== */
  --color-text-main: #0f172a;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;
  --color-text-inverted: #ffffff;
}

/* =====================================================================
 * CLASSES UTILITAIRES DE COULEURS BASÉES SUR LES VARIABLES CSS
 * ===================================================================== */
.bg-candide-topbar { background-color: var(--color-topbar); }
.bg-candide-navy { background-color: var(--color-header-navy); }
.bg-candide-navy-dark { background-color: var(--color-header-navy-dark); }
.bg-candide-subnav { background-color: var(--color-subnav-navy); }
.bg-candide-hero {
  background: linear-gradient(to bottom, var(--color-hero-start), var(--color-hero-end));
}
.bg-candide-amber { background-color: var(--color-amber); }
.bg-candide-amber-hover:hover { background-color: var(--color-amber-hover); }
.bg-candide-emerald { background-color: var(--color-emerald); }
.bg-candide-canvas { background-color: var(--color-canvas); }
.bg-candide-beige { background-color: #D9C6AE !important; }
.hover\:bg-candide-beige:hover { background-color: #CFBBA1 !important; }

.text-candide-navy { color: var(--color-header-navy); }
.text-candide-amber { color: var(--color-amber); }
.text-candide-emerald { color: var(--color-emerald); }
.text-candide-subnav { color: var(--color-subnav-navy); }
.text-candide-beige { color: #D9C6AE !important; }

.border-candide-navy { border-color: var(--color-header-navy); }
.border-candide-subnav { border-color: var(--color-subnav-navy); }
.border-candide-amber { border-color: var(--color-amber); }
.border-candide-emerald { border-color: var(--color-emerald); }
.border-candide-beige { border-color: #D9C6AE !important; }

/* =====================================================================
 * BOUTON VOIR L'ARTICLE OFFICIEL CANDIDE BABY GROUP (#D9C6AE)
 * ===================================================================== */
.btn-voir-article {
  background-color: #D9C6AE !important;
  color: #013B5A !important;
  font-family: var(--font-nunito), "Nunito", sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}
.btn-voir-article:hover {
  background-color: #CFBBA1 !important;
  color: #013B5A !important;
}
.btn-voir-article:active {
  background-color: #C4AF93 !important;
}

/* =====================================================================
 * BOUTON ACHETER CET ARTICLE OFFICIEL CANDIDE BABY GROUP (#D9C6AE)
 * ===================================================================== */
.btn-acheter-article {
  background-color: #D9C6AE !important;
  color: #013B5A !important;
  font-family: var(--font-nunito), "Nunito", sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}
.btn-acheter-article:hover {
  background-color: #CFBBA1 !important;
  color: #013B5A !important;
}
.btn-acheter-article:active {
  background-color: #C4AF93 !important;
}

/* =====================================================================
 * OVERRIDES GLOBAUX : REMPLACEMENT DE TOUT LE JAUNE PAR LE VERT #A7B4A0
 * Configuré à 100% dans style.css
 * ===================================================================== */
.bg-amber-50 { background-color: var(--color-amber-50) !important; }
.bg-amber-100 { background-color: var(--color-amber-100) !important; }
.bg-amber-200 { background-color: var(--color-amber-200) !important; }
.bg-amber-300 { background-color: var(--color-amber-300) !important; }
.bg-amber-400 { background-color: var(--color-amber-400) !important; }
.bg-amber-500 { background-color: var(--color-amber-500) !important; }
.bg-amber-600 { background-color: var(--color-amber-600) !important; }
.hover\:bg-amber-500:hover { background-color: var(--color-amber-hover) !important; }
.hover\:bg-amber-600:hover { background-color: var(--color-amber-active) !important; }
.active\:bg-amber-600:active { background-color: var(--color-amber-active) !important; }
.active\:bg-amber-700:active { background-color: var(--color-amber-700) !important; }

.bg-amber-400\/20 { background-color: var(--color-amber-badge-bg) !important; }
.border-amber-400\/30 { border-color: var(--color-amber-badge-border) !important; }

.text-amber-200 { color: var(--color-amber-200) !important; }
.text-amber-300 { color: var(--color-amber-300) !important; }
.text-amber-400 { color: var(--color-amber-400) !important; }
.text-amber-500 { color: var(--color-amber-500) !important; }
.text-amber-600 { color: var(--color-amber-600) !important; }
.text-amber-700 { color: var(--color-amber-700) !important; }
.text-amber-800 { color: var(--color-amber-800) !important; }
.hover\:text-amber-300:hover { color: var(--color-amber-300) !important; }
.hover\:text-amber-400:hover { color: var(--color-amber-400) !important; }
.group-hover\:text-amber-600:hover { color: var(--color-amber-600) !important; }

.fill-amber-400 { fill: var(--color-amber-400) !important; }
.fill-amber-500 { fill: var(--color-amber-500) !important; }

.border-amber-200 { border-color: var(--color-amber-200) !important; }
.border-amber-300 { border-color: var(--color-amber-300) !important; }
.border-amber-400 { border-color: var(--color-amber-400) !important; }
.border-amber-500 { border-color: var(--color-amber-500) !important; }

.ring-amber-500\/30 { --tw-ring-color: rgba(167, 180, 160, 0.3) !important; }