/* Intégration de la police Poiret One depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');

/* ==========================================================================
   1. STYLES GLOBAUX & SCROLL SNAP (Nettoyés et unifiés)
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: clip; /* Évite les débordements latéraux sans bloquer le JS */
    font-size: 16px;
    line-height: 1.5;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* On applique l'aimantage UNIQUEMENT au HTML pour que l'ordinateur en profite */
html {
    scroll-snap-type: y proximity; 
    overflow-y: scroll;
}

/* ==========================================================================
   2. ANCRAGES STRICTS DES PAGES (Ajout de #galerie si elle existe dans ton HTML)
   ========================================================================== */
#biographie, #galerie, #evenements, #newsletter {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100vh;
    height: auto; /* Permet à la section de s'agrandir si le texte déborde */
    box-sizing: border-box;
    padding: 2rem 1rem;
    text-align: center;
}

/* Alternance des couleurs de fond proprement gérée par ID ou classe dédiée */
#biographie, #evenements {
    background-color: #f5f5f5; 
}
#galerie, #newsletter {
    background-color: #ffffff;
}

/* Désactivation totale et stricte de l'aimantage sur les bandes de transition */
.bande-photo1, .bande-photo2, .bande-photo3, .bande-photo4 {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    display: block;
}

/* ==========================================================================
   3. BOUTON DE NAVIGATION DEFILLEMENT
   ========================================================================== */
.scroll-next-btn {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
}

.scroll-next-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transform: translateX(-50%) scale(1.05);
}

.scroll-next-btn::after {
    content: '';
    width: 14px;
    height: 14px;
    border-right: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    transform: translateY(-3px) rotate(45deg);
}

/* ==========================================================================
   4. TYPOGRAPHIES & TITRES
   ========================================================================== */
h1 {
    font-family: 'Dancing Script', cursive;
    font-weight: 400;
    color: #333;
    letter-spacing: 1px;
    line-height: 1.2;
    font-size: clamp(2.5rem, 8vw, 4rem); 
}

h2 {
    font-family: 'Poiret One', cursive;
    font-weight: 400;
    color: #333;
    letter-spacing: 2px;
    line-height: 1.5;
    font-size: 1.5rem;
	text-align: center;
}

h3 {
    font-family: "Genos", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

p, li {
    font-family: "Genos", serif;
    font-size: 1rem;
    line-height: 1.6;
}

/* ==========================================================================
   5. BANNIÈRE DE NOËL & EFFETS
   ========================================================================== */
#holiday-banner {
    position: fixed;
    top: 0;
    right: 0;
    width: 700px; 
    height: 55px;
    transform: translate(220px, 45px) rotate(35deg);
    transform-origin: center;
    color: #ffffff;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    pointer-events: none;
    overflow: visible;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    filter: blur(0.3px);
    animation: twinkle var(--duration) infinite ease-in-out;
}

