*{box-sizing:border-box}
:root{--red:#d3212a;--navy:#0d315f;--cream:#f8f5f0;--ink:#172131;--muted:#67717d}
html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);line-height:1.65;background:white}
img{max-width:100%;display:block}a{color:inherit}.container{width:min(1220px,calc(100% - 40px));margin:auto}
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);box-shadow:0 2px 16px rgba(0,0,0,.07)}
.nav{height:84px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}.brand img{width:66px;height:66px;object-fit:contain}.brand span{display:flex;flex-direction:column}.brand strong{font:800 1.55rem Montserrat;color:var(--navy);letter-spacing:.04em}.brand small{text-transform:uppercase;font-weight:700;font-size:.66rem;letter-spacing:.08em}
.menu{display:flex;align-items:center;gap:27px}.menu a{text-decoration:none;font-size:.86rem;font-weight:700;text-transform:uppercase}.menu a:hover{color:var(--red)}
.donate{background:var(--red);color:#fff;text-decoration:none;font-weight:800;border-radius:30px;padding:12px 20px}.menu-toggle{display:none;border:0;background:none;font-size:1.7rem}
.hero{min-height:590px;position:relative;background:url("assets/action-humanitaire-el-amal.jpeg") center/cover no-repeat;display:grid;align-items:center}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,24,39,.82),rgba(12,24,39,.48) 55%,rgba(12,24,39,.08))}
.hero-content{position:relative;color:#fff;padding:85px 0}.kicker,.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:800;color:var(--red)}
.hero h1{font:800 clamp(3rem,6vw,5.5rem)/1.02 Montserrat;margin:14px 0 20px;max-width:790px}.hero-content>p:not(.kicker){font-size:1.25rem;max-width:560px}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-block;text-decoration:none;padding:14px 22px;border-radius:7px;font-weight:800;text-transform:uppercase;font-size:.83rem}.red{background:var(--red);color:#fff}.white{background:#fff;color:var(--red)}.outline{border:1px solid rgba(255,255,255,.7);color:#fff}.full{width:100%;text-align:center;margin-top:18px}
.values{background:#fff;border-bottom:1px solid #eee}.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:28px 0}.values article{display:flex;gap:16px;align-items:flex-start}.value-icon,.icon{min-width:58px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.6rem}.red-bg{background:var(--red)}.blue-bg{background:var(--navy)}.values h2{font-size:1rem;text-transform:uppercase;margin:4px 0}.values p{font-size:.87rem;color:var(--muted);margin:0}
.section{padding:88px 0}.intro-grid{display:grid;grid-template-columns:1fr 1.25fr .85fr;gap:30px;align-items:stretch}.panel{background:var(--cream);border-radius:18px;padding:30px}.panel h2,.section-title h2,.story h2,.join h2{font:800 clamp(2rem,4vw,3.2rem)/1.12 Montserrat;margin:10px 0 20px}.picture-panel img{border-radius:13px;aspect-ratio:16/10;object-fit:cover}.caption{font-size:.8rem;color:var(--muted)}
.contact-card{background:linear-gradient(145deg,var(--navy),#092447);color:#fff;border-radius:18px;padding:32px}.contact-card h2{font:800 2rem Montserrat;margin:8px 0 24px}.contact-card a{text-decoration:none}.light{color:#b9d1ee}
.actions{background:#fafafa}.section-title{text-align:center;max-width:760px;margin:0 auto 42px}.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.action-card{background:#fff;border-radius:18px;padding:32px;box-shadow:0 12px 35px rgba(15,35,56,.08)}.action-card span{font-size:2rem}.action-card h3{font:800 1.25rem Montserrat;color:var(--navy)}.action-card p{color:var(--muted)}
.story{background:var(--cream)}.story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}.story-text{font-size:1.05rem;color:#4e5965}
.join{background:linear-gradient(135deg,var(--navy),#081f3d);color:white;padding:75px 0}.join-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}.join p{max-width:700px;color:#d8e0e9}.join-actions{display:flex;gap:12px;flex-wrap:wrap}
footer{background:#091522;color:#d3dae3;padding:34px 0}.footer{display:flex;justify-content:space-between;align-items:center;gap:25px}.footer a{text-decoration:none}
@media(max-width:1000px){.menu-toggle{display:block}.menu{display:none;position:absolute;left:0;right:0;top:84px;background:white;flex-direction:column;padding:25px;box-shadow:0 15px 25px rgba(0,0,0,.12)}.menu.open{display:flex}.donate{display:none}.intro-grid{grid-template-columns:1fr 1fr}.contact-card{grid-column:1/-1}.values-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.container{width:min(100% - 24px,1220px)}.brand strong{font-size:1.15rem}.brand img{width:54px;height:54px}.hero{min-height:600px}.hero h1{font-size:3.05rem}.values-grid,.intro-grid,.action-grid,.story-grid,.join-grid{grid-template-columns:1fr}.values article{border-bottom:1px solid #eee;padding-bottom:20px}.section{padding:65px 0}.story-grid{gap:25px}.footer{flex-direction:column;text-align:center}.join-actions{justify-content:flex-start}}