@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* logo Fracture Protocol dans le menu Programmes = Bebas Neue (comme le héros de sa page) */
.nav-drop-menu a[href="fracture-protocol.html"] .wm { font-family: 'Bebas Neue', 'Inter', sans-serif; font-weight: 700; letter-spacing: .05em; font-size: 1.1rem; }
.nav-drop-menu a[href="fracture-protocol.html"] .wm .r { font-family: 'Inter', 'Helvetica Neue', sans-serif; font-weight: 400; font-size: .32em; letter-spacing: 0; }

:root {
  --black: #000000; --violet: #6B00CC; --violet-deep: #4A00A0; --white: #f0f0f0; --silver: #c9cbd1;
  --grey: rgba(240,240,240,0.55); --grey-dim: rgba(240,240,240,0.24); --violet-line: rgba(107,0,204,0.30); --silver-line: rgba(201,203,209,0.14);
  /* POLICES ALIGNÉES SUR LE LOGO BI (néo-grotesque suisse) : UNE famille — Inter — gras pour les titres, maigre pour le corps */
  --font-display: 'Inter', 'Helvetica Neue', system-ui, sans-serif; --font-title: 'Inter', 'Helvetica Neue', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* système de mouvement : UNE courbe signature, 3 durées — tout le site respire pareil */
  --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: .3s; --dur-2: .7s; --dur-3: 1.1s;
  --r: 2px;   /* un seul rayon : angles quasi vifs, langage renseignement */
  --gutter: clamp(1.75rem, 4.5vw, 5rem);   /* marge latérale du site : héros + descente, jamais collé aux bords */
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { background: var(--black); color: var(--white); font-family: var(--font-display); overflow-x: hidden; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* ——— PRO PASS · rigueur UI/UX (curée depuis ui-ux-pro-max, sans toucher la DA) ——— */
/* chiffres à chasse fixe sur les afficheurs de données -> aucun "saut" quand télémétrie / profondeur / timer changent (feel console) */
.ops-tel, .dh-depth, .dh-label, .vsl-time, .opd-read, .opd-bar, .opd-event, .opd-gauge, .opd-prompt, .brief-hud, .ops-coord, .brief-coord { font-variant-numeric: tabular-nums; }
/* focus clavier visible et on-brand (violet) — accessibilité ; n'apparaît qu'au clavier (jamais à la souris) */
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--violet); color: var(--white); }
a, button, [role="button"], label { cursor: pointer; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: rgba(240,240,240,.14); border: 2px solid var(--black); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(107,0,204,.6); }

.grain, .scanlines, .vignette { position: fixed; inset: 0; pointer-events: none; }
.grain { z-index: 9999; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px; animation: grain .35s steps(1) infinite; will-change: transform; }
@keyframes grain { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-2%,2%)} 40%{transform:translate(2%,-1%)} 60%{transform:translate(-1%,-2%)} 80%{transform:translate(1%,2%)} }
.scanlines { z-index: 9998; opacity: .5; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.035) 2px 3px); }
.vignette { z-index: 9997; background: radial-gradient(ellipse 95% 80% at 50% 45%, transparent 42%, rgba(0,0,0,.88) 100%); }

/* nav = capsule de verre flottante (style réf validée) : logo · liens · pilule CTA */
/* CAPSULE DE NAV : VISIBLE PAR DÉFAUT (ne peut jamais être invisible), cachée UNIQUEMENT pendant l'intro (body.pre-hero).
   À l'arrivée du héros la classe est retirée -> belle apparition (glisse du haut + fondu + zoom). */
nav.nav { position: fixed !important; top: 1rem; left: 50%; z-index: 9990; width: min(920px, calc(100% - 2.4rem)); display: flex; align-items: center; gap: 1.1rem; padding: .5rem .55rem .5rem 1.25rem; border-radius: 999px; overflow: visible;
  transform: translateX(-50%); opacity: 1; pointer-events: auto;
  background: rgba(20,20,27,.66); box-shadow: inset 0 1px 1px rgba(255,255,255,.16), 0 12px 44px rgba(0,0,0,.6); }
body.pre-hero nav.nav { opacity: 0; pointer-events: none; }   /* caché pendant l'intro ; l'apparition est animée en JS, calée sur le titre */
.nav-ic { width: 17px; height: 17px; display: block; margin-right: .6rem; }
.nav-mark { display: flex; align-items: center; transition: opacity .3s ease; text-decoration: none; color: var(--white); }
/* wordmark BI en texte vivant — mêmes polices que le logo, net à toutes les tailles */
.bi-word { font-family: var(--font-title); font-weight: 400; letter-spacing: -.02em; color: var(--white); text-transform: none; }
.bi-word b { font-weight: 700; }
.bi-word::after { content: '®'; font-size: .5em; vertical-align: super; margin-left: .13em; font-weight: 400; letter-spacing: 0; opacity: .78; }   /* marque déposée, collée au wordmark (façon BlackRock) */
.ab-tier-n.bi-word { text-transform: none; font-weight: 400; }   /* le wordmark garde sa casse Black(gras)Intelligence même dans la carte d'offre */
.nav-bi { font-size: 1.02rem; }
.nav-mark:hover { opacity: .6; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.layer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.6rem; }

/* ===== STAGE : intro immersive (gate -> séquence de scènes vidéo scrubchées) ===== */
#stage { height: 100vh; position: relative; overflow: hidden; background: var(--black); }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--black); z-index: 1; }
/* la VSL dans l'écran de la télé : overlay positionné, PAS de filtre (vrai noir) */
.screen-slot { position: absolute; z-index: 2; left: 21.35%; top: 20.24%; width: 56.9%; height: 51.88%;
  transform: none;
  visibility: hidden; opacity: 0; pointer-events: none; overflow: hidden; }
.screen-slot video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.slot-launch { position: absolute; top: 13.2%; left: 49.8%; transform: translateX(-50%); z-index: 4; pointer-events: auto; display: none;
  font-family: var(--font-mono); font-size: clamp(.58rem,1.1vw,.74rem); letter-spacing: .2em; text-transform: uppercase;
  color: var(--violet); background: rgba(8,8,8,.45); border: 1px solid rgba(107,0,204,.7); border-radius: 4px;
  padding: .55rem 1.1rem; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 0 18px rgba(107,0,204,.5), inset 0 0 12px rgba(107,0,204,.18); transition: background .2s, transform .15s; }
.slot-launch:hover { background: rgba(107,0,204,.18); transform: translateX(-50%) scale(1.05); }
/* barre de contrôle de la VSL (sous le cadre, thème Black Protocol) */
.vsl-bar { position: absolute; top: 74.2%; left: 21.35%; width: 56.9%; z-index: 4; display: none; align-items: center; gap: 11px; pointer-events: auto; }
.vsl-play { flex: none; width: 30px; height: 30px; border: 1px solid rgba(107,0,204,.6); background: rgba(8,8,8,.5); color: var(--violet); border-radius: 5px; cursor: pointer; font: 11px var(--font-mono); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s; }
.vsl-play:hover { background: rgba(107,0,204,.2); }
.vsl-track { flex: 1; height: 4px; background: rgba(240,240,240,.13); border-radius: 2px; cursor: pointer; position: relative; }
.vsl-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--violet); border-radius: 2px; }
.vsl-prog::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 9px var(--violet); }
.vsl-time { flex: none; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em; color: var(--grey); min-width: 80px; text-align: right; }
/* texte incrusté dans l'espace noir d'une vidéo */
.scene-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; display: none; flex-direction: column; align-items: center; text-align: center; width: min(680px,82vw); pointer-events: none; }
.st-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem,4vw,3.2rem); letter-spacing: .02em; line-height: 1.05; text-transform: uppercase; color: var(--white); }
.st-sub { font-family: var(--font-display); font-weight: 400; font-size: clamp(.95rem,1.6vw,1.2rem); line-height: 1.6; color: var(--grey); margin-top: 1.1rem; max-width: 46ch; }


#phraseLayer, #terminalLayer { z-index: 3; }
.stage-phrase { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem,4vw,3.2rem); letter-spacing: -.01em; line-height: 1.12; max-width: 24ch; margin: 0 auto; text-wrap: balance; min-height: 1.2em; }   /* taille réduite de 20% */
.stage-phrase.is-live { animation: liveGlow 3.6s ease-in-out infinite; }
@keyframes liveGlow { 0%,100%{text-shadow:0 0 0 rgba(107,0,204,0)} 50%{text-shadow:0 0 28px rgba(107,0,204,.32)} }
.terminal { width: min(560px,88vw); font-family: var(--font-mono); text-align: left; }
.t-line { font-size: clamp(.72rem,1.5vw,.92rem); letter-spacing: .03em; color: var(--grey); line-height: 2.5; }
.t-line .ok { color: var(--violet); }
.t-form { display: flex; align-items: center; gap: .55rem; line-height: 2.5; flex-wrap: wrap; font-size: clamp(.72rem,1.5vw,.92rem); }
.t-arrow { color: var(--grey); }
.t-input { flex: 1; min-width: 150px; background: transparent; border: none; border-bottom: 1px solid rgba(107,0,204,.4); color: var(--white); font-family: var(--font-mono); font-size: inherit; letter-spacing: .04em; padding: .25rem .15rem; outline: none; caret-color: var(--violet); }
.t-input::placeholder { color: var(--grey-dim); }
.t-input:focus { border-bottom-color: var(--violet); }
.t-submit { background: transparent; border: none; color: var(--violet); font-family: var(--font-mono); font-size: inherit; letter-spacing: .1em; cursor: pointer; padding: .25rem .1rem; }
.t-submit:hover { opacity: .55; } .t-submit:disabled { color: var(--violet); }
.gate-hint { font-family: var(--font-mono); font-size: clamp(.64rem,1.3vw,.8rem); letter-spacing: .16em; color: var(--violet); text-transform: uppercase; margin-top: 1.2rem; }
.gate-hint.blink { animation: blink 1.25s step-end infinite; }
.verify-line .dots { color: var(--violet); } .access-line, .access-line .dot { color: var(--violet); }
@keyframes glitchOut { 0%{opacity:1;transform:translate(0,0);clip-path:inset(0 0 0 0)} 15%{opacity:.85;transform:translate(-4px,1px);clip-path:inset(0 0 62% 0)} 30%{opacity:.9;transform:translate(5px,-1px);clip-path:inset(55% 0 8% 0)} 45%{opacity:.55;transform:translate(-3px,0);clip-path:inset(20% 0 50% 0)} 60%{opacity:.7;transform:translate(4px,1px);clip-path:inset(70% 0 0 0)} 75%{opacity:.3;transform:translate(-2px,-1px);clip-path:inset(0 0 80% 0)} 100%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0)} }
.glitch-out { animation: glitchOut .5s steps(2,end) forwards; }

.scroll-cue { position: absolute; bottom: 2.4rem; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .34em; color: var(--grey-dim); text-transform: uppercase; z-index: 5; }

@media (max-width: 720px) {
  .nav { padding: .42rem .45rem .42rem .95rem; gap: .8rem; }
  .stage-phrase { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* ===================== HUB : la vraie landing (après l'intro vidéo) ===================== */
#hub { position: relative; z-index: 1; background: transparent; }

/* I — HÉROS sur le fond vidéo (image de fin du plan posteye) */
#hubHero { position: fixed; inset: 0; z-index: 150; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .9s ease; will-change: transform; }
#hubHero.show { opacity: 1; visibility: visible; pointer-events: auto; }
#hubHero .hero-inner { min-height: 100%; height: 100%; max-width: none; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }   /* vidéo d'Ayman affichée SANS modification (filtre retiré) */
/* voile : sombre à GAUCHE (le titre y vit) + vignette bas pour fondre vers la suite du site ; la droite laisse respirer la ville derrière le verre */
.hero-bg::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(58% 55% at 19% 50%, rgba(0,0,0,.6), transparent 72%),
  linear-gradient(90deg, rgba(8,8,8,.95) 0%, rgba(8,8,8,.8) 36%, rgba(8,8,8,.34) 64%, rgba(8,8,8,.13) 100%),
  linear-gradient(180deg, rgba(8,8,8,.5) 0%, transparent 28%, transparent 58%, rgba(8,8,8,.94) 100%); }   /* + poche d'ombre feutrée derrière le titre (gauche), naturelle */
.hero-inner { position: relative; z-index: 2; width: 100%; min-height: 100vh; max-width: 1280px; margin: 0 auto; }
/* ===== HÉROS BENTO — panneaux de verre noir sur lueur d'ambiance (réf. validée, traduite DA BP) ===== */
/* la lumière D'ABORD : le verre n'existe que s'il y a quelque chose à flouter derrière */
#hubHero { perspective: 1400px; }
#hubHero::before { content: ''; position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(52% 48% at 16% 90%, rgba(138,20,255,.22), rgba(107,0,204,.07) 45%, transparent 66%),
  radial-gradient(40% 34% at 88% 8%, rgba(201,203,209,.05), transparent 55%),
  radial-gradient(42% 38% at 72% 78%, rgba(138,20,255,.13), transparent 60%); }   /* violet ÉLECTRIQUE #8A14FF (au lieu du #6B00CC plus pâle) */
.hero-inner.hp { display: grid; grid-template-columns: 1.25fr .95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: 5.6rem var(--gutter) 2rem; height: 100vh; transform-style: preserve-3d; }
/* ===== LIQUID GLASS (recette de la réf) : pas de bordure — un ANNEAU-DÉGRADÉ lumineux masqué, un film quasi nul, le flou fait le reste ===== */
.lg-l, .lg-s { position: relative; overflow: hidden; background: rgba(255,255,255,.028); background-blend-mode: luminosity; border: none; }
.lg-l { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 1px rgba(255,255,255,.1); }
.lg-s { -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); box-shadow: 4px 4px 4px rgba(0,0,0,.05), inset 0 1px 1px rgba(255,255,255,.15); }
.lg-l::before, .lg-s::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none;
  background: conic-gradient(from var(--lg-a), rgba(255,255,255,.10) 0deg, rgba(255,255,255,.50) 30deg, rgba(255,255,255,.08) 86deg, rgba(255,255,255,.03) 165deg, rgba(255,255,255,.34) 214deg, rgba(255,255,255,.06) 276deg, rgba(255,255,255,.10) 360deg);
  animation: lgEdge 9s linear infinite;   /* le reflet tourne lentement autour des contours du verre (subtil) */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.lg-s::before { background: conic-gradient(from var(--lg-a), rgba(255,255,255,.14) 0deg, rgba(255,255,255,.58) 30deg, rgba(255,255,255,.10) 86deg, rgba(255,255,255,.04) 165deg, rgba(255,255,255,.40) 214deg, rgba(255,255,255,.08) 276deg, rgba(255,255,255,.14) 360deg); }
