/* Fichier: assets/css/style.css */
/* VERSION "ULTRA-MODERNE" */

/* 1. Définition de la palette de couleurs "moderne" */
:root {
    --font-sans: 'Inter', sans-serif;
    
    /* Palette Dark Mode (Base par défaut) */
    --bg-dark: #0f172a;      /* Fond (Tailwind slate-900) */
    --bg-surface: #1e293b;    /* Cartes (Tailwind slate-800) */
    --border-color: #334155; /* Bordures (Tailwind slate-700) */
    --text-primary: #f1f5f9;   /* Texte principal (Tailwind slate-100) */
    --text-secondary: #94a3b8; /* Texte secondaire (Tailwind slate-400) */
    
    /* Couleur d'accentuation (Dégradé) */
    --accent-start: #3b82f6; /* blue-500 */
    --accent-end: #8b5cf6;   /* violet-500 */
    --accent-gradient: linear-gradient(to right, var(--accent-start), var(--accent-end));
}

/* 2. Styles de base (appliqués à tout) */
body {
    font-family: var(--font-sans, var(--theme-font-family, 'Inter', sans-serif));
    background-color: var(--bg-dark);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Empêche les débordements horizontaux */
    transition: background-color 0.3s ease, color 0.3s ease, font-family 0.3s ease, letter-spacing 0.3s ease;
    font-weight: var(--theme-font-weight, 400);
    letter-spacing: var(--theme-letter-spacing, normal);
}

main.transition-fade {
    position: relative;
    z-index: 1;
}

#spline-permanent-background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
    transform: scale(1.1);
    /* Filtre de couleur - peut être modifié selon le thème */
    filter: hue-rotate(0deg) saturate(1) brightness(1);
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Contrôle du filtre selon les thèmes - Harmonisation avec les couleurs d'accentuation */

/* Thème BASE : Bleu/Violet moderne sur fond sombre */
body[data-theme="base"] #spline-permanent-background {
    /* Teinte vers le bleu-violet, saturation augmentée pour les couleurs vives */
    filter: hue-rotate(-10deg) saturate(1.3) brightness(0.85) contrast(1.1);
    opacity: 0.4;
}

/* Thème SOBRE : Gris minimaliste sur fond très sombre */
body[data-theme="sobre"] #spline-permanent-background {
    /* Désaturation presque complète, très sombre pour l'effet sobre */
    filter: grayscale(0.9) brightness(0.6) contrast(1.2);
    opacity: 0.2;
}

/* Thème CLAIR : Bleu clair sur fond blanc */
body[data-theme="clair"] #spline-permanent-background {
    /* Teinte bleue prononcée pour harmoniser avec le thème clair */
    filter: hue-rotate(210deg) saturate(1.1) brightness(1.2) contrast(1.0);
    opacity: 0.2;
}

/* Thème BOIS : Tons chauds marron/beige */
body[data-theme="bois"] #spline-permanent-background {
    /* Effet sepia très prononcé avec teinte marron/brun intense */
    filter: sepia(0.7) hue-rotate(35deg) saturate(1.4) brightness(0.85) contrast(1.1);
    opacity: 0.3;
}

/* Style pour le viewer Spline lui-même */
#spline-permanent-background spline-viewer {
    width: 100%;
    height: 100%;
    display: block;
}

/* Première grille : 3 colonnes pour les 3 premières cases */
.services-grid-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 1024px) {
    .services-grid-top {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .services-grid-top {
        grid-template-columns: 1fr;
    }
}

/* Deuxième grille centrée : 2 colonnes pour les 2 dernières cases */
.services-grid-bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 66.666%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .services-grid-bottom {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* 3. Nouvel Header "Sticky Glass" */
.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    /* Effet "Glassmorphism" - utilise les variables CSS pour s'adapter au thème */
    background-color: var(--bg-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    opacity: 0.95;
}
.nav-link {
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    margin: 0 0.5rem;
    border-radius: var(--theme-border-radius, 0.375rem);
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    transition: all 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
    font-weight: var(--theme-font-weight, 500);
    letter-spacing: var(--theme-letter-spacing, normal);
    position: relative;
}
.nav-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-surface);
}


/* 4. Surcharges Tailwind (Formulaires, Cartes) */
.bg-white {
    /* "Détournement" de la classe par défaut pour s'adapter au thème sombre */
    background-color: var(--bg-surface) !important;
    border: var(--theme-border-width, 1px) solid var(--border-color);
    border-radius: var(--theme-border-radius, 0.5rem);
    box-shadow: 0 4px 6px rgba(0, 0, 0, calc(0.1 * var(--theme-shadow-intensity, 1)));
    transition: background-color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"], 
input[type="email"], 
input[type="password"],
input[type="tel"],
input[type="number"],
select, 
textarea {
    /* Pour thèmes clairs (clair, bois) : fond clair, texte sombre */
    /* Pour thèmes sombres (base, sobre) : fond sombre, texte clair */
    background-color: var(--bg-dark) !important;
    border: var(--theme-border-width, 1px) solid var(--border-color) !important;
    border-radius: var(--theme-border-radius, 0.5rem) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease, border-radius 0.3s ease;
    padding: calc(0.75rem * var(--theme-spacing-multiplier, 1)) calc(1rem * var(--theme-spacing-multiplier, 1)) !important;
    font-weight: var(--theme-font-weight, 400);
    letter-spacing: var(--theme-letter-spacing, normal);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent-start) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4) !important;
    outline: none !important;
}

