/*
 * COPABA - Thème Sombre Patrimonial
 * Conversion élégante vers le mode sombre
 * Palette moderne slate/amber conservant l'identité patrimoniale
 */

/* ===== VARIABLES CSS POUR LE THÈME SOMBRE ===== */
:root {
  /* Fonds principaux */
  --bg-primary       : #0f172a; /* slate-900 - Fond principal */
  --bg-secondary     : #1e293b; /* slate-800 - Sections alternées */
  --bg-card          : #334155; /* slate-700 - Cards et conteneurs */
  --bg-input         : #475569; /* slate-600 - Champs de formulaire */
  --bg-hover         : #64748b; /* slate-500 - États hover */

  /* Textes */
  --text-primary     : #0a0a0a; /* slate-100 - Texte principal */
  --text-secondary   : #cbd5e1; /* slate-300 - Texte secondaire */
  --text-muted       : #94a3b8; /* slate-400 - Texte subtil */
  --text-light       : #64748b; /* slate-500 - Texte très subtil */

  /* Accents patrimoniaux (conservés) */
  --accent-primary   : #d97706; /* amber-600 - Boutons, liens */
  --accent-hover     : #b45309; /* amber-700 - Hover états */
  --accent-light     : #f59e0b; /* amber-500 - Éléments décoratifs */
  --accent-bright    : #fbbf24; /* amber-400 - Highlights */

  /* Bordures et séparateurs */
  --border-primary   : #475569; /* slate-600 */
  --border-secondary : #64748b; /* slate-500 */
  --border-accent    : #d97706; /* amber-600 */
  }

/* ===== OVERRIDES TAILWINDCSS ===== */
/* Body et conteneurs principaux */
body {
  background-color : var(--bg-primary) !important;
  color            : var(--text-primary) !important;
  }

/* Fonds blancs et clairs -> sombres */
.bg-white {
  background-color : var(--bg-primary) !important;
  }

.bg-stone-50 {
  background-color : var(--bg-secondary) !important;
  }

.bg-stone-100 {
  background-color : var(--bg-card) !important;
  }

.bg-stone-200 {
  background-color : var(--bg-input) !important;
  }

.bg-gray-50 {
  background-color : var(--bg-secondary) !important;
  }

.bg-gray-100 {
  background-color : var(--bg-card) !important;
  }

/* Textes sombres -> clairs */
.text-gray-700 {
  color : var(--text-secondary) !important;
  }

.text-gray-600 {
  color : var(--text-muted) !important;
  }

.text-gray-500 {
  color : var(--text-light) !important;
  }

.text-black {
  color : var(--text-primary) !important;
  }

/* Bordures */
.border-gray-300 {
  border-color : var(--border-primary) !important;
  }

.border-gray-200 {
  border-color : var(--border-secondary) !important;
  }

/* ===== COMPOSANTS SPÉCIFIQUES COPABA ===== */

/* Navigation sombre */
.nav-dark {
  background-color : var(--bg-secondary) !important;
  border-bottom    : 1px solid var(--border-primary);
  }

.nav-dark a {
  color : var(--text-primary) !important;
  }

.nav-dark a:hover {
  color : var(--accent-bright) !important;
  }

/* Cards et conteneurs */
.card-dark {
  background-color : var(--bg-card);
  border           : 1px solid var(--border-primary);
  color            : var(--text-primary);
  box-shadow       : 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  }

.card-dark:hover {
  background-color : var(--bg-hover);
  border-color     : var(--border-accent);
  transform        : translateY(-2px);
  transition       : all 0.3s ease;
  }

/* Hero sections patrimoniales */
.hero-dark {
  background : linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.9));
  color      : var(--text-primary);
  }

/* Sections alternées */
.section-dark {
  background-color : var(--bg-secondary);
  color            : var(--text-primary);
  }

.section-light-dark {
  background-color : var(--bg-primary);
  color            : var(--text-primary);
  }

/* ===== FORMULAIRES SOMBRES ===== */
.form-dark input,
.form-dark textarea,
.form-dark select {
  background-color : var(--bg-input) !important;
  border-color     : var(--border-primary) !important;
  color            : var(--text-primary) !important;
  }

