/* ============ TOKENS ============ */
:root{
  --ground:#FCFCF9; --surface:#FFFFFF; --surface-2:#F0F4EC; --surface-3:#E6EEE1;
  --line:#DCE5D6; --line-strong:#C3D2BB;
  --text:#11261A; --muted:#54685B; --faint:#7C8E82;
  --green:#004212; --green-2:#0B6B2A; --green-3:#2E8B4E;
  --saffron:#F89B02; --saffron-2:#FFB534; --clay:#A34B01;
  --panel:#04361A; --panel-2:#062A15; --on-panel:#E9F2E4; --on-panel-muted:#A9C4AC;
  --shadow:0 1px 2px rgba(6,42,21,.05), 0 12px 32px -12px rgba(6,42,21,.18);
  --shadow-lg:0 2px 4px rgba(6,42,21,.06), 0 30px 60px -24px rgba(6,42,21,.28);
  --rad:14px; --rad-s:8px;
  --maxw:1180px; --read:66ch;
  --f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
  --f-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#070F0A; --surface:#0C1710; --surface-2:#101E15; --surface-3:#16291C;
    --line:#1E3324; --line-strong:#2C4A34;
    --text:#E7F1E5; --muted:#9BB2A1; --faint:#7B9382;
    --green:#39A45C; --green-2:#4FBB72; --green-3:#6ACB89;
    --saffron:#FFB02E; --saffron-2:#FFC862; --clay:#DC8038;
    --panel:#0A1F13; --panel-2:#081810; --on-panel:#E7F1E5; --on-panel-muted:#96B39E;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.7);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#070F0A; --surface:#0C1710; --surface-2:#101E15; --surface-3:#16291C;
  --line:#1E3324; --line-strong:#2C4A34;
  --text:#E7F1E5; --muted:#9BB2A1; --faint:#7B9382;
  --green:#39A45C; --green-2:#4FBB72; --green-3:#6ACB89;
  --saffron:#FFB02E; --saffron-2:#FFC862; --clay:#DC8038;
  --panel:#0A1F13; --panel-2:#081810; --on-panel:#E7F1E5; --on-panel-muted:#96B39E;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 30px 60px -24px rgba(0,0,0,.8);
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--f-body); font-size:17.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,h5,.dsp{font-family:var(--f-display); font-weight:700; line-height:1.08; letter-spacing:-.022em; text-wrap:balance; margin:0}
h1{font-size:clamp(2.5rem,6.2vw,4.6rem); font-weight:800}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4{font-size:1.06rem; letter-spacing:-.01em}
p{margin:0 0 1.05em}
a{color:inherit}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
::selection{background:var(--saffron); color:#12261A}
:focus-visible{outline:2.5px solid var(--saffron); outline-offset:3px; border-radius:4px}
.wrap{width:min(100% - 2.6rem, var(--maxw)); margin-inline:auto}
.read{max-width:var(--read)}
.mono{font-family:var(--f-mono)}

/* eyebrow / labels */
.eyebrow{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--clay); display:flex; align-items:center; gap:.6rem; margin:0 0 1.1rem;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--saffron); flex:none}
.on-panel .eyebrow{color:var(--saffron-2)}
.lede{font-size:clamp(1.1rem,1.7vw,1.32rem); line-height:1.6; color:var(--muted)}

/* ============ HEADER ============ */
#progress{position:fixed; inset:0 auto auto 0; height:3px; width:0; z-index:120;
  background:linear-gradient(90deg,var(--green-2),var(--saffron)); transition:width .12s linear}
header.site{
  position:fixed; top:0; left:0; right:0; z-index:110;
  background:color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
header.site.stuck{border-bottom-color:var(--line)}
.bar{display:flex; align-items:center; gap:.45rem; height:74px}
header.site .wrap{width:min(100% - 2rem, 1400px)}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none}
.brand img{width:44px; height:44px; border-radius:50%; box-shadow:0 0 0 1px var(--line)}
.brand b{font-family:var(--f-display); font-weight:800; font-size:1.32rem; letter-spacing:-.03em; display:block; line-height:1}
.brand .tagline{font-family:var(--f-mono); font-size:.575rem; letter-spacing:.115em; text-transform:uppercase; color:var(--muted); display:block; margin-top:3px}
nav.main{display:flex; align-items:center; gap:.1rem; margin-left:auto}
nav.main a, .navbtn{
  font-family:var(--f-display); font-weight:600; font-size:.745rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.5rem .42rem; text-decoration:none; color:var(--text); border-radius:7px;
  position:relative; background:none; border:0; cursor:pointer; white-space:nowrap;
}
nav.main a::after{content:""; position:absolute; left:.42rem; right:.42rem; bottom:.3rem; height:2px;
  background:var(--saffron); transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.8,.2,1)}
