/* ═══════════════════════════════════════════════════════════
   BANTU-HOME ENHANCEMENTS v2.0
   Animations · Mobile Nav · Interactions · Typography · UX
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS GLOBAUX ENRICHIS ── */
:root {
  --gold:#C8922A;--gold-l:#E8B84B;--gold-dim:rgba(200,146,42,.1);
  --gold-glow:rgba(200,146,42,.25);
  --dark:#1A1008;--dark2:#0d0a06;
  --bg:#FAFAF7;--surf:#F5F2EB;--surf2:#EFEBE0;
  --brd:rgba(200,146,42,.18);--brd2:rgba(200,146,42,.35);
  --txt:#1A1008;--txt2:#7A5C3A;--txt3:#A08060;
  --red:#B03A2E;--green:#1B5E20;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.1);
  --shadow-lg:0 20px 48px rgba(0,0,0,.15);
  --shadow-gold:0 8px 32px rgba(200,146,42,.2);
}


/* ── REVEAL SAFE (ne bloque pas si IntersectionObserver échoue) ── */
.reveal,.reveal-left,.reveal-scale {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.reveal.visible,.reveal-left.visible,.reveal-scale.visible {
  opacity:1 !important;
  transform:none !important;
}
/* Fallback: si JS échoue, forcer visibilité après 2s */
@keyframes reveal-fallback {
  to { opacity:1; transform:none }
}
.reveal { animation: reveal-fallback 0s 2.5s forwards }

/* ── HAMBURGER MOBILE NAV ── */
.hbg {
  display:none;flex-direction:column;gap:5px;
  width:36px;height:36px;justify-content:center;align-items:center;
  background:transparent;border:1px solid var(--brd);
  border-radius:10px;cursor:pointer;padding:8px;
  transition:all .2s;
}
.hbg:hover { background:var(--gold-dim);border-color:var(--gold) }
.hbg span {
  width:18px;height:2px;background:var(--txt2);border-radius:2px;
  transition:all .3s var(--ease-out);transform-origin:center;
}
.hbg.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hbg.open span:nth-child(2) { opacity:0;transform:scaleX(0) }
.hbg.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* Drawer mobile */
.mobile-drawer {
  display:none;position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:300;
}
.mobile-drawer.open { display:flex }
.md-overlay {
  position:absolute;inset:0;
  background:rgba(10,8,5,.7);
  backdrop-filter:blur(4px);
}
.md-panel {
  position:absolute;right:0;top:0;bottom:0;
  width:min(300px,85vw);
  background:var(--bg);
  border-left:1px solid var(--brd);
  padding:0;
  transform:translateX(100%);
  transition:transform .35s var(--ease-out);
  display:flex;flex-direction:column;
}
.mobile-drawer.open .md-panel { transform:none }
.md-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--brd);
}
.md-close {
  width:32px;height:32px;border-radius:8px;
  background:var(--surf);border:1px solid var(--brd);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;color:var(--txt2);
}
.md-links {
  padding:16px 12px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px;
}
.md-link {
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:14px;
  text-decoration:none;font-size:15px;font-weight:500;color:var(--txt);
  transition:all .18s;border:1px solid transparent;
}
.md-link:hover { background:var(--gold-dim);border-color:var(--brd);color:var(--gold) }
.md-link.active { background:var(--dark);color:var(--gold-l);border-color:rgba(200,146,42,.3) }
.md-link-ico { font-size:18px;width:24px;text-align:center }
.md-footer {
  padding:16px 20px;border-top:1px solid var(--brd);
  display:flex;flex-direction:column;gap:8px;
}
.md-support {
  width:100%;padding:12px;border-radius:14px;
  background:linear-gradient(135deg,#FF5E5B,#FF8C69);
  color:white;border:none;font-size:13px;font-weight:700;
  cursor:pointer;font-family:"DM Sans",sans-serif;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
@media(max-width:900px){.hbg{display:flex}}

/* ── BOUTONS AMÉLIORÉS ── */
.btn-primary {
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:50px;
  background:var(--gold);color:white;
  border:none;font-size:13px;font-weight:700;
  cursor:pointer;font-family:"DM Sans",sans-serif;
  transition:all .22s var(--ease-spring);
  box-shadow:0 4px 14px rgba(200,146,42,.35);
  text-decoration:none;
}
.btn-primary:hover {
  background:var(--gold-l);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(200,146,42,.45);
}
.btn-primary:active { transform:translateY(0) }

.btn-dark {
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:50px;
  background:var(--dark);color:var(--gold-l);
  border:1px solid rgba(200,146,42,.3);
  font-size:13px;font-weight:600;cursor:pointer;
  font-family:"DM Sans",sans-serif;
  transition:all .22s var(--ease-spring);
  text-decoration:none;
}
.btn-dark:hover {
  background:#2C1F0E;border-color:var(--gold);
  transform:translateY(-2px);box-shadow:var(--shadow-gold);
}

/* ── PULSE ANIMATION SUR LE BOUTON SOUTENIR ── */
@keyframes pulse-gold {
  0%,100% { box-shadow:0 0 0 0 rgba(200,146,42,.4) }
  50%      { box-shadow:0 0 0 10px rgba(200,146,42,0) }
}
.pulse { animation:pulse-gold 2.5s ease infinite }

/* ── BADGE NOTIFICATION ── */
.badge-notif {
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;border-radius:9px;padding:0 5px;
  background:var(--red);color:white;
  font-size:10px;font-weight:700;
  position:absolute;top:-4px;right:-4px;
}

/* ── CARTES HOVER ENRICHIES ── */
.card-hover {
  transition:transform .25s var(--ease-spring),
             box-shadow .25s ease,
             border-color .2s ease;
}
.card-hover:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-md),0 0 0 1px var(--gold);
}

