/* ====================================================================
   CSS WORDPRESS CLASSIC - APPARENCE > CSS ADDITIONNEL
   Simple et efficace pour tous les thèmes WordPress
   ==================================================================== */

/* === COULEURS PERSONNALISÉES === */
:root {
  --bleu-fonce: #1e3a8a;
  --dore: #d4af37;
  --blanc: #ffffff;
  --fond-sombre: #2c3e50;
}

/* ====================================================================
   CLASSES PRINCIPALES - À AJOUTER DANS VOS ÉLÉMENTS
   ==================================================================== */

/* === FOND BLANC - TEXTE BLEU FONCÉ === */
.fond-blanc,
.bg-blanc {
  background-color: var(--blanc) !important;
  color: var(--bleu-fonce) !important;
}

.fond-blanc h1, .fond-blanc h2, .fond-blanc h3, .fond-blanc h4, .fond-blanc h5, .fond-blanc h6 {
  color: var(--bleu-fonce) !important;
}

.fond-blanc p, .fond-blanc span, .fond-blanc div {
  color: var(--bleu-fonce) !important;
}

.fond-blanc a {
  color: var(--bleu-fonce) !important;
}

/* === FOND DORÉ - TEXTE BLEU FONCÉ === */
.fond-dore,
.bg-dore {
  background-color: var(--dore) !important;
  color: var(--bleu-fonce) !important;
}

.fond-dore h1, .fond-dore h2, .fond-dore h3, .fond-dore h4, .fond-dore h5, .fond-dore h6 {
  color: var(--bleu-fonce) !important;
}

.fond-dore p, .fond-dore span, .fond-dore div {
  color: var(--bleu-fonce) !important;
}

.fond-dore a {
  color: var(--bleu-fonce) !important;
}

/* === FOND SOMBRE - TEXTE BLANC === */
.fond-sombre,
.bg-sombre {
  background-color: var(--fond-sombre) !important;
  color: var(--blanc) !important;
}

.fond-sombre h1, .fond-sombre h2, .fond-sombre h3, .fond-sombre h4, .fond-sombre h5, .fond-sombre h6 {
  color: var(--blanc) !important;
}

.fond-sombre p, .fond-sombre span, .fond-sombre div {
  color: var(--blanc) !important;
}

.fond-sombre a {
  color: var(--blanc) !important;
}

/* === TEXTE DORÉ POUR ÉLÉMENTS ACTIFS === */
.actif,
.active,
.texte-dore {
  color: var(--dore) !important;
}

/* ====================================================================
   ÉLÉMENTS WORDPRESS STANDARDS
   ==================================================================== */

/* === MENUS === */
/* Menu principal avec classes personnalisées */
.menu-blanc {
  background-color: var(--blanc) !important;
}

.menu-blanc a {
  color: var(--bleu-fonce) !important;
}

.menu-dore {
  background-color: var(--dore) !important;
}

.menu-dore a {
  color: var(--bleu-fonce) !important;
}

.menu-sombre {
  background-color: var(--fond-sombre) !important;
}

.menu-sombre a {
  color: var(--blanc) !important;
}

/* Menu actif */
.current-menu-item a,
.menu-item.actif a {
  color: var(--dore) !important;
}

/* === BOUTONS === */
.bouton-blanc,
.btn-blanc {
  background-color: var(--blanc) !important;
  color: var(--bleu-fonce) !important;
  border: 2px solid var(--bleu-fonce) !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
}

.bouton-dore,
.btn-dore {
  background-color: var(--dore) !important;
  color: var(--bleu-fonce) !important;
  border: 2px solid var(--bleu-fonce) !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
}

.bouton-sombre,
.btn-sombre {
  background-color: var(--fond-sombre) !important;
  color: var(--blanc) !important;
  border: 2px solid var(--blanc) !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
}

/* === BOÎTES/CARTES === */
.carte-blanche {
  background-color: var(--blanc) !important;
  color: var(--bleu-fonce) !important;
  padding: 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.carte-doree {
  background-color: var(--dore) !important;
  color: var(--bleu-fonce) !important;
  padding: 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.carte-sombre {
  background-color: var(--fond-sombre) !important;
  color: var(--blanc) !important;
  padding: 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

/* === TABLEAUX === */
.tableau-style thead th {
  background-color: var(--fond-sombre) !important;
  color: var(--blanc) !important;
  padding: 15px !important;
}

.tableau-style tbody td {
  background-color: var(--blanc) !important;
  color: var(--bleu-fonce) !important;
  padding: 12px !important;
  border-bottom: 1px solid #eee !important;
}

.tableau-style tbody tr:hover td {
  background-color: #f8f9fa !important;
}

/* ====================================================================
   CLASSES UTILITAIRES SIMPLES
   ==================================================================== */

/* === TEXTE SEULEMENT === */
.texte-bleu-fonce {
  color: var(--bleu-fonce) !important;
}

.texte-dore {
  color: var(--dore) !important;
}

.texte-blanc {
  color: var(--blanc) !important;
}

/* === FOND SEULEMENT === */
.fond-blanc-pur {
  background-color: var(--blanc) !important;
}

.fond-dore-pur {
  background-color: var(--dore) !important;
}

.fond-sombre-pur {
  background-color: var(--fond-sombre) !important;
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 768px) {
  .carte-blanche,
  .carte-doree,
  .carte-sombre {
    padding: 15px !important;
    margin-bottom: 15px !important;
  }
  
  .bouton-blanc,
  .bouton-dore,
  .bouton-sombre {
    display: block !important;
    text-align: center !important;
    margin-bottom: 10px !important;
  }
}

/* ====================================================================
   EFFETS HOVER
   ==================================================================== */
.bouton-blanc:hover,
.btn-blanc:hover {
  background-color: var(--bleu-fonce) !important;
  color: var(--blanc) !important;
}

.bouton-dore:hover,
.btn-dore:hover {
  opacity: 0.8 !important;
}

.bouton-sombre:hover,
.btn-sombre:hover {
  opacity: 0.8 !important;
}

.carte-blanche:hover,
.carte-doree:hover,
.carte-sombre:hover {
  transform: translateY(-2px) !important;
  transition: transform 0.3s ease !important;
}