/* ============================================================
   CACS AFRICA — composants & sections
   (prologue · carte · hero · cartes · actus · timeline · chat)
   ============================================================ */

/* ============================================================
   CARTE 3D — fond fixe
   ============================================================ */
/* La scène WebGL n'appartient qu'au hero (premier écran). En position absolue
   sur 100vh, elle défile avec la page : elle ne peut donc jamais réapparaître
   au milieu ni en bas. Pendant le prologue, elle redevient fixe car elle sert
   alors de décor à l'intro. Le rendu est en plus suspendu hors hero
   (body.map-off, voir js/site.js + js/three-map.js). */
#mapCanvasWrap{position:absolute;top:0;left:0;width:100%;height:100vh;z-index:0;
  pointer-events:none;transition:background .8s ease}
body.prologue-lock #mapCanvasWrap,body.prologue-lock .map-veil{position:fixed;inset:0;width:auto;height:auto}
body.map-off #mapCanvasWrap,body.map-off .map-veil{visibility:hidden}
#mapCanvas{width:100%;height:100%;display:block}
/* voile : la carte respire à droite, le texte du hero reste sur fond calme à gauche */
.map-veil{position:absolute;top:0;left:0;width:100%;height:100vh;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(241,243,245,.92) 0%,rgba(241,243,245,.55) 34%,transparent 62%),
    radial-gradient(120% 80% at 70% 10%,transparent 40%,rgba(241,243,245,.5) 100%)}
/* pendant le prologue : espace sombre derrière la carte (texte blanc lisible) */
body.prologue-lock #mapCanvasWrap{background:radial-gradient(130% 110% at 50% 22%,#0a3168 0%,#03183a 48%,#00060f 100%)}
body.prologue-lock .map-veil{background:none}
/* au-dessus de la carte fixe (z0), sans casser le sticky du header (z50 dans style.css) */
main,footer{position:relative;z-index:2}

/* ============================================================
   PROLOGUE
   ============================================================ */
/* prologue-lock : masque le contenu du site sous le prologue, sans bloquer le scroll */
body.prologue-lock main,body.prologue-lock footer,body.prologue-lock .topbar,body.prologue-lock .site-header{visibility:hidden}
#prologue{position:relative;height:460vh;z-index:8000}
.prologue-stage{position:sticky;top:0;height:100vh;overflow:hidden}
#pBackdrop{position:absolute;inset:0;background:#000409;z-index:1}
.prologue-stage .chap{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 8vw;
  pointer-events:none;
}
#chap1{color:var(--paper)}
#pType1{
  font-family:var(--font-serif);font-size:clamp(1.6rem,5.2vw,4rem);
  letter-spacing:-.02em;line-height:1.1;min-height:1.3em;font-weight:400;
}
#pType1.caret::after{content:"";display:inline-block;width:.5ch;height:1.05em;
  background:var(--cobalt);margin-left:.08em;transform:translateY(.14em);
  animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chap .big{font-family:var(--font-serif);font-size:clamp(1.5rem,4.4vw,3.4rem);
  line-height:1.12;letter-spacing:-.02em;max-width:16ch;color:var(--paper);
  text-shadow:0 4px 40px rgba(0,10,30,.6)}
.chap .lead{font-size:clamp(.95rem,1.6vw,1.2rem);color:#bcd0f5;max-width:44ch;margin-top:22px;line-height:1.5}
.chap .cobalt{color:var(--cobalt)}
#chap2,#chap3,#chap4{opacity:0}

/* emblème final */
#pEmblem{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;opacity:0;pointer-events:none}
#pEmblem svg{width:min(30vw,180px);height:auto;overflow:visible}
#pEmblem .em-label{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.001}
#pEmblem.show .em-label{opacity:1;transition:opacity .8s ease .3s}
#pEmblem .em-label b{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--paper);font-weight:700;letter-spacing:.02em;line-height:1;text-transform:uppercase}
#pEmblem .em-label span{font-size:clamp(.52rem,1.1vw,.72rem);letter-spacing:.2em;color:var(--cobalt);font-weight:700;
  text-transform:uppercase;text-align:center;max-width:90vw}