/* ── TOOLTIP ── */
[data-tip] { position:relative }
[data-tip]::after {
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--dark);color:rgba(255,255,255,.9);
  font-size:11px;font-weight:500;padding:5px 10px;
  border-radius:8px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:all .18s;
  border:1px solid rgba(200,146,42,.2);
  box-shadow:var(--shadow-md);z-index:100;
  font-family:"DM Sans",sans-serif;
}
[data-tip]:hover::after { opacity:1;transform:translateX(-50%) translateY(0) }

/* ── BARRE DE PROGRESSION SCROLL ── */
#scroll-progress {
  position:fixed;top:0;left:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-l));
  z-index:1000;width:0%;
  transition:width .1s linear;
  box-shadow:0 0 8px var(--gold-glow);
}

/* ── SKELETON LOADER ── */
@keyframes shimmer {
  0% { background-position:-500px 0 }
  100% { background-position:500px 0 }
}
.skeleton {
  background:linear-gradient(90deg,var(--surf) 0px,var(--surf2) 200px,var(--surf) 400px);
  background-size:500px 100%;
  animation:shimmer 1.5s infinite;
  border-radius:8px;
}

/* ── TOAST NOTIFICATION ── */
#toast-container {
  position:fixed;bottom:80px;right:24px;z-index:900;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast {
  background:var(--dark);color:white;
  padding:10px 18px;border-radius:14px;
  font-size:13px;font-weight:500;
  border:1px solid rgba(200,146,42,.3);
  box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:8px;
  transform:translateX(120%);
  transition:transform .35s var(--ease-spring);
  pointer-events:all;
  font-family:"DM Sans",sans-serif;
}
.toast.show { transform:none }
.toast-ico { font-size:16px;flex-shrink:0 }

/* ── AMÉLIORATION HEADER ── */
.hdr {
  transition:background .3s,box-shadow .3s,border-color .3s;
}
.hdr.scrolled {
  background:rgba(250,250,247,.99) !important;
  box-shadow:0 1px 20px rgba(0,0,0,.08);
}

