/*
Theme Name: IBAIX Theme (Enfant)
Template: hello-elementor
Version: 1.3.1 (Refactor Corrected - Stable)
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');


/* ==========================================================================
   1 | SETTINGS (VARIABLES)
   ========================================================================== */

:root {
    /* --- 1. COULEURS DE MARQUE (BRAND) --- */
    --primary: #0D3654;
    --primary-dark: #072338;  /* Ajout : Pour les dégradés profonds */
    --accent: #3295BD;
    --accent-light: #E0F2FE;  /* Ajout : Pour textes sur fond sombre et anneaux */
    --brand-orange: #e67e22;  /* Ajout : Pour les badges "Dossier Expert" */

    /* --- 2. TEXTES (TYPOGRAPHY) --- */
    --text-main: #1E293B;
    --text-muted: #64748B;
    --text-meta: #94A3B8;     /* Ajout : Pour les dates et métadonnées */
    
    /* --- 3. SURFACES & FONDS (BACKGROUNDS) --- */
    --surface: #F8FAFC;       /* Gris très clair standard */
    --surface-blue: #F0F9FF;  /* Ajout : Fond bleu très pâle (Menus actifs, box avantages) */
    --input-bg: #F1F5F9;

    /* --- 4. ÉTATS & ALERTES (STATUS) --- */
    /* SUCCÈS (Verts) */
    --success: #10B981;
    --success-bg: #F0FDF4;    /* Ajout : Fond des blocs solutions/bénéfices */
    --success-dark: #166534;  /* Ajout : Texte vert foncé */

    /* ERREUR (Rouges) */
    --error: #EF4444;
    --error-bg: #FEF2F2;      /* Ajout : Fond des blocs problèmes/erreurs */
    --error-dark: #991B1B;    /* Ajout : Texte rouge foncé urgence */

    /* AVERTISSEMENT (Jaunes) */
    --warning: #F4B400;       /* Ajout : Étoiles avis Google */

    /* --- 5. BORDURES & OMBRES (UI) --- */
    --border: #E2E8F0;
    --border-light: #CBD5E1;  /* Ajout : Séparateurs discrets */
    --shadow-deep: 0 25px 50px -12px rgba(13, 54, 84, 0.15);

    /* --- 6. FOOTER --- */
    --footer-bg: #0D3654;
    --footer-text: #E2E8F0;
    --footer-border: rgba(226, 232, 240, 0.1);
}

/* ==========================================================================
   2 | GENERIC (RESET, BASE & SCROLL FIXES)
   ========================================================================== */

/* Gestion Globale & Scroll */
html, body {
    margin: 0; padding: 0;
    width: 100%; 
    overflow-x: clip !important; /* Méthode moderne anti-décalage */
    font-family: 'Inter', sans-serif;
    background-color: var(--surface);
    color: var(--text-main);
    line-height: 1.6;
    scroll-behavior: smooth;
}

/* Visibilité pour Sticky Elements */
#page, .site-wrapper, .site-main, .elementor-section-wrap, .elementor-template-canvas, .page-content, .glossaire-page-wrapper {
    overflow: visible !important; 
}

/* Compensation Header Fixe */
body { padding-top: 100px; }

.glossaire-page-wrapper {
    height: auto !important;
    min-height: 100vh;
    display: block !important; }

/* Reset Base */
* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { color: var(--primary); margin-top: 0; }

.bg-white {
    background-color: white;
}

.bg-surface {
    background-color: var(--surface) /* Force le gris clair */ }

@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 3. Effet "Pulse" blanc discret pour attirer l'œil (Optionnel mais recommandé pour la conversion) */
@keyframes subtlePulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes pulse-shadow {
    0% { box-shadow: 0 0 0 0 rgba(13, 54, 84, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(13, 54, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(13, 54, 84, 0); }
}

@keyframes bounceIn { 0% { transform: scale(0.3); } 100% { transform: scale(1); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes scanning { 
    0% { left: -100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } 
}
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }


/* ==========================================================================
   3 | OBJECTS (LAYOUT, WRAPPERS & FULL WIDTH FIXES)
   ========================================================================== */

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.page-content { padding: 80px 20px; }

/* Layouts Spécifiques */
.guide-layout { 
    display: grid; 
    grid-template-columns: 1fr 320px; 
    gap: 60px; 
    padding-bottom: 80px; 
}

.footer-grid { 
    display: grid; 
    grid-template-columns: 1.2fr 0.8fr 1fr 1fr; 
    gap: 40px; 
    margin-bottom: 60px; 
}


/* ==========================================================================
   4 | COMPONENTS : HEADER & NAVIGATION
   ========================================================================== */

/* --- A. FIL D'ARIANE (RANKMATH) --- [ANIMATION SURLIGNAGE] */
.rank-math-breadcrumb { max-width: 1200px; margin: 0 auto 20px; padding: 0 20px; width: 100%; box-sizing: border-box; text-align: left; font-size: 0.85rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.8); }
.rank-math-breadcrumb p { margin: 0; color: rgba(255, 255, 255, 0.8); }
.rank-math-breadcrumb a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s ease; position: relative; display: inline-block; }
.rank-math-breadcrumb a::after { content: ''; position: absolute; width: 0%; height: 1px; bottom: 2px; left: 0; background-color: white; transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.rank-math-breadcrumb a:hover { color: white; }
.rank-math-breadcrumb a:hover::after { width: 100%; }
.rank-math-breadcrumb .separator { margin: 0 8px; color: rgba(255, 255, 255, 0.4); }
.rank-math-breadcrumb .last { color: white; font-weight: 700; }

/* --- B. HEADER STRUCTURE --- */
.ibaix-header {
    background: white;
    border-bottom: 1px solid var(--border);
    position: fixed; 
    top: 0; left: 0; right: 0;
    width: 100%; height: 100px; 
    z-index: 9999;
    display: flex; align-items: center;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, box-shadow 0.4s ease;
    will-change: height; 
}

/* État Scrolled */
.ibaix-header.scrolled {
    height: 70px;
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.header-container {
    width: 100%; height: 100%;
    display: flex; align-items: center; padding: 0 40px;
}

.logo-area { flex: 1; display: flex; align-items: center; }
.nav-area { flex: 2; display: flex; justify-content: center; align-items: center; height: 100%; }
.actions-area { flex: 1; display: flex; justify-content: flex-end; align-items: center; }

/* Logo */
.logo img { 
    height: 55px !important; width: auto !important; 
    transition: 0.5s !important; display: block; margin: 0;
}
.ibaix-header.scrolled .logo img { height: 40px !important; }

/* Navigation Desktop */
.mobile-menu-header { display: none; }

.nav-wrapper { height: 100%; display: flex; align-items: center; }
.main-nav { display: flex; gap: 30px; align-items: center; margin: 0; padding: 0; height: 100%; }
.main-nav > li { list-style: none; position: relative; height: 100%; display: flex; align-items: center; }

.main-nav > li > a { 
    font-weight: 600; font-size: 0.95rem; color: var(--text-main); 
    padding: 0 5px; line-height: 1 !important; text-decoration: none;
    transition: color 0.3s ease; display: flex; align-items: center; gap: 8px; 
}

/* --- C. MENU ACTIF & SURVOL --- */
.main-nav > li.current-menu-item > a,
.main-nav > li.current-menu-ancestor > a,
.main-nav > li.current_page_item > a {
    color: var(--accent) !important;
}

/* Indicateur (Barre Bleue) sous l'item actif - DESKTOP UNIQUEMENT */
@media (min-width: 993px) {
    .main-nav > li.current-menu-item > a::before,
    .main-nav > li.current-menu-ancestor > a::before {
        content: '';
        position: absolute;
        bottom: 25px; /* Position Header 100px */
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 3px;
        background-color: var(--accent);
        border-radius: 2px;
        transition: bottom 0.3s ease;
    }

    /* Ajustement Barre Bleue quand Header Scrolled (70px) */
    .ibaix-header.scrolled .main-nav > li.current-menu-item > a::before,
    .ibaix-header.scrolled .main-nav > li.current-menu-ancestor > a::before {
        bottom: 12px; }
    .filters-list { justify-content: center; }
    .scroll-fade-left, .scroll-fade-right { display: none; }
}

/* --- D. SOUS-MENU DESKTOP --- */
@media (min-width: 993px) {
    .mobile-submenu-toggle, .main-nav > li > a i, .main-nav > li > a svg { display: none !important; }
    
    /* Flèche Dropdown (Animation Corrigée) */
    .main-nav > li.menu-dropdown > a::after {
        content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
        font-size: 0.9em; color: var(--primary);
        display: inline-block; margin-top: 2px;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease; 
    }
    
    .main-nav > li:hover > a { color: var(--accent); }
    .main-nav > li.menu-dropdown:hover > a::after { transform: rotate(180deg); color: var(--accent); }

    /* Dropdown Panel */
    .sub-menu {
        position: absolute; top: 100%; left: 0;
        background: white; min-width: 260px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1); 
        border: 1px solid var(--border); border-top: 3px solid var(--accent);
        opacity: 0; visibility: hidden; transform: translateY(10px);
        transition: all 0.2s ease; z-index: 1001; 
        padding: 10px 0; border-radius: 0 0 8px 8px; display: block; 
    }
    .main-nav li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
}

.sub-menu li { display: block; width: 100%; }
.sub-menu li a { display: block; padding: 12px 25px; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; width: 100%; }

/* État Actif/Survol Sous-menu */
.sub-menu li.current-menu-item > a,
.sub-menu li.current_page_item > a,
.sub-menu li.current-menu-ancestor > a,
.sub-menu li a:hover {
    background-color: var(--surface-blue); 
    color: var(--accent) !important; 
    padding-left: 30px; 
    font-weight: 700;
}

/* Bouton Header */
.ibaix-header .btn {
    padding: 10px 24px !important; 
    font-size: 0.9rem !important;  
    min-height: auto !important;   
}

/* ==========================================================================
   5 | COMPONENTS : UI ELEMENTS (BOUTONS, BADGES, TOOLTIPS)
   ========================================================================== */

.hero-standard { background-color: var(--primary); position: relative; padding: 20px 0 80px; overflow: hidden; text-align: center; color: white; margin-bottom: 0; }
.hero-standard .hero-bg-icons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.05; }
.hero-standard .icon-bg-1 { position: absolute; top: -30px; left: -30px; font-size: 10rem; }
.hero-standard .icon-bg-2 { position: absolute; bottom: -20px; right: -20px; font-size: 10rem; }
.hero-standard h1 { font-size: 3rem; font-weight: 800; margin-bottom: 15px; color: white !important; }
.hero-standard .hero-subtitle { color: var(--accent-light); font-size: 1.15rem; font-weight: 300; max-width: 700px; margin: 0 auto; line-height: 1.6; }
.hero-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0.6; z-index: 0; mix-blend-mode: overlay; }
.hero-overlay-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(13, 54, 84, 0.85) 0%, rgba(13, 54, 84, 0.95) 100%); z-index: 1; pointer-events: none; }
.hero-standard .container, .hero-standard .breadcrumbs-container { position: relative; z-index: 10 !important; }


/* --- A. BOUTONS --- */
.btn { 
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; 
    padding: 16px 32px; border-radius: 8px; font-weight: 700; cursor: pointer; 
    transition: 0.3s; border: none; text-decoration: none; 
}

.hero-action-group .btn-primary { animation: pulse-shadow 3s infinite; }

.btn-primary { 
    background: var(--primary); color: white !important; 
}
.btn-primary:hover { 
    background: var(--accent); transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}

.btn-secondary { 
    background: white; color: var(--primary); border: 1px solid var(--border); 
}
.btn-secondary:hover { 
    transform: translateY(-2px); border-color: var(--accent); color: var(--accent); 
}

/* Bouton Blanc (Utilisé sur fonds sombres) */
.btn-white {
    background: white; color: var(--primary) !important;
    padding: 18px 35px; border-radius: 50px; font-weight: 800;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.btn-white:hover { 
    transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,0.3); 
    background: var(--surface); 
}

/* Bouton Contour Blanc */
.btn-outline-white {
    background: transparent; color: white !important;
    border: 2px solid rgba(255,255,255,0.3);
    padding: 16px 35px; border-radius: 50px; font-weight: 700;
}
.btn-outline-white:hover { 
    border-color: white; background: rgba(255,255,255,0.1); transform: translateY(-3px); 
}

/* Bouton CTA Spécial Guides */
.guide-cta-btn {
    display: table; margin: 40px auto 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white !important; padding: 18px 45px; border-radius: 50px;
    font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: 0 10px 25px rgba(50, 149, 189, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative; overflow: hidden; text-decoration: none;
}
.guide-cta-btn:hover { 
    transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 35px rgba(50, 149, 189, 0.5); 
}
.guide-cta-btn::after {
    content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-left: 10px; transition: margin-left 0.3s;
}
.guide-cta-btn:hover::after { margin-left: 15px; }

/* --- B. BADGES --- */
/* Badge Standard */
.badge { 
    background: rgba(50, 149, 189, 0.1); color: var(--accent); 
    padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; 
    font-weight: 700; display: inline-block; margin-bottom: 20px; 
}


/* Badge Hero Premium */
.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--accent);
    padding: 6px 16px; 
    border-radius: 30px;
    font-size: 0.8rem; font-weight: 700; 
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 25px;
}


/* Badges de Réassurance (Home) */
.reassurance-badges {
    margin-top: 40px; display: flex; flex-wrap: wrap; gap: 25px; 
    font-size: 0.9rem; color: var(--text-muted); font-weight: 600;
}
.reassurance-badges span i { color: var(--success); margin-right: 8px; }

/* --- C. TOOLTIPS (Infobulle Téléphone) --- */
.phone-btn-wrapper { position: relative; display: inline-block; }