@property --lg-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes lgEdge { to { --lg-a: 360deg; } }
@media (prefers-reduced-motion: reduce){ .lg-l::before, .lg-s::before { animation: none; } }
/* héros v4 : SOBRE — le texte vit directement sur le noir, plus de grand panneau ; le verre = les cartes de droite uniquement */
.hp-main { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 0 1rem; }
/* l'emblème = le monogramme BI en SVG vectoriel — fond transparent, net à toute taille */
.hp-emblem { margin: 0 0 1.8rem; width: 44px; height: 44px; }
.hp-emblem img { width: 100%; height: 100%; display: block; }
.hp-pills { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-start; margin-top: 1.3rem; }
.hp-pill { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,240,240,.78); border-radius: 999px; padding: .55em 1.05em; }
/* (citation du héros retirée — v4 sobre) */
.hp-side { display: flex; flex-direction: column; gap: 1rem; }
.hp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hp-card { display: block; padding: 1.05rem 1.15rem; border-radius: 20px; color: inherit; text-decoration: none; transition: background var(--dur-1) ease; }
.hp-card:hover { background: rgba(255,255,255,.05); }
.hp-ic { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .72rem; color: rgba(240,240,240,.85); margin-bottom: .65rem; }
.hp-card-t { font-family: var(--font-title); font-weight: 500; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; color: var(--white); }
.hp-card p { font-family: var(--font-display); font-weight: 300; font-size: .74rem; line-height: 1.5; color: rgba(240,240,240,.55); margin-top: .4rem; }
.hp-wide { display: flex; align-items: center; gap: 1rem; margin-top: auto; }
.hp-thumb { flex: none; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); }
.hp-thumb svg { width: 34px; height: 34px; }
.hp-thumb circle, .hp-thumb line { fill: none; stroke: rgba(240,240,240,.6); stroke-width: 1; }
.hp-plus { margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: var(--white); font-family: var(--font-mono); transition: background var(--dur-1) ease; }
.hp-card:hover .hp-plus { background: rgba(107,0,204,.55); }
/* titre héros : grotesque 500 + accent ITALIQUE SERIF (le marqueur luxe de la réf) */
.hero-h1 { font-family: var(--font-title); font-weight: 700; font-size: clamp(2.1rem, 4.2vw, 4rem); line-height: 1.04; letter-spacing: -.03em; }
.hero-sub { font-family: var(--font-display); font-weight: 300; font-size: clamp(.9rem, 1.2vw, 1.05rem); line-height: 1.6; color: var(--grey); margin-top: 1.2rem; max-width: 46ch; }
.hero-h1 .hl { display: block; overflow: hidden; padding-bottom: .1em; }
.hero-h1 .hli { display: block; }
.hero-h1 em { font-family: var(--font-title); font-style: normal; font-weight: 400; letter-spacing: -.03em; color: var(--white); }   /* même police que « Intelligence » du logo : Inter 400, droit, blanc (contraste de graisse avec la 1re ligne en 700, comme Black/Intelligence) */
@media (max-width: 560px){ .hero-h1 { font-size: 1.7rem; } }
.hero-h1 .dot { color: var(--white); }   /* point en blanc (plus de violet dans le titre) */
/* rangée d'actions du héros : 1 accent violet plein + 1 ghost hairline, boutons magnétiques */
.hero-actions { display: flex; align-items: center; justify-content: flex-start; margin-top: 1.8rem; }
/* CTA unique : pastille de verre fort, fine, avec l'icône dans son cercle (langage exact de la réf) */
.hbtn { display: inline-flex; align-items: center; gap: .85rem; font-family: var(--font-title); font-weight: 600; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--white); padding: .7rem .8rem .7rem 1.5rem; border-radius: 999px; will-change: transform; }
.hb-ic { width: 27px; height: 27px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .75rem; transition: transform var(--dur-1) var(--ease), background var(--dur-1) ease; }
.hbtn:hover .hb-ic { transform: translateX(3px); background: rgba(107,0,204,.55); }
.hbtn-p { transition: background .25s ease, box-shadow .25s ease; }
.hbtn-p:hover { background: rgba(107,0,204,.28); background-blend-mode: normal; box-shadow: inset 0 1px 1px rgba(255,255,255,.28), 0 6px 24px rgba(107,0,204,.38); }   /* même langage que .ops-back : se remplit de violet au survol (plus de mouvement magnétique) */
.hero-cue { position: absolute; bottom: 3.5vh; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .34em; color: var(--grey); text-transform: uppercase; opacity: 0; transition: opacity .6s ease; }
.hero-cue.show { opacity: 1; animation: cueBob 2s ease-in-out infinite; }
@keyframes cueBob { 0%,100%{ transform: translate(-50%, 0); } 50%{ transform: translate(-50%, 5px); } }
@media (max-width: 960px){
  .hero-inner.hp { grid-template-columns: 1fr; padding: 5rem 1.1rem 1.1rem; }
  .hp-side { display: none; }   /* mobile : le panneau principal seul, plein cadre */
}

/* chrome du hub : menu + CTA dans la nav */
.nav-menu { display: flex; align-items: center; gap: 1.4rem; margin: 0 auto; }
.nav-menu a { font-family: var(--font-title); font-weight: 500; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--white); text-decoration: none; opacity: .78; transition: opacity .25s ease, color .25s ease; }
.nav-menu a:hover { opacity: 1; color: var(--violet); }
.nav-right { display: flex; align-items: center; gap: 1.2rem; }
/* CTA nav = pilule VIOLET VERRE électrique : dégradé violet -> noir, reflet de verre en haut, halo discret */
.nav-cta { position: relative; font-family: var(--font-title); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--white); padding: .72rem 1.2rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
  background: linear-gradient(155deg, rgba(138,20,255,.9), rgba(107,0,204,.6) 46%, rgba(22,0,46,.75) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.32), inset 0 -6px 14px rgba(0,0,0,.35), 0 4px 20px rgba(122,10,230,.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform var(--dur-1) var(--ease), box-shadow .25s ease; will-change: transform; }
.nav-cta:hover { transform: scale(1.045); box-shadow: inset 0 1px 1px rgba(255,255,255,.38), inset 0 -6px 14px rgba(0,0,0,.3), 0 6px 28px rgba(138,20,255,.5); }
/* (nav-cta toujours visible — plus de gate is-hub) */
/* menu déroulant Programmes */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-t { font-family: var(--font-title); font-weight: 500; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--white); opacity: .78; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; padding: 0; line-height: 1; transition: opacity .25s ease, color .25s ease; }
.nav-drop:hover .nav-drop-t, .nav-drop-t[aria-expanded="true"] { opacity: 1; color: var(--violet); }
.nav-drop-t .caret { font-size: .7em; transition: transform .25s ease; }
.nav-drop-t[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-drop-menu { position: absolute; top: calc(100% + .95rem); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 272px; display: flex; flex-direction: column; padding: .5rem; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(12,12,15,.62), rgba(5,5,7,.72)); -webkit-backdrop-filter: blur(50px) saturate(1.1); backdrop-filter: blur(50px) saturate(1.1); border: none; box-shadow: 0 26px 60px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.035); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 50; }
.nav-drop-menu::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none; background: conic-gradient(from var(--lg-a), rgba(255,255,255,.12) 0deg, rgba(255,255,255,.52) 30deg, rgba(255,255,255,.08) 86deg, rgba(255,255,255,.03) 165deg, rgba(255,255,255,.38) 214deg, rgba(255,255,255,.07) 276deg, rgba(255,255,255,.12) 360deg); animation: lgEdge 9s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.nav-drop:hover .nav-drop-menu, .nav-drop-menu.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop-menu a { position: relative; z-index: 1; opacity: 1; text-decoration: none; padding: .82rem .9rem; border-radius: 11px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: background .2s ease; }
.nav-drop-menu a:hover, .nav-drop-menu a.here { background: rgba(255,255,255,.05); }
.nav-drop-menu a .wm { font-family: var(--font-title); font-weight: 400; letter-spacing: -.02em; text-transform: none; color: var(--white); line-height: 1; font-size: 1rem; }
.nav-drop-menu a .wm b { font-weight: 700; }
.nav-drop-menu a .wm .r { font-size: .42em; vertical-align: super; opacity: .7; margin-left: .16em; }
.nav-drop-menu a .ctag { display: flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-weight: 500; font-size: .46rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }
.nav-drop-menu a .ctag .d { width: 6px; height: 6px; border-radius: 50%; background: var(--grey); flex: none; }
.nav-drop-menu a .ctag.act { color: #8A14FF; }
.nav-drop-menu a .ctag.act .d { background: #8A14FF; box-shadow: 0 0 8px rgba(138,20,255,.8); }
/* blocs offre cliquables -> pages produit */
a.ab-tier { text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .25s var(--ease), border-color .25s var(--ease); }
a.ab-tier:hover { box-shadow: 0 14px 40px rgba(107,0,204,.28); }
@media (max-width: 720px){ .nav-menu { display: none; } }
/* ===== [menu mobile] pilule 3 éléments + panneau catégorisé — MOBILE UNIQUEMENT (desktop strictement inchangé) ===== */
.nav-mburger, .nav-msheet { display: none; }
@media (max-width: 720px) {
  nav.nav { gap: .55rem; padding: .4rem .5rem .4rem .95rem; }
  .nav-mark { margin-right: auto; }                 /* logo complet (monogramme + wordmark) à gauche, le reste poussé à droite */
  .nav-bi { display: inline; font-size: .92rem; }   /* wordmark BlackIntelligence RÉAFFICHÉ sur mobile, réduit pour tenir + équilibrer la pilule */
  .nav-ic { margin-right: .5rem; }
  @media (max-width: 390px) { .nav-bi { font-size: .8rem; } .nav-ic { margin-right: .42rem; } .nav-cta { padding: .58rem .8rem; } }  /* iPhone SE : wordmark rétréci plutôt que retiré */
  .nav-cta-more { display: none; }                  /* "Accéder" au lieu de "Accéder maintenant" */
  .nav-cta { padding: .6rem .9rem; font-size: .64rem; }
  .nav-mburger { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 31px; padding: 0 .95rem; flex: none; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045); font-family: var(--font-title); font-size: .64rem; font-weight: 600; letter-spacing: .04em; line-height: 1; text-transform: uppercase; color: var(--white); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s ease, border-color .2s ease, color .2s ease; }
  .nav-mburger::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }   /* zone tactile 44px sans changer la hauteur visuelle */
  .nav-mburger:active { background: rgba(138,20,255,.24); border-color: rgba(138,20,255,.5); }
  .nav-mburger[aria-expanded="true"] { background: rgba(138,20,255,.2); border-color: rgba(138,20,255,.5); color: var(--white); }
  .nav-msheet { display: block; position: fixed; inset: 0; z-index: 10000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s; }
  .nav-msheet.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-msheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .nav-msheet-panel { position: absolute; top: 4.8rem; left: 1.1rem; right: 1.1rem; max-height: calc(100dvh - 6.2rem); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.15rem 1.05rem 1.25rem; border-radius: 22px; background: linear-gradient(180deg, rgba(14,14,18,.9), rgba(6,6,9,.94)); -webkit-backdrop-filter: blur(50px) saturate(1.15); backdrop-filter: blur(50px) saturate(1.15); box-shadow: 0 30px 70px rgba(0,0,0,.66), inset 0 1px 1px rgba(255,255,255,.12); transform: translateY(-10px); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
  .nav-msheet.open .nav-msheet-panel { transform: translateY(0); }
  .nav-msheet-panel::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px; pointer-events:none; z-index:0; background: conic-gradient(from var(--lg-a), rgba(255,255,255,.12) 0deg, rgba(255,255,255,.5) 30deg, rgba(255,255,255,.08) 86deg, rgba(255,255,255,.03) 165deg, rgba(255,255,255,.4) 214deg, rgba(255,255,255,.08) 276deg, rgba(255,255,255,.12) 360deg); animation: lgEdge 9s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
  .nav-msheet-x { position: absolute; top: .65rem; right: .65rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: var(--white); font-size: .95rem; line-height: 1; cursor: pointer; z-index: 3; -webkit-tap-highlight-color: transparent; }
  .nav-msec { position: relative; z-index: 1; }
  .nav-msec + .nav-msec { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.07); }
  .nav-msec-h { display: block; font-family: var(--font-mono); font-size: .54rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--grey); margin: 0 .35rem .5rem; }
  .nav-msheet-panel a { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; min-height: 52px; padding: .55rem .85rem; border-radius: 13px; text-decoration: none; color: var(--white); -webkit-tap-highlight-color: transparent; transition: background .2s ease; }
  .nav-msheet-panel a:active { background: rgba(138,20,255,.16); }
  .nav-msec:not(.nav-msec-txt) a { justify-content: space-between; }
  .nav-msec-txt a { justify-content: flex-start; font-family: var(--font-title); font-weight: 500; font-size: .98rem; }
  .nav-msec .wm { font-family: var(--font-title); font-weight: 400; letter-spacing: -.02em; color: var(--white); font-size: 1.05rem; white-space: nowrap; }
  .nav-msec .wm .r { font-size: .42em; vertical-align: super; opacity: .7; margin-left: .16em; }
  .nav-msec .wm-fp { font-family: 'Bebas Neue','Inter',sans-serif; font-weight: 700; letter-spacing: .04em; font-size: 1.15rem; }
  .nav-msec .wm-fp .r { font-family: 'Inter',sans-serif; font-weight: 400; font-size: .3em; letter-spacing: 0; }
  .nav-msec-tag { display: flex; align-items: center; gap: .45em; font-family: var(--font-mono); font-size: .48rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); white-space: nowrap; flex: none; }
  .nav-msec-tag .d { width: 6px; height: 6px; border-radius: 50%; background: var(--grey); flex: none; }
  .nav-msec-tag.act { color: var(--violet); } .nav-msec-tag.act .d { background: var(--violet); box-shadow: 0 0 8px rgba(138,20,255,.8); }
  .nav-mlogin { justify-content: center; gap: .55rem; margin-top: 1.2rem; font-family: var(--font-title); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(160deg, rgba(138,20,255,.24), rgba(107,0,204,.1) 60%, rgba(255,255,255,.02)); border: 1px solid rgba(138,20,255,.42); }
  .nav-mlogin svg { width: 17px; height: 17px; }
  .nav-mlogin:active { background: linear-gradient(160deg, rgba(138,20,255,.36), rgba(107,0,204,.16)); }
}

/* coordonnées de descente (HUD bas-gauche) */
.hud-coords { position: fixed; left: 2.4rem; bottom: 1.5rem; z-index: 190; font-family: var(--font-mono); font-size: .54rem; letter-spacing: .26em; text-transform: uppercase; color: var(--grey-dim); opacity: 0; pointer-events: none; transition: opacity .7s ease; font-variant-numeric: tabular-nums; }
body.is-hub .hud-coords { opacity: 1; }