/* Styles pour les checkboxes de fonctionnalités - Contraste au survol */
.feature-checkbox {
    color: var(--text-secondary);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.feature-checkbox:hover {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.feature-label {
    color: inherit;
    transition: color 0.2s ease;
}

/* Pour les thèmes clairs : fond clair au survol avec texte sombre */
body[data-theme="clair"] .feature-checkbox:hover {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

body[data-theme="bois"] .feature-checkbox:hover {
    background-color: #e8e0d4 !important;
    color: #3d2817 !important;
}

/* 5. Nouvelles classes de Boutons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
}
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

/* Bouton principal (dégradé) */
.btn-primary {
    background-image: var(--accent-gradient);
    color: white;
    border-radius: var(--theme-border-radius, 0.5rem);
    box-shadow: 0 4px 15px rgba(59, 130, 246, calc(0.3 * var(--theme-shadow-intensity, 1)));
    font-weight: var(--theme-font-weight, 700);
    letter-spacing: var(--theme-letter-spacing, normal);
    transition: all 0.3s ease, border-radius 0.3s ease, transform calc(0.3s * var(--theme-animation-speed-multiplier, 1)) ease;
}
.btn-primary:hover {
    transform: translateY(calc(-2px * var(--theme-animation-intensity, 1)));
    box-shadow: 0 6px 20px rgba(59, 130, 246, calc(0.4 * var(--theme-shadow-intensity, 1)));
}

/* Bouton secondaire (bordure) */
.btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: var(--theme-border-width, 1px) solid var(--border-color);
    border-radius: var(--theme-border-radius, 0.5rem);
    font-weight: var(--theme-font-weight, 700);
    letter-spacing: var(--theme-letter-spacing, normal);
    transition: all 0.3s ease, border-radius 0.3s ease;
}
.btn-secondary:hover {
    background-color: var(--bg-surface);
    border-color: var(--text-primary);
    border-width: var(--theme-border-width, 1px);
}


/* 6. Classes pour la nouvelle page d'accueil (index.php) */

/* Titre principal */
.text-gradient-accent {
    background: var(--accent-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900; /* Extra-gras */
}

/* Prévention des troncatures de titres */
h1, h2, h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}


/* ========== 17. EFFET NÉON POUR LE HEADER ========== */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link:hover {
    border-color: var(--accent-start) !important;
    box-shadow: 
        0 0 8px rgba(59, 130, 246, 0.6),
        0 0 15px rgba(59, 130, 246, 0.4),
        0 0 25px rgba(59, 130, 246, 0.2),
        inset 0 0 8px rgba(59, 130, 246, 0.1) !important;
    animation: headerNeonPulse 2s ease-in-out infinite;
}

@keyframes headerNeonPulse {
    0%, 100% {
        box-shadow: 
            0 0 8px rgba(59, 130, 246, 0.6),
            0 0 15px rgba(59, 130, 246, 0.4),
            0 0 25px rgba(59, 130, 246, 0.2),
            inset 0 0 8px rgba(59, 130, 246, 0.1);
    }
    50% {
        box-shadow: 
            0 0 12px rgba(59, 130, 246, 0.8),
            0 0 20px rgba(59, 130, 246, 0.6),
            0 0 30px rgba(59, 130, 246, 0.3),
            inset 0 0 12px rgba(59, 130, 246, 0.2);
    }
}

.style-scroller-btn:hover {
    border-color: var(--accent-start) !important;
    box-shadow: 
        0 0 8px rgba(59, 130, 246, 0.6),
        0 0 15px rgba(59, 130, 246, 0.4),
        0 0 25px rgba(59, 130, 246, 0.2),
        inset 0 0 8px rgba(59, 130, 246, 0.1) !important;
    animation: headerNeonPulse 2s ease-in-out infinite;
}

.mobile-nav-link:hover {
    border-color: var(--accent-start) !important;
    box-shadow: 
        0 0 8px rgba(59, 130, 246, 0.6),
        0 0 15px rgba(59, 130, 246, 0.4),
        0 0 25px rgba(59, 130, 246, 0.2),
        inset 0 0 8px rgba(59, 130, 246, 0.1) !important;
    animation: headerNeonPulse 2s ease-in-out infinite;
}

/* Variantes néon header selon les thèmes */
body[data-theme="sobre"] .nav-link:hover,
body[data-theme="sobre"] .style-scroller-btn:hover,
body[data-theme="sobre"] .mobile-nav-link:hover {
    border-color: #8b5cf6 !important;
    box-shadow: 
        0 0 8px rgba(139, 92, 246, 0.6),
        0 0 15px rgba(139, 92, 246, 0.4),
        0 0 25px rgba(139, 92, 246, 0.2),
        inset 0 0 8px rgba(139, 92, 246, 0.1) !important;
}

body[data-theme="clair"] .nav-link:hover,
body[data-theme="clair"] .style-scroller-btn:hover,
body[data-theme="clair"] .mobile-nav-link:hover {
    border-color: #0d6efd !important;
    box-shadow: 
        0 0 8px rgba(13, 110, 253, 0.6),
        0 0 15px rgba(13, 110, 253, 0.4),
        0 0 25px rgba(13, 110, 253, 0.2),
        inset 0 0 8px rgba(13, 110, 253, 0.1) !important;
}

body[data-theme="bois"] .nav-link:hover,
body[data-theme="bois"] .style-scroller-btn:hover,
body[data-theme="bois"] .mobile-nav-link:hover {
    border-color: #8b6f47 !important;
    box-shadow: 
        0 0 8px rgba(139, 111, 71, 0.6),
        0 0 15px rgba(139, 111, 71, 0.4),
        0 0 25px rgba(139, 111, 71, 0.2),
        inset 0 0 8px rgba(139, 111, 71, 0.1) !important;
}

/* ========== 15. ÉCRAN DE CHARGEMENT ========== */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-dark);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    cursor: pointer;
}

