/* --- CONFIGURATION GLOBALE & VARIABLES --- */
:root {
    /* Couleurs principales */
    --primary-color: #1f3d36;       /* Vert fonce */
    --primary-rgb: 31, 61, 54;
    --accent-color: #A7C4A0;        /* Vert clair */
    --text-color: #1f3d36;
    --heading-color: #1f3d36;
    --bg-color: #fdfdfd;
    --card-bg: #ffffff;
    --light-border: #e6e8e3;
    --white: #ffffff;
    --shadow: rgba(0,0,0,0.1);

    /* === CONFIGURATION DES CARTES === */
    --card-border-width: 0px;       
    --card-border-color: transparent;       
}

[data-theme="dark"] {
    --primary-color: #122420;
    --primary-rgb: 18, 36, 32;
    --accent-color: #8fb088;
    --text-color: #e0e0e0;
    --heading-color: #A7C4A0;
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --light-border: #333333;
    --white: #e0e0e0;
    --shadow: rgba(0,0,0,0.5);
    --card-border-color: #1e1e1e;       
}

/* --- RESET GLOBAL & SCROLLBAR --- */
*, *::before, *::after {
    box-sizing: border-box; 
    scrollbar-width: thin; 
    scrollbar-color: var(--accent-color) var(--bg-color);
}

/* --- SCROLLBAR WEBKIT (Chrome/Safari) --- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 10px; border: 3px solid var(--bg-color); }
::-webkit-scrollbar-thumb:hover { background-color: var(--primary-color); }

/* --- SELECTION --- */
::selection { background-color: var(--accent-color); color: #122420; }

/* --- BODY & TRANSITIONS --- */
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

body { 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    margin: 0; 
    font-family: 'Lexend', sans-serif; 
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    animation: pageFadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); 
}

body.animate-theme, body.animate-theme * { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }

h1, h2, h3, h4, h5, h6 { color: var(--heading-color); margin-top: 0; }
a { text-decoration: none; color: inherit; }

/* --- PROGRESS BAR --- */
.progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: transparent; z-index: 10001; }
.progress-bar { height: 4px; background: var(--accent-color); width: 0%; transition: width 0.1s; }

/* --- HEADER --- */
.site-header { background-color: rgba(var(--primary-rgb), 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #ffffff; padding: 15px 0; position: sticky; top: 0; z-index: 10000; transition: transform 0.2s ease, background-color 0.2s ease; border-bottom: 1px solid rgba(255,255,255,0.05); }
.header-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.brand-text h1 { color: #ffffff; font-size: 1.5rem; font-weight: 600; }
.brand-text .sub { font-size: 0.9rem; color: var(--accent-color); margin-left: 10px; }

/* Navigation Desktop standard */
.main-nav { display: flex; gap: 20px; align-items: center; }
.nav-btn { color: rgba(255,255,255,0.9); font-weight: 500; transition: color 0.2s; position: relative; }
.nav-btn:hover { color: var(--accent-color); }
.nav-btn.current-page { color: var(--accent-color) !important; }
.nav-btn.current-page::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background-color: var(--accent-color); border-radius: 2px; }

/* --- TOGGLE THEME --- */
.theme-toggle-btn { background: none; border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--accent-color); font-size: 1.2rem; transition: all 0.2s ease; padding: 0; }
.theme-toggle-btn:hover { background-color: rgba(255,255,255,0.1); transform: rotate(15deg); border-color: var(--accent-color); }
.theme-toggle-btn svg { transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
[data-theme="dark"] .theme-toggle-btn svg { transform: rotate(360deg); }

/* --- HERO (BANNIÈRE) --- */
.hero-advanced { 
    position: relative; 
    min-height: 650px; 
    padding: 0 20px;
    
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    
    color: #ffffff; 
    overflow: hidden; 
    
    /* MODIFICATION DE L'IMAGE ICI */
    background-image: url('assets/images/Acceuil/Photo-Moi-3.webp'); 
    background-size: cover; 
    background-position: center left; 
    background-repeat: no-repeat; 
}

.hero-advanced::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%); 
    z-index: 1; 
}

