@charset "UTF-8";

/* ==========================================================================
   CHARTE GRAPHIQUE LOCILEC — VARIABLES GLOBALES
   ========================================================================== */
:root {
    --bleu-principal: #0B1B37;  /* Bleu texte logo */
    --bleu-electrique: #079499; /* Bleu flèche logo */
    --turquoise: #079499;       /* Vert d'eau symbole L */
    --fond-header: rgba(30, 35, 40, 0.65);
}

/* ==========================================================================
   1. STRUCTURES GLOBALES & NAVIGATION (STICKY)
   ========================================================================== */
body {
    padding-top: 3.5em !important; 
}

#header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    background-color: var(--fond-header) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.3s ease !important;
    /* Effet de flou de l'arrière-plan très qualitatif */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================================
   2. BANNIÈRE & BOUTONS
   ========================================================================== */
#banner .button.primary {
    background-color: var(--turquoise) !important;
    box-shadow: inset 0 0 0 2px var(--turquoise) !important;
    color: #ffffff !important;
}

#banner .button.primary:hover {
    background-color: transparent !important;
    color: var(--turquoise) !important;
}

#header .button.primary {
    background-color: var(--bleu-electrique) !important;
    border-color: var(--bleu-electrique) !important;
    color: #ffffff !important;
}

#header .button:not(.primary) {
    background-color: transparent !important;
    color: var(--bleu-electrique) !important;
    border-color: var(--bleu-electrique) !important;
    border-width: 2px;
}

/* ==========================================================================
   3. DESIGN DES TITRES
   ========================================================================== */
.titre-souligne {
    text-align: center;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.titre-souligne::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--bleu-principal);
    border-radius: 2px;
}

/* ==========================================================================
   4. SYSTEME DE GRILLES & METIERS (MUTUALISÉ)
   ========================================================================== */
.metiers-grid, .metiers-grid-3 {
    display: grid;
    gap: 30px;
    margin-top: 3em;
}

.metiers-grid {
    grid-template-columns: repeat(5, 1fr);
}

.metiers-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    margin: 3em auto;
    max-width: 1000px;
}

/* Règle commune pour les éléments internes des deux grilles */
.metiers-grid .metier-item section,
.metiers-grid-3 .metier-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.metier-item .featured,
.metiers-grid-3 .metier-item .icon.featured {
    color: var(--turquoise) !important;
    border-color: var(--bleu-principal) !important;
    transform: scale(0.7);
    margin: 0 auto 0.5em auto;
}

.metier-item h3 {
    font-size: 1.1em !important;
    letter-spacing: 0 !important;
    text-align: center;
    margin-bottom: 0.5em;
}

.metier-item h3 strong {
    color: var(--bleu-principal);
}

.metier-item p {
    margin-top: 0.5em;
    line-height: 1.3;
    text-align: center;
}

.metier-item p small {
    font-size: 0.8em;
}

.major-actions {
    margin-top: 2.5em;
}

/* ==========================================================================
   5. CARROUSSEL DE LOGOS AUTOMATIQUE (GABARIT INTERMÉDIAIRE 380px)
   ========================================================================== */
#carrousel-locilec {
    background: transparent !important;   
    box-shadow: none !important;          
    height: 120px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Le rail adapté au gabarit 380px (14 * 380px = 5320px) */
#carrousel-locilec .logos-track {
    display: flex !important;
    width: 5320px !important; 
    min-width: 5320px !important;
    justify-content: space-between !important;
    
    /* Vitesse ajustée à 45s pour un glissement très doux */
    animation: scrollLogos 45s linear infinite !important;
    -webkit-animation: scrollLogos 45s linear infinite !important;
}

/* Cases fixées à 380px de large */
#carrousel-locilec .logos-slide {
    height: 120px !important;
    width: 380px !important;
    min-width: 380px !important; 
    max-width: 380px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 50px !important; /* Maintient un bon espace de sécurité interne */
    flex-shrink: 0 !important;   
}

/* Style des images (Toujours en couleurs d'origine) */
#carrousel-locilec img {
    height: 55px !important;            
    max-height: 55px !important;
    width: 160px !important;            
    max-width: 100% !important;
    object-fit: contain !important;     
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;         
    filter: none !important;            
    opacity: 1 !important;              
}

/* ==========================================================================
   ANIMATION AJUSTÉE SUR 380px (7 LOGOS * 380px = 2660px)
   ========================================================================== */
@keyframes scrollLogos {
    0% { 
        transform: translateX(0); 
    }
    100% { 
        transform: translateX(-2660px); /* Recalculé sur la moitié exacte du rail */
    }
}

