/* ==========================================================================
   SOMMAIRE
   1.  FONTS
   2.  VARIABLES (Couleurs, Formes)
   3.  BASE (Reset, Body, Liens, Images)
   4.  HEADER & NAVIGATION
   5.  HERO (Bandeau titre)
   6.  COMPOSANTS COMMUNS (Boutons, Intro, Manifeste)
   7.  PAGE ACCUEIL (Grilles Projets, Cartes)
   8.  PAGE ÉQUIPE (Grille, Cartes, Pop-up)
   9.  PAGE RÉALISATIONS (Saviez-vous)
   10. PAGE CONTACT
   11. FOOTER
   12. LIGHTBOX (Zoom)
   13. MODULE RÉSULTATS ÉLECTIONS (Nouveau)
   ========================================================================== */

/* ==========================================================================
   1. IMPORTATION DES POLICES (LUCIOLE)
   ========================================================================== */
@font-face { font-family: 'Luciole'; src: url('fonts/Luciole-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Luciole'; src: url('fonts/Luciole-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'Luciole'; src: url('fonts/Luciole-Italic.woff2') format('woff2'); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: 'Luciole'; src: url('fonts/Luciole-BoldItalic.woff2') format('woff2'); font-weight: bold; font-style: italic; font-display: swap; }

/* ==========================================================================
   2. VARIABLES & DESIGN SYSTEM
   ========================================================================== */
:root {
    /* --- COULEURS --- */
    --primary-color: #267A71;  /* Vert du Logo */
    --primary-light: #E9F2F1;  /* Vert très pâle (Fond des cartes équipe) */
    --primary-dark: #1A5E56;

    /* Le Rouge "Terracotta" */
    --accent-color: #D35448; 
    --accent-hover: #b54035;
    --accent-pastel: #FBECEB; 

    /* Textes */
    --text-dark: #2C3E50;
    --text-light: #555555;

    /* Fonds */
    --bg-light: #FDF3F2;  /* Rouge passé très clair (papier chaud) */
    --white: #ffffff;

    /* --- FORMES --- */
    --radius-btn: 50px;    /* Boutons ronds */
    --radius-card: 15px;   /* Arrondi des cartes */
    --radius-photo: 20px;  /* Carré arrondi pour les photos */

    /* Accessibilité */
    --focus-outline: 3px solid #000000;
    --focus-offset: 2px;
}

/* ==========================================================================
   3. BASE & BACKGROUND
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Luciole', 'Segoe UI', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
}

/* Typographie de base */
h1, h2, h3, h4 { font-weight: 700; margin-bottom: 1rem; line-height: 1.2; }
h1 { font-size: 2.8rem; color: var(--primary-color); }
h2 { font-size: 2.2rem; text-align: center; margin-bottom: 40px; color: var(--primary-color); }
h3 { font-size: 1.5rem; color: var(--accent-color); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }

/* Liens & Focus */
a { text-decoration: none; color: var(--accent-color); transition: 0.3s; }
a:hover { text-decoration: underline; color: var(--accent-hover); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* Accessibilité (Lien "Aller au contenu") */
.skip-link {
    position: absolute; top: -9999px; left: 50%; transform: translateX(-50%);
    background: var(--accent-color); color: white; padding: 10px 20px;
    z-index: 9999; font-weight: bold; border-radius: 0 0 10px 10px;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   4. HEADER & NAVIGATION (ACCESSIBLE & RESPONSIVE)
   ========================================================================== */
header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* Ombre teintée rouge spécifique au Style 1 */
    box-shadow: 0 2px 15px rgba(186, 114, 107, 0.1); 
    position: sticky; top: 0; z-index: 1000;
}

.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; min-height: 90px; position: relative;
}

/* --- LOGO --- */
.logo-container { display: flex; align-items: center; gap: 15px; z-index: 1001; }
.logo-img { height: 85px; width: auto; transition: 0.3s; }
.logo-text { font-size: 1.4rem; font-weight: bold; color: var(--primary-color); line-height: 1.1; }

/* --- NAVIGATION ORDI (Par défaut) --- */
.nav-links { display: flex; gap: 20px; align-items: center; margin: 0; padding: 0; }
.nav-links a { font-weight: 600; color: var(--text-dark); padding: 8px 15px; border-radius: var(--radius-btn); }
.nav-links a:hover, .nav-links a.active { background-color: rgba(38, 122, 113, 0.1); color: var(--primary-color); text-decoration: none; }

/* Le bouton Burger est CACHÉ sur ordinateur */
.menu-toggle { display: none; }


/* ==========================================================================
   ADAPTATION MOBILE (TABLETTE & SMARTPHONE)
   ========================================================================== */
@media (max-width: 900px) {
    
    .navbar { padding: 5px 20px; } /* Moins de marge en haut/bas pour gagner de la place */
    .logo-img { height: 50px; } /* Logo plus petit sur mobile pour aérer */

    /* 1. LE BOUTON BURGER */
    .menu-toggle {
        display: block;
        background: none; border: none; cursor: pointer; padding: 10px;
        z-index: 1002;
    }
    .hamburger-line {
        display: block; width: 30px; height: 3px; margin: 5px auto;
        background-color: var(--primary-color); border-radius: 3px; transition: 0.3s;
    }

    /* 2. LE MENU DÉROULANT */
    .nav-menu {
        position: absolute; 
        top: 100%; left: 0; width: 100%;
        background: var(--white);
        border-top: 1px solid rgba(0,0,0,0.05);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        display: none; 
        padding: 15px; /* Padding réduit */
        
        /* Gestion du scroll si l'écran est vraiment petit */
        max-height: calc(100vh - 70px);
        overflow-y: auto; 
    }

    .nav-menu.is-active {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* CONFIGURATION PAR DÉFAUT (PORTRAIT - Vertical) */
    .nav-links { 
        display: flex;
        flex-direction: column; /* Empilés */
        width: 100%; 
        gap: 10px; 
    }
    
    /* Style des liens */
    .nav-links a {
        display: flex; align-items: center; justify-content: center; /* Centrage total */
        width: 100%; 
        padding: 12px;
        background-color: var(--bg-light);
        color: var(--text-dark);
        border-radius: 10px; /* Petit arrondi pour faire "bouton" */
    }

    /* Le bouton contact Rouge */
    .nav-links .btn-cta {
        background-color: var(--accent-color) !important;
        color: var(--white) !important;
        box-shadow: none; 
    }

    /* --- OPTIMISATION PAYSAGE (Horizontal) --- */
    /* Si l'écran est orienté Paysage, on passe en grille 2 colonnes */
    @media (orientation: landscape) {
        .nav-links {
            display: grid; 
            grid-template-columns: 1fr 1fr; /* 2 colonnes égales */
            gap: 10px;
        }
        
        /* Ajustement pour que le menu prenne moins de place en hauteur */
        .nav-menu {
            padding: 10px;
        }
        .nav-links a {
            padding: 8px; /* Boutons plus fins en hauteur */
            font-size: 0.9rem;
        }
    }

    /* ANIMATION CROIX */
    .menu-toggle.is-active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .hamburger-line:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ==========================================================================
   5. HERO (Bandeau Titre)
   ========================================================================== */
.hero {
    background-image: linear-gradient(135deg, rgba(38, 122, 113, 0.95), rgba(26, 94, 86, 0.9)), url('https://via.placeholder.com/1920x800/cccccc/ffffff?text=Photo+du+Gâvre');
    background-size: cover; background-position: center;
    color: var(--white); text-align: center; 
    padding: 40px 20px;
    margin: 40px; width: calc(100% - 80px);
    border-radius: 100px 70px 100px 70px;
    box-shadow: 0 15px 40px rgba(38, 122, 113, 0.2);
}
.hero h1 { color: var(--white); margin-bottom: 20px; }
.hero-subtitle { font-size: 1.4rem; max-width: 800px; margin: 0 auto; font-weight: 300; }

@media (max-width: 768px) {
    .hero { margin: 10px; width: calc(100% - 20px); border-radius: 30px 15px 30px 15px; padding: 60px 20px; }
    h1 { font-size: 2rem; }
}

/* ==========================================================================
   6. COMPOSANTS COMMUNS (Boutons, Textes Intro)
   ========================================================================== */
/* Boutons */
.btn-cta {
    background-color: var(--accent-color); color: var(--white) !important;
    padding: 12px 30px; border-radius: var(--radius-btn);
    font-weight: bold; display: inline-block;
    box-shadow: 0 4px 10px rgba(211, 84, 72, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-cta:hover { background-color: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(211, 84, 72, 0.4); text-decoration: none; }
.btn-white { background-color: var(--white); color: var(--accent-color) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.link-arrow { color: var(--accent-color); font-weight: bold; text-decoration: underline; }

/* Bloc "Vision Globale" (Manifeste - Pleine largeur) */
.vision-card {
    background: var(--white);
    padding: 50px;
    border-radius: var(--radius-card);
    box-shadow: 0 10px 30px rgba(38, 122, 113, 0.08);
    border-left: 8px solid var(--primary-color); 
    margin-bottom: 60px; position: relative;
}
.vision-card h2 { text-align: left; margin-bottom: 25px; font-size: 2rem; }
.vision-content { font-size: 1.1rem; color: var(--text-dark); text-align: justify; line-height: 1.8; max-width: 900px; }
.vision-content::first-letter { font-size: 3.5rem; font-weight: bold; color: var(--accent-color); float: left; line-height: 0.8; margin-right: 10px; margin-top: 5px; }

/* Style du "Chapeau" (Intro avec traits rouges) */
.intro-chapeau {
    font-size: 1.3rem; color: var(--primary-dark); text-align: center;
    max-width: 800px; margin: 0 auto 50px; line-height: 1.5; font-weight: 500; position: relative;
}
.intro-chapeau::before, .intro-chapeau::after {
    content: ''; display: block; width: 60px; height: 4px;
    background-color: var(--accent-color); border-radius: 2px;
    margin-left: auto; margin-right: auto;
}
.intro-chapeau::before { margin-bottom: 25px; }
.intro-chapeau::after { margin-top: 25px; }

@media (max-width: 768px) {
    .vision-card { padding: 30px 20px; border-left-width: 5px; }
}

/* ==========================================================================
   7. PAGE ACCUEIL (Grilles & Cartes Projets)
   ========================================================================== */
.features { padding: 40px 0; }

/* Grille 2 Colonnes (Projets Majeurs) */
.major-projects-grid {
    display: block; column-count: 2; column-gap: 40px; margin-bottom: 60px;
}

/* Grille 3 Colonnes (Masonry) */
.features-grid {
    display: block; column-count: 3; column-gap: 30px;
}

/* Style des Cartes (Commun) */
.feature-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: var(--radius-card);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border-top: 5px solid var(--accent-color);
    transition: transform 0.3s;
    margin-bottom: 30px;
    break-inside: avoid;
    width: 100%;
}
.feature-card:hover { transform: translateY(-5px); }
.feature-card p { text-align: justify; hyphens: auto; }

/* Section À Propos */
.about { padding: 80px 0; }
.about-content { display: flex; align-items: center; gap: 60px; flex-wrap: wrap; margin-bottom: 60px; }
.about-text { flex: 1; }
.about-image { flex: 1; min-width: 300px; }
.about-image img { border-radius: 30px 60px 30px 60px; box-shadow: 20px 20px 0px rgba(38, 122, 113, 0.1); }

/* Adaptation Mobile Grilles */
@media (max-width: 900px) { .features-grid { column-count: 2; } }
@media (max-width: 768px) { .major-projects-grid { column-count: 1; } }
@media (max-width: 600px) { .features-grid { column-count: 1; } }


/* ==========================================================================
   8. PAGE ÉQUIPE
   ========================================================================== */
.team-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px; margin-top: 50px;
}

.team-bio-card {
    background: var(--primary-light);
    padding: 30px 20px; 
    border-radius: var(--radius-card);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s;
    border: 1px solid rgba(38, 122, 113, 0.1);
}
.team-bio-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

.team-bio-card img {
    width: 160px; height: 160px; object-fit: cover;
    border-radius: var(--radius-photo); /* Carré arrondi */
    margin: 0 auto 20px;
    border: 4px solid var(--primary-color); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.team-bio-card h3 { 
    background-color: var(--primary-color); color: var(--white);
    font-size: 1.2rem; margin-bottom: 10px;
    display: inline-block; padding: 8px 15px; border-radius: 8px; width: 100%;
}
.team-bio-card .role { 
    color: var(--primary-color); font-weight: bold; text-transform: uppercase;
    font-size: 0.85rem; margin-bottom: 15px; display: block; letter-spacing: 1px;
}
.team-bio-card p { font-size: 0.95rem; color: var(--text-dark); line-height: 1.5; }

/* Style Spécifique pour la photo dans le Pop-up (Pour ce fichier style.css) */
.modal-header img {
    border-radius: 20px; /* Force le carré arrondi */
}


/* ==========================================================================
   9. PAGE RÉALISATIONS (Saviez-vous)
   ========================================================================== */
.capsule-filters { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }

.filter-btn {
    background: transparent; border: 2px solid var(--primary-color); color: var(--primary-color);
    padding: 8px 20px; border-radius: 50px; cursor: pointer; font-weight: bold; transition: 0.3s;
}
.filter-btn.active, .filter-btn:hover { background: var(--primary-color); color: white; }

/* ==========================================================================
   GRILLE TYPE "MASONRY" (Colonnes dynamiques)
   ========================================================================== */
.capsules-grid {
    display: block; 
    /* Par défaut (Grand écran et Tablette paysage) : 3 colonnes */
    column-count: 3; 
    column-gap: 25px; /* Espacement un peu réduit pour gagner de la place */
    margin-top: 30px;
}

.capsule-card {
    background: var(--white); border-radius: var(--radius-card);
    overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s;
    
    /* Indispensable pour le Masonry : */
    display: inline-block; 
    width: 100%;
    margin-bottom: 25px; 
    break-inside: avoid;
}

.capsule-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

/* Gestion du texte : Pas de coupure de mots */
.capsule-card p { 
    text-align: justify; 
    hyphens: none; 
    -webkit-hyphens: none;
    -ms-hyphens: none;
}

.capsule-media {
    position: relative; width: 100%; aspect-ratio: 16/9;
    background: #000; flex-shrink: 0;
}
.capsule-media video, .capsule-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capsule-content { padding: 25px; display: flex; flex-direction: column; flex-grow: 1; }
.capsule-content h3 { font-size: 1.2rem; margin-bottom: 15px; color: var(--primary-color); line-height: 1.3; }
.capsule-content p { font-size: 0.95rem; color: var(--text-dark); margin-bottom: 15px; line-height: 1.5; }
.capsule-footer { margin-top: auto; padding-top: 15px; border-top: 1px solid #eee; font-weight: bold; color: var(--accent-color); font-size: 0.9rem; }

/* Adaptation Mobile des Colonnes */

/* On garde 3 colonnes le plus longtemps possible */
/* Passage à 2 colonnes seulement quand ça devient vraiment étroit (Tablette portrait) */
@media (max-width: 850px) {
    .capsules-grid { column-count: 2; }
}

/* Passage à 1 colonne sur les vrais mobiles */
@media (max-width: 550px) {
    .capsules-grid { column-count: 1; }
}

/* ==========================================================================
   FILTRES FLOTTANTS & COULEURS DE CATÉGORIES
   ========================================================================== */

/* ==========================================================================
   MISE EN PAGE : CONTENEUR PRINCIPAL (FILTRE + GRILLE)
   ========================================================================== */

/* Création de la grille : Colonne Filtre | Espace | Colonne Contenu */
.content-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr; /* 280px pour le filtre, le reste pour les cartes */
    gap: 40px; /* Espace entre le filtre et les cartes */
    align-items: start; /* Important pour que le sticky fonctionne */
    margin-top: 40px;
    position: relative;
}

/* ==========================================================================
   BOÎTE DE FILTRES (SIDEBAR)
   ========================================================================== */

.sticky-filters {
    /* MAGIE ICI : Sticky permet de suivre le scroll tout en occupant de l'espace */
    position: sticky; 
    top: 120px; /* Se colle à 120px du haut (laisse la place au header) */
    
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border: 1px solid #eee;
    z-index: 900;
    width: 100%; /* Prend toute la largeur de sa colonne (280px) */
}

.sticky-filters h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: var(--primary-color);
    text-align: center;
}

.filter-option {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-light);
    transition: 0.2s;
    line-height: 1.4;
}

.filter-option:hover { color: var(--text-dark); }

.filter-option input {
    margin-right: 10px;
    margin-top: 3px;
    accent-color: var(--primary-color);
    cursor: pointer;
    transform: scale(1.2);
    flex-shrink: 0;
}

/* COULEURS DES THÈMES */
.cat-enfance { border: 1px solid #3498db !important; border-left: 5px solid #3498db !important; }
.legend-enfance { color: #3498db; font-weight: bold; }

.cat-cadre { border: 1px solid #27ae60 !important; border-left: 5px solid #27ae60 !important; }
.legend-cadre { color: #27ae60; font-weight: bold; }

.cat-asso { border: 1px solid #e67e22 !important; border-left: 5px solid #e67e22 !important; }
.legend-asso { color: #e67e22; font-weight: bold; }

.cat-eco { border: 1px solid #9b59b6 !important; border-left: 5px solid #9b59b6 !important; }
.legend-eco { color: #9b59b6; font-weight: bold; }


/* ==========================================================================
   RESPONSIVE : QUAND L'ÉCRAN EST TROP PETIT
   ========================================================================== */

@media (max-width: 1100px) {
    /* On casse la grille : tout s'empile */
    .content-wrapper {
        grid-template-columns: 1fr; /* Une seule colonne */
        gap: 30px;
    }

    /* Le filtre redevient un bloc normal en haut */
    .sticky-filters {
        position: relative; /* Plus de sticky */
        top: auto;
        width: 100%;
        display: flex; 
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 15px;
    }

    .sticky-filters h3 { 
        width: 100%; 
        margin-bottom: 10px; 
    }

    /* Style "bouton" pour les filtres sur mobile/tablette pour faciliter le clic */
    .filter-option { 
        background: #fff; 
        padding: 8px 15px; 
        border-radius: 20px; 
        border: 1px solid #eee; 
        margin-bottom: 0; 
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
}

/* 2. Couleurs des bordures par Thème */

/* Enfance (Bleu) */
.cat-enfance { border: 1px solid #3498db !important; border-left: 5px solid #3498db !important; }
.legend-enfance { color: #3498db; font-weight: bold; }

/* Cadre de vie / Solidarité (Vert) */
.cat-cadre { border: 1px solid #27ae60 !important; border-left: 5px solid #27ae60 !important; }
.legend-cadre { color: #27ae60; font-weight: bold; }

/* Vie Asso / Culture (Orange) */
.cat-asso { border: 1px solid #e67e22 !important; border-left: 5px solid #e67e22 !important; }
.legend-asso { color: #e67e22; font-weight: bold; }

/* Économie / Finances (Violet) */
.cat-eco { border: 1px solid #9b59b6 !important; border-left: 5px solid #9b59b6 !important; }
.legend-eco { color: #9b59b6; font-weight: bold; }

/* 3. Adaptation Mobile : On passe le menu en haut au lieu de flottant */
@media (max-width: 1100px) {
    .sticky-filters {
        position: relative;
        left: auto; top: auto; transform: none;
        width: 100%;
        margin-bottom: 30px;
        display: flex; flex-wrap: wrap; justify-content: center; gap: 15px;
    }
    .sticky-filters h3 { width: 100%; margin-bottom: 10px; }
    /* Style un peu plus bouton sur mobile pour faciliter le clic */
    .filter-option { 
        background: #fff; padding: 5px 12px; border-radius: 20px; 
        border: 1px solid #eee; margin-bottom: 5px; 
    }
}

/* ==========================================================================
   10. PAGE CONTACT
   ========================================================================== */
.contact-wrapper { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }

.contact-method {
    position: relative; background: var(--white); padding: 30px; border-radius: var(--radius-card);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 20px;
    transition: transform 0.3s; border-left: 8px solid var(--accent-color); 
}
.contact-method:hover { transform: translateX(10px); background-color: #fffdfc; }

.contact-icon {
    font-size: 2rem; background-color: var(--accent-pastel); color: var(--accent-color);
    width: 60px; height: 60px; display: flex; justify-content: center; align-items: center;
    border-radius: 50%; flex-shrink: 0;
}
.contact-info h3 { margin-bottom: 5px; font-size: 1.3rem; color: var(--text-dark); }
.contact-info p { margin-bottom: 0; color: var(--text-light); }
.contact-info a { font-weight: bold; font-size: 1.1rem; }

/* Variantes */
.phone-style { border-left-color: var(--primary-color); }
.phone-style .contact-icon { background-color: rgba(38, 122, 113, 0.1); color: var(--primary-color); }
.phone-style a { color: var(--primary-color); }
.whatsapp-style { border-left-color: #25D366; }
.whatsapp-style .contact-icon { background-color: #dcf8c6; color: #128C7E; }
.whatsapp-style a { color: #128C7E; }
.stretched-link::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; }


/* ==========================================================================
   11. FOOTER
   ========================================================================== */
footer {
    background-color: var(--primary-color); color: var(--white);
    padding: 60px 0 30px; text-align: center;
    border-radius: 80px 40px 0 0; margin-top: 40px;
}
.footer-brand-badge {
    background-color: var(--accent-pastel); color: var(--accent-color);
    display: inline-block; padding: 10px 30px; border-radius: 50px; margin-bottom: 20px;
}
.footer-brand-badge h3 { margin: 0; color: inherit; font-size: 1.8rem; }
footer a { color: #fff; text-decoration: underline; }


/* ==========================================================================
   12. LIGHTBOX (Zoom)
   ========================================================================== */
.zoomable-photo { cursor: zoom-in; transition: opacity 0.3s; }
.zoomable-photo.is-hidden { opacity: 0; }

.lightbox-modal {
    display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;
    background-color: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
    opacity: 0; transition: opacity 0.3s ease-out;
}
.lightbox-modal.is-open { opacity: 1; }

.lightbox-content {
    position: absolute; top: 0; left: 0; transform-origin: top left;
    max-width: 90%; max-height: 90vh;
    border-radius: 10px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.close-lightbox {
    position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold;
    transition: 0.3s; cursor: pointer; z-index: 2001;
}

/* ==========================================================================
   13. MODULE RÉSULTATS ÉLECTIONS (NOUVEAU)
   ========================================================================== */
.election-section { padding: 60px 0; background-color: transparent; border-bottom: 1px solid rgba(0,0,0,0.05); }

.election-card {
    background: var(--white);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-card);
    padding: 40px;
    box-shadow: 0 10px 30px rgba(38, 122, 113, 0.15);
    max-width: 800px;
    margin: 0 auto; /* Centré */
}

.election-header { text-align: center; margin-bottom: 40px; }
.election-date { text-transform: uppercase; letter-spacing: 2px; font-weight: bold; color: var(--text-light); font-size: 0.9rem; }
.election-header h2 { color: var(--primary-color); margin-top: 5px; }

/* --- BLOC DU HAUT : LES DEUX LISTES --- */
.lists-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 60px;
    margin-bottom: 30px;
}

/* Liste et Logo */
.list-info {
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    width: 180px;
}

.list-logo {
    width: 100px; height: 100px; object-fit: contain;
    background: white;
    border-radius: 20px;
    border: 3px solid var(--primary-color);
    padding: 5px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.list-name { font-weight: bold; font-size: 1.2rem; line-height: 1.2; margin-bottom: 10px; color: var(--text-dark); min-height: 2.4em;}

/* Badges Sièges */
.seat-badge {
    display: inline-block; padding: 6px 18px; border-radius: 20px;
    font-weight: bold; font-size: 1rem; color: white; margin-bottom: 10px; opacity: 0; transition: opacity 1s;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
.us .seat-badge { background-color: var(--primary-color); }
.them .seat-badge { background-color: #2c3e50; }

/* Chiffres Voix */
.vote-count-big { font-size: 2.5rem; font-weight: 800; display: block; line-height: 1; }
.vote-label { font-size: 0.9rem; color: #777; text-transform: uppercase; font-weight: bold; }
.us .vote-count-big { color: var(--primary-color); }
.them .vote-count-big { color: #2c3e50; }


/* --- BLOC DU BAS : LA BARRE XL --- */
.bar-wrapper { width: 100%; margin-bottom: 20px; }

.progress-track {
    background-color: #dcdcdc;
    height: 50px;
    border-radius: 25px;
    position: relative; overflow: hidden;
    /* EFFET 3D */
    box-shadow: inset 0 5px 10px rgba(0,0,0,0.2), inset 0 -2px 5px rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.1);
}

.bar-gloss {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
    z-index: 2; pointer-events: none;
}

.bar-fill-us {
    position: absolute; left: 0; top: 0; bottom: 0;
    background-color: var(--primary-color);
    background: linear-gradient(to bottom, #4cbfae, var(--primary-color), #1a5e56);
    width: 0%; border-radius: 25px 0 0 25px;
    transition: width 2s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 2px 0 10px rgba(0,0,0,0.3);
}

.bar-fill-them {
    position: absolute; right: 0; top: 0; bottom: 0;
    background-color: #2c3e50;
    background: linear-gradient(to bottom, #4a6682, #2c3e50, #182430);
    width: 0%; border-radius: 0 25px 25px 0;
    transition: width 2s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -2px 0 10px rgba(0,0,0,0.3);
}

.bar-percent {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: white; font-weight: 800; font-size: 1.4rem; z-index: 10;
    white-space: nowrap; opacity: 0; transition: opacity 0.5s 1s;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.p-us { left: 20px; }
.p-them { right: 20px; }

.majority-line {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
    background: rgba(255,255,255,0.6); z-index: 5;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* STATS */
.stats-footer {
    display: flex; justify-content: center; gap: 40px; margin-top: 30px;
    padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.1); flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-num { display: block; font-weight: bold; font-size: 1.2rem; color: var(--text-dark); }
.stat-lbl { font-size: 0.85rem; color: #777; text-transform: uppercase; letter-spacing: 1px;}

@media (max-width: 768px) {
    .lists-row { flex-direction: column; align-items: center; gap: 30px; }
    .list-info { width: 100%; padding-bottom: 20px; border-bottom: 1px dashed #ccc; }
    .list-info:last-child { border-bottom: none; padding-bottom: 0; }
    .bar-percent { font-size: 1rem; }
    .p-us { left: 10px; }
    .p-them { right: 10px; }
}