.prologue-skip{
  position:fixed;top:24px;right:26px;z-index:8100;pointer-events:auto;
  display:inline-flex;align-items:center;gap:9px;color:var(--paper);
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  border:1px solid rgba(255,255,255,.4);border-radius:40px;padding:9px 18px;
  background:rgba(0,10,30,.25);backdrop-filter:blur(6px);transition:.3s;
}
.prologue-skip:hover{background:var(--cobalt);border-color:var(--cobalt)}
.prologue-skip svg{width:15px;height:15px}
.p-scroll-hint{
  position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:8100;
  color:#bcd0f5;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;
}
.p-scroll-hint .bar{width:1px;height:40px;background:linear-gradient(var(--cobalt),transparent);
  animation:hintdrop 1.8s var(--ease) infinite}
@keyframes hintdrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100vh;display:flex;align-items:flex-end;padding-bottom:clamp(40px,7vh,90px);
  position:relative;overflow:hidden}
.hero-inner{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);width:100%;position:relative;z-index:3}
.hero .eyebrow{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.22em;
  color:var(--cobalt);margin-bottom:22px;display:inline-flex;align-items:center;gap:.7em}
.hero .eyebrow::before{content:"";width:30px;height:1px;background:var(--cobalt)}
.hero h1{font-size:var(--h1);line-height:1.1;letter-spacing:-.01em;font-weight:700;color:var(--blue);max-width:14ch}
.hero h1 em{font-style:normal;color:var(--ink);display:block}
.hero h1 .k{color:var(--cobalt)}
.hero-sub{font-family:var(--font-serif);font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.5;
  color:var(--ink);max-width:46ch;margin-top:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.profile-select{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.profile-select label{font-size:.82rem;color:var(--muted);letter-spacing:.02em}
.profile-select select{
  appearance:none;background:#fff;border:1.5px solid var(--line);border-radius:40px;
  padding:11px 40px 11px 18px;font-size:.9rem;color:var(--ink);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23007dff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;transition:border-color .3s}
.profile-select select:hover{border-color:var(--cobalt)}
/* Bandeau de chiffres — plaque opaque : il ne doit JAMAIS entrer en collision
   avec le canvas WebGL fixe qui vit derrière le hero. */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px;
  padding:24px clamp(18px,2.2vw,30px) 22px;
  position:relative;z-index:4;border-radius:10px;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  backdrop-filter:saturate(150%) blur(10px);
  border:1px solid var(--line);border-top:2px solid var(--cobalt);
  box-shadow:0 24px 50px -34px rgba(0,25,80,.35);
}
/* Bandeau de chiffres : chaque nombre bascule en 3D à l'apparition
   (rotateX -90deg -> 0, perspective 800px, origine en bas), avec 120 ms de
   décalage entre les quatre. Le comptage progressif reste (js/site.js). */
.stat{min-width:0;perspective:800px}
.stat .num{font-size:var(--h2);font-weight:700;letter-spacing:-.01em;color:var(--blue);line-height:1.1;
  white-space:nowrap;transform-origin:bottom;backface-visibility:hidden}
.js .stat .num{transform:rotateX(-90deg);opacity:0;
  transition:transform .9s var(--ease),opacity .5s ease}
.stat-strip.in .num,.stat.in .num{transform:rotateX(0deg);opacity:1}
.stat-strip.in .stat:nth-child(1) .num{transition-delay:0ms}
.stat-strip.in .stat:nth-child(2) .num{transition-delay:120ms}
.stat-strip.in .stat:nth-child(3) .num{transition-delay:240ms}
.stat-strip.in .stat:nth-child(4) .num{transition-delay:360ms}
.stat .num span{font-variant-numeric:tabular-nums}
.stat .lbl{font-size:var(--small);color:var(--muted);margin-top:8px;line-height:1.35;
  text-transform:uppercase;letter-spacing:.08em}
.scroll-cue{position:absolute;right:var(--pad);bottom:36px;z-index:3;writing-mode:vertical-rl;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:14px}
.scroll-cue .line{width:1px;height:56px;background:linear-gradient(var(--cobalt),transparent)}
@media (max-width:900px){.scroll-cue{display:none}.stat-strip{grid-template-columns:repeat(2,1fr);gap:20px 16px}}

/* ============================================================
   COUCHE WEBGL PAR PAGE  (js/page3d.js)
   Chaque page a son moment 3D. DPR plafonné à 2, coupé en
   prefers-reduced-motion (voir style.css), en pause hors écran.
   ============================================================ */
.p3d-host{position:relative;isolation:isolate}
.p3d-host>.wrap,.p3d-host .wrap{position:relative;z-index:3}
.p3d-layer{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--ease);
}
/* sur les sections très hautes, la 3D reste une bande : on évite un canvas
   de plusieurs milliers de pixels de haut (coût GPU inutile). */
