/* ============================================================
   App — v2 base + v3 constellation detail
   Stays inside SVA tokens; adds movement, depth, kinetic typo.
   Display font: Space Grotesk (Google) for headlines.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --display: 'Space Grotesk', 'Inter', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html, body, #root {
  height: 100%; margin: 0;
  overscroll-behavior: none;
}
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }

/* App shell */
.app-shell {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg);
}

.app-header {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px, 2vw, 24px) clamp(20px, 3vw, 48px);
  z-index: 30;
  position: relative;
}
.app-header__logo-btn {
  background: none; border: none; padding: 0;
  cursor: pointer; display: flex; align-items: center;
  border-radius: var(--radius-sm);
  transition: opacity 180ms ease;
}
.app-header__logo-btn:hover { opacity: 0.75; }
.app-header__logo { height: clamp(36px, 4vw, 60px); display: block; }
.app-header__crumb {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--display);
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 500;
}
.app-header__crumb .dot { width: 6px; height: 6px; background: var(--sva-blue); border-radius: 999px; }

.app-main { flex: 1; position: relative; min-height: 0; display: flex; flex-direction: column; }

/* Global keyframes */
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes spin360 { to { transform: rotate(360deg); } }
@keyframes drift { 0%{transform:translate(0,0)} 50%{transform:translate(20px,-12px)} 100%{transform:translate(0,0)} }
@keyframes shimmerX {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes pulseRing {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes scrollMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes traceDraw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ════════════════════════════════════════════════════════════
   ÉCRAN ÉTAPES (hub principal, version dynamique)
   ════════════════════════════════════════════════════════════ */
.etapes-screen {
  flex: 1; display: flex; flex-direction: column;
  padding: 0 clamp(20px, 3vw, 56px) clamp(20px, 2vw, 32px);
  min-height: 0;
  position: relative;
}

/* Background ambient blobs */
.etapes-bg {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.etapes-bg__blob {
  position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: drift 18s ease-in-out infinite;
}
.etapes-bg__blob.b1 { background: rgba(0, 62, 171, 0.18); top: -20%; left: -10%; }
.etapes-bg__blob.b2 { background: rgba(152, 154, 165, 0.22); bottom: -25%; right: -15%; animation-duration: 22s; animation-delay: -8s; }
.etapes-bg__blob.b3 { background: rgba(0, 62, 171, 0.10); top: 30%; right: 20%; width: 35vw; height: 35vw; animation-duration: 26s; animation-delay: -4s; }

.etapes-screen > * { position: relative; z-index: 1; }

.hub-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: end;
  padding: clamp(8px, 1.5vw, 24px) 0 clamp(20px, 2.5vw, 36px);
}

.hub-hero__left { min-width: 0; }
.hub-hero__eyebrow {
  font-family: var(--display);
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: clamp(10px, 1vw, 16px);
  display: flex; align-items: center; gap: 12px;
}
.hub-hero__eyebrow::before {
  content: ""; width: 32px; height: 2px;
  background: var(--accent); display: inline-block;
}

.hub-hero__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--fg1);
}
.etape2-head__title { color: var(--fg1); }
.etape2-head__title { margin: 0; }
.hub-hero__title .accent {
  background: linear-gradient(120deg, #003EAB 0%, #2e63d8 50%, #003EAB 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerX 6s ease-in-out infinite;
  font-weight: 700;
  font-style: italic;
}
.hub-hero__title .silver {
  background: linear-gradient(135deg, #74767F 0%, #B8BAC5 30%, #989AA5 50%, #C9CBD3 75%, #6e707a 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerX 8s ease-in-out infinite;
  font-style: italic;
  font-weight: 700;
}

.hub-hero__right {
  display: flex; flex-direction: row; align-items: flex-end;
  gap: 16px;
  text-align: right;
}
.hub-hero__counter {
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 140px);
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.hub-hero__counter sup {
  font-size: 0.32em;
  vertical-align: super;
  color: var(--accent);
  font-weight: 600;
  margin-left: 4px;
}
.hub-hero__counterLabel {
  font-family: var(--display);
  font-size: clamp(10px, 0.8vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg2);
  font-weight: 500;
}

/* Marquee under hero */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(8px, 0.7vw, 12px) 0;
  margin-bottom: clamp(20px, 2vw, 36px);
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee__track {
  display: flex; gap: 48px; white-space: nowrap; width: max-content;
  animation: scrollMarquee 60s linear infinite;
  font-family: var(--display);
  font-size: clamp(12px, 0.9vw, 15px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg2);
  font-weight: 500;
}
.marquee__track .star {
  color: var(--accent);
  font-size: 1.2em;
  display: inline-block;
  animation: spin360 6s linear infinite;
}

/* ─── Circuit horizontal ─── */
.circuit2 {
  flex: 1;
  display: flex; align-items: center;
  position: relative;
  min-height: 0;
  padding: 0 0 clamp(16px, 1.5vw, 28px);
}

.circuit2__rail {
  position: absolute;
  left: 2%; right: 2%;
  top: 50%;
  height: 2px;
  pointer-events: none;
  transform: translateY(-1px);
}
.circuit2__rail svg { width: 100%; height: 60px; overflow: visible; position: absolute; top: -30px; left: 0; }

.circuit2__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 0;
  width: 100%;
  padding: clamp(40px, 5vw, 80px) 0;
}

.node2 {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 1vw, 16px);
  background: transparent; border: 0;
  padding: clamp(8px, 1vw, 14px) 4px;
  text-align: center;
  transition: transform 320ms var(--ease-snap);
  -webkit-tap-highlight-color: transparent;
}

.node2__dot {
  position: relative;
  width: clamp(64px, 6vw, 110px);
  height: clamp(64px, 6vw, 110px);
  border-radius: 999px;
  background: white;
  border: 2px solid var(--border-strong);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 38px);
  color: var(--fg1);
  letter-spacing: -0.04em;
  transition: all 280ms var(--ease);
  box-shadow: 0 6px 16px -8px rgba(20,21,26,0.18);
}
.node2__dot::before {
  content: ""; position: absolute; inset: -10px;
  border-radius: 999px; border: 2px solid transparent;
  transition: all 280ms var(--ease);
}
.node2__dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 60%);
  pointer-events: none;
  opacity: 0.6;
}
.node2:hover .node2__dot, .node2:focus-visible .node2__dot {
  background: var(--sva-blue);
  color: white;
  border-color: var(--sva-blue);
  box-shadow: 0 18px 38px -10px rgba(0,62,171,0.5), 0 0 0 8px rgba(0,62,171,0.08);
  transform: scale(1.08);
}
.node2:hover .node2__dot::before {
  border-color: rgba(0,62,171,0.25);
  inset: -16px;
}
.node2:focus-visible { outline: none; }

