:root{
 --blue:#274b8f; --green:#17664f; --red:#e56b50; --lime:#d9df62;
 --mint:#b9ddd4; --ink:#172437; --paper:#ffffff; --soft:#f6f8f7;
 --shadow:0 16px 40px rgba(21,42,61,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.55}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,92%);margin:auto}
.topbar{background:var(--blue);color:#fff;font-size:.9rem}
.topbar .container{display:flex;justify-content:space-between;padding:8px 0;gap:18px}
header{position:sticky;top:0;z-index:30;background:white;box-shadow:0 3px 18px rgba(0,0,0,.07)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:13px 0}
.brand img{width:290px;max-height:82px;object-fit:contain}
.menu{display:flex;gap:20px;align-items:center;font-size:.86rem;font-weight:800}
.menu a:hover{color:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:8px;font-weight:800}
.btn.red{background:var(--red);color:#fff}
.btn.green{background:var(--green);color:#fff}
.btn.outline{border:1px solid #fff;color:#fff}
.hero{min-height:650px;display:flex;align-items:center;position:relative;background:
linear-gradient(90deg,rgba(20,45,74,.92) 0%,rgba(20,45,74,.76) 43%,rgba(23,102,79,.25) 100%),
url("assets/cour-rassemblement.webp") center/cover}
.hero .content{max-width:680px;color:#fff;padding:85px 0}
.kicker{font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--lime)}
.hero h1{font-size:clamp(3rem,6vw,5.6rem);line-height:.95;margin:.15em 0}
.hero h1 span{color:var(--lime)}
.motto{font-size:1.35rem;font-weight:800;border-left:5px solid var(--red);padding-left:16px;margin:25px 0}
.hero p{font-size:1.05rem;max-width:600px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
.values-wrap{margin-top:-55px;position:relative;z-index:5}
.values{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.value{padding:24px 16px;text-align:center;border-right:1px solid #e5eae8}
.value:last-child{border:0}
.value b{display:block;color:var(--blue);margin:8px 0}
.value .dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin:auto;color:#fff;font-size:20px;background:var(--green)}
.value:nth-child(2) .dot,.value:nth-child(5) .dot{background:var(--blue)}
.value:nth-child(4) .dot{background:var(--red)}
section{padding:78px 0}
.label{font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--red)}
h2{font-size:2.25rem;line-height:1.12;color:var(--blue);margin:.25em 0 .7em}
h2 span{color:var(--green)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.photo-main{border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.photo-main img{width:100%;height:430px;object-fit:cover}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}
.stat{background:var(--soft);border-left:5px solid var(--green);padding:16px;border-radius:10px}
.stat b{font-size:1.35rem;color:var(--blue)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border-radius:16px;overflow:hidden;background:#fff;border:1px solid #e2e9e5;box-shadow:0 8px 20px rgba(20,40,60,.06)}
.card img{width:100%;height:220px;object-fit:cover}
.card .body{padding:18px}
.card h3{margin:0 0 8px;color:var(--blue)}
.activities{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.activity{position:relative;height:260px;border-radius:16px;overflow:hidden;color:#fff}
.activity img{width:100%;height:100%;object-fit:cover}
.activity:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(11,35,48,.88))}
.activity div{position:absolute;left:16px;right:16px;bottom:15px;z-index:2}
.activity h3{margin:0 0 4px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
.panel{background:#fff;border:1px solid #e2e9e5;border-radius:18px;padding:25px}
.panel.tint{background:linear-gradient(135deg,#eff8f4,#f2f6fb)}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.service{padding:16px;background:#f7faf9;border-radius:12px;border-left:4px solid var(--red)}
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:220px;gap:12px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.gallery img:first-child{grid-row:span 2}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input,.form select,.form textarea{padding:12px;border:1px solid #cbd7d2;border-radius:8px;font:inherit;width:100%}
.form textarea,.full{grid-column:1/-1}
.form textarea{min-height:120px}
footer{background:var(--blue);color:#fff;padding:42px 0 15px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
footer p,footer a{color:#e8eef9;display:block;margin:5px 0}
.copy{border-top:1px solid rgba(255,255,255,.2);text-align:center;padding-top:14px;margin-top:25px;font-size:.82rem}
@media(max-width:960px){
 .menu{display:none}.values{grid-template-columns:1fr 1fr}.about,.split{grid-template-columns:1fr}
 .cards{grid-template-columns:1fr 1fr}.activities{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
 .topbar .container{display:block;text-align:center}.brand img{width:215px}
 .hero{min-height:620px}.hero .content{padding:65px 0}.values-wrap{margin-top:-25px}
 .values,.cards,.activities,.service-grid,.gallery,.footer-grid,.form{grid-template-columns:1fr}
 .gallery img:first-child{grid-row:auto}.hero h1{font-size:3rem}
}