/* --- VARIABLES & COULEURS DE LA CHARTE --- */
:root { 
    --vert-comorien: #68BB53; 
    --vert-fonce: #346629; 
    --vert-tres-fonce: #162C11; 
    --jaune-soleil: #F6B328; 
    --bleu-marin: #1A7FBF; 
    --rouge-corail: #C7363B; 
    --noir-volcanique: #1B0E0E; 
    --fond-ivoire: #F7F7F2; 
    --fond-clair: #F3F7EC; 
    --beige-doux: #DDE6C8; 
    --blanc: #ffffff; 
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }

body { 
    font-family: 'Montserrat', sans-serif; 
    color: var(--noir-volcanique); 
    background-color: var(--fond-ivoire); 
    line-height: 1.6; 
}

/* EN-TÊTE */ 
header { 
    background-color: var(--blanc); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 1000; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 50px; 
} 
.logo-img { height: 60px; width: auto; display: block; } 
nav ul { list-style: none; display: flex; gap: 20px; } 
nav ul li a { 
    text-decoration: none; 
    color: var(--noir-volcanique); 
    font-weight: 600; 
    font-size: 0.95em; 
    transition: color 0.3s; 
} 
nav ul li a:hover { color: var(--vert-comorien); }

/* TYPOGRAPHIE */ 
h1, h2, h3 { font-family: 'Playfair Display', serif; color: var(--vert-fonce); font-weight: 700; } 
.subtitle-maj { 
    font-family: 'Montserrat', sans-serif; 
    text-transform: uppercase; 
    font-size: 0.85rem; 
    letter-spacing: 2px; 
    color: var(--vert-comorien); 
    display: block; 
    margin-bottom: 10px; 
}

/* HERO ACCUEIL */ 
.hero { 
    height: 100vh; 
    background: linear-gradient(rgba(22, 44, 17, 0.8), rgba(22, 44, 17, 0.8)), url('https://images.unsplash.com/photo-1559128010-7c1ad6e1b6a5?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: var(--blanc); 
    padding: 0 20px; 
} 
.hero-content h2 { font-size: 4em; color: var(--blanc); margin-bottom: 20px; } 
.hero-content .subtitle-maj { color: var(--jaune-soleil); font-size: 1.2rem;} 
.hero-content p { font-size: 1.2em; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; } 

/* BOUTONS */
.btn { 
    background-color: var(--jaune-soleil); 
    color: var(--noir-volcanique); 
    padding: 12px 25px; 
    text-decoration: none; 
    font-weight: 700; 
    border-radius: 5px; 
    border: none; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    display: inline-block; 
} 
.btn:hover { background-color: var(--vert-comorien); color: var(--blanc); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.btn-secondary { background-color: transparent; border: 2px solid var(--vert-comorien); color: var(--vert-comorien); }
.btn-secondary:hover { background-color: var(--vert-comorien); color: var(--blanc); }

/* SECTIONS & GRILLES */ 
.section { padding: 80px 20px; text-align: center; } 
.bg-light { background-color: var(--fond-clair); } 
.section h2 { font-size: 3em; margin-bottom: 20px; } 
.section-desc { max-width: 800px; margin: 0 auto 40px auto; font-size: 1.1em; color: #444;} 

.grid-container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 30px; 
    max-width: 1200px; 
    margin: 0 auto; 
} 
.card { 
    background: var(--blanc); 
    padding: 30px; 
    border-radius: 8px; 
    border-bottom: 4px solid var(--vert-comorien); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
    flex: 1 1 300px; 
    max-width: 350px; 
    text-align: left; 
    transition: transform 0.3s, box-shadow 0.3s; 
} 
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); } 
.card h3 { color: var(--vert-fonce); margin-bottom: 15px; font-size: 1.3em; }

/* LE BUREAU */ 
.profile-card { text-align: center; max-width: 250px;}
.profile-card .avatar { 
    width: 120px; 
    height: 120px; 
    background-color: var(--beige-doux); 
    border-radius: 50%; 
    margin: 0 auto 15px auto; 
    border: 3px solid var(--vert-comorien);
} 
.profile-card .role { font-style: italic; color: var(--vert-fonce); margin-top: 10px; font-size: 0.9em; font-weight: 600;}

/* TIMELINE (ÉVÉNEMENTS) */ 
.timeline { max-width: 800px; margin: 0 auto; text-align: left; } 
.event-item { 
    border-left: 4px solid var(--vert-comorien); 
    padding-left: 30px; 
    margin-bottom: 40px; 
    position: relative; 
    background-color: var(--blanc); 
    padding: 25px; 
    border-radius: 0 8px 8px 0; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); 
    transition: transform 0.3s;
} 
.event-item:hover { transform: translateX(5px); }
.event-item::before { 
    content: ''; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    background: var(--jaune-soleil); 
    border-radius: 50%; 
    left: -12px; 
    top: 25px; 
    border: 3px solid var(--blanc);
} 
.event-item .date { font-weight: 700; color: var(--jaune-soleil); text-transform: uppercase; font-size: 0.85em; letter-spacing: 1px; display: block; margin-bottom: 5px;} 
.event-item h3 { color: var(--vert-fonce); margin: 5px 0 10px 0; }
.badge { display: inline-block; background-color: var(--bleu-marin); color: white; padding: 3px 8px; border-radius: 12px; font-size: 0.7em; margin-left: 10px; vertical-align: middle;}

/* FORMULAIRE & FOOTER */ 
.contact-form { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; } 
.contact-form input, .contact-form textarea { 
    width: 100%; 
    padding: 15px; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    font-family: 'Montserrat', sans-serif; 
    background-color: var(--blanc); 
} 
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--vert-comorien); box-shadow: 0 0 5px rgba(104, 187, 83, 0.3);} 

footer { background-color: var(--vert-tres-fonce); color: var(--blanc); text-align: center; padding: 40px 20px; }
footer a { color: var(--jaune-soleil); text-decoration: none;}
footer a:hover { text-decoration: underline;}

@media (max-width: 768px) { 
    nav ul { display: none; } 
    .hero-content h2 { font-size: 2.5em; } 
    header { padding: 15px 20px;}
}