.node2__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(13px, 0.95vw, 18px);
  line-height: 1.2;
  color: var(--fg1);
  max-width: 14ch;
  text-wrap: balance;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}
.node2:hover .node2__name { color: var(--sva-blue); }

.node2__count {
  font-family: var(--display);
  font-size: clamp(10px, 0.7vw, 13px);
  font-weight: 500;
  color: var(--fg3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.node2__count.empty { color: var(--neutral-300); text-transform: none; letter-spacing: 0; font-style: italic; }

/* hover number badge */
.node2__badge {
  position: absolute;
  top: -6px; right: 50%; transform: translate(50%, -100%) scale(0);
  background: var(--sva-blue); color: white;
  font-family: var(--display);
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: all 240ms var(--ease-snap);
  pointer-events: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.node2:hover .node2__badge {
  opacity: 1;
  transform: translate(50%, -8px) scale(1);
}

/* ─── Transversaux ─── */
.transv2 {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  padding: clamp(14px, 1.4vw, 22px) clamp(20px, 2vw, 32px);
  background: linear-gradient(135deg, rgba(0,62,171,0.04) 0%, rgba(217,218,228,0.4) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
.transv2::before {
  content: "";
  position: absolute;
  top: -50%; left: -10%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,62,171,0.15), transparent 70%);
  filter: blur(20px);
  animation: drift 14s ease-in-out infinite;
}
.transv2__copy { position: relative; z-index: 1; min-width: 0; }
.transv2__eyebrow {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 4px;
}
.transv2__title {
  font-family: var(--display);
  font-size: clamp(15px, 1.2vw, 22px);
  font-weight: 500;
  color: var(--fg1);
  letter-spacing: -0.01em;
}

/* Buttons (kinetic) */
.btn2 {
  font-family: var(--display);
  font-size: clamp(13px, 0.95vw, 16px);
  font-weight: 500;
  padding: clamp(10px, 1vw, 14px) clamp(18px, 1.6vw, 24px);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 220ms var(--ease-snap);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
}
.btn2 .arr {
  display: inline-block;
  transition: transform 240ms var(--ease-snap);
}
.btn2:hover .arr { transform: translateX(4px); }

.btn2.primary { background: var(--sva-blue); color: white; }
.btn2.primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 8px 20px -6px rgba(0,62,171,0.5);
  transform: translateY(-2px);
}
.btn2.secondary { background: white; color: var(--fg1); border-color: var(--border-strong); }
.btn2.secondary:hover { border-color: var(--sva-blue); color: var(--sva-blue); transform: translateY(-2px); }

/* ════════════════════════════════════════════════════════════
   ÉCRAN DÉTAIL ÉTAPE
   ════════════════════════════════════════════════════════════ */
.etape2 {
  flex: 1; display: flex; flex-direction: column;
  padding: 0 clamp(20px, 3vw, 56px) clamp(16px, 2vw, 32px);
  min-height: 0;
  position: relative;
}
.etape2-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.etape2-bg__blob {
  position: absolute;
  width: 50vw; height: 50vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,62,171,0.10), transparent 70%);
  top: -20%; right: -15%;
  filter: blur(60px);
  animation: drift 20s ease-in-out infinite;
}

.etape2 > * { position: relative; z-index: 1; }

.etape2-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: end;
  padding: clamp(12px, 1.4vw, 24px) 0 clamp(16px, 1.6vw, 28px);
}

.btn-back2 {
  background: white;
  border: 1px solid var(--border);
  color: var(--fg1);
  width: clamp(44px, 4vw, 56px);
  height: clamp(44px, 4vw, 56px);
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 20px;
  transition: all 220ms var(--ease-snap);
  font-family: var(--display);
}
.btn-back2:hover {
  background: var(--sva-blue); color: white; border-color: var(--sva-blue);
  transform: translateX(-4px);
}

.etape2-head__title-block { min-width: 0; }
.etape2-head__num {
  font-family: var(--display);
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.etape2-head__num .pill {
  background: var(--accent-soft);
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.12em;
}
.etape2-head__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg1);
  margin: 0;
}

.etape2-head__counts {
  display: flex; flex-direction: column; gap: 2px;
  align-items: flex-end;
  text-align: right;
}
.etape2-head__counts .big {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--sva-blue);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.etape2-head__counts .lbl {
  font-family: var(--display);
  font-size: clamp(10px, 0.75vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 500;
}

/* Trans nav floating tabs */
.trans-tabs {
  display: inline-flex;
  align-self: flex-start;
  background: white;
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 999px;
  gap: 2px;
  position: relative;
  margin-bottom: 12px;
  width: max-content;
}
.trans-tabs button {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border: 0; background: transparent;
  border-radius: 999px;
  color: var(--fg2);
  transition: color 200ms ease;
  position: relative;
  z-index: 1;
}
.trans-tabs button.active { color: white; }
.trans-tabs__ind {
  position: absolute;
  top: 4px; bottom: 4px;
  background: var(--sva-blue);
  border-radius: 999px;
  z-index: 0;
  transition: all 360ms var(--ease-snap);
}

/* Chips kinetic */
.chips2 {
  display: flex; gap: 8px; overflow-x: auto;
  scrollbar-width: thin;
  padding: 4px 4px 14px;
  margin-bottom: 12px;
  -webkit-mask-image: linear-gradient(90deg, black 0%, black 96%, transparent 100%);
  mask-image: linear-gradient(90deg, black 0%, black 96%, transparent 100%);
  border-bottom: 1px solid var(--border);
}
.chips2::-webkit-scrollbar { height: 0; }

.chip2 {
  flex: 0 0 auto;
  background: white;
  border: 1px solid var(--border-strong);
  color: var(--fg2);
  padding: clamp(9px, 0.85vw, 12px) clamp(14px, 1.2vw, 20px);
  border-radius: 999px;
  font-family: var(--display);
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: all 220ms var(--ease-snap);
  max-width: 360px;
  letter-spacing: -0.01em;
}
.chip2:hover { border-color: var(--sva-blue); color: var(--sva-blue); transform: translateY(-2px); }
.chip2.active {
  background: var(--sva-blue); border-color: var(--sva-blue); color: white;
  box-shadow: 0 6px 16px -6px rgba(0,62,171,0.5);
  transform: translateY(-1px);
}
.chip2__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px;
  background: var(--bg-muted);
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg3);
}
.chip2.active .chip2__count { background: rgba(255,255,255,0.22); color: white; }

/* Companies grid v2 */
.companies-wrap2 {
  flex: 1; overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin; min-height: 0;
}
.companies-wrap2::-webkit-scrollbar { width: 6px; }
.companies-wrap2::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.companies-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 18vw, 320px), 1fr));
  gap: clamp(8px, 0.8vw, 12px);
  padding: clamp(8px, 1vw, 16px) 0;
}
@media (min-width: 1920px) {
  .companies-grid2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
}