/* ===== CADRE DE DESCENTE : HUD de profondeur + strates ===== */
#depthHud { position: fixed; left: 2.1rem; top: 50%; transform: translateY(-50%); z-index: 180; display: flex; align-items: center; gap: 1rem; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
body.in-strata #depthHud { opacity: 1; }
.dh-read { display: flex; flex-direction: column; gap: .4rem; text-align: right; align-items: flex-end; width: 96px; flex: none; }
.dh-depth { font-family: var(--font-title); font-size: 1.05rem; color: var(--violet); letter-spacing: .04em; }
.dh-label { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); max-width: 10ch; line-height: 1.5; }
.dh-vein { position: relative; width: 1px; height: 42vh; background: linear-gradient(180deg, transparent, var(--grey-dim) 10%, var(--grey-dim) 90%, transparent); }
.dh-marker { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 14px 3px rgba(107,0,204,.85); transform: translate(-50%,-50%); }
.dh-marker::before { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 56px; transform: translate(-50%,-50%); background: linear-gradient(180deg, transparent, rgba(107,0,204,.6), transparent); border-radius: 2px; filter: blur(1px); }
.dh-marker.flare { animation: dhFlare .55s ease; }
@keyframes dhFlare { 0%{ box-shadow: 0 0 14px 3px rgba(107,0,204,.85); } 40%{ box-shadow: 0 0 28px 8px rgba(107,0,204,1); transform: translate(-50%,-50%) scale(1.55); } 100%{ box-shadow: 0 0 14px 3px rgba(107,0,204,.85); transform: translate(-50%,-50%) scale(1); } }
.stratum.energized .stratum-ix { animation: stratumPulse .8s ease; }
@keyframes stratumPulse { 0%{ color: var(--violet); text-shadow: none; } 35%{ color: #fff; text-shadow: 0 0 16px rgba(107,0,204,.9); } 100%{ color: var(--violet); text-shadow: none; } }

.stratum { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; padding: 15vh var(--gutter) 10vh 10rem; background: transparent; }
/* couture entre strates : fine ligne argentée, rythme la descente */
.stratum::before { content: ''; position: absolute; top: 0; left: 2.4rem; right: 2.4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--silver-line), transparent); }
.stratum-in { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.5,0,.2,1); }
.stratum.shown .stratum-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .stratum-in { opacity: 1; transform: none; transition: none; } }
.stratum-in { max-width: 900px; }
.stratum-ix { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .38em; color: var(--violet); text-transform: uppercase; margin-bottom: 1.7rem; }
.stratum h2 { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.35rem, 3.1vw, 2.3rem); line-height: 1.12; letter-spacing: 0; text-transform: uppercase; }
.stratum-mech { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--grey); margin-top: 1.8rem; max-width: 52ch; line-height: 2; }
.stratum-mech b { color: var(--white); font-weight: 500; }
.stratum-mech .todo { color: var(--violet); letter-spacing: .14em; }
/* ===== STRATE 02 — L'INSTRUMENT : déclassification (titre massif + flux déchiffré) ===== */
.stratum.inst { padding-top: 16vh; padding-bottom: 12vh; justify-content: center; overflow: hidden; }
.inst-glow { position: absolute; left: 2%; top: 24%; width: 72vw; max-width: 1100px; height: 58vh; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 28% 50%, rgba(107,0,204,.13), rgba(107,0,204,.04) 42%, transparent 70%); filter: blur(24px); }
/* fond vidéo : l'œil serpent derrière « Voir Avant. » — élément LIBRE (taille + position réglables via _insttool.html).
   --w = largeur · --x/--y = centre en % de la section · --scrim = voile noir. Bords fondus dans le noir (vignette, jamais de rectangle net). */
.inst-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --w: 37%; --x: 66%; --y: 50%; --scrim: .29; }
.inst-eye { position: absolute; width: var(--w); aspect-ratio: 4 / 3; left: var(--x); top: var(--y); transform: translate(-50%, -50%); opacity: 0; transition: opacity 1.6s ease; will-change: opacity; }
.inst-media.on .inst-eye { opacity: 1; }
/* black-crush : écrase le gris foncé de la peau vers #000 pour qu'elle fonde dans le fond noir, l'œil violet reste lumineux */
.inst-eye video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.15); }
/* fondu vers le NOIR PUR (#000 = --black réel du fond) pour gommer le rectangle de la vidéo et fondre l'œil dans le background.
   4 bords + vignette elliptique resserrée sur l'œil + voile réglable. */