.phone-btn-wrapper::after {
    content: attr(data-tooltip);
    position: absolute; bottom: 125%; left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 280px; padding: 12px 15px;
    background-color: var(--primary); color: white;
    font-size: 0.85rem; line-height: 1.4; text-align: center; font-weight: 500;
    border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    opacity: 0; visibility: hidden; pointer-events: none; z-index: 100;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.phone-btn-wrapper::before {
    content: ''; position: absolute; bottom: 115%; left: 50%;
    transform: translateX(-50%) translateY(10px);
    border: 8px solid transparent; border-top-color: var(--primary);
    opacity: 0; visibility: hidden; z-index: 100;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.phone-btn-wrapper:hover::after,
.phone-btn-wrapper:hover::before {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* Back to Top */
#back-to-top { display: none; }
@media (min-width: 993px) {
    #back-to-top {
        display: flex; align-items: center; justify-content: center; position: fixed; bottom: 30px; right: 30px;
        width: 50px; height: 50px; border-radius: 50%; background-color: white; color: var(--primary); border: 1px solid var(--border);
        font-size: 1.2rem; text-decoration: none; box-shadow: 0 5px 20px rgba(0,0,0,0.1); z-index: 990;
        opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }
    #back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
    #back-to-top:hover { background-color: var(--primary); color: white; transform: translateY(-5px); box-shadow: 0 10px 25px rgba(13, 54, 84, 0.2); }
}

/* On remet le centrage uniquement sur Desktop (ajout à faire ici ou dans la media query existante plus bas) */
@media (min-width: 993px) {
    .filters-list, .alphabet-list { justify-content: center !important; }
}

/* FAB Mobile (Bouton flottant) */
.mobile-fab { display: none; }

/* CPT éléments (Glossaire, Guides & Références) */
.grid-loader { position: absolute; top: 150px; left: 50%; transform: translateX(-50%); z-index: 20; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.spinner { width: 40px; height: 40px; border: 4px solid rgba(50, 149, 189, 0.2); border-left-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }

/* No Results Box */
.no-results-smart-box { grid-column: 1 / -1; background: white; border-radius: 16px; padding: 60px 40px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px dashed var(--border); margin-top: 20px; }
.icon-circle { width: 80px; height: 80px; background: var(--input-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; font-size: 2rem; color: var(--text-muted); }
.no-results-smart-box h3 { font-size: 1.5rem; margin-bottom: 15px; color: var(--primary); }
.no-results-smart-box p { color: var(--text-muted); max-width: 500px; margin: 0 auto 35px; font-size: 1.05rem; }
.no-results-actions { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.no-results-actions .btn { padding: 12px 25px; font-size: 0.95rem; }

/* ==========================================================================
   26 | MAILLAGE INTERNE AUTOMATISÉ
   ========================================================================== */

/* 1. LIEN (Force l'affichage) */
body .entry-content a.ibaix-auto-link,
a.ibaix-auto-link {
    color: var(--primary) !important;
    text-decoration: none !important;
    border-bottom: 2px dotted var(--accent) !important;
    font-weight: 700 !important;
    position: relative;
    cursor: help !important;
    z-index: 10;
    transition: all 0.2s ease;
}

/* 2. SURVOL */
body .entry-content a.ibaix-auto-link:hover,
a.ibaix-auto-link:hover {
    color: var(--accent) !important;
    background-color: rgba(230, 126, 34, 0.15) !important;
    border-bottom-style: solid !important;
}

/* 3. INFOBULLE (Desktop > 993px) */
@media (min-width: 993px) {
    
    /* La Bulle (Conteneur Texte) */
    a.ibaix-auto-link::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translate(-50%, -8px); 
        
        background-color: var(--primary);
        color: white !important;
        
        padding: 14px 18px;
        font-size: 0.85rem;
        line-height: 1.5;
        
        /* --- NOUVEAUX STYLES --- */
        font-weight: 400;
        font-style: italic;       /* Texte en italique */
        white-space: pre-wrap;    /* INDISPENSABLE pour le retour à la ligne */
        font-family: 'Inter', sans-serif;
        
        border-radius: 8px;
        width: 280px;
        
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 99999;
        
        box-shadow: 0 10px 30px rgba(13, 54, 84, 0.25);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
        margin-bottom: 10px;
    }

    /* Flèche */
    a.ibaix-auto-link::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -6px;
        margin-bottom: 2px;
        border: 6px solid transparent;
        border-top-color: var(--primary);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 99999;
        transition: opacity 0.2s ease;
    }

    /* Apparition */
    a.ibaix-auto-link:hover::after {
        opacity: 1; visibility: visible; transform: translate(-50%, -5px);
    }
    a.ibaix-auto-link:hover::before {
        opacity: 1; visibility: visible;
    }
}


/* ==========================================================================
   6 | COMPONENTS : HOMEPAGE COMPLETE (HERO, SLIDER, SECTIONS)
   ========================================================================== */

/* --- A. HERO & SLIDER --- */
.hero { padding: 80px 0; background: white; }
.hero-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: center; }

.hero-text h1 { font-size: 3.2rem; line-height: 1.1; margin-bottom: 25px; font-weight: 800; color: var(--primary); }
.hero-text p { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 35px; max-width: 550px; }
.hero-action-group { display: flex; gap: 15px; flex-wrap: wrap; }

/* Carte Diagnostic */
.diagnostic-card { 
    background: white; border-radius: 24px; box-shadow: var(--shadow-deep); 
    border: 1px solid var(--border); min-height: 480px; 
    display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.diagnostic-card h3 { 
    margin: 30px 30px 10px 30px; color: var(--primary); font-size: 1.25rem; font-weight: 800; z-index: 10;
}

/* Slider Engine */
.diagnostic-slider {
    position: relative; flex-grow: 1; display: flex; flex-direction: column; width: 100%;
}
.slides-track { position: relative; flex-grow: 1; width: 100%; }

.slide-group {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    padding: 10px 30px 60px 30px; box-sizing: border-box;
    opacity: 0; transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none; z-index: 1;
    display: flex; flex-direction: column; justify-content: space-between; 
}
.slide-group.active { opacity: 1; transform: translateX(0); pointer-events: auto; z-index: 5; }

/* Slider Items */
.diag-option {
    display: flex; align-items: center; padding: 15px 20px;
    border: 2px solid var(--border); border-radius: 12px;
    cursor: pointer; transition: all 0.3s ease; 
    background: var(--surface); text-decoration: none !important;
    margin-bottom: 0; height: 95px; 
}
.diag-option:hover { 
    border-color: var(--accent); background: white; 
    box-shadow: 0 10px 20px rgba(50, 149, 189, 0.1); transform: translateY(-2px) scale(1.02); 
}
.diag-icon {
    width: 45px; height: 45px; flex-shrink: 0; background: white; color: var(--accent);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    margin-right: 15px; font-size: 1.2rem; box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.diag-title { font-weight: 700; color: var(--primary); font-size: 0.95rem; margin-bottom: 2px; line-height: 1.2; }
.diag-sub { font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; }

/* Pagination */
.slider-dots {
    display: flex; justify-content: center; gap: 12px;
    position: absolute; bottom: 25px; left: 0; right: 0; z-index: 10;
}
.slider-dot {
    width: 10px; height: 10px; border: 1.5px solid var(--primary); border-radius: 50%;
    cursor: pointer; transition: all 0.3s ease; background: transparent;
}
.slider-dot.active { background-color: var(--primary); transform: scale(1.2); }

/* --- B. AUTRES SECTIONS ACCUEIL --- */
.section-padding { padding: 80px 0; }
.section-expertises { background-color: var(--surface); }

.section-header { text-align: center; margin-bottom: 50px; }
.section-header h2 { font-size: 2.2rem; margin-bottom: 12px; }
.section-header p { color: var(--text-muted); max-width: 700px; margin: 0 auto; }

/* Silos Grid */
.silos-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px; 
    margin-top: 40px; 
}

.silo-card { 
    background: white; 
    padding: 40px 30px; 
    border: 1px solid var(--border); 
    border-radius: 16px; 
    transition: all 0.3s ease; /* Fluidité globale */
    text-align: center; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; /* Centre le lien horizontalement */
}

/* Interaction sur la carte entière */
.silo-card:hover { 
    border-color: var(--accent); 
    transform: translateY(-5px); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
}

/* --- ICÔNE PRINCIPALE --- */
/* Le sélecteur "> i" assure qu'on cible l'icône directe, pas celle du lien */
.silo-card > i { 
    font-size: 2.2rem; 
    color: var(--accent); /* Bleu ciel par défaut */
    margin-bottom: 20px; 
    transition: all 0.3s ease; /* Important pour l'animation de couleur */
}

/* LE CHANGEMENT EST ICI : Quand on survole la carte, l'icône devient Primary */
.silo-card:hover > i {
    color: var(--primary); /* Bleu foncé */
    transform: scale(1.1); /* Petit bonus : léger agrandissement */
}

.silo-card h4 { 
    margin-bottom: 15px; 
    font-size: 1.25rem; 
}

.silo-card p { 
    font-size: 0.95rem; 
    color: var(--text-muted); 
    margin-bottom: 25px; 
    flex-grow: 1; 
}

/* --- STYLE DU LIEN (Smart Link) --- */
.silo-card .link { 
    position: relative; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    text-decoration: none !important; 
    color: var(--accent); 
    font-weight: 700; 
    padding-bottom: 2px; 
    transition: color 0.3s ease; 
}

.silo-card .link::before { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 2px; 
    bottom: 0; 
    left: 0; 
    background-color: var(--primary); 
    transform: scaleX(0); 
    transform-origin: right; 
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

/* Animation fluide pour l'icône du lien */
.silo-card .link i,
.silo-card .link svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.silo-card .link:hover { 
    color: var(--primary); 
}

.silo-card .link:hover::before { 
    transform: scaleX(1); 
    transform-origin: left; 
}

.silo-card .link:hover i,
.silo-card .link:hover svg { 
    transform: translateX(5px); 
}

/* Réseau */
.section-network { background: white; border-top: 1px solid var(--border); }
.section-network h2 { text-align: center; color: var(--primary); font-size: 1.8rem; margin-bottom: 15px; }
.section-network p { text-align: center; color: var(--text-muted); margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; }

.network-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.network-item { text-align: center; }
.network-item i { font-size: 2.5rem; color: var(--accent); margin-bottom: 15px; display: block; }
.network-item h4 { margin-bottom: 10px; }
.network-item p { font-size: 0.85rem; color: var(--text-muted); }

/* Bloc Local */
.local-block {
    display: flex; align-items: center; justify-content: space-between;
    background: white; padding: 60px; border-radius: 24px;
    border: 1px solid var(--border); margin: 40px 0 80px;
}
.local-text h2 { font-size: 2rem; margin-top: 10px; }
.local-text p { color: var(--text-muted); margin-bottom: 30px; }
.local-visual i { font-size: 5rem; color: var(--border-light); }

/* Section Action Finale (Double CTA) */
.final-action-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white; text-align: center; position: relative; overflow: hidden;
}
.final-action-section::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity: 0.05; pointer-events: none;
}
.cta-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.cta-content h2 { color: white; font-size: 2.2rem; margin-bottom: 15px; }
.cta-content p { color: var(--accent-light); font-size: 1.1rem; margin-bottom: 40px; }

.dual-cta-group { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }


/* ==========================================================================
   7 | COMPONENTS : FOOTER (MERGED V4 - COMPLET)
   ========================================================================== */

.site-footer {
    background-color: var(--primary) !important;
    color: var(--footer-text);
    padding: 80px 0 30px; font-size: 0.95rem; margin-top: 0px; 
    position: relative; width: 100%;
    box-shadow: 0 0 0 1000px var(--primary);
    clip-path: inset(0 -1000px 0 -1000px);
}

.site-footer .container { position: relative; z-index: 2; }

/* Colonne 1: Logo & Social */
.footer-logo img { height: 45px; width: auto; margin-bottom: 25px; }
.footer-description { color: var(--text-muted); line-height: 1.7; margin-bottom: 25px; }

.social-bubbles { display: flex; gap: 12px; }
.social-bubbles a {
    width: 42px; height: 42px; background: rgba(255,255,255,0.08); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid transparent;
}
.social-bubbles a:hover { background: var(--accent); transform: translateY(-4px); border-color: rgba(255,255,255,0.2); }

/* Colonnes 2 & 3: Liens */
.footer-col { display: flex; flex-direction: column; }
.footer-title { color: white; font-weight: 700; font-size: 1.05rem; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; }

.footer-list-aligned { list-style: none; padding: 0; margin: 0; }
.footer-list-aligned li { margin-bottom: 12px !important; line-height: 1.4; }
.footer-list-aligned a {
    color: var(--text-muted); font-size: 0.95rem; font-weight: 400;
    transition: all 0.3s ease; display: block; text-decoration: none;
}
.footer-list-aligned a:hover { color: white; transform: translateX(5px); }

/* Lien spécial "Découvrir le Cabinet" */
.cabinet-discover-link {
    display: flex; align-items: center; gap: 10px; margin-bottom: 15px;
    color: var(--accent); font-weight: 700; font-size: 0.9rem;
    padding: 8px 15px; border-radius: 50px; transition: all 0.3s ease;
    background: transparent; border: 1px solid transparent; width: fit-content;
}
.cabinet-discover-link:hover { background-color: white; color: var(--primary); transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* Infos Contact */
.cabinet-info li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; color: var(--text-muted); }
.cabinet-info i { color: var(--accent); font-size: 1rem; margin-top: 3px; }

/* Colonne 4: Carte Garantie */
.full-height-card {
    flex-grow: 0; height: auto; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04); padding: 20px;
    border-radius: 12px; border: 1px solid var(--footer-border); text-align: center;
}

.axa-logo-compact { height: 35px; width: auto; margin-bottom: 15px; display: block; }
.contract-badge-compact {
    background: white; color: var(--primary); padding: 4px 14px; 
    border-radius: 20px; font-weight: 800; font-size: 0.8rem; 
    display: inline-block; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.guarantee-label-compact {
    display: block; color: rgba(255,255,255,0.8); font-weight: 600;
    font-size: 0.8rem; margin-bottom: 0; line-height: 1.3;
}

/* Footer Bottom (Legal) */
.footer-bottom { 
    border-top: 1px solid var(--footer-border); padding-top: 30px; 
    display: flex; justify-content: space-between; align-items: center; 
}
.legal-links { display: flex; gap: 25px; }
.legal-links a:hover { color: white; }
.grecaptcha-badge { visibility: hidden !important; }


/* ==========================================================================
   8 | COMPONENTS : SIDE PANEL & FORM (CF7)
   ========================================================================== */

/* Overlay */
.overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(13, 54, 84, 0.6); z-index: 10001; 
    opacity: 0; visibility: hidden; 
    transition: opacity 0.8s ease, visibility 0.8s ease;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.overlay.active { opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0.5s ease; }

/* Panneau Latéral */
.side-panel { 
    position: fixed; top: 0; right: 0; 
    width: 100%; max-width: 500px; height: 100%; 
    background: white; z-index: 10010 !important; 
    transform: translate3d(100%, 0, 0); 
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform; display: flex; flex-direction: column;
    box-shadow: -20px 0 50px rgba(0,0,0,0.15);
}
.side-panel.active { transform: translate3d(0, 0, 0); }

/* Header & Contenu */
.panel-header { padding: 35px 35px 10px; position: relative; }
.header-text-group { padding-right: 60px; }
.close-btn { 
    position: absolute; top: 30px; right: 30px; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--surface);
    cursor: pointer; color: var(--text-muted); transition: 0.4s; z-index: 10;
}
.close-btn:hover { background: var(--error-bg); color: var(--error); transform: rotate(90deg); }
.side-panel h2 { font-size: 1.3rem; font-weight: 800; color: var(--primary); margin: 0; }
.subtitle { color: var(--text-muted); font-size: 0.88rem; line-height: 1.4; margin-top: 8px; }
.panel-content { padding: 0 35px 35px; overflow-y: auto; flex-grow: 1; display: flex; flex-direction: column; }

/* --- CF7 OVERRIDES --- */
.wpcf7-form { display: flex !important; flex-direction: column !important; gap: 15px !important; margin: 0 !important; }
.wpcf7 br { display: none !important; }
.wpcf7 p { margin: 0 !important; padding: 0 !important; }
div.wpcf7, .wpcf7-form { margin-bottom: 0 !important; }

/* Inputs */
.wpcf7-form-control-wrap { display: block !important; margin: 0 !important; width: 100%; position: relative; }
.side-panel input:not([type="submit"]), .side-panel select, .side-panel textarea {
    width: 100%; padding: 12px 16px; 
    background-color: var(--input-bg); border: 2px solid transparent; 
    border-radius: 10px; font-family: inherit; font-size: 0.95rem; 
    color: var(--text-main); transition: 0.3s; outline: none; box-shadow: none; box-sizing: border-box; 
}
.side-panel input:focus, .side-panel select:focus, .side-panel textarea:focus { border-color: var(--accent); background-color: white; }
.form-row-50 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin: 0 !important; width: 100%; }

/* Acceptation & Submit */
.wpcf7-acceptance { margin-top: -10px !important; margin-bottom: 5px !important; display: block; }
.wpcf7-acceptance label { display: flex !important; align-items: flex-start !important; gap: 12px; cursor: pointer; margin: 0 !important; }
.wpcf7-acceptance input { width: 16px !important; height: 16px !important; margin-top: 4px !important; flex-shrink: 0; accent-color: var(--primary); }
.wpcf7-list-item-label { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }

.submit-btn {
    display: flex !important; align-items: center; justify-content: center; gap: 12px;
    background: var(--primary) !important; color: white !important; border: none;
    width: 100%; padding: 16px; border-radius: 10px; font-weight: 700; font-size: 1rem;
    cursor: pointer; transition: 0.3s; position: relative;
}
.submit-btn:hover { background: var(--accent) !important; transform: translateY(-2px); }
.submit-btn::after { content: "\f1d8" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-size: 0.9rem; color: white !important; display: inline-block; }
.wpcf7-form.submitting .submit-btn::after { content: "\f110" !important; animation: fa-spin 1s infinite linear; }

/* Validation */
.field-valid input, .field-valid select, .field-valid textarea { border-color: var(--success) !important; background-color: white !important; }
.field-valid::after { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 15px; top: 12px; color: var(--success); pointer-events: none; }
.wpcf7-not-valid { border-color: var(--error) !important; background-color: var(--error-bg) !important; }
.wpcf7-not-valid-tip { color: var(--error); font-size: 0.72rem; font-weight: 600; margin-top: 4px; display: block; }
.wpcf7-response-output { display: none !important; }
.wpcf7-form-control-wrap.gdpr-consent.field-valid::after { display: none !important; }