.card2 {
  position: relative;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(14px, 1.2vw, 20px);
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: 8px;
  min-height: 100px;
  text-align: left;
  transition: all 280ms var(--ease-snap);
  overflow: hidden;
}
.card2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,62,171,0.04), transparent 60%);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
.card2:hover {
  border-color: var(--sva-blue);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 30px -12px rgba(0,62,171,0.18), 0 4px 12px -4px rgba(20,21,26,0.08);
}
.card2:hover::before { opacity: 1; }

.card2__arrow {
  position: absolute;
  top: clamp(14px, 1.2vw, 18px);
  right: clamp(14px, 1.2vw, 18px);
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--bg-muted);
  display: grid; place-items: center;
  color: var(--fg3);
  font-size: 13px;
  transition: all 280ms var(--ease-snap);
}
.card2:hover .card2__arrow {
  background: var(--sva-blue); color: white;
  transform: rotate(-45deg);
}

.card2__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.2;
  color: var(--fg1);
  padding-right: 36px;
  letter-spacing: -0.01em;
  word-break: break-word;
}
.card2__precision {
  font-size: clamp(11px, 0.78vw, 13px);
  color: var(--fg3);
  font-style: italic;
  line-height: 1.35;
}
.card2__service {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 500;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}
.card2__service::before {
  content: ""; width: 6px; height: 6px; background: var(--sva-blue); border-radius: 999px;
}

/* Empty state */
.empty2 {
  text-align: center;
  padding: clamp(60px, 8vw, 120px) 16px;
  color: var(--fg3);
  font-family: var(--display);
}
.empty2__title {
  font-family: var(--display);
  font-size: clamp(20px, 1.6vw, 28px);
  color: var(--fg2);
  margin-bottom: 8px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ════════════════════════════════════════════════════════════
   ENTREPRISE PANEL v2 — slide drawer with motion
   ════════════════════════════════════════════════════════════ */
.modal-bd2 {
  position: fixed; inset: 0;
  background: rgba(20, 21, 26, 0.55);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex; align-items: stretch; justify-content: flex-end;
  animation: bdIn 240ms ease;
}
@keyframes bdIn { from { opacity: 0 } to { opacity: 1 } }

.entreprise2 {
  background: white;
  width: min(680px, 100vw);
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: -30px 0 60px -20px rgba(0,0,0,0.3);
}
@media (min-width: 1920px) {
  .entreprise2 { width: min(840px, 100vw); }
}

.entreprise2__header {
  background: linear-gradient(135deg, #003EAB 0%, #002569 100%);
  color: white;
  padding: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 44px) clamp(24px, 2.4vw, 36px);
  position: relative;
  overflow: hidden;
}
.entreprise2__header::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
  border-radius: 50%;
  animation: drift 16s ease-in-out infinite;
}
.entreprise2__header::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 2px 2px, rgba(255,255,255,0.08) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}

.entreprise2__close {
  position: absolute;
  top: clamp(18px, 1.8vw, 26px);
  right: clamp(18px, 1.8vw, 26px);
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: white;
  display: grid; place-items: center;
  font-size: 22px;
  z-index: 5;
  transition: all 220ms var(--ease-snap);
  backdrop-filter: blur(4px);
}
.entreprise2__close:hover {
  background: white; color: var(--sva-blue);
  transform: rotate(90deg);
}

.entreprise2__eyebrow {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
  position: relative; z-index: 1;
}
.entreprise2__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  padding-right: 56px;
  position: relative; z-index: 1;
  color: white;
}
.entreprise2__precision {
  margin-top: 10px;
  font-size: clamp(13px, 0.95vw, 15px);
  color: rgba(255,255,255,0.85);
  font-style: italic;
  position: relative; z-index: 1;
}

.entreprise2__body {
  flex: 1; overflow-y: auto;
  padding: clamp(22px, 2.4vw, 36px) clamp(28px, 3vw, 44px);
  scrollbar-width: thin;
}
.entreprise2__body::-webkit-scrollbar { width: 6px; }
.entreprise2__body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.entreprise2__desc {
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.6;
  color: var(--fg2);
  margin-bottom: clamp(20px, 2vw, 28px);
}

.info2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 0.8vw, 14px);
  margin-bottom: clamp(20px, 2vw, 28px);
}
.info2__cell {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(12px, 1vw, 18px) clamp(14px, 1.2vw, 20px);
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
  transition: all 220ms ease;
}
.info2__cell:hover { border-color: var(--sva-blue); background: white; }
.info2__cell.span2 { grid-column: span 2; }
.info2__lbl {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.info2__lbl .ic {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--accent-soft);
}
.info2__val {
  font-size: clamp(14px, 0.95vw, 16px);
  color: var(--fg1);
  font-weight: 500;
  word-break: break-word;
  line-height: 1.4;
}
.info2__val a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.info2__val.empty { color: var(--fg-muted); font-style: italic; font-weight: 400; }
.info2__val.big {
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sva-blue);
  font-variant-numeric: tabular-nums;
}

/* Map */
.map2-section {
  border-top: 1px solid var(--border);
  padding-top: clamp(16px, 1.4vw, 22px);
}
.map2-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.map2-title {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.map2-title::before {
  content: ""; width: 8px; height: 8px; background: var(--sva-blue); border-radius: 999px;
  animation: floatY 2s ease-in-out infinite;
}
.map2-hint {
  font-family: var(--display);
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.08em;
}
.map2-container {
  position: relative;
  width: 100%;
  height: clamp(220px, 28vh, 360px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}
.map2-container.loading::after {
  content: "Localisation en cours…";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 13px;
  color: var(--fg3);
  letter-spacing: 0.08em;
  background: var(--bg-soft);
}
.map2-fail {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 13px;
  color: var(--fg3);
  text-align: center; padding: 24px;
}
.leaflet-container { font-family: var(--font-sans) !important; }
.sva-pin {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--sva-blue);
  border: 4px solid white;
  box-shadow: 0 2px 6px rgba(0,62,171,0.5), 0 0 0 2px var(--sva-blue);
}
.sva-pin::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 2px solid var(--sva-blue);
  animation: pulseRing 2s ease-out infinite;
}

/* ════════════════════════════════════════════════════════════
   VEILLE v2 — kinetic hero
   ════════════════════════════════════════════════════════════ */
.veille2 {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(0,62,171,0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 85%, rgba(46, 99, 216, 0.30) 0%, transparent 60%),
    linear-gradient(160deg, #000914 0%, #001235 50%, #001a4a 100%);
  color: white;
  z-index: 40;
  overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer;
}

.veille2__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

/* Animated grid overlay */
.veille2__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  z-index: 1;
}

