/* ════════════════════════════════════════════════════════════
   MAHRASOFT INNOVATIONS — COUCHE CINÉMATIQUE
   S'ajoute PAR-DESSUS site.css (mêmes tokens de marque).
   Objectif : expérience scroll haut de gamme, propre et corporate.
   Palette : bleu #0A66FF · bleu ciel #36BDF8 · blanc — pas de néon.
   ════════════════════════════════════════════════════════════ */

/* ── Lenis (défilement fluide) ─────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Barre de progression de lecture ───────────────────────── */
#ms-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-sky);
  will-change: transform;
}

/* ── Révélations au scroll (remplacent AOS, mêmes attributs) ── */
[data-aos] {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-aos="fade-up"]    { transform: translateY(34px); }
[data-aos="fade-down"]  { transform: translateY(-34px); }
[data-aos="fade-left"]  { transform: translateX(40px); }
[data-aos="fade-right"] { transform: translateX(-40px); }
[data-aos="zoom-in"]    { transform: scale(.94); }
[data-aos="fade"]       { transform: none; }
[data-aos].aos-animate  { opacity: 1; transform: none; }

/* ═══════════ HÉRO CINÉMATIQUE (scroll-scrub, clair) ═══════════ */
.cine-hero { position: relative; }
#hero.cine-hero { height: 460vh; }              /* distance de défilement = lecture */
.cine-stage {
  position: sticky; top: 0; height: 100vh; width: 100%;
  overflow: hidden; background: #fff;
  display: flex; align-items: center;
}
.cine-stage canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1;
}
/* Voile blanc pour garantir la lisibilité du texte, quelle que soit l'image */
.cine-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 34%, rgba(255,255,255,.10) 64%, rgba(255,255,255,0) 100%),
    linear-gradient(0deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%);
}
.cine-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 6;
  background: var(--grad-line);
}
.cine-content { position: relative; z-index: 4; width: 100%; }
.cine-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(10,102,255,.07); border: 1px solid rgba(10,102,255,.18);
  color: var(--ms-blue); font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .06em; padding: 7px 15px; border-radius: 30px;
  margin-bottom: 22px;
}
.cine-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ms-sky); animation: blink 2s infinite; }
.cine-h1 {
  color: var(--ms-navy); font-size: clamp(2.3rem, 5.2vw, 4rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.035em; margin-bottom: 20px;
}
.cine-h1 .grad { background: var(--grad-sky); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.cine-lead { color: var(--ms-muted); font-size: clamp(1rem,1.6vw,1.12rem); line-height: 1.75; max-width: 540px; margin-bottom: 30px; }
.cine-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.cine-stats { display: flex; gap: 38px; margin-top: 46px; flex-wrap: wrap; }
.cine-stat .n { font-family: var(--font-display); font-size: clamp(1.7rem,3vw,2.15rem); font-weight: 800; color: var(--ms-navy); line-height: 1; }
.cine-stat .n span { color: var(--ms-blue); }
.cine-stat .l { font-size: .76rem; color: var(--ms-muted); margin-top: 7px; font-weight: 500; }

/* Télémétrie discrète + indice de défilement */
.cine-meta {
  position: absolute; z-index: 5; font-family: var(--font-display);
  font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ms-muted);
}
.cine-meta b { color: var(--ms-navy); font-weight: 700; }
.cine-meta.br { bottom: 30px; right: 30px; }
.cine-scrollhint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 5;
  font-family: var(--font-display); font-size: .58rem; letter-spacing: .4em;
  color: var(--ms-muted); display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: opacity .4s;
}
.cine-scrollhint .line { width: 1px; height: 30px; background: linear-gradient(var(--ms-blue), transparent); animation: hintpulse 2s ease-in-out infinite; }
@keyframes hintpulse { 0%,100%{opacity:.3;transform:scaleY(.6)} 50%{opacity:1;transform:scaleY(1)} }