.star:nth-child(even) { width: 2px; height: 2px; box-shadow: 0 0 6px 1px white; --duration: 0.6s; }
.star:nth-child(odd) { width: 4px; height: 4px; box-shadow: 0 0 10px 2px #fffce0; --duration: 1s; }

.s1 { top: 10%; left: 5%; }    .s2 { bottom: 15%; left: 12%; }
.s3 { top: 20%; left: 20%; }  .s4 { bottom: 25%; left: 28%; }
.s5 { top: 15%; left: 35%; }  .s6 { bottom: 10%; left: 42%; }
.s7 { top: 30%; left: 50%; }  .s8 { bottom: 20%; left: 58%; }
.s9 { top: 10%; left: 65%; }  .s10 { bottom: 30%; left: 72%; }
.s11 { top: 25%; left: 80%; } .s12 { bottom: 15%; left: 88%; }
.s13 { top: 40%; left: 93%; } .s14 { bottom: 5%; left: 18%; }
.s15 { top: 5%; left: 45%; }  .s16 { bottom: 40%; left: 78%; }

.dust {
    position: absolute;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 6px white;
    opacity: 0;
    pointer-events: none;
}

.d1, .d3, .d5, .d7 { width: 3px; height: 3px; }
.d2, .d4, .d6, .d8 { width: 1.5px; height: 1.5px; box-shadow: 0 0 4px white; }

.d1 { top: 20%; left: 0%;  animation: drift-random 12s infinite linear; animation-delay: 0s; }
.d2 { top: 70%; left: 10%; animation: drift-random 15s infinite linear; animation-delay: -2s; }
.d3 { top: 40%; left: 25%; animation: drift-random 10s infinite linear; animation-delay: -5s; }
.d4 { top: 80%; left: 40%; animation: drift-random 18s infinite linear; animation-delay: -1s; }
.d5 { top: 15%; left: 55%; animation: drift-random 14s infinite linear; animation-delay: -7s; }
.d6 { top: 50%; left: 70%; animation: drift-random 11s infinite linear; animation-delay: -3s; }
.d7 { top: 30%; left: 85%; animation: drift-random 16s infinite linear; animation-delay: -4s; }
.d8 { top: 65%; left: 15%; animation: drift-random 13s infinite linear; animation-delay: -8s; }

@keyframes drift-random {
    0% { transform: translate(-50px, 0px); opacity: 0; }
    20% { opacity: 0.8; }
    50% { transform: translate(250px, -15px); opacity: 1; }
    80% { opacity: 0.8; }
    100% { transform: translate(600px, 10px); opacity: 0; }
}

@keyframes twinkle {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.5); opacity: 1; }
}

/* ==========================================================================
   6. NAVIGATION (HEADER, MENU DESKTOP & MOBILE)
   ========================================================================== */
header, nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.desktop-nav {
    display: none;
    background: black;
    color: white;
    padding: 1.5rem 1rem;
    text-align: center;
}

.desktop-nav .logo {
    display: block;
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    color: white;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
    text-align: center;
}

.desktop-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.desktop-nav li {
    display: inline-block;
    margin: 0 1rem;
}

.desktop-nav a {
    font-family: 'Poiret One', cursive;
    color: white;
    text-decoration: none;
}

nav a:hover {
    color: #ffa500;
}

.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: black;
    color: white;
    padding: 1rem;
}

.logo {
    font-family: 'Dancing Script', cursive;
    font-weight: 200;
    color: white;
    letter-spacing: 1px;
    line-height: 1.5;    
}

.mobile-header .logo {
    font-size: 1.5rem;
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.burger {
    width: 25px;
    height: 3px;
    background: white;
    z-index: 1000;
}

.mobile-nav {
    display: none;
    background: black;
}

.mobile-nav.show {
    display: block;
}

.mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.mobile-nav li {
    border-bottom: 1px solid white;
}

.mobile-nav a {
    color: white;
    text-decoration: none;
    padding: 1rem;
    display: block;
}

/* ==========================================================================
   7. SECTIONS SPÉCIFIQUES (ACCUEIL, BIOGRAPHIE, GALERIE, EVENEMENTS)
   ========================================================================== */
#accueil {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0; /* Override */
}

.intro {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 20px;
    max-width: 800px;
    margin: 0 auto;
}

.intro h1 {
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    margin-bottom: 0.5rem;
}

.intro h2 {
    color: #f0f0f0;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-family: 'Poiret One', cursive;
    font-size: 2em;
    letter-spacing: 3px;
}

/* Bandes de transition photos */
.bande-photo1, .bande-photo2, .bande-photo3, .bande-photo4 {
    width: 100%;
    height: 300px !important;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}
.bande-photo1 { background-image: url("../links/fond.jpg"); }
.bande-photo2 { background-image: url("../links/fond2.webp"); }
.bande-photo3 { background-image: url("../links/aerien01.webp"); }
.bande-photo4 { background-image: url("../links/panorama.webp"); height: 200px !important; min-height: 200px;}

