/* ============================================================
   STYLE.CSS — PNR France | LP GGAT 2026
   Palette : Ecosystem Forest 30 couleurs — VERSION ULTRA COLOR
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;600;800&display=swap');

/* ── RESET & VARIABLES ────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* PALETTE ECOSYSTEM FOREST — 30 COULEURS */
    --c1: #f0f8f0;  --c2: #e0f2e0;  --c3: #c8e6c8;  --c4: #a5d6a5;  --c5: #81c784;
    --c6: #66bb6a;  --c7: #4caf50;  --c8: #43a047;  --c9: #388e3c;  --c10: #2e7d32;
    --c11: #1b5e20; --c12: #aed581; --c13: #9ccc65; --c14: #8bc34a; --c15: #7cb342;
    --c16: #689f38; --c17: #558b2f; --c18: #dcedc8; --c19: #c5e1a5; --c20: #b2df8a;
    --c21: #a4c639; --c22: #827717; --c23: #f57f17; --c24: #ff8f00; --c25: #e65100;
    --c26: #d84315; --c27: #bf360c; --c28: #8d6e63; --c29: #6d4c41; --c30: #4e342e;

    /* TOKENS SÉMANTIQUES FORTS */
    --fond:      var(--c1);
    --texte:     var(--c30);
    --accent:    var(--c24); /* Orange vibrant */
    --surface:   rgba(255, 255, 255, 0.95);
    --header-bg: var(--c11);

    /* GRADIENTS ÉCLATANTS */
    --grad-hero:   linear-gradient(135deg, var(--c11) 0%, var(--c10) 50%, var(--c9) 100%);
    --grad-accent: linear-gradient(135deg, var(--c24) 0%, var(--c25) 100%);
    --grad-card:   linear-gradient(145deg, #ffffff, var(--c3));
    
    --ombre:     0 15px 35px rgba(27, 94, 32, 0.2);
    --rayon:     20px;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--fond);
    color: var(--texte);
    line-height: 1.6;
}

/* ── HEADER ULTRA-VISIBLE ────────────────────────── */
header {
    background: var(--header-bg);
    padding: 1rem 0;
    border-bottom: 4px solid var(--c12);
}

.logo-site span {
    color: var(--c12) !important;
    font-weight: 900;
    font-size: 1.8rem;
}

nav a {
    color: white !important;
    background: rgba(255,255,255,0.1);
    margin: 0 5px;
}

nav a.actif {
    background: var(--c24) !important; /* Orange pour que l'onglet actif pète */
    color: white !important;
}

/* ── SECTIONS ET BLOCS COLORÉS ───────────────────── */
.section-titre {
    color: var(--c11);
    font-size: 3rem;
    text-shadow: 2px 2px var(--c3);
}

/* BLOC HISTORIQUE - VERT DOUX */
.bloc-historique {
    background: var(--c2);
    border: 3px solid var(--c10);
    padding: 2.5rem;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

/* BLOC MISSIONS - VERT PROFOND ET TEXTE BLANC */
.bloc-missions {
    background: var(--c11);
    color: white;
    padding: 2.5rem;
    border-radius: var(--rayon);
    border-left: 15px solid var(--c24);
}

.mission-item {
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--c12);
    margin: 10px 0;
    padding: 15px;
    border-radius: 10px;
}

/* ── CARTE ET POPUPS ─────────────────────────────── */
#map { height: 70vh; min-height: 500px; background: var(--c3); }

.custom-popup h3 {
    background: var(--c11);
    color: white;
    padding: 10px;
    border-radius: 8px 8px 0 0;
    margin: -15px -15px 10px -15px;
}

/* ── BOUTONS FLASHY ──────────────────────────────── */
.btn-principal {
    background: var(--c11) !important;
    color: black !important;
    border: 2px solid white !important;
    font-weight: 900;
    text-transform: uppercase;
}

.btn-principal:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--c11);
}

/* ── FOOTER COLORÉ ───────────────────────────────── */
footer {
    background: var(--c30);
    border-top: 10px solid var(--c24);
    color: var(--c2);
}