.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.loading-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
}

/* Message "Cliquez pour passer" (optionnel) */
.loading-screen::after {
    content: 'Cliquez pour passer';
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-secondary);
    font-size: 0.875rem;
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.loading-screen:hover::after {
    opacity: 1;
}

/* Section Hero (Visuel abstrait) */
.hero-visual-glow {
    position: absolute;
    z-index: -1;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--accent-start), transparent 60%);
    filter: blur(150px);
    opacity: 0.3;
    animation: pulseGlow 10s infinite alternate;
}
@keyframes pulseGlow {
    from { opacity: 0.2; transform: scale(0.8); }
    to { opacity: 0.4; transform: scale(1.2); }
}

/* Grille de services (Feature Grid) */
.feature-card {
    background-color: var(--bg-surface);
    border: var(--theme-border-width, 1px) solid var(--border-color);
    padding: calc(1.5rem * var(--theme-spacing-multiplier, 1));
    border-radius: var(--theme-border-radius, 0.75rem);
    transition: all 0.3s ease, border-radius 0.3s ease, transform calc(0.3s * var(--theme-animation-speed-multiplier, 1)) ease;
    font-weight: var(--theme-font-weight, 400);
    letter-spacing: var(--theme-letter-spacing, normal);
}
.feature-card {
    cursor: pointer;
}
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    border-radius: 0.5rem; /* rounded-lg */
    background-image: var(--accent-gradient);
    color: white;
    margin-bottom: 1rem;
}

/* Bannière d'appel à l'action "Glassmorphism" */
.cta-banner-glass {
    background-color: rgba(30, 41, 59, 0.8); /* slate-800 à 80% */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem; /* rounded-xl */
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    color: var(--text-primary); /* Assure le contraste */
}

/* Corrections de contraste pour la bannière CTA sur thèmes clairs */
body[data-theme="clair"] .cta-banner-glass {
    background-color: rgba(248, 249, 250, 0.95);
    color: #212529;
    border-color: #dee2e6;
}

body[data-theme="bois"] .cta-banner-glass {
    background-color: rgba(245, 241, 232, 0.95);
    color: #3d2817;
    border-color: #d4c4b0;
}

/* ----------------------------------------------------- */
/* 7. Styles pour le Chatbot de Devis (IA) */
/* ----------------------------------------------------- */

/* Modale de fond */
#chat-bot-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bouton de fermeture - toujours accessible et visible */
#close-chat-btn {
    z-index: 9999;
    cursor: pointer;
    transition: all 0.2s ease;
}

#close-chat-btn:hover {
    transform: scale(1.1) rotate(90deg);
}

/* Bulle de message générale */
.chat-bot-bubble {
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    max-width: 80%;
    line-height: 1.5;
    animation: popIn 0.3s ease;
}

/* Animation d'apparition des bulles */
@keyframes popIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Bulle du Bot (à gauche) */
.chat-bubble-bot {
    background-color: var(--bg-surface); /* bg-slate-800 */
    color: var(--text-primary);
    align-self: flex-start;
    /* Arrondir le coin près de l'origine pour un look moderne */
    border-bottom-left-radius: 0.25rem;
}

/* Bulle de l'Utilisateur (à droite) */
.chat-bubble-user {
    /* Utilise le dégradé de l'accentuation */
    background-image: var(--accent-gradient);
    color: white;
    align-self: flex-end;
    /* Arrondir le coin près de l'origine pour un look moderne */
    border-bottom-right-radius: 0.25rem;
}

/* ... (votre CSS existant) ... */

/* 7. Styles pour le Chatbot de Devis (IA) */

/* Conteneur du corps du chat */
#chat-bot-body {
    /* ... vos styles existants ... */
    
    overflow-y: auto; 
    height: 100%; 
    
    /* CORRECTION CRUCIALE DU DÉFILEMENT EN CHAÎNE */
    overscroll-behavior: contain; 
}

/* AJOUT GLOBAL : Règle pour bloquer le défilement de la page derrière la modale */
body.modal-open {
    overflow: hidden; /* Empêche le défilement du corps principal */
    padding-right: 15px; /* Compense le retrait de la barre de défilement pour éviter le "saut" */
}

/* ... (tout le reste de votre CSS) ... */

/* Style de l'Input (pour qu'il utilise le style du chat) */
#chat-user-input {
    /* Surcharge le style global pour être plus grand et visible */
    height: 3rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Spinner (indicateur de frappe) */
#chat-loading-spinner {
    display: none; /* Caché par défaut */
    color: var(--text-secondary);
}
#chat-loading-spinner.is-typing {
    display: block;
}

/* Règle d'utilité */
.hidden {
    display: none;
}