.form-dark input::placeholder,
.form-dark textarea::placeholder {
  color : var(--text-light) !important;
  }

.form-dark input:focus,
.form-dark textarea:focus,
.form-dark select:focus {
  background-color : var(--bg-hover) !important;
  border-color     : var(--accent-primary) !important;
  outline          : none !important;
  box-shadow       : 0 0 0 3px rgba(217, 119, 6, 0.1) !important;
  }

/* Labels de formulaire */
.form-dark label {
  color : var(--text-secondary) !important;
  }

/* Messages d'erreur */
.form-dark .text-red-600 {
  color : #f87171 !important; /* red-400 pour meilleure lisibilité sur fond sombre */
  }

/* ===== BOUTONS PATRIMONIAUX ===== */
.btn-primary {
  background-color : var(--accent-primary) !important;
  color            : white !important;
  border           : 1px solid var(--accent-primary) !important;
  }

.btn-primary:hover {
  background-color : var(--accent-hover) !important;
  border-color     : var(--accent-hover) !important;
  }

.btn-outline {
  background-color : transparent !important;
  color            : var(--accent-primary) !important;
  border           : 2px solid var(--accent-primary) !important;
  }

.btn-outline:hover {
  background-color : var(--accent-primary) !important;
  color            : white !important;
  }

/* ===== FOOTER SOMBRE ===== */
footer {
  background-color : var(--bg-secondary) !important;
  color            : var(--text-primary) !important;
  border-top       : 1px solid var(--border-primary);
  }

footer a {
  color : var(--text-secondary) !important;
  }

footer a:hover {
  color : var(--accent-bright) !important;
  }

/* ===== IMAGES ET MÉDIAS ===== */
.image-overlay-dark::after {
  content        : "";
  position       : absolute;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  background     : rgba(15, 23, 42, 0.4);
  pointer-events : none;
  }

/* ===== ACCESSIBILITÉ ===== */
/* Focus indicators améliorés */
*:focus {
  outline        : 2px solid var(--accent-bright) !important;
  outline-offset : 2px !important;
  }

/* Amélioration des contrastes */
.text-muted-dark {
  color : var(--text-muted) !important;
  }

.text-light-dark {
  color : var(--text-light) !important;
  }

/* ===== ANIMATIONS ET TRANSITIONS ===== */
.transition-dark {
  transition : background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }

/* ===== RESPONSIVE DARK THEME ===== */
@media (max-width : 768px) {
  .card-dark {
    margin-bottom : 1rem;
    }

  .nav-dark {
    padding : 0.5rem;
    }
  }

/* ===== COMPATIBILITÉ AVEC CKEDITOR ===== */
/* S'assurer que le contenu CKEditor reste avec son thème */
.ckeditor-dark {
  /* Les styles CKEditor sont conservés tels quels */
  }

/* ===== UTILITAIRES DE DEBUG ===== */
.debug-dark {
  border : 1px dashed var(--accent-bright) !important;
  }

/* ===== SPÉCIFIQUE : FOND SEMI-TRANSPARENT POUR LES PAGES DÉTAIL DU BLOG =====
   Cette règle modifie la variable --bg-primary UNIQUEMENT pour les pages
   contenant la classe .blog-detail (détail d’un article de blog), afin d’obtenir
   un fond plus transparent sans impacter le reste du site.
   (Modifiable à souhait pour ajuster la transparence du fond d’article)
============================================================================ */
.blog-detail {
  --bg-primary : rgba(15, 23, 42, 0.85);
  }

.blog-detail {
  --bg-primary : rgba(15, 23, 42, 0.85); /* Slate-900 à 85% opaque */
  }

.article-bg {
  background    : rgb(27, 70, 68, 0.50); /* ou ajuste le 0.88 selon ta préférence */
  border-radius : 0.85rem;
  box-shadow    : 0 8px 32px rgba(0, 0, 0, 0.12); /* optionnel, pour donner du relief */
  padding       : 2rem 2.5rem;
  color         : #1a1a1a; /* force la couleur de texte si besoin */
  }