nav.main a:hover::after{transform:scaleX(1)}
nav.main a.active{color:var(--green-2)}
nav.main a.active::after{transform:scaleX(1)}
.drop{position:relative}
.drop-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:230px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--rad); box-shadow:var(--shadow-lg); padding:.45rem;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.22s ease; display:grid; gap:2px;
}
.drop:hover .drop-menu, .drop:focus-within .drop-menu{opacity:1; visibility:visible; transform:none}
.drop-menu a{display:flex; align-items:center; gap:.6rem; text-transform:none; letter-spacing:0; font-size:.9rem; padding:.5rem .7rem; border-radius:8px}
.drop-menu a::after{display:none}
.drop-menu a:hover{background:var(--surface-2); color:var(--green-2)}
#langMenu{position:absolute; right:2rem; top:70px}
#langMenu.open{opacity:1; visibility:visible; transform:none}
#langMenu em{color:var(--green-2); font-style:normal}
#langMenu a b{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; color:var(--clay);
  border:1px solid var(--line-strong); border-radius:5px; padding:.18rem .38rem; font-weight:500; flex:none}
#langBtn{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; font-weight:500}
.cta-don{
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--saffron); color:#231200; border:0; border-radius:99px; padding:.66rem .95rem;
  font-family:var(--f-display); font-weight:700; font-size:.82rem; letter-spacing:.03em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; cursor:pointer; flex:none;
  box-shadow:0 6px 20px -8px rgba(248,155,2,.9); transition:transform .2s, box-shadow .2s, background .2s;
}
.cta-don:hover{transform:translateY(-2px); background:var(--saffron-2); box-shadow:0 12px 26px -10px rgba(248,155,2,1)}
.icobtn{background:none; border:1px solid var(--line); border-radius:9px; width:38px; height:38px; cursor:pointer;
  display:grid; place-items:center; flex:none; transition:.2s}
.icobtn:hover{border-color:var(--green-2); color:var(--green-2)}
.burger{display:none}
@media (max-width:1420px){ header.site .brand .tagline{display:none} }
@media (max-width:1259px){
  nav.main{display:none}
  .burger{display:grid}
}
@media (max-width:720px){ header.site #langBtn, header.site #themeBtn{display:none} }
@media (max-width:620px){ .brand b{font-size:1.15rem} .cta-don{padding:.6rem .8rem; font-size:.74rem} .brand img{width:38px; height:38px} }
@media (max-width:480px){
  .btn{padding:.78rem 1.05rem; font-size:.78rem}
  .hero-actions{flex-direction:column; align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .wrap{width:min(100% - 2rem, var(--maxw))}
}
/* mobile drawer */
#drawer{position:fixed; inset:0; z-index:130; background:var(--ground); transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.7,0,.2,1); overflow-y:auto; padding:5.5rem 0 3rem}
#drawer.open{transform:none}
#drawer a{display:block; font-family:var(--f-display); font-weight:700; font-size:1.5rem; letter-spacing:-.02em;
  text-decoration:none; padding:.5rem 0; border-bottom:1px solid var(--line); opacity:0; transform:translateY(14px)}
#drawer.open a{animation:dIn .45s cubic-bezier(.2,.8,.2,1) forwards}
#drawer .sub a{display:flex; align-items:center; gap:.6rem; font-size:1rem; font-family:var(--f-body); font-weight:400; color:var(--muted); border:0; padding:.28rem 0}
@keyframes dIn{to{opacity:1; transform:none}}
.drawer-close{position:fixed; top:18px; right:22px; z-index:140}

/* ============ SECTIONS / PAGES ============ */
main{padding-top:74px; display:block}
.page{display:block; animation:pageIn .5s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:no-preference){ @view-transition{ navigation:auto } }
/* ---- icônes vectorielles ---- */
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.ic{width:1.6rem; height:1.6rem; display:block; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  color:var(--saffron)}
.ic-s{width:1.05rem; height:1.05rem; stroke-width:1.9}
.ic-m{width:1.3rem; height:1.3rem}
.ic-lg{width:2.1rem; height:2.1rem; stroke-width:1.4}
.ic-green{color:var(--green-2)}
.ic-inherit{color:inherit}
.cta-don .ic{color:inherit}
.navbtn{display:inline-flex; align-items:center; gap:.35rem}
.pill.iconrow{display:inline-flex}
.btn .ic{color:inherit}
.iconrow{display:flex; align-items:center; gap:.6rem}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--saffron); color:#231200;
  padding:.7rem 1.1rem; border-radius:0 0 10px 0; font-family:var(--f-display); font-weight:700; text-decoration:none}
