:root{
  --blue:#0d47a1; --red:#b71c1c; --text:#000;

  /* tailles logos */
  --logo-h:78px;        /* desktop */
  --logo-h-sm:60px;     /* mobile */
  --logo-h-xs:52px;     /* très petits écrans */
}

@font-face{
  font-family:'Bell MT';
  src:local('Bell MT'),local('BellMT');
  font-display:swap;
}

/* ===== Reset & base ===== */
*{ box-sizing:border-box }
html,body{ max-width:100%; overflow-x:hidden }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:"Bell MT","Georgia","Times New Roman",serif;
  color:var(--text); background:#fff;
  font-size:clamp(16px,0.7vw + 14px,18px);
  line-height:1.55;
}
img,video{ max-width:100%; height:auto; display:block }
.row > * { min-width:0 }

/* contenu long : limiter la largeur */
.prose{ max-width:68ch }
.prose p, .prose li{ overflow-wrap:anywhere }
@media (min-width:1200px){ .prose{ max-width:72ch } }

/* éviter la casse des mots dans l’UI */
.navbar, .navbar-nav .nav-link, .brand-name, .btn, .section-title{
  word-break:keep-all; overflow-wrap:break-word; hyphens:manual;
}

/* ===== Background ===== */
.bg-dotgrid{
  background:
    radial-gradient(circle at 1px 1px,#e2e8ff 1px,transparent 0) 0 0/18px 18px,
    linear-gradient(#fff,#fff);
}

/* ===== Topbar & Navbar ===== */
.topbar{ background:#0b1020; color:#e9eefb; padding:.8rem 0 }
.topbar .container, .topbar .container-fluid{ font-size:1.22rem }
.topbar a{ font-size:1.15rem }

/* entête pleine largeur seulement */
.topbar, nav.navbar{ width:100% }
.topbar .container, .topbar .container-fluid,
nav.navbar .container, nav.navbar .container-fluid{
  max-width:100% !important; padding-inline:1rem;
}

.navbar{ border-bottom:1px solid #eaeef6; background:#fff }

/* ===== Marque (logos + 2 lignes) ===== */
.navbar-brand{
  display:flex; align-items:center; gap:10px;
  min-width:0; flex:0 1 auto;            /* n’empiète pas sur le burger */
}
.brand-logos{ display:flex; align-items:center; gap:10px; flex-shrink:0 }
.brand-logo{ height:var(--logo-h); width:auto; border-radius:12px; object-fit:contain }
.brand-logo.secondary{ height:var(--logo-h) }

.brand-text{ display:flex; flex-direction:column; line-height:1.05; min-width:0 }
.brand-name{ font-size:clamp(1.2rem,1.2vw + .7rem,1.7rem); white-space:nowrap }
.brand-sub{
  margin-top:2px; font-weight:600; letter-spacing:.2px;
  color:#6b7280; white-space:nowrap;
  font-size:clamp(.78rem,.55vw + .64rem,.95rem);
}

/* tailles mobiles */
@media (max-width:575.98px){
  .brand-logo,.brand-logo.secondary{ height:var(--logo-h-sm) }
  .brand-name{ font-size:0.8rem }
  .brand-sub{ font-size:.92rem }
}

/* très petits téléphones */
@media (max-width:380px){
  .brand-logo,.brand-logo.secondary{ height:var(--logo-h-xs) }
  .brand-name{ font-size:1.02rem }
  .brand-sub{ font-size:.82rem }
  .navbar-brand{ flex-wrap:wrap }   /* autoriser retour à la ligne si besoin */
}

/* ===== Burger + collapse correctement empilés sur mobile ===== */
.navbar-toggler{ margin-left:auto }

/* force la rupture de ligne et largeur 100% du menu déployé */
@media (max-width:991.98px){
  .navbar .container-fluid{ display:flex; align-items:center; flex-wrap:wrap }
  .navbar-brand{ order:1 }
  .navbar-toggler{ order:2 }
  #navMain.navbar-collapse{
    order:3; flex-basis:100%; width:100%;
    margin-top:.5rem;             /* espace sous la marque */
  }
}

/* ===== Navigation ===== */
.navbar-nav{ gap:.75rem; flex-wrap:nowrap }
.navbar-nav .nav-link{ font-weight:700; position:relative; line-height:1.2; padding:.5rem .5rem }

/* soulignement : uniquement les liens “normaux”, pas le dropdown */
.navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after{
  content:""; position:absolute; left:.2rem; right:.2rem; bottom:.25rem;
  height:2px; background:transparent; transition:background .25s ease;
}
.navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle):hover::after,
.navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle).active::after{
  background:var(--blue);
}

/* en menu vertical, un soulignement plus court pour éviter la “barre” sur toute la largeur */
@media (max-width:991.98px){
  .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after{
    left:0; right:auto; width:44px;
  }
}

/* quand le menu est en colonne, on autorise le wrap naturel */
@media (max-width:991.98px){
  .navbar-nav{ flex-wrap:wrap }
  .navbar-nav .nav-link{ white-space:normal }
}

/* RTL dropdown fix (arabe) */
html[dir="rtl"] .dropdown-menu-end{ right:auto; left:0 }

/* ===== Buttons ===== */
.btn-raise{ transition:transform .2s ease, box-shadow .2s ease }
.btn-raise:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(13,71,161,.15) }
.btn-raise:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(13,71,161,.12) }