@-webkit-keyframes scrollLogos {
    0% { 
        -webkit-transform: translateX(0); 
    }
    100% { 
        -webkit-transform: translateX(-2660px); 
    }
}

/* ==========================================================================
   NOUVELLE ANIMATION CORRIGÉE (7 LOGOS * 450px = 3150px)
   ========================================================================== */
@keyframes scrollLogos {
    0% { 
        transform: translateX(0); 
    }
    100% { 
        transform: translateX(-3150px); /* Recule de la moitié exacte en pixels */
    }
}

@-webkit-keyframes scrollLogos {
    0% { 
        -webkit-transform: translateX(0); 
    }
    100% { 
        -webkit-transform: translateX(-3150px); 
    }
}

/* ==========================================================================
   L'ANIMATION DE DÉFILEMENT (SYNTAXE UNIVERSELLE)
   ========================================================================== */
@keyframes scrollLogos {
    0% { 
        transform: translateX(0); 
    }
    100% { 
        transform: translateX(-2240px); /* Recule précisément de la moitié (7 logos * 320px = 2240px) */
    }
}

@-webkit-keyframes scrollLogos {
    0% { 
        -webkit-transform: translateX(0); 
    }
    100% { 
        -webkit-transform: translateX(-2240px); 
    }
}
/* ==========================================================================
   6. ZONE RESPONSIVE (MUTUALISÉE TOUT EN BAS)
   ========================================================================== */
@media screen and (max-width: 736px) {
    #header {
        position: fixed !important;
    }

    .metiers-grid, .metiers-grid-3 {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .logos-slider {
        height: 90px;
    }
    .logos-slide {
        width: 180px;
    }
    .logos-track {
        width: calc(180px * 14);
    }
    @keyframes scrollLogos {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-180px * 7)); }
    }
}


/* ==========================================================================
   STYLE DES ICÔNES DE LA GRILLE À 3 (CORRECTION TAILLE PICTO + GRAND ROND)
   ========================================================================== */
.metiers-grid-3 .metier-item .icon.featured {
    color: var(--turquoise) !important;  /* L'icône prend le bleu de votre logo */
    background-color: #e0e6e4 !important;     /* Couleur blanc cassé */
    border-color: #e2e8f0 !important;         /* Bordure discrète */
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* On agrandit massivement le rond */
    width: 140px !important;                             
    height: 140px !important;
    border-radius: 50% !important;
    
    /* On stabilise l'échelle générale pour éviter l'effet miniature */
    transform: scale(1) !important;                    
    margin: 0 auto 1.5em auto !important;
    
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* --- LE FIX DE TAILLE : On force le pictogramme seul à être gros et centré --- */
.metiers-grid-3 .metier-item .icon.featured::before {
    font-size: 3rem !important;        /* Augmente la taille du picto (ajustez à 3.5rem si vous voulez encore plus gros) */
    line-height: 1 !important;         /* Annule les hauteurs de ligne du thème */
    display: block !important;
}

/* ==========================================================================
   ANIMATION AU SURVOL (HOVER)
   ========================================================================== */
.metiers-grid-3 .metier-item:hover .icon.featured {
    /* L'icône et son grand rond montent ensemble proprement */
    transform: translateY(-10px) !important;
    
    background-color: #ffffff !important;
    border-color: var(--turquoise) !important; /* Allumage de la bordure en turquoise */
    
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   SECTION RÉALISATIONS — UNIFORMISATION DES IMAGES
   ========================================================================== */
#realisations .image.featured {
    height: 280px !important;       /* Hauteur fixe identique pour toutes les boîtes */
    overflow: hidden !important;    /* Sécurité pour couper ce qui dépasse */
    display: block !important;
}

#realisations .image.featured img {
    height: 100% !important;        /* L'image remplit 100% de la hauteur de la boîte */
    width: 100% !important;         /* L'image remplit 100% de la largeur de la boîte */
    
    /* TRÈS IMPORTANT : Centre et recadre l'image proprement sans JAMAIS la déformer */
    object-fit: cover !important;   
    
    /* Petit effet esthétique au survol si vous le souhaitez */
    transition: transform 0.4s ease !important;
}

/* Optionnel : Léger zoom sur la photo quand l'utilisateur passe la souris dessus */
#realisations .image.featured:hover img {
    transform: scale(1.05);
}

/* ==========================================================================
   N_ GALERIE PHOTO (3 COLONNES - INFINI)
   ========================================================================== */
.galerie-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Force strictement 3 colonnes */
    gap: 25px !important;                             /* Espace constant entre les images */
    margin-top: 3em !important;
    width: 100% !important;
}

.galerie-item {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    background: #ffffff !important;
    height: 250px !important;                         /* Hauteur fixe uniforme pour toutes vos photos */
}

.galerie-item .image-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

