/*
 * Ovastack — « Reel » (refonte 2026-09-29)
 *
 * Direction : la convergence. Trois faisceaux de fibre — compute #567eff,
 * stockage #42bbdf, réseau #67e0b9, soit les trois arrêts de
 * --cb-accent-gradient — fusionnent en une seule pile. Chaque scène décline ce
 * geste avec une grammaire d’ingénierie (isométrie, lignes droites, voies de
 * données), distincte de la houle organique de Serenia :
 * hero fibres → consoles éclatées → nœud isométrique → puce EPYC → périmètre
 * belge → bande de sauvegardes → orbite → calculateur → workloads → finale.
 * Référence de style : hero cinématique de l’accueil (fond encre, verre, CTA
 * #a5d8ff, titres Cerebri Light 300). Tailles : tokens --cb-* de styles.css.
 * Mouvement : ovastack-motion.js. Sans JS ou en mouvement réduit, chaque scène
 * s’affiche dans son état final, lisible et statique. Le header produit vit dans
 * ovastack-hero.css.
 */

/* ---------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------ */
.ovr-page {
  --ovr-bg: #030814;
  --ovr-line: rgba(146, 176, 216, .14);
  --ovr-line-2: rgba(146, 176, 216, .26);
  --ovr-ink: var(--cb-display-ink-dark);
  --ovr-text: var(--cb-lead-ink-dark);
  --ovr-muted: #8c9bb8;
  --ovr-strong: #eef3fb;
  --ovr-compute: #567eff;
  --ovr-storage: #42bbdf;
  --ovr-network: #67e0b9;
  --ovr-snap: #a5d8ff;
  --ovr-alert: #ff5f7a;
  --ovr-cta: #a5d8ff;
  --ovr-cta-ink: #03101d;
  --ovr-ease: cubic-bezier(.16, 1, .3, 1);
  --ovr-ease-io: cubic-bezier(.65, 0, .35, 1);
  --ovr-shell: min(calc(100% - 120px), 1360px);
  background: var(--ovr-bg);
  color: var(--ovr-text);
}

.ovastack-page .ovastack-main.ovr {
  position: relative;
  overflow: clip;
  background: var(--ovr-bg);
}

.ovr-page ::selection {
  background: rgba(66, 187, 223, .32);
  color: #fff;
}

.ovr-page :where(a, button, select, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ovr-cta);
  outline-offset: 3px;
}

.ovr-page main:has(> .page-breadcrumb--product) {
  --breadcrumb-top: calc(var(--cb-topbar-h) + 14px);
}

.ovr-shell {
  width: var(--ovr-shell);
  margin-inline: auto;
}

.ovr-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
 * Typographie & composants partagés
 * ------------------------------------------------------------------------ */
.ovr-eyebrow {
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cb-eyebrow-ink-dark);
  font-family: var(--cb-display-font);
  font-size: var(--cb-eyebrow-size);
  font-weight: var(--cb-eyebrow-weight);
  letter-spacing: var(--cb-eyebrow-tracking);
  line-height: 1.3;
  text-transform: uppercase;
}

.ovr-eyebrow > i {
  width: 28px;
  height: 1px;
  background: var(--cb-accent-gradient);
}

.ovr-eyebrow--alert > i {
  background: linear-gradient(90deg, var(--ovr-alert), #ffb547);
}

.ovr-title,
.ovr-hero__title,
.ovr-statement,
.ovr-finale__statement,
.ovr-finale__card h2 {
  margin: 0;
  color: var(--ovr-ink);
  font-family: var(--cb-display-font);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
  text-wrap: balance;
}

.ovr-title { font-size: var(--cb-title-section); }
.ovr-title--side { font-size: var(--cb-title-section-side); }
.ovr-statement { font-size: var(--cb-title-section-side); }
.ovr-finale__statement { font-size: var(--cb-title-section); }

.ovr-accent {
  font-style: normal;
  background: var(--cb-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ovr-lead {
  margin: 26px 0 0;
  color: var(--ovr-text);
  font-family: var(--cb-display-font);
  font-size: var(--cb-lead-section);
  font-weight: var(--cb-lead-weight);
  letter-spacing: var(--cb-lead-tracking);
  line-height: 1.4;
  text-wrap: pretty;
}

.ovr-lead--side {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
}

.ovr-note {
  margin: 16px 0 0;
  color: var(--ovr-muted);
  font-size: 14px;
  line-height: 1.55;
}

.ovr-head {
  position: relative;
  z-index: 2;
}

.ovr-head--center {
  max-width: 1180px;
  text-align: center;
}

.ovr-head--center .ovr-lead {
  max-width: 900px;
  margin-inline: auto;
}

.ovr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.ovr-btn {
  --mx: 0px;
  --my: 0px;
  position: relative;
  min-height: 54px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--cb-display-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  translate: var(--mx) var(--my);
  transition: translate .45s var(--ovr-ease), border-color .3s ease, background-color .3s ease, box-shadow .3s ease, color .3s ease;
  isolation: isolate;
}

.ovr-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--ovr-ease);
}

.ovr-btn:hover svg,
.ovr-btn:focus-visible svg { transform: translateX(4px); }

.ovr-btn--primary {
  border-color: rgba(194, 233, 255, .7);
  color: var(--ovr-cta-ink);
  background: linear-gradient(110deg, #a7ddff 0%, #8dcef8 100%);
  box-shadow: 0 14px 40px rgba(78, 178, 243, .18);
}

.ovr-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--ovr-ease);
}

.ovr-btn--primary:hover::before,
.ovr-btn--primary:focus-visible::before { transform: translateX(120%); }

.ovr-btn--primary:hover,
.ovr-btn--primary:focus-visible {
  color: #020b16;
  box-shadow: 0 18px 48px rgba(78, 178, 243, .32);
}