.veille2__header {
  position: relative; z-index: 5;
  padding: clamp(20px, 2.5vw, 36px) clamp(24px, 3vw, 56px);
  display: flex; justify-content: space-between; align-items: center;
}
.veille2__header img { height: clamp(40px, 4.4vw, 70px); }
.veille2__header .badge {
  font-family: var(--display);
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(217,218,228,0.8);
  display: flex; align-items: center; gap: 12px;
}
.veille2__header .badge .dot {
  width: 8px; height: 8px;
  background: #4d7bd6;
  border-radius: 999px;
  animation: floatY 2s ease-in-out infinite;
  box-shadow: 0 0 12px #4d7bd6;
}

.veille2__main {
  position: relative; z-index: 5;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(24px, 4vw, 80px);
}

.veille2__hero {
  text-align: center;
  max-width: 1400px;
}

.veille2__eyebrow {
  font-family: var(--display);
  font-size: clamp(11px, 0.85vw, 16px);
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(217,218,228,0.85);
  margin-bottom: clamp(12px, 1.5vw, 24px);
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.veille2__eyebrow::before, .veille2__eyebrow::after {
  content: ""; width: clamp(40px, 6vw, 100px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,218,228,0.6), transparent);
}

.veille2__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(48px, 8vw, 148px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin: 0 auto clamp(16px, 1.8vw, 28px);
  color: white;
}
.veille2__title .row { display: block; }
.veille2__title .it {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(135deg, #E6E7EC 0%, #B8BAC5 30%, #989AA5 50%, #C9CBD3 75%, #ECEDF1 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerX 6s ease-in-out infinite;
  padding-right: 0.08em;
}
.veille2__title .blue {
  background: linear-gradient(120deg, #4d7bd6 0%, #B8C8F0 50%, #4d7bd6 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  font-style: italic;
  animation: shimmerX 5s ease-in-out infinite;
  padding-right: 0.08em;
}

.veille2__sub {
  font-family: var(--display);
  font-size: clamp(15px, 1.4vw, 24px);
  font-weight: 400;
  color: rgba(217,218,228,0.75);
  margin: 0 auto clamp(20px, 2.5vw, 40px);
  max-width: 75ch;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* CTA pulse */
.veille2__cta {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 1.8vw, 28px);
}
.veille2__pulse {
  position: relative;
  width: clamp(80px, 7vw, 120px);
  height: clamp(80px, 7vw, 120px);
}
.veille2__pulse::before, .veille2__pulse::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.6);
  animation: pulseRing 2.4s var(--ease) infinite;
}
.veille2__pulse::after { animation-delay: 1.2s; }
.veille2__pulse__inner {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
}

.veille2__cta__lbl {
  font-family: var(--display);
  font-size: clamp(13px, 1.1vw, 20px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: white;
}

/* Stats row at bottom — kinetic */
.veille2__stats {
  position: relative; z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: clamp(14px, 1.2vw, 20px) clamp(24px, 3vw, 56px) clamp(20px, 2vw, 32px);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.veille2__stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 clamp(12px, 1.5vw, 24px);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.veille2__stat:last-child { border-right: 0; }
.veille2__stat .num {
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: white;
  font-variant-numeric: tabular-nums;
}
.veille2__stat .lbl {
  font-family: var(--display);
  font-size: clamp(10px, 0.8vw, 13px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(217,218,228,0.6);
  font-weight: 500;
}

/* TV inactivity bar */
.tv-progress {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(0,62,171,0.08);
  pointer-events: none;
  z-index: 60;
}
.tv-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--sva-blue) 0%, #4d7bd6 100%);
  transform-origin: left;
  transition: transform 0.5s linear;
  box-shadow: 0 0 12px rgba(77,123,214,0.6);
}

/* ════════════════════════════════════════════════════════════
   MOBILE / TABLET (<1024px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  body { user-select: text; }
  .app-header { padding: 14px 18px; }
  .app-header__crumb { display: none; }

  .etapes-screen { padding: 0 16px 24px; }
  .hub-hero { grid-template-columns: 1fr; gap: 16px; align-items: start; padding: 16px 0; }
  .hub-hero__title { font-size: 44px; }
  .hub-hero__right { align-items: flex-start; text-align: left; flex-direction: row; gap: 16px; align-items: end; }
  .hub-hero__counter { font-size: 56px; }

  .marquee { margin-bottom: 16px; }

  .circuit2 { display: block; flex: none; }
  .circuit2__rail { display: none; }
  .circuit2__inner { grid-template-columns: 1fr; padding: 8px 0; }
  .node2 {
    flex-direction: row; justify-content: flex-start; align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    width: 100%;
    text-align: left;
    position: relative;
  }
  .node2:last-child { border-bottom: 0; }
  .node2__dot { width: 60px; height: 60px; font-size: 22px; flex: 0 0 60px; }
  .node2__name { font-size: 17px; max-width: none; flex: 1; text-align: left; }
  .node2__count { font-size: 11px; }
  .node2:hover .node2__dot { transform: none; }
  .node2__badge { display: none; }

  .transv2 { grid-template-columns: 1fr; gap: 12px; }
  .transv2__copy { order: 0; }
  .transv2 .btn2 { width: 100%; justify-content: center; }

  .etape2 { padding: 0 16px 16px; }
  .etape2-head { grid-template-columns: auto 1fr; gap: 12px; }
  .etape2-head__counts { display: none; }
  .etape2-head__title { font-size: 26px; }

  .modal-bd2 { background: white; }
  .entreprise2 { width: 100vw; box-shadow: none; }
  .info2 { grid-template-columns: 1fr; }
  .info2__cell.span2 { grid-column: span 1; }
  .companies-grid2 { grid-template-columns: 1fr; }

  .veille2__stats { grid-template-columns: repeat(2, 1fr); gap: 16px 0; padding: 18px 24px 28px; }
  .veille2__stat { border-right: 0; padding: 0 16px; }
  .veille2__stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
}

@media (max-width: 600px) {
  .hub-hero__title { font-size: 36px; }
  .hub-hero__counter { font-size: 44px; }
  .veille2__title { font-size: 44px; }
}

@media (min-width: 1920px) {
  .app-header { padding: 28px 56px; }
  .etapes-screen { padding: 0 64px 36px; }
  .etape2 { padding: 0 64px 36px; }
}

/* ════════════════════════════════════════════════════════════
   ETAPE3 — constellation
   ════════════════════════════════════════════════════════════ */
.etape3 {
  flex: 1; display: flex; flex-direction: column;
  padding: 0 clamp(20px, 3vw, 56px) 0;
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,62,171,0.10), transparent 60%),
    radial-gradient(ellipse 70% 70% at 90% 90%, rgba(152,154,165,0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 70% 30%, rgba(77,123,214,0.08), transparent 60%),
    linear-gradient(165deg, #fafbfc 0%, #f0f2f6 100%);
}
.etape3::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/saguenay.png');
  /* background-size: 60% 100%; */
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 18%, rgba(0,0,0,0.85) 42%, black 65%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 18%, rgba(0,0,0,0.85) 42%, black 65%);
  pointer-events: none;
  z-index: 0;
}