.galerie-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;                     /* Recadre les photos proprement sans les déformer */
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}




/* ==========================================================================
   ADAPTATION RESPONSIVE (MOBILE)
   ========================================================================== */
@media screen and (max-width: 980px) {
    .galerie-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 colonnes sur tablette */
    }
}

@media screen and (max-width: 736px) {
    .galerie-grid {
        grid-template-columns: 1fr !important;           /* 1 seule colonne propre sur smartphone */
        gap: 20px !important;
    }
    .galerie-item {
        height: 220px !important;                         /* Hauteur légèrement réduite sur smartphone */
    }
}


/* ==========================================================================
   STYLE DE LA ZONE SEO DU FOOTER (NETTOYÉ ET RESPONSIVE)
   ========================================================================== */
.footer-seo-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
    text-align: left !important;
    padding: 3em 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-top: 2em !important;
}

.footer-seo-wrapper .footer-col {
    flex: 1 !important;
    min-width: 250px !important;
    margin: 1em !important;
}

.footer-seo-wrapper h3 {
    font-size: 1.1em !important;
    color: #8D99AE !important;
    margin-bottom: 1em !important;
    letter-spacing: 1px !important;
}

.footer-seo-wrapper ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-seo-wrapper ul li {
    padding: 0 !important;
    line-height: 2 !important;
}

.footer-seo-wrapper address {
    font-style: normal !important;
    line-height: 1.6 !important;
}

/* Optimisation mobile : alignement centré sur petit écran pour plus d'élégance */
@media screen and (max-width: 736px) {
    .footer-seo-wrapper {
        text-align: center !important;
        flex-direction: column !important;
    }
    .footer-seo-wrapper .footer-col {
        margin: 1.5em 0 !important;
    }
}

/* ==========================================================================
   SUPPRESSION DE L'ARRIÈRE-PLAN AU CLIC / SURVOL SUR LE BOUTON COURANT
   ========================================================================== */

/* Cible le bouton actuel (.current) pour bloquer le fond au survol et au clic */
#header nav ul li.current > a,
#header nav ul li.current > a:hover,
#header nav ul li.current > a:active,
#header nav ul li.current > a:focus {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Bonus : Supprime également le flash gris/bleu natif des smartphones lors du clic sur mobile */
#header nav ul li a {
    -webkit-tap-highlight-color: transparent !important;
}

/* ==========================================================================
   MISE EN PAGE ET COULEURS - PAGE CONTACT (PC vs MOBILE)
   ========================================================================== */

/* 💻 RÉGLAGES POUR ORDINATEUR (Écrans larges supérieurs à 768px) */
@media screen and (min-width: 769px) {
    body.contact .contact-flex-grid {
        display: flex !important;
        flex-direction: row !important; /* Côte à côte obligatoire */
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 4% !important;
        width: 100% !important;
    }

    body.contact .contact-sidebar {
        width: 30% !important;
        display: block !important;
    }

    body.contact .contact-main-form {
        width: 66% !important;
        display: block !important;
    }

    body.contact .form-fields-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
    }

    body.contact .form-field {
        width: calc(50% - 10px) !important; /* 2 colonnes pour Prénom/Nom et Tel/Email */
    }

    body.contact .form-field.full-width {
        width: 100% !important;
    }
}

/* 📱 RÉGLAGES POUR MOBILE & TABLETTE (Écrans inférieurs à 768px) */
@media screen and (max-width: 768px) {
    body.contact .contact-flex-grid {
        display: flex !important;
        flex-direction: column !important; /* Empilement vertical strict */
        gap: 35px !important;
    }

    body.contact .contact-sidebar {
        width: 100% !important;
        order: 1 !important; /* Actions rapides en premier */
    }

    body.contact .contact-main-form {
        width: 100% !important;
        order: 2 !important; /* Formulaire en dessous */
    }

    body.contact .form-fields-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    body.contact .form-field {
        width: 100% !important; /* Un seul champ par ligne */
    }
}

/* ⬜ STYLE DU BLOC FORMULAIRE (Fond blanc type "Carte") */
body.contact .contact-main-form {
    background-color: #ffffff !important;
    padding: 35px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important; /* Ombre légère pour le décoller du fond gris du site */
}

