/* Nouvelle Optique - Design System */
/* Extrait de mockup-accueil-header.html */


/* ================================================================
   RESET & VARIABLES — unified palette
   ================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#1B2A4A;
  --navy-dark:#122036;
  --orange:#F5A623;
  --orange-hover:#e69a1a;
  --green:#2e8b57;
  --green-hover:#257a4a;
  --light-bg:#f0f2f5;
  /* Palette ANO */
  --cat-eau:#80aaf2;        /* Bleu ANO */
  --cat-education:#b1304c;  /* Rouge ANO */
  --cat-spiritualite:#efaf41;   /* Doré ANO */
  --cat-solidarite:#3cb9ab; /* Vert ANO */
  --cat-parrainage:#a37fc5; /* Mauve ANO */
  --radius-card:14px;
  --radius-pill:24px;
  --navy-light:  #212f55;
  --navy-mid:    #1e2e52;
  --navy-card:   #1d2d50;
  --muted:       #a0adc8;
  --muted-light: #c8d0e0;
  --divider:     rgba(255,255,255,0.08);
  --gold-border: rgba(245,166,35,0.2);
  --gold-line:   rgba(245,166,35,0.4);
}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  margin:0;
  background:var(--navy);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:'Roboto',sans-serif}

/* ================================================================
   1. TOP BAR  (bandeau superieur)
   ================================================================ */
.top-bar{
  background:var(--navy-dark);
  color:#fff;
  font-size:0.8rem;
  min-height:34px;
  display:flex;
  align-items:center;
  position:relative;
  z-index:1100;
}
.top-bar .container{display:flex;justify-content:space-between;align-items:center}
.top-bar-left,.top-bar-right{display:flex;align-items:center;gap:6px}

