/* Haut de page animé. Variante choisie par l'attribut data-hero de .v2-hero :
   cinema (fondu enchaîné de photos), abidjan (ville + réseau), coffre (photo encadrée + bandeau). */
.v2-hero[data-hero]{background-image:none!important;background-color:#0a1a21}
.cb-hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0a1a21}
.cb-hero-media .s{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.08);transition:opacity 1.8s ease;will-change:transform,opacity}
.cb-hero-media .s.is-on{opacity:1;animation:cb-kenburns 10s linear forwards}
.cb-hero-media .s.is-off{opacity:0;animation:cb-kenburns-out 2s linear forwards}
@keyframes cb-kenburns{from{transform:scale(1.08) translateX(0)}to{transform:scale(1.01) translateX(-1.2%)}}
@keyframes cb-kenburns-out{from{transform:scale(1.01) translateX(-1.2%)}to{transform:scale(1) translateX(-1.4%)}}

/* Scène triptyque : trois panneaux verticaux dévoilés en cascade */
.cb-hero-media .s.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#0a1a21;transform:none}
.cb-hero-media .s.tri.is-on{animation:none}
.s.tri i{position:relative;overflow:hidden;clip-path:inset(100% 0 0 0);transition:none}
.s.tri.is-on i{clip-path:inset(0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.s.tri.is-on i:nth-child(2){transition-delay:.2s}
.s.tri.is-on i:nth-child(3){transition-delay:.4s}
.s.tri.is-off i{clip-path:inset(0)}
.s.tri b{position:absolute;inset:0;background-size:cover;background-position:center 30%;transform:scale(1.1)}
.s.tri.is-on b{animation:cb-tri-zoom 9s ease-out forwards}
.s.tri.is-off b{transform:scale(1)}
@keyframes cb-tri-zoom{from{transform:scale(1.1)}to{transform:scale(1)}}

/* Titre : chaque ligne monte derrière un masque */
.cb-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.cb-line>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.75,.15,1)}
.cb-line:nth-child(2)>span{transition-delay:.14s}
.cb-hero-ready .cb-line>span{transform:none}
.js-motion .v2-hero h1[data-reveal]{opacity:1;transform:none}

/* Légende des photos (variante cinéma) */
.cb-hero-caption{position:absolute;z-index:2;right:max(24px,calc((100% - 1180px)/2));bottom:26px;display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.78);font:600 11px/1.3 'DM Sans',sans-serif;letter-spacing:1.2px;text-transform:uppercase}
.cb-hero-caption b{font-family:'IBM Plex Mono',monospace;font-weight:500;color:#fff}
.cb-hero-dots{display:flex;gap:6px}
.cb-hero-dots i{position:relative;width:34px;height:2px;background:rgba(255,255,255,.25);overflow:hidden}
.cb-hero-dots i::after{content:"";position:absolute;inset:0;background:#f7931a;transform:scaleX(0);transform-origin:left}
.cb-hero-dots i.is-done::after{transform:scaleX(1)}
.cb-hero-dots i.is-on::after{animation:cb-dot var(--slide,7s) linear forwards}
@keyframes cb-dot{to{transform:scaleX(1)}}

/* Variante Abidjan : réseau de nœuds sur la ville */
.cb-hero-net{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:.9}
.cb-hero-net line{stroke:rgba(130,214,202,.38);stroke-width:1;stroke-dasharray:4 6;animation:cb-flow 6s linear infinite}
.cb-hero-net circle{fill:#82d6ca}
.cb-hero-net circle.hub{fill:#f7931a}
.cb-hero-net .pulse{fill:none;stroke:#f7931a;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:cb-pulse 3.2s ease-out infinite}
@keyframes cb-flow{to{stroke-dashoffset:-40}}
@keyframes cb-pulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(5)}}
.v2-hero[data-hero="abidjan"] .cb-hero-media .s.is-on{animation:cb-push 22s ease-out forwards}
@keyframes cb-push{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.v2-hero[data-hero="abidjan"]::before{background:linear-gradient(90deg,rgba(5,16,24,.82) 0%,rgba(5,16,24,.55) 40%,rgba(5,16,24,.15) 75%,rgba(5,16,24,.05) 100%)}
.v2-hero[data-hero="abidjan"]::after{display:none}

/* Variante Coffre : fond uni, photo encadrée à droite, bandeau d'indicateurs */
.v2-hero[data-hero="coffre"]{background:radial-gradient(1200px 600px at 0% 100%,rgba(12,129,114,.18),transparent 60%),#0a1a21}
.v2-hero[data-hero="coffre"]::before,.v2-hero[data-hero="coffre"]::after{display:none}
.v2-hero[data-hero="coffre"] .cb-hero-media{left:auto;width:46%;border-left:1px solid rgba(255,255,255,.06)}
.v2-hero[data-hero="coffre"] .cb-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a1a21 0%,rgba(10,26,33,.35) 30%,rgba(10,26,33,.1) 100%)}
.v2-hero[data-hero="coffre"] .cb-hero-media .s.is-on{animation:cb-push 18s ease-out forwards}
.cb-hero-sweep{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,transparent 40%,rgba(255,214,150,.12) 50%,transparent 60%);transform:translateX(-100%);animation:cb-sweep 7s ease-in-out 1.2s infinite}
@keyframes cb-sweep{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
.cb-ticker{position:absolute;z-index:2;left:0;right:0;bottom:0;height:44px;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);background:rgba(5,14,19,.72);backdrop-filter:blur(6px)}
.cb-ticker-track{display:flex;width:max-content;height:100%;align-items:center;animation:cb-ticker 40s linear infinite}
.cb-ticker span{display:inline-flex;align-items:center;gap:10px;padding:0 28px;color:rgba(255,255,255,.62);font:600 11px 'DM Sans',sans-serif;letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
.cb-ticker span b{color:#fff;font:500 12px 'IBM Plex Mono',monospace;letter-spacing:0}
.cb-ticker span::before{content:"";width:5px;height:5px;border-radius:50%;background:#f7931a}
@keyframes cb-ticker{to{transform:translateX(-50%)}}
.v2-hero[data-hero="coffre"]{padding-bottom:98px}

/* Mobile : la photo occupe le bandeau du haut, le texte reste sur fond clair */
@media(max-width:680px){
  .v2-hero[data-hero]{background-color:#f7f2e7}
  .v2-hero[data-hero] .cb-hero-media{bottom:auto;height:285px;width:100%;left:0}
  .v2-hero[data-hero="coffre"]{background:#f7f2e7;padding-bottom:44px}
  .v2-hero[data-hero="coffre"] .cb-hero-media::after{background:linear-gradient(0deg,rgba(10,26,33,.35),transparent 50%)}
  .cb-hero-net{height:285px}
  .v2-hero[data-hero]::after{display:none}
  .cb-hero-caption{top:254px;bottom:auto;left:16px;right:auto}
  .cb-hero-caption span{display:none}
  .cb-ticker{top:241px;bottom:auto}
}

@media(prefers-reduced-motion:reduce){
  .cb-hero-media .s.is-on,.cb-hero-media .s.is-off,.s.tri b{animation:none;transform:none}
  .s.tri i{clip-path:none}
  .cb-line>span{transform:none;transition:none}
  .cb-hero-net line,.cb-hero-net .pulse,.cb-hero-sweep,.cb-ticker-track,.cb-hero-dots i.is-on::after{animation:none}
}