.hero-content { 
    z-index: 10; 
    position: relative; 
    max-width: 600px; 
    margin-right: 5%; 
    text-align: right; 
}

.hero-subtitle { 
    font-size: 1.2rem; 
    font-weight: 500; 
    margin-bottom: 20px; 
    color: #f0f7ef !important; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.hero-title { 
    font-size: 3rem; 
    font-weight: 700; 
    line-height: 1.2; 
    margin-bottom: 30px; 
    color: #ffffff !important; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* --- BOUTON PRINCIPAL --- */
.hero-button { 
    display: inline-block; 
    background-color: rgba(31, 61, 54, 0.95); 
    color: #ffffff; 
    padding: 15px 40px; 
    border-radius: 6px; 
    font-weight: 600; 
    margin-top: 20px; 
    transition: 0.3s; 
    text-align: center;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.hero-button:hover { 
    background-color: var(--accent-color); 
    color: var(--primary-color); 
    transform: translateY(-3px);
}

/* --- AUTRES BOUTONS --- */
.submit-btn, .cookie-btn, .resource-btn, .cta-button { 
    transition: transform 0.2s ease, background-color 0.2s; 
    display: inline-block;
}
.submit-btn:hover, .cookie-btn:hover, .resource-btn:hover, .cta-button:hover {
    transform: translateY(-3px); 
}
.cta-button { background: white; color: var(--primary-color); padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; }

/* --- INTRO TEXT --- */
.intro-text-style {
    max-width: 900px;
    margin: 60px auto 40px auto;
    padding: 0 20px;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: left;
    color: var(--text-color);
}
.intro-text-style p { margin-bottom: 25px; }
.intro-text-style strong { font-weight: 700; color: var(--primary-color); }

/* =========================================
   --- CARDS & NAVIGATION (RESPONSIVE) --- 
   ========================================= */

.nav-cards { 
    max-width: 1100px; 
    margin: 0 auto 50px; 
    padding: 20px; 
    
    /* Flexbox pour alignement ligne unique */
    display: flex;
    flex-wrap: nowrap; 
    gap: 20px; /* Espace réduit entre les cartes pour gagner de la place */
    
    /* Scroll activé si pas de place */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    scroll-snap-type: x mandatory; 
    
    z-index: 20; 
    position: relative; 
}

/* Cache la barre de scroll */
.nav-cards::-webkit-scrollbar { display: none; }
.nav-cards { -ms-overflow-style: none; scrollbar-width: none; }

/* Style individuel des cartes */
.nav-card { 
    /* MODIFICATION TAILLE : */
    /* flex: 1 (prend l'espace) 0 (ne rétrécit pas trop) 210px (base petite) */
    /* Cela permet de tenir 4 cartes sur ~900px de large (PC portable) */
    flex: 1 0 210px; 
    
    /* Limite basse pour forcer le swipe sur mobile */
    min-width: 210px;

    scroll-snap-align: center; 

    background: var(--primary-color); 
    border-radius: 12px; 
    overflow: hidden; 
    
    display: flex;
    flex-direction: column;
    
    box-shadow: 0 5px 20px var(--shadow); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.nav-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 30px var(--shadow); 
}

/* L'IMAGE (CARRÉE) */
.nav-card img { 
    width: 100%; 
    height: auto; 
    aspect-ratio: 1 / 1; /* Reste toujours carré */
    
    object-fit: cover; 
    position: relative; 
    transition: transform 0.4s ease-out; 
    z-index: 0; 
}

.nav-card:hover img { 
    transform: scale(1.05); 
}

/* LE TEXTE (Dessous) */
.nav-card .overlay { 
    position: relative; 
    width: 100%;
    flex-grow: 1; 
    
    background: var(--primary-color); 
    color: #ffffff; 
    padding: 20px; /* Padding légèrement réduit */
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
    z-index: 5; 
}

/* TITRE CENTRÉ */
.nav-card h3 { 
    margin: 0 0 15px 0; 
    font-size: 1.3rem; 
    color: #ffffff; 
    font-weight: 600;
    text-align: center; /* CENTRAGE DU TITRE */
    width: 100%;
}

.nav-card p { 
    font-size: 0.9rem; 
    line-height: 1.5;
    margin-bottom: 0; 
    color: rgba(255, 255, 255, 0.9);
}

.nav-card::after { display: none; }

/* ========================================= */
/* --- STYLE DES FLÈCHES DE DÉFILEMENT --- */

/* Le nouveau conteneur qui englobe cartes + flèches */
.nav-cards-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto 50px; /* On déplace la marge ici */
}

/* On ajuste l'ancien conteneur pour qu'il s'adapte au nouveau parent */
.nav-cards-container .nav-cards {
    margin: 0; /* Plus de marge auto ici */
    /* On garde le padding pour que les ombres ne soient pas coupées */
    padding: 20px 20px 30px 20px; 
}

/* Style de base des flèches (boutons ronds minimalistes) */
.scroll-arrow {
    position: absolute;
    top: 50%; /* Centré verticalement */
    transform: translateY(-50%);
    z-index: 30; /* Au-dessus des cartes */
    
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3); /* Bordure subtile */
    
    /* Fond vert foncé semi-transparent pour être lisible sur les images */
    background-color: rgba(31, 61, 54, 0.85); 
    color: #ffffff;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    /* Caché par défaut, le JS les affichera si nécessaire */
    opacity: 0; 
    pointer-events: none; /* Empêche de cliquer si caché */
    transition: all 0.3s ease;
    backdrop-filter: blur(4px); /* Effet flouté moderne */
}