.p3d-layer.band{inset:0 0 auto 0;height:min(74vh,640px)}
.p3d-layer.ready{opacity:1}
.p3d-layer canvas{width:100%;height:100%;display:block}
/* voile local pour garder le texte lisible par-dessus la 3D */
.p3d-host::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--veil,rgba(241,243,245,.9)) 0%,
             rgba(241,243,245,0) 66%);
}
.p3d-host.on-white::after{background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 66%)}
.p3d-host.dark-sec::after{background:linear-gradient(90deg,rgba(0,53,148,.92) 0%,rgba(0,53,148,0) 68%)}
.p3d-host.center-veil::after{background:radial-gradient(70% 60% at 50% 50%,rgba(241,243,245,.86) 0%,rgba(241,243,245,0) 78%)}
@media (max-width:760px){
  .p3d-host::after,.p3d-host.on-white::after,.p3d-host.dark-sec::after{
    background:linear-gradient(180deg,rgba(241,243,245,.55),rgba(241,243,245,.88))}
  .p3d-host.dark-sec::after{background:linear-gradient(180deg,rgba(0,53,148,.55),rgba(0,53,148,.9))}
}

/* page-hero (inner pages) */
.page-hero{padding:calc(var(--head-h) + 60px) 0 40px;position:relative}
.page-hero .wrap{position:relative;z-index:3}
.page-hero h1{font-size:var(--h1);line-height:1.1;letter-spacing:-.01em;color:var(--blue);max-width:16ch}
.page-hero .lede{margin-top:26px}
.breadcrumb{font-size:.78rem;letter-spacing:.04em;color:var(--muted);margin-bottom:20px}
.breadcrumb a:hover{color:var(--cobalt)}
.page-hero-media{margin-top:56px;aspect-ratio:16/6;border-radius:8px}

/* ============================================================
   SECTION SHELLS
   ============================================================ */
.conviction{margin-top:34px;padding:26px 30px;border-left:3px solid var(--cobalt);background:var(--tint);border-radius:0 6px 6px 0}
.conviction p{font-family:var(--font-serif);font-size:1.25rem;font-style:italic;line-height:1.4;color:var(--blue)}
.portal{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/5}
.portal .tag{position:absolute;left:18px;bottom:16px;z-index:3;color:#fff;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(0,53,148,.5);padding:6px 12px;border-radius:40px;backdrop-filter:blur(4px)}

/* missions */
.m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.m-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:30px 26px 34px;transition:box-shadow .5s var(--ease),transform .5s var(--ease),border-color .4s;will-change:transform}
.m-card:hover{box-shadow:0 30px 60px -34px rgba(0,30,90,.4);border-color:transparent}
.m-card .mk{width:26px;height:26px;color:var(--cobalt)}
.m-card .mk svg{width:100%;height:100%}
.m-card h3{font-size:1.5rem;margin:16px 0 12px;color:var(--blue);letter-spacing:-.02em}
.m-card p{font-size:.92rem;color:var(--muted);line-height:1.55}
@media (max-width:920px){.m-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.m-grid{grid-template-columns:1fr}}

/* perspectives */
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.p-card{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:28px 26px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;cursor:pointer}
.p-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cobalt);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.p-card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(0,30,90,.4);border-color:transparent}
.p-card:hover::before{transform:scaleY(1)}
.p-mark{width:34px;height:34px;color:var(--cobalt);margin-bottom:20px}
.p-card h3{font-size:1.3rem;color:var(--blue);margin-bottom:8px;letter-spacing:-.02em}
.p-card p{font-size:.9rem;color:var(--muted);line-height:1.5}
.p-card .ask{margin-top:16px;font-size:.76rem;font-weight:600;color:var(--cobalt);letter-spacing:.04em;display:inline-flex;align-items:center;gap:6px;opacity:0;transform:translateX(-6px);transition:.4s}
.p-card:hover .ask{opacity:1;transform:none}
.p-hint{margin-top:30px;font-size:.86rem;color:var(--muted);display:inline-flex;align-items:center;gap:9px}
.p-hint svg{width:17px;height:17px;color:var(--cobalt)}
@media (max-width:900px){.p-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.p-grid{grid-template-columns:1fr}}