.skip:focus{left:0}
@keyframes pageIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
section{padding:clamp(3.4rem,7vw,6.4rem) 0; position:relative}
section.tight{padding:clamp(2.4rem,4vw,3.6rem) 0}
.panel{background:var(--panel); color:var(--on-panel)}
.panel h1,.panel h2,.panel h3{color:var(--on-panel)}
.panel p,.panel li{color:var(--on-panel-muted)}
.soft{background:var(--surface-2)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* page header block */
.phead{padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,3vw,3rem); position:relative; overflow:hidden}
.phead::before{content:""; position:absolute; right:-180px; top:-200px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at 34% 34%, color-mix(in srgb,var(--saffron) 17%, transparent), transparent 72%);
  filter:blur(18px); pointer-events:none}
.phead .num{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; color:var(--faint)}
.crumb{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:1rem}
.crumb a{text-decoration:none; color:var(--clay)}

/* ============ REVEAL ============ */
.rv{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}
.rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s}.rv[data-d="3"]{transition-delay:.27s}
.rv[data-d="4"]{transition-delay:.36s}.rv[data-d="5"]{transition-delay:.45s}.rv[data-d="6"]{transition-delay:.54s}
.rvw{opacity:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0 100%); mask-image:linear-gradient(90deg,#000 0 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:0% 100%; mask-size:0% 100%;
  transition:-webkit-mask-size 1.1s cubic-bezier(.7,0,.2,1), mask-size 1.1s cubic-bezier(.7,0,.2,1), opacity .55s ease}
.rvw.in{opacity:1; -webkit-mask-size:100% 100%; mask-size:100% 100%}

/* ============ HERO ============ */
.hero{min-height:calc(100vh - 74px); display:flex; align-items:center; position:relative; overflow:hidden;
  background:var(--panel); color:var(--on-panel); padding:4rem 0}
#net{position:absolute; inset:0; width:100%; height:100%; opacity:.55}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 72% 42%, color-mix(in srgb,var(--saffron) 20%, transparent), transparent 58%)}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .85fr; gap:3.2rem; align-items:center}
@media (max-width:940px){.hero .wrap{grid-template-columns:1fr; gap:2.4rem}}
.hero h1{color:#fff; font-size:clamp(2.6rem,6.4vw,5rem)}
.hero h1 .l{display:block; overflow:hidden}
.hero h1 .l i{display:block; font-style:normal; transform:translateY(105%); animation:up 1s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .l:nth-child(2) i{animation-delay:.12s}
.hero h1 .l:nth-child(3) i{animation-delay:.24s}
@keyframes up{to{transform:none}}
.hero .grad{background:linear-gradient(100deg,var(--saffron-2),var(--saffron) 45%,#FFE0A0);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .sub{color:var(--on-panel-muted); font-size:clamp(1.05rem,1.6vw,1.25rem); max-width:56ch; margin-top:1.5rem;
  opacity:0; animation:fade .9s .5s forwards}
.slogan{display:flex; flex-wrap:wrap; gap:.55rem; margin:1.6rem 0 0; opacity:0; animation:fade .9s .35s forwards}
.slogan span{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--saffron-2); border:1px solid color-mix(in srgb,var(--saffron) 45%, transparent);
  border-radius:99px; padding:.34rem .8rem}
@keyframes fade{to{opacity:1}}
.hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; opacity:0; animation:fade .9s .68s forwards}
.btn{display:inline-flex; align-items:center; gap:.55rem; border-radius:99px; padding:.85rem 1.5rem; text-decoration:none;
  font-family:var(--f-display); font-weight:700; font-size:.86rem; letter-spacing:.03em; text-transform:uppercase;
  border:1.5px solid transparent; cursor:pointer; transition:transform .22s, background .22s, color .22s, border-color .22s}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--saffron); color:#231200; box-shadow:0 10px 30px -12px rgba(248,155,2,.95)}
