/* 
 * Variables CSS dynamiques - Générées automatiquement
 * Ne pas modifier ce fichier manuellement - Utilisez les paramètres admin
 */

:root {
    /* Couleurs principales personnalisables */
    --primary-rose: #C2185B;
    --light-rose: #F48FB1;
    --dark-rose: #AD1457;
    
    /* Valeurs RGB pour les gradients et rgba */
    --primary-rose-rgb: 194, 24, 91;
    --dark-rose-rgb: 173, 20, 87;
    --light-rose-rgb: 244, 143, 177;
    
    /* Couleurs secondaires */
    --secondary-color: #333333;
    --white: #FFFFFF;
    --text-dark: #888888;
    --text-light: #D0D0D0;
    
    /* Couleurs de statut */
    --success: #4CAF50;
    --warning: #FF9800;
    --error: #F44336;
    --info: #2196F3;
    
    /* Valeurs RGB pour les couleurs de statut */
    --success-rgb: 76, 175, 80;
    --warning-rgb: 255, 152, 0;
    --error-rgb: 244, 67, 54;
    --info-rgb: 33, 150, 243;
    
    /* ============================================
       COULEURS PAR SECTION - HÉRO
       ============================================ */
    --section-hero-bg: #FFFFFF;
    --section-hero-text: #2C3E50;
    --section-hero-title: #C2185B;
    --section-hero-button: #C2185B;
    --section-hero-overlay: rgba(194, 24, 91, 0.85);
    
    /* ============================================
       COULEURS PAR SECTION - SERVICES
       ============================================ */
    --section-services-bg: #FFFFFF;
    --section-services-text: #2C3E50;
    --section-services-title: #C2185B;
    --section-services-card-bg: #FFFFFF;
    --section-services-button: #C2185B;
    --section-services-icon: #C2185B;
    
    /* ============================================
       COULEURS PAR SECTION - À PROPOS
       ============================================ */
    --section-about-bg: #F8F9FA;
    --section-about-text: #2C3E50;
    --section-about-title: #C2185B;
    --section-about-icon: #C2185B;
    
    /* ============================================
       COULEURS PAR SECTION - AVIS
       ============================================ */
    --section-reviews-bg: #FFFFFF;
    --section-reviews-text: #2C3E50;
    --section-reviews-title: #C2185B;
    --section-reviews-card-bg: #FFFFFF;
    --section-reviews-star: #FFD700;
    
    /* ============================================
       COULEURS PAR SECTION - CONTACT
       ============================================ */
    --section-contact-bg: #F8F9FA;
    --section-contact-text: #2C3E50;
    --section-contact-title: #C2185B;
    --section-contact-button: #C2185B;
    --section-contact-icon: #C2185B;
    
    /* ============================================
       COULEURS PAR SECTION - EN-TÊTE
       ============================================ */
    --section-header-bg: #FFFFFF;
    --section-header-text: #2C3E50;
    --section-header-logo: #C2185B;
    --section-header-link: #2C3E50;
    
    /* ============================================
       COULEURS PAR SECTION - PIED DE PAGE
       ============================================ */
    --section-footer-bg: #1A1A1A;
    --section-footer-text: #FFFFFF;
    --section-footer-title: #FFFFFF;
    --section-footer-link: #F48FB1;
}

/* ============================================
   CLASSES CSS PAR SECTION
   ============================================ */

/* Section Héro */
#accueil.hero,
.hero-banner {
    background-color: var(--section-hero-bg);
    color: var(--section-hero-text);
}

.hero-banner::before {
    background: var(--section-hero-overlay);
}

.hero-banner-content h1,
.hero h1 {
    color: var(--section-hero-title);
}

.hero-banner-content p,
.hero p {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
    color: var(--section-hero-text);
}

.hero .btn-primary,
.hero-banner .btn-primary-enhanced {
    background-color: var(--section-hero-button);
    border-color: var(--section-hero-button);
}

/* Section Services */
#services,
.section-enhanced:has(#services) {
    background-color: var(--section-services-bg);
    color: var(--section-services-text);
}

#services h2,
#services .section-title,
#services h3 {
    color: var(--section-services-title);
}

.service-card-enhanced,
.service-card {
    background-color: var(--section-services-card-bg);
    color: var(--section-services-text);
}

.service-card-enhanced .card-enhanced-icon,
.service-icon {
    background: linear-gradient(135deg, var(--section-services-icon), var(--section-services-button));
    color: white;
}

#services .btn-primary,
#services .btn-enhanced {
    background-color: var(--section-services-button);
    border-color: var(--section-services-button);
}

/* Section À propos */
#apropos,
.about-section {
    background-color: var(--section-about-bg);
    color: var(--section-about-text);
}

#apropos h2,
#apropos h3 {
    color: var(--section-about-title);
}

#apropos i.fas.fa-check,
#apropos .fa-check {
    color: var(--section-about-icon);
}

/* Section Avis */
#avis,
.reviews-section {
    background-color: var(--section-reviews-bg);
    color: var(--section-reviews-text);
}

#avis h2,
#avis h3 {
    color: var(--section-reviews-title);
}

.review-card {
    background-color: var(--section-reviews-card-bg);
    color: var(--section-reviews-text);
}

.star:not(.empty) {
    color: var(--section-reviews-star);
}

/* Section Contact */
#contact,
.contact-section {
    background-color: var(--section-contact-bg);
    color: var(--section-contact-text);
}

#contact h2,
#contact h3 {
    color: var(--section-contact-title);
}

#contact .btn-primary,
#contact .btn-enhanced {
    background-color: var(--section-contact-button);
    border-color: var(--section-contact-button);
}

#contact i.fas,
#contact .fa {
    color: var(--section-contact-icon);
}

/* En-tête */
.header,
.header-enhanced {
    background-color: var(--section-header-bg);
    color: var(--section-header-text);
}

.logo,
.logo a {
    color: var(--section-header-logo);
}

.nav a,
.nav-link-enhanced {
    color: var(--section-header-link);
}

/* Pied de page */
.footer {
    background-color: var(--section-footer-bg);
    color: var(--section-footer-text);
}

.footer h3,
.footer-section h3 {
    color: var(--section-footer-title);
}

.footer a,
.footer-section a {
    color: var(--section-footer-link);
}