.etape3-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.etape3-bg__blob {
  position: absolute;
  width: 90vw; height: 90vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,62,171,0.10), transparent 60%);
  top: -25%; right: -25%;
  filter: blur(80px);
  animation: drift 24s ease-in-out infinite;
}
.etape3-bg__blob.b2 {
  top: auto; right: auto;
  bottom: -30%; left: -20%;
  width: 70vw; height: 70vw;
  background: radial-gradient(circle, rgba(152,154,165,0.16), transparent 60%);
  animation-duration: 30s;
  animation-delay: -12s;
}

.etape3 > * { position: relative; z-index: 1; }

.etape3-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(475px, 1.6fr) 1.4fr;
  gap: clamp(28px, 3.5vw, 64px);
  padding: clamp(16px, 1.6vw, 28px) 0 0;
  align-items: stretch;
}

/* ─── Sidebar ─── */
.etape3-side {
  display: flex; flex-direction: column;
  gap: clamp(16px, 1.6vw, 28px);
  min-width: 0; min-height: 0;
  overflow-y: auto;
  position: relative; z-index: 2;
  padding-right: 8px;
  padding-bottom: 24px;
  scrollbar-width: none;
}
.etape3-side::-webkit-scrollbar { display: none; }

.btn-back3 {
  align-self: flex-start;
  background: transparent;
  border: 0;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg2);
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 0;
  transition: color 200ms ease, transform 220ms var(--ease-snap);
}
.btn-back3 span[aria-hidden] {
  font-size: 18px;
  line-height: 1;
  transition: transform 220ms var(--ease-snap);
}
.btn-back3:hover { color: var(--sva-blue); transform: translateX(-4px); }
.btn-back3:hover span[aria-hidden] { transform: translateX(4px); }

.btn-back3--tv {
  font-size: 16px;
  padding: 14px 22px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
  color: var(--fg1);
  min-height: 52px;
  box-shadow: 0 2px 10px -4px rgba(20,21,26,0.10);
  transition: color 200ms ease, transform 220ms var(--ease-snap), background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.btn-back3--tv span[aria-hidden] { font-size: 20px; }
.btn-back3--tv:hover {
  background: white;
  border-color: var(--sva-blue);
  color: var(--sva-blue);
  box-shadow: 0 6px 20px -6px rgba(0,62,171,0.25);
  transform: none;
}

.etape3-side__head { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 14px); }

.etape3-side__num {
  font-family: var(--display);
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: flex; align-items: center; gap: 12px;
}
.etape3-side__num::before {
  content: ""; width: 28px; height: 2px; background: var(--accent);
}

.etape3-side__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--fg1);
  text-wrap: balance;
}

.etape3-side__desc {
  font-size: clamp(14px, 1vw, 17px);
  color: var(--fg2);
  line-height: 1.5;
  max-width: 75ch;
  margin: 0;
}

.etape3-side__svc-label {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 600;
  margin-bottom: -8px;
}
.etape3-side__svc-label .dot-sep { margin: 0 4px; }

.etape3-analyse {
  display: flex; flex-direction: column; gap: 8px;
}
.etape3-analyse__heading {
  font-family: var(--display); font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600;
}
.etape3-analyse__rule {
  width: 250px; height: 1px; background: var(--border); flex-shrink: 0;
}
.etape3-analyse__body {
  display: flex; gap: 10px; align-items: flex-start; max-width: 75ch;
}
.etape3-analyse__icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
}
.etape3-analyse__icon--pos { background: #dcfce7; color: #16a34a; }
.etape3-analyse__icon--neg { background: #fee2e2; color: #dc2626; }
.etape3-analyse__icon svg { width: 11px; height: 11px; }
.etape3-analyse__text {
  font-family: var(--display); font-size: clamp(12px, 0.88vw, 14px);
  line-height: 1.55; color: var(--fg2); margin: 0; width: calc(100% - 32px);
}

.etape3-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-bottom: 4px;
  margin-top: 20px;
}

.chip3 {
  background: white;
  border: 1px solid var(--border-strong);
  color: var(--fg1);
  padding: clamp(8px, 0.7vw, 11px) clamp(12px, 1vw, 18px);
  border-radius: 999px;
  font-family: var(--display);
  font-size: clamp(12px, 0.85vw, 14px);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 220ms var(--ease-snap);
  letter-spacing: -0.005em;
}
.chip3:hover { border-color: var(--sva-blue); color: var(--sva-blue); transform: translateY(-1px); }
.chip3.active {
  background: var(--fg1); border-color: var(--fg1); color: white;
  box-shadow: 0 4px 12px -4px rgba(20,21,26,0.3);
}
.chip3__lbl {
  max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.chip3__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-muted);
  font-size: 10px; font-weight: 600;
  color: var(--fg3);
  font-variant-numeric: tabular-nums;
}
.chip3.active .chip3__count {
  background: rgba(255,255,255,0.2); color: white;
}

.chip3--all {
  background: linear-gradient(120deg, #003EAB, #2e63d8, #003EAB);
  background-size: 200% 200%;
  animation: shimmerX 6s ease-in-out infinite;
  border-color: transparent;
  color: white;
  justify-content: center;
}
.chip3--all:hover {
  color: white;
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-2px);
  filter: brightness(1.12);
}
.chip3--all .chip3__count {
  background: rgba(255,255,255,0.22);
  color: white;
}

/* ─── All-enterprises panel ─── */
.all-ent-bd {
  position: fixed; inset: 0;
  background: rgba(20, 21, 26, 0.55);
  backdrop-filter: blur(4px);
  z-index: 45;
  display: flex; align-items: stretch; justify-content: flex-end;
  animation: bdIn 240ms ease;
}

.all-ent-panel {
  background: white;
  width: min(520px, 100vw);
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: -30px 0 60px -20px rgba(0,0,0,0.3);
}
@media (min-width: 1920px) {
  .all-ent-panel { width: min(640px, 100vw); }
}

.all-ent-panel__header {
  background: linear-gradient(135deg, #003EAB 0%, #002569 100%);
  color: white;
  padding: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 44px) clamp(20px, 2vw, 32px);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.all-ent-panel__header::before {
  content: "";
  position: absolute;
  top: -50%; right: -20%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 60%);
  border-radius: 50%;
  animation: drift 16s ease-in-out infinite;
}

