:root {
  /* === Hospital Premium Palette (Oscar / Cedars-Sinai style) === */
  /* Core brand: deep hospital navy */
  --navy-50: #f4f7fb;
  --navy-100: #e6edf5;
  --navy-200: #c7d5e6;
  --navy-300: #8fa8c7;
  --navy-500: #3c5a82;
  --navy-600: #2a4669;
  --navy-700: #1e3a5f;
  /* primary brand */
  --navy-800: #14284a;
  --navy-900: #0b1b38;

  /* Accent: soft clinical teal (kept as existing teal tokens for compat) */
  --teal-50: #ecfbfc;
  --teal-100: #d2f4f6;
  --teal-200: #a9e9ec;
  --teal-400: #3dc3c9;
  --teal-500: #0eb1b8;
  /* accent */
  --teal-600: #0b8f95;
  --teal-700: #0a7278;
  --teal-800: #085c61;
  --teal-900: #064649;

  /* Alert / care coral — for urgent flags */
  --coral-50: #fff1f0;
  --coral-100: #ffdad6;
  --coral-500: #ff6b6b;
  --coral-600: #e85a5a;
  --coral-700: #c44a4a;

  /* Re-map logo-era accents to clinical-safe equivalents */
  --magenta-500: #c44a7a;
  /* muted rose instead of hot pink */
  --magenta-600: #a83866;
  --magenta-700: #872a52;
  --violet-500: #5a6ea8;
  /* blue-violet instead of purple */
  --violet-600: #485a8e;
  --violet-700: #364674;
  --yellow-500: #f5b800;
  --yellow-600: #d99e00;
  --orange-500: #ff8a4a;
  --inf-violet: #7C3AED;

  /* Gradients — toned, clinical */
  --grad-logo: linear-gradient(135deg, #1e3a5f 0%, #0eb1b8 100%);
  --grad-warm: linear-gradient(135deg, #ff8a4a 0%, #ff6b6b 100%);
  --grad-cool: linear-gradient(135deg, #1e3a5f 0%, #0eb1b8 100%);

  /* Neutrals — warm off-white base (#FAFBFC) */
  --slate-50: #fafbfc;
  --slate-100: #f2f5f9;
  --slate-200: #e4eaf1;
  --slate-300: #c8d2de;
  --slate-400: #8a97a8;
  --slate-500: #5e6b7d;
  --slate-600: #445062;
  --slate-700: #2f3a4a;
  --slate-800: #1c2636;
  --slate-900: #0f172a;

  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  --green-50: #ecfdf5;
  --green-100: #d1fae5;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;

  --amber-50: #fffbeb;
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.12), 0 8px 20px rgba(15, 23, 42, 0.06);

  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --max-w: 1200px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--slate-800);
  background: var(--slate-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' on, 'cv11' on;
}

[dir="rtl"] body {
  font-family: var(--font-sans);
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(30px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(24px, 3.6vw, 42px);
  line-height: 1.1;
}

h3 {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.25;
}

h4 {
  font-size: 17px;
  line-height: 1.4;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ---------- Layout ---------- */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 720px) {
  .container {
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }
}

.section {
  padding: 96px 0;
}

@media (max-width: 720px) {
  .section {
    padding: 64px 0;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 48px 0;
  }
}

/* ---------- Top Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--slate-200);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 720px) {
  .nav-inner {
    padding: 0 20px;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -0.02em;
  cursor: pointer;
}

.brand-mark {
  width: 32px;
  height: 32px;
  background: url('assets/favicon.png') center/contain no-repeat;
  border-radius: 6px;
  flex-shrink: 0;
}

.brand-mark::before {
  content: none;
  position: absolute;
  inset: 6px;
  border: 1.5px solid var(--teal-400);
  border-radius: 2px;
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}

.brand-name {
  font-size: 16px;
}

.brand-name em {
  font-style: normal;
  color: var(--teal-600);
  font-weight: 700;
}

.brand-logo {
  height: 36px;
  width: auto;
  display: block;
}

footer .brand-logo {
  height: 40px;
}

.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}

.nav-links a {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--slate-600);
  font-size: 14.5px;
  font-weight: 500;
  transition: color 120ms, background 120ms;
}

.nav-links a:hover {
  color: var(--slate-900);
  background: var(--slate-100);
}

.nav-links a.active {
  color: var(--teal-700);
  background: var(--teal-50);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--slate-100);
  border-radius: 999px;
  padding: 3px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.lang-toggle button {
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--slate-500);
}

.lang-toggle button.on {
  background: #fff;
  color: var(--slate-900);
  box-shadow: var(--shadow-xs);
}

.menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--slate-100);
  color: var(--slate-700);
  transition: background 120ms;
  flex-shrink: 0;
}

.menu-btn:hover {
  background: var(--slate-200);
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
  }

  .nav-demo-btn {
    display: none !important;
  }

  .menu-btn {
    display: inline-flex;
  }
}

.mobile-nav {
  position: fixed;
  /* Cover the ENTIRE viewport (including behind the translucent global
     nav at top), so no page hero text can bleed through during scroll
     or when the page was scrolled before the menu was opened. The first
     menu item still renders below the nav thanks to padding-top. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  z-index: 49;
  display: flex;
  flex-direction: column;
  padding: 80px 20px 32px;
  gap: 2px;
  overflow-y: auto;
  border-top: 1px solid var(--slate-200);
}

/* Belt-and-braces: while the mobile menu is open, make the global nav
   bar fully opaque too. Without this, the frosted nav can re-blur the
   menu content scrolling under it on iOS. */
body.menu-open .nav {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mobile-nav a {
  display: block;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--slate-700);
  text-decoration: none;
  transition: background 100ms;
}

.mobile-nav a:hover {
  background: var(--slate-100);
}

.mobile-nav a.active {
  color: var(--teal-700);
  background: var(--teal-50);
}

.mobile-nav-bottom {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--slate-100);
}

.mobile-nav-bottom .btn {
  flex: 1;
  justify-content: center;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  transition: transform 120ms, box-shadow 120ms, background 120ms, color 120ms;
  white-space: nowrap;
}

.btn-primary {
  background: var(--slate-900);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 4px 12px rgba(15, 23, 42, 0.15);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 8px 22px rgba(15, 23, 42, 0.22);
}

.btn-accent {
  background: var(--teal-600);
  color: #fff;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
}

.btn-accent:hover {
  background: var(--teal-700);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
}

.btn-ghost:hover {
  border-color: var(--slate-300);
  background: var(--slate-50);
  color: var(--slate-900);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pc-arrow svg,
.back-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.persona-card .pc-arrow svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}

.persona-card .pc-photo {
  position: relative !important;
  overflow: hidden !important;
}

.persona-card .pc-photo>svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.persona-card .pc-photo>img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  filter: saturate(1.05);
}

.persona-card .pc-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 55%, rgba(15, 23, 42, 0.35) 100%);
  pointer-events: none;
}

[dir="rtl"] .btn svg {
  transform: scaleX(-1);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 88px 0 48px;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 85% -10%, var(--teal-50) 0%, transparent 55%),
    radial-gradient(900px 450px at -5% 20%, #f0f9ff 0%, transparent 60%);
  border-bottom: 1px solid var(--slate-100);
}

.hero>.container {
  position: relative;
  z-index: 2;
}

.hero-bg-anim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-anim svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-bg-anim .hba-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(14, 177, 184, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 177, 184, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 30%, transparent 85%);
  opacity: 0.7;
}

/* ECG line */
.hba-ecg {
  stroke: var(--teal-500);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: hba-ecg-draw 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  filter: drop-shadow(0 0 6px rgba(14, 177, 184, 0.45));
  opacity: 0.55;
}

@keyframes hba-ecg-draw {
  0% {
    stroke-dashoffset: 1400;
  }

  55% {
    stroke-dashoffset: 0;
  }

  75% {
    stroke-dashoffset: 0;
    opacity: 0.55;
  }

  100% {
    stroke-dashoffset: -1400;
    opacity: 0;
  }
}

.hba-ecg-dot {
  fill: var(--teal-500);
  r: 4;
  filter: drop-shadow(0 0 8px var(--teal-400));
  animation: hba-dot-move 5.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  opacity: 0;
}

@keyframes hba-dot-move {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  55% {
    opacity: 1;
  }

  65% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* Pulsing rings (like patient heart) */
.hba-ring {
  fill: none;
  stroke: var(--teal-400);
  stroke-width: 1.2;
  transform-origin: center;
  transform-box: fill-box;
  animation: hba-ring-pulse 3.4s ease-out infinite;
  opacity: 0;
}

.hba-ring.r2 {
  animation-delay: 1.1s;
  stroke: var(--magenta-500);
}

.hba-ring.r3 {
  animation-delay: 2.2s;
  stroke: var(--violet-500);
}

@keyframes hba-ring-pulse {
  0% {
    transform: scale(0.4);
    opacity: 0.55;
  }

  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* Floating medical glyphs */
.hba-glyph {
  opacity: 0;
  animation: hba-float 9s ease-in-out infinite;
}

.hba-glyph.g1 {
  animation-delay: 0.2s;
}

.hba-glyph.g2 {
  animation-delay: 2.4s;
}

.hba-glyph.g3 {
  animation-delay: 4.6s;
}

.hba-glyph.g4 {
  animation-delay: 6.8s;
}

@keyframes hba-float {

  0%,
  100% {
    opacity: 0;
    transform: translateY(12px);
  }

  15% {
    opacity: 0.35;
    transform: translateY(0);
  }

  85% {
    opacity: 0.35;
    transform: translateY(-6px);
  }
}

/* Data particles drifting */
.hba-particle {
  fill: var(--teal-500);
  opacity: 0;
  animation: hba-particle-drift 7s linear infinite;
}

@keyframes hba-particle-drift {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }

  20% {
    opacity: 0.6;
  }

  80% {
    opacity: 0.4;
  }

  100% {
    opacity: 0;
    transform: translate(260px, -140px);
  }
}

/* Patients persona: warm teal gradient background */
.hba-patients {
  background: linear-gradient(135deg, #eaf7f8 0%, #d6eef0 55%, #edf9fa 100%);
}

/* Soft second wave (patients only) */
.hba-ecg-soft {
  fill: none;
  stroke: var(--teal-400);
  stroke-width: 1.2;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: hba-ecg-draw 5.5s cubic-bezier(0.65, 0, 0.35, 1) 2.75s infinite;
  opacity: 0.28;
}

/* Floating appointment cards */
.hba-card {
  opacity: 0;
  animation: hba-card-rise 9s ease-in-out infinite;
}

.hbc-1 {
  animation-delay: 0s;
}

.hbc-2 {
  animation-delay: 3s;
}

.hbc-3 {
  animation-delay: 6s;
}

@keyframes hba-card-rise {

  0%,
  100% {
    opacity: 0;
    transform: translateY(18px);
  }

  12%,
  72% {
    opacity: 0.72;
    transform: translateY(0);
  }

  88% {
    opacity: 0;
    transform: translateY(-16px);
  }
}

/* Patient / family silhouettes */
.hba-person {
  opacity: 0;
  animation: hba-person-drift 11s ease-in-out infinite;
}

.hp-1 {
  animation-delay: 0.5s;
}

.hp-2 {
  animation-delay: 2.8s;
}

.hp-3 {
  animation-delay: 5.5s;
}

.hp-4 {
  animation-delay: 8.2s;
}

@keyframes hba-person-drift {

  0%,
  100% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }

  20%,
  78% {
    opacity: 0.38;
    transform: translateY(0) scale(1);
  }

  92% {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
}

/* Heartbeat pulse */
.hba-heartbeat {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0.2;
  animation: hba-heart-throb 2.6s ease-in-out infinite;
}

.hh-1 {
  animation-delay: 0s;
}

.hh-2 {
  animation-delay: 1.3s;
}

@keyframes hba-heart-throb {
  0% {
    opacity: 0.15;
    transform: scale(0.85);
  }

  20% {
    opacity: 0.55;
    transform: scale(1.28);
  }

  35% {
    opacity: 0.38;
    transform: scale(0.95);
  }

  55% {
    opacity: 0.5;
    transform: scale(1.12);
  }

  100% {
    opacity: 0.15;
    transform: scale(0.85);
  }
}

@media (prefers-reduced-motion: reduce) {

  .hba-ecg,
  .hba-ecg-dot,
  .hba-ring,
  .hba-glyph,
  .hba-particle,
  .hba-ecg-soft,
  .hba-card,
  .hba-person,
  .hba-heartbeat {
    animation: none;
    opacity: 0.3;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.hero-grid>* {
  min-width: 0;
}

@media (max-width: 640px) {
  .hero-grid>div:last-child {
    display: none;
  }

  .hero {
    padding: 56px 0 36px;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--teal-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-radius: 999px;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  background: var(--teal-500);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(20, 184, 166, 0);
  }
}

.hero h1 {
  margin-top: 24px;
}

.hero h1 .accent {
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .lede {
  margin-top: 20px;
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--slate-600);
  line-height: 1.55;
  max-width: 560px;
}

.hero-ctas {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-meta {
  margin-top: 32px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--slate-500);
  font-size: 13px;
}

.hero-meta strong {
  color: var(--slate-800);
  font-weight: 600;
}

.hero-meta .sep {
  width: 4px;
  height: 4px;
  background: var(--slate-300);
  border-radius: 50%;
}

/* ---------- Cockpit mockup (hero + persona) ---------- */

.cockpit {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border-radius: 18px;
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  font-size: 12px;
}

.cockpit-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}

.cockpit-chrome .dots {
  display: flex;
  gap: 6px;
}

.cockpit-chrome .dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--slate-300);
}

.cockpit-chrome .url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-500);
  text-align: center;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  margin: 0 40px;
}

.cockpit-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  min-height: 420px;
}

@media (max-width: 860px) {
  .cockpit-body {
    grid-template-columns: 130px 1fr;
    min-height: 360px;
  }
}

@media (max-width: 720px) {
  .cockpit-body {
    grid-template-columns: 1fr;
    min-height: 280px;
  }

  .ck-side {
    display: none;
  }

  .cockpit-chrome .url {
    margin: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.ck-side {
  background: #fff;
  border-right: 1px solid var(--slate-200);
  padding: 16px 10px;
  font-size: 12px;
}

.ck-side-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-top: 12px;
}

.ck-side-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--slate-600);
  cursor: default;
}

.ck-side-item.active {
  background: var(--teal-50);
  color: var(--teal-800);
  font-weight: 600;
}

.ck-side-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ck-side-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--slate-300);
  flex-shrink: 0;
}

.ck-side-dot.urgent {
  background: var(--red-500);
}

.ck-side-dot.warn {
  background: var(--amber-500);
}

.ck-side-dot.ok {
  background: var(--green-500);
}

.ck-main {
  padding: 16px;
  background: #fcfcfd;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ck-zone {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  padding: 12px 14px;
}

.ck-zone-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--slate-700);
  font-size: 12px;
  margin-bottom: 8px;
}

.ck-zone-title .badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--red-50);
  color: var(--red-700);
  font-weight: 600;
}

.ck-zone-title .badge.warn {
  background: var(--amber-50);
  color: var(--amber-600);
}

.ck-zone-title .badge.ok {
  background: var(--green-50);
  color: var(--green-700);
}

.ck-patient {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px dashed var(--slate-100);
  font-size: 11.5px;
}

.ck-patient:first-of-type {
  border-top: none;
  padding-top: 0;
}

.ck-patient .name {
  font-weight: 600;
  color: var(--slate-800);
}

.ck-patient .meta {
  font-size: 10.5px;
  color: var(--slate-500);
}

.ck-patient .vitals {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-700);
}

.ck-patient .news {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.ck-patient .news.high {
  background: var(--red-50);
  color: var(--red-700);
}

.ck-patient .news.mid {
  background: var(--amber-50);
  color: var(--amber-600);
}

.ck-patient .news.low {
  background: var(--green-50);
  color: var(--green-700);
}

/* mini sparkline */
.spark {
  width: 48px;
  height: 16px;
  display: block;
}

.ck-floating-alert {
  position: absolute;
  right: -16px;
  top: 100px;
  background: #fff;
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-lg);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 260px;
  font-size: 12px;
  animation: float 6s ease-in-out infinite;
}

.ck-floating-alert .alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-500);
  margin-top: 5px;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

.ck-floating-alert strong {
  color: var(--slate-900);
  font-weight: 700;
  font-size: 12.5px;
  display: block;
  margin-bottom: 2px;
}

.ck-floating-alert span {
  color: var(--slate-500);
  font-size: 11.5px;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

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

/* ---------- Proof strip ---------- */

.proof {
  border-top: 1px solid var(--slate-100);
  border-bottom: 1px solid var(--slate-100);
  background: var(--slate-50);
  padding: 32px 0;
}

.proof-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.proof-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.proof-logos {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
}

.proof-logo {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--slate-400);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.proof-logo-img {
  height: 44px;
  width: auto;
  display: block;
  opacity: 0.9;
  transition: opacity 200ms, transform 300ms;
}

.proof-logo-img:hover {
  opacity: 1;
}

/* ===== Variant A: Halo pulse ===== */
.proof[data-anim="halo"] {
  --halo-color: 14, 177, 184;
}

.proof[data-anim="halo"] .proof-logo-img {
  position: relative;
  z-index: 1;
  animation: halo-scale 2.6s ease-in-out infinite;
}

.proof[data-anim="halo"] .proof-logos-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 32px;
}

.proof[data-anim="halo"] .proof-logos-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: radial-gradient(ellipse at center,
      rgba(var(--halo-color), 0.28) 0%,
      rgba(var(--halo-color), 0.08) 40%,
      transparent 70%);
  animation: halo-pulse 2.6s ease-in-out infinite;
  z-index: 0;
}

@keyframes halo-pulse {

  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

@keyframes halo-scale {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

/* ===== Variant B: Rotating conic glow ===== */
.proof[data-anim="conic"] .proof-logos-wrap {
  position: relative;
  display: inline-flex;
  padding: 14px 24px;
  border-radius: 16px;
  background: #fff;
}

.proof[data-anim="conic"] .proof-logos-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: conic-gradient(from 0deg,
      #ffcf30, #ff51ae, #b20fb9, #0eb1b8, #ffcf30);
  z-index: -1;
  animation: conic-spin 4s linear infinite;
  filter: blur(6px);
  opacity: 0.7;
}

.proof[data-anim="conic"] .proof-logos-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: #fff;
  z-index: -1;
}

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

/* ===== Variant C: Shimmer sweep ===== */
.proof[data-anim="shimmer"] .proof-logo-img {
  position: relative;
  mask-image: linear-gradient(100deg,
      rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 1) 100%);
  -webkit-mask-image: linear-gradient(100deg,
      rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 1) 100%);
  mask-size: 200% 100%;
  -webkit-mask-size: 200% 100%;
  animation: shimmer-sweep 2.8s ease-in-out infinite;
}

@keyframes shimmer-sweep {
  0% {
    mask-position: 150% 0;
    -webkit-mask-position: 150% 0;
  }

  100% {
    mask-position: -50% 0;
    -webkit-mask-position: -50% 0;
  }
}

/* ---------- Persona grid (home) ---------- */

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.persona-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 28px 24px 24px;
  cursor: pointer;
  transition: transform 180ms, box-shadow 180ms, border-color 180ms;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

.persona-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--teal-50) 100%);
  opacity: 0;
  transition: opacity 220ms;
  z-index: -1;
}

.persona-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--teal-200);
}

.persona-card:hover::before {
  opacity: 1;
}

.persona-card .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.persona-card h3 {
  margin-top: 12px;
  font-size: 22px;
}

.persona-card p {
  margin-top: 8px;
  color: var(--slate-600);
  font-size: 14.5px;
}

.persona-card .pc-tags {
  margin-top: 20px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.persona-card .pc-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--slate-500);
  padding: 3px 8px;
  background: var(--slate-100);
  border-radius: 4px;
}

.persona-card .pc-arrow {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal-700);
}

.persona-card .pc-arrow svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  transition: transform 180ms;
}

.persona-card:hover .pc-arrow svg {
  transform: translateX(4px);
}

[dir="rtl"] .persona-card .pc-arrow svg {
  transform: scaleX(-1);
}

[dir="rtl"] .persona-card:hover .pc-arrow svg {
  transform: translateX(-4px) scaleX(-1);
}

/* Persona card photo */
.persona-card .pc-photo {
  margin: 20px -24px 0;
  height: 140px;
  background: var(--slate-100);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--slate-100);
}

.persona-card .pc-photo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.persona-card .pc-photo .pc-photo-label {
  position: absolute;
  left: 14px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #fff;
  background: rgba(15, 23, 42, 0.7);
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[dir="rtl"] .persona-card .pc-photo .pc-photo-label {
  left: auto;
  right: 14px;
}

.persona-card .status-pill {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-weight: 600;
}

.persona-card .status-pill.q3 {
  background: var(--amber-50);
  color: var(--amber-600);
}

.persona-card .status-pill.q4 {
  background: #eef2ff;
  color: #4338ca;
}

[dir="rtl"] .persona-card .status-pill {
  right: auto;
  left: 16px;
}

/* ---------- Section heading ---------- */

.section-head {
  max-width: 680px;
  margin-bottom: 24px;
}

.section-head .eyebrow {
  margin-bottom: 16px;
}

.section-head p {
  color: var(--slate-600);
  font-size: 17px;
  margin-top: 10px;
}

/* ---------- Stats ---------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border-top: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  margin-top: 40px;
}

.stat {
  padding: 32px 24px;
  border-right: 1px solid var(--slate-200);
}

.stat:last-child {
  border-right: none;
}

[dir="rtl"] .stat {
  border-right: none;
  border-left: 1px solid var(--slate-200);
}

[dir="rtl"] .stat:last-child {
  border-left: none;
}

.stat-num {
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.stat-num .unit {
  color: var(--teal-600);
  font-size: 0.7em;
  margin-left: 3px;
}

.stat-label {
  margin-top: 10px;
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.45;
}

/* ---------- Avant / Apres cards ---------- */

.ba-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

.ba-row {
  display: grid;
  grid-template-columns: 40px 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.ba-row.in {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 820px) {
  .ba-row {
    grid-template-columns: 1fr;
  }

  .ba-number {
    display: none;
  }
}

.ba-number {
  font-family: var(--font-mono);
  color: var(--slate-300);
  font-size: 14px;
  padding-top: 22px;
  font-weight: 500;
}

.ba-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.ba-card .ba-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
}

.ba-card.avant {
  background: #fff;
}

.ba-card.avant .ba-label {
  background: var(--red-50);
  color: var(--red-700);
}

.ba-card.apres {
  background: linear-gradient(180deg, #fff 0%, var(--teal-50) 140%);
  border-color: var(--teal-200);
}

.ba-card.apres .ba-label {
  background: var(--teal-50);
  color: var(--teal-700);
}

.ba-card .ba-text {
  color: var(--slate-700);
  font-size: 15px;
  line-height: 1.55;
}

.ba-card.apres .ba-text {
  color: var(--slate-800);
}

.ba-arrow {
  position: absolute;
  top: 50%;
  left: -14px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: var(--teal-600);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
  border: 3px solid #fff;
}

[dir="rtl"] .ba-arrow {
  left: auto;
  right: -14px;
  transform: translateY(-50%) scaleX(-1);
}

@media (max-width: 820px) {
  .ba-arrow {
    display: none;
  }
}

/* ---------- Avant/Après icons ---------- */
.ba-row {
  position: relative;
}

.ba-icon {
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translate(-100%, -50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ecfeff, #fff);
  border: 1px solid var(--teal-100);
  border-radius: 12px;
  color: var(--teal-600);
  box-shadow: 0 1px 3px rgba(14, 177, 184, 0.08);
  flex-shrink: 0;
  z-index: 2;
}

.ba-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.ba-row.in .ba-icon {
  animation: baIconPop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes baIconPop {
  0% {
    opacity: 0;
    transform: translate(-100%, -50%) scale(0.6);
  }

  100% {
    opacity: 1;
    transform: translate(-100%, -50%) scale(1);
  }
}

@media (max-width: 980px) {
  .ba-icon {
    position: static;
    transform: none;
    margin-bottom: 10px;
    width: 38px;
    height: 38px;
  }

  .ba-row.in .ba-icon {
    animation: none;
  }
}

/* ---------- Pain points table ---------- */

.pp-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--slate-200);
}

.pp-row {
  display: grid;
  grid-template-columns: 60px 1fr 1.15fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--slate-200);
  align-items: start;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms, transform 500ms;
}

.pp-row.in {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 820px) {
  .pp-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.pp-idx {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--slate-400);
  padding-top: 4px;
}

.pp-problem {
  color: var(--slate-800);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.45;
}

.pp-problem .prob-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--red-600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 6px;
}

.pp-answer {
  color: var(--slate-700);
  font-size: 15.5px;
  line-height: 1.55;
}

.pp-answer .answ-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--teal-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 6px;
}

/* ---------- Testimonial ---------- */

.testimonial {
  background: var(--slate-900);
  color: #fff;
  border-radius: 20px;
  padding: clamp(32px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}

.testimonial::before {
  content: '“';
  position: absolute;
  top: -20px;
  left: 24px;
  font-size: 200px;
  font-family: Georgia, serif;
  color: var(--teal-800);
  opacity: 0.6;
  line-height: 1;
}

.testimonial blockquote {
  position: relative;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
  max-width: 820px;
}

.testimonial blockquote em {
  font-style: normal;
  color: var(--teal-300);
  font-weight: 600;
}

.testimonial cite {
  display: block;
  font-style: normal;
  margin-top: 28px;
  color: var(--slate-400);
  font-size: 14px;
  font-weight: 500;
}

.testimonial cite strong {
  color: #fff;
  font-weight: 600;
}

.testimonial .test-avatar {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: var(--teal-700);
  color: #fff;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  margin-right: 12px;
  font-weight: 700;
  font-size: 14px;
  vertical-align: middle;
}

[dir="rtl"] .testimonial .test-avatar {
  margin-right: 0;
  margin-left: 12px;
}

/* ---------- Tech badges ---------- */

.tech-row {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tech-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 8px;
}

.tech-badge {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--slate-200);
  color: var(--slate-700);
  font-weight: 500;
}

/* ---------- CTA block ---------- */

.cta-block {
  background: linear-gradient(135deg, var(--slate-900) 0%, var(--violet-700) 55%, var(--teal-800) 100%);
  color: #fff;
  border-radius: 24px;
  padding: clamp(40px, 5vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(45, 212, 191, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(20, 184, 166, 0.2) 0%, transparent 60%);
}

.cta-block>* {
  position: relative;
}

.cta-block h2 {
  color: #fff;
  max-width: 680px;
  margin: 0 auto;
}

.cta-block p {
  color: var(--slate-300);
  margin: 16px auto 0;
  max-width: 540px;
}

.cta-block .btn-accent {
  background: #fff;
  color: var(--slate-900);
  margin-top: 32px;
}

.cta-block .btn-accent:hover {
  background: var(--teal-50);
  color: var(--teal-800);
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--slate-200);
  padding: 48px 0 32px;
  color: var(--slate-500);
  font-size: 13.5px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 40px;
}

@media (max-width: 820px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Footer columns — accordion on mobile, always open on desktop */
.footer-col { border: 0; }
.footer-col > summary {
  list-style: none;
  cursor: default;
  display: block;
}
.footer-col > summary::-webkit-details-marker { display: none; }
.footer-col > summary::marker { content: ''; }
.footer-col > summary h5 { margin: 0 0 16px; }

/* Mobile accordion behavior — open/closed state controlled by JS via [open] */
@media (max-width: 480px) {
  .footer-col {
    border-bottom: 1px solid var(--slate-100);
  }
  .footer-col > summary {
    cursor: pointer;
    padding: 14px 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .footer-col > summary h5 {
    margin: 0;
    padding-right: 28px;
  }
  .footer-col > summary::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 400;
    color: var(--slate-500);
    transition: transform 0.2s ease;
    line-height: 1;
  }
  .footer-col[open] > summary::after {
    content: '−';
  }
  .footer-col > a {
    padding: 6px 0 6px 4px;
  }
  .footer-col[open] {
    padding-bottom: 12px;
  }
}

.footer h5 {
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-900);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
}

.footer a {
  display: block;
  padding: 4px 0;
  color: var(--slate-600);
}

.footer a:hover {
  color: var(--slate-900);
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--slate-100);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Persona page header ---------- */

.persona-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 7vw, 72px) 0 clamp(36px, 6vw, 64px);
  background: linear-gradient(180deg, #fff 0%, var(--slate-50) 100%);
  border-bottom: 1px solid var(--slate-200);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-500);
  margin-bottom: 24px;
}

.back-link:hover {
  color: var(--teal-700);
}

.back-link svg {
  width: 14px;
  height: 14px;
}

[dir="rtl"] .back-link svg {
  transform: scaleX(-1);
}

.persona-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}

@media (max-width: 980px) {
  .persona-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.persona-hero h1 {
  font-size: clamp(32px, 4.4vw, 52px);
}

.persona-hero .lede {
  margin-top: 20px;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--slate-600);
}

.persona-hero .story {
  margin-top: 28px;
  padding: 20px 24px;
  border-left: 3px solid var(--teal-500);
  background: #fff;
  border-radius: 0 10px 10px 0;
  box-shadow: var(--shadow-sm);
  color: var(--slate-700);
  font-size: 15px;
  line-height: 1.6;
}

[dir="rtl"] .persona-hero .story {
  border-left: none;
  border-right: 3px solid var(--teal-500);
  border-radius: 10px 0 0 10px;
}

/* ---------- Scroll-indicator (persona section progress) ---------- */
.progress-bar {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--slate-100);
  z-index: 49;
}

.progress-bar .bar {
  height: 100%;
  background: var(--teal-600);
  width: 0%;
  transition: width 80ms linear;
}

/* ---------- Tweaks panel ---------- */
.tweaks-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 300px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-xl);
  z-index: 100;
  font-size: 13px;
}

[dir="rtl"] .tweaks-panel {
  right: auto;
  left: 24px;
}

.tweaks-panel h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-900);
}

.tweaks-panel .tweak-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  display: block;
}

.tweaks-panel .variant-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tweaks-panel .variant-options button {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--slate-700);
}

[dir="rtl"] .tweaks-panel .variant-options button {
  text-align: right;
}

.tweaks-panel .variant-options button.on {
  border-color: var(--teal-600);
  background: var(--teal-50);
  color: var(--teal-800);
  font-weight: 600;
}

.tweaks-panel .variant-options button strong {
  display: block;
  font-size: 11px;
  color: var(--slate-400);
  font-weight: 500;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tweaks-panel button.on strong {
  color: var(--teal-600);
}

/* ---------- Utility ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.divider {
  height: 1px;
  background: var(--slate-200);
  margin: 0;
  border: none;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Persona tabs (on persona page) ---------- */
.persona-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  background: var(--slate-100);
  padding: 4px;
  border-radius: 10px;
  margin-top: 16px;
  width: fit-content;
  max-width: 100%;
}

.persona-tabs button {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--slate-600);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.persona-tabs button.on {
  background: #fff;
  color: var(--slate-900);
  box-shadow: var(--shadow-xs);
  font-weight: 600;
}

/* Subtle in-page anchor offset */
section[id] {
  scroll-margin-top: 96px;
}

/* ---------- RTL general fixes ---------- */
[dir="rtl"] .hero-grid,
[dir="rtl"] .persona-hero-grid,
[dir="rtl"] .footer-inner {
  direction: rtl;
}

[dir="rtl"] .ck-side {
  border-right: none;
  border-left: 1px solid var(--slate-200);
}

/* ---------- Live App section ---------- */
.live-app-section {
  background: linear-gradient(180deg, #fff 0%, var(--slate-50) 100%);
  border-top: 1px solid var(--slate-100);
  border-bottom: 1px solid var(--slate-100);
}

.live-app-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 32px 0 24px;
}

.live-app-controls .seg {
  display: inline-flex;
  background: var(--slate-100);
  padding: 4px;
  border-radius: 10px;
  gap: 2px;
}

.live-app-controls .seg-btn {
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-600);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 150ms;
}

.live-app-controls .seg-btn.is-active {
  background: #fff;
  color: var(--slate-900);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.live-app-controls .seg-btn:hover:not(.is-active) {
  color: var(--slate-800);
}

.live-app-controls .seg-variant .seg-btn.is-active {
  color: var(--teal-700);
}

.live-app-open {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-700);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--teal-200);
  border-radius: 8px;
  background: #fff;
  transition: all 150ms;
}

.live-app-open:hover {
  background: var(--teal-50);
}

[dir="rtl"] .live-app-open {
  margin-left: 0;
  margin-right: auto;
}

.live-app-frame {
  position: relative;
}

.live-app-frame.is-desktop {
  max-width: 1100px;
  margin: 0 auto;
}

.live-app-frame.is-mobile {
  max-width: 380px;
  margin: 0 auto;
}

.desktop-bezel {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.desktop-bezel .desktop-chrome {
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.desktop-bezel .desktop-chrome .dots {
  display: flex;
  gap: 6px;
}

.desktop-bezel .desktop-chrome .dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--slate-300);
}

.desktop-bezel .desktop-chrome .dots span:nth-child(1) {
  background: #ff6b6b;
}

.desktop-bezel .desktop-chrome .dots span:nth-child(2) {
  background: #ffbe4b;
}

.desktop-bezel .desktop-chrome .dots span:nth-child(3) {
  background: #4bcf5f;
}

.desktop-bezel .desktop-chrome .url {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate-500);
  background: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--slate-200);
  max-width: 360px;
  margin: 0 auto;
}

.desktop-bezel iframe {
  width: 100%;
  height: 720px;
  border: 0;
  display: block;
}

.phone-bezel {
  background: #0f172a;
  border-radius: 44px;
  padding: 12px;
  box-shadow: var(--shadow-xl);
  position: relative;
}

.phone-bezel::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 22px;
  background: #0f172a;
  border-radius: 12px;
  z-index: 2;
}

.phone-bezel iframe {
  width: 100%;
  height: 620px;
  border: 0;
  display: block;
  border-radius: 32px;
  background: #fff;
}

@media (max-width: 720px) {
  .desktop-bezel iframe {
    height: 540px;
  }

  .phone-bezel iframe {
    height: 600px;
  }
}

@media (max-width: 480px) {
  .desktop-bezel iframe {
    height: 380px;
  }

  .phone-bezel iframe {
    height: 480px;
  }
}

/* ---------- Madinat tech section ---------- */
.madinat-tech {
  padding: 56px 0;
  color: #e2e8f0;
}

.madinat-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(14, 177, 184, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 177, 184, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
}

.madinat-bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(14, 177, 184, 0.18), transparent 60%),
    radial-gradient(500px 260px at 85% 80%, rgba(178, 15, 185, 0.16), transparent 60%),
    radial-gradient(400px 220px at 60% 40%, rgba(255, 207, 48, 0.08), transparent 60%);
}

.madinat-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.madinat-head {
  margin-bottom: 24px;
}

.madinat-status-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 11px;
  border: 1px solid rgba(14, 177, 184, 0.3);
  background: rgba(14, 177, 184, 0.06);
  border-radius: 999px;
  color: #a5f3fc;
  margin-bottom: 14px;
  font-size: 10px;
}

.madinat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3dd;
  box-shadow: 0 0 12px #22d3dd;
  animation: pulse 1.6s infinite;
}

.madinat-uptime {
  color: #64748b;
}

.madinat-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.madinat-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.madinat-eyebrow-meta {
  color: #475569;
}

.madinat-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}

.madinat-accent {
  background: linear-gradient(135deg, #22d3dd, #b20fb9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-mono);
  font-weight: 500;
}

.madinat-lede {
  color: #94a3b8;
  max-width: 520px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.madinat-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms;
  background: rgba(255, 255, 255, 0.02);
}

.madinat-cta:hover {
  border-color: #22d3dd;
  color: #22d3dd;
}

.madinat-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}

@media (max-width: 960px) {
  .madinat-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .madinat-metrics {
    grid-template-columns: 1fr;
  }
}

.madinat-metric {
  position: relative;
  padding: 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(148, 163, 184, 0.15);
  overflow: hidden;
  animation: fadeUp 600ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.madinat-metric::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.6;
}

.metric-teal {
  color: #22d3dd;
}

.metric-magenta {
  color: #ff51ae;
}

.metric-yellow {
  color: #ffcf30;
}

.metric-violet {
  color: #c084fc;
}

.mm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mm-id {
  color: #64748b;
}

.mm-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: pulse 1.8s infinite;
}

.mm-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: #f8fafc;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.mm-value .stat-num {
  color: #f8fafc !important;
  font-size: 26px !important;
}

.mm-prefix {
  color: currentColor;
  font-size: 22px;
}

.mm-unit {
  color: currentColor;
  font-size: 13px;
  font-weight: 500;
  margin-left: 2px;
}

.mm-label {
  color: #cbd5e1;
  font-size: 11px;
  margin-top: 8px;
  line-height: 1.35;
  text-wrap: pretty;
  min-height: 28px;
}

.mm-trend {
  color: currentColor;
  opacity: 0.8;
  margin-top: 4px;
  font-size: 10px;
}

.mm-spark {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 18px;
  color: currentColor;
  opacity: 0.35;
}

.madinat-readout {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(148, 163, 184, 0.12);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}

@media (max-width: 860px) {
  .madinat-readout {
    grid-template-columns: 1fr;
  }
}

.mr-lbl {
  display: block;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.mr-timeline {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  position: relative;
}

.mr-timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  height: 1px;
  background: linear-gradient(90deg, #22d3dd 0%, #22d3dd 100%, rgba(148, 163, 184, 0.2) 100%);
}

.mr-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.mr-node {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0b1120;
  border: 2px solid #22d3dd;
  box-shadow: 0 0 10px rgba(34, 211, 221, 0.5);
}

.mr-lab {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mr-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.mr-stack span:first-child {
  color: #22d3dd;
}

/* ---------- Madinat editorial minimal ---------- */
.madinat-edit {
  padding: 80px 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.madinat-edit-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.madinat-edit-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(14, 177, 184, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 177, 184, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 90%);
}

.madinat-edit-bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.me-ecg {
  fill: none;
  stroke: var(--teal-500);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: me-ecg-draw 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  filter: drop-shadow(0 0 5px rgba(14, 177, 184, 0.35));
  opacity: 0.5;
}

@keyframes me-ecg-draw {
  0% {
    stroke-dashoffset: 1600;
    opacity: 0.5;
  }

  55% {
    stroke-dashoffset: 0;
    opacity: 0.5;
  }

  75% {
    stroke-dashoffset: 0;
    opacity: 0.5;
  }

  100% {
    stroke-dashoffset: -1600;
    opacity: 0;
  }
}

.me-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  cx: 0;
  cy: 0;
  stroke: rgba(14, 177, 184, 0.4);
  transform-origin: center;
  transform-box: fill-box;
  animation: me-ring-pulse 3.2s ease-out infinite;
  opacity: 0;
}

@keyframes me-ring-pulse {
  0% {
    transform: scale(0.4);
    opacity: 0.5;
  }

  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

.me-glyph {
  opacity: 0;
  animation: me-glyph-float 8s ease-in-out infinite;
}

.me-glyph.g1 {
  animation-delay: 0.3s;
}

.me-glyph.g2 {
  animation-delay: 2.7s;
}

.me-glyph.g3 {
  animation-delay: 5.1s;
}

@keyframes me-glyph-float {

  0%,
  100% {
    opacity: 0;
    transform: translateY(8px);
  }

  15% {
    opacity: 0.3;
    transform: translateY(0);
  }

  85% {
    opacity: 0.3;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .me-ecg,
  .me-ring,
  .me-glyph {
    animation: none;
    opacity: 0.25;
  }
}

.me-head {
  max-width: 640px;
  margin-bottom: 56px;
}

.me-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 18px;
}

.me-title {
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--slate-900);
  line-height: 1;
  margin: 0;
}

.me-lede {
  color: var(--slate-600);
  font-size: 16px;
  line-height: 1.6;
  margin-top: 18px;
  max-width: 540px;
}

.me-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--slate-200);
  padding: 44px 0;
}

@media (max-width: 820px) {
  .me-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
  }
}

@media (max-width: 480px) {
  .me-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.me-cell {
  padding: 0 28px;
  border-left: 1px solid var(--slate-200);
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.me-cell:first-child {
  border-left: none;
  padding-left: 0;
}

@media (max-width: 820px) {
  .me-cell:nth-child(3) {
    border-left: none;
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  .me-cell {
    border-left: none !important;
    padding-left: 0;
  }
}

.me-val {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--slate-900);
  letter-spacing: -0.035em;
}

.me-val .stat-num {
  color: var(--slate-900) !important;
  font-size: 48px !important;
}

.me-prefix {
  color: var(--teal-600);
  font-size: 40px;
  font-weight: 600;
}

.me-unit {
  color: var(--teal-600);
  font-size: 16px;
  font-weight: 500;
  margin-left: 4px;
  letter-spacing: 0;
}

.me-label {
  color: var(--slate-500);
  font-size: 13px;
  margin-top: 14px;
  line-height: 1.45;
  text-wrap: pretty;
}

.me-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--slate-900);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--slate-300);
  padding-bottom: 2px;
  transition: all 180ms;
  cursor: pointer;
  margin-top: 8px;
}

.me-link:hover {
  color: var(--teal-700);
  border-bottom-color: var(--teal-500);
}

/* ---------- Madinat simple tech section ---------- */
.madinat-simple {
  padding: 56px 0;
  background: #fff;
  border-top: 1px solid var(--slate-100);
  border-bottom: 1px solid var(--slate-100);
  position: relative;
  overflow: hidden;
}

.madinat-simple::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(14, 177, 184, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 177, 184, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 20%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 20%, transparent 90%);
  pointer-events: none;
}

.madinat-simple>.container {
  position: relative;
  z-index: 1;
}

.ms-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.ms-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.ms-head-left {
  max-width: 620px;
}

.ms-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-700);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.ms-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(14, 177, 184, 0.18);
  animation: pulse 1.8s infinite;
}

.ms-title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}

.ms-lede {
  color: var(--slate-600);
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.ms-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  color: var(--slate-900);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms;
  background: #fff;
  white-space: nowrap;
}

.ms-cta:hover {
  border-color: var(--teal-500);
  color: var(--teal-700);
}

.ms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

@media (max-width: 860px) {
  .ms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ms-grid {
    grid-template-columns: 1fr;
  }
}

.ms-cell {
  padding: 20px 22px;
  border-right: 1px solid var(--slate-200);
  position: relative;
  animation: msFadeIn 500ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.ms-cell:last-child {
  border-right: none;
}

@media (max-width: 860px) {
  .ms-cell:nth-child(2) {
    border-right: none;
  }

  .ms-cell:nth-child(1),
  .ms-cell:nth-child(2) {
    border-bottom: 1px solid var(--slate-200);
  }
}

@media (max-width: 480px) {
  .ms-cell {
    border-right: none !important;
  }

  .ms-cell:not(:last-child) {
    border-bottom: 1px solid var(--slate-200);
  }
}

@keyframes msFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ms-cell-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.ms-k {
  color: var(--slate-400);
}

.ms-tick {
  width: 16px;
  height: 1px;
  background: var(--teal-500);
  position: relative;
}

.ms-tick::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 6px rgba(14, 177, 184, 0.5);
}

.ms-val {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: var(--slate-900);
  letter-spacing: -0.02em;
}

.ms-val .stat-num {
  color: var(--slate-900) !important;
  font-size: 36px !important;
}

.ms-prefix {
  color: var(--teal-600);
  font-size: 32px;
}

.ms-unit {
  color: var(--teal-600);
  font-size: 14px;
  font-weight: 500;
  margin-left: 3px;
}

.ms-label {
  color: var(--slate-600);
  font-size: 12.5px;
  margin-top: 10px;
  line-height: 1.4;
  text-wrap: pretty;
}

.ms-sub {
  color: var(--slate-400);
  margin-top: 4px;
  font-size: 10.5px;
}

/* ---------- Ecosystem section ---------- */
.ecosystem-section {
  background: linear-gradient(180deg, #fff 0%, var(--teal-50) 100%);
  border-top: 1px solid var(--teal-100);
  border-bottom: 1px solid var(--teal-100);
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 960px) {
  .ecosystem-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.ecosystem-copy h2 {
  text-wrap: pretty;
}

.ecosystem-protocols {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.ecosystem-proto {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--teal-700);
  background: #fff;
  border: 1px solid var(--teal-200);
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  transition: all 200ms;
}

.ecosystem-proto:hover {
  background: var(--teal-50);
  transform: translateY(-1px);
}

.ecosystem-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--teal-100);
}

.ecosystem-stats .es-num {
  font-size: 36px;
  font-weight: 700;
  color: var(--teal-700);
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
  line-height: 1;
}

.ecosystem-stats .es-lbl {
  font-size: 12px;
  color: var(--slate-600);
  margin-top: 6px;
  text-wrap: balance;
}

.ecosystem-image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--slate-200);
  background: #fff;
  transform: translateZ(0);
}

.ecosystem-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 60%, rgba(14, 177, 184, 0.08) 100%);
}

.ecosystem-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Refs band (dark) ---------- */
.refs-band {
  background: var(--navy-900);
  padding: 64px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.refs-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 20% 30%, rgba(14, 177, 184, 0.14), transparent 60%),
    radial-gradient(500px 260px at 80% 70%, rgba(30, 58, 95, 0.35), transparent 60%);
  pointer-events: none;
}

.refs-grid {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (max-width: 820px) {
  .refs-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.refs-title {
  font-size: clamp(22px, 4.5vw, 38px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}

.refs-sub {
  color: #94a3b8;
  font-size: 14px;
  margin: 10px 0 0;
}

.refs-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px 24px;
}

.refs-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 260ms;
  background: #fff;
  padding: 18px 26px;
  border-radius: 14px;
  min-height: 80px;
  min-width: clamp(120px, 40%, 160px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: refsPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  will-change: transform;
}

.refs-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(120deg, transparent 30%, rgba(34, 211, 221, 0.35) 50%, transparent 70%);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: refsShine 5s ease-in-out infinite;
}

.refs-logo {
  position: relative;
}

.refs-logo:nth-child(1) {
  animation-delay: 0ms;
}

.refs-logo:nth-child(1)::after {
  animation-delay: 0.3s;
}

.refs-logo:nth-child(2) {
  animation-delay: 120ms;
}

.refs-logo:nth-child(2)::after {
  animation-delay: 1.3s;
}

.refs-logo:nth-child(3) {
  animation-delay: 240ms;
}

.refs-logo:nth-child(3)::after {
  animation-delay: 2.3s;
}

.refs-logo:nth-child(4) {
  animation-delay: 360ms;
}

.refs-logo:nth-child(4)::after {
  animation-delay: 3.3s;
}

.refs-logo:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 30px rgba(14, 177, 184, 0.3), 0 0 0 1px rgba(61, 195, 201, 0.45);
}

.refs-logo img {
  max-height: 48px;
  max-width: 160px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  animation: refsFloat 5s ease-in-out infinite;
}

.refs-logo:nth-child(1) img {
  animation-delay: 0s;
}

.refs-logo:nth-child(2) img {
  animation-delay: 0.4s;
}

.refs-logo:nth-child(3) img {
  animation-delay: 0.8s;
}

.refs-logo:nth-child(4) img {
  animation-delay: 1.2s;
}

@keyframes refsPop {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.88);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes refsShine {

  0%,
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }

  45% {
    opacity: 0;
    transform: translateX(-100%);
  }

  55% {
    opacity: 0.8;
  }

  70% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes refsFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .refs-logo,
  .refs-logo img,
  .refs-logo::after {
    animation: none;
  }
}

.refs-logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.refs-logo svg {
  display: block;
  height: auto;
}



/* ========================================================== */
/*  Madinat Assiha · redesign hero showcase                      */
/* ========================================================== */
.me-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: stretch;
  margin-top: 8px;
}

/* ---- LEFT : platform visual ---- */
.me-showcase-visual {
  position: relative;
  padding: 28px 18px 52px;
}

.me-showcase-visual::before {
  content: "";
  position: absolute;
  inset: 6% -4% 8% -4%;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(14, 177, 184, 0.14), transparent 60%),
    radial-gradient(ellipse at 75% 70%, rgba(30, 58, 95, 0.10), transparent 60%);
  filter: blur(40px);
  z-index: 0;
}

.me-showcase-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 58, 95, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 95, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
  z-index: 0;
  opacity: 0.6;
}

.me-browser {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(30, 58, 95, 0.12);
  box-shadow:
    0 1px 2px rgba(11, 27, 56, 0.04),
    0 2px 8px rgba(11, 27, 56, 0.06),
    0 28px 56px -18px rgba(11, 27, 56, 0.32),
    0 12px 28px -12px rgba(14, 177, 184, 0.18);
  overflow: hidden;
  transform: perspective(1800px) rotateY(-2deg) rotateX(1.5deg);
  transform-origin: center;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.me-browser:hover {
  transform: perspective(1800px) rotateY(-0.5deg) rotateX(0.3deg) translateY(-2px);
}

.me-browser-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #fafbfc, #f3f5f8);
  border-bottom: 1px solid rgba(30, 58, 95, 0.08);
}

.me-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.me-dot.r {
  background: #ff6b6b;
}

.me-dot.y {
  background: #ffc93c;
}

.me-dot.g {
  background: #28c76f;
}

.me-browser-url {
  flex: 1;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(30, 58, 95, 0.05);
  border-radius: 6px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  color: var(--slate-600);
  letter-spacing: 0.01em;
}

.me-browser-url svg {
  color: var(--teal-600);
  flex-shrink: 0;
}

.me-browser-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}

.me-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.6);
  animation: meLivePulse 1.8s ease-out infinite;
}

@keyframes meLivePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.6);
  }

  70% {
    box-shadow: 0 0 0 7px rgba(255, 107, 107, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
  }
}

.me-browser-body {
  position: relative;
}

.me-browser-body img {
  display: block;
  width: 100%;
  height: auto;
}

.me-browser-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
  animation: meSheen 6s ease-in-out infinite;
}

@keyframes meSheen {

  0%,
  65%,
  100% {
    transform: translateX(-120%);
  }

  80% {
    transform: translateX(120%);
  }
}

/* Floating stat cards */
.me-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(30, 58, 95, 0.10);
  border-radius: 12px;
  padding: 12px 16px 12px 12px;
  box-shadow:
    0 2px 6px rgba(11, 27, 56, 0.06),
    0 16px 34px -14px rgba(11, 27, 56, 0.28);
  animation: meFloat 5.5s ease-in-out infinite;
}

.me-float-1 {
  top: 8%;
  right: -6%;
  animation-delay: 0s;
}

.me-float-2 {
  bottom: 12%;
  left: -4%;
  animation-delay: 2.2s;
}

@keyframes meFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.me-float-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.me-float-icon-teal {
  background: linear-gradient(135deg, #0eb1b8, #0a8d93);
  color: #fff;
  box-shadow: 0 4px 10px -2px rgba(14, 177, 184, 0.4);
}

.me-float-icon-coral {
  background: linear-gradient(135deg, #ff6b6b, #e45555);
  color: #fff;
  box-shadow: 0 4px 10px -2px rgba(255, 107, 107, 0.4);
}

.me-float-num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--navy-900);
  line-height: 1;
}

.me-float-lbl {
  font-size: 11px;
  color: var(--slate-500);
  margin-top: 3px;
  letter-spacing: 0.01em;
}

/* Pulse location tag */
.me-pulse-tag {
  position: absolute;
  top: 45%;
  left: 42%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy-900, #0b1b38);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  box-shadow: 0 8px 22px -6px rgba(11, 27, 56, 0.5);
  white-space: nowrap;
}

.me-pulse-tag::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 14px;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: rotate(45deg);
}

.me-pulse-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0eb1b8;
  box-shadow: 0 0 0 0 rgba(14, 177, 184, 0.7);
  animation: mePulseDot 1.6s ease-out infinite;
}

@keyframes mePulseDot {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 177, 184, 0.7);
  }

  70% {
    box-shadow: 0 0 0 9px rgba(14, 177, 184, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(14, 177, 184, 0);
  }
}

/* ---- RIGHT : stats panel ---- */
.me-showcase-panel {
  background:
    radial-gradient(ellipse at top right, rgba(14, 177, 184, 0.12), transparent 55%),
    linear-gradient(155deg, #0b1b38 0%, #132c50 55%, #1e3a5f 100%);
  border-radius: 20px;
  padding: 40px 36px 36px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(11, 27, 56, 0.1),
    0 30px 60px -20px rgba(11, 27, 56, 0.5);
}

.me-showcase-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.me-showcase-panel::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 177, 184, 0.22), transparent 65%);
  pointer-events: none;
  filter: blur(20px);
}

.me-panel-head {
  position: relative;
  z-index: 1;
}

.me-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0eb1b8;
  margin-bottom: 18px;
}

.me-panel-eyebrow svg {
  color: #0eb1b8;
  animation: mePulseDot 2.2s ease-out infinite;
}

.me-panel-title {
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 34px;
  color: #fff;
  text-wrap: balance;
}

.me-panel-title em {
  font-style: italic;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.me-panel-title .accent {
  color: #0eb1b8;
  font-style: normal;
}

.me-kpi-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 28px;
}

.me-kpi {
  position: relative;
  padding: 22px 20px 18px;
  background: rgba(11, 27, 56, 0.4);
  transition: background 300ms ease;
}

.me-kpi:hover {
  background: rgba(14, 177, 184, 0.08);
}

.me-kpi-val {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}

.me-kpi-prefix {
  font-size: 28px;
  font-weight: 600;
  margin-right: 2px;
}

.me-kpi-num {
  font-size: 42px;
}

.me-kpi-unit {
  font-size: 14px;
  font-weight: 500;
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0;
}

.me-kpi-teal .me-kpi-prefix,
.me-kpi-teal .me-kpi-unit {
  color: #0eb1b8;
}

.me-kpi-coral .me-kpi-prefix,
.me-kpi-coral .me-kpi-unit {
  color: #ff7b7b;
}

.me-kpi-navy .me-kpi-prefix,
.me-kpi-navy .me-kpi-unit {
  color: #8ca5c9;
}

.me-kpi-lbl {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.65);
  text-wrap: pretty;
  min-height: 34px;
}

.me-kpi-bar {
  margin-top: 14px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.me-kpi-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #0eb1b8, #5edde0);
  border-radius: 2px;
  animation: meBarFill 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.me-kpi-coral .me-kpi-bar-fill {
  background: linear-gradient(90deg, #ff6b6b, #ffa1a1);
}

.me-kpi-navy .me-kpi-bar-fill {
  background: linear-gradient(90deg, #4e6e9e, #8ca5c9);
}

.me-kpi:nth-child(1) .me-kpi-bar-fill {
  animation-delay: 0.1s;
  --target: 78%;
}

.me-kpi:nth-child(2) .me-kpi-bar-fill {
  animation-delay: 0.25s;
  --target: 88%;
}

.me-kpi:nth-child(3) .me-kpi-bar-fill {
  animation-delay: 0.4s;
  --target: 65%;
}

.me-kpi:nth-child(4) .me-kpi-bar-fill {
  animation-delay: 0.55s;
  --target: 72%;
}

@keyframes meBarFill {
  from {
    width: 0;
  }

  to {
    width: var(--target, 75%);
  }
}

.me-panel-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 14px 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(14, 177, 184, 0.3);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 250ms ease;
  text-decoration: none;
}

.me-panel-cta:hover {
  background: rgba(14, 177, 184, 0.15);
  border-color: #0eb1b8;
  transform: translateX(2px);
}

.me-panel-cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #0eb1b8;
  border-radius: 50%;
  color: #fff;
  transition: transform 250ms ease;
}

.me-panel-cta:hover .me-panel-cta-arrow {
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 1100px) {
  .me-showcase {
    gap: 36px;
  }

  .me-float-1 {
    right: -2%;
  }

  .me-float-2 {
    left: 0;
  }
}

@media (max-width: 980px) {
  .me-showcase {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .me-browser {
    transform: none;
  }

  .me-browser:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 640px) {
  .madinat-edit { padding: 56px 0; }
  .me-head { margin-bottom: 32px; }
  .me-showcase-visual {
    padding: 20px 4px 44px;
  }

  .me-float {
    padding: 8px 12px 8px 8px;
    gap: 8px;
  }
  .me-float-1 { top: 4%; right: 2%; }
  .me-float-2 { bottom: 6%; left: 2%; }
  .me-float-icon { width: 28px; height: 28px; }
  .me-float-num { font-size: 16px; }
  .me-float-lbl { font-size: 10px; }

  .me-pulse-tag {
    font-size: 10px;
    padding: 6px 10px 6px 8px;
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
  }

  .me-showcase-panel {
    padding: 24px 18px;
  }

  .me-kpi {
    padding: 16px 14px 12px;
  }

  .me-kpi-num {
    font-size: 28px;
  }

  .me-kpi-prefix {
    font-size: 20px;
  }

  /* Tableau statistique en bas — toujours bien sur mobile */
  .me-cell { padding-right: 0; }
  .me-val { font-size: 28px; }
  .me-label { font-size: 11px; }
}

@media (max-width: 420px) {
  .me-float-1 { right: 4px; }
  .me-float-2 { left: 4px; }
  .me-browser { border-radius: 10px; }
  .me-showcase-panel { border-radius: 14px; }
}

/* ── Demo page ── */

.demo-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--slate-50) 100%);
  border-bottom: 1px solid var(--slate-200);
  padding: 72px 0 56px;
}

.demo-hero>.container {
  position: relative;
  z-index: 2;
}

.persona-hero>.container {
  position: relative;
  z-index: 2;
}

.demo-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 860px) {
  .demo-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 860px) {
  .demo-hero-visual {
    display: none;
  }
}

.demo-hero-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-lg);
}

.demo-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.demo-hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 30, 60, 0.15) 0%, rgba(10, 30, 60, 0.45) 100%);
}

.demo-hero-badge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-800);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.demo-hero-badge svg {
  color: var(--teal-600);
  flex-shrink: 0;
}

.demo-hero-avatars {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 28px;
}

.demo-hero-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  object-fit: cover;
  margin-left: -10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.demo-hero-avatar:first-child {
  margin-left: 0;
}

.demo-hero-avatars-label {
  margin-left: 14px;
  font-size: 13.5px;
  color: var(--slate-500);
  font-weight: 500;
}

.demo-section {
  background: var(--slate-50);
}

.demo-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}

@media (max-width: 900px) {
  .demo-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.demo-form-col {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--shadow-md);
}

@media (max-width: 480px) {
  .demo-form-col {
    padding: 24px 20px;
  }
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.df-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  .df-row {
    grid-template-columns: 1fr;
  }
}

.df-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.df-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-700);
}

.df-req {
  color: var(--teal-600);
}

.df-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--slate-200);
  border-radius: 8px;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--slate-800);
  background: var(--slate-50);
  transition: border-color 150ms, box-shadow 150ms;
  outline: none;
}

.df-input:focus {
  border-color: var(--teal-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(14, 177, 184, 0.12);
}

.df-input-err {
  border-color: var(--red-500);
}

.df-input-err:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.df-textarea {
  resize: vertical;
  min-height: 100px;
}

.df-err-msg {
  font-size: 12px;
  color: var(--red-600);
}

.df-submit {
  width: 100%;
  justify-content: center;
  padding: 13px 20px;
  font-size: 16px;
  margin-top: 4px;
}

.df-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
}

.df-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: df-spin 0.7s linear infinite;
  display: inline-block;
}

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

.demo-success {
  text-align: center;
  padding: 48px 24px;
}

.demo-success-icon {
  width: 64px;
  height: 64px;
  background: var(--green-50);
  color: var(--green-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.demo-success h2 {
  color: var(--slate-900);
  margin-bottom: 12px;
}

.demo-success p {
  color: var(--slate-600);
}

.demo-info-col {
  position: sticky;
  top: 88px;
}

.demo-info-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 24px;
}

.demo-info-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.demo-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--teal-50);
  color: var(--teal-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.demo-info-item-title {
  font-weight: 700;
  color: var(--slate-800);
  font-size: 15px;
  margin-bottom: 4px;
}

.demo-info-item-text {
  color: var(--slate-500);
  font-size: 14px;
  line-height: 1.55;
}

.demo-contact {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--slate-200);
}

.demo-contact-label {
  font-size: 13px;
  color: var(--slate-500);
  margin-bottom: 6px;
}

.demo-contact-email {
  color: var(--teal-700);
  font-weight: 600;
  font-size: 15px;
}

.demo-contact-email:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════
   PATIENTS PAGE  (prefix: pt-)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.pt-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  background: linear-gradient(180deg, #fff 0%, var(--slate-50) 100%);
  border-bottom: 1px solid var(--slate-200);
}

.pt-hero>.container {
  position: relative;
  z-index: 10;
}

.pt-product-tag {
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-600);
  margin: 12px 0 8px;
  letter-spacing: -0.01em;
}

.pt-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 0;
}

/* pt-h1 aligned with global persona-hero h1 */
.pt-h1 {
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-top: 24px;
  color: var(--slate-900);
}

/* pt-subtitle aligned with global .lede */
.pt-subtitle {
  margin-top: 20px;
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--slate-600);
  line-height: 1.6;
  max-width: 540px;
}

/* Pills → tech-badge style */
.pt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.pt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-700);
  box-shadow: var(--shadow-xs);
}

.pt-pill--star {
  background: var(--amber-50);
  border-color: #fde68a;
  color: #92610a;
}

.pt-pill--down {
  background: var(--green-50);
  border-color: var(--green-100);
  color: var(--green-700);
}

.pt-pill--clock {
  background: var(--teal-50);
  border-color: var(--teal-100);
  color: var(--teal-800);
}

/* CTAs — global pattern */
.pt-hero-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.pt-scroll-link {
  font-size: 14px;
  color: var(--teal-600);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--teal-200);
  transition: border-color 150ms, color 150ms;
}

.pt-scroll-link:hover {
  color: var(--teal-700);
  border-color: var(--teal-500);
}

.pt-hero-stage {
  position: relative;
  width: 100%;
  min-height: clamp(480px, 62vw, 660px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 60px;
}
.pt-hero-stage::before {
  content: '';
  position: absolute;
  inset: auto 10% 90px 10%;
  height: 55%;
  top: 10%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, color-mix(in oklab, var(--teal-500, #0eb1b8) 24%, transparent) 0%, transparent 62%);
  filter: blur(28px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  animation: pt-hero-glow 8s ease-in-out infinite;
}
@keyframes pt-hero-glow {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50%      { transform: scale(1.08); opacity: 0.72; }
}
.pt-hero-slide {
  position: absolute;
  inset: 0 0 60px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(36px) scale(0.94);
  filter: blur(4px);
  transition:
    opacity 720ms cubic-bezier(.22,1,.36,1),
    transform 720ms cubic-bezier(.22,1,.36,1),
    filter 520ms ease;
  pointer-events: none;
  z-index: 1;
}
.pt-hero-stage.is-phone .pt-hero-slide--phone,
.pt-hero-stage.is-tv .pt-hero-slide--tv {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
  z-index: 2;
}
.pt-hero-stage.is-tv .pt-hero-slide--phone,
.pt-hero-stage.is-phone .pt-hero-slide--tv {
  transform: translateX(-36px) scale(0.94);
}

/* ── Switch App / TV ── */
.pt-hero-switch {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  padding: 5px;
  gap: 2px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  box-shadow:
    0 12px 32px -12px rgba(7, 12, 24, 0.18),
    0 2px 6px -2px rgba(7, 12, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  z-index: 4;
}
.pt-hero-switch-thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: calc(50% - 5px);
  left: 5px;
  background: linear-gradient(135deg, var(--teal-500, #0eb1b8), #0891a0);
  border-radius: 999px;
  box-shadow:
    0 6px 16px -4px color-mix(in oklab, var(--teal-500, #0eb1b8) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: left 420ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.pt-hero-stage.is-tv .pt-hero-switch-thumb {
  left: 50%;
}
.pt-hero-switch-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 0;
  background: transparent;
  color: rgba(15, 23, 42, 0.6);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  transition: color 300ms ease;
  font-family: inherit;
}
.pt-hero-switch-btn.is-active {
  color: #fff;
}
.pt-hero-switch-btn:focus-visible {
  outline: 2px solid var(--teal-500, #0eb1b8);
  outline-offset: 3px;
}

/* ── TV (design premium : bezel fin haut/côtés, chin épais, stand central) ── */
.pt-tv-hero {
  --pt-tv-w: clamp(340px, 46vw, 500px);
  width: var(--pt-tv-w);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter:
    drop-shadow(0 28px 40px rgba(7, 12, 24, 0.3))
    drop-shadow(0 6px 14px rgba(7, 12, 24, 0.18));
}
.pt-tv-bezel {
  position: relative;
  width: 100%;
  background:
    linear-gradient(180deg, #1a2230 0%, #0e1422 55%, #070b14 100%);
  padding: 4px 4px 16px 4px;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    inset 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.pt-tv-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 0 24px rgba(0, 0, 0, 0.5);
}
.pt-tv-screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
  position: relative;
  z-index: 1;
}
/* Reflet diagonal glacé */
.pt-tv-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.08) 38%,
      rgba(255, 255, 255, 0.03) 46%,
      rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}
/* Vignettage doux */
.pt-tv-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.22) 100%);
  pointer-events: none;
  z-index: 2;
}
/* Logo + LED sur le menton */
.pt-tv-bezel-chin {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  z-index: 4;
}
.pt-tv-bezel-logo {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.pt-tv-bezel-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--teal-500, #0eb1b8) 75%, #fff);
  box-shadow:
    0 0 6px color-mix(in oklab, var(--teal-500, #0eb1b8) 85%, transparent),
    0 0 12px color-mix(in oklab, var(--teal-500, #0eb1b8) 55%, transparent);
  animation: pt-tv-led-pulse 2.6s ease-in-out infinite;
}
@keyframes pt-tv-led-pulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

/* Socle central plus réaliste */
.pt-tv-stand {
  position: relative;
  width: 42%;
  height: 18px;
  margin-top: -1px;
  background:
    linear-gradient(180deg, #1a2230 0%, #0e1422 50%, #070b14 100%);
  border-radius: 0 0 4px 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}
.pt-tv-stand::before {
  content: '';
  display: block;
  width: 62%;
  height: 6px;
  margin: 18px auto 0;
  background: linear-gradient(180deg, #111827, #0b0f1a);
  border-radius: 10px;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 10px 20px -4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pt-tv-stand::after {
  content: '';
  display: block;
  width: 85%;
  height: 10px;
  margin: 10px auto 0;
  background: radial-gradient(ellipse at center, rgba(7, 12, 24, 0.28), transparent 72%);
  border-radius: 999px;
  filter: blur(2px);
}

/* ── Phone — halo ambient ── */
.pt-hero-slide--phone .pt-phone-hero {
  filter:
    drop-shadow(0 30px 50px rgba(7, 12, 24, 0.25))
    drop-shadow(0 0 30px color-mix(in oklab, var(--teal-500, #0eb1b8) 18%, transparent));
}

.pt-phone-hero {
  --pt-phone-w: clamp(200px, 32vw, 320px);
  --pt-phone-scale: calc(var(--pt-phone-w) / 390px);
  display: flex;
  justify-content: center;
  width: 100%;
}
.pt-phone-scaler {
  width: var(--pt-phone-w);
  height: calc(725px * var(--pt-phone-scale));
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
.pt-phone-scaler iframe {
  width: 390px;
  height: 725px;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--pt-phone-scale));
  transform-origin: top left;
}

@media (max-width: 980px) {
  .pt-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pt-hero-visual {
    order: -1;
  }
  .pt-phone-hero {
    --pt-phone-w: clamp(220px, 50vw, 300px);
  }
}

@media (max-width: 640px) {
  .pt-hero {
    padding: 56px 0 40px;
  }
  .pt-phone-hero {
    --pt-phone-w: clamp(200px, 70vw, 280px);
  }
}


/* ── Bandeau Preuve ── */
.pt-proof-band {
  background: #060d1f;
  padding: 120px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.pt-proof-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 15% 15%, rgba(45, 212, 191, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 85% 85%, rgba(59, 130, 246, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(45, 212, 191, 0.07) 0%, transparent 50%);
  pointer-events: none;
}

.pt-proof-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}

.pt-proof-header {
  text-align: center;
  margin-bottom: 64px;
}

.pt-proof-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: #2dd4bf;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 24px;
}

.pt-proof-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 8px #2dd4bf, 0 0 16px rgba(45, 212, 191, 0.4);
  animation: pt-proof-pulse 2s ease-in-out infinite;
}

@keyframes pt-proof-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.4);
  }
}

.pt-proof-intro {
  font-size: 21px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  max-width: 580px;
  margin-inline: auto;
  line-height: 1.65;
}

.pt-proof-grid-new {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 56px;
}

.pt-proof-card-new {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 1px solid rgba(45, 212, 191, 0.2);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 40px 20px 36px;
  text-align: center;
  transition: all 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

.pt-proof-card-new::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.7), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.pt-proof-card-new:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(45, 212, 191, 0.45);
  transform: translateY(-14px) scale(1.02);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35), 0 0 50px rgba(45, 212, 191, 0.08);
}

.pt-proof-card-new:hover::after {
  opacity: 1;
}

.pt-proof-icon-box {
  margin-bottom: 20px;
  color: #2dd4bf;
  filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.45));
  opacity: 0.95;
}

.pt-proof-content strong {
  display: block;
  font-size: 50px;
  font-weight: 900;
  background: linear-gradient(150deg, #ffffff 30%, rgba(45, 212, 191, 0.85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.04em;
  line-height: 1;
}

.pt-proof-content strong span {
  font-size: 20px;
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.9), #2dd4bf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: 3px;
}

.pt-proof-content span:not(.pt-proof-badge) {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 14px;
}

.pt-proof-footer {
  text-align: center;
  font-size: 13px;
  color: #64748b;
  margin-top: 48px;
  font-style: italic;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.6;
}

@media (max-width: 1000px) {
  .pt-proof-grid-new {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .pt-proof-grid-new {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .pt-proof-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .pt-proof-stat:nth-child(2n)::after {
    display: none;
  }
}

/* ── Problème ── */
.pt-problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.pt-problem-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  /* matches .persona-card */
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  /* matches global card shadow */
  transition: transform 180ms, box-shadow 180ms, border-color 180ms;
  position: relative;
  display: flex;
  flex-direction: column;
}

.pt-problem-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--teal-200);
}

.pt-problem-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--teal-50);
  border-radius: 12px;
  margin-bottom: 20px;
  color: var(--teal-600);
  transition: transform 180ms;
}

.pt-problem-card:hover .pt-problem-icon {
  transform: scale(1.08);
}

.pt-problem-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 10px;
  line-height: 1.3;
}

.pt-problem-card p {
  font-size: 14.5px;
  color: var(--slate-600);
  line-height: 1.6;
  flex: 1;
}

.pt-problem-stat {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--red-700);
  background: var(--red-50);
  border: 1px solid var(--red-100);
  border-radius: var(--radius);
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}

@media (max-width: 1024px) {
  .pt-problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .pt-problem-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Solution ── */
.pt-solution-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.pt-volet {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms, box-shadow 180ms, border-color 180ms;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.pt-volet:hover {
  border-color: var(--teal-200);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.pt-volet-img-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: var(--slate-100);
}

.pt-volet-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pt-volet:hover img {
  transform: scale(1.08);
}

.pt-volet-num {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #fff;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--teal-700);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.pt-volet-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pt-volet h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 12px;
  line-height: 1.3;
}

.pt-volet p {
  font-size: 14.5px;
  color: var(--slate-600);
  line-height: 1.6;
  flex: 1;
}

.pt-volet-link {
  margin-top: 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-600);
  transition: gap 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pt-volet:hover .pt-volet-link {
  gap: 8px;
}

@media (max-width: 860px) {
  .pt-solution-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  /* Mode "vignette photo + titre overlay" */
  .pt-volet {
    position: relative;
    display: block;
    border-radius: 14px;
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
      0 1px 2px rgba(7, 12, 24, 0.04),
      0 10px 22px -14px rgba(7, 12, 24, 0.2);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  }
  .pt-volet:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -16px rgba(7, 12, 24, 0.26);
  }
  .pt-volet-img-box {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }
  /* Dégradé bas pour lisibilité du titre */
  .pt-volet-img-box::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 65%;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 12, 24, 0.7) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .pt-volet-num {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 9px;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  }
  /* Body posé sur l'image, transparent, titre seul visible */
  .pt-volet-body {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 0;
    z-index: 2;
    flex: 0;
    background: transparent;
  }
  .pt-volet h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  }
  .pt-volet-body p,
  .pt-volet-link {
    display: none;
  }
}
@media (max-width: 480px) {
  .pt-solution-cols { gap: 8px; }
  .pt-volet h3 { font-size: 11.5px; }
  .pt-volet-body { left: 8px; right: 8px; bottom: 8px; }
  .pt-volet-num { font-size: 8px; padding: 2px 6px; top: 6px; left: 6px; }
}

/* ── Transformation Table (Avant/Après) ── */
.pt-aa-section {
  padding-bottom: 140px;
  background: #eef2f7;
  position: relative;
  overflow: hidden;
}

/* Aurora color wash — red left / teal right, slowly breathing */
.pt-aa-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  animation: pt-aa-aurora 14s ease-in-out infinite alternate;
}

@keyframes pt-aa-aurora {
  0% {
    background: radial-gradient(ellipse 80% 65% at -5% 40%, rgba(239, 68, 68, 0.09) 0%, transparent 55%), radial-gradient(ellipse 80% 65% at 105% 60%, rgba(45, 212, 191, 0.10) 0%, transparent 55%);
  }

  35% {
    background: radial-gradient(ellipse 60% 85% at 8% 70%, rgba(239, 68, 68, 0.07) 0%, transparent 55%), radial-gradient(ellipse 60% 85% at 92% 30%, rgba(45, 212, 191, 0.08) 0%, transparent 55%);
  }

  65% {
    background: radial-gradient(ellipse 90% 50% at 2% 25%, rgba(239, 68, 68, 0.10) 0%, transparent 55%), radial-gradient(ellipse 90% 50% at 98% 75%, rgba(45, 212, 191, 0.11) 0%, transparent 55%);
  }

  100% {
    background: radial-gradient(ellipse 70% 70% at -2% 55%, rgba(239, 68, 68, 0.08) 0%, transparent 55%), radial-gradient(ellipse 70% 70% at 102% 45%, rgba(45, 212, 191, 0.09) 0%, transparent 55%);
  }
}

/* Diamond mesh — drifts diagonally, never used elsewhere in the site */
.pt-aa-section::after {
  content: "";
  position: absolute;
  inset: -80px;
  background-image:
    linear-gradient(45deg, rgba(15, 23, 42, 0.038) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(15, 23, 42, 0.038) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: pt-aa-mesh-drift 22s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes pt-aa-mesh-drift {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(46px, 46px);
  }
}

/* Content sits above background layers */
.pt-aa-section .section-head,
.pt-aa-section .pt-aa-toggle,
.pt-aa-section .pt-aa-cards {
  position: relative;
  z-index: 1;
}

/* Light-beam sweep container */
.pt-aa-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.pt-aa-bg-beam {
  position: absolute;
  top: -30%;
  left: -40%;
  width: 22%;
  height: 160%;
  background: linear-gradient(108deg,
      transparent 15%,
      rgba(255, 255, 255, 0.09) 46%,
      rgba(255, 255, 255, 0.14) 50%,
      rgba(255, 255, 255, 0.09) 54%,
      transparent 85%);
  transform: skewX(-12deg);
  animation: pt-aa-beam-sweep 10s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.pt-aa-bg-beam--2 {
  width: 10%;
  animation-delay: 4s;
  background: linear-gradient(108deg,
      transparent 15%,
      rgba(255, 255, 255, 0.05) 46%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.05) 54%,
      transparent 85%);
}

@keyframes pt-aa-beam-sweep {
  0% {
    transform: skewX(-12deg) translateX(0);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    transform: skewX(-12deg) translateX(620%);
    opacity: 0;
  }
}

.pt-aa-section .section-head h2 {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.pt-aa-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 56px;
}

.pt-aa-card {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "header header" "avant apres";
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.pt-aa-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.14), 0 0 0 2px rgba(45, 212, 191, 0.28);
  border-color: rgba(45, 212, 191, 0.3);
}

.pt-aa-situation-box {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 28px;
  background: linear-gradient(105deg, #0f172a 0%, #1a2e4a 100%);
  position: relative;
  overflow: hidden;
}

.pt-aa-situation-box::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.pt-aa-situation-num {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(45, 212, 191, 0.55);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 3px;
}

.pt-aa-situation-icon {
  width: 42px;
  height: 42px;
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2dd4bf;
  flex-shrink: 0;
}

.pt-aa-situation-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}

.pt-aa-content-side {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pt-aa-side-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pt-aa-side-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pt-aa-avant {
  grid-area: avant;
  background: #fffafa;
  border-right: 1px solid #fee2e2;
}

.pt-aa-avant .pt-aa-side-label {
  color: #dc2626;
  border-bottom: 1px solid #fee2e2;
}

.pt-aa-avant .pt-aa-side-icon {
  background: #fef2f2;
  color: #dc2626;
}

.pt-aa-avant .pt-aa-scene {
  color: #64748b;
  font-style: italic;
}

.pt-aa-apres {
  grid-area: apres;
  background: #f7fffe;
}

.pt-aa-apres .pt-aa-side-label {
  color: #0d9488;
  border-bottom: 1px solid #ccfbf1;
}

.pt-aa-apres .pt-aa-side-icon {
  background: #f0fdfa;
  color: #0d9488;
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.3);
}

.pt-aa-apres .pt-aa-scene {
  color: #0f172a;
  font-weight: 500;
}

.pt-aa-scene {
  font-size: 14px;
  line-height: 1.7;
}

.pt-aa-kpi {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  width: fit-content;
  margin-top: auto;
}

.pt-aa-kpi--red {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.pt-aa-kpi--green {
  background: rgba(45, 212, 191, 0.1);
  color: #0d9488;
  border: 1px solid rgba(45, 212, 191, 0.3);
  box-shadow: 0 2px 10px rgba(45, 212, 191, 0.15);
}

.pt-aa-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 40px;
  background: #e2e8f0;
  padding: 5px;
  border-radius: 100px;
  width: fit-content;
  margin-inline: auto;
}

.pt-aa-btn {
  padding: 10px 28px;
  border-radius: 100px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.25s;
}

.pt-aa-btn.is-active {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: #fff;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.38);
}

@media (max-width: 768px) {
  .pt-aa-card {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "avant" "apres";
  }

  .pt-aa-avant {
    border-right: 0;
    border-bottom: 1px solid #fee2e2;
  }
}

@media (max-width: 480px) {
  .pt-aa-situation-box {
    padding: 16px 20px;
  }

  .pt-aa-content-side {
    padding: 20px;
  }
}

/* ── Demo sections ── */
.pt-demo-section {
  padding: 100px 0;
}

.pt-demo-desc {
  font-size: 15px;
  color: var(--slate-500);
  margin-bottom: 28px;
  max-width: 680px;
  line-height: 1.6;
}

.pt-iframe-skeleton {
  position: absolute;
  inset: 12px;
  border-radius: 32px;
  background: var(--slate-100);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.pt-skeleton-line {
  height: 12px;
  background: var(--slate-200);
  border-radius: 6px;
  animation: pt-shimmer 1.5s infinite;
}

@keyframes pt-shimmer {

  0%,
  100% {
    opacity: .4
  }

  50% {
    opacity: .9
  }
}

/* ── TV Context Mockup — Wall mounted in room ── */
.pt-tv-context-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 40px auto 0;
  aspect-ratio: 1 / 1;
  background: url('assets/hospital_room_tv_zoomed.png') center/cover no-repeat;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.pt-tv-screen-area {
  position: absolute;
  top: 34.3%;
  left: 30.7%;
  width: 38.8%;
  height: 23.3%;
  background: #000;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.pt-tv-screen-area iframe {
  width: 1920px !important;
  height: 1080px !important;
  border: 0;
  transform: scale(calc(800 * 0.388 / 1920));
  transform-origin: top left;
}

@media (max-width: 800px) {
  .pt-tv-screen-area iframe {
    transform: scale(calc((100vw - 40px) * 0.388 / 1920));
  }
}

/* Fallback for the old classes if still used in JSX */
.pt-tv-bezel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.pt-tv-bezel {
  width: 100%;
}

.pt-tv-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-tv-ph-inner {
  text-align: center;
  color: #e2e8f0;
  padding: 20px;
}

.pt-tv-ph-badge {
  font-size: 32px;
  margin-bottom: 12px;
}

.pt-tv-ph-inner p {
  font-size: 16px;
  margin: 0;
}

.pt-tv-ph-panels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}

.pt-tv-ph-panel {
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12px;
}

.pt-tv-badge-rotation {
  background: var(--teal-50);
  border: 1px solid var(--teal-200);
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 14px;
  color: var(--teal-800);
  max-width: 540px;
  text-align: center;
}

.pt-tv-rot-icon {
  font-size: 20px;
  margin-right: 8px;
}

/* ── Bénéfices Direction ── */
.pt-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}

.pt-benefit-card {
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: 32px;
  padding: 48px 40px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.pt-benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--teal-400), var(--teal-600));
  opacity: 0;
  transition: opacity 0.3s;
}

.pt-benefit-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  border-color: var(--teal-200);
}

.pt-benefit-card:hover::before {
  opacity: 1;
}

.pt-benefit-hero {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 24px;
  letter-spacing: -0.04em;
}

.pt-benefit-icon {
  width: 48px;
  height: 48px;
  background: var(--slate-50);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-400);
  margin-bottom: 24px;
  transition: all 0.3s;
}

.pt-benefit-card:hover .pt-benefit-icon {
  background: var(--teal-50);
  color: var(--teal-600);
}

.pt-benefit-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--slate-900);
  margin-bottom: 24px;
  line-height: 1.3;
}

.pt-benefit-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
}

.pt-benefit-card li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.5;
}

.pt-benefit-card li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #10b981;
}

@media (max-width: 860px) {
  .pt-benefits-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Calculateur ROI ── */
.pt-roi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 40px;
  align-items: start;
}

.pt-roi-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 10px;
  margin-top: 24px;
}

.pt-roi-label:first-child {
  margin-top: 0;
}

.pt-roi-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--teal-600);
  font-variant-numeric: tabular-nums;
}

.pt-roi-slider {
  width: 100%;
  accent-color: var(--teal-500);
  height: 4px;
  cursor: pointer;
}

/* Output panel aligned with .testimonial (dark, rounded) */
.pt-roi-output {
  background: var(--slate-900);
  border-radius: var(--radius-xl);
  padding: 32px;
  color: #e2e8f0;
  box-shadow: var(--shadow-xl);
}

.pt-roi-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pt-roi-result:last-of-type {
  border-bottom: none;
}

.pt-roi-result--accent .pt-roi-result-num {
  color: var(--teal-400);
}

.pt-roi-result-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
  opacity: 0.55;
}

.pt-roi-result-num {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pt-roi-disclaimer {
  font-size: 12px;
  opacity: 0.45;
  margin-top: 20px;
  line-height: 1.5;
  font-style: italic;
}

@media (max-width: 760px) {
  .pt-roi-grid {
    grid-template-columns: 1fr;
  }
}

/* u2500u2500 Intu00e9gration u2014 Premium Redesign u2500u2500 */
.pt-integration-section {
  background: var(--slate-900);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 120px 0;
}

.pt-integration-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% -20%, rgba(14, 177, 184, 0.15), transparent 70%),
    linear-gradient(rgba(15, 23, 42, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.5) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  opacity: 0.8;
}

.pt-integration-section .section-head h2 {
  color: #fff;
}

.pt-integration-section .eyebrow {
  background: rgba(14, 177, 184, 0.1);
  border-color: rgba(14, 177, 184, 0.2);
  color: var(--teal-400);
}

.pt-integration-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 64px;
  position: relative;
  z-index: 2;
}

.pt-integration-col {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 40px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
}

.pt-integration-col:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(14, 177, 184, 0.3);
  transform: translateY(-8px);
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.4);
}

.pt-integration-col>p {
  font-size: 15px;
  color: var(--slate-400);
  line-height: 1.6;
  margin: 20px 0 32px;
}

.pt-int-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pt-int-badge--nosih {
  background: rgba(14, 177, 184, 0.15);
  color: var(--teal-300);
  border: 1px solid rgba(14, 177, 184, 0.2);
}

.pt-int-badge--sih {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.pt-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: auto;
}

.pt-timeline-step {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 0;
  position: relative;
}

.pt-timeline-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 28px;
  bottom: -12px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(14, 177, 184, 0.5), rgba(14, 177, 184, 0.1));
}

.pt-tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--teal-500);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 12px var(--teal-500);
}

.pt-highlight {
  color: var(--teal-400);
  text-shadow: 0 0 20px rgba(14, 177, 184, 0.4);
}

.pt-integration-col:nth-child(2) .pt-tl-dot {
  background: #8b5cf6;
  box-shadow: 0 0 12px #8b5cf6;
}

.pt-integration-col:nth-child(2) .pt-timeline-step:not(:last-child)::after {
  background: linear-gradient(to bottom, rgba(139, 92, 246, 0.5), rgba(139, 92, 246, 0.1));
}

.pt-timeline-step strong {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  min-width: 44px;
  opacity: 0.9;
}

.pt-timeline-step span {
  font-size: 14.5px;
  color: var(--slate-300);
}

.pt-integration-band {
  margin-top: 56px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px 32px;
  font-size: 15px;
  color: var(--slate-300);
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-lg);
}

.pt-integration-band::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 7h.01'/%3E%3Cpath d='M11 7h6'/%3E%3Cpath d='M7 11h.01'/%3E%3Cpath d='M11 11h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='M7 7h.01'/%3E%3Cpath d='M11 7h6'/%3E%3Cpath d='M7 11h.01'/%3E%3Cpath d='M11 11h6'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.75;
}

@media (max-width: 860px) {
  .pt-integration-cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pt-integration-col {
    padding: 32px 24px;
  }
}

/* ── Conformité ── */
.pt-badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.pt-badge-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  /* persona-card */
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform 180ms, box-shadow 180ms, border-color 180ms;
}

.pt-badge-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--teal-200);
}

.pt-badge-icon {
  font-size: 28px;
}

.pt-badge-card strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
}

.pt-badge-card span {
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.4;
  text-align: center;
}

.pt-conformite-note {
  margin-top: 32px;
  font-size: 14px;
  color: var(--slate-500);
  line-height: 1.6;
  max-width: 720px;
  font-style: italic;
}

@media (max-width: 860px) {
  .pt-badges-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .pt-badges-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Témoignages ── */
.pt-temos-section {
  background: var(--slate-50);
}

.pt-temos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.pt-temo-card {
  background: #fff;
  padding: 28px 24px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
  transition: transform 180ms, box-shadow 180ms, border-color 180ms;
  position: relative;
}

.pt-temo-card:hover {
  border-color: var(--teal-200);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.pt-temo-card::before {
  content: "\201C";
  position: absolute;
  top: 14px;
  left: 18px;
  font-size: 48px;
  color: var(--teal-100);
  font-family: Georgia, serif;
  line-height: 1;
}

.pt-temo-quote {
  font-size: 15px;
  line-height: 1.65;
  color: var(--slate-700);
  margin-bottom: 24px;
  position: relative;
  padding-top: 20px;
}

.pt-temo-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pt-temo-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal-50);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-700);
  flex-shrink: 0;
  border: 1px solid var(--teal-100);
}

.pt-temo-author strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
}

.pt-temo-author span {
  font-size: 12.5px;
  color: var(--slate-500);
}

.pt-temos-note {
  text-align: center;
  margin-top: 40px;
  color: var(--slate-400);
  font-size: 14px;
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .pt-temos-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Cas Pilote ── */
.pt-case-section {
  overflow: hidden;
}

.pt-case-card {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--slate-200);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.pt-case-copy {
  padding: 48px;
}

.pt-case-visual {
  background: linear-gradient(135deg, var(--slate-800) 0%, var(--slate-900) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.pt-case-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

.pt-case-stat {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px;
  border-radius: var(--radius-lg);
  text-align: center;
}

.pt-case-stat-val {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.pt-case-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}

@media (max-width: 820px) {
  .pt-case-card {
    grid-template-columns: 1fr;
  }

  .pt-case-copy {
    padding: 32px 24px;
  }
}

/* ── FAQ ── */
.pt-faq-section {
  background: var(--slate-50);
}

.pt-faq-list {
  max-width: 820px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pt-faq-item {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 150ms, box-shadow 150ms;
}

.pt-faq-item.is-open {
  border-color: var(--teal-200);
  box-shadow: var(--shadow-md);
}

.pt-faq-q {
  width: 100%;
  text-align: left;
  padding: 20px 24px;
  border: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-900);
  cursor: pointer;
  font-family: inherit;
}

.pt-faq-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--slate-100);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 150ms, transform 300ms;
  color: var(--slate-500);
}

.pt-faq-item.is-open .pt-faq-chevron {
  background: var(--teal-50);
  color: var(--teal-700);
  transform: rotate(45deg);
}

.pt-faq-a {
  padding: 0 24px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--slate-600);
  display: none;
}

.pt-faq-item.is-open .pt-faq-a {
  display: block;
}

/* ── CTA Final — aligned with global .cta-block ── */
.pt-cta-final {
  padding: 120px 0;
}

.pt-cta-block-inner {
  background: linear-gradient(135deg, var(--slate-900) 0%, var(--violet-700) 55%, var(--teal-800) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pt-cta-block-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(45, 212, 191, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(20, 184, 166, 0.2) 0%, transparent 60%);
}

.pt-cta-block-inner>* {
  position: relative;
}

.pt-cta-final h2 {
  color: #fff;
  max-width: 680px;
  margin: 0 auto;
}

.pt-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
  position: relative;
}

.pt-cta-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px;
  border-radius: 12px;
  text-align: left;
  transition: background 180ms, border-color 180ms, transform 180ms;
}

.pt-cta-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(45, 212, 191, 0.35);
  transform: translateY(-4px);
}

.pt-cta-icon {
  font-size: 22px;
  margin-bottom: 12px;
  display: block;
}

.pt-cta-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}

.pt-cta-card p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin-bottom: 20px;
}

.pt-cta-card .btn {
  width: 100%;
  justify-content: center;
}

.pt-cta-micro {
  margin-top: 40px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 860px) {
  .pt-cta-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Scroll reveal ── */
.pt-problem-section .pt-problem-card,
.pt-solution-section .pt-volet,
.pt-aa-section .pt-aa-card,
.pt-benefits-section .pt-benefit-card,
.pt-conformite-section .pt-badge-card,
.pt-temos-section .pt-temo-card {
  opacity: 0;
  translate: 0 40px;
}

.is-visible .pt-problem-card,
.is-visible .pt-volet,
.is-visible .pt-aa-card,
.is-visible .pt-benefit-card,
.is-visible .pt-badge-card,
.is-visible .pt-temo-card {
  opacity: 1;
  translate: 0 0;
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (max-width: 1024px) {
  .pt-temos-grid {
    grid-template-columns: 1fr;
  }

  .pt-case-card {
    grid-template-columns: 1fr;
  }

  .pt-cta-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE MÉDECINS — MaVisite (redesign compatible design system)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Reveal helper (.in = visible) ── */
.med-hero-visual,
.med-constat-card,
.med-variante-card,
.med-roi-card,
.med-simulator,
.med-table-wrap,
.med-dsi-card,
.med-feat-card,
.med-benefice-card,
.med-scenario-card,
.med-faq-item,
.med-cta-inner {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}

.med-hero-visual.in,
.med-constat-card.in,
.med-variante-card.in,
.med-roi-card.in,
.med-simulator.in,
.med-table-wrap.in,
.med-dsi-card.in,
.med-feat-card.in,
.med-benefice-card.in,
.med-scenario-card.in,
.med-faq-item.in,
.med-cta-inner.in {
  opacity: 1;
  transform: translateY(0);
}

/* ── HERO pills ── */
.med-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 28px;
}

.med-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}

.med-pill svg {
  flex-shrink: 0;
}

.med-pill-teal {
  background: rgba(14, 177, 184, .12);
  color: #2DD4BF;
  border: 1px solid rgba(14, 177, 184, .3);
}

.med-pill-amber {
  background: rgba(245, 184, 0, .1);
  color: #F59E0B;
  border: 1px solid rgba(245, 184, 0, .3);
}

/* Hero visual */
.med-hero-visual {
  padding-top: 8px;
}

/* ── DEVICE MOCKUP (hero) ── */
.med-device {
  background: #1E293B;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  box-shadow: 0 32px 72px rgba(0, 0, 0, .45);
  transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
}

.med-device-bar {
  background: #0F172A;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.med-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.med-dot.r {
  background: #FF5F56;
}

.med-dot.y {
  background: #FFBD2E;
}

.med-dot.g {
  background: #27C93F;
}

.med-device-url {
  flex: 1;
  background: rgba(255, 255, 255, .05);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 9px;
  color: rgba(255, 255, 255, .35);
  text-align: center;
}

.med-app {
  display: flex;
  height: 300px;
}

.med-device-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 820;
  overflow: hidden;
  background: #F8FAFC;
  container-type: inline-size;
}

.med-device-frame iframe {
  border: 0;
  display: block;
  width: 1280px;
  height: 820px;
  transform-origin: top left;
  transform: scale(tan(atan2(100cqw, 1280px)));
  background: #F8FAFC;
}

.med-device-overlay {
  display: none;
}

.med-sidebar {
  width: 148px;
  background: #0F172A;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, .06);
  padding: 10px 0;
}

.med-sidebar-brand {
  font-size: 10px;
  font-weight: 800;
  color: #2DD4BF;
  padding: 0 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  margin-bottom: 6px;
}

.med-sidebar-brand span {
  color: rgba(255, 255, 255, .4);
  font-weight: 400;
  font-size: 8px;
  display: block;
  margin-top: 1px;
}

.med-nav-item {
  padding: 7px 12px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, .4);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.med-nav-item.active {
  background: rgba(14, 177, 184, .12);
  color: #2DD4BF;
  border-right: 2px solid #0eb1b8;
}

.med-nav-icon {
  display: flex;
  align-items: center;
}

.med-nav-icon svg {
  width: 11px;
  height: 11px;
}

.med-main {
  flex: 1;
  background: #F8FAFC;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.med-topbar {
  background: #fff;
  padding: 8px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.med-search {
  font-size: 9px;
  color: #94A3B8;
  background: #F1F5F9;
  padding: 4px 9px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.med-avatar {
  width: 24px;
  height: 24px;
  background: var(--teal-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: #fff;
}

.med-content-grid {
  flex: 1;
  padding: 8px;
  display: grid;
  grid-template-columns: 165px 1fr;
  gap: 7px;
  overflow: hidden;
}

.med-patient-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

.med-pcard {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  padding: 7px 9px;
}

.med-pcard.alert {
  border-color: #FECACA;
  background: #FFF5F5;
}

.med-pname {
  font-size: 9px;
  font-weight: 700;
  color: #0F172A;
}

.med-pinfo {
  font-size: 7px;
  color: #94A3B8;
  margin-top: 1px;
}

.med-badge {
  font-size: 7px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 3px;
}

.med-badge.red {
  background: #FEE2E2;
  color: #DC2626;
}

.med-badge.amber {
  background: #FEF3C7;
  color: #92400E;
}

.med-badge.green {
  background: #D1FAE5;
  color: #065F46;
}

.med-badge.small {
  font-size: 6px;
}

.med-detail-panel {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 7px;
  padding: 9px;
  overflow: hidden;
}

.med-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.med-detail-name {
  font-size: 10px;
  font-weight: 800;
  color: #0F172A;
}

.med-detail-info {
  font-size: 7px;
  color: #94A3B8;
  margin-top: 1px;
}

.med-vitals-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 7px;
}

.med-vital {
  background: #F8FAFC;
  border-radius: 4px;
  padding: 5px;
  text-align: center;
}

.med-vital-val {
  font-size: 11px;
  font-weight: 800;
  display: block;
}

.med-vital-lbl {
  font-size: 6px;
  color: #94A3B8;
  display: block;
  margin-top: 1px;
}

.med-floor-plan {
  background: #F0FDFA;
  border-radius: 4px;
  padding: 6px;
  font-size: 8px;
  color: var(--teal-600);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── BANDEAU STATS ── */
.med-bandeau {
  background: var(--slate-900);
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.med-bandeau-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  text-align: center;
}

.med-bandeau-card {
  padding: 20px 16px;
  border-right: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.med-bandeau-card:last-child {
  border-right: none;
}

.med-bandeau-icon {
  color: var(--teal-400);
  display: flex;
}

.med-bandeau-icon svg {
  width: 22px;
  height: 22px;
}

.med-bandeau-num {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
}

.med-bandeau-label {
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
  line-height: 1.4;
  max-width: 140px;
}

/* ══════════════════════════════════════════════════════════════════
   MED BANDEAU · TECH REDESIGN
   ══════════════════════════════════════════════════════════════════ */
.med-bandeau--tech {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #0B1524 0%, #060A13 70%, #03070E 100%);
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(45, 212, 191, .18);
  border-bottom: 1px solid rgba(45, 212, 191, .18);
}

.med-bandeau-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.med-bandeau-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(45, 212, 191, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45, 212, 191, .07) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 40%, transparent 85%);
}

.med-bandeau-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, .55), transparent);
  filter: blur(1px);
  animation: mb-scan 5s linear infinite;
}

@keyframes mb-scan {
  0% {
    top: 0;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

.med-bandeau-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .45;
}

.med-bandeau-glow-1 {
  width: 400px;
  height: 400px;
  top: -120px;
  left: 8%;
  background: radial-gradient(circle, rgba(13, 148, 136, .5), transparent 65%);
  animation: mb-drift 14s ease-in-out infinite;
}

.med-bandeau-glow-2 {
  width: 340px;
  height: 340px;
  bottom: -120px;
  right: 6%;
  background: radial-gradient(circle, rgba(94, 234, 212, .4), transparent 65%);
  animation: mb-drift 16s ease-in-out infinite reverse;
}

@keyframes mb-drift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(40px, -20px) scale(1.12);
  }
}

.med-bandeau-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(13, 148, 136, .12);
  border: 1px solid rgba(45, 212, 191, .35);
  color: #5EEAD4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 32px;
  box-shadow: 0 0 24px -6px rgba(45, 212, 191, .4);
}

.med-bandeau-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2DD4BF;
  box-shadow: 0 0 0 0 rgba(45, 212, 191, .6);
  animation: mb-pulse 1.8s ease-out infinite;
}

@keyframes mb-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(45, 212, 191, .6);
  }

  80% {
    box-shadow: 0 0 0 10px rgba(45, 212, 191, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(45, 212, 191, 0);
  }
}

.med-bandeau--tech .med-bandeau-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  text-align: left;
}

.med-bandeau--tech .med-bandeau-card {
  border: 1px solid rgba(148, 163, 184, .12);
  background: linear-gradient(180deg, rgba(15, 23, 42, .65) 0%, rgba(10, 15, 28, .85) 100%);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease;
  opacity: 0;
  transform: translateY(8px);
  animation: mb-card-in .6s cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes mb-card-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.med-bandeau--tech .med-bandeau-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--acc, #2DD4BF), transparent);
  opacity: .5;
}

.med-bandeau--tech .med-bandeau-card--ok {
  --acc: #2DD4BF;
}

.med-bandeau--tech .med-bandeau-card--live {
  --acc: #5EEAD4;
}

.med-bandeau--tech .med-bandeau-card--warn {
  --acc: #F59E0B;
}

.med-bandeau--tech .med-bandeau-card--alert {
  --acc: #EF4444;
}

.med-bandeau--tech .med-bandeau-card:hover {
  transform: translateY(-3px);
  border-color: rgba(45, 212, 191, .45);
  box-shadow: 0 12px 40px -12px rgba(45, 212, 191, .3), inset 0 0 30px -20px rgba(45, 212, 191, .3);
}

.med-bandeau-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.med-bandeau--tech .med-bandeau-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(45, 212, 191, .1);
  border: 1px solid rgba(45, 212, 191, .22);
  align-items: center;
  justify-content: center;
  color: #5EEAD4;
}

.med-bandeau--tech .med-bandeau-icon svg {
  width: 16px;
  height: 16px;
}

.med-bandeau-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .55);
}

.med-bandeau-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.med-bandeau-dot--ok,
.med-bandeau-dot--live {
  background: #2DD4BF;
  color: #2DD4BF;
  animation: mb-pulse-sm 1.8s ease-out infinite;
}

.med-bandeau-dot--warn {
  background: #F59E0B;
  color: #F59E0B;
}

.med-bandeau-dot--alert {
  background: #EF4444;
  color: #EF4444;
  animation: mb-pulse-sm 1.2s ease-out infinite;
}

@keyframes mb-pulse-sm {

  0%,
  100% {
    opacity: .55;
    transform: scale(.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.med-bandeau--tech .med-bandeau-num {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(45, 212, 191, .25);
}

.med-bandeau-spark {
  width: 100%;
  height: 22px;
  margin-top: 2px;
}

.med-bandeau--tech .med-bandeau-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(226, 232, 240, .55);
  line-height: 1.45;
  max-width: none;
  letter-spacing: .01em;
}

@media (max-width: 980px) {
  .med-bandeau--tech .med-bandeau-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .med-bandeau--tech { padding: 44px 0 36px; }
  .med-bandeau--tech .med-bandeau-eyebrow {
    font-size: 10px;
    letter-spacing: 0.08em;
    padding: 8px 12px;
    margin-bottom: 20px;
  }
  /* 5 cartes sur une ligne — mode compact glanceable */
  .med-bandeau--tech .med-bandeau-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
  .med-bandeau--tech .med-bandeau-card {
    padding: 10px 8px 8px;
    border-radius: 10px;
    gap: 4px;
    align-items: center;
    text-align: center;
  }
  .med-bandeau--tech .med-bandeau-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
  }
  .med-bandeau--tech .med-bandeau-icon {
    width: 22px;
    height: 22px;
  }
  .med-bandeau--tech .med-bandeau-icon svg {
    width: 12px;
    height: 12px;
  }
  /* Masquer texte status (garder juste le dot) */
  .med-bandeau--tech .med-bandeau-status-label { display: none; }
  .med-bandeau--tech .med-bandeau-num {
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .med-bandeau--tech .med-bandeau-spark { display: none; }
  .med-bandeau--tech .med-bandeau-label {
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0;
    color: rgba(148, 163, 184, .7);
  }
}

@media (max-width: 400px) {
  .med-bandeau--tech .med-bandeau-grid { gap: 4px; }
  .med-bandeau--tech .med-bandeau-card { padding: 8px 5px 6px; border-radius: 8px; }
  .med-bandeau--tech .med-bandeau-num { font-size: 12px; }
  .med-bandeau--tech .med-bandeau-label { font-size: 8px; }
}

/* ══════════════════════════════════════════════════════════════════
   MED SCHEMA · Architecture avec background tech data animé
   ══════════════════════════════════════════════════════════════════ */
.med-schema-section {
  background:
    radial-gradient(ellipse 100% 60% at 15% 0%, rgba(79, 70, 229, .22) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 85% 100%, rgba(6, 182, 212, .18) 0%, transparent 55%),
    radial-gradient(ellipse 120% 80% at 50% 50%, #11162B 0%, #080B1A 70%, #04060F 100%);
  position: relative;
  overflow: hidden;
  padding: 88px 0;
  border-top: 1px solid rgba(103, 232, 249, .18);
  border-bottom: 1px solid rgba(103, 232, 249, .18);
}

.med-schema-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.med-schema-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(103, 232, 249, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(103, 232, 249, .06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 40%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 40%, transparent 88%);
}

.med-schema-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .55;
}

.med-schema-orb-1 {
  width: 520px;
  height: 520px;
  top: -180px;
  left: -80px;
  background: radial-gradient(circle, rgba(99, 102, 241, .6), transparent 65%);
  animation: med-schema-drift 16s ease-in-out infinite;
}

.med-schema-orb-2 {
  width: 420px;
  height: 420px;
  bottom: -160px;
  right: -60px;
  background: radial-gradient(circle, rgba(6, 182, 212, .5), transparent 65%);
  animation: med-schema-drift 18s ease-in-out infinite reverse;
}

@keyframes med-schema-drift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(50px, -30px) scale(1.12);
  }
}

.med-schema-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, .65), transparent);
  filter: blur(1px);
  animation: med-schema-scan 6s linear infinite;
}

@keyframes med-schema-scan {
  0% {
    top: 0;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

.med-schema-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
}

.med-schema-wire {
  stroke-dasharray: 4 6;
  animation: med-schema-dash 6s linear infinite;
}

.med-schema-wire-2 {
  animation-duration: 9s;
  animation-direction: reverse;
}

@keyframes med-schema-dash {
  to {
    stroke-dashoffset: -200;
  }
}

/* Header */
.med-schema-head {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}

.med-schema-head.in {
  opacity: 1;
  transform: none;
}

/* HUD terminal style */
.med-schema-hud {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #0F172A;
}

.med-schema-hud-bracket {
  color: rgba(15, 23, 42, .5);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
}

.med-schema-hud-text {
  white-space: nowrap;
}

.med-schema-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22D3EE;
  box-shadow: 0 0 10px #22D3EE;
  animation: mb-pulse-teal 1.6s ease-out infinite;
}

@keyframes mb-pulse-teal {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, .65), 0 0 10px #22D3EE;
  }

  80% {
    box-shadow: 0 0 0 10px rgba(34, 211, 238, 0), 0 0 10px #22D3EE;
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0), 0 0 10px #22D3EE;
  }
}

/* Figure */
.med-schema-figure {
  position: relative;
  margin: 48px auto 0;
  max-width: 1100px;
  border-radius: 18px;
  overflow: hidden;
  background: #071220;
  border: 1px solid rgba(45, 212, 191, .25);
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(255, 255, 255, .03),
    inset 0 0 40px -20px rgba(45, 212, 191, .15);
  opacity: 0;
  transform: translateY(20px) scale(.98);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
}

.med-schema-figure.in {
  opacity: 1;
  transform: none;
}

.med-schema-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45, 212, 191, .08), transparent 30%);
  pointer-events: none;
  z-index: 2;
}

.med-schema-figure::after {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(94, 234, 212, .85), transparent);
  filter: blur(1px);
  z-index: 3;
  animation: med-schema-top-line 5s ease-in-out infinite;
}

@keyframes med-schema-top-line {

  0%,
  100% {
    opacity: .3;
    transform: translateX(-10%);
  }

  50% {
    opacity: 1;
    transform: translateX(10%);
  }
}

.med-schema-figure img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* Chips techniques (coins de l'image) */
.med-schema-chip {
  position: absolute;
  z-index: 4;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(11, 21, 36, .85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(45, 212, 191, .4);
  color: #5EEAD4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 0 16px -4px rgba(45, 212, 191, .45);
}

.med-schema-chip-tl {
  top: 14px;
  left: 14px;
}

.med-schema-chip-tr {
  top: 14px;
  right: 14px;
}

.med-schema-chip-bl {
  bottom: 14px;
  left: 14px;
}

.med-schema-chip-br {
  bottom: 14px;
  right: 14px;
}

@media (max-width: 640px) {
  .med-schema-section {
    padding: 64px 0;
  }

  .med-schema-chip {
    font-size: 9px;
    padding: 3px 7px;
    letter-spacing: .1em;
  }
}

/* ── CONSTAT CARDS ── */
.med-constat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.med-constat-card {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-top: 3px solid #DC2626;
  border-radius: 16px;
  padding: 32px 28px;
}

.med-constat-icon {
  color: var(--teal-600);
  display: flex;
  margin-bottom: 14px;
}

.med-constat-icon svg {
  width: 28px;
  height: 28px;
}

.med-constat-num {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #DC2626;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
}

.med-constat-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 8px;
}

.med-constat-desc {
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.6;
}

.med-source {
  margin-top: 32px;
  text-align: center;
  font-size: 12px;
  color: var(--slate-400);
  font-style: italic;
}

/* ── CONSTAT v2 — resserré, minimal ── */
.med-constat-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--slate-200);
  margin-top: 48px;
}

.med-constat-card-v2 {
  position: relative;
  padding: 40px 32px 36px;
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  background: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}

.med-constat-card-v2.in {
  opacity: 1;
  transform: none;
}

.med-constat-card-v2:last-child {
  border-right: none;
}

.med-constat-idx {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--slate-400);
  margin-bottom: 24px;
}

.med-constat-num-v2 {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #DC2626;
  line-height: 1;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

.med-constat-title-v2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 10px;
  line-height: 1.35;
}

.med-constat-desc-v2 {
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 860px) {
  .med-constat-grid-v2 {
    grid-template-columns: 1fr;
  }

  .med-constat-card-v2 {
    border-right: none;
  }

  .med-constat-card-v2:last-child {
    border-bottom: none;
  }
}


/* ── COMPLIANCE v2 (split list) + DSI v2 ── */
.med-compliance-section {
  background: var(--slate-50);
}

.med-compliance-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 40px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}

.med-compliance-split.in {
  opacity: 1;
  transform: none;
}

.med-compliance-col {
  padding: 28px 32px;
}

.med-compliance-col+.med-compliance-col {
  border-left: 1px solid var(--slate-200);
}

.med-compliance-col-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.med-compliance-col-label--not {
  color: #DC2626;
}

.med-compliance-col-label--own {
  color: var(--teal-600);
}

.med-compliance-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.med-compliance-li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--slate-700);
  padding: 10px 0;
  border-top: 1px solid var(--slate-100);
}

.med-compliance-li:first-child {
  border-top: none;
}

.med-compliance-li span {
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1.4;
}

.med-compliance-li--not span {
  color: #DC2626;
}

.med-compliance-li--own span {
  color: var(--teal-600);
}

.med-dsi-head {
  margin-top: 64px;
  margin-bottom: 28px;
}

.med-dsi-h3 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--slate-900);
  margin-top: 10px;
}

.med-dsi-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  overflow: hidden;
}

.med-dsi-card-v2 {
  padding: 28px 24px;
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}

.med-dsi-card-v2.in {
  opacity: 1;
  transform: none;
}

.med-dsi-card-v2:nth-child(3n) {
  border-right: none;
}

.med-dsi-card-v2:nth-last-child(-n+3) {
  border-bottom: none;
}

.med-dsi-idx {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--slate-400);
  margin-bottom: 16px;
}

.med-dsi-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 8px;
}

.med-dsi-desc {
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 860px) {
  .med-compliance-split {
    grid-template-columns: 1fr;
  }

  .med-compliance-col+.med-compliance-col {
    border-left: none;
    border-top: 1px solid var(--slate-200);
  }

  .med-dsi-grid-v2 {
    grid-template-columns: 1fr;
  }

  .med-dsi-card-v2 {
    border-right: none;
  }

  .med-dsi-card-v2:last-child {
    border-bottom: none;
  }

  .med-dsi-card-v2:nth-last-child(-n+3) {
    border-bottom: 1px solid var(--slate-200);
  }
}

/* ── FEATURES v2 ── */
.med-features-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--slate-200);
  border-left: 1px solid var(--slate-200);
  margin-top: 40px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border-right: 1px solid var(--slate-200);
}

.med-feat-card-v2 {
  padding: 32px 28px;
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}

.med-feat-card-v2.in {
  opacity: 1;
  transform: none;
}

.med-feat-card-v2:nth-child(3n) {
  border-right: none;
}

.med-feat-card-v2:nth-last-child(-n+3) {
  border-bottom: none;
}

.med-feat-idx {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--teal-600);
  margin-bottom: 16px;
}

.med-feat-title-v2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}

.med-feat-desc-v2 {
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 860px) {
  .med-features-grid-v2 {
    grid-template-columns: 1fr;
    border-left: none;
    border-right: none;
  }

  .med-feat-card-v2 {
    border-right: none;
  }

  .med-feat-card-v2:last-child {
    border-bottom: none;
  }

  .med-feat-card-v2:nth-last-child(-n+3) {
    border-bottom: 1px solid var(--slate-200);
  }
}

/* ── BÉNÉFICES v2 ── */
.med-benefices-section-v2 {
  background: var(--slate-50);
}

.med-benefices-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 40px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  overflow: hidden;
}

.med-benefice-card-v2 {
  padding: 40px 32px;
  border-right: 1px solid var(--slate-200);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}

.med-benefice-card-v2.in {
  opacity: 1;
  transform: none;
}

.med-benefice-card-v2:last-child {
  border-right: none;
}

.med-benefice-idx {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--slate-400);
  margin-bottom: 18px;
}

.med-benefice-num-v2 {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--teal-600);
  line-height: 1;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.med-benefice-title-v2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 8px;
}

.med-benefice-desc-v2 {
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 860px) {
  .med-benefices-grid-v2 {
    grid-template-columns: 1fr;
  }

  .med-benefice-card-v2 {
    border-right: none;
    border-bottom: 1px solid var(--slate-200);
  }

  .med-benefice-card-v2:last-child {
    border-bottom: none;
  }
}

/* ── FAQ v2 (2 colonnes) ── */
.med-faq-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 40px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  overflow: hidden;
}

.med-faq-item-v2 {
  border-right: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}

.med-faq-item-v2.in {
  opacity: 1;
  transform: none;
}

.med-faq-item-v2:nth-child(2n) {
  border-right: none;
}

.med-faq-item-v2:nth-last-child(-n+2) {
  border-bottom: none;
}

.med-faq-q-v2 {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-900);
  line-height: 1.45;
  transition: background .15s ease;
}

.med-faq-q-v2:hover {
  background: var(--slate-50);
}

.med-faq-idx-v2 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--teal-600);
  flex-shrink: 0;
  width: 28px;
}

.med-faq-q-text {
  flex: 1;
}

.med-faq-icon-v2 {
  font-size: 20px;
  font-weight: 400;
  color: var(--slate-400);
  flex-shrink: 0;
  line-height: 1;
  width: 20px;
  text-align: center;
}

.med-faq-item-v2.open .med-faq-icon-v2 {
  color: var(--teal-600);
}

.med-faq-a-v2 {
  padding: 0 24px 20px 66px;
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.65;
}

@media (max-width: 860px) {
  .med-faq-grid-v2 {
    grid-template-columns: 1fr;
  }

  .med-faq-item-v2 {
    border-right: none;
  }

  .med-faq-item-v2:last-child {
    border-bottom: none;
  }

  .med-faq-item-v2:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--slate-200);
  }
}

/* ══════════════════════════════════════════════════════════════════
   V2 · Animated backgrounds + icônes + hover
   ══════════════════════════════════════════════════════════════════ */
@keyframes med-orb-drift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(40px, -30px) scale(1.08);
  }
}

@keyframes med-orb-drift-2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-30px, 40px) scale(.95);
  }
}

@keyframes med-pulse-dot {

  0%,
  100% {
    opacity: .35;
    transform: scale(1);
  }

  50% {
    opacity: .85;
    transform: scale(1.4);
  }
}

/* fond animé générique — à ajouter via ::before sur les sections */
.med-constat-section,
.med-compliance-section,
.med-features-section,
.med-benefices-section-v2,
.med-faq-section-v2 {
  position: relative;
  overflow: hidden;
}

.med-constat-section::before,
.med-compliance-section::before,
.med-features-section::before,
.med-benefices-section-v2::before,
.med-faq-section-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(520px 360px at 12% 18%, rgba(13, 148, 136, .10), transparent 65%),
    radial-gradient(420px 320px at 88% 82%, rgba(94, 234, 212, .10), transparent 65%);
  animation: med-orb-drift 14s ease-in-out infinite;
}

.med-compliance-section::before,
.med-benefices-section-v2::before {
  animation: med-orb-drift-2 16s ease-in-out infinite;
}

.med-constat-section>.container,
.med-compliance-section>.container,
.med-features-section>.container,
.med-benefices-section-v2>.container,
.med-faq-section-v2>.container {
  position: relative;
  z-index: 1;
}

/* floating dots (petits points pulsants) */
.med-constat-section::after,
.med-features-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(13, 148, 136, .35) 1.5px, transparent 2.2px),
    radial-gradient(circle, rgba(94, 234, 212, .30) 1.5px, transparent 2.2px);
  background-size: 120px 120px, 160px 160px;
  background-position: 20px 30px, 80px 100px;
  inset: 0;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 70%);
  opacity: .55;
}

/* Icônes sur les cartes v2 */
.med-constat-icon-v2,
.med-dsi-icon-v2,
.med-feat-icon-v2,
.med-benefice-icon-v2 {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F0FDFA 0%, #E0F2FE 100%);
  color: var(--teal-600);
  margin-bottom: 14px;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .3s ease, color .3s ease;
}

.med-constat-icon-v2 {
  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
  color: #DC2626;
}

.med-constat-icon-v2 svg,
.med-dsi-icon-v2 svg,
.med-feat-icon-v2 svg,
.med-benefice-icon-v2 svg {
  width: 22px;
  height: 22px;
}

/* Hover cards v2 */
.med-constat-card-v2,
.med-dsi-card-v2,
.med-feat-card-v2,
.med-benefice-card-v2,
.med-faq-item-v2 {
  transition: background .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.med-constat-card-v2:hover,
.med-dsi-card-v2:hover,
.med-feat-card-v2:hover,
.med-benefice-card-v2:hover {
  background: linear-gradient(180deg, rgba(240, 253, 250, .6), rgba(255, 255, 255, 0));
}

.med-constat-card-v2:hover .med-constat-icon-v2,
.med-dsi-card-v2:hover .med-dsi-icon-v2,
.med-feat-card-v2:hover .med-feat-icon-v2,
.med-benefice-card-v2:hover .med-benefice-icon-v2 {
  transform: scale(1.08) rotate(-3deg);
  background: linear-gradient(135deg, var(--teal-600) 0%, #14B8A6 100%);
  color: #fff;
}

.med-constat-card-v2:hover .med-constat-icon-v2 {
  background: linear-gradient(135deg, #DC2626 0%, #F87171 100%);
  color: #fff;
}

/* Features : icône + idx en ligne (haut de carte) */
.med-feat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.med-feat-top .med-feat-idx {
  margin-bottom: 0;
}

.med-feat-top .med-feat-icon-v2 {
  margin-bottom: 0;
}

/* Features : visuel SVG dans chaque carte */
.med-feat-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin: 14px 0 18px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, .95) 0%, rgba(224, 242, 254, .6) 100%);
  color: var(--teal-600);
  overflow: hidden;
  position: relative;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.med-feat-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 100%, rgba(13, 148, 136, .15), transparent 70%);
  pointer-events: none;
}

.med-feat-visual svg {
  width: 140px;
  height: 80px;
  position: relative;
  z-index: 1;
}

.med-feat-card-v2:hover .med-feat-visual {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -18px rgba(13, 148, 136, .55);
}

.med-feat-card-v2:hover .med-feat-visual svg {
  animation: med-feat-wiggle .6s ease;
}

@keyframes med-feat-wiggle {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  75% {
    transform: translateX(3px);
  }
}

/* Bénéfices : accent coloré sous le numéro + pulse */
.med-benefice-card-v2 {
  position: relative;
  overflow: hidden;
}

.med-benefice-card-v2::after {
  content: "";
  position: absolute;
  top: 32px;
  right: 32px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-600);
  opacity: .35;
  animation: med-pulse-dot 2.4s ease-in-out infinite;
}

.med-benefice-card-v2:nth-child(2)::after {
  animation-delay: .8s;
}

.med-benefice-card-v2:nth-child(3)::after {
  animation-delay: 1.6s;
}

/* FAQ : halo hover sur l'item ouvert */
.med-faq-item-v2.open {
  background: linear-gradient(180deg, rgba(240, 253, 250, .65), rgba(255, 255, 255, 0));
}

.med-faq-item-v2.open .med-faq-q-v2 {
  color: var(--teal-700, #0F766E);
}

/* Compliance split : petit bandeau de couleur en tête de chaque colonne */
.med-compliance-col {
  position: relative;
}

.med-compliance-col::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 48px;
  border-radius: 0 4px 4px 0;
}

.med-compliance-col:first-child::before {
  background: linear-gradient(180deg, #DC2626, #F87171);
}

.med-compliance-col:last-child::before {
  background: linear-gradient(180deg, #0D9488, #5EEAD4);
}

/* ── 4 VARIANTES ── */
.med-variantes-section {
  background: var(--slate-50);
}

.med-variantes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.med-variante-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.med-variante-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .09);
  border-color: var(--teal-500);
}

.med-variante-screen {
  background: linear-gradient(135deg, #0F172A, #1E293B);
  padding: 16px 16px 0;
  min-height: 170px;
  overflow: hidden;
}

.med-variante-body {
  padding: 20px 22px;
}

.med-variante-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 10px;
}

.med-variante-tag.sih {
  background: rgba(14, 177, 184, .1);
  color: var(--teal-600);
  border: 1px solid rgba(14, 177, 184, .25);
}

.med-variante-tag.nosih {
  background: rgba(71, 85, 105, .07);
  color: var(--slate-500);
  border: 1px solid var(--slate-200);
}

.med-variante-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--slate-900);
  margin-bottom: 8px;
}

.med-variante-desc {
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.55;
}

.med-variante-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--teal-600);
  font-weight: 600;
}

/* ── DÉMO INTERACTIVE (toggles SIH / device) ── */
.med-demo-intro {
  max-width: 720px;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s, transform .6s;
}

.med-demo-intro.in {
  opacity: 1;
  transform: none;
}

.med-demo-intro h2 {
  line-height: 1.12;
}

.med-demo-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .med-demo-toolbar {
    gap: 10px;
    justify-content: flex-start;
  }
  .med-demo-fullscreen {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
  .med-seg { flex: 1 1 auto; }
  .med-seg-btn { flex: 1; padding: 8px 10px; font-size: 12px; }
  .med-demo-intro h2 { font-size: clamp(24px, 6vw, 34px); }
  .med-variantes-section { padding: clamp(40px, 7vw, 80px) 0; }
  .med-demo-desktop { border-radius: 10px; }
}

@media (max-width: 480px) {
  .med-demo-toolbar { flex-direction: column; align-items: stretch; }
  .med-seg { width: 100%; }
}

.med-seg {
  display: inline-flex;
  background: var(--slate-50, #F8FAFC);
  border: 1px solid var(--slate-200, #E2E8F0);
  border-radius: 10px;
  padding: 4px;
}

.med-seg-btn {
  border: 0;
  background: transparent;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-600, #475569);
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s;
}

.med-seg-btn:hover {
  color: var(--slate-900, #0F172A);
}

.med-seg-btn.act {
  background: #fff;
  color: var(--teal-600);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
}

.med-demo-fullscreen {
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--teal-600);
  color: var(--teal-600);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}

.med-demo-fullscreen:hover {
  background: var(--teal-600);
  color: #fff;
}

.med-demo-caption {
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.6;
  max-width: 720px;
  margin-top: 8px;
}

.med-demo-stage {
  margin-top: 28px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s .1s, transform .7s .1s;
  display: flex;
  justify-content: center;
}

.med-demo-stage.in {
  opacity: 1;
  transform: none;
}

/* Desktop stage — chrome-bar + scaled iframe */
.med-demo-desktop {
  width: 100%;
  max-width: 1100px;
  background: #1E293B;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  box-shadow: 0 32px 72px rgba(0, 0, 0, .25);
}

.med-demo-desktop .med-device-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 820;
  overflow: hidden;
  background: #F8FAFC;
  container-type: inline-size;
}

.med-demo-desktop .med-device-frame iframe {
  border: 0;
  display: block;
  width: 1280px;
  height: 820px;
  transform-origin: top left;
  transform: scale(tan(atan2(100cqw, 1280px)));
  background: #F8FAFC;
}

/* Mobile stage large — phone silhouette, centered (responsive) */
.med-vmock-frame.med-vmock-frame-mobile.med-vmock-frame-mobile-large {
  width: 100%;
  max-width: clamp(240px, 70vw, 380px);
  aspect-ratio: 390 / 844;
  padding: clamp(10px, 1.4vw, 14px) clamp(8px, 1vw, 10px);
  border-radius: clamp(32px, 5vw, 44px);
  overflow: hidden;
  margin: 0 auto;
}

.med-vmock-frame-mobile-large::before {
  width: 38%;
  height: clamp(14px, 2.2vw, 20px);
  top: clamp(8px, 1.4vw, 12px);
  border-radius: 0 0 16px 16px;
}

.med-vmock-frame.med-vmock-frame-mobile.med-vmock-frame-mobile-large iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: clamp(22px, 4vw, 30px);
  background: #F8FAFC;
  transform: none;
}

/* ── Variante mockups (iframes scaled) ── */
.med-variante-screen {
  min-height: 240px;
  padding: 14px 14px 0;
}

.med-vmock-frame {
  position: relative;
  width: 100%;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background: #F8FAFC;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.med-vmock-frame iframe {
  border: 0;
  display: block;
  transform-origin: top left;
  background: #F8FAFC;
}

.med-vmock-overlay {
  display: none;
}

/* Desktop: real mockup is 1280×820. */
.med-vmock-frame-desktop {
  aspect-ratio: 1280 / 820;
  container-type: inline-size;
}

.med-vmock-frame-desktop iframe {
  width: 1280px;
  height: 820px;
  transform: scale(tan(atan2(100cqw, 1280px)));
}

/* Mobile: phone silhouette with bezel, screen shows the real HTML mockup */
.med-variante-screen:has(.med-vmock-frame-mobile) {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 24px 16px 0;
}

.med-vmock-frame-mobile {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 390 / 820;
  background: #0F172A;
  border-radius: 32px 32px 0 0;
  padding: 10px 8px 0;
  box-shadow:
    inset 0 0 0 2px #1E293B,
    0 20px 40px rgba(0, 0, 0, .35);
  overflow: hidden;
  container-type: inline-size;
}

/* Notch */
.med-vmock-frame-mobile::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 14px;
  background: #0F172A;
  border-radius: 0 0 12px 12px;
  z-index: 3;
}

.med-vmock-frame-mobile iframe {
  width: 440px;
  height: 900px;
  border-radius: 20px 20px 0 0;
  /* Scale iframe to fit inner width (container width minus horizontal padding = 100cqw) */
  transform: scale(tan(atan2(100cqw, 440px)));
}

/* ── ROI SECTION (dark, animated background) ── */
.med-roi-section {
  position: relative;
  background: #0F172A;
  padding: 100px 0;
  overflow: hidden;
}

/* RTLS node-network animated background */
.med-roi-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.med-roi-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(45, 212, 191, .55);
  box-shadow: 0 0 0 6px rgba(45, 212, 191, .08);
}

@keyframes med-node-drift {

  0%,
  100% {
    transform: translate(0, 0);
    opacity: .55;
  }

  33% {
    transform: translate(12px, -18px);
    opacity: .9;
  }

  66% {
    transform: translate(-10px, 10px);
    opacity: .4;
  }
}

.med-roi-node {
  animation: med-node-drift 8s ease-in-out infinite;
}

.med-roi-node.n1 {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 9s;
}

.med-roi-node.n2 {
  top: 30%;
  left: 40%;
  animation-delay: -2.5s;
  animation-duration: 7s;
}

.med-roi-node.n3 {
  top: 60%;
  left: 20%;
  animation-delay: -4s;
  animation-duration: 11s;
}

.med-roi-node.n4 {
  top: 25%;
  right: 15%;
  animation-delay: -1.5s;
  animation-duration: 8.5s;
}

.med-roi-node.n5 {
  top: 70%;
  right: 25%;
  animation-delay: -3s;
  animation-duration: 10s;
}

.med-roi-node.n6 {
  top: 80%;
  left: 55%;
  animation-delay: -5s;
  animation-duration: 12s;
}

.med-roi-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, .2), transparent);
  transform-origin: left center;
}

@keyframes med-line-pulse {

  0%,
  100% {
    opacity: .15;
  }

  50% {
    opacity: .45;
  }
}

.med-roi-line {
  animation: med-line-pulse 4s ease-in-out infinite;
}

.med-roi-line.l1 {
  top: 20%;
  left: 10%;
  width: 35%;
  transform: rotate(12deg);
  animation-delay: 0s;
}

.med-roi-line.l2 {
  top: 35%;
  left: 40%;
  width: 25%;
  transform: rotate(-8deg);
  animation-delay: -1s;
}

.med-roi-line.l3 {
  top: 65%;
  left: 20%;
  width: 40%;
  transform: rotate(5deg);
  animation-delay: -2s;
}

.med-roi-line.l4 {
  top: 28%;
  right: 8%;
  width: 30%;
  transform: rotate(-15deg);
  animation-delay: -1.5s;
}

.med-roi-pulse {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(45, 212, 191, .35);
}

@keyframes med-pulse-expand {
  0% {
    transform: scale(.6);
    opacity: .7;
  }

  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

.med-roi-pulse {
  animation: med-pulse-expand 3.5s ease-out infinite;
}

.med-roi-pulse.p1 {
  width: 40px;
  height: 40px;
  top: calc(15% - 20px);
  left: calc(10% - 20px);
  animation-delay: 0s;
}

.med-roi-pulse.p2 {
  width: 40px;
  height: 40px;
  top: calc(25% - 20px);
  right: calc(15% - 20px);
  animation-delay: -1.2s;
}

.med-roi-pulse.p3 {
  width: 40px;
  height: 40px;
  top: calc(60% - 20px);
  left: calc(20% - 20px);
  animation-delay: -2.4s;
}

/* ROI cards grid */
.med-roi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.med-roi-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-top: 3px solid var(--teal-500);
  border-radius: 16px;
  padding: 28px;
  transition: background .3s;
}

.med-roi-card:hover {
  background: rgba(255, 255, 255, .07);
}

.med-roi-card-icon {
  color: var(--teal-400);
  display: flex;
  margin-bottom: 12px;
}

.med-roi-card-icon svg {
  width: 24px;
  height: 24px;
}

.med-roi-card-num {
  font-size: 26px;
  font-weight: 800;
  color: #2DD4BF;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 8px;
}

.med-roi-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.med-roi-card-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  line-height: 1.6;
}

/* ROI Simulator */
.med-simulator {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 36px;
}

.med-simulator h3 {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.med-sim-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}

.med-sim-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.med-sim-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.med-sim-input {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  font-family: inherit;
  outline: none;
  width: 100%;
  transition: border-color .2s;
}

.med-sim-input:focus {
  border-color: var(--teal-500);
}

.med-sim-result {
  background: linear-gradient(135deg, rgba(14, 177, 184, .2), rgba(14, 177, 184, .08));
  border: 1px solid rgba(14, 177, 184, .35);
  border-radius: 14px;
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.med-sim-value {
  font-size: 38px;
  font-weight: 800;
  color: #2DD4BF;
  letter-spacing: -.04em;
  line-height: 1;
}

/* ── COMPLIANCE TABLE ── */
.med-table-wrap {
  overflow-x: auto;
  margin-bottom: 48px;
}

.med-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--slate-200);
}

.med-table thead tr {
  background: var(--slate-900);
}

.med-table th {
  padding: 14px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
}

.med-table td {
  padding: 12px 20px;
  font-size: 13px;
  color: var(--slate-700);
  border-bottom: 1px solid var(--slate-100);
  vertical-align: top;
  line-height: 1.5;
}

.med-table tr:last-child td {
  border-bottom: none;
}

.med-table tr:nth-child(even) td {
  background: var(--slate-50);
}

.med-not {
  font-weight: 600;
  color: #DC2626;
}

.med-owner {
  font-weight: 600;
  color: var(--teal-600);
}

/* DSI cards */
.med-dsi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.med-dsi-card {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 22px;
  transition: border-color .3s, transform .3s;
}

.med-dsi-card:hover {
  border-color: var(--teal-500);
  transform: translateY(-4px);
}

/* ── FEATURES GRID ── */
.med-features-section {
  background: var(--slate-50);
}

.med-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.med-feat-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  padding: 28px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.med-feat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .07);
  border-color: var(--teal-500);
}

.med-feat-icon {
  color: var(--teal-600);
  display: flex;
  margin-bottom: 14px;
}

.med-feat-icon svg {
  width: 26px;
  height: 26px;
}

.med-feat-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 8px;
}

.med-feat-desc {
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.6;
}

/* ── BENEFICES ── */
.med-benefices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.med-benefice-card {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  transition: border-color .3s, transform .3s;
}

.med-benefice-card:hover {
  border-color: var(--teal-500);
  transform: translateY(-4px);
}

.med-benefice-num {
  font-size: 40px;
  font-weight: 800;
  color: var(--teal-600);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 10px;
}

.med-benefice-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 8px;
}

.med-benefice-desc {
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.55;
}

/* ── SCÉNARIOS ── */
.med-scenarios-section {
  background: var(--slate-50);
}

.med-scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.med-scenario-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}

.med-scenario-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .1);
  border-color: var(--teal-500);
}

.med-scenario-header {
  background: var(--slate-900);
  padding: 22px 24px;
}

.med-scenario-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--teal-400);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.med-scenario-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 5px;
}

.med-scenario-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
}

.med-scenario-body {
  padding: 22px;
}

.med-scenario-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--slate-100);
}

.med-scenario-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.med-scenario-row span {
  font-size: 12px;
  color: var(--slate-500);
  font-weight: 600;
}

.med-scenario-row strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--teal-600);
}

/* ── FAQ ── */
.med-faq-list {
  max-width: 720px;
  margin: 48px auto 0;
}

.med-faq-item {
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #fff;
  transition: border-color .2s;
}

.med-faq-item.open {
  border-color: var(--teal-500);
}

.med-faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 17px 20px;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.med-faq-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--slate-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-500);
  transition: all .25s;
  line-height: 1;
}

.med-faq-item.open .med-faq-icon {
  background: var(--teal-600);
  color: #fff;
}

.med-faq-a {
  padding: 0 20px 16px;
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.65;
}

/* ── CTA FINAL ── */
.med-cta-final {
  position: relative;
  padding: 100px 0;
  background: linear-gradient(135deg, var(--teal-900) 0%, #0F172A 60%, #0b1b38 100%);
  text-align: center;
  overflow: hidden;
}

.med-cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(45, 212, 191, .18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 20% 80%, rgba(14, 177, 184, .12) 0%, transparent 60%);
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .med-bandeau-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .med-roi-grid {
    grid-template-columns: 1fr;
  }

  .med-sim-row {
    grid-template-columns: 1fr;
  }

  .med-dsi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .med-features-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .med-bandeau-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .med-bandeau-card {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  .med-constat-grid,
  .med-variantes-grid,
  .med-benefices-grid,
  .med-scenarios-grid,
  .med-dsi-grid,
  .med-features-grid {
    grid-template-columns: 1fr;
  }

  .med-hero-visual {
    padding-top: 0;
    max-width: none;
    margin: 0;
    /* Breakout : le mockup déborde du container du hero pour prendre toute la largeur du viewport */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 12px;
    box-sizing: border-box;
  }

  .med-device {
    transform: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
    border-radius: 10px;
  }
  /* Contenu rendu à 900px natif (au lieu de 1280) pour que l'UI reste lisible sur petit écran */
  .med-device-frame {
    aspect-ratio: 900 / 580;
  }
  .med-device-frame iframe {
    width: 900px;
    height: 580px;
    transform: scale(tan(atan2(100cqw, 900px)));
  }
}

@media (max-width: 980px) {
  .med-device {
    transform: perspective(900px) rotateY(-2deg) rotateX(1deg);
  }
}


/* ── DEVICE MOCKUP ── */
.md-device {
  background: #1E293B;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg)
}

.md-device-bar {
  background: #0F172A;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.md-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%
}

.md-dot-r {
  background: #FF5F56
}

.md-dot-y {
  background: #FFBD2E
}

.md-dot-g {
  background: #27C93F
}

.md-device-url {
  flex: 1;
  background: rgba(255, 255, 255, .06);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, .4);
  text-align: center
}

.md-app {
  display: flex;
  height: 320px
}

.md-sidebar {
  width: 160px;
  background: #0F172A;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, .06);
  padding: 12px 0
}

.md-sidebar-logo {
  font-size: 11px;
  font-weight: 800;
  color: #2DD4BF;
  padding: 0 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  margin-bottom: 8px
}

.md-sidebar-logo span {
  color: rgba(255, 255, 255, .4);
  font-weight: 400;
  font-size: 9px;
  display: block;
  margin-top: 2px
}

.md-nav-item {
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, .45);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px
}

.md-nav-active {
  background: rgba(13, 148, 136, .15);
  color: #2DD4BF;
  border-right: 2px solid #0D9488
}

.md-main {
  flex: 1;
  background: #F8FAFC;
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.md-topbar {
  background: #fff;
  padding: 9px 14px;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0
}

.md-search {
  font-size: 10px;
  color: #94A3B8;
  background: #F1F5F9;
  padding: 5px 10px;
  border-radius: 5px
}

.md-avatar {
  width: 26px;
  height: 26px;
  background: #0D9488;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff
}

.md-content {
  flex: 1;
  padding: 10px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px;
  overflow: hidden
}

.md-list {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.md-pcard {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 10px
}

.md-pcard-alert {
  border-color: #FECACA;
  background: #FFF5F5
}

.md-pname {
  font-size: 10px;
  font-weight: 700;
  color: #0F172A
}

.md-pinfo {
  font-size: 8px;
  color: #94A3B8;
  margin-top: 1px
}

.md-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 3px
}

.md-badge-red {
  background: #FEE2E2;
  color: #DC2626
}

.md-badge-amber {
  background: #FEF3C7;
  color: #92400E
}

.md-badge-green {
  background: #D1FAE5;
  color: #065F46
}

.md-detail {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  padding: 10px;
  overflow: hidden
}

.md-dname {
  font-size: 11px;
  font-weight: 800;
  color: #0F172A
}

.md-dinfo {
  font-size: 8px;
  color: #94A3B8;
  margin-top: 1px
}

.md-vitals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 8px
}

.md-vital {
  background: #F8FAFC;
  border-radius: 5px;
  padding: 5px;
  text-align: center
}

.md-vital-val {
  font-size: 12px;
  font-weight: 800;
  color: #0F172A;
  display: block
}

.md-vital-lbl {
  font-size: 7px;
  color: #94A3B8;
  display: block;
  margin-top: 1px
}

.md-floor {
  margin-top: 8px;
  background: #F0FDFA;
  border-radius: 5px;
  padding: 6px;
  font-size: 8px;
  color: #0D9488;
  font-weight: 600;
  text-align: center
}

/* ── SECTIONS GÉNÉRIQUES ── */
.md-section {
  padding: 96px 0
}

.md-section-white {
  background: #fff
}

.md-section-off {
  background: #F8FAFC
}

.md-section-dark {
  background: #0F172A
}

.md-section-head {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s, transform .6s;
  margin-bottom: 56px
}

.md-section-head.is-visible {
  opacity: 1;
  transform: translateY(0)
}

.md-section-head-center {
  text-align: center
}

.md-section-head-center .md-section-sub {
  margin-left: auto;
  margin-right: auto
}

.md-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #0D9488;
  margin-bottom: 12px
}

.md-section h2 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: #0F172A;
  margin-bottom: 18px
}

.md-section-sub {
  font-size: 17px;
  color: #475569;
  max-width: 600px;
  line-height: 1.65
}

/* REVEAL helpers */
.md-constat-card,
.md-variante-card,
.md-roi-card,
.md-simulator,
.md-table-wrap,
.md-dsi-card,
.md-feat-card,
.md-med-card,
.md-scenario,
.md-diff-col,
.md-cred-item,
.md-faq-item,
.md-cta-inner,
.md-section-head-light {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease
}

.md-constat-card.is-visible,
.md-variante-card.is-visible,
.md-roi-card.is-visible,
.md-simulator.is-visible,
.md-table-wrap.is-visible,
.md-dsi-card.is-visible,
.md-feat-card.is-visible,
.md-med-card.is-visible,
.md-scenario.is-visible,
.md-diff-col.is-visible,
.md-cred-item.is-visible,
.md-faq-item.is-visible,
.md-cta-inner.is-visible,
.md-section-head-light.is-visible {
  opacity: 1;
  transform: translateY(0)
}

/* ── CONSTAT ── */
.md-constat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.md-constat-card {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-top: 3px solid #DC2626;
  border-radius: 16px;
  padding: 32px 28px
}

.md-constat-num {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #DC2626;
  line-height: 1;
  margin-bottom: 12px;
  display: block
}

.md-constat-title {
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 10px
}

.md-constat-desc {
  font-size: 14px;
  color: #475569;
  line-height: 1.6
}

.md-source {
  margin-top: 36px;
  text-align: center;
  font-size: 12px;
  color: #94A3B8;
  font-style: italic
}

/* ── VARIANTES ── */
.md-variantes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px
}

.md-variante-card {
  background: #fff;
  border: 1px solid #CBD5E1;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .35s, box-shadow .35s, border-color .35s
}

.md-variante-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 64px rgba(0, 0, 0, .1);
  border-color: #0D9488
}

.md-variante-screen {
  background: linear-gradient(135deg, #0F172A, #1E293B);
  padding: 20px 20px 0;
  min-height: 200px;
  overflow: hidden
}

.md-variante-body {
  padding: 22px 24px
}

.md-variante-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 10px
}

.md-variante-badge-sih {
  background: rgba(13, 148, 136, .1);
  color: #0D9488;
  border: 1px solid rgba(13, 148, 136, .25)
}

.md-variante-badge-nosih {
  background: rgba(71, 85, 105, .08);
  color: #475569;
  border: 1px solid #CBD5E1
}

.md-variante-title {
  font-size: 17px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px
}

.md-variante-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.55
}

.md-variante-switch {
  margin-top: 10px;
  font-size: 12px;
  color: #0D9488;
  font-weight: 600
}

/* Variante mockups */
.md-vmock-desktop {
  display: flex;
  background: #fff;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  height: 150px
}

.md-vmock-sidebar {
  width: 90px;
  background: #0F172A;
  padding: 8px 0;
  flex-shrink: 0
}

.md-vmock-logo {
  font-size: 7px;
  font-weight: 800;
  color: #2DD4BF;
  padding: 0 8px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  margin-bottom: 5px
}

.md-vmock-nav {
  font-size: 7px;
  font-weight: 600;
  color: rgba(255, 255, 255, .45);
  padding: 4px 8px
}

.md-vmock-nav-act {
  color: #2DD4BF;
  background: rgba(13, 148, 136, .15);
  border-right: 2px solid #0D9488
}

.md-vmock-main {
  flex: 1;
  background: #F8FAFC;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px
}

.md-vmock-bar {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 7px;
  color: #94A3B8
}

.md-vmock-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  flex: 1
}

.md-vmock-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  padding: 5px
}

.md-vmock-card-ghost {
  grid-column: span 2;
  font-size: 6px;
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F1F5F9;
  border: 1px dashed #CBD5E1
}

.md-vmock-card-name {
  font-size: 7px;
  font-weight: 700;
  color: #0F172A
}

.md-vmock-card-val {
  font-size: 9px;
  font-weight: 800;
  color: #0D9488;
  margin-top: 2px
}

.md-vmock-bdg {
  font-size: 6px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 2px
}

.md-vmock-bdg-red {
  background: #FEE2E2;
  color: #DC2626
}

.md-vmock-bdg-green {
  background: #D1FAE5;
  color: #065F46
}

.md-vmock-mobile-wrap {
  display: flex;
  justify-content: center;
  padding-top: 8px
}

.md-vmock-mobile {
  width: 88px;
  background: #fff;
  border-radius: 12px 12px 0 0;
  border: 2px solid #E2E8F0;
  border-bottom: none;
  overflow: hidden
}

.md-vmock-status {
  background: #0F172A;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px
}

.md-vmock-status span {
  font-size: 6px;
  color: rgba(255, 255, 255, .6);
  font-weight: 600
}

.md-vmock-mobile-header {
  padding: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.md-vmock-mobile-sub {
  font-size: 5px;
  color: rgba(255, 255, 255, .7)
}

.md-vmock-mobile-title {
  font-size: 7px;
  font-weight: 800;
  color: #fff;
  margin-top: 1px
}

.md-vmock-mobile-body {
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px
}

.md-vmock-mobile-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  padding: 4px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.md-vmock-mobile-name {
  font-size: 6px;
  font-weight: 700;
  color: #0F172A
}

.md-vmock-mobile-info {
  font-size: 5px;
  color: #94A3B8;
  margin-top: 1px
}

.md-vmock-tabs {
  background: #fff;
  border-top: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-around;
  padding: 4px 0
}

.md-vmock-tab {
  text-align: center;
  font-size: 5px;
  font-weight: 600;
  color: #94A3B8
}

.md-vmock-tab-act {
  color: #0D9488
}

/* ── ROI ── */
.md-roi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px
}

.md-roi-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-top: 3px solid #0D9488;
  border-radius: 16px;
  padding: 28px;
  transition: background .3s
}

.md-roi-card:hover {
  background: rgba(255, 255, 255, .07)
}

.md-roi-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px
}

.md-roi-num {
  font-size: 28px;
  font-weight: 800;
  color: #2DD4BF;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 8px
}

.md-roi-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.6
}

/* SIMULATEUR */
.md-simulator {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  padding: 36px
}

.md-simulator h3 {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px
}

.md-sim-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 28px
}

.md-sim-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px
}

.md-sim-field {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.md-sim-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
  letter-spacing: .5px
}

.md-sim-input {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
  width: 100%
}

.md-sim-input:focus {
  border-color: #0D9488
}

.md-sim-result {
  background: linear-gradient(135deg, rgba(13, 148, 136, .25), rgba(13, 148, 136, .1));
  border: 1px solid rgba(13, 148, 136, .4);
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px
}

.md-sim-result-label {
  font-size: 14px;
  color: rgba(255, 255, 255, .65);
  font-weight: 600
}

.md-sim-result-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  margin-top: 3px
}

.md-sim-value {
  font-size: 40px;
  font-weight: 800;
  color: #2DD4BF;
  letter-spacing: -.04em;
  line-height: 1
}

.md-sim-disclaimer {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, .3);
  font-style: italic
}

/* ── COMPLIANCE ── */
.md-table-wrap {
  overflow-x: auto;
  margin-bottom: 48px
}

.md-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #CBD5E1
}

.md-table thead tr {
  background: #0F172A
}

.md-table th {
  padding: 14px 22px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px
}

.md-th-not {
  color: #F87171
}

.md-th-owner {
  color: #5EEAD4
}

.md-table td {
  padding: 13px 22px;
  font-size: 14px;
  color: #334155;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: top;
  line-height: 1.5
}

.md-table tr:last-child td {
  border-bottom: none
}

.md-table tr:nth-child(even) td {
  background: #FAFBFD
}

.md-not {
  font-size: 13px;
  font-weight: 600;
  color: #DC2626
}

.md-owner {
  font-size: 13px;
  font-weight: 600;
  color: #0D9488
}

.md-dsi-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 22px;
  color: #0F172A
}

.md-dsi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.md-dsi-card {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  padding: 22px;
  transition: border-color .3s, transform .3s
}

.md-dsi-card:hover {
  border-color: #0D9488;
  transform: translateY(-4px)
}

.md-dsi-icon {
  font-size: 22px;
  margin-bottom: 10px
}

.md-dsi-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 6px
}

.md-dsi-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.55
}

/* ── FEATURES ── */
.md-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.md-feat-card {
  background: #fff;
  border: 1px solid #CBD5E1;
  border-radius: 16px;
  padding: 28px;
  transition: transform .3s, box-shadow .3s, border-color .3s
}

.md-feat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .08);
  border-color: #0D9488
}

.md-feat-icon {
  font-size: 28px;
  margin-bottom: 16px
}

.md-feat-title {
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 8px
}

.md-feat-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.6
}

/* ── MÉDECIN ── */
.md-med-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.md-med-card {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  transition: border-color .3s, transform .3s
}

.md-med-card:hover {
  border-color: #0D9488;
  transform: translateY(-4px)
}

.md-med-num {
  font-size: 40px;
  font-weight: 800;
  color: #0D9488;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 8px
}

.md-med-title {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 6px
}

.md-med-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.5
}

/* ── SCÉNARIOS ── */
.md-scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.md-scenario {
  background: #fff;
  border: 1px solid #CBD5E1;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .35s, box-shadow .35s, border-color .35s
}

.md-scenario:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .1);
  border-color: #0D9488
}

.md-scenario-header {
  background: #0F172A;
  padding: 22px 24px
}

.md-scenario-num {
  font-size: 10px;
  font-weight: 700;
  color: #0D9488;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px
}

.md-scenario-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 5px
}

.md-scenario-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .5)
}

.md-scenario-body {
  padding: 24px
}

.md-scenario-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #F1F5F9
}

.md-scenario-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0
}

.md-scenario-label {
  font-size: 12px;
  color: #475569;
  font-weight: 600
}

.md-scenario-val {
  font-size: 13px;
  font-weight: 800;
  color: #0D9488
}

/* ── DIFFÉRENCIATION ── */
.md-diff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  overflow: hidden
}

.md-diff-col {
  padding: 28px 20px;
  border-right: 1px solid rgba(255, 255, 255, .08)
}

.md-diff-col:last-child {
  border-right: none
}

.md-diff-vs {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 8px
}

.md-diff-who {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px
}

.md-diff-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  line-height: 1.55;
  margin-bottom: 10px
}

.md-diff-adv {
  font-size: 12px;
  font-weight: 700;
  color: #2DD4BF
}

/* ── CRÉDIBILITÉ ── */
.md-cred-section {
  border-top: 1px solid #F1F5F9
}

.md-cred-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 16px;
  overflow: hidden
}

.md-cred-item {
  padding: 28px 20px;
  text-align: center;
  border-right: 1px solid #CBD5E1
}

.md-cred-item:last-child {
  border-right: none
}

.md-cred-num {
  font-size: 32px;
  font-weight: 800;
  color: #0D9488;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 6px
}

.md-cred-label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  line-height: 1.45
}

/* ── FAQ ── */
.md-faq-list {
  max-width: 740px;
  margin: 56px auto 0
}

.md-faq-item {
  border: 1px solid #CBD5E1;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #fff;
  transition: border-color .2s
}

.md-faq-open {
  border-color: #0D9488
}

.md-faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 18px 22px;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px
}

.md-faq-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: #F1F5F9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #475569;
  transition: all .25s;
  line-height: 1
}

.md-faq-open .md-faq-icon {
  background: #0D9488;
  color: #fff
}

.md-faq-a {
  padding: 0 22px 18px;
  font-size: 14px;
  color: #475569;
  line-height: 1.65
}

/* ── CTA FINAL ── */
.md-cta-final {
  background: linear-gradient(135deg, #0F766E, #134E4A);
  padding: 100px 0
}

.md-cta-inner {
  text-align: center
}

.md-cta-final h2 {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.03em
}

.md-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 36px
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .md-hero-inner {
    grid-template-columns: 1fr
  }

  .md-hero-visual {
    display: none
  }

  .md-roi-grid {
    grid-template-columns: 1fr
  }

  .md-sim-inputs {
    grid-template-columns: 1fr
  }

  .md-dsi-grid {
    grid-template-columns: 1fr 1fr
  }

  .md-diff-grid {
    grid-template-columns: 1fr 1fr
  }

  .md-cred-grid {
    grid-template-columns: 1fr 1fr
  }

  .md-section h2 {
    font-size: 30px
  }

  .md-hero h1 {
    font-size: 34px
  }
}

@media(max-width:768px) {
  .md-section {
    padding: 64px 0
  }

  .md-constat-grid,
  .md-variantes-grid,
  .md-features-grid,
  .md-med-grid,
  .md-scenarios-grid {
    grid-template-columns: 1fr
  }

  .md-diff-grid,
  .md-cred-grid,
  .md-dsi-grid {
    grid-template-columns: 1fr
  }

  .md-section h2 {
    font-size: 26px
  }

  .md-hero h1 {
    font-size: 28px
  }

  .md-pills {
    flex-direction: column;
    width: fit-content
  }

  .md-cta-buttons {
    flex-direction: column;
    align-items: center
  }
}

/* ─── SCHÉMA ARCHITECTURE SIH / SANS SIH ─────────────────────── */
.pt-schema-section {
  background: var(--slate-50, #f8fafc);
  border-top: 1px solid var(--slate-100, #f1f5f9);
  border-bottom: 1px solid var(--slate-100, #f1f5f9)
}

.pt-schema-figure {
  margin: 32px auto 0;
  max-width: 1100px;
  border-radius: 16px;
  overflow: hidden;
  background: #eaf3fb;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
  border: 1px solid rgba(15, 23, 42, .06)
}

.pt-schema-figure img {
  display: block;
  width: 100%;
  height: auto
}

/* ─── SIX SCÉNARIOS HERO — compact, all 6 visible in one slide ── */
.ucx-hero {
  position: relative;
  padding: clamp(64px, 9vw, 112px) 0;
  background:
    radial-gradient(ellipse 110% 70% at 50% 0%, #0d1930 0%, #080d1a 55%, #05070f 100%);
  overflow: hidden;
  zoom: 0.8;
}
.ucx-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 780px 460px at 15% -10%, rgba(14,177,184,0.15), transparent 62%),
    radial-gradient(ellipse 680px 420px at 88% 110%, rgba(99,102,241,0.12), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.ucx-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1.2px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 40%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 40%, #000 30%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}
.ucx-hero > .container {
  position: relative;
  z-index: 1;
}

.ucx-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}
.ucx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(14,177,184,0.18), rgba(96,165,250,0.12));
  border: 1px solid rgba(14,177,184,0.35);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-400);
  margin-bottom: 20px;
  box-shadow: 0 0 24px -6px rgba(14,177,184,0.35);
}
.ucx-eyebrow svg { width: 13px; height: 13px; }
.ucx-title {
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.ucx-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--teal-400) 0%, #60a5fa 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Carousel stage (Lundev-style) ─── */
.ucx-stage {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  outline: none;
}
.ucx-stage:focus-visible {
  box-shadow: 0 0 0 3px rgba(14,177,184,0.25);
  border-radius: 22px;
}

/* ─── Slide card ─── */
.ucx-slide {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
  min-height: 560px;
  animation: ucx-slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ucx-slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Left text block */
.ucx-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px 0;
  position: relative;
}
.ucx-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ucx-accent, #0eb1b8);
  margin-bottom: 4px;
}
.ucx-kicker-num {
  padding: 4px 10px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--ucx-accent, #0eb1b8) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--ucx-accent, #0eb1b8) 45%, transparent);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ucx-kicker-label {
  opacity: 0.85;
}
.ucx-card-title {
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.ucx-card-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  letter-spacing: 0.005em;
}
.ucx-callout-text {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  margin: 0;
  max-width: 500px;
}
.ucx-emotion {
  margin: 0;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  font-style: italic;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  border-left: 3px solid color-mix(in oklab, var(--ucx-accent, #0eb1b8) 70%, transparent);
  position: relative;
  max-width: 520px;
}
.ucx-emotion::before {
  content: '"';
  position: absolute;
  top: -8px;
  right: 14px;
  font-size: 48px;
  color: color-mix(in oklab, var(--ucx-accent, #0eb1b8) 38%, transparent);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}
.ucx-counter {
  margin-top: 8px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  font-variant-numeric: tabular-nums;
}
.ucx-counter-current {
  color: var(--ucx-accent, #0eb1b8);
  font-size: 18px;
}

/* Right hero visual */
.ucx-hero-visual {
  position: relative;
}
.ucx-hero-photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #0a1020;
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,0.7),
    0 0 80px -14px color-mix(in oklab, var(--ucx-accent, #0eb1b8) 45%, transparent),
    0 0 0 1px color-mix(in oklab, var(--ucx-accent, #0eb1b8) 25%, rgba(255,255,255,0.1));
  transform: perspective(1200px) rotateY(-5deg) rotateX(1.5deg);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ucx-hero-photo:hover {
  transform: perspective(1200px) rotateY(-2deg) rotateX(0.5deg) scale(1.015);
}

/* ── Photo Overlay ── */
.ucx-photo-overlay {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 10;
  pointer-events: none;
  animation: ucx-overlay-in 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.ucx-overlay-badge {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.ucx-overlay-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ucx-overlay-icon svg {
  width: 22px;
  height: 22px;
}

.ucx-overlay-info {
  display: flex;
  flex-direction: column;
}

.ucx-overlay-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  line-height: 1;
  margin-bottom: 4px;
}

.ucx-overlay-value {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
}

.ucx-overlay-status {
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
}

.ucx-overlay-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: ucx-dot-pulse 2s infinite;
}

@keyframes ucx-dot-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes ucx-overlay-in {
  from { opacity: 0; transform: translateY(-10px) translateX(10px); }
  to { opacity: 1; transform: translateY(0) translateX(0); }
}
.ucx-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: ucx-zoom 8s ease-out both;
}
@keyframes ucx-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.ucx-photo-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
}
.ucx-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  box-shadow:
    0 8px 24px -4px color-mix(in oklab, var(--ucx-accent, #0eb1b8) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.25);
  z-index: 2;
}

/* Side nav arrows (right of hero photo, Lundev-style) */
.ucx-side-nav {
  position: absolute;
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
}
.ucx-nav-sq {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(10, 14, 28, 0.85);
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 200ms, border-color 200ms, color 200ms, transform 150ms, box-shadow 200ms;
}
.ucx-nav-sq svg { width: 18px; height: 18px; }
.ucx-nav-sq:hover {
  background: color-mix(in oklab, var(--ucx-accent, #0eb1b8) 40%, rgba(10,14,28,0.9));
  border-color: var(--ucx-accent, #0eb1b8);
  color: #fff;
  box-shadow: 0 0 18px -2px color-mix(in oklab, var(--ucx-accent, #0eb1b8) 60%, transparent);
}
.ucx-nav-sq:active { transform: scale(0.94); }
.ucx-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 520px;
}
.ucx-mod-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ucx-accent, #0eb1b8) 8%, rgba(255,255,255,0.04));
  border: 1px solid color-mix(in oklab, var(--ucx-accent, #0eb1b8) 30%, rgba(255,255,255,0.1));
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.02em;
}
.ucx-mod-chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ucx-accent, #0eb1b8);
  box-shadow: 0 0 6px color-mix(in oklab, var(--ucx-accent, #0eb1b8) 60%, transparent);
}

/* ─── Thumbnail strip (Lundev-style) ─── */
.ucx-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 56px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.ucx-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #0a1020;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0;
  font-family: inherit;
  transition:
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 400ms ease,
    border-color 400ms ease,
    filter 400ms ease;
  filter: brightness(0.7) saturate(0.7);
}
.ucx-thumb:hover {
  filter: brightness(0.95) saturate(0.9);
  transform: translateY(-3px);
}
.ucx-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ucx-thumb:hover img { transform: scale(1.06); }
.ucx-thumb-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
}
.ucx-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.95) 100%);
  pointer-events: none;
}
.ucx-thumb-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
  color: #fff;
  text-align: left;
}
.ucx-thumb-num {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ucx-thumb-accent, #0eb1b8);
  font-variant-numeric: tabular-nums;
}
.ucx-thumb-tag {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.005em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  text-transform: capitalize;
}
.ucx-thumb.is-active {
  filter: brightness(1) saturate(1.05);
  transform: translateY(-8px) scale(1.04);
  border-color: var(--ucx-thumb-accent, #0eb1b8);
  box-shadow:
    0 24px 60px -14px rgba(0,0,0,0.75),
    0 0 40px -6px color-mix(in oklab, var(--ucx-thumb-accent, #0eb1b8) 65%, transparent),
    0 0 0 2px var(--ucx-thumb-accent, #0eb1b8);
}
.ucx-thumb.is-active .ucx-thumb-num {
  color: #fff;
}
.ucx-thumb.is-active::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ucx-thumb-accent, #0eb1b8);
  box-shadow: 0 0 12px var(--ucx-thumb-accent, #0eb1b8);
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .ucx-slide { gap: 36px; }
  .ucx-thumbs { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .ucx-side-nav { right: -16px; }
}
@media (max-width: 900px) {
  .ucx-slide {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: auto;
  }
  .ucx-hero-photo {
    transform: none;
    aspect-ratio: 16/10;
  }
  .ucx-hero-photo:hover { transform: scale(1.01); }
  .ucx-side-nav {
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: center;
    margin-top: 16px;
  }
  .ucx-thumbs {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 40px;
  }
}
@media (max-width: 560px) {
  .ucx-text { gap: 14px; }
  .ucx-card-title { font-size: clamp(28px, 8vw, 40px); }
  .ucx-callout-text { font-size: 15px; }
  .ucx-thumbs {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 24px;
    max-width: 320px;
  }
  .ucx-thumb { aspect-ratio: 4 / 5; border-radius: 10px; }
  .ucx-thumb-label { left: 6px; right: 6px; bottom: 6px; gap: 1px; }
  .ucx-thumb-num { font-size: 9px; letter-spacing: 0.08em; }
  .ucx-thumb-tag { font-size: 10px; }
  .ucx-thumb.is-active { transform: translateY(-4px) scale(1.02); }
}

/* ─── ARCHITECTURE D'ORCHESTRATION (iframe HTML mockup) ───────── */
.pt-archi-section {
  background: #ffffff;
  border-top: 1px solid var(--slate-100, #f1f5f9);
  border-bottom: 1px solid var(--slate-100, #f1f5f9);
  padding: clamp(56px, 8vw, 96px) 0;
}
/* Breakout : la section s'affranchit du container 1200px pour utiliser toute la largeur utile */
.pt-archi-section > .container {
  max-width: min(1800px, calc(100vw - 32px));
  padding: 0 16px;
}
@media (max-width: 720px) {
  .pt-archi-section > .container { padding: 0 12px; }
}
.pt-archi-frame {
  --archi-w: 1400px;
  --archi-h: 1000px;
  position: relative;
  margin: 40px auto 0;
  max-width: 1800px;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #f7fafb;
  box-shadow:
    0 30px 80px -30px rgba(15, 23, 42, 0.35),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  aspect-ratio: 1400 / 1000;
  container-type: inline-size;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.pt-archi-section.is-visible .pt-archi-frame {
  opacity: 1;
  transform: none;
}
.pt-archi-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--archi-w);
  height: var(--archi-h);
  border: 0;
  display: block;
  background: #f7fafb;
  transform-origin: top left;
  transform: scale(tan(atan2(100cqw, var(--archi-w))));
}
@media (max-width: 560px) {
  .pt-archi-frame { border-radius: 12px; }
}

/* ─── MED SCHEMA · RTLS WRAP (transparent, flush with dark bg) ── */
.med-schema-rtls-wrap {
  margin: 48px auto 0;
  max-width: 1400px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}

.med-schema-rtls-wrap.in {
  opacity: 1;
  transform: none;
}

/* ─── RTLS HORIZONTAL FLOW SCHEMA (dark · teal accent) ────────── */
.rtls-section {
  --rtls-ink: #E2E8F0;
  --rtls-ink-soft: rgba(226, 232, 240, .72);
  --rtls-muted: rgba(148, 163, 184, .75);
  --rtls-paper: rgba(17, 22, 43, .55);
  --rtls-rule: rgba(103, 232, 249, .18);
  --rtls-blue: #67E8F9;
  --rtls-blue-deep: #22D3EE;
  --rtls-blue-soft: rgba(34, 211, 238, .1);
  --rtls-green: #34D399;
  --rtls-green-deep: #6EE7B7;
  --rtls-green-soft: rgba(52, 211, 153, .16);
  --rtls-red: #FB7185;
  --rtls-red-soft: rgba(251, 113, 133, .12);
  --rtls-gold: #FBBF24;
  background: transparent;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--rtls-ink);
  -webkit-font-smoothing: antialiased;
}

.rtls-section *,
.rtls-section *::before,
.rtls-section *::after {
  box-sizing: border-box;
}

.rtls-wrap {
  max-width: 1400px;
  margin: 0 auto;
}

.rtls-header {
  display: none;
}

.rtls-kicker {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rtls-blue);
  font-weight: 700;
  margin-bottom: 12px;
}

.rtls-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
}

.rtls-sub {
  font-size: 15px;
  color: var(--rtls-ink-soft);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
}

.rtls-scenario {
  background: linear-gradient(180deg, rgba(17, 22, 43, .7), rgba(8, 11, 26, .65));
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 24px;
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
  border: 1px solid var(--rtls-rule);
  position: relative;
}

.rtls-scenario--sans {
  border-top: 3px solid var(--rtls-red);
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 0 50px -30px rgba(251, 113, 133, .25);
}

.rtls-scenario--avec {
  border-top: 3px solid var(--rtls-green);
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(52, 211, 153, .2), inset 0 0 60px -24px rgba(52, 211, 153, .2);
}

.rtls-scenario-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  flex-wrap: wrap;
}

.rtls-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid transparent;
}

.rtls-scenario--sans .rtls-badge {
  background: var(--rtls-red-soft);
  color: var(--rtls-red);
  border-color: rgba(248, 113, 113, .3);
}

.rtls-scenario--avec .rtls-badge {
  background: var(--rtls-green-soft);
  color: var(--rtls-green-deep);
  border-color: rgba(45, 212, 191, .4);
}

.rtls-scenario-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.rtls-scenario-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--rtls-muted);
  margin-left: 8px;
}

.rtls-flow {
  display: grid;
  align-items: stretch;
  gap: 0;
}

.rtls-flow--sans {
  grid-template-columns: 1fr 48px 1fr 48px 1fr 48px 1fr;
}

.rtls-flow--avec {
  grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1.15fr 40px 1fr;
}

.rtls-node {
  background: linear-gradient(180deg, rgba(30, 27, 75, .6) 0%, rgba(12, 16, 35, .7) 100%);
  border: 1px solid rgba(103, 232, 249, .18);
  border-radius: 14px;
  padding: 22px 14px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 210px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.rtls-node:hover {
  border-color: rgba(103, 232, 249, .45);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(34, 211, 238, .3);
}

.rtls-node--sih {
  background: linear-gradient(180deg, rgba(251, 191, 36, .2) 0%, rgba(245, 158, 11, .06) 100%);
  border: 1px solid rgba(251, 191, 36, .55);
  position: relative;
  box-shadow: 0 0 34px -6px rgba(251, 191, 36, .45);
}

.rtls-node--sih::before {
  content: attr(data-key-label);
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #1A1208;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 0 20px -3px rgba(251, 191, 36, .7);
}

.rtls-node-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--rtls-blue);
  margin-bottom: 8px;
}

.rtls-node--sih .rtls-node-num {
  color: var(--rtls-gold);
}

.rtls-node-icon {
  width: 64px;
  height: 64px;
  background: radial-gradient(circle at 30% 20%, rgba(30, 41, 82, .95), rgba(8, 11, 26, .95));
  border: 1px solid rgba(103, 232, 249, .35);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 0 14px -4px rgba(103, 232, 249, .35);
  color: var(--rtls-blue);
}

.rtls-node--sih .rtls-node-icon {
  border-color: rgba(251, 191, 36, .6);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 0 14px -4px rgba(251, 191, 36, .5);
}

.rtls-node-icon svg {
  width: 38px;
  height: 38px;
}

.rtls-node-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 6px;
}

.rtls-node-desc {
  font-size: 12px;
  color: var(--rtls-ink-soft);
  line-height: 1.4;
}

.rtls-node-desc strong {
  color: #fff;
  font-weight: 700;
}

.rtls-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rtls-arrow svg {
  width: 100%;
  height: 30px;
}

.rtls-arrow-line {
  stroke: rgba(103, 232, 249, .65);
  stroke-width: 2.5;
  fill: none;
}

.rtls-arrow-head {
  fill: rgba(103, 232, 249, .85);
}

.rtls-flow--sans .rtls-arrow-line {
  stroke: rgba(251, 113, 133, .55);
}

.rtls-flow--sans .rtls-arrow-head {
  fill: rgba(251, 113, 133, .75);
}

.rtls-node--final-sans {
  background: linear-gradient(180deg, rgba(251, 113, 133, .15) 0%, rgba(76, 15, 25, .3) 100%);
  border: 1px dashed rgba(251, 113, 133, .55);
}

.rtls-node--final-sans .rtls-node-icon {
  color: var(--rtls-red);
  border-color: rgba(251, 113, 133, .45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 0 14px -4px rgba(251, 113, 133, .4);
}

.rtls-node--final-sans .rtls-node-num {
  color: var(--rtls-red);
}

.rtls-node--final-avec {
  background: linear-gradient(180deg, rgba(52, 211, 153, .22) 0%, rgba(8, 46, 36, .4) 100%);
  border: 1px solid rgba(110, 231, 183, .55);
  box-shadow: 0 0 28px -6px rgba(52, 211, 153, .5);
}

.rtls-node--final-avec .rtls-node-icon {
  color: var(--rtls-green-deep);
  border-color: rgba(110, 231, 183, .55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 0 14px -4px rgba(110, 231, 183, .5);
}

.rtls-node--final-avec .rtls-node-num {
  color: var(--rtls-green-deep);
}

.rtls-outcome {
  margin-top: 22px;
  padding: 16px 22px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
}

.rtls-scenario--sans .rtls-outcome {
  background: rgba(251, 113, 133, .1);
  color: rgba(254, 226, 226, .92);
  border-color: rgba(251, 113, 133, .25);
}

.rtls-scenario--avec .rtls-outcome {
  background: rgba(52, 211, 153, .12);
  color: rgba(209, 250, 229, .95);
  border-color: rgba(52, 211, 153, .3);
}

.rtls-outcome-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #0B1524;
  flex-shrink: 0;
}

.rtls-scenario--sans .rtls-outcome-icon {
  background: var(--rtls-red);
  color: #fff;
}

.rtls-scenario--avec .rtls-outcome-icon {
  background: linear-gradient(135deg, #6EE7B7, #10B981);
}

.rtls-outcome strong {
  font-weight: 700;
  font-style: italic;
  color: #fff;
}

.rtls-footnote {
  text-align: center;
  margin-top: 24px;
  font-size: 12px;
  color: var(--rtls-muted);
  letter-spacing: 0.04em;
}

.rtls-footnote strong {
  color: rgba(226, 232, 240, .9);
  font-weight: 600;
}

@media (max-width: 1100px) {

  .rtls-flow--sans,
  .rtls-flow--avec {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .rtls-arrow {
    display: none;
  }

  .rtls-node {
    min-height: auto;
    padding: 18px 14px;
  }
}

@media (max-width: 640px) {
  .rtls-scenario {
    padding: 20px 18px;
  }

  .rtls-scenario-title {
    font-size: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   USE CASES MIND-BLOWING — Section « Six histoires MonSéjour »
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Section wrapper ───────────────────────────────────── */

.uc-section {
  position: relative;
  padding: clamp(72px, 10vw, 128px) 0;
  background:
    radial-gradient(ellipse 140% 80% at 50% 0%, #0b1428 0%, #070b18 55%, #04070e 100%);
  overflow: hidden;
}

.uc-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 500px at 18% -8%, rgba(14,177,184,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 700px 420px at 88% 110%, rgba(99,102,241,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 500px 320px at 50% 50%, rgba(236,72,153,0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: uc-bg-drift 24s ease-in-out infinite;
}

@keyframes uc-bg-drift {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(30px, -20px); }
}

.uc-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1.2px),
    linear-gradient(to bottom, transparent 0%, transparent 70%, rgba(0,0,0,0.4) 100%);
  background-size: 32px 32px, 100% 100%;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 40%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 40%, #000 30%, transparent 90%);
}

/* ─── Section header ────────────────────────────────────── */

.uc-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(48px, 7vw, 80px);
  position: relative;
  z-index: 2;
}

.uc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(14,177,184,0.18), rgba(96,165,250,0.12));
  border: 1px solid rgba(14,177,184,0.35);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-400);
  margin-bottom: 24px;
  box-shadow: 0 0 24px -6px rgba(14,177,184,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
}

.uc-eyebrow svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.uc-title {
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: 18px;
  text-wrap: balance;
}

.uc-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--teal-400) 0%, #60a5fa 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.uc-lede {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  color: rgba(255,255,255,0.58);
  max-width: 620px;
  margin: 0 auto;
}

/* ─── Grid ──────────────────────────────────────────────── */

.uc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1100px) {
  .uc-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 640px) {
  .uc-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ─── Card ──────────────────────────────────────────────── */

.uc-card {
  position: relative;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  overflow: hidden;
  outline: none;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 550ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 350ms ease,
    border-color 350ms ease,
    background 350ms ease;
}

/* Soft accent glow behind card */
.uc-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(120% 60% at 50% 0%, var(--uc-accent, var(--teal-500)) 0%, transparent 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  mix-blend-mode: screen;
  z-index: 1;
}

.uc-card:hover::before,
.uc-card.is-open::before {
  opacity: 0.14;
}

.uc-section.is-visible .uc-card {
  opacity: 1;
  transform: translateY(0);
}

.uc-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 32px 80px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.14),
    0 0 40px -8px color-mix(in oklab, var(--uc-accent, #0eb1b8) 45%, transparent);
  border-color: rgba(255,255,255,0.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
}

.uc-card.is-open {
  transform: translateY(-4px);
  box-shadow:
    0 32px 80px -18px rgba(0,0,0,0.75),
    0 0 0 1.5px var(--uc-accent, var(--teal-500)),
    0 0 60px -10px color-mix(in oklab, var(--uc-accent, #0eb1b8) 55%, transparent);
  border-color: transparent;
}

/* Accent line at bottom */
.uc-accent-line {
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--uc-accent, var(--teal-500)) 20%,
    var(--uc-accent, var(--teal-500)) 80%,
    transparent 100%);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity 400ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uc-card:hover .uc-accent-line,
.uc-card.is-open .uc-accent-line {
  opacity: 1;
  transform: scaleX(1);
}

/* ─── Photo zone ────────────────────────────────────────── */

.uc-photo-zone {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 2;
}

.uc-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 400ms ease;
  filter: saturate(0.92) contrast(1.02);
}

.uc-card:hover .uc-photo-img,
.uc-card.is-open .uc-photo-img {
  transform: scale(1.08);
  filter: saturate(1.05) contrast(1.05);
}

.uc-photo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.uc-photo-fallback::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);
}

/* Gradient overlay — richer, vignette + bottom darkening */
.uc-photo-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 25%, rgba(0,0,0,0.55) 68%, rgba(10,16,30,0.95) 100%),
    radial-gradient(ellipse 120% 80% at 50% 100%, transparent 40%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

/* Top-left gradient for badge readability */
.uc-photo-zone::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 50%; height: 60%;
  background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(0,0,0,0.5) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}

/* Number badge — top left with accent glow */
.uc-photo-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow:
    0 4px 14px -2px color-mix(in oklab, var(--uc-accent, #0eb1b8) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.25);
  z-index: 3;
  backdrop-filter: blur(4px);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.uc-card:hover .uc-photo-badge {
  transform: translateY(-2px) scale(1.04);
}

/* Callout text — bottom of photo */
.uc-photo-callout {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  font-size: 13.5px;
  font-weight: 700;
  font-style: italic;
  color: rgba(255,255,255,0.95);
  line-height: 1.45;
  text-shadow: 0 1px 6px rgba(0,0,0,0.65);
  letter-spacing: -0.005em;
  transform: translateY(4px);
  opacity: 0.92;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms ease;
  z-index: 3;
}
.uc-card:hover .uc-photo-callout,
.uc-card.is-open .uc-photo-callout {
  transform: translateY(0);
  opacity: 1;
}

/* Subtle accent divider under photo */
.uc-photo-zone::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--uc-accent, #0eb1b8) 40%, transparent) 50%,
    transparent 100%);
  z-index: 3;
}

/* ─── Content zone ──────────────────────────────────────── */

.uc-content-zone {
  padding: 22px 24px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 2;
}

.uc-content-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.uc-card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.28;
  color: #fff;
  letter-spacing: -0.025em;
  transition: color 300ms ease;
}

.uc-card:hover .uc-card-title {
  color: color-mix(in oklab, #fff 92%, var(--uc-accent, #0eb1b8) 8%);
}

.uc-card-subtitle {
  font-size: 12.5px;
  color: rgba(255,255,255,0.48);
  margin-top: 4px;
  font-style: italic;
  letter-spacing: 0.005em;
}

/* Chevron toggle */
.uc-chevron {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
  transition:
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
    background 250ms ease,
    color 250ms ease,
    border-color 250ms ease,
    box-shadow 250ms ease;
}

.uc-card:hover .uc-chevron {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
}

.uc-card.is-open .uc-chevron {
  transform: rotate(180deg);
  background: color-mix(in oklab, var(--uc-accent, var(--teal-500)) 18%, transparent);
  border-color: var(--uc-accent, var(--teal-500));
  color: var(--uc-accent, var(--teal-500));
  box-shadow: 0 0 16px -2px color-mix(in oklab, var(--uc-accent, #0eb1b8) 60%, transparent);
}

/* ─── Module chips ──────────────────────────────────────── */

.uc-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 20px;
}

.uc-module-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--uc-accent, var(--teal-500)) 8%, rgba(255,255,255,0.04)),
      rgba(255,255,255,0.02));
  border: 1px solid color-mix(in oklab, var(--uc-accent, var(--teal-500)) 20%, rgba(255,255,255,0.08));
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.03em;
  transition: border-color 300ms ease, color 300ms ease, background 300ms ease;
}

.uc-card:hover .uc-module-chip {
  color: rgba(255,255,255,0.88);
  border-color: color-mix(in oklab, var(--uc-accent, var(--teal-500)) 35%, rgba(255,255,255,0.12));
}

.uc-module-chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--uc-accent, var(--teal-500));
  flex-shrink: 0;
  opacity: 0.9;
  box-shadow: 0 0 6px color-mix(in oklab, var(--uc-accent, #0eb1b8) 60%, transparent);
}

/* ─── Expandable panel ──────────────────────────────────── */

.uc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uc-card.is-open .uc-panel {
  max-height: 900px;
}

.uc-panel-inner {
  padding: 0 0 26px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--uc-accent, var(--teal-500)) 3%, transparent),
      transparent 40%);
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
}

.uc-block {
  margin-top: 22px;
}

.uc-block-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.uc-block-label svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.uc-block--emotion .uc-block-label { color: #93c5fd; }
.uc-block--declic  .uc-block-label { color: #34d399; }

.uc-block-quote {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
  font-style: italic;
  padding: 13px 16px;
  background: linear-gradient(180deg, rgba(147,197,253,0.08), rgba(147,197,253,0.03));
  border-radius: 12px;
  border-left: 3px solid rgba(147,197,253,0.45);
  position: relative;
}
.uc-block-quote::before {
  content: '"';
  position: absolute;
  top: -6px;
  right: 10px;
  font-size: 42px;
  color: rgba(147,197,253,0.18);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

.uc-block-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.uc-block-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.68);
  padding: 4px 0;
  transition: color 200ms ease, transform 200ms ease;
}

.uc-block-bullets li:hover {
  color: rgba(255,255,255,0.88);
  transform: translateX(2px);
}

.uc-block-bullets li::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  background:
    linear-gradient(135deg, rgba(16,185,129,0.25), rgba(16,185,129,0.08))
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center/11px no-repeat;
  border: 1px solid rgba(52,211,153,0.4);
  box-shadow: 0 0 10px -2px rgba(52,211,153,0.3);
}



.uc-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 500px at 20% -10%, rgba(14,177,184,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 700px 400px at 85% 110%, rgba(37,99,235,0.10) 0%, transparent 55%);
  pointer-events: none;
}

/* Subtle dot grid */
.uc-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.uc-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 72px;
  position: relative;
  z-index: 2;
}

.uc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14,177,184,0.12);
  border: 1px solid rgba(14,177,184,0.25);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-400);
  margin-bottom: 24px;
}

.uc-eyebrow svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.uc-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 16px;
}

.uc-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--teal-400) 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.uc-lede {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  max-width: 600px;
  margin: 0 auto;
}

/* ─── Grid 6 cartes ─────────────────────────────────────── */

.uc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1100px) {
  .uc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .uc-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Carte fermée ──────────────────────────────────────── */

.uc-card {
  position: relative;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1),
              background 300ms;
  overflow: hidden;
  outline: none;
}

.uc-card:hover,
.uc-card:focus-visible {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.12);
}

.uc-card.is-open {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1.5px var(--uc-accent, var(--teal-500));
  transform: translateY(-2px);
}

/* Color accent per card — injected via inline var */
.uc-card-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--uc-accent, var(--teal-500));
  border-radius: 20px 20px 0 0;
  opacity: 0.7;
  transition: opacity 300ms;
}

.uc-card:hover .uc-card-accent-bar,
.uc-card.is-open .uc-card-accent-bar {
  opacity: 1;
}

/* Glow blob */
.uc-card-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--uc-accent, var(--teal-500)) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 50%;
  transition: opacity 400ms;
  filter: blur(60px);
}

.uc-card:hover .uc-card-glow,
.uc-card.is-open .uc-card-glow {
  opacity: 0.07;
}

/* ─── Header visible toujours ───────────────────────────── */

.uc-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px 24px 22px;
}

.uc-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--uc-accent, var(--teal-400));
  transition: background 300ms, transform 300ms;
}

.uc-card:hover .uc-icon-box,
.uc-card.is-open .uc-icon-box {
  background: rgba(255,255,255,0.11);
  transform: scale(1.05);
}

.uc-icon-box svg {
  width: 26px;
  height: 26px;
}

.uc-card-meta {
  flex: 1;
  min-width: 0;
}

.uc-card-number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uc-accent, var(--teal-400));
  margin-bottom: 5px;
  opacity: 0.8;
}

.uc-card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.02em;
}

.uc-card-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
  font-style: italic;
}

.uc-chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              background 200ms, color 200ms;
}

.uc-card.is-open .uc-chevron {
  transform: rotate(180deg);
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ─── Callout pill en bas du header ────────────────────── */

.uc-callout {
  margin: 0 24px 20px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--uc-accent, var(--teal-500));
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}

/* ─── Modules chips ─────────────────────────────────────── */

.uc-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 24px 22px;
}

.uc-module-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}

.uc-module-chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--uc-accent, var(--teal-500));
  flex-shrink: 0;
}

/* ─── Panneau expandable ────────────────────────────────── */

.uc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uc-card.is-open .uc-panel {
  max-height: 800px;
}

.uc-panel-inner {
  padding: 0 24px 28px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* Deux blocs: émotion patient + déclic directeur */

.uc-block {
  margin-top: 22px;
}

.uc-block-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.uc-block-label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.uc-block--emotion .uc-block-label {
  color: #93c5fd;
}

.uc-block--declic .uc-block-label {
  color: var(--green-500);
}

.uc-block-quote {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  font-style: italic;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  border-left: 2px solid rgba(147,197,253,0.35);
}

.uc-block-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.uc-block-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.6);
}

.uc-block-bullets li::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ─── Reveal animation ──────────────────────────────────── */

.uc-section.is-visible .uc-card {
  opacity: 1;
  transform: translateY(0);
}

.uc-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 300ms,
              background 300ms;
}

/* When open, don't let reveal override */
.uc-card.is-open {
  transform: translateY(-2px) !important;
}

.uc-section.is-visible .uc-card:hover {
  transform: translateY(-4px) !important;
}
/* ─── Page Infirmiers ────────────────────────────────────── */

.inf-hero .med-pills {
  margin-top: 24px;
}

.inf-pill-violet {
  background: rgba(124, 58, 237, 0.1);
  color: #7C3AED;
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.inf-mobile-container {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.inf-mobile-container .phone-bezel {
  transform: rotateY(-5deg) rotateX(2deg);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.inf-mobile-container:hover .phone-bezel {
  transform: rotateY(0deg) rotateX(0deg);
}

.inf-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .inf-cases-grid {
    grid-template-columns: 1fr;
  }
}

.inf-case-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}

.inf-case-card.in {
  opacity: 1;
  transform: translateY(0);
}

.inf-case-card:hover {
  border-color: var(--inf-violet);
  box-shadow: 0 12px 30px -10px rgba(124, 58, 237, 0.12);
}

.inf-case-tag {
  font-size: 11px;
  font-weight: 800;
  color: var(--inf-violet);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.inf-case-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.inf-case-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.1);
  color: var(--inf-violet);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inf-case-titles h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--slate-900);
}

.inf-case-titles h4 {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-500);
  margin-top: 4px;
}

.inf-case-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.inf-case-block-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--slate-400);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.inf-case-block p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate-600);
}

.inf-case-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--slate-100);
}

.inf-case-emotion {
  padding-right: 12px;
  border-right: 1px solid var(--slate-100);
}

.inf-case-emotion p {
  font-size: 13.5px;
  color: var(--slate-700);
  line-height: 1.5;
}

.inf-case-declic p {
  font-size: 13.5px;
  color: var(--teal-700);
  font-weight: 500;
  line-height: 1.5;
}

.inf-case-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.inf-case-module {
  font-size: 11px;
  background: var(--slate-50);
  color: var(--slate-500);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
}

.inf-compliance-card {
  background: var(--slate-900);
  border-radius: 24px;
  padding: 48px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.inf-compliance-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: var(--inf-violet);
  filter: blur(100px);
  opacity: 0.2;
}

.inf-compliance-head h3 {
  font-size: 28px;
  margin-top: 16px;
  color: #fff;
}

.inf-compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.inf-compliance-item {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}

.inf-compliance-item svg {
  color: var(--inf-violet);
  flex-shrink: 0;
}

/* ─── Page Infirmiers (Marketing v1) ────────────────────── */

.inf-hero-visual-wrap {
  container-type: inline-size;
  --inf-desk-w:     min(100%, 560px);
  --inf-phone-w:    min(36%, 210px);
  --inf-phone-big-w:min(62%, 300px);
  --inf-desk-big-w: min(100%, 640px);
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  max-height: 640px;
  min-height: 280px;
  filter:
    drop-shadow(0 30px 50px rgba(7, 12, 24, 0.25))
    drop-shadow(0 0 40px color-mix(in oklab, var(--inf-violet, #7c3aed) 18%, transparent));
}

.inf-hv-slide {
  position: absolute;
  inset: 0 0 44px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(28px) scale(0.96);
  filter: blur(4px);
  transition:
    opacity 640ms cubic-bezier(.22,1,.36,1),
    transform 640ms cubic-bezier(.22,1,.36,1),
    filter 520ms ease;
  pointer-events: none;
}
.inf-hv-combo   .inf-hv-slide--combo,
.inf-hv-phone   .inf-hv-slide--phone,
.inf-hv-desktop .inf-hv-slide--desktop {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

/* Big phone (solo) */
.inf-phone-big {
  container-type: inline-size;
  width: var(--inf-phone-big-w);
  aspect-ratio: 390 / 725;
  position: relative;
}
.inf-phone-big .phone-bezel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 14cqw;
}
.inf-phone-big .phone-bezel::before { display: none; }
.inf-phone-big .phone-bezel iframe {
  width: 390px;
  height: 725px;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(tan(atan2(100cqw, 390px)));
  transform-origin: top left;
}

/* Big desktop (solo) */
.inf-desktop-big {
  container-type: inline-size;
  width: var(--inf-desk-big-w);
  aspect-ratio: 1280 / 800;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 30px 60px -18px rgba(7, 12, 24, 0.3),
    0 8px 18px -6px rgba(7, 12, 24, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.inf-desktop-big .inf-device-bar {
  height: 30px;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.inf-desktop-big iframe {
  width: 1280px;
  height: calc(800px - 30px);
  border: 0;
  display: block;
  transform: scale(tan(atan2(100cqw, 1280px)));
  transform-origin: top left;
}

/* Switch Combo / App / Desktop */
.inf-hv-switch {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  box-shadow:
    0 10px 28px -12px rgba(7, 12, 24, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  z-index: 4;
}
.inf-hv-switch-btn {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(15, 23, 42, 0.55);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.inf-hv-switch-btn:hover { color: rgba(15, 23, 42, 0.8); }
.inf-hv-switch-btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--inf-violet, #7c3aed), #6d28d9);
  box-shadow:
    0 6px 14px -4px color-mix(in oklab, var(--inf-violet, #7c3aed) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.inf-hv-switch-btn:focus-visible {
  outline: 2px solid var(--inf-violet, #7c3aed);
  outline-offset: 3px;
}

/* Desktop laptop-like frame */
.inf-desktop-mini {
  container-type: inline-size;
  position: absolute;
  top: 0;
  right: 0;
  width: var(--inf-desk-w);
  aspect-ratio: 1280 / 800;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 30px 60px -18px rgba(7, 12, 24, 0.28),
    0 8px 18px -6px rgba(7, 12, 24, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.inf-device-bar {
  height: 30px;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.inf-desktop-mini iframe {
  width: 1280px;
  height: calc(800px - 30px);
  border: 0;
  display: block;
  transform: scale(tan(atan2(100cqw, 1280px)));
  transform-origin: top left;
}

/* Phone overlay — native 390×725 scaled */
.inf-phone-mini {
  container-type: inline-size;
  position: absolute;
  bottom: 0;
  left: -20px;
  width: var(--inf-phone-w);
  aspect-ratio: 390 / 725;
  z-index: 2;
}
.inf-phone-mini .phone-bezel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 11cqw;
}
.inf-phone-mini .phone-bezel::before {
  display: none;
}
.inf-phone-mini .phone-bezel iframe {
  width: 390px;
  height: 725px;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(tan(atan2(100cqw, 390px)));
  transform-origin: top left;
}

@media (max-width: 640px) {
  .inf-phone-mini { left: -8px; }
}

/* Constat / Stats */
.inf-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.inf-stat-card {
  background: #fff;
  padding: 32px;
  border-radius: 16px;
  border: 1px solid var(--slate-100);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
}

.inf-stat-card.in { opacity: 1; transform: translateY(0); }

.inf-stat-num {
  font-size: 40px;
  font-weight: 800;
  color: var(--inf-violet);
  margin-bottom: 8px;
}

.inf-stat-label {
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 12px;
}

.inf-stat-desc {
  font-size: 14px;
  color: var(--slate-500);
  line-height: 1.5;
}

/* Disciplines */
.inf-disciplines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.inf-discipline-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  border-left: 4px solid var(--inf-violet);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  opacity: 0;
  transform: translateX(-10px);
}

.inf-discipline-card.in { opacity: 1; transform: translateX(0); }

.inf-discipline-idx {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--inf-violet);
  margin-bottom: 12px;
}

.inf-discipline-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.inf-discipline-card p {
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.5;
}

/* Variants */
.inf-variants-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.inf-variant-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  padding: 32px 24px;
  border-radius: 16px;
  text-align: center;
  transition: all 0.3s ease;
  opacity: 0;
}

.inf-variant-card.in { opacity: 1; }

.inf-variant-card:hover {
  border-color: var(--inf-violet);
  transform: translateY(-4px);
}

.inf-variant-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.inf-variant-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.inf-variant-card p {
  font-size: 13px;
  color: var(--slate-500);
}

/* ROI */
.inf-roi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.inf-roi-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 32px;
  border-radius: 20px;
  opacity: 0;
}

.inf-roi-card.in { opacity: 1; }

.inf-roi-val {
  display: inline-block;
  background: var(--inf-violet);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.inf-roi-card h3 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 12px;
}

.inf-roi-card p {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  line-height: 1.6;
}

/* Features — cards avec photo + icon */
.inf-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.inf-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.22,1,.36,1), box-shadow 280ms ease;
  box-shadow:
    0 1px 2px rgba(7, 12, 24, 0.04),
    0 8px 22px -14px rgba(7, 12, 24, 0.18);
}
.inf-feature-card.in { opacity: 1; transform: translateY(0); }
.inf-feature-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(7, 12, 24, 0.06),
    0 20px 40px -18px rgba(7, 12, 24, 0.25),
    0 0 0 1px color-mix(in oklab, var(--inf-violet, #7c3aed) 18%, transparent);
}

.inf-feature-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
}
.inf-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(.22,1,.36,1);
}
.inf-feature-card:hover .inf-feature-media img {
  transform: scale(1.06);
}
.inf-feature-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, 0.45) 100%);
  pointer-events: none;
}

.inf-feature-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.inf-feature-icon {
  position: absolute;
  bottom: -20px;
  right: 18px;
  z-index: 3;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--inf-violet, #7c3aed), #6d28d9);
  color: #fff;
  border-radius: 14px;
  box-shadow:
    0 10px 22px -6px color-mix(in oklab, var(--inf-violet, #7c3aed) 50%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.inf-feature-body {
  padding: 28px 22px 24px;
}

.inf-feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.inf-feature-card p {
  font-size: 14px;
  color: var(--slate-500);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 980px) {
  .inf-features-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .inf-features-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Not Product Table */
.inf-not-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 24px;
  padding: 48px;
}

.inf-not-table {
  margin-top: 32px;
  border: 1px solid var(--slate-100);
  border-radius: 12px;
  overflow: hidden;
}

.inf-not-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--slate-100);
}

.inf-not-header {
  background: var(--slate-50);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--slate-400);
  padding: 12px 24px;
}

.inf-not-row:last-child { border-bottom: none; }

.inf-not-row > div {
  padding: 16px 24px;
  font-size: 14px;
}

.inf-not-cell-not {
  color: var(--slate-900);
  font-weight: 500;
}

.inf-not-cell-not span { color: var(--red-500); margin-right: 8px; }
.inf-not-cell-role span { color: var(--teal-500); margin-right: 8px; }

/* FAQ */
.inf-faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 40px;
}

.inf-faq-item h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
}

.inf-faq-item p {
  font-size: 15px;
  color: var(--slate-500);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .inf-stats-grid, .inf-variants-grid, .inf-roi-grid, .inf-features-grid {
    grid-template-columns: 1fr;
  }
  .inf-not-row { grid-template-columns: 1fr; }
  .inf-not-header { display: none; }
}

/* ─── Immersive Use Cases Slider (Light 2026) ────────────── */

.inf-immersive-uc {
  --uc-ink: #0b1020;
  --uc-muted: rgba(11, 16, 32, 0.58);
  --uc-surface: #ffffff;
  --uc-surface-2: #f5f3ff;
  --uc-border: rgba(11, 16, 32, 0.08);
  --uc-violet: var(--inf-violet, #7c3aed);
  --uc-teal: #0eb1b8;

  position: relative;
  background:
    radial-gradient(ellipse 1200px 500px at 85% -5%, color-mix(in oklab, var(--uc-violet) 14%, transparent), transparent 60%),
    radial-gradient(ellipse 900px 400px at 10% 100%, color-mix(in oklab, var(--uc-teal) 12%, transparent), transparent 55%),
    linear-gradient(180deg, #fbfaff 0%, #f4f2ff 100%);
  padding: 100px 0;
  color: var(--uc-ink);
  overflow: hidden;
}

.inf-uc-head-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.inf-uc-head-center .eyebrow,
.inf-uc-head-center > [class*="eyebrow"],
.inf-uc-head-center > span:first-child {
  align-self: center;
}

.inf-immersive-uc .section-head h2 {
  color: var(--uc-ink);
  font-size: clamp(30px, 4vw, 48px);
  max-width: 820px;
  margin: 0 auto;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-align: center;
}

.inf-immersive-uc .section-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--uc-violet) 0%, var(--uc-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.inf-uc-slider-main {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  margin-top: 60px;
  align-items: center;
  min-height: 600px;
}

@media (max-width: 1024px) {
  .inf-uc-slider-main {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.inf-uc-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  opacity: 0;
  transform: translateX(-14px);
  transition: all 0.5s ease;
}
.inf-uc-content.active {
  opacity: 1;
  transform: translateX(0);
}

/* ── Header cluster (num + category + title + tagline) ── */
.inf-uc-header { display: flex; flex-direction: column; gap: 14px; }

.inf-uc-num-tag {
  font-family: var(--font-mono), ui-monospace, monospace;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  align-self: flex-start;
}
.inf-uc-num {
  background: linear-gradient(135deg, var(--uc-violet), #6d28d9);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--uc-violet) 50%, transparent);
}
.inf-uc-cat {
  color: var(--uc-violet);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.inf-uc-title {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--uc-ink);
  margin: 0;
}

.inf-uc-tagline {
  font-size: 16px;
  line-height: 1.5;
  color: var(--uc-muted);
  font-style: italic;
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid color-mix(in oklab, var(--uc-violet) 40%, transparent);
}

.inf-uc-lede {
  font-size: 15.5px;
  color: rgba(11, 16, 32, 0.72);
  line-height: 1.6;
  margin: 0;
}

/* ── Modules row ── */
.inf-uc-modules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}
.inf-uc-modules-label {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(11, 16, 32, 0.38);
}
.inf-uc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.inf-uc-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--uc-border);
  background: var(--uc-surface);
  color: rgba(11, 16, 32, 0.75);
  transition: border-color 240ms, background 240ms;
}
.inf-uc-tag:hover {
  border-color: color-mix(in oklab, var(--uc-violet) 35%, transparent);
  background: color-mix(in oklab, var(--uc-violet) 5%, var(--uc-surface));
}

/* ── Testimonial card (teal accent) ── */
.inf-uc-testimonial,
.inf-uc-insight {
  margin: 0;
  padding: 16px 20px;
  background: var(--uc-surface);
  border: 1px solid var(--uc-border);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(11, 16, 32, 0.03),
    0 8px 22px -16px rgba(11, 16, 32, 0.14);
}
.inf-uc-testimonial {
  border-left: 3px solid color-mix(in oklab, var(--uc-teal) 75%, transparent);
}
.inf-uc-insight {
  border-left: 3px solid color-mix(in oklab, var(--uc-violet) 75%, transparent);
  background: color-mix(in oklab, var(--uc-violet) 4%, var(--uc-surface));
}
.inf-uc-testi-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(11, 16, 32, 0.45);
  margin-bottom: 8px;
}
.inf-uc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.inf-uc-dot--teal   { background: var(--uc-teal);   box-shadow: 0 0 0 3px color-mix(in oklab, var(--uc-teal) 18%, transparent); }
.inf-uc-dot--violet { background: var(--uc-violet); box-shadow: 0 0 0 3px color-mix(in oklab, var(--uc-violet) 18%, transparent); }

.inf-uc-testimonial blockquote {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--uc-ink);
  font-style: italic;
  position: relative;
}
.inf-uc-insight p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(11, 16, 32, 0.72);
}

/* ── Index counter ── */
.inf-uc-index {
  margin-top: 8px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 13px;
  color: rgba(11, 16, 32, 0.4);
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
}
.inf-uc-index strong {
  font-size: 18px;
  color: var(--uc-violet);
  font-weight: 800;
}

/* ── Visual (right pane) ── */
.inf-uc-visual {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: #111;
  box-shadow:
    0 40px 80px -24px rgba(11, 16, 32, 0.28),
    0 10px 28px -10px color-mix(in oklab, var(--uc-violet) 35%, transparent),
    0 0 0 1px var(--uc-border);
}
.inf-uc-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}
.inf-uc-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 16, 32, 0.35) 100%);
  pointer-events: none;
}
.inf-uc-visual:hover img { transform: scale(1.04); }

.inf-uc-overlay-ui {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(255,255,255,0.92);
  padding: 14px 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--uc-ink);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  backdrop-filter: blur(10px);
  animation: float-ui 4s infinite ease-in-out;
  z-index: 2;
}
@keyframes float-ui {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.inf-uc-ui-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--uc-violet), var(--uc-teal));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inf-uc-ui-text div:first-child {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(11,16,32,0.45);
}
.inf-uc-ui-text div:last-child {
  font-size: 15px;
  font-weight: 800;
  color: var(--uc-ink);
}

.inf-uc-nav-arrows {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}
.inf-uc-nav-btn {
  width: 46px;
  height: 46px;
  border-radius: 12px 0 0 12px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--uc-border);
  color: var(--uc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
}
.inf-uc-nav-btn:hover {
  background: linear-gradient(135deg, var(--uc-violet), #6d28d9);
  color: #fff;
  border-color: transparent;
}

/* ── Thumbnails ── */
.inf-uc-thumbs {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 60px;
}
.inf-uc-thumb {
  width: 118px;
  aspect-ratio: 4/5;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s;
  position: relative;
  box-shadow: 0 2px 6px rgba(11, 16, 32, 0.06);
}
.inf-uc-thumb.active {
  border-color: var(--uc-violet);
  transform: translateY(-6px);
  box-shadow: 0 14px 24px -8px color-mix(in oklab, var(--uc-violet) 45%, transparent);
}
.inf-uc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: opacity 0.3s;
}
.inf-uc-thumb:hover img, .inf-uc-thumb.active img { opacity: 1; }
.inf-uc-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11, 16, 32, 0.6) 100%);
  pointer-events: none;
}
.inf-uc-thumb-info {
  position: absolute;
  bottom: 8px;
  left: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  pointer-events: none;
  z-index: 1;
}

.inf-uc-visual img.fading {
  opacity: 0;
  transform: scale(0.98);
}

@media (max-width: 560px) {
  .inf-uc-thumbs {
    gap: 6px;
    margin-top: 28px;
    max-width: 320px;
    margin-inline: auto;
    flex-wrap: nowrap;
  }
  .inf-uc-thumb {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 10px;
    border-width: 1.5px;
  }
  .inf-uc-thumb-info {
    bottom: 5px;
    left: 6px;
    right: 6px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }
  .inf-uc-thumb.active {
    transform: translateY(-3px);
  }
}

/* ─── Mockup Modal (Infirmiers Variants) ────────────── */

.inf-mockup-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(2, 6, 23, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 40px;
  backdrop-filter: blur(10px);
}

.inf-mockup-modal-content {
  width: 100%;
  height: 100%;
  max-width: 1400px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5);
}

.inf-mockup-modal-header {
  padding: 20px 32px;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inf-mockup-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--slate-900);
}

.inf-mockup-close {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: var(--slate-400);
  cursor: pointer;
  transition: color 0.2s;
}

.inf-mockup-close:hover {
  color: var(--inf-violet);
}

.inf-mockup-modal-body {
  flex: 1;
  background: #f8fafc;
}

.inf-mockup-modal-body iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.inf-variant-cta {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--inf-violet);
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s;
}

.inf-variant-card:hover .inf-variant-cta {
  opacity: 1;
  transform: translateX(0);
}

/* ─── Inline Mockup Display (Infirmiers) ────────────── */

.inf-variants-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

@media (max-width: 900px) {
  .inf-variants-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

.inf-variant-tab {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--slate-200);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(20px);
}

.inf-variant-tab.in {
  opacity: 1;
  transform: translateY(0);
}

.inf-variant-tab.active {
  border-color: var(--inf-violet);
  background: var(--slate-50);
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.1);
}

.inf-variant-tab-icon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  background: var(--slate-100);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.inf-variant-tab.active .inf-variant-tab-icon {
  background: var(--inf-violet);
  color: #fff;
}

.inf-variant-tab-text h3 {
  font-size: 15px;
  margin: 0;
  color: var(--slate-900);
}

.inf-variant-tab-text p {
  font-size: 12px;
  margin: 4px 0 0;
  color: var(--slate-500);
}

.inf-variants-display {
  margin-top: 40px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--slate-200);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.1);
  opacity: 0;
  transform: scale(0.98);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.inf-variants-display.in {
  opacity: 1;
  transform: scale(1);
}

.inf-variants-display-header {
  padding: 12px 20px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  gap: 20px;
}

.inf-display-dots {
  display: flex;
  gap: 6px;
}

.inf-display-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--slate-300);
}

.inf-display-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate-400);
  background: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--slate-200);
  flex: 1;
  max-width: 400px;
}

.inf-variants-iframe-container {
  width: 100%;
  height: 700px;
  background: #f8fafc;
}

.inf-variants-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ─── Live App (Infirmiers Variants Redesign) ────────── */

.inf-live-demo .section-head {
  text-align: left;
  margin-bottom: 40px;
}

.live-app-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 20px;
  flex-wrap: wrap;
}

.live-app-groups {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.seg-inf {
  display: flex;
  background: var(--slate-100);
  padding: 4px;
  border-radius: 12px;
}

.seg-inf .seg-btn {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--slate-500);
  cursor: pointer;
  transition: all 0.2s;
}

.seg-inf .seg-btn.is-active {
  background: #fff;
  color: var(--inf-violet);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.live-app-open-btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--inf-violet);
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s;
}

.live-app-open-btn:hover {
  background: var(--slate-50);
  border-color: var(--inf-violet);
}

.inf-demo-desc {
  font-size: 15px;
  color: var(--slate-600);
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 800px;
}

.live-app-frame-container {
  display: flex;
  justify-content: center;
  perspective: 1000px;
}

/* ── Démo interactive Patients — phone bezel unique ── */
.pt-demo-phone {
  --pt-dp-w: clamp(260px, 30vw, 320px);
  --pt-dp-scale: calc(var(--pt-dp-w) / 390px);
  width: var(--pt-dp-w);
  margin: 0 auto;
  position: relative;
  padding: 10px;
  border-radius: 40px;
  background: linear-gradient(180deg, #1f2937 0%, #0f172a 100%);
  box-shadow:
    0 30px 60px -20px rgba(7, 12, 24, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.pt-demo-phone::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 20px;
  background: #0f172a;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.pt-demo-phone-screen {
  position: relative;
  width: 100%;
  height: calc(725px * var(--pt-dp-scale));
  overflow: hidden;
  border-radius: 30px;
  background: #fff;
}
.pt-demo-phone-screen iframe {
  width: 390px;
  height: 725px;
  border: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--pt-dp-scale));
  transform-origin: top left;
  transition: opacity 300ms;
}

.live-app-frame.iphone-frame,
.live-app-frame.macbook-frame {
  position: relative;
  background: #000;
  border: 12px solid #111;
  border-radius: 40px;
  box-shadow: 0 50px 100px rgba(0,0,0,0.3);
  overflow: hidden;
  margin-inline: auto;
}

.iphone-frame {
  width: min(320px, 100%);
  aspect-ratio: 320 / 650;
  height: auto;
}

.macbook-frame {
  --mac-native-w: 1280;
  --mac-native-h: 720;
  width: min(1000px, 100%);
  aspect-ratio: var(--mac-native-w) / var(--mac-native-h);
  height: auto;
  border-radius: 20px;
  border-width: 10px;
  overflow: hidden;
  position: relative;
}

.live-app-frame.iphone-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: block;
}

/* Desktop mockup : render à sa taille native puis scale au frame */
.live-app-frame.macbook-frame iframe {
  width: calc(var(--mac-native-w) * 1px);
  height: calc(var(--mac-native-h) * 1px);
  border: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  transform: scale(tan(atan2(100cqw, calc(var(--mac-native-w) * 1px))));
}
.live-app-frame.macbook-frame {
  container-type: inline-size;
}

@media (max-width: 720px) {
  .live-app-frame.iphone-frame,
  .live-app-frame.macbook-frame {
    border-width: 8px;
    border-radius: 28px;
  }
  .macbook-frame { border-radius: 14px; }
}

.live-app-frame.iphone-frame iframe.is-loaded,
.live-app-frame.macbook-frame iframe.is-loaded {
  opacity: 1;
}

.inf-iframe-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.inf-skeleton-pulse {
  width: 100px;
  height: 100px;
  background: var(--slate-100);
  border-radius: 50%;
  animation: sk-pulse 1.5s infinite ease-in-out;
  margin-bottom: 20px;
}

@keyframes sk-pulse {
  0% { transform: scale(0.95); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════════════
   Page Infirmiers — Redesign 2026
   ═══════════════════════════════════════════════════════════════════ */

/* Constat — light hero-matching background avec orbes + dots animés */
.inf26-constat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 1200px 520px at 80% -8%, color-mix(in oklab, var(--inf-violet, #7c3aed) 10%, #f8fafc) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--slate-50, #f8fafc) 100%);
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  color: var(--ink, #0f172a);
  padding: clamp(72px, 10vw, 120px) 0;
}
.inf26-constat-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Grille subtile violette */
.inf26-constat-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--inf-violet, #7c3aed) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--inf-violet, #7c3aed) 8%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  opacity: 0.7;
}
.inf26-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.32;
}
.inf26-orb--a {
  width: 520px; height: 520px;
  top: -140px; left: -120px;
  background: radial-gradient(circle, color-mix(in oklab, var(--inf-violet, #7c3aed) 50%, transparent), transparent 65%);
  animation: inf26-orb-a 14s ease-in-out infinite;
}
.inf26-orb--b {
  width: 620px; height: 620px;
  bottom: -200px; right: -160px;
  background: radial-gradient(circle, color-mix(in oklab, #06b6d4 45%, transparent), transparent 65%);
  animation: inf26-orb-b 18s ease-in-out infinite;
}
@keyframes inf26-orb-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, 30px); } }
@keyframes inf26-orb-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px,-40px); } }
.inf26-grain { display: none; }

/* Dots animés data-flow (cohérent reste de la page) */
.inf26-constat-inner::before,
.inf26-constat-inner::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.inf26-constat-inner::before {
  background: var(--inf-violet, #7c3aed);
  box-shadow: 0 0 12px color-mix(in oklab, var(--inf-violet, #7c3aed) 60%, transparent);
  animation: inf26-dot-flow-a 14s linear infinite;
}
.inf26-constat-inner::after {
  background: #06b6d4;
  box-shadow: 0 0 12px color-mix(in oklab, #06b6d4 60%, transparent);
  animation: inf26-dot-flow-b 18s linear infinite;
  animation-delay: 6s;
}
@keyframes inf26-dot-flow-a {
  0%   { left: -10px; top: 18%; opacity: 0; }
  10%  { opacity: 1; } 90%  { opacity: 1; }
  100% { left: 102%; top: 42%; opacity: 0; }
}
@keyframes inf26-dot-flow-b {
  0%   { right: -10px; top: 70%; opacity: 0; }
  10%  { opacity: 1; } 90%  { opacity: 1; }
  100% { right: 102%; top: 35%; opacity: 0; }
}
.inf26-constat-inner { position: relative; z-index: 1; }

.inf26-constat-head {
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
}
.inf26-constat-head h2 {
  margin: 16px 0 16px;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink, #0f172a);
  line-height: 1.08;
}
.inf26-constat-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--inf-violet, #7c3aed) 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.inf26-constat-head p {
  color: rgba(15, 23, 42, 0.62);
  font-size: 16px;
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}

.inf26-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.inf26-stat {
  position: relative;
  padding: 28px 26px 26px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,1,.36,1), border-color 300ms, background 300ms, box-shadow 300ms;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(11, 27, 56, 0.04), 0 10px 24px -18px rgba(11, 27, 56, 0.18);
}
.inf26-stat.in { opacity: 1; transform: translateY(0); }
.inf26-stat:hover {
  border-color: color-mix(in oklab, var(--inf-violet, #7c3aed) 35%, transparent);
  background: #fff;
  box-shadow: 0 18px 34px -20px rgba(11, 27, 56, 0.22);
  transform: translateY(-2px);
}
.inf26-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--inf-violet, #7c3aed), transparent);
  opacity: 0.5;
}
.inf26-stat-index {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(15, 23, 42, 0.4);
  margin-bottom: 18px;
}
.inf26-stat-num {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.inf26-stat-num > span {
  font-size: clamp(36px, 4.6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--inf-violet, #7c3aed) 0%, color-mix(in oklab, var(--inf-violet, #7c3aed) 65%, #000) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.inf26-stat-spark {
  width: 60px;
  height: 24px;
  color: color-mix(in oklab, var(--inf-violet, #7c3aed) 75%, #06b6d4);
  flex-shrink: 0;
}
.inf26-stat-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.inf26-stat-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.6);
  margin: 0;
}

@media (max-width: 860px) {
  .inf26-stats { grid-template-columns: 1fr; }
}

/* Discipline — glass list with numbered badge + check */
.inf26-disc {
  background: linear-gradient(180deg, #fafaff 0%, #f4f3ff 100%);
  position: relative;
  overflow: hidden;
}
.inf26-disc::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, color-mix(in oklab, var(--inf-violet, #7c3aed) 25%, transparent), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.inf26-disc-head {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.inf26-disc-head h2 {
  margin: 16px 0 20px;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink, #0f172a);
  line-height: 1.1;
}
.inf26-disc-head h2 em {
  font-style: italic;
  color: var(--inf-violet, #7c3aed);
}
.inf26-disc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid color-mix(in oklab, var(--inf-violet, #7c3aed) 20%, transparent);
  color: var(--inf-violet, #7c3aed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.inf26-disc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-width: 1280px;
  margin-inline: auto;
}
.inf26-disc-list > li:nth-child(5) {
  grid-column: auto;
  max-width: none;
  margin-inline: 0;
}

.inf26-disc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(7, 12, 24, 0.04),
    0 12px 28px -18px rgba(7, 12, 24, 0.18);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 600ms ease,
    transform 600ms cubic-bezier(.22,1,.36,1),
    box-shadow 280ms ease,
    border-color 280ms ease;
}
.inf26-disc-card.in { opacity: 1; transform: translateY(0); }
.inf26-disc-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--inf-violet, #7c3aed) 25%, transparent);
  box-shadow:
    0 20px 40px -20px rgba(7, 12, 24, 0.2),
    0 0 0 1px color-mix(in oklab, var(--inf-violet, #7c3aed) 15%, transparent);
}

/* Photo cover + numéro intégré */
.inf26-disc-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
}
.inf26-disc-photo img,
.inf26-disc-illu,
.inf26-disc-illu svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(.22,1,.36,1);
}
.inf26-disc-card:hover .inf26-disc-photo img,
.inf26-disc-card:hover .inf26-disc-illu svg { transform: scale(1.04); }
.inf26-disc-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.05) 0%, transparent 40%, rgba(15,23,42,0.45) 100%);
  pointer-events: none;
}
.inf26-disc-photo .inf26-disc-num-main {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* Body */
.inf26-disc-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inf26-disc-num {
  display: flex;
  align-items: baseline;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.inf26-disc-num-total {
  font-size: 11px;
  font-weight: 700;
  color: var(--inf-violet, #7c3aed);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.inf26-disc-body h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.inf26-disc-body p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.6);
}
.inf26-disc-mark {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  padding: 7px;
  color: #fff;
  background: linear-gradient(135deg, var(--inf-violet, #7c3aed), #6d28d9);
  border-radius: 10px;
  box-shadow: 0 8px 18px -4px color-mix(in oklab, var(--inf-violet, #7c3aed) 50%, transparent);
}

@media (max-width: 1180px) { .inf26-disc-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .inf26-disc-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .inf26-disc-list { grid-template-columns: 1fr; } }

/* NotProduct — editorial split */
.inf26-not-card {
  background: linear-gradient(135deg, #fef2f2 0%, #fffbeb 50%, #f0fdfa 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 26px;
  padding: clamp(32px, 4vw, 56px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(7, 12, 24, 0.18);
}
.inf26-not-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(239, 68, 68, 0.08), transparent 60%);
  pointer-events: none;
}
.inf26-not-head {
  position: relative;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.inf26-not-head h2 {
  margin: 14px 0 14px;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink, #0f172a);
  line-height: 1.1;
}
.inf26-not-head h2 em { font-style: normal; color: var(--inf-violet, #7c3aed); font-weight: 800; }
.inf26-not-neg {
  position: relative;
  color: #ef4444;
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: color-mix(in oklab, #ef4444 70%, transparent);
}
.inf26-not-head p {
  color: rgba(15, 23, 42, 0.55);
  font-size: 15px;
  line-height: 1.6;
}

.inf26-not-list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inf26-not-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 240ms, border-color 240ms, transform 240ms;
}
.inf26-not-row:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: color-mix(in oklab, var(--inf-violet, #7c3aed) 18%, transparent);
  transform: translateX(2px);
}
.inf26-not-row--head {
  background: transparent;
  border: none;
  padding: 6px 22px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.4);
}
.inf26-not-row--head:hover { background: transparent; border: none; transform: none; }
.inf26-not-col-a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(15, 23, 42, 0.75);
  font-weight: 500;
}
.inf26-not-x {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, #ef4444 14%, transparent);
  color: #dc2626;
  flex-shrink: 0;
}
.inf26-not-arrow {
  color: rgba(15, 23, 42, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.inf26-not-col-b {
  font-size: 14.5px;
  color: var(--inf-violet, #7c3aed);
  font-weight: 700;
  letter-spacing: -0.005em;
}

@media (max-width: 720px) {
  .inf26-not-row { grid-template-columns: 1fr; gap: 6px; }
  .inf26-not-row--head { display: none; }
  .inf26-not-arrow { display: none; }
  .inf26-not-col-b { padding-left: 34px; font-size: 13px; }
}

/* FAQ — asymmetric split + accordion */
.inf26-faq {
  background: #0b0f1a;
  color: #e6e9f2;
  position: relative;
  overflow: hidden;
}
.inf26-faq::before {
  content: '';
  position: absolute;
  top: 10%; left: -10%;
  width: 60%; height: 80%;
  background: radial-gradient(circle, color-mix(in oklab, var(--inf-violet, #7c3aed) 40%, transparent), transparent 60%);
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
}
.inf26-faq-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.inf26-faq-side {
  position: sticky;
  top: 120px;
}
.inf26-faq-side h2 {
  margin: 16px 0 18px;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
  line-height: 1.1;
}
.inf26-faq-side h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--inf-violet, #7c3aed) 0%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.inf26-faq-side > p {
  color: rgba(230, 233, 242, 0.55);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 28px;
}
.inf26-faq-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
}
.inf26-faq-counter-curr { color: var(--inf-violet, #7c3aed); font-weight: 800; font-size: 18px; }
.inf26-faq-counter-sep  { color: rgba(230,233,242,0.3); }
.inf26-faq-counter-tot  { color: rgba(230,233,242,0.5); }

.inf26-faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inf26-faq-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: background 280ms, border-color 280ms;
}
.inf26-faq-item.is-open {
  background: rgba(255,255,255,0.06);
  border-color: color-mix(in oklab, var(--inf-violet, #7c3aed) 38%, transparent);
}
.inf26-faq-q {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.inf26-faq-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--inf-violet, #7c3aed);
  padding: 4px 10px;
  background: color-mix(in oklab, var(--inf-violet, #7c3aed) 18%, transparent);
  border-radius: 6px;
  flex-shrink: 0;
}
.inf26-faq-q-text { flex: 1; line-height: 1.4; }
.inf26-faq-plus {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.inf26-faq-plus > span {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: rgba(230,233,242,0.7);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 360ms cubic-bezier(.22,1,.36,1), background 240ms;
}
.inf26-faq-plus > span:first-child  { transform: translate(-50%,-50%); }
.inf26-faq-plus > span:last-child   { transform: translate(-50%,-50%) rotate(90deg); }
.inf26-faq-item.is-open .inf26-faq-plus > span { background: var(--inf-violet, #7c3aed); }
.inf26-faq-item.is-open .inf26-faq-plus > span:last-child {
  transform: translate(-50%,-50%) rotate(0deg);
}

.inf26-faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(.22,1,.36,1);
}
.inf26-faq-item.is-open .inf26-faq-a-wrap { grid-template-rows: 1fr; }
.inf26-faq-a {
  overflow: hidden;
}
.inf26-faq-a p {
  margin: 0;
  padding: 0 22px 20px 60px;
  color: rgba(230, 233, 242, 0.65);
  font-size: 14.5px;
  line-height: 1.7;
}

@media (max-width: 860px) {
  .inf26-faq-inner { grid-template-columns: 1fr; gap: 32px; }
  .inf26-faq-side { position: static; }
  .inf26-faq-a p { padding-left: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Page Infirmiers — Boundaries redesign v2 (split pairs)
   ═══════════════════════════════════════════════════════════════════ */
.infbnd {
  --bnd-ink:    #0b1020;
  --bnd-muted:  rgba(11, 16, 32, 0.58);
  --bnd-surface:#ffffff;
  --bnd-border: rgba(11, 16, 32, 0.08);
  --bnd-no:     #e11d48;
  --bnd-no-bg:  color-mix(in oklab, #e11d48 8%, #fff);
  --bnd-yes:    var(--inf-violet, #7c3aed);
  --bnd-yes-bg: color-mix(in oklab, var(--inf-violet, #7c3aed) 7%, #fff);

  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.infbnd-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.infbnd-mesh {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.infbnd-mesh--a {
  width: 520px; height: 520px;
  top: -180px; left: -120px;
  background: radial-gradient(circle, color-mix(in oklab, var(--bnd-no) 26%, transparent), transparent 65%);
  opacity: 0.55;
}
.infbnd-mesh--b {
  width: 560px; height: 560px;
  bottom: -200px; right: -140px;
  background: radial-gradient(circle, color-mix(in oklab, var(--bnd-yes) 30%, transparent), transparent 65%);
  opacity: 0.55;
}
.infbnd-inner { position: relative; z-index: 1; }

/* Head */
.infbnd-head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.infbnd-head h2 {
  margin: 14px 0 16px;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--bnd-ink);
}
.infbnd-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--bnd-no) 0%, var(--bnd-yes) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.infbnd-head p {
  color: var(--bnd-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 22px;
}
.infbnd-legend {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--bnd-border);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(11, 16, 32, 0.55);
}
.infbnd-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.infbnd-legend-arrow { color: rgba(11, 16, 32, 0.28); display: flex; }
.infbnd-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.infbnd-chip--no  { background: color-mix(in oklab, var(--bnd-no)  18%, transparent); color: var(--bnd-no); }
.infbnd-chip--yes { background: color-mix(in oklab, var(--bnd-yes) 18%, transparent); color: var(--bnd-yes); }

/* List */
.infbnd-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 1060px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.infbnd-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr 64px 1fr;
  align-items: stretch;
  gap: 12px;
  animation: infbnd-in 600ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes infbnd-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.infbnd-idx {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: rgba(11, 16, 32, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed var(--bnd-border);
}

.infbnd-pane {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--bnd-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 220ms, transform 220ms, box-shadow 220ms;
}
.infbnd-pane:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(11, 16, 32, 0.25);
}
.infbnd-pane--no  {
  background: var(--bnd-no-bg);
  border-color: color-mix(in oklab, var(--bnd-no) 22%, transparent);
}
.infbnd-pane--no:hover { border-color: color-mix(in oklab, var(--bnd-no) 45%, transparent); }
.infbnd-pane--yes {
  background: var(--bnd-yes-bg);
  border-color: color-mix(in oklab, var(--bnd-yes) 22%, transparent);
}
.infbnd-pane--yes:hover { border-color: color-mix(in oklab, var(--bnd-yes) 45%, transparent); }

.infbnd-pane-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.infbnd-pane--no  .infbnd-pane-label { color: var(--bnd-no); }
.infbnd-pane--yes .infbnd-pane-label { color: var(--bnd-yes); }

.infbnd-x,
.infbnd-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.infbnd-x     { background: color-mix(in oklab, var(--bnd-no)  18%, #fff); color: var(--bnd-no); }
.infbnd-check { background: color-mix(in oklab, var(--bnd-yes) 18%, #fff); color: var(--bnd-yes); }

.infbnd-pane-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bnd-ink);
}
.infbnd-pane--no  .infbnd-pane-text {
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--bnd-no) 45%, transparent);
  text-decoration-thickness: 1.5px;
  color: rgba(11, 16, 32, 0.7);
}
.infbnd-pane--yes .infbnd-pane-text {
  font-weight: 600;
  color: var(--bnd-ink);
}

.infbnd-bridge {
  align-self: center;
  color: rgba(11, 16, 32, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.infbnd-bridge svg {
  width: 60px;
  height: 22px;
  overflow: visible;
}

/* Foot seal */
.infbnd-foot {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  text-align: left;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--bnd-border);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  max-width: 760px;
  margin-inline: auto;
}
.infbnd-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--bnd-yes), #6d28d9);
  color: #fff;
  box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--bnd-yes) 60%, transparent);
  flex-shrink: 0;
}
.infbnd-foot p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bnd-muted);
}

@media (max-width: 860px) {
  .infbnd-row {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
  .infbnd-bridge { display: none; }
  .infbnd-pane--yes { grid-column: 2 / 3; }
  .infbnd-idx { grid-row: span 2; align-items: flex-start; padding-top: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Page Biomédical — Facility (indigo #4F46E5)
   ═══════════════════════════════════════════════════════════════════ */
.biomedical-page-root { --bio-indigo: #4F46E5; --bio-teal: #0D9488; }

/* Hero device reuse med-device, override accent */
.bio-device { border-color: rgba(79, 70, 229, 0.18); }

/* Bandeau — couleur ring/glow ajustée */
.bio-bandeau .med-bandeau-live-dot { background: #4F46E5; }
.bio-bandeau .med-bandeau-glow-1 { background: radial-gradient(circle, rgba(79,70,229,0.24), transparent 60%); }
.bio-bandeau .med-bandeau-glow-2 { background: radial-gradient(circle, rgba(13,148,136,0.18), transparent 60%); }

/* ── Six scénarios ── */
.bio-scenarios {
  position: relative;
  padding: clamp(72px, 10vw, 120px) 0;
  background:
    radial-gradient(ellipse 1200px 520px at 80% -8%, color-mix(in oklab, var(--bio-indigo) 10%, #f8fafc) 0%, transparent 70%),
    linear-gradient(180deg, var(--slate-50, #f8fafc) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  color: var(--ink, #0f172a);
  isolation: isolate;
  overflow: hidden;
  zoom: 0.8; /* Réduction globale 20% du slide */
}
/* ── Animation data-flow sur fond clair (cohérente avec le hero) ── */
.bio-scenarios-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--bio-indigo) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--bio-indigo) 8%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  pointer-events: none;
  opacity: 0.7;
}
.bio-scenarios-inner::before,
.bio-scenarios-inner::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.bio-scenarios-inner::before {
  background: var(--bio-indigo);
  box-shadow: 0 0 12px color-mix(in oklab, var(--bio-indigo) 60%, transparent);
  animation: bio-dot-flow-a 14s linear infinite;
}
.bio-scenarios-inner::after {
  background: var(--bio-teal);
  box-shadow: 0 0 12px color-mix(in oklab, var(--bio-teal) 60%, transparent);
  animation: bio-dot-flow-b 18s linear infinite;
  animation-delay: 6s;
}
@keyframes bio-dot-flow-a {
  0%   { left: -10px; top: 18%; opacity: 0; }
  10%  { opacity: 1; } 90%  { opacity: 1; }
  100% { left: 102%; top: 42%; opacity: 0; }
}
@keyframes bio-dot-flow-b {
  0%   { right: -10px; top: 70%; opacity: 0; }
  10%  { opacity: 1; } 90%  { opacity: 1; }
  100% { right: 102%; top: 35%; opacity: 0; }
}
.bio-scenarios-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bio-scenarios-orb {
  position: absolute; border-radius: 50%; filter: blur(80px);
}
.bio-scenarios-orb--a {
  width: 540px; height: 540px; top: -140px; left: -120px;
  background: radial-gradient(circle, color-mix(in oklab, var(--bio-indigo) 40%, transparent), transparent 65%);
  opacity: 0.32;
  animation: bio-orb-a 14s ease-in-out infinite;
}
.bio-scenarios-orb--b {
  width: 620px; height: 620px; bottom: -200px; right: -160px;
  background: radial-gradient(circle, color-mix(in oklab, var(--bio-teal) 40%, transparent), transparent 65%);
  opacity: 0.28;
  animation: bio-orb-b 18s ease-in-out infinite;
}
@keyframes bio-orb-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, 30px); } }
@keyframes bio-orb-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px,-40px); } }
.bio-scenarios-inner { position: relative; z-index: 1; }

.bio-scenarios .ucx-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}
.bio-scenarios .ucx-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--bio-indigo) 0%, var(--bio-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bio-scenarios .ucx-stage { max-width: 1240px; margin: 0 auto; }
.bio-scenarios .ucx-slide {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  min-height: 560px;
  animation: bio-slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes bio-slide-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.bio-scenarios .ucx-head h2 { color: var(--ink, #0f172a); }
.bio-scenarios .ucx-card-title {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  color: var(--ink, #0f172a);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 14px;
}
.bio-scenarios .ucx-card-sub {
  font-size: 15px;
  color: rgba(15, 23, 42, 0.62);
  font-style: italic;
  margin-bottom: 14px;
}
.bio-scenarios .ucx-callout-text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.75);
  max-width: 520px;
  margin-bottom: 18px;
}
.bio-scenarios .ucx-kicker {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(15, 23, 42, 0.62);
  margin-bottom: 16px;
}
.bio-scenarios .ucx-kicker-num {
  background: var(--ucx-accent, var(--bio-indigo));
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--ucx-accent, var(--bio-indigo)) 55%, transparent);
}
.bio-scenarios .ucx-kicker-label { color: rgba(15, 23, 42, 0.55); }
.bio-scenarios .ucx-counter { color: rgba(15, 23, 42, 0.45); font-size: 13px; }
.bio-scenarios .ucx-counter-current { color: var(--ucx-accent, var(--bio-indigo)); font-size: 18px; font-weight: 800; }
/* Navigation adaptée au fond clair */
.bio-scenarios .ucx-nav-sq {
  background: #fff;
  border: 1px solid rgba(15,23,42,0.1);
  color: var(--bio-indigo);
  box-shadow: 0 4px 12px -4px rgba(11,27,56,0.15);
}
.bio-scenarios .ucx-nav-sq:hover {
  background: var(--bio-indigo); color: #fff; border-color: var(--bio-indigo);
}

/* Modules row */
.bio-scenario-modules { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.bio-scenario-modules-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(15, 23, 42, 0.45);
}
.bio-scenario-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bio-scenario-tag {
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--bio-indigo) 18%, transparent);
  color: var(--bio-indigo);
}

/* Quote + insight cards */
.bio-scenario-quote, .bio-scenario-insight {
  margin: 0 0 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11,27,56,0.04), 0 8px 22px -18px rgba(11,27,56,0.15);
}
.bio-scenario-quote { border-left: 3px solid var(--bio-teal); }
.bio-scenario-insight { border-left: 3px solid var(--ucx-accent, var(--bio-indigo)); }
.bio-scenario-quote blockquote { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(15,23,42,0.82); font-style: italic; }
.bio-scenario-insight p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(15, 23, 42, 0.75); }
.bio-scenario-quote-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(15, 23, 42, 0.55); margin-bottom: 7px;
}
.bio-scenario-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.bio-scenario-dot--teal { background: var(--bio-teal); box-shadow: 0 0 0 3px color-mix(in oklab, var(--bio-teal) 18%, transparent); }

/* Overlay UI on photo */
.bio-overlay-ui {
  position: absolute; top: 24px; right: 24px; z-index: 3;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(10, 14, 28, 0.78);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  min-width: 160px;
}
.bio-overlay-head {
  display: flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.bio-overlay-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.bio-overlay-val { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }

@media (max-width: 1024px) {
  .bio-scenarios .ucx-slide { grid-template-columns: 1fr; gap: 36px; min-height: auto; }
}
@media (max-width: 640px) {
  .bio-scenarios .ucx-thumbs { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 24px; max-width: 320px; }
  .bio-scenarios .ucx-thumb { aspect-ratio: 4 / 5; border-radius: 10px; }
  .bio-overlay-ui { top: 12px; right: 12px; min-width: 0; padding: 10px 12px; }
}

/* ── CTA final ── */
.bio-cta { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
.bio-faq { padding-bottom: clamp(56px, 8vw, 96px); }
.bio-cta-card {
  background: linear-gradient(135deg, #14133a 0%, #0a0d1f 100%);
  border: 1px solid rgba(79, 70, 229, 0.22);
  border-radius: 24px;
  padding: clamp(32px, 5vw, 64px);
  color: #fff;
  text-align: center;
  position: relative; overflow: hidden;
}
.bio-cta-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(79, 70, 229, 0.24), transparent 60%);
  pointer-events: none;
}
.bio-cta-card h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 14px 0 14px;
  color: #fff;
  position: relative;
}
.bio-cta-card h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--bio-indigo) 0%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bio-cta-card p {
  color: rgba(255,255,255,0.6);
  font-size: 15px; line-height: 1.6;
  max-width: 580px; margin: 0 auto 28px;
  position: relative;
}
.bio-cta-actions {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  position: relative;
}

/* Segmented buttons bio */
.seg.seg-bio .seg-btn.is-active {
  background: var(--bio-indigo);
  color: #fff;
  border-color: var(--bio-indigo);
}

/* ─── Biomédical · Disciplines (carrousel horizontal swipeable) ─── */
.bio-disc-carousel {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 8px;
}
.bio-disc-list.bio-disc-list { /* override de la grille .inf26-disc-list */
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: visible;
  gap: 18px;
  padding: 6px 6px 28px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--bio-indigo) 40%, #fff) transparent;
}
.bio-disc-list.bio-disc-list::-webkit-scrollbar { height: 6px; }
.bio-disc-list.bio-disc-list::-webkit-scrollbar-track { background: transparent; }
.bio-disc-list.bio-disc-list::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--bio-indigo) 30%, #fff);
  border-radius: 6px;
}

.bio-disc-list.bio-disc-list > li {
  flex: 0 0 clamp(240px, 26vw, 300px);
  scroll-snap-align: start;
  max-width: none;
  margin-inline: 0;
}

/* Card style conservé (photo + body) mais border-radius ajusté */
.bio-disc-list .inf26-disc-card { border-radius: 16px; }
.bio-disc-list .inf26-disc-photo { aspect-ratio: 1 / 1; }
.bio-disc-list .inf26-disc-photo .inf26-disc-num-main { font-size: 30px; }
.bio-disc-list .inf26-disc-mark {
  width: 30px; height: 30px; padding: 6px;
  top: 10px; right: 10px; border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--bio-indigo), #4338ca);
  box-shadow: 0 6px 14px -4px color-mix(in oklab, var(--bio-indigo) 50%, transparent);
}
.bio-disc-list .inf26-disc-num-total { color: var(--bio-indigo); }

/* Flèches de navigation */
.bio-disc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  color: var(--bio-indigo);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 8px 22px -10px rgba(11, 27, 56, 0.28);
  transition: background 220ms, color 220ms, transform 180ms, border-color 220ms;
}
.bio-disc-nav svg { width: 18px; height: 18px; }
.bio-disc-nav--prev { left: -14px; }
.bio-disc-nav--next { right: -14px; }
.bio-disc-nav:hover {
  background: linear-gradient(135deg, var(--bio-indigo), #4338ca);
  color: #fff;
  border-color: transparent;
  transform: translateY(-50%) scale(1.06);
}
.bio-disc-nav:active { transform: translateY(-50%) scale(0.96); }
@media (max-width: 640px) {
  .bio-disc-nav { display: none; }
  .bio-disc-list.bio-disc-list > li { flex: 0 0 78vw; }
}

/* Fade gradients sur les bords pour indiquer qu'on peut scroller */
.bio-disc-carousel::before,
.bio-disc-carousel::after {
  content: '';
  position: absolute;
  top: 6px; bottom: 34px;
  width: 36px;
  pointer-events: none;
  z-index: 2;
}
.bio-disc-carousel::before {
  left: 8px;
  background: linear-gradient(90deg, color-mix(in oklab, #fbfaff 95%, transparent), transparent);
}
.bio-disc-carousel::after {
  right: 8px;
  background: linear-gradient(270deg, color-mix(in oklab, #fbfaff 95%, transparent), transparent);
}

/* ─── Biomédical · ROI (déclic directeur, 8 leviers) ─── */
.bio-roi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfaff 0%, #f4f2ff 100%);
  border-top: 1px solid var(--slate-200, #e2e8f0);
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  color: var(--ink, #0f172a);
  padding: clamp(72px, 9vw, 112px) 0;
}
/* Grille subtile + dots animés (cohérents avec le slide démo avant) */
.bio-roi-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bio-roi-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--bio-indigo) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--bio-indigo) 8%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  opacity: 0.7;
}
.bio-roi-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.3; }
.bio-roi-orb--a {
  width: 520px; height: 520px; top: -140px; left: -120px;
  background: radial-gradient(circle, color-mix(in oklab, var(--bio-indigo) 40%, transparent), transparent 65%);
}
.bio-roi-orb--b {
  width: 620px; height: 620px; bottom: -200px; right: -160px;
  background: radial-gradient(circle, color-mix(in oklab, var(--bio-teal) 40%, transparent), transparent 65%);
}
.bio-roi-inner { position: relative; z-index: 1; }
.bio-roi-inner::before,
.bio-roi-inner::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.bio-roi-inner::before {
  background: var(--bio-indigo);
  box-shadow: 0 0 12px color-mix(in oklab, var(--bio-indigo) 60%, transparent);
  animation: bio-dot-flow-a 14s linear infinite;
}
.bio-roi-inner::after {
  background: var(--bio-teal);
  box-shadow: 0 0 12px color-mix(in oklab, var(--bio-teal) 60%, transparent);
  animation: bio-dot-flow-b 18s linear infinite;
  animation-delay: 6s;
}
.bio-roi-head {
  max-width: 760px; margin: 0 auto 48px; text-align: center; position: relative;
}
.bio-roi-head h2 {
  margin: 14px 0 14px;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--ink, #0f172a);
}
.bio-roi-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--bio-indigo) 0%, var(--bio-teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bio-roi-head p { color: rgba(15, 23, 42, 0.62); font-size: 15px; line-height: 1.6; margin: 0; }

.bio-roi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 980px) { .bio-roi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bio-roi-grid { grid-template-columns: 1fr; } }

.bio-roi-card {
  position: relative;
  padding: 22px 20px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.22,1,.36,1), border-color 280ms, box-shadow 280ms;
  box-shadow: 0 1px 2px rgba(11,27,56,0.04), 0 10px 24px -18px rgba(11,27,56,0.18);
}
.bio-roi-card.in { opacity: 1; transform: translateY(0); }
.bio-roi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--lvr-accent, var(--bio-indigo)), transparent);
  opacity: 0.8;
}
.bio-roi-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--lvr-accent, var(--bio-indigo)) 35%, transparent);
  box-shadow: 0 20px 36px -20px rgba(11,27,56,0.22);
}
.bio-roi-card-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.bio-roi-cat {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px;
  background: color-mix(in oklab, var(--lvr-accent, var(--bio-indigo)) 10%, #fff);
  color: var(--lvr-accent, var(--bio-indigo));
  border: 1px solid color-mix(in oklab, var(--lvr-accent, var(--bio-indigo)) 25%, transparent);
}
.bio-roi-spark { color: color-mix(in oklab, var(--lvr-accent, var(--bio-indigo)) 75%, #fff); }
.bio-roi-spark svg { width: 52px; height: 20px; display: block; }
.bio-roi-val {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--lvr-accent, var(--bio-indigo)) 0%, color-mix(in oklab, var(--lvr-accent, var(--bio-indigo)) 65%, #000) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1.1;
  margin-bottom: 6px;
}
.bio-roi-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}
.bio-roi-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.6);
}

/* ─── Biomédical · Différenciation concurrentielle ─── */
.bio-vs {
  background: linear-gradient(180deg, #fafaff 0%, #f3f3fb 100%);
  position: relative; overflow: hidden;
  padding-bottom: clamp(56px, 8vw, 96px);
}

/* ─── Bio · Frontières claires en mode hero ─── */
.bio-bnd {
  padding: clamp(80px, 12vw, 160px) 0 clamp(72px, 10vw, 120px) !important;
  background:
    radial-gradient(ellipse 1200px 520px at 20% 10%, color-mix(in oklab, #e11d48 8%, #fff) 0%, transparent 55%),
    radial-gradient(ellipse 1200px 520px at 80% 90%, color-mix(in oklab, var(--bio-indigo) 8%, #fff) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fafaff 100%);
  border-top: 1px solid var(--slate-200, #e2e8f0);
  isolation: isolate;
  overflow: hidden;
}
/* Halo mesh animés plus présents (hero feel) */
.bio-bnd .infbnd-mesh {
  filter: blur(90px);
  animation: bio-bnd-breath 16s ease-in-out infinite;
}
.bio-bnd .infbnd-mesh--a { animation-delay: 0s;  opacity: 0.55; }
.bio-bnd .infbnd-mesh--b { animation-delay: 8s;  opacity: 0.45; }
@keyframes bio-bnd-breath {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(20px, -10px) scale(1.08); }
}
/* Grille tech en fond + dots animés data-flow (cohérent reste de la page) */
.bio-bnd::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--bio-indigo) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--bio-indigo) 8%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  pointer-events: none;
  opacity: 0.7;
  z-index: 0;
}
.bio-bnd .infbnd-inner::before,
.bio-bnd .infbnd-inner::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none; z-index: 0;
}
.bio-bnd .infbnd-inner::before {
  background: #e11d48;
  box-shadow: 0 0 12px color-mix(in oklab, #e11d48 60%, transparent);
  animation: bio-dot-flow-a 14s linear infinite;
}
.bio-bnd .infbnd-inner::after {
  background: var(--bio-indigo);
  box-shadow: 0 0 12px color-mix(in oklab, var(--bio-indigo) 60%, transparent);
  animation: bio-dot-flow-b 18s linear infinite;
  animation-delay: 6s;
}

/* Typo hero : titre plus grand, eyebrow plus présent, lede plus aérée */
.bio-bnd .infbnd-head {
  max-width: 860px;
  margin: 0 auto clamp(40px, 6vw, 72px);
}
.bio-bnd .infbnd-head h2 {
  font-size: clamp(36px, 5vw, 60px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  margin: 22px 0 20px !important;
}
.bio-bnd .infbnd-head p {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto 30px;
}
.bio-bnd .infbnd-legend {
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 0.14em;
}

/* Rangées : souffle entre les paires */
.bio-bnd .infbnd-list {
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}
.bio-bnd .infbnd-row {
  padding: 2px; /* wrapper for bigger panes */
}
.bio-bnd .infbnd-pane {
  padding: 18px 22px;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.bio-bnd .infbnd-pane-text { font-size: 15px; }
.bio-vs::before {
  content: '';
  position: absolute; top: -140px; right: -140px;
  width: 440px; height: 440px;
  background: radial-gradient(circle, color-mix(in oklab, var(--bio-indigo) 22%, transparent), transparent 65%);
  filter: blur(60px); pointer-events: none;
}
.bio-vs-head {
  max-width: 720px; margin: 0 auto 48px; text-align: center; position: relative;
}
.bio-vs-head h2 {
  margin: 14px 0 14px;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--ink, #0f172a);
}
.bio-vs-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--bio-indigo) 0%, var(--bio-teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bio-vs-head p { color: rgba(15,23,42,0.58); font-size: 15px; line-height: 1.6; margin: 0; }

.bio-vs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 1080px; margin: 0 auto;
}
@media (max-width: 760px) { .bio-vs-grid { grid-template-columns: 1fr; } }

.bio-vs-card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  padding: 22px 24px 24px;
  box-shadow: 0 1px 2px rgba(7,12,24,0.04), 0 12px 28px -18px rgba(7,12,24,0.18);
  backdrop-filter: blur(10px);
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms;
}
.bio-vs-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--bio-indigo) 25%, transparent);
  box-shadow: 0 20px 40px -20px rgba(7,12,24,0.2);
}
.bio-vs-card--danger { border-color: color-mix(in oklab, #DC2626 18%, transparent); }
.bio-vs-card--warn   { border-color: color-mix(in oklab, #F59E0B 22%, transparent); }

.bio-vs-card-head { margin-bottom: 16px; }
.bio-vs-card-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink, #0f172a);
}
.bio-vs-card-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(15,23,42,0.45);
  display: block;
  margin-top: 4px;
}

.bio-vs-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 0;
  border-top: 1px dashed rgba(15,23,42,0.08);
}
.bio-vs-row:first-of-type { border-top: 0; padding-top: 0; }
.bio-vs-row p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(15,23,42,0.72);
}
.bio-vs-row--us {
  margin-top: 8px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--bio-indigo) 7%, #fff);
  border: 1px solid color-mix(in oklab, var(--bio-indigo) 22%, transparent);
  border-radius: 10px;
  border-top: 1px solid color-mix(in oklab, var(--bio-indigo) 22%, transparent);
}
.bio-vs-row--us p { color: var(--ink, #0f172a); font-weight: 500; }

.bio-vs-row-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.bio-vs-row-label--pos { color: #059669; }
.bio-vs-row-label--neg { color: #DC2626; }
.bio-vs-row-label--us  { color: var(--bio-indigo); }
.bio-vs-row-label svg {
  padding: 3px;
  background: currentColor;
  color: #fff;
  border-radius: 50%;
  opacity: 0.95;
}
.bio-vs-row-label--pos svg { background: color-mix(in oklab, #059669 22%, #fff); color: #059669; }
.bio-vs-row-label--neg svg { background: color-mix(in oklab, #DC2626 18%, #fff); color: #DC2626; }
.bio-vs-row-label--us  svg { background: color-mix(in oklab, var(--bio-indigo) 18%, #fff); color: var(--bio-indigo); }

/* ─── Biomédical · Démo en direct — style patients + laptop desktop ─── */
.bio-demo {
  background: linear-gradient(180deg, #fbfaff 0%, #f4f2ff 100%);
  position: relative;
  overflow: hidden;
}
.bio-demo::before {
  content: '';
  position: absolute; top: -140px; right: -140px;
  width: 440px; height: 440px;
  background: radial-gradient(circle, color-mix(in oklab, var(--bio-indigo) 18%, transparent), transparent 65%);
  filter: blur(60px); pointer-events: none;
}
.bio-demo .section-head { position: relative; }
.bio-demo .section-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--bio-indigo) 0%, var(--bio-teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Contrôles : seg pills à gauche, plein écran à droite */
.bio-demo .live-app-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 28px 0 18px;
  position: relative;
}
.bio-demo .live-app-controls-groups {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.bio-demo .seg.seg-bio {
  display: inline-flex;
  padding: 4px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 10px;
  gap: 2px;
  backdrop-filter: blur(8px);
}
.bio-demo .seg.seg-bio .seg-btn {
  border: 0;
  background: transparent;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,0.55);
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease;
  font-family: inherit;
}
.bio-demo .seg.seg-bio .seg-btn:hover { color: rgba(15,23,42,0.85); }
.bio-demo .seg.seg-bio .seg-btn.is-active {
  color: var(--bio-indigo);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 0 0 1px color-mix(in oklab, var(--bio-indigo) 22%, transparent);
}
.bio-demo .live-app-open {
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.8);
  border: 1px solid color-mix(in oklab, var(--bio-indigo) 22%, transparent);
  color: var(--bio-indigo);
  text-decoration: none;
  transition: background 220ms, border-color 220ms, transform 220ms;
}
.bio-demo .live-app-open:hover {
  background: var(--bio-indigo);
  color: #fff;
  transform: translateY(-1px);
  border-color: var(--bio-indigo);
}
.bio-demo .pt-demo-desc {
  color: rgba(15,23,42,0.6);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 640px;
}

/* Mobile phone bezel — réutilise le pattern patients */
.bio-demo .pt-demo-phone {
  --pt-dp-w: clamp(280px, 32vw, 360px);
}

/* Desktop laptop frame */
.bio-demo-laptop {
  --lpt-w: min(1040px, 100%);
  width: var(--lpt-w);
  margin: 0 auto;
  position: relative;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 40px 80px -24px rgba(7,12,24,0.45),
    0 12px 28px -12px color-mix(in oklab, var(--bio-indigo) 28%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.1);
  overflow: hidden;
  container-type: inline-size;
}
.bio-demo-laptop-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(15,23,42,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bio-demo-laptop-url {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-align: center;
  letter-spacing: 0.02em;
}
.bio-demo-laptop-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 780;
  background: #f8fafc;
  overflow: hidden;
}
.bio-demo-laptop-screen iframe {
  position: absolute;
  top: 0; left: 0;
  width: 1280px;
  height: 780px;
  border: 0;
  display: block;
  transform-origin: top left;
  transform: scale(tan(atan2(100cqw, 1280px)));
  background: #f8fafc;
}
.bio-demo-laptop::after {
  content: '';
  display: block;
  width: 28%;
  height: 8px;
  margin: 0 auto;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 22px -8px rgba(0,0,0,0.35);
}
@media (max-width: 640px) {
  .bio-demo-laptop { border-radius: 10px; }
  .bio-demo-laptop-url { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Page Direction clinique — MaClinique (navy #1E3A8A + gold #D97706)
   ═══════════════════════════════════════════════════════════════════ */
.direction-page-root { --dir-navy: #1E3A8A; --dir-gold: #D97706; --dir-teal: #0D9488; }

/* Hero device accent */
.dir-device { border-color: rgba(30, 58, 138, 0.18); }

/* Bandeau */
.dir-bandeau .med-bandeau-live-dot { background: #1E3A8A; }
.dir-bandeau .med-bandeau-glow-1 { background: radial-gradient(circle, rgba(30,58,138,0.28), transparent 60%); }
.dir-bandeau .med-bandeau-glow-2 { background: radial-gradient(circle, rgba(217,119,6,0.2), transparent 60%); }

/* ── Scénarios ── */
.dir-scenarios {
  position: relative;
  padding: clamp(72px, 10vw, 120px) 0;
  background:
    radial-gradient(ellipse 1200px 520px at 80% -8%, color-mix(in oklab, var(--dir-navy) 10%, #f8fafc) 0%, transparent 70%),
    linear-gradient(180deg, var(--slate-50, #f8fafc) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  color: var(--ink, #0f172a);
  isolation: isolate;
  overflow: hidden;
  zoom: 0.8;
}
/* ── Animation data-flow de fond ── */
.dir-scenarios-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--dir-navy) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--dir-navy) 8%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  pointer-events: none;
  opacity: 0.7;
}
/* Dots animés qui traversent */
.dir-scenarios-inner::before,
.dir-scenarios-inner::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.dir-scenarios-inner::before {
  background: var(--dir-navy);
  box-shadow: 0 0 12px color-mix(in oklab, var(--dir-navy) 60%, transparent);
  animation: dir-dot-flow-a 14s linear infinite;
}
.dir-scenarios-inner::after {
  background: var(--dir-gold);
  box-shadow: 0 0 12px color-mix(in oklab, var(--dir-gold) 60%, transparent);
  animation: dir-dot-flow-b 18s linear infinite;
  animation-delay: 6s;
}
@keyframes dir-dot-flow-a {
  0%   { left: -10px; top: 18%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 102%; top: 42%; opacity: 0; }
}
@keyframes dir-dot-flow-b {
  0%   { right: -10px; top: 70%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { right: 102%; top: 35%; opacity: 0; }
}
/* Force les 8 vignettes sur une seule ligne (desktop) */
.dir-scenarios .ucx-thumbs {
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  max-width: 1240px;
}
.dir-scenarios .ucx-thumb { aspect-ratio: 3 / 4; }
.dir-scenarios-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dir-scenarios-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.32; }
.dir-scenarios-orb--a {
  width: 540px; height: 540px; top: -140px; left: -120px;
  background: radial-gradient(circle, color-mix(in oklab, var(--dir-navy) 55%, transparent), transparent 65%);
  animation: dir-orb-a 14s ease-in-out infinite;
}
.dir-scenarios-orb--b {
  width: 620px; height: 620px; bottom: -200px; right: -160px;
  background: radial-gradient(circle, color-mix(in oklab, var(--dir-gold) 45%, transparent), transparent 65%);
  animation: dir-orb-b 18s ease-in-out infinite;
}
@keyframes dir-orb-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
@keyframes dir-orb-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px,-40px); } }
.dir-scenarios-inner { position: relative; z-index: 1; }

.dir-scenarios .ucx-head {
  text-align: center; max-width: 820px; margin: 0 auto clamp(36px, 5vw, 56px);
}
.dir-scenarios .ucx-head h2 {
  color: var(--ink, #0f172a);
}
.dir-scenarios .ucx-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--dir-navy) 0%, var(--dir-gold) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Boutons de navigation adaptés au fond clair */
.dir-scenarios .ucx-nav-sq {
  background: #fff;
  border: 1px solid rgba(15,23,42,0.1);
  color: var(--dir-navy);
  box-shadow: 0 4px 12px -4px rgba(11,27,56,0.15);
}
.dir-scenarios .ucx-nav-sq:hover {
  background: var(--dir-navy);
  color: #fff;
  border-color: var(--dir-navy);
}

.dir-scenarios .ucx-stage { max-width: 1240px; margin: 0 auto; }
.dir-scenarios .ucx-slide {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  min-height: 600px;
  animation: dir-slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes dir-slide-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.dir-scenarios .ucx-card-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800; color: var(--ink, #0f172a); letter-spacing: -0.02em; line-height: 1.15;
  margin: 0 0 14px;
}
.dir-scenarios .ucx-callout-text {
  font-size: 14.5px; line-height: 1.65;
  color: rgba(15, 23, 42, 0.75);
  max-width: 520px; margin-bottom: 18px;
}
.dir-scenarios .ucx-kicker {
  font-size: 12px; letter-spacing: 0.14em; color: rgba(15, 23, 42, 0.62); margin-bottom: 14px;
}
.dir-scenarios .ucx-kicker-num {
  background: var(--ucx-accent, var(--dir-navy));
  color: #fff; padding: 4px 10px; border-radius: 6px;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--ucx-accent, var(--dir-navy)) 55%, transparent);
}
.dir-scenarios .ucx-kicker-label { color: rgba(15, 23, 42, 0.55); }
.dir-scenarios .ucx-counter { color: rgba(15,23,42,0.45); font-size: 13px; }
.dir-scenarios .ucx-counter-current { color: var(--ucx-accent, var(--dir-navy)); font-size: 18px; font-weight: 800; }

/* Hero metric (left) */
.dir-hero-metric {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 20px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--ucx-accent, var(--dir-navy)) 8%, #fff), #fff);
  border: 1px solid color-mix(in oklab, var(--ucx-accent, var(--dir-navy)) 18%, transparent);
  border-left: 3px solid var(--ucx-accent, var(--dir-gold));
  border-radius: 0 12px 12px 0;
  box-shadow: 0 8px 20px -16px rgba(11, 27, 56, 0.25);
}
.dir-hero-metric-val {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1;
  background: linear-gradient(135deg, var(--ucx-accent, var(--dir-navy)) 0%, color-mix(in oklab, var(--ucx-accent, var(--dir-navy)) 70%, #000) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dir-hero-metric-lbl {
  font-size: 12.5px; color: rgba(15,23,42,0.58);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}

/* Outcome card */
.dir-outcome {
  margin: 0 0 14px; padding: 14px 18px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  border-left: 3px solid var(--ucx-accent, var(--dir-gold));
  box-shadow: 0 1px 2px rgba(11,27,56,0.04), 0 8px 22px -18px rgba(11,27,56,0.15);
}
.dir-outcome-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(15, 23, 42, 0.55); margin-bottom: 7px;
}
.dir-outcome-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dir-outcome p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(15, 23, 42, 0.82); }

/* Sources */
.dir-sources { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.dir-sources-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(15, 23, 42, 0.45);
}
.dir-sources-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dir-source-chip {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--dir-navy) 18%, transparent);
  color: var(--dir-navy);
}

/* Overlay hero on photo */
.dir-overlay-hero {
  position: absolute; left: 24px; bottom: 24px; z-index: 3;
  padding: 14px 18px; border-radius: 12px;
  background: rgba(10, 14, 28, 0.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  max-width: 70%;
}
.dir-overlay-val {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800; letter-spacing: -0.025em;
  color: #fff; line-height: 1;
}
.dir-overlay-lbl {
  font-size: 11px; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65); margin-top: 4px;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .dir-scenarios .ucx-slide { grid-template-columns: 1fr; gap: 36px; min-height: auto; }
}
@media (max-width: 860px) {
  .dir-scenarios .ucx-thumbs { grid-template-columns: repeat(4, 1fr); max-width: 560px; }
}
@media (max-width: 640px) {
  .dir-scenarios .ucx-thumbs { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 24px; max-width: 360px; }
  .dir-scenarios .ucx-thumb { aspect-ratio: 4/5; border-radius: 10px; }
  .dir-overlay-hero { left: 12px; bottom: 12px; padding: 10px 14px; }
}

/* ── Démo en direct ── */
.dir-demo {
  background: linear-gradient(180deg, #fbfcff 0%, #f1f3fb 100%);
  position: relative; overflow: hidden;
}
.dir-demo::before {
  content: '';
  position: absolute; top: -140px; right: -140px;
  width: 440px; height: 440px;
  background: radial-gradient(circle, color-mix(in oklab, var(--dir-navy) 20%, transparent), transparent 65%);
  filter: blur(60px); pointer-events: none;
}
.dir-demo .section-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--dir-navy) 0%, var(--dir-gold) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dir-demo .live-app-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 28px 0 18px; position: relative;
}
.dir-demo .live-app-controls-groups { display: flex; gap: 10px; flex-wrap: wrap; }
.dir-demo .seg.seg-dir {
  display: inline-flex; padding: 4px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 10px; gap: 2px;
  backdrop-filter: blur(8px);
}
.dir-demo .seg.seg-dir .seg-btn {
  border: 0; background: transparent;
  padding: 7px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 700;
  color: rgba(15,23,42,0.55);
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease;
  font-family: inherit;
}
.dir-demo .seg.seg-dir .seg-btn:hover { color: rgba(15,23,42,0.85); }
.dir-demo .seg.seg-dir .seg-btn.is-active {
  color: var(--dir-navy);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 0 0 1px color-mix(in oklab, var(--dir-navy) 22%, transparent);
}
.dir-demo .live-app-open {
  font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 10px;
  background: rgba(255,255,255,0.8);
  border: 1px solid color-mix(in oklab, var(--dir-navy) 22%, transparent);
  color: var(--dir-navy);
  text-decoration: none;
  transition: background 220ms, border-color 220ms, transform 220ms;
}
.dir-demo .live-app-open:hover {
  background: var(--dir-navy); color: #fff; transform: translateY(-1px);
  border-color: var(--dir-navy);
}
.dir-demo .pt-demo-desc {
  color: rgba(15,23,42,0.6);
  font-size: 14.5px; line-height: 1.6;
  margin: 0 0 32px; max-width: 640px;
}
.dir-demo .pt-demo-phone { --pt-dp-w: clamp(280px, 32vw, 360px); }

/* Laptop */
.dir-demo-laptop {
  --lpt-w: min(1080px, 100%);
  width: var(--lpt-w);
  margin: 0 auto;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 40px 80px -24px rgba(7,12,24,0.45),
    0 12px 28px -12px color-mix(in oklab, var(--dir-navy) 30%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.1);
  overflow: hidden;
  container-type: inline-size;
}
.dir-demo-laptop-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(15,23,42,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dir-demo-laptop-url {
  flex: 1; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: rgba(255,255,255,0.45);
  text-align: center; letter-spacing: 0.02em;
}
.dir-demo-laptop-screen {
  position: relative; width: 100%; aspect-ratio: 1280 / 780;
  background: #f8fafc; overflow: hidden;
}
.dir-demo-laptop-screen iframe {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 780px; border: 0; display: block;
  transform-origin: top left;
  transform: scale(tan(atan2(100cqw, 1280px)));
  background: #f8fafc;
}
.dir-demo-laptop::after {
  content: ''; display: block;
  width: 28%; height: 8px; margin: 0 auto;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 22px -8px rgba(0,0,0,0.35);
}

/* ── Pourquoi MaClinique ── */
.dir-why {
  background: #fbfaff;
  position: relative; overflow: hidden;
}
.dir-why::before {
  content: '';
  position: absolute; top: -140px; right: -140px;
  width: 440px; height: 440px;
  background: radial-gradient(circle, color-mix(in oklab, var(--dir-gold) 22%, transparent), transparent 65%);
  filter: blur(60px); pointer-events: none;
}
.dir-why-head {
  max-width: 720px; margin: 0 auto 48px; text-align: center; position: relative;
}
.dir-why-head h2 {
  margin: 14px 0 14px;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--ink, #0f172a);
}
.dir-why-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--dir-navy) 0%, var(--dir-gold) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dir-why-head p {
  color: rgba(15,23,42,0.58);
  font-size: 15px; line-height: 1.6;
}

.dir-why-list {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 780px; margin: 0 auto;
  position: relative;
}
.dir-why-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  transition: background 240ms, transform 240ms;
}
.dir-why-row:hover {
  background: rgba(255,255,255,0.98);
  transform: translateX(2px);
}
.dir-why-row-num {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 800;
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.45);
  flex-shrink: 0;
}
.dir-why-row h3 {
  margin: 0 0 3px; font-size: 15px; font-weight: 700;
  color: var(--ink, #0f172a); letter-spacing: -0.01em;
}
.dir-why-row p {
  margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(15,23,42,0.6);
}
.dir-why-cross, .dir-why-check {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dir-why-cross {
  background: color-mix(in oklab, #DC2626 14%, #fff);
  color: #DC2626;
}
.dir-why-check {
  background: color-mix(in oklab, var(--dir-navy) 16%, #fff);
  color: var(--dir-navy);
}
.dir-why-row--us {
  background: linear-gradient(135deg, color-mix(in oklab, var(--dir-navy) 6%, #fff), color-mix(in oklab, var(--dir-gold) 6%, #fff));
  border-color: color-mix(in oklab, var(--dir-navy) 22%, transparent);
  padding: 20px 22px;
}
.dir-why-row--us h3 { color: var(--dir-navy); }

/* ── CTA final ── */
.dir-cta { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
.dir-faq { padding-bottom: clamp(56px, 8vw, 96px); }
.dir-cta-card {
  background: linear-gradient(135deg, #0a0d1f 0%, #1a1e3e 100%);
  border: 1px solid color-mix(in oklab, var(--dir-gold) 30%, transparent);
  border-radius: 24px;
  padding: clamp(32px, 5vw, 64px);
  color: #fff; text-align: center;
  position: relative; overflow: hidden;
}
.dir-cta-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in oklab, var(--dir-gold) 20%, transparent), transparent 60%);
  pointer-events: none;
}
.dir-cta-card h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  margin: 14px 0 14px; color: #fff; position: relative;
}
.dir-cta-card h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--dir-gold) 0%, #fbbf24 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dir-cta-card p {
  color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.6;
  max-width: 580px; margin: 0 auto 28px; position: relative;
}
.dir-cta-actions {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  position: relative;
}

/* ─── Direction · Disciplines (grille 3×2 comme bio) ─── */
.dir-disc-list {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1160px;
}
.dir-disc-list > li:nth-child(5),
.dir-disc-list > li:nth-child(6) {
  grid-column: auto; max-width: none; margin-inline: 0;
}
@media (max-width: 980px) { .dir-disc-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dir-disc-list { grid-template-columns: 1fr; } }

/* ─── Direction · ROI (tableau + cash dormant) ─── */
.dir-roi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #060913 0%, #0a0f1f 100%);
  color: #e6e9f2;
  padding: clamp(72px, 9vw, 112px) 0;
}
.dir-roi-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dir-roi-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; }
.dir-roi-orb--a {
  width: 520px; height: 520px; top: -140px; left: -120px;
  background: radial-gradient(circle, color-mix(in oklab, var(--dir-navy) 72%, transparent), transparent 65%);
}
.dir-roi-orb--b {
  width: 620px; height: 620px; bottom: -200px; right: -160px;
  background: radial-gradient(circle, color-mix(in oklab, var(--dir-gold) 55%, transparent), transparent 65%);
}
.dir-roi-inner { position: relative; z-index: 1; }

.dir-roi-head { max-width: 800px; margin: 0 auto 48px; text-align: center; }
.dir-roi-head h2 {
  margin: 14px 0 14px;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  color: #fff;
}
.dir-roi-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--dir-gold) 0%, #fbbf24 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dir-roi-head p { color: rgba(230,233,242,0.6); font-size: 15px; line-height: 1.6; margin: 0; }

/* Table */
.dir-roi-table-wrap {
  max-width: 1080px; margin: 0 auto 56px;
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
}
.dir-roi-table { min-width: 720px; display: flex; flex-direction: column; }
.dir-roi-table-head,
.dir-roi-row {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1.2fr 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
}
.dir-roi-table-head {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(230,233,242,0.45);
}
.dir-roi-row {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.22,1,.36,1), background 240ms;
}
.dir-roi-row.in { opacity: 1; transform: translateY(0); }
.dir-roi-row:hover { background: rgba(255,255,255,0.04); }
.dir-roi-row:last-of-type { border-bottom: 0; }

.dir-roi-row-name { display: flex; align-items: center; gap: 12px; }
.dir-roi-row-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  padding: 3px 8px; border-radius: 6px; border: 1px solid;
  flex-shrink: 0;
}
.dir-roi-row-chip--total {
  background: linear-gradient(135deg, var(--dir-navy), var(--dir-gold));
  color: #fff; border-color: transparent;
}
.dir-roi-row-name-text { color: #fff; font-size: 14px; font-weight: 600; }
.dir-roi-row-capex,
.dir-roi-row-save,
.dir-roi-row-months {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px; font-weight: 700;
  color: rgba(230,233,242,0.85);
  font-variant-numeric: tabular-nums;
}
.dir-roi-row-save { color: var(--dir-gold); font-weight: 800; }
.dir-roi-row-status {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dir-roi-row-status--amorti { color: #10b981; }
.dir-roi-row-status--running { color: rgba(230,233,242,0.6); }

.dir-roi-row--total {
  background: linear-gradient(90deg, color-mix(in oklab, var(--dir-navy) 22%, transparent), color-mix(in oklab, var(--dir-gold) 18%, transparent));
  border-top: 1px solid color-mix(in oklab, var(--dir-gold) 35%, transparent);
  border-bottom: 0 !important;
  padding: 18px 22px;
}
.dir-roi-row--total .dir-roi-row-name-text,
.dir-roi-row--total .dir-roi-row-capex { color: #fff; }
.dir-roi-row--total .dir-roi-row-save {
  font-size: 15px;
  color: var(--dir-gold);
}

/* Cash dormant */
.dir-roi-dormant { max-width: 1080px; margin: 0 auto; text-align: center; }
.dir-roi-dormant-title {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800; letter-spacing: -0.02em;
  color: #fff; margin: 0 0 8px;
}
.dir-roi-dormant-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--dir-gold) 0%, #fbbf24 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dir-roi-dormant-sub {
  color: rgba(230,233,242,0.55); font-size: 14px; margin: 0 0 28px;
}
.dir-roi-dormant-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
@media (max-width: 880px) { .dir-roi-dormant-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dir-roi-dormant-grid { grid-template-columns: 1fr; } }

.dir-roi-dormant-card {
  padding: 20px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  position: relative; overflow: hidden;
  transition: border-color 280ms, transform 280ms;
}
.dir-roi-dormant-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dir-gold), transparent);
  opacity: 0.6;
}
.dir-roi-dormant-card:hover {
  border-color: color-mix(in oklab, var(--dir-gold) 35%, transparent);
  transform: translateY(-2px);
}
.dir-roi-dormant-val {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1.1; margin-bottom: 6px;
}
.dir-roi-dormant-label {
  font-size: 13px; font-weight: 700; color: #fff;
  letter-spacing: -0.005em; margin-bottom: 6px;
}
.dir-roi-dormant-desc {
  margin: 0; font-size: 12px; line-height: 1.5;
  color: rgba(230,233,242,0.55);
}

.dir-roi-grand-total {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 22px 36px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--dir-navy) 40%, transparent), color-mix(in oklab, var(--dir-gold) 22%, transparent));
  border: 1px solid color-mix(in oklab, var(--dir-gold) 45%, transparent);
  border-radius: 16px;
  box-shadow: 0 20px 40px -20px color-mix(in oklab, var(--dir-gold) 50%, transparent);
}
.dir-roi-grand-total-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(230,233,242,0.7);
  margin-bottom: 4px;
}
.dir-roi-grand-total-val {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1;
  background: linear-gradient(135deg, var(--dir-gold), #fbbf24);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dir-roi-grand-total-context {
  font-size: 12px; color: rgba(230,233,242,0.55);
  margin-top: 6px; letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .dir-roi-table-head, .dir-roi-row { grid-template-columns: 1.6fr 1fr 1fr 0.8fr 0.8fr; gap: 10px; padding: 12px 14px; font-size: 12px; }
  .dir-roi-row-name-text { font-size: 12.5px; }
  .dir-roi-row-capex, .dir-roi-row-save, .dir-roi-row-months { font-size: 12px; }
}

/* ─── Direction clinique · Palette globale unifiée ───────────────────
   4 couleurs sémantiques maximum. Ne pas introduire de hue hors palette.

   --dir-navy  #1E3A8A · Primary / stratégique / pilotable
   --dir-gold  #D97706 · Highlight / achievement / saved
   --dir-red   #DC2626 · Bleeding / urgent / loss (alerts only)
   --dir-teal  #0D9488 · Quality / compliance / environnement

   Usage scénarios :
   · bedblock, dms     → red
   · defib, cash, star → navy
   · ias, has          → teal
   · bloc              → gold
   Usage bandeau :
   · alert             → red
   · live/strategic    → navy
   · ok/saved          → gold
   · ok/quality        → teal
   Usage ROI modules :
   · amorti            → gold
   · running           → teal
   ─────────────────────────────────────────────────────────────────── */
.direction-page-root {
  --dir-navy: #1E3A8A;
  --dir-gold: #D97706;
  --dir-red:  #DC2626;
  --dir-teal: #0D9488;
}

/* Harmonisation bandeau : les dots d'alerte suivent la palette */
.dir-bandeau .med-bandeau-dot--alert { background: var(--dir-red); box-shadow: 0 0 8px color-mix(in oklab, var(--dir-red) 60%, transparent); }
.dir-bandeau .med-bandeau-dot--ok    { background: var(--dir-gold); box-shadow: 0 0 8px color-mix(in oklab, var(--dir-gold) 60%, transparent); }
.dir-bandeau .med-bandeau-dot--live  { background: var(--dir-navy); box-shadow: 0 0 8px color-mix(in oklab, var(--dir-navy) 60%, transparent); }
.dir-bandeau .med-bandeau-dot--warn  { background: var(--dir-red); box-shadow: 0 0 8px color-mix(in oklab, var(--dir-red) 60%, transparent); }

/* ─── Direction · fallback robuste si image échoue à charger ─── */
.dir-scenarios .ucx-hero-photo {
  position: relative;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--ucx-accent, var(--dir-navy)) 45%, #0a0d1f) 0%,
                            color-mix(in oklab, var(--ucx-accent, var(--dir-navy)) 20%, #050710) 100%);
}
.dir-scenarios .ucx-hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1.2px, transparent 1.3px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 35%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 35%, transparent 90%);
  pointer-events: none;
  z-index: 0;
}
.dir-scenarios .ucx-hero-photo img {
  position: relative;
  z-index: 1;
  /* si l'alt s'affiche = image cassée, on masque proprement */
}
.dir-scenarios .ucx-hero-photo img:not([src]),
.dir-scenarios .ucx-hero-photo img[alt]:not([src*="unsplash"]):not([src^="http"]),
.dir-scenarios .ucx-hero-photo img[loading] { /* laisse l'img s'afficher normalement */ }

/* Thumbs fallback */
.dir-scenarios .ucx-thumb {
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--ucx-thumb-accent, var(--dir-navy)) 55%, #0a0d1f) 0%,
                            color-mix(in oklab, var(--ucx-thumb-accent, var(--dir-navy)) 25%, #050710) 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   Médecins · Six capacités · carousel (mirror de .bio-scenarios, accent teal)
   ═══════════════════════════════════════════════════════════════════ */
.med-scenarios {
  position: relative;
  padding: clamp(72px, 10vw, 120px) 0;
  background:
    radial-gradient(ellipse 1200px 520px at 80% -8%, color-mix(in oklab, var(--teal-500, #0eb1b8) 10%, #f8fafc) 0%, transparent 70%),
    linear-gradient(180deg, var(--slate-50, #f8fafc) 0%, #ffffff 100%);
  border-top: 1px solid var(--slate-200, #e2e8f0);
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  color: var(--ink, #0f172a);
  isolation: isolate;
  overflow: hidden;
  zoom: 0.8;
}
.med-scenarios-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.med-scenarios-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--teal-500, #0eb1b8) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--teal-500, #0eb1b8) 8%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  opacity: 0.7;
}
.med-scenarios-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3; }
.med-scenarios-orb--a {
  width: 540px; height: 540px; top: -140px; left: -120px;
  background: radial-gradient(circle, color-mix(in oklab, var(--teal-500, #0eb1b8) 40%, transparent), transparent 65%);
  animation: med-orb-a 14s ease-in-out infinite;
}
.med-scenarios-orb--b {
  width: 620px; height: 620px; bottom: -200px; right: -160px;
  background: radial-gradient(circle, color-mix(in oklab, #6366f1 40%, transparent), transparent 65%);
  animation: med-orb-b 18s ease-in-out infinite;
}
@keyframes med-orb-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
@keyframes med-orb-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px,-40px); } }

.med-scenarios-inner { position: relative; z-index: 1; }
.med-scenarios-inner::before,
.med-scenarios-inner::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none; z-index: 0;
}
.med-scenarios-inner::before {
  background: var(--teal-500, #0eb1b8);
  box-shadow: 0 0 12px color-mix(in oklab, var(--teal-500, #0eb1b8) 60%, transparent);
  animation: med-dot-flow-a 14s linear infinite;
}
.med-scenarios-inner::after {
  background: #6366f1;
  box-shadow: 0 0 12px color-mix(in oklab, #6366f1 60%, transparent);
  animation: med-dot-flow-b 18s linear infinite;
  animation-delay: 6s;
}
@keyframes med-dot-flow-a {
  0%   { left: -10px; top: 18%; opacity: 0; }
  10%  { opacity: 1; } 90%  { opacity: 1; }
  100% { left: 102%; top: 42%; opacity: 0; }
}
@keyframes med-dot-flow-b {
  0%   { right: -10px; top: 70%; opacity: 0; }
  10%  { opacity: 1; } 90%  { opacity: 1; }
  100% { right: 102%; top: 35%; opacity: 0; }
}

/* Header */
.med-scenarios .ucx-head { text-align: center; max-width: 820px; margin: 0 auto clamp(36px, 5vw, 56px); }
.med-scenarios .ucx-head h2 { color: var(--ink, #0f172a); }
.med-scenarios .ucx-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--teal-500, #0eb1b8) 0%, #6366f1 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.med-scenarios .ucx-stage { max-width: 1240px; margin: 0 auto; }
.med-scenarios .ucx-slide {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px;
  align-items: center; min-height: 560px;
  animation: med-slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes med-slide-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.med-scenarios .ucx-card-title {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800; color: var(--ink, #0f172a);
  letter-spacing: -0.025em; line-height: 1.08;
  margin: 0 0 14px;
}
.med-scenarios .ucx-card-sub {
  font-size: 15px; color: rgba(15, 23, 42, 0.62);
  font-style: italic; margin-bottom: 14px;
}
.med-scenarios .ucx-callout-text {
  font-size: 15px; line-height: 1.6;
  color: rgba(15, 23, 42, 0.75);
  max-width: 520px; margin-bottom: 18px;
}
.med-scenarios .ucx-kicker {
  font-size: 12px; letter-spacing: 0.14em;
  color: rgba(15, 23, 42, 0.62); margin-bottom: 16px;
}
.med-scenarios .ucx-kicker-num {
  background: var(--ucx-accent, var(--teal-500, #0eb1b8));
  color: #fff; padding: 4px 10px; border-radius: 6px;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--ucx-accent, var(--teal-500, #0eb1b8)) 55%, transparent);
}
.med-scenarios .ucx-kicker-label { color: rgba(15, 23, 42, 0.55); }
.med-scenarios .ucx-counter { color: rgba(15, 23, 42, 0.45); font-size: 13px; }
.med-scenarios .ucx-counter-current {
  color: var(--ucx-accent, var(--teal-500, #0eb1b8));
  font-size: 18px; font-weight: 800;
}

/* Navigation adaptée au fond clair */
.med-scenarios .ucx-nav-sq {
  background: #fff;
  border: 1px solid rgba(15,23,42,0.1);
  color: var(--teal-500, #0eb1b8);
  box-shadow: 0 4px 12px -4px rgba(11,27,56,0.15);
}
.med-scenarios .ucx-nav-sq:hover {
  background: var(--teal-500, #0eb1b8); color: #fff; border-color: var(--teal-500, #0eb1b8);
}

@media (max-width: 1024px) {
  .med-scenarios .ucx-slide { grid-template-columns: 1fr; gap: 36px; min-height: auto; }
}
@media (max-width: 640px) {
  .med-scenarios .ucx-thumbs { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 24px; max-width: 320px; }
  .med-scenarios .ucx-thumb { aspect-ratio: 4 / 5; border-radius: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Direction · Background unifié sur toute la page
   (même pattern que .dir-scenarios : gradient clair + grille + orbes + dots)
   ═══════════════════════════════════════════════════════════════════ */

/* Base bg : dégradé slate-50 → blanc + halo navy top-right, sur toutes les sections */
.direction-page-root .dir-disc,
.direction-page-root .dir-demo,
.direction-page-root .dir-roi,
.direction-page-root .dir-why,
.direction-page-root .dir-faq,
.direction-page-root .dir-cta {
  background:
    radial-gradient(ellipse 1200px 520px at 80% -8%, color-mix(in oklab, var(--dir-navy) 10%, #f8fafc) 0%, transparent 70%),
    linear-gradient(180deg, var(--slate-50, #f8fafc) 0%, #ffffff 100%) !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink, #0f172a);
}

/* Grille subtile navy en motif 44×44 masquée en ellipse */
.direction-page-root .dir-disc::before,
.direction-page-root .dir-demo::before,
.direction-page-root .dir-roi::before,
.direction-page-root .dir-why::before,
.direction-page-root .dir-faq::before,
.direction-page-root .dir-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--dir-navy) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--dir-navy) 8%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}

/* Orbe navy flottant (diagonale haut-gauche → bas-droite selon la section) */
.direction-page-root .dir-disc::after,
.direction-page-root .dir-demo::after,
.direction-page-root .dir-roi::after,
.direction-page-root .dir-why::after,
.direction-page-root .dir-faq::after,
.direction-page-root .dir-cta::after {
  content: '';
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, color-mix(in oklab, var(--dir-gold) 40%, transparent), transparent 65%);
  animation: dir-orb-b 18s ease-in-out infinite;
  top: -140px;
  right: -120px;
}
/* Alternance d'orbe (navy au lieu de gold) une section sur deux */
.direction-page-root .dir-demo::after,
.direction-page-root .dir-why::after,
.direction-page-root .dir-cta::after {
  background: radial-gradient(circle, color-mix(in oklab, var(--dir-navy) 40%, transparent), transparent 65%);
  top: auto; bottom: -160px; right: auto; left: -120px;
  width: 620px; height: 620px;
  animation: dir-orb-a 14s ease-in-out infinite;
}

/* Dots animés data-flow sur chaque section (via > .container) */
.direction-page-root .dir-disc > .container,
.direction-page-root .dir-demo > .container,
.direction-page-root .dir-roi > .container,
.direction-page-root .dir-why > .container,
.direction-page-root .dir-faq > .container,
.direction-page-root .dir-cta > .container {
  position: relative;
  z-index: 1;
}
.direction-page-root .dir-disc > .container::before,
.direction-page-root .dir-demo > .container::before,
.direction-page-root .dir-roi > .container::before,
.direction-page-root .dir-why > .container::before,
.direction-page-root .dir-faq > .container::before,
.direction-page-root .dir-cta > .container::before {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dir-navy);
  box-shadow: 0 0 12px color-mix(in oklab, var(--dir-navy) 60%, transparent);
  animation: dir-dot-flow-a 14s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.direction-page-root .dir-disc > .container::after,
.direction-page-root .dir-demo > .container::after,
.direction-page-root .dir-roi > .container::after,
.direction-page-root .dir-why > .container::after,
.direction-page-root .dir-faq > .container::after,
.direction-page-root .dir-cta > .container::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dir-gold);
  box-shadow: 0 0 12px color-mix(in oklab, var(--dir-gold) 60%, transparent);
  animation: dir-dot-flow-b 18s linear infinite;
  animation-delay: 6s;
  pointer-events: none;
  z-index: 0;
}

/* FAQ & CTA : forcer le texte en ink dark (ils étaient dark avant) */
.direction-page-root .dir-faq,
.direction-page-root .dir-cta { color: var(--ink, #0f172a); }

.direction-page-root .dir-faq .inf26-faq-side h2,
.direction-page-root .dir-faq .inf26-faq-side h2 > * {
  color: #ffffff !important;
  text-shadow: none !important;
}
.direction-page-root .dir-faq .inf26-faq-side h2 em {
  font-style: italic;
  background: linear-gradient(135deg, #fbbf24 0%, var(--dir-gold) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.direction-page-root .dir-faq .inf26-faq-side > p { color: rgba(255,255,255,0.72) !important; }
.direction-page-root .dir-faq .inf26-faq-item {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 1px 2px rgba(11,27,56,0.04), 0 8px 22px -18px rgba(11,27,56,0.15);
}
.direction-page-root .dir-faq .inf26-faq-item.is-open {
  background: #fff;
  border-color: color-mix(in oklab, var(--dir-navy) 38%, transparent);
}
.direction-page-root .dir-faq .inf26-faq-q { color: var(--ink, #0f172a); }
.direction-page-root .dir-faq .inf26-faq-num {
  background: color-mix(in oklab, var(--dir-navy) 12%, #fff);
  color: var(--dir-navy);
  border: 1px solid color-mix(in oklab, var(--dir-navy) 25%, transparent);
}
.direction-page-root .dir-faq .inf26-faq-plus > span { background: rgba(15,23,42,0.45); }
.direction-page-root .dir-faq .inf26-faq-item.is-open .inf26-faq-plus > span { background: var(--dir-navy); }
.direction-page-root .dir-faq .inf26-faq-a p { color: rgba(15,23,42,0.7); }
.direction-page-root .dir-faq .inf26-faq-counter {
  background: rgba(255,255,255,0.85);
  border-color: rgba(15,23,42,0.1);
}
.direction-page-root .dir-faq .inf26-faq-counter-curr { color: var(--dir-navy); }
.direction-page-root .dir-faq .inf26-faq-counter-sep  { color: rgba(15,23,42,0.3); }
.direction-page-root .dir-faq .inf26-faq-counter-tot  { color: rgba(15,23,42,0.5); }

/* CTA final en light : carte blanche glass avec accent gold */
.direction-page-root .dir-cta-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid color-mix(in oklab, var(--dir-gold) 30%, transparent);
  color: var(--ink, #0f172a);
  box-shadow:
    0 30px 60px -28px rgba(11,27,56,0.18),
    0 12px 28px -12px color-mix(in oklab, var(--dir-gold) 28%, transparent);
  backdrop-filter: blur(10px);
}
.direction-page-root .dir-cta-card::before {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in oklab, var(--dir-gold) 12%, transparent), transparent 60%);
}
.direction-page-root .dir-cta-card h2 { color: var(--ink, #0f172a); }
.direction-page-root .dir-cta-card p { color: rgba(15,23,42,0.62); }

/* ROI : s'assurer que la card blanche reste visible sur le nouveau bg */
.direction-page-root .dir-roi { background-image:
    radial-gradient(ellipse 1200px 520px at 80% -8%, color-mix(in oklab, var(--dir-navy) 10%, #f8fafc) 0%, transparent 70%),
    linear-gradient(180deg, var(--slate-50, #f8fafc) 0%, #ffffff 100%) !important;
  color: var(--ink, #0f172a) !important;
}
.direction-page-root .dir-roi-head h2 { color: var(--ink, #0f172a); }
.direction-page-root .dir-roi-head p { color: rgba(15,23,42,0.62); }
.direction-page-root .dir-roi-table-wrap {
  background: rgba(255,255,255,0.92);
  border-color: rgba(15,23,42,0.08);
}
.direction-page-root .dir-roi-table-head {
  border-bottom-color: rgba(15,23,42,0.08);
  color: rgba(15,23,42,0.5);
}
.direction-page-root .dir-roi-row { border-bottom-color: rgba(15,23,42,0.05); }
.direction-page-root .dir-roi-row:hover { background: rgba(15,23,42,0.03); }
.direction-page-root .dir-roi-row-name-text { color: var(--ink, #0f172a); }
.direction-page-root .dir-roi-row-capex,
.direction-page-root .dir-roi-row-months { color: rgba(15,23,42,0.82); }
.direction-page-root .dir-roi-row-status--running { color: rgba(15,23,42,0.6); }
.direction-page-root .dir-roi-row--total {
  background: linear-gradient(90deg, color-mix(in oklab, var(--dir-navy) 10%, #fff), color-mix(in oklab, var(--dir-gold) 10%, #fff));
  border-top: 1px solid color-mix(in oklab, var(--dir-gold) 35%, transparent);
}
.direction-page-root .dir-roi-row--total .dir-roi-row-name-text,
.direction-page-root .dir-roi-row--total .dir-roi-row-capex { color: var(--ink, #0f172a); }
.direction-page-root .dir-roi-dormant-title { color: var(--ink, #0f172a); }
.direction-page-root .dir-roi-dormant-sub   { color: rgba(15,23,42,0.55); }
.direction-page-root .dir-roi-dormant-card {
  background: rgba(255,255,255,0.92);
  border-color: rgba(15,23,42,0.08);
}
.direction-page-root .dir-roi-dormant-val {
  background: linear-gradient(135deg, var(--dir-navy) 0%, color-mix(in oklab, var(--dir-navy) 65%, #000) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.direction-page-root .dir-roi-dormant-label { color: var(--ink, #0f172a); }
.direction-page-root .dir-roi-dormant-desc  { color: rgba(15,23,42,0.55); }
.direction-page-root .dir-roi-grand-total-label { color: rgba(15,23,42,0.6); }
.direction-page-root .dir-roi-grand-total-context { color: rgba(15,23,42,0.5); }

/* ═══════════════════════════════════════════════════════════════════
   Biomédical · Différenciation concurrentielle v2 (rivaux + matrice + verdict)
   ═══════════════════════════════════════════════════════════════════ */

/* Rangée 1 : 4 concurrents en cartes minimales */
.bio-vs-rivals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto 28px;
  position: relative;
}
@media (max-width: 820px) { .bio-vs-rivals { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bio-vs-rivals { grid-template-columns: 1fr; } }

.bio-vs-rival {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(11, 27, 56, 0.03), 0 8px 18px -14px rgba(11, 27, 56, 0.12);
  transition: transform 220ms, border-color 220ms, box-shadow 220ms;
  overflow: hidden;
}
.bio-vs-rival:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--bio-indigo) 22%, transparent);
  box-shadow: 0 18px 30px -20px rgba(11, 27, 56, 0.2);
}
.bio-vs-rival-code {
  position: absolute;
  top: 12px; right: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--bio-indigo) 10%, #fff);
  color: var(--bio-indigo);
  border: 1px solid color-mix(in oklab, var(--bio-indigo) 22%, transparent);
}
.bio-vs-rival-head { margin-bottom: 10px; padding-right: 32px; }
.bio-vs-rival-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink, #0f172a);
}
.bio-vs-rival-sub {
  display: block;
  margin-top: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(15, 23, 42, 0.45);
}
.bio-vs-rival-blind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, #e11d48 10%, #fff);
  border: 1px solid color-mix(in oklab, #e11d48 22%, transparent);
  color: #b91c1c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.bio-vs-rival-blind-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #e11d48;
  box-shadow: 0 0 0 3px color-mix(in oklab, #e11d48 18%, transparent);
  animation: bio-vs-pulse 2.4s ease-in-out infinite;
}
@keyframes bio-vs-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.2); }
}
.bio-vs-rival-short {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.68);
}

/* Rangée 2 : la matrice */
.bio-vs-matrix-wrap {
  max-width: 1080px;
  margin: 0 auto 28px;
  overflow-x: auto;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(11, 27, 56, 0.04), 0 12px 28px -18px rgba(11, 27, 56, 0.18);
  backdrop-filter: blur(10px);
}
.bio-vs-matrix {
  min-width: 720px;
  display: flex;
  flex-direction: column;
}
.bio-vs-matrix-head,
.bio-vs-matrix-row {
  display: grid;
  grid-template-columns: 2.4fr repeat(4, 1fr) 1.2fr;
  align-items: center;
  gap: 0;
}
.bio-vs-matrix-head {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.bio-vs-matrix-row {
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  transition: background 220ms;
}
.bio-vs-matrix-row:hover { background: rgba(15, 23, 42, 0.03); }
.bio-vs-matrix-row:last-of-type { border-bottom: 0; }

.bio-vs-matrix-th {
  padding: 14px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.bio-vs-matrix-th--first {
  text-align: left;
  justify-content: flex-start;
  padding-left: 22px;
}
.bio-vs-matrix-th-code {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--bio-indigo) 10%, #fff);
  color: var(--bio-indigo);
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  border: 1px solid color-mix(in oklab, var(--bio-indigo) 22%, transparent);
}
.bio-vs-matrix-th--us {
  background: linear-gradient(135deg, var(--bio-indigo), #4338ca);
  color: #fff !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 0;
}

.bio-vs-matrix-cell {
  padding: 14px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}
.bio-vs-matrix-cell--first {
  justify-content: flex-start;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--ink, #0f172a);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.bio-vs-matrix-cell--us {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--bio-indigo) 10%, #fff),
    color-mix(in oklab, var(--bio-indigo) 4%, #fff));
  border-left: 2px solid color-mix(in oklab, var(--bio-indigo) 30%, transparent);
}
.bio-vs-matrix-row:last-of-type .bio-vs-matrix-cell--us {
  border-bottom-right-radius: 14px;
}

.bio-vs-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: color-mix(in oklab, #059669 14%, #fff);
  color: #047857;
}
.bio-vs-check--us {
  background: linear-gradient(135deg, var(--bio-indigo), #4338ca);
  color: #fff;
  box-shadow: 0 4px 10px -3px color-mix(in oklab, var(--bio-indigo) 55%, transparent);
}
.bio-vs-dash {
  color: rgba(15, 23, 42, 0.3);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

/* Verdict */
.bio-vs-verdict {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--bio-indigo) 8%, #fff),
    color-mix(in oklab, var(--bio-teal) 6%, #fff));
  border: 1px solid color-mix(in oklab, var(--bio-indigo) 22%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -16px color-mix(in oklab, var(--bio-indigo) 45%, transparent);
}
.bio-vs-verdict-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--bio-indigo), #4338ca);
  color: #fff;
  box-shadow: 0 6px 14px -4px color-mix(in oklab, var(--bio-indigo) 50%, transparent);
}
.bio-vs-verdict p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
}
.bio-vs-verdict p strong { color: var(--bio-indigo); font-weight: 800; }

/* Responsive matrice */
@media (max-width: 720px) {
  .bio-vs-matrix-head, .bio-vs-matrix-row { grid-template-columns: 1.8fr repeat(4, 0.7fr) 1fr; }
  .bio-vs-matrix-cell--first { padding-left: 14px; font-size: 12px; }
  .bio-vs-matrix-cell { padding: 10px 6px; min-height: 40px; }
  .bio-vs-check, .bio-vs-check--us { width: 22px; height: 22px; }
  .bio-vs-matrix-th { padding: 10px 6px; font-size: 10px; }
  .bio-vs-matrix-th--first { padding-left: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Direction · Discipline Produit en hero-slide carousel
   ═══════════════════════════════════════════════════════════════════ */
.dir-disc-hero {
  position: relative;
  padding: clamp(72px, 10vw, 120px) 0;
  overflow: hidden;
}

/* Header centré */
.dir-disc-hero-head {
  max-width: 820px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
  position: relative;
  z-index: 2;
}
.dir-disc-hero-head h2 {
  margin: 16px 0 18px;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--ink, #0f172a);
}
.dir-disc-hero-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--dir-navy) 0%, var(--dir-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dir-disc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid color-mix(in oklab, var(--dir-navy) 22%, transparent);
  color: var(--dir-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
}

/* Stage */
.dir-disc-hero-stage {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.dir-disc-hero-slide {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
  min-height: 520px;
  animation: dir-disc-slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes dir-disc-slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Left : texte */
.dir-disc-hero-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dir-disc-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
}
.dir-disc-hero-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: linear-gradient(135deg, var(--dir-navy), #1e3a8a);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  box-shadow: 0 6px 16px -4px color-mix(in oklab, var(--dir-navy) 55%, transparent);
}
.dir-disc-hero-kicker-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}
.dir-disc-hero-title {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  color: var(--ink, #0f172a);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  max-width: 520px;
  text-wrap: balance;
}
.dir-disc-hero-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(15, 23, 42, 0.72);
  max-width: 520px;
  margin: 0;
}
.dir-disc-hero-counter {
  margin-top: 10px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.4);
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
}
.dir-disc-hero-counter-curr {
  font-size: 18px;
  color: var(--dir-navy);
  font-weight: 800;
}

/* Right : illustration hero */
.dir-disc-hero-visual {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: linear-gradient(135deg, color-mix(in oklab, var(--dir-navy) 6%, #fff), #fff);
  border: 1px solid color-mix(in oklab, var(--dir-navy) 10%, transparent);
  box-shadow:
    0 40px 80px -28px rgba(11, 27, 56, 0.22),
    0 12px 28px -12px color-mix(in oklab, var(--dir-navy) 22%, transparent),
    0 0 0 1px rgba(15, 23, 42, 0.05);
}
.dir-disc-hero-illu {
  position: absolute;
  inset: 0;
  display: block;
}
.dir-disc-hero-illu svg {
  width: 100%;
  height: 100%;
  display: block;
}
.dir-disc-hero-badge-float {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--dir-navy);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  box-shadow: 0 6px 14px -4px rgba(11, 27, 56, 0.15);
}

/* Flèches de navigation sur le visual */
.dir-disc-hero-nav {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.dir-disc-hero-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.95);
  color: var(--dir-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(11, 27, 56, 0.28);
  transition: background 220ms, color 220ms, transform 180ms, border-color 220ms;
}
.dir-disc-hero-nav-btn svg { width: 18px; height: 18px; }
.dir-disc-hero-nav-btn:hover {
  background: linear-gradient(135deg, var(--dir-navy), #1e3a8a);
  color: #fff;
  border-color: transparent;
  transform: scale(1.06);
}
.dir-disc-hero-nav-btn:active { transform: scale(0.94); }

/* Thumbnails bas : 6 pills avec mini-illustration + titre */
.dir-disc-hero-thumbs {
  list-style: none;
  padding: 0;
  margin: clamp(32px, 4vw, 48px) auto 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  max-width: 1240px;
}
.dir-disc-hero-thumb {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 220ms, transform 180ms, background 220ms, box-shadow 220ms;
}
.dir-disc-hero-thumb:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--dir-navy) 30%, transparent);
  background: #fff;
}
.dir-disc-hero-thumb.is-active {
  border-color: var(--dir-navy);
  background: #fff;
  box-shadow: 0 10px 22px -12px color-mix(in oklab, var(--dir-navy) 50%, transparent);
}
.dir-disc-hero-thumb.is-active::after {
  content: '';
  position: absolute;
}
.dir-disc-hero-thumb-illu {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.04);
}
.dir-disc-hero-thumb-illu svg {
  width: 100%;
  height: 100%;
  display: block;
}
.dir-disc-hero-thumb-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dir-disc-hero-thumb-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--dir-navy);
}
.dir-disc-hero-thumb-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.dir-disc-hero-thumb.is-active .dir-disc-hero-thumb-num { color: var(--dir-gold); }

/* Responsive */
@media (max-width: 1024px) {
  .dir-disc-hero-slide { grid-template-columns: 1fr; gap: 32px; min-height: auto; }
  .dir-disc-hero-visual { order: -1; }
}
@media (max-width: 860px) {
  .dir-disc-hero-thumbs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .dir-disc-hero-thumbs { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   Patients · AvantAprès en mode carrousel (une situation à la fois)
   ═══════════════════════════════════════════════════════════════════ */
.pt-aa-carousel .pt-aa-stage {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 18px;
  align-items: stretch;
  max-width: 1080px;
  margin: 20px auto 28px;
}
.pt-aa-carousel .pt-aa-card--carousel {
  margin: 0;
  animation: pt-aa-slide-in 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes pt-aa-slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Flèches de navigation */
.pt-aa-nav {
  align-self: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.96);
  color: var(--teal-700, #0a7278);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(11, 27, 56, 0.28);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 180ms ease;
  flex-shrink: 0;
}
.pt-aa-nav svg { width: 18px; height: 18px; }
.pt-aa-nav:hover {
  background: var(--teal-500, #0eb1b8);
  color: #fff;
  border-color: transparent;
  transform: scale(1.06);
}
.pt-aa-nav:active { transform: scale(0.94); }

/* Pager : dots + counter */
.pt-aa-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 12px auto 0;
  flex-wrap: wrap;
}
.pt-aa-dots {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.pt-aa-dot {
  width: 34px; height: 28px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: rgba(15, 23, 42, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms, color 200ms;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.pt-aa-dot:hover { color: var(--teal-700, #0a7278); background: rgba(14, 177, 184, 0.06); }
.pt-aa-dot.is-active {
  background: linear-gradient(135deg, var(--teal-500, #0eb1b8), #0891a0);
  color: #fff;
  box-shadow: 0 4px 10px -2px color-mix(in oklab, var(--teal-500, #0eb1b8) 55%, transparent);
}
.pt-aa-dot-num { font-variant-numeric: tabular-nums; }

.pt-aa-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.4);
  font-variant-numeric: tabular-nums;
}
.pt-aa-counter-curr {
  color: var(--teal-600, #0b8f95);
  font-size: 17px;
  font-weight: 800;
}
.pt-aa-counter-sep { color: rgba(15, 23, 42, 0.25); }

/* Responsive */
@media (max-width: 720px) {
  .pt-aa-carousel .pt-aa-stage {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pt-aa-nav { display: none; }
  .pt-aa-pager { flex-direction: column; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Infirmiers · Fonctionnalités en carousel (1 slide · flèches)
   ═══════════════════════════════════════════════════════════════════ */
.inf-feat-carousel { position: relative; overflow: hidden; }
.inf-feat-carousel::before {
  content: '';
  position: absolute;
  top: -140px; right: -140px;
  width: 440px; height: 440px;
  background: radial-gradient(circle, color-mix(in oklab, var(--inf-violet, #7c3aed) 18%, transparent), transparent 65%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.inf-feat-carousel .section-head { position: relative; z-index: 1; }
.inf-feat-carousel .section-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--inf-violet, #7c3aed) 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.inf-feat-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 18px;
  align-items: stretch;
  max-width: 1080px;
  margin: 36px auto 24px;
}

/* Slide card — split layout image+body */
.inf-feat-slide {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(11, 27, 56, 0.04),
    0 30px 60px -28px rgba(11, 27, 56, 0.22),
    0 12px 28px -14px color-mix(in oklab, var(--inf-violet, #7c3aed) 22%, transparent);
  backdrop-filter: blur(12px);
  animation: inf-feat-slide-in 480ms cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 380px;
}
@keyframes inf-feat-slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.inf-feat-slide-media {
  position: relative;
  min-height: 340px;
  background: #111;
  overflow: hidden;
}
.inf-feat-slide-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 600ms cubic-bezier(.22,1,.36,1);
}
.inf-feat-slide:hover .inf-feat-slide-media img { transform: scale(1.06); }
.inf-feat-slide-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7, 12, 24, 0.55) 100%);
  pointer-events: none;
}
.inf-feat-slide-tag {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  color: var(--inf-violet, #7c3aed);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border: 1px solid color-mix(in oklab, var(--inf-violet, #7c3aed) 22%, transparent);
}
.inf-feat-slide-icon {
  position: absolute;
  bottom: 18px; left: 18px;
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--inf-violet, #7c3aed), #6d28d9);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -4px color-mix(in oklab, var(--inf-violet, #7c3aed) 55%, transparent);
}

.inf-feat-slide-body {
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.inf-feat-slide-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
}
.inf-feat-slide-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: linear-gradient(135deg, var(--inf-violet, #7c3aed), #6d28d9);
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--inf-violet, #7c3aed) 55%, transparent);
}
.inf-feat-slide-kicker-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
}
.inf-feat-slide-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink, #0f172a);
  text-wrap: balance;
}
.inf-feat-slide-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(15, 23, 42, 0.7);
  max-width: 420px;
}

/* Flèches */
.inf-feat-nav {
  align-self: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.96);
  color: var(--inf-violet, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(11, 27, 56, 0.28);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 180ms ease;
  flex-shrink: 0;
}
.inf-feat-nav svg { width: 18px; height: 18px; }
.inf-feat-nav:hover {
  background: linear-gradient(135deg, var(--inf-violet, #7c3aed), #6d28d9);
  color: #fff;
  border-color: transparent;
  transform: scale(1.06);
}
.inf-feat-nav:active { transform: scale(0.94); }

/* Pager : 6 pills cliquables */
.inf-feat-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 20px auto 0;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.inf-feat-dots {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
  justify-content: center;
  max-width: 860px;
}
.inf-feat-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background 200ms, color 200ms;
  font-family: inherit;
  color: rgba(15, 23, 42, 0.55);
}
.inf-feat-dot:hover {
  background: color-mix(in oklab, var(--inf-violet, #7c3aed) 6%, transparent);
  color: var(--inf-violet, #7c3aed);
}
.inf-feat-dot.is-active {
  background: linear-gradient(135deg, var(--inf-violet, #7c3aed), #6d28d9);
  color: #fff;
  box-shadow: 0 4px 10px -2px color-mix(in oklab, var(--inf-violet, #7c3aed) 55%, transparent);
}
.inf-feat-dot-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.inf-feat-dot-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inf-feat-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.4);
  font-variant-numeric: tabular-nums;
}
.inf-feat-counter-curr {
  color: var(--inf-violet, #7c3aed);
  font-size: 17px;
  font-weight: 800;
}
.inf-feat-counter-sep { color: rgba(15, 23, 42, 0.25); }

/* Responsive */
@media (max-width: 880px) {
  .inf-feat-stage { grid-template-columns: 1fr; gap: 14px; }
  .inf-feat-nav { display: none; }
  .inf-feat-slide { grid-template-columns: 1fr; }
  .inf-feat-slide-media { min-height: 240px; }
  .inf-feat-dot-title { display: none; }
  .inf-feat-dot { padding: 8px 12px; }
  .inf-feat-pager { flex-direction: column; gap: 12px; }
}
@media (max-width: 480px) {
  .inf-feat-slide-body { padding: 22px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Page AmbuLive — Chaîne d'urgence pré-hospitalière (TEAL primaire)
   ═══════════════════════════════════════════════════════════════════ */
.ambulive-page-root {
  --ambu-teal:       #0D9488;
  --ambu-teal-dark:  #0F766E;
  --ambu-red:        #EF4444;
  --ambu-amber:      #F59E0B;
  --ambu-emerald:    #10B981;
  --ambu-violet:     #7C3AED;
  --ambu-rose:       #EC4899;
}

/* Hero illustration */
.ambu-hero-illu {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  filter: drop-shadow(0 30px 50px rgba(7, 12, 24, 0.18));
}
.ambu-hero-illu svg { width: 100%; height: auto; display: block; }

/* ── Scénarios ── */
.ambu-scenarios {
  position: relative;
  padding: clamp(72px, 10vw, 120px) 0;
  background:
    radial-gradient(ellipse 1200px 520px at 80% -8%, color-mix(in oklab, var(--ambu-teal) 12%, #f8fafc) 0%, transparent 70%),
    linear-gradient(180deg, var(--slate-50, #f8fafc) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  color: var(--ink, #0f172a);
  isolation: isolate;
  overflow: hidden;
}
.ambu-scenarios-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ambu-scenarios-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--ambu-teal) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--ambu-teal) 8%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%);
  opacity: 0.6;
}
.ambu-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.32; }
.ambu-orb--a {
  width: 540px; height: 540px; top: -140px; left: -120px;
  background: radial-gradient(circle, color-mix(in oklab, var(--ambu-teal) 50%, transparent), transparent 65%);
  animation: ambu-orb-a 14s ease-in-out infinite;
}
.ambu-orb--b {
  width: 620px; height: 620px; bottom: -200px; right: -160px;
  background: radial-gradient(circle, color-mix(in oklab, var(--ambu-rose) 35%, transparent), transparent 65%);
  animation: ambu-orb-b 18s ease-in-out infinite;
}
@keyframes ambu-orb-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
@keyframes ambu-orb-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px,-40px); } }
.ambu-scenarios-inner { position: relative; z-index: 1; }

.ambu-scenarios-head {
  max-width: 820px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center;
}
.ambu-scenarios-head h2 {
  margin: 16px 0 16px;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
  color: var(--ink, #0f172a);
}
.ambu-scenarios-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--ambu-teal-dark) 0%, var(--ambu-teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Stage */
.ambu-stage { max-width: 1240px; margin: 0 auto; }
.ambu-slide {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: stretch;
  min-height: 540px;
  animation: ambu-slide-in 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ambu-slide-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* Texte gauche */
.ambu-slide-text { display: flex; flex-direction: column; gap: 18px; }

.ambu-act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  align-self: flex-start;
}
.ambu-act-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ambu-act-sep { opacity: 0.4; }
.ambu-act-kpi { opacity: 0.85; font-weight: 700; }
.ambu-act--anticipation {
  background: color-mix(in oklab, var(--ambu-teal) 12%, #fff);
  border: 1px solid color-mix(in oklab, var(--ambu-teal) 30%, transparent);
  color: var(--ambu-teal-dark);
}
.ambu-act--safety {
  background: color-mix(in oklab, var(--ambu-violet) 12%, #fff);
  border: 1px solid color-mix(in oklab, var(--ambu-violet) 30%, transparent);
  color: var(--ambu-violet);
}
.ambu-act--diff {
  background: color-mix(in oklab, var(--ambu-rose) 12%, #fff);
  border: 1px solid color-mix(in oklab, var(--ambu-rose) 30%, transparent);
  color: #be185d;
}

.ambu-slide-headline {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink, #0f172a);
  text-wrap: balance;
}
.ambu-slide-sub {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.72);
  max-width: 540px;
}
.ambu-slide-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(15, 23, 42, 0.66);
  max-width: 540px;
}

/* Proof point */
.ambu-slide-proof {
  margin: 8px 0 0;
  padding: 16px 20px;
  background: color-mix(in oklab, var(--ambu-teal) 8%, #fff);
  border: 1px solid color-mix(in oklab, var(--ambu-teal) 22%, transparent);
  border-left: 3px solid var(--ambu-teal-dark);
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ambu-slide-proof-mark {
  font-size: 16px;
  color: var(--ambu-teal-dark);
  flex-shrink: 0;
}
.ambu-slide-proof blockquote {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ambu-teal-dark);
  letter-spacing: -0.005em;
}

/* Modules + KPI */
.ambu-slide-modules,
.ambu-slide-kpis {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ambu-slide-modules-label,
.ambu-slide-kpis-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.45);
}
.ambu-slide-modules-list,
.ambu-slide-kpis-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ambu-mod-chip {
  font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--ambu-teal) 20%, transparent);
  color: var(--ambu-teal-dark);
}
.ambu-kpi-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(15, 23, 42, 0.06);
  letter-spacing: 0.02em;
}

/* Visual droite */
.ambu-slide-visual {
  position: relative;
  display: flex;
  flex-direction: column;
}
.ambu-slide-visual-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 48px 36px;
  border-radius: 28px;
  background:
    radial-gradient(ellipse 600px 360px at 30% 30%, color-mix(in oklab, var(--ambu-teal) 18%, #fff), transparent 70%),
    linear-gradient(135deg, color-mix(in oklab, var(--ambu-teal) 6%, #fff) 0%, #fff 100%);
  border: 1px solid color-mix(in oklab, var(--ambu-teal) 18%, transparent);
  overflow: hidden;
  min-height: 360px;
  isolation: isolate;
}
.ambu-slide-visual-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  animation: ambu-photo-zoom 8s ease-out both;
}
@keyframes ambu-photo-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.ambu-slide-visual-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 0%, rgba(7, 12, 24, 0.15) 35%, rgba(7, 12, 24, 0.85) 100%),
    linear-gradient(135deg, color-mix(in oklab, var(--ambu-teal) 28%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.ambu-slide-visual-num {
  position: relative;
  z-index: 2;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(72px, 10vw, 120px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.ambu-slide-visual-shortbody {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  max-width: 360px;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.ambu-slide-visual-pulse {
  position: absolute;
  bottom: 24px; right: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ambu-slide-visual-pulse > span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ambu-teal);
  animation: ambu-pulse 1.6s ease-in-out infinite;
}
.ambu-slide-visual-pulse > span:nth-child(2) { animation-delay: 0.3s; }
.ambu-slide-visual-pulse > span:nth-child(3) { animation-delay: 0.6s; }
@keyframes ambu-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1.1); }
}

.ambu-slide-nav {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  justify-content: flex-end;
}
.ambu-nav-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  color: var(--ambu-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(11, 27, 56, 0.28);
  transition: background 220ms ease, color 220ms ease, transform 180ms ease, border-color 220ms ease;
}
.ambu-nav-btn svg { width: 18px; height: 18px; }
.ambu-nav-btn:hover {
  background: linear-gradient(135deg, var(--ambu-teal), var(--ambu-teal-dark));
  color: #fff;
  border-color: transparent;
  transform: scale(1.06);
}

/* Pager */
.ambu-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: clamp(28px, 4vw, 40px) auto 0;
  flex-wrap: wrap;
}
.ambu-dots {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
  justify-content: center;
}
.ambu-dot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background 200ms, color 200ms;
  font-family: inherit;
}
.ambu-dot-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 800;
  color: rgba(15, 23, 42, 0.45);
}
.ambu-dot-act {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(15, 23, 42, 0.4);
}
.ambu-dot:hover { background: rgba(13, 148, 136, 0.06); }
.ambu-dot:hover .ambu-dot-num,
.ambu-dot:hover .ambu-dot-act { color: var(--ambu-teal-dark); }
.ambu-dot.is-active.ambu-act--anticipation { background: linear-gradient(135deg, var(--ambu-teal), var(--ambu-teal-dark)); }
.ambu-dot.is-active.ambu-act--safety       { background: linear-gradient(135deg, var(--ambu-violet), #6d28d9); }
.ambu-dot.is-active.ambu-act--diff         { background: linear-gradient(135deg, var(--ambu-rose), #db2777); }
.ambu-dot.is-active .ambu-dot-num,
.ambu-dot.is-active .ambu-dot-act { color: #fff; }

.ambu-counter {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.4);
  font-variant-numeric: tabular-nums;
}
.ambu-counter-curr { color: var(--ambu-teal-dark); font-size: 17px; font-weight: 800; }
.ambu-counter-sep  { color: rgba(15, 23, 42, 0.25); }

/* Modules section */
.ambu-modules { background: linear-gradient(180deg, #fff 0%, var(--slate-50, #f8fafc) 100%); position: relative; overflow: hidden; }
.ambu-modules-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.ambu-modules-head h2 {
  margin: 14px 0 14px;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--ink, #0f172a);
}
.ambu-modules-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--ambu-teal-dark) 0%, var(--ambu-violet) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ambu-modules-head p { color: rgba(15, 23, 42, 0.6); font-size: 15px; line-height: 1.6; margin: 0; }

.ambu-modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
}
.ambu-modules-grid > article:nth-child(5),
.ambu-modules-grid > article:nth-child(6),
.ambu-modules-grid > article:nth-child(7) { /* dernière rangée 3 cards centrées */ }
@media (max-width: 980px) { .ambu-modules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ambu-modules-grid { grid-template-columns: 1fr; } }

.ambu-module-card {
  position: relative;
  padding: 22px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(11, 27, 56, 0.03), 0 8px 22px -16px rgba(11, 27, 56, 0.16);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.22,1,.36,1), border-color 280ms;
}
.ambu-module-card.in { opacity: 1; transform: translateY(0); }
.ambu-module-card:hover { border-color: color-mix(in oklab, var(--m-c) 35%, transparent); }
.ambu-module-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--m-c);
  margin-bottom: 10px;
}
.ambu-module-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.66);
}
.ambu-module-bar {
  margin-top: 14px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--m-c), color-mix(in oklab, var(--m-c) 30%, transparent));
}

/* CTA final */
.ambu-cta {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
  background: linear-gradient(180deg, var(--slate-50, #f8fafc) 0%, #fff 100%);
}
.ambu-cta-card {
  background: linear-gradient(135deg, color-mix(in oklab, var(--ambu-teal) 6%, #fff), #fff);
  border: 1px solid color-mix(in oklab, var(--ambu-teal) 30%, transparent);
  border-radius: 24px;
  padding: clamp(32px, 5vw, 64px);
  text-align: center;
  position: relative; overflow: hidden;
  box-shadow:
    0 30px 60px -28px rgba(11, 27, 56, 0.18),
    0 12px 28px -12px color-mix(in oklab, var(--ambu-teal) 28%, transparent);
}
.ambu-cta-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in oklab, var(--ambu-teal) 14%, transparent), transparent 60%);
  pointer-events: none;
}
.ambu-cta-card h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  margin: 14px 0 14px;
  color: var(--ink, #0f172a);
  position: relative;
}
.ambu-cta-card h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--ambu-teal-dark) 0%, var(--ambu-teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ambu-cta-card p {
  color: rgba(15, 23, 42, 0.6);
  font-size: 15px; line-height: 1.6;
  max-width: 580px; margin: 0 auto 28px;
  position: relative;
}
.ambu-cta-actions {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  position: relative;
}

/* Responsive */
@media (max-width: 1024px) {
  .ambu-slide { grid-template-columns: 1fr; gap: 36px; min-height: auto; }
  .ambu-slide-visual { order: -1; }
  .ambu-slide-visual-stage { min-height: 220px; padding: 32px 28px; }
}
@media (max-width: 720px) {
  .ambu-pager { flex-direction: column; gap: 12px; }
  .ambu-dots { gap: 4px; padding: 5px; }
  .ambu-dot { padding: 6px 10px; }
  .ambu-dot-act { display: none; }
}

/* ─── AmbuLive · Démo (5 mockups : Mobile / Desktop / Desktop-SIH / Réception / TV) ─── */
.ambu-demo {
  background: linear-gradient(180deg, #fff 0%, color-mix(in oklab, var(--ambu-teal) 4%, var(--slate-50, #f8fafc)) 100%);
  border-top: 1px solid var(--slate-200, #e2e8f0);
  position: relative; overflow: hidden;
}
.ambu-demo::before {
  content: '';
  position: absolute; top: -140px; right: -140px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, color-mix(in oklab, var(--ambu-teal) 18%, transparent), transparent 65%);
  filter: blur(60px); pointer-events: none;
}
.ambu-demo .section-head { position: relative; z-index: 1; }
.ambu-demo .section-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--ambu-teal-dark) 0%, var(--ambu-teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.ambu-demo-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 28px auto 18px;
  position: relative; z-index: 1;
  max-width: 1080px;
}
.ambu-demo-tab {
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.85);
  color: rgba(15, 23, 42, 0.62);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 220ms, color 220ms, border-color 220ms;
  font-family: inherit;
  backdrop-filter: blur(8px);
}
.ambu-demo-tab:hover { color: var(--ambu-teal-dark); border-color: color-mix(in oklab, var(--ambu-teal) 30%, transparent); }
.ambu-demo-tab.is-active {
  background: linear-gradient(135deg, var(--ambu-teal), var(--ambu-teal-dark));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px -4px color-mix(in oklab, var(--ambu-teal) 50%, transparent);
}
.ambu-demo-open {
  margin-left: auto;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid color-mix(in oklab, var(--ambu-teal) 22%, transparent);
  color: var(--ambu-teal-dark);
  text-decoration: none;
  transition: background 220ms, color 220ms, transform 180ms;
}
.ambu-demo-open:hover {
  background: var(--ambu-teal-dark);
  color: #fff;
  transform: translateY(-1px);
}

.ambu-demo .pt-demo-desc {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto 32px;
  text-align: center;
  color: rgba(15, 23, 42, 0.6);
  font-size: 14.5px;
  line-height: 1.6;
}

.ambu-demo .pt-demo-phone {
  --pt-dp-w: clamp(280px, 32vw, 360px);
  position: relative; z-index: 1;
}

/* Laptop frame teal */
.ambu-demo-laptop {
  --lpt-w: min(1080px, 100%);
  width: var(--lpt-w);
  margin: 0 auto;
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 40px 80px -24px rgba(7, 12, 24, 0.45),
    0 12px 28px -12px color-mix(in oklab, var(--ambu-teal) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  container-type: inline-size;
}
.ambu-demo-laptop-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ambu-demo-laptop-url {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  letter-spacing: 0.02em;
}
.ambu-demo-laptop-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 780;
  background: #f8fafc;
  overflow: hidden;
}
.ambu-demo-laptop-screen iframe {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 780px;
  border: 0; display: block;
  transform-origin: top left;
  transform: scale(tan(atan2(100cqw, 1280px)));
  background: #f8fafc;
}
.ambu-demo-laptop::after {
  content: ''; display: block;
  width: 28%; height: 8px; margin: 0 auto;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 22px -8px rgba(0, 0, 0, 0.35);
}

/* TV bezel (salle d'attente) */
.ambu-demo-tv {
  --tv-w: min(1080px, 100%);
  width: var(--tv-w);
  margin: 0 auto;
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ambu-demo-tv-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #1a2230 0%, #070b14 100%);
  padding: 14px 14px 28px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 40px 80px -24px rgba(7, 12, 24, 0.55),
    0 12px 28px -12px color-mix(in oklab, var(--ambu-teal) 32%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  container-type: inline-size;
}
.ambu-demo-tv-screen iframe {
  position: absolute;
  top: 14px; left: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 42px);
  border: 0;
  border-radius: 8px;
  background: #000;
  display: block;
}
.ambu-demo-tv-screen::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ambu-teal);
  box-shadow: 0 0 10px color-mix(in oklab, var(--ambu-teal) 80%, transparent);
  animation: ambu-pulse 2.4s ease-in-out infinite;
}
.ambu-demo-tv-stand {
  width: 26%;
  height: 14px;
  margin-top: -1px;
  background: linear-gradient(180deg, #1a2230 0%, #070b14 100%);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 14px 22px -10px rgba(0, 0, 0, 0.35);
}
.ambu-demo-tv-stand::after {
  content: ''; display: block;
  width: 80%; height: 4px;
  margin: 14px auto 0;
  background: radial-gradient(ellipse at center, rgba(7, 12, 24, 0.28), transparent 75%);
  border-radius: 999px;
  filter: blur(2px);
}

@media (max-width: 720px) {
  .ambu-demo-tabs { gap: 6px; }
  .ambu-demo-tab { padding: 7px 12px; font-size: 12px; }
  .ambu-demo-open { margin-left: 0; }
}

/* Hero device AmbuLive — accent teal · taille +10% */
.ambu-device {
  border-color: rgba(13, 148, 136, 0.18);
  box-shadow:
    0 32px 72px rgba(0, 0, 0, 0.45),
    0 12px 28px -10px color-mix(in oklab, var(--ambu-teal, #0D9488) 28%, transparent);
  transform: scale(1.1);
  transform-origin: center center;
}
@media (max-width: 980px) {
  /* sur mobile, taille originale pour ne pas déborder */
  .ambu-device { transform: none; }
}

/* AmbuLive · illustrations SVG par module (taille +20%) */
.ambu-module-illu,
.ambu-mod-card-illu {
  width: 100%;
  border-radius: 12px;
  background: color-mix(in oklab, var(--m-c, #0d9488) 6%, #fff);
  border: 1px solid color-mix(in oklab, var(--m-c, #0d9488) 18%, transparent);
  overflow: hidden;
  color: var(--m-c, #0d9488);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ambu-module-illu { height: 96px; margin: -4px 0 12px; }
.ambu-module-illu svg,
.ambu-mod-card-illu svg { width: 100%; height: 100%; display: block; }
.ambu-module-card { padding-top: 16px; }

/* ─── Modules · carousel hero (1 module à la fois + flèches) ─── */
.ambu-mod-carousel { max-width: 1080px; margin: 0 auto; }
.ambu-mod-stage {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 18px;
  align-items: stretch;
}
.ambu-mod-card {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(11, 27, 56, 0.04),
    0 30px 60px -28px rgba(11, 27, 56, 0.22),
    0 12px 28px -14px color-mix(in oklab, var(--m-c, #0d9488) 22%, transparent);
  backdrop-filter: blur(12px);
  animation: ambu-mod-slide-in 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ambu-mod-slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ambu-mod-card-illu {
  min-height: 280px;
  border-radius: 0;
  border: 0;
  border-right: 1px solid color-mix(in oklab, var(--m-c, #0d9488) 12%, transparent);
}
.ambu-mod-card-illu svg {
  width: 80%;
  height: 80%;
  max-width: 420px;
}
.ambu-mod-card-body {
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.ambu-mod-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
}
.ambu-mod-card-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: linear-gradient(135deg, var(--m-c, #0d9488), color-mix(in oklab, var(--m-c, #0d9488) 70%, #000));
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--m-c, #0d9488) 50%, transparent);
}
.ambu-mod-card-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(15, 23, 42, 0.5);
}
.ambu-mod-card-code {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--m-c, #0d9488);
}
.ambu-mod-card-desc {
  margin: 0;
  font-size: 15px; line-height: 1.65;
  color: rgba(15, 23, 42, 0.72);
  max-width: 460px;
}
.ambu-mod-nav {
  align-self: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  color: var(--m-c, #0d9488);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(11, 27, 56, 0.28);
  transition: background 220ms, color 220ms, border-color 220ms, transform 180ms;
  flex-shrink: 0;
}
.ambu-mod-nav svg { width: 20px; height: 20px; }
.ambu-mod-nav:hover {
  background: var(--m-c, #0d9488); color: #fff; border-color: transparent;
  transform: scale(1.06);
}
.ambu-mod-nav:active { transform: scale(0.94); }

.ambu-mod-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin: 24px auto 0; flex-wrap: wrap;
}
.ambu-mod-dots {
  display: inline-flex; gap: 6px; padding: 6px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  flex-wrap: wrap; justify-content: center;
}
.ambu-mod-dot {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 10px;
  border: 0; background: transparent;
  cursor: pointer; font-family: inherit;
  transition: background 220ms, color 220ms;
  color: rgba(15, 23, 42, 0.55);
}
.ambu-mod-dot:hover {
  background: color-mix(in oklab, var(--m-c, #0d9488) 8%, transparent);
  color: var(--m-c, #0d9488);
}
.ambu-mod-dot.is-active {
  background: linear-gradient(135deg, var(--m-c, #0d9488), color-mix(in oklab, var(--m-c, #0d9488) 70%, #000));
  color: #fff;
  box-shadow: 0 4px 10px -2px color-mix(in oklab, var(--m-c, #0d9488) 55%, transparent);
}
.ambu-mod-dot-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
}
.ambu-mod-dot-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px; font-weight: 700;
}
.ambu-mod-counter {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; color: rgba(15, 23, 42, 0.4);
  font-variant-numeric: tabular-nums;
}
.ambu-mod-counter-curr { color: var(--m-c, #0d9488); font-size: 17px; font-weight: 800; }
.ambu-mod-counter-sep { color: rgba(15, 23, 42, 0.25); }

@media (max-width: 880px) {
  .ambu-mod-stage { grid-template-columns: 1fr; gap: 14px; }
  .ambu-mod-nav { display: none; }
  .ambu-mod-card { grid-template-columns: 1fr; }
  .ambu-mod-card-illu { min-height: 200px; border-right: 0; border-bottom: 1px solid color-mix(in oklab, var(--m-c, #0d9488) 12%, transparent); }
  .ambu-mod-dot-code { display: none; }
  .ambu-mod-pager { flex-direction: column; gap: 12px; }
}

/* AmbuLive · ambulance animée en background du hero */
.ambu-hero { position: relative; overflow: hidden; }
.ambu-hero-ambulance {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ambu-hero-road {
  position: absolute;
  bottom: 9%;
  left: 0; right: 0;
  height: 8px;
  background: linear-gradient(180deg, transparent 0%, rgba(13, 148, 136, 0.08) 50%, transparent 100%);
  overflow: hidden;
}
.ambu-hero-road-dash {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in oklab, var(--ambu-teal, #0d9488) 32%, transparent) 0 22px,
    transparent 22px 56px
  );
  animation: ambu-road-flow 0.9s linear infinite;
}
@keyframes ambu-road-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-56px); }
}

.ambu-hero-ambulance-svg {
  position: absolute;
  bottom: 6%;
  left: -320px;
  width: 320px;
  height: 138px;
  filter: drop-shadow(0 14px 22px rgba(7, 12, 24, 0.18));
  animation: ambu-drive 20s linear infinite, ambu-bounce 0.9s ease-in-out infinite;
  opacity: 0.92;
}
@keyframes ambu-drive {
  0%   { left: -320px; }
  100% { left: calc(100% + 80px); }
}
@keyframes ambu-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.ambu-hero-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: ambu-wheel-spin 0.4s linear infinite;
}
@keyframes ambu-wheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ambu-hero-speed {
  animation: ambu-speed-fade 0.7s ease-in-out infinite;
}
@keyframes ambu-speed-fade {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.85; }
}

/* Le contenu du hero passe au-dessus */
.ambu-hero > .container { position: relative; z-index: 2; }

@media (max-width: 720px) {
  .ambu-hero-ambulance-svg {
    width: 180px;
    height: 92px;
    bottom: 4%;
    opacity: 0.55;
    animation-duration: 14s, 0.9s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ambu-hero-ambulance-svg,
  .ambu-hero-road-dash,
  .ambu-hero-wheel,
  .ambu-hero-speed { animation: none !important; }
}

/* Home · BandeauPreuve (Industriel & Critique) — light + data flow animation, taille -40% */
.pt-proof-band {
  background:
    radial-gradient(ellipse 1200px 520px at 80% -8%, color-mix(in oklab, var(--teal-500, #0eb1b8) 10%, #f8fafc) 0%, transparent 70%),
    linear-gradient(180deg, var(--slate-50, #f8fafc) 0%, #ffffff 100%) !important;
  padding: 56px 0 !important;
  border-top: 1px solid var(--slate-200, #e2e8f0) !important;
  border-bottom: 1px solid var(--slate-200, #e2e8f0) !important;
  color: var(--ink, #0f172a) !important;
  isolation: isolate;
  zoom: 0.8;
}
/* Grille tech subtile teintée teal */
.pt-proof-band::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(to right,  color-mix(in oklab, var(--teal-500, #0eb1b8) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--teal-500, #0eb1b8) 8%, transparent) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 95%) !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
}
/* Dot teal animé (data-flow gauche → droite) */
.pt-proof-band::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--teal-500, #0eb1b8) !important;
  box-shadow: 0 0 12px color-mix(in oklab, var(--teal-500, #0eb1b8) 60%, transparent) !important;
  animation: pt-proof-dot 14s linear infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background-image: none !important;
}
@keyframes pt-proof-dot {
  0%   { left: -12px; top: 22%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: calc(100% + 12px); top: 50%; opacity: 0; }
}
.pt-proof-band > .container { position: relative; z-index: 1; }
/* Second dot navy (sens inverse) via container */
.pt-proof-band > .container::before {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1e3a8a;
  box-shadow: 0 0 12px rgba(30, 58, 138, 0.5);
  animation: pt-proof-dot-2 18s linear infinite;
  animation-delay: 6s;
  pointer-events: none;
  z-index: 0;
}
@keyframes pt-proof-dot-2 {
  0%   { right: -12px; top: 70%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { right: calc(100% + 12px); top: 30%; opacity: 0; }
}

/* Texte → ink dark */
.pt-proof-band .pt-proof-badge {
  background: rgba(255, 255, 255, 0.85) !important;
  color: var(--teal-700, #0a7278) !important;
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent) !important;
}
.pt-proof-band .pt-proof-intro,
.pt-proof-band .pt-proof-footer {
  color: rgba(15, 23, 42, 0.7) !important;
}
.pt-proof-band .pt-proof-card-new {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: var(--ink, #0f172a) !important;
  box-shadow: 0 1px 2px rgba(11, 27, 56, 0.04), 0 10px 24px -18px rgba(11, 27, 56, 0.18);
}
.pt-proof-band .pt-proof-icon-box {
  background: color-mix(in oklab, var(--teal-500, #0eb1b8) 10%, #fff) !important;
  color: var(--teal-700, #0a7278) !important;
}
.pt-proof-band .pt-proof-content strong {
  background: linear-gradient(135deg, var(--teal-600, #0b8f95) 0%, #1e3a8a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: transparent;
}
.pt-proof-band .pt-proof-content > span {
  color: rgba(15, 23, 42, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME · Hero V2 · Solutions Smart Hôpital (avril 2026)
   ═══════════════════════════════════════════════════════════════════ */
.hero-v2 {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 100px) 0 clamp(56px, 8vw, 100px);
  background:
    radial-gradient(ellipse 900px 540px at 88% 35%, color-mix(in oklab, var(--teal-500, #0eb1b8) 14%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 600px 420px at 8% 110%, color-mix(in oklab, var(--teal-500, #0eb1b8) 10%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, #ffffff 0%, var(--slate-50, #f8fafc) 100%);
  isolation: isolate;
}
/* Grille tech subtile en fond */
.hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--teal-500, #0eb1b8) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--teal-500, #0eb1b8) 7%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, transparent 90%);
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}
/* Halo teal pulsant derrière le carrousel */
.hero-v2::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -120px;
  transform: translateY(-50%);
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--teal-500, #0eb1b8) 28%, transparent) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: hero-v2-halo 9s ease-in-out infinite;
}
@keyframes hero-v2-halo {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.7; }
  50%      { transform: translateY(-52%) scale(1.06); opacity: 0.92; }
}
.hero-v2 > .container { position: relative; z-index: 1; }
.hero-v2-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 992px) {
  .hero-v2-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Colonne gauche */
.hero-v2-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: hero-v2-copy-in 700ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes hero-v2-copy-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--teal-700, #0a7278);
  letter-spacing: -0.005em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-v2-eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-500, #0eb1b8);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent);
}
.hero-v2-h1 {
  margin: 0;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink, #0f172a);
  text-wrap: balance;
}
/* Souligne discret teal sur le mot Hôpital */
.hero-v2-h1::after {
  content: '';
  display: block;
  width: 88px;
  height: 4px;
  margin-top: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal-500, #0eb1b8), color-mix(in oklab, var(--teal-500, #0eb1b8) 50%, transparent));
}
.hero-v2-sub {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 18px);
  font-style: italic;
  color: var(--slate-700, #334155);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Grille 2×2 capabilities */
.hero-v2-caps {
  list-style: none;
  padding: 0;
  margin: 8px 0 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
@media (max-width: 560px) { .hero-v2-caps { grid-template-columns: 1fr; } }
.hero-v2-cap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.hero-v2-cap-ic {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--teal-500, #0eb1b8) 18%, #fff), #fff);
  color: var(--teal-700, #0a7278);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent);
  box-shadow: 0 4px 10px -3px color-mix(in oklab, var(--teal-500, #0eb1b8) 25%, transparent);
}
.hero-v2-cap:hover .hero-v2-cap-ic {
  background: linear-gradient(135deg, var(--teal-500, #0eb1b8), var(--teal-700, #0a7278));
  color: #fff;
  border-color: transparent;
}
.hero-v2-cap { transition: transform 220ms ease; }
.hero-v2-cap:hover { transform: translateX(2px); }
.hero-v2-cap-text {
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--slate-700, #334155);
  letter-spacing: -0.005em;
}

.hero-v2-ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 14px;
}
.hero-v2-ctas .btn-large { padding: 13px 22px; font-size: 14.5px; }

/* Colonne droite · carrousel */
.hero-v2-car {
  position: relative;
  height: 500px;
  background: #fff;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(11, 27, 56, 0.04),
    0 24px 48px -16px rgba(11, 27, 56, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  animation: hero-v2-car-in 800ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: 150ms;
}
@keyframes hero-v2-car-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 992px) { .hero-v2-car { height: auto; min-height: 460px; } }

.hero-v2-car-slide {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: hv-fade 600ms ease;
}
@keyframes hv-fade { from { opacity: 0; } to { opacity: 1; } }

.hero-v2-car-illu {
  position: relative;
  height: 220px;
  background: linear-gradient(180deg, var(--teal-50, #f0fdfa) 0%, #fff 100%);
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
  overflow: hidden;
}
.hero-v2-car-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  animation: hv-photo-zoom 8s ease-out both;
}
@keyframes hv-photo-zoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}
.hero-v2-car-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.05) 55%, rgba(15, 23, 42, 0.35) 100%),
    linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, transparent 55%);
}
/* Pill métrique flottante en haut à droite de la photo */
.hero-v2-car-metric-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 6px 18px -4px rgba(15, 23, 42, 0.25);
  max-width: calc(100% - 28px);
}
.hero-v2-car-metric-pill--patient    { color: #2563eb; border: 1px solid rgba(37, 99, 235, 0.22); }
.hero-v2-car-metric-pill--direction  { color: #92400e; border: 1px solid rgba(146, 64, 14, 0.22); }
.hero-v2-car-metric-pill--medecin    { color: var(--teal-700, #0a7278); border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent); }
.hero-v2-car-metric-pill--infirmier  { color: #7c3aed; border: 1px solid rgba(124, 58, 237, 0.22); }
.hero-v2-car-metric-pill--biomedical { color: #4f46e5; border: 1px solid rgba(79, 70, 229, 0.22); }

.hero-v2-car-body {
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.hero-v2-car-tag {
  display: inline-flex;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  align-self: flex-start;
}
.hero-v2-car-tag--patient    { background: #eff6ff; color: #2563eb; }
.hero-v2-car-tag--direction  { background: #fef3c7; color: #92400e; }
.hero-v2-car-tag--medecin    { background: var(--teal-50, #f0fdfa); color: var(--teal-700, #0a7278); }
.hero-v2-car-tag--infirmier  { background: #f5f3ff; color: #7c3aed; }
.hero-v2-car-tag--biomedical { background: #eef2ff; color: #4f46e5; }

.hero-v2-car-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink, #0f172a);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.hero-v2-car-metric {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--teal-700, #0a7278);
  letter-spacing: -0.005em;
}
.hero-v2-car-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--slate-700, #334155);
}
.hero-v2-car-sources {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
  padding-top: 10px;
}
.hero-v2-car-source {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-600, #475569);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Flèches */
.hero-v2-car-arrow {
  position: absolute;
  top: 110px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--slate-200, #e2e8f0);
  background: rgba(255, 255, 255, 0.95);
  color: var(--slate-700, #334155);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease, background 200ms, color 200ms, border-color 200ms, transform 180ms;
  box-shadow: 0 4px 10px -3px rgba(11, 27, 56, 0.15);
  z-index: 3;
}
.hero-v2-car:hover .hero-v2-car-arrow,
.hero-v2-car:focus-within .hero-v2-car-arrow { opacity: 1; }
.hero-v2-car-arrow:hover {
  background: var(--teal-700, #0a7278);
  color: #fff;
  border-color: transparent;
  transform: scale(1.06);
}
.hero-v2-car-arrow--prev { left: 12px; }
.hero-v2-car-arrow--next { right: 12px; }

/* Dots pager */
.hero-v2-car-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.hero-v2-car-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 0;
  background: var(--slate-300, #cbd5e1);
  cursor: pointer;
  transition: width 220ms ease, background 220ms ease;
}
.hero-v2-car-dot.is-active {
  width: 24px;
  background: var(--teal-700, #0a7278);
}

/* ═══════════════════════════════════════════════════════════════════
   NAV V2 · header avec dropdowns (brief avril 2026)
   ═══════════════════════════════════════════════════════════════════ */
.nav-v2 {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-v2-item {
  position: relative;
}
.nav-v2-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-700, #334155);
  cursor: pointer;
  border-radius: 8px;
  transition: color 200ms ease, background 200ms ease;
  white-space: nowrap;
}
.nav-v2-trigger:hover { color: var(--teal-700, #0a7278); }
.nav-v2-caret {
  transition: transform 200ms ease;
  opacity: 0.6;
}
.nav-v2-item.is-open .nav-v2-trigger { color: var(--teal-700, #0a7278); }
.nav-v2-item.is-open .nav-v2-caret { transform: rotate(180deg); opacity: 1; }
.nav-v2-item.is-active .nav-v2-trigger {
  color: var(--teal-700, #0a7278);
}
.nav-v2-item.is-active .nav-v2-trigger::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--teal-700, #0a7278);
  border-radius: 1px;
}

/* Dropdown panel */
.nav-v2-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 480px;
  background: #fff;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(11, 27, 56, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08);
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  z-index: 100;
}
.nav-v2-item.is-open .nav-v2-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Dropdown wide pour Solutions (3 sections) */
.nav-v2-item:first-child .nav-v2-pop { min-width: 540px; }

.nav-v2-pop-group + .nav-v2-pop-group {
  border-top: 1px solid var(--slate-100, #f1f5f9);
  padding-top: 14px;
}
.nav-v2-pop-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-400, #94a3b8);
  margin: 0 4px 8px;
}
.nav-v2-pop-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-v2-pop-link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 180ms ease;
}
.nav-v2-pop-link:hover {
  background: var(--slate-50, #f8fafc);
}
.nav-v2-pop-main {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-900, #0f172a);
  letter-spacing: -0.005em;
}
.nav-v2-pop-sub {
  display: block;
  font-size: 12.5px;
  color: var(--slate-500, #64748b);
  margin-top: 2px;
  line-height: 1.4;
}

/* Aligner certains dropdowns à droite pour ne pas déborder */
.nav-v2-item:last-child .nav-v2-pop,
.nav-v2-item:nth-last-child(2) .nav-v2-pop { left: auto; right: 0; }

@media (max-width: 980px) {
  .nav-v2 { display: none; }
}

/* ─── Mobile nav V2 ─── */
.mobile-nav-v2 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}
.mobile-nav-home {
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-700, #334155);
  text-decoration: none;
  border-radius: 8px;
}
.mobile-nav-home.active {
  color: var(--teal-700, #0a7278);
  background: var(--teal-50, #f0fdfa);
}
.mobile-nav-group {
  border-bottom: 1px solid var(--slate-100, #f1f5f9);
}
.mobile-nav-group:last-child { border-bottom: 0; }
.mobile-nav-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-800, #1e293b);
  cursor: pointer;
}
.mobile-nav-trigger svg { transition: transform 200ms ease; opacity: 0.5; }
.mobile-nav-group.is-open .mobile-nav-trigger { color: var(--teal-700, #0a7278); }
.mobile-nav-group.is-open .mobile-nav-trigger svg { transform: rotate(180deg); opacity: 1; }

.mobile-nav-sub {
  padding: 4px 8px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mobile-nav-sub-group { display: flex; flex-direction: column; gap: 2px; }
.mobile-nav-sub-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-400, #94a3b8);
  padding: 4px 8px;
}
.mobile-nav-sub-link {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--slate-700, #334155);
}
.mobile-nav-sub-link:active { background: var(--slate-50, #f8fafc); }
.mobile-nav-sub-main {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-900, #0f172a);
}
.mobile-nav-sub-desc {
  display: block;
  font-size: 12.5px;
  color: var(--slate-500, #64748b);
  margin-top: 2px;
  line-height: 1.35;
}

/* Sticky header avec backdrop blur (renforcé selon brief) */
.nav {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.92) !important;
}

/* ─── Nav · ECG ribbon + data packets (tech-medical) ─── */
.nav-tech {
  position: absolute;
  left: 0; right: 0;
  bottom: 4px; /* juste au-dessus de la progress-bar */
  height: 18px;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.nav-tech-ecg {
  width: 100%; height: 100%;
  display: block;
}
.nav-tech-ecg-path {
  stroke-dasharray: 2400;
  stroke-dashoffset: 0;
  animation: nav-ecg-trace 9s linear infinite;
}
@keyframes nav-ecg-trace {
  from { stroke-dashoffset: 2400; }
  to   { stroke-dashoffset: 0; }
}

/* Data packets — petits dots teal qui glissent */
.nav-tech-packet {
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #0d9488;
  box-shadow:
    0 0 6px rgba(13, 148, 136, 0.65),
    0 0 14px rgba(13, 148, 136, 0.35);
  transform: translateY(-50%);
  opacity: 0;
}
.nav-tech-packet--a {
  animation: nav-packet-flow 7s linear infinite;
}
.nav-tech-packet--b {
  background: #1e3a8a;
  box-shadow:
    0 0 6px rgba(30, 58, 138, 0.65),
    0 0 14px rgba(30, 58, 138, 0.3);
  animation: nav-packet-flow 11s linear infinite;
  animation-delay: 3s;
}
.nav-tech-packet--c {
  background: #0d9488;
  box-shadow:
    0 0 6px rgba(13, 148, 136, 0.55),
    0 0 12px rgba(13, 148, 136, 0.3);
  animation: nav-packet-flow-rev 13s linear infinite;
  animation-delay: 5s;
}
@keyframes nav-packet-flow {
  0%   { left: -10px; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: calc(100% + 10px); opacity: 0; }
}
@keyframes nav-packet-flow-rev {
  0%   { left: calc(100% + 10px); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: -10px; opacity: 0; }
}

/* La progress-bar reste au-dessus de l'animation */
.nav .progress-bar { position: relative; z-index: 1; }
.nav-inner { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .nav-tech-ecg-path,
  .nav-tech-packet { animation: none !important; opacity: 0.4; }
}

/* ═══════════════════════════════════════════════════════════════════
   Demo · 4 formats au choix (Choisissez votre format)
   ═══════════════════════════════════════════════════════════════════ */
.demo-formats {
  background: linear-gradient(180deg, #fff 0%, var(--slate-50, #f8fafc) 100%);
  border-top: 1px solid var(--slate-200, #e2e8f0);
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
}
.demo-formats .section-head h2 {
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink, #0f172a);
}
.demo-formats .section-head p {
  color: var(--slate-600, #475569);
  font-size: 16px;
  line-height: 1.6;
}

.demo-formats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 980px) {
  .demo-formats-grid { grid-template-columns: repeat(3, 1fr); max-width: 100%; gap: 12px; }
}

/* ────────────────────────────────────────────────────────────────────
   Mobile · horizontal scroll-snap carousel for format cards
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .demo-formats-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 14px;
    max-width: 100%;
    padding: 6px 16px 22px;
    margin: 0 -16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .demo-formats-grid::-webkit-scrollbar { display: none; }

  .demo-format-card {
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding: 22px 20px 20px;
    gap: 12px;
    border-radius: 18px;
    border-width: 1.5px;
    min-height: 280px;
    box-shadow: 0 1px 2px rgba(11,27,56,.05), 0 10px 28px -18px rgba(11,27,56,.22);
  }
  .demo-format-card:hover { transform: none; }
  .demo-format-card.is-selected {
    transform: translateY(-3px);
    box-shadow:
      0 0 0 3px color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent),
      0 14px 30px -16px color-mix(in oklab, var(--teal-500, #0eb1b8) 45%, transparent);
  }

  .demo-format-badge {
    padding: 5px 11px;
    font-size: 10.5px;
  }
  .demo-format-title {
    font-size: 16px;
    line-height: 1.25;
  }
  .demo-format-desc {
    font-size: 12.5px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .demo-format-ideal {
    font-size: 11px;
    padding-top: 10px;
  }
  .demo-format-cta {
    padding: 7px 14px;
    font-size: 12px;
  }
}

/* Hint visuel d'amorçage du swipe (juste sous le carousel) */
@media (max-width: 640px) {
  .demo-formats-grid::after {
    content: '';
    flex: 0 0 6px;
  }
}

/* Très petit phone */
@media (max-width: 380px) {
  .demo-formats-grid { gap: 12px; }
  .demo-format-card {
    flex: 0 0 88%;
    max-width: 88%;
    padding: 20px 18px 18px;
    min-height: 264px;
    border-radius: 16px;
  }
  .demo-format-badge { font-size: 10px; padding: 4px 10px; }
  .demo-format-title { font-size: 15px; }
  .demo-format-desc { font-size: 12px; -webkit-line-clamp: 4; }
}

/* Carousel wrapper (arrows + scroll grid) */
.demo-formats-carousel {
  position: relative;
}
.demo-formats-arrow {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 28%, transparent);
  color: var(--teal-700, #0a7278);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 4px 14px -4px rgba(11,27,56,.22);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  transform: translateY(-50%);
  -webkit-tap-highlight-color: transparent;
}
.demo-formats-arrow:hover,
.demo-formats-arrow:focus-visible {
  background: var(--teal-50, #f0fdfa);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 8px 22px -6px rgba(11,27,56,.28);
  outline: none;
}
.demo-formats-arrow:active {
  transform: translateY(-50%) scale(.95);
}
.demo-formats-arrow svg { display: block; }
.demo-formats-arrow--prev { left: -2px; }
.demo-formats-arrow--next { right: -2px; }

@media (max-width: 640px) {
  .demo-formats-arrow {
    display: inline-flex;
    width: 38px;
    height: 38px;
  }
  .demo-formats-arrow--prev { left: 4px; }
  .demo-formats-arrow--next { right: 4px; }
}
@media (max-width: 380px) {
  .demo-formats-arrow { width: 34px; height: 34px; }
  .demo-formats-arrow svg { width: 18px; height: 18px; }
}

.demo-format-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid var(--slate-200, #e2e8f0);
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition:
    transform 240ms cubic-bezier(.22,1,.36,1),
    border-color 240ms ease,
    box-shadow 240ms ease,
    background 240ms ease;
  box-shadow: 0 1px 2px rgba(11, 27, 56, 0.04), 0 8px 22px -16px rgba(11, 27, 56, 0.14);
  overflow: hidden;
}
.demo-format-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--teal-500, #0eb1b8) 35%, transparent);
  box-shadow: 0 18px 36px -20px rgba(11, 27, 56, 0.22);
}
.demo-format-card.is-selected {
  border-color: var(--teal-700, #0a7278);
  background: linear-gradient(180deg, color-mix(in oklab, var(--teal-500, #0eb1b8) 6%, #fff) 0%, #fff 100%);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--teal-500, #0eb1b8) 18%, transparent),
    0 18px 36px -16px color-mix(in oklab, var(--teal-500, #0eb1b8) 35%, transparent);
}
.demo-format-card.is-selected::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal-500, #0eb1b8), var(--teal-700, #0a7278));
}

.demo-format-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--teal-50, #f0fdfa);
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent);
  color: var(--teal-700, #0a7278);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.demo-format-card.is-selected .demo-format-badge {
  background: var(--teal-700, #0a7278);
  color: #fff;
  border-color: transparent;
}

.demo-format-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink, #0f172a);
  line-height: 1.25;
}
.demo-format-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate-600, #475569);
  flex: 1;
}
.demo-format-ideal {
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--slate-200, #e2e8f0);
  font-size: 11.5px;
  color: var(--slate-500, #64748b);
  font-style: italic;
  line-height: 1.45;
}
.demo-format-cta {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-700, #334155);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-top: 4px;
  transition: background 200ms, color 200ms;
}
.demo-format-card:hover .demo-format-cta { background: var(--teal-50, #f0fdfa); color: var(--teal-700, #0a7278); }
.demo-format-card.is-selected .demo-format-cta {
  background: var(--teal-700, #0a7278);
  color: #fff;
}

/* Chip "Format sélectionné" affiché au-dessus du formulaire */
.demo-format-pick {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--teal-500, #0eb1b8) 8%, #fff), #fff);
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 28%, transparent);
  border-left: 3px solid var(--teal-700, #0a7278);
  border-radius: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.demo-format-pick-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-700, #0a7278);
  flex-shrink: 0;
}
.demo-format-pick-value {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.demo-format-pick-value strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: -0.01em;
}
.demo-format-pick-meta {
  font-size: 12px;
  color: var(--slate-500, #64748b);
}
.demo-format-pick-change {
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 30%, transparent);
  background: #fff;
  color: var(--teal-700, #0a7278);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 200ms, color 200ms;
  flex-shrink: 0;
}
.demo-format-pick-change:hover { background: var(--teal-700, #0a7278); color: #fff; border-color: transparent; }

/* ── Mobile · "Format sélectionné" redesign en pile verticale ── */
@media (max-width: 640px) {
  .demo-format-pick {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label  action"
      "value  value";
    gap: 10px 12px;
    padding: 12px 14px 14px;
    border-radius: 14px;
    margin-bottom: 20px;
    align-items: center;
  }
  .demo-format-pick-label {
    grid-area: label;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    background: var(--teal-700, #0a7278);
    color: #fff;
    border-radius: 999px;
    font-size: 9.5px;
    letter-spacing: 0.1em;
    line-height: 1.2;
    justify-self: start;
  }
  .demo-format-pick-label::before {
    content: '✓';
    font-weight: 800;
    font-size: 10px;
  }
  .demo-format-pick-change {
    grid-area: action;
    padding: 6px 12px;
    font-size: 11.5px;
    border-radius: 999px;
    justify-self: end;
  }
  .demo-format-pick-value {
    grid-area: value;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .demo-format-pick-value strong {
    font-size: 15px;
    line-height: 1.3;
  }
  .demo-format-pick-meta {
    font-size: 11.5px;
    color: var(--slate-500, #64748b);
  }
}

@media (max-width: 380px) {
  .demo-format-pick { padding: 10px 12px 12px; gap: 8px 10px; }
  .demo-format-pick-label { font-size: 9px; padding: 3px 8px; }
  .demo-format-pick-change { padding: 5px 10px; font-size: 11px; }
  .demo-format-pick-value strong { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DEMO PAGE · redesign attractive (avril 2026)
   ═══════════════════════════════════════════════════════════════════ */

/* Hero — ambiance teal subtile + halo pulsant */
.demo-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 900px 500px at 88% 20%, color-mix(in oklab, var(--teal-500, #0eb1b8) 14%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--slate-50, #f8fafc) 100%);
}
.demo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--teal-500, #0eb1b8) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--teal-500, #0eb1b8) 7%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, transparent 90%);
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}
.demo-hero::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -160px;
  transform: translateY(-50%);
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent), transparent 60%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
  animation: demo-hero-halo 9s ease-in-out infinite;
}
@keyframes demo-hero-halo {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.65; }
  50%      { transform: translateY(-52%) scale(1.07); opacity: 0.92; }
}
.demo-hero > .container { position: relative; z-index: 1; }

/* Eyebrow pill (homogène hero V2 home) */
.demo-hero-content > .eyebrow,
.demo-hero-content > [class*="eyebrow"]:first-of-type { display: inline-flex !important; }

/* ═══════════════════════════════════════════════════════════════════
   Demo · 3 étapes (Comment ça se passe)
   ═══════════════════════════════════════════════════════════════════ */
.demo-steps {
  background: linear-gradient(180deg, var(--slate-50, #f8fafc) 0%, #fff 100%);
  padding-top: clamp(44px, 5vw, 64px);
  padding-bottom: clamp(44px, 5vw, 64px);
  border-top: 1px solid var(--slate-200, #e2e8f0);
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
}
.demo-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 880px) { .demo-steps-grid { grid-template-columns: 1fr; max-width: 520px; } }

.demo-step {
  position: relative;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  box-shadow: 0 1px 2px rgba(11, 27, 56, 0.04), 0 8px 22px -16px rgba(11, 27, 56, 0.14);
}
.demo-step:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--teal-500, #0eb1b8) 28%, transparent);
}
.demo-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--teal-500, #0eb1b8), color-mix(in oklab, var(--teal-500, #0eb1b8) 40%, transparent));
}
.demo-step-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--teal-700, #0a7278);
  background: color-mix(in oklab, var(--teal-500, #0eb1b8) 10%, #fff);
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent);
  padding: 4px 10px;
  border-radius: 6px;
  align-self: flex-start;
}
.demo-step-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.demo-step-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate-600, #475569);
}

/* ═══════════════════════════════════════════════════════════════════
   Demo · formats (animation d'entrée + meilleur contraste)
   ═══════════════════════════════════════════════════════════════════ */
.demo-format-card {
  animation: demo-card-in 600ms cubic-bezier(.22,1,.36,1) both;
}
.demo-format-card:nth-child(1) { animation-delay: 60ms; }
.demo-format-card:nth-child(2) { animation-delay: 130ms; }
.demo-format-card:nth-child(3) { animation-delay: 200ms; }
@keyframes demo-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   Demo · section formulaire — carte plus généreuse
   ═══════════════════════════════════════════════════════════════════ */
.demo-section {
  background: linear-gradient(180deg, #fff 0%, var(--slate-50, #f8fafc) 100%);
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(56px, 7vw, 96px);
  position: relative;
  overflow: hidden;
}
.demo-section::before {
  content: '';
  position: absolute;
  top: -120px; left: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, color-mix(in oklab, var(--teal-500, #0eb1b8) 14%, transparent), transparent 65%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.demo-section > .container { position: relative; z-index: 1; }
.demo-form-col {
  background: #fff;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow:
    0 1px 2px rgba(11, 27, 56, 0.04),
    0 18px 40px -20px rgba(11, 27, 56, 0.16);
  position: relative;
  overflow: hidden;
}
.demo-form-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-500, #0eb1b8), var(--teal-700, #0a7278));
}
.demo-info-col {
  background: linear-gradient(180deg, color-mix(in oklab, var(--teal-500, #0eb1b8) 5%, #fff) 0%, #fff 100%);
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 32px);
  box-shadow: 0 1px 2px rgba(11, 27, 56, 0.04), 0 12px 28px -18px rgba(11, 27, 56, 0.14);
}

/* Polissage des champs */
.df-input {
  transition: border-color 200ms, box-shadow 200ms;
}
.df-input:focus {
  outline: none;
  border-color: var(--teal-500, #0eb1b8);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal-500, #0eb1b8) 18%, transparent);
}
.df-submit { padding: 14px 22px; font-size: 14.5px; }

/* ═══════════════════════════════════════════════════════════════════
   DEMO V3 · refonte totale (avril 2026)
   ═══════════════════════════════════════════════════════════════════ */
.demo-v3 { background: linear-gradient(180deg, #fff 0%, var(--slate-50, #f8fafc) 100%); }

/* Hero éditorial centré · background photo + overlay teal */
.demov3-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(80px, 10vw, 140px) 0 clamp(64px, 8vw, 100px);
  background-color: #fff;
  background-image:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(248, 250, 252, 0.96) 60%,
      rgba(248, 250, 252, 1) 100%),
    radial-gradient(ellipse 900px 500px at 88% 20%, color-mix(in oklab, var(--teal-500, #0eb1b8) 14%, transparent) 0%, transparent 60%),
    url('https://images.unsplash.com/photo-1551076805-e1869033e561?auto=format&fit=crop&q=80&w=2000');
  background-position: center, center, center;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
}
/* Grille tech subtile par-dessus la photo */
.demov3-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--teal-500, #0eb1b8) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--teal-500, #0eb1b8) 8%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 25%, transparent 90%);
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}
.demov3-hero-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.demov3-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
}
.demov3-orb--a {
  width: 540px; height: 540px;
  top: -160px; right: -120px;
  background: radial-gradient(circle, color-mix(in oklab, var(--teal-500, #0eb1b8) 35%, transparent), transparent 65%);
  animation: demov3-orb-a 12s ease-in-out infinite;
}
.demov3-orb--b {
  width: 420px; height: 420px;
  bottom: -160px; left: -100px;
  background: radial-gradient(circle, color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent), transparent 65%);
  animation: demov3-orb-b 16s ease-in-out infinite;
}
@keyframes demov3-orb-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-22px, 18px); } }
@keyframes demov3-orb-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px, -16px); } }

.demov3-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.demov3-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--slate-500, #64748b);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 200ms;
}
.demov3-back:hover { color: var(--teal-700, #0a7278); }
.demov3-back svg { width: 14px; height: 14px; }

.demov3-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 25%, transparent);
  color: var(--teal-700, #0a7278);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
}
.demov3-hero-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-500, #0eb1b8);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent);
}

.demov3-hero-h1 {
  margin: 0 0 22px;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink, #0f172a);
  text-wrap: balance;
}
.demov3-hero-h1 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--teal-500, #0eb1b8) 0%, var(--teal-700, #0a7278) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.demov3-hero-lede {
  margin: 0 auto 36px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--slate-600, #475569);
  max-width: 580px;
}

.demov3-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.demov3-hero-actions .btn-large { padding: 14px 24px; font-size: 14.5px; }
.demov3-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-700, #334155);
  text-decoration: none;
  transition: color 200ms;
}
.demov3-hero-link:hover { color: var(--teal-700, #0a7278); }
.demov3-hero-link svg { color: var(--teal-700, #0a7278); }

.demov3-hero-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}
@media (max-width: 640px) {
  .demov3-hero-trust { grid-template-columns: repeat(2, 1fr); }
}
.demov3-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.demov3-trust-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--teal-700, #0a7278), var(--teal-500, #0eb1b8));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.demov3-trust-lbl {
  font-size: 11.5px;
  color: var(--slate-500, #64748b);
  letter-spacing: 0.005em;
  font-weight: 500;
}

/* Section formats — adapter le padding */
.demo-v3 .demo-formats {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* Formulaire centré dans une grande carte */
.demov3-form {
  padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 88px);
  position: relative;
}
.demov3-form-card {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow:
    0 1px 2px rgba(11, 27, 56, 0.04),
    0 24px 48px -20px rgba(11, 27, 56, 0.18);
  position: relative;
  overflow: hidden;
}
.demov3-form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal-500, #0eb1b8), var(--teal-700, #0a7278));
}

.demov3-form-head { margin-bottom: 28px; }
.demov3-form-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700, #0a7278);
  background: color-mix(in oklab, var(--teal-500, #0eb1b8) 10%, #fff);
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.demov3-form-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink, #0f172a);
}
.demov3-form-title em {
  font-style: italic;
  color: var(--teal-700, #0a7278);
}

.demov3-form-fields .df-submit {
  width: 100%;
  margin-top: 8px;
  padding: 14px 22px;
  font-size: 14.5px;
}

.demov3-form-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--slate-100, #f1f5f9);
}
.demov3-form-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate-600, #475569);
  letter-spacing: -0.005em;
}
.demov3-form-trust-item svg {
  padding: 2px;
  background: color-mix(in oklab, var(--teal-500, #0eb1b8) 14%, #fff);
  color: var(--teal-700, #0a7278);
  border-radius: 50%;
}

/* Success state */
.demov3-success {
  text-align: center;
  padding: 32px 12px;
}
.demov3-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--teal-500, #0eb1b8) 14%, #fff);
  color: var(--teal-700, #0a7278);
  margin-bottom: 20px;
  animation: demov3-success-pop 600ms cubic-bezier(.22,1,.36,1);
}
@keyframes demov3-success-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.demov3-success h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.demov3-success p { font-size: 15.5px; line-height: 1.6; color: var(--slate-600, #475569); max-width: 480px; margin: 0 auto; }

/* Quote footer */
.demov3-quote {
  padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px);
  background: linear-gradient(180deg, var(--slate-50, #f8fafc) 0%, #fff 100%);
}
.demov3-quote-card {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(135deg, color-mix(in oklab, var(--teal-500, #0eb1b8) 8%, #fff) 0%, #fff 100%);
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 20%, transparent);
  border-radius: 20px;
  position: relative;
  text-align: center;
}
.demov3-quote-mark {
  width: 36px; height: 36px;
  color: color-mix(in oklab, var(--teal-500, #0eb1b8) 35%, transparent);
  margin: 0 auto 16px;
  display: block;
}
.demov3-quote-card blockquote {
  margin: 0 0 22px;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink, #0f172a);
  font-style: italic;
}
.demov3-quote-card figcaption {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 18%, transparent);
}
.demov3-quote-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
}
.demov3-quote-role {
  font-size: 12px;
  color: var(--slate-500, #64748b);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════
   PRESSE & PUBLICATIONS · Blog (avril 2026)
   ═══════════════════════════════════════════════════════════════════ */
.presse-page { background: linear-gradient(180deg, #fff 0%, var(--slate-50, #f8fafc) 100%); }

/* Hero */
.presse-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 4vw, 56px);
  background: linear-gradient(180deg, #fff 0%, color-mix(in oklab, var(--teal-500, #0eb1b8) 4%, #fff) 100%);
}
.presse-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.presse-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
}
.presse-orb--a {
  width: 480px; height: 480px;
  top: -160px; right: -100px;
  background: radial-gradient(circle, color-mix(in oklab, var(--teal-500, #0eb1b8) 32%, transparent), transparent 65%);
  animation: presse-orb-a 14s ease-in-out infinite;
}
.presse-orb--b {
  width: 380px; height: 380px;
  bottom: -120px; left: -80px;
  background: radial-gradient(circle, color-mix(in oklab, #1e3a8a 22%, transparent), transparent 65%);
  animation: presse-orb-b 18s ease-in-out infinite;
}
@keyframes presse-orb-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-20px, 16px); } }
@keyframes presse-orb-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px, -14px); } }

.presse-hero-inner { position: relative; z-index: 1; max-width: 760px; }
.presse-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--slate-500, #64748b);
  text-decoration: none; margin-bottom: 28px;
  transition: color 200ms;
}
.presse-back:hover { color: var(--teal-700, #0a7278); }
.presse-back svg { width: 14px; height: 14px; }

.presse-hero-h1 {
  margin: 14px 0 18px;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--ink, #0f172a);
  text-wrap: balance;
}
.presse-hero-lede {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--slate-600, #475569);
  max-width: 600px;
}

/* Featured */
.presse-featured-wrap {
  padding: clamp(32px, 4vw, 56px) 0 clamp(24px, 3vw, 40px);
}
.presse-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(11, 27, 56, 0.04),
    0 24px 48px -22px rgba(11, 27, 56, 0.18);
  cursor: pointer;
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.presse-featured:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--teal-500, #0eb1b8) 28%, transparent);
  box-shadow: 0 1px 2px rgba(11,27,56,0.04), 0 36px 60px -24px rgba(11,27,56,0.22);
}
@media (max-width: 880px) {
  .presse-featured { grid-template-columns: 1fr; }
}
.presse-featured-media {
  position: relative;
  min-height: 360px;
  background: var(--slate-100, #f1f5f9);
  overflow: hidden;
}
.presse-featured-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 700ms cubic-bezier(.22,1,.36,1);
}
.presse-featured:hover .presse-featured-media img { transform: scale(1.04); }
.presse-featured-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11, 27, 56, 0.18) 100%);
  pointer-events: none;
}
.presse-featured-label {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.95);
  color: var(--teal-700, #0a7278);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent);
  z-index: 2;
}
.presse-featured-body {
  padding: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.presse-featured-meta,
.presse-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--slate-500, #64748b);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.presse-meta-sep { opacity: 0.4; }
.presse-featured-title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink, #0f172a);
}
.presse-featured-excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate-700, #334155);
}
.presse-featured-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--slate-100, #f1f5f9);
  flex-wrap: wrap;
  gap: 14px;
}
.presse-read-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-700, #0a7278);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: gap 200ms;
}
.presse-read-link:hover { color: var(--teal-500, #0eb1b8); }

/* Auteur */
.presse-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.presse-author-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  flex-shrink: 0;
}
.presse-author-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: -0.005em;
}
.presse-author-role {
  display: block;
  font-size: 12px;
  color: var(--slate-500, #64748b);
  margin-top: 1px;
}
.presse-author--small .presse-author-avatar { width: 28px; height: 28px; font-size: 10.5px; }
.presse-author--small .presse-author-name { font-size: 12.5px; }

/* Categorie */
.presse-cat {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
}
.presse-cat--case    { color: var(--teal-700, #0a7278); border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent); }
.presse-cat--article { color: #1e3a8a; border: 1px solid rgba(30, 58, 138, 0.22); }
.presse-cat--paper   { color: #7c3aed; border: 1px solid rgba(124, 58, 237, 0.22); }
.presse-cat--release { color: #d97706; border: 1px solid rgba(217, 119, 6, 0.22); }

/* Filtres */
.presse-filter-wrap {
  padding: clamp(24px, 3vw, 36px) 0 0;
  position: sticky;
  top: 64px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
}
.presse-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 18px;
}
.presse-filter {
  border: 1px solid var(--slate-200, #e2e8f0);
  background: #fff;
  color: var(--slate-700, #334155);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: inherit;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.presse-filter:hover {
  border-color: color-mix(in oklab, var(--teal-500, #0eb1b8) 30%, transparent);
  color: var(--teal-700, #0a7278);
}
.presse-filter.is-active {
  background: var(--teal-700, #0a7278);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px -3px color-mix(in oklab, var(--teal-500, #0eb1b8) 50%, transparent);
}

/* Grid articles */
.presse-grid-wrap {
  padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 80px);
}
.presse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .presse-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .presse-grid { grid-template-columns: 1fr; } }

.presse-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--slate-200, #e2e8f0);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  box-shadow: 0 1px 2px rgba(11, 27, 56, 0.03), 0 10px 24px -16px rgba(11, 27, 56, 0.14);
}
.presse-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--teal-500, #0eb1b8) 28%, transparent);
  box-shadow: 0 18px 36px -20px rgba(11, 27, 56, 0.22);
}
.presse-card-media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--slate-100, #f1f5f9);
}
.presse-card-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.22,1,.36,1);
}
.presse-card:hover .presse-card-media img { transform: scale(1.05); }

.presse-card-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.presse-card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink, #0f172a);
}
.presse-card-excerpt {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate-600, #475569);
  flex: 1;
}
.presse-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--slate-100, #f1f5f9);
}
.presse-card-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--slate-200, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-700, #334155);
  text-decoration: none;
  transition: background 200ms, color 200ms, border-color 200ms, transform 180ms;
}
.presse-card:hover .presse-card-arrow {
  background: var(--teal-700, #0a7278);
  color: #fff;
  border-color: transparent;
  transform: translateX(2px);
}

.presse-empty {
  text-align: center;
  font-size: 14px;
  color: var(--slate-500, #64748b);
  padding: 40px 12px;
}

/* CTA bottom */
.presse-cta {
  padding: clamp(48px, 6vw, 88px) 0;
  background: linear-gradient(180deg, var(--slate-50, #f8fafc) 0%, #fff 100%);
}
.presse-cta-card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px);
  text-align: center;
  background: linear-gradient(135deg, color-mix(in oklab, var(--teal-500, #0eb1b8) 8%, #fff) 0%, #fff 100%);
  border: 1px solid color-mix(in oklab, var(--teal-500, #0eb1b8) 22%, transparent);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(11,27,56,0.04), 0 24px 48px -22px color-mix(in oklab, var(--teal-500, #0eb1b8) 30%, transparent);
}
.presse-cta-card h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink, #0f172a);
}
.presse-cta-card p {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate-600, #475569);
}

/* ============================================================
   Madinat Assiha — case study page
   ============================================================ */
.madinat-page {
  --mad-teal: #0d9488;
  --mad-navy: #0f3a47;
  --mad-ink: #0f172a;
  --mad-slate: #475569;
  --mad-bg: #f8fafc;
  background: #fff;
  color: var(--mad-ink);
}
.madinat-hero {
  position: relative;
  padding: 96px 0 72px;
  background: linear-gradient(180deg, #ecfeff 0%, #f0fdfa 60%, #fff 100%);
  overflow: hidden;
}
.madinat-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
}
.madinat-hero-bg::before, .madinat-hero-bg::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
}
.madinat-hero-bg::before {
  width: 480px; height: 480px; left: -120px; top: -100px;
  background: radial-gradient(circle, rgba(13,148,136,.45), transparent 70%);
}
.madinat-hero-bg::after {
  width: 520px; height: 520px; right: -160px; bottom: -180px;
  background: radial-gradient(circle, rgba(15,58,71,.35), transparent 70%);
}
.madinat-hero-inner { position: relative; max-width: 880px; }
.madinat-hero-h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 18px 0 18px;
  color: var(--mad-navy);
}
.madinat-hero-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--mad-slate);
  max-width: 720px;
  margin: 0 0 28px;
}
.madinat-hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.madinat-hero-meta span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid rgba(13,148,136,.18);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--mad-navy);
  box-shadow: 0 2px 8px rgba(15,58,71,.04);
}

.madinat-stats {
  padding: 48px 0;
  background: var(--mad-bg);
  border-block: 1px solid #e2e8f0;
}
.madinat-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
@media (max-width: 960px) { .madinat-stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .madinat-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.madinat-stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 16px;
  text-align: left;
}
.madinat-stat-num {
  display: block;
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 800;
  color: var(--mad-teal);
  line-height: 1.1;
  margin-bottom: 4px;
}
.madinat-stat-lbl {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--mad-slate);
  line-height: 1.4;
}

.madinat-tl {
  padding: 80px 0;
}
.madinat-section-h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--mad-navy);
  margin: 0 0 12px;
}
.madinat-section-lede {
  font-size: 16px;
  color: var(--mad-slate);
  max-width: 640px;
  margin: 0 0 36px;
  line-height: 1.6;
}
.madinat-tl-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 18px;
  position: relative;
}
.madinat-tl-list::before {
  content: '';
  position: absolute;
  left: 18px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--mad-teal), rgba(13,148,136,.15));
}
.madinat-tl-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  align-items: start;
  position: relative;
  padding-left: 4px;
}
.madinat-tl-marker {
  background: var(--mad-teal);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: 0 4px 12px rgba(13,148,136,.35);
}
.madinat-tl-body { padding-top: 4px; }
.madinat-tl-body h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--mad-navy);
  font-weight: 700;
}
.madinat-tl-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mad-slate);
}

.madinat-mod {
  padding: 80px 0;
  background: var(--mad-bg);
}
.madinat-mod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 960px) { .madinat-mod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .madinat-mod-grid { grid-template-columns: 1fr; } }
.madinat-mod-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 20px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.madinat-mod-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15,58,71,.08);
  border-color: rgba(13,148,136,.3);
}
.madinat-mod-num {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--mad-teal);
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.madinat-mod-card h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--mad-navy);
  font-weight: 700;
}
.madinat-mod-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--mad-slate);
}

.madinat-q {
  padding: 80px 0;
}
.madinat-q-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 760px) { .madinat-q-grid { grid-template-columns: 1fr; } }
.madinat-q-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px;
  margin: 0;
  position: relative;
}
.madinat-q-card blockquote {
  font-size: 16px;
  line-height: 1.6;
  color: var(--mad-ink);
  margin: 0 0 16px;
  font-style: italic;
}
.madinat-q-card figcaption {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px;
}
.madinat-q-card figcaption strong { color: var(--mad-navy); }
.madinat-q-card figcaption span { color: var(--mad-slate); }
.madinat-q-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--mad-teal);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}

.madinat-cta {
  padding: 60px 0 100px;
}
.madinat-cta-card {
  background: linear-gradient(135deg, var(--mad-navy) 0%, var(--mad-teal) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 48px;
  text-align: center;
}
.madinat-cta-card h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 10px;
  font-weight: 800;
}
.madinat-cta-card p {
  margin: 0 0 24px;
  font-size: 16px;
  opacity: .92;
}
.madinat-cta-card .btn {
  background: #fff;
  color: var(--mad-navy);
}
.madinat-cta-card .btn:hover { background: #f0fdfa; }

/* ============================================================
   Témoignages page
   ============================================================ */
.temoig-page {
  --t-medecin: #0d9488;
  --t-infirmier: #7c3aed;
  --t-biomedical: #4f46e5;
  --t-direction: #1e3a8a;
  --t-ink: #0f172a;
  --t-slate: #475569;
  background: #fff;
  color: var(--t-ink);
}
.temoig-hero {
  position: relative;
  padding: 96px 0 64px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  overflow: hidden;
}
.temoig-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.temoig-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .4;
}
.temoig-orb--a {
  width: 460px; height: 460px;
  left: -130px; top: -100px;
  background: radial-gradient(circle, rgba(124,58,237,.5), transparent 70%);
}
.temoig-orb--b {
  width: 500px; height: 500px;
  right: -160px; top: 0;
  background: radial-gradient(circle, rgba(13,148,136,.45), transparent 70%);
}
.temoig-hero-inner { position: relative; max-width: 800px; }
.temoig-hero-h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 18px 0 18px;
  color: var(--t-ink);
}
.temoig-hero-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--t-slate);
  max-width: 680px;
  margin: 0;
}

.temoig-featured-wrap {
  padding: 32px 0 24px;
}
.temoig-featured {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 48px;
  margin: 0;
  box-shadow: 0 14px 40px rgba(15,23,42,.06);
  border-left: 6px solid var(--t-direction);
}
.temoig-persona-medecin    { border-left-color: var(--t-medecin); }
.temoig-persona-infirmier  { border-left-color: var(--t-infirmier); }
.temoig-persona-biomedical { border-left-color: var(--t-biomedical); }
.temoig-persona-direction  { border-left-color: var(--t-direction); }
.temoig-featured-mark {
  position: absolute;
  top: 28px; right: 32px;
  width: 56px; height: 56px;
  color: rgba(13,148,136,.18);
}
.temoig-featured blockquote {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  color: var(--t-ink);
  margin: 0 0 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 880px;
}
.temoig-featured figcaption {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}

.temoig-author-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.temoig-author-meta {
  display: flex; flex-direction: column;
  font-size: 13.5px;
  line-height: 1.4;
}
.temoig-author-meta strong { color: var(--t-ink); font-weight: 700; }
.temoig-author-meta span { color: var(--t-slate); }
.temoig-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  margin-left: auto;
}
.temoig-tag--medecin    { background: rgba(13,148,136,.12);  color: var(--t-medecin); }
.temoig-tag--infirmier  { background: rgba(124,58,237,.12);  color: var(--t-infirmier); }
.temoig-tag--biomedical { background: rgba(79,70,229,.12);   color: var(--t-biomedical); }
.temoig-tag--direction  { background: rgba(30,58,138,.12);   color: var(--t-direction); }

.temoig-filter-wrap {
  padding: 32px 0 16px;
  position: sticky; top: 64px; z-index: 10;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
}
.temoig-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.temoig-filter {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--t-slate);
  cursor: pointer;
  transition: all .15s;
}
.temoig-filter:hover { border-color: #cbd5e1; color: var(--t-ink); }
.temoig-filter.is-active {
  background: var(--t-ink);
  color: #fff;
  border-color: var(--t-ink);
}

.temoig-grid-wrap { padding: 24px 0 80px; }
.temoig-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--t-slate);
  font-size: 15px;
}
.temoig-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 760px) { .temoig-grid { grid-template-columns: 1fr; } }
.temoig-card {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px 24px;
  margin: 0;
  border-left: 4px solid;
  transition: transform .2s, box-shadow .2s;
}
.temoig-card.temoig-persona-medecin    { border-left-color: var(--t-medecin); }
.temoig-card.temoig-persona-infirmier  { border-left-color: var(--t-infirmier); }
.temoig-card.temoig-persona-biomedical { border-left-color: var(--t-biomedical); }
.temoig-card.temoig-persona-direction  { border-left-color: var(--t-direction); }
.temoig-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}
.temoig-card .temoig-tag {
  margin: 0 0 14px;
  display: inline-flex;
}
.temoig-card blockquote {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--t-ink);
  margin: 0 0 18px;
  font-style: italic;
}
.temoig-card figcaption {
  display: flex; align-items: center; gap: 12px;
}

.temoig-cta { padding: 40px 0 100px; }
.temoig-cta-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  color: #fff;
  border-radius: 20px;
  padding: 48px;
  text-align: center;
}
.temoig-cta-card h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 10px;
  font-weight: 800;
  color: #ffffff;
}
.temoig-cta-card p {
  margin: 0 0 24px;
  font-size: 16px;
  opacity: .9;
}
.temoig-cta-card .btn {
  background: #fff;
  color: #0f172a;
}

/* ============================================================
   Galerie de Prototypes Interactifs · portail post-démo
   ============================================================ */
.gal-page {
  --gal-teal: #0d9488;
  --gal-violet: #7c3aed;
  --gal-navy: #1e3a8a;
  --gal-indigo: #4f46e5;
  --gal-sky: #0284c7;
  --gal-red: #dc2626;
  --gal-amber: #d97706;
  --gal-ink: #0f172a;
  --gal-slate: #475569;
  --gal-bg: #f8fafc;
  background: #fff;
  color: var(--gal-ink);
}

/* Hero */
.gal-hero {
  position: relative;
  padding: 88px 0 56px;
  background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 40%, #fff 100%);
  overflow: hidden;
}
.gal-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
}
.gal-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .45;
  animation: galFloat 14s ease-in-out infinite;
}
.gal-orb--a {
  width: 480px; height: 480px;
  left: -130px; top: -120px;
  background: radial-gradient(circle, rgba(13,148,136,.5), transparent 70%);
}
.gal-orb--b {
  width: 420px; height: 420px;
  right: -100px; top: -60px;
  background: radial-gradient(circle, rgba(79,70,229,.4), transparent 70%);
  animation-delay: -4s;
}
.gal-orb--c {
  width: 360px; height: 360px;
  left: 40%; bottom: -160px;
  background: radial-gradient(circle, rgba(124,58,237,.35), transparent 70%);
  animation-delay: -8s;
}
@keyframes galFloat {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(20px, -16px); }
}
.gal-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(13,148,136,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,148,136,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
}
.gal-hero-inner { position: relative; max-width: 880px; }
.gal-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid rgba(13,148,136,.25);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gal-teal);
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(13,148,136,.08);
}
.gal-hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gal-teal);
  box-shadow: 0 0 0 0 rgba(13,148,136,.6);
  animation: galPulse 2s infinite;
}
@keyframes galPulse {
  0%   { box-shadow: 0 0 0 0 rgba(13,148,136,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(13,148,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,148,136,0); }
}
.gal-hero-h1 {
  font-size: clamp(38px, 5.5vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 14px 0 18px;
  color: var(--gal-ink);
  display: flex; flex-direction: column; gap: 4px;
}
.gal-hero-h1-sub {
  background: linear-gradient(90deg, var(--gal-teal), var(--gal-indigo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gal-hero-lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--gal-slate);
  max-width: 680px;
  margin: 0;
}

/* Filters */
.gal-filter-wrap {
  position: sticky; top: 64px; z-index: 10;
  padding: 18px 0;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #e2e8f0;
}
.gal-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.gal-filter {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 14px 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gal-slate);
  cursor: pointer;
  transition: all .15s;
}
.gal-filter:hover {
  border-color: #cbd5e1;
  color: var(--gal-ink);
  transform: translateY(-1px);
}
.gal-filter.is-active {
  background: var(--gal-ink);
  color: #fff;
  border-color: var(--gal-ink);
}
.gal-filter-count {
  background: rgba(15,23,42,.08);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}
.gal-filter.is-active .gal-filter-count {
  background: rgba(255,255,255,.18);
  color: #fff;
}

/* Mobile · filters become a single horizontal scrollable row */
@media (max-width: 640px) {
  .gal-filter-wrap {
    padding: 10px 0;
    top: 56px;
  }
  .gal-filter-wrap > .container {
    padding-left: 0;
    padding-right: 0;
  }
  .gal-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    padding: 2px 16px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .gal-filters::-webkit-scrollbar { display: none; }
  .gal-filter {
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 6px 10px 6px 12px;
    font-size: 12.5px;
    gap: 6px;
  }
  .gal-filter-count {
    font-size: 10.5px;
    padding: 1px 6px;
    min-width: 18px;
  }
}

/* Sections */
.gal-section {
  padding: 56px 0 24px;
}
.gal-section-h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gal-ink);
  margin: 0 0 24px;
  display: flex; align-items: center; gap: 12px;
}
.gal-section-h2::after {
  content: '';
  flex: 1; height: 1px;
  background: linear-gradient(90deg, #e2e8f0, transparent);
}

/* Cards grid */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 1024px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .gal-grid { grid-template-columns: 1fr; } }

.gal-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15,23,42,.1);
  border-color: rgba(13,148,136,.35);
}
.gal-card.is-soon { opacity: .85; }
.gal-card.is-soon:hover { transform: none; box-shadow: 0 6px 18px rgba(15,23,42,.05); }

.gal-card--teal   { --gal-accent: var(--gal-teal); }
.gal-card--violet { --gal-accent: var(--gal-violet); }
.gal-card--navy   { --gal-accent: var(--gal-navy); }
.gal-card--indigo { --gal-accent: var(--gal-indigo); }
.gal-card--sky    { --gal-accent: var(--gal-sky); }
.gal-card--red    { --gal-accent: var(--gal-red); }
.gal-card--amber  { --gal-accent: var(--gal-amber); }
.gal-card--teal:hover   { border-color: var(--gal-teal); }
.gal-card--violet:hover { border-color: var(--gal-violet); }
.gal-card--navy:hover   { border-color: var(--gal-navy); }
.gal-card--indigo:hover { border-color: var(--gal-indigo); }
.gal-card--sky:hover    { border-color: var(--gal-sky); }
.gal-card--red:hover    { border-color: var(--gal-red); }
.gal-card--amber:hover  { border-color: var(--gal-amber); }

.gal-card-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gal-card-preview::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(255,255,255,.4), transparent 60%);
  pointer-events: none;
}
.gal-card-icon {
  position: absolute;
  top: 14px; left: 14px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15,23,42,.08);
  z-index: 2;
}
.gal-card-mock {
  position: relative;
  width: 86%;
  transition: transform .35s ease;
  z-index: 1;
}
.gal-card:hover .gal-card-mock { transform: scale(1.04); }
.gal-preview-svg { width: 100%; height: auto; display: block; }

/* Real photo (when present) fills the preview area edge-to-edge. */
.gal-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .35s ease;
  z-index: 1;
}
.gal-card:hover .gal-card-photo { transform: scale(1.04); }

.gal-card-body {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column;
  flex: 1;
}
.gal-card-head {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.gal-card-head h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--gal-ink);
  letter-spacing: -0.01em;
}
.gal-card-sub {
  font-size: 13px;
  color: var(--gal-slate);
  font-weight: 500;
}
.gal-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gal-slate);
  margin: 0 0 18px;
  flex: 1;
}
.gal-card-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.gal-card-btn {
  --_accent: var(--gal-accent, var(--gal-teal));
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  background: #fff;
  color: var(--gal-ink);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}
.gal-card-btn svg {
  width: 15px; height: 15px;
  transition: transform .2s ease;
}

/* Primary CTA — accent-filled with soft gradient + tinted shadow */
.gal-card-btn--primary {
  background: linear-gradient(135deg, var(--_accent) 0%,
              color-mix(in srgb, var(--_accent) 78%, #0f172a) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 6px 16px -6px color-mix(in srgb, var(--_accent) 55%, transparent);
  padding-right: 18px;
}
.gal-card-btn--primary::after {
  content: '';
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10h12M11 5l5 5-5 5'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10h12M11 5l5 5-5 5'/></svg>") no-repeat center / contain;
  margin-left: 2px;
  opacity: .9;
  transition: transform .2s ease, opacity .2s ease;
}
.gal-card-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 14px 28px -10px color-mix(in srgb, var(--_accent) 65%, transparent);
}
.gal-card-btn--primary:hover::after { transform: translateX(3px); opacity: 1; }
.gal-card-btn--primary:active { transform: translateY(0); }

/* Ghost CTA — soft, accent-tinted on hover */
.gal-card-btn--ghost {
  background: #fff;
  color: var(--gal-ink);
  border-color: #e2e8f0;
}
.gal-card-btn--ghost:hover {
  background: color-mix(in srgb, var(--_accent) 6%, #fff);
  border-color: color-mix(in srgb, var(--_accent) 35%, #e2e8f0);
  color: color-mix(in srgb, var(--_accent) 70%, var(--gal-ink));
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--_accent) 45%, transparent);
}
.gal-card-btn--ghost:hover svg { transform: translateY(-1px); }

/* "Coming soon" disabled state */
.gal-card-btn:disabled,
.gal-card-btn[disabled] {
  background: #f1f5f9;
  color: var(--gal-slate);
  border-color: #e2e8f0;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.gal-card-btn:disabled::after,
.gal-card-btn[disabled]::after { display: none; }
.gal-card-btn:disabled:hover { background: #f1f5f9; transform: none; box-shadow: none; }

/* Focus ring for keyboard users */
.gal-card-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px color-mix(in srgb, var(--_accent) 60%, transparent);
}

/* ── Footer CTA · refonte premium ── */
.gal-footer { padding: 64px 0 110px; }
.gal-footer-card {
  position: relative;
  background: linear-gradient(135deg, #0F766E 0%, #064E3B 100%);
  color: #fff;
  border-radius: 24px;
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: center;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 30px 60px -20px rgba(15,118,110,.35);
}
.gal-footer-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
}
.gal-footer-orb--a {
  width: 320px; height: 320px;
  background: rgba(94,234,212,.35);
  top: -120px; right: -80px;
}
.gal-footer-orb--b {
  width: 240px; height: 240px;
  background: rgba(99,91,255,.35);
  bottom: -100px; left: -60px;
}
.gal-footer-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
.gal-footer-content { position: relative; z-index: 1; }
.gal-footer-eye {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(94,234,212,0.14);
  border: 1px solid rgba(94,234,212,0.3);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #5EEAD4;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}
.gal-footer-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5EEAD4;
  box-shadow: 0 0 10px #5EEAD4;
  animation: msPulseDot 2s ease-out infinite;
}
.gal-footer-card h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #fff;
}
.gal-footer-card p {
  margin: 0 0 24px;
  font-size: 15.5px;
  color: #A7F3D0;
  line-height: 1.5;
  max-width: 460px;
}
.gal-footer-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.gal-cta-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  background: #fff;
  color: #0F766E;
  border: 0; border-radius: 10px;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 24px -8px rgba(255,255,255,.4);
}
.gal-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(255,255,255,.55);
}
.gal-cta-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(94,234,212,.4);
  border-radius: 10px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
  font-family: inherit;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.gal-cta-ghost:hover {
  background: rgba(94,234,212,.15);
  border-color: #5EEAD4;
  transform: translateY(-2px);
}
.gal-footer-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12.5px;
  color: rgba(167,243,208,.85);
}
.gal-footer-meta strong { color: #fff; font-weight: 700; }
.gal-footer-sep { opacity: 0.4; }

.gal-footer-visual {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  padding: 30px 36px;
  border-left: 1px solid rgba(94,234,212,.2);
  color: #5EEAD4;
}
.gal-footer-pulse {
  position: relative;
  width: 48px; height: 48px;
}
.gal-footer-pulse span {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid #5EEAD4;
  opacity: 0;
  animation: galFooterPulse 2.4s ease-out infinite;
}
.gal-footer-pulse span:nth-child(2) { animation-delay: .8s; }
.gal-footer-pulse span:nth-child(3) { animation-delay: 1.6s; }
.gal-footer-pulse::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #5EEAD4;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px #5EEAD4;
}
@keyframes galFooterPulse {
  0%   { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.gal-footer-stamp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: rgba(94,234,212,.55);
  letter-spacing: 0.15em;
}

@media (max-width: 860px) {
  .gal-footer-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 32px;
  }
  .gal-footer-visual {
    border-left: 0;
    border-top: 1px solid rgba(94,234,212,.2);
    padding: 24px 0 0;
    flex-direction: row;
    gap: 14px;
  }
}
@media (max-width: 480px) {
  .gal-footer-meta { font-size: 11.5px; }
  .gal-footer-actions { flex-direction: column; align-items: stretch; }
  .gal-cta-primary, .gal-cta-ghost { justify-content: center; }
  .gal-section { padding: 40px 0 16px; }
}

/* Demo success — proto variant with gallery link */
.demov3-success--proto h2 {
  background: linear-gradient(90deg, #0d9488, #4f46e5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.demov3-success-link {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed #e2e8f0;
  text-align: left;
  max-width: 540px;
  margin-inline: auto;
}
.demov3-success-link-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
  text-align: center;
}
.demov3-success-link-row {
  display: flex; align-items: stretch; gap: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.demov3-success-link-row code {
  flex: 1;
  padding: 11px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: transparent;
}
.demov3-success-copy {
  background: #0f172a;
  color: #fff;
  border: none;
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.demov3-success-copy:hover { background: #0d9488; }
.demov3-success-link small {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 11.5px;
  color: #94a3b8;
}


/* ============================================================
   Modules carousel — home page audience-grouped slider (rich)
   ============================================================ */
.mods-carousel {
  --mc-teal:   #0d9488;
  --mc-violet: #7c3aed;
  --mc-navy:   #1e3a8a;
  --mc-indigo: #4f46e5;
  --mc-sky:    #0284c7;
  --mc-red:    #dc2626;
  --mc-amber:  #d97706;
  position: relative;
  padding: 96px 0 88px;
  background: linear-gradient(180deg, #ecfeff 0%, #f0fdfa 35%, #fff 100%);
  border-block: 1px solid #e2e8f0;
  overflow: hidden;
}
.mods-c-bg { position: absolute; inset: 0; pointer-events: none; }
.mods-c-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .45;
  animation: mcFloat 16s ease-in-out infinite;
}
.mods-c-orb--a {
  width: 480px; height: 480px;
  left: -130px; top: -120px;
  background: radial-gradient(circle, rgba(13,148,136,.55), transparent 70%);
}
.mods-c-orb--b {
  width: 420px; height: 420px;
  right: -100px; bottom: -100px;
  background: radial-gradient(circle, rgba(79,70,229,.4), transparent 70%);
  animation-delay: -6s;
}
@keyframes mcFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(20px, -16px) scale(1.05); }
}
.mods-c-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(13,148,136,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,148,136,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
}
.mods-c-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.mods-c-h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 12px 0 0;
  background: linear-gradient(90deg, #0f172a, #0d9488);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mcSlide .45s ease both;
}
@keyframes mcSlide {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mods-c-nav {
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}
.mods-c-arrow {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  color: #0f172a;
  cursor: pointer;
  transition: all .2s;
}
.mods-c-arrow:hover {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
  transform: scale(1.08);
}
.mods-c-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
  letter-spacing: .04em;
  min-width: 56px;
  text-align: center;
}
.mods-c-counter em { color: #94a3b8; font-style: normal; margin: 0 4px; }

.mods-c-grid {
  display: grid;
  gap: 22px;
}
.mods-c-grid--1 { grid-template-columns: minmax(280px, 560px); justify-content: center; }
.mods-c-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mods-c-grid--4 { grid-template-columns: repeat(4, 1fr); }
.mods-c-grid--7 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .mods-c-grid--4,
  .mods-c-grid--7 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mods-c-grid--2,
  .mods-c-grid--4,
  .mods-c-grid--7 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mods-c-grid--1 { grid-template-columns: 1fr; }

}
@media (max-width: 360px) {
  .mods-c-grid--2,
  .mods-c-grid--4,
  .mods-c-grid--7 { grid-template-columns: 1fr; gap: 14px; }
}

/* Mobile · compact card so 2 fit per row */
@media (max-width: 600px) {
  .mods-c-card { min-height: 0; border-radius: 14px; }
  .mods-c-card::after { border-radius: 14px; }
  .mods-c-card-body { padding: 14px 14px 16px; gap: 4px; }
  .mods-c-name { font-size: 15.5px; letter-spacing: -0.005em; }
  .mods-c-sub { font-size: 12px; line-height: 1.4; }
  .mods-c-cta { font-size: 11.5px; margin-top: 8px; gap: 4px; }
  .mods-c-illu-wrap { aspect-ratio: 4 / 3; }
}

.mods-c-card {
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 0;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  font-family: inherit;
  opacity: 0;
  animation: mcRise .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes mcRise {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mods-c-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 18px;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--accent, transparent);
  transition: box-shadow .25s;
}
.mods-c-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(15,23,42,.12);
  border-color: var(--accent, #0d9488);
}
.mods-c-card:hover::after { box-shadow: inset 0 0 0 1px var(--accent); }
.mods-c-card:disabled { cursor: not-allowed; opacity: .7; }
.mods-c-card:disabled:hover { transform: none; box-shadow: none; }

.mods-c-card--teal   { --accent: var(--mc-teal);   --bg: linear-gradient(135deg, #ecfeff, #f0fdfa); }
.mods-c-card--violet { --accent: var(--mc-violet); --bg: linear-gradient(135deg, #f5f3ff, #ede9fe); }
.mods-c-card--navy   { --accent: var(--mc-navy);   --bg: linear-gradient(135deg, #eff6ff, #e0e7ff); }
.mods-c-card--indigo { --accent: var(--mc-indigo); --bg: linear-gradient(135deg, #eef2ff, #e0e7ff); }
.mods-c-card--sky    { --accent: var(--mc-sky);    --bg: linear-gradient(135deg, #f0f9ff, #e0f2fe); }
.mods-c-card--red    { --accent: var(--mc-red);    --bg: linear-gradient(135deg, #fef2f2, #fee2e2); }
.mods-c-card--amber  { --accent: var(--mc-amber);  --bg: linear-gradient(135deg, #fffbeb, #fef3c7); }

.mods-c-illu-wrap {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mods-c-illu-glow {
  position: absolute;
  width: 70%; height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 25%, transparent), transparent 70%);
  filter: blur(28px);
  opacity: .8;
  z-index: 0;
  animation: mcPulseGlow 3.5s ease-in-out infinite;
}
@keyframes mcPulseGlow {
  0%,100% { transform: scale(1); opacity: .55; }
  50%     { transform: scale(1.15); opacity: .85; }
}
.mc-illu {
  position: relative; z-index: 1;
  width: 88%; height: auto;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(15,23,42,.06));
  transition: transform .4s ease;
}
.mods-c-card:hover .mc-illu { transform: scale(1.05); }

/* SVG anims */
.mc-ecg {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: mcEcg 2.4s ease-in-out infinite;
}
@keyframes mcEcg {
  0%   { stroke-dashoffset: 240; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -240; }
}
.mc-pulse, .mc-pulse-ring {
  transform-origin: 170px 34px;
  animation: mcPulse 1.8s ease-out infinite;
}
.mc-pulse-ring { animation-name: mcPulseRing; }
@keyframes mcPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.15); }
}
@keyframes mcPulseRing {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(2.5); opacity: 0; }
}
.mc-list rect { animation: mcRowFade .6s ease both; }
.mc-list rect:nth-of-type(2) { animation-delay: .15s; }
.mc-list rect:nth-of-type(3) { animation-delay: .3s; }
@keyframes mcRowFade {
  from { transform: translateX(-6px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.mc-orb {
  animation: mcOrbFloat 4s ease-in-out infinite;
}
.mc-orb--alt { animation-delay: -2s; }
@keyframes mcOrbFloat {
  0%,100% { transform: translate(var(--ox,0px), var(--oy,0px)) scale(1); }
  50%     { transform: translate(2px, -4px) scale(1.05); }
}
.mc-bars rect {
  transform-origin: bottom;
  animation: mcBarRise .9s cubic-bezier(.2,.7,.2,1) both;
}
.mc-bars rect:nth-of-type(1) { animation-delay: .05s; }
.mc-bars rect:nth-of-type(2) { animation-delay: .1s; }
.mc-bars rect:nth-of-type(3) { animation-delay: .15s; }
.mc-bars rect:nth-of-type(4) { animation-delay: .2s; }
.mc-bars rect:nth-of-type(5) { animation-delay: .25s; }
.mc-bars rect:nth-of-type(6) { animation-delay: .3s; }
.mc-bars rect:nth-of-type(7) { animation-delay: .35s; }
.mc-bars rect:nth-of-type(8) { animation-delay: .4s; }
@keyframes mcBarRise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.mc-trend {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: mcLineDraw 1.6s ease forwards;
  animation-delay: .4s;
}
.mc-trend-dot {
  opacity: 0;
  animation: mcDotShow .3s ease forwards;
  animation-delay: 1.9s;
}
@keyframes mcLineDraw { to { stroke-dashoffset: 0; } }
@keyframes mcDotShow { to { opacity: 1; } }
.mc-nfc path {
  animation: mcNfcWave 1.8s ease-in-out infinite;
  transform-origin: 0 0;
}
.mc-nfc path:nth-of-type(2) { animation-delay: .25s; }
.mc-nfc path:nth-of-type(3) { animation-delay: .5s; }
@keyframes mcNfcWave {
  0%,100% { opacity: .35; }
  50%     { opacity: 1; }
}
.mc-heart {
  transform-origin: 100px 38px;
  animation: mcHeartBeat 1.4s ease-in-out infinite;
}
@keyframes mcHeartBeat {
  0%,100% { transform: scale(1); }
  20%     { transform: scale(1.15); }
  40%     { transform: scale(1); }
  60%     { transform: scale(1.08); }
}
.mc-flow rect:nth-of-type(2) {
  animation: mcFlowGlow 2.2s ease-in-out infinite;
}
@keyframes mcFlowGlow {
  0%,100% { opacity: .4; }
  50%     { opacity: .7; }
}
.mc-trav {
  animation: mcTrav 3.2s ease-in-out infinite;
}
@keyframes mcTrav {
  0%   { transform: translate(-36px, 0); }
  100% { transform: translate(72px, 0); }
}
.mc-route {
  stroke-dasharray: 8 8;
  animation: mcDashMove 1.6s linear infinite;
}
@keyframes mcDashMove { to { stroke-dashoffset: -16; } }
.mc-ambu {
  animation: mcAmbuMove 4s ease-in-out infinite;
}
@keyframes mcAmbuMove {
  0%   { transform: translate(40, 70); }
  50%  { transform: translate(120, 56); }
  100% { transform: translate(40, 70); }
}

.mods-c-card-body {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column;
  gap: 6px;
  flex: 1;
}
.mods-c-name {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.mods-c-sub {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.5;
  flex: 1;
}
.mods-c-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, #0d9488);
  letter-spacing: .01em;
  transition: gap .2s;
}
.mods-c-card:hover .mods-c-cta { gap: 10px; }

.mods-c-dots {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 36px;
}
.mods-c-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
  padding: 0;
  transition: all .25s;
}
.mods-c-dot.is-active {
  width: 32px;
  background: linear-gradient(90deg, #0d9488, #4f46e5);
}
.mods-c-dot:hover:not(.is-active) { background: #94a3b8; }


/* ============================================================
   Trust band — minimal pro (white, large centered logos)
   ============================================================ */
.trust-min {
  background: #fff;
  padding: 72px 0;
  border-block: 1px solid #f1f5f9;
}
.trust-min .container { text-align: center; }
.trust-min-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 36px;
}
.trust-min-logos {
  display: flex; align-items: center; justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}
.trust-min-logo {
  display: inline-flex; align-items: center;
  height: 64px;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .25s ease, opacity .25s ease;
}
.trust-min-logo:hover { filter: grayscale(0); opacity: 1; }
.trust-min-logo img {
  max-height: 64px;
  width: auto;
  display: block;
  object-fit: contain;
}
.trust-min-logo--text {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0f172a;
  font-family: inherit;
}
.trust-min-fallback {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #0f172a;
}
.trust-min-sep {
  width: 1px; height: 40px;
  background: #e2e8f0;
}
@media (max-width: 600px) {
  .trust-min-logos {
    gap: 24px;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .trust-min-logo { height: 44px; }
  .trust-min-logo img { max-height: 44px; }
  .trust-min-sep { display: inline-block; height: 28px; }
}

/* ============================================================
   MonSejour solution page · 5 zones (V2 — premium)
   ============================================================ */
.ms-page {
  --ms-teal: #0F766E;
  --ms-teal-dk: #134E4A;
  --ms-teal-50: #F0FDFA;
  --ms-teal-light: #5EEAD4;
  --ms-pink: #BE185D;
  --ms-pink-50: #FCE7F3;
  --ms-pink-light: #F9A8D4;
  --ms-slate-50: #F8FAFC;
  --ms-slate-200: #E2E8F0;
  --ms-slate-500: #64748B;
  --ms-slate-700: #334155;
  --ms-slate-900: #0F172A;
  background: #fff;
  color: var(--ms-slate-900);
}
.ms-h1 {
  font-size: clamp(36px, 5.4vw, 60px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ms-slate-900);
  margin: 0 0 22px;
}
.ms-h1-accent {
  background: linear-gradient(135deg, var(--ms-teal) 0%, var(--ms-pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ms-h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ms-slate-900);
  margin: 12px 0 14px;
}
.ms-section-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.ms-section-lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ms-slate-700);
  margin: 0;
}

/* Zone 1 hero — IMMERSIF FULL SCREEN */
.ms-hero-im {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(ellipse at center bottom, #0F172A 0%, #020617 100%);
  overflow: hidden;
  display: flex; align-items: center;
  color: #fff;
}
.ms-hero-im-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ms-hero-im-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: .9;
}

/* Particles */
.ms-hero-im-particles {
  position: absolute; inset: 0;
}
.ms-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #5EEAD4;
  opacity: 0;
  animation: msParticleFloat 8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.3s);
  filter: blur(.5px);
}
.ms-particle--0 { background: #5EEAD4; }
.ms-particle--1 { background: #F9A8D4; width: 2px; height: 2px; }
.ms-particle--2 { background: #FBBF24; }
.ms-particle--3 { background: #5EEAD4; width: 4px; height: 4px; }
.ms-particle--4 { background: #C4B5FD; width: 2px; height: 2px; }
.ms-particle--5 { background: #5EEAD4; }
@keyframes msParticleFloat {
  0%   { opacity: 0; transform: translateY(20px) scale(.5); }
  20%  { opacity: .9; transform: translateY(0) scale(1); }
  80%  { opacity: .6; }
  100% { opacity: 0; transform: translateY(-40px) scale(1.2); }
}

/* TV animations */
.ms-im-tv-halo {
  animation: msTvPulse 4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes msTvPulse {
  0%,100% { opacity: .5; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.08); }
}
.ms-im-tv-screen {
  animation: msTvFlicker .15s 3s ease forwards;
  fill: #0F766E;
}
@keyframes msTvFlicker {
  0%   { fill: #0F172A; }
  50%  { fill: #134E4A; }
  100% { fill: #0F766E; }
}
.ms-im-tv-text {
  opacity: 0;
  animation: msTvTextIn .6s ease forwards;
  animation-delay: 3.4s;
}
.ms-im-tv-text:nth-of-type(2) { animation-delay: 3.8s; }
.ms-im-tv-text:nth-of-type(3) { animation-delay: 4.2s; }
.ms-im-tv-text:nth-of-type(4) { animation-delay: 4.6s; }
@keyframes msTvTextIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stars twinkle */
.ms-im-star {
  animation: msStarTwinkle 2.5s ease-in-out infinite;
}
@keyframes msStarTwinkle {
  0%,100% { opacity: .3; }
  50%     { opacity: 1; }
}

/* NFC pulse rings on bracelet */
.ms-im-nfc-ring {
  transform-origin: center;
  animation: msNfcExpand 2s ease-out infinite;
  opacity: 0;
}
@keyframes msNfcExpand {
  0%   { transform: scale(0.6); opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Lamp bulb */
.ms-im-lamp-bulb {
  animation: msLampGlow 3s ease-in-out infinite;
  filter: drop-shadow(0 0 8px #F59E0B);
}
@keyframes msLampGlow {
  0%,100% { opacity: .8; }
  50%     { opacity: 1; }
}

/* Heartbeat sweep */
.ms-im-heart {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: msHeartSweep 5s linear infinite;
}
@keyframes msHeartSweep {
  0%   { stroke-dashoffset: 3000; }
  100% { stroke-dashoffset: 0; }
}

/* Floating notifications */
.ms-im-notif {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12);
  padding: 12px 16px;
  border-radius: 14px;
  color: #fff;
  min-width: 220px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  opacity: 0;
  animation: msNotifIn .7s cubic-bezier(.2,.8,.2,1) forwards;
  z-index: 2;
}
.ms-im-notif--1 { top: 12%; right: 6%; animation-delay: 5s; }
.ms-im-notif--2 { top: 40%; right: 4%; animation-delay: 6s; }
.ms-im-notif--3 { bottom: 22%; left: 6%; animation-delay: 7s; }
@keyframes msNotifIn {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ms-im-notif-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ms-im-notif-icon--teal { background: rgba(14,177,184,.2); color: #5EEAD4; }
.ms-im-notif-icon--pink { background: rgba(249,168,212,.2); color: #F9A8D4; }
.ms-im-notif-icon--mint { background: rgba(94,234,212,.2); color: #5EEAD4; }
.ms-im-notif strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
}
.ms-im-notif span {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.6);
  margin-top: 2px;
}
@media (max-width: 700px) {
  .ms-im-notif { display: none; }
}

/* Hero foreground content */
.ms-hero-im-content {
  position: relative;
  z-index: 3;
  max-width: 720px;
  padding-top: 80px;
}
.ms-hero-im-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(94,234,212,.3);
  color: #5EEAD4;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 999px;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
}
.ms-hero-im-h1 {
  font-size: clamp(38px, 5.6vw, 68px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 24px;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.ms-hero-im-h1 .ms-h1-accent {
  background: linear-gradient(135deg, #5EEAD4 0%, #F9A8D4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.ms-hero-im-promise {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  margin: 0 0 36px;
  max-width: 580px;
}
.ms-hero-im-content .btn-primary {
  background: linear-gradient(135deg, #0EB1B8 0%, #0F766E 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(14,177,184,.35);
}
.ms-hero-im-content .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(14,177,184,.5);
}
.ms-hero-im-ghost {
  color: rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: 2px;
  transition: border-color .15s, color .15s;
}
.ms-hero-im-ghost:hover { color: #5EEAD4; border-bottom-color: #5EEAD4; }

/* Scroll cue */
.ms-hero-im-scroll {
  position: absolute;
  bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 11px;
  color: rgba(255,255,255,.5);
  letter-spacing: .15em;
  text-transform: uppercase;
  z-index: 3;
  animation: msScrollFade 1s ease 8s forwards;
  opacity: 0;
}
@keyframes msScrollFade { to { opacity: 1; } }
.ms-hero-im-scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, rgba(94,234,212,.6), transparent);
  position: relative;
  overflow: hidden;
}
.ms-hero-im-scroll-line::after {
  content: '';
  position: absolute;
  top: -20px;
  width: 1px; height: 20px;
  background: #5EEAD4;
  animation: msScrollDot 2s linear infinite;
}
@keyframes msScrollDot {
  to { transform: translateY(60px); }
}

@media (max-width: 992px) {
  .ms-hero-im-svg { transform: scale(1.4); transform-origin: center; }
  .ms-hero-im-content { padding-top: 60px; }
}


/* ============================================================
   MonSejour V3 — Zones 2-5 redesigned · concis behind the immersive hero
   ============================================================ */
.ms-mini-eye {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ms-teal);
  margin-bottom: 16px;
}
.ms-stay-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.ms-stay-h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px;
  background: linear-gradient(135deg, #0F172A 0%, #0F766E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ms-stay-lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ms-slate-700);
  margin: 0;
}

/* Zone 2 — Carousel cinema (style AmbuLive — 1 slide à la fois) */
.ms-cx {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #F8FAFC 100%);
  padding: 96px 0 88px;
  overflow: hidden;
}
.ms-cx-bg { position: absolute; inset: 0; pointer-events: none; }
.ms-cx-grid-pattern {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(15,118,110,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, #000 25%, transparent 75%);
}
.ms-cx-head {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.ms-cx-eye {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  background: var(--ms-teal-50);
  color: var(--ms-teal);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 18px;
}
.ms-cx-h2 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ms-slate-900);
  margin: 0;
}
.ms-cx-h2 em {
  color: var(--ms-teal);
  font-style: italic;
  font-weight: 800;
}
.ms-cx-stage { position: relative; z-index: 1; }
.ms-cx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  animation: msFade .5s ease;
}
@media (max-width: 920px) { .ms-cx-grid { grid-template-columns: 1fr; gap: 28px; } }
.ms-cx-text { padding: 8px 0; }
.ms-cx-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.ms-cx-tag-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.ms-cx-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ms-slate-900);
  margin: 0 0 18px;
}
.ms-cx-metric-line {
  font-size: 16px;
  font-weight: 600;
  color: var(--ms-slate-700);
  margin: 0 0 22px;
  line-height: 1.55;
}
.ms-cx-body {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ms-slate-500);
  margin: 0 0 28px;
}
.ms-cx-callout {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--ms-slate-200);
  border-left: 3px solid var(--cx-accent, var(--ms-teal));
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(15,23,42,.05);
}
.ms-cx-callout svg {
  color: var(--cx-accent, var(--ms-teal));
  margin-top: 1px;
  flex-shrink: 0;
}
.ms-cx-callout span {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ms-slate-900);
}
.ms-cx-callout--naissance     { --cx-accent: #BE185D; }
.ms-cx-callout--accueil       { --cx-accent: #0F766E; }
.ms-cx-callout--bloc-famille  { --cx-accent: #92400E; }
.ms-cx-callout--geriatrie     { --cx-accent: #4338CA; }
.ms-cx-callout--veille-nuit   { --cx-accent: #1E293B; }
.ms-cx-callout--conformite    { --cx-accent: #047857; }

.ms-cx-visual { position: relative; }
.ms-cx-photo {
  position: relative;
  aspect-ratio: 13 / 10;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent !important;
}
.ms-cx-photo .ms-illu {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  border-radius: 22px;
}
.ms-cx-photo svg.ms-illu { width: 100%; height: 100%; display: block; }
/* Bottom dark gradient for the 01/02/etc number readability */
.ms-cx-photo::after { display: none !important; }
.ms-cx-photo--naissance,
.ms-cx-photo--accueil,
.ms-cx-photo--bloc-famille,
.ms-cx-photo--geriatrie,
.ms-cx-photo--veille-nuit,
.ms-cx-photo--conformite { background: transparent !important; }
.ms-cx-num {
  position: absolute;
  left: 32px; bottom: 70px;
  font-size: clamp(72px, 10vw, 120px);
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255,255,255,.95);
  line-height: 1;
  letter-spacing: -0.04em;
  z-index: 2;
  text-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.ms-cx-photo-caption {
  position: absolute;
  left: 32px; right: 32px; bottom: 28px;
  z-index: 2;
}
.ms-cx-photo-caption strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  line-height: 1.45;
}
.ms-cx-arrows {
  position: absolute;
  bottom: -28px; right: 0;
  display: flex; gap: 10px;
  z-index: 3;
}
.ms-cx-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ms-slate-200);
  background: #fff;
  color: var(--ms-slate-900);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
  box-shadow: 0 6px 18px rgba(15,23,42,.08);
}
.ms-cx-arrow:hover {
  background: var(--ms-slate-900);
  color: #fff;
  border-color: var(--ms-slate-900);
}
.ms-cx-arrow svg { width: 20px; height: 20px; }

.ms-cx-foot {
  display: flex; align-items: center; justify-content: center;
  gap: 24px;
  margin-top: 64px;
  flex-wrap: wrap;
}
.ms-cx-dots {
  display: flex; gap: 4px;
  background: #fff;
  border: 1px solid var(--ms-slate-200);
  border-radius: 14px;
  padding: 6px;
  flex-wrap: wrap;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}
.ms-cx-dot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  min-width: 80px;
}
.ms-cx-dot-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ms-slate-900);
  letter-spacing: .04em;
}
.ms-cx-dot-cat {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ms-slate-500);
  white-space: nowrap;
}
.ms-cx-dot:hover { background: var(--ms-slate-50); }
.ms-cx-dot.is-active {
  background: var(--ms-slate-900);
}
.ms-cx-dot.is-active .ms-cx-dot-num,
.ms-cx-dot.is-active .ms-cx-dot-cat {
  color: #fff;
}
.ms-cx-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ms-slate-500);
  background: #fff;
  border: 1px solid var(--ms-slate-200);
  border-radius: 10px;
  padding: 10px 16px;
  letter-spacing: .04em;
}
.ms-cx-counter strong {
  color: var(--ms-slate-900);
  font-weight: 700;
}

@media (max-width: 920px) {
  .ms-cx-arrows { position: static; justify-content: center; margin-top: 18px; }
  .ms-cx-num { font-size: 80px; bottom: 60px; }
}

/* Zone 3 — Variants compact */
.ms-var {
  background: var(--ms-slate-50);
  padding: 96px 0 80px;
}
.ms-var-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto 48px;
}
.ms-var-tab {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  background: white;
  border: 1px solid var(--ms-slate-200);
  border-radius: 14px;
  padding: 14px 22px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  min-width: 130px;
}
.ms-var-tab:hover {
  border-color: var(--ms-teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,118,110,.1);
}
.ms-var-tab.is-active {
  background: var(--ms-slate-900);
  border-color: var(--ms-slate-900);
  color: white;
  box-shadow: 0 10px 30px rgba(15,23,42,.2);
}
.ms-var-tab-surface { font-size: 14px; font-weight: 700; color: var(--ms-slate-900); letter-spacing: -0.01em; }
.ms-var-tab.is-active .ms-var-tab-surface { color: white; }
.ms-var-tab-mode { font-size: 11px; color: var(--ms-slate-500); font-weight: 500; }
.ms-var-tab.is-active .ms-var-tab-mode { color: rgba(255,255,255,.7); }

.ms-var-grid {
  display: grid;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  animation: msFade .4s ease;
}
.ms-var-grid--mobile  { grid-template-columns: 320px 1fr; }
.ms-var-grid--desktop { grid-template-columns: 1fr; gap: 40px; max-width: 1100px; }
@media (max-width: 900px) {
  .ms-var-grid--mobile,
  .ms-var-grid--desktop { grid-template-columns: 1fr; gap: 28px; }
}
.ms-var-cap {
  background: linear-gradient(135deg, #1F2937, #0F172A);
  border-radius: 24px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(15,23,42,.18);
}
.ms-var-cap iframe {
  width: 100%; border: none; border-radius: 16px; background: white; display: block;
}
.ms-cap--mobile iframe { aspect-ratio: 9 / 19; }
.ms-cap--desktop iframe { aspect-ratio: 16 / 10; }
.ms-var-features h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--ms-slate-900);
  letter-spacing: -0.015em;
}
.ms-var-features ul { list-style: none; padding: 0; margin: 0 0 26px; }
.ms-var-features li {
  position: relative;
  padding: 12px 0 12px 32px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ms-slate-700);
  border-bottom: 1px solid var(--ms-slate-200);
}
.ms-var-features li:last-child { border-bottom: none; }
.ms-var-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 16px;
  width: 20px; height: 20px;
  background: var(--ms-teal-50);
  border-radius: 50%;
}
.ms-var-features li::after {
  content: '';
  position: absolute;
  left: 6px; top: 22px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--ms-teal);
  border-bottom: 2px solid var(--ms-teal);
  transform: rotate(-45deg);
}
.ms-var-note {
  margin: 48px auto 0;
  text-align: center;
  font-style: italic;
  font-size: 13px;
  color: var(--ms-slate-500);
  max-width: 720px;
}
/* ============================================================
   Zone 4 — Architecture radial · light + animations
   ============================================================ */
.ms-archx {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%);
  padding: 110px 0 100px;
  position: relative;
}
.ms-archx .ms-stay-h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #022C22 0%, #047857 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ms-archx-card {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(180deg, #F8FFFC 0%, #ECFDF5 100%);
  border: 1px solid rgba(16,185,129,0.18);
  border-radius: 32px;
  padding: 40px 32px 32px;
  box-shadow:
    0 24px 60px rgba(2,44,34,.08),
    0 4px 16px rgba(2,44,34,.04),
    0 0 0 1px rgba(255,255,255,.6) inset;
  overflow: hidden;
}
.ms-archx-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(4,120,87,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4,120,87,.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events: none;
}
.ms-archx-card::after {
  content: '';
  position: absolute;
  top: -120px; left: 50%; transform: translateX(-50%);
  width: 80%; height: 240px;
  background: radial-gradient(ellipse at center, rgba(16,185,129,0.12), transparent 70%);
  pointer-events: none;
  animation: msArchHaloPulse 6s ease-in-out infinite;
}
@keyframes msArchHaloPulse {
  0%,100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50%     { opacity: 1; transform: translateX(-50%) scale(1.08); }
}
.ms-archx-card svg.ms-archx-svg {
  width: 100%; height: auto; display: block;
  position: relative;
  z-index: 1;
}
.ms-arch-rotate-slow {
  animation: msArchSpin 60s linear infinite;
  transform-origin: 600px 510px;
}
.ms-arch-rotate-rev {
  animation: msArchSpin 80s linear infinite reverse;
  transform-origin: 600px 510px;
}
@keyframes msArchSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ms-arch-line { animation: msArchDash 3s linear infinite; }
@keyframes msArchDash { to { stroke-dashoffset: -16; } }
.ms-arch-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: msArchPulseRing 3s ease-out infinite;
}
@keyframes msArchPulseRing {
  0%   { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}
.ms-arch-bubble {
  animation: msArchBubbleIn .8s ease both;
  transition: filter .35s ease;
}
@keyframes msArchBubbleIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ms-arch-bubble:hover {
  filter: drop-shadow(0 6px 18px currentColor) brightness(1.05);
}
.ms-arch-text-glow { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.ms-arch-out {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .3s ease;
}
.ms-arch-out:hover { transform: translateY(-2px); }
@media (max-width: 720px) {
  .ms-archx-card { padding: 24px 16px 20px; border-radius: 24px; }
}

/* Zone 5 — Closing card concise premium */
.ms-end {
  background: #fff;
  padding: 80px 0 110px;
}
.ms-end-card {
  position: relative;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  padding: 72px 56px;
  background: linear-gradient(135deg, #0F172A 0%, #0F766E 60%, #BE185D 130%);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(15,118,110,.25);
}
.ms-end-bg { position: absolute; inset: 0; pointer-events: none; }
.ms-end-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
.ms-end-orb--a {
  width: 340px; height: 340px;
  left: -100px; top: -120px;
  background: radial-gradient(circle, rgba(94,234,212,.55), transparent 70%);
  animation: msOrbFloat 14s ease-in-out infinite;
}
.ms-end-orb--b {
  width: 300px; height: 300px;
  right: -80px; bottom: -100px;
  background: radial-gradient(circle, rgba(249,168,212,.5), transparent 70%);
  animation: msOrbFloat 14s ease-in-out infinite reverse;
  animation-delay: -4s;
}
.ms-end-grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .5;
}
.ms-end-content {
  position: relative;
  z-index: 1;
  color: white;
}
.ms-end-eye {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(94,234,212,.3);
  color: #5EEAD4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
}
.ms-end-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #5EEAD4;
  box-shadow: 0 0 0 0 rgba(94,234,212,.6);
  animation: msPulseDot 2s ease-out infinite;
}
.ms-end-card h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: white;
  line-height: 1.08;
}
.ms-end-card p {
  font-size: 17px;
  color: rgba(255,255,255,.85);
  margin: 0 0 32px;
}
.ms-end-card .btn-primary {
  background: white;
  color: var(--ms-teal-dk);
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0,0,0,.2);
}
.ms-end-card .btn-primary:hover {
  background: var(--ms-teal-50);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.3);
}
@media (max-width: 600px) { .ms-end-card { padding: 48px 24px; } }

/* ============================================================
   MonSejour HERO V4 — éditorial photo split (clean & elegant)
   ============================================================ */
.ms-h4 {
  position: relative;
  padding: 120px 0 110px;
  background: linear-gradient(180deg, #FCFEFD 0%, #F0FDFA 50%, #FFF 100%);
  overflow: hidden;
}
.ms-h4-bg { position: absolute; inset: 0; pointer-events: none; }
.ms-h4-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .4;
}
.ms-h4-orb--a {
  width: 540px; height: 540px;
  left: -180px; top: -120px;
  background: radial-gradient(circle, rgba(15,118,110,.55), transparent 70%);
  animation: msH4Float 20s ease-in-out infinite;
}
.ms-h4-orb--b {
  width: 420px; height: 420px;
  right: -100px; bottom: -120px;
  background: radial-gradient(circle, rgba(190,24,93,.35), transparent 70%);
  animation: msH4Float 20s ease-in-out infinite reverse;
  animation-delay: -10s;
}
@keyframes msH4Float {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(20px,-20px) scale(1.06); }
}

.ms-h4-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 992px) {
  .ms-h4-grid { grid-template-columns: 1fr; gap: 48px; }
}

.ms-h4-copy { max-width: 600px; }
.ms-h4-eye {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: white;
  border: 1px solid rgba(15,118,110,.2);
  color: #0F766E;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  margin-bottom: 28px;
  box-shadow: 0 6px 20px rgba(15,118,110,.08);
}
.ms-h4-eye-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #0F766E;
  box-shadow: 0 0 0 0 rgba(15,118,110,.6);
  animation: msPulseDot 2s ease-out infinite;
}
.ms-h4-h1 {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #0F172A;
  margin: 0 0 28px;
}
.ms-h4-h1 em {
  font-style: italic;
  font-weight: 800;
  background: linear-gradient(135deg, #0F766E 0%, #BE185D 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ms-h4-lede {
  font-size: clamp(15px, 1.3vw, 17.5px);
  line-height: 1.7;
  color: #475569;
  margin: 0 0 36px;
}
.ms-h4-cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 22px;
  margin-bottom: 42px;
}
.ms-h4-link {
  font-size: 14.5px;
  font-weight: 600;
  color: #0F766E;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s;
}
.ms-h4-link:hover { gap: 10px; }
.ms-h4-link span {
  transition: transform .2s;
}
.ms-h4-link:hover span { transform: translateX(2px); }
.ms-h4-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid rgba(15,118,110,.15);
  max-width: 480px;
}
.ms-h4-stat strong {
  display: block;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #0F766E, #1E3A8A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0F766E;
  width: max-content;
}
.ms-h4-stat span {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: #64748B;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Visual side — photo card + floating cards + phone */
.ms-h4-visual {
  position: relative;
  min-height: 580px;
  display: flex; justify-content: center; align-items: center;
}
.ms-h4-photo {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(15,23,42,.18);
  transform: rotate(-2deg);
  transition: transform .4s ease;
}
.ms-h4-photo:hover { transform: rotate(0deg); }
.ms-h4-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ms-h4-photo-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.4) 100%),
    linear-gradient(135deg, rgba(15,118,110,.15), rgba(190,24,93,.1));
}

.ms-h4-card {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  background: white;
  border: 1px solid rgba(15,23,42,.06);
  padding: 14px 18px;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15,23,42,.18);
  min-width: 230px;
  z-index: 2;
  animation: msH4CardIn .8s cubic-bezier(.2,.7,.2,1) both;
}
.ms-h4-card--note {
  top: 8%; left: -32px;
  animation-delay: .3s;
}
.ms-h4-card--family {
  bottom: 16%; right: -32px;
  animation-delay: .6s;
}
@keyframes msH4CardIn {
  from { opacity: 0; transform: translateY(16px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ms-h4-card-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ms-h4-card-icon--teal { background: #F0FDFA; color: #0F766E; }
.ms-h4-card-icon--pink { background: #FCE7F3; color: #BE185D; }
.ms-h4-card strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.005em;
}
.ms-h4-card span:not(.ms-h4-card-pulse) {
  display: block;
  font-size: 11.5px;
  color: #64748B;
  margin-top: 2px;
}
.ms-h4-card-pulse {
  position: absolute;
  top: -5px; right: -5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #16A34A;
  border: 2px solid white;
  box-shadow: 0 0 0 0 rgba(22,163,74,.5);
  animation: msPulseDot 1.8s ease-out infinite;
}
.ms-h4-phone {
  position: absolute;
  bottom: -36px; right: 20%;
  width: 158px; height: 320px;
  background: #0F172A;
  border-radius: 26px;
  padding: 7px;
  box-shadow: 0 26px 60px rgba(15,23,42,.4);
  z-index: 3;
  transform: rotate(6deg);
  transition: transform .4s ease;
}
.ms-h4-photo:hover ~ .ms-h4-phone,
.ms-h4-phone:hover { transform: rotate(2deg) scale(1.04); }
.ms-h4-phone::before {
  content: '';
  position: absolute;
  top: 7px; left: 50%; transform: translateX(-50%);
  width: 50px; height: 12px;
  background: #0F172A;
  border-radius: 8px;
  z-index: 2;
}
.ms-h4-phone iframe {
  width: 100%; height: 100%;
  border: none;
  border-radius: 20px;
  background: white;
  display: block;
}

@media (max-width: 600px) {
  .ms-h4 { padding: 80px 0 90px; }
  .ms-h4-card { min-width: 200px; padding: 10px 14px; }
  .ms-h4-card--note { left: 0; }
  .ms-h4-card--family { right: 0; }
  .ms-h4-phone { display: none; }
  .ms-h4-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* ============================================================
   MS realistic device frames — phone & TV with bezels
   ============================================================ */

/* ── Phone (iPhone-style with Dynamic Island) ── */
/* Mobile-only fallback link for desktop/TV mockups (hidden on desktop). */
.ms-device-mobile-link {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  background: linear-gradient(135deg, #0F766E 0%, #134E4A 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 16px;
  box-shadow: 0 14px 32px -10px rgba(15,118,110,.45);
  transition: transform .2s ease, box-shadow .2s ease;
  width: 100%;
  margin: 0 auto;
}
.ms-device-mobile-link:hover,
.ms-device-mobile-link:active {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -10px rgba(15,118,110,.55);
}
.ms-device-mobile-link-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.16);
  display: inline-flex; align-items: center; justify-content: center;
}
.ms-device-mobile-link-icon svg { width: 22px; height: 22px; }
.ms-device-mobile-link-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ms-device-mobile-link-body strong {
  font-size: 14px; font-weight: 700; line-height: 1.2;
}
.ms-device-mobile-link-body em {
  font-style: normal;
  font-size: 12px; opacity: .85; line-height: 1.3;
}
.ms-device-mobile-link-arrow {
  flex: 0 0 auto;
  font-size: 22px; font-weight: 700;
  opacity: .9;
}

.ms-device--phone {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 19.5;
  background: #080808;
  /* Arrondis plus prononcés et réalistes (squircle style) */
  border-radius: 54px;
  padding: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1) inset,
    0 0 0 4px #121212 inset,
    0 30px 80px rgba(0,0,0,0.6),
    0 12px 24px rgba(0,0,0,0.4);
  margin: 0 auto 48px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/* Home Indicator Bar */
.ms-device--phone::after {
  content: '';
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 10px;
  z-index: 10;
  pointer-events: none;
}
.ms-device--phone-sm { max-width: 180px; border-radius: 34px; padding: 7px; }
.ms-device--phone .ms-device-screen {
  position: relative;
  width: 100%; height: 100%;
  /* Rayon interne proportionnel au rayon externe */
  border-radius: 44px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  clip-path: inset(0 round 44px);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
}
.ms-device--phone-sm .ms-device-screen { border-radius: 22px; }
.ms-device--phone .ms-device-screen iframe {
  width: 100%; height: 100%;
  border: none;
  display: block;
  background: #fff;
  /* Inherit the rounded corners from the screen so the iframe content
     itself is clipped, not just the outer wrapper. */
  border-radius: inherit;
  overflow: hidden;
}
.ms-device-island {
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 30px;
  background: #000;
  border-radius: 999px;
  z-index: 3;
  box-shadow: 0 1px 3px rgba(0,0,0,.6) inset;
}
.ms-device--phone-sm .ms-device-island {
  top: 14px; width: 64px; height: 18px;
}
.ms-device-island::before,
.ms-device-island::after {
  content: '';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  border-radius: 50%;
  background: #1a1a1c;
}
.ms-device-island::before {
  right: 12px;
  width: 10px; height: 10px;
  box-shadow: 0 0 0 1px rgba(94,234,212,.15);
}
.ms-device-island::after {
  right: 26px;
  width: 6px; height: 6px;
  background: rgba(94,234,212,.4);
}
.ms-device--phone-sm .ms-device-island::before { right: 8px; width: 6px; height: 6px; }
.ms-device--phone-sm .ms-device-island::after { right: 18px; width: 4px; height: 4px; }
.ms-device-btn {
  position: absolute;
  background: linear-gradient(90deg, #0B1120 0%, #1F2937 100%);
  border-radius: 1.5px;
}
.ms-device-btn--power {
  right: -2px; top: 28%;
  width: 3px; height: 80px;
}
.ms-device-btn--vol-up {
  left: -2px; top: 22%;
  width: 3px; height: 50px;
}
.ms-device-btn--vol-dn {
  left: -2px; top: calc(22% + 60px);
  width: 3px; height: 50px;
}
.ms-device--phone-sm .ms-device-btn--power { height: 44px; }
.ms-device--phone-sm .ms-device-btn--vol-up { height: 26px; }
.ms-device--phone-sm .ms-device-btn--vol-dn { height: 26px; top: calc(22% + 32px); }

.ms-device-glare {
  position: absolute;
  top: 0; left: 0;
  width: 50%; height: 60%;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
  border-radius: 32px 0 0 0;
  z-index: 2;
}
.ms-device--phone-sm .ms-device-glare { border-radius: 22px 0 0 0; }
.ms-device-glare--tv { border-radius: 4px 0 0 0; width: 35%; height: 50%; }

/* ── TV (4K wall-style with bezel + stand) ── */
.ms-device--tv {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.ms-device-tv-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #1F2937 0%, #050810 100%);
  padding: 12px 12px 32px;
  border-radius: 14px;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.06) inset,
    0 4px 0 #000 inset,
    0 26px 60px rgba(15,23,42,.4),
    0 6px 14px rgba(15,23,42,.2);
}
.ms-device-tv-screen {
  position: relative;
  width: 100%;
  height: calc(100% - 20px);
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(94,234,212,.08) inset, 0 0 30px rgba(94,234,212,.06);
}
.ms-device-tv-screen iframe {
  width: 100%; height: 100%;
  border: none;
  display: block;
  background: #fff;
}
.ms-device-tv-brand {
  position: absolute;
  bottom: 8px; left: 50%; transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  font-family: 'Inter', sans-serif;
}
.ms-device-tv-led {
  position: absolute;
  bottom: 14px; right: 18px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 6px rgba(22,163,74,.8);
  animation: msTvLed 3s ease-in-out infinite;
}
@keyframes msTvLed {
  0%,100% { opacity: .9; }
  50%     { opacity: .4; }
}
.ms-device-tv-stand {
  display: flex; flex-direction: column; align-items: center;
  margin-top: -1px;
}
.ms-device-tv-stand-neck {
  width: 80px; height: 26px;
  background: linear-gradient(180deg, #1F2937 0%, #0F172A 100%);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 6px 8px rgba(15,23,42,.3);
}
.ms-device-tv-stand-base {
  width: 200px; height: 8px;
  background: linear-gradient(180deg, #374151 0%, #1F2937 100%);
  border-radius: 8px;
  box-shadow:
    0 4px 14px rgba(15,23,42,.3),
    0 0 0 1px rgba(255,255,255,.04) inset;
}

/* Update var-cap to drop the old chrome since we use full device now */
.ms-var-cap { padding: 0 !important; background: transparent !important; box-shadow: none !important; }
.ms-var-cap iframe { border-radius: 0 !important; }
.ms-cap--desktop iframe { aspect-ratio: auto; }
.ms-cap--mobile iframe { aspect-ratio: auto; }

@media (max-width: 700px) {
  .ms-device--tv { max-width: 100%; }
  .ms-device-tv-stand-base { width: 140px; }
  .ms-device-tv-stand-neck { width: 60px; height: 20px; }
  .ms-device--phone { max-width: 280px; }
}

/* Hero phone reposition with new device */
.ms-h4-phone-wrap {
  position: absolute;
  bottom: -36px; right: 12%;
  z-index: 3;
  transform: rotate(6deg);
  transition: transform .4s ease;
}
.ms-h4-phone-wrap:hover { transform: rotate(2deg) scale(1.04); }
.ms-h4-photo:hover ~ .ms-h4-phone-wrap { transform: rotate(2deg) scale(1.04); }
@media (max-width: 600px) {
  .ms-h4-phone-wrap { display: none; }
}

/* AmbuLive · 5-tab variant override */
.ms-var-tabs--five {
  max-width: 940px;
}
.ms-var-tabs--five .ms-var-tab {
  min-width: 120px;
  padding: 12px 16px;
}
.ms-var-tabs--five .ms-var-tab-surface {
  font-size: 13px;
}
@media (max-width: 720px) {
  .ms-var-tabs--five .ms-var-tab { min-width: 100px; padding: 10px 12px; }
}

/* ============================================================
   AmbuLive · Orchestrateur layout (5L + 4R modules + sphere + 4 outputs)
   ============================================================ */
.ms-orch {
  position: relative;
  background: linear-gradient(180deg, #FAFCFE 0%, #F4F8F8 100%);
  padding: 110px 0;
  overflow: hidden;
}
.ms-orch-bg { position: absolute; inset: 0; pointer-events: none; }
.ms-orch-orb {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  filter: blur(4px);
  opacity: .7;
  animation: msOrchFloat 12s ease-in-out infinite;
}
.ms-orch-orb--cyan   { background: #67E8F9; left: 28%; top: 12%; animation-delay: -2s; }
.ms-orch-orb--violet { background: #C4B5FD; right: 32%; top: 20%; animation-delay: -5s; width: 12px; height: 12px; }
.ms-orch-orb--mint   { background: #6EE7B7; left: 18%; bottom: 30%; animation-delay: -8s; width: 10px; height: 10px; }
.ms-orch-orb--rose   { background: #FDA4AF; right: 20%; bottom: 20%; animation-delay: -3s; width: 14px; height: 14px; }
.ms-orch-orb--amber  { background: #FCD34D; left: 50%; top: 30%; animation-delay: -6s; width: 10px; height: 10px; }
@keyframes msOrchFloat {
  0%,100% { transform: translateY(0) scale(1); opacity: .8; }
  50%     { transform: translateY(-30px) scale(1.3); opacity: .4; }
}
.ms-orch-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(15,118,110,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.ms-orch-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
  position: relative; z-index: 1;
}
.ms-orch-h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #0F172A;
  margin: 0 0 16px;
}
.ms-orch-h2 em {
  font-style: italic;
  background: linear-gradient(135deg, #0F766E, #0EA5E9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ms-orch-lede {
  font-size: 15px;
  line-height: 1.65;
  color: #475569;
  margin: 0 auto;
  max-width: 760px;
}

.ms-orch-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 28px;
  align-items: center;
  margin: 0 auto 36px;
  z-index: 1;
}
@media (max-width: 1024px) { .ms-orch-stage { grid-template-columns: 1fr; gap: 24px; } }

.ms-orch-lines {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.ms-orch-line { animation: msOrchDash 3s linear infinite; }
@keyframes msOrchDash { to { stroke-dashoffset: -16; } }

.ms-orch-side {
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative; z-index: 2;
}

.ms-orch-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(15,23,42,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ms-orch-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(15,23,42,.1);
}
.ms-orch-card--l { padding-right: 24px; }
.ms-orch-card--r { padding-left: 24px; }

.ms-orch-card-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--c-soft);
  color: var(--c);
  box-shadow: 0 6px 16px var(--c-shadow);
  position: relative;
}
.ms-orch-card-icon::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--c);
  opacity: .15;
}
.ms-orch-card-icon svg { width: 20px; height: 20px; }

.ms-orch-card-bar {
  position: absolute;
  top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--c), transparent);
  border-radius: 999px;
}
.ms-orch-card--l .ms-orch-card-bar { right: 8px; }
.ms-orch-card--r .ms-orch-card-bar { left: 8px; }

.ms-orch-card-body h4 {
  margin: 0 0 3px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0F172A;
}
.ms-orch-card-eye {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--c);
  margin-bottom: 6px;
}
.ms-orch-card-body p {
  margin: 0 0 6px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #475569;
}
.ms-orch-card-note {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #0F766E;
  border-top: 1px dashed rgba(15,118,110,.25);
  padding-top: 6px;
}

.ms-orch-card--blue    { --c: #2563EB; --c-soft: #EFF6FF; --c-shadow: rgba(37,99,235,.18); }
.ms-orch-card--mint    { --c: #10B981; --c-soft: #ECFDF5; --c-shadow: rgba(16,185,129,.18); }
.ms-orch-card--emerald { --c: #059669; --c-soft: #D1FAE5; --c-shadow: rgba(5,150,105,.18); }
.ms-orch-card--orange  { --c: #EA580C; --c-soft: #FFEDD5; --c-shadow: rgba(234,88,12,.18); }
.ms-orch-card--cyan    { --c: #0891B2; --c-soft: #ECFEFF; --c-shadow: rgba(8,145,178,.18); }
.ms-orch-card--gold    { --c: #CA8A04; --c-soft: #FEF9C3; --c-shadow: rgba(202,138,4,.18); }
.ms-orch-card--violet  { --c: #7C3AED; --c-soft: #F3E8FF; --c-shadow: rgba(124,58,237,.18); }
.ms-orch-card--sky     { --c: #0EA5E9; --c-soft: #E0F2FE; --c-shadow: rgba(14,165,233,.18); }
.ms-orch-card--rose    { --c: #DB2777; --c-soft: #FCE7F3; --c-shadow: rgba(219,39,119,.18); }

.ms-orch-center { display: flex; justify-content: center; align-items: center; position: relative; }
.ms-orch-sphere {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #0F766E 0%, #134E4A 55%, #022C22 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px;
  text-align: center;
  color: white;
  box-shadow:
    0 30px 80px rgba(2,44,34,.4),
    0 0 0 1px rgba(94,234,212,.2) inset,
    0 0 80px rgba(94,234,212,.15);
}
.ms-orch-sphere::before {
  content: '';
  position: absolute; inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94,234,212,.18), transparent 70%);
  z-index: -1;
  animation: msOrchHaloPulse 4s ease-in-out infinite;
}
.ms-orch-sphere::after {
  content: '';
  position: absolute; inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(94,234,212,.25);
  animation: msOrchSpin 80s linear infinite;
}
@keyframes msOrchHaloPulse {
  0%,100% { opacity: .8; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.06); }
}
@keyframes msOrchSpin { to { transform: rotate(360deg); } }

.ms-orch-sphere.ms-orch-sphere--phone {
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  color: #0F172A;
  aspect-ratio: auto;
  max-width: 672px;
  padding: 12px;
}
.ms-orch-sphere.ms-orch-sphere--phone::before,
.ms-orch-sphere.ms-orch-sphere--phone::after { content: none !important; display: none; }
.ms-orch-sphere.ms-orch-sphere--phone .ms-orch-brain { position: relative; opacity: 1; }
.ms-orch-sphere.ms-orch-sphere--phone .ms-orch-sphere-eye { color: #0F766E; }
.ms-orch-sphere.ms-orch-sphere--phone .ms-orch-sphere-sub { color: rgba(15,23,42,.65); }
.ms-orch-sphere.ms-orch-sphere--phone h3 { color: #0F172A; }
.ms-orch-sphere-eye {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(94,234,212,.9);
  margin-bottom: 8px;
}
.ms-orch-sphere h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.015em;
}
.ms-orch-sphere-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-style: italic;
  color: rgba(255,255,255,.7);
  margin-bottom: 18px;
}
.ms-orch-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: 100%;
  background: rgba(255,255,255,.04);
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(94,234,212,.12);
}
.ms-orch-quad > div {
  padding: 7px 9px;
  background: rgba(0,0,0,.18);
  border-radius: 7px;
  text-align: left;
}
.ms-orch-quad strong {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #5EEAD4;
  margin-bottom: 3px;
}
.ms-orch-quad span {
  display: block;
  font-size: 8.5px;
  line-height: 1.4;
  color: rgba(255,255,255,.7);
}

.ms-orch-mid {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  margin: 8px auto 16px;
  position: relative; z-index: 1;
}
.ms-orch-arrow { font-size: 22px; color: #0F766E; opacity: .5; }
.ms-orch-mid-text {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: #475569;
}
.ms-orch-mid-h {
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 600;
  margin: 6px 0 16px;
  color: #475569;
  letter-spacing: 0;
  position: relative;
  z-index: 2;
}
.ms-orch-mid-h em {
  font-style: italic;
  background: linear-gradient(135deg, #0F766E, #0EA5E9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ms-orch-out-link {
  display: block;
  width: 100%;
  max-width: 1080px;
  height: 260px;
  margin: -200px auto -10px;
  pointer-events: none;
  position: relative;
  z-index: 0;
}
.ms-orch-out {
  display: grid;
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
  position: relative; z-index: 1;
}
.ms-orch-out--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ms-orch-out--four { grid-template-columns: repeat(2, 1fr); } }
/* Mobile : on garde 2 colonnes (max 2 lignes pour 4 cartes). */

.ms-orch-out-card {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ms-orch-out-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(15,23,42,.14);
}
.ms-orch-out-card header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.ms-orch-out-card--blue header   { background: linear-gradient(135deg, #1E40AF, #3B82F6); }
.ms-orch-out-card--teal header   { background: linear-gradient(135deg, #134E4A, #0F766E); }
.ms-orch-out-card--violet header { background: linear-gradient(135deg, #5B21B6, #7C3AED); }
.ms-orch-out-card--cyan header   { background: linear-gradient(135deg, #155E75, #0891B2); }
.ms-orch-out-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ms-orch-out-icon svg { width: 18px; height: 18px; color: white; }
.ms-orch-out-card h4 { margin: 0; font-size: 13px; font-weight: 700; color: #fff; }
.ms-orch-out-body {
  padding: 22px 20px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ms-orch-out-illu {
  width: 60px; height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.ms-orch-out-card--blue .ms-orch-out-illu   { color: #2563EB; }
.ms-orch-out-card--teal .ms-orch-out-illu   { color: #0F766E; }
.ms-orch-out-card--violet .ms-orch-out-illu { color: #7C3AED; }
.ms-orch-out-card--cyan .ms-orch-out-illu   { color: #0891B2; }
.ms-orch-out-illu svg { width: 100%; height: 100%; }
.ms-orch-out-body strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.005em;
}
.ms-orch-out-body span {
  font-size: 11.5px;
  color: #64748B;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .ms-orch-lines { display: none; }
  .ms-orch-sphere { max-width: 320px; }
}

/* AmbuLive · brain illustration inside orchestrator sphere */
.ms-orch-sphere { position: relative; }
.ms-orch-brain {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .85;
  z-index: 0;
}
.ms-orch-sphere-eye,
.ms-orch-sphere h3,
.ms-orch-sphere-sub,
.ms-orch-quad { position: relative; z-index: 1; }

.ms-brain-hemi {
  animation: msBrainBreathe 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.ms-brain-hemi--r { animation-delay: -2s; }
@keyframes msBrainBreathe {
  0%,100% { opacity: 0.4; }
  50%     { opacity: 0.7; }
}
.ms-brain-syn {
  animation: msBrainPulse 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 4px #5EEAD4);
}
@keyframes msBrainPulse {
  0%,100% { r: 1.5; opacity: 0.5; }
  50%     { r: 3; opacity: 1; }
}
.ms-brain-link {
  stroke-dasharray: 30;
  animation: msBrainFire 3s linear infinite;
}
@keyframes msBrainFire {
  0%   { stroke-dashoffset: 30; opacity: 0.2; }
  50%  { opacity: 0.8; }
  100% { stroke-dashoffset: -30; opacity: 0.2; }
}

/* BioMed · 2-output orchestrator variant */
.ms-orch-out--two { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
/* Reste en 2 colonnes même sur mobile (deux points de contact côte à côte). */

/* MaVisite · 3-output orchestrator variant */
.ms-orch-out--three { grid-template-columns: repeat(3, 1fr); max-width: 980px; }
@media (max-width: 900px) { .ms-orch-out--three { grid-template-columns: repeat(3, 1fr); max-width: 100%; gap: 10px; } }

/* Orchestrator sphere · simplified centered text + new background */
.ms-orch-quad { display: none !important; }
.ms-orch-sphere {
  background:
    radial-gradient(circle at 30% 22%, #14B8A6 0%, #0D9488 28%, #134E4A 58%, #022C22 92%) !important;
  justify-content: center !important;
}
.ms-orch-sphere::before {
  background: radial-gradient(circle, rgba(20,184,166,.28), transparent 70%) !important;
}
.ms-orch-sphere-eye {
  margin-bottom: 14px !important;
  font-size: 11px !important;
  color: rgba(94,234,212,1) !important;
}
.ms-orch-sphere h3 {
  font-size: clamp(28px, 3.2vw, 38px) !important;
  margin-bottom: 8px !important;
}
.ms-orch-sphere-sub {
  font-size: 14px !important;
  margin-bottom: 0 !important;
  color: rgba(255,255,255,.78) !important;
}

/* Arrows from sphere down to output cards */
.ms-orch-out { position: relative; padding-top: 56px; }
.ms-orch-out-card { position: relative; overflow: visible; }
.ms-orch-out-card::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  width: 2px;
  height: 44px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(180deg, #0F766E 0 4px, transparent 4px 8px);
  background-size: 2px 16px;
  animation: msOutFlow 1.2s linear infinite;
  border-radius: 2px;
}
@keyframes msOutFlow {
  0%   { background-position: 0 0; }
  100% { background-position: 0 16px; }
}
.ms-orch-out-card::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #0F766E;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 4px rgba(15,118,110,.4));
}
/* Dot at top of arrow */
.ms-orch-out-card .ms-orch-out-icon::before {
  content: '';
  position: absolute;
  top: -56px;
  left: 50%;
  width: 8px; height: 8px;
  background: #0F766E;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(15,118,110,0.18);
  animation: msArrowDot 2s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes msArrowDot {
  0%,100% { box-shadow: 0 0 0 4px rgba(15,118,110,.18); }
  50%     { box-shadow: 0 0 0 8px rgba(15,118,110,0); }
}
@media (max-width: 720px) {
  .ms-orch-out-card::before, .ms-orch-out-card::after, .ms-orch-out-card .ms-orch-out-icon::before { display: none; }
  .ms-orch-out { padding-top: 0; }
}

/* Keep header rounded after overflow change */
.ms-orch-out-card header { border-radius: 18px 18px 0 0; }

/* ============================================================
   Hero V5 — premium polish (MaVisite, MonPoste, MaClinique, BioMed, MonSejour, AmbuLive)
   ============================================================ */
.ms-h4 {
  padding: 110px 0 100px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(94,234,212,.18) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(190,24,93,.12) 0%, transparent 50%),
    linear-gradient(180deg, #fff 0%, #F0FDFA 50%, #FFF 100%) !important;
}
.ms-h4-bg {
  position: absolute; inset: 0; pointer-events: none;
}
.ms-h4-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(15,118,110,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
}
.ms-h4-orb {
  filter: blur(80px) !important;
  opacity: .55 !important;
}

.ms-h4-eye {
  background: linear-gradient(135deg, #fff, #ECFDF5) !important;
  border: 1px solid rgba(15,118,110,.25) !important;
  box-shadow: 0 8px 24px rgba(15,118,110,.12), inset 0 1px 0 rgba(255,255,255,.8) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ms-h4-eye:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15,118,110,.2), inset 0 1px 0 rgba(255,255,255,.8);
}

/* Cleaner H1 — fix italic underline issue and refine gradient */
.ms-h4-h1 em {
  font-style: italic;
  font-weight: 800;
  position: relative;
  background: linear-gradient(135deg, #0F766E 0%, #BE185D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
  padding: 0 4px;
}
.ms-h4-h1 em::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px; bottom: -2px;
  height: 3px;
  background: linear-gradient(90deg, rgba(15,118,110,.25), rgba(190,24,93,.25));
  border-radius: 999px;
  opacity: .5;
}

/* Photo — premium treatment */
.ms-h4-photo {
  border-radius: 32px !important;
  box-shadow:
    0 30px 80px rgba(15,23,42,.18),
    0 0 0 1px rgba(15,118,110,.08) inset !important;
  animation: msH4PhotoIn 1100ms cubic-bezier(.2,.7,.2,1) both, msH4PhotoFloat 6s ease-in-out 1.1s infinite;
}
.ms-h4-photo::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 32px;
  background: linear-gradient(135deg, transparent 60%, rgba(15,118,110,.08) 100%);
  pointer-events: none;
  z-index: 1;
}
.ms-h4-photo:hover {
  transform: rotate(0deg) scale(1.02) translateY(-4px);
  animation-play-state: paused;
}

/* Entrée : fade + slide up + slight rotate */
@keyframes msH4PhotoIn {
  0% {
    opacity: 0;
    transform: rotate(-8deg) translateY(48px) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: rotate(-1deg) translateY(-4px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: rotate(-2deg) translateY(0) scale(1);
  }
}

/* Float continu subtil */
@keyframes msH4PhotoFloat {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(-2.4deg) translateY(-8px); }
}

/* ─── Scroll-driven animations (animation-timeline: view) ─── */
/* Fallback: pas de view-timeline = pas d'animation, OK */
@supports (animation-timeline: view()) {
  /* Carrousel use cases : fade-up + scale */
  .ms-cx-head {
    animation: msScrollFadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
  .ms-cx-stage {
    animation: msScrollFadeUpScale linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 60%;
  }
  /* Variantes */
  .ms-stay-head, .ms-var-tabs, .ms-var-pane {
    animation: msScrollFadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
  /* Orchestrateur */
  .ms-orch-head { animation: msScrollFadeUp linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  .ms-orch-side--l .ms-orch-card {
    animation: msScrollSlideR linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 65%;
  }
  .ms-orch-side--r .ms-orch-card {
    animation: msScrollSlideL linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 65%;
  }
  .ms-orch-center {
    animation: msScrollPop linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 60%;
  }
  /* Closing CTA */
  .ms-end-card {
    animation: msScrollFadeUpScale linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
}

@keyframes msScrollFadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes msScrollFadeUpScale {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes msScrollSlideR {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes msScrollSlideL {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes msScrollPop {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* Cards flottantes : entrée décalée + float lent */
.ms-h4-card--note {
  animation: msH4CardIn 900ms cubic-bezier(.2,.7,.2,1) 400ms both, msH4CardFloatA 5s ease-in-out 1.3s infinite;
}
.ms-h4-card--family {
  animation: msH4CardIn 900ms cubic-bezier(.2,.7,.2,1) 600ms both, msH4CardFloatB 5.5s ease-in-out 1.5s infinite;
}
@keyframes msH4CardIn {
  0%   { opacity: 0; transform: translateY(24px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes msH4CardFloatA {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes msH4CardFloatB {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* Floating cards — premium polish */
.ms-h4-card {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.8) !important;
  box-shadow:
    0 24px 50px rgba(15,23,42,.18),
    0 4px 12px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  border-radius: 20px !important;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.ms-h4-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 30px 60px rgba(15,23,42,.22), 0 6px 16px rgba(15,23,42,.08);
}
.ms-h4-card-icon {
  border-radius: 14px !important;
  box-shadow: 0 4px 12px var(--card-icon-shadow, rgba(15,118,110,.18));
}
.ms-h4-card-icon--teal { background: linear-gradient(135deg, #ECFDF5, #D1FAE5) !important; --card-icon-shadow: rgba(15,118,110,.22); }
.ms-h4-card-icon--pink { background: linear-gradient(135deg, #FCE7F3, #FBCFE8) !important; --card-icon-shadow: rgba(190,24,93,.22); }

/* Stats — refined with hover */
.ms-h4-stats {
  border-top: 1px solid rgba(15,118,110,.18) !important;
  position: relative;
}
.ms-h4-stats::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 60px; height: 1px;
  background: linear-gradient(90deg, #0F766E, #BE185D);
}
.ms-h4-stat {
  position: relative;
  transition: transform .2s ease;
}
.ms-h4-stat:hover { transform: translateY(-2px); }
.ms-h4-stat strong {
  background: linear-gradient(135deg, #0F766E 0%, #1E3A8A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0F766E;
  width: max-content;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ms-h4-stat strong {
    background: none !important;
    -webkit-text-fill-color: #0F766E !important;
    color: #0F766E !important;
  }
}

/* CTA primary — premium gradient */
.ms-h4 .btn-primary {
  background: linear-gradient(135deg, #0F172A 0%, #0F766E 100%) !important;
  box-shadow: 0 12px 30px rgba(15,118,110,.25), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .2s ease, box-shadow .25s ease;
}
.ms-h4 .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15,118,110,.35);
}

/* Available badge in card */
.ms-h4-card-pulse {
  width: 12px !important; height: 12px !important;
  background: #16A34A !important;
  box-shadow: 0 0 0 0 rgba(22,163,74,.6), 0 0 0 2px white !important;
  animation: msH4Pulse 1.6s ease-out infinite !important;
}
@keyframes msH4Pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.6), 0 0 0 2px white; }
  70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0), 0 0 0 2px white; }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0), 0 0 0 2px white; }
}

/* ============================================================
   Cinema photo · richer presentation overlay (all 6 persona pages)
   ============================================================ */
/* Cadre sombre + décorations supprimés */
.ms-cx-photo { background: transparent !important; }
.ms-cx-photo::before { display: none !important; }
.ms-cx-photo { box-shadow: none !important; }
/* Per-scene gradients removed — keep only the mockup */
.ms-cx-photo--matin,
.ms-cx-photo--urgence,
.ms-cx-photo--garde,
.ms-cx-photo--cockpit,
.ms-cx-photo--tour,
.ms-cx-photo--prise,
.ms-cx-photo--relais,
.ms-cx-photo--chevet,
.ms-cx-photo--tournee,
.ms-cx-photo--releve,
.ms-cx-photo--nuit,
.ms-cx-photo--cockpit-ide,
.ms-cx-photo--matin,
.ms-cx-photo--urgence,
.ms-cx-photo--garde,
.ms-cx-photo--cockpit,
.ms-cx-photo--tour,
.ms-cx-photo--prise,
.ms-cx-photo--naissance,
.ms-cx-photo--accueil,
.ms-cx-photo--bloc-famille,
.ms-cx-photo--geriatrie,
.ms-cx-photo--veille-nuit,
.ms-cx-photo--conformite { background: transparent !important; }

/* The big number — hidden (caused unwanted teal block on light mockups) */
.ms-cx-num { display: none !important; }

/* Caption hidden — keep only the mockup */
.ms-cx-photo-caption { display: none !important; }
.ms-cx-photo-caption strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: white !important;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 8px;
}
.ms-cx-photo-caption strong::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5EEAD4;
  box-shadow: 0 0 8px #5EEAD4;
  animation: msCxCapDot 2s ease-out infinite;
}
@keyframes msCxCapDot {
  0%,100% { opacity: .6; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.3); }
}

/* SVG tweak to enlarge / center inside photo */
.ms-cx-photo svg.ms-illu {
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.35));
}

/* Top-right tech badge */
.ms-cx-photo .ms-cx-text-tag {
  position: absolute;
  top: 18px; right: 18px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(94,234,212,.25);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #5EEAD4;
  text-transform: uppercase;
  z-index: 2;
}

/* ─────────────────────────────────────────────
   PASSE RESPONSIVE PERSONA · TELEPHONE
   ───────────────────────────────────────────── */

/* Tablette (≤ 992px) : grilles en 1 colonne */
@media (max-width: 992px) {
  .ms-h4-visual { min-height: auto; padding: 8px 0 16px; }
  .ms-h4-photo {
    max-width: 380px;
    transform: rotate(0deg) !important;
    animation: msH4PhotoIn 1100ms cubic-bezier(.2,.7,.2,1) both !important;
  }
  .ms-h4-photo:hover { transform: rotate(0deg) scale(1.01) !important; }
  /* Cards flottantes : repositionnement plus collé */
  .ms-h4-card { min-width: 180px !important; padding: 10px 14px !important; }
  .ms-h4-card--note { left: 4px !important; top: -8px !important; }
  .ms-h4-card--family { right: 4px !important; bottom: 8px !important; }

  /* Override de l'animation float qui intègre rotate -2deg */
  .ms-h4-photo { animation-name: msH4PhotoIn !important; animation-iteration-count: 1 !important; }
}

/* Phone (≤ 640px) */
@media (max-width: 640px) {
  /* Hero compact */
  .ms-h4 { padding-top: 24px !important; padding-bottom: 32px !important; }
  .ms-h4-h1 { font-size: clamp(28px, 7vw, 36px) !important; line-height: 1.15 !important; }
  .ms-h4-lede { font-size: 14px !important; }
  .ms-h4-grid { gap: 32px !important; }
  .ms-h4-photo { max-width: 320px; border-radius: 22px !important; }
  .ms-h4-stats { grid-template-columns: 1fr 1fr 1fr !important; gap: 8px !important; }
  .ms-h4-stat { padding: 10px 8px !important; }
  .ms-h4-stat strong { font-size: 18px !important; }
  .ms-h4-stat span { font-size: 10px !important; }
  /* Cards flottantes : encore plus serrées */
  .ms-h4-card { min-width: 150px !important; padding: 8px 10px !important; }
  .ms-h4-card strong { font-size: 12px !important; }
  .ms-h4-card span:not(.ms-h4-card-pulse) { font-size: 10px !important; }
  .ms-h4-card-icon { width: 28px !important; height: 28px !important; }

  /* CTA hero : empile primaire + lien */
  .ms-h4-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .ms-h4-cta .btn-large { width: 100%; justify-content: center; }

  /* Carrousel use cases */
  .ms-cx { padding: 40px 0 !important; }
  .ms-cx-h2 { font-size: clamp(22px, 6vw, 28px) !important; }
  .ms-cx-grid { gap: 20px !important; }
  .ms-cx-text { padding: 0 !important; }
  .ms-cx-title { font-size: 20px !important; }
  .ms-cx-body { font-size: 13px !important; }
  .ms-cx-photo { border-radius: 16px !important; }
  .ms-cx-arrow { width: 40px !important; height: 40px !important; }
  /* ──────────────────────────────────────────────────────────────
     Step pills (01-06) — single-row segmented control on mobile.
     Replaces the wrapped 3×2 grid with a modern, compact horizontal
     bar that distributes the 6 steps equally across the available
     width. Active step gets a dark fill, inactive steps are subtle.
     ────────────────────────────────────────────────────────────── */
  .ms-cx-dots {
    gap: 4px !important;
    flex-wrap: nowrap !important;
    width: 100%;
    padding: 4px !important;
    border-radius: 12px !important;
  }
  .ms-cx-dot {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 0 !important;
    border-radius: 9px !important;
  }
  .ms-cx-dot-num {
    font-size: 12px !important;
    letter-spacing: .02em !important;
  }
  .ms-cx-dot-cat { display: none !important; }
  .ms-cx-dot.is-active {
    box-shadow: 0 4px 10px -2px rgba(15,23,42,.35);
  }
  .ms-cx-counter { display: none !important; }
  .ms-cx-callout { font-size: 12px !important; padding: 10px 12px !important; }
  .ms-cx-metric-line { font-size: 14px !important; }

  /* Variantes en onglets */
  .ms-var { padding: 40px 0 !important; }
  /* Variantes (4 onglets max) : sur mobile on tient toutes les
     variantes sur une SEULE ligne, en répartissant équitablement la
     largeur. Plus de scroll horizontal. */
  .ms-var-tabs {
    overflow-x: visible;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
  }
  .ms-var-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 4px !important;
    border-radius: 10px !important;
    gap: 2px !important;
  }
  .ms-var-tab-surface { font-size: 12px !important; line-height: 1.15 !important; }
  .ms-var-tab-mode { font-size: 9px !important; line-height: 1.15 !important; }
  .ms-var-grid { gap: 24px !important; }
  .ms-var-features h3 { font-size: 18px !important; }
  .ms-var-features ul li { font-size: 13px !important; }
  /* Iframes des mockups variantes : hauteur réduite */
  .ms-device--phone .ms-device-screen { aspect-ratio: 9 / 19; }

  /* Desktop/TV mockup on mobile :
     on supprime totalement le device pesant (iframe + chrome) et on
     affiche un lien clickable à la place qui ouvre le prototype dans
     un nouvel onglet. */
  .ms-device--tv { display: none !important; }
  .ms-device-mobile-link { display: flex !important; }

  /* ──────────────────────────────────────────────────────────────
     Pages "mobile-flat" (AirSense, Énergie+, WasteTrack et toute
     autre page utilisant `.ms-page--mobile-flat`) :
     Ces pages utilisent des grilles à 2-3 colonnes définies en
     style inline (`gridTemplateColumns: '1fr 1fr'`, etc.) pour des
     comparaisons "Avant/Après" et des galeries de cartes. Sur mobile
     on les force toutes à 1 colonne pour éviter la compression
     illisible du contenu. !important nécessaire pour battre l'inline.
     ────────────────────────────────────────────────────────────── */
  .ms-page--mobile-flat [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .ms-page--mobile-flat [style*="display: flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }
  /* Réduire les marges/inline-paddings agressifs sur mobile pour ces
     pages, et éviter qu'elles débordent horizontalement. */
  .ms-page--mobile-flat .container { overflow-x: hidden; }
  .ms-page--mobile-flat [style*="margin-left: -10%"],
  .ms-page--mobile-flat [style*="margin-left:-10%"] {
    margin-left: 0 !important;
  }
  .ms-page--mobile-flat [style*="width: 120%"],
  .ms-page--mobile-flat [style*="width:120%"] {
    width: 100% !important;
  }
  /* Tableaux/lignes inline-styled */
  .ms-page--mobile-flat [style*="white-space: nowrap"] {
    white-space: normal !important;
  }

  /* ────────────────────────────────────────────────────────────
     Hero (1ère slide) AirSense / Énergie+ / WasteTrack — mobile :
     compact, équilibré, photo plus petite (4/3 paysage), texte
     centré et flat. La photo est placée en premier pour donner du
     contexte avant le texte. */
  .ms-page--mobile-flat .ms-h4 {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }
  .ms-page--mobile-flat .ms-h4-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .ms-page--mobile-flat .ms-h4-copy {
    max-width: 100%;
    text-align: center;
    order: 2;             /* texte sous la photo */
  }
  .ms-page--mobile-flat .ms-h4-eye { margin: 0 auto !important; }
  .ms-page--mobile-flat .ms-h4-h1 {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.15 !important;
    margin: 12px 0 !important;
  }
  .ms-page--mobile-flat .ms-h4-lede {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .ms-page--mobile-flat .ms-h4-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }
  .ms-page--mobile-flat .ms-h4-cta .btn-large {
    width: 100%;
    justify-content: center;
  }
  .ms-page--mobile-flat .ms-h4-link {
    justify-content: center;
  }
  .ms-page--mobile-flat .ms-h4-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }
  .ms-page--mobile-flat .ms-h4-stat { padding: 8px 6px !important; }
  .ms-page--mobile-flat .ms-h4-stat strong { font-size: 16px !important; }
  .ms-page--mobile-flat .ms-h4-stat span { font-size: 9.5px !important; }

  /* Photo héro : 4/3 paysage, taille raisonnable, en haut (order: 1) */
  .ms-page--mobile-flat .ms-h4-visual {
    order: 1;
    min-height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .ms-page--mobile-flat .ms-h4-photo {
    max-width: 280px !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 18px !important;
    margin: 0 auto !important;
    transform: rotate(0deg) !important;
  }
  /* Cartes flottantes — redimensionnées + plus collées au cadre */
  .ms-page--mobile-flat .ms-h4-card {
    min-width: 110px !important;
    max-width: 55% !important;
    padding: 6px 10px !important;
    font-size: 10.5px !important;
  }
  .ms-page--mobile-flat .ms-h4-card strong { font-size: 11px !important; }
  .ms-page--mobile-flat .ms-h4-card span:not(.ms-h4-card-pulse) { font-size: 9.5px !important; }
  .ms-page--mobile-flat .ms-h4-card-icon { width: 24px !important; height: 24px !important; }
  .ms-page--mobile-flat .ms-h4-card-icon svg { width: 14px !important; height: 14px !important; }
  .ms-page--mobile-flat .ms-h4-card--note { left: -4px !important; top: -4px !important; }
  .ms-page--mobile-flat .ms-h4-card--family { right: -4px !important; bottom: 4px !important; }

  /* ────────────────────────────────────────────────────────────
     AVANT / APRÈS · La douleur vs la donnée (AirSense) — mobile
     compact. La section prenait beaucoup de place avec 2 cartes
     très denses : padding réduit, listes compactes, après-grid
     en 1 colonne, badges + textes plus petits. */
  .as-compare { padding: 24px 0 !important; }
  .as-compare .ms-cx-head { margin-bottom: 8px; }
  .as-compare-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }
  .as-compare-grid > div {
    padding: 16px 16px !important;
    border-radius: 14px !important;
  }
  .as-compare-grid h3 {
    font-size: 17px !important;
    margin: 10px 0 12px !important;
  }
  .as-compare-grid ul { gap: 8px !important; }
  .as-compare-grid ul strong { font-size: 12.5px !important; }
  .as-compare-grid ul span { font-size: 11.5px !important; line-height: 1.4 !important; }
  /* Bloc APRÈS : grille 6 mesures en 1 colonne pour respirer */
  .as-compare-grid > div:last-child > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .as-compare-grid > div:last-child > div > div {
    padding: 8px 10px !important;
  }
  .as-compare-grid > div:last-child > div > div strong { font-size: 11.5px !important; }
  .as-compare-grid > div:last-child > div > div span { font-size: 10px !important; }
  /* Icônes en-tête plus petites */
  .as-compare-grid > div > div > span:first-child[style*="width: 38px"] {
    width: 30px !important; height: 30px !important;
  }
  .as-compare-grid > div > div > span:first-child[style*="width: 38px"] svg {
    width: 16px !important; height: 16px !important;
  }

  /* Architecture orchestrateur */
  .ms-orch { padding: 40px 0 !important; }
  .ms-orch-h2 { font-size: clamp(22px, 6vw, 28px) !important; }

  /* Stage : grille 2 colonnes ; le téléphone occupe les deux colonnes
     en haut, les 8 modules suivent en 2×4 (2 boxes par ligne). */
  .ms-orch-stage {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px 0 !important;
  }
  .ms-orch-center {
    grid-column: 1 / -1;
    order: 1;
    margin-top: 16px;
    margin-bottom: 0;
  }
  .ms-orch-side { display: contents !important; }

  /* Cartes modules : -50% pour libérer l'espace du téléphone */
  .ms-orch-card {
    padding: 6px 8px !important;
    grid-template-columns: auto 1fr !important;
    gap: 6px !important;
    border-radius: 8px !important;
  }
  .ms-orch-card--l,
  .ms-orch-card--r {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .ms-orch-card-icon { width: 22px !important; height: 22px !important; }
  .ms-orch-card-icon svg { width: 11px !important; height: 11px !important; }
  .ms-orch-card-bar { display: none !important; }
  .ms-orch-card h4 { font-size: 10.5px !important; line-height: 1.2 !important; }
  .ms-orch-card-eye { font-size: 7.5px !important; letter-spacing: .08em !important; }
  .ms-orch-card p { font-size: 9px !important; line-height: 1.3 !important; }
  .ms-orch-card-note { display: none !important; }

  /* Centre · téléphone (sphere) +100% : pleine largeur, beaucoup plus grand */
  .ms-orch-center { width: 100%; }
  .ms-orch-sphere,
  .ms-orch-sphere.ms-orch-sphere--phone {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    padding: 16px !important;
    margin: 0 auto !important;
  }
  /* Le SVG cerveau/téléphone reste en haut, en flux normal, puis
     L'ORCHESTRATEUR / MaClinique / sous-titre s'affichent comme un
     bloc de légende clair JUSTE EN-DESSOUS du téléphone, comme un
     vrai nom de produit. */
  .ms-orch-sphere {
    justify-content: flex-start !important;
    gap: 8px;
  }
  .ms-orch-sphere .ms-orch-brain {
    position: relative !important;
    inset: auto !important;
    width: 70% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    opacity: 1;
    flex: 0 0 auto;
  }
  .ms-orch-sphere-eye,
  .ms-orch-sphere h3,
  .ms-orch-sphere-sub {
    position: relative;
    z-index: 2;
    text-shadow: none;
  }
  .ms-orch-sphere-eye {
    font-size: 11px !important;
    letter-spacing: .18em !important;
    color: var(--ms-teal-700, #0F766E) !important;
    margin-top: 4px !important;
  }
  .ms-orch-sphere h3 {
    font-size: clamp(28px, 8vw, 40px) !important;
    margin: 2px 0 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em;
  }
  .ms-orch-sphere-sub {
    font-size: 13px !important;
    margin-top: 2px !important;
    color: rgba(15, 23, 42, .65) !important;
  }
  .ms-orch-quad { gap: 10px !important; padding: 14px !important; margin-top: 8px; }
  .ms-orch-quad strong { font-size: 12px !important; }
  .ms-orch-quad span { font-size: 11px !important; }

  .ms-orch-lines { display: none !important; }
  .ms-orch-mid-text { font-size: 13px !important; padding: 0 12px; }

  /* Output cards : forcer 2 colonnes sur mobile (max 2 lignes pour 4
     cartes côté AmbuLive) et compacter le contenu pour qu'ils tiennent
     côte à côte. */
  .ms-orch-out--two,
  .ms-orch-out--four {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    max-width: 100% !important;
  }
  .ms-orch-out--three {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  .ms-orch-out--three .ms-orch-out-card header { padding: 8px 8px !important; gap: 6px !important; }
  .ms-orch-out--three .ms-orch-out-card h4 { font-size: 10px !important; }
  .ms-orch-out--three .ms-orch-out-icon { width: 22px !important; height: 22px !important; }
  .ms-orch-out--three .ms-orch-out-icon svg { width: 12px !important; height: 12px !important; }
  .ms-orch-out--three .ms-orch-out-body { padding: 10px 6px !important; gap: 4px !important; }
  .ms-orch-out--three .ms-orch-out-body strong { font-size: 11px !important; }
  .ms-orch-out--three .ms-orch-out-body span { font-size: 9px !important; line-height: 1.25 !important; }
  .ms-orch-out-card header { padding: 10px 12px !important; gap: 8px !important; }
  .ms-orch-out-card h4 { font-size: 11.5px !important; line-height: 1.2 !important; }
  .ms-orch-out-icon { width: 26px !important; height: 26px !important; }
  .ms-orch-out-icon svg { width: 14px !important; height: 14px !important; }
  .ms-orch-out-body { padding: 12px 10px !important; gap: 6px !important; }
  .ms-orch-out-body strong { font-size: 13px !important; }
  .ms-orch-out-body span { font-size: 11px !important; line-height: 1.3 !important; }
  .ms-orch-out-illu svg { width: 40px !important; height: 40px !important; }
  .ms-orch-mid-h { font-size: 16px !important; }

  /* CTA closing */
  .ms-end { padding: 40px 0 !important; }
  .ms-end-card { padding: 32px 20px !important; border-radius: 20px !important; }
  .ms-end-content h2 { font-size: clamp(24px, 6vw, 32px) !important; }
  .ms-end-content p { font-size: 14px !important; }
  .ms-end-content .btn-large { width: 100%; justify-content: center; }

  /* Le SVG mockup persona reste lisible (viewBox conserve les ratios) */
}

/* Tech pages "Sur le terrain" · grille base */
.rtls-photos-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .rtls-photos-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tech pages "Ce que ça change" · grille base */
.tech-parcours-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .tech-parcours-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .rtls-photos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }
  .rtls-photos-grid figure { border-radius: 12px !important; }
  .rtls-photos-grid figure > div:first-child > span {
    top: 6px !important;
    left: 6px !important;
    padding: 2px 6px !important;
    font-size: 8.5px !important;
    border-radius: 3px !important;
    letter-spacing: 0.05em !important;
  }
  .rtls-photos-grid figcaption {
    padding: 10px 11px 12px !important;
  }
  .rtls-photos-grid figcaption strong {
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin-bottom: 3px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rtls-photos-grid figcaption > span,
  .rtls-photos-grid figcaption span:last-child {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 380px) {
  .rtls-photos-grid { gap: 10px !important; }
  .rtls-photos-grid figcaption { padding: 8px 9px 10px !important; }
  .rtls-photos-grid figcaption strong { font-size: 11px !important; }
  .rtls-photos-grid figcaption > span,
  .rtls-photos-grid figcaption span:last-child { font-size: 9.5px !important; }
}

/* Petit phone (≤ 380px) : ajustements ultimes */
@media (max-width: 380px) {
  .ms-h4-photo { max-width: 280px; }
  .ms-h4-card { min-width: 130px !important; }
  .ms-h4-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .ms-h4-stat { padding: 8px 4px !important; }
  .ms-h4-stat strong { font-size: 14px !important; }
  .ms-h4-stat span { font-size: 9px !important; }
  /* Sphère orchestrateur : on garde la pleine largeur définie plus haut. */
}

/* ─── Mockup gate · email-locked iframe ─── */
.mt-lock {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.mt-lock-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: blur(14px) saturate(0.85) brightness(0.85);
  pointer-events: none;
  transform: scale(1.06);
  opacity: 0.6;
}
.mt-lock-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: linear-gradient(135deg, rgba(15,23,42,0.55) 0%, rgba(15,118,110,0.40) 100%);
  backdrop-filter: blur(2px);
}

/* MaVisite-only variant: no blurred iframe, hard clip-path guarantee.
   This eliminates the dark blur halo bleeding past the rounded bottom
   corners of the phone bezel on the Médecins page. */
.mt-lock--static {
  -webkit-clip-path: inset(0 round inherit);
          clip-path: inset(0 round inherit);
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(15,118,110,0.35), transparent 60%),
    radial-gradient(120% 80% at 80% 90%, rgba(30,58,138,0.45), transparent 65%),
    linear-gradient(180deg, #0f1f2a 0%, #102a2a 100%);
}
.mt-lock--static .mt-lock-overlay {
  background: linear-gradient(135deg, rgba(15,23,42,0.45) 0%, rgba(15,118,110,0.30) 100%);
  backdrop-filter: none;
  border-radius: inherit;
}
.mt-lock-card {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 22px 22px 18px;
  width: 100%; max-width: 320px;
  box-shadow: 0 20px 60px rgba(15,23,42,0.35), 0 6px 16px rgba(15,23,42,0.18);
  border: 1px solid rgba(255,255,255,0.6);
  text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.mt-lock-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  color: #0F766E;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 4px 12px rgba(15,118,110,0.18);
}
.mt-lock-title { font-size: 15px; font-weight: 700; color: #37352F; letter-spacing: -0.01em; }
.mt-lock-sub   { font-size: 12px; color: #787774; line-height: 1.45; max-width: 240px; }
.mt-lock-form  { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.mt-lock-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FAFAFA;
  outline: none;
  transition: border-color .15s, background .15s;
  font-family: inherit;
}
.mt-lock-input:focus { border-color: #0F766E; background: white; box-shadow: 0 0 0 3px rgba(15,118,110,0.12); }
.mt-lock-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, #0F766E, #064E3B);
  color: white;
  border: 0; border-radius: 8px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 12px rgba(15,118,110,0.25);
  font-family: inherit;
}
.mt-lock-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,118,110,0.32); }
.mt-lock-err { font-size: 11px; color: #DC2626; font-weight: 600; }
.mt-lock-meta { font-size: 10px; color: #9B9A97; letter-spacing: 0.02em; margin-top: 4px; }

/* ════════════════════════════════════════════════════════
   Story page · Partners page (shared visual language)
   ════════════════════════════════════════════════════════ */

.story-page, .partners-page { background: #FBFAF7; }

.story-section-head { max-width: 720px; margin: 0 0 32px; }
.story-section-title {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink, #0f172a);
  margin: 12px 0 0;
  font-weight: 800;
}

/* Timeline */
.story-timeline-wrap { padding: 72px 0; }
.story-timeline { list-style: none; padding: 0; margin: 0; max-width: 820px; }
.story-chapter {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 24px;
  padding: 28px 0;
  position: relative;
}
.story-chapter + .story-chapter { border-top: 1px solid #ECEAE3; }
.story-chapter-rail {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.story-chapter-rail::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: -28px;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, #0a7278 0%, #ECEAE3 100%);
  transform: translateX(-50%);
}
.story-chapter:last-child .story-chapter-rail::before { display: none; }
.story-chapter-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0a7278;
  box-shadow: 0 0 0 4px rgba(10,114,120,0.12);
  position: relative;
  z-index: 1;
}
.story-chapter-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.story-chapter-year { color: #0a7278; font-weight: 700; }
.story-chapter-place { color: #9B9A97; text-transform: uppercase; }
.story-chapter-title {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.2;
  color: #1C1C1C;
  margin: 0 0 8px;
  font-weight: 700;
}
.story-chapter-text { color: #4A4A48; line-height: 1.6; margin: 0; max-width: 60ch; }

/* Values */
.story-values-wrap { padding: 72px 0; background: #FFFFFF; border-top: 1px solid #ECEAE3; border-bottom: 1px solid #ECEAE3; }
.story-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .story-values { grid-template-columns: 1fr; } }
.story-value {
  background: #FBFAF7;
  border: 1px solid #ECEAE3;
  border-radius: 14px;
  padding: 28px;
}
.story-value-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #0a7278;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.story-value h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.25;
  margin: 8px 0 12px;
  color: #1C1C1C;
  font-weight: 700;
}
.story-value p { color: #4A4A48; line-height: 1.55; margin: 0; font-size: 14.5px; }

/* Geography */
.story-geo-wrap { padding: 72px 0; }
.story-geo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 720px) { .story-geo { grid-template-columns: 1fr; } }
.story-geo-card {
  background: white;
  border: 1px solid #ECEAE3;
  border-radius: 16px;
  padding: 32px;
  transition: border-color .2s, transform .2s;
}
.story-geo-card:hover { border-color: #0a7278; transform: translateY(-2px); }
.story-geo-flag { font-size: 36px; line-height: 1; display: block; margin-bottom: 12px; }
.story-geo-card h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  margin: 0 0 4px;
  color: #1C1C1C;
  font-weight: 700;
}
.story-geo-city {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #0a7278;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
  font-weight: 700;
}
.story-geo-body { color: #4A4A48; line-height: 1.6; margin: 0; }

/* Partners groups */
.partners-groups-wrap { padding: 72px 0; }
.partners-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 860px) { .partners-groups { grid-template-columns: 1fr; } }
.partners-group {
  background: white;
  border: 1px solid #ECEAE3;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.partners-group-tag {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0a7278;
  background: rgba(10,114,120,0.08);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.partners-group h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  color: #1C1C1C;
  font-weight: 700;
}
.partners-group p { color: #4A4A48; line-height: 1.6; margin: 0; }
.partners-group-cta {
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 6px 0;
  color: #0a7278;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.partners-group-cta:hover { text-decoration: underline; }

/* Integrations */
.partners-integ-wrap { padding: 72px 0; background: #FFFFFF; border-top: 1px solid #ECEAE3; border-bottom: 1px solid #ECEAE3; }
.partners-integ { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .partners-integ { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .partners-integ { grid-template-columns: 1fr; } }
.partners-integ-card {
  background: #FBFAF7;
  border: 1px solid #ECEAE3;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.partners-integ-card strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #0a7278;
  letter-spacing: 0.02em;
}
.partners-integ-card span { color: #4A4A48; font-size: 13.5px; line-height: 1.5; }

/* Standards */
.partners-std-wrap { padding: 72px 0; }
.partners-std { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .partners-std { grid-template-columns: 1fr; } }
.partners-std-col {
  background: white;
  border: 1px solid #ECEAE3;
  border-radius: 14px;
  padding: 24px;
}
.partners-std-col header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #1C1C1C;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ECEAE3;
  letter-spacing: 0.02em;
}
.partners-std-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.partners-std-col li {
  color: #4A4A48;
  font-size: 14px;
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.partners-std-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0a7278;
}

/* Sectors */
.partners-sec-wrap { padding: 72px 0; background: #FFFFFF; border-top: 1px solid #ECEAE3; }
.partners-sec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 720px) { .partners-sec { grid-template-columns: 1fr; } }
.partners-sec-card {
  background: #FBFAF7;
  border: 1px solid #ECEAE3;
  border-radius: 14px;
  padding: 24px;
}
.partners-sec-card h3 {
  font-family: var(--font-sans);
  font-size: 19px;
  margin: 0 0 8px;
  color: #1C1C1C;
  font-weight: 700;
}
.partners-sec-card p { color: #4A4A48; line-height: 1.55; margin: 0; font-size: 14.5px; }

/* ════════════════════════════════════════════════════════
   Partners page · icon-driven cards (v2)
   ════════════════════════════════════════════════════════ */

/* Partner group cards with accent + icon */
.partners-group {
  position: relative;
  overflow: hidden;
}
.partners-group::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent, #0a7278) 0%, transparent 60%);
  opacity: 0.04;
  pointer-events: none;
}
.partners-group--teal   { --accent: #0b8f95; }
.partners-group--gold   { --accent: #d97706; }
.partners-group--indigo { --accent: #1e3a5f; }
.partners-group--violet { --accent: #3c5a82; }

.partners-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.partners-group-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent, #0a7278);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 18px -6px var(--accent, rgba(10,114,120,0.4));
}
.partners-group .partners-group-tag {
  background: rgba(0,0,0,0.04);
  color: var(--accent, #0a7278);
}
.partners-group h3, .partners-group p, .partners-group-cta { position: relative; z-index: 1; }
.partners-group-cta { color: var(--accent, #0a7278); }

/* Integration cards — icon + body horizontal */
.partners-integ-card {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 14px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.partners-integ-card:hover {
  border-color: #0a7278;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(10,114,120,0.25);
}
.partners-integ-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0a7278 0%, #085c61 100%);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.partners-integ-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Standards columns — colored top band + code chip */
.partners-std-col {
  position: relative;
  padding-top: 28px;
  overflow: hidden;
}
.partners-std-col::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--std-accent, #0a7278);
}
.partners-std-col--red   { --std-accent: #DC2626; }
.partners-std-col--green { --std-accent: #059669; }
.partners-std-col--blue  { --std-accent: #1e3a5f; }

.partners-std-col header {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
.partners-std-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: var(--std-accent, #0a7278);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.06em;
}
.partners-std-label {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: #1C1C1C;
  letter-spacing: -0.01em;
}
.partners-std-col li::before { background: var(--std-accent, #0a7278); }

.partners-std-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 4px 0 16px;
  border-radius: 16px;
  background: white;
  border: 1px solid #ECEAE3;
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.partners-std-col:hover .partners-std-icon {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.25);
}
.partners-std-icon svg { display: block; width: 48px; height: 48px; }

/* Sector cards — horizontal icon + body */
.partners-sec-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: border-color .2s, transform .2s;
}
.partners-sec-card:hover { border-color: #0a7278; transform: translateY(-2px); }
.partners-sec-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: white;
  border: 1px solid #ECEAE3;
  color: #0a7278;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Story-page geo cards — replace flag emoji with stylized chip */
.story-geo-card {
  position: relative;
  overflow: hidden;
}
.story-geo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0a7278, #3dc3c9);
}
.story-geo-flag {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 32px !important;
  background: #FBFAF7;
  border: 1px solid #ECEAE3;
  border-radius: 14px;
  margin-bottom: 16px !important;
}

/* ════════════════════════════════════════════════════════
   Story + Partners hero · two-column with SVG illustration
   ════════════════════════════════════════════════════════ */

.story-hero, .partners-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 64px;
  background: linear-gradient(180deg, #ecfbfc 0%, #FBFAF7 100%);
}
.story-hero-bg, .partners-hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
.story-hero-orb, .partners-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}
.story-hero-orb--a {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #0a7278 0%, transparent 70%);
  top: -120px; left: -120px;
}
.story-hero-orb--b {
  width: 360px; height: 360px;
  background: radial-gradient(circle, #D97706 0%, transparent 70%);
  bottom: -100px; right: -100px;
  opacity: 0.3;
}
.partners-hero-orb--a {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #0a7278 0%, transparent 70%);
  top: -120px; left: -120px;
}
.partners-hero-orb--b {
  width: 360px; height: 360px;
  background: radial-gradient(circle, #d97706 0%, transparent 70%);
  bottom: -100px; right: -100px;
  opacity: 0.3;
}

.story-hero-inner, .partners-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 980px) {
  .story-hero-inner, .partners-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.story-hero-h1, .partners-hero-h1 {
  font-family: var(--font-sans);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink, #0f172a);
  margin: 16px 0 20px;
  font-weight: 800;
  text-wrap: balance;
}
.story-hero-lede, .partners-hero-lede {
  font-size: 17px;
  line-height: 1.6;
  color: #4A4A48;
  max-width: 56ch;
  margin: 0;
}

.story-hero-art, .partners-hero-art {
  position: relative;
}
.story-hero-illu, .partners-hero-illu {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(10,114,120,0.12));
}

/* Timeline — chapter icon replaces simple dot */
.story-chapter-rail {
  padding-top: 4px !important;
  width: 40px;
  justify-content: center;
  display: flex;
}
.story-chapter-rail svg {
  position: relative;
  z-index: 2;
  background: #FBFAF7;
  border-radius: 50%;
  display: block;
  box-shadow: 0 4px 12px -4px rgba(10,114,120,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.story-chapter:hover .story-chapter-rail svg {
  transform: scale(1.08);
  box-shadow: 0 6px 18px -4px rgba(10,114,120,0.32);
}
.story-chapter-rail::before {
  top: 40px !important;
  bottom: -28px !important;
}

/* Value cards — with illustration on top */
.story-value {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
}
.story-value-art {
  height: 130px;
  background: linear-gradient(180deg, #ecfbfc 0%, #ffffff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #ECEAE3;
  padding: 12px;
}
.story-value-art svg { width: 100%; max-width: 200px; height: auto; }
.story-value-k {
  padding: 20px 24px 0;
  display: block;
}
.story-value h3 { padding: 0 24px; margin: 8px 0 12px !important; }
.story-value p  { padding: 0 24px 24px; }

/* Geo flag chip — accommodate SVG */
.story-geo-flag {
  width: 80px !important;
  height: 60px !important;
  font-size: 0 !important;
  padding: 0;
  border-radius: 10px !important;
  overflow: hidden;
  border: 1px solid #ECEAE3 !important;
  background: white !important;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.1);
}
.story-geo-flag svg {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* Polish · subtle entry animation */
.story-hero-illu, .partners-hero-illu {
  animation: heroFadeIn 0.8s ease-out;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero · real photo treatment */
.story-hero-photo {
  animation: heroFadeIn 0.8s ease-out;
}
.story-hero-photo-frame {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #ECEAE3;
  box-shadow:
    0 24px 60px -24px rgba(10, 114, 120, 0.35),
    0 8px 20px -8px rgba(10, 114, 120, 0.18);
  border: 1px solid rgba(10, 114, 120, 0.12);
}
.story-hero-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 0.6s ease;
}
.story-hero-photo-frame:hover img {
  transform: scale(1.03);
}
.story-hero-photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, 0.55) 100%);
  pointer-events: none;
}
.story-hero-photo-caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FBFAF7;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  z-index: 2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.story-hero-photo-caption strong {
  font-weight: 700;
  color: #FBFAF7;
}
.story-hero-photo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D97706;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.25);
  flex-shrink: 0;
  animation: storyDotPulse 2.4s ease-in-out infinite;
}
@keyframes storyDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(217, 119, 6, 0.05); }
}
@media (max-width: 980px) {
  .story-hero-photo-frame { aspect-ratio: 3 / 2; }
}

/* Stats band · parent operator track record */
.story-stats-wrap {
  padding: 72px 0 56px;
  background: #FBFAF7;
  border-top: 1px solid #ECEAE3;
  border-bottom: 1px solid #ECEAE3;
}
.story-section-head--center {
  text-align: center;
  margin: 0 auto 36px;
}
.story-section-head--center .eyebrow {
  justify-content: center;
}
.story-stats {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  max-width: 1100px;
}
@media (max-width: 980px) {
  .story-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .story-stats { grid-template-columns: repeat(2, 1fr); }
}
.story-stat {
  position: relative;
  background: white;
  border: 1px solid #ECEAE3;
  border-radius: 14px;
  padding: 24px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.story-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(10, 114, 120, 0.25);
  border-color: rgba(10, 114, 120, 0.35);
}
.story-stat::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0a7278 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.5l3 3 7-7' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
  box-shadow: 0 0 0 4px #FBFAF7, 0 4px 12px -2px rgba(10, 114, 120, 0.35);
}
.story-stat-value {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0a7278;
  line-height: 1;
}
.story-stat-label {
  font-size: 12.5px;
  line-height: 1.4;
  color: #4A4A48;
  max-width: 16ch;
}
.story-stats-foot {
  margin: 28px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
  color: #6B6B68;
  font-style: italic;
}
.story-stats-foot::before {
  content: '* ';
  color: #D97706;
  font-weight: 700;
  font-style: normal;
}

/* ════════════════════════════════════════════════════════
   Tech pages · Parcours métier grid — 2 cards per row on mobile
   Placed at end of file to win cascade over .ms-orch-card !important
   overrides in earlier @media blocks.
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .tech-parcours-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .tech-parcours-grid .ms-orch-card {
    position: relative !important;
    grid-template-columns: 1fr !important;
    padding: 18px 14px 16px !important;
    gap: 12px !important;
    text-align: left !important;
    justify-items: stretch !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px -8px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
  }
  .tech-parcours-grid .ms-orch-card--l,
  .tech-parcours-grid .ms-orch-card--r {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .tech-parcours-grid .ms-orch-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 3px !important;
    background: var(--c, #0a7278) !important;
    opacity: 0.9 !important;
  }
  .tech-parcours-grid .ms-orch-card-icon {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: var(--c-soft, #ecfbfc) !important;
    color: var(--c, #0a7278) !important;
    box-shadow: 0 4px 12px -4px var(--c-shadow, rgba(10,114,120,0.22)) !important;
  }
  .tech-parcours-grid .ms-orch-card-icon::after {
    inset: -2px !important;
    border-width: 1px !important;
    opacity: 0.18 !important;
  }
  .tech-parcours-grid .ms-orch-card-icon svg { width: 22px !important; height: 22px !important; }
  .tech-parcours-grid .ms-orch-card-bar { display: none !important; }
  .tech-parcours-grid .ms-orch-card-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
  }
  .tech-parcours-grid .ms-orch-card-eye {
    order: -1 !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--c, #0a7278) !important;
    opacity: 0.85 !important;
  }
  .tech-parcours-grid .ms-orch-card h4 {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: #0f172a !important;
    letter-spacing: -0.005em !important;
  }
  .tech-parcours-grid .ms-orch-card p {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin: 2px 0 0 !important;
    color: #475569 !important;
  }
  .tech-parcours-grid .ms-orch-card-note { display: block !important; }
  .tech-parcours-grid .ms-orch-card:hover {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 22px -8px rgba(15, 23, 42, 0.14) !important;
  }
}


/* Madinat · baseline stats : 3 par ligne sur mobile, hauteurs égalisées */
@media (max-width: 768px) {
  .madinat-stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }
  .madinat-stats-grid .ms-orch-card {
    padding: 14px 8px 12px !important;
    text-align: center;
    align-items: center;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 132px;
    border-radius: 12px !important;
  }
  .madinat-stats-grid .ms-orch-card-icon {
    margin-bottom: 6px !important;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }
  .madinat-stats-grid .ms-orch-card-icon svg {
    width: 100%;
    height: 100%;
  }
  .madinat-stats-grid .ms-orch-card > div {
    font-size: 22px !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
    justify-content: center;
    gap: 1px !important;
    flex-shrink: 0;
    letter-spacing: -0.025em !important;
  }
  .madinat-stats-grid .ms-orch-card > div span {
    font-size: 12px !important;
    line-height: 1 !important;
  }
  .madinat-stats-grid .ms-orch-card p {
    font-size: 10px !important;
    line-height: 1.25 !important;
    text-align: center;
    letter-spacing: 0;
    margin-top: auto !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    hyphens: auto;
  }
}
@media (max-width: 380px) {
  .madinat-stats-grid { gap: 8px !important; }
  .madinat-stats-grid .ms-orch-card {
    padding: 12px 5px 10px !important;
    min-height: 118px;
  }
  .madinat-stats-grid .ms-orch-card-icon { width: 22px; height: 22px; margin-bottom: 4px !important; }
  .madinat-stats-grid .ms-orch-card > div { font-size: 19px !important; }
  .madinat-stats-grid .ms-orch-card > div span { font-size: 11px !important; }
  .madinat-stats-grid .ms-orch-card p { font-size: 9px !important; line-height: 1.2 !important; }
}

/* Madinat · 7 modules · 1 chaîne — grille base */
.madinat-modules-grid {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .madinat-modules-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .madinat-modules-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }
  .madinat-modules-grid > article {
    padding: 14px 12px !important;
    border-radius: 12px !important;
  }
  .madinat-modules-grid > article > span:first-child { height: 2px !important; }
  /* en-tête (code + statut) compacté */
  .madinat-modules-grid > article > div:first-of-type {
    margin-bottom: 8px !important;
    gap: 6px !important;
  }
  .madinat-modules-grid > article > div:first-of-type > span {
    padding: 3px 7px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.02em !important;
  }
  /* titre module */
  .madinat-modules-grid > article h3,
  .madinat-modules-grid > article h4,
  .madinat-modules-grid > article > div:nth-of-type(2) {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.005em !important;
  }
  /* description / KPI / sub */
  .madinat-modules-grid > article p,
  .madinat-modules-grid > article > div:nth-of-type(3) {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
}
@media (max-width: 380px) {
  .madinat-modules-grid { gap: 8px !important; }
  .madinat-modules-grid > article { padding: 12px 10px !important; }
  .madinat-modules-grid > article > div:first-of-type > span {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
  .madinat-modules-grid > article h3,
  .madinat-modules-grid > article h4,
  .madinat-modules-grid > article > div:nth-of-type(2) { font-size: 12px !important; }
  .madinat-modules-grid > article p,
  .madinat-modules-grid > article > div:nth-of-type(3) { font-size: 10.5px !important; }
}

/* Tech hero SVG watermark — full-area, behind orbs */
.tech-hero-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}
.ms-h4-bg .ms-h4-orb { z-index: 1; }
@media (max-width: 768px) {
  .tech-hero-bg-svg { opacity: 0.75; }
}