/* =======================================================
   STYLE MOBILE - VERSION COMPLÈTE ET CORRIGÉE
   Média Query : Max-width 1024px
   ======================================================= */

@media screen and (max-width: 1024px) {

    /* === 1. NAVIGATION (Menu Burger Tiroir) === */
    .navbar {
        padding: 10px 0;
        /* Correction : Assure que la navbar reste au dessus de tout */
        z-index: 9999; 
    }

    .nav-container {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* Logo */
    .logo-space {
        z-index: 1002; /* Doit rester visible même menu ouvert si besoin */
    }
    
    .logo-image {
        max-height: 40px;
    }

    /* Burger Icon */
    .hamburger {
        display: flex;
        margin-left: auto;
        z-index: 1002; /* Au dessus du panneau latéral */
    }

    /* Panneau Latéral */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Caché */
        /* Utilisation de dvh pour gérer la barre d'adresse mobile */
        height: 100dvh; 
        width: min(320px, 85%);
        background-color: var(--primary-color); /* Bleu foncé */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s ease-out; /* Animation fluide */
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
        padding-top: 60px;
        z-index: 1000;
    }

    .nav-links.active {
        right: 0; /* Visible */
    }

    .nav-links li {
        margin: 20px 0;
        width: 100%;
        text-align: center;
    }

    /* Bouton CTA dans le header (caché dans le menu, affiché en absolute) */
    .nav-cta {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: fit-content;
        z-index: 10;
    }

    .nav-cta .btn {
        padding: 8px 12px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    /* === 2. GÉNÉRALITÉS MOBILE === */
    /* Ajustement des tailles de police pour éviter les débordements */
    h1 { font-size: clamp(1.8rem, 5vw, 2.2rem) !important; }
    h2, .section-title, .section-title-bis, .bleuet-title, .equipe-title { 
        font-size: clamp(1.5rem, 4vw, 1.8rem) !important; 
    }
    p { font-size: 1rem !important; line-height: 1.5; }

    /* === 3. HERO SECTION === */
    .hero {
        height: 100dvh; /* Plein écran dynamique */
        padding-top: 60px; /* Compensation header */
    }

    .hero-content {
        width: 100%;
        padding: 0 20px;
    }

    .hero-content h1 {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .countdown {
        gap: 8px;
        margin: 20px 0;
    }
    .countdown-number { font-size: 1.4rem; }
    .countdown-label { font-size: 0.7rem; }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 280px;
        margin: 20px auto 0;
    }
    .hero-buttons .btn { width: 100%; text-align: center; }


        /* === 4. SECTIONS SPLIT (50% Texte / 50% Image) === */
    
    .equipe-section,
    .bleuet-section,
    .lieu-section {
        height: auto; 
        min-height: auto;
        padding: 0;
        margin: 0;
        overflow: visible; 
        position: relative;
    }

    .equipe-container, 
    .bleuet-container, 
    .luc-container {
        display: flex;
        flex-direction: column-reverse; /* Texte en HAUT, Image en BAS */
        height: auto;
        width: 100%;
    }

    /* --- BLOCS TEXTE (Styles communs) --- */
    /* IMPORTANT : On liste bien les 3 classes ici pour qu'elles aient toutes le style de base */
    .equipe-content, 
    .bleuet-content, 
    .lieu-content {
        width: 100%;
        height: auto; 
        min-height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Centre verticalement */
        align-items: center;     /* Centre horizontalement */
        box-sizing: border-box;
        padding: 50px 20px 40px 20px; 
        
        /* Couleurs par défaut */
        background-color: var(--primary-color); 
        color: white;
    }
    
    /* 1. BLEUET : Texte plus grand (60%) */
    .bleuet-content {
        min-height: 60vh;
    }

    /* 2. OUISTREHAM : Texte moyen (55%) et fond Rouge */
    .lieu-content {
        min-height: 50vh;
        background-color: var(--secondary-color); 
    }

    /* Titres */
    .equipe-title, .bleuet-title, .section-title-bis {
        margin-top: 0;
        margin-bottom: 15px;
        text-align: center;
        flex-shrink: 0;
    }

    /* --- BLOCS IMAGE (Styles communs) --- */
    /* IMPORTANT : On liste bien les 3 classes ici aussi */
    .equipe-image, 
    .bleuet-image, 
    .luc-image {
        width: 100%;
        /* Hauteur par défaut */
        height: 40vh;
        min-height: 300px;
        padding: 0;
        margin: 0;
        position: relative;
        flex-shrink: 0;
    }

    /* --- AJUSTEMENTS IMAGES SPÉCIFIQUES --- */
    
    /* Image Bleuet plus petite (40%) car le texte est à 60% */
    .bleuet-image {
        height: 40vh;
    }

    /* Image Ouistreham moyenne (45%) car le texte est à 55% */
    .luc-image {
        height: 50vh;
    }
    
    /* Configuration des images à l'intérieur */
    .equipe-image img, 
    .bleuet-image img, 
    .luc-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; 
        object-position: center;
        display: block;
    }

    /* === 5. SECTION IMPACT (Pleine Page) === */
    .impact-section {
        height: auto; /* On permet l'auto ici car le contenu varie trop */
        min-height: 100dvh;
        padding: 80px 20px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .impact-title { margin-top: 0; }

    .impact-stats {
        flex-direction: column;
        gap: 15px;
    }

    .impact-card { width: 100%; }

    .participation {
        flex-direction: column;
        gap: 20px;
    }
    .card { width: 100%; margin: 0; }


    /* === 6. GALERIE (Design Appareil Photo) === */
    .galerie-section {
        height: 100dvh !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 60px; /* Espace navbar */
        position: relative;
    }

    .galerie-section .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly; /* Répartition équitable */
        width: 100%;
    }

    /* Carousel */
    .carousel-container {
        height: 50vh; /* Image prend 50% hauteur */
        width: 100%;
        max-width: 100%;
        position: relative;
        overflow: hidden;
    }

    .carousel-item {
        width: 90vw !important; /* Largeur presque totale */
        height: 100% !important;
        left: 5vw !important; /* Centrage (5% marge gauche) */
        transform: none !important;
        border-radius: 10px;
    }

    /* Boutons Navigation (En bas) */
    .carousel-nav {
        display: none;
        position: absolute;
        bottom: 5%; /* Positionnés en bas de l'écran */
        top: auto;
        transform: none;
        width: 45px;
        height: 45px;
        background: white;
        color: var(--primary-color);
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        z-index: 50;
    }

    .carousel-indicators {
        bottom: 15%; /* Au dessus des boutons */
        margin-top: 0;
    }


    /* === 7. SPONSORS (Marquee Vertical) === */
    .sponsors-section-refonte {
        height: 100dvh !important;
        padding-top: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .sponsors-header { flex-shrink: 0; padding: 0 20px; }
    .sponsors-title { font-size: 2rem !important; }

    /* Zone de défilement */
    .marquee-wrapper {
        flex-grow: 1;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .sponsor-item {
        width: 60vw; /* Taille adaptée mobile */
        max-width: 250px;
        margin: 0 15px;
    }

    .sponsor-logo {
        height: 20vh; /* Hauteur relative à l'écran */
        max-height: 200px;
        width: 100%;
        border-radius: 15px;
    }

    .sponsors-cta-container {
        flex-shrink: 0;
        margin-bottom: 30px; /* Safe area bottom */
    }


    /* === 8. CONTACT & FOOTER === */
    .section-contact {
        height: auto; /* Hauteur libre pour éviter coupures */
        padding: 60px 20px;
    }

    .contact-card {
        padding: 30px 20px;
        gap: 30px;
    }

    .contact-left, .contact-right { width: 100%; }

    .info-text { 
        font-size: 0.9rem !important; 
        word-break: break-all; /* Coupe l'email proprement */
    }

    .footer {
        display: flex !important;
        flex-direction: row !important; 
        align-items: center; 
        justify-content: space-between; 
        padding: 20px 15px; 
        text-align: center;
    }
    
    .footer p{
        font-size: 0.75rem !important;
        line-height: 1.3;
        margin: 0;
    }
    
    .footer-content {
        flex: 1; 
        padding-right: 10px; 
    }

    .logo-footer {
        position: static !important; 
        transform: none !important;  
        flex-shrink: 0; /* Interdit au logo de rétrécir */
        margin: 0;
    }

    .logo-footer .logo-image {
        max-height: 45px;
        width: auto;
    }
    
    /* === 9. FAQ === */
    /* Transforme la grille en liste verticale */
    .faq_section .group, .faq_section .col {
        float: none;
        width: 100% !important;
        margin: 0 0 10px 0;
        display: block;
    }

    .span_1_of_4 {
        font-weight: bold;
        color: #e63946; /* Mise en valeur des titres */
        margin-bottom: 5px !important;
    }

    .infocol {
        border-top: 1px solid rgba(255,255,255,0.2);
        padding-top: 15px !important;
    }
}