/* CaDEA - Final palette + dropdown + marquee + hero overrides
   Palette : ONU bleu (#009edb, #1cabe2) + CaDEA (couleurs du logo)
   Plus de doré, plus de navy.
*/

:root{
  --un-blue:#009edb;
  --un-blue-dark:#0077a8;
  --un-blue-deep:#003366;
  --un-cyan:#1cabe2;
  --un-grey:#5b6577;
  --un-grey-dark:#1a1a1a;
  --cadea-blue:#5da9d9;          /* bleu du logo CaDEA */
  --cadea-blue-dark:#3d8bb8;
  --accent-red:#c8102e;          /* rouge ONU pour alertes */
  --green-positive:#0f7a46;
  /* Override previous palette so no gold or navy remains */
  --navy:#003366;
  --navy-2:#0077a8;
  --navy-3:#009edb;
  --gold:#1cabe2;                /* anything still using --gold becomes UN cyan */
  --gold-2:#0077a8;
  --ink:#1a1a1a;
  --ink-2:#2a3648;
}

/* === Body fonts: Helvetica only, NO italic anywhere === */
body, p, span, a, li, h1, h2, h3, h4, h5, h6, button, input, textarea, select{
  font-family:'Helvetica Neue','Helvetica','Arial',sans-serif !important;
}
em, i, .un-header .un-brand .titles .tag{font-style:normal !important}