.btn-solid:hover{background:var(--saffron-2)}
.btn-ghost{border-color:color-mix(in srgb,var(--on-panel) 34%, transparent); color:var(--on-panel)}
.btn-ghost:hover{border-color:var(--saffron); color:var(--saffron-2)}
.btn-green{background:var(--green-2); color:#fff}
.btn-green:hover{background:var(--green-3)}
.btn-line{border-color:var(--line-strong); color:var(--text)}
.btn-line:hover{border-color:var(--green-2); color:var(--green-2)}
.hero-logo{justify-self:center; position:relative; width:min(360px,80vw); aspect-ratio:1;
  opacity:0; animation:fade 1.2s .3s forwards}
.hero-logo img{width:100%; border-radius:50%; position:relative; z-index:2;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7); animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.ring{position:absolute; inset:-6%; border-radius:50%; border:1px dashed color-mix(in srgb,var(--saffron) 55%, transparent);
  animation:spin 34s linear infinite}
.ring.r2{inset:-16%; border-style:solid; border-color:color-mix(in srgb,var(--green-3) 35%, transparent); animation-duration:52s; animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit{position:absolute; inset:-16%; --orbit-dur:30s;
  animation:spin var(--orbit-dur) linear infinite; pointer-events:none}
.orbit i{position:absolute; top:50%; left:50%; width:0; height:0;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--orbit-r,50%)))}
.orbit i > span{position:absolute; left:0; top:0; width:0; height:0; display:grid; place-items:center;
  animation:spin var(--orbit-dur) linear infinite reverse}
.orbit i b{display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  font-size:1.02rem; line-height:1; font-weight:400; font-style:normal;
  background:color-mix(in srgb, var(--panel) 82%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--saffron) 45%, transparent), 0 4px 14px rgba(0,0,0,.45);
  transition:transform .3s, box-shadow .3s}
.orbit i b.swap{animation:flagIn .55s cubic-bezier(.2,.8,.2,1)}
@keyframes flagIn{0%{opacity:0; transform:scale(.55)}60%{opacity:1; transform:scale(1.14)}100%{transform:scale(1)}}
/* Police de secours, chargée seulement là où le système ne dessine pas les drapeaux
   (voir la détection dans app.js). Ailleurs, la police système suffit. */
html.flags-fallback .fl,
html.flags-fallback .orbit i b{font-family:"Noto Color Emoji",sans-serif; letter-spacing:0}
.orbit i b{letter-spacing:0}
.orbit-cap{position:absolute; left:50%; bottom:-7.1rem; transform:translateX(-50%);
  display:flex; align-items:baseline; justify-content:center; gap:.55rem; margin:0;
  /* sans width:max-content, le bloc est bridé par la moitié du logo et le texte se coupe */
  width:max-content; max-width:min(92vw,30rem); text-align:center; line-height:1.4;
  font-size:.88rem; color:var(--on-panel-muted); transition:opacity .45s}
.orbit-cap.fade{opacity:0}
.orbit-cap b{font-family:var(--f-display); font-weight:700; color:var(--on-panel)}
.orbit-cap .fl{font-size:1.1rem; border:0; padding:0; color:inherit; background:none; letter-spacing:0}
.hero-logo{margin-bottom:7.4rem}
@media (max-width:640px){
  /* sur petit écran l'anneau se rapproche du logo : trop écarté, il paraissait détaché */
  .hero-logo{width:min(300px,68vw); margin-bottom:5rem}
  .orbit{inset:-9%}
  .ring{inset:-4%}
  .ring.r2{inset:-9%}
  .orbit i b{width:24px; height:24px; font-size:.8rem}
  .orbit-cap{font-size:.76rem; bottom:-4.7rem}
}
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--on-panel-muted);
  display:grid; justify-items:center; gap:.5rem; opacity:0; animation:fade 1s 1.3s forwards}
.scroll-cue s{display:block; width:1px; height:40px; background:linear-gradient(var(--saffron),transparent); animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}}

/* ============ PILLARS ============ */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--rad); overflow:hidden}
@media (max-width:860px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--surface); padding:2rem 1.5rem 1.8rem; position:relative; overflow:hidden; transition:.35s; text-decoration:none; display:block}
.pillar::before{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--saffron); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pillar:hover{background:var(--surface-2)}
.pillar:hover::before{transform:scaleX(1)}
.pillar .ic{width:2rem; height:2rem; stroke-width:1.5; margin-bottom:1.1rem; transition:transform .4s}
.pillar:hover .ic{transform:translateY(-4px) scale(1.12)}
.pillar h4{font-family:var(--f-display); font-size:1.02rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.4rem; color:var(--green-2)}
.pillar p{font-size:.95rem; color:var(--muted); margin:0}

