/* --- GLOBAL --- */
body {
    font-family: 'Segoe UI', 'Arial', sans-serif;
    margin: 0;
    background-color: #f5f5f7;
    color: #2c2c2c;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

h1,h2,h3 { margin:0 0 15px; }
a { text-decoration: none; }

/* --- HEADER --- */
header {
    background: linear-gradient(135deg, #42a3e9, #2298ec);
    color:white;
    padding:15px 0;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
    position:sticky; top:0; z-index:1000;
    transition: all 0.3s;
}
header.scrolled { background:#1792ea; box-shadow:0 6px 12px rgba(0,0,0,0.2); }

.header-container { width:90%; margin:auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
nav ul { list-style:none; display:flex; gap:25px; padding:0; }
nav a { color:white; font-weight:700; position:relative; transition: all 0.3s ease; }
nav a::after { content:''; position:absolute; width:0%; height:2px; bottom:-3px; left:0; background-color:#ffdd57; transition:width 0.3s; }
nav a:hover { color:#ffeb99; } nav a:hover::after { width:100%; }
nav a.active { color:#ffeb99; font-weight:bold; } nav a.active::after { width:100%; background-color:#ffdd57; }
.logo-section { display:flex; flex-direction:column; align-items:center; }
.logo { width:95px; height:auto; }
.devise { font-style:italic; font-size:16px; color:rgb(255, 255, 255); margin-top:4px; text-align:center; }

/* --- HERO --- */
.hero {
    position:relative;
    background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1)), url("images/hero.jpg") center/cover no-repeat;
    color:white; text-align:center; padding:140px 20px;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero::after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:0; }
.hero-content { position:relative; z-index:1; max-width:800px; animation:slideUpFade 1.2s ease-in-out; }
.hero h1 { font-size:50px; margin-bottom:10px; line-height:1.2; animation:textGlow 2s ease-in-out infinite alternate; }
.hero .gold { color:#ffdd57; }
.subtitle { font-size:20px; margin-bottom:25px; font-weight:400; animation:fadeInText 1.5s ease forwards; }
.btn-cta { background-color:#d4a017; color:white; padding:14px 30px; border-radius:8px; font-weight:bold; font-size:16px; display:inline-block; transition: all 0.6s ease, box-shadow 0.6s ease; }
.btn-cta:hover { background-color:#ffdd57; color:#2b6777; transform: scale(1.08) rotate(-1deg); box-shadow:0 10px 25px rgba(0,0,0,0.3); }
@keyframes textGlow { from { text-shadow:0 0 10px #ffdd57,0 0 20px #d4a017;} to{ text-shadow:0 0 20px #ffdd57,0 0 30px #d4a017; } }
@keyframes fadeInText { from {opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
@keyframes slideUpFade { 0% {opacity:0; transform:translateY(40px);} 100% {opacity:1; transform:translateY(0);} }

/* --- PRESENTATION --- */
.presentation { text-align:center; padding:80px 20px; background-color:#acc3dccf; border-top:5px solid #d4a017; border-bottom:5px solid #d4a017; }
.presentation h2 { color:#2b6777; font-size:34px; margin-bottom:25px; position:relative; }
.presentation h2::after { content:''; width:60px; height:3px; background-color:#ffdd57; display:block; margin:10px auto 0; border-radius:2px; }
.presentation p { color:#170e0e; font-size:20px; max-width:850px; margin:10px auto; line-height:1.75; animation:fadeInUp 1s ease forwards; }

/* --- MISSION --- */
.mission { background-color:#ffffff; text-align:center; padding:80px 20px; }
.mission h2 { color:#37474f; font-size:34px; margin-bottom:40px; }
.mission-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.mission-item {
    background: linear-gradient(145deg,#f7f7f7,#ffffff);
    padding:25px; border-radius:12px; box-shadow:0 8px 25px rgba(0,0,0,0.1); width:280px;
    transition: transform 0.5s ease, box-shadow 0.5s ease, border-top-color 0.5s ease; border-top:5px solid #6ab187;
}
.mission-item:hover { transform:translateY(-12px) rotate(-1deg); box-shadow:0 12px 30px rgba(0,0,0,0.2); border-top-color:#d4a017; }
.mission-item i { font-size:45px; color:#6ab187; margin-bottom:15px; transition: transform 0.5s ease; }
.mission-item:hover i { transform: scale(1.2) rotate(10deg); }
.mission-item h3 { color:#2b6777; margin-bottom:12px; font-size:18px; }
.mission-item p { font-size:15px; line-height:1.6; }

/* --- CHOISIR --- */
.choisir { background: linear-gradient(135deg,#2b6777,#1b4b5a); color:white; text-align:center; padding:80px 20px; }
.choisir h2 { font-size:34px; margin-bottom:40px; color:#ffdd57; }
.choisir-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.choisir-item {
    background-color:rgba(255,255,255,0.08);
    padding:25px; border-radius:12px; width:280px;
    transition: transform 0.5s, background-color 0.5s;
}
.choisir-item:hover { transform:translateY(-10px) scale(1.05) rotate(-1deg); background-color:rgba(255,255,255,0.18); }
.choisir-item i { font-size:38px; color:#ffdd57; margin-bottom:12px; transition:transform 0.5s; }
.choisir-item:hover i { transform: scale(1.3) rotate(15deg); }
.choisir-item h3 { margin-bottom:10px; font-size:20px; }
.choisir-item p { color:#eaeaea; font-size:15px; line-height:1.6; }

/* --- FOOTER --- */
footer { background-color:#37474f; color:white; text-align:center; padding:30px 20px; margin-top:80px; font-size:14px; letter-spacing:0.5px; box-shadow:0 -2px 6px rgba(0,0,0,0.1); }

/* --- ANIMATIONS --- */
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes fadeInUp { from {opacity:0; transform:translateY(60px);} to {opacity:1; transform:translateY(0);} }

/* --- RESPONSIVE --- */
@media(max-width:768px){
    .hero h1{ font-size:36px; }
    .header-container{ flex-direction:column; gap:15px; }
    .mission-grid,.choisir-grid{ flex-direction:column; align-items:center; }
    .mission-item,.choisir-item{ width:90%; }
    .btn-cta{ padding:12px 25px; font-size:15px; }
}

/* --- REVEAL AU SCROLL --- */
.reveal { opacity:0; transform:translateY(60px); transition: all 1s ease; }
.reveal.active { opacity:1; transform:translateY(0); }