/**
 * Classes de fond dynamiques pour sections ACF
 * Utilisent les variables CSS pour s'adapter automatiquement au thème (light/dark)
 */

/* Import des variables globales */
@import url('variables.css');

/* ========================================
   Classes de fond adaptatifs
   ======================================== */

/* Fond blanc/adaptatif (blanc en light, dark-blue en dark) */
.section-bg-white {
    background-color: var(--bg-white);
    color: var(--text-primary);
}

/* Fond clair/adaptatif (gris clair en light, darker-blue en dark) */
.section-bg-light {
    background-color: var(--bg-light);
    color: var(--text-primary);
}

/* Fond gris clair/adaptatif */
.section-bg-light-gray {
    background-color: var(--bg-light-gray);
    color: var(--text-primary);
}

/* Fond sombre/adaptatif (reste sombre dans les deux thèmes) */
.section-bg-dark {
    background-color: var(--bg-dark);
    color: var(--text-light);
}

/* Fond avec gradient sombre */
.section-bg-dark-gradient {
    background: var(--bg-dark-gradient);
    color: var(--text-light);
}

/* Fond couleur primaire (orange) */
.section-bg-primary {
    background-color: var(--primary-color);
    color: #FFFFFF;
}

/* Fond couleur primaire claire */
.section-bg-primary-light {
    background-color: var(--primary-light);
    color: var(--text-primary);
}

/* Fond couleur secondaire */
.section-bg-secondary {
    background-color: var(--secondary-color);
    color: var(--text-light);
}

/* Fond transparent */
.section-bg-transparent {
    background-color: transparent;
    color: var(--text-primary);
}

/* ========================================
   Classes de texte adaptatifs
   ======================================== */

/* Texte primaire adaptatif */
.section-text-primary {
    color: var(--text-primary);
}

/* Texte secondaire adaptatif */
.section-text-secondary {
    color: var(--text-secondary);
}

/* Texte clair (pour fonds sombres) */
.section-text-light {
    color: var(--text-light);
}

/* Texte blanc */
.section-text-white {
    color: var(--text-white);
}

/* Texte couleur primaire (orange) */
.section-text-orange {
    color: var(--primary-color);
}

/* ========================================
   Classes de bordure adaptatives
   ======================================== */

/* Bordure standard */
.section-border {
    border: 1px solid var(--border-color);
}

/* Bordure top */
.section-border-top {
    border-top: 1px solid var(--border-color);
}

/* Bordure bottom */
.section-border-bottom {
    border-bottom: 1px solid var(--border-color);
}

/* Bordure sur fond sombre */
.section-border-on-dark {
    border-color: var(--border-on-dark);
}

/* ========================================
   Utilitaires de padding pour sections
   ======================================== */

.section-padding-normal {
    padding: 80px 0;
}

.section-padding-large {
    padding: 120px 0;
}

.section-padding-small {
    padding: 40px 0;
}

.section-padding-top {
    padding-top: 80px;
}

.section-padding-bottom {
    padding-bottom: 80px;
}

/* ========================================
   Combinaisons courantes
   ======================================== */

/* Section avec fond blanc et padding */
.section-white-padded {
    background-color: var(--bg-white);
    color: var(--text-primary);
    padding: 80px 0;
}

/* Section avec fond sombre et padding */
.section-dark-padded {
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding: 80px 0;
}

/* Section avec fond primaire et padding */
.section-primary-padded {
    background-color: var(--primary-color);
    color: #FFFFFF;
    padding: 80px 0;
}

/* ========================================
   Transitions pour changement de thème
   ======================================== */

[class*="section-bg-"],
[class*="section-text-"] {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ========================================
   Compatibilité avec l'ancien système
   Classes pour couleurs personnalisées fixes
   ======================================== */

/* Mode personnalisé avec fond sombre */
.custom-dark-bg {
    color: var(--text-light);
}

.custom-dark-bg .hero-title,
.custom-dark-bg h1,
.custom-dark-bg h2,
.custom-dark-bg h3 {
    color: var(--text-light);
}

/* Mode personnalisé avec fond clair */
.custom-light-bg {
    color: var(--text-primary);
}

.custom-light-bg .hero-title,
.custom-light-bg h1,
.custom-light-bg h2,
.custom-light-bg h3 {
    color: var(--text-primary);
}