/* ============ CARDS / GRIDS ============ */
.grid{display:grid; gap:1.4rem}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad); padding:1.7rem; position:relative;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}
.card h3{margin-bottom:.6rem}
.card h3 .ic,.card h4 .ic{margin-bottom:.7rem}
.card p:last-child{margin-bottom:0}
.panel .card{background:color-mix(in srgb,var(--on-panel) 6%, transparent); border-color:color-mix(in srgb,var(--on-panel) 14%, transparent)}
.tag{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; padding:.3rem .66rem; border-radius:99px; border:1px solid var(--line-strong); color:var(--muted)}
.tag.go{color:var(--green-2); border-color:color-mix(in srgb,var(--green-2) 45%, transparent); background:color-mix(in srgb,var(--green-2) 8%, transparent)}
.tag.wait{color:var(--clay); border-color:color-mix(in srgb,var(--clay) 40%, transparent); background:color-mix(in srgb,var(--clay) 8%, transparent)}
.tag.done{color:var(--faint)}

/* list with animated dashes */
ul.dash{list-style:none; padding:0; margin:0; display:grid; gap:.52rem}
ul.dash li{position:relative; padding-left:1.55rem; color:var(--muted)}
ul.dash li::before{content:""; position:absolute; left:0; top:.72em; width:.8rem; height:2px; background:var(--saffron); transition:width .3s}
ul.dash li:hover::before{width:1.15rem}
.panel ul.dash li::before{background:var(--saffron-2)}

/* numbered programme blocks */
.prog{display:grid; grid-template-columns:auto 1fr; gap:2.2rem; align-items:start; padding:2.6rem 0; border-top:1px solid var(--line)}
@media (max-width:760px){.prog{grid-template-columns:1fr; gap:1.2rem}}
.prog .idx{font-family:var(--f-display); font-weight:800; font-size:clamp(3rem,7vw,5.4rem); line-height:.8;
  color:transparent; -webkit-text-stroke:1.5px var(--line-strong); letter-spacing:-.05em; transition:.5s}
.prog:hover .idx{-webkit-text-stroke-color:var(--saffron); transform:translateX(4px)}
.prog-body{display:grid; gap:1.1rem}
.prog-cols{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2.4rem}
@media (max-width:680px){.prog-cols{grid-template-columns:1fr}}

/* ============ STATS ============ */
.stats{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:color-mix(in srgb,var(--on-panel) 14%, transparent)}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.stats{grid-template-columns:1fr}}
.stat{background:var(--panel); padding:1.9rem 1.3rem; text-align:left}
.stat b{font-family:var(--f-display); font-weight:800; font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1;
  color:var(--saffron); display:block; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.stat span{display:block; margin-top:.55rem; font-size:.9rem; color:var(--on-panel-muted)}
.stats.light .stat{background:var(--surface)}
.stats.light{background:var(--line)}
.stats.light .stat span{color:var(--muted)}

/* ============ AFRICA MAP ============ */
.mapwrap{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
@media (max-width:900px){.mapwrap{grid-template-columns:1fr}}
/* ---- carte des 54 pays ---- */
.cartewrap{position:relative}
.carte{width:100%; max-width:560px; margin-inline:auto; display:block; overflow:visible}
.carte-large{max-width:1180px}
/* étiquettes : nom du pays et capitale, avec un liseré pour rester lisibles
   quand elles débordent sur un pays voisin */
.carte .nom{font-family:var(--f-display); font-weight:700; font-size:12.5px; fill:var(--text);
  paint-order:stroke; stroke:var(--ground); stroke-width:3.4; stroke-linejoin:round;
  pointer-events:none; transition:fill .2s}
.carte .nom .cap{font-family:var(--f-mono); font-weight:400; font-size:9px; fill:var(--faint)}
.carte .nom.on, .carte .nom.on .cap{fill:var(--clay)}
.carte .nom.survol, .carte .nom.survol .cap{fill:var(--green-2)}
.carte .nom.hors{font-size:11.5px}
.carte .nom.petit{font-size:10.5px}
.carte .nom.petit .cap{font-size:8px}
.carte .lead{stroke:var(--line-strong); stroke-width:.8; fill:none}
.carte .leaddot{fill:var(--line-strong)}
.cartewrap-large .carte-cap{display:none}
@media (max-width:900px){
  .carte-large .ct-noms, .carte-large .ct-traits{display:none}
  .cartewrap-large .carte-cap{display:flex}
}
.carte .ct, .carte .isl{
  fill:color-mix(in srgb, var(--green-2) 16%, transparent);
  stroke:color-mix(in srgb, var(--green-2) 55%, transparent); stroke-width:.9;
  stroke-linejoin:round; cursor:pointer; outline:none;
  transition:fill .22s, stroke .22s}
.carte .ct:hover, .carte .isl:hover,
.carte .ct:focus-visible, .carte .isl:focus-visible,
.carte .ct.survol, .carte .isl.survol{
  fill:color-mix(in srgb, var(--green-3) 42%, transparent);
  stroke:var(--green-3); stroke-width:1.4}
.carte .ct.on{
  fill:color-mix(in srgb, var(--saffron) 62%, transparent);
  stroke:var(--saffron); stroke-width:1.4}
.carte .ct.on:hover, .carte .ct.on.survol{fill:var(--saffron); stroke:var(--saffron-2)}
.carte .isl{stroke-width:1.6}
.carte .ct-repere{pointer-events:none}
.carte .ct-repere .dot{fill:var(--saffron-2); stroke:var(--panel); stroke-width:1.4}
.carte .ct-repere .pulse{fill:none; stroke:var(--saffron); stroke-width:1.6; opacity:0;
  transform-box:fill-box; transform-origin:center; animation:pulse 2.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.45); opacity:.9}80%,100%{transform:scale(3.6); opacity:0}}
