/* ==========================================================================
   TADAGBÉ — pages des programmes Diaspora
   S'appuie sur espaces.css (héros, sections, listes, CTA) et n'ajoute ici que
   les composants propres à ces pages : continents, carte mondiale, projets.
   Chargé APRÈS espaces.css : les accents ci-dessous écrasent ceux de .esp.
   ========================================================================== */

/* ---------- 1. Accent par programme -------------------------------------- */
.dia-reseautage{--esp:#3E8035;--esp-clair:#5DBA3F}
.dia-opportunites{--esp:#C08A2E;--esp-clair:#E9AC26}
.dia-investissement{--esp:#14532B;--esp-clair:#3E8035}
.dia-engagement{--esp:#C7362F;--esp-clair:#E06A16}

/* ---------- 2. Héros ----------------------------------------------------- */
.dia-hero__p{
  color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.7;
  max-width:520px;margin:0 0 28px
}

/* lien à l'intérieur d'une liste de programme */
.esp-list a{color:var(--esp);font-weight:600;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--esp) 45%,transparent);
  transition:box-shadow .3s}
.esp-list a:hover{box-shadow:inset 0 -1px 0 var(--esp)}

/* ---------- 3. Communauté mondiale (continents) -------------------------- */
.dia-conts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
/* Les cartes de continent mènent aux communautés géographiques : ce sont des
   liens, pas des vignettes décoratives. */
a.dia-cont{color:inherit;text-decoration:none}
.dia-cont{
  display:flex;flex-direction:column;align-items:center;gap:13px;padding:28px 16px;
  background:#fff;border:1px solid var(--bord);border-radius:var(--r-lg);text-align:center;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s
}
.dia-cont:hover{transform:translateY(-6px);box-shadow:var(--ombre-fort);border-color:transparent}
.dia-cont .ic{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--esp) 12%,#fff);color:var(--esp)
}
.dia-cont:hover .ic{transform:scale(1.1) rotate(-5deg)}
.dia-cont .t{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-3)}
.dia-cont b{font-family:'Archivo',Arial,sans-serif;font-size:16px;margin-top:-6px}

/* ---------- 4. Carte mondiale de la diaspora ----------------------------- */
.dia-map{display:grid;grid-template-columns:1fr .82fr;gap:24px;align-items:center;margin-top:28px}