/* Trust Bar */
.trust-bar { display: flex; justify-content: space-between; padding: 12px 0; margin-top: 12px !important; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-item { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.trust-item i { color: var(--accent); font-size: 0.8rem; }
.recaptcha-text { font-size: 0.65rem; color: var(--text-muted); text-align: center; margin-top: 15px; opacity: 0.8; line-height: 1.5; }

/* Success View */
.success-view { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.success-icon { width: 85px; height: 85px; background: var(--success-bg); color: var(--success); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; margin-bottom: 25px; animation: bounceIn 0.6s ease; }


/* ==========================================================================
   9 | PORTAIL : NOS EXPERTISES (GRILLE PURE)
   ========================================================================== */

/* --- GRILLE FULLSCREEN (LE CŒUR DU PORTAIL) --- */
.zones-fullscreen-grid { 
    display: grid; 
    grid-template-columns: repeat(1, 1fr); /* Mobile */
    width: 100%; 
    min-height: auto; 
    position: relative; 
    background: var(--primary);
}

.zone-tile { 
    position: relative; 
    display: flex; flex-direction: column; 
    justify-content: center; align-items: center; 
    text-align: center; 
    overflow: hidden; 
    text-decoration: none !important; 
    border-right: 1px solid rgba(255,255,255,0.1); 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    background-color: var(--primary); 
    height: 350px; /* Hauteur fixe mobile/tablette */
    transition: all 0.3s ease;
}

/* Image de fond (Cachée par défaut) */
.zone-bg { 
    position: absolute; inset: 0;
    background-size: cover; background-position: center; 
    opacity: 0; transform: scale(1); 
    transition: opacity 0.6s ease-in-out, transform 2.5s cubic-bezier(0.1, 0.5, 0.1, 1); 
    z-index: 1; 
}

/* Overlay dégradé (Apparaît au survol) */
.zone-overlay { 
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(13, 54, 84, 0.5), rgba(13, 54, 84, 0.5)); 
    z-index: 2; pointer-events: none; opacity: 0;
    transition: opacity 0.6s ease;
}

/* Icône de fond géante */
.dept-svg-layer { 
    position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%) scale(0.85); 
    z-index: 3; pointer-events: none; opacity: 0.15; 
    transition: all 0.6s ease; 
    font-size: 8rem; color: white;
}

/* Contenu (Texte) */
.zone-content { 
    position: relative; z-index: 10; color: white; padding: 20px; width: 100%; 
    transform: translateY(20px); 
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

.zone-number { 
    display: block; font-size: 4rem; font-weight: 800; line-height: 1; 
    margin-bottom: 10px; opacity: 0.1; color: white; 
    transition: all 0.5s ease; 
}

.expertise-portal-page .zone-name { 
    font-size: 1.5rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    margin: 0; 
    color: white !important; 
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
    
    /* FORCE L'ALIGNEMENT : On réserve la place pour 2 lignes partout */
    min-height: 70px; 
    display: flex;
    align-items: center;     /* Centre le texte verticalement dans la zone */
    justify-content: center; /* Centre le texte horizontalement */
    line-height: 1.2;
}

.zone-hidden-info { 
    max-height: 0; overflow: hidden; opacity: 0; 
    transition: all 0.6s ease; 
}

/* CTA Bouton (Apparaît au survol) */
.btn-explore { 
    display: inline-block; margin-top: 25px; padding: 12px 30px; 
    border: 1px solid rgba(255,255,255,0.4); border-radius: 50px; 
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; 
    font-weight: 700; color: white; background: rgba(255,255,255,0); 
    transition: all 0.4s ease; 
}

/* --- ANIMATIONS AU SURVOL (HOVER EFFECTS) --- */
.zone-tile:hover .zone-bg { 
    opacity: 0.7; transform: scale(1.1); 
}
.zone-tile:hover .zone-overlay { opacity: 1; }

.zone-tile:hover .dept-svg-layer { 
    opacity: 0.05; /* Disparaît presque pour laisser place à l'image */
    transform: translate(-50%, -50%) scale(1.2);
}

.zone-tile:hover .zone-number { 
    opacity: 1; color: var(--accent); /* Devient Cyan */
    transform: translateY(-20px) scale(0.6); 
    text-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

.zone-tile:hover .zone-content { transform: translateY(-10px); }

.zone-tile:hover .zone-hidden-info { max-height: 100px; opacity: 1; }

.zone-tile:hover .btn-explore { 
    background: var(--accent); border-color: var(--accent); color: white;
}


/* ==========================================================================
   10 | PAGES EXPERTISES (SYSTÈME GLOBAL)
   ========================================================================== */

.hero-expertise {
    position: relative;
    /* Image de fond + filtre bleu */
    background-color: var(--primary);
    background-size: cover;
    
    /* 1. CENTRAGE DE L'IMAGE : On vise le bas de l'image pour voir la maison */
    /* 50% = centre horizontal, 70% = descend le point de vue vers le bas */
    background-position: 50% 30%; 
    background-repeat: no-repeat;
    background-size: cover;
    
    min-height: 335px;
    margin-bottom: 0;
    color: white;
    text-align: center;

    /* FLEXBOX : Pour tout aligner proprement */
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* 2. GESTION DE LA HAUTEUR DU BADGE 
       Au lieu de "justify-content: center", on utilise un padding-top précis.
       Cela force le premier élément (le badge) à commencer exactement là où vous voulez,
       et le reste suit sans se chevaucher. */
    padding-top: 60px;  /* -> C'est ICI votre marge précise du haut pour le badge */
    padding-bottom: 60px; /* Équilibre visuel en bas */
}

/* Le filtre bleu (Overlay) */
.hero-expertise::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(13, 54, 84, 0.92) 0%, rgba(13, 54, 84, 0.92) 100%);
    z-index: 1; /* Derrière le texte */
}

/* Le Container (Wrapper du contenu) */
.hero-expertise .container {
    position: relative;
    z-index: 2; /* Devant le filtre bleu */
    width: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- 1. FIL D'ARIANE (Absolu - Coin Haut Gauche) --- */
/* Lui, on le laisse en absolu car il doit être "hors sol" */
.hero-expertise .breadcrumbs-container {
    position: absolute;
    top: -40px;  /* On le remonte par rapport au contenu principal (padding-top 60px du parent) */
    left: 0px;  /* Marge gauche */
    
    width: auto;
    z-index: 10;
    text-align: left;
}

/* --- 2. HERO BADGE (Dans le flux, mais premier) --- */
.hero-expertise .hero-badge {
    /* Plus de position absolute ici pour éviter le chevauchement ! */
    position: relative; 
    display: inline-block;
    
    margin-bottom: 25px; /* Espace de sécurité entre le badge et le Titre */
}

/* --- 3. TITRE H1 --- */
.hero-expertise h1 {
    font-size: 3rem; /* Ajustez si trop gros sur mobile */
    font-weight: 800;
    color: white !important;
    line-height: 1.1;
    
    margin-top: 0;
    margin-bottom: 20px; /* Espace avec le sous-titre */
}

/* --- 4. SOUS-TITRE --- */
.hero-expertise .hero-subtitle {
    color: white;
    font-size: 1.1rem;
    font-weight: 300;
    margin: 0 auto;
    line-height: 1.5;
}

/* 3. EXCEPTIONS & SPÉCIFICITÉS (Si nécessaire) */
/* Exemple : Si tu veux changer la hauteur du hero juste pour la page Constats */
/*
#hero-constats {
    padding-bottom: 200px;
}
*/

/* Note : Le badge utilise la classe globale .hero-badge définie plus haut dans ton CSS */

/* --- 9.2 NAVIGATION SECONDAIRE (STICKY BAR) --- */
.expertise-nav-sticky {
    position: -webkit-sticky; 
    position: sticky; 
    top: 70px; /* Calé sous le header réduit */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    z-index: 900; 
    padding: 0;
    margin-top: 0 !important;
    box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.05);
}

.filters-scroll-container {
    position: relative; display: flex; align-items: center; max-width: 100%;
}

.scroll-fade-left, .scroll-fade-right {
    position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; z-index: 2; display: block;
}
.scroll-fade-left { left: 0; background: linear-gradient(to right, white, rgba(255,255,255,0)); }
.scroll-fade-right { right: 0; background: linear-gradient(to left, white, rgba(255,255,255,0)); }

.filters-list {
    display: flex; gap: 5px; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 10px 20px; margin: 0 auto; list-style: none; align-items: center; 
    justify-content: flex-start; /* MOBILE FIRST : Alignement au début pour permettre le scroll */
    width: 100%;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}

.filters-list::-webkit-scrollbar { display: none; }


.filter-tab-link {
    display: flex; align-items: center; justify-content: center;
    padding: 8px 16px; border-radius: 6px;
    color: var(--text-muted); font-weight: 600; font-size: 0.9rem;
    transition: all 0.2s ease; text-decoration: none; white-space: nowrap; position: relative; z-index: 1;
}
.filter-tab-link:hover { background: var(--input-bg); color: var(--primary); }
.filter-tab-link.active { background: var(--primary); color: white; box-shadow: 0 2px 8px rgba(13, 54, 84, 0.2); }

/* --- 9.3 FAQ */
.faq-wrapper { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.faq-item { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; }
.faq-item { 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    overflow: hidden; 
    transition: all 0.3s ease; 
    background: white;
}
.faq-question {
    padding: 20px 25px; 
    font-weight: 700; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    color: var(--primary); 
    font-size: 1.05rem; 
    list-style: none;
    position: relative;
    z-index: 10;
    background: white; /* Important pour couvrir le contenu qui remonte */
}
.faq-question .faq-icon {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Animation fluide */
    transform-origin: center;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-item[open] .faq-question i,
.faq-item.is-open .faq-question i { 
    transform: rotate(180deg); 
    color: var(--accent);
}
.faq-answer {
    padding: 0 25px; 
    color: var(--text-muted); 
    line-height: 1.7;
    /* État fermé par défaut */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.5s ease, padding 0.5s ease;
}
.faq-item.is-open .faq-answer {
    /* Une hauteur max suffisante pour tout contenu texte */
    max-height: 1000px; 
    opacity: 1;
    padding-bottom: 25px; /* On remet le padding ici */
    transition: max-height 1s ease-in-out, opacity 0.5s ease, padding 0.5s ease;
}

/* --- 10.5 PREMIUM CTA FOOTER --- */
.exp-final-action-section { 
    background: none !important;
    padding: 20px 0 60px !important; 
    color: white; text-align: center; position: relative; overflow: hidden;
}

.final-action-section::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    opacity: 0.05; pointer-events: none;
}

.premium-cta-card {
    background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
    border-radius: 24px; padding: 3rem; 
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: center; text-align: left;
    box-shadow: 0 30px 60px -12px rgba(13, 54, 84, 0.25);
    border: 1px solid rgba(255,255,255,0.2);
}
.cta-content h2 { color: white; font-size: 2rem; margin-bottom: 0.8rem; }

.btn-cta-primary {
    display: inline-flex; justify-content: center; align-items: center; 
    background: white; color: var(--primary); 
    padding: 16px 32px; border-radius: 12px; 
    font-weight: 800; text-decoration: none; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative; overflow: hidden; z-index: 1;
}

/* 1. Effet de levée et d'ombre au survol */
.btn-cta-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    color: var(--accent); /* Le texte devient bleu clair */
}

/* 2. Animation de la flèche (utilise la classe ajoutée dans le HTML) */
.btn-cta-primary .btn-icon-anim {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-cta-primary:hover .btn-icon-anim {
    transform: translateX(6px); /* Déplacement vers la droite */
}



/* Appliquer l'animation pulse uniquement si le bouton n'est pas survolé */
.premium-cta-card .btn-cta-primary:not(:hover) {
    animation: subtlePulse 2s infinite;
}

.dot-live { width: 8px; height: 8px; background: var(--success); border-radius: 50%; display: inline-block; animation: pulse 2s infinite; }

.expertise-navigation-section {
    padding-bottom: 60px;
    background-color: white; /* Fond blanc pour séparer du CTA coloré */
}

.expertise-nav-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border); /* Ligne de séparation discrète */
    padding-top: 40px;
    gap: 20px;
}

.exp-nav-item {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    gap: 20px;
    transition: all 0.3s ease;
    max-width: 45%;
    group: nav; /* Pour référence future */
}

/* Alignement spécifique pour le bouton "Suivant" */
.exp-nav-item.next {
    text-align: right;
    justify-content: flex-end;
}

/* Cercle de la flèche */
.exp-nav-item .nav-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    flex-shrink: 0;
}

/* Conteneur Texte */
.exp-nav-item .nav-text {
    display: flex;
    flex-direction: column;
}

.exp-nav-item .nav-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.exp-nav-item .nav-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
    transition: color 0.3s ease;
}

/* --- EFFETS AU SURVOL (HOVER) --- */

.exp-nav-item:hover .nav-arrow {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(13, 54, 84, 0.2);
}

.exp-nav-item:hover .nav-title {
    color: var(--accent);
}

.exp-nav-item:hover .nav-label {
    color: var(--primary);
}

/* Animation des flèches */
.exp-nav-item.prev:hover .nav-arrow i {
    transform: translateX(-3px);
}
.exp-nav-item.next:hover .nav-arrow i {
    transform: translateX(3px);
}



/* ==========================================================================
   11 | DESIGN SPÉCIFIQUE : ACHAT & VENTE
   ========================================================================== */

/* --- 10.1 INTRO SPLIT --- */
.grid-split { 
    /* Gap réduit à 3rem pour rapprocher texte et carte expert */
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; 
}
.manifesto-title { font-size: 2.5rem; line-height: 1.2; margin-bottom: 1rem; color: var(--primary); }
.manifesto-text { font-size: 1.05rem; line-height: 1.7; color: var(--text-main); margin-bottom: 1.5rem; }

/* Carte Expert */
.expert-card {
    background: white; padding: 2rem; border-radius: 24px;
    box-shadow: 0 20px 40px -4px rgba(13, 54, 84, 0.15);
    border: 1px solid rgba(0,0,0,0.05); position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    margin-bottom: 40px;
}
.expert-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 6px;
    background: linear-gradient(90deg, var(--accent), var(--success));
}
.expert-photo-wrapper {
    width: 110px; height: 110px; border-radius: 50%; overflow: hidden;
    border: 4px solid white; box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    margin-bottom: 1.2rem; position: relative;
}
.expert-photo { width: 100%; height: 100%; object-fit: cover; }
.expert-name { font-size: 1.3rem; font-weight: 800; color: var(--primary); margin-bottom: 0.25rem; }
.expert-title { font-size: 0.85rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.8rem; }
.expert-bio { font-size: 0.95rem; color: var(--text-muted); font-style: italic; margin-bottom: 1.2rem; line-height: 1.5; }
.expert-sign { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--primary); opacity: 0.6; }