.carte-cap{display:flex; align-items:baseline; justify-content:center; gap:.55rem;
  margin:1.1rem 0 0; text-align:center; font-size:.92rem; color:var(--muted); min-height:1.5em;
  transition:opacity .2s}
.carte-cap b{font-family:var(--f-display); font-weight:700; color:var(--text)}
.carte-cap .fl{font-size:1.15rem; letter-spacing:0}
.carte-note{text-align:center; font-size:.8rem; color:var(--faint); margin:.5rem auto 0; max-width:46ch}
.panel .carte-cap{color:var(--on-panel-muted)}
.panel .carte-cap b{color:var(--on-panel)}
.panel .carte-note{color:var(--on-panel-muted)}
@media (max-width:640px){ .carte{max-width:100%} .carte-cap{font-size:.86rem} }

.countries{display:grid; gap:.6rem}
.crow{display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); transition:.3s; cursor:default}
.crow:hover{border-color:var(--saffron); transform:translateX(5px)}
.crow .fl{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; font-weight:500;
  color:var(--clay); border:1px solid var(--line-strong); border-radius:5px; padding:.24rem .42rem; flex:none}
.crow b{font-family:var(--f-display); font-size:1rem}
.crow small{display:block; color:var(--faint); font-size:.82rem}
.crow .st{margin-left:auto}

/* ============ DONATION ============ */
.amounts{display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem}
@media (max-width:760px){.amounts{grid-template-columns:repeat(2,1fr)}}
.amt{border:1.5px solid var(--line-strong); background:var(--surface); border-radius:12px; padding:1.1rem .8rem; cursor:pointer;
  text-align:center; transition:.25s; position:relative; overflow:hidden}
.amt b{font-family:var(--f-display); font-weight:800; font-size:1.5rem; display:block; letter-spacing:-.02em}
.amt small{display:block; color:var(--muted); font-size:.78rem; margin-top:.3rem; line-height:1.35}
.amt:hover{border-color:var(--saffron); transform:translateY(-3px)}
.amt.sel{border-color:var(--saffron); background:color-mix(in srgb,var(--saffron) 12%, var(--surface)); box-shadow:0 10px 26px -14px rgba(248,155,2,.9)}
.amt.sel b{color:var(--clay)}
.freq{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:99px; padding:4px; gap:2px}
.freq button{border:0; background:none; border-radius:99px; padding:.45rem 1.1rem; cursor:pointer;
  font-family:var(--f-display); font-weight:600; font-size:.82rem; letter-spacing:.03em; transition:.25s; color:var(--muted)}
.freq button.on{background:var(--green-2); color:#fff}
.recap{background:var(--panel); color:var(--on-panel); border-radius:var(--rad); padding:1.7rem; position:sticky; top:96px}
.recap .big{font-family:var(--f-display); font-weight:800; font-size:3rem; color:var(--saffron); letter-spacing:-.03em; font-variant-numeric:tabular-nums}

/* funding bar */
.fund{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--rad); padding:1.6rem}
.pbar{height:12px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin:.9rem 0 .6rem; border:1px solid var(--line)}
.pbar i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--green-2),var(--saffron)); transition:width 1.8s cubic-bezier(.2,.8,.2,1)}
table.budget{width:100%; border-collapse:collapse; font-size:.95rem}
table.budget th,table.budget td{text-align:left; padding:.6rem .4rem; border-bottom:1px solid var(--line)}
table.budget th{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
table.budget td:last-child,table.budget th:last-child{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--f-mono)}
.tblwrap{overflow-x:auto}