/* Biographie */
.biographie {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.biographie .photo {
    flex: 0 0 30%;
    text-align: center;
    margin-right: 2rem;
}

.biographie .texte {
    flex: 1;
    text-align: justify;
    margin-left: 2rem;
    margin-top: 40px;
    font-size: 1.1em;
}

/* Galerie */
#galerie {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}

.galerie-container {
    width: 80%;
    margin: 0 auto;
}

.presentation-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.texte-presentation {
    width: 48%; 
    text-align: justify;
    align-self: flex-start;
    margin-top: 2rem;
}

.image-presentation {
    width: 35%;
    text-align: center;
}

.image-presentation img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

/* Événements & Cards */
#evenements h2 {
    font-size: 1.5rem;
    margin-top: 60px;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

.cards-container {
    display: flex !important;
    flex-direction: row !important; /* Horizontal sur PC */
    flex-wrap: wrap; /* Permet de passer à la ligne si besoin */
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
}

.card {
    flex: 0 1 calc(33.333% - 20px);
    min-width: 300px;
    max-width: 350px;
    background: white; /* Assure-toi d'avoir un fond pour voir l'ombre */
    border-radius: 8px; 
    overflow: hidden; /* <--- PREMIÈRE SÉCURITÉ : masque tout ce qui dépasse de la carte */
    display: flex;
    flex-direction: column;
}

/* On crée ou on cible le conteneur de l'image */
.card-img-container {
    width: 100%;
    height: 200px;
    overflow: hidden; /* <--- DEUXIÈME SÉCURITÉ : bloque le zoom de l'image ici */
    border-bottom: 1px solid #ddd;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card img {
    width: 100%;
    height: 100%; /* L'image remplit son conteneur */
    margin-bottom: 0; /* On enlève la marge ici, on la gérera sur le texte */
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

/* L'effet de zoom au survol */
.card:hover img {
    transform: scale(1.15); /* 1.15 est souvent plus élégant que 1.25 qui zoome trop fort */
}

/* On ajuste un peu le texte pour compenser l'absence de marge sur l'image */
.card h3 {
    margin: 15px 15px 10px 15px; 
    font-family: 'Poiret One', cursive;
    font-size: 1.5rem;
    color: #555;
}

.card p {
    margin: 0 15px 15px 15px;
    font-size: 1rem;
    color: #666;
    flex-grow: 1;
}

.btn-card {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    font-family: 'Poiret One', cursive;
    font-size: 1rem;
    color: white !important;
    background-color: #ff8000;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    text-align: center;
}

.btn-card:hover {
    background-color: #b86614;
    color: #ffffff;
}

/* ==========================================================================
   8. MODALES & QUIZ & FORMULAIRES
   ========================================================================== */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.5s;
    padding: 20px;
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 30px;
    border-radius: 10px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: slideIn 0.5s;
    position: relative;
    text-align: center;
}

.close-button {
    color: #aaa;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover { color: #000; }

#quiz-container { color: #333; }

#progress-bar-container {
    width: 100%;
    background-color: #ddd;
    border-radius: 5px;
    overflow: hidden;
    margin: 10px 0 20px;
}

#progress-bar {
    height: 15px;
    background-color: #4CAF50;
    width: 0%;
    transition: width 0.5s ease-in-out;
}

.options-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.quiz-option {
    background-color: #000;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 12px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    width: 100%;
    text-align: left;
    color: #fff;
}