.locale-dropdown{position:relative;display:inline-block}
.locale-btn{
  padding:4px 12px;border:none;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);font-family:'DM Sans',sans-serif;
  font-size:0.78rem;font-weight:600;cursor:pointer;
  border-radius:6px;transition:all .2s;
  min-height:34px;
  display:inline-flex;align-items:center;gap:6px;
}
.locale-btn:hover{background:rgba(255,255,255,.15)}
.locale-btn .arrow{font-size:.6rem;opacity:.6;transition:transform .2s}
.locale-dropdown.open .arrow{transform:rotate(180deg)}
.locale-menu{
  position:absolute;top:calc(100% + 6px);left:0;
  background:var(--navy-dark);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:6px;min-width:140px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  display:none;z-index:2000;
}
.locale-dropdown.open .locale-menu{display:block}
.locale-menu-label{
  font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.35);padding:4px 10px 2px;
}
.locale-menu-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:5px;cursor:pointer;
  color:rgba(255,255,255,.7);font-size:.78rem;transition:all .15s;
  border:none;background:none;width:100%;text-align:left;
  font-family:'DM Sans',sans-serif;
}
.locale-menu-item:hover{background:rgba(255,255,255,.08);color:#fff}
.locale-menu-item.active{color:var(--orange);font-weight:600}
.locale-menu-divider{height:1px;background:rgba(255,255,255,.08);margin:4px 0}

.tb-sep{width:1px;height:16px;background:rgba(255,255,255,.15);margin:0 10px}

.auth-link{
  color:rgba(255,255,255,.75);text-decoration:none;
  font-size:0.78rem;transition:color .2s;
  display:flex;align-items:center;gap:5px;
  min-height:44px;/* touch target */
}
.auth-link:hover{color:#fff}
.auth-link i{font-size:.72rem}
.auth-link-divider{color:rgba(255,255,255,.25);margin:0 8px;font-size:.7rem}

/* user greeting (connected state) */
.user-greeting{color:rgba(255,255,255,.9);font-size:.78rem;display:flex;align-items:center;gap:5px}
.user-greeting .name{font-weight:600;color:#fff}
.user-avatar{
  width:20px;height:20px;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:700;color:#fff;
}

/* ================================================================
   2. MAIN NAV  (logo + hamburger mobile, full links desktop)
   ================================================================ */
.main-nav{
  background:rgba(0,0,0,.3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  height:60px;display:flex;align-items:center;
  position:sticky;top:0;z-index:1050;
  transition:background .3s ease,box-shadow .3s ease;
}
.main-nav.scrolled{background:rgba(0,0,0,.75);box-shadow:0 2px 16px rgba(0,0,0,.3)}
.main-nav .container{display:flex;justify-content:space-between;align-items:center}

.logo{color:#fff;font-size:1.2rem;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo i{color:var(--green)}

/* hamburger */
.hamburger{
  display:flex;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;
  min-width:44px;min-height:44px;align-items:center;justify-content:center;
}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* nav links — hidden mobile, flex desktop */
.nav-links{display:none;gap:18px;align-items:center}
.nav-link-item{
  color:rgba(255,255,255,.8);text-decoration:none;
  font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:500;
  min-height:44px;display:flex;align-items:center;
}
.nav-link-item:hover{color:#fff}

/* Nav dropdown */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-trigger{
  color:rgba(255,255,255,.8);text-decoration:none;
  font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:500;
  min-height:44px;display:flex;align-items:center;gap:4px;cursor:pointer;
  background:none;border:none;
}
.nav-dropdown-trigger:hover{color:#fff}
.nav-dropdown-trigger .dd-arrow{font-size:.6rem;opacity:.6;transition:transform .2s}
.nav-dropdown.open .dd-arrow{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:100%;left:0;
  background:rgba(0,0,0,.85);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);border-radius:10px;
  padding:8px;min-width:200px;
  display:none;z-index:2000;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{
  display:block;padding:10px 14px;border-radius:6px;
  color:rgba(255,255,255,.8);font-size:.85rem;font-weight:500;
  text-decoration:none;transition:all .15s;
  font-family:'DM Sans',sans-serif;
}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,.1);color:#fff}

/* Light mode dropdown */
body.light-mode .nav-dropdown-trigger{color:rgba(255,255,255,.8)}
body.light-mode .nav-dropdown-trigger:hover{color:#fff}
body.light-mode .nav-dropdown-menu{background:rgba(58,90,140,.95);border-color:rgba(255,255,255,.15)}
body.light-mode .nav-dropdown-menu a{color:rgba(255,255,255,.8)}
body.light-mode .nav-dropdown-menu a:hover{background:rgba(255,255,255,.15);color:#fff}

.btn-don-nav{
  background:var(--green);color:#fff;border:none;
  padding:8px 16px;border-radius:6px;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.85rem;
  cursor:pointer;min-height:44px;
}
.btn-don-nav:hover{background:var(--green-hover)}
.cart-link{color:#fff;text-decoration:none;position:relative;font-size:1.1rem;min-height:44px;display:flex;align-items:center}
.cart-badge{
  position:absolute;top:2px;right:-8px;
  background:var(--orange);color:#fff;font-size:.58rem;font-weight:700;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* mobile drawer */
.mobile-nav{
  display:none;position:fixed;top:60px;left:0;right:0;bottom:0;
  background:var(--navy);z-index:1040;
  flex-direction:column;padding:24px 20px;gap:4px;
  overflow-y:auto;
}
.mobile-nav.open{display:flex}
.mobile-nav a,.mobile-nav button{
  display:flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.85);text-decoration:none;
  font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:500;
  padding:14px 12px;border-radius:8px;border:none;background:none;
  min-height:48px;width:100%;text-align:left;cursor:pointer;
}
.mobile-nav a:hover,.mobile-nav button:hover{background:rgba(255,255,255,.08);color:#fff}
.mobile-nav .btn-don-mobile{
  background:var(--green);color:#fff;font-weight:700;
  justify-content:center;border-radius:10px;margin-top:12px;
}

/* ================================================================
   3. HERO SECTION  (slider + quick donation form)
   ================================================================ */
.hero-section{position:relative;overflow:hidden}

/* H1 SEO overlay */
.hero-h1{
  position:absolute;top:0;left:0;right:0;z-index:20;
  text-align:center;padding:18px 16px 14px;
  background:linear-gradient(180deg,rgba(18,42,66,.85) 0%,rgba(18,42,66,0) 100%);
}
.hero-h1 h1{color:#fff;font-size:1.15rem;font-weight:700;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.hero-h1 p{color:rgba(255,255,255,.75);font-family:'DM Sans',sans-serif;font-size:.85rem;margin:4px 0 0}

/* carousel */
.hero-carousel{width:100%}
.hero-slide{display:flex;flex-direction:column;min-height:auto}
.slide-image{
  flex:none;height:280px;
  background-size:cover;background-position:center;position:relative;
}
.slide-image::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(27,42,74,0.7) 0%,rgba(17,29,51,0.5) 100%);z-index:1}.slide-image>*{position:relative;z-index:2}
.slide-title{
  position:absolute;bottom:100px;left:24px;color:#fff;
  font-family:'Roboto',sans-serif;font-size:1.1rem;font-weight:700;
  background:rgba(0,0,0,.45);padding:8px 16px;border-radius:8px;
  backdrop-filter:blur(4px);z-index:5;
}
.slide-eau{background:url(/img/slides/puits.jpg) center/cover no-repeat}
.slide-ramadan{background:url(../media/site/slides/fidya.jpg) center/cover no-repeat}
.slide-education{background:url(/img/slides/ecole.jpg) center/cover no-repeat}
.slide-spiritualite{background:url(/img/slides/mosquee.jpg) center/cover no-repeat}
.slide-solidarite{background:url(/img/slides/aidealapersonne.jpg) center/cover no-repeat}
.slide-parrainage{background:url(/img/slides/orphelins.jpg) center/cover no-repeat}

/* key figures strip */
.key-figures{position:absolute;bottom:0;left:0;right:0;z-index:5;display:flex;background:rgba(18,42,66,.92);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.1)}
.key-figure{flex:1;text-align:center;padding:10px 6px;border-right:1px solid rgba(255,255,255,.08)}
.key-figure:last-child{border-right:none}
.key-figure .number{font-family:'Roboto',sans-serif;font-size:1.1rem;font-weight:800;color:#fff;line-height:1}
.key-figure .number span{color:var(--orange)}
.key-figure .label{font-family:'DM Sans',sans-serif;font-size:.62rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.8px;margin-top:4px;font-weight:600}
.key-figure .icon{font-size:.9rem;color:var(--green);margin-bottom:4px}

/* form column */
.slide-form{
  flex:none;background:var(--navy);
  padding:24px 20px;
  display:flex;flex-direction:column;justify-content:center;
}
.form-header{
  color:#fff;font-family:'Roboto',sans-serif;font-size:1.2rem;font-weight:700;
  margin-bottom:20px;display:flex;align-items:center;gap:10px;
}
.form-header i{color:var(--orange)}
.form-label-don{
  color:rgba(255,255,255,.7);font-size:.82rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;
}

/* action buttons */
.action-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.action-btn{
  padding:8px 14px;border:2px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.8);
  border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.82rem;
  font-weight:600;cursor:pointer;transition:all .25s;white-space:nowrap;
  min-height:44px;
}
.action-btn:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff}
.action-btn.active{border-color:var(--green);background:var(--green);color:#fff;box-shadow:0 2px 8px rgba(46,139,87,.4)}

/* amount buttons */
.amount-buttons{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.amount-btn{
  padding:10px 0;min-width:60px;
  border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.8);border-radius:8px;
  font-family:'DM Sans',sans-serif;font-size:.95rem;font-weight:700;
  cursor:pointer;transition:all .25s;text-align:center;min-height:44px;
}
.amount-btn:hover{border-color:var(--orange);color:#fff}
.amount-btn.active{border-color:var(--orange);background:var(--orange);color:#fff;box-shadow:0 2px 8px rgba(245,166,35,.4)}

.custom-amount{display:none;margin-bottom:12px}
.custom-amount.show{display:flex}
.custom-amount input{
  flex:1;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);
  border-radius:8px;padding:10px 14px;color:#fff;
  font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:700;outline:none;
}
.custom-amount input::placeholder{color:rgba(255,255,255,.4)}
.custom-amount input:focus{border-color:var(--orange)}
.custom-amount .currency{
  background:rgba(255,255,255,.15);border:none;
  border-radius:0 8px 8px 0;padding:10px 14px;color:#fff;font-weight:700;margin-left:-2px;
}

.btn-donate{
  width:100%;padding:14px;background:var(--green);color:#fff;border:none;
  border-radius:10px;font-family:'DM Sans',sans-serif;font-size:1.05rem;
  font-weight:700;cursor:pointer;transition:all .25s;margin-top:8px;
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
}
.btn-donate:hover{background:var(--green-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(46,139,87,.4)}

.no-account-note{text-align:center;color:rgba(255,255,255,.45);font-size:.78rem;margin-top:12px}
.no-account-note i{margin-right:4px}

.quick-donate-toggle{margin:12px 0 8px;display:flex;gap:0;background:rgba(255,255,255,0.06);border-radius:8px;padding:3px}
.quick-donate-toggle .donate-toggle-btn{flex:1;padding:8px;border:none;background:none;color:rgba(255,255,255,0.6);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;border-radius:6px;transition:all 0.2s}
.quick-donate-toggle .donate-toggle-btn.active{background:var(--orange);color:#fff}
.quick-info-bubble{font-size:11px;color:rgba(255,255,255,0.45);margin-top:8px;line-height:1.4;display:flex;align-items:flex-start;gap:6px}
.quick-info-bubble i{font-size:10px;margin-top:2px;flex-shrink:0;color:var(--orange)}

/* carousel controls */
.hero-section .carousel-indicators{display:none}
.hero-section .carousel-indicators [data-bs-target]{width:10px;height:10px;border-radius:50%;margin:0 4px;background:rgba(255,255,255,.4);border:none}
.hero-section .carousel-indicators .active{background:var(--green);width:28px;border-radius:5px}
.carousel-control-prev,.carousel-control-next{opacity:1!important;
  width:44px;height:44px;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.3);border-radius:50%;opacity:0;
  transition:opacity .3s;z-index:15;
}
.hero-section:hover .carousel-control-prev,
.hero-section:hover .carousel-control-next{opacity:1}
.carousel-control-prev{left:16px}
.carousel-control-next{right:16px}

/* autoplay indicator */
.autoplay-status{
  position:absolute;bottom:12px;right:16px;z-index:20;
  background:rgba(0,0,0,.5);color:rgba(255,255,255,.7);
  font-family:'DM Sans',sans-serif;font-size:.7rem;
  padding:3px 10px;border-radius:12px;backdrop-filter:blur(4px);transition:all .3s;
}
.autoplay-status.paused{background:rgba(245,166,35,.7);color:#fff}

/* ================================================================
   4. TICKER BANDEAU (chiffres-cles defilant)
   ================================================================ */
.ticker-wrapper{
  background:var(--navy);overflow:hidden;height:48px;
  display:flex;align-items:center;border-top:none;
}
.ticker-track{display:flex;animation:marquee 35s linear infinite;white-space:nowrap}
.ticker-wrapper:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-item{
  display:flex;align-items:center;gap:8px;padding:0 28px;
  color:rgba(255,255,255,.85);font-family:'DM Sans',sans-serif;
  font-size:.82rem;font-weight:600;white-space:nowrap;
}
.ticker-item .t-icon{
  font-size:.95rem;width:26px;height:26px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:rgba(255,255,255,.2);color:#fff;
}
.ticker-item .t-number{font-family:'Roboto',sans-serif;font-size:1.05rem;font-weight:800;color:#fff}
.ticker-item .t-label{color:rgba(255,255,255,.85);font-weight:500}
.ticker-sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4);flex-shrink:0;margin:0 4px}


/* ================================================================
   WIZARD — Progress Bar, Steps, Cards, FAQ (from Version A)
   ================================================================ */
/* ================================================================
   PROGRESS BAR
   ================================================================ */
.wizard-progress{
  background:var(--navy-card);
  border-bottom:1px solid var(--divider);
  padding:16px 0;
  position:sticky;top:60px;z-index:1040;
}
.progress-steps{
  display:flex;align-items:center;justify-content:center;gap:0;max-width:700px;margin:0 auto;
}
.progress-step{
  display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-pill);
  font-size:.85rem;font-weight:500;color:var(--muted);transition:all .3s;cursor:default;
  white-space:nowrap;
}
.progress-step .step-num{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;background:rgba(255,255,255,.08);color:var(--muted);transition:all .3s;flex-shrink:0;
}
.progress-step .step-label{display:none}
@media(min-width:576px){.progress-step .step-label{display:inline}}
.progress-step.active{color:var(--orange)}
.progress-step.active .step-num{background:var(--orange);color:#fff}
.progress-step.done{color:var(--green)}
.progress-step.done .step-num{background:var(--green);color:#fff}
.progress-connector{
  width:40px;height:2px;background:rgba(255,255,255,.1);flex-shrink:0;transition:background .3s;
}
.progress-connector.done{background:var(--green)}

/* ================================================================
   WIZARD STEPS
   ================================================================ */
.wizard-container{
  max-width:1100px;margin:0 auto;padding:32px 16px 60px;
  position:relative;overflow:hidden;
}
.step{display:none;animation-duration:.4s;animation-fill-mode:both}
.step.active{display:block}

@keyframes slideInLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
.slide-left{animation-name:slideInLeft}
.slide-right{animation-name:slideInRight}

.step-title{
  font-family:'Roboto',sans-serif;font-size:1.6rem;font-weight:700;text-align:center;margin-bottom:8px;
}
.step-subtitle{text-align:center;color:var(--muted);font-size:.95rem;margin-bottom:32px}

.btn-back{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:1px solid rgba(255,255,255,.15);color:var(--muted-light);
  padding:8px 16px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.85rem;
  font-weight:500;cursor:pointer;margin-bottom:24px;transition:all .2s;
}
.btn-back:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.25)}

/* ================================================================
   STEP 1 — ACTION CARDS
   ================================================================ */
.action-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
@media(min-width:600px){.action-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.action-grid{grid-template-columns:repeat(5,1fr)}}

.action-card{
  border-radius:14px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;transition:all 0.25s;
  display:flex;flex-direction:column;
}
.action-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2)}
.action-card-img-wrap{
  position:relative;aspect-ratio:4/3;overflow:hidden;
}
.action-card-img{width:100%;height:100%;object-fit:cover;display:block}
.action-card-icon{
  position:absolute;top:6px;left:6px;
  width:20px;height:20px;border-radius:6px;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  z-index:3;
}
.action-card-icon svg,.action-card-icon img{width:14px;height:14px}
.action-card-icon i{font-size:10px;color:#fff;display:flex;align-items:center;justify-content:center}
.action-card-overlay{
  padding:10px 12px 12px;
}
.action-card-title{font-size:14px;font-weight:700;color:var(--orange);margin-bottom:2px}
.action-card-desc{font-size:12px;color:rgba(255,255,255,0.7)}
.action-card.selected{border-color:var(--orange)}
.action-card.selected::after{
  content:'\2713';position:absolute;top:10px;right:10px;
  width:28px;height:28px;border-radius:50%;
  background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;z-index:3;
}
.action-grid.has-selection .action-card:not(.selected){opacity:0.5}
.action-grid.has-selection .action-card:not(.selected):hover{opacity:0.8}
.action-summary{
  margin-top:20px;padding:16px 20px;border-radius:12px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);
  font-size:14px;line-height:1.6;color:rgba(255,255,255,0.85);
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ================================================================
   STEP 2 — COUNTRY CARDS
   ================================================================ */
.selected-recap{
  display:flex;align-items:center;gap:10px;justify-content:center;
  background:var(--navy-card);padding:10px 18px;border-radius:10px;margin-bottom:24px;font-size:.85rem;
}
.selected-recap svg{width:28px;height:28px;object-fit:contain}
.selected-recap .icon-square svg{width:24px;height:24px}

.country-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
@media(min-width:500px){.country-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.country-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.country-grid{grid-template-columns:repeat(5,1fr)}}

.country-card{
  background:var(--navy-card);border:2px solid transparent;border-radius:var(--radius-card);
  padding:20px 14px;text-align:center;cursor:pointer;transition:all .25s;position:relative;
}
.country-card:hover{background:var(--navy-light);border-color:rgba(255,255,255,.12);transform:translateY(-2px)}
.country-card.selected{border-color:var(--orange);background:var(--navy-light)}
.country-card.selected::after{
  content:'\f058';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;top:8px;right:8px;color:var(--orange);font-size:.9rem;
}
.country-card .flag{font-size:42px;margin-bottom:8px;line-height:1}
.country-card .country-name{font-weight:600;font-size:.85rem}

/* ================================================================
   STEP 3 — PRODUCT CARDS
   ================================================================ */
.product-grid{
  display:grid;grid-template-columns:1fr;gap:16px;max-width:600px;margin:0 auto;
}
@media(min-width:600px){.product-grid{grid-template-columns:repeat(2,1fr);max-width:900px}}
@media(min-width:900px){.product-grid{grid-template-columns:repeat(3,1fr);max-width:1100px}}

.product-card{
  background:var(--navy-card);border-radius:14px;overflow:hidden;
  border:2px solid transparent;cursor:pointer;transition:all 0.25s;
}
.product-card:hover{border-color:rgba(245,166,35,0.3);transform:translateY(-2px)}
.product-card.selected{border-color:var(--orange)}
.product-card-img{width:100%;height:140px;object-fit:cover}
.product-card-body{padding:16px}
.product-card-name{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}
.product-card-detail{font-size:13px;color:var(--muted-light);margin-bottom:12px}
.product-card-amount{font-size:24px;font-weight:900;color:var(--orange);margin-bottom:12px}
.product-card-btn{
  width:100%;padding:10px;background:var(--green);color:#fff;
  border:none;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;
  font-family:'DM Sans',sans-serif;transition:all .2s;
}
.product-card-btn:hover{background:var(--green-hover)}

/* ================================================================
   STEP 4 — DONATE CONFIG
   ================================================================ */
.donate-recap{
  background:var(--navy-card);border-radius:var(--radius-card);padding:20px 24px;
  margin-bottom:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;
  font-size:.9rem;
}
.donate-recap .recap-item{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.06);padding:6px 14px;border-radius:8px;
}
.donate-recap .recap-item i{color:var(--orange);font-size:.8rem}

.donate-card{
  background:var(--navy-card);border-radius:var(--radius-card);padding:32px 32px 80px;
  max-width:500px;margin:0 auto;
}
.donate-toggle{
  display:flex;gap:0;margin-bottom:20px;background:rgba(255,255,255,.06);border-radius:10px;padding:4px;
}
.donate-toggle-btn{
  flex:1;padding:10px;border:none;background:none;color:var(--muted);
  font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;
  cursor:pointer;border-radius:8px;transition:all .2s;
}
.donate-toggle-btn.active{background:var(--orange);color:#fff}

.qty-selector{
  display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:20px;
}
.qty-btn{
  width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.15);
  background:none;color:#fff;font-size:1.2rem;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:all .2s;
}
.qty-btn:hover{border-color:var(--orange);color:var(--orange)}
.qty-value{font-size:1.8rem;font-weight:900;min-width:50px;text-align:center}

.donate-total{
  text-align:center;margin:20px 0;padding:16px;
  background:rgba(255,255,255,.04);border-radius:10px;
}
.donate-total .total-label{font-size:.85rem;color:var(--muted);margin-bottom:4px}
.donate-total .total-amount{font-size:2rem;font-weight:900;color:var(--orange)}
.donate-total .total-freq{font-size:.8rem;color:var(--muted);margin-top:2px}

.btn-validate-wrap{
  position:fixed;bottom:0;left:0;right:0;
  padding:12px 24px 20px;
  background:linear-gradient(to top,var(--navy) 70%,transparent);
  z-index:100;display:none;
}
.btn-validate-wrap .btn-validate{
  max-width:500px;margin:0 auto;display:block;
}
.btn-validate{
  width:100%;padding:16px;background:var(--green);color:#fff;border:none;border-radius:12px;
  font-family:'DM Sans',sans-serif;font-size:1.1rem;font-weight:700;cursor:pointer;
  transition:all .2s;
}
.btn-validate:hover{background:var(--green-hover);transform:translateY(-1px)}

.action-summary{
  max-width:500px;margin:0 auto 20px;padding:16px 20px;border-radius:12px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);
  font-size:14px;line-height:1.6;color:rgba(255,255,255,0.85);
}

.custom-amount-row{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
}
.custom-amount-row input{
  flex:1;padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;color:#fff;font-family:'DM Sans',sans-serif;font-size:1rem;outline:none;
  transition:border-color .2s;
}
.custom-amount-row input:focus{border-color:var(--orange)}
.custom-amount-row input::placeholder{color:var(--muted)}

.unit-price-info{
  text-align:center;font-size:.85rem;color:var(--muted);margin-bottom:16px;
}
.unit-price-info span{color:var(--orange);font-weight:700}

/* Plaque field */
.plaque-field{margin:16px 0}
.plaque-field label{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:8px}
.plaque-input{width:100%;padding:12px 14px;background:rgba(255,255,255,0.06);border:2px solid rgba(255,255,255,0.12);border-radius:10px;color:#fff;font-size:16px;font-family:'DM Sans',sans-serif;outline:none;text-align:center;letter-spacing:1px}
.plaque-input:focus{border-color:var(--orange)}
.plaque-counter{text-align:right;font-size:12px;color:var(--muted);margin-top:4px}

/* Aqiqa form */
.aqiqa-field{margin-bottom:16px}
.aqiqa-field label{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:6px}
.aqiqa-field input{width:100%;padding:12px 14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:10px;color:#fff;font-size:14px;font-family:'DM Sans',sans-serif;outline:none}
.aqiqa-field input:focus{border-color:var(--orange)}
.aqiqa-info-bubble{background:rgba(180,128,104,0.15);border:1px solid rgba(180,128,104,0.3);border-radius:10px;padding:14px 16px;font-size:13px;line-height:1.6;color:var(--muted-light);margin:16px 0;display:flex;gap:10px;align-items:flex-start}
.aqiqa-info-bubble i{color:#b48068;font-size:16px;margin-top:2px;flex-shrink:0}

/* Offrir / certificat */
.offrir-toggle{margin:16px 0;padding:16px;background:rgba(255,255,255,0.04);border-radius:10px;border:1px solid rgba(255,255,255,0.08)}
.offrir-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--muted-light)}
.offrir-checkbox input{width:18px;height:18px;accent-color:var(--orange)}
.offrir-fields{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.offrir-input{width:100%;padding:10px 14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:8px;color:#fff;font-size:14px;font-family:'DM Sans',sans-serif;outline:none}
.offrir-input:focus{border-color:var(--orange)}

/* ================================================================
   CATEGORY DESCRIPTION BLOCK
   ================================================================ */
.category-desc{max-width:1280px;margin:0 auto 32px;padding:0 16px}
.category-desc-inner{display:flex;flex-direction:column;gap:24px;background:var(--navy-card,#1d2d50);border-radius:14px;overflow:hidden}
.category-desc-img{width:100%;height:200px;overflow:hidden}
.category-desc-img img{width:100%;height:100%;object-fit:cover}
.category-desc-text{padding:0 24px 24px}
.category-desc-text h3{font-family:'Roboto',sans-serif;font-size:20px;font-weight:700;color:#fff;margin-bottom:12px}
.category-desc-text p{font-size:15px;line-height:1.7;color:var(--muted-light,#c8d0e0)}
@media(min-width:768px){
  .category-desc-inner{flex-direction:row;align-items:stretch}
  .category-desc-img{width:40%;height:auto;min-height:200px}
  .category-desc-text{flex:1;padding:28px 32px;display:flex;flex-direction:column;justify-content:center}
  .category-desc-text h3{font-size:24px}
}
body.light-mode .category-desc-inner{background:#fff}
body.light-mode .category-desc-text h3{color:#1a1a2e}
body.light-mode .category-desc-text p{color:#555}

/* ================================================================
   FOOTER
   ================================================================ */
.footer-a{background:#111c33;font-family:'DM Sans',sans-serif}
.footer-a .amana-bar{
  background:linear-gradient(90deg,var(--navy-mid),#243570,var(--navy-mid));
  border-bottom:1px solid var(--gold-border);padding:14px 24px;
  display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;
}
.footer-a .amana-diamond{width:6px;height:6px;background:var(--orange);transform:rotate(45deg);flex-shrink:0}
.footer-a .amana-text{font-size:13px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange)}
.footer-a .footer-body{padding:44px 24px 36px;display:flex;flex-direction:column;gap:36px;max-width:420px;margin:0 auto}
.footer-a .logo-col .footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer-a .logo-icon{width:36px;height:36px;background:var(--orange);border-radius:8px;display:flex;align-items:center;justify-content:center}
.footer-a .logo-icon svg{width:20px;height:20px}
.footer-a .logo-name{font-family:'Syne',sans-serif;font-size:15px;font-weight:800;letter-spacing:0.02em}
.footer-a .logo-name span{color:var(--orange)}
.footer-a .tagline{font-size:12px;font-weight:300;color:var(--muted);line-height:1.6;margin-bottom:20px;max-width:240px}
.footer-a .newsletter-form{display:flex;gap:8px}
.footer-a .newsletter-input{flex:1;background:rgba(255,255,255,0.06);border:1px solid var(--divider);border-radius:8px;padding:10px 14px;font-size:13px;color:#fff;font-family:'DM Sans',sans-serif;outline:none;transition:border-color 0.2s}
.footer-a .newsletter-input::placeholder{color:var(--muted)}
.footer-a .newsletter-input:focus{border-color:var(--gold-border)}
.footer-a .newsletter-btn{background:var(--orange);color:#111c33;border:none;border-radius:8px;padding:10px 16px;font-size:13px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;white-space:nowrap;transition:background 0.2s}
.footer-a .newsletter-btn:hover{background:var(--orange-hover)}
.footer-a .col-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--divider)}
.footer-a .col-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-a .col-links a{font-size:14px;font-weight:300;color:var(--muted);transition:color 0.2s;display:flex;align-items:center;gap:6px;text-decoration:none}
.footer-a .col-links a:hover{color:var(--orange)}
.footer-a .col-links a::before{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--orange);opacity:0.4;flex-shrink:0;transition:opacity 0.2s}
.footer-a .col-links a:hover::before{opacity:1}
.footer-a .contact-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.footer-a .contact-icon{width:28px;height:28px;background:rgba(245,166,35,0.1);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.footer-a .contact-icon svg{width:13px;height:13px}
.footer-a .contact-text{font-size:13px;font-weight:300;color:var(--muted);line-height:1.5}
.footer-a .contact-text a{color:var(--orange);text-decoration:none}
.footer-a .contact-text strong{color:var(--muted-light);font-weight:400;display:block;font-size:11px;margin-bottom:2px;letter-spacing:0.06em;text-transform:uppercase}
.footer-a .footer-bottom{border-top:1px solid var(--divider);padding:18px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:420px;margin:0 auto}
.footer-a .socials{display:flex;gap:8px}
.footer-a .social-btn{width:34px;height:34px;background:rgba(255,255,255,0.05);border:1px solid var(--divider);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background 0.2s,border-color 0.2s;text-decoration:none}
.footer-a .social-btn:hover{background:rgba(245,166,35,0.1);border-color:var(--gold-border)}
.footer-a .social-btn svg{width:15px;height:15px;fill:var(--muted);transition:fill 0.2s}
.footer-a .social-btn:hover svg{fill:var(--orange)}
.footer-a .copyright{font-size:11px;font-weight:300;color:var(--muted);opacity:0.5;text-align:center}

@media(min-width:768px){
  .footer-a .footer-body{max-width:1280px;display:grid;grid-template-columns:1.8fr 1fr 1fr 1.4fr;gap:48px;padding:56px 48px 44px}
  .footer-a .footer-bottom{max-width:1280px;flex-direction:row;justify-content:space-between;padding:18px 48px}
}

/* ================================================================
   THEME TOGGLE
   ================================================================ */
.theme-toggle{
  background:rgba(255,255,255,.08);border:none;cursor:pointer;color:rgba(255,255,255,.85);
  font-size:.9rem;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;transition:all .2s;
}
.theme-toggle:hover{background:rgba(255,255,255,.18)}

/* ================================================================
   MODALS
   ================================================================ */
.no-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:10000;display:none;align-items:center;justify-content:center}
.no-modal-overlay.active{display:flex}
.no-modal{background:#263a65;border:1px solid rgba(255,255,255,0.15);border-radius:16px;max-width:480px;width:calc(100% - 32px);max-height:90vh;overflow-y:auto;padding:32px;position:relative;box-shadow:0 16px 48px rgba(0,0,0,0.6)}
.no-modal-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer;width:36px;height:36px}
.no-modal-title{font-family:'Roboto',sans-serif;font-size:24px;font-weight:900;color:#fff;margin-bottom:8px}
.no-modal-subtitle{font-size:14px;color:var(--muted);margin-bottom:24px}
.no-modal-form .form-group{margin-bottom:16px}
.no-modal-form label{display:block;font-size:14px;font-weight:500;color:var(--muted-light);margin-bottom:6px}
.no-modal-form input,.no-modal-form select{width:100%;padding:12px 14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:10px;color:#fff;font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color 0.2s}
.no-modal-form input:focus{border-color:var(--orange)}
.no-modal-form input::placeholder{color:var(--muted)}
.no-modal-form .form-error{font-size:12px;color:#e74c3c;margin-top:4px;display:none}
.no-modal-form .form-group.error input{border-color:#e74c3c}
.no-modal-form .form-group.error .form-error{display:block}
.type-toggle{display:flex;gap:0;margin-bottom:16px;background:rgba(255,255,255,0.06);border-radius:10px;padding:4px}
.type-toggle-btn{flex:1;padding:10px;border:none;background:none;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;border-radius:8px;transition:all 0.2s}
.type-toggle-btn.active{background:var(--orange);color:#fff}
.entreprise-fields{display:none}
.entreprise-fields.show{display:block}
.form-checkbox{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.form-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:var(--orange);flex-shrink:0;margin-top:2px}
.form-checkbox label{font-size:13px;color:var(--muted-light);line-height:1.4;cursor:pointer}
.form-checkbox a{color:var(--orange)}
.btn-modal-primary{width:100%;padding:14px;background:var(--green);color:#fff;border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.2s;margin-top:8px}
.btn-modal-primary:hover{background:var(--green-hover);transform:translateY(-1px)}
.no-modal-link{display:block;text-align:center;margin-top:16px;font-size:14px;color:var(--muted);cursor:pointer;border:none;background:none}
.no-modal-link span{color:var(--orange);font-weight:600}
.password-strength{height:4px;border-radius:2px;background:rgba(255,255,255,0.08);margin-top:6px;overflow:hidden}
.password-strength-bar{height:100%;border-radius:2px;transition:width 0.3s;width:0%}
.password-strength-bar.weak{width:33%;background:#e74c3c}
.password-strength-bar.medium{width:66%;background:var(--orange)}
.password-strength-bar.strong{width:100%;background:var(--green)}
.no-modal-success{display:none;text-align:center;padding:20px 0}
.no-modal-success.show{display:block}
.no-modal-success .success-icon{font-size:48px;color:var(--green);margin-bottom:16px}
.no-modal-success .success-text{font-size:16px;color:#fff;margin-bottom:8px}
.no-modal-success .success-sub{font-size:14px;color:var(--muted)}

/* ================================================================
   LIGHT MODE
   ================================================================ */
body.light-mode{
  --light-bg:#e0d9bc;
  background:#e0d9bc;
  color:#1a1a2e;
}
body.light-mode .top-bar{background:#3a5a8c}
body.light-mode .main-nav{background:rgba(58,90,140,.9);backdrop-filter:blur(10px)}
body.light-mode .main-nav.scrolled{background:rgba(58,90,140,.97)}
body.light-mode .mobile-nav{background:#3a5a8c}
body.light-mode .locale-btn{background:rgba(255,255,255,.12)}
body.light-mode .locale-btn:hover{background:rgba(255,255,255,.22)}
body.light-mode .locale-menu{background:#3a5a8c;border-color:rgba(255,255,255,.15)}
body.light-mode .theme-toggle{background:rgba(255,255,255,.12)}
body.light-mode .theme-toggle:hover{background:rgba(255,255,255,.25)}

/* wizard light */
body.light-mode .wizard-progress{background:#f2f0e4;border-bottom-color:rgba(0,0,0,.08)}
body.light-mode .progress-step{color:#999;background:#e0d9bc}
body.light-mode .progress-step .step-num{background:rgba(0,0,0,.06);color:#999}
body.light-mode .progress-step.active{color:var(--orange)}
body.light-mode .progress-step.active .step-num{background:var(--orange);color:#fff}
body.light-mode .progress-step.done{color:var(--green)}
body.light-mode .progress-step.done .step-num{background:var(--green);color:#fff}
body.light-mode .progress-connector{background:rgba(0,0,0,.08)}
body.light-mode .progress-connector.done{background:var(--green)}

body.light-mode .step-title{color:#1a1a2e}
body.light-mode .step-subtitle{color:#666}
body.light-mode .btn-back{border-color:rgba(0,0,0,.12);color:#555}
body.light-mode .btn-back:hover{background:rgba(0,0,0,.04);color:#1a1a2e;border-color:rgba(0,0,0,.2)}

body.light-mode .action-card{border-color:transparent}
body.light-mode .action-card:hover{border-color:rgba(0,0,0,.15)}
body.light-mode .action-card.selected{border-color:var(--orange)}

body.light-mode .country-card{background:#fff;border-color:transparent}
body.light-mode .country-card:hover{background:#f9f9f9;border-color:rgba(0,0,0,.08)}
body.light-mode .country-card.selected{border-color:var(--orange);background:#fff8ed}

body.light-mode .product-card{background:#fff}
body.light-mode .product-card:hover{border-color:rgba(245,166,35,0.3)}
body.light-mode .product-card.selected{border-color:var(--orange)}
body.light-mode .product-card-name{color:#1a1a2e}
body.light-mode .product-card-detail{color:#555}

body.light-mode .selected-recap{background:#fff;color:#1a1a2e}
body.light-mode .donate-recap{background:#fff;color:#1a1a2e}
body.light-mode .donate-recap .recap-item{background:rgba(0,0,0,.04)}
body.light-mode .action-summary{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.08);color:#555}
body.light-mode .btn-validate-wrap{background:linear-gradient(to top,#e0d9bc 60%,transparent)}
body.light-mode .donate-card{background:#fff;color:#1a1a2e}
body.light-mode .donate-toggle{background:rgba(0,0,0,.04)}
body.light-mode .donate-toggle-btn{color:#888}
body.light-mode .donate-toggle-btn.active{background:var(--orange);color:#fff}
body.light-mode .qty-btn{border-color:rgba(0,0,0,.15);color:#1a1a2e}
body.light-mode .qty-btn:hover{border-color:var(--orange);color:var(--orange)}
body.light-mode .qty-value{color:#1a1a2e}
body.light-mode .donate-total{background:rgba(0,0,0,.03)}
body.light-mode .donate-total .total-label{color:#888}
body.light-mode .donate-total .total-freq{color:#888}
body.light-mode .unit-price-info{color:#888}
body.light-mode .custom-amount-row input{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:#1a1a2e}
body.light-mode .custom-amount-row input::placeholder{color:#999}
body.light-mode .custom-amount-row input:focus{border-color:var(--orange)}
body.light-mode .plaque-field label{color:#1a1a2e}
body.light-mode .plaque-input{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#333}
body.light-mode .aqiqa-field label{color:#1a1a2e}
body.light-mode .aqiqa-field input{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#333}
body.light-mode .aqiqa-info-bubble{background:rgba(180,128,104,0.1);color:#555}
body.light-mode .offrir-toggle{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.06)}
body.light-mode .offrir-checkbox{color:#555}
body.light-mode .offrir-input{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#333}

/* footer light */
body.light-mode .footer-a{background:#e0d9bc}
body.light-mode .footer-a .amana-bar{background:linear-gradient(90deg,#d4cdb0,#c8c1a4,#d4cdb0);border-bottom-color:rgba(0,0,0,0.08)}
body.light-mode .footer-a .amana-text{color:#8b6914}
body.light-mode .footer-a .amana-diamond{background:#8b6914}
body.light-mode .footer-a .col-title{color:#2c3e50;border-bottom-color:rgba(0,0,0,0.1)}
body.light-mode .footer-a .col-links a{color:#555}
body.light-mode .footer-a .col-links a:hover{color:var(--orange)}
body.light-mode .footer-a .col-links a::before{background:var(--orange)}
body.light-mode .footer-a .tagline{color:#666}
body.light-mode .footer-a .contact-text{color:#555}
body.light-mode .footer-a .contact-text strong{color:#333}
body.light-mode .footer-a .contact-icon{background:rgba(245,166,35,0.15)}
body.light-mode .footer-a .newsletter-input{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.12);color:#333}
body.light-mode .footer-a .newsletter-input::placeholder{color:#999}
body.light-mode .footer-a .footer-bottom{border-top-color:rgba(0,0,0,0.08)}
body.light-mode .footer-a .social-btn{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1)}
body.light-mode .footer-a .social-btn:hover{background:rgba(245,166,35,0.12);border-color:rgba(245,166,35,0.3)}
body.light-mode .footer-a .social-btn svg{fill:#555}
body.light-mode .footer-a .social-btn:hover svg{fill:var(--orange)}
body.light-mode .footer-a .copyright{color:#999}
body.light-mode .footer-a .logo-name{color:#1a1a2e}

body.light-mode .no-modal{background:#fff}
body.light-mode .no-modal-title{color:#1a1a2e}
body.light-mode .no-modal-subtitle{color:#666}
body.light-mode .no-modal-form label{color:#333}
body.light-mode .no-modal-form input,body.light-mode .no-modal-form select{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#333}
body.light-mode .no-modal-form input::placeholder{color:#999}
body.light-mode .no-modal-form input:focus{border-color:var(--orange)}
body.light-mode .type-toggle{background:rgba(0,0,0,0.04)}
body.light-mode .type-toggle-btn{color:#666}
body.light-mode .type-toggle-btn.active{background:var(--orange);color:#fff}
body.light-mode .form-checkbox label{color:#555}
body.light-mode .no-modal-link{color:#666}
body.light-mode .no-modal-success .success-text{color:#1a1a2e}
body.light-mode .no-modal-success .success-sub{color:#666}
body.light-mode .password-strength{background:rgba(0,0,0,0.06)}
body.light-mode .no-modal-close{color:#999}

/* demo panel — styles definis plus bas dans le second bloc CSS */

@media(min-width:992px){
  .hamburger{display:none}
  .theme-toggle-mobile{display:none}
  .nav-links{display:flex}
}

.flag-img{width:24px;height:18px;object-fit:cover;border-radius:2px;vertical-align:middle;display:inline-block}
.flag-heart{width:40px;height:40px;object-fit:contain;vertical-align:middle;display:inline-block}
.country-flag .flag-img{width:32px;height:24px;border-radius:3px}
.country-flag .flag-heart{width:48px;height:48px}

/* FAQ Accordion */
.faq-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--orange);font-size:14px;font-weight:600;
  text-decoration:none;margin:0 auto 24px;
  padding:8px 16px;border-radius:8px;
  background:rgba(245,166,35,0.08);
  transition:background 0.2s;
  max-width:700px;
}
.faq-link:hover{background:rgba(245,166,35,0.15)}
body.light-mode .faq-link{background:rgba(245,166,35,0.1)}
body.light-mode .faq-link:hover{background:rgba(245,166,35,0.18)}
.action-faq{max-width:700px;margin:32px auto 0}
.faq-section-title{font-family:'Roboto',sans-serif;font-size:16px;font-weight:700;color:var(--orange);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.faq-item{background:var(--navy-card,#1d2d50);border-radius:10px;margin-bottom:8px;overflow:hidden;border:1px solid rgba(255,255,255,0.06)}
.faq-question{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;cursor:pointer;font-size:14px;font-weight:600;color:#fff;transition:background 0.2s}
.faq-question:hover{background:rgba(255,255,255,0.03)}
.faq-chevron{color:var(--muted);font-size:12px;transition:transform 0.2s}
.faq-item.open .faq-chevron{transform:rotate(180deg);color:var(--orange)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease}
.faq-item.open .faq-answer{max-height:300px}
.faq-answer-inner{padding:0 18px 14px;font-size:14px;line-height:1.7;color:var(--muted-light,#c8d0e0)}
.wizard-faq-section{padding:48px 16px;border-top:1px solid rgba(255,255,255,0.06);margin-top:32px}
.wizard-faq-section .container{max-width:800px;margin:0 auto}
.wizard-faq-link{display:flex;justify-content:center;margin:16px auto 24px}
body.light-mode .wizard-faq-section{border-top-color:rgba(0,0,0,0.08)}

/* FAQ Light mode */
body.light-mode .faq-item{background:#fff;border-color:rgba(0,0,0,0.06)}
body.light-mode .faq-question{color:#1a1a2e}
body.light-mode .faq-question:hover{background:rgba(0,0,0,0.02)}
body.light-mode .faq-answer-inner{color:#555}

/* ================================================================
   SECTION HEADER (shared)
   ================================================================ */
.section-header{text-align:center;margin-bottom:28px}
.section-header .eyebrow{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}
.section-header h2{font-family:'Roboto',sans-serif;font-weight:900;font-size:28px;line-height:1.15;text-transform:uppercase;color:#fff}
.section-header h2 span{color:var(--orange)}

/* ================================================================
   SECTION INNER (shared container)
   ================================================================ */
.section-inner{max-width:1280px;margin:0 auto}

/* ================================================================
   6. COLLECTES PHARES SECTION
   ================================================================ */
.section-collectes{background:var(--navy);padding:24px 16px 56px}
.section-divider{max-width:1200px;margin:0 auto;border:0;border-top:1px solid rgba(255,255,255,.08)}

.scroll-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.scroll-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:all .3s ease}
.scroll-dot.active{background:var(--orange);width:24px;border-radius:4px}
.section-carousel-nav{display:none}

.collectes-carousel{min-height:300px;
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 4px 16px;
  flex-wrap:nowrap;
}
.collectes-carousel::-webkit-scrollbar{display:none}

/* Mobile: 2 cards stacked per "page", carousel horizontal */
.collecte-pair{
  flex:0 0 calc(100vw - 56px);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:10px;
  border-radius:var(--radius-card);overflow:hidden;
}

/* COLLECTE CARD */
.collecte-card{
  flex:1;
  border-radius:var(--radius-card);overflow:hidden;position:relative;
  cursor:pointer;transition:transform .3s ease;
  display:flex;flex-direction:column;background:var(--navy-card);
}
.collecte-card .card-img{height:55%;overflow:hidden;position:relative}
.collecte-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.collecte-card:hover img{transform:scale(1.06)}
.collecte-card .overlay{
  flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px 16px;z-index:2;
}
.collecte-card .card-title{
  font-family:'Roboto',sans-serif;font-weight:700;font-size:16px;line-height:1.25;
  text-transform:uppercase;color:#fff;margin-bottom:14px;
}
.collecte-card .progress-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.collecte-card .progress-amounts{font-family:'DM Sans',sans-serif;font-size:12px;color:rgba(255,255,255,.7)}
.collecte-card .progress-amounts strong{color:#fff;font-weight:600}
.collecte-card .pct-badge{
  background:var(--orange);color:#fff;font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px;
}
.collecte-card .progress-bar-track{width:100%;height:5px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden;margin-bottom:12px}
.collecte-card .progress-bar-fill{height:100%;background:var(--orange);border-radius:3px;transition:width .6s ease}
.collecte-card .card-cta{
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
  color:var(--orange);text-decoration:none;display:inline-flex;align-items:center;gap:4px;
}
.collecte-card:hover .card-cta{opacity:1;transform:translateY(0)}
.collecte-card .card-cta:hover{text-decoration:underline}

/* ============================================================
   SECTION RÉASSURANCE A — Piliers verticaux (cards avec icône)
   ============================================================ */

.section-reassurance-a {
  background: var(--navy);
  padding: 48px 20px 52px;
}

.section-reassurance-a .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.section-reassurance-a .eyebrow-line {
  width: 28px;
  height: 2px;
  background: var(--orange);
  flex-shrink: 0;
}
.section-reassurance-a .eyebrow-text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}

.section-reassurance-a .heading {
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 16px;
  color: var(--white);
}
.section-reassurance-a .heading .heading-orange {
  color: var(--orange);
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}

.section-reassurance-a .heading-sub {
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  color: var(--muted-light);
  margin-bottom: 16px;
  margin-top: -4px;
}

.section-reassurance-a .subtext {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted-light);
  margin-bottom: 32px;
}

.section-reassurance-a .piliers {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.section-reassurance-a .pilier {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--navy-light);
  border-left: 3px solid transparent;
  text-decoration: none;
  color: var(--white);
  transition: background 0.25s, border-color 0.25s;
  position: relative;
  overflow: hidden;
}
.section-reassurance-a .pilier:first-child { border-radius: 12px 12px 0 0; }
.section-reassurance-a .pilier:last-child  { border-radius: 0 0 12px 12px; }
.section-reassurance-a .pilier::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(245,166,35,0.06), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}
.section-reassurance-a .pilier:hover { border-left-color: var(--orange); }
.section-reassurance-a .pilier:hover::after { opacity: 1; }

.section-reassurance-a .pilier-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(245,166,35,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s;
}
.section-reassurance-a .pilier:hover .pilier-icon { background: rgba(245,166,35,0.22); }
.section-reassurance-a .pilier-icon svg { width: 18px; height: 18px; }

.section-reassurance-a .pilier-body { flex: 1; }
.section-reassurance-a .pilier-title { font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.section-reassurance-a .pilier-desc  { font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.5; }

.section-reassurance-a .pilier-arrow {
  color: var(--orange);
  opacity: 0.5;
  flex-shrink: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.section-reassurance-a .pilier:hover .pilier-arrow { opacity: 1; transform: translateX(3px); }

@media (min-width: 768px) {
  .section-reassurance-a { padding: 64px 48px; }
  .section-reassurance-a .inner { max-width: 1280px; margin: 0 auto; }
  .section-reassurance-a .heading { font-size: 36px; }
  .section-reassurance-a .subtext { font-size: 15px; max-width: 520px; }
  .section-reassurance-a .piliers { flex-direction: row; gap: 16px; }
  .section-reassurance-a .pilier {
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    padding: 28px 24px;
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: 16px !important;
  }
  .section-reassurance-a .pilier:hover { border-bottom-color: var(--orange); border-left-color: transparent; }
  .section-reassurance-a .pilier::after { background: linear-gradient(180deg, rgba(245,166,35,0.06), transparent); }
  .section-reassurance-a .pilier-icon { margin-bottom: 12px; }
  .section-reassurance-a .pilier-title { font-size: 17px; margin-bottom: 6px; }
  .section-reassurance-a .pilier-arrow { margin-top: 16px; }
}

/* ============================================================
   SECTION CHIFFRES CLÉS A — Big numbers éditoriaux
   ============================================================ */

.section-chiffres-a {
  background: var(--navy);
  padding: 52px 24px 56px;
}
.section-chiffres-a .inner {
  max-width: 600px;
  margin: 0 auto;
}

.section-chiffres-a .section-header {
  margin-bottom: 40px;
}
.section-chiffres-a .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.section-chiffres-a .eyebrow-line {
  width: 24px; height: 2px;
  background: var(--orange);
  flex-shrink: 0;
}
.section-chiffres-a .eyebrow-text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.section-chiffres-a .title {
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
}
.section-chiffres-a .title span { color: var(--orange); }

/* Carousel container */
.section-chiffres-a .carousel-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
}
.section-chiffres-a .carousel-viewport::-webkit-scrollbar { display: none; }

.section-chiffres-a .carousel-track {
  display: flex;
  width: 300%; /* 3 pages */
}

.section-chiffres-a .carousel-page {
  flex: 0 0 calc(100% / 3);
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 0 4px;
  box-sizing: border-box;
}

/* Carousel navigation arrows (desktop) */
.section-chiffres-a .carousel-wrapper {
  position: relative;
}
.section-chiffres-a .carousel-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.2s;
}
.section-chiffres-a .carousel-arrow:hover { background: rgba(0,0,0,0.7); }
.section-chiffres-a .carousel-arrow.arrow-left { left: -8px; }
.section-chiffres-a .carousel-arrow.arrow-right { right: -8px; }

.section-chiffres-a .stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  flex-shrink: 0;
}
.section-chiffres-a .stat-icon svg {
  width: 48px;
  height: 48px;
}

/* Icônes colorées par stat */
.section-chiffres-a .stat-eau .stat-icon svg, .section-chiffres-a .stat-eau .stat-icon svg path { fill: #80aaf2; }
.section-chiffres-a .stat-eau .stat-icon svg [style*="stroke"] { stroke: #80aaf2 !important; }
.section-chiffres-a .stat-ecoles .stat-icon svg, .section-chiffres-a .stat-ecoles .stat-icon svg path { fill: #3cb9ab; }
.section-chiffres-a .stat-ecoles .stat-icon svg [style*="stroke"] { stroke: #3cb9ab !important; }
.section-chiffres-a .stat-orphelins .stat-icon svg, .section-chiffres-a .stat-orphelins .stat-icon svg path { fill: #890471; }
.section-chiffres-a .stat-orphelins .stat-icon svg [style*="stroke"] { stroke: #890471 !important; }
.section-chiffres-a .stat-orphelinats .stat-icon svg, .section-chiffres-a .stat-orphelinats .stat-icon svg path { fill: #f87e01; }
.section-chiffres-a .stat-orphelinats .stat-icon svg [style*="stroke"] { stroke: #f87e01 !important; }
.section-chiffres-a .stat-corans .stat-icon svg, .section-chiffres-a .stat-corans .stat-icon svg path { fill: #ca1206; }
.section-chiffres-a .stat-corans .stat-icon svg [style*="stroke"] { stroke: #ca1206 !important; }
.section-chiffres-a .stat-mosquees .stat-icon svg, .section-chiffres-a .stat-mosquees .stat-icon svg path { fill: #efaf41; }
.section-chiffres-a .stat-mosquees .stat-icon svg [style*="stroke"] { stroke: #efaf41 !important; }
.section-chiffres-a .stat-arbres .stat-icon svg, .section-chiffres-a .stat-arbres .stat-icon svg path { fill: #025714; }
.section-chiffres-a .stat-arbres .stat-icon svg [style*="stroke"] { stroke: #025714 !important; }
.section-chiffres-a .stat-maisons .stat-icon svg, .section-chiffres-a .stat-maisons .stat-icon svg path { fill: #a37fc5; }
.section-chiffres-a .stat-maisons .stat-icon svg [style*="stroke"] { stroke: #a37fc5 !important; }
.section-chiffres-a .stat-moutons .stat-icon svg, .section-chiffres-a .stat-moutons .stat-icon svg path { fill: #b48068; }
.section-chiffres-a .stat-moutons .stat-icon svg [style*="stroke"] { stroke: #b48068 !important; }
.section-chiffres-a .stat-kits .stat-icon svg, .section-chiffres-a .stat-kits .stat-icon svg path { fill: #b1304c; }
.section-chiffres-a .stat-kits .stat-icon svg [style*="stroke"] { stroke: #b1304c !important; }
.section-chiffres-a .stat-repas .stat-icon svg, .section-chiffres-a .stat-repas .stat-icon svg path { fill: #35619e; }
.section-chiffres-a .stat-repas .stat-icon svg [style*="stroke"] { stroke: #35619e !important; }

.section-chiffres-a .stat-item {
  background: var(--navy-card);
  padding: 22px 14px 18px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s, border-color 0.3s;
  border-radius: 14px;
  text-align: center;
  border: 2px solid transparent;
}
.section-chiffres-a .stat-item:hover {
  border-color: rgba(245,166,35,0.4);
}

.section-chiffres-a .stat-value {
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.section-chiffres-a .stat-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-light);
  line-height: 1.4;
  margin-bottom: 4px;
}
.section-chiffres-a .stat-sublabel {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.6;
  font-style: italic;
}

/* Stat color classes */
.section-chiffres-a .stat-eau .stat-value { color: #80aaf2; }
.section-chiffres-a .stat-ecoles .stat-value { color: #3cb9ab; }
.section-chiffres-a .stat-orphelins .stat-value { color: #890471; }
.section-chiffres-a .stat-orphelinats .stat-value { color: #f87e01; }
.section-chiffres-a .stat-corans .stat-value { color: #ca1206; }
.section-chiffres-a .stat-mosquees .stat-value { color: #efaf41; }
.section-chiffres-a .stat-arbres .stat-value { color: #025714; }
.section-chiffres-a .stat-maisons .stat-value { color: #a37fc5; }
.section-chiffres-a .stat-moutons .stat-value { color: #b48068; }
.section-chiffres-a .stat-kits .stat-value { color: #b1304c; }
.section-chiffres-a .stat-donateurs { background: #325f96; }
.section-chiffres-a .stat-donateurs .stat-value { color: #f4a00c; }
.section-chiffres-a .stat-donateurs .stat-label { color: rgba(255,255,255,0.9); }
.section-chiffres-a .stat-donateurs .stat-sublabel { color: rgba(255,255,255,0.7); }
.section-chiffres-a .stat-donateurs .stat-icon { background: none; }
.section-chiffres-a .stat-donateurs .stat-icon svg,
.section-chiffres-a .stat-donateurs .stat-icon svg path { fill: #fff; }
.section-chiffres-a .stat-donateurs .stat-icon svg [style*="stroke"] { stroke: #fff !important; }
.section-chiffres-a .stat-repas .stat-value { color: #35619e; }

/* Carousel dots */
.section-chiffres-a .chiffres-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.section-chiffres-a .chiffres-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}
.section-chiffres-a .chiffres-dot.active {
  background: var(--orange);
  width: 24px;
  border-radius: 4px;
}

/* Featured (beneficiaires) — outside carousel */
.section-chiffres-a .featured-block {
  background: #325f96;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  margin-top: 16px;
  border: 2px solid rgba(50,95,150,0.6);
  transition: border-color 0.3s;
}
.section-chiffres-a .featured-block:hover {
  border-color: rgba(245,166,35,0.5);
}
.section-chiffres-a .featured-block .stat-label { color: rgba(255,255,255,0.9); }
.section-chiffres-a .featured-block .stat-sublabel { color: rgba(255,255,255,0.7); }
.section-chiffres-a .featured-block .stat-value {
  font-size: 36px;
  flex-shrink: 0;
}
.section-chiffres-a .featured-body {}
.section-chiffres-a .featured-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(245,166,35,0.12);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

@media (min-width: 768px) {
  .section-chiffres-a { padding: 72px 48px; }
  .section-chiffres-a .inner { max-width: 900px; }
  .section-chiffres-a .title { font-size: 36px; }
  .section-chiffres-a .section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
  }
  .section-chiffres-a .section-header-text { max-width: 400px; }
  .section-chiffres-a .stat-value { font-size: 36px; }
  .section-chiffres-a .stat-item { padding: 28px 20px 24px; }
  .section-chiffres-a .carousel-page { gap: 14px; padding: 0 6px; }
  .section-chiffres-a .featured-block .stat-value { font-size: 44px; }
  /* Show arrows on desktop hover */
  .section-chiffres-a .carousel-wrapper:hover .carousel-arrow {
    display: flex;
  }
}

/* ============================================================
   FOOTER A — Structuré : bandeau Amana + 4 colonnes
   ============================================================ */

.footer-a {
  background: #111c33;
  font-family: 'DM Sans', sans-serif;
}

.footer-a .amana-bar {
  background: linear-gradient(90deg, var(--navy-mid), #243570, var(--navy-mid));
  border-bottom: 1px solid var(--gold-border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.footer-a .amana-diamond {
  width: 6px; height: 6px;
  background: var(--orange);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.footer-a .amana-text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}

.footer-a .footer-body {
  padding: 44px 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 420px;
  margin: 0 auto;
}

.footer-a .logo-col .footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.footer-a .logo-icon {
  width: 36px; height: 36px;
  background: var(--orange);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-a .logo-icon svg { width: 20px; height: 20px; }
.footer-a .logo-name {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.footer-a .logo-name span { color: var(--orange); }

.footer-a .tagline {
  font-size: 12px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 240px;
}

.footer-a .newsletter-form {
  display: flex;
  gap: 8px;
}
.footer-a .newsletter-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.footer-a .newsletter-input::placeholder { color: var(--muted); }
.footer-a .newsletter-input:focus { border-color: var(--gold-border); }
.footer-a .newsletter-btn {
  background: var(--orange);
  color: #111c33;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.footer-a .newsletter-btn:hover { background: var(--orange-hover); }

.footer-a .col-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--divider);
}
.footer-a .col-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-a .col-links a {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.footer-a .col-links a:hover { color: var(--orange); }
.footer-a .col-links a::before {
  content: '';
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.4;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.footer-a .col-links a:hover::before { opacity: 1; }

.footer-a .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.footer-a .contact-icon {
  width: 28px; height: 28px;
  background: rgba(245,166,35,0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer-a .contact-icon svg { width: 13px; height: 13px; }
.footer-a .contact-text { font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.5; }
.footer-a .contact-text a { color: var(--orange); text-decoration: none; }
.footer-a .contact-text strong { color: var(--muted-light); font-weight: 400; display: block; font-size: 11px; margin-bottom: 2px; letter-spacing: 0.06em; text-transform: uppercase; }

.footer-a .footer-bottom {
  border-top: 1px solid var(--divider);
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
}
.footer-a .socials {
  display: flex;
  gap: 8px;
}
.footer-a .social-btn {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--divider);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  text-decoration: none;
}
.footer-a .social-btn:hover { background: rgba(245,166,35,0.1); border-color: var(--gold-border); }
.footer-a .social-btn svg { width: 15px; height: 15px; fill: var(--muted); transition: fill 0.2s; }
.footer-a .social-btn:hover svg { fill: var(--orange); }
.footer-a .copyright {
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  opacity: 0.5;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-a .footer-body {
    max-width: 1280px;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
    gap: 48px;
    padding: 56px 48px 44px;
  }
  .footer-a .footer-bottom {
    max-width: 1280px;
    flex-direction: row;
    justify-content: space-between;
    padding: 18px 48px;
  }
}

/* ================================================================
   MODALS
   ================================================================ */
.no-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:10000;display:none;align-items:center;justify-content:center}
.no-modal-overlay.active{display:flex}
.no-modal{background:#263a65;border:1px solid rgba(255,255,255,0.15);border-radius:16px;max-width:480px;width:calc(100% - 32px);max-height:90vh;overflow-y:auto;padding:32px;position:relative;box-shadow:0 16px 48px rgba(0,0,0,0.6)}
.no-modal-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer;width:36px;height:36px}
.no-modal-title{font-family:'Roboto',sans-serif;font-size:24px;font-weight:900;color:#fff;margin-bottom:8px}
.no-modal-subtitle{font-size:14px;color:var(--muted);margin-bottom:24px}

.no-modal-form .form-group{margin-bottom:16px}
.no-modal-form label{display:block;font-size:14px;font-weight:500;color:var(--muted-light);margin-bottom:6px}
.no-modal-form input,.no-modal-form select{width:100%;padding:12px 14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:10px;color:#fff;font-family:'DM Sans',sans-serif;font-size:14px;outline:none;transition:border-color 0.2s}
.no-modal-form input:focus{border-color:var(--orange)}
.no-modal-form input::placeholder{color:var(--muted)}
.no-modal-form .form-error{font-size:12px;color:#e74c3c;margin-top:4px;display:none}
.no-modal-form .form-group.error input{border-color:#e74c3c}
.no-modal-form .form-group.error .form-error{display:block}

.type-toggle{display:flex;gap:0;margin-bottom:16px;background:rgba(255,255,255,0.06);border-radius:10px;padding:4px}
.type-toggle-btn{flex:1;padding:10px;border:none;background:none;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;border-radius:8px;transition:all 0.2s}
.type-toggle-btn.active{background:var(--orange);color:#fff}

.entreprise-fields{display:none}
.entreprise-fields.show{display:block}

.form-checkbox{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.form-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:var(--orange);flex-shrink:0;margin-top:2px}
.form-checkbox label{font-size:13px;color:var(--muted-light);line-height:1.4;cursor:pointer}
.form-checkbox a{color:var(--orange)}

.btn-modal-primary{width:100%;padding:14px;background:var(--green);color:#fff;border:none;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.2s;margin-top:8px}
.btn-modal-primary:hover{background:var(--green-hover);transform:translateY(-1px)}
.no-modal-link{display:block;text-align:center;margin-top:16px;font-size:14px;color:var(--muted);cursor:pointer;border:none;background:none}
.no-modal-link span{color:var(--orange);font-weight:600}

.password-strength{height:4px;border-radius:2px;background:rgba(255,255,255,0.08);margin-top:6px;overflow:hidden}
.password-strength-bar{height:100%;border-radius:2px;transition:width 0.3s;width:0%}
.password-strength-bar.weak{width:33%;background:#e74c3c}
.password-strength-bar.medium{width:66%;background:var(--orange)}
.password-strength-bar.strong{width:100%;background:var(--green)}

.no-modal-success{display:none;text-align:center;padding:20px 0}
.no-modal-success.show{display:block}
.no-modal-success .success-icon{font-size:48px;color:var(--green);margin-bottom:16px}
.no-modal-success .success-text{font-size:16px;color:#fff;margin-bottom:8px}
.no-modal-success .success-sub{font-size:14px;color:var(--muted)}

/* ================================================================
   LIGHT MODE
   ================================================================ */
.theme-toggle{
  background:rgba(255,255,255,.08);border:none;cursor:pointer;
  color:rgba(255,255,255,.85);font-size:.9rem;
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.theme-toggle:hover{background:rgba(255,255,255,.18)}

body.light-mode{
  --light-bg:#e0d9bc;
  color:#333;
}

/* -- top bar & nav -- */
body.light-mode .top-bar{background:#3a5a8c}
body.light-mode .main-nav{background:rgba(58,90,140,.9);backdrop-filter:blur(10px)}
body.light-mode .main-nav.scrolled{background:rgba(58,90,140,.97)}
body.light-mode .mobile-nav{background:#3a5a8c}
body.light-mode .locale-btn{background:rgba(255,255,255,.12)}
body.light-mode .locale-btn:hover{background:rgba(255,255,255,.22)}
body.light-mode .locale-menu{background:#3a5a8c;border-color:rgba(255,255,255,.15)}
body.light-mode .theme-toggle{background:rgba(255,255,255,.12)}
body.light-mode .theme-toggle:hover{background:rgba(255,255,255,.25)}

/* -- hero form -- */
body.light-mode .slide-form{background:#3a5a8c}
body.light-mode .key-figures{background:rgba(58,90,140,.92)}

/* -- ticker -- */
body.light-mode .ticker-wrapper{background:#3a5a8c}

/* -- sections nos actions & collectes -- */
body.light-mode .section-nos-actions,
body.light-mode .section-collectes{background:var(--light-bg)}
body.light-mode .section-header .eyebrow{color:#b07d1e}
body.light-mode .section-header h2{color:#2c3e50}
body.light-mode .section-divider{border-top-color:rgba(0,0,0,.08)}

/* -- wizard (nos actions) light -- */
body.light-mode .wizard-progress{background:#f2f0e4;border-bottom-color:rgba(0,0,0,.08)}
body.light-mode .progress-step{color:#999;background:#e0d9bc}
body.light-mode .progress-step .step-num{background:rgba(0,0,0,.06);color:#999}
body.light-mode .progress-step.active{color:var(--orange)}
body.light-mode .progress-step.active .step-num{background:var(--orange);color:#fff}
body.light-mode .progress-step.done{color:var(--green)}
body.light-mode .progress-step.done .step-num{background:var(--green);color:#fff}
body.light-mode .progress-connector{background:rgba(0,0,0,.08)}
body.light-mode .progress-connector.done{background:var(--green)}
body.light-mode .step-title{color:#1a1a2e}
body.light-mode .step-subtitle{color:#555}
body.light-mode .btn-back{border-color:rgba(0,0,0,.12);color:#555}
body.light-mode .btn-back:hover{background:rgba(0,0,0,.04);color:#1a1a2e;border-color:rgba(0,0,0,.2)}
body.light-mode .country-card{background:#fff;border-color:transparent}
body.light-mode .country-card:hover{background:#f9f9f9;border-color:rgba(0,0,0,.08)}
body.light-mode .country-card.selected{border-color:var(--orange);background:#fff8ed}
body.light-mode .product-card{background:#fff}
body.light-mode .product-card:hover{border-color:rgba(245,166,35,0.3)}
body.light-mode .product-card.selected{border-color:var(--orange)}
body.light-mode .product-card-name{color:#1a1a2e}
body.light-mode .product-card-detail{color:#555}
body.light-mode .category-desc-inner{background:#fff}
body.light-mode .category-desc-text h3{color:#1a1a2e}
body.light-mode .category-desc-text p{color:#555}

/* -- tabs -- */
body.light-mode .tab-pill{border-color:rgba(0,0,0,.15);color:#555}
body.light-mode .tab-pill:hover{border-color:rgba(0,0,0,.35);color:#222}
body.light-mode .tab-pill.active{color:#fff}
body.light-mode .tabs-wrapper::after{background:linear-gradient(to right,transparent,var(--light-bg))}
body.light-mode .tabs-wrapper::before{background:linear-gradient(to left,transparent,var(--light-bg))}

/* -- scroll dots -- */
body.light-mode .scroll-dot{background:rgba(0,0,0,.15)}
body.light-mode .scroll-dot.active{background:var(--orange)}

/* -- collecte cards overlay text -- */
body.light-mode .collecte-card .card-title{color:#fff}

/* -- collecte card progress -- */
body.light-mode .collecte-card .progress-amounts{color:rgba(255,255,255,.75)}
body.light-mode .collecte-card .progress-amounts strong{color:#fff}
body.light-mode .collecte-card .progress-bar-track{background:rgba(255,255,255,.2)}

/* -- section reassurance A -- */
body.light-mode .section-reassurance-a { background: var(--light-bg); }
body.light-mode .section-reassurance-a .heading { color: #2c3e50; }
body.light-mode .section-reassurance-a .subtext { color: #6b7c93; }
body.light-mode .section-reassurance-a .pilier { background: #f2f0e4; color: #2c3e50; border-left-color: transparent; }
body.light-mode .section-reassurance-a .pilier:hover { border-left-color: var(--orange); }
body.light-mode .section-reassurance-a .pilier-title { color: #2c3e50; }
body.light-mode .section-reassurance-a .pilier-desc { color: #6b7c93; }
body.light-mode .section-reassurance-a .pilier::after { background: linear-gradient(90deg, rgba(0,0,0,0.04), transparent); }
@media (min-width: 768px) {
  body.light-mode .section-reassurance-a .pilier { border-bottom-color: transparent; }
  body.light-mode .section-reassurance-a .pilier:hover { border-bottom-color: var(--orange); border-left-color: transparent; }
  body.light-mode .section-reassurance-a .pilier::after { background: linear-gradient(180deg, rgba(0,0,0,0.04), transparent); }
}

/* -- section chiffres clés A -- */
body.light-mode .section-chiffres-a { background: #e0d9bc; }
body.light-mode .section-chiffres-a .title { color: #2c3e50; }
body.light-mode .section-chiffres-a .stat-item { background: #f2f0e4; border-color: transparent; }
body.light-mode .section-chiffres-a .stat-item:hover { border-color: rgba(245,166,35,0.4); }
body.light-mode .section-chiffres-a .stat-label { color: #555; }
body.light-mode .section-chiffres-a .stat-sublabel { color: #555; }
body.light-mode .section-chiffres-a .stat-icon { background: none; }
body.light-mode .section-chiffres-a .featured-block { background: #325f96; border-color: rgba(50,95,150,0.4); }
body.light-mode .section-chiffres-a .featured-block .stat-value { color: #fff; }
body.light-mode .section-chiffres-a .featured-block .stat-label { color: rgba(255,255,255,0.9); }
body.light-mode .section-chiffres-a .featured-block .stat-sublabel { color: rgba(255,255,255,0.7); }
body.light-mode .section-chiffres-a .chiffres-dot { background: rgba(0,0,0,0.15); }
body.light-mode .section-chiffres-a .chiffres-dot.active { background: var(--orange); }
body.light-mode .section-chiffres-a .stat-donateurs { background: #325f96; }
body.light-mode .section-chiffres-a .stat-donateurs .stat-value { color: #f4a00c; }
body.light-mode .section-chiffres-a .stat-donateurs .stat-label { color: rgba(255,255,255,0.9); }
body.light-mode .section-chiffres-a .eyebrow-text { color: #b07d1e; }

/* -- footer A en light mode -- */
body.light-mode .footer-a { background: #e0d9bc; }
body.light-mode .footer-a .amana-bar { background: linear-gradient(90deg, #d4cdb0, #c8c1a4, #d4cdb0); border-bottom-color: rgba(0,0,0,0.08); }
body.light-mode .footer-a .amana-text { color: #8b6914; }
body.light-mode .footer-a .amana-diamond { background: #8b6914; }
body.light-mode .footer-a .col-title { color: #2c3e50; border-bottom-color: rgba(0,0,0,0.1); }
body.light-mode .footer-a .col-links a { color: #555; }
body.light-mode .footer-a .col-links a:hover { color: var(--orange); }
body.light-mode .footer-a .col-links a::before { background: var(--orange); }
body.light-mode .footer-a .tagline { color: #666; }
body.light-mode .footer-a .contact-text { color: #555; }
body.light-mode .footer-a .contact-text strong { color: #333; }
body.light-mode .footer-a .contact-icon { background: rgba(245,166,35,0.15); }
body.light-mode .footer-a .newsletter-input { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: #333; }
body.light-mode .footer-a .newsletter-input::placeholder { color: #999; }
body.light-mode .footer-a .footer-bottom { border-top-color: rgba(0,0,0,0.08); }
body.light-mode .footer-a .social-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
body.light-mode .footer-a .social-btn:hover { background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.3); }
body.light-mode .footer-a .social-btn svg { fill: #555; }
body.light-mode .footer-a .social-btn:hover svg { fill: var(--orange); }
body.light-mode .footer-a .copyright { color: #999; }

/* -- modals & toasts -- */
body.light-mode .no-modal{background:#fff}
body.light-mode .no-modal-title{color:#1a1a2e}
body.light-mode .no-modal-subtitle{color:#666}
body.light-mode .no-modal-form label{color:#333}
body.light-mode .no-modal-form input,body.light-mode .no-modal-form select{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.1);color:#333}
body.light-mode .no-modal-form input::placeholder{color:#999}
body.light-mode .no-modal-form input:focus{border-color:var(--orange)}
body.light-mode .type-toggle{background:rgba(0,0,0,0.04)}
body.light-mode .type-toggle-btn{color:#666}
body.light-mode .type-toggle-btn.active{background:var(--orange);color:#fff}
body.light-mode .form-checkbox label{color:#555}
body.light-mode .no-modal-link{color:#666}
body.light-mode .no-modal-success .success-text{color:#1a1a2e}
body.light-mode .no-modal-success .success-sub{color:#666}
body.light-mode .password-strength{background:rgba(0,0,0,0.06)}
body.light-mode .no-modal-close{color:#999}

/* -- demo panel -- */


/* ================================================================
   7. DEMO PANEL
   ================================================================ */
.demo-panel{
  position:fixed;top:80px;right:16px;
  background:rgba(27,42,74,0.95);border:1px solid rgba(255,255,255,0.08);border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);backdrop-filter:blur(8px);
  padding:16px 20px;z-index:9999;
  font-family:'DM Sans',sans-serif;font-size:.82rem;max-width:260px;
}
.demo-panel h6{font-size:.82rem;font-weight:700;color:var(--orange);margin-bottom:10px}
.demo-btn{
  padding:5px 12px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.7);
  border-radius:6px;font-weight:600;font-size:.75rem;cursor:pointer;
  transition:all .2s;margin:2px;
}
.demo-btn.active-demo{background:var(--orange);color:#fff;border-color:var(--orange)}
.demo-btn:hover{background:rgba(255,255,255,0.1);color:#fff}
.demo-body{max-height:calc(100vh - 140px);overflow-y:auto}
.demo-panel.collapsed::before{content:"Demo";display:block;padding:10px 14px;font-size:12px;font-weight:600;color:var(--orange);cursor:pointer}
.demo-panel.collapsed .demo-body{display:none}
.demo-toggle{
  position:absolute;top:-8px;right:-8px;
  width:24px;height:24px;border-radius:50%;
  background:rgba(27,42,74,0.95);border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.5);font-size:14px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
body.light-mode .demo-panel{background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.08);box-shadow:0 8px 32px rgba(0,0,0,.1)}
body.light-mode .demo-panel h6{color:var(--orange)}
body.light-mode .demo-btn{background:rgba(0,0,0,0.04);color:#555;border-color:rgba(0,0,0,0.08)}
body.light-mode .demo-btn.active-demo{background:var(--orange);color:#fff;border-color:var(--orange)}
body.light-mode .demo-btn:hover{background:rgba(0,0,0,0.08);color:#1a1a2e}
body.light-mode .demo-toggle{background:rgba(255,255,255,0.95);border-color:rgba(0,0,0,0.08);color:#888}

/* ================================================================
   MOBILE TOUCH — always reveal hover content
   ================================================================ */
@media(hover:none){
  .collecte-card .card-cta{opacity:1;transform:translateY(0)}
}

/* ================================================================
   RESPONSIVE — min-width breakpoints (mobile-first)
   ================================================================ */

/* >= 768px  TABLET */
@media(min-width:768px){
  .top-bar{min-height:34px}
  .collecte-pair{flex:0 0 auto;display:contents}
  .collecte-card{flex:0 0 calc(33.333% - 11px);aspect-ratio:4/5}
  .collectes-carousel{flex-wrap:nowrap}
  .section-carousel-nav{display:flex}
  .scroll-dots{display:none}
  .section-nos-actions,.section-collectes{padding-left:24px;padding-right:24px}
  .section-header h2{font-size:34px}
}

/* >= 992px  DESKTOP */
@media(min-width:992px){
  .hero-slide{flex-direction:row;min-height:480px}
  .slide-image{flex:0 0 60%;height:auto}
  .slide-image::after{
    display:block;content:'';position:absolute;inset:0;width:auto;
    background:linear-gradient(90deg,transparent 40%,rgba(27,42,74,.95) 100%);
  }
  .slide-form{flex:0 0 40%;padding:70px 32px 32px}
  .hero-h1 h1{font-size:1.4rem}
  .hero-h1 p{font-size:.88rem}
  .carousel-control-next{right:calc(40% + 16px)}
  .autoplay-status{right:calc(40% + 16px)}
  .key-figures{position:absolute;bottom:0;left:0;right:0}
  .key-figure{padding:14px 10px}
  .key-figure .number{font-size:1.4rem}
  .key-figure .label{font-size:.7rem}

  .hamburger{display:none}
  .theme-toggle-mobile{display:none}
  .nav-links{display:flex}
  .action-btn{padding:8px 14px;font-size:.82rem}
  .amount-btn{min-width:60px;font-size:.95rem;padding:10px 0}
}

/* >= 1024px  WIDE DESKTOP */
@media(min-width:1024px){
  .collecte-card{flex:0 0 calc(25% - 12px)}
  .section-nos-actions,.section-collectes{padding-left:32px;padding-right:32px}
  .section-header h2{font-size:38px}
  .section-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;z-index:5}
  .section-carousel-nav.nav-prev{left:-20px}
  .section-carousel-nav.nav-next{right:-20px}
  .section-carousel-nav button{
    width:44px;height:44px;border-radius:50%;border:none;
    background:rgba(255,255,255,.12);backdrop-filter:blur(6px);
    color:#fff;font-size:18px;cursor:pointer;
    transition:background .2s ease,transform .2s ease;
    display:flex;align-items:center;justify-content:center;
  }
  .section-carousel-nav button:hover{background:var(--orange);transform:scale(1.08)}
}

/* ============================================
   ADMIN BANNER
   ============================================ */
.admin-banner{
  display:none;
  background:var(--red,#e74c3c);
  color:#fff;
  font-size:12px;
  font-weight:600;
  padding:8px 16px;
  text-align:center;
  position:fixed;
  top:0;left:0;right:0;
  z-index:10000;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.admin-banner.active{display:flex}
.admin-banner i{font-size:14px}
.admin-banner a{
  color:#fff;
  text-decoration:underline;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.admin-banner a:hover{opacity:0.85}
body.admin-mode .main-nav{top:36px}
body.admin-mode .mobile-nav{top:calc(36px + 56px)}
body.light-mode .admin-banner{background:#c0392b}

/* ================================================================
   AUTH PAGES (login, register, forgot-password, reset-password)
   ================================================================ */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d1b2a 0%, #1B2A4A 50%, #0d1b2a 100%);
  padding: 40px 16px;
}
.auth-card {
  background: rgba(27, 42, 74, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 40px 32px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.auth-header {
  text-align: center;
  margin-bottom: 32px;
}
.auth-logo {
  height: 48px;
  margin-bottom: 20px;
}
.auth-header h1 {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.auth-header p {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  margin: 0;
}
.auth-card .form-label {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 500;
}
.auth-card .form-control {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 14px;
  padding: 10px 14px;
}
.auth-card .form-control::placeholder {
  color: rgba(255,255,255,0.35);
}
.auth-card .form-control:focus {
  background: rgba(255,255,255,0.1);
  border-color: #F5A623;
  box-shadow: 0 0 0 3px rgba(245,166,35,0.15);
  color: #fff;
}
.auth-card .input-group-text {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
}
.auth-card .form-check-label {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
}
.auth-card .form-check-input:checked {
  background-color: #F5A623;
  border-color: #F5A623;
}
.auth-link {
  color: #F5A623;
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
}
.auth-link:hover {
  color: #e8921a;
  text-decoration: underline;
}
.auth-card .btn-warning {
  background: linear-gradient(135deg, #F5A623, #e8921a);
  border: none;
  font-weight: 600;
  padding: 12px;
  font-size: 15px;
  color: #1B2A4A;
}
.auth-card .btn-warning:hover {
  background: linear-gradient(135deg, #e8921a, #d4820f);
}
.auth-card .alert {
  font-size: 13px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.auth-card .text-muted {
  color: rgba(255,255,255,0.5) !important;
  font-size: 13px;
}

/* Light mode auth */
body.light-mode .auth-page {
  background: linear-gradient(135deg, #e8ecf1 0%, #f5f6fa 50%, #e8ecf1 100%);
}
body.light-mode .auth-card {
  background: #fff;
  border: 1px solid #dee2e6;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
body.light-mode .auth-header h1 { color: #1B2A4A; }
body.light-mode .auth-header p { color: #6c757d; }
body.light-mode .auth-card .form-label { color: #495057; }
body.light-mode .auth-card .form-control {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #1B2A4A;
}
body.light-mode .auth-card .form-control::placeholder { color: #adb5bd; }
body.light-mode .auth-card .form-control:focus {
  background: #fff;
  border-color: #F5A623;
}
body.light-mode .auth-card .input-group-text {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #6c757d;
}
body.light-mode .auth-card .form-check-label { color: #6c757d; }
body.light-mode .auth-card .text-muted { color: #6c757d !important; }

@media (max-width: 480px) {
  .auth-card { padding: 28px 20px; }
  .auth-header h1 { font-size: 20px; }
}

/* ================================================================
   PAGE INSCRIPTION (Particulier / Entreprise)
   ================================================================ */
.register-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #0d1b2a 0%, #1B2A4A 50%, #0d1b2a 100%);
}
.register-hero {
  background: linear-gradient(135deg, #1B2A4A 0%, #2c5f8a 100%);
  text-align: center;
  padding: 40px 0 32px;
}
.register-hero h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.register-hero p {
  color: rgba(255,255,255,0.65);
  font-size: 15px;
  margin: 0;
}
.register-container {
  max-width: 1000px;
  margin-top: -24px;
  padding-bottom: 60px;
}
.register-card {
  background: rgba(27, 42, 74, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.register-card .form-label {
  font-weight: 600;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}
.register-card .form-label .optional {
  font-weight: 400;
  color: rgba(255,255,255,0.35);
  font-size: 11px;
}
.register-card .form-control,
.register-card .form-select {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  padding: 10px 14px;
}
.register-card .form-control::placeholder { color: rgba(255,255,255,0.3); }
.register-card .form-control:focus,
.register-card .form-select:focus {
  background: rgba(255,255,255,0.1);
  border-color: #F5A623;
  box-shadow: 0 0 0 3px rgba(245,166,35,0.15);
  color: #fff;
}
.register-card .form-select option { background: #1B2A4A; color: #fff; }

/* Tabs */
.account-toggle {
  display: flex;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
}
.account-toggle .tab {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  background: none;
  cursor: pointer;
  transition: all 0.3s;
}
.account-toggle .tab:hover { color: rgba(255,255,255,0.8); }
.account-toggle .tab.active {
  background: #1B2A4A;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.account-toggle .tab .tab-icon { margin-right: 8px; }

/* Section titles */
.register-card .form-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 8px;
  margin-bottom: 16px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.register-card .form-section-title .required-note {
  font-weight: 400;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  text-transform: none;
  letter-spacing: 0;
}
.enterprise-tag {
  display: inline-block;
  background: rgba(21,101,192,0.2);
  color: #64b5f6;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Disabled enterprise fields */
.field-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.field-disabled .form-control,
.field-disabled .form-select {
  cursor: not-allowed;
}

/* Fiscal note */
.fiscal-note {
  background: rgba(255,248,225,0.1);
  border: 1px solid rgba(255,224,130,0.2);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.fiscal-note i { color: #F5A623; margin-top: 2px; }

/* Password toggle */
.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 0;
  z-index: 2;
}
.password-toggle:hover { color: #F5A623; }

/* Generate password button */
.btn-generate {
  font-size: 12px;
  color: #81c784;
  background: rgba(129,199,132,0.1);
  border: 1px solid rgba(129,199,132,0.2);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-generate:hover {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
}

/* Submit button */
.btn-submit {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #2e8b57, #257a4a);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-top: 24px;
  transition: all 0.2s;
}
.btn-submit:hover {
  background: linear-gradient(135deg, #257a4a, #1e6b3d);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46,139,87,0.3);
}

/* Login link */
.register-card .login-link {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

/* Benefits sidebar */
.benefits-card {
  background: rgba(27, 42, 74, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.benefits-title {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 24px;
}
.benefits-title i { color: #F5A623; }
.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.benefit-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.benefit-icon.green { background: rgba(46,125,50,0.15); color: #81c784; }
.benefit-icon.blue { background: rgba(21,101,192,0.15); color: #64b5f6; }
.benefit-icon.orange { background: rgba(230,81,0,0.15); color: #ffb74d; }
.benefit-icon.purple { background: rgba(123,31,162,0.15); color: #ce93d8; }
.benefit-text .title {
  font-weight: 600;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.benefit-text .desc {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}
.security-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.security-note i { color: #81c784; }

/* Light mode register */
body.light-mode .register-page {
  background: linear-gradient(135deg, #e8ecf1 0%, #f5f6fa 50%, #e8ecf1 100%);
}
body.light-mode .register-hero {
  background: linear-gradient(135deg, #1B2A4A 0%, #2c5f8a 100%);
}
body.light-mode .register-card,
body.light-mode .benefits-card {
  background: #fff;
  border: 1px solid #dee2e6;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
body.light-mode .register-card .form-label { color: #444; }
body.light-mode .register-card .form-label .optional { color: #aaa; }
body.light-mode .register-card .form-control,
body.light-mode .register-card .form-select {
  background: #f8f9fa;
  border-color: #dee2e6;
  color: #1B2A4A;
}
body.light-mode .register-card .form-control::placeholder { color: #adb5bd; }
body.light-mode .register-card .form-control:focus,
body.light-mode .register-card .form-select:focus {
  background: #fff;
  border-color: #1B2A4A;
  box-shadow: 0 0 0 3px rgba(26,58,92,0.1);
}
body.light-mode .register-card .form-select option { background: #fff; color: #1B2A4A; }
body.light-mode .account-toggle { background: #e9ecef; }
body.light-mode .account-toggle .tab { color: #666; }
body.light-mode .account-toggle .tab:hover { color: #1B2A4A; background: #dee2e6; }
body.light-mode .account-toggle .tab.active {
  background: #1B2A4A;
  color: #fff;
  box-shadow: 0 2px 8px rgba(26,58,92,0.3);
}
body.light-mode .register-card .form-section-title { color: #1B2A4A; border-color: #e9ecef; }
body.light-mode .register-card .form-section-title .required-note { color: #aaa; }
body.light-mode .enterprise-tag { background: #e3f2fd; color: #1565c0; }
body.light-mode .fiscal-note { background: #fff8e1; border-color: #ffe082; color: #5d4037; }
body.light-mode .password-toggle { color: #aaa; }
body.light-mode .password-toggle:hover { color: #1B2A4A; }
body.light-mode .btn-generate { color: #2e8b57; background: #e8f5e9; border-color: #c8e6c9; }
body.light-mode .btn-generate:hover { background: #2e8b57; color: #fff; }
body.light-mode .register-card .login-link { color: #888; }
body.light-mode .benefits-title { color: #1B2A4A; }
body.light-mode .benefit-icon.green { background: #e8f5e9; color: #2e7d32; }
body.light-mode .benefit-icon.blue { background: #e3f2fd; color: #1565c0; }
body.light-mode .benefit-icon.orange { background: #fff3e0; color: #e65100; }
body.light-mode .benefit-icon.purple { background: #f3e5f5; color: #7b1fa2; }
body.light-mode .benefit-text .title { color: #1B2A4A; }
body.light-mode .benefit-text .desc { color: #888; }
body.light-mode .security-note { color: #888; border-color: #e9ecef; }

@media (max-width: 991px) {
  .register-hero { padding: 32px 0 24px; }
  .register-hero h1 { font-size: 22px; }
  .benefits-card { margin-top: 0; }
}
@media (max-width: 480px) {
  .register-card { padding: 24px 16px; }
  .benefits-card { padding: 20px; }
}

/* ================================================================
   PAGE LISTING COLLECTES
   Variables utilisees : --navy, --navy-card, --navy-dark, --orange,
   --orange-hover, --green, --muted, --muted-light, --divider,
   --cat-eau, --cat-education, --cat-religion, --cat-solidarite, --cat-parrainage
   ================================================================ */

/* --- Hero --- */
.collectes-hero {
  text-align: center;
  padding: 56px 24px 40px;
  background: linear-gradient(180deg, rgba(27,42,74,0.3) 0%, var(--navy) 100%);
  position: relative;
}
.collectes-hero.has-hero-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 24px 56px;
}
.collectes-hero.has-hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,32,54,0.7) 0%, rgba(27,42,74,0.9) 100%);
  z-index: 0;
}
.collectes-hero .container { position: relative; z-index: 1; }
.collectes-hero h1 {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 900;
  margin-bottom: 10px;
}
.collectes-hero h1 span { color: var(--orange); }
.collectes-hero p { color: var(--muted-light); font-size: 15px; max-width: 520px; margin: 0 auto 12px; }
.collectes-hero-stats { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.hero-stat { text-align: center; }
.hero-stat-value { font-family: 'Roboto', sans-serif; font-size: 28px; font-weight: 900; }
.hero-stat-label { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* --- Filters --- */
.filters-section { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.filters-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.filters-bar::-webkit-scrollbar { display: none; }
.filter-tab { padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--muted); border: 1px solid transparent; background: none; cursor: pointer; transition: all .2s; white-space: nowrap; font-family: inherit; }
.filter-tab:hover { color: var(--muted-light); background: rgba(255,255,255,0.03); }
.filter-tab.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.filter-tab i { margin-right: 5px; }
.filters-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.filter-search { display: flex; align-items: center; gap: 8px; background: var(--navy-card); border: 1px solid var(--divider); border-radius: 8px; padding: 0 14px; height: 38px; min-width: 240px; }
.filter-search i { color: var(--muted); font-size: 13px; }
.filter-search input { background: none; border: none; outline: none; color: #fff; font-size: 13px; font-family: inherit; width: 100%; }
.filter-search input::placeholder { color: var(--muted); }
.filter-count { font-size: 13px; color: var(--muted); }
.filter-count span { color: var(--orange); font-weight: 700; }

/* --- View toggle --- */
.view-toggle { display: flex; gap: 4px; }
.view-btn { width: 34px; height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; transition: all .2s; border: 1px solid var(--divider); background: none; cursor: pointer; }
.view-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.view-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }

/* --- Filter toggle button (desktop + mobile) --- */
.filter-toggle-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--navy-card); border: 1px solid var(--divider); border-radius: 8px; color: var(--muted-light); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .2s; }
.filter-toggle-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.filter-toggle-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.filter-active-count { background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; margin-left: 4px; }
.filter-toggle-btn.active .filter-active-count { background: #fff; color: var(--orange); }

/* --- Filter panel (hidden by default) --- */
.filter-panel { background: var(--navy-card); border: 1px solid var(--divider); border-radius: 10px; padding: 16px 20px; margin-bottom: 16px; }
.filter-panel-group { margin-bottom: 12px; }
.filter-panel-group:last-child { margin-bottom: 0; }
.filter-panel-label { font-size: 11px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.filter-panel-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- Mobile filter button (bottom-sheet trigger, mobile only) --- */
.mobile-filter-btn { display: none; align-items: center; gap: 8px; padding: 10px 18px; background: var(--navy-card); border: 1px solid var(--divider); border-radius: 8px; color: var(--muted-light); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; margin-bottom: 12px; }

/* --- Badges on cards --- */
.badge-cat { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; z-index: 2; }
.badge-cat-eau { background: rgba(128,170,242,0.2); color: var(--cat-eau); }
.badge-cat-education { background: rgba(60,185,171,0.2); color: var(--cat-solidarite); }
.badge-cat-spiritualite { background: rgba(239,175,65,0.2); color: var(--cat-religion); }
.badge-cat-solidarite { background: rgba(177,48,76,0.2); color: var(--cat-education); }
.badge-cat-parrainage { background: rgba(163,127,197,0.2); color: var(--cat-parrainage); }
.badge-status { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 6px; z-index: 2; }
.badge-atteint { background: rgba(245,166,35,0.9); color: #fff; }
.badge-bientot { background: rgba(39,174,96,0.9); color: #fff; }

/* --- Progress bar category colors --- */
.progress-fill-eau { background: var(--cat-eau); }
.progress-fill-education { background: var(--cat-solidarite); }
.progress-fill-spiritualite { background: var(--cat-religion); }
.progress-fill-solidarite { background: var(--cat-education); }
.progress-fill-parrainage { background: var(--cat-parrainage); }

/* --- Grid section --- */
.collectes-grid-section { padding: 32px 0 48px; }

/* --- Grid default (cards) --- */
.collectes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Card base (Grid uses block, Flexbox inside) --- */
.collecte-card {
  text-decoration: none;
  color: inherit;
  background: var(--navy-card);
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s;
}
.collecte-card:hover {
  border-color: rgba(245,166,35,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* --- Card image (ratio 21/10 = zero crop avec source 1260x600) --- */
.collecte-card-img {
  position: relative;
  overflow: hidden;
  background: var(--navy-dark);
  aspect-ratio: 21 / 10;
}
.collecte-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s;
}
.collecte-card:hover .collecte-card-img img { transform: scale(1.05); }
.collecte-card-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: rgba(255,255,255,0.15);
}

/* --- Card body (Flexbox column) --- */
.collecte-card-body {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 20px;
}
.collecte-card-title {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.collecte-card-creator { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.collecte-card-summary { font-size: 13px; color: var(--muted-light); margin-bottom: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.progress-bar-wrap { background: rgba(255,255,255,0.08); border-radius: 4px; height: 6px; margin-bottom: 8px; overflow: hidden; }
.progress-bar-fill { background: var(--orange); height: 100%; border-radius: 4px; transition: width 0.3s; }
.collecte-card-progress { display: flex; align-items: baseline; gap: 6px; font-size: 12px; margin-bottom: 6px; }
.progress-collected { font-weight: 700; }
.progress-objective { color: var(--muted); }
.progress-pct { margin-left: auto; color: var(--orange); font-weight: 700; }
.collecte-donors { font-size: 11px; color: var(--muted); }

/* --- Vue carousel (Flexbox row scroll-snap) --- */
.collectes-grid.view-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  padding-bottom: 16px;
  scrollbar-width: none;
}
.collectes-grid.view-carousel::-webkit-scrollbar { display: none; }
.view-carousel .collecte-card { min-width: 300px; max-width: 340px; flex-shrink: 0; scroll-snap-align: center; }
.carousel-nav { display: none; justify-content: center; gap: 6px; padding: 0 24px 24px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); transition: all .2s; cursor: pointer; border: none; }
.carousel-dot.active { background: var(--orange); width: 24px; border-radius: 4px; }

/* --- Pagination --- */
.collectes-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }
.page-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--divider); background: none; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; font-family: inherit; }
.page-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.page-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.page-btn.disabled { opacity: 0.3; pointer-events: none; }

/* --- CTA --- */
.collectes-cta { padding: 48px 24px; border-top: 1px solid var(--divider); }
.collectes-cta h2 { font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 900; margin-bottom: 8px; }
.collectes-cta p { font-size: 14px; color: var(--muted); }

/* --- Bandeau stats annuelles --- */
.collectes-year-banner { padding: 48px 24px; background: rgba(245,166,35,0.04); border-top: 1px solid rgba(245,166,35,0.1); text-align: center; }
.year-banner-stats { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.year-stat { text-align: center; }
.year-stat-value { font-family: 'Roboto', sans-serif; font-size: 32px; font-weight: 900; color: var(--orange); }
.year-stat-label { font-size: 11px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.year-banner-text { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.year-banner-sub { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.year-banner-yt {
  display: inline-flex; align-items: center; gap: 8px;
  background: #c4302b; color: #fff; padding: 12px 28px; border-radius: 10px;
  font-size: 14px; font-weight: 700; text-decoration: none; transition: all 0.2s;
}
.year-banner-yt:hover { background: #a52520; transform: translateY(-1px); color: #fff; }

/* --- Bottom sheet mobile --- */
.bottom-sheet-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; }
.bottom-sheet-overlay.open { display: block; }
.bottom-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy-card); border-radius: 16px 16px 0 0; z-index: 2001; transform: translateY(100%); transition: transform 0.3s; padding: 0; }
.bottom-sheet.open { transform: translateY(0); }
.bottom-sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--divider); }
.bottom-sheet-body { padding: 20px; max-height: 50vh; overflow-y: auto; }
.bottom-sheet-footer { padding: 16px 20px; border-top: 1px solid var(--divider); }
.mobile-filter-group { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- Light mode --- */
body.light-mode .collectes-hero { background: linear-gradient(180deg, rgba(226,219,188,0.3) 0%, var(--light-bg) 100%); }
body.light-mode .collectes-hero p { color: #555; }
body.light-mode .hero-stat-value { color: #1a1a2e; }
body.light-mode .hero-stat-label { color: #888; }
body.light-mode .collecte-card { background: #fff; border-color: rgba(0,0,0,0.06); }
body.light-mode .collecte-card:hover { border-color: rgba(245,166,35,0.3); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
body.light-mode .collecte-card-img { background: var(--light-bg); }
body.light-mode .collecte-card-title { color: #1a1a2e; }
body.light-mode .collecte-card-creator { color: #888; }
body.light-mode .collecte-card-summary { color: #666; }
body.light-mode .progress-bar-wrap { background: rgba(0,0,0,0.06); }
body.light-mode .progress-collected { color: #1a1a2e; }
body.light-mode .progress-objective { color: #888; }
body.light-mode .collecte-donors { color: #888; }
body.light-mode .collectes-cta { border-top-color: rgba(0,0,0,0.06); }
body.light-mode .collectes-cta h2 { color: #1a1a2e; }
body.light-mode .collectes-cta p { color: #666; }
body.light-mode .collectes-year-banner { background: rgba(245,166,35,0.04); border-top-color: rgba(245,166,35,0.1); }
body.light-mode .year-banner-text { color: #1a1a2e; }
body.light-mode .year-banner-sub { color: #666; }
body.light-mode .filter-tab { color: #888; }
body.light-mode .filter-tab:hover { color: #555; background: rgba(0,0,0,0.03); }
body.light-mode .filter-tab.active { background: var(--orange); color: #fff; }
body.light-mode .filter-search { background: #fff; border-color: rgba(0,0,0,0.08); }
body.light-mode .filter-search input { color: #1a1a2e; }
body.light-mode .filter-search input::placeholder { color: #aaa; }
body.light-mode .filter-count { color: #888; }
body.light-mode .page-btn { color: #888; border-color: rgba(0,0,0,0.08); }
body.light-mode .page-btn:hover { background: rgba(0,0,0,0.04); color: #1a1a2e; }
body.light-mode .page-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
body.light-mode .filter-toggle-btn { background: #fff; border-color: rgba(0,0,0,0.08); color: #555; }
body.light-mode .filter-toggle-btn:hover { background: rgba(0,0,0,0.04); color: #1a1a2e; }
body.light-mode .filter-toggle-btn.active { background: var(--orange); color: #fff; }
body.light-mode .filter-panel { background: #fff; border-color: rgba(0,0,0,0.08); }
body.light-mode .mobile-filter-btn { background: #fff; border-color: rgba(0,0,0,0.08); color: #555; }
body.light-mode .bottom-sheet { background: #fff; }
body.light-mode .bottom-sheet-header { color: #1a1a2e; border-color: rgba(0,0,0,0.06); }
body.light-mode .bottom-sheet-body { color: #333; }
body.light-mode .carousel-dot { background: rgba(0,0,0,0.1); }
body.light-mode .carousel-dot.active { background: var(--orange); }

/* --- Responsive --- */
@media (max-width: 900px) {
  .collectes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .filter-toggle-btn { display: none; }
  .filter-panel { display: none; }
  .mobile-filter-btn { display: flex; }
  .filters-row { flex-direction: column; align-items: stretch; }
  .filter-search { min-width: unset; }
  .view-carousel .collecte-card { min-width: 280px; max-width: 300px; }
}
@media (max-width: 600px) {
  .collectes-hero { padding: 40px 16px 28px; }
  .collectes-hero-stats { gap: 20px; }
  .hero-stat-value { font-size: 22px; }
  .collectes-grid { grid-template-columns: 1fr; padding: 0 16px; }
  .year-banner-stats { gap: 24px; }
  .year-stat-value { font-size: 24px; }
}

/* ================================================================
   PAGE DETAIL COLLECTE
   ================================================================ */

/* --- Breadcrumb --- */
.cd-breadcrumb { display: flex; gap: 8px; list-style: none; padding: 0; font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.cd-breadcrumb a { color: var(--muted-light); text-decoration: none; }
.cd-breadcrumb a:hover { color: var(--orange); }
.cd-breadcrumb .active { color: var(--orange); }

/* --- Layout 2 colonnes desktop --- */
.cd-layout { display: flex; gap: 24px; padding-bottom: 60px; }
.cd-main { flex: 1; min-width: 0; }
.cd-sidebar { width: 340px; flex-shrink: 0; }
.cd-sidebar-card { background: var(--navy-card); border: 1px solid var(--divider); border-radius: 12px; padding: 24px; position: sticky; top: 80px; }

/* --- Hero image --- */
.cd-hero-img { border-radius: 12px; overflow: hidden; margin-bottom: 20px; aspect-ratio: 21 / 10; }
.cd-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* --- Titre --- */
.cd-title { font-family: 'Roboto', sans-serif; font-size: 28px; font-weight: 900; margin-bottom: 16px; }

/* --- Progression --- */
.cd-progress { margin-bottom: 20px; }
.cd-progress-pct { font-family: 'Roboto', sans-serif; font-size: 36px; font-weight: 900; color: var(--orange); text-align: center; margin-bottom: 6px; }
.cd-progress-bar { background: rgba(255,255,255,0.08); border-radius: 6px; height: 10px; overflow: hidden; margin-bottom: 10px; }
.cd-progress-fill { background: linear-gradient(90deg, var(--green), #5ab87a); height: 100%; border-radius: 6px; transition: width 0.5s ease; }
.cd-progress-stats { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted-light); }

/* --- FAQ link button --- */
.cd-faq-link { display: flex; align-items: center; padding: 12px 18px; background: rgba(245,166,35,0.06); border: 1px solid rgba(245,166,35,0.15); border-radius: 10px; color: var(--orange); font-size: 14px; font-weight: 600; text-decoration: none; margin-bottom: 20px; transition: all .2s; }
.cd-faq-link:hover { background: rgba(245,166,35,0.12); color: var(--orange); }

/* --- Don interface --- */
.cd-donate { margin-bottom: 24px; }
.cd-section-title { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 14px; color: var(--orange); }
.cd-donate-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.cd-amount-btn { padding: 10px; border: 1px solid var(--divider); border-radius: 8px; background: none; color: var(--muted-light); font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s; font-family: inherit; }
.cd-amount-btn:hover { border-color: var(--orange); color: var(--orange); }
.cd-amount-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.cd-donate-custom { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cd-donate-custom input { flex: 1; padding: 10px 14px; background: rgba(255,255,255,0.06); border: 1px solid var(--divider); border-radius: 8px; color: #fff; font-size: 14px; font-family: inherit; outline: none; }
.cd-donate-custom input:focus { border-color: var(--orange); }
.cd-donate-custom input::placeholder { color: var(--muted); }
.cd-donate-currency { font-size: 16px; font-weight: 700; color: var(--muted-light); }
.cd-donate-submit { width: 100%; padding: 14px; background: var(--green); color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all .2s; font-family: inherit; }
.cd-donate-submit:hover { background: var(--green-hover); transform: translateY(-1px); }
.cd-donate-note { text-align: center; font-size: 12px; color: var(--muted); margin-top: 10px; }

/* --- À propos --- */
.cd-about { margin-bottom: 24px; }
.cd-description { font-size: 14px; line-height: 1.7; color: var(--muted-light); margin-bottom: 20px; }
.cd-details-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.cd-detail-item { background: var(--navy-card); border: 1px solid var(--divider); border-radius: 8px; padding: 12px 16px; }
.cd-detail-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.cd-detail-value { font-size: 13px; font-weight: 600; }
.cd-detail-flag { width: 24px; height: 18px; object-fit: cover; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

/* Items */
.cd-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.cd-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--navy-card); border: 1px solid var(--divider); border-radius: 8px; }
.cd-item-name { font-size: 13px; font-weight: 600; }
.cd-item-meta { font-size: 11px; color: var(--muted); }
.cd-item-total { font-size: 14px; font-weight: 700; color: var(--orange); }

/* --- Créateur --- */
.cd-creator { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--navy-card); border: 1px solid var(--divider); border-radius: 10px; margin-bottom: 24px; }
.cd-creator-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), #e69a1a); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; }
.cd-creator-label { font-size: 11px; color: var(--muted); }
.cd-creator-name { font-size: 14px; font-weight: 700; }

/* --- Sidebar créateur --- */
.cd-sidebar-creator { font-size: 12px; color: var(--muted); margin: 12px 0 16px; text-align: center; border-bottom: 1px solid var(--divider); padding-bottom: 16px; }
.cd-sidebar-creator strong { color: #fff; }

/* --- FAQ --- */
.cd-faq { margin-bottom: 24px; }
.cd-faq-item { background: var(--navy-card); border: 1px solid var(--divider); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.cd-faq-question { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background 0.2s; }
.cd-faq-question:hover { background: rgba(255,255,255,0.03); }
.cd-faq-chevron { color: var(--muted); font-size: 12px; transition: transform 0.2s; }
.cd-faq-item.open .cd-faq-chevron { transform: rotate(180deg); color: var(--orange); }
.cd-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.cd-faq-item.open .cd-faq-answer { max-height: 500px; }
.cd-faq-answer-inner { padding: 0 18px 14px; font-size: 14px; line-height: 1.7; color: var(--muted-light); }

/* --- Galerie --- */
.cd-gallery { margin-bottom: 24px; }
.cd-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cd-gallery-item { border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; }
.cd-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; cursor: pointer; }
.cd-gallery-item img:hover { transform: scale(1.05); }
.cd-gallery-placeholder, .cd-contributors-placeholder { text-align: center; padding: 32px; background: var(--navy-card); border: 1px solid var(--divider); border-radius: 10px; }
.cd-gallery-placeholder i, .cd-contributors-placeholder i { font-size: 28px; color: var(--muted); display: block; margin-bottom: 10px; }
.cd-gallery-placeholder p, .cd-contributors-placeholder p { font-size: 13px; color: var(--muted); margin: 0; }
.cd-contributors-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.cd-contributors { margin-bottom: 24px; }

/* --- Navigation prev/next --- */
.cd-nav { display: flex; justify-content: space-between; margin-bottom: 24px; }
.cd-nav-btn { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--navy-card); border: 1px solid var(--divider); border-radius: 10px; text-decoration: none; color: var(--muted-light); font-size: 13px; font-weight: 600; transition: all .2s; }
.cd-nav-btn:hover { border-color: var(--orange); color: var(--orange); }
.cd-nav-btn i { font-size: 14px; color: var(--orange); }

/* --- Swipe indicators (mobile) --- */
.swipe-indicator {
  display: none;
  position: fixed;
  top: 50%;
  z-index: 300;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(245,166,35,0.9);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transform: translateY(-50%) scale(0);
  transition: transform 0.2s ease;
}
.swipe-indicator.left { left: 12px; }
.swipe-indicator.right { right: 12px; }
.swipe-indicator.visible { transform: translateY(-50%) scale(1); }

/* Swipe hint (first visit) */
.swipe-hint {
  display: none;
  text-align: center;
  padding: 12px;
  font-size: 12px;
  color: var(--muted);
  animation: swipeHintPulse 2s ease-in-out 3;
}
.swipe-hint i { margin: 0 4px; color: var(--orange); }
@keyframes swipeHintPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* --- Sticky bar mobile --- */
.cd-sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy-card); border-top: 1px solid var(--divider); padding: 10px 16px; z-index: 1000; }
.cd-sticky-progress { background: rgba(255,255,255,0.08); border-radius: 3px; height: 4px; overflow: hidden; margin-bottom: 8px; }
.cd-sticky-fill { background: var(--green); height: 100%; border-radius: 3px; }
.cd-sticky-btn { width: 100%; padding: 12px; background: var(--green); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
.cd-sticky-bar.hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
.cd-sticky-bar { transition: transform 0.3s, opacity 0.3s; }

/* Mobile: hide sidebar, show mobile elements */
.cd-mobile-only { display: none; }

/* --- Light mode --- */
body.light-mode .cd-sidebar-card { background: #fff; border-color: rgba(0,0,0,0.06); }
body.light-mode .cd-description { color: #555; }
body.light-mode .cd-detail-item { background: #fff; border-color: rgba(0,0,0,0.06); }
body.light-mode .cd-detail-label { color: #888; }
body.light-mode .cd-item { background: #fff; border-color: rgba(0,0,0,0.06); }
body.light-mode .cd-item-meta { color: #888; }
body.light-mode .cd-creator { background: #fff; border-color: rgba(0,0,0,0.06); }
body.light-mode .cd-creator-label { color: #888; }
body.light-mode .cd-faq-item { background: #fff; border-color: rgba(0,0,0,0.06); }
body.light-mode .cd-faq-answer-inner { color: #555; }
body.light-mode .cd-gallery-placeholder, body.light-mode .cd-contributors-placeholder { background: #fff; border-color: rgba(0,0,0,0.06); }
body.light-mode .cd-amount-btn { border-color: rgba(0,0,0,0.1); color: #555; }
body.light-mode .cd-amount-btn:hover { border-color: var(--orange); color: var(--orange); }
body.light-mode .cd-donate-custom input { background: #f8f9fa; border-color: rgba(0,0,0,0.1); color: #1a1a2e; }
body.light-mode .cd-progress-bar { background: rgba(0,0,0,0.06); }
body.light-mode .cd-progress-stats { color: #555; }
body.light-mode .cd-sidebar-creator { color: #888; border-color: rgba(0,0,0,0.06); }
body.light-mode .cd-sidebar-creator strong { color: #1a1a2e; }
body.light-mode .cd-nav-btn { background: #fff; border-color: rgba(0,0,0,0.06); color: #555; }
body.light-mode .cd-nav-btn:hover { border-color: var(--orange); color: var(--orange); }
body.light-mode .cd-sticky-bar { background: #fff; border-color: rgba(0,0,0,0.06); }

/* --- Responsive --- */
@media (max-width: 991px) {
  .cd-sidebar { display: none; }
  .cd-mobile-only { display: block; }
  .cd-sticky-bar { display: block; }
  .cd-layout { flex-direction: column; }
  .swipe-indicator { display: flex; }
  .swipe-hint { display: block; }
}
@media (max-width: 600px) {
  .cd-title { font-size: 22px; }
  .cd-details-grid { grid-template-columns: 1fr; }
  .cd-donate-amounts { grid-template-columns: repeat(2, 1fr); }
  .cd-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   PAGE CRÉATION COLLECTE
   ================================================================ */

/* Hero collecte */
.section-collecte-hero {
  background: linear-gradient(135deg, #122036 0%, #1B2A4A 100%);
  padding: 80px 16px 48px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.section-collecte-hero .hero-eyebrow {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .2em;
  color: #F5A623; font-weight: 600; margin-bottom: 12px;
}
.section-collecte-hero h1 {
  font-family: 'Roboto', sans-serif; font-size: 2.2rem; font-weight: 900;
  color: #fff; margin-bottom: 16px;
}
.section-collecte-hero h1 span { color: #F5A623; }
.section-collecte-hero p {
  font-size: 1rem; color: rgba(255,255,255,.7);
  max-width: 600px; margin: 0 auto; line-height: 1.6;
}

/* Comment ça marche — 3 cards */
.section-collecte-howto { padding: 60px 20px; }
.section-collecte-howto .section-title {
  text-align: center; font-family: 'Roboto', sans-serif;
  font-weight: 900; font-size: 1.5rem; margin-bottom: 40px; color: #fff;
}
.howto-grid {
  display: flex; flex-direction: column; gap: 20px;
  max-width: 900px; margin: 0 auto; position: relative;
}
.howto-grid::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; border-left: 2px dashed rgba(255,255,255,.12);
  transform: translateX(-1px); z-index: 0;
}
.howto-card {
  background: #1d2d50; border-radius: 14px; padding: 32px;
  text-align: center; position: relative; z-index: 1;
}
.howto-num {
  font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 48px;
  line-height: 1; margin-bottom: 12px;
}
.howto-card .howto-icon { font-size: 28px; margin-bottom: 12px; }
.howto-card .howto-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: #fff; }
.howto-card .howto-desc { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.5; }
@media (min-width: 768px) {
  .howto-grid { flex-direction: row; gap: 32px; }
  .howto-grid::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; border-left: none; border-top: 2px dashed rgba(255,255,255,.12); transform: translateY(-1px); }
  .howto-card { flex: 1; }
}

/* CTA Visiteur */
.section-collecte-cta-visitor { padding: 60px 20px; }
.cta-visitor-card {
  max-width: 560px; margin: 0 auto;
  background: rgba(245,166,35,.08); border: 1px solid rgba(245,166,35,.15);
  border-radius: 16px; padding: 40px 32px; text-align: center;
}
.cta-visitor-card h3 {
  font-family: 'Roboto', sans-serif; font-weight: 900;
  font-size: 1.4rem; margin-bottom: 24px; color: #fff;
}
.btn-cta-orange {
  display: inline-block; background: #F5A623; color: #fff;
  border: none; border-radius: 10px; padding: 16px 40px;
  font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: all .2s; text-decoration: none;
}
.btn-cta-orange:hover { background: #e69a1a; transform: translateY(-1px); color: #fff; }
.cta-visitor-link {
  margin-top: 16px; font-size: 14px; color: rgba(255,255,255,.5);
}
.cta-visitor-link a { color: #F5A623; font-weight: 600; text-decoration: none; }
.cta-visitor-link a:hover { text-decoration: underline; }

/* Explainer — Comment fonctionne */
.section-collecte-explainer { padding: 60px 20px; }
.section-collecte-explainer .container { max-width: 800px; margin: 0 auto; }
.section-collecte-explainer .eyebrow {
  text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: #F5A623; margin-bottom: 8px;
}
.section-collecte-explainer h2 {
  text-align: center; font-family: 'Roboto', sans-serif;
  font-weight: 900; font-size: 1.5rem; margin-bottom: 8px; color: #fff;
}
.explainer-steps { display: flex; flex-direction: column; gap: 24px; margin: 32px 0; }
.explainer-step { display: flex; gap: 20px; align-items: flex-start; }
.step-number {
  width: 40px; height: 40px; border-radius: 50%; background: #F5A623;
  color: #fff; font-family: 'Roboto', sans-serif; font-size: 18px;
  font-weight: 900; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-content h3 { font-family: 'Roboto', sans-serif; font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.step-content p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.65); }
.explainer-note {
  background: rgba(245,166,35,0.08); border: 1px solid rgba(245,166,35,0.2);
  border-radius: 10px; padding: 16px 20px; margin-top: 24px;
  display: flex; gap: 12px; align-items: flex-start; font-size: 13px;
  line-height: 1.6; color: rgba(255,255,255,.65);
}
.explainer-note i { color: #F5A623; font-size: 16px; margin-top: 2px; flex-shrink: 0; }

/* Pourquoi créer */
.section-collecte-why { padding: 60px 20px; }
.section-collecte-why .section-title {
  text-align: center; font-family: 'Roboto', sans-serif;
  font-weight: 900; font-size: 1.5rem; margin-bottom: 40px; color: #fff;
}
.why-grid { display: flex; flex-direction: column; gap: 20px; max-width: 800px; margin: 0 auto; }
.why-card {
  background: #1d2d50; border-radius: 14px; padding: 24px;
  display: flex; align-items: flex-start; gap: 20px;
}
.why-card .why-icon {
  font-size: 28px; flex-shrink: 0; width: 52px; height: 52px;
  background: rgba(255,255,255,.06); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.why-card .why-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: #fff; }
.why-card .why-desc { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.5; }

/* FAQ Collecte */
.section-collecte-faq { padding: 60px 20px; }
.section-collecte-faq .eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: #F5A623; margin-bottom: 8px;
}
.section-collecte-faq h2 {
  font-family: 'Roboto', sans-serif; font-weight: 900;
  font-size: 1.5rem; margin-bottom: 40px; color: #fff;
}
.collecte-faq { max-width: 800px; margin: 0 auto; }
.collecte-faq-item { background: #1d2d50; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.collecte-faq-question {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; cursor: pointer; font-size: 14px; font-weight: 600;
  color: #fff; transition: background 0.2s;
}
.collecte-faq-question:hover { background: rgba(255,255,255,0.03); }
.collecte-faq-chevron { color: rgba(255,255,255,.4); font-size: 12px; transition: transform 0.2s; }
.collecte-faq-item.open .collecte-faq-chevron { transform: rotate(180deg); color: #F5A623; }
.collecte-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.collecte-faq-item.open .collecte-faq-answer { max-height: 300px; }
.collecte-faq-answer-inner { padding: 0 18px 14px; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.65); }

/* Formulaire collecte */
.section-collecte-form { padding: 40px 0 60px; }
.collecte-form-card {
  max-width: 750px; margin: 0 auto; background: #1d2d50;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 32px;
}
.form-section { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.form-section:last-of-type { border-bottom: none; }
.collecte-form-card .form-section-title {
  font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 700;
  color: #fff; margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.form-section-num {
  width: 28px; height: 28px; border-radius: 50%; background: #F5A623;
  color: #1B2A4A; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.form-section-optional { font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 400; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.7); margin-bottom: 6px; }
.form-group select, .form-group input[type="text"], .form-group input[type="number"], .form-group textarea {
  width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none; transition: border-color 0.2s;
}
.form-group select:focus, .form-group input:focus, .form-group textarea:focus { border-color: #F5A623; }
.form-group select option { background: #1d2d50; color: #fff; }
.char-count { font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 400; }
.qty-row { display: flex; align-items: center; gap: 12px; }
.qty-row .qty-input { width: 60px !important; text-align: center; font-size: 18px; font-weight: 700; padding: 8px; }
.qty-row .qty-btn { flex-shrink: 0; }
.visibility-toggle { display: flex; gap: 0; background: rgba(255,255,255,0.06); border-radius: 10px; padding: 4px; }
.vis-btn { flex: 1; padding: 10px; border: none; background: none; color: rgba(255,255,255,0.5); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 8px; transition: all 0.2s; }
.vis-btn.active { background: #F5A623; color: #fff; }
.vis-desc { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 8px; }
.form-recap { background: rgba(245,166,35,0.06); border: 1px solid rgba(245,166,35,0.15); border-radius: 12px; padding: 20px; }
.recap-lines { margin-bottom: 12px; }
.recap-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: rgba(255,255,255,0.8); }
.recap-total { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(245,166,35,0.2); font-weight: 700; }
.recap-total-amount { font-size: 22px; color: #F5A623; }
.btn-submit-collecte {
  width: 100%; padding: 16px; background: #2e8b57; color: #fff; border: none;
  border-radius: 12px; font-family: 'DM Sans', sans-serif; font-size: 1.1rem;
  font-weight: 700; cursor: pointer; transition: all 0.2s; margin-top: 20px;
}
.btn-submit-collecte:hover { background: #257a4a; transform: translateY(-1px); }
.form-note { text-align: center; font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 12px; }
.form-note i { color: #F5A623; margin-right: 6px; }

/* Succès collecte */
.section-collecte-success { text-align: center; padding: 80px 20px; }
.section-collecte-success .success-card { max-width: 500px; margin: 0 auto; }
.section-collecte-success .success-icon { font-size: 64px; color: #2e8b57; margin-bottom: 20px; }
.section-collecte-success h2 { font-family: 'Roboto', sans-serif; font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.section-collecte-success .success-text { font-size: 15px; color: rgba(255,255,255,0.6); margin-bottom: 24px; }
.success-recap {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 20px; text-align: left; margin-bottom: 16px;
}
.success-recap-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-bottom: 12px; }
.success-recap-line { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.06); }
.success-recap-line:last-child { border-bottom: none; }
.success-recap-total span:last-child { font-size: 18px; font-weight: 800; color: #F5A623; }
.success-email-info {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(255,255,255,0.04); border-radius: 10px; padding: 16px;
  text-align: left; margin-bottom: 16px; font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.6);
}
.success-email-info i { color: #F5A623; font-size: 18px; margin-top: 2px; flex-shrink: 0; }
.success-email-info p { margin: 0; }

/* Light mode collecte */
body.light-mode .section-collecte-hero { background: linear-gradient(135deg, #e8e5dc 0%, #f0ede4 100%); border-bottom-color: rgba(0,0,0,0.06); }
body.light-mode .section-collecte-hero h1 { color: #1B2A4A; }
body.light-mode .section-collecte-hero p { color: #6c757d; }
body.light-mode .section-collecte-howto .section-title { color: #1B2A4A; }
body.light-mode .howto-card { background: #fff; }
body.light-mode .howto-card .howto-title { color: #1B2A4A; }
body.light-mode .howto-card .howto-desc { color: #666; }
body.light-mode .howto-grid::before { border-color: rgba(0,0,0,.1); }
body.light-mode .cta-visitor-card { background: rgba(245,166,35,.06); border-color: rgba(245,166,35,.15); }
body.light-mode .cta-visitor-card h3 { color: #1B2A4A; }
body.light-mode .section-collecte-explainer h2 { color: #1B2A4A; }
body.light-mode .step-content h3 { color: #1B2A4A; }
body.light-mode .step-content p { color: #666; }
body.light-mode .section-collecte-why .section-title { color: #1B2A4A; }
body.light-mode .why-card { background: #fff; }
body.light-mode .why-card .why-title { color: #1B2A4A; }
body.light-mode .why-card .why-desc { color: #666; }
body.light-mode .section-collecte-faq h2 { color: #1B2A4A; }
body.light-mode .collecte-faq-item { background: #fff; }
body.light-mode .collecte-faq-question { color: #1B2A4A; }
body.light-mode .collecte-faq-question:hover { background: rgba(0,0,0,0.02); }
body.light-mode .collecte-faq-answer-inner { color: #666; }
body.light-mode .collecte-form-card { background: #fff; border-color: #dee2e6; }
body.light-mode .form-section { border-color: #e9ecef; }
body.light-mode .collecte-form-card .form-section-title { color: #1B2A4A; }
body.light-mode .form-group label { color: #495057; }
body.light-mode .form-group select, body.light-mode .form-group input, body.light-mode .form-group textarea { background: #f8f9fa; border-color: #dee2e6; color: #1B2A4A; }
body.light-mode .form-group select option { background: #fff; color: #1B2A4A; }
body.light-mode .vis-btn { color: #6c757d; }
body.light-mode .form-recap { background: rgba(245,166,35,0.06); border-color: rgba(245,166,35,0.15); }
body.light-mode .recap-line { color: #495057; }
body.light-mode .section-collecte-success h2 { color: #1B2A4A; }
body.light-mode .section-collecte-success .success-text { color: #6c757d; }
body.light-mode .success-recap { background: #f8f9fa; border-color: #dee2e6; }
body.light-mode .success-recap-line { color: #495057; border-color: #e9ecef; }
body.light-mode .success-email-info { background: #f8f9fa; color: #666; }

/* ================================================================
   ESPACE DONATEUR
   ================================================================ */
.donor-space {
  padding: 40px 0;
  min-height: 80vh;
}
.donor-sidebar {
  background: var(--navy-card, rgba(27,42,74,0.6));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 100px;
}
.donor-sidebar-header {
  padding: 24px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.donor-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F5A623, #e8921a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1B2A4A;
  font-weight: 700;
  font-size: 18px;
  margin: 0 auto 12px;
}
.donor-name {
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}
.donor-email {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.donor-nav {
  padding: 12px 0;
}
.donor-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
}
.donor-nav-item:hover {
  color: #F5A623;
  background: rgba(245,166,35,0.06);
}
.donor-nav-item.active {
  color: #F5A623;
  background: rgba(245,166,35,0.1);
  border-left: 3px solid #F5A623;
  font-weight: 600;
}
.donor-nav-item i {
  width: 18px;
  text-align: center;
  font-size: 13px;
}
.donor-nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 8px 0;
}
.donor-welcome h1 {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}
.donor-welcome p {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  margin: 0 0 24px;
}
.donor-page-title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 24px;
}
.donor-stat-card {
  background: var(--navy-card, rgba(27,42,74,0.6));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.donor-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #F5A623;
  margin-bottom: 4px;
}
.donor-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.donor-card {
  background: var(--navy-card, rgba(27,42,74,0.6));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 24px;
}
.donor-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px;
}
.donor-card h4 {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}
.donor-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.donor-list-item:last-child { border-bottom: none; }
.donor-amount {
  font-weight: 700;
  color: #F5A623;
}
.donor-progress-text {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}
.donor-table {
  /* Override Bootstrap 5 .table defaults qui forcent fond blanc + texte sombre */
  --bs-table-bg: transparent;
  --bs-table-color: rgba(255,255,255,0.85);
  --bs-table-border-color: rgba(255,255,255,0.08);
  --bs-table-striped-bg: rgba(255,255,255,0.03);
  --bs-table-striped-color: rgba(255,255,255,0.85);
  --bs-table-hover-bg: rgba(255,255,255,0.05);
  --bs-table-hover-color: #fff;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  background: transparent;
}
.donor-table thead th,
.donor-table tbody td,
.donor-table tbody tr {
  background: transparent;
  color: inherit;
}
.donor-table thead th {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
}
.donor-table tbody td {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 12px;
}
.donor-table tbody tr:hover td {
  background: rgba(255,255,255,0.04);
}
.donor-card .form-label {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 500;
}
.donor-card .form-control,
.donor-card .form-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 14px;
}
.donor-card .form-control:focus,
.donor-card .form-select:focus {
  background: rgba(255,255,255,0.1);
  border-color: #F5A623;
  box-shadow: 0 0 0 3px rgba(245,166,35,0.15);
  color: #fff;
}
.donor-card .form-text {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}

/* Light mode espace donateur */
body.light-mode .donor-sidebar {
  background: #fff;
  border: 1px solid #dee2e6;
}
body.light-mode .donor-name { color: #1B2A4A; }
body.light-mode .donor-email { color: #6c757d; }
body.light-mode .donor-nav-item { color: #495057; }
body.light-mode .donor-nav-item:hover { color: #F5A623; background: rgba(245,166,35,0.06); }
body.light-mode .donor-nav-item.active { color: #F5A623; background: rgba(245,166,35,0.08); }
body.light-mode .donor-nav-divider { background: #dee2e6; }
body.light-mode .donor-welcome h1,
body.light-mode .donor-page-title { color: #1B2A4A; }
body.light-mode .donor-welcome p { color: #6c757d; }
body.light-mode .donor-stat-card,
body.light-mode .donor-card {
  background: #fff;
  border: 1px solid #dee2e6;
}
body.light-mode .donor-stat-label { color: #6c757d; }
body.light-mode .donor-card h3,
body.light-mode .donor-card h4 { color: #1B2A4A; }
body.light-mode .donor-list-item { border-color: #e9ecef; }
body.light-mode .donor-table { color: #495057; }
body.light-mode .donor-table thead th { color: #6c757d; border-color: #dee2e6; }
body.light-mode .donor-table tbody td { border-color: #e9ecef; }
body.light-mode .donor-card .form-label { color: #495057; }
body.light-mode .donor-card .form-control,
body.light-mode .donor-card .form-select {
  background: #f8f9fa; border: 1px solid #dee2e6; color: #1B2A4A;
}
body.light-mode .donor-card .form-text { color: #6c757d; }
body.light-mode .donor-progress-text { color: #495057; }

.donor-card .text-muted,
.donor-stat-card .text-muted,
.donor-space .text-muted {
  color: rgba(255,255,255,0.5) !important;
}
body.light-mode .donor-card .text-muted,
body.light-mode .donor-stat-card .text-muted,
body.light-mode .donor-space .text-muted {
  color: #6c757d !important;
}

/* ================================================================
   WIZARD NOS ACTIONS
   ================================================================ */
.wizard-container {
  background: var(--navy-card, rgba(27,42,74,0.6));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px;
  max-width: 900px;
  margin: 0 auto;
}
.wizard-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.wizard-step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F5A623, #e8921a);
  color: #1B2A4A;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wizard-step-header h3 {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.wizard-back {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.wizard-back:hover { background: rgba(245,166,35,0.15); color: #F5A623; }
.wizard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.wizard-choice {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  color: #fff;
}
.wizard-choice:hover {
  border-color: #F5A623;
  background: rgba(245,166,35,0.08);
}
.wizard-choice-cat {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: #F5A623;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.wizard-choice-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.wizard-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.wizard-product-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.wizard-product-name {
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  margin-bottom: 4px;
}
.wizard-product-detail {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
}
.wizard-product-price {
  font-size: 24px;
  font-weight: 700;
  color: #F5A623;
  margin-bottom: 16px;
}
.wizard-add-btn {
  background: linear-gradient(135deg, #F5A623, #e8921a);
  border: none;
  color: #1B2A4A;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  width: 100%;
  transition: all 0.2s;
}
.wizard-add-btn:hover { background: linear-gradient(135deg, #e8921a, #d4820f); }

body.light-mode .wizard-container { background: #fff; border-color: #dee2e6; }
body.light-mode .wizard-step-header h3 { color: #1B2A4A; }
body.light-mode .wizard-back { background: #f8f9fa; border-color: #dee2e6; color: #495057; }
body.light-mode .wizard-choice { background: #f8f9fa; border-color: #dee2e6; color: #1B2A4A; }
body.light-mode .wizard-choice:hover { border-color: #F5A623; background: rgba(245,166,35,0.06); }
body.light-mode .wizard-product-card { background: #f8f9fa; border-color: #dee2e6; }
body.light-mode .wizard-product-name { color: #1B2A4A; }
body.light-mode .wizard-product-detail { color: #6c757d; }

@media (max-width: 576px) {
  .wizard-container { padding: 20px 16px; }
  .wizard-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .wizard-products { grid-template-columns: 1fr; }
  .wizard-step-header h3 { font-size: 15px; }
}

/* ================================================================
   PANIER
   ================================================================ */
.cart-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--navy-card, rgba(27,42,74,0.6));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 12px;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}
.cart-item-detail {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}
.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-qty-value {
  font-weight: 700;
  color: #fff;
  min-width: 24px;
  text-align: center;
}
.cart-item-price {
  font-weight: 700;
  font-size: 16px;
  color: #F5A623;
  min-width: 90px;
  text-align: right;
}
.cart-summary {
  background: var(--navy-card, rgba(27,42,74,0.6));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 24px;
  position: sticky;
  top: 100px;
}
.cart-summary h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px;
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cart-summary-total {
  font-weight: 700;
  font-size: 20px;
  color: #F5A623;
}

body.light-mode .cart-item,
body.light-mode .cart-summary {
  background: #fff;
  border: 1px solid #dee2e6;
}
body.light-mode .cart-item-name { color: #1B2A4A; }
body.light-mode .cart-item-detail { color: #6c757d; }
body.light-mode .cart-qty-value { color: #1B2A4A; }
body.light-mode .cart-summary h3 { color: #1B2A4A; }
body.light-mode .cart-summary-row { color: #495057; border-color: #e9ecef; }

@media (max-width: 768px) {
  .cart-item { flex-wrap: wrap; gap: 12px; }
  .cart-item-info { flex-basis: 100%; }
  .cart-item-price { min-width: auto; }
}

@media (max-width: 991px) {
  .donor-sidebar {
    position: static;
    margin-bottom: 24px;
  }
  .donor-sidebar-header { padding: 16px; }
  .donor-nav { display: flex; flex-wrap: wrap; padding: 8px; gap: 4px; }
  .donor-nav-item { padding: 8px 12px; font-size: 13px; border-radius: 6px; }
  .donor-nav-item.active { border-left: none; }
  .donor-nav-divider { display: none; }
}

/* ================================================================
   COLLECTES PHARES — carousel accueil
   ================================================================ */
.section-collectes{background:var(--navy);padding:24px 16px 56px}
.section-divider{max-width:1200px;margin:0 auto;border:0;border-top:1px solid rgba(255,255,255,.08)}
.scroll-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.scroll-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:all .3s ease}
.scroll-dot.active{background:var(--orange);width:24px;border-radius:4px}
.section-carousel-nav{display:none}
.collectes-carousel{min-height:300px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 4px 16px;flex-wrap:nowrap}
.collectes-carousel::-webkit-scrollbar{display:none}
.collecte-card{flex:0 0 280px;scroll-snap-align:start;border-radius:var(--radius-card);overflow:hidden;position:relative;cursor:pointer;transition:transform .3s ease;display:flex;flex-direction:column;background:var(--navy-card)}
.collecte-card .card-img{height:180px;overflow:hidden;position:relative}
.collecte-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.collecte-card:hover img{transform:scale(1.06)}
.collecte-card .overlay{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 16px;z-index:2}
.collecte-card .card-title{font-family:'Roboto',sans-serif;font-weight:700;font-size:15px;line-height:1.25;text-transform:uppercase;color:#fff;margin-bottom:14px}
.collecte-card .progress-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.collecte-card .progress-amounts{font-family:'DM Sans',sans-serif;font-size:12px;color:rgba(255,255,255,.7)}
.collecte-card .progress-amounts strong{color:#fff;font-weight:600}
.collecte-card .pct-badge{background:var(--orange);color:#fff;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px}
.collecte-card .progress-bar-track{width:100%;height:5px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden;margin-bottom:12px}
.collecte-card .progress-bar-fill{height:100%;background:var(--orange);border-radius:3px;transition:width .6s ease}
.collecte-card .card-cta{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--orange);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.collecte-card .card-cta:hover{text-decoration:underline}
body.light-mode .section-collectes{background:var(--light-bg)}
body.light-mode .collecte-card{background:#fff}
body.light-mode .collecte-card .card-title{color:#1B2A4A}
body.light-mode .collecte-card .progress-amounts{color:#495057}
body.light-mode .collecte-card .progress-amounts strong{color:#1B2A4A}
body.light-mode .collecte-card .progress-bar-track{background:rgba(0,0,0,.08)}
.carousel-container{position:relative;max-width:1200px;margin:0 auto}
@media(min-width:992px){.section-carousel-nav{display:block;position:absolute;top:50%;transform:translateY(-50%);z-index:2}.section-carousel-nav button{background:rgba(255,255,255,.1);border:none;color:#fff;font-size:24px;width:36px;height:36px;border-radius:50%;cursor:pointer;transition:all .2s}.section-carousel-nav button:hover{background:var(--orange)}.nav-prev{left:-18px}.nav-next{right:-18px}}

/* ================================================================
   TOAST SYSTEME UNIFIE (accueil + wizard + toutes pages)
   ================================================================ */
.ano-toast-container{position:fixed;top:80px;right:16px;z-index:11000;display:flex;flex-direction:column;gap:8px;max-width:360px}
.toast{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,0.2);animation:toast-in 0.3s ease;min-width:280px}
.toast.toast-out{animation:toast-out 0.3s ease forwards}
.toast-success{background:#2e8b57;color:#fff}
.toast-error{background:#e74c3c;color:#fff}
.toast-info{background:#3498db;color:#fff}
.toast-warning{background:var(--orange);color:#fff}
.toast-icon{font-size:18px;flex-shrink:0}
.toast-close{margin-left:auto;background:none;border:none;color:rgba(255,255,255,0.7);cursor:pointer;font-size:16px}
@keyframes toast-in{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}
@media(max-width:600px){.ano-toast-container{top:70px;right:8px;left:8px;max-width:none}}
.cart-toast{
  display:block!important;padding:16px 18px;
  background:var(--navy-card,#1d2d50);border:1px solid rgba(46,139,87,0.4);
  border-radius:12px;min-width:300px;max-width:360px;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  animation:toast-in 0.3s ease;
}
.cart-toast.toast-out{animation:toast-out 0.3s ease forwards}
.cart-toast-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;color:#fff}
.cart-toast-header i{color:var(--green,#2e8b57);font-size:16px}
.cart-toast-header strong{color:#F5A623}
.cart-toast-project{font-size:12px;color:rgba(255,255,255,0.5);margin:-6px 0 12px 24px}
.cart-toast-actions{display:flex;gap:8px}
.cart-toast-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:6px;
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;
  text-decoration:none;border:none;transition:all 0.2s}
.cart-toast-btn-primary{background:var(--green,#2e8b57);color:#fff}
.cart-toast-btn-primary:hover{background:var(--green-hover,#257a4a);color:#fff}
.cart-toast-btn-secondary{background:rgba(255,255,255,0.06);color:var(--muted-light,#c8d0e0);
  border:1px solid rgba(255,255,255,0.08);font-weight:500}
.cart-toast-btn-secondary:hover{background:rgba(255,255,255,0.12);color:#fff}
body.light-mode .cart-toast{background:#fff;border-color:rgba(46,139,87,0.25);box-shadow:0 8px 24px rgba(0,0,0,0.1)}
body.light-mode .cart-toast-header{color:#1B2A4A}
body.light-mode .cart-toast-project{color:#6c757d}
body.light-mode .cart-toast-btn-secondary{background:#f8f9fa;color:#495057;border-color:#dee2e6}

/* ============================================================
   PAGES ACTION (/actions/{slug} et /actions/{slug}/{country})
   Hero unifie + breadcrumb sous hero + bouton "Avant de donner"
   + sections produits/seo/faq + lien retour
   ============================================================ */
.action-hero{position:relative;padding:80px 16px;text-align:center;overflow:hidden}
.action-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(27,42,74,0.85),rgba(18,32,54,0.95));z-index:1}
.action-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.action-hero-bg-fallback{background:linear-gradient(135deg,#1B2A4A 0%,#2c3e50 100%)}
.action-hero-content{position:relative;z-index:2;max-width:800px;margin:0 auto}
.action-hero-category{display:inline-block;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:600;text-transform:uppercase;background:rgba(245,166,35,0.15);color:#F5A623;margin-bottom:12px}
.action-hero-flag{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:rgba(245,166,35,0.15);border:1px solid var(--orange);border-radius:999px;color:var(--orange);font-size:13px;font-weight:600;margin-bottom:16px}
.action-hero-flag img{width:24px;height:24px}
.action-hero h1{font-family:'Roboto',sans-serif;font-size:42px;font-weight:900;color:#fff;margin-bottom:12px;line-height:1.15}
.action-hero h1 span{color:var(--orange)}
.action-hero p{font-size:17px;color:rgba(255,255,255,0.85);max-width:600px;margin:0 auto;line-height:1.6}

.action-breadcrumb-nav{padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.06)}
.action-breadcrumb{display:flex;gap:8px;list-style:none;padding:0;margin:0;font-size:13px;color:var(--muted)}
.action-breadcrumb a{color:var(--muted-light);text-decoration:none;transition:color 0.2s}
.action-breadcrumb a:hover{color:var(--orange)}
.action-breadcrumb-sep{color:rgba(255,255,255,0.3)}
.action-breadcrumb-current{color:var(--orange);font-weight:600}

.action-faq-cta{padding:24px 16px;text-align:center}
.action-faq-cta-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;background:rgba(245,166,35,0.1);border:1px solid rgba(245,166,35,0.3);color:#F5A623;font-size:14px;font-weight:600;border-radius:999px;text-decoration:none;cursor:pointer;transition:all 0.2s}
.action-faq-cta-btn:hover{background:rgba(245,166,35,0.15);border-color:#F5A623;transform:translateY(-1px);color:#F5A623}
.action-faq-cta-btn i{font-size:16px}

.action-products-section{padding:60px 16px}
.action-products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;max-width:1100px;margin:0 auto}

.action-countries-section{padding:60px 16px}
.action-countries-section .section-header{margin-bottom:24px;text-align:center}
.action-countries-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;max-width:900px;margin:0 auto}
.action-country-card{text-decoration:none;display:block;text-align:center;padding:20px 12px;background:var(--navy-card);border:1px solid var(--divider);border-radius:var(--radius-card);transition:all 0.2s}
.action-country-card:hover{transform:translateY(-3px);border-color:var(--orange);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.action-country-card .flag-heart{width:48px;height:48px;margin-bottom:8px}
.action-country-card .country-name{font-size:14px;font-weight:600;color:#fff}
.action-country-card .country-cta{font-size:12px;color:var(--orange);margin-top:4px}

.action-seo-section{padding:60px 16px;background:rgba(255,255,255,0.02)}
.action-seo-content{max-width:900px;margin:0 auto}
.action-seo-content h2{font-family:'Roboto',sans-serif;font-size:28px;font-weight:900;color:#fff;margin-bottom:16px}
.action-seo-content h2 span{color:var(--orange)}
.action-seo-content p{font-size:15px;color:var(--muted-light);line-height:1.7;margin-bottom:16px}
.action-seo-content .action-extra{margin-top:32px}

.action-back-link{text-align:center;padding:0 16px 60px}
.action-back-link a{color:var(--orange);font-size:14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.action-back-link a:hover{text-decoration:underline}

body.light-mode .action-hero::before{background:linear-gradient(135deg,rgba(240,242,245,0.85),rgba(220,225,235,0.95))}
body.light-mode .action-hero-bg-fallback{background:linear-gradient(135deg,#dbe1f0 0%,#c4cee0 100%)}
body.light-mode .action-hero h1{color:#1B2A4A}
body.light-mode .action-hero p{color:#495057}
body.light-mode .action-breadcrumb-nav{border-bottom-color:rgba(0,0,0,0.06)}
body.light-mode .action-breadcrumb a{color:#6c757d}
body.light-mode .action-seo-section{background:#f8f9fa}
body.light-mode .action-seo-content h2{color:#1B2A4A}
body.light-mode .action-seo-content p{color:#495057}
body.light-mode .action-country-card{background:#fff;border-color:#dee2e6}
body.light-mode .action-country-card .country-name{color:#1B2A4A}

@media(max-width:600px){
  .action-hero{padding:60px 16px}
  .action-hero h1{font-size:30px}
}

/* ================================================================
   FIX GLOBAL : <select> options dark/light mode
   ----------------------------------------------------------------
   Bug recurrent : sans cette regle, les <option> d'un <select>
   utilisent le rendu OS par defaut (blanc avec selection bleue),
   ce qui est illisible sur fond navy en dark mode.
   Cette regle s'applique a TOUS les selects du site, evitant
   d'avoir a la dupliquer pour chaque nouveau composant.
   ================================================================ */
select option {
  background: #1B2A4A;
  color: #fff;
}
body.light-mode select option {
  background: #fff;
  color: #1B2A4A;
}