/* --- 1. WPFORMS --- */
.wpforms-container input[type=date],
.wpforms-container input[type=datetime],
.wpforms-container input[type=datetime-local],
.wpforms-container input[type=email],
.wpforms-container input[type=month],
.wpforms-container input[type=number],
.wpforms-container input[type=password],
.wpforms-container input[type=range],
.wpforms-container input[type=search],
.wpforms-container input[type=tel],
.wpforms-container input[type=text],
.wpforms-container input[type=time],
.wpforms-container input[type=url],
.wpforms-container input[type=week],
.wpforms-container select,
.wpforms-container textarea {
    background: #fff;
    border-width: 0 0 1px 0;
    color: #1a1a1a !important;
    opacity: 0.5;
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
    outline: none;
    opacity: 1;
    border-color: #1a1a1a !important;
}

.wpforms-container textarea { resize: none; }
.wpforms-container .wpforms-field-textarea textarea.wpforms-field-medium { height: 136px; }

.wpforms-container button[type=submit] { 
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 0px !important;
    padding: 15px 34px !important; 
    font-size: 12px !important; 
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    transition: all 0.4s ease-in-out !important;
}

.wpforms-container button[type=submit]:hover {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    letter-spacing: 4px !important;
}


/* --- 2. BASE MINIMALISTE & ANTI-ORANGE --- */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
}

a, a:focus, .elementor-icon {
    color: #1a1a1a !important;
    text-decoration: none !important;
}

::selection {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}


/* --- 3. TYPOGRAPHIE : POLICE ACTOR ET PROPORTIONS --- */
*, body, h1, h2, h3, h4, h5, h6, p, a, span, div, b, strong, li, input, button {
    font-family: 'Actor', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .elementor-heading-title {
    font-size: 26px !important; 
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
    color: #1a1a1a !important;
}

p, .elementor-text-editor, .elementor-text-editor p, li {
    font-size: 14px !important; 
    line-height: 1.6 !important;
    color: #333333 !important;
}


/* --- 4. ANIMATION FLUIDE GLOBALE --- */
.elementor-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    animation: fadeInUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}


/* --- 5. HEADER & FOOTER SYNCHRONISÉS (12px) --- */
header .elementor-section, 
.elementor-location-header .elementor-section,
.hfe-footer-container, 
footer .elementor-section {
    animation: none !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    min-height: auto !important;
}

header img, .elementor-location-header img,
.hfe-footer-container img, footer img {
    max-width: 90px !important;
    height: auto !important;
}

header a, .elementor-nav-menu a, .elementor-location-header a {
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    font-weight: 400 !important;
}

header a:hover, .elementor-nav-menu a:hover, .elementor-location-header a:hover {
    opacity: 0.8 !important;
}

.hfe-footer-container, 
.hfe-footer-container *,
.hfe-footer-container p, 
.hfe-footer-container span, 
.hfe-footer-container a,
footer p, footer span, footer a {
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #1a1a1a !important;
    margin: 0 !important;
}