/* le globe (cobe / WebGL) ------------------------------------------------- */
.dia-globe__in{
  position:relative;width:100%;max-width:540px;margin:0 auto;aspect-ratio:1;
  opacity:0;transition:opacity 1.2s var(--ease)
}
.dia-globe__in.is-pret,.dia-globe__in.is-plat{opacity:1}
.dia-globe__cv{width:100%;height:100%;cursor:grab;touch-action:none;display:block}
/* repli sans WebGL : le planisphère en semis de points */
.dia-globe__fb{display:none}
.is-plat .dia-globe__cv,.is-plat .dia-globe__eti{display:none}
.is-plat{aspect-ratio:1000/561;max-width:none;background:linear-gradient(150deg,#111,#070707);
  border-radius:var(--r-lg);overflow:hidden}
.is-plat .dia-globe__fb{display:block;width:100%;height:100%;opacity:.22}

.dia-globe__eti{position:absolute;inset:0;pointer-events:none}
.dia-eti{
  position:absolute;left:0;top:0;display:flex;align-items:center;
  padding:5px 11px;border-radius:99px;background:rgba(14,14,14,.9);
  border:1px solid rgba(255,255,255,.18);color:#fff;white-space:nowrap;
  backdrop-filter:blur(4px);will-change:transform,opacity;
  transition:opacity .35s var(--ease),border-color .3s,background .3s
}
.dia-eti b{font-family:'Archivo',Arial,sans-serif;font-size:13px;color:var(--vert-clair);transition:color .3s}
.dia-eti span{font-size:10.5px;letter-spacing:.04em;color:#C8C8C8;max-width:0;overflow:hidden;
  transition:max-width .4s var(--ease)}
.dia-eti:hover span,.dia-eti.is-on span{max-width:120px;margin-left:7px}
.dia-eti:hover{border-color:rgba(233,172,38,.6)}
.dia-eti.is-on{background:#1B1608;border-color:var(--or);box-shadow:0 0 0 4px rgba(233,172,38,.15);z-index:2}
.dia-eti.is-on b{color:var(--or)}

/* mention sous le globe */
.dia-globe__cap{font-size:11px;color:var(--texte-3);margin-top:12px;text-align:center}

/* rappel en pastilles : légende sur grand écran, commande sur mobile */
.dia-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dia-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;
  border:1px solid var(--bord);background:#fff;font-size:12.5px;font-weight:600;
  transition:border-color .3s,color .3s,transform .3s var(--ease)
}
.dia-chip em{font-style:normal;font-weight:800;color:var(--esp)}
.dia-chip:hover{transform:translateY(-2px);border-color:var(--esp)}
.dia-chip.is-on{background:var(--vert-fonce);border-color:var(--vert-fonce);color:#fff}
.dia-chip.is-on em{color:var(--or)}

.dia-panel{
  position:sticky;top:calc(var(--header-h) + 62px);
  background:linear-gradient(150deg,#111,#080808);color:#fff;
  border-radius:var(--r-lg);padding:22px 24px;overflow:hidden
}
.dia-panel__h{display:flex;align-items:center;gap:13px;padding-bottom:15px;
  border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:6px}
.dia-panel__f{font-size:32px;line-height:1;flex:none}
.dia-panel__h b{display:block;font-family:'Archivo',Arial,sans-serif;font-size:18px}
.dia-panel__h span{font-size:11.5px;color:#B4B4B4}
.dia-panel__h span em{font-style:normal;font-weight:700;color:var(--or)}
.dia-panel__l li{
  display:flex;gap:12px;align-items:center;padding:12px 0;font-size:12.6px;color:#D6D6D6;
  border-bottom:1px solid rgba(255,255,255,.07)
}
.dia-panel__l li:last-child{border-bottom:0}
.dia-panel__l .ic{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1.4px solid rgba(233,172,38,.4);color:var(--or)
}
.dia-panel__note{font-size:11px;color:#8F8F8F;line-height:1.6;margin-top:14px;
  display:flex;gap:8px;align-items:flex-start}
.dia-panel__note svg{flex:none;margin-top:2px;color:#8F8F8F}
.dia-panel .btn{margin-top:14px}

/* ---------- 5. Projets à financer ---------------------------------------- */
.dia-projs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.dia-proj .card__img{height:168px}
.dia-proj__b{padding:16px 18px 20px}
.dia-proj__b .ic{width:38px;height:38px;border-radius:9px;color:#fff;margin-bottom:12px}
.dia-proj h4{font-size:14.5px;margin-bottom:6px}
.dia-proj p{font-size:12.6px;color:var(--texte-2);line-height:1.55}

/* ---------- 6. Bandeau alertes ------------------------------------------- */
.dia-alert{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:linear-gradient(100deg,var(--or),#F0BA45);color:#1A1200;
  border-radius:var(--r-lg);padding:26px 30px;margin-top:26px
}
.dia-alert .ic{width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.1);
  display:grid;place-items:center;flex:none}
.dia-alert div{flex:1;min-width:220px}
.dia-alert h3{font-size:17px;text-transform:uppercase;line-height:1.2}
.dia-alert p{font-size:13px;margin-top:6px;line-height:1.55}

/* ---------- 7. Événements en grille -------------------------------------- */
.dia-evts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}

/* ---------- 8. Responsive ------------------------------------------------ */
@media(max-width:1080px){
  .dia-projs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .dia-map{grid-template-columns:minmax(0,1fr)}
  .dia-panel{position:static}
  .dia-conts{grid-template-columns:repeat(2,1fr)}
  .dia-evts{grid-template-columns:minmax(0,1fr)}
  .dia-globe__in{max-width:440px}
}
@media(max-width:680px){
  .dia-eti{padding:4px 9px}
  .dia-eti b{font-size:11.5px}
  .dia-eti span{font-size:9.5px}
  .dia-chips{margin-top:14px}
}
@media(max-width:620px){
  .dia-projs{grid-template-columns:minmax(0,1fr)}
  .dia-alert{padding:22px}
}