/* ═══════════ COMPTEURS / STATS PREMIUM ═══════════ */
.stat-block { text-align: center; }
.stat-block .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem,3.6vw,2.9rem); color: var(--ms-blue); line-height: 1; letter-spacing: -.03em; }
.stat-block.on-dark .num { color: var(--ms-sky); }
.stat-block .lab { margin-top: 8px; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-muted); }
.stat-block.on-dark .lab { color: rgba(255,255,255,.55); }

/* ═══════════ SECTION « STORY » ÉPINGLÉE (scroll storytelling) ═══════════ */
.story { position: relative; background: var(--ms-navy); color: #fff; }
.story-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.story-bg { position: absolute; inset: 0; opacity: .10; background-size: cover; background-position: center; will-change: transform; }
.story-panel { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }
.story-panel.on { opacity: 1; transform: none; }
.story-num { font-family: var(--font-display); font-size: .8rem; font-weight: 800; letter-spacing: .3em; color: var(--ms-sky); }
.story h2 { color: #fff; font-size: clamp(1.7rem,3.6vw,2.7rem); font-weight: 800; letter-spacing: -.03em; margin: 12px 0 14px; }
.story p { color: rgba(255,255,255,.72); font-size: 1.02rem; line-height: 1.8; max-width: 560px; }

/* ═══════════ SÉQUENCES CINÉMATIQUES SOMBRES (scroll-scrub immersif) ═══════════
   Deux séquences 3D (orbite d'architecture · constellation de données) générées
   avec Higgsfield en 1080p, découpées en frames et scrubbées au défilement. */
.cine-seq { position: relative; background: #05080f; }
.cine-seq.tall { height: 560vh; }
.cine-seq .cine-stage { background: #05080f; align-items: flex-end; }
.cine-seq .cine-stage canvas { z-index: 1; }
/* Voile sombre : lisibilité de la copie en bas, structure visible en haut */
.cine-seq .cine-scrim {
  background:
    linear-gradient(0deg,  rgba(4,8,16,.95) 0%, rgba(4,8,16,.76) 19%, rgba(4,8,16,.20) 44%, rgba(4,8,16,0) 63%),
    linear-gradient(90deg, rgba(4,8,16,.66) 0%, rgba(4,8,16,.14) 42%, rgba(4,8,16,0) 64%),
    radial-gradient(135% 105% at 62% 40%, rgba(4,8,16,0) 44%, rgba(4,8,16,.52) 100%);
}
/* Halo de marque discret (bleu ciel) */
.cine-seq::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(58% 58% at 72% 32%, rgba(54,189,248,.12), transparent 70%);
}
.cine-seq::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 6;
  background: var(--grad-line);
}

/* Repère de chapitre (haut-gauche) */
.cine-chapter { position: absolute; z-index: 5; top: clamp(96px, 15vh, 168px); left: 0; right: 0; pointer-events: none; }
.cine-chapter .inner { display: flex; align-items: center; gap: 14px; }
.cine-chapter b { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ms-sky); letter-spacing: .04em; }
.cine-chapter .bar { width: 44px; height: 1px; background: linear-gradient(90deg, var(--ms-sky), transparent); }
.cine-chapter span { font-family: var(--font-display); font-size: .66rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* Panneaux de copie empilés (fondu enchaîné piloté par le scroll) */
.cine-seq-inner { position: relative; z-index: 4; width: 100%; padding-bottom: clamp(46px, 11vh, 130px); }
.cine-layers { display: grid; }
.cine-layer { grid-area: 1 / 1; max-width: 680px; opacity: 0; will-change: opacity, transform; }
.cine-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
  font-family: var(--font-display); font-weight: 700; font-size: .73rem; letter-spacing: .05em;
  color: #d3e9ff; background: rgba(54,189,248,.10); border: 1px solid rgba(54,189,248,.24);
  padding: 8px 16px; border-radius: 30px;
}
.cine-eyebrow i { color: var(--ms-sky); font-size: .85rem; }
.cine-seq h2 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; margin: 0; }
.cine-seq h2 .accent { background: linear-gradient(100deg, var(--ms-sky), #8ad2ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cine-seq .lead { color: rgba(255,255,255,.76); font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.75; max-width: 560px; margin: 22px 0 0; }
.cine-seq .cine-cta-row { margin-top: 30px; }
.cine-seq .btn-ms-outline { color: #fff; border-color: rgba(255,255,255,.28); }
.cine-seq .btn-ms-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }

/* Points de chapitre (rail vertical à droite) */
.cine-dots { position: absolute; z-index: 5; right: clamp(22px, 4vw, 54px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 13px; }
.cine-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); transition: background .4s ease, box-shadow .4s ease, transform .4s ease; }
.cine-dot.on { background: var(--ms-sky); box-shadow: 0 0 0 5px rgba(54,189,248,.14); transform: scale(1.15); }

/* Télémétrie claire sur fond sombre */
.cine-meta.light { color: rgba(255,255,255,.5); }
.cine-meta.light b { color: #fff; }

/* ═══════════ MARQUEE CONFIANCE ═══════════ */
.ms-marquee { overflow: hidden; }
.ms-marquee-track { display: flex; width: max-content; animation: mq 34s linear infinite; }
.ms-marquee:hover .ms-marquee-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.ms-marquee-track .item { display: inline-flex; align-items: center; gap: 9px; padding: 0 clamp(22px,3.5vw,46px); white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--ms-navy); opacity: .72; }
.ms-marquee-track .item i { color: var(--ms-sky); }

/* ═══════════ MÉDIA / PARALLAXE ═══════════ */
[data-parallax] { will-change: transform; }
.media-frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--ms-border); box-shadow: var(--shadow-lg); }
.media-frame img { width: 100%; display: block; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 991px) {
  #hero.cine-hero { height: 360vh; }
  #hero .cine-scrim { background:
    linear-gradient(0deg, rgba(255,255,255,.92) 6%, rgba(255,255,255,.55) 40%, rgba(255,255,255,.15) 100%),
    linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,0)); }
  #hero .cine-stage { align-items: flex-end; }
  .cine-content { padding-bottom: 12vh; }
  /* Séquences sombres : scrim renforcé en bas pour la lisibilité mobile */
  .cine-seq.tall { height: 460vh; }
  .cine-seq .cine-scrim {
    background:
      linear-gradient(0deg, rgba(4,8,16,.96) 4%, rgba(4,8,16,.78) 26%, rgba(4,8,16,.24) 52%, rgba(4,8,16,0) 72%),
      radial-gradient(140% 110% at 60% 38%, rgba(4,8,16,0) 40%, rgba(4,8,16,.5) 100%);
  }
}
@media (max-width: 767px) {
  .cine-dots { display: none; }
}
@media (max-width: 575px) {
  #hero.cine-hero { height: 320vh; }
  .cine-stats { gap: 24px; }
  .cine-meta.br { display: none; }
  .cine-seq.tall { height: 400vh; }
  .cine-chapter { top: 80px; }
  .cine-seq h2 { font-size: clamp(1.7rem, 7vw, 2.3rem); }
}
@media (prefers-reduced-motion: reduce) {
  #hero.cine-hero { height: auto !important; }
  .cine-stage { position: relative; height: auto; min-height: 92vh; padding: 60px 0; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
  .ms-marquee-track { animation: none; }
  /* Séquences sombres : section navy propre, toute la copie visible, pas de scrub */
  .cine-seq.tall { height: auto !important; }
  .cine-seq .cine-stage { position: relative; height: auto; min-height: auto; display: block; padding: clamp(64px,10vh,120px) 0; background: var(--ms-navy); }
  .cine-seq canvas, .cine-seq .cine-scrim, .cine-seq::before, .cine-seq .cine-dots, .cine-seq .cine-chapter, .cine-seq .cine-meta { display: none; }
  .cine-seq-inner { padding: 0; }
  .cine-seq .cine-layers { display: block; }
  .cine-seq .cine-layer { position: relative; opacity: 1 !important; transform: none !important; max-width: 680px; }
  .cine-seq .cine-layer + .cine-layer { margin-top: 6vh; padding-top: 6vh; border-top: 1px solid rgba(255,255,255,.08); }
}