/* =========================================================
   ACPC+ — identité africaine & animations métier (oct. 2026)
   Motifs inspirés du ndop (tissu royal bamiléké/grassfields),
   couleurs du drapeau camerounais, cycle de la vente animé.
   ========================================================= */
:root{
  --cm-green:#2a9d3f; --cm-red:#d21034; --cm-yellow:#f4c20d; --indigo:#1a2a6c;
  --ndop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6' opacity='.9'%3E%3Cpath d='M0 14 L14 0 L28 14 L14 28 Z'/%3E%3Cpath d='M28 14 L42 0 L56 14 L42 28 Z'/%3E%3Ccircle cx='14' cy='14' r='3'/%3E%3Ccircle cx='42' cy='14' r='3'/%3E%3Cpath d='M7 14h-7M56 14h-7M21 14h14'/%3E%3C/g%3E%3C/svg%3E");
  --ndop-navy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%2314245c' stroke-width='1.4'%3E%3Cpath d='M0 14 L14 0 L28 14 L14 28 Z'/%3E%3Cpath d='M28 14 L42 0 L56 14 L42 28 Z'/%3E%3Ccircle cx='14' cy='14' r='3'/%3E%3Ccircle cx='42' cy='14' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Barre de progression de lecture (couleurs du drapeau) ---------- */
.read-progress{position:fixed;top:0;left:0;height:4px;width:100%;z-index:2500;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--cm-green) 0 33.3%,var(--cm-red) 33.3% 66.6%,var(--cm-yellow) 66.6%);pointer-events:none}

/* ---------- Bandeau ndop (séparateur africain animé) ---------- */
.ndop-band{height:22px;background-color:var(--indigo);background-image:var(--ndop);background-size:44px 22px;
  animation:ndopSlide 30s linear infinite;position:relative}
.ndop-band::before,.ndop-band::after{content:"";position:absolute;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--cm-green) 0 33.3%,var(--cm-red) 33.3% 66.6%,var(--cm-yellow) 66.6%)}
.ndop-band::before{top:0}.ndop-band::after{bottom:0}
@keyframes ndopSlide{to{background-position:440px 0}}
.ndop-bg{position:relative;isolation:isolate}
.ndop-bg::before{content:"";position:absolute;inset:0;background-image:var(--ndop);background-size:70px 35px;opacity:.05;z-index:-1;pointer-events:none}
.ndop-soft{position:relative;isolation:isolate}
.ndop-soft::before{content:"";position:absolute;inset:0;background-image:var(--ndop-navy);background-size:70px 35px;opacity:.035;z-index:-1;pointer-events:none}

/* ---------- Hero : verbe tournant + diaporama ---------- */
.hero-verb{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:700;color:#e6edf9;font-size:1.05rem}
.hero-verb .rot{position:relative;display:inline-block;min-width:11ch;height:1.5em;overflow:hidden;vertical-align:bottom}
.hero-verb .rot b{position:absolute;left:0;top:0;white-space:nowrap;color:var(--gold);opacity:0;transform:translateY(100%);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s}
.hero-verb .rot b.on{opacity:1;transform:none}
.hero-verb .rot b.off{opacity:0;transform:translateY(-100%)}
.hero-verb .dot{width:10px;height:10px;border-radius:50%;background:var(--cm-green);box-shadow:0 0 0 0 rgba(42,157,63,.6);animation:livePulse 1.8s infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 12px rgba(42,157,63,0)}100%{box-shadow:0 0 0 0 rgba(42,157,63,0)}}

.hero-show{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden}
.hero-show img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);
  transition:opacity 1.4s ease}
.hero-show img.on{opacity:1;animation:kenburns 7s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.12) translate(1.5%,1%)}to{transform:scale(1) translate(0,0)}}
.hero-show .cap{position:absolute;left:14px;bottom:14px;z-index:2;background:rgba(15,28,71,.78);backdrop-filter:blur(6px);color:#fff;
  font-size:.82rem;font-weight:700;padding:7px 13px;border-radius:20px;display:flex;align-items:center;gap:8px;transition:opacity .4s}