.ovr-btn--ghost {
  border-color: rgba(165, 216, 255, .3);
  color: #dbe8fb;
  background: rgba(8, 20, 44, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ovr-btn--ghost:hover,
.ovr-btn--ghost:focus-visible {
  border-color: rgba(165, 216, 255, .68);
  color: #fff;
  background: rgba(20, 40, 80, .55);
}

.ovr-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #bfe4ff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.ovr-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--ovr-ease);
}

.ovr-link:hover { color: #fff; }
.ovr-link:hover svg { transform: translateX(5px); }

/* Révélations au défilement (activées seulement quand le JS est présent). */
.ovr-motion [data-ovr-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity 1s var(--ovr-ease), transform 1.2s var(--ovr-ease);
}

.ovr-motion [data-ovr-reveal].is-in {
  opacity: 1;
  transform: none;
}

.ovr-motion [data-ovr-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 1s var(--ovr-ease), transform 1.3s var(--ovr-ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.ovr-motion [data-ovr-stagger].is-in > * {
  opacity: 1;
  transform: none;
}

/* Mots découpés (titres cinétiques). */
.ovr-w {
  display: inline-block;
  white-space: nowrap;
}

.ovr-w__i {
  display: inline-block;
  will-change: transform;
}

.ovr-mask .ovr-w {
  overflow: clip;
  padding-bottom: .12em;
  margin-bottom: -.12em;
  vertical-align: top;
}

.ovr-motion .ovr-mask .ovr-w__i {
  transform: translate3d(0, 108%, 0);
  transition: transform 1.2s var(--ovr-ease);
  transition-delay: calc(var(--wi, 0) * 70ms);
}

.ovr-motion .ovr-mask.is-in .ovr-w__i { transform: none; }

/* ---------------------------------------------------------------------------
 * Rail de chapitres (timecode de bobine) et pause des animations
 * ------------------------------------------------------------------------ */
.ovr-rail {
  position: fixed;
  top: 50%;
  right: 20px;
  z-index: 90;
  display: none;
  justify-items: end;
  gap: 16px;
  transform: translateY(-50%);
  transition: opacity .5s ease, visibility .5s;
}

.ovr-rail.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.ovr-rail ol {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  list-style: none;
}

.ovr-rail a {
  position: relative;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: rgba(203, 215, 234, .46);
  font-family: var(--cb-display-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .3s ease;
}

.ovr-rail__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 6px);
  margin-top: -11px;
  padding: 5px 9px;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(6, 16, 38, .86);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .3s ease, transform .4s var(--ovr-ease);
  pointer-events: none;
}

.ovr-rail__num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.ovr-rail__num::after {
  content: "";
  width: 12px;
  height: 1px;
  background: currentColor;
  transition: width .45s var(--ovr-ease), background-color .3s ease;
}

.ovr-rail a:hover,
.ovr-rail a:focus-visible,
.ovr-rail a[aria-current="true"] { color: #eef6ff; }

.ovr-rail a:hover .ovr-rail__label,
.ovr-rail a:focus-visible .ovr-rail__label {
  opacity: 1;
  transform: none;
}

.ovr-rail a[aria-current="true"] .ovr-rail__num::after {
  width: 26px;
  background: var(--ovr-storage);
}

.ovr-rail__progress {
  width: 1px;
  height: 64px;
  margin-right: 5px;
  overflow: hidden;
  background: rgba(146, 176, 216, .2);
}

.ovr-rail__progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cb-accent-gradient);
  transform: scaleY(var(--ovr-page-p, 0));
  transform-origin: top;
}

.ovr-rail__tc {
  color: rgba(203, 215, 234, .44);
  font-family: var(--cb-display-font);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

@media (min-width: 1280px) and (min-height: 700px) {
  .ovr-rail { display: grid; }
  .ovr-page { --ovr-shell: min(calc(100% - 170px), 1360px); }
}

.ovr-pause {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 90;
  min-width: 44px;
  height: 44px;
  padding: 0 13px;
  display: none;
  align-items: center;
  gap: 0;
  border: 1px solid var(--ovr-line-2);
  border-radius: 999px;
  color: #dfe8f7;
  background: rgba(6, 16, 38, .82);
  font: 600 13px/1 var(--cb-display-font);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: gap .4s var(--ovr-ease), border-color .3s ease, opacity .5s ease, visibility .5s;
}

.ovr-cinema .ovr-pause,
.ovr-paused .ovr-pause { display: inline-flex; }

.ovr-pause.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.ovr-pause svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ovr-pause__play { display: none; }
.ovr-pause[aria-pressed="true"] .ovr-pause__bars { display: none; }
.ovr-pause[aria-pressed="true"] .ovr-pause__play { display: inline; fill: currentColor; }

.ovr-pause__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .45s var(--ovr-ease);
}

.ovr-pause:hover,
.ovr-pause:focus-visible,
.ovr-pause[aria-pressed="true"] {
  gap: 9px;
  border-color: rgba(165, 216, 255, .6);
}

.ovr-pause:hover .ovr-pause__label,
.ovr-pause:focus-visible .ovr-pause__label,
.ovr-pause[aria-pressed="true"] .ovr-pause__label { max-width: 240px; }

.ovr-paused .ovr-page *,
.ovr-paused .ovr-page *::before,
.ovr-paused .ovr-page *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------------------
 * 01 · Hero — convergence des fibres
 * ------------------------------------------------------------------------ */
.ovr-hero {
  position: relative;
  min-height: max(720px, 100svh);
  display: grid;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 55% 60% at 74% 64%, rgba(36, 104, 160, .2), transparent 70%),
    linear-gradient(180deg, #02060f 0%, #030a1a 55%, var(--ovr-bg) 100%);
}

.ovr-hero__field {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
}

.ovr-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 64% at 18% 48%, rgba(3, 8, 20, .82) 0%, rgba(3, 8, 20, .4) 55%, rgba(3, 8, 20, 0) 80%),
    linear-gradient(180deg, rgba(3, 8, 20, .45) 0%, rgba(3, 8, 20, 0) 22%, rgba(3, 8, 20, 0) 80%, var(--ovr-bg) 100%);
}

.ovr-hero__inner {
  position: relative;
  min-height: inherit;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: calc(var(--cb-topbar-h) + 88px);
  padding-bottom: 34px;
  box-sizing: border-box;
}

.ovr-hero__copy {
  align-self: center;
  max-width: 700px;
}

.ovr-hero__title { font-size: var(--cb-title-hero); }

.ovr-line {
  display: block;
  overflow: clip;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

.ovr-line__in { display: block; }

.ovr-hero__lead {
  max-width: 600px;
  margin-top: 28px;
  font-size: clamp(18px, 1.35vw, 21px);
  line-height: 1.5;
}

.ovr-hero__actions { margin-top: 36px; }

.ovr-reassurance {
  margin: 20px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ovr-muted);
  font-size: 15px;
}

.ovr-reassurance svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--ovr-network);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ovr-hero__foot {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 24px;
}

.ovr-bricks {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.ovr-brick {
  min-height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ovr-line-2);
  border-radius: 999px;
  color: #dfe8f7;
  background: rgba(6, 16, 38, .5);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ovr-brick i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--brick);
  box-shadow: 0 0 12px var(--brick);
  transform: rotate(45deg);
}

.ovr-brick--compute { --brick: var(--ovr-compute); }
.ovr-brick--storage { --brick: var(--ovr-storage); }
.ovr-brick--network { --brick: var(--ovr-network); }

.ovr-cue {
  min-height: 44px;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--ovr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
}

.ovr-cue i {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: rgba(146, 176, 216, .22);
}

.ovr-cue i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, transparent, var(--ovr-storage));
  animation: ovr-cue 2.2s var(--ovr-ease-io) infinite;
}

.ovr-hud {
  justify-self: end;
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ovr-line-2);
  border-radius: 999px;
  background: rgba(6, 16, 38, .55);
  color: #dfe8f7;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ovr-hud__bars {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 3px;
  transition: gap .8s var(--ovr-ease);
}

.ovr-hud__bars i {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  transition: border-radius .8s var(--ovr-ease), transform .8s var(--ovr-ease);
}

.ovr-hud__bars i:nth-child(1) { background: var(--ovr-compute); transform: translateY(-3px); }
.ovr-hud__bars i:nth-child(2) { background: var(--ovr-storage); transform: translateY(3px); }
.ovr-hud__bars i:nth-child(3) { background: var(--ovr-network); transform: translateY(-1px); }

.ovr-hud.is-one .ovr-hud__bars { gap: 0; }
.ovr-hud.is-one .ovr-hud__bars i { transform: none; border-radius: 0; }
.ovr-hud.is-one .ovr-hud__bars i:first-child { border-radius: 2px 0 0 2px; }
.ovr-hud.is-one .ovr-hud__bars i:last-child { border-radius: 0 2px 2px 0; }

.ovr-hud__label { color: var(--ovr-muted); }

.ovr-hud__state {
  position: relative;
  display: inline-block;
}

.ovr-hud__state > span {
  display: inline-block;
  transition: opacity .6s ease, transform .6s var(--ovr-ease);
}