.inst-eye::after { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, #000, rgba(0,0,0,0) 28%),
  linear-gradient(0deg,   #000, rgba(0,0,0,0) 28%),
  linear-gradient(90deg,  #000, rgba(0,0,0,0) 24%),
  linear-gradient(270deg, #000, rgba(0,0,0,0) 24%),
  radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 34%, rgba(0,0,0,.5) 62%, #000 88%),
  linear-gradient(rgba(0,0,0,var(--scrim)), rgba(0,0,0,var(--scrim))); }
@media (prefers-reduced-motion: reduce){ .inst-eye { transition: none; } }
.inst-grid { position: relative; z-index: 1; width: 100%; max-width: 1180px; }
.inst-tag { display: flex; align-items: center; gap: 1rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--grey); margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.inst-tag-n { color: var(--violet); }
.inst-tag-rule { width: clamp(40px, 6vw, 90px); height: 1px; background: linear-gradient(90deg, var(--violet), transparent); }
.inst-mega { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; line-height: .96; letter-spacing: -0.025em; font-size: clamp(3rem, 12vw, 9rem); color: var(--white); }
.inst-line { display: block; overflow: hidden; padding-bottom: .1em; }
.inst-line-i { display: block; }
.inst-accent { color: var(--violet); }
.inst-decrypt { font-family: var(--font-display); font-weight: 300; font-size: clamp(.9rem, 1.3vw, 1.05rem); line-height: 1.6; color: var(--grey); margin-top: clamp(1.6rem, 3vw, 2.6rem); max-width: 42ch; min-height: 3.2em; }   /* même police que le sous-titre du hero (.hero-sub) : Inter 300 gris */
.inst-meta { display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 4vw, 3.4rem); margin-top: clamp(2rem, 4vw, 3.4rem); }
.inst-stat { display: flex; flex-direction: column; gap: .35rem; }
.inst-stat .ik { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--violet); }
.inst-stat .iv { font-family: var(--font-display); font-size: .95rem; color: var(--white); letter-spacing: .01em; }
.inst-redact { color: transparent; background: rgba(240,240,240,.16); border-radius: 1px; padding: .1em .4em; user-select: none; }
@media (prefers-reduced-motion: reduce){ .inst-glow { filter: none; opacity: .55; } }
@media (max-width: 720px){
  .stratum.inst { padding-left: 2rem; padding-right: 2rem; }
  .inst-decrypt { max-width: none; }
  .inst-meta { gap: 1.4rem 2rem; }
}
/* ===================== STRATES 03–06 ===================== */
/* base partagée : étiquette, titre massif, ligne masquée */
.s-tag { display: flex; align-items: center; gap: 1rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--grey); margin-bottom: clamp(1.3rem, 3vw, 2.2rem); }
.s-tag-n { color: var(--violet); }
.s-rule { display: inline-block; width: clamp(40px, 6vw, 90px); height: 1px; background: linear-gradient(90deg, var(--violet), transparent); }
.s-mega { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; line-height: .96; letter-spacing: -0.025em; color: var(--white); }
.s-line { display: block; overflow: hidden; padding-bottom: .1em; }
.s-line-i { display: block; }
.s-accent { color: var(--violet); }
/* monogramme : PEU d'occurrences, mais VISIBLES (héros + nav) — les mini-signatures illisibles ont été retirées */
/* 03 · TON ANGLE MORT — diagnostic occulté + compteurs */
.stratum.bs { padding-top: 14vh; padding-bottom: 12vh; justify-content: center; overflow: hidden; }
.bs-scan { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(rgba(107,0,204,0) 0%, rgba(107,0,204,.06) 50%, rgba(107,0,204,0) 100%); background-size: 100% 240px; background-repeat: no-repeat; opacity: 0; }
.stratum.bs.ev .bs-scan { opacity: 1; animation: bsScan 6s linear infinite; }
@keyframes bsScan { from { background-position: 0 -260px; } to { background-position: 0 130vh; } }
.bs-grid { position: relative; z-index: 1; width: 100%; max-width: 1180px; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.bs-mega { font-size: clamp(2.6rem, 9vw, 7.5rem); }
.bs-sub { font-family: var(--font-display); font-weight: 300; font-size: clamp(.95rem, 1.4vw, 1.1rem); line-height: 1.6; color: var(--grey); margin-top: clamp(1.4rem, 3vw, 2.4rem); max-width: 40ch; }   /* aligné sur .hero-sub */
.bs-right { display: flex; flex-direction: column; gap: clamp(1.1rem, 2.4vw, 1.7rem); }
.bs-stat { border-left: 1px solid var(--violet-line); padding-left: 1.1rem; }
.bs-num { font-family: var(--font-title); font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--white); font-variant-numeric: tabular-nums; }
.bs-lab { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); margin-top: .35rem; }
.bs-gaugewrap { position: relative; margin-top: .4rem; width: clamp(170px, 70%, 230px); }
.bs-gauge { width: 100%; height: auto; display: block; overflow: visible; }
.bs-gauge [stroke] { vector-effect: non-scaling-stroke; }
.bs-gauge-bg { stroke: rgba(240,240,240,.12); stroke-width: 3; stroke-linecap: round; }
.bs-gauge-fg { stroke: var(--violet); stroke-width: 3; stroke-linecap: round; }
.bs-gauge-lab { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.bs-gauge-v { display: block; font-family: var(--font-title); font-size: 1.4rem; color: var(--white); font-variant-numeric: tabular-nums; }
.bs-gauge-k { display: block; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--violet); margin-top: .2rem; }
/* 04 · POUR QUI / PAS POUR QUI — le tri, lame centrale */
.stratum.qz { padding-top: 13vh; padding-bottom: 12vh; justify-content: center; }
.qz-head { width: 100%; max-width: 1180px; }
.qz-mega { font-size: clamp(1.9rem, 5.4vw, 4rem); }
.qz-split { width: 100%; max-width: 1180px; margin-top: clamp(2.4rem, 5vw, 4rem); display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.qz-blade { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, var(--violet), transparent); transform-origin: 50% 50%; }
.qz-col-h { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.4rem; }
.qz-col-t { font-family: var(--font-title); font-size: clamp(1.1rem, 2vw, 1.6rem); text-transform: uppercase; letter-spacing: .02em; }
.qz-col-s { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; }
.qz-in .qz-col-t { color: var(--white); }
.qz-in .qz-col-s { color: var(--violet); }
.qz-out { opacity: .5; }
.qz-out .qz-col-t { color: var(--grey); }
.qz-out .qz-col-s { color: var(--grey-dim); }
.qz-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.qz-list li { font-family: var(--font-display); font-size: clamp(.9rem, 1.3vw, 1.05rem); line-height: 1.4; color: var(--white); padding-left: 1.5rem; position: relative; }
.qz-in .qz-list li::before { content: '+'; position: absolute; left: 0; color: var(--violet); }
.qz-struck li { color: var(--grey); }
.qz-struck li::before { content: '×'; position: absolute; left: 0; color: var(--grey-dim); }
/* 05 · QUESTIONS SCELLÉES — dossiers classifiés, déclassification au clic */
.stratum.dz { padding-top: 13vh; padding-bottom: 12vh; justify-content: center; }
.dz-head { width: 100%; max-width: 1040px; }
.dz-mega { font-size: clamp(1.9rem, 5.4vw, 4rem); }
.dz-files { width: 100%; max-width: 1040px; margin-top: clamp(2rem, 4vw, 3.2rem); border-top: 1px solid var(--violet-line); }
.dz-file { border-bottom: 1px solid var(--violet-line); }
.dz-q { width: 100%; background: none; border: 0; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; padding: 1.5rem .2rem; text-align: left; color: inherit; }
.dz-q-n { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .2em; color: var(--violet); }
.dz-q-t { font-family: var(--font-display); font-size: clamp(1rem, 1.7vw, 1.35rem); color: var(--white); }
.dz-seal { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .24em; text-transform: uppercase; color: var(--violet); border: 1px solid var(--violet-line); padding: .25em .6em; border-radius: 2px; white-space: nowrap; transition: color .3s, border-color .3s; }
.dz-file.open .dz-seal { color: var(--grey-dim); border-color: rgba(240,240,240,.12); }
.dz-a { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.5,0,.2,1); }
.dz-a p { font-family: var(--font-mono); font-size: clamp(.82rem, 1.3vw, .98rem); line-height: 1.65; color: var(--grey); padding: 0 .2rem 1.6rem; max-width: 62ch; }
.dz-file.open .dz-a p { color: var(--white); }
/* 06 · L'ABÎME / L'OFFRE — remontée de lumière + 2 accès */
.stratum.ab { padding-top: 14vh; padding-bottom: 16vh; padding-left: var(--gutter); padding-right: var(--gutter); justify-content: center; align-items: center; overflow: hidden; text-align: center; }
.ab-rise { position: absolute; left: 50%; bottom: -12%; width: 120vw; height: 72vh; transform: translateX(-50%); pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 100%, rgba(107,0,204,.2), rgba(107,0,204,.05) 38%, transparent 62%); filter: blur(22px); opacity: 0; transition: opacity 1.2s ease; }
.stratum.ab.ev .ab-rise { opacity: 1; }
.ab-grid { position: relative; z-index: 1; width: 100%; max-width: 1100px; margin: 0 auto; text-align: center; }
.ab-grid .s-tag { justify-content: center; }
.ab-grid .cf-card { text-align: left; }   /* la section est centrée, mais le CONTENU des cartes reste aligné à gauche (produit) */
.ab-mega { font-size: clamp(2.4rem, 8vw, 6.5rem); }
.ab-lead { font-family: var(--font-display); font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--grey); margin-top: clamp(1.4rem, 3vw, 2.2rem); max-width: 52ch; margin-left: auto; margin-right: auto; }   /* aligné sur .hero-sub, centré */
.ab-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 1.8rem); margin-top: clamp(2.2rem, 4vw, 3.4rem); }
.ab-tier { border-radius: 20px; padding: clamp(1.4rem, 2.4vw, 2rem); }
/* l'accès vedette : le même anneau lumineux, mais VIOLET — la seule carte du site qui a droit à ça */
.ab-tier-feat::before { background: linear-gradient(180deg, rgba(150,80,230,.6) 0%, rgba(107,0,204,.25) 20%, transparent 40%, transparent 60%, rgba(107,0,204,.25) 80%, rgba(150,80,230,.6) 100%); }
.ab-tier-h { display: flex; flex-direction: column; gap: .3rem; }
.ab-tier-k { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: var(--violet); }
.ab-tier-n { font-family: var(--font-title); font-size: clamp(1.1rem, 1.8vw, 1.5rem); text-transform: uppercase; color: var(--white); }
.ab-tier-d { font-family: var(--font-display); font-size: .9rem; line-height: 1.5; color: var(--grey); margin: .9rem 0 1.4rem; }
.ab-tier-p { font-family: var(--font-title); font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--white); font-variant-numeric: tabular-nums; }
.ab-tier-p span { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; color: var(--grey); text-transform: uppercase; }
.ab-cta { display: inline-flex; align-items: center; gap: .85rem; margin-top: clamp(2rem, 4vw, 3rem); font-family: var(--font-title); font-weight: 600; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--white); padding: .75rem .85rem .75rem 1.6rem; border-radius: 999px; text-decoration: none; will-change: transform; }
.ab-cta:hover .hb-ic { transform: translateX(3px); background: rgba(107,0,204,.55); }
/* ===== COVERFLOW des programmes (#st6) ===== */
.cf { position: relative; max-width: 1180px; margin: clamp(2.4rem,4vw,3.6rem) auto 0; }
.cf-stage { position: relative; height: clamp(360px,48vh,450px); perspective: 1800px; transform-style: preserve-3d; }
.cf-card { position: absolute; top: 50%; left: 50%; width: clamp(244px,25vw,316px); height: clamp(336px,44vh,416px); margin: 0; border-radius: 16px; cursor: pointer; text-decoration: none; color: inherit; display: flex; flex-direction: column; padding: clamp(1.4rem,2vw,1.9rem); transform-origin: center center; backface-visibility: hidden; transition: transform .72s cubic-bezier(.5,0,.2,1), opacity .72s ease, box-shadow .5s ease; will-change: transform, opacity; }
.cf-card.is-center { transform: translate(-50%,-50%) translateZ(70px) scale(1); opacity: 1; z-index: 4; cursor: default; box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 60px rgba(107,0,204,.18); }
.cf-card.is-right  { transform: translate(-50%,-50%) translateX(64%) translateZ(-150px) rotateY(-40deg) scale(.86); opacity: .4; z-index: 3; }
.cf-card.is-left   { transform: translate(-50%,-50%) translateX(-64%) translateZ(-150px) rotateY(40deg) scale(.86); opacity: .4; z-index: 3; }
.cf-card.is-hidden { transform: translate(-50%,-50%) translateZ(-320px) scale(.6); opacity: 0; z-index: 1; pointer-events: none; }
.cf-card.is-left:hover, .cf-card.is-right:hover { opacity: .62; }
.cf-cardtag { display: flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--grey); }
.cf-cardtag .d { width: 6px; height: 6px; border-radius: 50%; background: var(--grey); }
.cf-card.actif .cf-cardtag { color: var(--violet); } .cf-card.actif .cf-cardtag .d { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.cf-name { font-family: var(--font-title); font-weight: 400; letter-spacing: -.02em; font-size: clamp(1.5rem,2.4vw,2rem); color: var(--white); margin-top: 1.1rem; line-height: 1; }
.cf-name b { font-weight: 700; } .cf-name .r { font-size: .42em; vertical-align: super; opacity: .7; margin-left: .16em; }
.cf-line { font-family: var(--font-display); font-weight: 300; font-size: clamp(.86rem,1.1vw,.98rem); line-height: 1.55; color: var(--grey); margin-top: 1rem; }
.cf-foot { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--silver-line); }
.cf-price { font-family: var(--font-title); font-weight: 700; font-size: 1.3rem; color: var(--white); }
.cf-price span { font-family: var(--font-mono); font-weight: 400; font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-left: .5em; }
.cf-go { display: inline-block; margin-top: .9rem; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--violet); opacity: 0; transition: opacity .5s ease .1s; }
.cf-card.is-center .cf-go { opacity: 1; }
.cf-nav { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: clamp(1.8rem,3vw,2.6rem); }
.cf-arrow { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); border: 1px solid var(--violet-line); color: var(--white); cursor: pointer; font-size: 1.1rem; transition: background .25s ease, border-color .25s ease, transform .25s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cf-arrow:hover { background: rgba(107,0,204,.22); border-color: var(--violet); transform: scale(1.06); }
.cf-dots { display: flex; align-items: center; gap: .55rem; }
.cf-dots button { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: rgba(240,240,240,.22); cursor: pointer; transition: background .25s, transform .25s; }
.cf-dots button.on { background: var(--violet); transform: scale(1.25); }
@media (max-width: 600px){ .cf-card.is-left, .cf-card.is-right { opacity: .2; } }
/* strate 04 : arrivée centrée (chaque partie arrive différemment) */
.qz-head { text-align: center; }
.qz-head .s-tag { justify-content: center; }
/* pied de page classifié */
/* ===== FOOTER site-wide (multi-colonnes) ===== */
.bp-foot { position: relative; z-index: 1; border-top: 1px solid var(--silver-line); padding: clamp(3rem,6vw,5rem) var(--gutter) clamp(1.8rem,3vw,2.6rem); }
.ft-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(2rem,4vw,3.6rem) clamp(1.5rem,3vw,3rem); max-width: 1280px; margin: 0 auto; }
.ft-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1.15rem; }
.ft-logo { text-decoration: none; display: inline-block; font-family: var(--font-title); font-weight: 300; font-size: 1.35rem; letter-spacing: -.01em; color: var(--white); }
.ft-logo b { font-weight: 700; }
.ft-tag { font-family: var(--font-display); font-weight: 300; font-size: .9rem; line-height: 1.6; color: var(--grey); max-width: 36ch; }
.ft-social { display: flex; gap: .9rem; margin-top: .2rem; }
.ft-social a { color: var(--grey); display: flex; transition: color var(--dur-1) ease, transform var(--dur-1) ease; }
.ft-social a:hover { color: var(--violet); transform: translateY(-2px); }
.ft-social svg { width: 18px; height: 18px; }
.ft-col { display: flex; flex-direction: column; gap: .8rem; }
.ft-h { font-family: var(--font-mono); font-weight: 500; font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--grey-dim); margin-bottom: .35rem; }
.ft-col a { font-family: var(--font-display); font-weight: 300; font-size: .92rem; color: var(--grey); text-decoration: none; width: -moz-fit-content; width: fit-content; transition: color var(--dur-1) ease; }
.ft-col a:hover { color: var(--violet); }
.ft-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; max-width: 1280px; margin: clamp(2.4rem,5vw,3.6rem) auto 0; padding-top: 1.5rem; border-top: 1px solid var(--silver-line); font-family: var(--font-mono); font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-dim); }
.ft-bottom a { color: var(--grey); text-decoration: none; transition: color var(--dur-1) ease; }
.ft-bottom a:hover { color: var(--violet); }
.ft-disclaimer { max-width: 1280px; margin: 1.5rem auto 0; font-family: var(--font-display); font-weight: 300; font-size: .72rem; line-height: 1.7; color: var(--grey-dim); }
@media (max-width: 860px){ .ft-top { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 520px){ .ft-top { grid-template-columns: 1fr; } .ft-bottom { flex-direction: column; align-items: flex-start; } }
/* ===== COUCHE PREMIUM — curseur, bande monumentale, profondeur, arrivées d'art ===== */
/* curseur : point violet + anneau argenté à inertie (signature des sites de studio) */
/* (curseur custom SUPPRIMÉ — curseur système normal) */
/* voile d'entrée : le monogramme animé se dessine en boucle pendant le chargement, puis le voile s'efface */
#loader { position: fixed; inset: 0; z-index: 99995; background: #000000; display: flex; align-items: center; justify-content: center; transition: opacity .65s ease, visibility .65s; }   /* NOIR PUR : match le noir AFFICHÉ de la vidéo (plage limitée) — plus de carré gris autour du logo */
#loader.off { opacity: 0; visibility: hidden; }
.loader-in { width: min(48vw, 520px); position: relative; }
.loader-in video { width: 100%; height: auto; display: block; background: #000000; }   /* logo d'entrée, sur NOIR pur */
.loader-by { position: absolute; left: 86.4%; top: 78.4%; transform: translate(-50%,-50%) scale(.83); display: flex; align-items: center; gap: .45rem; white-space: nowrap; opacity: 0; animation: loaderBy 3.37s ease-in-out .5s both; }   /* position/taille via outil dev (x:86.4 · y:78.4 · scale:.83) ; timing calé sur le logo BI, décalé de +0,5s (apparition ET disparition une demi-seconde plus tard) */
.loader-by span { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .18em; color: var(--white); }   /* « by » en blanc */
.loader-by img { height: 11px; width: auto; }
@keyframes loaderBy { 0%,30% { opacity: 0; } 45% { opacity: 1; } 72.3% { opacity: 1; } 84.3%,100% { opacity: 0; } }   /* apparition +0,5s ; disparition ajustée (fondu ~2,94-3,34s) */
/* bande typographique monumentale : texte creux qui défile entre le héros et la descente */
.band { position: relative; z-index: 1; overflow: hidden; padding: clamp(2rem, 6vh, 4.5rem) 0; }
.band-in { display: inline-block; white-space: nowrap; font-family: var(--font-title); font-size: clamp(3.2rem, 9vw, 8rem); text-transform: uppercase; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px rgba(201,203,209,.2); will-change: transform; animation: bandMove 44s linear infinite; animation-play-state: paused; }
.band.on .band-in { animation-play-state: running; }
.band-in b { color: var(--violet); -webkit-text-stroke: 0; font-weight: 400; }
@keyframes bandMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .band-in { animation: none; } }
/* chiffres monumentaux : numéro de strate géant, creux, en profondeur (parallaxe) */
.snum { position: absolute; right: -1.5%; top: 4%; z-index: 0; font-family: var(--font-title); font-size: clamp(12rem, 28vw, 27rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(240,240,240,.05); pointer-events: none; user-select: none; }
.stratum.qz, .stratum.dz { overflow: hidden; }
/* le tri : la rature se DESSINE sur la colonne rejetée */
.qz-struck li .stk { position: absolute; left: 1.5rem; right: 6%; top: .72em; height: 1px; background: rgba(240,240,240,.55); transform: scaleX(0); transform-origin: 0 50%; }
@media (prefers-reduced-motion: reduce){ .qz-struck li .stk { transform: none; } }
/* l'offre émerge du fond en 3D */
/* cartes offre : à plat, plus de bascule 3D (évite qu'elles restent inclinées) */
/* le titre de l'instrument s'assemble lettre par lettre */
.inst-mega .ch { display: inline-block; will-change: transform; }
@media (prefers-reduced-motion: reduce){ .stratum.bs.ev .bs-scan { animation: none; opacity: .3; } }
@media (max-width: 860px){
  .bs-grid, .ab-tiers { grid-template-columns: 1fr; }
  .qz-split { grid-template-columns: 1fr; }
  .qz-blade { display: none; }
  .stratum.bs, .stratum.qz, .stratum.dz, .stratum.ab { padding-left: 2rem; padding-right: 2rem; }
}

/* ===== STRATE 01 — SALLE D'OPÉRATIONS : console holographique (carte tactique) ===== */
.stratum.ops { padding-top: 11vh; padding-bottom: 5vh; }
/* lueur d'ambiance derrière la console : nourrit le flou des panneaux de verre (comme au héros) */
.stratum.ops::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(36% 44% at 88% 32%, rgba(107,0,204,.09), transparent 60%),
  radial-gradient(42% 36% at 8% 88%, rgba(74,0,160,.06), transparent 56%); }
.ops-deck { display: grid; grid-template-columns: 1fr 280px; gap: 1.2rem; max-width: 1420px; margin-top: 1.8rem; align-items: stretch; }
/* la carte devient une CARTE DE VERRE : anneau lumineux lg-l + intérieur sombre translucide (contraste des tracés préservé) */
.ops-map { position: relative; min-height: 64vh; border-radius: 20px; background: radial-gradient(ellipse at 50% 58%, rgba(20,20,23,.82), rgba(6,6,7,.94) 72%); overflow: hidden; perspective: 1300px; }   /* fond NEUTRE (plus de teinte violette) */
/* console : le MÊME anneau sur les deux panneaux — haut lumineux, bas discret mais défini (cohérence carte/dossier) */
.ops-map::before, .ops-dossier::before { z-index: 5; background: conic-gradient(from var(--lg-a), rgba(255,255,255,.10) 0deg, rgba(255,255,255,.50) 30deg, rgba(255,255,255,.08) 86deg, rgba(255,255,255,.03) 165deg, rgba(255,255,255,.34) 214deg, rgba(255,255,255,.06) 276deg, rgba(255,255,255,.10) 360deg); }   /* anneau de verre ANIMÉ sur la map + le dossier (au-dessus du contenu) */
.ops-map-3d { position: absolute; inset: 0; transform-style: preserve-3d; z-index: 2; transform: rotateX(2deg); }
.ops-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.wm-sphere { fill: none; stroke: transparent; stroke-width: .6; }   /* contour d'ellipse de la projection masqué (l'« anneau » qui coupait le coin haut-gauche) */
.wm-grat { fill: none; stroke: rgba(214,218,228,.045); stroke-width: .3; }   /* grille fine, discrète */
.wm-country { fill: url(#wmDots); stroke: rgba(214,218,228,.10); stroke-width: .3; }   /* terres = trame de points (scan satellite) */
.wm-border { fill: none; stroke: rgba(220,224,232,.5); stroke-width: .45; }   /* frontières nettes en blanc */
.ops-ticker { position: absolute; left: 1rem; right: 1rem; bottom: 2.5rem; font-family: var(--font-mono); font-size: .5rem; letter-spacing: .12em; color: rgba(155,123,224,.9); text-transform: uppercase; z-index: 5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opd-gauge { margin: .55rem 0; }
.opd-gauge .g-k { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .5rem; letter-spacing: .1em; color: var(--grey-dim); text-transform: uppercase; margin-bottom: .35rem; }
.opd-gauge .g-bar { height: 3px; background: rgba(240,240,240,.08); position: relative; overflow: hidden; }
.opd-gauge .g-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--violet); box-shadow: 0 0 8px var(--violet); transition: width .8s cubic-bezier(.5,0,.2,1); }
/* télémétrie live */
.ops-tel { position: absolute; left: 1rem; top: 3.1rem; z-index: 5; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.ops-tel .t-it { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .14em; color: var(--grey); text-transform: uppercase; }
.ops-tel .t-it b { color: var(--violet); font-weight: 500; }
/* curseur de visée + coordonnées live */
.ops-xh { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .2s; }
.ops-xh.on { opacity: 1; }
.xh-h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(155,123,224,.32); }
.xh-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(155,123,224,.32); }
.xh-dot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border: 1px solid var(--violet); border-radius: 50%; box-shadow: 0 0 9px rgba(107,0,204,.7); }
.xh-coord { position: absolute; transform: translate(13px, 11px); font-family: var(--font-mono); font-size: .5rem; letter-spacing: .08em; color: #fff; background: rgba(8,8,8,.82); border: 1px solid rgba(107,0,204,.5); padding: .2rem .42rem; white-space: nowrap; }
/* séquence de démarrage */
.ops-scanline { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: linear-gradient(90deg, transparent, var(--violet), transparent); box-shadow: 0 0 16px var(--violet); opacity: 0; z-index: 7; pointer-events: none; }
.ops-scanline.go { animation: opsScanline 1.3s ease-in-out; }
@keyframes opsScanline { 0%{ top:0; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ top:100%; opacity:0; } }
/* LUMIÈRE + RELIEF derrière la carte (en profondeur 3D, pas un halo sur le cadre) */
.ops-backlight { position: absolute; inset: -12%; transform: translateZ(-130px) scale(1.22); background: radial-gradient(ellipse 50% 46% at 50% 45%, rgba(206,210,222,.06), rgba(150,154,168,.02) 44%, transparent 72%); pointer-events: none; z-index: 0; }   /* rétroéclairage NEUTRE argent (plus violet) */
/* traits nets même en zoomant */
.wm-sphere, .wm-grat, .wm-country, .wm-border, .opf, .opf-pulse, .opn-cross, .opn-ring { vector-effect: non-scaling-stroke; }
/* bouton retour (vue globale) */
.ops-back { position: absolute; right: 1rem; top: 2.7rem; z-index: 8; font-family: var(--font-mono); font-size: .54rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; padding: .5rem .95rem; border-radius: 999px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s, background .25s; }
.ops-back.on { opacity: 1; pointer-events: auto; }
.ops-back:hover { background: rgba(107,0,204,.22); }
/* dossier : blocs « écran officiel » vs « lecture réelle » + invite */
.opd-block { margin: 1.05rem 0; }
.opd-block .ob-k { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .45rem; }
.opd-block.tv .ob-k { color: var(--grey-dim); }
.opd-block.real .ob-k { color: var(--violet); }
.opd-block .ob-t { font-family: var(--font-mono); font-size: .6rem; line-height: 1.85; color: var(--grey); }
.opd-block.real { border-left: 2px solid var(--violet); padding-left: .85rem; }
.opd-block.real .ob-t { color: var(--white); }
.opd-prompt { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; color: var(--violet); line-height: 1.9; margin: auto 0; }
.opd-prompt span { display: block; margin-top: .7rem; color: var(--grey-dim); font-size: .55rem; letter-spacing: .04em; line-height: 1.8; }
.ops-hint { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-dim); margin-top: 1rem; }
/* logo propriétaire discret en bas à droite de la map */
.ops-logo { position: absolute; right: 1rem; bottom: 2.5rem; height: 12px; width: auto; opacity: .38; z-index: 5; pointer-events: none; }
.ops-logo-tl { position: absolute; top: .95rem; left: 1.05rem; width: 21px; height: 21px; opacity: .5; z-index: 7; pointer-events: none; }   /* monogramme BI = sceau du dossier, coin haut-gauche (fondu léger) */
/* ticker d'opérations : défile en bas de carte, seulement quand la strate est à l'écran */
.ops-ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; overflow: hidden; z-index: 6; pointer-events: none; }
.ops-ticker-in { position: absolute; white-space: nowrap; font-family: var(--font-mono); font-size: .52rem; letter-spacing: .26em; text-transform: uppercase; color: var(--grey); line-height: 24px; will-change: transform; animation: opsTick 46s linear infinite; animation-play-state: paused; }
.stratum.ops.ev .ops-ticker-in { animation-play-state: running; }
@keyframes opsTick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ops-ticker-in b { color: var(--violet); font-weight: 400; }
/* panneau d'analyse complémentaire (plus d'infos) sous la console */
.ops-extra { margin-top: 1rem; border: 1px solid var(--grey-dim); background: rgba(8,8,8,.4); padding: 1rem 1.4rem 1.1rem; max-width: 1420px; }
.oe-h { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .22em; text-transform: uppercase; color: var(--violet); margin-bottom: .9rem; }
.oe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.oe-c { display: flex; flex-direction: column; gap: .3rem; }
.oe-k { font-family: var(--font-mono); font-size: .48rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-dim); }
.oe-v { font-family: var(--font-mono); font-size: .78rem; color: var(--white); }
.oe-note { font-family: var(--font-mono); font-size: .58rem; line-height: 1.8; color: var(--grey); margin-top: .9rem; border-top: 1px solid rgba(240,240,240,.06); padding-top: .8rem; }
.oe-empty { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em; color: var(--grey-dim); }
@media (max-width: 860px){ .oe-grid { grid-template-columns: repeat(2,1fr); } }
/* bouton « ouvrir le débrief » dans la fiche de droite */
.opd-open { margin-top: 1.5rem; width: 100%; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; padding: .85rem 1rem; border-radius: 999px; cursor: pointer; transition: background .25s; }
.opd-open:hover { background: rgba(107,0,204,.28); }
/* DÉBRIEF — console plein écran intégrée */
.ops-brief { position: fixed; inset: 0; z-index: 300; background: radial-gradient(ellipse at 50% 38%, #0a0712, #050409 76%); opacity: 0; visibility: hidden; transition: opacity .45s ease; display: flex; align-items: center; justify-content: center; padding: 4vh 3vw; }
.ops-brief::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.18) 3px 4px); opacity: .4; pointer-events: none; }
.ops-brief.on { opacity: 1; visibility: visible; }
.brief-frame { position: relative; z-index: 1; width: 100%; max-width: 1140px; height: 90vh; border: 1px solid var(--violet-line); background: rgba(6,5,10,.55); display: flex; flex-direction: column; transform: translateY(22px); transition: transform .55s cubic-bezier(.5,0,.2,1); }
.ops-brief.on .brief-frame { transform: translateY(0); }
.brief-frame::before, .brief-frame::after { content: ''; position: absolute; width: 20px; height: 20px; border: 1px solid var(--violet); pointer-events: none; }
.brief-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.brief-frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.brief-hud { display: flex; align-items: center; gap: 1.4rem; padding: 1rem 1.6rem; border-bottom: 1px solid var(--violet-line); font-family: var(--font-mono); font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; }
.bh-l { color: var(--violet); } .bh-c { color: var(--grey); }
.brief-close { margin-left: auto; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: transparent; border: 1px solid rgba(107,0,204,.55); padding: .45rem .85rem; cursor: pointer; transition: background .25s; }
.brief-close:hover { background: rgba(107,0,204,.22); }
.brief-grid { flex: 1; display: grid; grid-template-columns: 268px 1fr; min-height: 0; }
.brief-locator { border-right: 1px solid var(--violet-line); padding: 2.4rem 1.8rem; display: flex; flex-direction: column; align-items: flex-start; }
.bl-svg { width: 116px; height: 116px; margin-bottom: 1.5rem; }
.bl-r { fill: none; stroke: rgba(107,0,204,.4); stroke-width: .8; }
.bl-x { stroke: rgba(107,0,204,.28); stroke-width: .6; }
.bl-d { fill: var(--violet); filter: drop-shadow(0 0 5px var(--violet)); }
.bl-city { font-family: var(--font-title); font-size: 1.5rem; text-transform: uppercase; line-height: 1.1; }
.bl-cc { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em; color: var(--violet); margin-top: .5rem; }
.bl-tag { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .1em; color: var(--grey-dim); text-transform: uppercase; margin-top: auto; line-height: 2; }
.brief-main { overflow-y: auto; padding: 1.6rem 2.2rem 2.4rem; min-height: 0; }
.brief-title { font-family: var(--font-title); font-size: clamp(1.3rem, 3vw, 1.9rem); text-transform: uppercase; line-height: 1.1; margin-bottom: 1rem; color: #fff; }
.brief-sec { padding: 1.9rem 0; border-bottom: 1px solid rgba(240,240,240,.06); }
.brief-sec:last-child { border-bottom: 0; }
.brief-sec-h { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; }
.bs-n { font-family: var(--font-mono); font-size: .6rem; color: var(--violet); letter-spacing: .12em; }
.bs-t { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.bs-s { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .06em; color: var(--grey-dim); text-transform: uppercase; margin-left: auto; }
.brief-headline { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: #fff; line-height: 1.35; margin-bottom: .9rem; }
.brief-p { font-family: var(--font-mono); font-size: .66rem; line-height: 2; color: var(--grey); max-width: 62ch; }
.brief-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.brief-chart { position: relative; border: 1px solid var(--grey-dim); padding: 1rem; background: rgba(8,8,8,.4); }
.bc-svg { width: 100%; height: 56px; display: block; }
.bc-grid { fill: none; stroke: rgba(240,240,240,.06); stroke-width: 1; }
.bc-line { fill: none; stroke: var(--violet); stroke-width: 2; filter: drop-shadow(0 0 4px var(--violet)); stroke-dasharray: 340; stroke-dashoffset: 340; }
.ops-brief.on .bc-line { animation: bcDraw 1.2s ease forwards; }
@keyframes bcDraw { to { stroke-dashoffset: 0; } }
.bc-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: .7rem; }
.bc-l { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .1em; color: var(--grey-dim); text-transform: uppercase; }
.bc-p { font-family: var(--font-title); font-size: 1rem; color: var(--violet); }
@media (max-width: 760px){ .brief-frame { height: 92vh; } .brief-grid { grid-template-columns: 1fr; } .brief-locator { border-right: 0; border-bottom: 1px solid var(--violet-line); flex-direction: row; align-items: center; gap: 1.2rem; padding: 1.4rem; } .bl-svg { width: 70px; height: 70px; margin: 0; } .bl-tag { display: none; } .brief-charts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .ops-map-3d { animation: none; } }
.ops-sweep { position: absolute; inset: -40%; background: conic-gradient(from 0deg at 50% 50%, transparent 0 312deg, rgba(107,0,204,.02) 342deg, rgba(107,0,204,.07) 358deg, transparent 360deg); pointer-events: none; z-index: 1; will-change: transform; }   /* balayage radar adouci */
@keyframes opsSpin { to { transform: rotate(360deg); } }
.ops-grain2 { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.22) 3px 4px); opacity: .28; pointer-events: none; z-index: 3; }
/* crochet d'angle : on ne garde QUE le bas-droit (le haut-gauche accueille le logo BI) ; ::before est désormais l'anneau de verre */
.ops-map::after { content:''; position:absolute; width:18px; height:18px; border:1px solid var(--violet); border-left:0; border-top:0; bottom:-1px; right:-1px; z-index:6; pointer-events:none; }
.ops-hud span { position: absolute; font-family: var(--font-mono); font-size: .52rem; letter-spacing: .18em; color: var(--grey); text-transform: uppercase; z-index: 5; }
.ops-hud-tl { top:.9rem; left:1rem; color: var(--violet); }
.ops-hud-tr { top:.9rem; right:1rem; }
.ops-hud-bl { bottom: 2.2rem; left: 1rem; }   /* au-dessus du bandeau défilant — plus de superposition */
.ops-hud-br { bottom:.9rem; right:1rem; color: var(--grey-dim); }
.opn { cursor: pointer; }
.opn-ring { fill:none; stroke:var(--violet); stroke-width:1; transform-box: fill-box; transform-origin: center; opacity: .45; transition: opacity .25s ease; }
.opn:hover .opn-ring { opacity: .95; }
/* focus opération : au zoom sur une ville, le monde s'estompe — seule l'opération reste éclairée */
.wm-country, .wm-border, .wm-grat, g.opn { transition: opacity .55s ease; }
.ops-svg.focus .wm-country { opacity: .5; }
.ops-svg.focus .wm-border { opacity: .55; }
.ops-svg.focus .wm-grat { opacity: .45; }
.ops-svg.focus g.opn:not(.sel) { opacity: .16; }
@keyframes opnPulse { 0%{ transform: scale(.45); opacity:.8; } 100%{ transform: scale(2.6); opacity:0; } }
.opn-core { fill: var(--violet); filter: drop-shadow(0 0 4px var(--violet)); }
.opn-cross { stroke: rgba(107,0,204,.45); stroke-width:.6; }
.opn-lbl { fill: var(--grey-dim); font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; }
.opn:hover .opn-lbl, .opn.sel .opn-lbl { fill:#fff; }
.opn.sel .opn-core { fill:#fff; }
/* CENTRES FINANCIERS (hubs) : marqueurs BLANCS = destinations du capital (distincts des conflits violets) */
.ophub-d { fill:none; stroke: rgba(240,240,240,.85); stroke-width:1; }
.ophub-c { fill:#f0f0f0; filter: drop-shadow(0 0 5px rgba(240,240,240,.5)); }
.ophub-lbl { fill:#f0f0f0; font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.6px; }
/* anneaux radar : les stations scannent le monde (surveillance ambiante) */
.ophub-radar { fill:none; stroke: rgba(240,240,240,.42); stroke-width:.8; transform-box: fill-box; transform-origin:center; opacity:0; }
@keyframes hubRadar { 0%{ transform: scale(.3); opacity:.5; } 70%{ opacity:.1; } 100%{ transform: scale(4.6); opacity:0; } }
/* détections de signal (blips ambiants) */
.opblip .bd { fill:#8A14FF; opacity:0; animation: blipDot 1.5s ease-out forwards; }
.opblip .br { fill:none; stroke:#8A14FF; stroke-width:.8; transform-box: fill-box; transform-origin:center; animation: blipRing 1.5s ease-out forwards; }
@keyframes blipDot { 0%{opacity:0;} 18%{opacity:1;} 100%{opacity:0;} }
@keyframes blipRing { 0%{ transform: scale(.4); opacity:.7; } 100%{ transform: scale(5.5); opacity:0; } }
.opf { fill:none; stroke: rgba(107,0,204,.28); stroke-width:1; }
.opf-pulse { fill:none; stroke: var(--violet); stroke-width:1.4; stroke-dasharray: 5 230; }
@keyframes opfRun { to { stroke-dashoffset: -235; } }
/* PERF : animations de la console UNIQUEMENT quand la strate 01 est visible (.ev) */
.stratum.ops.ev .ops-sweep { animation: opsSpin 11s linear infinite; }
.stratum.ops.ev .opn-ring { animation: opnPulse 3.6s ease-out infinite; }
.stratum.ops.ev .opf-pulse { animation: opfRun 4.4s linear infinite; }
.stratum.ops.ev .ophub-radar { animation: hubRadar 5s ease-out infinite; }
.ret-c { stroke: var(--violet); stroke-width:1.5; filter: drop-shadow(0 0 3px var(--violet)); }
.ret-o { stroke: rgba(107,0,204,.5); stroke-width:.8; stroke-dasharray: 3 5; }
/* le dossier : verre teinté violet, translucide — même famille que les cartes du héros */
.ops-dossier { position: relative; border-radius: 20px; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; min-height: 64vh; background: linear-gradient(165deg, rgba(255,255,255,.04), rgba(107,0,204,.05) 55%, rgba(74,0,160,.09) 100%); }
.opd-bar { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.5rem; letter-spacing:.18em; color:var(--grey); text-transform:uppercase; border-bottom:1px solid var(--grey-dim); padding-bottom:.7rem; }
.opd-bar .cls { color: var(--violet); }
.opd-event { font-family: var(--font-title); font-size: 1rem; text-transform: uppercase; line-height:1.2; margin:1rem 0; min-height:2.4em; color:#fff; }
.opd-row { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.58rem; color:var(--grey); padding:.45rem 0; border-bottom:1px solid rgba(240,240,240,.05); letter-spacing:.05em; }
.opd-row b { color:#fff; font-weight:500; }
.opd-read { font-family:var(--font-mono); font-size:.58rem; line-height:1.85; color:var(--grey); margin:1.1rem 0; }
.opd-read b { color: var(--white); }
.opd-verdict { margin-top:auto; border-top:1px solid var(--violet-line); padding-top:1rem; }
.opd-verdict .k { font-family:var(--font-mono); font-size:.5rem; letter-spacing:.2em; color:var(--grey); text-transform:uppercase; }
.opd-verdict .v { font-family:var(--font-title); font-size:1.9rem; color:var(--violet); text-shadow:0 0 18px rgba(107,0,204,.55); margin-top:.35rem; }
.ops-tabs { display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap; }
.ops-tab { font-family:var(--font-mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); background:transparent; border:1px solid var(--grey-dim); padding:.5rem .85rem; cursor:pointer; transition: all .25s; }
.ops-tab:hover { border-color: rgba(107,0,204,.5); color:#fff; }
.ops-tab.active { border-color: var(--violet); color:#fff; background: rgba(107,0,204,.14); }
@media (max-width: 860px){
  .ops-deck { grid-template-columns: 1fr; } .ops-map, .ops-dossier { min-height: 46vh; }
  .stratum { padding-left: 1.6rem; padding-right: 1.6rem; }
  #depthHud, .hud-coords { display: none; }
  .bp-foot { flex-direction: column; align-items: flex-start; }
  .bp-foot .bf-legal { text-align: left; }
}
@media (max-width: 720px){ #depthHud .dh-read { display: none; } .stratum { padding-left: 2.4rem; } }

@media (max-width: 720px){
  .rail { display: none; }
}

/* ============================================================
   PAGES PROGRAMMES (produits) — partagé par black-intelligence.html,
   black-feed.html, fracture-protocol.html. Reprend la DA du site.
   ============================================================ */
/* --- menu déroulant "Programmes" dans la nav --- */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-t { font-family: var(--font-title); font-weight: 500; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--white); opacity: .78; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; padding: 0; line-height: 1; transition: opacity .25s ease, color .25s ease; }
.nav-drop:hover .nav-drop-t, .nav-drop-t[aria-expanded="true"] { opacity: 1; color: var(--violet); }
.nav-drop-t .caret { font-size: .7em; transition: transform .25s ease; }
.nav-drop-t[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-drop-menu { position: absolute; top: calc(100% + .95rem); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 272px; display: flex; flex-direction: column; padding: .5rem; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(12,12,15,.62), rgba(5,5,7,.72)); -webkit-backdrop-filter: blur(50px) saturate(1.1); backdrop-filter: blur(50px) saturate(1.1); border: none; box-shadow: 0 26px 60px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.035); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 50; }
.nav-drop-menu::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; pointer-events: none; background: conic-gradient(from var(--lg-a), rgba(255,255,255,.12) 0deg, rgba(255,255,255,.52) 30deg, rgba(255,255,255,.08) 86deg, rgba(255,255,255,.03) 165deg, rgba(255,255,255,.38) 214deg, rgba(255,255,255,.07) 276deg, rgba(255,255,255,.12) 360deg); animation: lgEdge 9s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.nav-drop:hover .nav-drop-menu, .nav-drop-menu.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop-menu a { position: relative; z-index: 1; opacity: 1; text-decoration: none; padding: .82rem .9rem; border-radius: 11px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: background .2s ease; }
.nav-drop-menu a:hover, .nav-drop-menu a.here { background: rgba(255,255,255,.05); }
.nav-drop-menu a .wm { font-family: var(--font-title); font-weight: 400; letter-spacing: -.02em; text-transform: none; color: var(--white); line-height: 1; font-size: 1rem; }
.nav-drop-menu a .wm b { font-weight: 700; }
.nav-drop-menu a .wm .r { font-size: .42em; vertical-align: super; opacity: .7; margin-left: .16em; }
.nav-drop-menu a .ctag { display: flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-weight: 500; font-size: .46rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }
.nav-drop-menu a .ctag .d { width: 6px; height: 6px; border-radius: 50%; background: var(--grey); flex: none; }
.nav-drop-menu a .ctag.act { color: #8A14FF; }
.nav-drop-menu a .ctag.act .d { background: #8A14FF; box-shadow: 0 0 8px rgba(138,20,255,.8); }

/* --- gabarit page produit (sobre, texte) --- */
.prog { min-height: 100vh; padding: 21vh var(--gutter) 9vh; max-width: 1040px; margin: 0 auto; }
.prog-back { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); text-decoration: none; margin-bottom: clamp(2rem,4vw,3rem); transition: color .2s, gap .2s; }
.prog-back:hover { color: var(--violet); gap: .8em; }
.prog-tag { display: flex; align-items: center; gap: 1rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--grey); margin-bottom: clamp(1.3rem,3vw,2rem); }
.prog-tag-n { color: var(--violet); }
.prog-tag i { width: clamp(40px,6vw,90px); height: 1px; background: linear-gradient(90deg, var(--violet), transparent); }
.prog-title { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; line-height: .96; letter-spacing: -.025em; font-size: clamp(2.6rem, 8vw, 6rem); color: var(--white); }
.prog-title .accent { color: var(--violet); }
.prog-status { display: inline-flex; align-items: center; gap: .55em; margin-top: 1.5rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; padding: .55em 1.05em; border-radius: 999px; }
.prog-status.actif { color: var(--violet); border: 1px solid var(--violet-line); }
.prog-status.lock  { color: var(--grey); border: 1px solid var(--silver-line); }
.prog-status.clos  { color: var(--grey); border: 1px solid var(--silver-line); }
.prog-status .dotp { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.prog-status.actif .dotp { box-shadow: 0 0 10px var(--violet); }
.prog-lead { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.05rem, 1.9vw, 1.4rem); line-height: 1.5; color: var(--grey); margin-top: clamp(1.8rem,3vw,2.6rem); max-width: 58ch; }
.prog-body { margin-top: clamp(2.6rem, 5vw, 4rem); display: grid; gap: clamp(1.8rem, 3vw, 2.6rem); max-width: 64ch; }
.prog-h { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--violet); margin-bottom: .75rem; }
.prog-p { font-family: var(--font-display); font-weight: 300; font-size: clamp(.98rem, 1.5vw, 1.1rem); line-height: 1.75; color: var(--silver); }
.prog-p b { color: var(--white); font-weight: 500; }
.prog-specs { margin-top: clamp(2.4rem,4vw,3.4rem); display: flex; flex-wrap: wrap; gap: clamp(1.6rem,4vw,3rem); padding-top: 1.9rem; border-top: 1px solid var(--silver-line); }
.prog-spec { display: flex; flex-direction: column; gap: .42rem; }
.prog-spec .k { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .24em; text-transform: uppercase; color: var(--violet); }
.prog-spec .v { font-family: var(--font-title); font-weight: 600; font-size: 1.05rem; color: var(--white); }
.prog-buy { margin-top: clamp(2.6rem,5vw,4rem); display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; padding-top: 2.1rem; border-top: 1px solid var(--silver-line); }
.prog-price { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.6rem,3vw,2.2rem); color: var(--white); line-height: 1; }
.prog-price span { display: block; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); font-weight: 400; margin-top: .5rem; }
.prog-cta { font-family: var(--font-title); font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; padding: 1rem 1.9rem; border-radius: 999px; text-decoration: none; background: linear-gradient(135deg, var(--violet), var(--violet-deep)); box-shadow: 0 8px 30px rgba(107,0,204,.4); transition: transform .25s var(--ease), box-shadow .25s var(--ease); display: inline-flex; align-items: center; gap: .6em; }
.prog-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 42px rgba(107,0,204,.58); }
.prog-cta.ghost { background: none; border: 1px solid var(--violet-line); box-shadow: none; color: var(--white); }
.prog-cta.ghost:hover { background: rgba(107,0,204,.14); box-shadow: none; }
/* tampon DOSSIER CLOS (Fracture Protocol) */
.prog-seal { margin-top: clamp(2.6rem,5vw,4rem); padding: clamp(1.6rem,3vw,2.4rem); border: 1px solid var(--silver-line); border-radius: var(--r); position: relative; overflow: hidden; }
.prog-seal .barre { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 22px, rgba(240,240,240,.022) 22px 24px); pointer-events: none; }
.prog-seal .stamp { position: relative; font-family: var(--font-mono); font-weight: 500; font-size: clamp(1rem,2.4vw,1.5rem); letter-spacing: .3em; text-transform: uppercase; color: var(--grey); display: inline-flex; align-items: center; gap: .6em; }
.prog-seal .stamp::before { content: ''; width: 12px; height: 12px; border: 2px solid var(--grey); border-radius: 2px; opacity: .7; }
.prog-seal .sub { position: relative; font-family: var(--font-display); font-weight: 300; font-size: clamp(.95rem,1.4vw,1.05rem); line-height: 1.65; color: var(--silver); margin-top: 1rem; max-width: 54ch; }
.prog-bridge { margin-top: clamp(3rem,6vw,5rem); padding-top: 2.1rem; border-top: 1px solid var(--silver-line); }
.prog-bridge a { font-family: var(--font-title); font-weight: 500; font-size: clamp(.95rem,1.6vw,1.15rem); letter-spacing: .01em; color: var(--white); text-decoration: none; display: inline-flex; align-items: center; gap: .6em; opacity: .85; transition: opacity .2s, gap .2s, color .2s; }
.prog-bridge a:hover { opacity: 1; gap: .95em; color: var(--violet); }
.prog-bridge .k { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); display: block; margin-bottom: .5rem; }
@media (max-width: 720px){
  .nav-drop-menu { position: static; transform: none; opacity: 1; visibility: visible; background: none; border: 0; box-shadow: none; padding: .3rem 0 0; min-width: 0; }
  .nav-drop-menu::before { display: none; }
  .prog { padding-top: 17vh; }
}

/* --- pages produit en mode HÉROS (même composition que le hero de l'accueil) --- */
.prog-hero { position: relative; min-height: 100vh; overflow: hidden; }
.hero-bg-soft { position: absolute; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(ellipse 68% 58% at 20% 40%, rgba(107,0,204,.16), transparent 60%),
  radial-gradient(ellipse 52% 52% at 88% 82%, rgba(74,0,160,.12), transparent 66%); }
.prog-hero .hero-inner { z-index: 2; }
.prog-hero .prog-tag { margin-bottom: 1rem; }
.hero-h1.prog-h1 { margin-top: .1rem; }
/* titre = wordmark sur UNE ligne, avec le ® (Black gras + Intelligence/Feed maigre) */
.prog-word { font-family: var(--font-title); font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: 1; letter-spacing: -.03em; margin-top: .1rem; color: var(--white); }
.prog-word .bi-word { font-weight: 300; }
.prog-word .bi-word b { font-weight: 700; }
.prog-word .bi-word::after { font-size: .42em; top: -.05em; margin-left: .16em; }
/* --- support VIDÉO de vente (sous le hero des pages produit) --- */
.prog-video { padding: clamp(3rem,7vh,7rem) var(--gutter) clamp(5rem,12vh,10rem); }
.pv-inner { max-width: 1000px; margin: 0 auto; }
.pv-inner .prog-tag { justify-content: center; margin-bottom: clamp(1.4rem,3vw,2.4rem); }
.pv-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 42%, rgba(107,0,204,.12), rgba(107,0,204,.03) 45%, transparent 68%), rgba(255,255,255,.018); }
.pv-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.14) 3px 4px); opacity: .35; }
.pv-frame video, .pv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
.pv-ph { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; cursor: pointer; }
.pv-play { width: clamp(62px,7vw,84px); height: clamp(62px,7vw,84px); border-radius: 50%; border: 1px solid var(--violet-line); background: rgba(107,0,204,.18); display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .3s var(--ease), background .3s ease, box-shadow .3s ease, border-color .3s ease; }
.pv-ph:hover .pv-play { transform: scale(1.08); background: rgba(107,0,204,.32); border-color: var(--violet); box-shadow: 0 0 46px rgba(138,20,255,.45); }
.pv-tri { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--white); margin-left: 4px; }
.pv-cap { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--grey); }
.prog-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.9rem; }
.prog-price-inline { font-family: var(--font-title); font-weight: 700; font-size: 1.2rem; color: var(--white); line-height: 1; }
.prog-price-inline span { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-top: .35rem; }
.prog-actions .seal-mini { display: inline-flex; align-items: center; gap: .65em; font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--grey); padding: .75em 1.15em; border: 1px solid var(--silver-line); border-radius: 999px; }
.prog-actions .seal-mini::before { content: ''; width: 9px; height: 9px; border: 2px solid var(--grey); border-radius: 2px; }
/* CTA de clôture — bouton SEUL, juste sous la fin du curriculum (Black Intelligence uniquement). .mod.bi-curr resserre le padding-bas du curriculum côté BI sans toucher Fracture Protocol (qui partage #programme). */
.mod.bi-curr { padding-bottom: clamp(1.75rem,3.5vh,2.75rem); }
.bi-close { padding: clamp(2rem,3vh,2.5rem) var(--gutter) clamp(4rem,9vw,7rem); }
.bi-close-in { max-width: 1180px; margin: 0 auto; display: flex; justify-content: center; }
.bi-close-btn.hbtn { font-size: .82rem; letter-spacing: .06em; padding: .95rem 1rem .95rem 2rem; gap: 1rem; }
.bi-close-btn .hb-ic { width: 32px; height: 32px; font-size: .85rem; }
.hp-card .hp-card-s { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; color: var(--violet); margin-top: .6rem; display: inline-block; }
a.hp-card:hover .hp-card-s { color: var(--white); }
@media (max-width: 860px){
  .prog-hero .hero-inner.hp { grid-template-columns: 1fr; height: auto; min-height: 100vh; padding-top: 7rem; padding-bottom: 3.5rem; }
  .prog-hero .hp-side { display: flex; }
}