.hero-show .cap i{color:var(--gold)}
.hero-show .bars{position:absolute;top:12px;left:14px;right:14px;display:flex;gap:6px;z-index:2}
.hero-show .bars span{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.hero-show .bars span i{display:block;height:100%;width:0;background:#fff}
.hero-show .bars span.done i{width:100%}
.hero-show .bars span.run i{animation:barRun 6s linear forwards}
@keyframes barRun{to{width:100%}}
/* Badges flottants autour de l'image */
.hero-media{position:relative}
.float-badge{position:absolute;z-index:3;background:#fff;color:var(--navy);border-radius:14px;padding:10px 14px;box-shadow:0 18px 40px rgba(0,0,0,.28);
  display:flex;align-items:center;gap:10px;font-size:.82rem;font-weight:700;animation:floaty 7s ease-in-out infinite}
.float-badge .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.float-badge small{display:block;font-weight:600;color:var(--muted);font-size:.72rem}
.float-badge.b1{top:12%;left:-26px}.float-badge.b1 .ic{background:var(--cm-green)}
.float-badge.b2{bottom:16%;right:-22px;animation-delay:-3s}.float-badge.b2 .ic{background:var(--gold)}
@media(max-width:980px){.float-badge.b1{left:8px}.float-badge.b2{right:8px}}

/* ---------- Ticker des opportunités (temps réel) ---------- */
.ticker{background:var(--navy-3);color:#dfe7f7;display:flex;align-items:stretch;overflow:hidden;font-size:.9rem}
.ticker .lbl{flex:none;background:var(--cm-red);color:#fff;font-weight:800;padding:11px 18px;display:flex;align-items:center;gap:8px;
  text-transform:uppercase;letter-spacing:.6px;font-size:.78rem;position:relative;z-index:1}
.ticker .lbl::after{content:"";position:absolute;right:-12px;top:0;bottom:0;width:24px;background:var(--cm-red);transform:skewX(-18deg);z-index:-1}
.ticker .lbl i{animation:blinkRec 1.2s steps(2) infinite}
@keyframes blinkRec{50%{opacity:.25}}
.ticker .rail{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker .track{display:flex;gap:42px;width:max-content;padding:11px 0 11px 30px;animation:scrollX 40s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker a{color:#fff;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font-weight:600}
.ticker a:hover{color:var(--gold)}
.ticker .t{font-size:.68rem;font-weight:800;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--blue)}
.ticker .t.mission{background:var(--cm-green)}.ticker .t.commission{background:var(--gold);color:var(--navy)}

/* ---------- Cycle de la vente (pipeline animé) ---------- */
.pipeline{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:10px;padding-top:6px}
.pipeline .track-line{position:absolute;left:8%;right:8%;top:44px;height:4px;border-radius:4px;background:#e3e9f4;overflow:hidden}
.pipeline .track-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cm-green),var(--gold),var(--cm-red));transition:width 2.4s cubic-bezier(.6,0,.2,1)}
.pipeline.in .track-line i{width:100%}
.pipeline .coin{position:absolute;top:30px;left:8%;width:32px;height:32px;border-radius:50%;z-index:3;opacity:0;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,var(--gold) 55%,#c47f06);box-shadow:0 6px 16px rgba(196,127,6,.45);
  display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:900;font-size:.62rem}
.pipeline.in .coin{animation:coinRun 6s 2.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes coinRun{0%{left:8%;opacity:0;transform:rotate(0)}6%{opacity:1}88%{opacity:1}100%{left:calc(92% - 32px);opacity:0;transform:rotate(720deg)}}
.step{text-align:center;position:relative;z-index:2;opacity:0;transform:translateY(20px) scale(.9);transition:opacity .6s,transform .6s cubic-bezier(.2,1.4,.4,1)}
.pipeline.in .step{opacity:1;transform:none}
.step .bub{width:76px;height:76px;margin:6px auto 12px;border-radius:50%;background:#fff;border:3px solid #e3e9f4;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:var(--navy);box-shadow:var(--shadow-sm);transition:.35s;position:relative}
.step .bub::after{content:attr(data-n);position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;
  font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.pipeline.in .step .bub{border-color:var(--c,var(--blue));color:var(--c,var(--blue))}
.step:hover .bub{transform:translateY(-6px) scale(1.06);background:var(--c,var(--blue));color:#fff!important;box-shadow:0 14px 30px rgba(20,36,92,.2)}
.step h4{font-size:1rem;color:var(--navy)}
.step p{font-size:.8rem;color:var(--muted);margin-top:4px;line-height:1.45}
.step .tip{margin-top:8px;font-size:.74rem;font-weight:700;color:var(--c,var(--blue))}
@media(max-width:980px){.pipeline{grid-template-columns:repeat(3,1fr);row-gap:26px}.pipeline .track-line,.pipeline .coin{display:none}}
@media(max-width:560px){.pipeline{grid-template-columns:repeat(2,1fr)}}

/* ---------- Cartes 3D (tilt + reflet) ---------- */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.45),transparent 55%);mix-blend-mode:soft-light}
.tilt:hover .glare{opacity:1}
.card{position:relative}

/* ---------- Titres de section : soulignement animé tricolore ---------- */
.section-title h2::after{width:0!important;transition:width .9s .2s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg,var(--cm-green) 0 33.3%,var(--cm-red) 33.3% 66.6%,var(--cm-yellow) 66.6%)!important}
.section-title.in h2::after{width:90px!important}

/* ---------- Impact : anneaux de progression ---------- */
.ring-stat{position:relative;width:150px;height:150px;margin:0 auto 10px}
.ring-stat svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-stat circle{fill:none;stroke-width:8}
.ring-stat .bg{stroke:rgba(255,255,255,.1)}
.ring-stat .fg{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:408;stroke-dashoffset:408;transition:stroke-dashoffset 2s cubic-bezier(.2,.8,.2,1)}
.ring-stat.in .fg{stroke-dashoffset:var(--off,60)}
.ring-stat .val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.9rem;font-weight:800;color:var(--gold)}

/* ---------- Événements : compte à rebours ---------- */
.event-card{position:relative;overflow:hidden}
.countdown{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:.76rem;font-weight:800;color:var(--cm-red);
  background:#fdeaec;padding:4px 10px;border-radius:20px}
.countdown i{animation:blinkRec 1.4s steps(2) infinite}
.countdown.past{color:var(--muted);background:#eef1f6}.countdown.past i{animation:none}
.event-card .date-badge{transition:transform .4s cubic-bezier(.2,1.4,.4,1)}
.event-card:hover .date-badge{transform:rotate(-6deg) scale(1.08)}

/* ---------- Galerie mosaïque + légendes ---------- */
.gallery.mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;grid-auto-flow:dense}
.gallery.mosaic figure{position:relative;overflow:hidden;border-radius:14px;margin:0;background:#dfe6f2}
.gallery.mosaic figure.w2{grid-column:span 2}.gallery.mosaic figure.h2{grid-row:span 2}
.gallery.mosaic img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.gallery.mosaic figure:hover img{transform:scale(1.1) rotate(.6deg)}
.gallery.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;font-weight:700;font-size:.88rem;
  background:linear-gradient(transparent,rgba(10,20,50,.85));transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.gallery.mosaic figcaption small{display:block;font-weight:500;font-size:.7rem;opacity:.75}
.gallery.mosaic figure:hover figcaption{transform:none}
@media(max-width:980px){.gallery.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}}

/* ---------- Bande « Afrique qui vend » (photos défilantes) ---------- */
.photo-rail{overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.photo-rail .track{display:flex;gap:16px;width:max-content;animation:scrollX 60s linear infinite}
.photo-rail:hover .track{animation-play-state:paused}
.photo-rail figure{width:260px;height:180px;border-radius:14px;overflow:hidden;position:relative;flex:none;margin:0;box-shadow:var(--shadow-sm)}
.photo-rail img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.photo-rail figure:hover img{transform:scale(1.08)}
.photo-rail figcaption{position:absolute;left:10px;bottom:10px;background:rgba(15,28,71,.8);color:#fff;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:14px}

/* ---------- Boutons : anneau magnétique au survol ---------- */
.btn.gold{animation:goldGlow 3.2s ease-in-out infinite}
@keyframes goldGlow{0%,100%{box-shadow:0 6px 18px rgba(244,169,31,.3)}50%{box-shadow:0 6px 30px rgba(244,169,31,.6)}}

/* ---------- Crédits photos ---------- */
.credits{font-size:.72rem;color:#8ea0c2;margin-top:10px}
.credits a{color:#a9b8d8;text-decoration:underline}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  .ndop-band,.ticker .track,.photo-rail .track,.pipeline.in .coin,.btn.gold,.float-badge,.hero-show img.on{animation:none!important}
  .step,.pipeline .track-line i,.ring-stat .fg{transition:none!important}
  .read-progress{display:none}
}

/* ---------- Correctifs mobile ---------- */
/* Les blocs .reveal.left/.right sont décalés avant leur apparition : on coupe le débordement horizontal (clip préserve l'en-tête sticky) */
html,body{overflow-x:clip}
@media(max-width:680px){
  #bureau .card[style*="220px"]{grid-template-columns:1fr!important;text-align:center}
  #bureau .card[style*="220px"] img{max-width:220px;margin:0 auto}
}