.google-rating-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); padding: 6px 12px; border-radius: 50px;
    border: 1px solid var(--border); text-decoration: none;
    margin-top: 15px; transition: 0.3s;
}
.google-rating-badge:hover { background: white; border-color: var(--border); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.g-logo-circle {
    width: 24px; height: 24px; background: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.g-logo-img { width: 14px; height: 14px; object-fit: contain; }
.g-score { font-weight: 700; color: var(--text-main); font-size: 0.9rem; }
.g-star { color: var(--warning); font-size: 0.9rem; }


/* --- 10.2 ANALYSE 360° (DONUT) --- */
.donut-section { background: var(--surface); padding: 50px 0 70px; }
.donut-layout { 
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; 
}

.donut-visual { position: relative; width: 340px; height: 340px; margin: 0 auto; }
.donut-svg { width: 100%; height: 100%; transform: rotate(-147.5deg); }

/* NOUVEAU : Cercle Timer Extérieur (Bleu Clair) */
.timer-ring {
    fill: transparent; 
    stroke: var(--accent-light); /* Bleu très clair */
    stroke-width: 4;
    stroke-dasharray: 389.5; 
    stroke-dashoffset: 389.5; /* Commence vide */
    transform-origin: center;
    /* MODIFICATION ICI : On garde juste la rotation pour démarrer à midi, sans le scaleY */

    opacity: 0.8;
}

.donut-track { fill: transparent; stroke: var(--input-bg); stroke-width: 25; }

.donut-segment {
    fill: transparent; stroke: var(--border); stroke-width: 25;
    stroke-dasharray: 80 251; /* Ajusté pour hitbox précise */
    transition: stroke 0.3s ease, transform 0.3s ease;
    cursor: pointer; transform-origin: center; 
    pointer-events: stroke; /* Hitbox uniquement sur le trait */
}
.donut-segment.active { stroke: var(--accent); transform: scale(1.08); z-index: 10; filter: none; }

.donut-segment:not(.active):hover {
    stroke: var(--accent);
    opacity: 0.5;
}

.donut-icon {
    position: absolute; width: 42px; height: 42px; background: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--primary); box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    pointer-events: none; font-size: 1rem; transition: all 0.5s ease; z-index: 15;
}
/* Positionnement ajusté pour SVG 130x130 */
.icon-1 { top: -5%; left: 50%; right: auto; transform: translateX(-50%); }
.icon-2 { top: auto; bottom: 15%; left: auto; right: 0%; transform: none; }
.icon-3 { top: auto; bottom: 15%; left: 0%; right: auto; }

.donut-visual.step-1-active .icon-1 { background: var(--primary); color: white; transform: translateX(-50%) scale(1.2); }
.donut-visual.step-2-active .icon-2 { background: var(--primary); color: white; transform: scale(1.2); }
.donut-visual.step-3-active .icon-3 { background: var(--primary); color: white; transform: scale(1.2); }

.donut-content-panel {
    background: white; padding: 2.5rem; border-radius: 20px;
    box-shadow: 0 15px 30px -4px rgba(13, 54, 84, 0.1);
    position: relative; min-height: 300px; display: flex; flex-direction: column; justify-content: center;
}
.autoplay-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background-color: var(--accent); /* Bleu clair */
    width: 0%;
    border-radius: 20px 20px 0 0;
    z-index: 10;
}

.pause-indicator {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--accent-light); /* Même couleur que timer-ring */
    font-size: 3rem; opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease; z-index: 5;
}

.donut-visual:hover .pause-indicator,
.donut-layout:hover .pause-indicator { /* Fallback pour l'UX globale */
    opacity: 0.8;
}

.donut-nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; background: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--primary); box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer; z-index: 20; transition: 0.3s;
    opacity: 0; visibility: hidden; /* Caché par défaut */
}
.donut-nav-arrow:hover { background: var(--accent); color: white; }
.donut-nav-arrow.nav-prev { left: -20px; }
.donut-nav-arrow.nav-next { right: -20px; }

/* Affichage conditionnel géré par JS (classes .show-prev / .show-next) */
.donut-content-panel.show-prev .nav-prev { opacity: 1; visibility: visible; }
.donut-content-panel.show-next .nav-next { opacity: 1; visibility: visible; }

.content-pane { display: none; animation: fadeIn 0.4s ease forwards; }
.content-pane.active { display: block; }
.pane-step-label { color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; margin-bottom: 0.5rem; display: block; }
.pane-title { font-size: 1.8rem; margin-bottom: 0.8rem; color: var(--primary); }
.pane-text { font-size: 1rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.pane-list li { margin-bottom: 0.4rem; display: flex; align-items: center; gap: 10px; color: var(--text-main); font-weight: 600; font-size: 0.95rem; }
.pane-list i { color: var(--success); }

/* --- 10.3 TIMELINE (CORRIGÉE & INTERACTIVE) --- */
.timeline-section { 
    padding-top: 40px !important; padding-bottom: 10px !important; 
}
.timeline-clean-container { max-width: 800px; margin: 0 auto; position: relative; }
.timeline-track { position: absolute; left: 31px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(to bottom, var(--accent) 0%, var(--surface) 100%); z-index: 0; }

.timeline-node { display: flex; gap: 1.5rem; margin-bottom: 2rem; position: relative; z-index: 1; cursor: default; }

.persona-btn {
    display: block; width: 100%; text-align: center;
    margin-top: 20px; padding: 12px 20px; border-radius: 8px;
    font-weight: 700; font-size: 0.9rem; text-decoration: none;
    transition: 0.3s;
}
.persona-btn.btn-buyer {
    border: 2px solid var(--accent); color: var(--accent); background: transparent;
}
.persona-btn.btn-buyer:hover { background: var(--accent); color: white; }

.persona-btn.btn-seller {
    border: 2px solid var(--success); color: var(--success); background: transparent;
}
.persona-btn.btn-seller:hover { background: var(--success); color: white; }

/* --- 3.A TIMELINE PROGRESS FILL --- */
.timeline-track {
    /* On garde la base existante mais on s'assure qu'elle est grise/neutre */
    background: var(--border) !important; 
    overflow: hidden; /* Pour couper la barre de remplissage */
}
.track-fill {
    width: 100%;
    background: linear-gradient(to bottom, var(--accent) 0%, var(--primary) 100%);
    height: 0%; /* Sera modifiée par JS */
    transition: height 0.1s linear; /* Fluide */
    display: block;
}

.node-marker { 
    flex-shrink: 0; width: 64px; height: 64px; background: white; 
    /* MODIFICATION : Bordure en Primary (Bleu foncé) au lieu de Accent */
    border: 2px solid var(--primary); 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    font-weight: 800; font-size: 1.5rem; color: var(--primary); 
    box-shadow: 0 0 0 10px white;
    transition: all 0.3s ease; /* Animation fluide */
}

.node-content { 
    background: var(--surface); padding: 1.5rem; border-radius: 12px; 
    flex-grow: 1; border-left: 4px solid var(--accent); 
    transition: transform 0.3s ease, background-color 0.3s ease; 
}

/* NOUVELLE LOGIQUE : Survol du parent (.timeline-node) déclenche les enfants */
.timeline-node:hover .node-content { 
    transform: translateX(10px); 
    background: var(--surface-blue); 
}

.timeline-node:hover .node-marker {
    background-color: var(--accent); /* Devient bleu clair */
    border-color: var(--accent);
    color: white; /* Texte en blanc */
    transform: scale(1.1); /* Petit effet de zoom bonus */
}

.node-title { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--primary); font-weight: 700; }
.node-desc { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0.8rem; }
.node-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.node-badge { font-size: 0.75rem; padding: 0.25rem 0.75rem; background: white; border: 1px solid var(--border); border-radius: 6px; color: var(--primary); font-weight: 600; }

/* --- 10.4 PERSONAS SPLIT (CORRIGÉ & COMPACTÉ) --- */
.persona-split-section { 
    /* Force le collage au bloc du dessus */
    padding-top: 10px !important; padding-bottom: 40px !important; 
}
.persona-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.persona-panel {
    padding: 2rem; border-radius: 20px; background: white;
    border: 1px solid var(--border); transition: transform 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column; 
    justify-content: space-between; /* Pousse le contenu aux extrémités */
    height: 100%; /* Important pour que les 2 cartes aient la même hauteur */
}
.persona-content-top { flex-grow: 1; }
.persona-panel.buyer { background: linear-gradient(to bottom right, var(--surface-blue), #fff); border-top: 6px solid var(--accent); }
.persona-panel.seller { background: linear-gradient(to bottom right, #ECFDF5, #fff); border-top: 6px solid var(--success); }

.persona-header { margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; }
.persona-header h3 { font-size: 1.3rem; margin: 0; }
.persona-icon-lg { font-size: 2.5rem; opacity: 0.15; color: var(--primary); }

.feature-list li { margin-bottom: 0.8rem; font-size: 0.95rem; display: flex; gap: 1rem; line-height: 1.5; }
.check-icon { color: var(--success); min-width: 18px; margin-top: 4px; }
.check-icon.blue { color: var(--accent); }

/* 2. Styles des Boutons & Animation Intuitive */
.persona-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; text-align: center;
    margin-top: 25px; padding: 14px 20px; border-radius: 8px;
    font-weight: 700; font-size: 0.95rem; text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; overflow: hidden; z-index: 1;
}

/* Animation de la flèche */
.btn-icon-anim {
    transition: transform 0.3s ease;
}
.persona-btn:hover .btn-icon-anim {
    transform: translateX(5px);
}

/* Style Acheteur (Bleu) */
.persona-btn.btn-buyer {
    border: 2px solid var(--accent); color: var(--accent); background: transparent;
}
.persona-btn.btn-buyer::before {
    content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%;
    background: var(--accent); z-index: -1; transition: width 0.3s ease;
}
.persona-btn.btn-buyer:hover { color: white; border-color: var(--accent); }
.persona-btn.btn-buyer:hover::before { width: 100%; }

/* Style Vendeur (Vert) */
.persona-btn.btn-seller {
    border: 2px solid var(--success); color: var(--success); background: transparent;
}
.persona-btn.btn-seller::before {
    content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%;
    background: var(--success); z-index: -1; transition: width 0.3s ease;
}
.persona-btn.btn-seller:hover { color: white; border-color: var(--success); }
.persona-btn.btn-seller:hover::before { width: 100%; }

/* Ombre légère au survol du panel global */
.persona-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}


/* ==========================================================================
   12 | DESIGN SPÉCIFIQUE : FISSURE & HUMIDITÉ (V2 - MODULE DIAGNOSTIC)
   ========================================================================== */

/* Définition des variables locales pour ce design */
:root {
    --white: white;
    --radius-xl: 24px;
    --radius-md: 16px;
    --shadow-float: 0 20px 40px -4px rgba(13, 54, 84, 0.15);
    --shadow-sm: 0 4px 6px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --accent-soft: rgba(50, 149, 189, 0.1);
}

/* --- INTRO SPLIT (Style Achat/Vente) --- */
.fissure-intro-section .grid-split { align-items: center; }
.fissure-intro-section .expert-card { margin-bottom: 0; height: auto; }

/* --- DIAGNOSTIC MODULE (CORRIGÉ & NETTOYÉ) --- */
#diagnostic-module {
    margin-top: -20px;
    position: relative;
    z-index: 20;
    margin-bottom: 40px;
    padding: 0 20px;
}

.module-container {
    background: var(--white, white);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(13, 54, 84, 0.25);
    border: 1px solid var(--border);
    overflow: hidden; /* Coupe tout ce qui dépasse des arrondis */
    min-height: 600px;
    max-width: 1200px;
    margin: 0 auto;
    
    /* LE FIX EST ICI : On force le padding à 0 pour que la Nav touche les bords */
    padding: 0 !important; 
}

/* -- NAVIGATION (Tabs) - FIX DESIGN & MOBILE ICONS -- */

/* 1. Conteneur principal de la navigation */
.module-nav {
    display: flex;
    width: 100%; /* Prend toute la largeur libérée par le padding 0 */
    background: var(--surface-blue);
    border-bottom: 1px solid var(--border);
    padding: 0;
    gap: 0;
    
    /* On applique le même arrondi que la carte pour "épouser la forme" */
    border-radius: 24px 24px 0 0; 
}

/* 2. Les Boutons (Onglets) */
.nav-btn {
    flex: 1; /* Largeur égale (50% / 50%) */
    padding: 25px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(0,0,0,0.05);
    position: relative;
    outline: none;
}

.nav-btn:last-child { border-right: none; }

/* HOVER */
.nav-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--primary);
}
.nav-btn:not(.active):hover i {
    transform: scale(1.1);
    color: var(--accent);
}

/* ACTIF */
.nav-btn.active {
    background: white;
    color: var(--primary);
    font-weight: 800;
    /* Masque la bordure du bas pour fusionner avec le contenu */
    box-shadow: 0 5px 0 white; 
    z-index: 1; 
}

/* Barre colorée au-dessus de l'actif */
.nav-btn.active::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: var(--accent);
}

/* ICÔNES */
.nav-btn i {
    font-size: 1.3rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
    color: var(--text-meta);
}
.nav-btn.active i {
    color: var(--accent);
    transform: scale(1.1);
}


/* -- CONTENU -- */
.module-content {
    padding: 50px;
    background: white;
}

.content-pane {
    display: none;
    animation: fadeSlide 0.4s ease forwards;
}

.content-pane.active {
    display: block;
}

.diagnostic-split-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Ratio Texte / Image */
    gap: 60px;
    align-items: stretch; /* Force les 2 colonnes à la même hauteur */
    position: relative;
}

/* Alerte Box (Design Clean - Rouge Urgence) */
.alert-clean {
    background: #FFF5F5;
    border-left: 4px solid #F87171;
    padding: 20px 25px;
    border-radius: 8px;
    display: flex; gap: 20px; align-items: center;
    margin-top: 30px;
}

.alert-icon { 
    font-size: 1.5rem; 
    color: #DC2626; 
    flex-shrink: 0; /* Empêche l'icône de s'écraser */
}

.alert-text strong { 
    color: var(--error-dark); 
    display: block; 
    margin-bottom: 4px; 
    font-size: 1rem;
}

.alert-text span { 
    color: #B91C1C; 
    font-size: 0.95rem; 
    line-height: 1.5; 
    display: block;
}

/* Colonne Texte (Renommée) */
.diag-text-side {
    min-width: 0; /* Empêche le texte de forcer la largeur */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.diag-text-side h2 { 
    font-size: 2rem; 
    margin-bottom: 1.5rem; 
    color: var(--primary); 
    line-height: 1.2;
}
.diag-text-side p { 
    font-size: 1.05rem; 
    color: var(--text-muted); 
    margin-bottom: 2rem; 
    line-height: 1.7;
}

/* Colonne Visuelle Droite (Renommée) */
.diag-visual-side { 
    position: relative; 
    width: 100%;
    min-width: 0; /* Indispensable pour éviter le débordement grid */
}

/* --- VISUEL DROIT (IMAGE FULL OPACITÉ) --- */
.visual-card {
    /* Positionnement Absolu pour le Grid Layout */
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important; 
    height: 100% !important;
    
    /* Image de fond */
    background-color: var(--surface); 
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-xl);
    
    /* Flex pour centrer l'icône */
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border);
    z-index: 1;
}

/* ON SUPPRIME LE VOILE BLANC (::before) POUR AVOIR L'IMAGE NETTE */
.visual-card::before {
    display: none; 
}

/* Icône en filigrane (Blanc discret pour aller sur la photo) */
.visual-card i { 
    font-size: 10rem; 
    color: white; /* Blanc au lieu de bleu foncé */
    opacity: 0.15; /* Transparence légère */
    transform: rotate(-10deg);
    position: relative; 
    z-index: 2;
    text-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Ombre pour lisibilité */
}

/* Floating Stats */
.float-stat {
    position: absolute;
    background: white;
    padding: 20px 30px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    color: var(--primary);
    font-size: 1rem;
    bottom: 40px;
    left: -30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 5;
}

.float-icon {
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* --- AUTRES PATHOLOGIES (DESIGN CARTES) --- */
.patho-intro { max-width: 800px; margin: 0 auto 60px; text-align: center; }
.patho-intro h3 { font-size: 2rem; margin-bottom: 15px; color: var(--primary); }
.patho-intro p { font-size: 1.15rem; color: var(--text-muted); }

.patho-grid-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.patho-focus-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 40px 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column;
    height: 100%;
}

.patho-focus-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}

/* Accent bar on top */
.patho-focus-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: var(--primary); transform: scaleX(0); transform-origin: left;
    transition: transform 0.3s ease;
}
.patho-focus-card:hover::before { transform: scaleX(1); }

.patho-icon {
    width: 60px; height: 60px;
    background: var(--surface);
    color: var(--primary);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 25px;
    transition: 0.3s;
}
.patho-focus-card:hover .patho-icon { background: var(--primary); color: white; }

.patho-focus-card h3 { font-size: 1.3rem; margin-bottom: 15px; color: var(--primary); font-weight: 700; }
.patho-focus-card p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 20px; flex-grow: 1; line-height: 1.6; }

.patho-details {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    font-size: 0.9rem;
    color: var(--text-main);
}
.patho-details ul { list-style: none; padding: 0; margin: 0; }
.patho-details li { margin-bottom: 8px; position: relative; padding-left: 15px; }
.patho-details li::before { 
    content: '•'; color: var(--accent); font-weight: bold; 
    position: absolute; left: 0;
}