/* ===== Titles & separators ===== */
.section-title{ border-left:8px solid var(--red); padding-left:12px; margin-bottom:1.25rem }
.section-border-top{ border-top:3px dotted #e2e8f0 }
.section-border{ border-top:3px dotted #e2e8f0; border-bottom:3px dotted #e2e8f0 }
.section-sep{ position:relative }
.section-sep::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:repeating-linear-gradient(90deg,#e2e8f0 0 10px,transparent 10px 20px);
}

/* ===== Media frames ===== */
.media-frame{
  border:2px dotted #cbd5e1; border-radius:16px; overflow:hidden;
  background:#fff; max-width:100%;
}
.media-frame img,.media-frame video{ width:100%; height:100%; object-fit:cover; object-position:center }
.float-tilt{ transition:transform .6s cubic-bezier(.2,.65,.2,1), box-shadow .6s; will-change:transform }
.float-tilt:hover{ transform:translate3d(0,-6px,0) rotate3d(1,1,0,1.5deg); box-shadow:0 20px 40px rgba(13,71,161,.15) }
@media (max-width:575.98px){ .hero .media-frame{ aspect-ratio:16/9 } }

/* ===== Cards ===== */
.grid-cards .card{ border-radius:16px; transition:transform .25s ease, box-shadow .25s ease; overflow:hidden }
.grid-cards .card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(13,71,161,.12) }
.grid-cards .card-body{ padding:14px 16px }
.kit-card img{ transition:transform .5s ease }
.kit-card:hover img{ transform:scale(1.04) }
@media (max-width:991.98px){ .grid-cards .card-body{ padding:12px 14px } }
@media (max-width:575.98px){ .grid-cards .card-body{ padding:12px } }

/* ===== Hero ===== */
.hero{ position:relative; z-index:0 }
.hero .carousel-item{ min-height:420px }
.hero .carousel-item.active,
.hero .carousel-item.carousel-item-start,
.hero .carousel-item.carousel-item-next,
.hero .carousel-item.carousel-item-prev{
  display:flex; align-items:center
}
.carousel-control-prev-icon,.carousel-control-next-icon{
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))
}
@media (max-width:575.98px){ .hero .carousel-item{ min-height:320px } }
.h-anim{ opacity:0; transform:translateY(16px); transition:transform .6s cubic-bezier(.2,.65,.2,1),opacity .6s }
.carousel-item.active .h-anim{ opacity:1; transform:none; transition-delay:var(--d,0s) }

/* ===== Impact counters ===== */
.impact-card{
  padding:18px; border:1px solid #e6ebf5; border-radius:16px; background:#fff;
  box-shadow:0 8px 20px rgba(13,71,161,.06)
}
.impact-card .num{ font-size:clamp(28px,3.4vw,44px); font-weight:800; color:var(--blue); line-height:1 }
.impact-card .label{ margin-top:6px; font-weight:600 }

/* ===== Partner strip ===== */
.brand-strip{
  border:1px solid #e6ebf5; border-radius:16px; background:#fff; padding:8px; overflow:hidden;
  box-shadow:0 8px 20px rgba(13,71,161,.06)
}
.brand-track{ display:flex; gap:16px; align-items:center; flex-wrap:nowrap }
.brand-animate{ animation:scrollX 28s linear infinite; will-change:transform }
.brand-strip:hover .brand-animate{ animation-play-state:paused }
.brand-tile{
  height:56px; min-width:120px; display:flex; align-items:center; justify-content:center;
  padding:6px 10px; border:1px solid #eef2f7; border-radius:12px; background:#fff;
  box-shadow:0 6px 14px rgba(13,71,161,.05)
}
.brand-tile img{ max-height:100%; max-width:100%; object-fit:contain; filter:grayscale(20%); transition:filter .3s ease }
.brand-tile:hover img{ filter:none }
@keyframes scrollX{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ===== Ticker ===== */
.ticker{
  background:var(--red); color:#fff; font-weight:700; letter-spacing:.4px;
  position:relative; overflow:hidden; line-height:1; white-space:nowrap
}
.ticker::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.25),transparent,rgba(255,255,255,.25))
}
.ticker-track{
  display:flex; flex-wrap:nowrap; width:max-content;
  animation:ticker-scroll 36s linear infinite; will-change:transform; transform:translateZ(0)
}
.ticker:hover .ticker-track{ animation-play-state:paused }
.ticker-group{ display:flex; flex-wrap:nowrap; gap:2rem; padding:10px 0; flex:0 0 auto }
.ticker-group span{ display:inline-block; opacity:.95; filter:drop-shadow(0 1px 0 rgba(0,0,0,.15)) }
@keyframes ticker-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .ticker-track{ animation:none } }
@media (max-width:575.98px){
  .ticker-group{ gap:1rem; padding:8px 0 }
  .ticker-group span{ font-size:.9rem }
}