/* services list */
.s-list{margin-top:50px;border-top:1px solid var(--line)}
.s-row{display:grid;grid-template-columns:170px 1fr auto;gap:26px;align-items:center;
  padding:30px 8px;border-bottom:1px solid var(--line);transition:background .4s,padding .4s;position:relative}
.s-row:hover{background:#fff;padding-left:20px;padding-right:20px}
.s-row .stag{font-size:.72rem;font-weight:700;color:var(--cobalt);letter-spacing:.16em;
  text-transform:uppercase;line-height:1.3}
.s-row h3{font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--blue);letter-spacing:-.025em;margin-bottom:6px}
.s-row p{font-size:.94rem;color:var(--muted);line-height:1.5;max-width:60ch}
.s-row .go{width:46px;height:46px;border:1.5px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.4s;flex:none}
.s-row .go svg{width:20px;height:20px;color:var(--blue);transition:.4s}
.s-row:hover .go{background:var(--cobalt);border-color:var(--cobalt)}
.s-row:hover .go svg{color:#fff;transform:translate(2px,-2px)}
@media (max-width:820px){.s-row{grid-template-columns:1fr;gap:10px}.s-row .go{display:none}}

/* réseau */
.r-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.r-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px 24px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.r-card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -34px rgba(0,30,90,.4);border-color:transparent}
.r-card.hq{background:var(--blue);color:var(--paper)}
.r-card.hq h3,.r-card.hq .r-role{color:#fff}
.r-card.hq p{color:#bcd0f5}
.r-mark{width:30px;height:30px;color:var(--cobalt);margin-bottom:18px}
.r-card.hq .r-mark{color:#7fb2ff}
.r-card h3{font-size:1.25rem;color:var(--blue);letter-spacing:-.02em}
.r-role{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--cobalt);font-weight:600;margin:6px 0 12px}
.r-card p{font-size:.88rem;color:var(--muted);line-height:1.55}
@media (max-width:920px){.r-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.r-grid{grid-template-columns:1fr}}

/* news */
.n-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.n-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.n-card:hover{transform:translateY(-6px);box-shadow:0 34px 66px -34px rgba(0,30,90,.42);border-color:transparent}
.n-media{aspect-ratio:16/10;overflow:hidden}
.n-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.n-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.n-tag{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--cobalt);padding:4px 10px;border-radius:40px}
.n-tag.diplo{background:var(--blue)}
.n-tag.webi{background:var(--cobalt)}
.n-tag.coop{background:#0a7b6b}
.n-date{font-size:.76rem;color:var(--muted);letter-spacing:.02em}
.n-card h3{font-size:1.18rem;line-height:1.2;color:var(--ink);letter-spacing:-.02em;margin-bottom:10px}
.n-card p{font-size:.9rem;color:var(--muted);line-height:1.55;flex:1}
.n-loc{margin-top:14px;font-size:.78rem;color:var(--cobalt);font-weight:600;letter-spacing:.02em;display:inline-flex;align-items:center;gap:6px}
.n-loc svg{width:14px;height:14px}
@media (max-width:900px){.n-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.n-grid{grid-template-columns:1fr}}

/* news filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.filter-btn{border:1.5px solid var(--line);background:#fff;border-radius:40px;padding:9px 20px;font-size:.86rem;font-weight:600;color:var(--muted);transition:.3s}
.filter-btn:hover{border-color:var(--cobalt);color:var(--blue)}
.filter-btn.active{background:var(--blue);border-color:var(--blue);color:#fff}
.n-card.hide{display:none}

/* ABD meta + timeline */
.abd-meta{display:flex;gap:40px;margin-top:36px;flex-wrap:wrap}
.abd-meta .n{font-size:var(--h3);font-weight:700;color:var(--blue);letter-spacing:-.01em;line-height:1.1}
.dark-sec .abd-meta .n{color:#fff}
.abd-meta .l{font-size:.78rem;color:var(--muted);margin-top:6px;letter-spacing:.02em}
.dark-sec .abd-meta .l{color:#9db8e8}
.abd-visual{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3}

.timeline{margin-top:64px;position:relative;padding-left:0}
.tl-item{display:grid;grid-template-columns:150px 1fr;gap:40px;padding:40px 0;border-top:1px solid var(--line);align-items:start}
.tl-year{font-size:var(--h2);font-weight:700;color:var(--cobalt);letter-spacing:-.01em;line-height:1.1;position:sticky;top:100px}
.tl-content h3{font-size:var(--h3);color:var(--blue);letter-spacing:-.01em;line-height:1.1;margin-bottom:12px}
.tl-content p{font-size:.98rem;color:var(--muted);line-height:1.6;max-width:62ch}
.tl-media{margin-top:22px;border-radius:8px;overflow:hidden;aspect-ratio:16/9;max-width:520px}
.tl-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tl-tags span{font-size:.72rem;color:var(--blue);background:var(--tint);padding:5px 12px;border-radius:40px;font-weight:600}
@media (max-width:720px){.tl-item{grid-template-columns:1fr;gap:12px}.tl-year{position:static}}

/* editorial service blocks */
.svc-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;padding:clamp(50px,7vw,90px) 0;border-top:1px solid var(--line)}
.svc-block:nth-child(even) .svc-media{order:-1}
.svc-media{border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.svc-tag{font-size:.72rem;font-weight:700;color:var(--cobalt);letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.7em}
.svc-tag::before{content:"";width:26px;height:1px;background:var(--cobalt)}
.svc-block h2{font-size:var(--h2);color:var(--blue);letter-spacing:-.01em;line-height:1.1;margin:14px 0 18px}
.svc-block p{font-size:1rem;color:var(--muted);line-height:1.6;max-width:52ch}
.svc-list{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.svc-list li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;color:var(--ink)}
.svc-list svg{width:20px;height:20px;color:var(--cobalt);flex:none;margin-top:2px}
@media (max-width:800px){.svc-block{grid-template-columns:1fr;gap:26px}.svc-block:nth-child(even) .svc-media{order:0}}

/* Bandeau des membres : défilement continu des logos, gris au repos et en
   couleur au survol. L'animation se met en pause quand la souris entre. */
.marquee{margin-top:50px;overflow:hidden;border-block:1px solid var(--line);padding:34px 0;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:56px;width:max-content;animation:marq 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:38px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:.4s}
.marquee-track img:hover{filter:grayscale(0);opacity:1}
@keyframes marq{to{transform:translateX(-50%)}}

/* CTA / form */
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.cta-grid>*{min-width:0}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr}}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(22px,2.2vw,30px);min-width:0;max-width:520px}
.dark-sec .contact-form{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.field{margin-bottom:14px}
.field label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.dark-sec .field label{color:#9db8e8}
.field input,.field textarea,.field select{
  width:100%;background:var(--paper);border:1.5px solid var(--line);border-radius:8px;
  padding:10px 14px;font-size:.95rem;color:var(--ink);transition:border-color .3s,background .3s}
.field input,.field select{height:44px;padding-block:0}
.dark-sec .field input,.dark-sec .field textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--cobalt);background:#fff}
.dark-sec .field input:focus,.dark-sec .field textarea:focus{background:rgba(255,255,255,.1)}
.field textarea{min-height:92px;resize:vertical}
.form-ok{margin-top:16px;padding:14px 18px;background:var(--tint);border-radius:8px;color:var(--blue);font-size:.9rem;font-weight:600;display:none}
.form-ok.show{display:block}

/* gouvernance / president */
.gov-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;margin-top:20px}
.gov-media{border-radius:10px;overflow:hidden;aspect-ratio:1/1;max-width:420px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.pillar{padding:26px;border:1px solid var(--line);border-radius:8px;background:#fff}
.pillar .pk{font-size:.75rem;color:var(--cobalt);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pillar h3{font-size:1.2rem;color:var(--blue);margin:12px 0 8px}
.pillar p{font-size:.9rem;color:var(--muted);line-height:1.55}
@media (max-width:800px){.gov-grid{grid-template-columns:1fr}.pillars{grid-template-columns:1fr}}

/* bande photo éditoriale (3 visuels + légende) */
.photo-band{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.photo-band .pb-item{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.photo-band figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 18px 14px;
  color:#fff;font-size:.78rem;letter-spacing:.02em;line-height:1.35;
  background:linear-gradient(180deg,transparent,rgba(0,10,35,.7));
}
@media (max-width:900px){.photo-band{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.photo-band{grid-template-columns:1fr}}

/* partners strip */
/* Grille de logos statique : 4 colonnes bureau / 2 mobile.
   Gris au repos, couleur au survol. Aucun mouvement, aucun défilement. */
.partners{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.partner{background:#fff;border:1px solid var(--line);border-radius:8px;aspect-ratio:3/2;
  display:flex;align-items:center;justify-content:center;padding:20px;
  transition:border-color .3s}
.partner:hover{border-color:var(--cobalt)}
.partner img{max-height:52px;width:auto;filter:grayscale(1);opacity:.7;
  transition:filter .3s,opacity .3s}
.partner:hover img{filter:grayscale(0);opacity:1}
@media (max-width:760px){.partners{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   CHATBOT  (palette ICC, SVG)
   ============================================================ */
.chat-fab{position:fixed;right:26px;bottom:26px;z-index:60;width:60px;height:60px;border-radius:50%;
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 40px -14px rgba(0,40,120,.6);transition:transform .4s var(--ease),background .3s,opacity .3s}
.chat-fab:hover{background:var(--cobalt);transform:scale(1.06)}
.chat-fab.hidden{opacity:0;pointer-events:none;transform:scale(.6)}
.chat-fab svg{width:26px;height:26px}
.chat-fab-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--cobalt);animation:fabpulse 2.4s var(--ease) infinite}
@keyframes fabpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

.chat-panel{position:fixed;right:26px;bottom:26px;z-index:70;width:min(400px,calc(100vw - 40px));
  height:min(600px,calc(100vh - 60px));background:#fff;border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 40px 90px -30px rgba(0,20,70,.5);
  border:1px solid var(--line);opacity:0;transform:translateY(24px) scale(.96);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--blue);color:#fff}
.chat-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex:none}
.chat-avatar svg{width:24px;height:24px}
.chat-title{flex:1;line-height:1.2}
.chat-title strong{font-size:.95rem;display:block}
.chat-title span{font-size:.72rem;color:#9db8e8;display:flex;align-items:center;gap:6px}
.chat-title span::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ad29f;box-shadow:0 0 0 0 rgba(58,210,159,.6);animation:onlinepulse 2s infinite}
@keyframes onlinepulse{70%{box-shadow:0 0 0 6px rgba(58,210,159,0)}}
.chat-lang,.chat-close{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.78rem;font-weight:700;transition:background .3s}
.chat-lang:hover,.chat-close:hover{background:rgba(255,255,255,.15)}
.chat-close svg{width:18px;height:18px}
.chat-body{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:12px;background:var(--paper)}
.msg{max-width:84%;padding:12px 15px;border-radius:14px;font-size:.9rem;line-height:1.5;animation:msgin .4s var(--ease)}
@keyframes msgin{from{opacity:0;transform:translateY(8px)}}
.msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start;color:var(--ink)}
.msg.user{background:var(--blue);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.msg strong{font-weight:700}
.msg.bot strong{color:var(--blue)}
.typing{display:inline-flex;gap:4px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--cobalt);opacity:.5;animation:typing 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.chat-suggest{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 12px;background:var(--paper)}
.chat-suggest button{font-size:.76rem;color:var(--blue);background:var(--tint);border:1px solid transparent;border-radius:40px;padding:7px 13px;transition:.3s}
.chat-suggest button:hover{background:var(--cobalt);color:#fff}
.chat-input{display:flex;gap:8px;padding:14px 16px;border-top:1px solid var(--line);background:#fff}
.chat-input input{flex:1;border:1.5px solid var(--line);border-radius:40px;padding:11px 16px;font-size:.9rem;transition:border-color .3s}
.chat-input input:focus{outline:none;border-color:var(--cobalt)}
.chat-input button{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;transition:background .3s,transform .3s}
.chat-input button:hover{background:var(--cobalt);transform:scale(1.05)}
.chat-input button svg{width:18px;height:18px}
@media (max-width:520px){.chat-panel{right:10px;left:10px;width:auto;bottom:10px;height:min(80vh,600px)}.chat-fab{right:16px;bottom:16px}}

/* grain overlay */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* loader */
.loader{position:fixed;inset:0;z-index:9500;background:var(--blue);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .6s ease,visibility .6s}
.loader.done{opacity:0;visibility:hidden}
.loader svg{width:64px;height:64px;overflow:visible}
.loader span{color:#9db8e8;font-size:.76rem;letter-spacing:.28em;text-transform:uppercase}