/* ==========================================================================
   13 | DESIGN SPÉCIFIQUE : MALFAÇONS & LITIGES
   ========================================================================== */

/* --- HERO SPÉCIFIQUE --- */
.litige-hero-subtitle {
    color: rgba(255,255,255,0.95); 
    max-width: 800px; margin: 20px auto 0; 
    font-size: 1.15rem; line-height: 1.6;
}

/* --- INTRO SPLIT --- */
.litige-grid-intro {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}

.alert-box-red {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--error-bg); color: var(--error); 
    padding: 8px 16px; border-radius: 30px; 
    font-weight: 700; text-transform: uppercase; font-size: 0.85rem;
    margin-bottom: 20px;
}

.text-body { font-size: 1.05rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.5rem; }
.text-highlight { font-size: 1.1rem; color: var(--primary); border-left: 4px solid var(--accent); padding-left: 20px; line-height: 1.6; }

/* Visuel Intro */
.visual-card-litige {
    position: relative; height: 400px; width: 100%;
    background-color: var(--surface); background-size: cover; background-position: center;
    border-radius: 24px; box-shadow: var(--shadow-deep);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border: 1px solid var(--border);
}
.visual-card-litige i {
    font-size: 8rem; color: white; opacity: 0.2; position: relative; z-index: 2;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* --- DÉFINITIONS (Cards) --- */
.definitions-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
}

.def-card {
    background: white; padding: 30px; border-radius: 16px;
    border: 1px solid var(--border); position: relative; overflow: hidden;
    transition: transform 0.3s ease;
}
.def-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

.def-card.apparent { border-top: 4px solid var(--accent); }
.def-card.cache { border-top: 4px solid var(--primary); }

.def-icon {
    width: 50px; height: 50px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 20px;
}
.def-card.apparent .def-icon { background: var(--accent-light); color: var(--accent); }
.def-card.cache .def-icon { background: var(--input-bg); color: var(--primary); }

.def-card h4 { font-size: 1.3rem; margin-bottom: 10px; color: var(--primary); }
.def-card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }

/* --- DOMAINES GRID (4 items) --- */
.domaines-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;
}

.domaine-card {
    background: white; padding: 35px; border-radius: 20px;
    border: 1px solid var(--border); transition: all 0.3s ease;
    display: flex; flex-direction: column;
}
.domaine-card:hover {
    border-color: var(--accent); box-shadow: 0 15px 40px -10px rgba(13, 54, 84, 0.1);
}
.domaine-card.pro-card { background: var(--surface); border-color: var(--border-light); } /* Carte Pro distincte */

.domaine-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.domaine-number { font-size: 3rem; font-weight: 900; color: var(--input-bg); line-height: 1; }
.domaine-card:hover .domaine-number { color: var(--accent); opacity: 0.1; }
.domaine-icon { 
    font-size: 2rem; 
    color: var(--primary); 
    transition: color 0.3s ease; /* Ajout d'une transition fluide */
}
.domaine-card:hover .domaine-icon {
    color: var(--accent);
}

.domaine-card h4 { font-size: 1.3rem; margin-bottom: 15px; color: var(--primary); font-weight: 700; }
.domaine-desc { font-size: 1rem; color: var(--text-muted); margin-bottom: 20px; flex-grow: 1; }

.domaine-objectif {
    background: var(--surface-blue); padding: 15px; border-radius: 8px;
    font-size: 0.9rem; color: var(--primary); border-left: 3px solid var(--accent);
}

/* --- STRATÉGIE AMIABLE --- */
.strategie-box {
    background: white; border-radius: 24px; padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid var(--border);
    display: flex; gap: 40px; align-items: center;
}

.strat-icon-side {
    width: 100px; height: 100px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: white; box-shadow: 0 10px 20px rgba(13, 54, 84, 0.2);
}
.strat-content-side h3 { font-size: 1.8rem; margin-bottom: 15px; }
.strat-list { list-style: none; margin-top: 20px; padding: 0; text-align: left; }
.strat-list li {
    margin-bottom: 15px; 
    display: flex; 
    gap: 15px; 
    align-items: flex-start; /* C'est cette ligne qui corrige l'alignement */
    text-align: left;
}
/* Petit ajustement pour aligner l'icône avec la première ligne de texte */
.strat-list i { 
    color: var(--success); 
    margin-top: 5px; 
    flex-shrink: 0; /* Empêche l'icône de s'écraser */
}


/* --- METHODOLOGIE (Steps) --- */
.steps-wrapper {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
}


.step-item { flex: 1; text-align: center; padding: 20px; }
.step-num {
    width: 50px; height: 50px; background: white; border: 2px solid var(--primary);
    color: var(--primary); font-weight: 800; font-size: 1.2rem;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; position: relative; z-index: 2;
}
.step-item:hover .step-num { background: var(--primary); color: white; }

.step-arrow {
    display: flex; align-items: center; justify-content: center; height: 50px;
    color: var(--border-light); font-size: 1.5rem; margin-top: 20px;
}

.step-item h4 { font-size: 1.1rem; margin-bottom: 10px; color: var(--primary); }
.step-item p { font-size: 0.9rem; color: var(--text-muted); }


/* ==========================================================================
   14 | DESIGN SPÉCIFIQUE : RÉCEPTION TRAVAUX
   ========================================================================== */

/* --- HERO & INTRO --- */
.reception-hero-subtitle {
    color: rgba(255,255,255,0.95); 
    max-width: 800px; margin: 20px auto 0; 
    font-size: 1.15rem; line-height: 1.6;
}

.reception-grid-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}

.text-highlight-blue {
    background: var(--surface-blue); border-left: 4px solid var(--accent);
    padding: 20px; border-radius: 8px; margin-top: 25px;
    font-size: 1.05rem; color: var(--primary);
}

/* Visuel Intro */
.visual-side-reception {
    position: relative; height: 400px; width: 100%;
}
.visual-card-reception {
    width: 100%; height: 100%;
    background-color: var(--surface); background-size: cover; background-position: center;
    border-radius: 24px; box-shadow: var(--shadow-deep);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border: 1px solid var(--border);
    position: relative;
}
.visual-card-reception i {
    font-size: 8rem; color: white; opacity: 0.15; position: relative; z-index: 2;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3); transform: rotate(-10deg);
}

/* --- STRATÉGIE (GRID AVANT/APRÈS) --- */
.strategy-grid {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: stretch;
}

.strategy-card {
    background: white; border-radius: 20px; padding: 40px;
    border: 1px solid var(--border); transition: transform 0.3s ease;
    display: flex; flex-direction: column;
}
.strategy-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }

/* Option 2 (Mise en avant) */
.strategy-card.featured {
    border-color: var(--accent);
    box-shadow: 0 10px 40px -5px rgba(50, 149, 189, 0.15);
    background: linear-gradient(to bottom, white 0%, var(--surface) 100%);
}

.card-header-strat { margin-bottom: 20px; }
.strat-icon {
    width: 60px; height: 60px; border-radius: 12px;
    background: var(--surface); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin-bottom: 20px;
}
.strategy-card.featured .strat-icon { background: var(--accent); color: white; }

.strategy-card h4 { font-size: 1.4rem; font-weight: 800; color: var(--primary); margin-bottom: 10px; }

.strat-badge {
    display: inline-block; padding: 4px 12px; border-radius: 20px;
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    background: var(--border); color: var(--text-muted);
}
.strat-badge.badge-accent { background: var(--accent-light); color: var(--accent); }

.strat-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 25px; flex-grow: 1; }

/* Blocs Benefit & Advantage */
.strat-benefit, .strat-method {
    padding: 15px; border-radius: 8px; font-size: 0.95rem; margin-top: auto;
}
.strat-benefit { background: var(--input-bg); display: flex; gap: 10px; align-items: flex-start; }
.strat-benefit i { color: var(--success); margin-top: 4px; }

.strat-method { background: white; border: 1px solid var(--border); color: var(--text-main); margin-bottom: 15px; }

.strat-advantage {
    background: var(--primary); color: white; padding: 20px; border-radius: 12px;
    display: flex; gap: 15px; align-items: flex-start; font-size: 0.95rem;
    box-shadow: 0 5px 15px rgba(13, 54, 84, 0.2);
}
.strat-advantage i { color: #FDBA74; font-size: 1.2rem; margin-top: 2px; }

/* --- CHECKLIST PREMIUM GRID (VERSION SOBRE) --- */
.checklist-premium-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.check-tech-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px 25px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; flex-direction: column;
}

/* Animation Hover : La carte monte et la bordure s'allume (Sans scan) */
.check-tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(13, 54, 84, 0.1);
    border-color: var(--primary); /* Bordure bleu foncé */
}

/* Header de la carte */
.check-header {
    text-align: center; margin-bottom: 25px;
}

.check-icon-box {
    width: 64px; height: 64px;
    background: var(--surface); color: var(--primary);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; margin: 0 auto 15px;
    transition: 0.3s ease;
}

/* Hover : L'icône passe en Bleu Foncé (Var Primary) sans rotation */
.check-tech-card:hover .check-icon-box {
    background: var(--primary); /* Bleu Foncé demandé */
    color: white;
    transform: none; /* Suppression de l'effet miroir */
}

.check-tech-card h4 {
    font-size: 1.2rem; color: var(--primary); font-weight: 800; margin: 0;
}

/* Liste des points */
.check-list-content {
    list-style: none; padding: 0; margin: 0; flex-grow: 1;
}
.check-list-content li {
    font-size: 0.95rem; color: var(--text-muted);
    margin-bottom: 12px; padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
    display: flex; align-items: center; gap: 10px;
}
.check-list-content li:last-child { border-bottom: none; }
.check-list-content i { color: var(--success); font-size: 0.8rem; }


/* ==========================================================================
   15 | DESIGN SPÉCIFIQUE : CONTRE-EXPERTISE SINISTRE
   ========================================================================== */

/* --- HERO & INTRO --- */
.sinistre-hero-subtitle {
    color: rgba(255,255,255,0.95); 
    max-width: 800px; margin: 20px auto 0; 
    font-size: 1.15rem; line-height: 1.6;
}

/* CENTRAGE VERTICAL INTRO */
.intro-content-split {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 4rem; 
    align-items: center; /* Important pour le centrage vertical */
}

/* CLASSE UTILITAIRE POUR CENTRER LES TITRES DE SECTIONS */
.center-block-force {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* --- DOMAINES UX GRID --- */
.sinistre-ux-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.ux-card {
    background: white; border-radius: 16px; padding: 25px;
    border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    display: flex; gap: 20px; align-items: flex-start;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.ux-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(13, 54, 84, 0.08);
    border-color: var(--accent);
}

.ux-icon-box {
    width: 50px; height: 50px; flex-shrink: 0;
    background: var(--surface-blue); color: var(--accent);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; transition: 0.3s;
}
.ux-card:hover .ux-icon-box { background: var(--accent); color: white; }

.ux-content h4 { font-size: 1.1rem; color: var(--primary); font-weight: 700; margin: 0 0 5px 0; }
.ux-content p { font-size: 0.9rem; color: var(--text-muted); margin: 0; line-height: 1.4; }

/* --- CAS CONCRETS --- */
.cases-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}

.case-card {
    background: white; border-radius: 20px; border: 1px solid var(--border);
    overflow: hidden; box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
}
.case-header {
    background: var(--surface); padding: 20px 30px; border-bottom: 1px solid var(--border);
}
.case-header h4 { margin: 0; color: var(--primary); font-size: 1.2rem; font-weight: 800; }

.case-body { padding: 30px; flex-grow: 1; display: flex; flex-direction: column; gap: 20px; }

.problem-block {
    background: var(--error-bg); border-left: 4px solid var(--error); padding: 15px; border-radius: 6px;
}
.problem-block strong { color: var(--error-dark); display: block; margin-bottom: 5px; font-size: 0.95rem; }
.problem-block i { margin-right: 5px; }
.problem-block p { margin: 0; font-size: 0.95rem; color: var(--text-muted); }

.solution-block {
    background: var(--success-bg); border-left: 4px solid #22C55E; padding: 15px; border-radius: 6px;
    margin-top: auto; 
}
.solution-block strong { color: var(--success-dark); display: block; margin-bottom: 5px; font-size: 0.95rem; }
.solution-block i { margin-right: 5px; }
.solution-block p { margin: 0; font-size: 0.95rem; color: var(--text-muted); }

/* --- HONORAIRES (Styles repris de la section 12 automatiquement car mêmes classes) --- */


/* ==========================================================================
   16 | DESIGN SPÉCIFIQUE : CONSTATS & PRÉVENTION
   ========================================================================== */

/* --- HERO --- */
.constat-hero-subtitle {
    color: rgba(255,255,255,0.95); 
    max-width: 800px; margin: 20px auto 0; 
    font-size: 1.15rem; line-height: 1.6;
}

/* --- GRILLE DES MISSIONS (Flexbox avancé pour alignement) --- */
.missions-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    align-items: stretch; /* Force les colonnes à avoir la même hauteur */
}

.mission-card {
    background: white; border-radius: 20px; border: 1px solid var(--border);
    overflow: hidden; 
    /* Structure Flex verticale pour gérer les espaces */
    display: flex; flex-direction: column; 
    height: 100%; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mission-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(13, 54, 84, 0.1);
    border-color: var(--primary);
}

/* 1. HEADER (Hauteur auto) */
.mission-header {
    padding: 30px 30px 10px 30px; display: flex; align-items: center; gap: 15px;
}
.mission-icon {
    width: 50px; height: 50px; background: var(--surface); color: var(--primary);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
}
.mission-card:hover .mission-icon { background: var(--primary); color: white; }
.mission-header h3 { font-size: 1.3rem; margin: 0; font-weight: 800; color: var(--primary); }

/* 2. CONTEXTE */
.mission-context { 
    padding: 0 30px 20px 30px; 
    /* MODIFICATION : On augmente à 160px pour être sûr de couvrir 3-4 lignes de texte */
    min-height: 90px; 
    display: flex; flex-direction: column; justify-content: flex-start;
}
.mission-context p { color: var(--text-muted); font-size: 1rem; margin: 0; line-height: 1.5; }

/* 3. DETAILS WRAPPER (Contient Bleu + Vert) */
.mission-details {
    display: flex; flex-direction: column;
    /* On s'assure que ce bloc prend aussi de la place si nécessaire */
    flex-grow: 1; 
}

/* BLOC BLEU (S'étire pour pousser le vert en bas) */
.detail-block.mission {
    background: var(--surface-blue); border-top: 1px solid var(--accent-light);
    padding: 20px 30px;
    /* FLEX GROW 1 : Le bloc bleu s'étire. 
       Résultat : Le bloc vert est poussé tout en bas de la carte. */
    flex-grow: 1;
    display: flex; flex-direction: column; justify-content: flex-start;
}
.detail-block.mission strong { display: block; color: var(--accent); margin-bottom: 10px; font-size: 0.95rem; }
.detail-block.mission ul { padding-left: 20px; margin: 0; color: var(--text-main); font-size: 0.95rem; }
.detail-block.mission li { margin-bottom: 5px; }

/* BLOC VERT (Fixe en bas) */
.detail-block.benefit {
    background: var(--success-bg); border-top: 1px solid var(--success-bg);
    padding: 20px 30px;
    margin-top: auto; /* Sécurité supplémentaire pour coller au bas */
}
.detail-block.benefit strong { display: block; color: var(--success-dark); margin-bottom: 5px; font-size: 0.95rem; }
.detail-block.benefit p { margin: 0; color: #14532D; font-size: 0.95rem; font-style: italic; }

/* CTA WRAPPER */
.mission-cta-wrapper {
    padding: 20px 30px 30px 30px;
    background: white;
    text-align: center;
    border-top: 1px dashed var(--border);
}

.btn-card-action {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 25px;
    background-color: white;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-decoration: none;
    width: 100%; justify-content: center;
}

.btn-card-action:hover {
    background-color: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(13, 54, 84, 0.2);
}
.btn-card-action i { transition: transform 0.3s ease; }
.btn-card-action:hover i { transform: translateX(5px); }


/* --- SECTION "POURQUOI NOUS MANDATER" (Centrage Corrigé) --- */
.why-us-box {
    text-align: center; /* Force le centrage de tout le contenu textuel */
    width: 100%;
}

.why-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
    text-align: left; /* On remet le texte des items à gauche ou centré selon préférence */
}
/* Si vous voulez que les items eux-mêmes soient centrés : */
.why-item {
    text-align: center; padding: 20px;
}

