/* --- REVISITE DES VARIABLES (Plus chaleureuses) --- */
/* --- REVISITE DES VARIABLES (Chaleur, Journée & Fuego) --- */
:root {
    --bg-main: #fcf7f2;        /* Un beige "sable chaud", lumineux mais doux pour les yeux */
    --bg-card: #ffffff;        /* Des cartes blanches pour un style épuré et détacher le contenu */
    --text-dark: #3a2a22;      /* Un marron "grain de café" très foncé pour le texte, plus chaleureux que le noir */
    --text-light: #f9f6f0;     /* Conservé uniquement pour les textes sur fond sombre (boutons, badges) */
    
    /* Les couleurs Fuego (légèrement ajustées pour contraster sur fond clair) */
    --fuego-yellow: #f39c12;   /* Or soleil */
    --fuego-orange: #d35400;   /* Terracotta / Terre battue */
    --fuego-red: #c0392b;      /* Rouge passion salsa */
    
    --gradient-flame: linear-gradient(135deg, #c0392b, #d35400, #f39c12);
    
    /* Des ombres plus douces, teintées de chaleur */
    --shadow-soft: 0 10px 30px rgba(192, 57, 43, 0.08); 
    --border-glow: rgba(211, 84, 0, 0.2);
}

/* --- BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-main); 
    color: var(--text-dark); 
    line-height: 1.6;
    
    /* NOUVEAU : Configuration Flexbox pour le Sticky Footer */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* La page fait au minimum 100% de la hauteur de l'écran */
}

h1, h2, h3, .logo-text {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    margin-bottom: 30px;
}

a {
    text-decoration: none;
    color: var(--fuego-yellow);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--fuego-orange);
}

/* --- NAVIGATION --- */
header {
    /* Utilise la couleur prune foncée avec 90% d'opacité */
    background-color: rgba(31, 11, 17, 0.95); 
    padding: 15px 50px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--fuego-red);
}

.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-text {
    font-size: 2rem;
    color: var(--fuego-yellow);
    line-height: 1;
}

.logo-sub {
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--fuego-orange);
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

nav a {
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
}

nav a:hover {
    color: var(--fuego-yellow);
}

/* --- SECTIONS GLOBALES --- */
section {
    padding: 100px 20px 60px;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1; /* Permet à la section de prendre tout l'espace disponible, poussant le footer en bas */
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 40px;
    background: var(--gradient-flame);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* --- ACCUEIL --- */
#accueil {
    justify-content: center;
    /* On change le halo sombre par un dégradé de lever de soleil chaud */
    background: radial-gradient(circle at top right, #ffecd2 0%, var(--bg-main) 70%);
    min-height: 100vh;
}

/* Le texte de l'accueil doit ressortir */
#accueil h1{
    color: var(--text-dark);
    font-size: 4rem;
    margin-bottom: 10px;

} #accueil p {
    font-size: 1.2rem;
    max-width: 600px;
    margin-bottom: 30px;
    color: var(--text-dark);
}

.btn {
    background: var(--gradient-flame);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-transform: uppercase;
}

.btn:hover {
    transform: scale(1.05);
    /* Lueur festive orangée au survol */
    box-shadow: 0 0 20px rgba(251, 133, 0, 0.6); 
    color: white;
}

/* --- PRESENTATION --- */
.presentation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.dance-card {
    background-color: var(--bg-card);
    padding: 30px;
    border-radius: 10px;
    border-bottom: 4px solid var(--fuego-orange);
    transition: transform 0.3s ease;
}

.dance-card:hover {
    transform: translateY(-10px);
    border-bottom: 4px solid var(--fuego-yellow);
    /* Ajout d'une ombre douce et colorée pour détacher la carte */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(217, 4, 41, 0.2);
}

.dance-card h3 {
    color: var(--fuego-yellow);
    font-size: 1.8rem;
    margin-bottom: 15px;
}