.stat-card {
    background-color: var(--bg-surface);
    border: var(--theme-border-width, 1px) solid var(--border-color);
    border-radius: var(--theme-border-radius, 0.75rem);
    padding: calc(1.5rem * var(--theme-spacing-multiplier, 1));
    display: flex;
    flex-direction: column;
    gap: calc(0.5rem * var(--theme-spacing-multiplier, 1));
    font-weight: var(--theme-font-weight, 400);
    letter-spacing: var(--theme-letter-spacing, normal);
    transition: all 0.3s ease, border-radius 0.3s ease;
}
.stat-card .stat-label {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    font-weight: 600;
}
.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
}
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}
.badge-success {
    background-color: rgba(16, 185, 129, 0.2);
    color: #34d399;
}
.badge-danger {
    background-color: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

/* Corrections de contraste pour les badges sur thèmes clairs */
body[data-theme="clair"] .badge-success {
    background-color: rgba(16, 185, 129, 0.15);
    color: #059669;
}

body[data-theme="clair"] .badge-danger {
    background-color: rgba(248, 113, 113, 0.15);
    color: #dc2626;
}

body[data-theme="bois"] .badge-success {
    background-color: rgba(16, 185, 129, 0.2);
    color: #059669;
}

body[data-theme="bois"] .badge-danger {
    background-color: rgba(248, 113, 113, 0.2);
    color: #dc2626;
}

.service-showcase {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.service-card {
    border: var(--theme-border-width, 1px) solid var(--border-color);
    border-radius: var(--theme-border-radius, 0.75rem);
    padding: calc(1.25rem * var(--theme-spacing-multiplier, 1));
    display: flex;
    flex-direction: column;
    gap: calc(0.5rem * var(--theme-spacing-multiplier, 1));
    font-weight: var(--theme-font-weight, 400);
    letter-spacing: var(--theme-letter-spacing, normal);
    transition: all 0.3s ease, border-radius 0.3s ease;
    color: var(--text-primary); /* Assure le contraste */
    cursor: pointer; /* Animation hover gérée par JavaScript */
}
.service-pill {
    display: inline-flex;
    width: fit-content;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-start);
    background-color: rgba(59, 130, 246, 0.12);
}
.style-card {
    display: flex;
    gap: calc(1rem * var(--theme-spacing-multiplier, 1));
    border: var(--theme-border-width, 1px) solid var(--border-color);
    border-radius: var(--theme-border-radius, 0.75rem);
    padding: calc(1rem * var(--theme-spacing-multiplier, 1));
    align-items: center;
    font-weight: var(--theme-font-weight, 400);
    letter-spacing: var(--theme-letter-spacing, normal);
    transition: all 0.3s ease, border-radius 0.3s ease;
    color: var(--text-primary); /* Assure le contraste */
}
.style-image {
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: 0.5rem;
    background-color: var(--bg-dark);
}

/* Styles pour les cartes agrandies avec images en avant */
.style-card-large {
    display: flex;
    flex-direction: column;
    gap: calc(0.75rem * var(--theme-spacing-multiplier, 1));
    border: var(--theme-border-width, 1px) solid var(--border-color);
    border-radius: var(--theme-border-radius, 0.75rem);
    padding: calc(0.75rem * var(--theme-spacing-multiplier, 1));
    background-color: var(--bg-surface);
    transition: all 0.3s ease, border-radius 0.3s ease;
    overflow: hidden;
}

/* Animation hover désactivée car gérée par JavaScript */
.style-card-large {
    cursor: pointer;
}

.style-image-wrapper-large {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: calc(var(--theme-border-radius, 0.5rem) * 0.8);
    background-color: var(--bg-dark);
    position: relative;
}

.style-image-large {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.style-content-small {
    padding: calc(0.5rem * var(--theme-spacing-multiplier, 1));
    display: flex;
    flex-direction: column;
    gap: calc(0.25rem * var(--theme-spacing-multiplier, 1));
}

.style-tag-small {
    display: inline-block;
    padding: calc(0.25rem * var(--theme-spacing-multiplier, 1)) calc(0.5rem * var(--theme-spacing-multiplier, 1));
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: calc(var(--theme-border-radius, 0.5rem) * 0.6);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    width: fit-content;
}

/* Nouveaux styles pour la page Examples - Mise en avant des photos */
.example-card {
    display: flex;
    flex-direction: column;
    border: var(--theme-border-width, 1px) solid var(--border-color);
    border-radius: var(--theme-border-radius, 1rem);
    overflow: hidden;
    background-color: var(--bg-surface);
    transition: all 0.3s ease, box-shadow 0.3s ease;
    color: var(--text-primary);
}


.example-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--bg-dark);
    position: relative;
}

.example-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.example-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.example-content h3 {
    font-weight: var(--theme-font-weight, 600);
    letter-spacing: var(--theme-letter-spacing, normal);
}

.example-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.style-tag {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    background-color: rgba(148, 163, 184, 0.2);
    color: var(--text-secondary);
}

/* Corrections de contraste pour style-tag sur thèmes clairs */
body[data-theme="clair"] .style-tag {
    background-color: rgba(108, 117, 125, 0.15);
    color: #495057;
}

body[data-theme="bois"] .style-tag {
    background-color: rgba(107, 78, 61, 0.2);
    color: #6b4e3d;
}

/* ----------------------------------------------------- */
/* 9. Sélecteur de style (roue de défilement) */
/* ----------------------------------------------------- */

.style-scroller-wrapper {
    position: relative;
}