/* ============ TIMELINE ============ */
.tl{position:relative; padding-left:2.4rem}
.tl::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl .ph{position:relative; padding-bottom:2.2rem}
.tl .ph::before{content:""; position:absolute; left:-2.4rem; top:6px; width:16px; height:16px; border-radius:50%;
  background:var(--ground); border:2px solid var(--saffron); z-index:2}
.tl .ph.in::after{content:""; position:absolute; left:-1.75rem; top:22px; width:2px; height:0; background:var(--saffron);
  animation:grow .9s ease forwards}
@keyframes grow{to{height:calc(100% - 22px)}}
.tl .yr{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; color:var(--clay); text-transform:uppercase}

/* ============ NEWS / GALLERY ============ */
.news{display:grid; gap:0; border-top:1px solid var(--line)}
.na{display:grid; grid-template-columns:130px 1fr auto; gap:1.6rem; align-items:center; padding:1.5rem 0;
  border-bottom:1px solid var(--line); text-decoration:none; transition:.35s; position:relative}
.na::before{content:""; position:absolute; inset:0 -1.2rem; background:var(--surface-2); opacity:0; border-radius:10px; transition:.3s; z-index:-1}
.na:hover::before{opacity:1}
.na:hover h3{color:var(--green-2)}
.na .dt{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--faint); text-transform:uppercase}
.na .arrow{font-size:1.1rem; color:var(--saffron); transition:transform .3s}
.na:hover .arrow{transform:translateX(6px)}
@media (max-width:680px){.na{grid-template-columns:1fr; gap:.4rem} .na .arrow{display:none}}
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width:860px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gal{grid-template-columns:1fr}}
.ph-tile{aspect-ratio:4/3; border-radius:var(--rad); border:1px solid var(--line); position:relative; overflow:hidden;
  display:grid; place-items:center; text-align:center; padding:1.2rem;
  background:linear-gradient(140deg,var(--surface-2),var(--surface))}
.ph-tile::after{content:""; position:absolute; inset:0; background:
  repeating-linear-gradient(45deg,transparent,transparent 9px, color-mix(in srgb,var(--green-2) 6%, transparent) 9px, color-mix(in srgb,var(--green-2) 6%, transparent) 10px);
  opacity:.85; transition:opacity .4s}
.ph-tile:hover::after{opacity:.3}
.ph-tile .in-t{position:relative; z-index:2}
.ph-tile .ic{width:2.2rem; height:2.2rem; stroke-width:1.4; margin-inline:auto; margin-bottom:.8rem; transition:transform .45s}
.ph-tile:hover .ic{transform:scale(1.18) rotate(-5deg)}
.ph-tile b{font-family:var(--f-display); display:block; font-size:1.05rem}
.ph-tile small{color:var(--faint); font-size:.8rem}

/* ============ DOCS ============ */
.doc{display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); text-decoration:none; transition:.3s}
.doc:hover{border-color:var(--green-2); transform:translateX(5px); background:var(--surface-2)}
.doc .ic{width:1.3rem; height:1.3rem}
.doc b{font-family:var(--f-display); font-size:.98rem; display:block}
.doc small{color:var(--faint); font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase}
.doc .dl{margin-left:auto; color:var(--saffron); font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase}

/* ============ FORMS ============ */
.field{display:grid; gap:.4rem; margin-bottom:1rem}
.field label{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{
  background:var(--surface); border:1.5px solid var(--line); border-radius:10px; padding:.78rem .9rem;
  font-family:var(--f-body); font-size:1rem; transition:.25s; width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--saffron); outline:none; box-shadow:0 0 0 4px color-mix(in srgb,var(--saffron) 16%, transparent)}
.field textarea{min-height:150px; resize:vertical}
.chk{display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; color:var(--muted); margin-bottom:1rem}
.chk input{margin-top:.35rem; accent-color:var(--green-2); width:auto}
.formnote{font-size:.85rem; color:var(--faint); border-left:2px solid var(--saffron); padding-left:.9rem}
.pills{display:flex; flex-wrap:wrap; gap:.5rem}
.pill{border:1.5px solid var(--line-strong); border-radius:99px; padding:.45rem .95rem; cursor:pointer; background:var(--surface);
  font-family:var(--f-display); font-weight:600; font-size:.82rem; transition:.25s}