/* ============================================================
   CURRICULUM — registre de modules (sous la vidéo, pages produit)
   « dossier déclassifié » : type massif · décryptage · densité.
   ============================================================ */
.mod { max-width: 1180px; margin: 0 auto; padding: clamp(1rem,2vh,2rem) var(--gutter) clamp(6rem,14vh,11rem); }
.mod-head-block { margin-bottom: clamp(2.2rem,5vw,3.6rem); }
.mod-kicker { display: inline-flex; align-items: center; gap: .75em; font-family: var(--font-mono); font-size: .58rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--violet); }
.mod-kicker::before { content: ''; width: 28px; height: 1px; background: var(--violet); opacity: .55; }
.mod-title { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; letter-spacing: -.026em; font-size: clamp(2.6rem,7vw,5.2rem); line-height: .9; color: var(--white); margin: 1rem 0 1.15rem; }
/* Barème COMPACT réutilisable — standard Black Feed (titre + noms + corps). Appliqué à .mod-compact sur Black Feed ET Black Intelligence. Ne pas mettre sur toutes les pages : c'est un modifier, pas un défaut. */
.mod-compact .mod-title { font-size: clamp(1.55rem,2.9vw,2.5rem); line-height: 1.05; letter-spacing: -.02em; }
.mod-compact .mod-sub { font-size: clamp(.92rem,1.25vw,1.08rem); }
.mod-compact .mod-name { font-size: clamp(1.15rem,2.15vw,1.72rem); }
.mod-compact .mod-brief { font-size: clamp(.9rem,1.2vw,1.05rem); }
.mod-sub { font-family: var(--font-display); font-weight: 300; font-size: clamp(1rem,1.5vw,1.18rem); line-height: 1.6; color: var(--grey); max-width: 56ch; }
.mod-totals { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 1.9rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); }
.mod-totals span { display: inline-flex; align-items: center; gap: .55em; }
.mod-totals span + span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--violet); opacity: .75; margin-right: .85rem; }
.mod-totals b { color: var(--white); font-weight: 500; font-variant-numeric: tabular-nums; }