/* Rendre la grille flexible (si ce n'est pas déjà le cas) */
.planning-grid {
    display: flex;
    justify-content: center;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Le cadre de la vidéo */
.planning-card {
    width: 100%;
    max-width: 800px; /* Largeur maximale sur grand écran (à ajuster selon vos goûts) */
    border-radius: 10px; /* Optionnel : arrondit les angles du cadre */
    overflow: hidden; /* Empêche la vidéo de déborder des angles arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optionnel : ajoute une ombre élégante */
    margin: 0 auto; /* Centre le cadre */
  	min-width:0;
}

/* La vidéo elle-même */
.planning-card video {
    width: 100%; /* La vidéo prend 100% de la largeur du cadre */
    height: auto; /* La hauteur s'ajuste proportionnellement */
    display: block; /* Supprime la petite marge blanche sous la vidéo */
}

/* ========================================= */
/* --- EVENEMENTS (Filtre et Grille) --- */
/* ========================================= */

/* ========================================= */
/* --- LE MENU DÉROULANT (Sélecteur de mois) --- */
/* ========================================= */

.filtre-container {
    margin-bottom: 80px;
    background-color: var(--bg-card); /* Fond blanc pour détacher la zone */
    padding: 15px 30px;
    border-radius: 30px;
    border: 1px solid rgba(211, 84, 0, 0.2); /* Bordure douce terracotta */
    box-shadow: var(--shadow-soft);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* S'adapte mieux sur mobile */
    gap: 15px; /* Espace entre le texte et le menu */
}

.filtre-container label {
    font-weight: 600;
    color: var(--text-dark); /* Texte en marron café */
    font-size: 1rem;
}

.filtre-container select {
    background-color: #fdf0e6; /* Un fond beige/abricot très pâle */
    color: var(--fuego-red); /* Le texte de l'option choisie en rouge passion */
    border: 2px solid var(--fuego-orange);
    padding: 10px 25px;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    
    /* On masque la flèche par défaut du navigateur (souvent disgracieuse) */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* On ajoute une flèche personnalisée aux couleurs de l'association */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23d35400%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
    padding-right: 45px; /* Espace pour ne pas que le texte chevauche la flèche */
}

/* Effet dynamique au survol et au clic */
.filtre-container select:hover, 
.filtre-container select:focus {
    border-color: var(--fuego-red);
    background-color: var(--bg-card); /* Devient blanc pur au survol */
    box-shadow: 0 5px 15px rgba(211, 84, 0, 0.25); /* Lueur orangée */
    transform: translateY(-2px); /* Léger rebond vers le haut */
}

/* --- LA NOUVELLE GRILLE D'ÉVÉNEMENTS --- */
/* --- LE CONTENEUR DES ÉVÈNEMENTS --- */

/* --- LE CONTENEUR GLOBAL DU CARROUSEL ET SES BOUTONS --- */
.carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1100px; /* Un peu plus large pour laisser la place aux boutons */
    margin: 0 auto;
    gap: 15px; /* Espace entre les boutons et le carrousel */
}

/* --- LE STYLE DES FLÈCHES --- */
.carousel-btn {
    background-color: var(--fuego-orange);
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(211, 84, 0, 0.3);
    flex-shrink: 0; /* Empêche le bouton de s'écraser */
    z-index: 10;
}

.carousel-btn:hover {
    background-color: var(--fuego-yellow);
    transform: scale(1.1);
}

.carousel-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    /* Empêche le conteneur de casser la largeur de la page */
    overflow: hidden; 
    /* L'effet de fondu sur les bords gauche et droit */
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.events-container {
    max-width: 1000px; /* Un peu plus large pour aérer le cadre */
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap; /* Force les cartes à rester sur une seule ligne horizontale */
    overflow-x: auto;  /* Active le défilement horizontal */
    scroll-snap-type: x mandatory; /* Magnétisme : force l'arrêt sur une carte */
    scroll-behavior: smooth;
    gap: 30px; /* Remplace la marge du bas par un espace entre les cartes */
    padding: 20px 0; /* Garde de la place en haut et en bas pour ne pas couper ton effet "box-shadow: var(--shadow-soft)" */
    
    /* Masque la barre de défilement horizontale pour un rendu plus propre */
    -ms-overflow-style: none;  /* IE et Edge */
    scrollbar-width: none;  /* Firefox */
}