.pill:hover{border-color:var(--saffron)}
.pill.on{background:var(--green-2); border-color:var(--green-2); color:#fff}

/* ============ QUOTE ============ */
.quote{text-align:center; max-width:24ch; margin-inline:auto; font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.7rem,4.2vw,3.1rem); line-height:1.14; letter-spacing:-.025em}
.quote em{font-style:normal; color:var(--saffron)}
.panel .quote{color:var(--on-panel)}
.attrib{text-align:center; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--on-panel-muted); margin-top:1.6rem}

/* ============ FOOTER ============ */
footer.site{background:var(--panel-2); color:var(--on-panel); padding:4rem 0 2rem; margin-top:0}
footer.site a{color:var(--on-panel-muted); text-decoration:none; transition:.2s}
footer.site a:hover{color:var(--saffron)}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:2.2rem}
@media (max-width:980px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.fcol h5{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--saffron);
  margin:0 0 1rem; font-weight:500}
.fcol ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.94rem}
.fbot{margin-top:3rem; padding-top:1.4rem; border-top:1px solid color-mix(in srgb,var(--on-panel) 15%, transparent);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-family:var(--f-mono); font-size:.7rem;
  letter-spacing:.08em; color:var(--on-panel-muted)}
.marquee{overflow:hidden; border-block:1px solid color-mix(in srgb,var(--on-panel) 15%, transparent); padding:.8rem 0;
  margin:2.4rem 0 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee div{display:flex; gap:2.4rem; width:max-content; animation:slide 34s linear infinite;
  font-family:var(--f-display); font-weight:700; font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase; color:var(--on-panel-muted)}
.marquee span{display:flex; align-items:center; gap:2.4rem; white-space:nowrap}
.marquee em{color:var(--saffron); font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* legal tabs */
.tabs{display:flex; flex-wrap:wrap; gap:.4rem; border-bottom:1px solid var(--line); margin-bottom:2.2rem}
.tabs a{display:block; padding:.7rem .9rem; text-decoration:none; font-family:var(--f-display); font-weight:600;
  font-size:.85rem; color:var(--muted); border-bottom:2px solid transparent; transition:.25s; margin-bottom:-1px; white-space:nowrap}
.tabs a:hover{color:var(--text)}
.tabs a[aria-current="page"]{color:var(--green-2); border-bottom-color:var(--saffron)}
.legal h3{margin:2rem 0 .6rem} .legal h3:first-child{margin-top:0}
.legal p,.legal li{color:var(--muted)}

/* notice */
.notice{display:flex; gap:.85rem; align-items:flex-start; background:color-mix(in srgb,var(--saffron) 10%, var(--surface));
  border:1px solid color-mix(in srgb,var(--saffron) 40%, transparent); border-radius:12px; padding:1rem 1.2rem; font-size:.92rem}
.notice b{color:var(--clay); font-family:var(--f-display)}
.panel .notice{background:color-mix(in srgb,var(--saffron) 12%, transparent)}
.panel .notice b{color:var(--saffron-2)}

/* toast */
#toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%); z-index:200; background:var(--panel);
  color:var(--on-panel); border:1px solid color-mix(in srgb,var(--saffron) 45%, transparent); border-radius:99px;
  padding:.8rem 1.5rem; font-family:var(--f-display); font-weight:600; font-size:.9rem; box-shadow:var(--shadow-lg);
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
#toast.show{transform:translate(-50%,0)}

/* les autres pays, dépliables sous la liste des pays d'intervention */
.paysplus{display:flex; margin-top:1rem}
.paysplus .chev{transition:transform .3s}
.paysplus button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.paysreste[hidden]{display:none}
.paysreste-lede{font-size:.88rem; color:var(--muted); margin:.2rem 0 0}
.paysnote{font-size:.8rem; color:var(--faint); margin:1rem 0 0}
.paysvide{color:var(--faint); font-size:.92rem; margin-top:.8rem}
.crow.pays small{color:var(--faint)}
.crow[hidden]{display:none}

/* org chart */
.org{display:grid; gap:.9rem; justify-items:center}
.org .lvl{display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center}
.onode{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:.9rem 1.3rem; text-align:center;
  min-width:170px; transition:.3s}
.onode:hover{border-color:var(--saffron); transform:translateY(-3px); box-shadow:var(--shadow)}
.onode b{font-family:var(--f-display); font-size:.98rem; display:block}
.onode small{color:var(--faint); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase}
.org .conn{width:1px; height:26px; background:var(--line-strong)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none} .rvw{opacity:1; -webkit-mask-size:100% 100%; mask-size:100% 100%}
  .hero h1 .l i{transform:none} .hero .sub,.slogan,.hero-actions,.hero-logo,.scroll-cue{opacity:1}
}