/* ===== Reveal on scroll ===== */
.reveal{
  opacity:0; transform:translate3d(0,22px,0); filter:blur(2px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.2,1),filter .6s ease;
  will-change:opacity,transform,filter
}
.reveal.show{ opacity:1; transform:none; filter:none }
.reveal[data-anim="fade-right"]{ transform:translate3d(24px,0,0) }
.reveal[data-anim="fade-left"]{ transform:translate3d(-24px,0,0) }
.reveal[data-anim="scale-in"]{ transform:scale(.96) }

/* ===== Stagger ===== */
.stagger .stagger-item{
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.65,.2,1)
}
.stagger.show .stagger-item{ opacity:1; transform:none }
.stagger.show .stagger-item:nth-child(1){ transition-delay:.05s }
.stagger.show .stagger-item:nth-child(2){ transition-delay:.12s }
.stagger.show .stagger-item:nth-child(3){ transition-delay:.19s }
.stagger.show .stagger-item:nth-child(4){ transition-delay:.26s }
.stagger.show .stagger-item:nth-child(5){ transition-delay:.33s }
.stagger.show .stagger-item:nth-child(6){ transition-delay:.40s }

/* ===== Floating buttons ===== */
.backtop{
  position:fixed; right:16px; bottom:16px; z-index:999;
  background:var(--blue); color:#fff; border:none; border-radius:50%;
  width:44px; height:44px; display:none; align-items:center; justify-content:center;
  box-shadow:0 10px 20px rgba(13,71,161,.25); cursor:pointer
}
.backtop.show{ display:flex }
.donate-fab{
  position:fixed; right:16px; bottom:72px; z-index:999;
  background:var(--red); color:#fff; border-radius:999px;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 24px rgba(183,28,28,.25); text-decoration:none
}
@media (max-width:575.98px){
  .donate-fab{ width:44px; height:44px; bottom:64px; right:12px }
  .backtop{ width:40px; height:40px; right:12px; bottom:14px }
}
.donate-fab:focus{ outline:3px solid rgba(183,28,28,.35); outline-offset:2px }

/* ===== Panes ===== */
.section-pane{ display:none }
.section-pane.active{ display:block }

/* ===== Marges de page ===== */
.container{ padding-inline:1rem }
@media (min-width:1200px){ .container{ max-width:1140px } }
@media (min-width:1400px){ .container{ max-width:1280px } }

/* ===== Preloader ===== */
html.noscroll, body.noscroll{ overflow:hidden }
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#ffffff,#f2f6ff);
  transition:opacity .4s ease;
}
.preloader.active{ display:flex }
.preloader.fade{ opacity:0; pointer-events:none }
.preloader-card{
  background:#fff; border:2px dashed #cbd5e1; border-radius:20px;
  padding:26px 30px; box-shadow:0 10px 30px rgba(13,71,161,.08);
  text-align:center; max-width:min(560px,92%); width:100%;
}
.preloader-title{
  font-weight:800; letter-spacing:.3px;
  color:var(--blue); font-size:clamp(20px,1.8vw,28px); margin-bottom:10px;
}
.preloader-dots{ display:flex; gap:10px; justify-content:center; margin:6px 0 16px }
.preloader-dots span{
  width:10px; height:10px; border-radius:50%;
  background:var(--blue); animation:preloader-jump 1.2s infinite ease-in-out
}
.preloader-dots span:nth-child(2){ animation-delay:.15s }
.preloader-dots span:nth-child(3){ animation-delay:.3s }
.preloader-dots span:nth-child(4){ animation-delay:.45s }
@keyframes preloader-jump{
  0%,80%,100%{ transform:translateY(0); opacity:.6 }
  40%{ transform:translateY(-8px); opacity:1 }
}
.preloader-logos{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:6px }
.preloader-logo{ height:56px; width:auto; border-radius:12px; object-fit:contain; box-shadow:0 6px 14px rgba(13,71,161,.06) }
@media (max-width:575.98px){ .preloader-logo{ height:48px } }