/* Style quand le JS rend la flèche visible */
.scroll-arrow.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-arrow:hover {
    background-color: var(--accent-color);
    color: var(--primary-color);
    border-color: transparent;
    transform: translateY(-50%) scale(1.1); /* Léger zoom au survol */
}

/* Positionnement gauche/droite */
.scroll-left { left: 10px; }
.scroll-right { right: 10px; }

/* Sur mobile, on peut masquer les flèches car le swipe naturel est intuitif,
   ou les laisser, c'est un choix. Ici je les laisse mais je les rends un peu plus petites */
@media (max-width: 768px) {
    .scroll-arrow {
        width: 35px;
        height: 35px;
    }
    .scroll-left { left: 5px; }
    .scroll-right { right: 5px; }
}


/* --- SECTIONS DE CONTENU --- */
.content-section { max-width: 900px; margin: 60px auto; padding: 0 20px; }
.content-section h2 { color: var(--heading-color); font-size: 2rem; margin-bottom: 20px; border-bottom: 2px solid var(--accent-color); padding-bottom: 10px; }
.content-section p, .content-section li { line-height: 1.7; margin-bottom: 15px; color: var(--text-color); }
.content-section ul { list-style: none; padding-left: 0; }
.content-section ul li { margin-bottom: 10px; padding-left: 25px; position: relative; }
.content-section ul li::before { content: "✓"; color: var(--accent-color); font-weight: bold; position: absolute; left: 0; }
.content-section ol { padding-left: 40px; margin-bottom: 20px; }
   
.presentation-section { background-color: var(--bg-color); padding: 80px 20px; border-top: 1px solid var(--light-border); }
.presentation-container { display: flex; max-width: 1100px; margin: 0 auto; gap: 40px; align-items: flex-start; }
.presentation-photo { flex: 0 0 350px; }
.presentation-photo img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 15px var(--shadow); }
.presentation-text { flex: 1; }
.presentation-title { font-size: 1.8rem; color: var(--heading-color); margin-top: 0; }
   
