/* ============================================================
   VIBE STYLE - VERSION STABLE (CORRECTIF SLIDER APPLIQUÉ)
   ============================================================ */

/* 1. Fond dégradé Bleu Roi -> Blanc */
.header-transparent {
    background: linear-gradient(90deg, #005BBB 0%, #ffffff 100%) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 2. Conteneur du Logo */
.logo-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

/* 3. L'Image du logo */
.logo-container img {
    max-height: 55px;
    width: auto;
    margin-bottom: 18px;
    display: block;
}

/* 4. Le Texte sous le logo */
.logo-subtext {
    font-family: 'Arial', sans-serif; 
    font-size: 8px;
    font-weight: 700;       
    color: #ffffff;         
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;       
    white-space: normal;
    text-align: center;     
}

@media (min-width: 768px) {
    .logo-subtext {
        white-space: nowrap;
        font-size: 10px;
        letter-spacing: 2px;
    }
}

/* 5. Liens du Menu */
.main-menu ul li a {
    color: #005BBB !important; 
    font-weight: 600;
}
.main-menu ul li a:hover {
    color: #FFDE00 !important;
}
.main-menu ul li a::before,
.main-menu ul li a::after {
    background-color: #FFDE00 !important;
}

/* 6. BOUTONS UNIFIÉS (Version Input A - SANS white-space: normal) */
.header-btn .btn,
.hero-content .btn,
.about-content .btn,
.project-section .btn,
.page-banner-content .btn,
.service-detail-content .btn,
.zone-section .btn {
    background-color: #005BBB !important;
    color: #ffffff !important;
    border: 2px solid #005BBB !important;
    font-weight: 700;
    position: relative;
    z-index: 1;
    overflow: visible !important;
    
    /* ICI : On remet le comportement par défaut sain */
    display: inline-block !important; 
    white-space: nowrap !important; /* VITAL : Interdit au texte de casser */
    padding: 12px 30px !important;
    transition: all 0.3s ease;
}

/* Fix spécifique Zone Section (car bouton différent) */
.zone-section .btn {
    background-color: #FFDE00 !important;
    color: #000 !important;
    border-color: #FFDE00 !important;
}
.zone-section .btn:hover {
    background-color: #fff !important;
    color: #005BBB !important;
    border-color: #fff !important;
}

.header-btn .btn:hover,
.hero-content .btn:hover,
.about-content .btn:hover,
.project-section .btn:hover {
    background-color: #ffffff !important;
    color: #005BBB !important;
    border-color: #ffffff !important;
}

.header-btn .btn::before, .header-btn .btn::after,
.hero-content .btn::before, .hero-content .btn::after,
.about-content .btn::before, .about-content .btn::after,
.project-section .btn::before, .project-section .btn::after {
    content: "";
    position: absolute;
    width: 100%; height: 100%;
    border: 2px solid transparent !important; 
    background-color: transparent !important;
    transition: all 0.3s ease;
    z-index: -1;
}

/* Animation Jaune */
.header-btn .btn:hover::before,
.hero-content .btn:hover::before,
.about-content .btn:hover::before,
.project-section .btn:hover::before {
    border-color: #FFDE00 !important;
    top: 10px !important; left: 10px !important; right: 10px !important; bottom: 10px !important;
}

.header-btn .btn:hover::after,
.hero-content .btn:hover::after,
.about-content .btn:hover::after,
.project-section .btn:hover::after {
    border-color: #FFDE00 !important;
    top: -10px !important; left: -10px !important; right: -10px !important; bottom: -10px !important;
}

/* 7. Menu Burger Mobile */
.mean-container a.meanmenu-reveal { color: #005BBB !important; }
.mean-container a.meanmenu-reveal span { background-color: #005BBB !important; }

/* --- FIX MENU MOBILE : ZERO BANDEAU BLANC --- */
@media (max-width: 991px) {
    .mean-container .mean-nav {
        background: #ffffff !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important; /* STOP au bandeau blanc */
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    }

    .mean-container .mean-nav ul li a {
        padding: 12px 5% !important; 
        font-size: 14px !important;  
        font-weight: 600 !important;
        line-height: 1.2 !important;
        border-top: 1px solid rgba(0,0,0,0.05) !important;
        margin: 0 !important;
    }

    .mean-container .mean-nav ul li {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
}

/* 8. Hero & Textes */
.hero-item::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(0, 91, 187, 0.9) 0%, rgba(0, 0, 0, 0.3) 100%) !important;
    z-index: 1 !important; pointer-events: none; 
}

.hero-content h1, .hero-content h2, .hero-content h3, .hero-content p {
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.9), 0 5px 15px rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important; 
}

.hero-content p {
    font-weight: 500 !important; font-size: 16px; line-height: 1.6;
    max-width: 800px; margin-left: auto; margin-right: auto;
}

/* 9. Vidéo & Structure Hero */
.header-bottom { border-bottom: 0 none !important; box-shadow: none !important; }
.hero-section { margin-top: 0 !important; border-top: 0 none !important; }

.hero-section, .hero-item {
    position: relative !important; height: auto !important; min-height: 75vh !important; 
    display: flex !important; flex-direction: column !important;
    justify-content: flex-start !important; align-items: center !important;
    overflow: hidden !important; background-color: #000 !important;
}

.video-bg {
    position: absolute !important; top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    min-width: 100% !important; min-height: 100% !important;
    width: auto !important; height: auto !important;
    z-index: 0 !important; object-fit: cover !important;
}

.hero-item::before { z-index: 1 !important; }
.hero-content { position: relative !important; width: 100%; z-index: 2 !important; }

@media (max-width: 991px) {
    .hero-item { min-height: auto !important; }
    .hero-content { padding-top: 140px !important; padding-bottom: 40px !important; }
}
@media (min-width: 992px) {
    .hero-content { padding-top: 200px !important; padding-bottom: 100px !important; }
}

/* 10. Animations Hero */
@keyframes blurIn { from { opacity: 0; filter: blur(20px); transform: scale(1.2); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes trackingIn { 0% { letter-spacing: -0.5em; opacity: 0; } 40% { opacity: 0.6; } 100% { opacity: 1; } }

.hero-content h2 { animation: trackingIn 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; }
.hero-content h1 { animation: blurIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both; }
.hero-content h3, .hero-content .btn { animation: blurIn 1.2s ease-out 0.8s both; }

/* 11. Badge About */
.about-image-1 { position: relative !important; overflow: visible !important; }
.experience-badge {
    position: absolute !important; bottom: -20px !important; right: -20px !important;
    width: 130px; height: 130px;
    background-color: #005BBB !important; color: #ffffff !important;
    border: 4px solid #FFDE00 !important; border-radius: 50% !important;
    display: flex !important; flex-direction: column !important;
    justify-content: center !important; align-items: center !important; text-align: center !important;
    font-family: 'Arial', sans-serif !important; line-height: 1.1 !important;
    font-weight: 700 !important; font-size: 14px !important; text-transform: uppercase !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important; z-index: 10 !important;
    animation: popInBadge 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s both;
}
.experience-badge span { font-size: 38px !important; font-weight: 900 !important; display: block !important; color: #FFDE00 !important; margin-bottom: 2px !important; }
@keyframes popInBadge { from { transform: scale(0) rotate(-45deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@media (max-width: 767px) { .experience-badge { width: 100px !important; height: 100px !important; bottom: -10px !important; right: -10px !important; font-size: 11px !important; } .experience-badge span { font-size: 28px !important; } }

/* 12. Animations Sections */
@keyframes zoomOutReveal { from { opacity: 0; transform: scale(1.1); filter: blur(5px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
.about-image-1, .about-image-2 { animation: zoomOutReveal 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.0s both; }
.about-content-1, .about-content-2 { animation: fadeUpSection 1s ease 1.5s both; }
@keyframes fadeUpSection { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* 13. Cartes Flottantes */
.feature {
    background-color: #ffffff !important; padding: 40px 30px !important; border-radius: 5px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; transition: all 0.3s ease !important;
    height: 100% !important; border-bottom: 3px solid transparent !important;
}
.feature:hover { transform: translateY(-10px) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important; border-bottom-color: #FFDE00 !important; }
/* Ancien style (désactivé pour labels showcase) */
.feature .icon { 
    margin-bottom: 25px !important; 
}

/* OVERRIDE POUR LES LABELS (FORCE L'EMPILEMENT) */
.feature-logo-showcase .icon-logo-xl {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}
/* 14. Prestations */
.service-inner .content { padding-top: 30px !important; }

/* 15. Équipe */
.team-2 .image {
    border-radius: 8px !important; width: 100% !important; height: 450px !important;
    overflow: hidden !important; margin-bottom: 20px !important; box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}
.team-2 .image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; transition: all 0.5s ease !important; }
.team-2:hover .image img { transform: scale(1.05) !important; }

/* 16. ANIMATION ÉQUIPE (Mise à jour pour 6 membres) */
@keyframes dropHeavy {
    0% { opacity: 0; transform: translateY(-120px); }
    100% { opacity: 1; transform: translateY(0); }
}

.team-section .team-2 {
    opacity: 0; /* Caché par défaut */
}

/* L'ANIMATION EN CASCADE */
.team-section.is-visible .row > div:nth-child(1) .team-2 { animation: dropHeavy 0.6s ease-in 0s forwards; }
.team-section.is-visible .row > div:nth-child(2) .team-2 { animation: dropHeavy 0.6s ease-in 0.2s forwards; }
.team-section.is-visible .row > div:nth-child(3) .team-2 { animation: dropHeavy 0.6s ease-in 0.4s forwards; }
.team-section.is-visible .row > div:nth-child(4) .team-2 { animation: dropHeavy 0.6s ease-in 0.6s forwards; }
/* Les deux nouveaux : */
.team-section.is-visible .row > div:nth-child(5) .team-2 { animation: dropHeavy 0.6s ease-in 0.8s forwards; }
.team-section.is-visible .row > div:nth-child(6) .team-2 { animation: dropHeavy 0.6s ease-in 1.0s forwards; }
/* 17. Animation Prestations */
.service-section .service-two { opacity: 0; transform: scale(0.9); filter: blur(5px); transition: all 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.service-section.is-visible .service-two { opacity: 1; transform: scale(1); filter: blur(0); }
.service-section.is-visible .col-lg-4:nth-child(1) .service-two { transition-delay: 0s; }
.service-section.is-visible .col-lg-4:nth-child(2) .service-two { transition-delay: 0.3s; }
.service-section.is-visible .col-lg-4:nth-child(3) .service-two { transition-delay: 0.6s; }

/* 18. SLIDER PARTENAIRES (DÉFILEMENT INFINI - VERSION XL CORRIGÉE) */
.slider-window {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slider-track {
    display: flex !important;
    flex-direction: row !important;
    width: max-content !important; /* CORRECTION ICI : max-content au lieu de calc */
    animation: scrollInfinite 30s linear infinite; 
}

.slide-item {
    width: 350px; 
    flex-shrink: 0 !important;
    padding: 0 30px;
    display: flex;
    align-items: center; /* CORRECTION ICI : Syntax CSS correcte */
    justify-content: center;
}

.slide-item img {
    max-width: 100% !important;
    /* C'EST ICI QUE CA SE JOUE : On passe de 100px à 160px */
    max-height: 160px !important; 
    width: auto !important; 
    opacity: 1;
    mix-blend-mode: multiply; /* Pour que le blanc des logos jpeg se fonde dans le gris si besoin */
    transition: all 0.3s ease;
}

/* Zoom au survol */
.slide-item img:hover {
    transform: scale(1.1);
}

@keyframes scrollInfinite {
    0% { transform: translateX(0); }
    /* On déplace de la moitié de la piste (6 éléments * 350px) */
    100% { transform: translateX(calc(-350px * 6)); } 
}
/* 19. PROJETS : DESIGN CORRIGÉ (TEXTE COLLÉ & FIXE) */
.project-section .project .content {
    position: relative !important; opacity: 1 !important; visibility: visible !important;
    bottom: auto !important; left: auto !important; right: auto !important;
    background: transparent !important; padding: 15px 0 0 0 !important;
    text-align: left !important; transform: none !important; transition: none !important;
}
.project-section .project .content .title { margin-bottom: 2px !important; line-height: 1.2 !important; }
.project-section .project .content .title a { color: #333333 !important; font-size: 18px !important; font-weight: 700 !important; text-decoration: none !important; display: block !important; }
.project-section .project .content .title a:hover { color: #005BBB !important; }
.project-section .project .content .category { display: block !important; margin-top: 0 !important; }
.project-section .project .content .category a { color: #888888 !important; font-weight: 600 !important; text-transform: uppercase; font-size: 12px !important; letter-spacing: 1px; text-decoration: none !important; pointer-events: none !important; }
.project-section .project:hover .content, .project-section .project:hover .category, .project-section .project:hover .title { transform: none !important; animation: none !important; transition: none !important; }
.project-section .project .image { overflow: hidden; border-radius: 4px; display: block; margin-bottom: 0 !important; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.project-section .project .image img { transition: transform 0.5s ease; }
.project-section .project:hover .image img { transform: scale(1.05); }


/* CORRECTION COULEUR DU "+" DANS LES CHIFFRES */
.funfact-section h1 {
    color: #ffffff !important; /* Blanc pur forcé */
    font-weight: 700 !important; /* Même graisse que les chiffres */
    opacity: 1 !important; /* Pas de transparence */
    margin: 0 !important; /* On évite les décalages */
}

/* On s'assure que le span counter est identique */
.funfact-section .counter {
    color: #ffffff !important;
    font-weight: 700 !important;
}


/* --- FIX GLOBAL FUNFACTS ICONS (ANTI-DEFORMATION) --- */
.funfact-section .single-fact img,
.funfact-section img {
    height: 60px !important; /* Hauteur fixe Pro pour l'alignement */
    width: auto !important;  /* Largeur automatique pour garder le ratio */
    max-width: 100% !important;
    object-fit: contain !important; /* EMPÊCHE L'ÉCRASEMENT : Vital ! */
    margin-bottom: 20px !important;
    display: inline-block !important;
}

/* Ajustement spécifique mobile pour réduire un peu */
@media (max-width: 767px) {
    .funfact-section .single-fact img,
    .funfact-section img {
        height: 40px !important; /* Plus petit sur mobile */
        margin-bottom: 10px !important;
    }
}




/* 20. FOOTER : DESIGN ANTHRACITE & CERTIFICATIONS */

/* On enlève l'image de fond et on met du Gris Anthracite */
.footer-section {
    background-image: none !important;
    background-color: #1e1e1e !important; /* Gris très sombre chic */
}

/* Ajustement des textes pour qu'ils soient bien blancs */
.footer-widget .title .text {
    color: #ffffff !important;
}
.footer-widget p, .footer-widget li, .footer-widget span, .footer-widget a {
    color: #b0b0b0 !important; /* Gris clair pour le texte secondaire */
}
.footer-widget a:hover {
    color: #FFDE00 !important; /* Jaune au survol */
}

/* --- CERTIFICATIONS ALIGNEMENT FORCÉ v3 (ULTRA ROBUSTE) --- */
.certif-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.certif-list li {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    
    /* NOUVEAU : On écrase TOUS les héritages */
    line-height: 1 !important;
    padding: 0 !important;
    
    /* NOUVEAU : Hauteur fixe pour forcer l'alignement */
    min-height: 45px !important;
    max-height: 45px !important;
}

.certif-list li img {
    /* Logo : Zone carrée de 45x45px */
    width: 45px !important;
    height: 45px !important;
    
    margin-right: 15px !important;
    
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
    
    /* NOUVEAU : On force l'alignement au centre de SA zone */
    align-self: center !important;
    
    /* NOUVEAU : On retire TOUTES les marges parasites */
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.certif-list li span {
    /* NOUVEAU : Le texte devient un bloc flex aussi */
    display: flex !important;
    align-items: center !important;
    
    /* Style du texte */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    
    /* NOUVEAU : On écrase les héritages de line-height */
    line-height: 1.2 !important;
    
    /* NOUVEAU : On retire TOUS les espacements */
    margin: 0 !important;
    padding: 0 !important;
    
    /* NOUVEAU : Le texte prend toute la hauteur disponible */
    height: 100% !important;
}

/* On cache les anciennes icônes */
.certif-list li i { 
    display: none !important; 
}


/* 21. RÉSEAUX SOCIAUX (COULEURS OFFICIELLES) */

/* Base commune (taille, rond, transition) */
.footer-social a {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1); /* Fond gris léger par défaut */
    margin-right: 10px;
    transition: all 0.3s ease;
    color: #ffffff !important; /* Icône blanche par défaut */
    font-size: 18px;
}

/* FACEBOOK (Bleu) */
.footer-social a.facebook:hover {
    background-color: #3b5998 !important;
    transform: translateY(-3px);
}

/* LINKEDIN (Bleu Pro) */
.footer-social a.linkedin:hover {
    background-color: #0077b5 !important;
    transform: translateY(-3px);
}

/* INSTAGRAM (Le Dégradé Magique) */
.footer-social a.instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    transform: translateY(-3px);
    border: none !important;
}

/* 22. SECTION ZONE D'INTERVENTION (Bleu Navy & Bouton Animé) */

.zone-section { 
    background-color: #0a192f !important; /* Bleu Nuit Profond */
    color: white; 
    padding: 100px 0; 
    text-align: center; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
}

.zone-sep { width: 50px; height: 3px; background: #FFDE00; margin: 30px auto; }

.zone-numbers { font-family: 'Arial', sans-serif; font-weight: 800; font-size: 42px; color: #ffffff; letter-spacing: 2px; margin-bottom: 15px; }
.zone-numbers span { color: #005BBB; margin: 0 15px; font-size: 24px; vertical-align: middle; }

/* --- LE BOUTON SPÉCIAL "ZONE" --- */

/* 1. État Repos : Jaune, Texte Noir, Bordure Jaune */
.zone-section .btn {
    background-color: #FFDE00 !important;
    color: #000000 !important;
    border-color: #FFDE00 !important;
}

/* 2. État Survol : Blanc, Texte Bleu, Bordure Blanche */
.zone-section .btn:hover {
    background-color: #ffffff !important;
    color: #005BBB !important;
    border-color: #ffffff !important;
}

/* 3. L'Animation des Rectangles (Adaptée au fond sombre) */
/* On force la couleur BLANCHE pour les rectangles qui s'écartent */
.zone-section .btn:hover::before,
.zone-section .btn:hover::after {
    border-color: #ffffff !important; 
}


/* =========================================
   23. AJUSTEMENTS RESPONSIVE (MOBILE < 768px) - V11 (CORRECTIF HERO + ABOUT)
   ========================================= */
@media (max-width: 767px) {
    
    /* 0. HEADER COMPACT (Optimisé Vibe) */
    /* On réduit le padding gauche pour rapprocher le logo du bord */
    .col-auto.mt-20.mb-20 { 
        margin-top: 10px !important; 
        margin-bottom: 10px !important; 
        
        /* LE SECRET EST ICI : */
        padding-left: 0 !important;   /* On enlève tout gras interne */
        margin-left: -20px !important; /* On tire le bloc vers la gauche (hors des clous) */
    }

    /* Taille logo ajustée */
    .logo-container img { 
        max-height: 42px !important; /* Un micro-poil plus gros */
        margin-bottom: 4px !important; 
    }

    /* Texte plus lisible mais compact */
    .logo-subtext { 
        font-size: 9px !important; /* Passage de 7px à 9px */
        line-height: 1.1 !important; 
        letter-spacing: 0.5px !important; /* Espacement léger pour la lisibilité */
    }
    
    /* 1. HERO : HAUTEUR & TITRES (Validé) */
    .hero-section, .hero-item { min-height: unset !important; height: 60vh !important; position: relative !important; }
    .video-bg { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; min-width: 100% !important; min-height: 100% !important; width: auto !important; height: auto !important; object-fit: cover !important; }
    
    .hero-content { 
        position: absolute !important; top: 45% !important; left: 50% !important; transform: translate(-50%, -50%) !important; 
        width: 100% !important; padding: 0 15px !important; z-index: 5 !important; text-align: center !important; 
    }
    .hero-content h1 { font-size: 55px !important; line-height: 1.0 !important; margin-bottom: 15px !important; }
    .hero-content h2 { font-size: 14px !important; letter-spacing: 2px !important; margin-bottom: 10px !important; }
    .hero-content h3 { font-size: 20px !important; margin-bottom: 0 !important; line-height: 1.3 !important; } 


    


    /* 2. ABOUT SECTION (1 PHOTO UNIQUEMENT) */
    .about-image-2 { display: none !important; } /* On cache la 2ème photo */
    
    .about-image-1 img {
        max-height: 250px !important; width: 100% !important; object-fit: cover !important; border-radius: 8px !important;
    }
    .about-content-1 { margin-top: 30px !important; padding-right: 0 !important; text-align: center !important; }
    
    /* Badge recadré */
    .experience-badge { width: 90px !important; height: 90px !important; right: 10px !important; bottom: -20px !important; font-size: 10px !important; }
    .experience-badge span { font-size: 26px !important; }

    /* 3. AUTRES BOUTONS (About, Projets, Zone) - Taille adaptée */
    .about-section .btn, .project-section .btn, .zone-section .btn {
        width: auto !important; width: -moz-fit-content !important; width: fit-content !important;
        display: table !important; margin-left: auto !important; margin-right: auto !important;
        padding: 12px 30px !important; white-space: nowrap !important;
    }

    /* --- OPTIMISATION SLIDER PARTENAIRES (LOGOS PLUS GROS) --- */
    
    /* 1. On augmente la largeur de chaque case logo (de 140px à 220px) */
    .slide-item { 
        width: 220px !important; 
        padding: 0 15px !important; /* Un peu plus d'air sur les côtés */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 2. On laisse l'image prendre toute la place disponible dans sa case */
    .slide-item img {
        max-width: 100% !important;
        max-height: 100px !important; /* On bride la hauteur pour pas que les logos carrés soient énormes */
        object-fit: contain !important; /* Vital pour que le logo entier soit visible */
        transform: scale(1.1); /* Petit bonus : on les grossit artificiellement de 10% */
    }

    /* 3. On recalcule la longueur de la piste (Mathématiques obligatoires) */
    /* CORRECTION ICI POUR EVITER L'ERREUR DE WIDTH : max-content */
    .slider-track { 
        width: max-content !important; 
    } 

    /* 4. On ajuste l'animation pour qu'elle parcoure la bonne distance */
    /* On doit bouger de la moitié de la piste (6 logos * 220px = 1320px) */
    @keyframes scrollInfinite { 
        0% { transform: translateX(0); } 
        100% { transform: translateX(calc(-220px * 6)); } 
    }
}


/* --- OPTIMISATION PHOTOS RÉALISATIONS SUR MOBILE --- */
@media (max-width: 767px) {
    /* 1. On force une hauteur plus petite (180px au lieu de 250px) */
    .project-section .project .image img {
        height: 180px !important; 
        width: 100% !important;
        object-fit: cover !important; /* Coupe l'image proprement sans l'écraser */
    }

    /* 2. On réduit l'espace entre chaque projet (de 30px à 15px) */
    /* Cela permet d'enchaîner les projets plus vite */
    .project-section .col-12 {
        margin-bottom: 15px !important;
    }
    
    /* 3. Petit ajustement du titre pour qu'il colle bien à l'image */
    .project-section .project .content {
        padding-top: 10px !important;
    }
}

/* --- OPTIMISATION BOUTON "TOUTES LES RÉALISATIONS" (Mobile V3 - Version Stable) --- */
@media (max-width: 767px) {
    .project-section .btn {
        /* 1. On laisse le bouton définir sa propre largeur */
        width: auto !important; 
        
        /* 2. On lui donne de l'air (C'est ça qui le rend beau) */
        /* 15px en Haut/Bas (Hauteur) | 30px Gauche/Droite (Largeur) */
        padding: 15px 30px !important; 
        
        /* 3. Centrage parfait */
        display: table !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        
        /* 4. Texte : On autorise 2 lignes si besoin, mais proprement */
        white-space: normal !important; 
        text-align: center !important;
        line-height: 1.2 !important;
        
        /* Sécurité pour ne pas qu'il touche les bords de l'écran */
        max-width: 90% !important; 
    }
}


/* GHOST CSS TEMPORAIRE
* { outline: 1px solid red !important; }
body { overflow-x: hidden; } /* */








/* --- OPTIMISATION FEATURES (Blocs Satisfaction, Qualité...) SUR MOBILE --- */
@media (max-width: 767px) {
    /* 1. On réduit l'espace entre les blocs (de 30px à 15px) */
    .feature-section .col-12 {
        margin-bottom: 15px !important;
    }

    /* 2. On compacte l'intérieur de la carte */
    .feature {
        padding: 25px 20px !important; /* Beaucoup moins de vide qu'avant (40px) */
        display: flex !important;      /* Optionnel : alignement icone/texte */
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* 3. On réduit l'icône */
    .feature .icon img {
        max-width: 50px !important; /* Plus petit, plus mignon */
        margin-bottom: 15px !important;
    }

    /* 4. On ajuste les titres et textes */
    .feature h3 {
        font-size: 18px !important; /* Titre plus compact */
        margin-bottom: 10px !important;
    }
    .feature p {
        font-size: 14px !important; /* Texte lisible mais discret */
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
    }
}

/* --- OPTIMISATION PRESTATIONS (Images Panoramiques) --- */
@media (max-width: 767px) {
    /* 1. On contraint la hauteur de l'image pour qu'elle ne mange pas tout l'écran */
    .service-inner .image img {
        height: 180px !important; /* Hauteur fixe compacte */
        width: 100% !important;
        object-fit: cover !important; /* Coupe l'image proprement sans la déformer */
    }

    /* 2. On réduit le padding du texte en dessous */
    .service-inner .content {
        padding: 20px 15px !important; /* Moins de blanc autour du texte */
    }

    /* 3. On ajuste la taille du titre */
    .service-inner h3 {
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }

    /* 4. On réduit un peu l'espace entre chaque carte service */
    .service-section .col-lg-4 {
        margin-bottom: 20px !important;
    }
}

/* --- OPTIMISATION CHIFFRES CLÉS (FUNFACT) SUR MOBILE - V2 GRID LOCK --- */
@media (max-width: 767px) {
    
    /* 1. Structure de grille rigide */
    .funfact-section .col-6 {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 20px !important; /* Espace vertical entre les lignes */
        
        /* On force le contenu à s'aligner en haut */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* 2. IMAGE (ICÔNE) : Hauteur réservée fixe */
    /* Astuce : Cela garantit que tous les chiffres commencent au même niveau */
    .funfact-section img {
        height: 35px !important; /* Hauteur imposée */
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain;
        margin-bottom: 10px !important;
    }

    /* 3. CHIFFRES : Normalisés */
    .funfact-section h1,
    .funfact-section h1 span,
    .funfact-section .counter {
        font-size: 28px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        margin-bottom: 5px !important;
        
        /* Centrage du bloc chiffre */
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 4px;
    }

    /* 4. TITRES : Hauteur minimale imposée (Le secret de l'alignement) */
    /* On réserve de la place pour 2 lignes de texte partout */
    .funfact-section h4 {
        font-size: 11px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        margin-top: 0 !important;
        
        /* C'est ICI que ça se joue : */
        min-height: 30px !important; /* Force tous les titres à avoir la même hauteur */
        display: flex;
        align-items: flex-start; /* Aligne le texte en haut de sa boîte */
        justify-content: center;
    }
    
    /* 5. Nettoyage des marges parasites */
    .funfact-section .single-fact {
        margin-bottom: 0 !important;
    }
}

/* --- OPTIMISATION ÉQUIPE (PORTRAITS COMPACTS V2) SUR MOBILE --- */
@media (max-width: 767px) {
    
    /* 1. La Photo : Encore plus petite (260px) pour gagner du scroll */
    .team-section .team-2 .image {
        height: 260px !important; /* Avant 320px, on gagne 60px par personne ! */
        margin-bottom: 10px !important; 
    }

    /* 2. Cadrage : Toujours focus visage */
    .team-section .team-2 .image img {
        object-fit: cover !important;
        object-position: top center !important; 
    }

    /* 3. Le Texte : Collé à la photo */
    .team-section .team-2 .content {
        padding-top: 0 !important;
    }

    /* 4. Le Nom : Taille ajustée */
    .team-section .title {
        font-size: 20px !important; /* Un poil plus petit pour l'équilibre */
        margin-top: 0 !important;
        margin-bottom: 0px !important;
        line-height: 1.2 !important;
    }
    
    /* 5. Le Job */
    .team-section .team-2 .content span {
        font-size: 13px !important;
        display: block;
        margin-bottom: 5px !important;
    }

    /* 6. SÉPARATION : On garde l'espace entre les membres */
    .team-section .col-lg-4 {
        margin-bottom: 35px !important; 
    }
}


/* --- OPTIMISATION ZONE D'INTERVENTION (COMPACT NAVY) SUR MOBILE - V2 --- */
@media (max-width: 767px) {
    
    /* 1. On réduit drastiquement le padding vertical (de 100px à 50px) */
    .zone-section {
        padding: 50px 0 !important;
    }

    /* 2. Le Titre : Plus petit, plus fin */
    .zone-section h2 {
        font-size: 24px !important;
        margin-bottom: 20px !important;
        line-height: 1.2 !important;
    }

    /* 3. Les Chiffres (42 • 69...) : LIGNE UNIQUE GARANTIE */
    .zone-numbers {
        font-size: 22px !important;      /* Taille réduite pour que ça rentre */
        margin-bottom: 10px !important;
        letter-spacing: 0.5px !important; /* On serre un peu les caractères */
        white-space: nowrap !important;   /* Interdiction formelle de passer à la ligne */
    }
    
    /* On réduit les points de séparation et l'espace autour */
    .zone-numbers span {
        font-size: 16px !important; 
        margin: 0 4px !important;       /* Espace très serré */
        vertical-align: 1px !important; /* Petit ajustement optique */
    }

    /* 4. Le sous-texte (Départements) */
    .zone-section p {
        font-size: 12px !important;
        margin-bottom: 20px !important;
    }

    /* 5. Le petit séparateur jaune */
    .zone-sep {
        margin: 20px auto !important;
    }
    
    /* 6. Le texte descriptif final */
    .zone-section p:last-of-type {
        font-size: 15px !important;
        margin-bottom: 30px !important;
        line-height: 1.5 !important;
        padding: 0 10px !important;
    }
}

/* =================================================
   OPTIMISATION MENU BURGER (VUE COMPLÈTE SANS SCROLL)
   ================================================= */
@media (max-width: 767px) {
    
    /* 1. On remonte un peu le bloc menu global */
    .mean-container .mean-nav {
        margin-top: 40px !important; /* Colle plus haut au header */
    }

    /* 2. LE SECRET : On réduit l'épaisseur de chaque bouton */
    .mean-container .mean-nav ul li a {
        padding: 10px 5% !important; /* Avant c'était sûrement 15px ou 20px */
        font-size: 13px !important;  /* Un chouïa plus petit pour que ça rentre */
        line-height: 1.2 !important; /* On resserre les lignes */
        border-top: 1px solid rgba(0,0,0,0.05) !important; /* Séparation fine */
    }

    /* 3. On enlève les marges inutiles entre les items */
    .mean-container .mean-nav ul li {
        margin-bottom: 0 !important;
    }
}

/* =================================================
   FIX MENU MOBILE COMPACT (VUE 100% SANS SCROLL)
   ================================================= */
@media (max-width: 991px) {
    
    /* 1. On remonte le bloc menu pour qu'il colle bien en haut */
    .mean-container .mean-nav {
        margin-top: 0 !important; 
        background: #ffffff !important;
    }

    /* 2. LE RÉGIME : On réduit drastiquement l'épaisseur de chaque ligne */
    .mean-container .mean-nav ul li a {
        padding: 10px 5% !important; /* C'est ici que ça se joue (10px au lieu de 1em) */
        font-size: 13px !important;  /* Texte un peu plus petit et élégant */
        line-height: 1 !important;   /* On empêche le texte de prendre de la hauteur inutile */
        border-top: 1px solid rgba(0,0,0,0.05) !important; /* Séparateur très fin */
        margin: 0 !important;
    }

    /* 3. On tue les marges parasites des conteneurs */
    .mean-container .mean-nav ul li {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    
    /* 4. Sécurité pour le dernier élément */
    .mean-container .mean-nav ul li:last-child {
        padding-bottom: 10px !important;
        border-bottom: none !important;
    }
}


/* ============================================================
   FIX HERO MOBILE - VERSION "RETOUR AUX SOURCES" (Code Monolithe)
   ============================================================ */
@media (max-width: 767px) {
    .hero-content .btn {
        /* 1. POSITIONNEMENT ABSOLU */
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;

        /* 2. PLACEMENT VERTICAL */
        bottom: -80px !important;

        /* 3. DIMENSIONS & STYLE */
        display: table !important;
        width: auto !important;
        white-space: nowrap !important;

        /* 4. ESTHÉTIQUE */
        padding: 12px 25px !important;
        font-size: 14px !important;

        /* 5. VISIBILITÉ */
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 999 !important;
    }

    .hero-content {
        overflow: visible !important;
    }
}

/* ============================================================
   FIX BOUTON "ENVOYER MA DEMANDE" - PAGE CONTACT MOBILE
   ============================================================ 
   
   PROBLÈME : Le texte du bouton dépasse sur mobile
   SOLUTION : Réduction du padding + autorisation du retour à la ligne
   
   INSTRUCTIONS D'INSTALLATION :
   1. Ouvre ton fichier vibe-style.css
   2. Va tout en bas du fichier (après la dernière ligne de code)
   3. Copie-colle ce bloc CSS complet
   4. Sauvegarde le fichier
   5. Actualise ta page contact.html sur mobile
   ============================================================ */

/* ============================================================
   FIX BOUTON CONTACT MOBILE - VERSION 2 (COPIE DU BOUTON PRESTATIONS)
   ============================================================ 
   
   STRATÉGIE : On réplique exactement le comportement du bouton
   "Demander un chiffrage" de prestations.html qui fonctionne parfaitement.
   
   INSTRUCTIONS :
   1. Supprime l'ancien fix (lignes avec .contact-form .btn si présentes)
   2. Colle ce nouveau code à la place (ou à la fin de vibe-style.css)
   3. Sauvegarde
   4. Teste sur mobile
   ============================================================ */

/* --- FIX BOUTON CONTACT MOBILE (COPIE PRESTATIONS) --- */
@media (max-width: 767px) {
    
    /* On cible le bouton du formulaire contact */
    .contact-form .btn,
    .contact-form button.btn {
        
        /* COPIE EXACTE DES RÈGLES QUI MARCHENT (ligne 1171 du CSS) */
        width: auto !important; 
        width: -moz-fit-content !important; 
        width: fit-content !important;
        
        display: table !important; 
        margin-left: auto !important; 
        margin-right: auto !important;
        
        padding: 12px 30px !important; 
        white-space: nowrap !important;
        
        /* Bonus : On réduit légèrement la taille de police pour que ça rentre */
        font-size: 13px !important;
        
        /* On s'assure que le bouton ne dépasse pas de l'écran */
        max-width: 90% !important;
    }
}

/* --- FIX MOBILE BOUTON CONTACT (VERSION FINALE BLEU CENTRÉ) --- */
@media (max-width: 767px) {
    
    .contact-form .btn,
    .contact-form button.btn {
        
        /* COULEURS BLEUES */
        background-color: #005BBB !important;
        color: #ffffff !important;
        border: 2px solid #005BBB !important;
        
        /* DIMENSIONS & CENTRAGE */
        width: auto !important;
        max-width: 90% !important;
        
        /* AFFICHAGE BLOC CENTRÉ */
        display: block !important;
        margin: 0 auto !important;
        
        /* PADDING & TAILLE */
        padding: 12px 30px !important;
        font-size: 13px !important;
        
        /* LIGNE UNIQUE */
        white-space: nowrap !important;
        text-align: center !important;
    }
}

/* ============================================================
   ICÔNES MODERNES CONTACT - RESPONSIVE
   ============================================================ */

/* Icônes modernes (desktop) */
.icon-modern {
    transition: transform 0.3s ease;
}

.icon-modern:hover {
    transform: scale(1.1);
}

/* Responsive mobile : on réduit la taille des icônes */
@media (max-width: 767px) {
    .icon-modern {
        width: 45px !important;
        height: 45px !important;
    }
    
    .icon-modern svg {
        width: 30px !important;
        height: 30px !important;
    }
}

/* ============================================================
   STYLES COMPLÉMENTAIRES POUR LA PAGE RÉALISATIONS
   À ajouter à la fin de vibe-style.css
   ============================================================ */

/* --- FILTRE CATÉGORIES --- */
.project-filter {
    margin-bottom: 50px;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.filter-btn {
    background: transparent;
    border: 2px solid #e0e0e0;
    color: #333333;
    padding: 10px 25px;
    margin: 5px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: #005BBB;
    color: #005BBB;
    transform: translateY(-2px);
}

.filter-btn.active {
    background-color: #005BBB;
    border-color: #005BBB;
    color: #ffffff;
}

/* --- DESCRIPTION PROJETS --- */
.project .project-description {
    font-size: 14px;
    line-height: 1.6;
    color: #666666;
    margin-top: 10px;
    margin-bottom: 0;
}

/* --- RESPONSIVE FILTRES --- */
@media (max-width: 767px) {
    .project-filter {
        padding: 15px 10px;
    }
    
    .filter-btn {
        padding: 8px 15px;
        font-size: 11px;
        margin: 3px;
        display: inline-block;
    }
}

/* --- PAGE BANNER SPÉCIFIQUE --- */
.page-banner-section {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.page-banner-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 91, 187, 0.85) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

.page-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
}

.page-banner-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
}

.page-banner-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 16px;
}

.page-banner-content ul li {
    display: inline-block;
}

.page-banner-content ul li a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.page-banner-content ul li a:hover {
    color: #FFDE00;
}

.page-banner-content ul li:not(:last-child)::after {
    content: "/";
    margin-left: 15px;
    color: #ffffff;
    opacity: 0.7;
}

/* RESPONSIVE PAGE BANNER */
@media (max-width: 767px) {
    .page-banner-section {
        height: 150px;
    }
    
    .page-banner-content h1 {
        font-size: 32px;
        margin-bottom: 15px;
    }
    
    .page-banner-content ul {
        font-size: 13px;
        gap: 10px;
    }
    
    .page-banner-content ul li:not(:last-child)::after {
        margin-left: 10px;
    }
}

/* --- OPTIMISATION DESCRIPTIONS SUR MOBILE --- */
@media (max-width: 767px) {
    .project .project-description {
        font-size: 13px;
        line-height: 1.5;
        margin-top: 8px;
    }
}

/* ============================================================
   ANIMATION 3 : FLIP CARDS
   ============================================================ */

/* Les projets sont invisibles et retournés */
.project-section .project {
    opacity: 0;
    transform: perspective(1000px) rotateY(-90deg) rotateX(15deg);
    transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Quand visible : ils se retournent face à nous */
.project-section.is-visible .project {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

/* CASCADE avec un peu plus d'écart pour l'effet spectacle */
.project-section.is-visible .col-lg-4:nth-child(1) .project { transition-delay: 0s; }
.project-section.is-visible .col-lg-4:nth-child(2) .project { transition-delay: 0.12s; }
.project-section.is-visible .col-lg-4:nth-child(3) .project { transition-delay: 0.24s; }
.project-section.is-visible .col-lg-4:nth-child(4) .project { transition-delay: 0.36s; }
.project-section.is-visible .col-lg-4:nth-child(5) .project { transition-delay: 0.48s; }
.project-section.is-visible .col-lg-4:nth-child(6) .project { transition-delay: 0.6s; }
.project-section.is-visible .col-lg-4:nth-child(7) .project { transition-delay: 0.72s; }
.project-section.is-visible .col-lg-4:nth-child(8) .project { transition-delay: 0.84s; }
.project-section.is-visible .col-lg-4:nth-child(9) .project { transition-delay: 0.96s; }
.project-section.is-visible .col-lg-4:nth-child(10) .project { transition-delay: 1.08s; }
.project-section.is-visible .col-lg-4:nth-child(11) .project { transition-delay: 1.2s; }
.project-section.is-visible .col-lg-4:nth-child(12) .project { transition-delay: 1.32s; }

/* Petit bonus : on garde un léger effet 3D au survol */
.project-section .project:hover {
    transform: perspective(1000px) translateZ(10px) !important;
}

/* ============================================================
   FIX TITRES PAGES INTERNES (RETOUR AU STYLE BLANC)
   ============================================================ */

/* Force le Titre H1 en Blanc + Ombre (Comme sur l'accueil) */
.page-banner-content h1 {
    color: #ffffff !important;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.9), 0 5px 15px rgba(0, 0, 0, 0.6) !important;
    font-weight: 700 !important;
}

/* Force les liens (Fil d'Ariane) en Blanc */
.page-banner-content ul li,
.page-banner-content ul li a {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; /* Petite ombre pour la lisibilité */
}

.page-banner-content ul li a:hover {
    color: #FFDE00 !important; /* Jaune au survol */
}

/* ============================================================
   LABELS DE CONFIANCE - MODE GALERIE XXL V3 (FIX FINAL)
   ============================================================ */

/* RESET COMPLET : On écrase TOUS les héritages .feature */
.feature-logo-showcase {
    background-color: #ffffff !important;
    padding: 25px 20px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    height: 100% !important;
    border: 2px solid transparent !important;
    position: relative;
    overflow: hidden;
    
    /* FORCE L'EMPILEMENT VERTICAL */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.feature-logo-showcase:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 20px 50px rgba(0,91,187,0.12) !important;
    border-color: #005BBB !important;
}

/* Zone logo GÉANTE - STRUCTURE VERTICALE FORCÉE */
.feature-logo-showcase .icon-logo-xl {
    height: 140px !important;
    width: 100% !important; /* NOUVEAU : Prend toute la largeur */
    display: flex !important;
    flex-direction: column !important; /* VERTICAL */
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
    position: relative;
    
    /* ÉCRASE L'ANCIEN CSS .feature .icon */
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* LOGOS UNIFORMES - TAILLE FIXE */
.feature-logo-showcase .icon-logo-xl img {
    height: 160px !important; /* HAUTEUR FIXE */
    width: auto !important;
    max-width: 90% !important;
    object-fit: contain !important;
    transition: all 0.4s ease !important;
    display: block !important;
    margin: 0 auto !important; /* CENTRAGE FORCÉ */
}

/* Effet au survol */
.feature-logo-showcase:hover .icon-logo-xl img {
    transform: scale(1.08) !important;
}

/* Contenu textuel - EN DESSOUS DU LOGO */
.feature-logo-showcase .content-minimal {
    padding-top: 10px !important;
    text-align: center !important;
    width: 100% !important; /* NOUVEAU : Prend toute la largeur */
}

.feature-logo-showcase .content-minimal h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
    transition: color 0.3s ease !important;
}

.feature-logo-showcase:hover .content-minimal h3 {
    color: #005BBB !important;
}

/* Tagline */
.feature-logo-showcase .label-tagline {
    font-size: 13px !important;
    color: #888888 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    font-style: italic;
}

/* Animation d'apparition cascade */
.feature-logo-showcase {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}

.feature-section.is-visible .col-lg-3:nth-child(1) .feature-logo-showcase {
    animation: logoReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s forwards;
}
.feature-section.is-visible .col-lg-3:nth-child(2) .feature-logo-showcase {
    animation: logoReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s forwards;
}
.feature-section.is-visible .col-lg-3:nth-child(3) .feature-logo-showcase {
    animation: logoReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}
.feature-section.is-visible .col-lg-3:nth-child(4) .feature-logo-showcase {
    animation: logoReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.45s forwards;
}

@keyframes logoReveal {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* RESPONSIVE MOBILE */
@media (max-width: 767px) {
    .feature-logo-showcase {
        padding: 8px 6px 8px !important; /* ← ULTRA COMPACT */
        margin-bottom: 10px !important;
    }
    
    .feature-logo-showcase .icon-logo-xl {
        height: 85px !important; /* ← Zone logo réduite au max */
        margin-bottom: 8px !important; /* ← Espace mini entre logo et titre */
    }
    
    .feature-logo-showcase .icon-logo-xl img {
        height: 75px !important; /* ← Logo bien visible mais compact */
    }
    
    .feature-logo-showcase .content-minimal {
        padding-top: 0 !important; /* ← Texte collé au logo */
    }
    
    .feature-logo-showcase .content-minimal h3 {
        font-size: 15px !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }
    
    .feature-logo-showcase .label-tagline {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }
}

/* ============================================================
   GRILLE PARTENAIRES STATIQUE - VERSION COULEUR NATURELLE
   ============================================================ */

/* Titres de catégories */
.partner-category-title {
    font-family: 'Arial', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #005BBB;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding-bottom: 10px;
    border-bottom: 3px solid #FFDE00;
    display: inline-block;
    margin-bottom: 0;
}

/* Grille des logos */
.partner-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Chaque case de logo */
.partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    min-height: 120px;
}

/* Les images (COULEUR NATURELLE - AUCUN FILTRE) */
.partner-item img {
    height: 70px !important;        /* ← HAUTEUR FIXE (au lieu de max-height) */
    width: auto !important;         /* ← Largeur automatique pour garder le ratio */
    max-width: 100%;
    object-fit: contain;
    
    /* CENTRAGE HORIZONTAL FORCÉ */
    display: block !important;      /* ← NOUVEAU : Force l'image à être un bloc */
    margin: 0 auto !important;      /* ← NOUVEAU : Centre l'image */
    
    /* AUCUN FILTRE - Logos en couleur */
    filter: none;
    opacity: 1;
    
    /* Animation fluide au survol uniquement */
    transition: transform 0.3s ease;
}

/* HOVER : Léger zoom uniquement */
.partner-item img:hover {
    transform: scale(1.1);
}

/* RESPONSIVE MOBILE */
@media (max-width: 767px) {
    .partner-category-title {
        font-size: 16px;
        letter-spacing: 1px;
        text-align: center;
        display: block;
        margin-bottom: 0;
    }
    
    .partner-item {
        padding: 15px 10px;
        min-height: 100px;
    }
    
    .partner-item img {
        max-height: 55px;
    }
}

/* ============================================================
   ANIMATION 3 : ELASTIC POP (VERSION CATÉGORIE PAR CATÉGORIE)
   ============================================================ */

/* Les logos sont complètement invisibles par défaut */
.partner-category .partner-item {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Quand UNE catégorie devient visible : Effet ballon qui se gonfle */
.partner-category.is-visible .partner-item {
    animation: elasticPop 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Délais en cascade */
.partner-category.is-visible .partner-item:nth-child(1) { animation-delay: 0s; }
.partner-category.is-visible .partner-item:nth-child(2) { animation-delay: 0.1s; }
.partner-category.is-visible .partner-item:nth-child(3) { animation-delay: 0.2s; }
.partner-category.is-visible .partner-item:nth-child(4) { animation-delay: 0.3s; }
.partner-category.is-visible .partner-item:nth-child(5) { animation-delay: 0.4s; }
.partner-category.is-visible .partner-item:nth-child(6) { animation-delay: 0.5s; }

@keyframes elasticPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }
    50% {
        transform: scale(1.15) rotate(5deg); /* Overshoot élastique */
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* =========================================
   FIX TITRES CATÉGORIES PARTENAIRES (TAILLE & MARGE RÉDUITES)
   ========================================= */
.partner-category-title {
    /* 1. Taille Desktop : On réduit pour plus de finesse */
    font-size: 22px !important; /* AVANT : 30px */
    
    /* 2. Graisse & Style */
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* 3. Couleur */
    color: #005BBB !important;   
    
    /* 4. Espacement AJUSTÉ */
    margin-bottom: 15px !important; /* AVANT : 30px -> On rapproche les logos */
    margin-top: 60px !important;
    position: relative;
    display: inline-block;
}

/* Petit bonus Vibe : Un soulignement jaune discret */
.partner-category-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: #FFDE00; /* Jaune TBS */
    margin-top: 10px;
}

/* =========================================
   RESPONSIVE (MOBILE)
   ========================================= */
@media (max-width: 767px) {
    .partner-category-title {
        /* On réduit un peu sur mobile pour ne pas casser l'écran */
        font-size: 24px !important; 
        margin-bottom: 20px !important;
    }
}

/* ============================================================
   RESPONSIVE PAGE ENGAGEMENTS - MOBILE < 768px
   À ajouter à la fin de vibe-style.css
   ============================================================ */

@media (max-width: 767px) {
    
    /* =========================================
       1. RÉDUCTION DES MARGES VERTICALES DES SECTIONS
       ========================================= */
    
    /* Section Habitat Sain */
    .service-detail-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
    
    /* Section Labels de Confiance (Fond Gris) */
    .feature-section {
        padding-top: 50px !important;
        padding-bottom: 40px !important;
    }
    
    /* Section Partenaires */
    .partner-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
    
    /* Section Zone d'Intervention (Déjà gérée dans vibe-style.css) */
    /* Pas de modification nécessaire */
    
    
    /* =========================================
       2. TITRES PRINCIPAUX (H1, H2)
       ========================================= */
    
    /* Titres H1 (Section-title) */
    .section-title h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }
    
    /* Titres H2 (Habitat Sain & Durable) */
    .service-detail-content h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
    }
    
    /* Paragraphe lead (texte en couleur) */
    .service-detail-content .lead {
        font-size: 16px !important;
        margin-bottom: 15px !important;
    }
    
    /* Paragraphes normaux */
    .service-detail-content p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }
    
    /* Liste à puces */
    .service-detail-content .service-list {
        margin-top: 15px !important;
        padding-left: 20px !important;
    }
    
    .service-detail-content .service-list li {
        font-size: 14px !important;
        margin-bottom: 10px !important;
        line-height: 1.5 !important;
    }
    
    
    /* =========================================
       3. IMAGE HABITAT SAIN
       ========================================= */
    
    .service-image-container {
        margin-bottom: 30px !important;
    }
    
    .service-image-container img {
        max-height: 250px !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    
    
    /* =========================================
       4. SECTION LABELS DE CONFIANCE
       ========================================= */
    
    /* Espacement entre les cartes */
    .feature-section .col-lg-3 {
        margin-bottom: 20px !important;
    }
    
    /* Dernière carte : pas de marge en bas */
    .feature-section .col-lg-3:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Cartes Labels - Padding réduit */
    .feature-logo-showcase {
        padding: 30px 20px 25px !important;
    }
    
    /* Zone logo - Hauteur réduite */
    .feature-logo-showcase .icon-logo-xl {
        height: 90px !important;
        margin-bottom: 20px !important;
    }
    
    /* Logos - Taille adaptée mobile */
    .feature-logo-showcase .icon-logo-xl img {
        height: 90px !important;
    }
    
    /* Titre du label */
    .feature-logo-showcase .content-minimal h3 {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }
    
    /* Tagline */
    .feature-logo-showcase .label-tagline {
        font-size: 12px !important;
    }
    
    
    /* =========================================
       5. SECTION PARTENAIRES
       ========================================= */
    
    /* Titre principal "Nos Partenaires Industriels" */
    .partner-section .section-title h1 {
        font-size: 26px !important;
        margin-bottom: 15px !important;
    }
    
    .partner-section .section-title p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* Titres de catégories */
    .partner-category-title {
        font-size: 18px !important;
        letter-spacing: 1px !important;
        text-align: center !important;
        display: block !important;
        margin-top: 40px !important; /* Réduit de 60px */
        margin-bottom: 20px !important;
    }
    
    /* Barre jaune sous le titre */
    .partner-category-title::after {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* =========================================
       ⭐ GRILLE PARTENAIRES : 2 COLONNES SUR MOBILE
       ========================================= */
    
    /* IMPORTANT : On force 2 colonnes (col-6) pour tous les logos */
    .partner-grid .partner-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 8px 10px !important;
        min-height: 80px !important;
    }
    
    /* Logos partenaires - Taille adaptée */
    .partner-item img {
        height: 55px !important; /* Réduit de 70px */
        max-width: 100% !important;
    }
    
    /* Espacement entre les catégories */
    .partner-category {
        margin-bottom: 25px !important;
    }
    
    /* Dernière catégorie : moins d'espace */
    .partner-section .partner-category:last-of-type {
        margin-bottom: 20px !important;
    }
    
    
    /* =========================================
       6. SECTION ZONE D'INTERVENTION (Déjà gérée)
       ========================================= */
    
    /* Rien à ajouter - Le code existant dans vibe-style.css 
       gère déjà parfaitement cette section sur mobile */
    
    
    /* =========================================
       7. AJUSTEMENTS TEXTE & ESPACEMENT
       ========================================= */
    
    /* Espacement entre les sections (mb-60) */
    .row.mb-60 {
        margin-bottom: 30px !important;
    }
    
    /* Espacement entre les rangées (mb-50) */
    .row.mb-50 {
        margin-bottom: 20px !important;
    }
    
    /* Conteneur principal */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
}

/* ============================================================
   FIN DU CODE RESPONSIVE ENGAGEMENTS
   ============================================================ */


   /* =========================================
   LISTE "HABITAT SAIN" (STYLE FEUILLE 🌿)
   ========================================= */
.service-list {
    list-style: none !important; /* On supprime les points noirs moches */
    padding-left: 0 !important;
    margin-top: 25px !important;
}

.service-list li {
    position: relative !important;
    padding-left: 45px !important; /* On laisse de la place pour la feuille */
    margin-bottom: 15px !important;
    font-size: 16px !important;
    font-weight: 600 !important; /* Texte un peu plus gras pour l'importance */
    color: #333333 !important;
    line-height: 1.6 !important;
}

/* Création de la puce "Feuille" - ALIGNEMENT CORRIGÉ */
.service-list li::before {
    content: "🌿"; 
    position: absolute !important;
    left: 0 !important;
    
    /* 👇 LE RÉGLAGE DE PRÉCISION EST ICI 👇 */
    /* On le remonte légèrement avec du négatif pour compenser sa taille */
    top: -4px !important; 
    
    /* On s'assure qu'il ne déforme pas la ligne */
    line-height: 1 !important; 
    
    font-size: 24px !important; 
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
    transition: transform 0.3s ease;
}

/* Micro-interaction : la feuille bouge quand on passe la souris sur le texte */
.service-list li:hover::before {
    transform: scale(1.2) rotate(10deg);
}