/* Ajustement des champs pour qu'ils ressortent parfaitement sur le fond blanc */
body.contact .contact-main-form input[type="text"],
body.contact .contact-main-form input[type="email"],
body.contact .contact-main-form textarea {
    background-color: #f8fafc !important; /* Très léger gris de contraste */
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

body.contact .contact-main-form input[type="text"]:focus,
body.contact .contact-main-form input[type="email"]:focus,
body.contact .contact-main-form textarea:focus {
    border-color: #2b5a8f !important; /* Couleur focus pro */
    background-color: #ffffff !important;
}

/* 🎨 LES 3 COULEURS DES BOUTONS D'ACTIONS RAPIDES */
/* 1. Bouton Appeler (Bleu de la charte) */
body.contact .phone-btn {
    background-color: #1c75bc !important; 
    color: #ffffff !important;
    box-shadow: none !important;
}
body.contact .phone-btn:hover {
    background-color: #155992 !important;
}

/* 2. Bouton Mail (Gris Anthracite Pro) */
body.contact .email-btn {
    background-color: #4a5568 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
body.contact .email-btn:hover {
    background-color: #2d3748 !important;
}

/* 3. Bouton WhatsApp (Vert Officiel) */
body.contact .whatsapp-btn {
    background-color: #25D366 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
body.contact .whatsapp-btn:hover {
    background-color: #128C7E !important;
}

/* ⚖️ ACCESSIBILITÉ ET CASE RGPD */
body.contact .gdpr-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-top: 1em !important;
}

body.contact .gdpr-container input[type="checkbox"] {
    -moz-appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
}

#label-rgpd {
    display: inline !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #64748b !important;
    font-size: 0.85em !important;
    line-height: 1.5em !important;
}

.icon.solid::before {
    color: #079499 !important; /* Mettez votre couleur globale ici */
}
/* ==========================================================================
   DESIGN GLOBAL : HAUTEUR DES IMAGES DE TOUS LES ARTICLES SEO
   ========================================================================== */

/* --- Sur Ordinateurs et Tablettes --- */
@media screen and (min-width: 737px) {
    #main .image.featured {
        height: 350px !important;      /* Ajustez cette hauteur selon vos préférences pour le PC */
        overflow: hidden !important;
        display: block !important;
        border-radius: 4px !important;
    }
}

/* --- Sur Smartphones (Écrans réduits) --- */
@media screen and (max-width: 736px) {
    #main .image.featured {
        height: 160px !important;      /* Hauteur plus fine pour ne pas bloquer l'écran du mobile */
        overflow: hidden !important;
        display: block !important;
        border-radius: 4px !important;
    }
}

/* --- Règle commune pour le comportement de l'image --- */
#main .image.featured img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;       /* Empêche la déformation (recadrage automatique) */
    object-position: center !important;  /* Reste centré sur l'action principale de la photo */
}

/* ==========================================================================
   UNIFORMISATION DU HEADER (TEXTE LUMINEUX SUR FOND SOMBRE PARTOUT)
   ========================================================================== */

/* Force le logo et les liens du menu à rester blancs sur toutes les pages */
#header h1 a,
#header h1 a span,
#header nav > ul > li > a,
#header nav > ul > li > span {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Couleur au survol des liens du menu (reprend votre bleu électrique) */
#header nav > ul > li > a:hover {
    color: var(--bleu-electrique) !important;
}

/* Sécurité pour le bouton "Contact" dans le menu */
#header nav > ul > li a.button.primary {
    background-color: var(--bleu-electrique) !important;
    border-color: var(--bleu-electrique) !important;
    color: #ffffff !important;
}

#header nav > ul > li a.button.primary:hover {
    background-color: #ffffff !important;
    color: var(--bleu-electrique) !important;
    border-color: #ffffff !important;
}

/* ==========================================================================
   SECTION ÉQUIPE (Mise en page 2 colonnes & Responsive)
   ========================================================================== */

/* Structure globale des deux colonnes */
.equipe-container {
    display: flex;
    align-items: center; /* Centre verticalement le texte à côté de la photo */
    gap: 3.5rem;         /* Espace important entre la photo et le texte */
    margin-top: 2.5rem;
    text-align: left;    /* Contrebalance le "special" du thème qui centre tout le texte */
}

/* Partage équitable de l'espace (50% / 50%) */
.equipe-col-image, 
.equipe-col-texte {
    flex: 1;
    width: 50%;
}

/* Style de la photo d'équipe */
.equipe-col-image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* Ombre légère moderne */
    display: block;
}

/* Titre interne de la colonne texte */
.equipe-col-texte h3 {
    color: #1e2328;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
}

/* Espacement des paragraphes */
.equipe-col-texte p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* --- Version Mobile et Tablette (Rupture à 980px comme le thème Twenty) --- */
@media screen and (max-width: 980px) {
    .equipe-container {
        flex-direction: column; /* Aligne la photo au-dessus du texte */
        gap: 2rem;
        text-align: center;     /* Recentre le texte pour un rendu mobile propre */
    }
    
    .equipe-col-image, 
    .equipe-col-texte {
        width: 100%;            /* Les deux colonnes prennent toute la largeur */
    }
}