.style-scroller-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.style-scroller-btn:hover {
    background-color: var(--border-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Corrections de contraste pour le bouton scroller sur thèmes clairs */
body[data-theme="clair"] .style-scroller-btn {
    background-color: #f8f9fa;
    color: #212529;
    border-color: #dee2e6;
}

body[data-theme="clair"] .style-scroller-btn:hover {
    background-color: #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body[data-theme="bois"] .style-scroller-btn {
    background-color: #e8ddd4;
    color: #3d2817;
    border-color: #d4c4b0;
}

body[data-theme="bois"] .style-scroller-btn:hover {
    background-color: #d4c4b0;
    box-shadow: 0 2px 8px rgba(139, 111, 71, 0.2);
}

.style-scroller-label {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.style-scroller-wheel {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    background-color: var(--bg-surface);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 1rem;
    min-width: 200px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: wheelAppear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--text-primary); /* Assure le contraste */
}

/* Corrections de contraste pour la roue sur thèmes clairs */
body[data-theme="clair"] .style-scroller-wheel {
    background-color: #ffffff;
    border-color: #dee2e6;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

body[data-theme="bois"] .style-scroller-wheel {
    background-color: #e8ddd4;
    border-color: #d4c4b0;
    border-width: 3px;
    box-shadow: 0 12px 40px rgba(139, 111, 71, 0.25);
}

@keyframes wheelAppear {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.style-wheel-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.style-wheel-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.25s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.style-wheel-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: all 0.25s ease;
}

.style-wheel-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
    border-color: currentColor;
    transform: translateX(4px);
}

.style-wheel-item.active {
    background-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Corrections de contraste pour les items de la roue sur thèmes clairs */
body[data-theme="clair"] .style-wheel-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

body[data-theme="bois"] .style-wheel-item:hover {
    background-color: rgba(139, 111, 71, 0.1);
}

body[data-theme="clair"] .style-wheel-item.active {
    background-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="bois"] .style-wheel-item.active {
    background-color: rgba(139, 111, 71, 0.15);
}

/* Couleurs spécifiques pour chaque thème dans la roue */
.style-wheel-item[data-theme="base"]:hover {
    border-color: #3b82f6;
}

.style-wheel-item[data-theme="base"]:hover::before,
.style-wheel-item[data-theme="base"].active::before {
    background: #3b82f6;
}

.style-wheel-item[data-theme="base"].active {
    border-color: #3b82f6;
}

.style-wheel-item[data-theme="sobre"]:hover {
    border-color: #737373;
}

.style-wheel-item[data-theme="sobre"]:hover::before,
.style-wheel-item[data-theme="sobre"].active::before {
    background: #737373;
}

.style-wheel-item[data-theme="sobre"].active {
    border-color: #737373;
}

.style-wheel-item[data-theme="clair"]:hover {
    border-color: #0d6efd;
}

.style-wheel-item[data-theme="clair"]:hover::before,
.style-wheel-item[data-theme="clair"].active::before {
    background: #0d6efd;
}

.style-wheel-item[data-theme="clair"].active {
    border-color: #0d6efd;
}

.style-wheel-item[data-theme="bois"]:hover {
    border-color: #8b6f47;
}

.style-wheel-item[data-theme="bois"]:hover::before,
.style-wheel-item[data-theme="bois"].active::before {
    background: #8b6f47;
}

.style-wheel-item[data-theme="bois"].active {
    border-color: #8b6f47;
}

.style-wheel-preview {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.style-wheel-item:hover .style-wheel-preview {
    transform: scale(1.1);
}

/* Bordures spécifiques pour chaque prévisualisation */
.style-wheel-item[data-theme="base"]:hover .style-wheel-preview {
    border-color: #3b82f6;
}

.style-wheel-item[data-theme="sobre"]:hover .style-wheel-preview {
    border-color: #737373;
}

.style-wheel-item[data-theme="clair"]:hover .style-wheel-preview {
    border-color: #0d6efd;
}

.style-wheel-item[data-theme="bois"]:hover .style-wheel-preview {
    border-color: #8b6f47;
}

.style-preview-base {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.style-preview-sobre {
    background: linear-gradient(135deg, #525252 0%, #737373 100%);
}

.style-preview-clair {
    background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
}

.style-preview-bois {
    background: linear-gradient(135deg, #8b6f47 0%, #a67c52 100%);
}

.style-wheel-name {
    font-size: 0.95rem;
    transition: all 0.25s ease;
    flex: 1;
}

.style-wheel-item:hover .style-wheel-name {
    transform: translateX(2px);
}

/* Styles spécifiques pour chaque thème dans la roue avec leurs propres couleurs */
/* Ces styles doivent TOUJOURS s'appliquer, indépendamment du thème actif du site */
.style-wheel-item[data-theme="base"] .style-wheel-name,
.style-name-base {
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    color: #3b82f6 !important; /* Bleu du thème base - toujours visible */
}

.style-wheel-item[data-theme="base"]:hover .style-wheel-name,
.style-wheel-item[data-theme="base"].active .style-wheel-name {
    color: #60a5fa !important; /* Bleu clair au hover/active */
}

.style-wheel-item[data-theme="sobre"] .style-wheel-name,
.style-name-sobre {
    font-family: 'Roboto', 'Helvetica Neue', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #525252 !important; /* Gris foncé du thème sobre - toujours visible */
}

.style-wheel-item[data-theme="sobre"]:hover .style-wheel-name,
.style-wheel-item[data-theme="sobre"].active .style-wheel-name {
    color: #737373 !important; /* Gris moyen au hover/active */
}

.style-wheel-item[data-theme="clair"] .style-wheel-name,
.style-name-clair {
    font-family: 'Open Sans', 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: #0d6efd !important; /* Bleu du thème clair - toujours visible */
}

.style-wheel-item[data-theme="clair"]:hover .style-wheel-name,
.style-wheel-item[data-theme="clair"].active .style-wheel-name {
    color: #0a58ca !important; /* Bleu foncé au hover/active */
}

.style-wheel-item[data-theme="bois"] .style-wheel-name,
.style-name-bois {
    font-family: 'Playfair Display', 'Georgia', serif !important;
    font-weight: 600 !important;
    font-style: italic !important;
    letter-spacing: 0.03em !important;
    color: #8b6f47 !important; /* Marron du thème bois - toujours visible */
}

.style-wheel-item[data-theme="bois"]:hover .style-wheel-name,
.style-wheel-item[data-theme="bois"].active .style-wheel-name {
    color: #a67c52 !important; /* Marron clair au hover/active */
}

/* Ajustements pour le thème clair */
body[data-theme="clair"] .style-scroller-wheel {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Ajustements pour le thème bois */
body[data-theme="bois"] .style-scroller-btn {
    background-color: #e8ddd4;
    border-color: #d4c4b0;
    border-width: 2px;
}

body[data-theme="bois"] .style-scroller-wheel {
    background-color: #e8ddd4;
    border-color: #d4c4b0;
    border-width: 3px;
}

/* Responsive : adapter sur petits écrans */
@media (max-width: 640px) {
    .style-scroller-label {
        display: none;
    }
    
    .style-scroller-btn {
        padding: 0.5rem;
        width: 40px;
        justify-content: center;
    }
    
    .style-scroller-wheel {
        right: 0;
        min-width: 180px;
    }
}

/* ----------------------------------------------------- */
/* 10. Styles spécifiques par thème (apparence profonde) */
/* ----------------------------------------------------- */

/* Thème BASE - Moderne et dynamique */
body[data-theme="base"] {
    --theme-font-family: 'Inter', sans-serif;
}

body[data-theme="base"] h1,
body[data-theme="base"] h2,
body[data-theme="base"] h3 {
    font-weight: 900;
    letter-spacing: -0.02em;
}

body[data-theme="base"] .btn {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Thème SOBRE - Minimaliste et épuré */
body[data-theme="sobre"] {
    --theme-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
}

body[data-theme="sobre"] * {
    font-weight: 300;
}

body[data-theme="sobre"] h1,
body[data-theme="sobre"] h2,
body[data-theme="sobre"] h3 {
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body[data-theme="sobre"] .btn {
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-width: 2px;
}

body[data-theme="sobre"] .feature-card,
body[data-theme="sobre"] .service-card,
body[data-theme="sobre"] .style-card {
    box-shadow: none;
    border-width: 2px;
}

/* Thème CLAIR - Lumineux et spacieux */
body[data-theme="clair"] {
    --theme-font-family: 'Open Sans', 'Segoe UI', sans-serif;
}

body[data-theme="clair"] h1,
body[data-theme="clair"] h2,
body[data-theme="clair"] h3 {
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #212529; /* Texte sombre sur fond clair */
}

body[data-theme="clair"] p,
body[data-theme="clair"] span,
body[data-theme="clair"] div {
    color: #212529; /* Texte sombre sur fond clair */
}

body[data-theme="clair"] .btn {
    font-weight: 600;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body[data-theme="clair"] .btn-secondary {
    background-color: #ffffff;
    color: #212529;
    border-color: #dee2e6;
}

body[data-theme="clair"] .btn-secondary:hover {
    background-color: #f8f9fa;
    color: #0d6efd;
    border-color: #0d6efd;
}

body[data-theme="clair"] .nav-link {
    color: #6c757d; /* Texte gris sur fond clair */
}

body[data-theme="clair"] .nav-link:hover {
    color: #212529; /* Texte sombre au hover */
    background-color: #f8f9fa;
}

body[data-theme="clair"] .feature-card,
body[data-theme="clair"] .service-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    color: #212529; /* Texte sombre */
}


body[data-theme="clair"] input[type="text"],
body[data-theme="clair"] input[type="email"],
body[data-theme="clair"] input[type="password"],
body[data-theme="clair"] input[type="tel"],
body[data-theme="clair"] input[type="number"],
body[data-theme="clair"] select,
body[data-theme="clair"] textarea {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

body[data-theme="clair"] .style-scroller-btn {
    background-color: #f8f9fa;
    color: #212529;
    border-color: #dee2e6;
}

body[data-theme="clair"] .style-scroller-wheel {
    background-color: #ffffff;
    border-color: #dee2e6;
}

body[data-theme="clair"] .mobile-sidebar-content {
    background-color: #ffffff;
    color: #212529;
}

body[data-theme="clair"] .mobile-nav-link {
    color: #6c757d;
}

body[data-theme="clair"] .mobile-nav-link:hover {
    color: #212529;
    background-color: #f8f9fa;
}

/* Thème BOIS - Classique et élégant */
body[data-theme="bois"] {
    --theme-font-family: 'Playfair Display', 'Georgia', serif;
}

body[data-theme="bois"] h1,
body[data-theme="bois"] h2,
body[data-theme="bois"] h3 {
    font-weight: 600;
    letter-spacing: 0.05em;
    font-style: italic;
    color: #3d2817; /* Texte marron foncé sur fond beige clair */
}

body[data-theme="bois"] p,
body[data-theme="bois"] span,
body[data-theme="bois"] div {
    color: #3d2817; /* Texte marron foncé sur fond beige clair */
}

body[data-theme="bois"] .btn {
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: capitalize;
    border-width: 3px;
    font-style: normal;
}

body[data-theme="bois"] .btn-secondary {
    background-color: #f5f1e8;
    color: #3d2817;
    border-color: #d4c4b0;
}

body[data-theme="bois"] .btn-secondary:hover {
    background-color: #e8ddd4;
    color: #8b6f47;
    border-color: #8b6f47;
}

body[data-theme="bois"] .feature-card,
body[data-theme="bois"] .service-card,
body[data-theme="bois"] .style-card {
    border-width: 3px;
    box-shadow: 0 4px 12px rgba(139, 111, 71, 0.2);
    color: #3d2817; /* Texte marron foncé */
}

body[data-theme="bois"] .nav-link {
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding-bottom: 0.25rem;
    color: #6b4e3d; /* Texte marron moyen */
}

body[data-theme="bois"] .nav-link:hover {
    border-bottom-color: #8b6f47;
    background-color: transparent;
    color: #3d2817; /* Texte marron foncé au hover */
}

body[data-theme="bois"] .sticky-nav {
    border-bottom-width: 3px;
}

body[data-theme="bois"] input[type="text"],
body[data-theme="bois"] input[type="email"],
body[data-theme="bois"] input[type="password"],
body[data-theme="bois"] input[type="tel"],
body[data-theme="bois"] input[type="number"],
body[data-theme="bois"] select,
body[data-theme="bois"] textarea {
    background-color: #f5f1e8 !important;
    color: #3d2817 !important;
    border-color: #d4c4b0 !important;
}

body[data-theme="bois"] .mobile-sidebar-content {
    background-color: #f5f1e8;
    color: #3d2817;
}

body[data-theme="bois"] .mobile-nav-link {
    color: #6b4e3d;
}

body[data-theme="bois"] .mobile-nav-link:hover {
    color: #3d2817;
    background-color: #e8ddd4;
}

/* Corrections de contraste pour le footer */
footer.footer {
    color: var(--text-primary);
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--text-primary);
}

.footer-separator {
    color: var(--text-secondary);
}

/* Corrections de contraste pour le footer sur thèmes clairs */
body[data-theme="clair"] footer.footer {
    background-color: #f8f9fa;
    color: #212529;
    border-top-color: #dee2e6;
}

body[data-theme="clair"] .footer-link {
    color: #6c757d;
}

body[data-theme="clair"] .footer-link:hover {
    color: #212529;
}

body[data-theme="clair"] .footer-separator {
    color: #6c757d;
}

/* Corrections de contraste pour le footer sur thème bois */
body[data-theme="bois"] footer.footer {
    background-color: #e8ddd4;
    color: #3d2817;
    border-top-color: #d4c4b0;
}

body[data-theme="bois"] .footer-link {
    color: #6b4e3d;
}

body[data-theme="bois"] .footer-link:hover {
    color: #3d2817;
}

body[data-theme="bois"] .footer-separator {
    color: #6b4e3d;
}

/* Ajustements globaux pour tous les thèmes */
body[data-theme] .text-gradient-accent {
    font-weight: var(--theme-font-weight, 900);
    letter-spacing: var(--theme-letter-spacing, normal);
}

body[data-theme] .feature-icon {
    border-radius: var(--theme-border-radius, 0.5rem);
    border: var(--theme-border-width, 0px) solid var(--border-color);
}

/* ----------------------------------------------------- */
/* 8. Menu latéral mobile */
/* ----------------------------------------------------- */

.mobile-sidebar {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    pointer-events: none;
}

.mobile-sidebar.active {
    display: block;
    pointer-events: all;
}

.mobile-sidebar-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-sidebar.active .mobile-sidebar-overlay {
    opacity: 1;
}

.mobile-sidebar-content {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background-color: var(--bg-dark);
    border-right: 1px solid var(--border-color);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-sidebar.active .mobile-sidebar-content {
    transform: translateX(0);
}

.mobile-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.mobile-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    gap: 0.5rem;
}

.mobile-nav-link {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease, box-shadow 0.3s ease;
    border-left: 3px solid transparent;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-radius: var(--theme-border-radius, 0.5rem);
    position: relative;
}

.mobile-nav-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-surface);
    border-left-color: var(--accent-start);
}

/* Empêcher le scroll du body quand le menu est ouvert */
body.mobile-menu-open {
    overflow: hidden;
}

/* ----------------------------------------------------- */
/* 11. Styles pour la page Contact (adaptation aux thèmes) */
/* ----------------------------------------------------- */

/* Styles de base pour la page contact (thèmes sombres) */
.contact-section-calendar,
.contact-section-main,
.contact-form-section,
.contact-commitment-section {
    background-color: rgba(15, 23, 42, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.contact-label {
    color: rgba(255, 255, 255, 0.7);
}

.contact-title {
    color: var(--text-primary);
}

.contact-text {
    color: rgba(255, 255, 255, 0.7);
}

.contact-main-title {
    color: var(--text-primary);
}

.contact-main-text {
    color: rgba(255, 255, 255, 0.7);
}

.contact-badge {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.contact-info-card,
.contact-info-card-small {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.contact-info-label {
    color: rgba(255, 255, 255, 0.5);
}

.contact-info-value {
    color: var(--text-primary);
}

.contact-icon-box,
.contact-icon-box-small {
    background-color: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.contact-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.contact-cta-box {
    background-color: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

.contact-cta-title {
    color: var(--text-primary);
}

.contact-cta-text {
    color: rgba(255, 255, 255, 0.7);
}

.contact-form-title {
    color: var(--text-primary);
}

.contact-form-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

.contact-form-label {
    color: var(--text-primary);
}

.contact-form-input,
.contact-form-select,
.contact-form-textarea {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
    border-radius: 0.75rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.contact-form-checkbox-label {
    color: var(--text-primary);
}

.contact-form-checkbox {
    background-color: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
}

.contact-list {
    color: rgba(255, 255, 255, 0.8);
}

.contact-bullet {
    background-color: #60a5fa;
}

.contact-highlight-box {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Corrections pour le THÈME CLAIR */
body[data-theme="clair"] .contact-section-calendar,
body[data-theme="clair"] .contact-section-main,
body[data-theme="clair"] .contact-form-section,
body[data-theme="clair"] .contact-commitment-section {
    background-color: #ffffff;
    border-color: #dee2e6;
    color: #212529;
}

body[data-theme="clair"] .contact-label {
    color: #6c757d;
}

body[data-theme="clair"] .contact-title,
body[data-theme="clair"] .contact-main-title,
body[data-theme="clair"] .contact-form-title {
    color: #212529;
}

body[data-theme="clair"] .contact-text,
body[data-theme="clair"] .contact-main-text,
body[data-theme="clair"] .contact-cta-text {
    color: #495057;
}

body[data-theme="clair"] .contact-badge {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}

body[data-theme="clair"] .contact-info-card,
body[data-theme="clair"] .contact-info-card-small {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

body[data-theme="clair"] .contact-info-label {
    color: #6c757d;
}

body[data-theme="clair"] .contact-info-value {
    color: #212529;
}

body[data-theme="clair"] .contact-icon-box,
body[data-theme="clair"] .contact-icon-box-small {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

body[data-theme="clair"] .contact-icon-wrapper {
    background-color: #f8f9fa;
    color: #212529;
}

body[data-theme="clair"] .contact-cta-box {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

body[data-theme="clair"] .contact-cta-title {
    color: #212529;
}

body[data-theme="clair"] .contact-form-subtitle {
    color: #495057;
}

body[data-theme="clair"] .contact-form-label {
    color: #212529;
}

body[data-theme="clair"] .contact-form-input,
body[data-theme="clair"] .contact-form-select,
body[data-theme="clair"] .contact-form-textarea {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
    color: #212529 !important;
    border-radius: 0.75rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

body[data-theme="clair"] .contact-form-input::placeholder,
body[data-theme="clair"] .contact-form-textarea::placeholder {
    color: #adb5bd !important;
}

body[data-theme="clair"] .contact-form-checkbox-label {
    color: #212529;
}

body[data-theme="clair"] .contact-form-checkbox {
    background-color: #ffffff;
    border-color: #dee2e6;
}

body[data-theme="clair"] .contact-list {
    color: #495057;
}

body[data-theme="clair"] .contact-bullet {
    background-color: #0d6efd;
}

body[data-theme="clair"] .contact-highlight-box {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

/* Corrections pour le THÈME BOIS */
body[data-theme="bois"] .contact-section-calendar,
body[data-theme="bois"] .contact-section-main,
body[data-theme="bois"] .contact-form-section,
body[data-theme="bois"] .contact-commitment-section {
    background-color: #f5f1e8;
    border-color: #d4c4b0;
    color: #3d2817;
}

body[data-theme="bois"] .contact-label {
    color: #6b4e3d;
}

body[data-theme="bois"] .contact-title,
body[data-theme="bois"] .contact-main-title,
body[data-theme="bois"] .contact-form-title {
    color: #3d2817;
}

body[data-theme="bois"] .contact-text,
body[data-theme="bois"] .contact-main-text,
body[data-theme="bois"] .contact-cta-text {
    color: #6b4e3d;
}

body[data-theme="bois"] .contact-badge {
    background-color: #e8ddd4;
    border-color: #d4c4b0;
    color: #6b4e3d;
}

body[data-theme="bois"] .contact-info-card,
body[data-theme="bois"] .contact-info-card-small {
    background-color: #e8ddd4;
    border-color: #d4c4b0;
}

body[data-theme="bois"] .contact-info-label {
    color: #6b4e3d;
}

body[data-theme="bois"] .contact-info-value {
    color: #3d2817;
}

body[data-theme="bois"] .contact-icon-box,
body[data-theme="bois"] .contact-icon-box-small {
    background-color: rgba(139, 111, 71, 0.2);
    color: #8b6f47;
}

body[data-theme="bois"] .contact-icon-wrapper {
    background-color: #e8ddd4;
    color: #3d2817;
}

body[data-theme="bois"] .contact-cta-box {
    background-color: #e8ddd4;
    border-color: #d4c4b0;
}

body[data-theme="bois"] .contact-cta-title {
    color: #3d2817;
}

body[data-theme="bois"] .contact-form-subtitle {
    color: #6b4e3d;
}

body[data-theme="bois"] .contact-form-label {
    color: #3d2817;
}

body[data-theme="bois"] .contact-form-input,
body[data-theme="bois"] .contact-form-select,
body[data-theme="bois"] .contact-form-textarea {
    background-color: #f5f1e8 !important;
    border-color: #d4c4b0 !important;
    color: #3d2817 !important;
    border-radius: 0.75rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

body[data-theme="bois"] .contact-form-input::placeholder,
body[data-theme="bois"] .contact-form-textarea::placeholder {
    color: #a67c52 !important;
}

body[data-theme="bois"] .contact-form-checkbox-label {
    color: #3d2817;
}

body[data-theme="bois"] .contact-form-checkbox {
    background-color: #f5f1e8;
    border-color: #d4c4b0;
}

body[data-theme="bois"] .contact-list {
    color: #6b4e3d;
}

body[data-theme="bois"] .contact-bullet {
    background-color: #8b6f47;
}

body[data-theme="bois"] .contact-highlight-box {
    background-color: #e8ddd4;
    border-color: #d4c4b0;
}

/* Correction spéciale pour l'onglet téléphone - fond clair sur thèmes clairs */
body[data-theme="clair"] .contact-phone-card {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
}

body[data-theme="bois"] .contact-phone-card {
    background-color: #f5f1e8 !important;
    border-color: #d4c4b0 !important;
}

/* Fond de la page contact */
.contact-bg-gradient {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), rgba(15, 23, 42, 0.4), rgba(2, 6, 23, 1));
}

.contact-bg-blob {
    background-color: rgba(59, 130, 246, 0.2);
}

body[data-theme="clair"] .contact-bg-gradient {
    background: linear-gradient(to bottom right, rgba(13, 110, 253, 0.05), rgba(248, 249, 250, 0.3), rgba(255, 255, 255, 1));
}

body[data-theme="clair"] .contact-bg-blob {
    background-color: rgba(13, 110, 253, 0.1);
}

body[data-theme="bois"] .contact-bg-gradient {
    background: linear-gradient(to bottom right, rgba(139, 111, 71, 0.1), rgba(245, 241, 232, 0.4), rgba(232, 221, 212, 1));
}

body[data-theme="bois"] .contact-bg-blob {
    background-color: rgba(139, 111, 71, 0.15);
}