/* ── SMOOTH HOVER NAV ── */
.nb {
  position:relative;
  transition:color .18s,background .18s;
}
.nb::after {
  content:"";position:absolute;bottom:-2px;left:50%;right:50%;
  height:2px;background:var(--gold);border-radius:1px;
  transition:left .2s var(--ease-out),right .2s var(--ease-out);
}
.nb:hover::after,.nb.on::after { left:10%;right:10% }

/* ── AMÉLIORATION INPUTS ── */
input:focus, textarea:focus, select:focus {
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(200,146,42,.12) !important;
  outline:none !important;
}

/* ── FLOATNG LABEL EFFECT (forms) ── */
.form-group {
  position:relative;margin-bottom:14px;
}
.form-group label {
  position:absolute;left:14px;top:10px;
  font-size:13px;color:var(--txt3);
  transition:all .18s var(--ease-out);
  pointer-events:none;
  background:transparent;padding:0 4px;
}
.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label {
  top:-8px;left:10px;font-size:10px;
  color:var(--gold);background:var(--bg);
  font-weight:600;text-transform:uppercase;letter-spacing:.5px;
}

/* ── STATS COUNTER ANIMATION ── */
.count-up { transition:none }

/* ── AMÉLIORATION TYPOGRAPHIE ── */
.eyebrow {
  font-size:10px;text-transform:uppercase;letter-spacing:3px;
  color:var(--gold);font-weight:600;
  display:flex;align-items:center;gap:8px;
  margin-bottom:8px;
}
.eyebrow::before { content:"";width:24px;height:2px;background:var(--gold);border-radius:1px }

/* ── DIVIDER KENTE ── */
.divider-kente {
  height:4px;border-radius:2px;
  background:repeating-linear-gradient(90deg,
    var(--gold) 0,var(--gold) 8px,
    var(--green) 8px,var(--green) 16px,
    var(--red) 16px,var(--red) 24px,
    var(--dark) 24px,var(--dark) 32px);
  margin:24px 0;
}

/* ── FOCUS VISIBLE ACCESSIBILITY ── */
:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ── SÉLECTION DE TEXTE ── */
::selection { background:rgba(200,146,42,.2);color:var(--dark) }

/* ── SCROLLBAR STYLISÉE ── */
::-webkit-scrollbar { width:6px;height:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:rgba(200,146,42,.3);border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--gold) }

/* ── LIEN EXTERNE INDICATOR ── */
a[target="_blank"]:not(.c-btn):not(.nb):not(.mc-link):not(.blog-entry):not(.ac) {
  position:relative;
}

/* ── BACK TO TOP ── */
#back-top {
  position:fixed;bottom:80px;left:24px;z-index:400;
  width:40px;height:40px;border-radius:50%;
  background:var(--surf);border:1px solid var(--brd);
  color:var(--txt2);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:all .25s var(--ease-spring);
  box-shadow:var(--shadow-sm);
}
#back-top.show { opacity:1;transform:none;pointer-events:all }
#back-top:hover { background:var(--gold);color:white;border-color:var(--gold);box-shadow:var(--shadow-gold) }

/* ── CARTE PAYS HOVER ── */
.country-card {
  transition:all .22s var(--ease-spring);
  cursor:pointer;
}
.country-card:hover {
  transform:scale(1.03);
  filter:brightness(1.1);
}

/* ── MOBILE RESPONSIVE FINE TUNING ── */
@media(max-width:480px) {
  .ph-h1,.hero-h1 { font-size:32px !important }
  .btns { flex-direction:column }
  .btns button { width:100%;justify-content:center }
}

/* ── SÉCURITÉ MODALS — toujours cachés par défaut ── */
.modal-over:not(.open),
.contrib-over:not(.open),
#joinModal:not(.open),
#contribModal:not(.open) {
  display:none !important;
}