/* --- AUTRES COMPOSANTS --- */
.info-card, .access-info, .contact-section, .legal-content, .resource-item { background: var(--card-bg); border: 1px solid var(--light-border); box-shadow: 0 5px 20px var(--shadow); transform-style: preserve-3d; perspective: 1000px; }

.form-group input, .form-group textarea { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 10px 25px rgba(0,0,0,0.1); transform: scale(1.015); background-color: var(--card-bg); z-index: 2; position: relative; }

/* --- FOOTER --- */
.site-footer { background-color: var(--primary-color); color: #ffffff; padding: 40px 20px 20px; margin-top: 60px; }
.container.footer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-bottom: 40px; }
.footer-grid h4 { color: var(--accent-color); margin-bottom: 15px; text-transform: uppercase; font-size: 0.9rem; }
.footer-grid p { color: rgba(255,255,255,0.8); }
.copyright { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; font-size: 0.85rem; color: rgba(255,255,255,0.5); }

/* --- UTILS --- */
.reveal { opacity: 0; transform: translateY(20px); transition: all 0.4s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }
#backToTop { position: fixed; bottom: 20px; right: 20px; background: var(--primary-color); color: var(--white); width: 45px; height: 45px; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none; font-size: 1.5rem; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: 2px solid var(--accent-color); opacity: 0; transition: opacity 0.2s, background 0.2s, transform 0.2s; pointer-events: none; z-index: 900; }
#backToTop.visible { opacity: 1; pointer-events: auto; }
#backToTop:hover { background: var(--accent-color); color: #122420; transform: translateY(-3px); }
#cookie-banner { position: fixed; bottom: -100%; left: 0; right: 0; background-color: var(--primary-color); color: #ffffff; padding: 20px; z-index: 9999; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 -4px 10px rgba(0,0,0,0.2); transition: bottom 0.3s ease-out; }
#cookie-banner.visible { bottom: 0; }
#cookie-banner p { margin: 0 0 15px 0; font-size: 0.9rem; max-width: 800px; color: #ffffff; }
.cookie-buttons { display: flex; gap: 10px; }
.cookie-btn { padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: 0.2s; }
.accept-cookies { background-color: var(--accent-color); color: #1f3d36; }
.accept-cookies:hover { background-color: #8fb088; }
.refuse-cookies { background-color: transparent; border: 1px solid #ffffff; color: #ffffff; }
.refuse-cookies:hover { background-color: rgba(255,255,255,0.1); }

@media (min-width: 768px) { #cookie-banner { flex-direction: row; justify-content: space-between; text-align: left; padding: 15px 30px; } #cookie-banner p { margin: 0; margin-right: 20px; } }

/* --- VERSION MOBILE --- */
@media (max-width: 768px) {
    .header-inner { flex-direction: column; gap: 15px; }
    .brand-text h1 { font-size: 1.3rem; text-align: center; }
    .main-nav { font-size: 0.9rem; width: 100%; justify-content: center; flex-wrap: wrap; gap: 15px; }
    
    .site-header.nav-hidden { transform: translateY(-100%); }

    /* Ajustements HERO sur MOBILE */
    .hero-advanced { 
        padding-top: 20px;
        background-position: center center !important;
        justify-content: center;
        text-align: center;
        min-height: 500px; 
    }
    
    .hero-advanced::before {
        background: rgba(0,0,0,0.4);
    }
    
    .hero-content {
        margin-right: 0;
        text-align: center;
        max-width: 100%;
    }

    .hero-title { font-size: 2rem; }
    
    .intro-text-style {
        text-align: justify; 
        font-size: 1rem;
        margin-top: 30px;
    }
    
    .presentation-container { flex-direction: column; }
    .presentation-photo { order: 2; margin-top: 30px; }
    .presentation-text { order: 1; }
}