.quiz-option:hover { background-color: #e2e2e2; border-color: #999; color: #000; }
.quiz-option.correct { background-color: #c8e6c9; border-color: #4CAF50; color: #333; }
.quiz-option.incorrect { background-color: #ffcdd2; border-color: #f44336; color: #333; }

#quiz-gauge { width: 100%; max-width: 400px; margin: 20px auto; position: relative; }

.linear-gauge-bar {
    position: relative;
    width: 100%;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(to right, #e74c3c 0%, #e74c3c 25%, #e67e22 25%, #e67e22 50%, #f1c40f 50%, #f1c40f 75%, #2ecc71 75%, #2ecc71 100%);
}

#gauge-cursor {
    width: 14px;
    height: 14px;
    background-color: #d32f2f;
    border: 2px solid white;
    border-radius: 50%;
    position: absolute;
    top: -3px;
    transform: translateX(-50%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
    display: none; 
    transition: left 0.5s ease-out;
}

#gauge-levels { display: flex; justify-content: space-between; margin-top: 10px; }
.level { font-size: 0.7rem; font-weight: bold; flex: 1; text-align: center; }

.red-text { color: #e74c3c; }
.orange-text { color: #e67e22; }
.yellow-text { color: #f1c40f; }
.green-text { color: #2ecc71; }

.slideshow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.slideshow img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1.5s ease-in-out; }
.slideshow img.active { opacity: 1; }
.slideshow::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 2; }

.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }

.btn-send { width: 100%; padding: 12px; background-color: #333; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; }

#scroll-to-top {
    display: none; position: fixed; bottom: 50px; right: 20px; background: #333; color: #fff; border: none; padding: 15px 25px; border-radius: 50%; cursor: pointer; opacity: 0; font-size: 1.5rem; transition: opacity 0.3s ease, visibility 0.3s ease;
}
#scroll-to-top.show { display: block; opacity: 1; visibility: visible; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.footer {
    position: sticky; bottom: 0; left: 0; width: 100%; background-color: #000; color: #fff; display: flex; font-family: 'Poiret One', cursive; justify-content: space-between; align-items: center; padding: 10px 20px; box-shadow: 0 -2px 5px rgba(0,0,0,0.1); z-index: 1000;
}
footer a { color: white; text-decoration: none; transition: color 0.3s ease; }
footer a:hover { color: orange; text-decoration: underline; }

/* Modifié : Ajout de display flex pour aligner les réseaux ET le compteur sur la même ligne */
.footer .footer-left { display: flex; align-items: center; } 
.footer .footer-left a { text-decoration: none; color: inherit; font-size: 24px; }
.footer .footer-left a:not(:last-child) { margin-right: 15px; }
.footer .footer-left a:hover { color: #ff9900; }
.footer small { font-size: 12px; padding-right: 30px; }

/* AJOUT : Style spécifique pour ton compteur textuel */
.footer .footer-left small {
    color: #fff;
    opacity: 0.7;
    font-size: 14px; /* S'accorde avec tes icônes de 24px */
    white-space: nowrap; /* Empêche le texte de se couper sur deux lignes */
    margin-left: 10px; /* Espace après l'icône LinkedIn */
}

@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes slideIn { from {transform: translateY(-50px);} to {transform: translateY(0);} }

/* AJOUT : Le comportement responsive pour mobile et tablette */
@media (max-width: 768px) {
    .footer {
        flex-direction: column !important;
        gap: 15px;
        padding: 15px 20px !important;
        text-align: center;
    }
    .footer small {
        padding-right: 0; /* Supprime le décalage à droite sur mobile */
        line-height: 1.6; /* Donne de l'air aux mentions légales */
    }
    .footer .footer-right {
        display: none; /* Masque le bloc vide sur mobile */
    }
}

/* ==========================================================================
   10. RESPONSIVE MEDIA QUERIES (Correction du blocage de contenu)
   ========================================================================== */
@media (min-width: 1024px) {
    .mobile-header, .mobile-nav { display: none; }
    .desktop-nav { display: block; }
}

@media (max-width: 768px) {
    /* 1. LIBÉRATION DU SCROLL SUR MOBILE (Crucial) */
/* 1. LIBÉRATION DU SCROLL SUR MOBILE (Crucial) */
    html {
        scroll-snap-type: none !important;
        overflow-y: auto !important;
    }

    body { 
        width: 100vw; 
        overflow-x: clip; 
        overflow-y: auto !important;
    }
	
	section {
        scroll-snap-align: none !important;
        height: auto !important; /* Laisse le contenu définir la hauteur */
        min-height: auto !important;
    }
	
.mobile-header {
    height: 80px !important; /* On force une hauteur confortable */
    display: flex !important;
    align-items: center !important; /* Centre verticalement */
    justify-content: space-between !important;
    padding: 0 20px !important;
}

.mobile-header .logo {
    font-size: 1.8rem !important;
    margin: 0 !important; /* Supprime les marges parasites */
    line-height: 80px !important; /* Aligne le texte sur la hauteur du header */
    display: block !important;
}   
    /* 2. LIBÉRATION DES SECTIONS */
    #accueil, #biographie, #galerie, #evenements, #newsletter {
        scroll-snap-align: none !important; /* Plus d'aimantage parasite */
        scroll-snap-stop: normal !important;
        min-height: auto !important; /* On laisse la section s'adapter au contenu */
        height: auto !important;
        padding: 80px 20px 40px 20px !important; /* Espace pour le header mobile */
    }
	
	#accueil {
			position: relative !important;
			width: 100vw !important;
			height: 100vh !important;
			min-height: 100vh !important;
			overflow: hidden !important;
			padding: 0 !important; /* On vire les paddings qui écrasent le contenu */
			margin: 0 !important;
		}
		
#accueil .slideshow, 
    #accueil .slideshow img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 1 !important;
    }

	#accueil .intro {
			width: 100% !important;
			max-width: 90% !important;
			margin: 0 auto !important; /* Force le centrage horizontal du bloc */
			text-align: center !important; /* Centre toutes les lignes de texte à l'intérieur */
			padding: 0 !important;
		}
		
	/* Ciblage précis du titre Gabriel s'il s'agit d'un h1 ou d'une classe spécifique */
		#accueil .intro h1, 
		#accueil .intro .titre-principal { 
			display: block !important;
			width: 100% !important;
			text-align: center !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}
	
	.slideshow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100% !important;
        z-index: 1;
    }
	
	.intro {
        position: relative;
        z-index: 10;
        margin-top: auto;
        margin-bottom: auto; /* Centre le texte verticalement */
    }

    h1 { font-size: 3rem; }
    h2 { font-size: 1.3rem; text-align: center; } /* Aligné au centre pour le responsive */
    p { font-size: 1.2rem; }
    
    #accueil .slideshow, #accueil .slideshow img { width: 100vw; height: 100vh !important; max-width: 100vw; object-fit: cover; }
    
    /* Biographie en responsive */