.mod-list { border-top: 1px solid var(--silver-line); }
.mod-row { position: relative; border-bottom: 1px solid var(--silver-line); }
.mod-head { position: relative; width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: clamp(1rem,3vw,2.4rem); padding: clamp(1.15rem,2.4vw,1.75rem) 0 clamp(1.15rem,2.4vw,1.75rem) clamp(1rem,2.6vw,2.1rem); background: transparent; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background .45s var(--ease); }
.mod-list.no-meta .mod-head { grid-template-columns: auto minmax(0,1fr) auto; }
.mod-head::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--violet); transform: scaleY(0); transform-origin: top; opacity: 0; transition: transform .5s var(--ease), opacity .3s ease; }
.mod-row:hover .mod-head::before, .mod-row.is-open .mod-head::before, .mod-head:focus-visible::before { transform: scaleY(1); opacity: 1; }
.mod-head:hover { background: linear-gradient(90deg, rgba(107,0,204,.06), transparent 72%); }
.mod-head:focus-visible { outline: none; background: linear-gradient(90deg, rgba(107,0,204,.09), transparent 72%); }

.mod-idx { font-family: var(--font-mono); font-size: .84rem; font-weight: 500; letter-spacing: .08em; color: var(--grey); font-variant-numeric: tabular-nums; align-self: start; padding-top: .5rem; transition: color .35s ease; }
.mod-row:hover .mod-idx, .mod-row.is-open .mod-idx { color: var(--violet); }