/* L’état masqué sort du flux : la pastille épouse le libellé affiché. */
.ovr-hud__after,
.ovr-hud.is-one .ovr-hud__before {
  position: absolute;
  top: 0;
  left: 0;
}

.ovr-hud.is-one .ovr-hud__after { position: static; }
.ovr-hud__before { color: #ffb4c1; }
.ovr-hud__after { color: var(--ovr-network); opacity: 0; transform: translateY(8px); }
.ovr-hud.is-one .ovr-hud__before { opacity: 0; transform: translateY(-8px); }
.ovr-hud.is-one .ovr-hud__after { opacity: 1; transform: none; }

/* Intro du hero en CSS pur : fonctionne même si le JS échoue. */
@media (prefers-reduced-motion: no-preference) {
  .ovr-hero__eyebrow { animation: ovr-rise 1s var(--ovr-ease) .15s both; }
  .ovr-line__in { animation: ovr-line-in 1.3s var(--ovr-ease) both; }
  .ovr-line:nth-child(1) .ovr-line__in { animation-delay: .28s; }
  .ovr-line:nth-child(2) .ovr-line__in { animation-delay: .44s; }
  .ovr-hero__lead { animation: ovr-rise 1.1s var(--ovr-ease) .85s both; }
  .ovr-hero__actions { animation: ovr-rise 1.1s var(--ovr-ease) 1s both; }
  .ovr-reassurance { animation: ovr-rise 1.1s var(--ovr-ease) 1.15s both; }
  .ovr-hero__foot { animation: ovr-fade 1.4s ease 1.4s both; }
}

/* Bandeau de garanties */
.ovr-trust {
  position: relative;
  z-index: 2;
  border-block: 1px solid var(--ovr-line);
  background: linear-gradient(180deg, rgba(8, 18, 42, .72), rgba(4, 10, 26, .72));
}

.ovr-trust__list {
  margin-block: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.ovr-trust__list li {
  min-height: 96px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-right: 1px solid var(--ovr-line);
  color: #e6eefb;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-align: left;
}

.ovr-trust__list li:last-child { border-right: 0; }

.ovr-trust__list svg {
  width: 30px;
  height: 30px;
  flex: none;
  fill: none;
  stroke: var(--ovr-storage);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ovr-trust__list li:nth-child(1) svg { stroke: var(--ovr-network); }
.ovr-trust__list li:nth-child(3) svg { stroke: var(--ovr-compute); }

.ovr-motion .ovr-trust__list svg * {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  transition: stroke-dashoffset 1.6s var(--ovr-ease) .25s;
}

.ovr-motion .ovr-trust__list.is-in svg * { stroke-dashoffset: 0; }

/* ---------------------------------------------------------------------------
 * Manifeste — trois consoles, une plateforme
 * ------------------------------------------------------------------------ */
.ovr-manifesto {
  position: relative;
  background: linear-gradient(180deg, var(--ovr-bg) 0%, #040b1d 50%, var(--ovr-bg) 100%);
}

.ovr-manifesto__sticky {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.ovr-manifesto__cables {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.ovr-manifesto__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(40px, 5vw, 90px);
  padding-block: 130px;
}

.ovr-manifesto__copy {
  display: grid;
  gap: 80px;
}

.ovr-beat { max-width: 640px; }
.ovr-beat .ovr-lead { max-width: 560px; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.5; }

.ovr-statement--chaos .ovr-w__i {
  text-shadow:
    calc(var(--g, 0) * 3px) 0 rgba(255, 95, 122, .55),
    calc(var(--g, 0) * -3px) 0 rgba(66, 187, 223, .45);
}

.ovr-beat--calm .ovr-statement .ovr-w:last-child .ovr-w__i,
.ovr-beat--calm .ovr-statement .ovr-w:nth-last-child(2) .ovr-w__i {
  background: var(--cb-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.ovr-consoles {
  position: relative;
  width: min(100%, 600px);
  aspect-ratio: 1.08;
  justify-self: center;
  perspective: 1600px;
  perspective-origin: 50% 36%;
}

.ovr-console {
  --c: var(--ovr-storage);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  padding-bottom: 20px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  border: 1px solid color-mix(in srgb, var(--c) 48%, transparent);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(14, 26, 58, .96), rgba(6, 14, 34, .97));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 40px color-mix(in srgb, var(--c) 12%, transparent);
  will-change: transform, opacity;
}

.ovr-console--compute { --c: var(--ovr-compute); }
.ovr-console--storage { --c: var(--ovr-storage); }
.ovr-console--network { --c: var(--ovr-network); }

.ovr-console__bar {
  margin: 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--ovr-line);
}

.ovr-console__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(146, 176, 216, .32);
}

.ovr-console__bar b {
  margin-left: 10px;
  color: var(--c);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ovr-console__body {
  padding: 18px 18px 0;
  display: grid;
  gap: 11px;
}

.ovr-console__body span {
  width: calc(var(--w) * 100%);
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 72%, transparent), color-mix(in srgb, var(--c) 14%, transparent));
}

.ovr-console__alert {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ovr-alert);
  box-shadow: 0 0 0 6px rgba(255, 95, 122, .18), 0 0 24px rgba(255, 95, 122, .6);
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
  opacity: var(--alert, 1);
}

.ovr-console--unified {
  --c: var(--ovr-storage);
  width: 66%;
  border-color: rgba(165, 216, 255, .42);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 0 70px rgba(66, 187, 223, .2);
}

.ovr-console--unified .ovr-console__bar b {
  color: #fff;
  font-size: 15px;
  letter-spacing: -.02em;
  text-transform: none;
}

.ovr-console__rows {
  margin: 0;
  padding: 16px 16px 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.ovr-console__row {
  --rc: var(--ovr-storage);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ovr-line);
  border-radius: 12px;
  color: #e6eefb;
  background: rgba(8, 18, 40, .6);
  font-size: 15px;
  font-weight: 600;
  transition: border-color .5s ease, background-color .5s ease;
}

.ovr-console__row--compute { --rc: var(--ovr-compute); }
.ovr-console__row--network { --rc: var(--ovr-network); }

.ovr-console__row i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--rc);
  box-shadow: 0 0 10px var(--rc);
  transform: rotate(45deg);
}

.ovr-console__row em {
  color: var(--ovr-network);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: opacity .5s ease;
}

.ovr-cinema .ovr-manifesto.ovr-pin .ovr-console__row:not(.is-on) em { opacity: 0; }
.ovr-console__row.is-on { border-color: color-mix(in srgb, var(--rc) 45%, transparent); background: color-mix(in srgb, var(--rc) 9%, rgba(8, 18, 40, .6)); }

/* Sans épinglage : seule la console unifiée (état final) est montrée. */
.ovr-console:not(.ovr-console--unified) { display: none; }
.ovr-cinema .ovr-manifesto.ovr-pin .ovr-console:not(.ovr-console--unified) { display: block; }

.ovr-cinema .ovr-manifesto.ovr-pin { height: 300vh; }

.ovr-cinema .ovr-manifesto.ovr-pin .ovr-manifesto__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
}

.ovr-cinema .ovr-manifesto.ovr-pin .ovr-manifesto__grid { padding-block: calc(var(--cb-topbar-h) + 10px) 40px; }
.ovr-cinema .ovr-manifesto.ovr-pin .ovr-manifesto__copy { gap: 0; }
.ovr-cinema .ovr-manifesto.ovr-pin .ovr-beat { grid-area: 1 / 1; }
.ovr-cinema .ovr-manifesto.ovr-pin .ovr-beat--calm { opacity: 0; }

