/* Scène à vidéo pilotée par le défilement : pages Fonctionnalités et Recherche. */
/* Scène à vidéo pilotée par le défilement (scroll-video.js) : le canvas reste fixe,
   l'en-tête, les quatre étapes et l'appel à l'action défilent par-dessus. Sans images
   ni JavaScript, le fond bleu et les textes s'affichent normalement. */
/* overflow-x: hidden (styles.css) ferait de body un conteneur de défilement et casserait le sticky. */
html, body { overflow-x: clip; }
.scene { --sky: var(--accent-on-dark); --scene-card: rgba(0, 32, 91, .74); position: relative; padding: 0; color: #fff; background: linear-gradient(180deg, #00205B 0%, #001A4A 100%); }
/* Le fond est sur l'élément sticky : mix-blend-mode fond le noir de la vidéo dans ce qui est derrière le canvas, à l'intérieur de ce contexte d'empilement. */
.scene-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: linear-gradient(180deg, #00205B 0%, #001A4A 100%); }
.scene-sticky canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; opacity: var(--dim, 1); filter: hue-rotate(20deg) saturate(.8); }
/* La marge négative est sur les étapes : sur le fond collant, elle le laisserait dépasser de la section. */
.scene-steps { position: relative; z-index: 1; margin-top: -100vh; }
.scene-step { min-height: 100vh; display: flex; align-items: center; padding: 10vh 6vw; }
.scene-step.is-right { justify-content: flex-end; }
.scene-center { justify-content: center; text-align: center; padding-left: 16px; padding-right: 16px; }

.scene h1, .scene h2 { color: #fff; }
.scene-hero { max-width: 880px; padding: 32px 40px; background: radial-gradient(closest-side, rgba(0, 32, 91, .78), rgba(0, 32, 91, 0)); }
.scene-hero h1 { font-size: clamp(36px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -.035em; text-shadow: 0 2px 30px rgba(0, 20, 60, .85); }
.scene-hero .h1-kicker { color: var(--sky); }
.scene-hero p { margin-top: 16px; font-size: 20px; color: rgba(255, 255, 255, .85); }
.scene-hint { margin-top: 28px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: .85; }

.scene-card { width: min(440px, 100%); padding: 24px 26px; border-radius: 16px; background: var(--scene-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(141, 184, 232, .16); transition: opacity .7s ease, transform .7s ease; }
.scene.is-ready .scene-card:not(.is-in) { opacity: 0; transform: translateY(24px); }
.scene-card .num { font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--sky); text-transform: uppercase; }
.scene-card h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -.02em; margin: 10px 0 12px; }
.scene-card p { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.scene-figure { margin-top: 22px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.scene-figure b { display: block; font-size: 34px; line-height: 1.1; color: #fff; letter-spacing: -.02em; }

.scene-cta { max-width: 860px; }
.scene-cta .num { display: block; }
.scene-cta h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -.03em; margin-top: 12px; }
.scene-cta p { font-size: 18px; max-width: 620px; margin: 14px auto 0; }
.scene-cta.scene-card { width: 100%; padding: 44px 48px; }
.scene-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.scene-actions .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.scene-actions .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }

/* Mini-visuels des étapes */
.viz { margin-top: 20px; border: 1px solid rgba(141, 184, 232, .25); border-radius: 14px; padding: 16px; background: rgba(255, 255, 255, .04); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.tok { display: inline-grid; }
.tok > * { grid-area: 1 / 1; transition: opacity .5s ease .3s, transform .5s ease .3s; }
.tok .v { opacity: 0; transform: translateY(-6px); }
.tok .t { color: var(--sky); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.scene.is-ready .scene-card:not(.is-in) .tok .v { opacity: 1; transform: none; }
.scene.is-ready .scene-card:not(.is-in) .tok .t { opacity: 0; transform: translateY(6px); }
.files { display: flex; gap: 8px; margin-top: 12px; }
.file { position: relative; width: 44px; height: 54px; border-radius: 6px; background: #fff; color: var(--ink); font-size: 10px; font-weight: 800; display: grid; place-items: end center; padding-bottom: 6px; }
.file::before { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: var(--sky); border-bottom-left-radius: 4px; }
.shield { position: relative; height: 120px; }
.shield .core { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px; border-radius: 16px; background: var(--ink); border: 2px solid var(--sky); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.shield .ring { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px; border-radius: 30px; border: 3px solid var(--sky); opacity: 0; box-shadow: 0 0 24px rgba(0, 99, 178, .8); }
.shield .shot { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #D92D20; box-shadow: 0 0 14px #D92D20; opacity: 0; }
.shield .s1 { left: 0; } .shield .s2 { right: 0; }
.is-in .shield .ring { animation: scene-anneau 1.6s ease-out infinite; }
.is-in .shield .s1 { animation: scene-tir-g 1.6s ease-in infinite; }
.is-in .shield .s2 { animation: scene-tir-d 1.6s ease-in infinite .8s; }
@keyframes scene-tir-g { 0% { transform: translateX(0); opacity: 1; } 55% { transform: translateX(120px); opacity: 1; } 60%, 100% { opacity: 0; transform: translateX(120px); } }
@keyframes scene-tir-d { 0% { transform: translateX(0); opacity: 1; } 55% { transform: translateX(-120px); opacity: 1; } 60%, 100% { opacity: 0; transform: translateX(-120px); } }
@keyframes scene-anneau { 0%, 50% { opacity: 0; transform: scale(.8); } 58% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.sources { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, .72); }
.route-tasks { display: grid; grid-template-columns: 1fr auto; gap: 9px 16px; font-size: 14px; }
.route-tasks b { color: var(--sky); font-weight: 700; text-align: right; }
.chat { display: grid; gap: 8px; }
.bubble { max-width: 85%; padding: 10px 12px; border-radius: 12px; font-size: 13px; background: rgba(255, 255, 255, .08); }
.bubble.me { justify-self: end; background: var(--accent); }
.mail { margin-top: 10px; display: flex; gap: 10px; align-items: center; font-size: 13px; color: rgba(255, 255, 255, .78); }
.mail svg { flex: 0 0 auto; }

@media (max-width: 768px) {
  .scene-sticky canvas { opacity: calc(var(--dim, 1) * .32); }
  .scene-step, .scene-step.is-right { padding: 8vh 16px; justify-content: center; }
  .scene-cta.scene-card { padding: 28px 22px; }
  .scene-actions .btn { flex: 1 1 100%; }
  .scene-hero { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-card, .tok > * { transition: none; }
  .shield .ring, .shield .shot { animation: none !important; }
  .shield .ring { opacity: 1; }
}