/* ==========================================================================
   1. CORRECTIONS GLOBALES (SCROLL HORIZONTAL & ESPACEMENTS)
   ========================================================================== */
/* Empêche le site de dépasser la largeur de l'écran (supprime les bords blancs) */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
}

/* ==========================================================================
   2. CORRECTION DU MENU BURGER & Z-INDEX (OVERLAY ET CLICS)
   ========================================================================== */
/* Assure que la barre de navigation parent passe par-dessus TOUT le reste du site */
.blog-nav {
    z-index: 99999 !important;
}

/* L'overlay doit bien couvrir l'écran entier et être cliquable */
.mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99990 !important;
}

/* Ajustements du panneau latéral (Burger) pour un menu fluide et unifié */
@media screen and (max-width: 992px) {
    .nav-left, .nav-right {
        z-index: 99995 !important;
        max-width: 85vw !important;
        background-color: #0b0c10 !important; /* Assure un fond noir total */
        overflow: visible !important; /* TUE DÉFINITIVEMENT LA BARRE DE DÉFILEMENT */
    }
    
    /* BLOC HAUT (Accueil, Blog) - Moins haut car peu de contenu */
    .nav-left {
        top: 0 !important;
        height: 30vh !important; /* On réduit à 30% pour donner plus de place au bas */
        padding-top: 60px !important; /* Zone de sécurité pour la croix de fermeture */
        padding-bottom: 20px !important;
        justify-content: flex-end !important;
        border-bottom: none !important;
    }

    /* BLOC BAS (M'inscrire, Contact, Réseaux) - Prend tout le reste de l'écran */
    .nav-right {
        top: 30vh !important; /* S'emboîte exactement là où s'arrête le bloc haut */
        height: 70vh !important; /* S'étend jusqu'en bas (30+70 = 100) */
        padding-top: 20px !important;
        padding-bottom: 40px !important;
        justify-content: flex-start !important;
        position: fixed;
    }
    
    /* ASTUCE : Étend le fond noir "à l'infini" vers le bas pour couvrir le contenu qui dépasse sur les petits écrans */
    .nav-right::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 150vh; /* Le fond noir descend très bas */
        background-color: #0b0c10;
        z-index: -1;
    }
    
    .blog-nav {
        padding: 15px 20px !important; 
    }
}

/* ==========================================================================
   3. RÉORGANISATION DU LAYOUT PRINCIPAL (TIMELINE TOUT AU-DESSUS)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .content-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* 1. La timeline (bulles) passe tout en haut en première position */
    .vertical-timeline {
        order: 1;
        flex-direction: row !important; /* Assure un affichage horizontal */
        justify-content: center !important;
        width: 100% !important;
        margin: 10px 0 20px 0 !important;
        height: auto !important; /* Annule la hauteur 100% du mode Desktop */
    }

    /* Ajustement visuel de la ligne de connexion de la timeline en mode horizontal */
    .timeline-line {
        width: 100% !important;
        height: 2px !important;
        top: 50% !important;
        left: 0 !important;
        transform: translateY(-50%) !important;
        background: repeating-linear-gradient(to right, var(--blog-border) 0, var(--blog-border) 10px, transparent 10px, transparent 20px) !important;
    }

    /* 2. L'image passe en deuxième position, juste sous la timeline */
    .image-zone {
        order: 2;
        width: 100% !important;
    }

    /* 3. Le texte avec le panneau en verre reste en dernier */
    .text-zone {
        order: 3;
        width: 100% !important;
    }

    /* Ajustement des marges internes pour regagner de l'espace sur les bords */
    .glass-panel {
        padding: 35px 25px !important;
    }
    
    .blog-layout {
        padding: 20px 15px !important;
    }
    
    /* Réduction de la taille de la police des titres principaux sur mobile */
    .main-heading {
        font-size: 2.5rem !important;
    }
}

/* ==========================================================================
   4. OPTIMISATION DE L'ESPACE POUR LES AUTRES SECTIONS
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Gain de place sur les côtés pour toutes les grandes sections */
    .explore-section.with-hero-bg, 
    .trending-section, 
    .personal-history-section, 
    .roadmap-section {
        padding: 60px 15px !important; 
    }
    
    .history-tabs-nav {
        justify-content: center !important;
    }
    
    /* La roadmap prend toute la largeur sur mobile */
    .roadmap-text {
        width: 100% !important;
        padding: 25px 20px !important;
    }
    
    .roadmap-visual {
        width: 100% !important;
        margin-top: 20px;
    }
}