.why-icon {
    width: 70px; height: 70px; background: white; border: 2px solid var(--border);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: var(--primary); margin: 0 auto 20px;
    transition: 0.3s;
}
.why-item:hover .why-icon { border-color: var(--accent); color: var(--accent); transform: scale(1.1); }

.why-item h4 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.why-item p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; }


/* ==========================================================================
   17 | PAGES SPÉCIFIQUES : RÉFÉRENCES
   ========================================================================== */

/* A. Archives Références */

.references-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 1; transform: translateY(0); }
.references-grid.loading-fade { opacity: 0; transform: translateY(30px); pointer-events: none; }
.reference-card { background: white; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); height: 100%; display: flex; flex-direction: column; }
.reference-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -10px rgba(13, 54, 84, 0.15); border-color: var(--accent); }
.reference-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.reference-thumb { position: relative; height: 220px; overflow: hidden; }
.reference-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.reference-card:hover .reference-thumb img { transform: scale(1.05); }
.reference-badge { position: absolute; top: 15px; right: 15px; background: white; color: var(--primary); font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-transform: uppercase; }
.reference-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.reference-meta { display: flex; gap: 15px; font-size: 0.8rem; color: var(--accent); font-weight: 600; margin-bottom: 12px; text-transform: uppercase; }
.reference-meta i { margin-right: 5px; }
.reference-card h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 12px; line-height: 1.4; color: var(--primary); }
.reference-card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; flex-grow: 1; }
.reference-card .btn-text { font-weight: 700; color: var(--primary); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; transition: 0.2s; margin-top: auto; }
.reference-card:hover .btn-text { color: var(--accent); gap: 12px; }

/* B. Single Références */
.case-study-box { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 40px; background: var(--surface); border-radius: 16px; padding: 30px; border: 1px solid var(--border); }
.case-part h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.case-part.problem h3 { color: var(--error); }
.case-part.problem h3 i { background: rgba(239, 68, 68, 0.1); padding: 8px; border-radius: 50%; }
.case-part.solution h3 { color: var(--success); }
.case-part.solution h3 i { background: rgba(16, 185, 129, 0.1); padding: 8px; border-radius: 50%; }
.case-part p { font-size: 0.95rem; line-height: 1.6; color: var(--text-main); margin: 0; }
.project-gallery { margin-top: 50px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.gallery-item { display: block; height: 180px; border-radius: 8px; overflow: hidden; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: transform 0.3s; }
.gallery-item:hover { transform: scale(1.02); z-index: 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.photo-badge { position: absolute; top: 15px; left: 15px; padding: 5px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; color: white; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.2); letter-spacing: 0.5px; }
.badge-avant { background-color: rgba(30, 41, 59, 0.85); border: 1px solid rgba(255,255,255,0.2); }
.badge-apres { background-color: var(--success); border: 1px solid rgba(255,255,255,0.2); }
.project-card-widget { background: white; border: 1px solid var(--border); border-top: 4px solid var(--primary); }
.project-details-list { list-style: none; padding: 0; margin: 0; }
.project-details-list li { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--input-bg); }
.project-details-list li:last-child { border-bottom: none; }
.project-details-list .label { font-weight: 600; font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.project-details-list .label i { color: var(--accent); }
.project-details-list .value { font-weight: 700; color: var(--primary); font-size: 0.95rem; text-align: right; }
.post-navigation-grid { display: flex; justify-content: space-between; align-items: center; }
.nav-prev a, .nav-next a { text-decoration: none; display: block; }
.nav-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; margin-bottom: 5px; display: block; transition: 0.2s; }
.post-navigation-grid h4 { margin: 0; font-size: 1rem; color: var(--primary); transition: 0.2s; }
.nav-prev:hover h4, .nav-next:hover h4 { color: var(--accent); }
.nav-prev:hover .nav-label { transform: translateX(-5px); }
.nav-next:hover .nav-label { transform: translateX(5px); }

/* Conteneur Scrollable (Pour mobile) */
.reference-filters-scroll-wrapper {
    overflow-x: auto;
    padding-bottom: 10px; /* Espace pour la scrollbar éventuelle */
    -webkit-overflow-scrolling: touch;
    text-align: center;
}

/* Liste des filtres */
.reference-filters-list {
    display: inline-flex; /* Centré mais flexible */
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    white-space: nowrap; /* Empêche le retour à la ligne sur mobile */
}

/* Style des boutons (Pilules) */
.reference-filter-pill {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    background: white;
    border: 1px solid var(--border);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    margin-top: 15px;
}

.reference-filter-pill:hover {
    border-color: var(--accent);
    color: var(--primary);
    transform: translateY(-2px);
}

/* État Actif */
.reference-filter-pill.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 5px 15px rgba(13, 54, 84, 0.2);
}


/* ==========================================================================
   18 | PAGES SPÉCIFIQUES : GUIDES
   ========================================================================== */

/* A. ARCHIVES*/

/* Hero */
.guides-hero-extended { background-color: var(--primary); position: relative; padding: 20px 0 80px; overflow: hidden; text-align: center; color: white; transition: padding 0.3s ease; }
.guides-hero-extended .icon-bg-1 { 
    position: absolute; top: -30px; left: -30px; font-size: 10rem;
}
.guides-hero-extended .icon-bg-2 { 
    position: absolute; bottom: -20px; right: -20px; font-size: 10rem;
}
.guides-tabs-container { margin-top: 20px; border-bottom: 1px solid rgba(255,255,255,0.15); position: relative; max-width: 1000px; margin-left: auto; margin-right: auto; }
.guides-tabs { display: flex; justify-content: center; gap: 20px; position: relative; padding-bottom: 0; }
.tab-item { color: rgba(255,255,255,0.7); font-weight: 600; font-size: 0.9rem; padding: 12px 10px; text-decoration: none; transition: color 0.3s ease; position: relative; z-index: 2; cursor: pointer; }
.tab-item:hover, .tab-item.active { color: white; }
.nav-marker { position: absolute; bottom: -1px; left: 0; height: 3px; background-color: var(--accent); border-radius: 3px 3px 0 0; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; z-index: 1; }

/* Grille & Transition CORRECTIVE */
.guides-floating-content { position: relative; z-index: 10; margin-top: -20px; padding-bottom: 80px; }
.guides-grid-layout { 
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 30px; 
    /* CORRECTIF : Transform ajouté pour éviter le saut visuel */
    transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    opacity: 1; transform: translateY(0); 
}
.loading-fade { opacity: 0; transform: translateY(30px); pointer-events: none; }

/* Carte Guide */
.guide-card-premium { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 40px -10px rgba(0,0,0,0.1); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); height: 100%; display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,0.02); }
.guide-card-premium:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -12px rgba(13, 54, 84, 0.2); }
.guide-link-wrapper { text-decoration: none !important; color: inherit; display: flex; flex-direction: column; height: 100%; }
.guide-image-box { height: 200px; position: relative; overflow: hidden; }
.guide-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; transform: scale(1.05); }
.guide-card-premium:hover .guide-thumb { transform: scale(1.05); }
.guide-badge { position: absolute; top: 15px; left: 15px; background: var(--primary); color: white; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.image-overlay { position: absolute; inset: 0; background: rgba(13, 54, 84, 0.1); transition: background 0.3s; }
.guide-card-premium:hover .image-overlay { background: transparent; }
.guide-content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
.guide-content h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.4; color: var(--primary); margin-bottom: 12px; transition: color 0.2s; }
.guide-card-premium:hover h3 { color: var(--accent); }
.guide-content p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.guide-meta { padding-top: 15px; border-top: 1px solid var(--input-bg); display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; font-weight: 600; color: var(--text-meta); text-transform: uppercase; }
.meta-time i { color: var(--accent); margin-right: 5px; }
.read-btn { color: var(--primary); display: flex; align-items: center; gap: 5px; transition: 0.2s; }
.guide-card-premium:hover .read-btn { color: var(--accent); transform: translateX(5px); }

.type-guides .elementor-post__title::before, .post-type-archive-guides .post .entry-title::before, article.type-guides h2::before {
    content: "DOSSIER EXPERT"; display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--brand-orange); margin-bottom: 5px; text-transform: uppercase;
}
.elementor-post__title a { display: inline-block; margin-top: 2px; }

/* B. Single Guide */
.guide-hero { background: var(--surface); padding: 0px 0 40px; border-bottom: 1px solid var(--border); margin-bottom: 50px; }
.guide-category { color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; }
.guide-meta-top { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.reading-time { background: white; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; color: var(--text-muted); border: 1px solid var(--border); }
.guide-hero h1 { font-size: 2.8rem; color: var(--primary); margin-bottom: 15px; }
.guide-featured-image img { width: 100%; height: auto; border-radius: 12px; margin-bottom: 40px; }
.entry-content { font-size: 1.1rem; line-height: 1.8; color: var(--text-main); }
.entry-content h2 { margin-top: 40px; color: var(--primary); }
.entry-content ul { list-style: disc; padding-left: 20px; margin-bottom: 20px; }
.guide-sidebar { position: relative; }
.sticky-wrapper { position: sticky; top: 120px; }
.sidebar-widget { background: white; border: 1px solid var(--border); padding: 30px; border-radius: 12px; margin-bottom: 30px; }
.sidebar-widget h3 { font-size: 1.1rem; margin-bottom: 20px; border-bottom: 2px solid var(--input-bg); padding-bottom: 10px; }
.cta-widget { background: var(--primary); color: white; text-align: center; border: none; }
.cta-widget h3 { color: white; border-color: rgba(255,255,255,0.1); }
.cta-widget p { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin-bottom: 25px; }
.pdf-download-box { display: flex; align-items: center; gap: 20px; background: var(--input-bg); padding: 25px; border-radius: 12px; margin-top: 50px; }
.pdf-icon { font-size: 2.5rem; color: var(--error); }
.pdf-text h4 { margin: 0 0 5px; font-size: 1rem; }
.pdf-text p { margin: 0; font-size: 0.85rem; color: var(--text-muted); }


/* ==========================================================================
   19 | PAGES SPÉCIFIQUES : GLOSSAIRE (LEXIQUE)
   ========================================================================== */

/* --- A. ARCHIVE GLOSSAIRE --- */
.glossaire-hero-premium {
    background-color: var(--primary); position: relative; padding: 20px 0 40px; 
    overflow: hidden; text-align: center; color: white;
}
.glossaire-hero-premium .hero-bg-icons { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    pointer-events: none; opacity: 0.05; 
}
.glossaire-hero-premium .icon-bg-1 { 
    position: absolute; top: -30px; left: -30px; font-size: 10rem; 
}
.glossaire-hero-premium .icon-bg-2 { 
    position: absolute; bottom: -20px; right: -20px; font-size: 10rem; 
}
.glossaire-hero-premium h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: 5px; color: white !important; }
.glossaire-hero-premium .hero-subtitle { color: var(--accent-light); font-size: 0.95rem; margin-bottom: 25px; font-weight: 300; }

/* Recherche */
.premium-search-form {
    max-width: 600px; margin: 0 auto; background: white; border-radius: 8px; padding: 4px;
    display: flex; align-items: center; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; border: 2px solid transparent; 
}
.premium-search-form:hover, .premium-search-form:focus-within { transform: scale(1.01); box-shadow: 0 15px 35px -10px rgba(50, 149, 189, 0.25); }
.search-icon { color: var(--primary); font-size: 1.1rem; margin-left: 12px; margin-right: 8px; flex-shrink: 0; transition: color 0.3s ease; }
.premium-search-form:hover .search-icon, .premium-search-form:focus-within .search-icon { color: var(--accent); }
.premium-search-form input { flex: 1; border: none; padding: 8px 0; font-size: 1rem; outline: none; background: transparent; color: var(--primary); font-weight: 500; min-width: 0; }
.clear-search-btn { background: none; border: none; color: var(--primary); font-size: 1.1rem; margin-right: 5px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.clear-search-btn:hover { color: var(--error); background-color: rgba(239, 68, 68, 0.1); }

.submit-btn-glossaire {
    background: var(--primary); color: white; border: none; padding: 0 20px; height: 40px;
    border-radius: 6px; font-weight: 600; cursor: pointer; transition: background 0.2s;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: auto !important; 
}
.submit-btn-glossaire:hover { background: var(--accent); }
.submit-btn-glossaire .btn-text { display: block; }
.submit-btn-glossaire .btn-icon { display: none; }

/* Navigation Alphabétique */
.alphabet-nav-sticky {
    position: -webkit-sticky; position: sticky; top: 70px; 
    background: rgba(255,255,255,0.98); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border); z-index: 998; padding: 10px 0;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.03); margin-top: 0 !important;
}
.alphabet-scroll-container { position: relative; display: flex; align-items: center; max-width: 100%; }
.alphabet-list {
    display: flex; gap: 5px; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 10px 20px; margin: 0 auto; list-style: none; align-items: center; 
    justify-content: flex-start; /* MOBILE FIRST : Alignement au début pour permettre le scroll */
    width: 100%;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}
.alphabet-list::-webkit-scrollbar { display: none; }

.scroll-fade-left, .scroll-fade-right { position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; z-index: 25; display: block !important; }
.scroll-fade-left { left: 0px; background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)); }
.scroll-fade-right { right: 0; background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0)); }

.alpha-link {
    display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 8px; color: var(--text-muted); font-weight: 700; font-size: 0.85rem;
    transition: all 0.2s; text-decoration: none; line-height: 1; flex-shrink: 0; position: relative; z-index: 10;
}
.alpha-link:hover { background: var(--input-bg); color: var(--accent); }
.alpha-link.active { background: var(--primary); color: white; box-shadow: 0 3px 8px rgba(13, 54, 84, 0.25); transform: scale(1.05); }
.all-link { width: auto; padding: 0 12px; background: var(--input-bg); font-size: 0.75rem; position: sticky !important; left: 0; z-index: 30 !important; margin-right: 5px; box-shadow: 2px 0 5px rgba(0,0,0,0.05); }

/* Résultats */
#resultats { scroll-margin-top: 150px; }
.glossaire-results-section { padding: 50px 0; background: var(--surface); min-height: 60vh; position: relative; }
.results-header { display: flex; align-items: baseline; gap: 15px; margin-bottom: 30px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
.results-header h2 { color: var(--primary); font-size: 1.8rem; margin: 0; }
.count-badge { color: var(--text-muted); font-weight: 500; font-size: 0.95rem; }

.premium-grid {
    display: grid;  grid-template-columns: repeat(2, 1fr); gap: 30px;
    transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1; transform: translateY(0); }
    
.premium-grid.loading-fade { opacity: 0; transform: translateY(30px); pointer-events: none; }

.premium-card {
    background: white; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
    position: relative; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.premium-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-color: rgba(50, 149, 189, 0.3); }
.card-link-wrapper { display: flex; text-decoration: none !important; padding: 25px; height: 100%; gap: 20px; }
.card-hover-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); transform: translateX(-4px); transition: transform 0.3s; }
.premium-card:hover .card-hover-bar { transform: translateX(0); }
.card-icon-box { width: 60px; height: 60px; flex-shrink: 0; background: var(--surface); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.5rem; transition: 0.3s; }
.premium-card:hover .card-icon-box { background: var(--primary); color: white; }
.card-content { flex: 1; display: flex; flex-direction: column; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
.card-header h3 { margin: 0; font-size: 1.25rem; color: var(--primary); font-weight: 700; transition: color 0.2s; }
.premium-card:hover h3 { color: var(--accent); }
.theme-chip { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; background: var(--accent-light); color: var(--accent); padding: 3px 10px; border-radius: 20px; text-decoration: none; transition: 0.2s; position: relative; z-index: 5; }
.theme-chip:hover { background: var(--accent); color: white; }
.card-excerpt { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 15px; flex-grow: 1; }
.read-more { font-size: 0.9rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; transition: 0.2s; }
.premium-card:hover .read-more { color: var(--accent); }

/* Badge Définition */
.type-glossaire .elementor-post__title::before, .post-type-archive-glossaire .post .entry-title::before, article.type-glossaire h2::before {
    content: "DÉFINITION"; display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--accent); margin-bottom: 5px; text-transform: uppercase;
}