.events-container::-webkit-scrollbar {
    display: none;
}

/* --- LE CADRE DE L'ÉVÈNEMENT --- */
.event-item {
    background-color: var(--bg-card);
    display: flex;
    flex-direction: row; /* Aligne la date à gauche et les détails à droite sur PC */
    border: 1px solid rgba(211, 84, 0, 0.1);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* MODIFICATIONS POUR ORDINATEUR */
    flex: 0 0 550px;       /* Largeur fixe idéale sur grand écran pour un carrousel aéré */
    width: 550px;          
    height: auto;          /* Laisse la hauteur s'adapter naturellement au contenu (fini les coupes !) */
    min-height: 280px;     /* Hauteur minimale pour garder de l'harmonie si le contenu est court */
    scroll-snap-align: center;
}

.event-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px var(--border-glow);
    border-color: rgba(243, 156, 18, 0.2);
}

/* --- BLOC DATE (À GAUCHE) --- */
.event-date {
    flex: 0 0 130px; /* Fixe la largeur du bloc de gauche à 200px */
    background-color: #fdf0e6; /* Assombrit légèrement la zone de la date */
    border-right: 3px solid var(--fuego-orange); /* Ligne de séparation verticale */
    padding: 20px;
    display: flex;
    align-items: center; /* Centre la date verticalement */
    justify-content: center; /* Centre la date horizontalement */
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--fuego-orange);
}

/* --- BLOC DÉTAILS (À DROITE) --- */
.event-details {
    flex: 1; /* Prend tout le reste de l'espace disponible */
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    max-height:100%;
}

.event-details iframe, 
.event-details .fb-post {
    max-width: 100% !important;
    width: 100% !important;
}

.event-details img,
.img-size img {
    max-width: 100% !important;
    height: auto;
    object-fit: contain;
}

.event-details h4 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--fuego-red); /* Le titre en rouge pour le peps */
}
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
}

/* --- LES CARTES ÉVÉNEMENTS (Plus élégantes) --- */
.event-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px var(--border-glow);
    border-color: rgba(243, 156, 18, 0.2);
}

.card-header {
    padding: 20px 20px 10px;
}

.badge-date {
    background: var(--gradient-flame);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}

.card-body {
    padding: 10px 20px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-body h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.3;
}

.location {
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.media-container {
    margin-top: auto; /* Pousse les embeds Facebook vers le bas pour aligner les cartes */
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
    min-height: 200px; /* Évite les sauts de mise en page pendant le chargement de l'iframe */
}

/* --- CONTENEUR DE L'IMAGE --- */
.img-size {
    width: 100%;
    display: flex;
    justify-content: center; /* Centre l'image si elle est plus petite que son conteneur */
    margin-top: 15px;
}

/* --- RENDRE L'IMAGE RESPONSIVE --- */
.img-size img {
    width: 100%; /* Empêche l'image de déborder de l'écran sur mobile */
    max-width: 500px;
    height: auto;    /* Conserve les proportions d'origine sans l'écraser */
    border-radius: 8px; /* Petit bonus pour harmoniser l'image avec tes autres cadres */
    object-fit: contain; /* Assure que l'image ne soit ni écrasée ni rognée */
}

/* --- CONTACT --- */
.contact-form {
    background-color: var(--bg-card);
    padding: 40px;
    border-radius: 10px;
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 12px;
    background-color: var(--bg-dark);
    border: 1px solid #333;
    color: rgb(0, 0, 0);
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
}

.contact-form input:focus, .contact-form textarea:focus {
    outline: none;
    border-color: var(--fuego-orange);
}

.message-alerte {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: 600;
}

.message-alerte.erreur {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.message-alerte.succes {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* --- FOOTER --- */
/* --- STICKY FOOTER --- */
footer {
    /* Plus de position: fixed ni de position: absolute */
    width: 100%;
    margin-top: auto; /* Pousse le footer tout en bas si l'espace est grand */
    
    /* Couleurs adaptées au thème Fuego */
    background-color: var(--bg-card);
    color: var(--text-dark);
    border-top: 2px solid var(--fuego-orange);
    text-align: center;
    padding: 15px;
}


/* --- BURGER MENU (Masqué sur ordinateur) --- */
.burger-menu {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--fuego-yellow);
    font-size: 2rem;
    padding: 5px;
}

/*--- INTERSECTION OBSERVER --- */

/* État caché initial */
.hidden {
    opacity: 0;
    transform: translateY(50px) scale(0.95); /* Décalé vers le bas et légèrement plus petit */
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); /* Une transition fluide */
}
  
/* État visible (cette classe sera ajoutée par le JavaScript) */
.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/*## Social Network */

.social-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 20px;
    width: 100%;
}