.all-ent-panel__title {
  color: white;
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 6px 0 0;
  position: relative;
}
.all-ent-panel__subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
  position: relative;
}

.all-ent-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 30px;
}
.all-ent-panel__body::-webkit-scrollbar { width: 6px; }
.all-ent-panel__body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.all-ent-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: clamp(10px, 1vw, 14px) clamp(24px, 2.5vw, 40px);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 140ms;
}
.all-ent-row:last-child { border-bottom: none; }
.all-ent-row:hover { background: var(--bg-muted); }
.all-ent-row:hover .all-ent-row__name { color: var(--sva-blue); }

.all-ent-row__name {
  font-family: var(--display);
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 500;
  color: var(--fg1);
  transition: color 140ms;
}
.all-ent-row__prec {
  font-size: 11px;
  color: var(--fg3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.etape3-side__counter {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: auto;
  padding-top: clamp(14px, 1.4vw, 24px);
}
.etape3-side__counter .num {
  font-family: var(--display);
  font-size: clamp(64px, 8vw, 132px);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--sva-blue);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "lnum";
}
.etape3-side__counter .lbl {
  font-family: var(--display);
  font-size: clamp(13px, 1vw, 16px);
  color: var(--fg3);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ─── Bubble stage ─── */
.etape3-stage {
  position: relative;
  min-width: 0; min-height: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  align-self: stretch;
  height: 100%;
  overflow: hidden;
}

.bubbles-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  padding: 24px;
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
}
.bubbles-scroll::-webkit-scrollbar { display: none; }

.bubbles {
  position: relative;
  width: 100%;
  min-height: 100%;
}

.bubbles__halo {
  position: absolute;
  width: 60%; height: 60%;
  left: 20%; top: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,62,171,0.08), transparent 60%);
  filter: blur(40px);
  animation: drift 18s ease-in-out infinite;
  pointer-events: none;
}

.bubbles__empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center; padding: 48px;
  color: var(--fg3);
  font-family: var(--display);
}
.bubbles__empty-title {
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 500;
  color: var(--fg2);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.bubble {
  position: absolute;
  background: white;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  padding: 12px;
  transition: transform 380ms var(--ease-snap), box-shadow 380ms var(--ease), border-color 280ms ease;
  box-shadow: 0 6px 18px -8px rgba(20,21,26,0.12);
  animation: bubbleFloat 6s ease-in-out infinite;
  animation-delay: var(--bubble-delay, 0s);
  will-change: transform;
}
.bubble:hover {
  border-color: var(--sva-blue);
  box-shadow: 0 18px 40px -10px rgba(0,62,171,0.32), 0 0 0 6px rgba(0,62,171,0.06);
  transform: scale(1.08) !important;
  z-index: 5;
  animation-play-state: paused;
}
.bubble:focus-visible {
  outline: 2px solid var(--sva-blue);
  outline-offset: 4px;
}

.bubble__name {
  font-family: var(--display);
  font-weight: 500;
  color: var(--fg1);
  line-height: 1.18;
  max-width: 88%;
  word-break: break-word;
  letter-spacing: -0.015em;
  text-align: center;
}
.bubble:hover .bubble__name { color: var(--sva-blue); }

@keyframes bubbleFloat {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(2px, -3px); }
  50% { transform: translate(-2px, 2px); }
  75% { transform: translate(3px, 1px); }
}

/* ════════════════════════════════════════════════════════════
   EDITORIAL GRID — concept B for hub screen
   ════════════════════════════════════════════════════════════ */
.eg-screen {
  flex: 1; display: flex; flex-direction: column;
  padding: 0 clamp(20px, 3vw, 48px) clamp(16px, 2vw, 32px);
  min-height: 0; position: relative; overflow: hidden;
}

.eg-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.eg-bg__blob { position: absolute; border-radius: 50%; filter: blur(80px); animation: drift 18s ease-in-out infinite; }
.eg-bg__blob.b1 { background: rgba(0,62,171,0.14); width: 60vw; height: 60vw; top: -20%; left: -10%; }
.eg-bg__blob.b2 { background: rgba(152,154,165,0.20); width: 50vw; height: 50vw; bottom: -20%; right: -10%; animation-duration: 24s; animation-delay: -8s; }
.eg-bg__blob.b3 { background: rgba(77,123,214,0.10); width: 40vw; height: 40vw; top: 25%; right: 15%; animation-duration: 30s; animation-delay: -15s; }
.eg-screen > * { position: relative; z-index: 1; }

.eg-hero {
  display: flex; align-items: baseline; gap: clamp(20px, 3vw, 48px);
  padding: clamp(8px, 1vw, 20px) 0 clamp(12px, 1.5vw, 24px);
  flex-wrap: wrap;
}
.eg-hero__eyebrow {
  font-family: var(--display);
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
.eg-hero__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 100px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--fg1);
}
.eg-hero__accent {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(120deg, #003EAB 0%, #2e63d8 50%, #003EAB 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerX 6s ease-in-out infinite;
}

/* ── The 11-slab grid ── */
.eg-grid {
  flex: 1; min-height: 0;
  display: grid;
  /* Irregular grid: 3 cols normally, last two take full row */
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(8px, 0.8vw, 14px);
  padding-bottom: clamp(12px, 1.5vw, 24px);
}

/* Give the large-count slabs more real estate */
.eg-slab--xl { grid-column: span 2; grid-row: span 2; }
.eg-slab--lg { grid-column: span 2; }

.eg-slab {
  position: relative;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: clamp(14px, 1.4vw, 22px);
  text-align: left;
  transition: all 280ms var(--ease-snap);
  min-height: clamp(100px, 12vw, 160px);
}
.eg-slab:hover {
  border-color: var(--sva-blue);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px -12px rgba(0,62,171,0.22), 0 4px 12px -4px rgba(20,21,26,0.08);
  z-index: 2;
}
.eg-slab:hover .eg-slab__bg-num {
  color: var(--sva-blue);
  opacity: 0.12;
  transform: translate(10%, -10%) scale(1.05);
}
.eg-slab:hover .eg-slab__bar { box-shadow: 0 0 8px rgba(0,62,171,0.45); }

/* Big ghost number in background */
.eg-slab__bg-num {
  position: absolute;
  right: -4%; bottom: -10%;
  font-family: var(--display);
  font-size: clamp(80px, 14vw, 220px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--fg1);
  opacity: 0.05;
  pointer-events: none;
  transition: all 400ms var(--ease);
  user-select: none;
}

.eg-slab__content { position: relative; z-index: 1; }
.eg-slab__num {
  font-family: var(--display);
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(6px, 0.6vw, 10px);
}
.eg-slab__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg1);
  text-wrap: balance;
}
.eg-slab:hover .eg-slab__name { color: var(--sva-blue); }