#biographie {
        position: relative;
        display: block !important; /* On sort du flex si nécessaire pour isoler la section */
        width: 100%;
        background-color: #f5f5f5; /* Pour bien voir la séparation */
        padding-top: 50px !important; 
        margin-top: 0;
    }

    .biographie .photo {
        width: 100%;
        max-width: 500px; /* Évite que la photo ne soit trop géante sur tablette */
        display: flex;
        justify-content: center;
        margin: 0 auto 20px auto;
    }

    .biographie .photo img {
        width: 90%; /* On laisse une petite marge sur les côtés */
        height: auto;
        border-radius: 5px; /* Optionnel : un petit arrondi pour le style */
        display: block;
    }

	.biographie .texte {
			width: 90%;
			margin: 0 auto !important;
			text-align: justify !important; /* <--- Force l'alignement justifié */
			text-justify: inter-word; /* Rend la justification plus propre sur petit écran */
		}
		
.biographie .texte p {
        hyphens: auto;
        -webkit-hyphens: auto; /* Pour la compatibilité Safari/iPhone */
    }
}
    
    /* Galerie en responsive */
    .presentation-row { flex-direction: column; }
    .texte-presentation, .image-presentation { width: 100%; text-align: justify; }
    .image-presentation { margin-top: 20px; }
    
    /* 3. AFFICHAGE DE TOUTES LES CARTES ÉVÉNEMENTS */
    .cards-container { 
        display: flex;
        flex-direction: column; 
        align-items: center; 
        gap: 25px;
        width: 100%;
    }
    
    .card {
        width: 100%;
        max-width: 100%; /* Les cartes prennent la largeur de l'écran */
        box-sizing: border-box;
    }
    
    /* Modales & Quiz */
    .modal-content { width: 95% !important; max-width: none; margin: 10% auto; padding: 15px; box-sizing: border-box; }
    #quiz-container { width: 100%; overflow-x: hidden; }
    #quiz-gauge { max-width: 90%; margin: 30px auto; }
    #gauge-levels .level { font-size: 0.65rem; }
    #gauge-cursor { display: none !important; visibility: hidden !important; }
    
.quiz-option { background-color: #222; border: 1px solid #444; border-radius: 8px; margin-bottom: 10px; padding: 15px; }
} 

@media (max-width: 480px) {
    .conteneur { width: 100%; }
}