/* === HERO: white H1, uppercase, no italic === */
.hero h1, .hero h1 .accent{
  font-family:'Helvetica Neue','Helvetica','Arial',sans-serif !important;
  color:#ffffff !important;
  font-style:normal !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.02em !important;
}
.hero h1 .accent{font-weight:800 !important}
.hero-eyebrow{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.3) !important;
  color:#ffffff !important;
}
.hero-eyebrow::before{background:#ffffff !important;box-shadow:0 0 10px rgba(255,255,255,.6) !important}

/* === BG colors: replace navy with UN deep blue === */
.hero{
  background:
    radial-gradient(900px 500px at 85% 20%,rgba(28,171,226,.25),transparent 60%),
    radial-gradient(700px 400px at 10% 80%,rgba(0,158,219,.35),transparent 60%),
    linear-gradient(180deg,#003366 0%,#0077a8 100%) !important;
}
.hero::after{height:5px !important;background:#1cabe2 !important}
.page-hero{
  background:linear-gradient(135deg,#003366,#0077a8) !important;
}
.page-hero::after{background:#1cabe2 !important}

/* === BTN colors === */
.btn-gold{background:#1cabe2 !important;color:#ffffff !important}
.btn-gold:hover{background:#0077a8 !important;box-shadow:0 10px 25px rgba(0,119,168,.35) !important}
.btn-navy{background:#003366 !important;color:#fff !important}
.btn-navy:hover{background:#0077a8 !important}
.btn-outline{border-color:#003366 !important;color:#003366 !important}
.btn-outline:hover{background:#003366 !important;color:#fff !important}

/* === KPI === */
.kpi b{color:#ffffff !important}
.un-header{border-top:3px solid #009edb !important}
.un-header .donate-btn{background:#003366 !important;color:#ffffff !important}
.un-header .donate-btn::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
.un-header .donate-btn:hover{background:#0077a8 !important}

/* === TAGLINE STRIP : grey band, simple, no diamonds === */
.tagline-strip{
  background:#6b7280 !important;
  border-bottom:1px solid #5a6270 !important;
}
.tagline-strip span{
  font-family:'Helvetica Neue','Helvetica','Arial',sans-serif !important;
  font-weight:700 !important;
  color:#ffffff !important;
  letter-spacing:.16em !important;
  padding:14px 60px !important;
  text-transform:uppercase !important;
}
.tagline-strip span::after{
  content:"" !important;
  display:none !important;
}

/* === FORMATION DROPDOWN: horizontal layout that does not cover the marquee === */
.un-nav{position:relative;z-index:60}

/* The submenu for Formation specifically becomes a horizontal mega-strip */
.un-nav .menu .has-sub .submenu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  width:auto;
  min-width:max-content;
  max-width:96vw;
  display:flex;
  flex-direction:row;
  gap:4px;
  padding:10px 14px;
  background:#ffffff;
  border:1px solid #d0d5dd;
  border-top:3px solid #009edb;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  z-index:80;
  white-space:nowrap;
}
.un-nav .menu .has-sub:hover .submenu,
.un-nav .menu .has-sub.open .submenu{
  transform:translateX(-50%) translateY(0);
}
.un-nav .menu .has-sub .submenu a{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  border-bottom:0;
  border-right:1px solid #f0f1f4;
  padding:10px 16px;
  white-space:nowrap;
  font-weight:600;
  font-size:.82rem;
  text-transform:none;
  letter-spacing:0;
  color:#1a1a1a;
}
.un-nav .menu .has-sub .submenu a:last-child{border-right:0}
.un-nav .menu .has-sub .submenu a small{
  display:block;
  margin-top:4px;
  font-size:.7rem;
  color:#5b6577;
  font-weight:400;
  white-space:nowrap;
}
.un-nav .menu .has-sub .submenu a:hover{background:#f0f8fc;color:#009edb}

/* The tagline strip should remain visible BELOW the dropdown.
   The dropdown overlays only the area immediately below nav, but the tagline strip
   sits flush with the bottom of nav, so we need a slight gap.
   We achieve this by making the dropdown not cover the strip: it positions inside
   nav with its own background, so the strip remains untouched naturally because
   the strip is below the nav, not the dropdown. The dropdown is positioned absolute
   relative to nav so it overlays the hero, NOT the strip.
*/

/* === DASHBOARD : new chart palette (no gold) === */
.dash-card .big{color:#003366 !important;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif !important;font-weight:800 !important}
.dash-card h3{color:#003366 !important;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif !important}
.live-stat .arrow{color:#0f7a46 !important}
.donut{
  background:conic-gradient(#1cabe2 calc(var(--p)*1%),#e5e9f0 0) !important;
}
.donut span{color:#003366 !important;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif !important;font-weight:700 !important}
.bar-fill{background:linear-gradient(to right,#003366,#1cabe2) !important}
.bar-value{color:#003366 !important}
.toppages .pn{background:#e8f4fb !important;color:#003366 !important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:700 !important}
.toppages .vl{color:#003366 !important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:700 !important}
.gauge .gv{color:#003366 !important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:800 !important}
.pill.gold{background:#e8f4fb !important;color:#0077a8 !important;border-color:#bfe1f1 !important}

/* === Cards: top accent in UN cyan === */
.card::before{background:linear-gradient(to right,#009edb,#1cabe2) !important}
.card .icon{
  background:linear-gradient(135deg,#003366,#0077a8) !important;
  color:#ffffff !important;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;
}

/* === Person avatars === */
.avatar{
  background:linear-gradient(135deg,#003366,#0077a8) !important;
  color:#ffffff !important;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;
  font-weight:800 !important;
}
.person h4{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:700 !important;color:#003366 !important}
.person .role{color:#0077a8 !important}

/* === Section headings === */
h1, h2, h3, h4{color:#003366 !important;font-weight:700 !important;letter-spacing:-.005em !important}
.eyebrow{color:#0077a8 !important;background:rgba(0,119,168,.1) !important}
.hero-eyebrow{color:#ffffff !important}
.hero-eyebrow{background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.3) !important}

/* === Values border accent === */
.value{border-left-color:#1cabe2 !important}
.value b{color:#003366 !important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:700 !important}

/* === Timeline === */
.timeline::before{background:linear-gradient(to bottom,#1cabe2,#e5e9f0) !important}
.tl-item::before{background:#1cabe2 !important;box-shadow:0 0 0 2px #1cabe2 !important}
.tl-item time{color:#0077a8 !important}
.tl-item b{color:#003366 !important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:700 !important}

/* === About-img block === */
.about-img{background:linear-gradient(135deg,#003366,#0077a8) !important}
.about-img b{color:#ffffff !important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:800 !important}
.about-img::before{background:radial-gradient(circle at 70% 20%,rgba(28,171,226,.35),transparent 60%) !important}

/* === ul.checks bullets === */
ul.checks li::before{background:linear-gradient(135deg,#1cabe2,#0077a8) !important}

/* === CTA band === */
.cta-band{background:linear-gradient(135deg,#003366,#0077a8) !important}
.cta-band::before{background:radial-gradient(circle at 20% 30%,rgba(28,171,226,.25),transparent 50%) !important}

/* === News card / Project event === */
.news-card.feature{
  background:linear-gradient(135deg,#f0f8fc 0%,#ffffff 100%) !important;
  border-left-color:#1cabe2 !important;
}
.news-card.feature .amount{color:#003366 !important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:800 !important}
.news-card.feature .amount small{color:#0077a8 !important}
.news-card .date{color:#0077a8 !important;background:rgba(0,119,168,.1) !important}
.news-card .date::before{background:#1cabe2 !important}
.news-card h3{color:#003366 !important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:700 !important}
.news-card .meta b{color:#003366 !important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:700 !important}
.highlight{
  background:linear-gradient(135deg,rgba(28,171,226,.08),rgba(28,171,226,.02)) !important;
  border-color:rgba(28,171,226,.3) !important;
  border-left-color:#1cabe2 !important;
}
.highlight b{color:#003366 !important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:700 !important}

/* === Programs (Formation) === */
.prog{border-color:#e5e9f0 !important}
.prog .num{color:#1cabe2 !important;opacity:.45 !important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:800 !important}
.prog .tag{color:#0077a8 !important;background:rgba(0,119,168,.1) !important}
.prog h3{color:#003366 !important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-weight:700 !important}
.prog ul li::before{background:#1cabe2 !important}

/* === Map legend === */
.map-legend .dot.gold{background:#1cabe2 !important;box-shadow:0 0 0 3px rgba(28,171,226,.25) !important}
.map-legend .dot.navy{background:#003366 !important;box-shadow:0 0 0 3px rgba(0,51,102,.2) !important}

/* === Partner marquee logos === */
.partner{
  background:#ffffff !important;
  border:1px solid #e5e9f0 !important;
  color:#003366 !important;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;
  font-weight:700 !important;
  min-width:200px !important;
  height:90px !important;
  padding:8px 12px !important;
}
.partner:hover{border-color:#1cabe2 !important;color:#0077a8 !important}
.partner img{
  max-height:62px !important;
  max-width:170px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}
.partner small{display:none !important}

/* === Donation band: UN cyan === */
.un-footer .donate-band{background:linear-gradient(135deg,#009edb 0%,#0077a8 100%) !important}
.un-footer .donate-band .donate-btn-lg{background:#003366 !important;color:#ffffff !important}
.un-footer .donate-band .donate-btn-lg::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
.un-footer .donate-band .donate-btn-lg:hover{background:#001f3f !important}
.un-footer .foot-main h4{border-bottom-color:#009edb !important}
.un-footer .social-row a:hover{background:#009edb !important;border-color:#009edb !important}

/* === Chatbot === */
.chatbot-launcher{
  background:linear-gradient(135deg,#003366,#0077a8) !important;
  color:#ffffff !important;
  border:2px solid #1cabe2 !important;
}
.chatbot-launcher .ia-badge{background:#1cabe2 !important;color:#ffffff !important}
.chat-head{background:linear-gradient(135deg,#003366,#0077a8) !important}
.chat-msg.user .bubble{background:#003366 !important}

/* === Contact form button === */
form button[type="submit"], form .btn-navy{background:#003366 !important;color:#fff !important}
form button[type="submit"]:hover{background:#0077a8 !important}
.info-block .ico{background:linear-gradient(135deg,#003366,#0077a8) !important;color:#ffffff !important}

/* === Hide flag in topbar (still UN style minimal) === */
.un-topbar .home svg{fill:#003366 !important}

/* === Mobile dropdown stays vertical === */
@media (max-width: 1024px){
  .un-nav .menu .has-sub .submenu{
    position:static;
    transform:none;
    flex-direction:column;
    width:100%;
    min-width:auto;
    max-width:none;
    background:#0d0d0d;
    border:0;
    border-left:3px solid #009edb;
    box-shadow:none;
    padding:0;
    margin:0 24px;
    white-space:normal;
  }
  .un-nav .menu .has-sub .submenu a{
    width:100%;
    border-right:0;
    border-bottom:1px solid #2a2a2a;
    color:#cfd8ea;
    white-space:normal;
  }
  .un-nav .menu .has-sub .submenu a:hover{background:#2a2a2a;color:#1cabe2}
  .un-nav .menu .has-sub .submenu a small{color:#8a99b3}
}