.social-container .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 350px;
    padding: 15px 20px;
    font-size: 1.1rem;
    text-decoration: none;
    line-height: 1.3; 
}

.social-container .btn img {
    height: 24px;
    width: auto;
    flex-shrink: 0; /* Empêche le logo de s'écraser sur petit écran */
    display: block;
}

/* --- CORRECTIONS SPÉCIFIQUES MOBILE --- */
@media (max-width: 768px) {
    
    /* 1. Aligne la taille du titre sur vos autres pages */
    #communaute h1 {
        font-size: 2rem;
        padding: 0 10px;
        margin-top: 10px;
        margin-bottom: 30px;
    }

    /* 2. Réduit le texte des boutons et l'espacement intérieur pour que tout rentre */
    .social-container .btn {
        font-size: 0.9rem;
        padding: 12px 10px;
        gap: 8px; /* Rapproche légèrement le logo du texte */
    }

            /* Styles spécifiques additionnels pour centrer le message de construction */
            #construction-whatsapp {
                justify-content: center;
                min-height: 80vh;
                background: radial-gradient(circle at top right, #ffecd2 0%, var(--bg-main) 70%); /* Reprise du dégradé chaleureux de l'accueil */
            }
    
            .construction-icon {
                margin-bottom: 20px;
                animation: float 3s ease-in-out infinite;
            }
    
            .construction-icon img {
                height: 90px;
                width: auto;
                filter: drop-shadow(0 10px 15px rgba(211, 84, 0, 0.2));
            }
    
            .construction-text {
                font-size: 1.2rem;
                max-width: 600px;
                margin-bottom: 30px;
                color: var(--text-dark);
            }
    
            /* Petite animation de flottement pour rendre la page moins statique */
            @keyframes float {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0px); }
            }
}


/* ========================================= */
/* --- RESPONSIVE (MOBILES ET TABLETTES) --- */
/* ========================================= */