.eg-slab__footer {
  display: flex; align-items: center; gap: clamp(8px, 0.8vw, 14px);
  position: relative; z-index: 1;
  margin-top: auto; padding-top: 12px;
}
.eg-slab__bar-track {
  flex: 1; height: 3px;
  background: var(--bg-inset);
  border-radius: 99px; overflow: hidden;
}
.eg-slab__bar {
  height: 100%;
  background: linear-gradient(90deg, #003EAB, #4d7bd6);
  border-radius: 99px;
  transition: width 800ms cubic-bezier(0.22,1,0.36,1), box-shadow 280ms ease;
}
.eg-slab__count {
  font-family: var(--display);
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 600;
  color: var(--fg3);
  letter-spacing: 0.04em;
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Transversaux bar at bottom */
.eg-transv {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 1.5vw, 24px);
  padding: clamp(12px, 1.2vw, 18px) clamp(16px, 1.8vw, 28px);
  background: linear-gradient(135deg, rgba(0,62,171,0.06), rgba(217,218,228,0.35));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  flex-wrap: wrap;
}
.eg-transv__copy { flex: 1 1 240px; }
.eg-transv__eyebrow {
  font-family: var(--display);
  font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
  margin-bottom: 4px;
}
.eg-transv__title {
  font-family: var(--display);
  font-size: clamp(14px, 1.1vw, 20px);
  font-weight: 500; letter-spacing: -0.01em; color: var(--fg1);
}
.eg-transv__btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Mobile ── */
@media (max-width: 1023px) {
  .eg-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .eg-slab--xl { grid-column: span 2; grid-row: span 1; }
  .eg-slab--lg { grid-column: span 2; }
  .eg-slab { min-height: 90px; }
  .eg-slab__bg-num { font-size: 80px; }
  .eg-hero { padding: 12px 0 10px; }
  .eg-transv { flex-direction: column; align-items: flex-start; }
  .eg-transv__btns .btn2 { flex: 1; justify-content: center; }
}
@media (max-width: 600px) {
  .eg-grid { grid-template-columns: 1fr; }
  .eg-slab--xl, .eg-slab--lg { grid-column: span 1; }
}
@media (min-width: 1920px) {
  .eg-slab__name { font-size: 32px; }
  .eg-slab { min-height: 180px; }
}
/* ════════════════════════════════════════════════════════════
   RIVER — concept C
   ════════════════════════════════════════════════════════════ */
.er-screen {
  flex: 1; display: flex; flex-direction: column;
  padding: clamp(8px, 1vw, 16px) clamp(20px, 3vw, 48px) clamp(16px, 2vw, 28px);
  min-height: 0; position: relative; overflow: hidden;
  gap: clamp(8px, 1vw, 16px);
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,62,171,0.13), transparent 60%),
    radial-gradient(ellipse 70% 70% at 90% 90%, rgba(152,154,165,0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 70% 30%, rgba(77,123,214,0.08), transparent 60%),
    linear-gradient(165deg, #fafbfc 0%, #f0f2f6 100%);
}
.er-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.er-bg__blob { position: absolute; border-radius: 50%; filter: blur(90px); animation: drift 22s ease-in-out infinite; }
.er-bg__blob.b1 { background: rgba(0,62,171,0.12); width: 65vw; height: 65vw; top: -30%; left: -18%; }
.er-bg__blob.b2 { background: rgba(152,154,165,0.16); width: 58vw; height: 58vw; bottom: -28%; right: -18%; animation-duration: 28s; animation-delay: -10s; }
.er-bg__blob.b3 { background: rgba(77,123,214,0.09); width: 42vw; height: 42vw; top: 28%; left: 32%; animation-duration: 36s; animation-delay: -18s; }
.er-screen > * { position: relative; z-index: 1; }

.er-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(8px, 1vw, 16px) 0 0;
  flex-wrap: wrap;
}
.er-head__eyebrow {
  font-family: var(--display); font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 6px;
}
.er-head__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 4.4vw, 80px); line-height: 0.92;
  letter-spacing: -0.04em; margin: 0; color: var(--fg1);
}
.er-head__title em {
  font-style: italic; font-weight: 700;
  background: linear-gradient(120deg, #003EAB, #2e63d8, #003EAB);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmerX 6s ease-in-out infinite;
  padding-right: 0.08em;
}
.er-head__title .silver {
  font-style: italic; font-weight: 700;
  background: linear-gradient(135deg, #2e3039 0%, #7a7d8c 28%, #4a4c58 52%, #9597a6 76%, #2e3039 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmerX 8s ease-in-out infinite;
  padding-right: 0.08em;
}
.er-head__count { display: flex; align-items: flex-end; gap: 12px; }
.er-head__count .num {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(40px, 5vw, 88px); line-height: 0.9;
  letter-spacing: -0.04em; color: var(--sva-blue);
  font-variant-numeric: tabular-nums;
}
.er-head__count sup { font-size: 0.45em; vertical-align: super; }
.er-head__count .lbl {
  font-family: var(--display); font-size: clamp(11px, 0.85vw, 14px);
  color: var(--fg3); letter-spacing: 0.04em; line-height: 1.2;
}

.er-stage { flex: 1; position: relative; min-height: 0; }
.er-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.er-node {
  position: absolute;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  width: clamp(80px, 8vw, 130px); z-index: 2;
}
.er-node__ring {
  position: absolute; width: clamp(62px, 6.2vw, 96px); aspect-ratio: 1 / 1;
  border-radius: 50%; border: 2px solid rgba(0,62,171,0.0);
  pointer-events: none; transition: all 320ms var(--ease-snap); top: 0;
}
.er-node__dot {
  width: clamp(62px, 6.2vw, 96px); aspect-ratio: 1 / 1; border-radius: 50%;
  background: white; border: 2px solid var(--border-strong);
  display: grid; place-items: center;
  color: var(--fg1);
  box-shadow: 0 8px 22px -8px rgba(20,21,26,0.18);
  transition: all 320ms var(--ease-snap); position: relative;
  animation: erPulse 4s ease-in-out infinite;
}
.er-node__icon {
  width: 60px; height: 60px;
  display: block; flex-shrink: 0;
  transition: filter 320ms var(--ease-snap);
}
.er-node:hover .er-node__icon, .er-node:focus-visible .er-node__icon {
  filter: brightness(0) invert(1);
}
.er-node__label {
  position: absolute; top: calc(100% + 8px);
  width: max-content; max-width: clamp(140px, 14vw, 200px);
  text-align: center; pointer-events: none;
}
.er-node__name {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(15px, 1.3vw, 22px); line-height: 1.15;
  letter-spacing: -0.015em; color: var(--fg1); text-wrap: balance;
}
.er-node__count {
  font-family: var(--display); font-size: clamp(10px, 0.75vw, 12px);
  color: var(--fg3); letter-spacing: 0.04em; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.er-node__count.empty { font-style: italic; }
.er-node:hover .er-node__dot, .er-node:focus-visible .er-node__dot {
  background: var(--sva-blue); border-color: var(--sva-blue); color: white;
  transform: scale(1.1); animation: none;
  box-shadow: 0 16px 36px -10px rgba(0,62,171,0.55), 0 0 0 6px rgba(0,62,171,0.10);
}
.er-node:hover .er-node__ring {
  border-color: rgba(0,62,171,0.25);
  transform: scale(1.5); opacity: 0;
}
.er-node:hover .er-node__name { color: var(--sva-blue); }
@keyframes erPulse {
  0%, 100% { box-shadow: 0 8px 22px -8px rgba(20,21,26,0.18), 0 0 0 0 rgba(0,62,171,0); }
  50% { box-shadow: 0 8px 22px -8px rgba(20,21,26,0.18), 0 0 0 8px rgba(0,62,171,0.06); }
}

.er-footer {
  border-top: 1px solid var(--border);
  padding-top: clamp(6px, 0.6vw, 10px);
  flex-shrink: 0;
}
.er-footer__text {
  font-family: var(--display); font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600;
}

.er-transv {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: clamp(10px, 1.2vw, 20px);
  padding: clamp(8px, 0.9vw, 25px) 0 clamp(8px, 0.9vw, 14px);
  flex-shrink: 0; z-index: 2;
}
.er-transv__label {
  font-family: var(--display); font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--fg3); font-weight: 600;
  padding-right: clamp(10px, 1.2vw, 20px);
  border-right: 1px solid var(--border);
  align-self: stretch; display: flex; align-items: center;
}
.er-transv__card {
  display: grid; grid-template-columns: auto 1fr;
  grid-template-rows: auto auto; column-gap: clamp(10px, 1vw, 14px);
  align-items: center;
  width: clamp(200px, 18vw, 270px);
  background: white; border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(9px, 0.9vw, 13px) clamp(12px, 1.2vw, 18px);
  cursor: pointer; text-align: left;
  transition: all 280ms var(--ease-snap);
  font-family: var(--display); position: relative;
}
.er-transv__card:hover {
  border-color: var(--sva-blue); transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(0,62,171,0.32);
}
.er-transv__icon {
  grid-row: span 2;
  width: clamp(44px, 4.2vw, 60px); height: clamp(44px, 4.2vw, 60px);
  border-radius: 50%;
  background: var(--bg-muted); display: grid; place-items: center;
  color: var(--sva-blue); transition: all 280ms var(--ease);
}
.er-transv__icon svg, .er-transv__icon img { width: clamp(22px, 2vw, 30px); height: clamp(22px, 2vw, 30px); }
.er-transv__card:hover .er-transv__icon {
  background: var(--sva-blue); color: white; transform: rotate(-8deg);
}
.er-transv__card:hover .er-transv__icon img { filter: brightness(0) invert(1); }
.er-transv__name {
  font-weight: 500; font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing: -0.01em; color: var(--fg1); line-height: 1.2;
}
.er-transv__hint {
  font-size: clamp(11px, 0.8vw, 13px); color: var(--fg3); letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 6px;
}
.er-transv__hint .arr { transition: transform 220ms var(--ease-snap); }
.er-transv__card:hover .er-transv__hint .arr { transform: translateX(3px); color: var(--sva-blue); }
.er-transv__card--wide { width: clamp(260px, 24vw, 380px); }
.er-transv__card--featured {
  display: flex; flex-direction: row; align-items: center;
  gap: clamp(10px, 1vw, 14px);
  margin-top: clamp(10px, 1.2vw, 18px);
  position: relative; top: 30px;
  width: clamp(200px, 22vw, 340px);
  background: linear-gradient(120deg, #003EAB, #2e63d8, #003EAB);
  background-size: 200% 200%;
  animation: shimmerX 6s ease-in-out infinite;
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 8px 24px -8px rgba(0,62,171,0.50);
}
.er-transv__card--featured .er-transv__name {
  color: white; font-size: clamp(15px, 1.25vw, 20px);
}
.er-transv__card--featured .er-transv__icon {
  background: rgba(255,255,255,0.18); color: white;
  width: 56px; height: 56px; flex-shrink: 0;
}
.er-transv__card--featured .er-transv__icon img {
  filter: brightness(0) invert(1); width: 40px; height: 40px;
}
.er-transv__card--featured:hover {
  background: white; border-color: var(--sva-blue);
  animation: none;
  box-shadow: 0 16px 36px -10px rgba(0,62,171,0.32);
}
.er-transv__card--featured:hover .er-transv__name { color: var(--sva-blue); }
.er-transv__card--featured:hover .er-transv__icon {
  background: rgba(0,62,171,0.08); color: var(--sva-blue); transform: rotate(-8deg);
}
.er-transv__card--featured:hover .er-transv__icon img { filter: none; }

@media (max-width: 1023px) {
  .er-stage { min-height: 200px; }
  .er-node { width: 64px; }
  .er-node__dot { width: 44px; }
  .er-node__icon { width: 24px; height: 24px; }
  .er-node__label { max-width: 110px; }
  .er-transv__icon { width: 40px; height: 40px; }
  .er-transv__icon svg, .er-transv__icon img { width: 20px; height: 20px; }
}
@media (max-width: 600px) {
  .er-transv { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .er-transv__label { border-right: 0; padding-right: 0; align-self: auto; width: 100%; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
  .er-transv__card { flex: 1; min-width: 160px; width: auto; }
}

@media (max-width: 1023px) {
  /* On mobile the grid stacks; let etape3 scroll so the counter
     is never clipped and the stage never overlaps side content. */
  .etape3 {
    padding: 0 16px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
  }
  .etape3-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 8px 0 0;
    flex: none;
    min-height: 0;
  }
  .etape3-side {
    overflow: visible;
    padding-right: 0;
    padding-bottom: 0;
    gap: 14px;
    /* counter uses normal flow on mobile (no fixed height to push against) */
  }
  .etape3-side__counter { margin-top: clamp(12px, 3vw, 24px); }
  .etape3-side__title { font-size: 36px; }
  .etape3-side__counter .num { font-size: 56px; }

  .etape3-stage {
    min-height: 60vh;
    height: 60vh;
    /* stage is always below side in the stacked layout */
    z-index: 1;
  }
}

@media (max-width: 600px) {
  .etape3-side__title { font-size: 30px; }
  .etape3-stage { min-height: 70vh; height: 70vh; z-index: 1; }
}