.mod-body { min-width: 0; }
.mod-name { display: block; font-family: var(--font-title); font-weight: 700; text-transform: uppercase; letter-spacing: -.012em; font-size: clamp(1.4rem,3.3vw,2.7rem); line-height: 1; color: var(--white); }
.mod-desc { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .05em; line-height: 1.55; color: var(--grey); margin-top: .55rem; max-width: 56ch; }

.mod-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; min-width: 104px; }
.mod-stat { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mod-stat b { color: var(--white); font-weight: 500; font-size: .82rem; letter-spacing: .04em; }
.mod-bar { display: block; width: 92px; height: 2px; margin-top: .35rem; background: rgba(240,240,240,.09); position: relative; overflow: hidden; }
.mod-bar i { position: absolute; inset: 0 auto 0 0; width: var(--fill,0%); background: linear-gradient(90deg, var(--violet), #8A14FF); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .2s; }
.mod.in .mod-bar i { transform: scaleX(1); }

.mod-tog { position: relative; width: 20px; height: 20px; flex: none; align-self: start; margin-top: .5rem; }
.mod-tog::before, .mod-tog::after { content: ''; position: absolute; background: var(--grey); transition: transform .4s var(--ease), background .3s ease; }
.mod-tog::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.mod-tog::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.mod-row:hover .mod-tog::before, .mod-row:hover .mod-tog::after, .mod-row.is-open .mod-tog::before { background: var(--violet); }
.mod-row.is-open .mod-tog::after { transform: translateX(-50%) scaleY(0); }

.mod-panel { overflow: hidden; max-height: 0; transition: max-height .55s var(--ease); }
.mod-panel-in { position: relative; padding: .2rem clamp(1rem,2.6vw,2.1rem) clamp(1.7rem,3.2vw,2.6rem) clamp(3.2rem,6.6vw,5.6rem); }
.mod-ghost { position: absolute; right: 1%; top: -2.2rem; z-index: 0; font-family: var(--font-title); font-weight: 800; font-size: clamp(6rem,16vw,12rem); line-height: 1; letter-spacing: -.05em; color: rgba(240,240,240,.038); pointer-events: none; user-select: none; }
.mod-brief { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 300; font-size: clamp(.98rem,1.35vw,1.12rem); line-height: 1.68; color: rgba(240,240,240,.74); max-width: 62ch; }
.mod-note { position: relative; z-index: 1; margin-top: 1.05rem; padding-left: 1rem; border-left: 1px solid var(--violet-line); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; line-height: 1.65; color: var(--grey); max-width: 60ch; }
.mod-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.35rem; }
.mod-tags span { font-family: var(--font-mono); font-size: .5rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); padding: .5em .85em; border: 1px solid var(--silver-line); border-radius: 999px; }
.mod-tags span.hot { color: var(--violet); border-color: var(--violet-line); }

/* module à venir (BI 8–11) */
.mod-row.is-soon .mod-head { cursor: default; }
.mod-row.is-soon .mod-name { color: rgba(240,240,240,.4); }
.mod-row.is-soon .mod-idx { color: rgba(240,240,240,.24); }
.mod-row.is-soon .mod-desc { color: rgba(240,240,240,.34); }
.mod-soon { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: var(--violet); border: 1px solid var(--violet-line); border-radius: 999px; padding: .5em .85em; white-space: nowrap; align-self: center; }

/* entrée au scroll (activée par JS via .armed) */
.mod.armed .mod-head-block { opacity: 0; transform: translateY(18px); }
.mod.armed.in .mod-head-block { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.mod.armed .mod-row { opacity: 0; transform: translateY(24px); }
.mod.armed.in .mod-row { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .75s var(--ease); }
.mod.armed.in .mod-list .mod-row:nth-child(1){transition-delay:.04s}
.mod.armed.in .mod-list .mod-row:nth-child(2){transition-delay:.09s}
.mod.armed.in .mod-list .mod-row:nth-child(3){transition-delay:.14s}
.mod.armed.in .mod-list .mod-row:nth-child(4){transition-delay:.19s}
.mod.armed.in .mod-list .mod-row:nth-child(5){transition-delay:.24s}
.mod.armed.in .mod-list .mod-row:nth-child(6){transition-delay:.29s}
.mod.armed.in .mod-list .mod-row:nth-child(7){transition-delay:.34s}
.mod.armed.in .mod-list .mod-row:nth-child(8){transition-delay:.39s}
.mod.armed.in .mod-list .mod-row:nth-child(9){transition-delay:.44s}
.mod.armed.in .mod-list .mod-row:nth-child(10){transition-delay:.49s}
.mod.armed.in .mod-list .mod-row:nth-child(11){transition-delay:.54s}
.mod.armed.in .mod-list .mod-row:nth-child(12){transition-delay:.59s}

@media (max-width: 760px){
  .mod-head { grid-template-columns: auto minmax(0,1fr) auto; gap: .9rem 1.1rem; padding-left: .7rem; }
  .mod-idx { padding-top: .35rem; }
  .mod-meta { grid-column: 2 / -1; flex-direction: row; align-items: center; gap: 1.1rem; min-width: 0; margin-top: .2rem; }
  .mod-bar { width: 64px; }
  .mod-tog { grid-column: 3; grid-row: 1; }
  .mod-panel-in { padding-left: 1.1rem; }
  .mod-ghost { display: none; }
  .mod-name { font-size: clamp(1.35rem,6vw,2rem); }
}

@media (prefers-reduced-motion: reduce){
  .mod.armed .mod-row, .mod.armed .mod-head-block { opacity: 1; transform: none; }
  .mod-bar i { transition: none; }
  .mod-panel { transition: max-height .01s linear; }
}

/* ============================================================
   BLACK FEED — sections éditoriales (thèse · manifeste · accès)
   ============================================================ */
.bf { max-width: 1180px; margin: 0 auto; padding: clamp(3rem,7vh,6.5rem) var(--gutter); }
.bf.tline { border-top: 1px solid var(--silver-line); }

/* thèse : dispositif de surveillance — UNE colonne, phrases élargies (moins de lignes), gris calés sur .hero-sub */
.bf-lead { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(1.55rem,2.9vw,2.5rem); margin: clamp(1rem,2.5vw,1.6rem) 0 0; max-width: 30ch; }
.bf-lead .neg { color: var(--grey); display: block; }
.bf-lead .aff { color: var(--white); display: block; margin-top: .32em; }
/* lead « phrase » : fort et blanc mais casse normale (pour une phrase-titre longue, ex. section produit BI) */
.bf-lead-s { font-family: var(--font-title); font-weight: 600; font-size: clamp(1.3rem,2.1vw,1.95rem); line-height: 1.28; letter-spacing: -.01em; color: var(--white); max-width: 40ch; margin: clamp(1rem,2.5vw,1.6rem) 0 0; }
.bf-body { font-family: var(--font-display); font-weight: 300; font-size: clamp(.9rem,1.2vw,1.05rem); line-height: 1.6; color: var(--grey); max-width: 62rem; margin: clamp(1.8rem,3.4vw,2.6rem) 0 0; }
/* bloc éditorial long (section "La lecture, maintenue vivante") — plusieurs paragraphes, interlignage aéré, espacement resserré entre paragraphes */
.bf-longform { max-width: 68rem; margin-top: clamp(1.5rem,3vw,2.2rem); }
.bf-longform p { font-family: var(--font-display); font-weight: 300; font-size: clamp(.95rem,1.15vw,1.08rem); line-height: 1.72; color: var(--grey); margin: 0 0 1.15rem; }
.bf-longform p:last-child { margin-bottom: 0; }
/* ============================================================
   FAQ — terminal / requête (Black Intelligence + Black Feed).
   Console DA violet ; les réponses s'impriment au clic (initFaq).
   ============================================================ */
.faq { max-width: 1180px; margin: 0 auto; padding: clamp(3rem,7vh,6rem) var(--gutter) clamp(3.5rem,8vh,6.5rem); }
.faq-head-block { margin-bottom: clamp(1.5rem,3.4vw,2.4rem); }
.term { border-radius: 14px; overflow: hidden; border: 1px solid var(--silver-line); background: rgba(6,6,8,.72); box-shadow: inset 0 1px 1px rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.02), 0 30px 80px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.term-bar { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--silver-line); background: rgba(255,255,255,.02); }
.term-dots { display: inline-flex; gap: .42rem; }
.term-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.13); }
.term-dots i:last-child { background: rgba(107,0,204,.72); box-shadow: 0 0 7px rgba(107,0,204,.6); }
.term-title { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--grey); }
.term-stat { margin-left: auto; display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.term-stat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6B00CC; box-shadow: 0 0 8px rgba(107,0,204,.85); }
.term-body { padding: clamp(1rem,2.4vw,1.7rem) clamp(1.1rem,2.6vw,2rem) clamp(1.3rem,3vw,2rem); }
.term-intro { font-family: var(--font-mono); font-size: .78rem; color: var(--grey); margin: 0 0 1.1rem; word-break: break-word; }
.term-pr { color: var(--violet); font-weight: 500; margin-right: .55em; }
.term-cur { display: inline-block; width: .55em; height: 1.05em; background: var(--violet); vertical-align: -.16em; margin-left: .12em; animation: term-blink 1.1s step-end infinite; }
@keyframes term-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.faq-q { border-top: 1px solid rgba(255,255,255,.055); }
.faq-q:first-child { border-top: 0; }
.faq-line { width: 100%; display: flex; align-items: baseline; gap: .55em; padding: .95rem 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-mono); }
.faq-qt { flex: 1; font-size: clamp(.82rem,1vw,.94rem); letter-spacing: .01em; line-height: 1.4; color: rgba(240,240,240,.9); transition: color .2s ease; }
.faq-line:hover .faq-qt { color: #fff; }
.faq-line:hover .term-pr { text-shadow: 0 0 10px rgba(107,0,204,.75); }
.faq-tog { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); opacity: .6; white-space: nowrap; align-self: center; transition: color .2s ease, opacity .2s ease; }
.faq-tog::after { content: 'exécuter ↵'; }
.faq-line:hover .faq-tog { opacity: 1; color: var(--violet); }
.faq-q.open .faq-tog { color: var(--violet); opacity: 1; }
.faq-q.open .faq-tog::after { content: '— fermer'; }
.faq-a { display: none; padding: 0 0 1.15rem 1.35em; }
.faq-q.open .faq-a { display: block; }
.faq-a-t { font-family: var(--font-mono); font-size: clamp(.79rem,.92vw,.88rem); line-height: 1.75; color: var(--grey); margin: 0; max-width: 82ch; white-space: pre-wrap; }
.faq-q.typing .faq-a-t::after { content: '█'; color: var(--violet); margin-left: .04em; animation: term-blink 1.1s step-end infinite; }
@media (prefers-reduced-motion: reduce){ .term-cur, .faq-q.typing .faq-a-t::after { animation: none; } }
@media (max-width: 560px){ .faq-tog { display: none; } .faq-a { padding-left: 1em; } }
/* ============================================================
   DECK — chapitres plein écran (prototype Black Feed).
   scroll-snap natif + reveal + rail de points/clavier (initDeck).
   Chaque section = une planche ; on feuillette, on ne déroule pas.
   ============================================================ */
body.deck-page { overflow: hidden; height: 100vh; height: 100dvh; }
.deck { position: relative; height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.deck::-webkit-scrollbar { width: 0; height: 0; }
.chapter { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; position: relative; }
.chapter-tall { justify-content: flex-start; }
.chapter-end { min-height: auto; justify-content: flex-end; scroll-snap-align: end; }
.chapter > main, .chapter > section, .chapter > footer { transition: opacity .7s var(--ease), transform .85s var(--ease); }
.deck.armed .chapter:not(.in) > main, .deck.armed .chapter:not(.in) > section, .deck.armed .chapter:not(.in) > footer { opacity: 0; transform: translateY(26px); }
.chapter.in > main, .chapter.in > section, .chapter.in > footer { opacity: 1; transform: none; }
.deck-nav { position: fixed; right: clamp(.7rem,1.6vw,1.5rem); top: 50%; transform: translateY(-50%); z-index: 9985; display: flex; flex-direction: column; gap: .82rem; }
.deck-dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
.deck-dot i { width: 7px; height: 7px; border-radius: 50%; background: rgba(240,240,240,.26); transition: background .25s ease, transform .25s ease, box-shadow .25s ease; }
.deck-dot:hover i { background: rgba(240,240,240,.6); }
.deck-dot.is-active i { background: #6B00CC; transform: scale(1.4); box-shadow: 0 0 10px rgba(107,0,204,.9); }
.deck-dot b { position: absolute; right: 128%; top: 50%; transform: translateY(-50%) translateX(6px); font-family: var(--font-mono); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); opacity: 0; white-space: nowrap; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.deck-dot:hover b, .deck-dot.is-active b { opacity: 1; transform: translateY(-50%) translateX(0); }
.deck-dot.is-active b { color: var(--white); }
.deck-hint { position: absolute; left: 50%; bottom: clamp(1.1rem,4vh,2.3rem); transform: translateX(-50%); z-index: 5; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); display: flex; flex-direction: column; align-items: center; gap: .45rem; opacity: .7; transition: opacity .45s ease; animation: deck-bob 2.2s ease-in-out infinite; }
.deck-hint::after { content: '↓'; font-size: .95rem; letter-spacing: 0; }
.deck.scrolled .deck-hint { opacity: 0; pointer-events: none; }
@keyframes deck-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } }
@media (max-width: 640px){ .deck-nav { display: none; } }
@media (prefers-reduced-motion: reduce){ .deck { scroll-behavior: auto; } .deck-hint { animation: none; } .chapter > main, .chapter > section, .chapter > footer { transition: none; } .deck.armed .chapter:not(.in) > main, .deck.armed .chapter:not(.in) > section, .deck.armed .chapter:not(.in) > footer { opacity: 1; transform: none; } }
.bf-pull { margin-top: clamp(1.9rem,3.4vw,2.6rem); max-width: 58rem; padding: clamp(1.15rem,2.5vw,1.7rem) clamp(1.5rem,3vw,2.4rem); border-left: 2px solid var(--violet); background: linear-gradient(90deg, rgba(107,0,204,.07), transparent 90%); }
.bf-pull p { font-family: var(--font-display); font-weight: 300; font-size: clamp(1rem,1.35vw,1.18rem); line-height: 1.55; color: var(--white); max-width: none; margin: 0; }
.bf-pull .res { color: var(--grey); }
.bf-pull .cau { color: var(--violet); font-weight: 500; }
.bf-pull .tail { display: block; font-family: var(--font-display); font-size: clamp(.9rem,1.2vw,1.05rem); color: var(--grey); line-height: 1.6; margin-top: .9rem; max-width: none; }