@media (max-width: 768px) {
    /* 1. Header et Menu */
    header {
        padding: 15px 20px;
        position: relative; /* Indispensable pour que le menu burger se repère par rapport au header */
    }

    .burger-menu {
        display: block;
        position: absolute; /* Sort le bouton du flux normal */
        right: 20px;        /* Le colle à 20px du bord droit de l'écran */
        top: 50%;           /* Le place à la moitié de la hauteur... */
        transform: translateY(-50%); /* ... et le centre parfaitement à la verticale */
    }

    nav ul {
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        /* REMPLACEZ var(--bg-dark) PAR LA COULEUR DU HEADER : */
        background-color: rgba(31, 11, 17, 0.95); 
        border-bottom: 2px solid var(--fuego-red);
        text-align: center;
        gap: 0;
        max-height: 0;
        overflow-y: auto; 
        transition: max-height 0.4s ease-in-out;
    }

    nav ul.active {
        max-height: 1000px; /* Sécurité augmentée pour ne jamais couper les liens */
    }

    nav ul li {
        padding: 20px 0;
        border-bottom: 1px solid #222;
        width: 100%;
    }
    
    nav ul li:last-child {
        border-bottom: none;
    }

    /* 2. Typographie */
    h1, h2, .section-title {
        line-height: 1.2; 
        overflow-wrap: break-word; 
        word-wrap: break-word;
        hyphens: auto;
    }

    /* REPOSITIONNE L'ACCUEIL SOUS LA BARRE DE NAVIGATION */
    #accueil {
        justify-content: flex-start; /* Aligne le contenu vers le haut au lieu de le centrer */
        padding-top: 120px;          /* Crée un espace suffisant pour passer sous le header qui fait environ 80px */
    }

    /* Ajustement des textes et marges pour les petits écrans */
    #accueil h1 {
        font-size: 2rem; 
        padding: 0 10px;
        margin-top: 10px;            /* Donne une petite marge de respiration supplémentaire */
        margin-bottom: 20px;
    }

    #accueil p {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.8rem; /* Réduit un peu (au lieu de 2rem) */
        padding: 0 10px;
    }

    /* 3. Espacements (Réduits pour éviter les grands vides sur mobile) */
    section {
        padding: 120px 15px 40px; /* On augmente à 120px pour passer sous le menu */
        min-height: auto; 
    }

    /* 4. Évènements (Filtre, Grille et Iframes) */
    
    #evenements h2 {
        font-size: 2rem; 
        padding: 0 10px;
        margin-top: 10px;            
        margin-bottom: 40px;
    }
    
    /* Nouvelles règles pour le filtre et la grille sur mobile */
    .filter-zone {
        border-radius: 15px;
        padding: 15px;
        text-align: center;
    }
    
    .filter-zone label {
        display: block;
        margin-bottom: 10px;
        margin-right: 0;
    }
    
    .events-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
        gap: 20px;
    }

    /* Force Facebook/YouTube à ne pas dépasser l'écran */
    .media-container iframe {
        max-width: 100%;
        width: 100% !important; 
    }

    /* 5. Présentation (Forcer 1 seule colonne) */
    .presentation-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #presentation h2 {
        font-size: 2rem; 
        padding: 0 10px;
        margin-top: 10px;            
        margin-bottom: 40px;
    }

    /* 6. Contact */
    #contact h2 {
        font-size: 2rem; 
        padding: 0 10px;
        margin-top: 10px;            
        margin-bottom: 40px;
    }

/* 1. On empêche le conteneur global d'écraser le carrousel */
.carousel-container {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    padding: 0 10px !important;
}

/* 2. On désactive le fondu noir qui peut bloquer le tactile */
.carousel-wrapper {
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 5px !important;
}

/* 3. On masque les flèches (les utilisateurs scrolleront au doigt) */
.carousel-btn {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important; /* On monte très haut le z-index */
    width: 35px !important;
    height: 35px !important;
    background-color: rgba(211, 84, 0, 0.9) !important;
    border-radius: 50% !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    color: white !important;
    opacity: 1 !important;
}

/* Positionnement exact de chaque flèche */
.carousel-btn.prev {
    left: 0px !important;
}

.carousel-btn.next {
    right: 0px !important;
}

/* 4. On VERROUILLE le défilement horizontal de la piste */
.events-container {
    display: flex !important;
    flex-direction: row !important; /* Force l'alignement de gauche à droite */
    flex-wrap: nowrap !important;   /* Interdit formellement le passage à la ligne */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; /* Indispensable pour un glissement fluide sur iPhone/iOS */
    padding-bottom: 20px !important;
}

/* 5. On sécurise la largeur exacte de chaque carte évènement */
.event-item {
    flex: 0 0 85vw !important; 
    width: 85vw !important;
    height: auto !important;     /* Indispensable pour ne pas bloquer la hauteur */
    min-height: auto !important; /* Libère la hauteur minimale */
    flex-direction: column !important;
}

.event-date {
    flex: none !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 3px solid var(--fuego-orange) !important;
    padding: 12px !important;
}


    .event-details {
        flex: 1 !important;
        width: 100% !important;
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important;
    }

}

.event-item.masquer-event {
    display: none !important;
}