/* ---------------------------------------------------------------------------
 * 02 · Plateforme — le nœud isométrique
 * ------------------------------------------------------------------------ */
.ovr-platform {
  position: relative;
  padding-bottom: clamp(90px, 11vh, 130px);
  background:
    radial-gradient(ellipse 48% 42% at 72% 44%, rgba(66, 187, 223, .09), transparent 70%),
    var(--ovr-bg);
}

.ovr-platform__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(40px, 5vw, 90px);
  padding-block: clamp(100px, 12vh, 140px) 30px;
}

.ovr-platform__copy { max-width: 620px; }

.ovr-caps {
  margin: 30px 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.ovr-cap {
  padding: 14px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid var(--ovr-line);
  border-radius: 16px;
  background: rgba(8, 18, 40, .5);
  transition: border-color .6s ease, background-color .6s ease, box-shadow .6s ease;
}

.ovr-cap__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(66, 187, 223, .14);
  transition: background-color .6s ease, box-shadow .6s ease;
}

.ovr-cap__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--ovr-storage);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .6s ease;
}

.ovr-cap h3 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.ovr-cap p {
  margin: 4px 0 0;
  color: #b6c3d8;
  font-size: 14px;
  line-height: 1.45;
}

.ovr-motion .ovr-cap:not(.is-on) .ovr-cap__icon { background: rgba(146, 176, 216, .08); }
.ovr-motion .ovr-cap:not(.is-on) .ovr-cap__icon svg { stroke: #7d8ba6; }

.ovr-cap.is-on {
  border-color: rgba(66, 187, 223, .42);
  background: rgba(10, 30, 58, .62);
  box-shadow: 0 0 34px rgba(66, 187, 223, .1);
}

.ovr-cap.is-on .ovr-cap__icon { box-shadow: 0 0 20px rgba(66, 187, 223, .35); }

.ovr-stage {
  position: relative;
  width: min(100%, 640px);
  margin: 0 auto;
  aspect-ratio: 1;
}

.ovr-stage > svg,
.ovr-stage > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ovr-stage > canvas { pointer-events: none; }

.ovr-stage__hud {
  position: absolute;
  left: 50%;
  bottom: 2%;
  min-height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--ovr-line-2);
  border-radius: 999px;
  color: var(--ovr-muted);
  background: rgba(6, 16, 38, .78);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

.ovr-stage__hud i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffb547;
  box-shadow: 0 0 10px #ffb547;
  transition: background-color .5s ease, box-shadow .5s ease;
}

.ovr-stage__hud b {
  color: rgba(255, 255, 255, .4);
  font-weight: 700;
  transition: color .5s ease;
}

.ovr-stage--stack.is-live .ovr-stage__hud i,
:root:not(.ovr-motion) .ovr-stage__hud i {
  background: var(--ovr-network);
  box-shadow: 0 0 12px var(--ovr-network);
  animation: ovr-pulse 2.4s ease-out infinite;
}

.ovr-stage--stack.is-live .ovr-stage__hud b,
:root:not(.ovr-motion) .ovr-stage__hud b { color: var(--ovr-network); }

.ovr-iso { overflow: visible; }

.ovr-plate { --pc: var(--ovr-storage); }
.ovr-plate--compute { --pc: var(--ovr-compute); }
.ovr-plate--network { --pc: var(--ovr-network); }

.ovr-plate__top {
  stroke: var(--pc);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: filter .6s ease;
}