/* --- B. SINGLE GLOSSAIRE --- */
.glossaire-container { max-width: 800px; margin: 0 auto; padding: 0px 20px; }
.glossaire-header { text-align: center; margin-bottom: 40px; }
.glossaire-label { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; color: var(--accent); font-weight: 700; display: block; margin-bottom: 10px; }
.glossaire-header h1 { font-size: 2.5rem; color: var(--primary); line-height: 1.2; }
.seo-definition-box { background-color: var(--surface); border-left: 5px solid var(--accent); padding: 30px; border-radius: 8px; margin-bottom: 40px; }
.seo-label { display: block; font-weight: 700; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 10px; text-transform: uppercase; }
.seo-text { font-size: 1.1rem; font-weight: 500; color: var(--text-main); margin: 0; line-height: 1.6; }
.glossaire-content { font-size: 1.05rem; color: var(--text-main); line-height: 1.8; margin-bottom: 50px; }
.glossaire-thumbnail img { width: 100%; height: auto; border-radius: 12px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.expert-box { display: flex; gap: 20px; background-color: rgba(50, 149, 189, 0.1); padding: 30px; border-radius: 16px; border: 1px solid rgba(50, 149, 189, 0.2); align-items: flex-start; }
.expert-icon { background: var(--accent); color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.related-guide-box { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--border); text-align: center; }
.guide-tag { background: var(--primary); color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; display: inline-block; margin-bottom: 15px; }



/* ==========================================================================
   20 | PAGES SPÉCIFIQUES : CABINET
   ========================================================================== */


.cabinet-section { padding: 80px 0; border-bottom: 1px solid var(--border); background-color: white; }
.cabinet-title { font-size: 2rem; color: var(--primary); margin-bottom: 2.5rem; position: relative; display: inline-block; font-weight: 800; }
.cabinet-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--accent); margin: 0.8rem 0 0; border-radius: 2px; }
.cabinet-title.title-center::after { margin-left: auto; margin-right: auto; }

.bio-grid { display: grid; grid-template-columns: 350px 1fr; gap: 4rem; align-items: flex-start; }
.bio-photo { width: 100%; border-radius: 16px; box-shadow: var(--shadow-deep); aspect-ratio: 3/4; object-fit: cover; border: 1px solid var(--border); }
.bio-label { margin-top: 1.5rem; text-align: center; color: var(--text-muted); font-size: 0.95rem; background: var(--surface); padding: 10px; border-radius: 8px; border: 1px solid var(--border); }
.competence-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 10px; }
details.chipset { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: 0.3s; }
details.chipset[open] { background: white; border-color: var(--accent); box-shadow: 0 4px 15px rgba(50, 149, 189, 0.1); }
summary.chip-header { padding: 15px 20px; cursor: pointer; font-weight: 700; color: var(--primary); display: flex; align-items: center; justify-content: space-between; list-style: none; }
summary.chip-header:hover { color: var(--accent); }
summary.chip-header::-webkit-details-marker { display: none; }
summary.chip-header::after { content: '+'; font-size: 1.5rem; color: var(--accent); font-weight: 400; line-height: 1; }
details[open] summary.chip-header::after { content: '-'; }
.chip-content { padding: 0 20px 20px 20px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; animation: slideDown 0.3s ease-out; }
.vision-section { background-color: var(--surface); text-align: center; }
.vision-box { max-width: 800px; margin: 0 auto; position: relative; }
.quote-icon { font-size: 4rem; color: var(--accent); opacity: 0.2; line-height: 1; margin-bottom: -20px; }
.vision-quote { font-size: 1.4rem; font-style: italic; font-weight: 500; color: var(--primary); margin-bottom: 2rem; line-height: 1.5; }
.vision-separator { height: 3px; width: 80px; background: var(--accent); margin: 0 auto; border-radius: 2px; }
.signature-box { margin-top: 30px; text-align: right; padding-right: 40px; }
.signature-img { width: 180px; height: auto; opacity: 1; transform: rotate(-8deg) scale(2); display: inline-block; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 20px; }
.value-card { background: white; padding: 35px 30px; border-radius: 16px; border: 1px solid var(--border); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 4px 6px rgba(0,0,0,0.02); display: flex; flex-direction: column; height: 100%; }
.value-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(13, 54, 84, 0.1); border-color: var(--accent); }
.card-header-flex { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; }
.value-icon-box { width: 60px; height: 60px; flex-shrink: 0; background: var(--surface-blue); color: var(--accent); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: all 0.3s ease; }
.value-card:hover .value-icon-box { background: var(--accent); color: white; }
.value-card h3 { font-size: 1.25rem; font-weight: 800; color: var(--primary); margin: 0; line-height: 1.3; }
.card-body-content { display: flex; flex-direction: column; flex-grow: 1; text-align: justify; }
.value-card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
.card-bottom-push { margin-top: auto; padding-top: 20px; border-top: 1px dashed var(--border); }
.pour-vous-txt { font-size: 0.9rem; color: var(--primary); margin: 0 !important; text-align: justify; }
.trust-section { padding: 60px 0; background-color: var(--surface); border-top: 1px solid var(--border); text-align: center; }
.trust-grid { display: flex; justify-content: center; align-items: center; gap: 50px; flex-wrap: wrap; margin-top: 40px; opacity: 0.6; transition: 0.3s; }
.trust-grid:hover { opacity: 1; }
.trust-logo { max-height: 50px; width: auto; max-width: 150px; filter: grayscale(100%); transition: all 0.3s ease; }
.trust-logo:hover { filter: grayscale(0%); transform: scale(1.05); }
.map-wrapper-redesign { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 50px; align-items: center; }
.zone-dept-list { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zone-item { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
.zone-badge { background: var(--border); color: var(--text-muted); padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; min-width: 35px; text-align: center; font-weight: 700; transition: 0.2s; }
.zone-item.active-zone { color: var(--primary); }
.zone-item.active-zone .zone-badge { background: var(--primary); color: white; }
.zone-item:hover, .zone-item.is-hovered { background: var(--surface-blue); border-color: var(--accent); color: var(--primary); transform: translateX(5px); }
.zone-item:hover .zone-badge, .zone-item.is-hovered .zone-badge { background: var(--accent); color: white; }
.map-container-interactive { position: relative; width: 100%; min-height: 400px; background: var(--surface); border-radius: 20px; padding: 20px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#france-map-svg { width: 100%; height: 100%; display: flex; justify-content: center; z-index: 2; position: relative; }
#france-map-svg svg { max-height: 550px; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.05)); }
.map-watermark-logo { position: absolute; bottom: 20px; right: 20px; width: 50px; height: auto; opacity: 1; z-index: 1; pointer-events: none; }
.map-legend { margin-top: 20px; list-style: none; padding: 0; }
.map-legend li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-main); font-weight: 500; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-siege { background-color: var(--primary); }
.dot-covered { background-color: var(--accent); }


/* ==========================================================================
   21 | PORTAIL : ZONE D'INTERVENTION
   ========================================================================== */

.ibaix-split-container { display: flex; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; height: calc(100vh - 100px); min-height: 600px; overflow: hidden; }
.split-pane { position: relative; height: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); cursor: pointer; overflow: hidden; text-decoration: none !important; }
.split-pane::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); opacity: 0; transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); z-index: 4; pointer-events: none; }
.split-left { background-color: var(--primary); color: white !important; }
.split-left:hover, .split-left:visited, .split-left:active { color: white !important; }
.split-left-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://ibaix.fr/wp-content/uploads/conseils-conseils-expert-ibaix.webp'); background-size: cover; background-position: center; opacity: 0.15; transition: transform 0.8s ease; z-index: 1; }
.split-right { background-color: var(--surface); color: var(--primary); position: relative; }
.split-right-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://ibaix.fr/wp-content/uploads/conseils-lexique-technique-ibaix.webp'); background-size: cover; background-position: center; opacity: 0.05; transition: transform 0.8s ease; z-index: 1; }
.split-left:hover .split-left-bg, .split-right:hover .split-right-bg { transform: scale(1.05); opacity: 0.2; }
.split-content { position: relative; z-index: 3; max-width: 550px; padding: 2rem; transform: translateY(0); transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.split-icon { font-size: 4rem; margin-bottom: 1.5rem; display: inline-block; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.split-pane:hover { flex: 1.5; opacity: 1; z-index: 10; }
.split-pane:not(:hover)::before { opacity: 1; }
.split-pane:hover .split-icon { transform: translateY(-10px) scale(1.1); color: var(--accent); }
.split-subtitle { display: block; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; font-weight: 700; margin-bottom: 1rem; opacity: 0.7; }
.split-title { font-size: 3rem; font-weight: 800; margin: 0 0 1.5rem 0; line-height: 1.1; color: inherit; }
.split-desc { font-size: 1.15rem; line-height: 1.6; margin-bottom: 2.5rem; opacity: 0.85; font-weight: 400; max-width: 400px; margin-left: auto; margin-right: auto; }
.btn-ibaix { display: inline-block; padding: 15px 35px; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; }
.btn-left { border: 2px solid var(--accent); color: white; background: transparent; }
.btn-left:hover { background: var(--accent); color: white; box-shadow: 0 10px 25px rgba(50, 149, 189, 0.3); }
.btn-right { background: var(--primary); color: white; border: 2px solid var(--primary); }
.btn-right:hover { background: transparent; color: var(--primary); }
.zones-fullscreen-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); width: 100vw; height: calc(100vh - 100px); min-height: 600px; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.zone-tile { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; text-decoration: none !important; border-right: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); background-color: var(--primary); }
.zone-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transform: scale(1); transition: opacity 0.6s ease-in-out, transform 2.5s cubic-bezier(0.1, 0.5, 0.1, 1); z-index: 1; }
.zone-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 2; pointer-events: none; }
.dept-svg-layer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85); width: 80%; height: 80%; z-index: 3; pointer-events: none; opacity: 0.15; transition: opacity 0.6s ease; }
.dept-svg-layer svg { width: 100%; height: 100%; filter: drop-shadow(0 0 5px rgba(255,255,255,0.05)); }
.zone-content { position: relative; z-index: 10; color: white; padding: 20px; width: 100%; transform: translateY(20px); transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.zone-number { display: block; font-size: 5rem; font-weight: 800; line-height: 1; margin-bottom: 10px; opacity: 0.15; color: white; transition: all 0.5s ease; }
.zone-name { font-size: 1.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin: 0; color: white !important; text-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.zone-hidden-info { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.6s ease; }
.btn-explore { display: inline-block; margin-top: 25px; padding: 12px 30px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: white; background: rgba(255,255,255,0); transition: background 0.4s ease-out, border-color 0.4s ease, transform 0.4s ease; }
.zone-tile:hover .zone-bg, .zone-tile.hover-active .zone-bg { opacity: 0.5; transform: scale(1.1); }
.zone-tile:hover .dept-svg-layer, .zone-tile.hover-active .dept-svg-layer { opacity: 0.3; }
.zone-tile:hover .dept-svg-layer path, .zone-tile.hover-active .dept-svg-layer path { stroke: rgba(255,255,255,0.6) !important; stroke-width: 1.5px !important; }
.zone-tile:hover .zone-number, .zone-tile.hover-active .zone-number { opacity: 0.5; color: white; transform: translateY(-10px); text-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.zone-tile:hover .zone-content, .zone-tile.hover-active .zone-content { transform: translateY(-10px); }
.zone-tile:hover .zone-hidden-info, .zone-tile.hover-active .zone-hidden-info { max-height: 100px; opacity: 1; }
.zone-tile:hover .btn-explore, .zone-tile.hover-active .btn-explore { background: rgba(255,255,255,0.15); border-color: white; }

/* ==========================================================================
   22 | PAGES DEPARTEMENTS
   ========================================================================== */
.secteur-hero { padding: 20px 0 80px !important; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; position: relative; overflow: hidden; text-align: center; }
.secteur-bg-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.3; pointer-events: none; }
.secteur-badge { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: var(--accent); padding: 5px 15px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; display: inline-block; margin-bottom: 20px; }
.secteur-hero h1 { font-size: 3rem; margin-bottom: 15px; color: white !important; }
.secteur-subtitle { font-size: 1.2rem; color: var(--border-light); max-width: 600px; margin: 0 auto 40px; }
.secteur-actions { display: flex; justify-content: center; gap: 20px; position: relative; z-index: 5; }
.secteur-intro { background: white; }
.intro-box { max-width: 800px; margin: 0 auto; text-align: center; }
.intro-box h2 { color: var(--primary); font-size: 2rem; margin-bottom: 20px; }
.lead-text { font-size: 1.1rem; line-height: 1.8; color: var(--text-main); font-weight: 500; }
.secteur-services { padding-bottom: 80px; background: white; }
.services-grid-local { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 30px; }
.service-card-local { background: var(--surface); border: 1px solid var(--border); padding: 30px; border-radius: 12px; text-align: center; transition: transform 0.3s; }
.service-card-local:hover { transform: translateY(-5px); border-color: var(--accent); }
.service-card-local .icon-box { width: 60px; height: 60px; background: white; color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.service-card-local h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 10px; }
.service-card-local p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
.hubs-box { margin-top: 40px; background: var(--surface); padding: 25px; border-radius: 12px; border: 1px solid var(--border); }
.hubs-box h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 15px; }
.hubs-list { display: flex; flex-wrap: wrap; gap: 10px; }
.hub-tag { background: white; border: 1px solid var(--border); padding: 8px 15px; border-radius: 50px; font-size: 0.9rem; color: var(--text-muted); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.hub-tag i { color: var(--accent); }
a.hub-tag:hover { border-color: var(--accent); color: var(--primary); background-color: white; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(50, 149, 189, 0.15); transition: all 0.3s ease; }
.map-sidebar-widget { background: white; padding: 20px; border-radius: 16px; border: 1px solid var(--border); text-align: center; }
/* MAILLAGE LOCAL (Départements & Villes) */
.services-grid-local {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.service-tag-link {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 12px 15px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 0.9rem;
    transition: 0.2s;
}

.service-tag-link i {
    color: var(--accent);
}

.service-tag-link:hover {
    background: white;
    border-color: var(--primary);
    color: var(--primary);
    transform: translateX(5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ==========================================================================
   23 | PAGE 404
   ========================================================================== */

/* Layout Fixe */
body.error404, html.error404 {
    overflow: hidden !important; height: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}
main#primary.page-404-content {
    position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important;
    margin: 0 !important; padding: 0 !important; z-index: 10000; background-color: var(--surface); display: block !important;
}
.bg-grid-404 {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(13, 54, 84, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 54, 84, 0.03) 1px, transparent 1px);
    background-size: 40px 40px; z-index: -1; pointer-events: none;
}
.tech-marker { position: fixed; width: 20px; height: 20px; border: 2px solid var(--primary); opacity: 0.3; pointer-events: none; z-index: 1; }
.tech-marker.tl { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.tech-marker.tr { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.tech-marker.bl { bottom: 20px; left: 20px; border-right: none; border-top: none; }
.tech-marker.br { bottom: 20px; right: 20px; border-left: none; border-top: none; }

.error-container {
    position: fixed !important; top: 50% !important; left: 0 !important; width: 100% !important; transform: translateY(-50%) !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    text-align: center !important; margin: 0 !important; padding: 0 20px !important; z-index: 10;
}

.error-wrapper { position: relative; display: inline-block; margin-bottom: 1rem; z-index: 5; }
.error-code-text {
    font-size: clamp(8rem, 20vw, 15rem); font-weight: 900; line-height: 0.9; color: transparent;
    -webkit-text-stroke: 3px var(--primary); position: relative; z-index: 2; letter-spacing: -0.05em;
}
.error-code-text::before {
    content: '404'; position: absolute; top: 10px; left: 10px; color: rgba(13, 54, 84, 0.03); -webkit-text-stroke: 0; z-index: -1;
}

.scanner-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 10; pointer-events: none; }
#error404 .scan-line {
    position: absolute; top: 0; left: -100%; width: 80%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(50, 149, 189, 0.1) 50%, rgba(50, 149, 189, 0.3) 90%, var(--accent) 100%);
    border-right: 3px solid var(--accent); animation: scanning 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; opacity: 1;
}

.status-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--accent); background: rgba(50, 149, 189, 0.08);
    padding: 6px 12px; border-radius: 4px; border: 1px solid rgba(50, 149, 189, 0.2); display: inline-block; margin-bottom: 2rem;
    text-transform: uppercase; letter-spacing: 1px; animation: pulse 2s infinite;
}
.error-container h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin-bottom: 1.5rem; color: var(--primary); }
.error-desc { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 3rem; line-height: 1.6; }
.actions-404 { display: flex; justify-content: center; width: 100%; }
.actions-404 .btn-primary { padding: 16px 45px; font-size: 1.1rem; box-shadow: 0 10px 30px rgba(13, 54, 84, 0.2); }
.tech-footer-line {
    position: fixed; bottom: 30px; left: 0; width: 100%; text-align: center; font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem; color: var(--text-muted); opacity: 0.5; pointer-events: none; z-index: 20;
}