/* ledger STATIQUE (structure hebdo — pas d'accordéon, texte lisible en clair) */
.mod-list.static .mod-head { grid-template-columns: auto minmax(0,1fr); cursor: default; padding-top: clamp(1.4rem,2.8vw,2rem); padding-bottom: clamp(1.4rem,2.8vw,2rem); }
.mod-list.static .mod-desc { font-family: var(--font-display); font-weight: 300; font-size: clamp(.98rem,1.35vw,1.12rem); line-height: 1.62; letter-spacing: 0; text-transform: none; color: rgba(240,240,240,.66); max-width: 66ch; margin-top: .7rem; }

/* manifeste */
.bf-manifesto { text-align: center; }
.bf-manifesto .bf-body { margin-left: auto; margin-right: auto; }
.bf-quote { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(1.9rem,4.8vw,3.6rem); line-height: 1.02; color: var(--white); margin: 2.3rem auto; max-width: 15ch; }
.bf-quote em { font-style: normal; color: var(--violet); }

/* accès / rareté — closer conversion */
.bf-access-in { position: relative; border: 1px solid var(--violet-line); border-radius: 18px; padding: clamp(2rem,4.6vw,3.6rem); background: radial-gradient(ellipse at 50% -10%, rgba(107,0,204,.12), transparent 62%), rgba(255,255,255,.018); overflow: hidden; text-align: center; }
.bf-access-in .prog-tag { justify-content: center; }
.bf-access-h { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(1.55rem,3.6vw,2.7rem); line-height: 1.06; color: var(--white); margin: 1rem auto 1.2rem; max-width: 24ch; }
.bf-access-p { font-family: var(--font-display); font-weight: 300; font-size: clamp(.9rem,1.2vw,1.05rem); line-height: 1.6; color: var(--grey); max-width: 56ch; margin: 0 auto; }
.bf-cta { display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.3rem; }
@media (max-width: 640px){ .bf-cta { flex-direction: column; gap: 1.1rem; } }

/* ============================================================
   BLACK FEED — reproduction du canal privé (dispatch archivé)
   messagerie chiffrée stylisée DA BP · arrivée séquentielle
   ============================================================ */
/* Bandeau pleine largeur — en-tête de la messagerie (titre + sous-titre CENTRÉS sur dégradé noir→violet→noir). Utilisé sur Black Feed uniquement, .mod-compact garde la taille de titre compacte. */
.chan-banner { width: 100%; padding: clamp(2.4rem,5.5vh,4.5rem) var(--gutter); text-align: center; position: relative; overflow: hidden; background: linear-gradient(90deg, #000 0%, #000 16%, #090318 38%, #26094a 50%, #090318 62%, #000 84%, #000 100%); border-top: 1px solid rgba(107,0,204,.16); border-bottom: 1px solid rgba(107,0,204,.16); }
/* glow violet foncé VIVANT : dérive horizontale + respiration lente au centre du bandeau */
.chan-banner::before { content: ''; position: absolute; top: -80%; bottom: -80%; left: 0; right: 0; background: radial-gradient(ellipse 42% 84% at 50% 50%, rgba(108,8,200,.22), rgba(90,0,175,.06) 50%, transparent 72%); animation: chan-banner-live 12s ease-in-out infinite; pointer-events: none; z-index: 0; }
.chan-banner-in { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.chan-banner .mod-kicker { justify-content: center; color: rgba(255,255,255,.92); }
.chan-banner .mod-kicker::before { background: rgba(255,255,255,.55); }
.chan-banner .mod-title { color: #fff; margin-top: .85rem; }
.chan-banner .mod-sub { margin: .9rem auto 0; color: rgba(255,255,255,.8); }
@keyframes chan-banner-live { 0%, 100% { transform: translateX(-38%) scale(.96); opacity: .68; } 50% { transform: translateX(38%) scale(1.12); opacity: .95; } }
@media (prefers-reduced-motion: reduce){ .chan-banner::before { animation: none; opacity: .6; transform: none; } }
.chan { max-width: 720px; margin: clamp(2.2rem,5vw,3.4rem) auto 0; border-radius: 20px; position: relative; overflow: hidden; background: rgba(6,6,8,.66); border: 1px solid var(--silver-line); box-shadow: inset 0 1px 1px rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.025), 0 30px 80px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chan::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.10) 3px 4px); opacity: .4; }
.chan-head { position: relative; z-index: 1; display: flex; align-items: center; gap: .85rem; padding: clamp(.85rem,2vw,1.15rem) clamp(1rem,2.4vw,1.5rem); border-bottom: 1px solid var(--silver-line); background: rgba(255,255,255,.022); }
.chan-ava { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--silver-line); background: rgba(255,255,255,.045); box-shadow: inset 0 1px 1px rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex: none; }
.chan-ava img { width: 20px; height: 20px; opacity: .92; }
.chan-id { display: flex; flex-direction: column; gap: .16rem; margin-right: auto; min-width: 0; }
.chan-name { font-family: var(--font-title); font-weight: 600; font-size: .98rem; letter-spacing: -.01em; color: var(--white); }
.chan-status { display: flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: .54rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.chan-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8A14FF; box-shadow: 0 0 9px rgba(138,20,255,.8); }
.chan-lock { flex: none; color: rgba(240,240,240,.5); display: flex; }
.chan-lock svg { width: 15px; height: 15px; }
/* bouton "Rejoindre" intégré dans l'en-tête du canal (CTA natif type "join") */
.chan-join { flex: none; display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-title); font-weight: 600; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--white); text-decoration: none; padding: .5rem .95rem; border-radius: 999px; white-space: nowrap; background: linear-gradient(155deg, rgba(138,20,255,.92), rgba(107,0,204,.62) 48%, rgba(30,0,60,.75)); box-shadow: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -5px 12px rgba(0,0,0,.3), 0 3px 14px rgba(122,10,230,.35); transition: transform .25s var(--ease), box-shadow .25s ease; will-change: transform; }
.chan-join:hover { transform: scale(1.045); box-shadow: inset 0 1px 1px rgba(255,255,255,.38), 0 5px 20px rgba(138,20,255,.5); }
.chan-join .chan-join-ic { font-size: 1.05em; line-height: 0; margin-top: -1px; }
@media (max-width: 500px){ .chan-lock { display: none; } .chan-join { font-size: .55rem; padding: .45rem .8rem; } }
.chan-scroll { position: relative; z-index: 1; padding: clamp(1.1rem,2.5vw,1.7rem) clamp(.9rem,2.2vw,1.4rem) clamp(1.3rem,2.6vw,1.9rem); display: flex; flex-direction: column; gap: clamp(.85rem,1.9vw,1.2rem); }
.chan-date { align-self: center; font-family: var(--font-mono); font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); padding: .42em .95em; border: 1px solid var(--silver-line); border-radius: 999px; background: rgba(0,0,0,.35); margin-bottom: .3rem; }
.chan-msg { max-width: 84%; align-self: flex-start; background: linear-gradient(145deg, rgba(107,0,204,.34), rgba(74,0,160,.16) 58%, rgba(30,0,60,.07)); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 1px rgba(255,255,255,.12); border-radius: 4px 15px 15px 15px; padding: clamp(.75rem,1.7vw,1.05rem) clamp(.9rem,1.9vw,1.2rem); }
.chan-msg-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; flex-wrap: wrap; }
.chan-from { font-family: var(--font-mono); font-weight: 500; font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.chan-tag { font-family: var(--font-mono); font-size: .52rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.06); border-radius: 999px; padding: .28em .75em; }
.chan-text { font-family: var(--font-display); font-weight: 300; font-size: clamp(.9rem,1.25vw,1rem); line-height: 1.6; color: rgba(240,240,240,.82); }
.chan-meta { display: flex; align-items: center; gap: .75rem; margin-top: .65rem; font-family: var(--font-mono); font-size: .5rem; letter-spacing: .1em; color: var(--grey); }
.chan-views { display: inline-flex; align-items: center; gap: .4em; font-variant-numeric: tabular-nums; }
.chan-views svg { width: 11px; height: 11px; opacity: .7; }
.chan-end { align-self: center; font-family: var(--font-mono); font-size: .5rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(240,240,240,.3); margin-top: .4rem; }
/* séquence "en train d'écrire" — format pleine hauteur (le canal grandit au fil des messages) */
.chan.seq .chan-msg, .chan.seq .chan-end { display: none; }
.chan.seq .chan-msg.is-in { display: block; animation: msgPop .5s var(--ease) both; }
.chan.seq .chan-end.is-in { display: block; }
@keyframes msgPop { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
/* indicateur d'écriture (bulle + points animés) */
.chan-typing { align-self: flex-start; display: inline-flex; align-items: center; gap: .7rem; background: rgba(255,255,255,.03); border: 1px solid var(--silver-line); box-shadow: inset 0 1px 1px rgba(255,255,255,.07); border-radius: 4px 14px 14px 14px; padding: .7rem 1rem; }
.chan-typing-who { font-family: var(--font-mono); font-weight: 500; font-size: .58rem; letter-spacing: .04em; color: var(--grey); }
.typing-dots { display: inline-flex; gap: 5px; align-items: center; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); opacity: .4; animation: typingBounce 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2){ animation-delay: .16s; }
.typing-dots i:nth-child(3){ animation-delay: .32s; }
@keyframes typingBounce { 0%,60%,100%{ transform: translateY(0); opacity: .35; } 30%{ transform: translateY(-5px); opacity: 1; } }
/* annotations en marge — légendes qui pointent chaque message (après le dispatch) */
.chan-wrap { position: relative; max-width: 1180px; margin: 0 auto; }
.chan-wrap > .chan { z-index: 2; }
.chan-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.chan-links .chan-link { stroke: rgba(240,240,240,.38); stroke-width: 1; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chan-links .chan-dot { fill: rgba(240,240,240,.6); }
.chan-annos { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.chan-anno { position: absolute; width: clamp(140px,14vw,172px); opacity: 0; transform: translateY(8px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.chan-anno.in { opacity: 1; transform: none; }
.chan-anno.left { text-align: right; }
.chan-anno.right { text-align: left; }
.chan-anno-t { display: block; font-family: var(--font-mono); font-weight: 500; font-size: .53rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(240,240,240,.62); margin-bottom: .5rem; }
.chan-anno-d { display: block; font-family: var(--font-display); font-weight: 300; font-size: .82rem; line-height: 1.5; color: var(--grey); }
@media (min-width: 1001px){ .chan-wrap { margin-inline: calc(var(--gutter) * -1); } }  /* élargit la zone pour loger les annotations en marge */
@media (max-width: 1000px){ .chan-annos, .chan-links { display: none; } }
@media (max-width: 560px){ .chan-msg { max-width: 92%; } }
@media (prefers-reduced-motion: reduce){ .typing-dots i { animation: none; } }

/* Vrai logo wordmark PNG (remplace le wordmark refait en police) — se dimensionne sur le font-size du contexte, garde le ® du wrapper */
.wmk{display:inline-block;height:auto;width:7.77em;vertical-align:-.17em}
.wmk-bf{width:4.83em;vertical-align:-.02em}
.bi-word,.wm,.cf-name{white-space:nowrap}

/* Petite pilule « espace privé / connexion » à droite de la nav (desktop) — même verre que la nav (.lg-s) */
.nav-login{position:fixed;top:1rem;z-index:9990;left:calc(50% + min(460px,(100% - 2.4rem)/2) + .6rem);width:53px;height:53px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(20,20,27,.66);box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 12px 44px rgba(0,0,0,.6);color:var(--white);text-decoration:none;transition:transform .2s ease;}
.nav-login svg{width:20px;height:20px;opacity:.9;position:relative;z-index:1;}
.nav-login:hover{transform:scale(1.06);}
.nav-login:hover svg{opacity:1;color:var(--violet);}
body.pre-hero .nav-login{opacity:0;pointer-events:none;}
@media (max-width:1080px){.nav-login{display:none;}}

/* ===== SEO — capture Googlebot =====
   Googlebot rend souvent la page dans un viewport de plusieurs milliers de px de haut
   (pour déclencher le lazy-load). Avec min-height:100vh, le héros devient géant et son
   contenu (centré) tombe SOUS la bande capturée -> capture "header + noir".
   On borne la hauteur du héros UNIQUEMENT sur ces viewports ultra-hauts : au moins 1500px
   de haut ET au moins 3× plus hauts que larges. Aucun écran réel ne matche (téléphones ~1/2,
   tablettes/moniteurs portrait ~1/1.8) -> zéro changement de rendu de 375 à 1920px. */
@media (min-height: 1500px) and (max-aspect-ratio: 1/3){
  /* !important : bat aussi les surcharges inline par page (ex. black-feed : .prog-hero sticky height:100vh au desktop). Ne matche que le viewport ultra-haut du crawler -> jamais un écran réel. */
  .prog-hero { min-height: 1100px !important; height: auto !important; }
  .prog-hero .hero-inner, .prog-hero .hero-inner.hp { min-height: 1100px !important; height: auto !important; }
  /* sections au contenu (plus de 100vh) pour que tout s'empile sans trou */
  .prog, .mod, .sim, .deck, .deck .chapter { min-height: 0 !important; }
  body.deck-page, .deck { height: auto !important; overflow: visible !important; }
  /* page contact : héros .ct en 100vh + padding 16vh (form centré -> tombe hors capture). a-propos NON listé : son héros n'a pas de 100vh (padding clamp borné) -> déjà propre. */
  .ct { min-height: 0 !important; padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  /* tous les états reveal-au-scroll -> visibles (Googlebot ne scrolle pas) ; !important bat les inline non-important */
  .mod.armed .mod-head-block, .mod.armed .mod-row,
  .deck.armed .chapter:not(.in) > main, .deck.armed .chapter:not(.in) > section, .deck.armed .chapter:not(.in) > footer,
  .sim .mod-kicker, .sim .mod-title, .sim .mod-sub, .sim .flow, .sim .flow-nav, .flow-cap
  { opacity: 1 !important; transform: none !important; visibility: visible !important; }
}