.ovr-plate__side--l {
  fill: color-mix(in srgb, var(--pc) 20%, #030814);
  stroke: color-mix(in srgb, var(--pc) 55%, transparent);
  stroke-width: 1;
}

.ovr-plate__side--r {
  fill: color-mix(in srgb, var(--pc) 32%, #030814);
  stroke: color-mix(in srgb, var(--pc) 55%, transparent);
  stroke-width: 1;
}

.ovr-plate__pattern {
  fill: none;
  stroke: var(--pc);
  stroke-opacity: .32;
  stroke-width: 1;
}

.ovr-plate__cores path {
  fill: var(--pc);
  opacity: .22;
  animation: ovr-core 2.6s ease-in-out infinite;
}

.ovr-plate__cores path:nth-child(2) { animation-delay: .65s; }
.ovr-plate__cores path:nth-child(3) { animation-delay: 1.3s; }
.ovr-plate__cores path:nth-child(4) { animation-delay: 1.95s; }

.ovr-plate__ports circle {
  fill: var(--pc);
  animation: ovr-blink 1.8s steps(2, jump-none) infinite;
}

.ovr-plate__ports circle:nth-child(2n) { animation-delay: .45s; }
.ovr-plate__ports circle:nth-child(3n) { animation-delay: .9s; }

.ovr-plate__led {
  fill: none;
  stroke: var(--pc);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 12;
  animation: ovr-flow 1.1s linear infinite;
  filter: drop-shadow(0 0 4px var(--pc));
}

.ovr-plate__label path {
  fill: none;
  stroke: color-mix(in srgb, var(--pc) 70%, transparent);
  stroke-width: 1.5;
}

.ovr-plate__label text,
.ovr-iso__plane-label text,
.ovr-iso__workloads-label text {
  fill: #dfe8f7;
  font-family: var(--cb-display-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ovr-plate.is-locked .ovr-plate__top { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--pc) 55%, transparent)); }
.ovr-plate.is-flash .ovr-plate__top { animation: ovr-plate-flash .7s ease-out; }

.ovr-iso__ring-base {
  fill: none;
  stroke: rgba(146, 176, 216, .2);
  stroke-width: 1;
  stroke-dasharray: 2 7;
}

.ovr-iso__ring-flow {
  fill: none;
  stroke: var(--ovr-storage);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 18;
  animation: ovr-ring 7s linear infinite;
  filter: drop-shadow(0 0 5px rgba(66, 187, 223, .8));
}

.ovr-iso__plane-label path,
.ovr-iso__workloads-label path {
  fill: none;
  stroke: rgba(165, 216, 255, .4);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.ovr-iso__plane-label text { fill: #9fdcff; font-size: 12px; letter-spacing: .18em; }
.ovr-iso__workloads-label text { fill: #bff3df; font-size: 12px; letter-spacing: .18em; }

.ovr-motion .ovr-iso__ring,
.ovr-motion .ovr-iso__plane-label,
.ovr-motion .ovr-iso__workloads-label {
  opacity: 0;
  transition: opacity .8s ease;
}

.ovr-stage--stack.is-plane .ovr-iso__ring,
.ovr-stage--stack.is-plane .ovr-iso__plane-label,
.ovr-stage--stack.is-work .ovr-iso__workloads-label { opacity: 1; }

.ovr-cube { --kc: var(--ovr-compute); }
.ovr-cube--db { --kc: var(--ovr-storage); }
.ovr-cube--app { --kc: var(--ovr-network); }

.ovr-cube__t { fill: color-mix(in srgb, var(--kc) 62%, #0b1530); stroke: color-mix(in srgb, var(--kc) 40%, #fff); stroke-width: 1; }
.ovr-cube__l { fill: color-mix(in srgb, var(--kc) 26%, #030814); stroke: color-mix(in srgb, var(--kc) 60%, transparent); stroke-width: 1; }
.ovr-cube__r { fill: color-mix(in srgb, var(--kc) 42%, #030814); stroke: color-mix(in srgb, var(--kc) 60%, transparent); stroke-width: 1; }

.ovr-cube text {
  fill: #fff;
  font-family: var(--cb-display-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  paint-order: stroke;
  stroke: #030814;
  stroke-width: 3px;
}

.ovr-proofs {
  margin-block: 34px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.ovr-proofs li {
  min-height: 70px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--ovr-line);
  border-radius: 16px;
  color: #e3ebf8;
  background: rgba(8, 18, 40, .45);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ovr-proofs svg {
  width: 28px;
  height: 28px;
  flex: none;
  fill: none;
  stroke: var(--ovr-storage);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ovr-cinema .ovr-platform.ovr-pin .ovr-platform__track { height: 250vh; }

.ovr-cinema .ovr-platform.ovr-pin .ovr-platform__sticky {
  position: sticky;
  top: var(--cb-topbar-h);
  min-height: calc(100svh - var(--cb-topbar-h));
  display: grid;
  align-items: center;
}

.ovr-cinema .ovr-platform.ovr-pin .ovr-platform__grid { padding-block: 20px; }

.ovr-cinema .ovr-platform.ovr-pin .ovr-stage--stack {
  width: min(100%, 640px, calc(100svh - var(--cb-topbar-h) - 50px));
}

/* ---------------------------------------------------------------------------
 * 03 · Performance — la puce et les voies NVMe
 * ------------------------------------------------------------------------ */
.ovr-perf {
  position: relative;
  padding: clamp(110px, 14vh, 170px) 0;
  background:
    radial-gradient(ellipse 50% 48% at 70% 50%, rgba(86, 126, 255, .11), transparent 70%),
    var(--ovr-bg);
}

.ovr-perf__grid {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(40px, 5vw, 90px);
}

.ovr-perf__copy { max-width: 600px; }

.ovr-limits__cap {
  margin: 34px 0 0;
  color: var(--ovr-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ovr-limits {
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.ovr-limit {
  --lc: var(--ovr-compute);
  position: relative;
  padding: 16px 16px 15px;
  display: grid;
  gap: 2px;
  overflow: hidden;
  border: 1px solid var(--ovr-line);
  border-radius: 18px;
  background: rgba(8, 18, 40, .55);
}

.ovr-limit::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--lc);
  box-shadow: 0 0 16px var(--lc);
}

.ovr-limit--storage { --lc: var(--ovr-storage); }
.ovr-limit--network { --lc: var(--ovr-network); }

.ovr-limit__pre {
  color: var(--ovr-muted);
  font-size: 13px;
  font-weight: 600;
}

.ovr-limit__num {
  color: #fff;
  font-family: var(--cb-display-font);
  font-size: clamp(32px, 2.8vw, 44px);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  line-height: 1.05;
  white-space: nowrap;
}

.ovr-limit__unit {
  color: color-mix(in srgb, var(--lc) 70%, #fff);
  font-size: 14px;
  font-weight: 700;
}

.ovr-stage--chip {
  width: min(100%, 720px);
  aspect-ratio: 720 / 520;
}

.ovr-chip__package {
  fill: #081029;
  stroke: rgba(146, 176, 216, .38);
  stroke-width: 1.5;
}

.ovr-ccd {
  fill: #0d1a42;
  stroke: rgba(86, 126, 255, .6);
  stroke-width: 1.2;
}

.ovr-ccd__cores rect {
  fill: rgba(86, 126, 255, .26);
  transition: fill .35s ease;
}

.ovr-ccd__cores rect.is-hot { fill: #9db6ff; }

.ovr-ccd__cache {
  fill: rgba(66, 187, 223, .14);
  stroke: rgba(66, 187, 223, .32);
  stroke-width: 1;
}

.ovr-chip__iod {
  stroke: rgba(165, 216, 255, .6);
  stroke-width: 1.4;
}

.ovr-chip__iod-label {
  fill: #cfe0ff;
  font-family: var(--cb-display-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .24em;
}

.ovr-chip__if path {
  fill: none;
  stroke: rgba(86, 126, 255, .55);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  animation: ovr-flow 1.3s linear infinite;
}

.ovr-chip__lanes path {
  fill: none;
  stroke: rgba(66, 187, 223, .26);
  stroke-width: 2;
  stroke-linejoin: round;
}

.ovr-stick__pcb {
  fill: #081d2b;
  stroke: rgba(103, 224, 185, .55);
  stroke-width: 1.2;
}

.ovr-stick__pins { stroke: #c9a45a; stroke-width: 1.5; }
.ovr-stick__nand { fill: #12304a; stroke: rgba(66, 187, 223, .42); stroke-width: 1; }
.ovr-stick__ctrl { fill: #1b3b58; stroke: rgba(165, 216, 255, .4); stroke-width: 1; }

.ovr-stick__load {
  fill: var(--ovr-network);
  transform: scaleX(var(--load, .18));
  transform-box: fill-box;
  transform-origin: left center;
  filter: drop-shadow(0 0 4px rgba(103, 224, 185, .9));
}

.ovr-chip__caption {
  fill: #8c9bb8;
  font-family: var(--cb-display-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .24em;
}

/* ---------------------------------------------------------------------------
 * 04 · Souveraineté — le périmètre belge
 * ------------------------------------------------------------------------ */
.ovr-sov {
  position: relative;
  padding: clamp(110px, 14vh, 170px) 0;
  background:
    radial-gradient(ellipse 55% 60% at 30% 55%, rgba(103, 224, 185, .08), transparent 70%),
    var(--ovr-bg);
}

.ovr-sov__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(40px, 5vw, 90px);
}

.ovr-stage--map {
  width: min(100%, 760px);
  aspect-ratio: 1.42;
}

.ovr-map__tag {
  position: absolute;
  left: var(--tx, 58%);
  top: var(--ty, 38%);
  min-height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(103, 224, 185, .55);
  border-radius: 999px;
  color: #e3fbf2;
  background: rgba(3, 22, 24, .82);
  font-size: 12px;
  letter-spacing: .16em;
  transform: translate(-50%, -100%);
  pointer-events: none;
}

.ovr-map__tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ovr-network);
  box-shadow: 0 0 10px var(--ovr-network);
  animation: ovr-pulse 2.4s ease-out infinite;
}

.ovr-sov__copy { max-width: 580px; }

.ovr-facts {
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.ovr-facts li {
  min-height: 56px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  border: 1px solid var(--ovr-line);
  border-radius: 14px;
  color: #dce7f8;
  background: rgba(8, 18, 40, .5);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.ovr-facts svg {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: var(--ovr-network);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
 * 05 · Résilience — la bande de sauvegardes
 * ------------------------------------------------------------------------ */
.ovr-res {
  position: relative;
  padding: clamp(110px, 14vh, 170px) 0 clamp(90px, 12vh, 140px);
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(66, 187, 223, .09), transparent 70%),
    var(--ovr-bg);
}

.ovr-stage--tape {
  width: var(--ovr-shell);
  height: clamp(300px, 30vw, 380px);
  margin-top: 54px;
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid var(--ovr-line-2);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(10, 22, 50, .72), rgba(4, 10, 26, .88));
}

.ovr-tape__lane {
  position: absolute;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cfe0f5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
}

.ovr-tape__lane i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
}

.ovr-tape__lane--prod { top: calc(54% - 40px); }
.ovr-tape__lane--prod i { background: var(--ovr-storage); box-shadow: 0 0 10px var(--ovr-storage); }
.ovr-tape__lane--repl { top: calc(82% - 40px); }
.ovr-tape__lane--repl i { background: var(--ovr-network); box-shadow: 0 0 10px var(--ovr-network); }

.ovr-tape__clock {
  position: absolute;
  top: 14px;
  left: 62%;
  min-height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(66, 187, 223, .55);
  border-radius: 999px;
  color: #fff;
  background: rgba(6, 22, 44, .9);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
  pointer-events: none;
}

.ovr-tape__clock i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ovr-storage);
  box-shadow: 0 0 10px var(--ovr-storage);
}

.ovr-metrics {
  margin-block: 22px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.ovr-metric {
  padding: 20px;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--ovr-line);
  border-radius: 18px;
  background: rgba(8, 18, 40, .55);
}

.ovr-metric__label {
  color: var(--ovr-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ovr-metric__value {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.ovr-metric__detail {
  color: #aab7cc;
  font-size: 14px;
  line-height: 1.5;
}

.ovr-res__note {
  margin-block: 22px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  color: var(--ovr-text);
  font-size: 15px;
}

.ovr-res__note b { color: #dce7f8; font-weight: 600; }

/* ---------------------------------------------------------------------------
 * 06 · Pourquoi — l’orbite
 * ------------------------------------------------------------------------ */
.ovr-why {
  position: relative;
  padding-top: clamp(110px, 14vh, 170px);
  background:
    radial-gradient(ellipse 50% 50% at 68% 42%, rgba(86, 126, 255, .1), transparent 70%),
    var(--ovr-bg);
}

.ovr-why__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(40px, 5vw, 90px);
}

.ovr-why__copy { max-width: 560px; }
.ovr-why__copy .ovr-link { margin-top: 26px; }

.ovr-orbit {
  position: relative;
  width: min(100%, 660px);
  aspect-ratio: 1;
  justify-self: center;
}

.ovr-orbit__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ovr-orbit__ring {
  fill: none;
  stroke: rgba(146, 176, 216, .16);
  stroke-width: .2;
}

.ovr-orbit__ring--ticks {
  stroke: rgba(165, 216, 255, .3);
  stroke-width: 1.2;
  stroke-dasharray: .1 .9;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: ovr-spin 90s linear infinite;
}

.ovr-orbit__link {
  fill: none;
  stroke: rgba(66, 187, 223, .5);
  stroke-width: .25;
  stroke-dasharray: .9 1.6;
  animation: ovr-link 2.6s linear infinite;
  animation-delay: calc(var(--i) * -.5s);
}

.ovr-orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 31%;
  aspect-ratio: 1;
  padding: 8px;
  display: grid;
  place-content: center;
  box-sizing: border-box;
  border: 1px solid rgba(165, 216, 255, .38);
  border-radius: 50%;
  text-align: center;
  background: radial-gradient(circle at 50% 35%, rgba(66, 187, 223, .26), rgba(6, 14, 34, .96) 70%);
  box-shadow: 0 0 90px rgba(66, 187, 223, .22), inset 0 0 40px rgba(86, 126, 255, .2);
  transform: translate(-50%, -50%);
}

.ovr-orbit__core::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(66, 187, 223, .3);
  border-radius: 50%;
  animation: ovr-halo 3.2s ease-out infinite;
}

.ovr-orbit__core h3 {
  margin: 0;
  color: #fff;
  font-family: var(--cb-display-font);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: -.04em;
}

.ovr-orbit__core p {
  margin: 8px 0 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #bff3df;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ovr-orbit__core p i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ovr-network);
  box-shadow: 0 0 10px var(--ovr-network);
}

.ovr-sat {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 29%;
  padding: 16px 14px 14px;
  box-sizing: border-box;
  border: 1px solid var(--ovr-line-2);
  border-radius: 18px;
  text-align: center;
  background: rgba(6, 14, 34, .9);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%);
  transition: left 1.2s var(--ovr-ease), top 1.2s var(--ovr-ease), opacity .8s ease, border-color .3s ease;
  transition-delay: calc(var(--i) * 110ms + 150ms);
}

.ovr-sat:hover { border-color: rgba(165, 216, 255, .6); }

.ovr-sat__icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(66, 187, 223, .14);
  box-shadow: 0 0 18px rgba(66, 187, 223, .25);
}

.ovr-sat__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: #9fdcff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ovr-sat h3 {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.ovr-sat p {
  margin: 6px 0 0;
  color: #b6c3d8;
  font-size: 13px;
  line-height: 1.45;
}

.ovr-motion .ovr-orbit[data-ovr-reveal] { opacity: 1; transform: none; }
.ovr-motion .ovr-orbit:not(.is-in) .ovr-sat { left: 50%; top: 50%; opacity: 0; }
.ovr-motion .ovr-orbit .ovr-orbit__link { opacity: 0; transition: opacity .8s ease 1s; }
.ovr-motion .ovr-orbit.is-in .ovr-orbit__link { opacity: 1; }

.ovr-marquee {
  margin-top: clamp(70px, 9vh, 110px);
  padding-block: 26px;
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--ovr-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.ovr-marquee__track {
  margin: 0;
  padding: 0;
  display: flex;
  flex: none;
  list-style: none;
  transform: translate3d(var(--ovr-mq, 0px), 0, 0);
  will-change: transform;
}

.ovr-marquee__track li {
  padding-left: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
  color: #dfe8f7;
  font-family: var(--cb-display-font);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.ovr-marquee__track li::after {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--cb-accent-gradient);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------------------
 * 07 · À la demande — le calculateur
 * ------------------------------------------------------------------------ */
.ovr-size {
  position: relative;
  padding: clamp(110px, 14vh, 170px) 0;
  background:
    radial-gradient(ellipse 50% 50% at 70% 50%, rgba(103, 224, 185, .07), transparent 70%),
    var(--ovr-bg);
}

.ovr-size__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 90px);
}

.ovr-size__copy { max-width: 560px; }

.ovr-calc {
  width: min(100%, 640px);
  justify-self: center;
  padding: clamp(22px, 2.6vw, 32px);
  display: grid;
  gap: 16px;
  box-sizing: border-box;
  border: 1px solid var(--ovr-line-2);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(12, 24, 54, .8), rgba(5, 12, 30, .92));
  box-shadow: 0 40px 120px rgba(0, 0, 0, .35);
}

.ovr-calc__seg {
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
}

.ovr-calc__seg legend {
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  color: var(--ovr-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ovr-calc__seg label { position: relative; }

.ovr-calc__seg input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ovr-calc__seg span {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid var(--ovr-line-2);
  border-radius: 999px;
  color: #cfdbee;
  font-size: 15px;
  font-weight: 600;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.ovr-calc__seg input:checked + span {
  border-color: var(--ovr-cta);
  color: #fff;
  background: rgba(165, 216, 255, .14);
}

.ovr-calc__seg input:focus-visible + span {
  outline: 2px solid var(--ovr-cta);
  outline-offset: 3px;
}

.ovr-calc__seg label:hover span { border-color: rgba(165, 216, 255, .55); }

.ovr-calc__row {
  --rc: var(--ovr-compute);
  display: grid;
  gap: 2px;
}

.ovr-calc__row--vram { --rc: #8ea6ff; }
.ovr-calc__row--ssd { --rc: var(--ovr-storage); }
.ovr-calc__row--snap { --rc: var(--ovr-network); }

.ovr-calc__row label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: #e6eefb;
  font-size: 15px;
  font-weight: 700;
}

.ovr-calc__row output {
  color: #fff;
  font-family: var(--cb-display-font);
  font-size: 22px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

.ovr-calc__row small {
  color: var(--ovr-muted);
  font-size: 13px;
}

.ovr-calc input[type="range"] {
  --fill: 10%;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ovr-calc input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--rc) 0 var(--fill), rgba(146, 176, 216, .2) var(--fill) 100%);
}

.ovr-calc input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 3px solid var(--rc);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--rc) 22%, transparent), 0 0 18px var(--rc);
  -webkit-appearance: none;
  appearance: none;
}

.ovr-calc input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 6px;
  background: rgba(146, 176, 216, .2);
}

.ovr-calc input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 6px;
  background: var(--rc);
}

.ovr-calc input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid var(--rc);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--rc) 22%, transparent), 0 0 18px var(--rc);
}

.ovr-calc__bar {
  height: 10px;
  display: flex;
  gap: 2px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(146, 176, 216, .12);
}

.ovr-calc__bar i {
  min-width: 0;
  flex: var(--share, 0) 1 0;
  transition: flex-grow .6s var(--ovr-ease);
}

.ovr-calc__bar [data-seg="os"] { background: #b7c3d9; }
.ovr-calc__bar [data-seg="vcpu"] { background: var(--ovr-compute); }
.ovr-calc__bar [data-seg="vram"] { background: #8ea6ff; }
.ovr-calc__bar [data-seg="ssd"] { background: var(--ovr-storage); }
.ovr-calc__bar [data-seg="snap"] { background: var(--ovr-network); }

.ovr-calc__total {
  padding-top: 14px;
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--ovr-line);
}

.ovr-calc__total-label {
  color: var(--ovr-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ovr-calc__price {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: var(--ovr-muted);
  font-size: 16px;
}

.ovr-calc__price strong {
  color: #fff;
  font-family: var(--cb-display-font);
  font-size: clamp(42px, 3.8vw, 56px);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  line-height: 1;
}

.ovr-calc__annual {
  min-height: 1.5em;
  margin: 4px 0 0;
  color: #bff3df;
  font-size: 15px;
  line-height: 1.5;
}

.ovr-calc__cta { justify-self: start; }

/* ---------------------------------------------------------------------------
 * 08 · Workloads
 * ------------------------------------------------------------------------ */
.ovr-work {
  position: relative;
  padding: clamp(110px, 14vh, 170px) 0;
  background: var(--ovr-bg);
}

.ovr-work__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.ovr-wcard {
  --wc: var(--ovr-compute);
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ovr-line-2);
  border-radius: 24px;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--wc) 16%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(12, 24, 54, .76), rgba(5, 12, 30, .92));
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ovr-ease), border-color .3s ease;
}

.ovr-wcard:hover { border-color: color-mix(in srgb, var(--wc) 60%, transparent); }

.ovr-wcard--security { --wc: #8ea6ff; }
.ovr-wcard--control { --wc: var(--ovr-storage); }
.ovr-wcard--trust { --wc: var(--ovr-network); }

.ovr-wcard__art {
  height: 140px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ovr-line);
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--wc) 12%, transparent), rgba(4, 10, 26, .6) 70%);
}

.ovr-wcard__art svg {
  width: 82%;
  height: 100%;
  overflow: visible;
}

.ovr-wcard h3 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.ovr-wcard p {
  flex: 1;
  margin: 10px 0 0;
  color: #b6c3d8;
  font-size: 15px;
  line-height: 1.55;
}

.ovr-wcard a {
  min-height: 44px;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  color: color-mix(in srgb, var(--wc) 55%, #fff);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.ovr-wcard a svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--ovr-ease);
}

.ovr-wcard a:hover { color: #fff; }
.ovr-wcard a:hover svg { transform: translateX(4px); }

/* Pictos animés des cartes */
.ovr-art-box path {
  fill: color-mix(in srgb, var(--wc) 30%, #050d24);
  stroke: var(--wc);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.ovr-art-box path:last-child { fill: color-mix(in srgb, var(--wc) 55%, #0b1530); }
.ovr-art-box { animation: ovr-drop 4.2s var(--ovr-ease) infinite; animation-delay: var(--d); }

.ovr-art-orbit {
  fill: none;
  stroke: color-mix(in srgb, var(--wc) 55%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
  transform-box: fill-box;
  transform-origin: center;
  animation: ovr-spin 14s linear infinite;
}

.ovr-art-shield {
  fill: color-mix(in srgb, var(--wc) 16%, transparent);
  stroke: var(--wc);
  stroke-width: 2;
  stroke-linejoin: round;
}

.ovr-art-cells rect {
  fill: color-mix(in srgb, var(--wc) 28%, transparent);
  stroke: var(--wc);
  stroke-width: 1;
  animation: ovr-cell 3.2s ease-in-out infinite;
}

.ovr-art-cells rect:nth-child(2) { animation-delay: .8s; }
.ovr-art-cells rect:nth-child(3) { animation-delay: 2.4s; }
.ovr-art-cells rect:nth-child(4) { animation-delay: 1.6s; }

.ovr-art-sliders path {
  fill: none;
  stroke: rgba(146, 176, 216, .3);
  stroke-width: 3;
  stroke-linecap: round;
}

.ovr-art-sliders circle {
  fill: #fff;
  stroke: var(--wc);
  stroke-width: 3;
  transform: translateX(var(--from));
  animation: ovr-knob 3.4s var(--ovr-ease-io) infinite alternate;
}

.ovr-art-sliders circle:nth-of-type(2) { animation-delay: .5s; }
.ovr-art-sliders circle:nth-of-type(3) { animation-delay: 1s; }

.ovr-art-pulse {
  fill: none;
  stroke: var(--wc);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: .3 .7;
  animation: ovr-trace 2.4s linear infinite;
  filter: drop-shadow(0 0 4px var(--wc));
}

.ovr-art-link {
  fill: none;
  stroke: var(--wc);
  stroke-width: 2;
  stroke-dasharray: 4 5;
  animation: ovr-flow 1.2s linear infinite;
}

.ovr-art-node { stroke: #030814; stroke-width: 2; }
.ovr-art-node--a { fill: var(--wc); animation: ovr-failover-a 6s ease-in-out infinite; }
.ovr-art-node--b { fill: color-mix(in srgb, var(--wc) 45%, #0b1530); animation: ovr-failover-b 6s ease-in-out infinite; }

/* ---------------------------------------------------------------------------
 * 09 · Finale — re-convergence
 * ------------------------------------------------------------------------ */
.ovr-finale {
  position: relative;
  min-height: max(760px, 100svh);
  padding: 140px 0 110px;
  display: grid;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--ovr-bg) 0%, #041026 60%, #06183a 100%);
}

.ovr-finale__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
}

.ovr-finale__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.ovr-finale__statement { max-width: 1100px; }
.ovr-finale__sub { max-width: 820px; }

.ovr-finale__card {
  width: min(100%, 1000px);
  margin-top: 56px;
  padding: 30px 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  box-sizing: border-box;
  border: 1px solid rgba(165, 216, 255, .26);
  border-radius: 30px;
  text-align: left;
  background: rgba(4, 12, 30, .66);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.ovr-finale__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(165, 216, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(165, 216, 255, .35), 0 0 30px rgba(66, 187, 223, .25);
}

.ovr-finale__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #cfe9ff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ovr-finale__card h2 { font-size: var(--cb-title-cta); }

.ovr-finale__card p {
  margin: 10px 0 0;
  color: var(--ovr-text);
  font-size: 17px;
  line-height: 1.55;
}

.ovr-finale__actions {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* Footer partagé : au-dessus des fonds de scène. */
.ovr-page .cb-shared-footer {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Keyframes
 * ------------------------------------------------------------------------ */
@keyframes ovr-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes ovr-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ovr-line-in {
  from { transform: translate3d(0, 105%, 0); }
  to { transform: none; }
}

@keyframes ovr-cue {
  to { top: 100%; }
}

@keyframes ovr-pulse {
  0% { box-shadow: 0 0 0 0 rgba(103, 224, 185, .6); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(103, 224, 185, 0); }
}

@keyframes ovr-flow {
  to { stroke-dashoffset: -40; }
}

@keyframes ovr-ring {
  to { stroke-dashoffset: -100; }
}

@keyframes ovr-link {
  to { stroke-dashoffset: -5; }
}

@keyframes ovr-spin {
  to { transform: rotate(360deg); }
}

@keyframes ovr-halo {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes ovr-core {
  0%, 100% { opacity: .22; }
  45% { opacity: .9; }
}

@keyframes ovr-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

@keyframes ovr-plate-flash {
  0% { filter: drop-shadow(0 0 0 transparent) brightness(2); }
  100% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--pc) 55%, transparent)) brightness(1); }
}

@keyframes ovr-drop {
  0% { opacity: 0; transform: translateY(-26px); }
  14% { opacity: 1; transform: none; }
  78% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}

@keyframes ovr-cell {
  0%, 100% { fill-opacity: .25; }
  40% { fill-opacity: 1; }
}

@keyframes ovr-knob {
  from { transform: translateX(var(--from)); }
  to { transform: translateX(var(--to)); }
}

@keyframes ovr-trace {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes ovr-failover-a {
  0%, 42%, 76%, 100% { fill-opacity: 1; }
  50%, 68% { fill-opacity: .15; }
}

@keyframes ovr-failover-b {
  0%, 42%, 76%, 100% { fill-opacity: .55; }
  50%, 68% { fill-opacity: 1; }
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */
@media (max-width: 1320px) {
  .ovr-limits { grid-template-columns: 1fr; }
  .ovr-limit { grid-template-columns: auto auto 1fr; align-items: baseline; gap: 10px; }
  .ovr-limit__num { font-size: 36px; }
  .ovr-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .ovr-manifesto__grid,
  .ovr-platform__grid,
  .ovr-perf__grid,
  .ovr-sov__grid,
  .ovr-why__grid,
  .ovr-size__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ovr-platform__copy,
  .ovr-perf__copy,
  .ovr-sov__copy,
  .ovr-why__copy,
  .ovr-size__copy { max-width: 720px; }

  .ovr-sov__copy { order: -1; }
  .ovr-proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ovr-work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ovr-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ovr-trust__list li { min-height: 76px; border-bottom: 1px solid var(--ovr-line); }
  .ovr-trust__list li:nth-child(2n) { border-right: 0; }
  .ovr-trust__list li:nth-child(n + 3) { border-bottom: 0; }

  .ovr-cinema .ovr-manifesto.ovr-pin .ovr-manifesto__grid {
    align-content: center;
    gap: 26px;
  }

  .ovr-cinema .ovr-manifesto.ovr-pin .ovr-consoles {
    width: min(100%, 440px, 40svh);
  }

  .ovr-finale__card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ovr-finale__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 1100px) {
  .ovr-orbit {
    width: 100%;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .ovr-orbit__links { display: none; }

  .ovr-orbit__core,
  .ovr-sat,
  .ovr-motion .ovr-orbit:not(.is-in) .ovr-sat {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    opacity: 1;
    transform: none;
  }

  .ovr-orbit__core {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    min-height: 120px;
    border-radius: 24px;
  }

  .ovr-orbit__core::before { display: none; }
  .ovr-sat { text-align: left; }
  .ovr-sat__icon { margin: 0 0 10px; }
}

@media (max-width: 760px) {
  .ovr-page { --ovr-shell: calc(100% - 40px); }

  .ovr-hero__inner { padding-top: calc(var(--cb-topbar-h) + 48px); }
  .ovr-hero__veil {
    background: linear-gradient(180deg, rgba(3, 8, 20, .62) 0%, rgba(3, 8, 20, .48) 50%, rgba(3, 8, 20, .2) 76%, var(--ovr-bg) 100%);
  }
  /* Mobile : la commande reste en tête de page au lieu de masquer les CTA en bas d’écran. */
  .ovr-pause { position: absolute; top: calc(var(--cb-topbar-h) + 16px); right: 16px; bottom: auto; left: auto; }
  .ovr-hero__foot { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 16px; }
  .ovr-cue { display: none; }
  .ovr-hud { justify-self: start; }
  .ovr-actions .ovr-btn { flex: 1 1 auto; }

  .ovr-trust__list li { justify-content: flex-start; padding: 0 12px; font-size: 14px; }
  .ovr-trust__list svg { width: 24px; height: 24px; }

  .ovr-manifesto__grid { padding-block: 90px; }
  .ovr-cinema .ovr-manifesto.ovr-pin .ovr-manifesto__grid { padding-block: calc(var(--cb-topbar-h) + 4px) 24px; }
  .ovr-cinema .ovr-manifesto.ovr-pin .ovr-consoles { width: min(100%, 320px, 34svh); }
  .ovr-console__bar b { font-size: 11px; }
  .ovr-console--unified { width: 94%; }
  .ovr-console__row { padding: 9px 10px; gap: 8px; font-size: 13px; }
  .ovr-console__row em { font-size: 10px; letter-spacing: .06em; }
  .ovr-cinema .ovr-manifesto.ovr-pin .ovr-beat .ovr-lead { margin-top: 14px; font-size: 16px; }
  .ovr-cinema .ovr-manifesto.ovr-pin .ovr-eyebrow { margin-bottom: 12px; }

  .ovr-caps { grid-template-columns: 1fr; }
  .ovr-proofs { grid-template-columns: 1fr; }
  .ovr-proofs li { min-height: 58px; }
  .ovr-plate__label text { font-size: 21px; }
  .ovr-iso__plane-label text,
  .ovr-iso__workloads-label text { font-size: 17px; }
  .ovr-cube text { font-size: 15px; }

  .ovr-stage--tape { height: 280px; border-radius: 20px; }
  .ovr-tape__lane { left: 14px; font-size: 11px; }
  .ovr-metrics { grid-template-columns: 1fr; }

  .ovr-orbit { grid-template-columns: 1fr; }
  .ovr-marquee__track li { font-size: 28px; }

  .ovr-calc { padding: 20px; border-radius: 22px; }
  .ovr-calc__cta { justify-self: stretch; }

  .ovr-work__grid { grid-template-columns: 1fr; }

  .ovr-finale { padding: 110px 0 90px; }
  .ovr-finale__card { grid-template-columns: 1fr; justify-items: start; padding: 24px; }
  .ovr-finale__actions { flex-direction: column; align-items: stretch; width: 100%; }
}

@media (max-width: 520px) {
  .ovr-trust__list { grid-template-columns: 1fr; }
  .ovr-trust__list li,
  .ovr-trust__list li:nth-child(n + 3) { min-height: 64px; border-right: 0; border-bottom: 1px solid var(--ovr-line); }
  .ovr-trust__list li:last-child { border-bottom: 0; }
  .ovr-hud__label { display: none; }
}

/* ---------------------------------------------------------------------------
 * Mouvement réduit : états finaux, aucune boucle
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ovr-page *,
  .ovr-page *::before,
  .ovr-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .ovr-cue i::after { display: none; }
}

@media (forced-colors: active) {
  .ovr-accent,
  .ovr-beat--calm .ovr-statement .ovr-w__i {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}