/* ==========================================================================
   25 | TRUMPS : RESPONSIVE & DESKTOP OVERRIDES (FINAL V2)
   ========================================================================== */

/* Animations Utils */
.reveal-on-scroll { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); will-change: opacity, transform; }
.reveal-on-scroll.is-visible { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; }
.delay-100 { transition-delay: 0.1s; } .delay-200 { transition-delay: 0.2s; } .delay-300 { transition-delay: 0.3s; }


.fade-in { animation: fadeIn 0.8s ease-out forwards; }
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; }

@media (min-width: 1024px) {
    .zones-fullscreen-grid {
        grid-template-columns: repeat(3, 1fr); 
        grid-template-rows: repeat(2, 1fr); 
        /* Force Fullscreen Width */
        width: 100vw; 
        height: 100vh; /* Prend toute la hauteur de l'écran (moins le header WP) */
        min-height: 600px; 
        position: relative;
        left: 50%; right: 50%; 
        margin-left: -50vw; margin-right: -50vw;
        
    }
    .zone-tile { height: 100%; } /* Sur desktop, remplit la grille */
}


/* --- A. TABLETTE & MOBILE MENU (Max 992px) --- */
@media (max-width: 992px) {
    .desktop-only { display: none !important; }
    
    /* Burger Icon Animation */
    .mobile-burger { display: block !important; width: 30px; height: 24px; position: relative; cursor: pointer; z-index: 10005; flex-shrink: 0; }
    .mobile-burger span { display: block; position: absolute; height: 3px; width: 100%; background: var(--primary); border-radius: 9px; opacity: 1; left: 0; transform-origin: center center; transition: .25s ease-in-out; }
    .mobile-burger span:nth-child(1) { top: 0px; }
    .mobile-burger span:nth-child(2) { top: 10px; }
    .mobile-burger span:nth-child(3) { top: 20px; }
    .mobile-burger.active span:nth-child(1) { top: 10px; transform: rotate(135deg); }
    .mobile-burger.active span:nth-child(2) { opacity: 0;transition: .01s ease-in-out; }
    .mobile-burger.active span:nth-child(3) { top: 10px; transform: rotate(-135deg); }


    /* Nav Drawer */
    .nav-area { position: fixed; top: 0; right: -100%; width: 85%; max-width: 320px; height: 100vh; background: white; box-shadow: -10px 0 30px rgba(0,0,0,0.1); transition: right 0.6s cubic-bezier(0.16, 1, 0.3, 1); display: flex !important; flex-direction: column; padding: 100px 30px !important; z-index: 10002; overflow-y: auto; }
    .nav-area.mobile-active { right: 0; }
    
    .main-nav { 
        display: flex !important; /* <--- AJOUT CRUCIAL */
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 0 !important; 
        width: 100%; 
        margin-top: 20px;
    }
    .main-nav > li { width: 100%; border-bottom: 1px solid var(--border); padding: 15px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .main-nav > li > a { font-size: 1.1rem !important; color: var(--primary); padding: 0 !important; font-weight: 600; }

    /* Accordion Sous-menu */
    .mobile-submenu-toggle { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--input-bg); border-radius: 50%; color: var(--primary); cursor: pointer; transition: 0.3s; }
    .submenu-open .mobile-submenu-toggle { transform: rotate(180deg); background: var(--accent); color: white; }
    .sub-menu { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; box-shadow: none !important; border: none !important; background: var(--surface) !important; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.3s ease; display: block !important; margin: 0 !important; }
    .submenu-open .sub-menu { max-height: 1000px; opacity: 1; visibility: visible; margin-top: 15px !important; }

    /* Layout Tablette Specifique */
    .logo-area { flex: 1; }
    .actions-area { flex: 1; display: flex; justify-content: flex-end; }
    .hero-split { grid-template-columns: 1fr !important; gap: 40px !important; text-align: center; }
    .hero-text { display: flex; flex-direction: column; align-items: center; }
    .hero-action-group { justify-content: center; width: 100%; }
    .reassurance-badges { justify-content: center !important; }
    .silos-grid, .network-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 40px !important; }
    
    /* --- EN-TÊTE DU MENU MOBILE (Synchronisé) --- */
    
    .mobile-menu-header { 
        display: flex !important; 
        align-items: center; /* Centre le bouton verticalement */
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100px; /* Hauteur initiale (Header non scrollé) */
        padding-left: 20px; /* Marge gauche pour le bouton */
        z-index: 10004; /* Au-dessus du fond blanc, niveau croix */
        background-color: white; /* Assure un fond propre */
        border-bottom: 1px solid var(--border); /* Ligne de séparation */
        
        /* Animation fluide pour suivre le header */
        transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: height;
    }

    /* SYNCHRONISATION : Quand le site est scrollé, le bloc bouton réduit aussi */
    .ibaix-header.scrolled .mobile-menu-header {
        height: 70px !important;
    }

    /* Le Bouton Devis */
    .mobile-cta { 
        pointer-events: auto; /* Rendre cliquable */
        margin: 0; /* Évite les décalages parasites */
        padding: 10px 24px; 
        font-size: 0.95rem; 
        box-shadow: 0 4px 15px rgba(13, 54, 84, 0.15); 
        /* S'assure qu'il ne disparait pas */
        display: inline-flex !important; 
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Ajustement du Burger (La croix) pour garantir l'alignement */
    
    
    .guide-layout { grid-template-columns: 1fr; }
    .sticky-wrapper { position: static; }

    /* Reset Split Screen & Zones Mobile */
    .ibaix-split-container { flex-direction: column; width: 100%; left: 0; margin: 0; height: auto; }
    .split-pane { width: 100%; flex: none; height: auto; min-height: 50vh; padding: 60px 20px; }
    .split-title { font-size: 2.2rem; }
    .split-icon { font-size: 3rem; }
    .ibaix-split-container .split-pane:hover { flex: none; }
    .ibaix-split-container .split-pane:not(:hover)::before { opacity: 0; }

    .zones-fullscreen-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; min-height: 100vh; }
    .zone-tile { height: 33vh; min-height: 300px; }
    .reception-grid-split { grid-template-columns: 1fr; gap: 2rem; }
    .grid-split, .donut-layout, .persona-split, .premium-cta-card { grid-template-columns: 1fr; gap: 2rem; }
    .premium-cta-card { padding: 2rem; text-align: center; }
    .cta-actions { align-items: center; }
    .donut-nav-arrow.nav-prev { left: -10px; }
    .donut-nav-arrow.nav-next { right: -10px; }
    .guide-layout { grid-template-columns: 1fr; }

    .diagnostic-split-grid { grid-template-columns: 1fr; gap: 40px; } 
    .module-content { padding: 30px 20px; }
    #diagnostic-module { margin-top: -40px; }
    
    /* Mobile : Hauteur naturelle rétablie */
    .diag-visual-side { height: 350px; min-height: auto; }
    .visual-card { position: relative; height: 100%; }
    .float-stat {
        left: 20px;
        bottom: 20px;
    }
    
    .patho-grid-cards { grid-template-columns: 1fr; }
    .litige-grid-intro { grid-template-columns: 1fr; gap: 2rem; }
    .domaines-grid { grid-template-columns: 1fr; }
    .strategy-grid { grid-template-columns: 1fr; }
    .intro-content-split { grid-template-columns: 1fr; gap: 2rem; }
    .sinistre-ux-grid { grid-template-columns: 1fr; }
    .cases-grid { grid-template-columns: 1fr; }
    .missions-grid { grid-template-columns: 1fr; }
    .bio-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 40px !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; height: auto !important; }
    .map-wrapper-redesign { display: grid !important; grid-template-columns: 1fr !important; gap: 40px !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; height: auto !important; }
    .services-grid-local { grid-template-columns: 1fr !important; }
    .local-block { display: flex !important; flex-direction: column !important; text-align: left !important; align-items: flex-start !important; gap: 30px !important; padding: 30px 20px !important; }
    .expert-box { display: flex !important; flex-direction: column !important; text-align: center !important; gap: 30px !important; padding: 30px 20px !important; }
    .pdf-download-box { display: flex !important; flex-direction: column !important; text-align: center !important; gap: 30px !important; padding: 30px 20px !important; }
    .strat-icon-side, .expert-icon, .local-visual i { margin: 0 auto !important; }
    .strat-list li { justify-content: flex-start; text-align: left; }
    .donut-visual { margin: 0 auto 40px auto !important; transform: scale(0.9); }
    .expert-card { margin-top: 0 !important; width: 100% !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; }
    /* Timeline Verticale */
    .timeline-track { left: 20px !important; }
    .timeline-node { gap: 15px !important; }
    .node-marker { width: 40px !important; height: 40px !important; font-size: 1rem !important; flex-shrink: 0 !important; }
    .node-content { padding: 15px !important; }
    .btn-cta-primary { width: 100% !important; justify-content: center; }
    .signature-box { text-align: center !important; padding-right: 0 !important; margin-top: 30px !important; }
    .signature-img { transform: rotate(-8deg) scale(1.1) !important; display: inline-block !important; }
    

/* --- B. MOBILE STANDARD (Max 768px) --- */
@media (max-width: 768px) {
    .header-container { padding: 0 20px; }
    .logo img { height: 42px !important; }
    .hero { padding-top: 30px !important; padding-bottom: 40px !important; }
    .silos-grid, .network-grid { grid-template-columns: 1fr !important; }
    
    .footer-grid { grid-template-columns: 1fr !important; text-align: center; }
    .social-bubbles { justify-content: center !important; }
    .cabinet-info li { justify-content: center !important; }
    .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
    .legal-links { justify-content: center !important; flex-wrap: wrap; gap: 15px; }

    .mobile-fab { display: flex; align-items: center; justify-content: center; position: fixed; bottom: 15px; right: 15px; width: 45px; height: 45px; border-radius: 50%; background-color: var(--primary); color: white; font-size: 1rem; box-shadow: 0 4px 12px rgba(13, 54, 84, 0.25); z-index: 9990; transition: transform 0.3s; }
    .mobile-fab:focus, .mobile-fab:active, .mobile-fab:visited,.mobile-fab:hover { background-color: var(--primary) !important; color: white !important; outline: none; }

/* AJOUT : Sécurité pour l'icône à l'intérieur */
.mobile-fab i, 
.mobile-fab svg {
    color: white !important;
    fill: white !important;
}
    body.no-scroll .mobile-fab { opacity: 0; pointer-events: none; }
    
    .submit-btn-glossaire { padding: 0; width: 40px !important; }
    .submit-btn-glossaire .btn-text { display: none !important; }
    .submit-btn-glossaire .btn-icon { display: block !important; font-size: 1rem; margin: 0; }
    
    .scroll-fade-left, .scroll-fade-right { display: block; }
    .map-watermark-logo { width: 40px; bottom: 10px; right: 10px; opacity: 1; }
    .cabinet-discover-link { margin-left: auto; margin-right: auto; }

    /* Slider Mobile */
    .diagnostic-card { min-height: 400px; }
    .diagnostic-card h3 { margin: 25px 20px 0 20px; font-size: 1.1rem; }
    .slide-group { padding: 10px 20px 50px 20px; gap: 10px; justify-content: center; }
    .diag-option { height: 85px; padding: 10px 15px; width: 100%; }
    .diag-icon { width: 38px; height: 38px; font-size: 1rem; margin-right: 12px; }
    .diag-title { font-size: 0.9rem; }
    .diag-sub { font-size: 0.7rem; }
    .slider-dots { bottom: 20px; }

    .case-study-box { grid-template-columns: 1fr; gap: 20px; }
    .guides-tabs-container { overflow-x: auto; padding-bottom: 0; } 
    .guides-tabs { justify-content: flex-start; min-width: max-content; padding: 0 20px; }
    
    .secteur-hero h1, hero-expertise h1 { font-size: 2.2rem !important; line-height: 1.2 !important; }
    .secteur-actions { flex-direction: column; width: 100%; max-width: 300px; margin: 0 auto; }

    .zones-fullscreen-grid { grid-template-columns: 1fr; grid-template-rows: repeat(6, 1fr); }
    .zone-tile { height: 250px; border-bottom: 1px solid rgba(255,255,255,0.2); }
    .zone-bg { opacity: 0.3; }
    .zone-number { font-size: 3.5rem; opacity: 0.5;}
    .zone-name { font-size: 1.4rem; }
    
    .checklist-premium-grid { grid-template-columns: 1fr; }

    .definitions-grid { grid-template-columns: 1fr; }
    .strategie-box { flex-direction: column; text-align: center; }
    .steps-wrapper { flex-direction: column; gap: 40px; align-items: center; } 
    .step-arrow { transform: rotate(90deg) !important; margin: 10px 0; }
    .why-grid { grid-template-columns: 1fr; }
    
    .expertise-nav-grid {
        flex-direction: column-reverse; /* Suivant en haut, Précédent en bas */
        gap: 30px;
        align-items: stretch;
    }
    
    body .glossaire-page-wrapper .premium-grid {
    display: grid;
    grid-template-columns: 1fr !important; /* Force 1 colonne */
    gap: 30px !important; }

    .exp-nav-item {
        max-width: 100%;
        width: 100%;
        background: var(--surface); /* Petit fond gris sur mobile pour bien délimiter */
        padding: 20px;
        border-radius: 12px;
        justify-content: space-between; /* Écarte texte et flèche */
    }

    /* On inverse l'ordre visuel sur mobile pour le bouton Previous pour garder flèche à gauche */
    .exp-nav-item.prev {
        flex-direction: row; 
    }
    
    .exp-nav-item.next {
        text-align: left; /* Remet le texte à gauche sur mobile */
        flex-direction: row-reverse; /* Flèche à droite, texte à gauche */
        justify-content: space-between;
    }
    
    .module-nav {
        height: 70px; /* Hauteur confortable pour le tactile */
    }

    .nav-btn {
        padding: 0; 
        height: 100%;
        gap: 0;
    }

    /* On cache le texte */
    .nav-btn span { display: none; }

    /* On grossit les icônes */
    .nav-btn i {
        font-size: 1.8rem;
        margin: 0; 
    }
    
    /* Indicateur actif en bas sur mobile */
    .nav-btn.active::after {
        content: '';
        position: absolute; bottom: 0; left: 50%;
        transform: translateX(-50%);
        width: 40%; height: 3px;
        background: var(--accent);
        border-radius: 3px 3px 0 0;
    }
    
    /* On cache la barre du haut sur mobile */
    .nav-btn.active::before { display: none; }
}

/* --- C. PETIT MOBILE (Max 500px) --- */
@media (max-width: 500px) {
    .side-panel { width: 100% !important; max-width: 100% !important; }
    .form-row-50 { grid-template-columns: 1fr !important; gap: 15px !important; }
    .trust-bar { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; gap: 5px !important; }
    .trust-item { font-size: 0.65rem !important; white-space: nowrap; }
    .trust-item i { font-size: 0.75rem !important; margin-right: 4px !important; }
}