/* echo.css — page Echo (refonte « reel » 2026-09-29).
 * 1. Header produit Echo et boutons : règles d’origine conservées telles quelles.
 * 2. Maquettes produit (bento, corrélation, terminal, provisioning, cockpit, conformité,
 *    carte Neoo, boucle d’apprentissage, cartes d’alerte) : règles d’origine conservées.
 * 3. Couche « reel » : mise en page, robot, sonar, rail, états animés, responsive. */

/* === 1. Header ============================================================ */
.echo-page {
  --echo-bg: #050914;
  --echo-bg-deep: #030610;
  --echo-panel: rgba(12, 20, 39, .82);
  --echo-panel-solid: #0c1427;
  --echo-panel-soft: #101b32;
  --echo-line: rgba(136, 173, 224, .15);
  --echo-line-strong: rgba(117, 177, 238, .28);
  --echo-ink: var(--cb-display-ink-dark);
  --echo-muted: var(--cb-lead-ink-dark);
  --echo-dim: rgba(166, 184, 211, .58);
  --echo-blue: #5d86ff;
  --echo-cyan: #43c4e8;
  --echo-mint: #67e0b9;
  --echo-violet: #8f7bff;
  --echo-danger: #ff6c8b;
  --echo-warn: #ffbd63;
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--echo-ink);
  background: var(--echo-bg);
  font-family: 'Cerebri Sans', Inter, system-ui, sans-serif;
  font-feature-settings: "cv01", "ss03";
}
.echo-page *, .echo-page *::before, .echo-page *::after { box-sizing: border-box; }
.echo-page a { color: inherit; }
.echo-page button, .echo-page select { font: inherit; }
.echo-page svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.echo-page main { position: relative; }
.echo-page [id] { scroll-margin-top: 110px; }
.echo-page .skip-link {
  position: fixed;
  z-index: 500;
  top: 10px;
  left: 14px;
  translate: 0 -150%;
  padding: 10px 16px;
  border-radius: 999px;
  color: #06101c;
  background: var(--echo-mint);
  font-weight: 700;
  transition: translate .2s ease;
}
.echo-page .skip-link:focus { translate: 0; }
.echo-topbar {
  position: sticky;
  z-index: 120;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  min-height: 82px;
  padding: 14px var(--cb-topbar-pad-x);
  border-bottom: 1px solid rgba(141, 173, 223, .13);
  background: rgba(5, 9, 20, .78);
  box-shadow: 0 12px 45px rgba(0, 0, 0, .17);
  backdrop-filter: blur(22px) saturate(1.25);
}
.echo-topbar__brand, .echo-topbar__home, .echo-topbar__actions, .echo-nav, .echo-logo { display: flex; align-items: center; }
.echo-topbar__brand { flex: 0 0 auto; gap: 18px; }
.echo-topbar__home { gap: 8px; text-decoration: none; }
.echo-topbar__home svg { width: 18px; height: 18px; color: rgba(203, 215, 235, .76); }
.echo-topbar__home span { color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.echo-topbar__divider { width: 1px; height: 28px; background: rgba(203, 215, 235, .22); }
.echo-logo { gap: 7px; color: #eaf4ff; font-size: 23px; font-weight: 600; letter-spacing: -.055em; text-decoration: none; }
.echo-logo > span:last-child { color: var(--echo-mint); }
.echo-logo__signal { position: relative; display: block; width: 27px; height: 27px; border: 1px solid rgba(81, 197, 233, .55); border-radius: 9px; background: linear-gradient(145deg, rgba(94, 134, 255, .24), rgba(103, 224, 185, .08)); box-shadow: inset 0 0 16px rgba(75, 176, 232, .16), 0 0 18px rgba(75, 176, 232, .08); }
.echo-logo__signal::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--cb-accent-gradient); box-shadow: 0 0 12px rgba(67, 196, 232, .65); }
.echo-logo__signal i { position: absolute; inset: 2px; border: 1px solid rgba(103, 224, 185, .28); border-radius: 7px; }
.echo-logo__signal i:last-child { inset: -4px; border-color: rgba(86, 126, 255, .14); border-radius: 12px; }
.echo-nav { justify-content: center; gap: clamp(20px, 2.1vw, 38px); }
.echo-nav a, .echo-login { position: relative; color: rgba(211, 222, 239, .72); font-size: 14px; font-weight: 500; text-decoration: none; transition: color .2s ease; }
.echo-nav a::after { content: ""; position: absolute; right: 0; bottom: -9px; left: 0; height: 1px; background: var(--cb-accent-gradient); scale: 0 1; transform-origin: center; transition: scale .25s ease; }
.echo-nav a:hover, .echo-nav a:focus-visible, .echo-login:hover, .echo-login:focus-visible { color: #fff; }
.echo-nav a:hover::after, .echo-nav a:focus-visible::after { scale: 1; }
.echo-topbar__actions { flex: 0 0 auto; gap: 16px; }
.echo-lang { position: relative; display: inline-flex; }
.echo-lang .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.echo-lang select { min-height: 38px; padding: 0 29px 0 10px; border: 1px solid rgba(198, 216, 241, .17); border-radius: 9px; color: rgba(224, 234, 247, .84); background: rgba(255, 255, 255, .04); cursor: pointer; }
.echo-lang::after { content: ""; position: absolute; top: 50%; right: 12px; width: 6px; height: 6px; border-right: 1.5px solid rgba(223, 234, 248, .65); border-bottom: 1.5px solid rgba(223, 234, 248, .65); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.echo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: translate .22s cubic-bezier(.16, 1, .3, 1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.echo-btn svg { width: 18px; height: 18px; transition: translate .2s ease; }
.echo-btn:hover, .echo-btn:focus-visible { translate: 0 -2px; }
.echo-btn:hover svg { translate: 3px 0; }
.echo-btn--primary { color: #f9fcff; background: linear-gradient(135deg, #4d6ff7 0%, #487edb 52%, #2e9d9c 100%); box-shadow: 0 14px 36px rgba(67, 109, 235, .26), inset 0 1px rgba(255, 255, 255, .19); }
.echo-btn--primary:hover { box-shadow: 0 18px 44px rgba(67, 109, 235, .34), inset 0 1px rgba(255, 255, 255, .22); }
.echo-btn--ghost { border-color: rgba(183, 208, 239, .2); color: rgba(229, 237, 248, .9); background: rgba(255, 255, 255, .035); box-shadow: inset 0 1px rgba(255, 255, 255, .04); }
.echo-btn--ghost:hover { border-color: rgba(103, 224, 185, .42); background: rgba(103, 224, 185, .07); }
.echo-btn--large { min-height: 54px; padding-inline: 25px; border-radius: 12px; font-size: 15px; }
.echo-page :focus-visible { outline: 2px solid var(--echo-mint); outline-offset: 4px; }
.echo-page .page-breadcrumb {
  position: absolute;
  z-index: 15;
  top: 18px;
  left: 50%;
  width: var(--cb-shell);
  max-width: 1520px;
  translate: -50% 0;
  color: rgba(193, 209, 231, .58);
}
.echo-page .page-breadcrumb a { color: inherit; }
.echo-page .page-breadcrumb a:hover { color: #fff; }
.echo-page .page-breadcrumb b { color: rgba(231, 239, 250, .9); }
.echo-page .page-breadcrumb__action { margin-left: auto; color: var(--echo-mint) !important; }
@media (max-width: 1320px) {
  .echo-topbar { gap: 18px; }
  .echo-nav { gap: 18px; }
  .echo-topbar__home span { display: none; }
}
@media (max-width: 1120px) {
  .echo-shell, .echo-page .page-breadcrumb { width: min(calc(100% - 64px), 940px); }
  .echo-topbar { min-height: 74px; }
  .echo-nav { display: none; }
}
@media (max-width: 860px) {
  .echo-topbar__divider, .echo-login { display: none; }
  .echo-topbar__cta { min-height: 40px; padding-inline: 14px; }
  .echo-page .page-breadcrumb { display: none; }
}
@media (max-width: 640px) {
  .echo-shell, .echo-page .page-breadcrumb { width: min(calc(100% - 36px), 560px); }
  .echo-topbar { min-height: 68px; padding: 10px 16px; }
  .echo-topbar__brand { gap: 10px; }
  .echo-topbar__home { display: none; }
  .echo-logo { font-size: 21px; }
  .echo-topbar__actions { gap: 8px; }
  .echo-lang select { min-height: 39px; }
  .echo-topbar__cta { font-size: 13px; white-space: nowrap; }
  .echo-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .echo-page *, .echo-page *::before, .echo-page *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}
.echo-topbar {
  display: grid;
  grid-template-columns: 520px minmax(580px, 1fr) auto;
  column-gap: 50px;
  min-height: 94px;
  height: 94px;
  padding: 16px 19px;
  padding-right: 26px;
  background: rgba(3, 7, 18, .94);
  box-shadow: none;
  backdrop-filter: blur(24px) saturate(1.12);
}
.echo-topbar__brand {
  display: grid;
  grid-template-columns: 123px auto;
  gap: 297px;
  min-width: 0;
}
.echo-topbar__brand, .echo-nav, .echo-topbar__actions { transform: translateY(-4px); }
.echo-topbar__home {
  justify-content: center;
  width: 123px;
  min-height: 39px;
  padding-inline: 13px;
  border: 1px solid rgba(166, 184, 215, .23);
  border-radius: 999px;
}
.echo-topbar__home svg { width: 14px; height: 14px; }
.echo-topbar__home span { font-size: 14px; }
.echo-topbar__divider, .echo-logo__signal { display: none; }
.echo-logo {
  display: inline-flex;
  gap: 0;
  width: max-content;
  color: #f5f7fb;
  font-size: 42px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.065em;
}
.echo-logo > span:last-child { color: #646cff; }
.echo-nav {
  justify-content: flex-start;
  gap: clamp(22px, 1.85vw, 34px);
  min-width: 0;
}
.echo-nav a, .echo-login {
  color: rgba(243, 246, 253, .91);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.echo-topbar__actions { gap: 18px; }
.echo-lang select {
  min-width: 70px;
  min-height: 41px;
  padding: 0 28px 0 15px;
  appearance: none;
  border-radius: 11px;
  color: #f4f6fb;
  font-weight: 600;
  background: rgba(8, 12, 25, .78);
}
.echo-lang::after {
  right: 13px;
  border-color: rgba(232, 237, 248, .78);
}
.echo-login { font-size: 13px; }
.echo-topbar__cta {
  min-width: 161px;
  min-height: 40px;
  padding-inline: 15px;
  border-radius: 11px;
  font-size: 14px;
  background: linear-gradient(135deg, #4e55f5, #3e46ec);
  box-shadow: 0 14px 34px rgba(69, 79, 246, .31), inset 0 1px rgba(255, 255, 255, .18);
}
.echo-page .page-breadcrumb {
  top: 19px;
  width: min(calc(100% - 38px), 1634px);
  max-width: none;
  min-height: 39px;
  padding: 0 18px;
  border: 1px solid rgba(157, 181, 220, .18);
  border-radius: 999px;
  background: rgba(5, 10, 23, .56);
}
.echo-page .page-breadcrumb--product {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 38px);
  left: var(--echo-breadcrumb-left, 19px);
  translate: 0;
  font-size: 14px;
}
.echo-page .page-breadcrumb svg { width: 15px; height: 15px; }
.echo-page .page-breadcrumb__action { margin-left: 0; color: #b9c9e8 !important; }
@media (max-width: 1480px) {
  .echo-topbar {
    grid-template-columns: 110px minmax(0, 1fr) auto;
    column-gap: 28px;
  }
  .echo-topbar__brand { display: block; }
  .echo-topbar__home { display: none; }
  .echo-nav { justify-content: center; gap: clamp(16px, 1.55vw, 25px); }
}
@media (max-width: 1180px) {
  .echo-topbar { grid-template-columns: 110px 1fr auto; }
  .echo-nav a { font-size: 13px; }
  .echo-login { display: none; }
}
@media (max-width: 980px) {
  .echo-topbar {
    grid-template-columns: 110px 1fr;
    height: 76px;
    min-height: 76px;
    padding-block: 12px;
  }
  .echo-nav { display: none; }
  .echo-topbar__actions { justify-self: end; }
  .echo-page .page-breadcrumb { top: 16px; }
}
@media (max-width: 640px) {
  .echo-topbar {
    grid-template-columns: auto 1fr;
    height: 68px;
    min-height: 68px;
    padding: 10px 16px;
  }
  .echo-logo { font-size: 31px; }
  .echo-topbar__brand, .echo-topbar__actions { transform: none; }
  .echo-topbar__actions { gap: 8px; }
  .echo-lang select {
    min-width: 58px;
    min-height: 42px;
    padding-left: 11px;
  }
  .echo-topbar__cta {
    width: auto;
    min-width: 0;
    min-height: 42px;
    padding-inline: 13px;
    font-size: 12px;
  }
  .echo-page .page-breadcrumb { display: none; }
}
.echo-topbar .echo-topbar__brand {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}
.echo-topbar .echo-topbar__home.cb-header-wordmark {
  display: inline-flex;
  justify-content: flex-start;
  width: max-content;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 1;
}
@media (max-width: 1480px) {
  .echo-topbar {
    grid-template-columns: 180px minmax(0, 1fr) auto;
  }
  .echo-topbar .echo-logo { display: none; }
}
@media (min-width: 1321px) {
  .echo-topbar {
    grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
    column-gap: clamp(20px, 1.8vw, 30px);
    height: var(--cb-topbar-h);
    min-height: var(--cb-topbar-h);
    padding: 0 var(--cb-topbar-pad-x);
  }
  .echo-topbar .echo-topbar__brand { display: contents; }
  .echo-topbar .echo-topbar__home.cb-header-wordmark {
    grid-area: 1 / 1;
    justify-self: center;
  }
  .echo-topbar .echo-logo { display: none; }
  .echo-topbar .echo-nav {
    grid-area: 1 / 2;
    justify-content: center;
    transform: none;
  }
  .echo-topbar .echo-topbar__actions {
    grid-area: 1 / 3;
    justify-self: end;
    transform: none;
  }
  .echo-page .page-breadcrumb--product { top: 14px; }
}
@media (min-width: 1680px) {
  .echo-topbar .echo-logo {
    grid-area: 1 / 1;
    display: inline-flex;
    justify-self: end;
    margin-right: 14px;
  }
}
@media (max-width: 620px) {
  .echo-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .echo-topbar .echo-login, .echo-topbar .echo-topbar__cta {
    display: none;
  }
}

/* === 2. Maquettes produit ================================================= */
.echo-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--echo-mint); box-shadow: 0 0 0 5px rgba(103, 224, 185, .09), 0 0 18px rgba(103, 224, 185, .8); }
.echo-bento { display: grid; grid-template-columns: 1.18fr .82fr; gap: 20px; }
.echo-panel { position: relative; overflow: hidden; min-height: 360px; padding: 30px; border: 1px solid var(--echo-line); border-radius: 24px; background: linear-gradient(145deg, rgba(14, 25, 47, .94), rgba(8, 15, 29, .96)); box-shadow: 0 24px 60px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .025); }
.echo-panel::after { content: ""; position: absolute; right: -70px; bottom: -80px; width: 210px; height: 210px; border-radius: 50%; background: rgba(61, 145, 207, .1); filter: blur(50px); pointer-events: none; }
.echo-panel--wide { min-height: 425px; }
.echo-panel__head { display: flex; position: relative; z-index: 2; align-items: flex-start; gap: 16px; }
.echo-panel__head > div { flex: 1; }
.echo-panel__head h3 { margin: 0; color: rgba(234, 241, 250, .9); font-size: 21px; font-weight: 600; letter-spacing: -.025em; }
.echo-panel__head p { max-width: 510px; margin: 7px 0 0; color: var(--echo-dim); font-size: 13px; line-height: 1.5; }
.echo-panel__head > small { display: flex; align-items: center; gap: 7px; color: rgba(103, 224, 185, .72); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.echo-panel__head > small i { width: 5px; height: 5px; border-radius: 50%; background: var(--echo-mint); box-shadow: 0 0 8px var(--echo-mint); }
.echo-icon { display: grid; flex: 0 0 46px; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(91, 169, 225, .24); border-radius: 14px; color: #74d8ed; background: linear-gradient(145deg, rgba(70, 151, 218, .14), rgba(82, 111, 220, .07)); box-shadow: inset 0 1px rgba(255, 255, 255, .04); }
.echo-icon svg { width: 23px; height: 23px; }
.echo-metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin: 38px 0 32px; }
.echo-metric-grid > div { padding: 17px; border: 1px solid rgba(137, 176, 224, .12); border-radius: 15px; background: rgba(2, 8, 19, .4); }
.echo-metric-grid span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.echo-metric-grid b { color: rgba(190, 208, 231, .65); font-size: 9px; font-weight: 650; letter-spacing: .12em; }
.echo-metric-grid em { color: rgba(225, 236, 248, .86); font-family: 'JetBrains Mono', monospace; font-size: 13px; font-style: normal; }
.echo-metric-grid > div > i { position: relative; display: block; height: 3px; margin-top: 15px; border-radius: 2px; background: rgba(129, 162, 205, .13); }
.echo-metric-grid > div > i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--value); border-radius: inherit; background: var(--cb-accent-gradient); box-shadow: 0 0 9px rgba(67, 196, 232, .28); }
.echo-check-list { display: grid; position: relative; z-index: 2; gap: 10px; margin: 0; padding: 0; color: rgba(190, 207, 228, .7); font-size: 13px; line-height: 1.45; list-style: none; }
.echo-check-list li { display: flex; align-items: flex-start; gap: 9px; }
.echo-check-list li::before { content: "✓"; display: grid; flex: 0 0 17px; place-items: center; width: 17px; height: 17px; margin-top: 1px; border: 1px solid rgba(103, 224, 185, .22); border-radius: 50%; color: var(--echo-mint); font-size: 9px; }
.echo-service-list { display: grid; gap: 10px; margin: 36px 0 29px; }
.echo-service-list span { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid rgba(135, 174, 221, .11); border-radius: 12px; background: rgba(3, 9, 20, .38); }
.echo-service-list i { width: 6px; height: 6px; border-radius: 50%; background: var(--echo-mint); box-shadow: 0 0 7px rgba(103, 224, 185, .7); }
.echo-service-list b { color: rgba(220, 231, 245, .78); font-size: 11px; font-weight: 550; }
.echo-service-list em { color: rgba(103, 224, 185, .75); font-size: 9px; font-style: normal; }
.echo-avatar-stack { display: flex; margin: 40px 0 36px; padding-left: 9px; }
.echo-avatar-stack i { display: grid; width: 48px; height: 48px; margin-left: -9px; place-items: center; border: 3px solid #0c1629; border-radius: 50%; color: #cce7f6; background: linear-gradient(145deg, #324d78, #1c2946); font-size: 10px; font-style: normal; font-weight: 650; }
.echo-avatar-stack i:nth-child(2) { background: linear-gradient(145deg, #4f467a, #282544); }
.echo-avatar-stack i:nth-child(3) { background: linear-gradient(145deg, #31675f, #183b3a); }
.echo-avatar-stack i:last-child { color: rgba(207, 224, 243, .65); background: #151f34; }
.echo-continuity { display: grid; gap: 9px; margin: 32px 0 26px; }
.echo-continuity > span { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid rgba(135, 174, 221, .1); }
.echo-continuity i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; color: var(--echo-mint); background: rgba(103, 224, 185, .08); font-size: 10px; font-style: normal; }
.echo-continuity b { color: rgba(208, 222, 239, .75); font-size: 11px; font-weight: 550; }
.echo-continuity em { color: rgba(226, 237, 249, .8); font-size: 10px; font-style: normal; }
.echo-capability-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px 18px; margin: 35px 0 0; padding: 0; list-style: none; }
.echo-capability-list li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(135, 174, 221, .11); color: rgba(196, 213, 234, .74); font-size: 13px; line-height: 1.45; }
.echo-capability-list li::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--echo-mint); box-shadow: 0 0 8px rgba(103, 224, 185, .5); }
.echo-capability-list--compact { grid-template-columns: 1fr; gap: 3px; }
.echo-correlation { position: relative; overflow: hidden; padding: 24px; border: 1px solid rgba(132, 178, 229, .22); border-radius: 26px; background: linear-gradient(145deg, rgba(14, 25, 47, .97), rgba(6, 13, 27, .98)); box-shadow: 0 32px 80px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .03); }
.echo-correlation::after { content: ""; position: absolute; right: -100px; bottom: -100px; width: 300px; height: 300px; border-radius: 50%; background: rgba(67, 196, 232, .11); filter: blur(65px); }
.echo-correlation__top { display: flex; position: relative; z-index: 2; align-items: center; justify-content: space-between; gap: 20px; padding: 3px 2px 20px; border-bottom: 1px solid rgba(139, 178, 226, .12); }
.echo-correlation__top > small { color: rgba(174, 196, 223, .5); font-size: 9px; font-weight: 650; letter-spacing: .14em; }
.echo-correlation__top > span { display: flex; align-items: center; gap: 7px; color: rgba(103, 224, 185, .75); font-size: 9px; }
.echo-correlation__top i { width: 6px; height: 6px; border-radius: 50%; background: var(--echo-mint); box-shadow: 0 0 9px var(--echo-mint); }
.echo-correlation__alerts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 22px; }
.echo-correlation__alerts article { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(133, 173, 221, .12); border-radius: 12px; background: rgba(3, 9, 20, .42); }
.echo-severity { width: 6px; height: 26px; border-radius: 3px; }
.echo-severity--high { background: #ff6c8b; box-shadow: 0 0 10px rgba(255, 108, 139, .35); }
.echo-severity--mid { background: #ffbd63; }
.echo-severity--low { background: #58bce4; }
.echo-correlation__alerts div { display: flex; flex-direction: column; gap: 3px; }
.echo-correlation__alerts b { color: rgba(225, 236, 249, .8); font-size: 10px; font-weight: 650; }
.echo-correlation__alerts small { color: var(--echo-dim); font-size: 8px; }
.echo-correlation__alerts time { color: rgba(170, 191, 218, .4); font-family: monospace; font-size: 8px; }
.echo-correlation__beam { position: relative; height: 85px; }
.echo-correlation__beam i { position: absolute; top: 0; width: 1px; height: 58px; background: linear-gradient(rgba(255, 189, 99, .45), rgba(67, 196, 232, .5)); transform-origin: top; }
.echo-correlation__beam i:first-child { left: 23%; rotate: -26deg; }
.echo-correlation__beam i:nth-child(2) { left: 40%; rotate: -10deg; }
.echo-correlation__beam i:nth-child(3) { right: 40%; rotate: 10deg; }
.echo-correlation__beam i:nth-child(4) { right: 23%; rotate: 26deg; }
.echo-correlation__beam b { position: absolute; bottom: 12px; left: 50%; width: 13px; height: 13px; translate: -50% 0; border: 2px solid #7adcf0; border-radius: 50%; background: #0b1930; box-shadow: 0 0 0 8px rgba(67, 196, 232, .05), 0 0 20px rgba(67, 196, 232, .4); }
.echo-root-cause { position: relative; z-index: 2; padding: 21px; border: 1px solid rgba(70, 192, 218, .3); border-radius: 18px; background: linear-gradient(145deg, rgba(18, 43, 67, .8), rgba(8, 20, 38, .92)); box-shadow: 0 18px 38px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .04); }
.echo-root-cause header { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 14px; }
.echo-root-cause header > span { display: grid; position: relative; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(94, 204, 227, .3); border-radius: 13px; color: #77dcec; background: rgba(67, 196, 232, .08); }
.echo-root-cause header > span i { position: absolute; inset: -5px; border: 1px solid rgba(67, 196, 232, .11); border-radius: 17px; }
.echo-root-cause header svg { width: 22px; height: 22px; }
.echo-root-cause header div small { color: var(--echo-mint); font-size: 8px; font-weight: 650; letter-spacing: .1em; }
.echo-root-cause h3 { margin: 5px 0 0; color: rgba(236, 243, 251, .92); font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.echo-root-cause header > em { color: var(--echo-mint); font-size: 26px; font-style: normal; font-weight: 300; }
.echo-root-cause__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 19px; }
.echo-root-cause__meta span { padding: 12px; border: 1px solid rgba(137, 177, 224, .1); border-radius: 11px; background: rgba(3, 9, 19, .34); }
.echo-root-cause__meta small { display: block; min-height: 23px; color: var(--echo-dim); font-size: 8px; line-height: 1.35; }
.echo-root-cause__meta b { display: block; margin-top: 5px; color: rgba(230, 238, 248, .86); font-size: 15px; font-weight: 550; }
.echo-root-cause > p { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 17px 0 0; color: rgba(181, 200, 224, .57); font-size: 9px; }
.echo-root-cause > p a { color: var(--echo-mint); text-decoration: none; }
.echo-remediation { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: stretch; }
.echo-remediation__terminal { overflow: hidden; min-height: 610px; border: 1px solid rgba(130, 178, 229, .22); border-radius: 25px; background: #060d1b; box-shadow: 0 34px 80px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .03); }
.echo-terminal__bar { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 52px; align-items: center; padding: 0 18px; border-bottom: 1px solid rgba(137, 178, 225, .13); background: rgba(16, 28, 50, .76); }
.echo-terminal__bar > span { display: flex; gap: 6px; }
.echo-terminal__bar > span i { width: 7px; height: 7px; border-radius: 50%; background: rgba(188, 207, 231, .22); }
.echo-terminal__bar > b { color: rgba(185, 205, 231, .5); font-family: monospace; font-size: 9px; font-weight: 500; }
.echo-terminal__bar > small { display: flex; justify-self: end; align-items: center; gap: 7px; color: rgba(103, 224, 185, .72); font-size: 8px; letter-spacing: .12em; }
.echo-terminal__bar > small i { width: 5px; height: 5px; border-radius: 50%; background: var(--echo-mint); box-shadow: 0 0 8px var(--echo-mint); }
.echo-terminal__body { padding: 27px; }
.echo-terminal__command { display: flex; align-items: center; gap: 10px; overflow: auto; padding: 16px; border: 1px solid rgba(110, 163, 217, .14); border-radius: 12px; color: rgba(129, 231, 200, .78); background: #030814; font-family: monospace; font-size: 11px; white-space: nowrap; }
.echo-terminal__command > span { color: var(--echo-cyan); font-size: 17px; }
.echo-terminal__steps { position: relative; display: grid; gap: 0; margin: 32px 0 0; padding: 0; list-style: none; }
.echo-terminal__steps::before { content: ""; position: absolute; top: 20px; bottom: 22px; left: 19px; width: 1px; background: linear-gradient(var(--echo-mint) 0 55%, rgba(137, 178, 225, .16) 55%); }
.echo-terminal__steps li { display: grid; position: relative; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; min-height: 82px; }
.echo-terminal__steps li > i { display: grid; z-index: 2; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(137, 178, 225, .17); border-radius: 12px; color: rgba(190, 208, 231, .44); background: #091326; font-size: 12px; font-style: normal; }
.echo-terminal__steps li.is-done > i { border-color: rgba(103, 224, 185, .31); color: var(--echo-mint); background: #0c2130; }
.echo-terminal__steps li.is-active > i { border-color: rgba(67, 196, 232, .4); background: #0b1b2f; box-shadow: 0 0 18px rgba(67, 196, 232, .12); }
.echo-terminal__steps li.is-active > i::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--echo-cyan); border-top-color: transparent; border-radius: 50%; animation: echo-spin 1s linear infinite; }
.echo-terminal__steps li div { display: flex; flex-direction: column; gap: 5px; }
.echo-terminal__steps b { color: rgba(224, 235, 248, .82); font-size: 13px; font-weight: 600; }
.echo-terminal__steps small { color: var(--echo-dim); font-size: 10px; }
.echo-terminal__steps time { color: rgba(173, 195, 221, .4); font-family: monospace; font-size: 9px; }
.echo-terminal__result { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; padding: 15px 17px; border: 1px solid rgba(103, 224, 185, .17); border-radius: 12px; background: rgba(103, 224, 185, .045); }
.echo-terminal__result > span { display: flex; align-items: center; gap: 9px; }
.echo-terminal__result i { width: 7px; height: 7px; border-radius: 50%; background: var(--echo-mint); box-shadow: 0 0 9px var(--echo-mint); }
.echo-terminal__result b { color: rgba(199, 225, 222, .7); font-size: 10px; font-weight: 500; }
.echo-terminal__result a { color: var(--echo-cyan); font-family: monospace; font-size: 9px; text-decoration: none; }
.echo-action-groups { display: grid; gap: 14px; }
.echo-action-groups article { display: flex; gap: 18px; padding: 24px; border: 1px solid rgba(137, 178, 225, .15); border-radius: 20px; background: linear-gradient(145deg, rgba(15, 27, 49, .88), rgba(8, 15, 28, .9)); }
.echo-action-groups article > div { flex: 1; }
.echo-action-groups h3 { margin: 2px 0 14px; color: rgba(231, 239, 249, .86); font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.echo-action-groups ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 15px; margin: 0; padding: 0; list-style: none; }
.echo-action-groups li { position: relative; padding-left: 13px; color: rgba(186, 204, 227, .65); font-size: 10px; line-height: 1.4; }
.echo-action-groups li::before { content: ""; position: absolute; top: 6px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--echo-mint); }
.echo-provision-flow { position: relative; z-index: 2; display: grid; gap: 17px; }
.echo-provision-flow__rail { position: absolute; z-index: -1; top: 65px; bottom: 65px; left: 35px; width: 1px; background: linear-gradient(var(--echo-mint), var(--echo-cyan), rgba(83, 137, 210, .17)); }
.echo-provision-flow > article { display: grid; grid-template-columns: 50px 58px 1fr auto; align-items: center; gap: 16px; min-height: 114px; padding: 18px 20px 18px 11px; border: 1px solid rgba(135, 176, 224, .15); border-radius: 19px; background: rgba(10, 19, 36, .9); box-shadow: 0 18px 38px rgba(0, 0, 0, .16); }
.echo-provision-flow > article.is-active { border-color: rgba(67, 196, 232, .35); background: linear-gradient(145deg, rgba(16, 39, 62, .95), rgba(9, 20, 39, .95)); box-shadow: 0 22px 50px rgba(0, 0, 0, .24), 0 0 35px rgba(67, 196, 232, .07); }
.echo-flow-index { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(135, 176, 224, .17); border-radius: 50%; color: rgba(177, 199, 225, .42); background: #081225; font-family: monospace; font-size: 10px; }
.echo-provision-flow article.is-active .echo-flow-index { border-color: rgba(103, 224, 185, .32); color: var(--echo-mint); }
.echo-flow-icon { display: grid; position: relative; width: 55px; height: 55px; place-items: center; border: 1px solid rgba(89, 166, 221, .2); border-radius: 16px; color: #71d6ed; background: rgba(67, 196, 232, .07); }
.echo-flow-icon svg { width: 26px; height: 26px; }
.echo-flow-icon--neoo { color: #dce6fb; font-size: 14px; font-weight: 800; letter-spacing: -.07em; }
.echo-flow-icon--echo { border-radius: 50%; }
.echo-flow-icon--echo::before { content: ""; width: 19px; height: 19px; border-radius: 50%; background: var(--cb-accent-gradient); box-shadow: 0 0 17px rgba(67, 196, 232, .6); }
.echo-flow-icon--echo i { position: absolute; inset: 8px; border: 1px solid rgba(103, 224, 185, .26); border-radius: 50%; }
.echo-flow-icon--echo i:last-child { inset: -4px; border-color: rgba(93, 134, 255, .13); }
.echo-provision-flow article > div:nth-of-type(2) { display: flex; flex-direction: column; gap: 6px; }
.echo-provision-flow small { color: rgba(103, 224, 185, .62); font-size: 8px; font-weight: 650; letter-spacing: .11em; }
.echo-provision-flow b { color: rgba(220, 232, 246, .78); font-size: 12px; font-weight: 550; line-height: 1.4; }
.echo-provision-flow article > em { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(103, 224, 185, .2); border-radius: 50%; color: var(--echo-mint); background: rgba(103, 224, 185, .06); font-size: 10px; font-style: normal; }
.echo-provision-flow article.is-active > em i { width: 9px; height: 9px; border: 2px solid var(--echo-cyan); border-top-color: transparent; border-radius: 50%; animation: echo-spin 1s linear infinite; }
.echo-remote { background: linear-gradient(180deg, #08101e, #060b16); }
.echo-remote__cockpit { display: grid; grid-template-columns: 72px 1fr; overflow: hidden; min-height: 590px; border: 1px solid rgba(130, 176, 226, .22); border-radius: 27px; background: #07101e; box-shadow: 0 38px 90px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .03); }
.echo-cockpit-sidebar { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px 12px; border-right: 1px solid rgba(135, 176, 224, .13); background: #081326; }
.echo-cockpit-logo { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.echo-cockpit-logo > span { position: relative; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(67, 196, 232, .28); border-radius: 12px; }
.echo-cockpit-logo > span::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--cb-accent-gradient); box-shadow: 0 0 13px rgba(67, 196, 232, .6); }
.echo-cockpit-logo > span i { position: absolute; inset: 5px; border: 1px solid rgba(103, 224, 185, .2); border-radius: 9px; }
.echo-cockpit-logo b { color: rgba(219, 233, 247, .7); font-size: 9px; font-weight: 600; }
.echo-cockpit-sidebar nav { display: grid; gap: 22px; }
.echo-cockpit-sidebar nav i { position: relative; width: 22px; height: 22px; border: 1px solid rgba(164, 189, 219, .23); border-radius: 7px; }
.echo-cockpit-sidebar nav i.is-active { border-color: rgba(67, 196, 232, .55); background: rgba(67, 196, 232, .1); box-shadow: 0 0 14px rgba(67, 196, 232, .12); }
.echo-cockpit-sidebar > span { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg, #3d5c87, #1c2a48); }
.echo-cockpit-main { padding: 30px; }
.echo-cockpit-main > header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(135, 176, 224, .12); }
.echo-cockpit-main > header small { color: rgba(163, 189, 218, .46); font-size: 8px; font-weight: 650; letter-spacing: .14em; }
.echo-cockpit-main > header h3 { margin: 5px 0; color: rgba(234, 241, 250, .9); font-size: 24px; font-weight: 550; letter-spacing: -.035em; }
.echo-cockpit-main > header p { display: flex; align-items: center; gap: 8px; margin: 0; color: rgba(103, 224, 185, .68); font-size: 10px; }
.echo-cockpit-main > header p i { width: 6px; height: 6px; border-radius: 50%; background: var(--echo-mint); box-shadow: 0 0 9px var(--echo-mint); }
.echo-cockpit-main > header > div:last-child { display: flex; gap: 8px; }
.echo-cockpit-main button { min-height: 40px; padding: 0 15px; border: 1px solid rgba(92, 183, 226, .26); border-radius: 10px; color: rgba(220, 235, 248, .76); background: rgba(67, 196, 232, .08); }
.echo-cockpit-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 17px; margin-top: 23px; }
.echo-cockpit-grid > section { padding: 22px; border: 1px solid rgba(135, 176, 224, .12); border-radius: 17px; background: rgba(12, 23, 43, .76); }
.echo-device-card { display: grid; grid-template-columns: 150px 1fr; gap: 24px; min-height: 225px; }
.echo-device { display: grid; place-items: center; border: 1px solid rgba(105, 168, 221, .13); border-radius: 15px; background: radial-gradient(circle, rgba(65, 159, 211, .1), transparent 58%), #071120; }
.echo-device > span { position: relative; width: 88px; height: 60px; border: 2px solid rgba(130, 195, 232, .46); border-radius: 10px; background: linear-gradient(145deg, #1a3152, #0a172a); box-shadow: 0 0 0 5px rgba(70, 117, 171, .12), 0 18px 25px rgba(0, 0, 0, .4); }
.echo-device > span::after { content: ""; position: absolute; right: 11px; bottom: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--echo-mint); box-shadow: 0 0 8px var(--echo-mint); }
.echo-device > span i { position: absolute; right: 12px; left: 12px; height: 1px; background: rgba(118, 183, 226, .2); }
.echo-device > span i:first-child { top: 20px; }
.echo-device > span i:last-child { top: 35px; }
.echo-device-card > div:last-child { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.echo-device-card > div:last-child span { display: flex; flex-direction: column; gap: 5px; }
.echo-device-card small { color: rgba(166, 190, 219, .43); font-size: 8px; letter-spacing: .08em; }
.echo-device-card b { color: rgba(216, 230, 245, .75); font-size: 11px; font-weight: 550; }
.echo-health-card header, .echo-activity-card header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.echo-health-card header b,.echo-activity-card header b { color: rgba(225, 235, 247, .8); font-size: 12px; font-weight: 600; }
.echo-health-card header em { color: var(--echo-mint); font-size: 11px; font-style: normal; }
.echo-health-card > div { display: grid; gap: 19px; margin-top: 31px; }
.echo-health-card > div > span { display: grid; grid-template-columns: 40px 1fr 34px; align-items: center; gap: 10px; }
.echo-health-card span > b { color: rgba(177, 199, 225, .5); font-size: 8px; font-weight: 650; }
.echo-health-card span > i { display: block; height: 4px; border-radius: 3px; background: rgba(132, 173, 219, .12); }
.echo-health-card span > i em { display: block; width: var(--value); height: 100%; border-radius: inherit; background: var(--cb-accent-gradient); }
.echo-health-card span > small { color: rgba(208, 225, 242, .66); font-family: monospace; font-size: 9px; text-align: right; }
.echo-activity-card { grid-column: 1 / -1; }
.echo-activity-card header a { color: var(--echo-cyan); font-size: 9px; text-decoration: none; }
.echo-activity-card ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin: 20px 0 0; padding: 0; list-style: none; }
.echo-activity-card li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 13px; border: 1px solid rgba(135, 176, 224, .1); border-radius: 12px; background: rgba(3, 9, 19, .32); }
.echo-activity-card li > i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: var(--echo-mint); background: rgba(103, 224, 185, .07); font-size: 10px; font-style: normal; }
.echo-activity-card li > span { display: flex; flex-direction: column; gap: 4px; }
.echo-activity-card li b { color: rgba(217, 231, 245, .72); font-size: 9px; font-weight: 550; }
.echo-activity-card li small { color: rgba(166, 190, 219, .4); font-size: 8px; }
.echo-activity-card time { color: rgba(166, 190, 219, .38); font-size: 8px; }
.echo-toolbelt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; }
.echo-toolbelt li { display: flex; align-items: center; gap: 9px; min-height: 49px; padding: 10px 13px; border: 1px solid rgba(135, 176, 224, .11); border-radius: 12px; color: rgba(187, 207, 229, .62); background: rgba(11, 21, 39, .62); font-size: 10px; }
.echo-toolbelt li::before { content: "✓"; display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; border: 1px solid rgba(103, 224, 185, .18); border-radius: 6px; color: var(--echo-mint); font-size: 8px; }
.echo-compliance { overflow: hidden; border: 1px solid rgba(126, 177, 225, .22); border-radius: 27px; background: linear-gradient(145deg, rgba(12, 24, 44, .95), rgba(5, 12, 24, .97)); box-shadow: 0 38px 90px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .03); }
.echo-compliance__score { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 32px; border-bottom: 1px solid rgba(135, 176, 224, .12); background: radial-gradient(circle at 40% 0, rgba(60, 167, 203, .11), transparent 42%); }
.echo-compliance__score > span { display: flex; position: relative; width: 116px; height: 116px; align-items: baseline; justify-content: center; padding-top: 38px; border: 6px solid rgba(103, 224, 185, .72); border-left-color: rgba(93, 134, 255, .18); border-radius: 50%; box-shadow: 0 0 26px rgba(103, 224, 185, .12), inset 0 0 22px rgba(103, 224, 185, .06); rotate: 35deg; }
.echo-compliance__score > span > * { rotate: -35deg; }
.echo-compliance__score > span i { position: absolute; inset: 9px; border: 1px solid rgba(103, 224, 185, .1); border-radius: 50%; }
.echo-compliance__score > span b { color: rgba(235, 245, 250, .9); font-size: 33px; font-weight: 300; }
.echo-compliance__score > span small { color: rgba(190, 211, 229, .5); font-size: 10px; }
.echo-compliance__score > div { display: flex; flex-direction: column; gap: 6px; }
.echo-compliance__score > div small { color: rgba(103, 224, 185, .68); font-size: 8px; font-weight: 650; letter-spacing: .13em; }
.echo-compliance__score strong { color: rgba(231, 240, 249, .9); font-size: 23px; font-weight: 500; letter-spacing: -.03em; }
.echo-compliance__score p { margin: 0; color: var(--echo-dim); font-size: 11px; }
.echo-compliance__matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(135, 176, 224, .1); }
.echo-compliance__matrix article { display: grid; grid-template-columns: 32px 1fr auto; min-height: 96px; align-items: center; gap: 12px; padding: 18px 20px; background: #091325; }
.echo-compliance__matrix article > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; font-size: 11px; }
.echo-compliance__matrix article.is-ok > span { color: var(--echo-mint); background: rgba(103, 224, 185, .08); }
.echo-compliance__matrix article.is-warn > span { color: var(--echo-warn); background: rgba(255, 189, 99, .09); }
.echo-compliance__matrix article.is-danger > span { color: var(--echo-danger); background: rgba(255, 108, 139, .09); }
.echo-compliance__matrix article.is-scan > span { position: relative; border: 1px solid rgba(67, 196, 232, .2); }
.echo-compliance__matrix article.is-scan > span i { width: 9px; height: 9px; border: 2px solid var(--echo-cyan); border-top-color: transparent; border-radius: 50%; animation: echo-spin 1.4s linear infinite; }
.echo-compliance__matrix article > div { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.echo-compliance__matrix b { color: rgba(217, 231, 245, .76); font-size: 10px; font-weight: 550; }
.echo-compliance__matrix small { color: rgba(164, 188, 216, .44); font-size: 9px; }
.echo-compliance__matrix article > em { padding: 5px 7px; border: 1px solid; border-radius: 999px; font-size: 7px; font-style: normal; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.echo-compliance__matrix .is-ok > em { border-color: rgba(103, 224, 185, .16); color: rgba(103, 224, 185, .7); background: rgba(103, 224, 185, .04); }
.echo-compliance__matrix .is-warn > em { border-color: rgba(255, 189, 99, .18); color: rgba(255, 189, 99, .72); }
.echo-compliance__matrix .is-danger > em { border-color: rgba(255, 108, 139, .2); color: rgba(255, 108, 139, .75); }
.echo-compliance__matrix .is-scan > em { border-color: rgba(67, 196, 232, .2); color: rgba(67, 196, 232, .72); }
.echo-compliance__actions { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 24px 30px; border-top: 1px solid rgba(135, 176, 224, .12); color: rgba(184, 204, 228, .58); font-size: 11px; }
.echo-compliance__actions > div { display: flex; gap: 9px; }
.echo-compliance__actions b { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(135, 176, 224, .12); border-radius: 9px; color: rgba(209, 225, 242, .68); background: rgba(255, 255, 255, .02); font-size: 9px; font-weight: 550; }
.echo-compliance__actions b i { color: var(--echo-mint); font-style: normal; }
.echo-context-map { position: relative; min-height: 660px; overflow: hidden; border: 1px solid rgba(129, 178, 226, .2); border-radius: 26px; background: radial-gradient(circle at 50% 45%, rgba(63, 160, 209, .15), transparent 35%), linear-gradient(145deg, #0c1a31, #060d1b); box-shadow: 0 32px 72px rgba(0, 0, 0, .25); }
.echo-context-map::before { content: ""; position: absolute; inset: 0; opacity: .34; background-image: radial-gradient(circle, rgba(113, 171, 222, .25) .7px, transparent .8px); background-size: 18px 18px; mask-image: radial-gradient(circle at center, black, transparent 78%); }
.echo-context-map__core { display: flex; position: absolute; z-index: 3; top: 45%; left: 50%; width: 162px; height: 162px; translate: -50% -50%; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(80, 190, 218, .32); border-radius: 50%; background: rgba(8, 24, 42, .88); box-shadow: 0 0 0 26px rgba(67, 196, 232, .025), 0 0 60px rgba(67, 196, 232, .12); backdrop-filter: blur(10px); }
.echo-context-map__core .echo-flow-icon { width: 52px; height: 52px; margin-bottom: 10px; }
.echo-context-map__core > b { color: rgba(234, 242, 250, .9); font-size: 17px; font-weight: 600; }
.echo-context-map__core > small { margin-top: 5px; color: var(--echo-dim); font-size: 8px; }
.echo-context-map__orbit { position: absolute; top: 45%; left: 50%; width: 470px; height: 470px; translate: -50% -50%; border: 1px dashed rgba(103, 182, 224, .18); border-radius: 50%; }
.echo-context-map__orbit::after { content: ""; position: absolute; inset: 56px; border: 1px solid rgba(103, 182, 224, .1); border-radius: 50%; }
.echo-context-map__orbit > span { --angle: calc(var(--i) * 45deg - 90deg); position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; width: 106px; min-height: 47px; translate: calc(cos(var(--angle)) * 235px - 53px) calc(sin(var(--angle)) * 235px - 23px); align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(124, 176, 224, .18); border-radius: 11px; background: rgba(7, 16, 31, .92); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.echo-context-map__orbit > span i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--echo-mint); box-shadow: 0 0 8px rgba(103, 224, 185, .55); }
.echo-context-map__orbit > span b { color: rgba(205, 222, 239, .72); font-size: 9px; font-weight: 550; }
.echo-context-map__neoo { position: absolute; z-index: 3; bottom: 24px; left: 50%; translate: -50% 0; padding: 10px 27px; border: 1px solid rgba(119, 158, 234, .24); border-radius: 999px; color: #dbe6f8; background: rgba(63, 77, 174, .13); font-size: 17px; font-weight: 800; letter-spacing: -.08em; box-shadow: 0 0 28px rgba(93, 101, 219, .1); }
.echo-incident-flow { display: grid; overflow: hidden; margin: 0; padding: 0; border: 1px solid rgba(129, 178, 226, .18); border-radius: 25px; background: rgba(8, 16, 31, .88); list-style: none; }
.echo-incident-flow li { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 15px; padding: 18px 23px; border-bottom: 1px solid rgba(135, 176, 224, .1); }
.echo-incident-flow li:last-child { border-bottom: 0; }
.echo-incident-flow > li > span { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(79, 185, 218, .21); border-radius: 13px; color: rgba(103, 224, 185, .76); background: rgba(67, 196, 232, .05); font-family: monospace; font-size: 9px; }
.echo-incident-flow li > div { display: flex; flex-direction: column; gap: 5px; }
.echo-incident-flow b { color: rgba(225, 235, 247, .8); font-size: 13px; font-weight: 600; }
.echo-incident-flow p { margin: 0; color: var(--echo-dim); font-size: 10px; line-height: 1.4; }
.echo-learning-loop { position: relative; min-height: 690px; }
.echo-learning-loop::before { content: ""; position: absolute; top: 50%; left: 50%; width: 480px; height: 480px; translate: -50% -50%; border: 1px dashed rgba(91, 174, 221, .17); border-radius: 50%; animation: echo-spin 90s linear infinite; }
.echo-learning-loop::after { content: ""; position: absolute; top: 50%; left: 50%; width: 360px; height: 360px; translate: -50% -50%; border: 1px solid rgba(91, 174, 221, .08); border-radius: 50%; box-shadow: 0 0 80px rgba(67, 196, 232, .05) inset; }
.echo-learning-loop__core { display: flex; position: absolute; z-index: 3; top: 50%; left: 50%; width: 190px; height: 190px; translate: -50% -50%; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(67, 196, 232, .3); border-radius: 50%; background: radial-gradient(circle, rgba(57, 148, 199, .19), rgba(7, 17, 32, .94) 67%); box-shadow: 0 0 0 22px rgba(67, 196, 232, .025), 0 0 70px rgba(67, 196, 232, .09); }
.echo-learning-loop__core .echo-flow-icon { width: 58px; height: 58px; margin-bottom: 13px; }
.echo-learning-loop__core > b { max-width: 130px; color: rgba(228, 239, 249, .84); font-size: 13px; font-weight: 600; text-align: center; }
.echo-learning-loop__core > small { max-width: 135px; margin-top: 6px; color: var(--echo-dim); font-size: 8px; line-height: 1.35; text-align: center; }
.echo-learning-loop__items article { position: absolute; z-index: 2; display: flex; width: 190px; min-height: 65px; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid rgba(131, 177, 224, .16); border-radius: 13px; background: rgba(9, 18, 35, .9); box-shadow: 0 14px 28px rgba(0, 0, 0, .2); }
.echo-learning-loop__items article span { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(103, 224, 185, .19); border-radius: 9px; color: var(--echo-mint); font-family: monospace; font-size: 8px; }
.echo-learning-loop__items article b { color: rgba(202, 220, 239, .68); font-size: 9px; font-weight: 550; line-height: 1.35; }
.echo-learning-loop__items article:nth-child(1) { top: 4%; left: 50%; translate: -50% 0; }
.echo-learning-loop__items article:nth-child(2) { top: 18%; right: 0; }
.echo-learning-loop__items article:nth-child(3) { top: 42%; right: -4%; }
.echo-learning-loop__items article:nth-child(4) { right: 5%; bottom: 9%; }
.echo-learning-loop__items article:nth-child(5) { bottom: 1%; left: 50%; translate: -50% 0; }
.echo-learning-loop__items article:nth-child(6) { bottom: 10%; left: 4%; }
.echo-learning-loop__items article:nth-child(7) { top: 42%; left: -4%; }
.echo-learning-loop__items article:nth-child(8) { top: 18%; left: 0; }
@media (max-width: 1320px) {
  .echo-context-map__orbit { scale: .9; }
}
@media (max-width: 1120px) {
  .echo-correlation, .echo-provision-flow { width: min(100%, 820px); margin-inline: auto; }
  .echo-remediation { grid-template-columns: 1fr; }
  .echo-remediation__terminal { min-height: auto; }
  .echo-action-groups { grid-template-columns: repeat(3, 1fr); }
  .echo-action-groups article { flex-direction: column; }
  .echo-action-groups ul { grid-template-columns: 1fr; }
  .echo-context-map { min-height: 670px; }
  .echo-learning-loop { width: min(100%, 760px); margin-inline: auto; }
}
@media (max-width: 860px) {
  .echo-bento { grid-template-columns: 1fr; }
  .echo-panel,.echo-panel--wide { min-height: auto; }
  .echo-remediation__terminal { min-height: 0; }
  .echo-action-groups { grid-template-columns: 1fr; }
  .echo-action-groups article { flex-direction: row; }
  .echo-action-groups ul { grid-template-columns: repeat(2, 1fr); }
  .echo-remote__cockpit { grid-template-columns: 1fr; }
  .echo-cockpit-sidebar { display: none; }
  .echo-cockpit-grid { grid-template-columns: 1fr; }
  .echo-activity-card { grid-column: auto; }
  .echo-toolbelt { grid-template-columns: repeat(2, 1fr); }
  .echo-compliance__matrix { grid-template-columns: repeat(2, 1fr); }
  .echo-context-map__orbit { scale: .86; }
}
@media (max-width: 640px) {
  .echo-panel { padding: 22px; border-radius: 19px; }
  .echo-panel__head > small { display: none; }
  .echo-panel__head h3 { font-size: 18px; }
  .echo-metric-grid { grid-template-columns: repeat(2, 1fr); margin-block: 28px; }
  .echo-capability-list { grid-template-columns: 1fr; }
  .echo-correlation { padding: 16px; border-radius: 20px; }
  .echo-correlation__top { align-items: flex-start; flex-direction: column; }
  .echo-correlation__alerts { grid-template-columns: 1fr; }
  .echo-correlation__beam { display: none; }
  .echo-root-cause { margin-top: 18px; padding: 16px; }
  .echo-root-cause header { grid-template-columns: 38px 1fr auto; }
  .echo-root-cause h3 { font-size: 15px; }
  .echo-root-cause__meta { grid-template-columns: 1fr; }
  .echo-root-cause__meta small { min-height: 0; }
  .echo-root-cause > p { align-items: flex-start; flex-direction: column; }
  .echo-terminal__bar { grid-template-columns: 1fr auto; }
  .echo-terminal__bar > span { display: none; }
  .echo-terminal__body { padding: 17px; }
  .echo-terminal__command { font-size: 9px; }
  .echo-terminal__steps li { grid-template-columns: 38px 1fr; }
  .echo-terminal__steps time { display: none; }
  .echo-terminal__result { align-items: flex-start; flex-direction: column; }
  .echo-action-groups article { padding: 19px; }
  .echo-action-groups .echo-icon { display: none; }
  .echo-action-groups ul { grid-template-columns: 1fr; }
  .echo-provision-flow > article { grid-template-columns: 42px 46px 1fr; gap: 10px; min-height: 100px; padding: 13px 12px 13px 7px; }
  .echo-provision-flow__rail { left: 27px; }
  .echo-flow-index { width: 42px; height: 42px; }
  .echo-flow-icon { width: 45px; height: 45px; border-radius: 13px; }
  .echo-provision-flow article > em { display: none; }
  .echo-provision-flow b { font-size: 10px; }
  .echo-cockpit-main { padding: 18px; }
  .echo-cockpit-main > header { align-items: flex-start; }
  .echo-cockpit-main > header > div:last-child button:first-child { display: none; }
  .echo-device-card { grid-template-columns: 1fr; }
  .echo-device { min-height: 130px; }
  .echo-activity-card ul { grid-template-columns: 1fr; }
  .echo-toolbelt { grid-template-columns: 1fr; }
  .echo-compliance__score { align-items: center; flex-direction: column; text-align: center; }
  .echo-compliance__matrix { grid-template-columns: 1fr; }
  .echo-compliance__actions { flex-direction: column; gap: 14px; text-align: center; }
  .echo-compliance__actions > div { flex-wrap: wrap; justify-content: center; }
  .echo-context-map { min-height: 620px; }
  .echo-context-map__orbit { width: 390px; height: 390px; scale: .8; }
  .echo-context-map__orbit > span { translate: calc(cos(var(--angle)) * 160px - 53px) calc(sin(var(--angle)) * 160px - 23px); }
  .echo-context-map__core { top: 45%; width: 140px; height: 140px; }
  .echo-incident-flow li { padding: 15px; }
  .echo-learning-loop { min-height: auto; }
  .echo-learning-loop::before,.echo-learning-loop::after { display: none; }
  .echo-learning-loop__core { position: relative; top: auto; left: auto; width: 170px; height: 170px; margin: 0 auto 25px; translate: none; }
  .echo-learning-loop__items { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .echo-learning-loop__items article { position: static; width: auto; min-height: 60px; translate: none !important; }
}
.echo-release {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 38px;
  padding: 4px 14px 4px 5px;
  border: 1px solid rgba(162, 183, 218, .28);
  border-radius: 999px;
  color: rgba(223, 230, 244, .88);
  background: rgba(9, 14, 28, .7);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
.echo-release strong {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding-inline: 10px;
  border-radius: 999px;
  color: #f7f8ff;
  background: linear-gradient(135deg, #5365ff, #4b54f2);
  box-shadow: 0 0 17px rgba(72, 90, 255, .42);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}
.echo-release svg {
  width: 15px;
  height: 15px;
  margin-left: 7px;
  color: rgba(218, 228, 245, .62);
}
.echo-hero-alert {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 122px;
  padding: 19px 20px;
  border: 1px solid rgba(99, 137, 199, .34);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(10, 16, 30, .91), rgba(7, 12, 24, .84));
  box-shadow: inset 0 1px rgba(255, 255, 255, .018), 0 20px 48px rgba(0, 0, 0, .16);
}
.echo-hero-alert > div {
  display: grid;
  min-width: 0;
  gap: 7px;
}
.echo-hero-alert small {
  color: rgba(168, 180, 203, .7);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .075em;
  line-height: 1;
}
.echo-hero-alert strong {
  overflow-wrap: anywhere;
  color: #f4f6fb;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.18;
}
.echo-hero-alert > div > span {
  color: rgba(184, 195, 216, .72);
  font-size: 14px;
  line-height: 1.1;
}
.echo-hero-alert__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(99, 107, 255, .27);
  border-radius: 9px;
  color: #9674ff;
  background: rgba(102, 65, 225, .18);
}
.echo-hero-alert__icon svg { width: 24px; height: 24px; }
.echo-hero-alert--system {
  grid-template-columns: 1fr 64px;
  border-color: rgba(242, 84, 73, .42);
}
.echo-hero-alert--system strong { color: #ff6658; }
.echo-hero-alert__spark {
  width: 64px;
  height: 28px;
  color: #ff6658;
  stroke-width: 2;
}
.echo-hero-alert--incident { border-color: rgba(131, 83, 223, .34); }
.echo-hero-alert--action { border-color: rgba(72, 126, 222, .39); }
.echo-hero-alert--action .echo-hero-alert__icon {
  color: #5d9cff;
  background: rgba(43, 91, 172, .2);
}
.echo-hero-alert--decision { border-color: rgba(55, 157, 144, .36); }
.echo-hero-alert--decision .echo-hero-alert__icon {
  color: #35cfc1;
  background: rgba(24, 148, 143, .19);
}
@media (max-width: 640px) {
  .echo-release {
    min-height: 35px;
    font-size: 12px;
  }
  .echo-release strong { min-height: 23px; font-size: 10px; }
  .echo-hero-alert {
    min-height: 124px;
    padding: 18px;
  }
}

/* ===========================================================================
 * ECHO · REEL (refonte 2026-09-29)
 *
 * Récit : le sonar. Le robot semi-réaliste d’origine (recadré de la maquette de
 * référence, assets/echo/echo-robot-20260929.webp) émet des ondes depuis son
 * anneau d’oreille ; les signaux reviennent en écho, Echo comprend, agit,
 * déploie, vérifie et apprend. Couleurs de signal : alerte --echo-danger ·
 * incident --echo-violet · action --echo-cyan · décision --echo-mint.
 * Référence de style : hero cinématique de l’accueil ; tailles --cb-* de
 * styles.css ; display Cerebri Light 300. Mouvement : echo-motion.js (sonar,
 * corrélation, terminal, rail, compteurs, boucle). Sans JS ou en mouvement
 * réduit, chaque scène reste lisible dans son état final.
 * ======================================================================== */

.echo-document { color-scheme: dark; }

@media (prefers-reduced-motion: no-preference) {
  .echo-document { scroll-behavior: smooth; }
}

.ecr-page {
  --ecr-shell: min(calc(100% - 120px), 1360px);
  --ecr-edge: max(60px, calc((100% - 1360px) / 2));
  --ecr-ease: cubic-bezier(.16, 1, .3, 1);
  --ecr-ease-io: cubic-bezier(.65, 0, .35, 1);
  --ecr-text: var(--cb-lead-ink-dark);
  --ecr-muted: #8c9bb8;
  --ecr-line: rgba(146, 176, 216, .14);
  --ecr-line-2: rgba(146, 176, 216, .26);
}

.ecr-page main.ecr {
  overflow: clip;
  background: var(--echo-bg);
}

.ecr-page ::selection {
  color: #fff;
  background: rgba(67, 196, 232, .32);
}

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

/* ---------------------------------------------------------------------------
 * Typographie
 * ------------------------------------------------------------------------ */
.ecr-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;
}

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

.ecr-title,
.ecr-hero__title {
  margin: 0;
  color: var(--cb-display-ink-dark);
  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;
}

.ecr-hero__title { max-width: 680px; font-size: var(--cb-title-hero); }
.ecr-title { font-size: var(--cb-title-section); }
.ecr-title--side { font-size: var(--cb-title-section-side); }

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

.ecr-lead {
  margin: 26px 0 0;
  color: var(--ecr-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.42;
  text-wrap: pretty;
}

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

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

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

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

.ecr-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: clamp(30px, 5vw, 90px);
}

.ecr-head--split .ecr-lead { margin: 0 0 8px; }

.ecr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.echo-btn { --mx: 0px; --my: 0px; }
.echo-btn[data-ecr-magnetic] { translate: var(--mx) var(--my); }
.echo-btn[data-ecr-magnetic]:hover,
.echo-btn[data-ecr-magnetic]:focus-visible { translate: var(--mx) calc(var(--my) - 2px); }

/* Révélations (activées seulement quand le moteur de motion est présent). */
.ecr-motion [data-ecr-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity 1s var(--ecr-ease), transform 1.2s var(--ecr-ease);
}

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

.ecr-motion [data-ecr-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity .9s var(--ecr-ease), transform 1.2s var(--ecr-ease);
  transition-delay: calc(var(--i, 0) * 100ms);
}

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

/* ---------------------------------------------------------------------------
 * Rail de chapitres et pause des animations
 * ------------------------------------------------------------------------ */
.ecr-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;
}

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

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

.ecr-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;
}

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

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

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

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

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

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

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

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

.ecr-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) {
  .ecr-rail { display: grid; }
  .ecr-page { --ecr-shell: min(calc(100% - 170px), 1360px); --ecr-edge: max(85px, calc((100% - 1360px) / 2)); }
}

.ecr-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(--ecr-line-2);
  border-radius: 999px;
  color: #dfe8f7;
  background: rgba(6, 16, 38, .84);
  font: 600 13px/1 var(--cb-display-font);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: gap .4s var(--ecr-ease), border-color .3s ease, opacity .5s ease, visibility .5s;
}

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

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

.ecr-pause svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

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

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

.ecr-pause:hover,
.ecr-pause:focus-visible,
.ecr-pause[aria-pressed="true"] {
  gap: 9px;
  border-color: rgba(103, 224, 185, .6);
}

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

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

/* ---------------------------------------------------------------------------
 * 01 · Écoute — le robot et le sonar
 * ------------------------------------------------------------------------ */
.ecr-hero {
  position: relative;
  min-height: max(760px, calc(100svh - var(--cb-topbar-h)));
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 60% 52%, rgba(58, 129, 204, .17), transparent 33%),
    radial-gradient(circle at 18% 35%, rgba(82, 101, 219, .11), transparent 31%),
    linear-gradient(180deg, #050914, #070d1c 72%, #070c19);
}

.ecr-hero__sonar {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.ecr-hero__inner {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(0, 590px) minmax(0, 1fr);
  align-items: center;
  padding-block: 110px 90px;
  box-sizing: border-box;
}

.ecr-hero__copy {
  position: relative;
  z-index: 3;
}

.ecr-hero__copy .echo-release { margin-bottom: 26px; }

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

.ecr-line__in { display: block; }

.ecr-hero__lead {
  max-width: 600px;
  margin-top: 28px;
  font-size: clamp(20px, 1.55vw, 25px);
}

.ecr-hero__body {
  max-width: 580px;
  margin: 18px 0 0;
  color: rgba(176, 192, 216, .78);
  font-size: 16px;
  line-height: 1.65;
}

.ecr-hero__actions { margin-top: 32px; }

.ecr-hero__trust {
  margin: 27px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  color: rgba(192, 208, 230, .74);
  font-size: 14px;
  list-style: none;
}

.ecr-hero__trust li { display: flex; align-items: center; gap: 8px; }
.ecr-hero__trust svg { width: 18px; height: 18px; color: var(--echo-cyan); }

.echo-trust-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--echo-mint);
  box-shadow: 0 0 0 4px rgba(103, 224, 185, .12), 0 0 14px rgba(103, 224, 185, .7);
}

/* Le robot : image d’origine, points lumineux animés par-dessus. */
.ecr-robot {
  position: absolute;
  margin: 0;
  aspect-ratio: 582 / 837;
  translate: calc(var(--tx, 0%) + var(--px, 0px)) var(--py, 0px);
  transition: translate 1.2s var(--ecr-ease);
}

.ecr-hero .ecr-robot {
  z-index: 1;
  bottom: 0;
  left: 59%;
  height: min(94%, 900px);
  --tx: -50%;
}

.ecr-robot__img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

.ecr-robot__sheen,
.ecr-robot__ear,
.ecr-robot__visor,
.ecr-robot__chest {
  position: absolute;
  pointer-events: none;
}

.ecr-robot__sheen { display: none; }

/* Reflet balayant les arêtes laquées : masqué par la luminance du robot lui-même. */
@supports ((mask-mode: luminance) or (-webkit-mask-source-type: luminance)) {
  .ecr-robot__sheen {
    display: block;
    inset: 0;
    background: linear-gradient(112deg, transparent 38%, rgba(150, 200, 255, .75) 50%, transparent 62%) 180% 0 / 260% 100% no-repeat;
    mix-blend-mode: screen;
    -webkit-mask: url("/assets/echo/echo-robot-20260929.webp") center / 100% 100% no-repeat;
    -webkit-mask-source-type: luminance;
    mask: url("/assets/echo/echo-robot-20260929.webp") center / 100% 100% no-repeat luminance;
    animation: ecr-sheen 7.5s var(--ecr-ease-io) infinite;
  }
}

.ecr-robot__ear {
  left: 60.65%;
  top: 18.7%;
  width: 14.8%;
  aspect-ratio: 1 / 1.06;
  translate: -50% -50%;
  mix-blend-mode: screen;
}

.ecr-robot__ear i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.ecr-robot__ear i:first-child {
  border: 2px solid rgba(120, 190, 255, .85);
  box-shadow: 0 0 18px rgba(80, 150, 255, .9), inset 0 0 14px rgba(80, 150, 255, .7);
  opacity: calc(.25 + var(--ecr-ear, .4) * .75);
}

.ecr-robot__ear i:last-child {
  border: 1.5px solid rgba(140, 210, 255, .9);
  opacity: 0;
}

.ecr-cinema .ecr-robot__ear.is-ping i:last-child { animation: ecr-ping 1.8s cubic-bezier(.2, .7, .3, 1) 1; }

.ecr-robot__visor {
  left: 34.64%;
  top: 19.2%;
  width: 3.4%;
  height: 8.6%;
  translate: -50% 0;
  mix-blend-mode: screen;
}

.ecr-robot__visor i {
  position: absolute;
  left: 0;
  right: 0;
  height: 14%;
  border-radius: 2px;
  background: rgba(130, 190, 255, .95);
  box-shadow: 0 0 10px rgba(90, 160, 255, .95);
  opacity: 0;
}

.ecr-robot__visor i:nth-child(1) { top: 2%; }
.ecr-robot__visor i:nth-child(2) { top: 30%; }
.ecr-robot__visor i:nth-child(3) { top: 58%; }
.ecr-robot__visor i:nth-child(4) { top: 86%; }

.ecr-cinema .ecr-robot__visor i { animation: ecr-visor 2.4s steps(1, end) infinite; }
.ecr-cinema .ecr-robot__visor i:nth-child(2) { animation-delay: .15s; }
.ecr-cinema .ecr-robot__visor i:nth-child(3) { animation-delay: .3s; }
.ecr-cinema .ecr-robot__visor i:nth-child(4) { animation-delay: .45s; }

.ecr-robot__chest {
  left: 26.55%;
  top: 63.5%;
  width: 13%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 160, 255, .7) 0, rgba(80, 120, 255, .25) 38%, transparent 70%);
  mix-blend-mode: screen;
  opacity: .55;
}

.ecr-cinema .ecr-robot__chest { animation: ecr-breathe 3.6s ease-in-out infinite; }

.ecr-feed {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: var(--ecr-edge);
  width: 300px;
  padding-left: 30px;
  display: grid;
  gap: 16px;
  translate: 0 -46%;
}

.ecr-feed__line {
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 8px;
  width: 1px;
  overflow: hidden;
  background: repeating-linear-gradient(180deg, rgba(146, 176, 216, .4) 0 3px, transparent 3px 8px);
}

.ecr-feed__line i {
  position: absolute;
  left: -1px;
  width: 3px;
  height: 60px;
  top: calc(var(--ecr-feed-p, 0) * 100% - 60px);
  border-radius: 3px;
  background: linear-gradient(180deg, transparent, var(--echo-cyan));
  box-shadow: 0 0 10px var(--echo-cyan);
}

.ecr-feed__item {
  position: relative;
  min-height: 108px;
  transition: opacity .7s var(--ecr-ease), translate .9s var(--ecr-ease), border-color .5s ease, box-shadow .5s ease;
}

.ecr-feed__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -27px;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent), 0 0 14px var(--c);
}

.ecr-feed__item.is-new {
  border-color: var(--c);
  box-shadow: 0 0 0 1px var(--c), 0 0 40px color-mix(in srgb, var(--c) 30%, transparent);
}

.ecr-motion .ecr-feed__item:not(.is-in) {
  opacity: .12;
  translate: 18px 0;
}

.ecr-hud {
  position: absolute;
  z-index: 3;
  right: var(--ecr-edge);
  bottom: 38px;
  margin: 0;
  min-height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ecr-line-2);
  border-radius: 999px;
  color: #dfe8f7;
  background: rgba(6, 16, 38, .6);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ecr-hud i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--echo-mint);
  box-shadow: 0 0 10px var(--echo-mint);
}

.ecr-cinema .ecr-hud i { animation: ecr-dot 2.4s ease-out infinite; }

.ecr-cue {
  position: absolute;
  z-index: 3;
  left: var(--ecr-edge);
  bottom: 26px;
  min-height: 44px;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--ecr-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
  justify-items: start;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  .ecr-hero__copy .echo-release { animation: ecr-rise 1s var(--ecr-ease) .1s both; }
  .ecr-line__in { animation: ecr-line-in 1.3s var(--ecr-ease) both; }
  .ecr-line:nth-child(1) .ecr-line__in { animation-delay: .22s; }
  .ecr-line:nth-child(2) .ecr-line__in { animation-delay: .38s; }
  .ecr-hero__lead { animation: ecr-rise 1.1s var(--ecr-ease) .8s both; }
  .ecr-hero__body { animation: ecr-rise 1.1s var(--ecr-ease) .92s both; }
  .ecr-hero__actions { animation: ecr-rise 1.1s var(--ecr-ease) 1.05s both; }
  .ecr-hero__trust { animation: ecr-rise 1.1s var(--ecr-ease) 1.18s both; }
  .ecr-hero .ecr-robot__img { animation: ecr-robot-in 2.2s var(--ecr-ease) .1s both; }
}

/* ---------------------------------------------------------------------------
 * Portée — le sonar relie chaque environnement
 * ------------------------------------------------------------------------ */
.ecr-scope {
  position: relative;
  padding: clamp(100px, 12vh, 150px) 0 clamp(90px, 11vh, 130px);
  background: linear-gradient(180deg, #070c19, var(--echo-bg));
}

.ecr-scope__map {
  position: relative;
  margin-top: 64px;
}

.ecr-scope__canvas {
  position: absolute;
  left: 0;
  top: -60px;
  width: 100%;
  height: calc(100% + 120px);
  display: block;
  pointer-events: none;
}

.ecr-scope__nodes {
  position: relative;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: clamp(14px, 2.4vw, 40px);
  list-style: none;
}

.ecr-node {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 24px 12px 22px;
  border: 1px solid var(--ecr-line);
  border-radius: 20px;
  text-align: center;
  background: rgba(9, 17, 35, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .5s ease, box-shadow .5s ease, background-color .5s ease;
}

.ecr-node__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(93, 134, 255, .3);
  border-radius: 16px;
  background: rgba(93, 134, 255, .12);
}

.ecr-node__icon svg { width: 28px; height: 28px; color: #a9bdff; }
.ecr-node b { color: #eef3fb; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ecr-node small { color: rgba(176, 192, 216, .8); font-size: 13px; }

.ecr-node--core {
  padding-block: 26px;
  border-color: rgba(67, 196, 232, .45);
  background: radial-gradient(circle at 50% 30%, rgba(67, 196, 232, .2), rgba(8, 16, 34, .92) 70%);
  box-shadow: 0 0 60px rgba(67, 196, 232, .18);
}

.ecr-node__avatar,
.ecr-context__avatar,
.ecr-loop__avatar,
.ecr-terminal__avatar {
  display: block;
  overflow: hidden;
  border-radius: 50%;
}

.ecr-node__avatar {
  width: 92px;
  height: 92px;
  margin-bottom: 8px;
  border: 1px solid rgba(67, 196, 232, .55);
  box-shadow: 0 0 30px rgba(67, 196, 232, .35);
}

.ecr-node__avatar img,
.ecr-context__avatar img,
.ecr-loop__avatar img,
.ecr-terminal__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ecr-node.is-ping {
  border-color: rgba(103, 224, 185, .62);
  box-shadow: 0 0 34px rgba(103, 224, 185, .2);
}

/* ---------------------------------------------------------------------------
 * Sections et arrière-plans
 * ------------------------------------------------------------------------ */
.ecr-section {
  position: relative;
  padding: clamp(110px, 14vh, 170px) 0;
}

.ecr-watch { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(67, 196, 232, .08), transparent 70%), var(--echo-bg); }
.ecr-act { background: radial-gradient(ellipse 55% 45% at 50% 40%, rgba(93, 134, 255, .09), transparent 70%), #04070f; }
.ecr-deploy { background: radial-gradient(ellipse 50% 50% at 25% 55%, rgba(103, 224, 185, .07), transparent 70%), var(--echo-bg); }
.ecr-remote { background: linear-gradient(180deg, var(--echo-bg), #060b18 50%, var(--echo-bg)); }
.ecr-comply { background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(103, 224, 185, .07), transparent 70%), #04070f; }
.ecr-neoo { background: radial-gradient(ellipse 50% 45% at 30% 60%, rgba(143, 123, 255, .08), transparent 70%), var(--echo-bg); }
.ecr-learn { background: radial-gradient(ellipse 50% 50% at 72% 50%, rgba(67, 196, 232, .08), transparent 70%), #04070f; }

.ecr-split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(40px, 5vw, 96px);
}

.ecr-split--reverse { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }

.ecr-split__copy { max-width: 620px; }
.ecr-split__copy .echo-capability-list { margin-top: 30px; }

/* 02 · Supervision */
.ecr-scope-wave {
  display: block;
  width: 100%;
  height: 120px;
  margin: 46px 0 30px;
}

.ecr-motion .ecr-bento .echo-metric-grid > div > i::before,
.ecr-motion .ecr-cockpit .echo-health-card span > i em {
  transition: width 1.6s var(--ecr-ease) .3s;
}

.ecr-motion .ecr-bento:not(.is-in) .echo-metric-grid > div > i::before,
.ecr-motion .ecr-cockpit:not(.is-in) .echo-health-card span > i em { width: 0; }

.ecr-motion .ecr-bento:not(.is-in) .echo-avatar-stack i { opacity: 0; translate: 0 10px; }
.ecr-bento .echo-avatar-stack i { transition: opacity .5s ease, translate .6s var(--ecr-ease); }
.ecr-bento .echo-avatar-stack i:nth-child(2) { transition-delay: .1s; }
.ecr-bento .echo-avatar-stack i:nth-child(3) { transition-delay: .2s; }
.ecr-bento .echo-avatar-stack i:nth-child(4) { transition-delay: .3s; }

.ecr-cinema .echo-service-list i { animation: ecr-dot 2.6s ease-out infinite; }
.ecr-cinema .echo-service-list span:nth-child(2) i { animation-delay: .8s; }
.ecr-cinema .echo-service-list span:nth-child(3) i { animation-delay: 1.6s; }

/* 03 · Détection */
.ecr-detect {
  position: relative;
  background: radial-gradient(ellipse 55% 45% at 70% 50%, rgba(255, 108, 139, .06), transparent 70%), #04070f;
}

.ecr-detect__sticky {
  position: relative;
  padding: clamp(110px, 14vh, 170px) 0;
}

.ecr-correlation { isolation: isolate; }

.ecr-correlation__beams {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.ecr-correlation .echo-correlation__top,
.ecr-correlation .echo-correlation__alerts { position: relative; z-index: 2; }

.ecr-correlation .echo-root-cause { margin-top: 64px; }

.ecr-correlation .echo-correlation__alerts article {
  transition: opacity .6s var(--ecr-ease), translate .8s var(--ecr-ease), border-color .4s ease, box-shadow .4s ease;
}

.ecr-motion .ecr-correlation .echo-correlation__alerts article:not(.is-in) { opacity: 0; translate: 0 -14px; }
.ecr-correlation .echo-correlation__alerts article.is-hit { border-color: rgba(255, 108, 139, .6); box-shadow: 0 0 24px rgba(255, 108, 139, .22); }

.ecr-correlation .echo-root-cause {
  transition: opacity .8s var(--ecr-ease), translate 1s var(--ecr-ease), box-shadow .6s ease;
}

.ecr-motion .ecr-correlation:not(.is-found) .echo-root-cause { opacity: .08; translate: 0 18px; }
.ecr-correlation.is-found .echo-root-cause { box-shadow: 0 0 0 1px rgba(103, 224, 185, .4), 0 30px 70px rgba(0, 0, 0, .35), 0 0 60px rgba(103, 224, 185, .12); }

.ecr-cinema .ecr-detect.ecr-pin .ecr-detect__track { height: 260vh; }

.ecr-cinema .ecr-detect.ecr-pin .ecr-detect__sticky {
  position: sticky;
  top: var(--cb-topbar-h);
  min-height: calc(100svh - var(--cb-topbar-h));
  display: grid;
  align-items: center;
  padding-block: 30px;
}

.ecr-cinema .ecr-detect.ecr-pin .echo-capability-list { gap: 8px; }

/* 04 · Action */
.ecr-remediation { margin-top: 60px; }

.ecr-terminal__avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(67, 196, 232, .5);
  box-shadow: 0 0 14px rgba(67, 196, 232, .35);
}

.echo-remediation__terminal .echo-terminal__bar { align-items: center; }

[data-ecr-terminal] .echo-terminal__steps li.is-active > i { font-size: 0; }

.echo-terminal__command code[data-ecr-type].is-typing::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -.15em;
  background: var(--echo-cyan);
  animation: ecr-caret .9s steps(1) infinite;
}

.ecr-motion [data-ecr-terminal] .echo-terminal__steps li { transition: opacity .5s ease; }
.ecr-motion [data-ecr-terminal] .echo-terminal__steps li.is-pending { opacity: .42; }
.ecr-motion [data-ecr-terminal] .echo-terminal__steps li.is-pending > i { color: transparent; }
.ecr-motion [data-ecr-terminal] .echo-terminal__steps li.is-pending time { visibility: hidden; }

[data-ecr-terminal] .echo-terminal__steps::before {
  background: linear-gradient(var(--echo-mint) 0 var(--ecr-steps, 100%), rgba(137, 178, 225, .16) var(--ecr-steps, 100%));
}

.ecr-motion [data-ecr-terminal] .echo-terminal__result { transition: opacity .6s ease, translate .6s var(--ecr-ease); }
.ecr-motion [data-ecr-terminal]:not(.is-resolved) .echo-terminal__result { opacity: 0; translate: 0 8px; }

/* 05 · Déploiement */
.ecr-flow .echo-provision-flow__rail {
  overflow: visible;
  background: rgba(83, 137, 210, .2);
}

.ecr-flow .echo-provision-flow__rail i {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--ecr-flow, 1) * 100%);
  background: linear-gradient(var(--echo-mint), var(--echo-cyan));
  box-shadow: 0 0 10px rgba(67, 196, 232, .6);
}

.ecr-flow .echo-provision-flow__rail b {
  position: absolute;
  left: 50%;
  top: calc(var(--ecr-flow, 1) * 100%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #eafcff;
  box-shadow: 0 0 0 5px rgba(67, 196, 232, .2), 0 0 18px var(--echo-cyan);
  opacity: var(--ecr-comet, 0);
}

.ecr-flow > article { transition: border-color .5s ease, box-shadow .5s ease, opacity .5s ease; }
.ecr-motion .ecr-flow > article:not(.is-lit) { opacity: .5; }
.ecr-motion .ecr-flow > article:not(.is-lit) > em { opacity: 0; }
.ecr-flow > article.is-lit { border-color: rgba(103, 224, 185, .36); box-shadow: 0 0 34px rgba(103, 224, 185, .08); }

.ecr-flow__bar {
  display: block;
  width: min(100%, 220px);
  height: 3px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(146, 176, 216, .16);
}

.ecr-flow__bar i {
  display: block;
  width: calc(var(--ecr-install, 1) * 100%);
  height: 100%;
  background: var(--cb-accent-gradient);
}

/* 06 · À distance */
.ecr-cockpit { margin-top: 60px; }

.ecr-cockpit__btn {
  min-height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(135, 176, 224, .22);
  border-radius: 10px;
  color: rgba(225, 235, 247, .86);
  background: rgba(255, 255, 255, .04);
  font-size: 13px;
  font-weight: 600;
}

.ecr-cockpit__btn:first-child {
  border-color: transparent;
  color: #f9fcff;
  background: linear-gradient(135deg, #4d6ff7, #2e9d9c);
}

.ecr-cinema .ecr-cockpit.is-in .ecr-cockpit__btn:first-child { animation: ecr-glow 3.2s ease-in-out 1.2s infinite; }

.ecr-motion .ecr-cockpit:not(.is-in) .echo-activity-card li { opacity: 0; translate: 0 12px; }
.ecr-cockpit .echo-activity-card li { transition: opacity .6s ease, translate .8s var(--ecr-ease); }
.ecr-cockpit .echo-activity-card li:nth-child(2) { transition-delay: .25s; }
.ecr-cockpit .echo-activity-card li:nth-child(3) { transition-delay: .5s; }

.ecr-toolbelt { margin-top: 26px; }

/* 07 · Conformité */
.ecr-compliance { margin-top: 60px; }

.ecr-compliance .echo-compliance__score > span.ecr-score {
  border: 0;
  rotate: none;
  padding-top: 40px;
}

.ecr-compliance .echo-compliance__score > span.ecr-score > * { rotate: none; }

.ecr-score__ring {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  rotate: -90deg;
}

.ecr-score__ring circle {
  fill: none;
  stroke: rgba(93, 134, 255, .18);
  stroke-width: 6;
}

.ecr-score__ring .ecr-score__arc {
  stroke: var(--echo-mint);
  stroke-linecap: round;
  stroke-dasharray: var(--ecr-score, 94) 100;
  filter: drop-shadow(0 0 6px rgba(103, 224, 185, .6));
}

.ecr-compliance .echo-compliance__matrix { position: relative; overflow: hidden; }

.ecr-scanline {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(103, 224, 185, .12) 70%, rgba(103, 224, 185, .5));
  opacity: 0;
  pointer-events: none;
}

.ecr-cinema .ecr-compliance.is-in .ecr-scanline { animation: ecr-scan 5.5s ease-in-out .6s infinite; }

.ecr-compliance .echo-compliance__matrix article { transition: opacity .6s ease, translate .7s var(--ecr-ease); transition-delay: calc(var(--i, 0) * 80ms); }
.ecr-motion .ecr-compliance:not(.is-in) .echo-compliance__matrix article { opacity: 0; translate: 0 10px; }
.ecr-cinema .ecr-compliance.is-in .echo-compliance__matrix article.is-danger { animation: ecr-quarantine 4.4s ease-in-out 1.6s infinite; }

/* 08 · Neoo */
.ecr-neoo__context { margin-top: 60px; }

.ecr-context__links {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.ecr-context__avatar {
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  border: 1px solid rgba(67, 196, 232, .5);
  box-shadow: 0 0 22px rgba(67, 196, 232, .35);
}

.ecr-context .echo-context-map__orbit > span { transition: opacity .6s ease, scale .8s var(--ecr-ease), border-color .4s ease, box-shadow .4s ease; transition-delay: calc(var(--i) * 90ms + 200ms); }
.ecr-motion .ecr-context:not(.is-in) .echo-context-map__orbit > span { opacity: 0; scale: .6; }
.ecr-context .echo-context-map__orbit > span.is-ping { border-color: rgba(103, 224, 185, .6); box-shadow: 0 0 22px rgba(103, 224, 185, .25); }

.ecr-steps li { transition: border-color .5s ease, background-color .5s ease, opacity .5s ease; }
.ecr-motion .ecr-steps li:not(.is-lit) { opacity: .45; }
.ecr-steps li.is-lit > span { color: #06101c; background: var(--echo-mint); box-shadow: 0 0 16px rgba(103, 224, 185, .45); }

/* 09 · Mémoire */
.ecr-quote {
  margin: 34px 0 0;
  padding: 22px 26px;
  border-left: 2px solid transparent;
  border-image: var(--cb-accent-gradient) 1;
  background: rgba(10, 20, 40, .5);
}

.ecr-quote p {
  margin: 0;
  color: #dce7f8;
  font-family: var(--cb-display-font);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.4;
}

.ecr-loop { isolation: isolate; width: min(100%, 660px); margin-inline: auto; }
.ecr-loop .echo-learning-loop__items article:nth-child(3) { right: 0; }
.ecr-loop .echo-learning-loop__items article:nth-child(7) { left: 0; }

.ecr-loop__orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.ecr-loop__avatar {
  width: 70px;
  height: 70px;
  margin-bottom: 8px;
  border: 1px solid rgba(67, 196, 232, .5);
  box-shadow: 0 0 26px rgba(67, 196, 232, .35);
}

.ecr-loop .echo-learning-loop__items article { transition: border-color .5s ease, box-shadow .5s ease, background-color .5s ease; }
.ecr-loop .echo-learning-loop__items article.is-lit { border-color: rgba(103, 224, 185, .55); background: rgba(12, 32, 44, .92); box-shadow: 0 0 28px rgba(103, 224, 185, .2); }

/* Finale — le robot, en veille active */
.ecr-final {
  position: relative;
  min-height: max(760px, 100svh);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 22% 40%, rgba(50, 143, 194, .12), transparent 38%),
    linear-gradient(180deg, #030716, #020513);
}

.ecr-final__sonar {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.ecr-final__inner {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 40px;
}

.ecr-final__copy {
  position: relative;
  z-index: 3;
  padding-block: 140px 110px;
}

.ecr-final__title { max-width: 760px; font-size: var(--cb-title-section-side); }
.ecr-final__line { display: block; }
.ecr-final__actions { margin-top: 36px; }

.ecr-final__proofs {
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  color: rgba(185, 205, 228, .78);
  font-size: 14px;
  list-style: none;
}

.ecr-final__proofs li { display: flex; align-items: center; gap: 8px; }
.ecr-final__proofs li span:first-child { color: var(--echo-mint); }

.ecr-final .ecr-robot {
  position: relative;
  align-self: end;
  justify-self: center;
  width: min(100%, 560px);
}

.ecr-final .ecr-robot__ear i:first-child { border-color: rgba(120, 255, 210, .85); box-shadow: 0 0 18px rgba(103, 224, 185, .9), inset 0 0 14px rgba(103, 224, 185, .7); }

.ecr-motion .ecr-final__line { transition: opacity 1s var(--ecr-ease), transform 1.2s var(--ecr-ease), filter 1s ease; }
.ecr-motion .ecr-final:not(.is-in) .ecr-final__line { opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(8px); }
.ecr-final .ecr-final__line:nth-child(2) { transition-delay: .25s; }
.ecr-final .ecr-final__line:nth-child(3) { transition-delay: .5s; }

/* Lisibilité : les maquettes produit portent du vrai contenu traduit. */
.echo-metric-grid b,
.echo-health-card span > b,
.echo-cockpit-main > header small,
.echo-compliance__score > div small { font-size: 11px; }
.echo-terminal__steps small,
.echo-terminal__result b { font-size: 12px; }
.echo-terminal__steps time,
.echo-terminal__result a,
.echo-health-card span > small { font-size: 11px; }
.echo-context-map__orbit > span b { font-size: 12px; line-height: 1.25; }
.echo-learning-loop__items article b { font-size: 13px; }
.echo-learning-loop__items article span { font-size: 11px; }
.echo-cockpit-main > header p { font-size: 12px; }

/* ---------------------------------------------------------------------------
 * Keyframes
 * ------------------------------------------------------------------------ */
@keyframes echo-spin { to { rotate: 360deg; } }
@keyframes ecr-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes ecr-line-in { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }
@keyframes ecr-robot-in { from { opacity: 0; filter: brightness(.2) blur(6px); transform: translate3d(0, 30px, 0) scale(1.03); } to { opacity: 1; filter: none; transform: none; } }
@keyframes ecr-sheen { 0%, 20% { background-position: 180% 0; } 70%, 100% { background-position: -80% 0; } }
@keyframes ecr-ping { 0% { opacity: .9; scale: 1; } 80%, 100% { opacity: 0; scale: 2.6; } }
@keyframes ecr-visor { 0%, 68% { opacity: 0; } 70%, 78% { opacity: .9; } 80%, 100% { opacity: 0; } }
@keyframes ecr-breathe { 0%, 100% { opacity: .35; scale: .92; } 50% { opacity: .85; scale: 1.08; } }
@keyframes ecr-dot { 0% { box-shadow: 0 0 0 0 rgba(103, 224, 185, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(103, 224, 185, 0); } }
@keyframes ecr-cue { to { top: 100%; } }
@keyframes ecr-caret { 50% { opacity: 0; } }
@keyframes ecr-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(67, 196, 232, 0); } 50% { box-shadow: 0 0 0 6px rgba(67, 196, 232, .15), 0 0 26px rgba(67, 196, 232, .35); } }
@keyframes ecr-scan { 0% { opacity: 0; top: -60px; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; top: 100%; } }
@keyframes ecr-quarantine { 0%, 60%, 100% { box-shadow: none; } 66% { box-shadow: inset 0 0 0 1px rgba(255, 108, 139, .7), 0 0 30px rgba(255, 108, 139, .35); } 72% { box-shadow: inset 0 0 0 1px rgba(255, 108, 139, .25); } }

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */
@media (max-width: 1320px) {
  .ecr-hero__inner { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
  .ecr-hero .ecr-robot { left: 60%; height: min(86%, 820px); }
  .ecr-feed { width: 270px; }
}

@media (max-width: 1180px) {
  .ecr-hero { min-height: 0; }

  .ecr-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 110px 0;
  }

  .ecr-hero__visual {
    position: relative;
    height: 640px;
    margin-top: 40px;
  }

  .ecr-hero .ecr-robot {
    left: 36%;
    height: 100%;
  }

  .ecr-feed { right: 0; top: 50%; }
  .ecr-hud { right: 0; bottom: 20px; }
  .ecr-cue { display: none; }

  .ecr-head--split,
  .ecr-split,
  .ecr-split--reverse,
  .ecr-final__inner { grid-template-columns: minmax(0, 1fr); }

  .ecr-split--reverse > .ecr-split__copy { order: -1; }
  .ecr-split__copy { max-width: 760px; }
  .ecr-scope__nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ecr-node--core { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 320px); }
  .ecr-final__copy { padding-block: 110px 0; }
  .ecr-final .ecr-robot { width: min(100%, 440px); }
}

@media (max-width: 760px) {
  .ecr-page { --ecr-shell: calc(100% - 36px); --ecr-edge: 18px; }
  .ecr-scope-wave { height: 80px; margin-block: 30px 20px; }
  .ecr-scope__nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecr-pause { position: absolute; top: calc(var(--cb-topbar-h) + 16px); right: 16px; bottom: auto; left: auto; }
}

@media (max-width: 640px) {
  .ecr-hero__inner { padding-top: 64px; }
  .ecr-hero__title { font-size: clamp(43px, 13vw, 58px); }
  .ecr-hero__visual { height: auto; margin-top: 30px; display: grid; gap: 0; }
  .ecr-hero .ecr-robot { position: relative; left: auto; bottom: auto; margin: 0 auto; height: auto; width: min(100%, 360px); --tx: 0%; }
  .ecr-feed { position: relative; right: auto; top: auto; width: 100%; margin-top: -70px; translate: none; }
  .ecr-feed__item { min-height: 96px; }
  .ecr-motion .ecr-feed__item:not(.is-in) { opacity: .4; translate: 0 0; }
  .ecr-hud { position: relative; right: auto; bottom: auto; justify-self: start; margin-top: 18px; }
  .ecr-title { font-size: clamp(39px, 12.5vw, 56px); }
  .ecr-title--side { font-size: clamp(38px, 12vw, 52px); }
  .ecr-section { padding-block: 86px; }
  .ecr-final__copy { padding-block: 90px 0; }
  .ecr-final__actions { display: grid; }
}

/* ---------------------------------------------------------------------------
 * Mouvement réduit : états finaux, aucune boucle
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ecr-robot__sheen,
  .ecr-robot__ear i:last-child,
  .ecr-cue i::after,
  .ecr-scanline { display: none; }
}

@media (forced-colors: active) {
  .ecr-accent {
    color: CanvasText;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}