header .elementor-section, .elementor-location-header .elementor-section { border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.hfe-footer-container, footer .elementor-section { border-top: 1px solid #eeeeee !important; background-color: #ffffff !important; }


/* --- 6. BOUTONS --- */
.elementor-button {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 0px !important;
    padding: 14px 30px !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    transition: all 0.4s ease-in-out !important;
}

.elementor-button:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    letter-spacing: 4px !important;
}

.bouton-home .elementor-button, 
.elementor-section.elementor-section-height-full .elementor-button {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

.bouton-home .elementor-button:hover,
.elementor-section.elementor-section-height-full .elementor-button:hover {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}


/* --- 7. RESPONSIVE HEADER MOBILE (10px) --- */
@media (max-width: 1024px) {
    h1, h2, h3, h4, h5, h6, .elementor-heading-title { font-size: 22px !important; }
    .elementor-section { padding-top: 40px !important; padding-bottom: 40px !important; }
}

@media (max-width: 767px) {
    h1, h2, h3, h4, h5, h6, .elementor-heading-title { font-size: 20px !important; }
    p, .elementor-text-editor, li { font-size: 13px !important; }
    .elementor-section { padding-top: 30px !important; padding-bottom: 30px !important; }
    
    header .elementor-container,
    .elementor-location-header .elementor-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    header img, .elementor-location-header img { 
        max-width: 70px !important; 
        margin: 0 !important;
    }

    /* DESTRUCTION DU ROND ORANGE ASTRA */
    button.menu-toggle,
    .ast-button-wrap .menu-toggle,
    .ast-mobile-menu-buttons .menu-toggle,
    .ast-mobile-popup-drawer .ast-close-svg,
    #ast-mobile-popup .ast-close-svg {
        background-color: transparent !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* 3 Barres en blanc */
    .ast-button-wrap .menu-toggle .ast-icon svg,
    .elementor-menu-toggle svg {
        fill: #ffffff !important;
        width: 25px !important;
        height: 25px !important;
    }

    /* Croix de fermeture en noir */
    .ast-mobile-popup-drawer .ast-close-svg svg,
    #ast-mobile-popup .ast-close-svg svg {
        fill: #1a1a1a !important;
    }

    /* Contenu du menu déroulant */
    .elementor-nav-menu--dropdown,
    .ast-mobile-popup-drawer .ast-mobile-popup-inner {
        background-color: #ffffff !important;
    }

    .elementor-nav-menu--dropdown a,
    .ast-mobile-popup-drawer a {
        color: #1a1a1a !important; /* Texte noir sur fond blanc */
        font-size: 14px !important;
        letter-spacing: 2px !important;
        padding: 15px 20px !important;
        text-align: center !important;
        border-bottom: 1px solid #f9f9f9 !important;
    }

    .hfe-footer-container, footer .elementor-section {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 10px !important;
    }
    .hfe-footer-container img, footer img { max-width: 60px !important; }

    header a, .elementor-nav-menu a, .elementor-location-header a,
    .hfe-footer-container, .hfe-footer-container *, .hfe-footer-container p, .hfe-footer-container span, .hfe-footer-container a, footer p, footer span, footer a {
        font-size: 10px !important;
    }
}


/* --- 8. PAGE ABOUT (Design DA Spécifique) --- */

/* Titre de la bannière : Sécurisé en blanc, sans forçage d'alignement */
.titre-banniere-about, 
.titre-banniere-about .elementor-heading-title,
.titre-banniere-about h1, .titre-banniere-about h2 {
    color: #ffffff !important;
    /* On laisse Elementor gérer la position (gauche/centré/droite) ! */
}

/* LE VRAI FIX DU TEXTE NORMAL (Taille 13px) */
.texte-normal, 
.texte-normal *, 
.texte-normal p, 
.texte-normal h1, .texte-normal h2, .texte-normal h3, .texte-normal h4, .texte-normal .elementor-text-editor {
    text-transform: none !important; 
    font-weight: 400 !important;
    font-size: 13px !important; 
    line-height: 1.8 !important;
    letter-spacing: 0.5px !important;
}

/* ANIMATION ET STYLE DU TITRE "NOS VALEURS" (Élégant et Gras) */
.titre-valeurs, .titre-valeurs .elementor-heading-title {
    text-align: center !important;
    margin-bottom: 50px !important;
    font-weight: bold !important;
    font-size: 32px !important;
    animation: apparitionTitreValeur 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    opacity: 0; 
}

/* La ligne qui se dessine sous "Nos Valeurs" */
.titre-valeurs::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #1a1a1a;
    margin: 15px auto 0 auto;
    animation: ligneValeur 1s 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

@keyframes apparitionTitreValeur {
    0% { opacity: 0; transform: translateY(-20px); letter-spacing: 0px; }
    100% { opacity: 1; transform: translateY(0); letter-spacing: 4px; }
}

@keyframes ligneValeur {
    0% { width: 0; }
    100% { width: 60px; }
}

/* === LA GRILLE CSS AUTOMATIQUE POUR LES 4 VALEURS === */
.grille-valeurs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* Design créatif des 4 blocs */
.valeur-nbc {
    background-color: #ffffff !important;
    border: 1px solid #eeeeee !important;
    padding: 40px 20px !important;
    text-align: center !important;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
    position: relative !important;
    width: 100% !important;
}

/* Effet soulèvement au survol d'une valeur */
.valeur-nbc:hover {
    transform: translateY(-10px) !important;
    border-color: #1a1a1a !important;
    box-shadow: 0px 20px 40px rgba(0,0,0,0.05) !important;
    z-index: 2;
}

/* Textes à l'intérieur des cadres */
.valeur-nbc h2, .valeur-nbc h3, .valeur-nbc h4, .valeur-nbc .elementor-heading-title {
    margin: 0 !important;
    font-size: 16px !important;
    letter-spacing: 3px !important;
    color: #1a1a1a !important;
    font-weight: bold !important;
}

/* Ligne décorative dans la case qui s'étire au survol */
.valeur-nbc::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background-color: #1a1a1a;
    margin: 20px auto 0 auto;
    transition: width 0.4s ease;
}

.valeur-nbc:hover::after {
    width: 50px;
}

/* AJUSTEMENT SPÉCIFIQUE POUR LE MOBILE */
@media (max-width: 767px) {
    /* Forçage absolu de la visibilité de la bannière sur téléphone */
    .titre-banniere-about, 
    .titre-banniere-about .elementor-heading-title, 
    .titre-banniere-about h1,
    .titre-banniere-about h2 { 
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 9999 !important;
        position: relative !important;
        color: #ffffff !important; 
    }
    
    .grille-valeurs {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .valeur-nbc { 
        padding: 30px 10px !important; 
    }
    
    .valeur-nbc h2, .valeur-nbc h3, .valeur-nbc h4, .valeur-nbc .elementor-heading-title {
        font-size: 13px !important;
    }
}