/* ============================================================
   OMNICORE OS — style.css
   Design system : custom properties, mobile-first, glassmorphism
============================================================ */

/* ============================================================
   1. CUSTOM PROPERTIES (design tokens)
============================================================ */
:root {
  /* Couleurs — dark-first */
  --color-bg:          #080f1e;
  --color-bg-alt:      #0c1428;
  --color-bg-dark:     #040a14;
  --color-surface:     #0d1a2e;
  --color-border:      rgba(255,255,255,0.08);
  --color-border-dark: rgba(255,255,255,0.04);

  --color-navy:        #1a3a6b;
  --color-blue:        #2563eb;
  --color-blue-hover:  #1d4ed8;
  --color-blue-light:  #eff6ff;
  --color-purple:      #7c3aed;
  --color-purple-light:#f5f3ff;
  --color-green:       #16a34a;
  --color-green-light: #f0fdf4;
  --color-orange:      #ea580c;
  --color-orange-light:#fff7ed;
  --color-red:         #dc2626;
  --color-red-light:   #fef2f2;
  --color-yellow:      #ca8a04;
  --color-yellow-light:#fefce8;

  --color-text:        #f1f5f9;
  --color-text-muted:  #94a3b8;
  --color-text-light:  #64748b;
  --color-text-inverse:#0f172a;

  /* Typographie */
  --font-family:       'Inter', sans-serif;
  --font-size-xs:      0.75rem;    /* 12px */
  --font-size-sm:      0.875rem;   /* 14px */
  --font-size-base:    1rem;       /* 16px */
  --font-size-lg:      1.125rem;   /* 18px */
  --font-size-xl:      1.25rem;    /* 20px */
  --font-size-2xl:     1.5rem;     /* 24px */
  --font-size-3xl:     1.875rem;   /* 30px */
  --font-size-4xl:     2.25rem;    /* 36px */
  --font-size-5xl:     3rem;       /* 48px */
  --font-size-6xl:     3.75rem;    /* 60px */

  /* Espacements */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Bordures */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Ombres */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:   0 10px 30px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl:   0 20px 50px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.06);
  --shadow-blue: 0 8px 30px rgba(37,99,235,.25);

  /* Navbar */
  --navbar-height: 72px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
}

/* ============================================================
   2. RESET & BASE
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ============================================================
   3. LAYOUT UTILITIES
============================================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--space-20) 0;
}

.section--gray {
  background-color: var(--color-bg-alt);
}

.section--dark {
  background-color: var(--color-bg-dark);
  color: #fff;
}

/* Intentional light break — traction / social proof only */
.section--light {
  --color-bg:         #f8f9fc;
  --color-bg-alt:     #f1f4fa;
  --color-surface:    #ffffff;
  --color-border:     #e2e8f0;
  --color-text:       #0f172a;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;
  background-color: var(--color-bg);
  color: var(--color-text);
}
.section--light .section-title  { color: var(--color-text); }
.section--light .section-eyebrow {
  background: var(--color-blue-light);
  color: var(--color-blue);
}

/* ============================================================
   4. ANIMATIONS AU SCROLL
============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in--delay   { transition-delay: 0.1s; }
.fade-in--delay-1 { transition-delay: 0.15s; }
.fade-in--delay-2 { transition-delay: 0.3s; }

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   5. BOUTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
}

.btn--primary {
  background: var(--color-blue);
  color: #fff;
  border-color: var(--color-blue);
}
.btn--primary:hover {
  background: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-blue);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  background: var(--color-surface);
  border-color: var(--color-blue);
  color: var(--color-blue);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn--outline:hover {
  background: var(--color-navy);
  color: #fff;
  transform: translateY(-1px);
}

.btn--sm  { padding: var(--space-2) var(--space-4);  font-size: var(--font-size-sm);  }
.btn--lg  { padding: var(--space-4) var(--space-8);  font-size: var(--font-size-base); }
.btn--full { width: 100%; justify-content: center; }

/* ============================================================
   6. SECTION HEADERS (commun)
============================================================ */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-eyebrow {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #60a5fa;
  background: rgba(37,99,235,0.18);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.section-eyebrow--light {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.12);
}

.section-title {
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.section-title--light { color: #fff; }

.section-subtitle {
  margin-top: var(--space-4);
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.text-accent { color: var(--color-blue); }

/* ============================================================
   7. NAVBAR
============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--navbar-height);
  background: rgba(8,15,30,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: box-shadow var(--transition-base), background var(--transition-base);
}

.navbar.scrolled {
  box-shadow: 0 1px 24px rgba(0,0,0,0.4);
  background: rgba(8,15,30,0.97);
}

.navbar__inner {
  display: flex;
  align-items: center;
  height: var(--navbar-height);
  gap: var(--space-8);
}

/* Logo */
.navbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
  font-size: var(--font-size-xl);
  letter-spacing: -0.02em;
  color: #fff;
  flex-shrink: 0;
}
.logo-hex {
  color: var(--color-blue);
  font-size: 1.4em;
}

/* Nav links */
.navbar__nav { margin-left: auto; }
.nav-list {
  display: flex;
  gap: var(--space-2);
}
.nav-link {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-link:hover, .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* Actions */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.icon-btn:hover {
  background: rgba(255,255,255,0.09);
  color: #fff;
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  margin-left: auto;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: none;
  padding: var(--space-4) var(--space-6) var(--space-6);
  background: rgba(8,15,30,0.98);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mobile-menu.open { display: block; }
.mobile-nav-list { display: flex; flex-direction: column; gap: var(--space-3); }
.mobile-nav-link {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  padding: var(--space-2) 0;
}
.btn--full { margin-top: var(--space-2); }

/* ============================================================
   8. HERO — Section d'accroche
============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--navbar-height);
  overflow: hidden;
  background: #050b1a;
}

/* Canvas réseau */
#networkCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.35;
}

/* Glows décoratifs */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.hero-glow--blue {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(37,99,235,0.22) 0%, transparent 70%);
  top: -100px; left: -150px;
}
.hero-glow--purple {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, transparent 70%);
  bottom: -50px; right: -100px;
}

/* Layout interne */
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-12);
  padding-top: var(--space-16);
  padding-bottom: var(--space-12);
  flex: 1;
}

/* ── Colonne gauche ── */
.hero__content { max-width: 580px; }

/* Badge statut */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  padding: 5px 14px;
  margin-bottom: var(--space-6);
  letter-spacing: 0.04em;
}
.hero-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.35); }
}

/* Titre */
.hero__title {
  display: flex;
  flex-direction: column;
  font-size: clamp(3.4rem, 6.5vw, 5.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #f1f5f9;
  margin-bottom: var(--space-6);
}
.hero-title-top,
.hero-title-bottom {
  display: block;
}
.hero-title-bottom { color: #f1f5f9; font-weight: 800; }
.hero-title-bottom--accent {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Mot animé */
.hero-title-verb-wrap {
  display: block;
  overflow: hidden;
  height: 1.15em;
}
.hero-title-verb {
  display: block;
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: verb-in 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes verb-in {
  from { opacity: 0; transform: translateY(60%); }
  to   { opacity: 1; transform: translateY(0); }
}
.verb-out {
  animation: verb-out 0.35s ease both !important;
}
@keyframes verb-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-60%); }
}

/* Subtitle */
.hero__subtitle {
  font-size: var(--font-size-lg);
  color: #475569;
  line-height: 1.65;
  margin-bottom: var(--space-8);
  font-weight: 400;
  max-width: 520px;
}

/* CTAs */
.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: #2563eb;
  color: #fff;
  font-size: var(--font-size-base);
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 0 0 0 rgba(37,99,235,0.4), 0 4px 20px rgba(37,99,235,0.3);
  white-space: nowrap;
}
.btn-hero-primary:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px rgba(37,99,235,0.15), 0 8px 30px rgba(37,99,235,0.4);
}
.btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #94a3b8;
  font-size: var(--font-size-base);
  font-weight: 600;
  padding: 14px 24px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-hero-ghost:hover {
  color: #f1f5f9;
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}

/* Stats */
.hero__stats {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.hero-stat { display: flex; flex-direction: column; gap: 3px; }
.hero-stat-val {
  font-size: var(--font-size-2xl);
  font-weight: 900;
  color: #f1f5f9;
  letter-spacing: -0.04em;
  line-height: 1;
}
.hero-stat-label {
  font-size: 10px;
  color: #334155;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.hero-stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* ── Colonne droite ── */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Fenêtre app principale */
.hero-app-window {
  width: 100%;
  max-width: 480px;
  background: #0d1526;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.07);
  animation: hero-float 7s ease-in-out infinite;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotateX(2deg) rotateY(-1deg); }
  50%       { transform: translateY(-14px) rotateX(1deg) rotateY(0deg); }
}

/* Titlebar */
.hero-app-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #0a0f1e;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-app-dots { display: flex; gap: 5px; }
.hero-app-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.had--red    { background: #ef4444; }
.had--yellow { background: #eab308; }
.had--green  { background: #22c55e; }
.hero-app-url {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: #334155;
  background: rgba(255,255,255,0.04);
  padding: 3px 12px;
  border-radius: 6px;
  max-width: 200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hero-app-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  font-size: 8px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Corps dashboard */
.hero-app-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* KPIs mini */
.hero-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.hero-kpi {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 10px;
}
.hero-kpi--blue   { border-left: 3px solid #2563eb; }
.hero-kpi--green  { border-left: 3px solid #16a34a; }
.hero-kpi--purple { border-left: 3px solid #7c3aed; }
.hk-label { font-size: 9px; color: #475569; margin-bottom: 2px; }
.hk-val   { font-size: 13px; font-weight: 700; color: #f1f5f9; line-height: 1.2; }
.hk-trend { font-size: 9px; margin-top: 2px; display: flex; align-items: center; gap: 3px; }
.hk-up    { color: #4ade80; }
.hk-warn  { color: #fbbf24; }

/* Graphique */
.hero-chart {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 10px 12px;
}
.hero-chart-title {
  font-size: 9px;
  color: #334155;
  margin-bottom: 8px;
}
.hero-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 52px;
  padding-bottom: 14px;
}
.hcb {
  flex: 1;
  height: var(--h);
  background: rgba(37,99,235,0.2);
  border-radius: 3px 3px 0 0;
  position: relative;
}
.hcb--on { background: #2563eb; }
.hcb span {
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  color: #1e293b;
  white-space: nowrap;
}

/* Ligne IA */
.hero-ia-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.18);
  border-radius: 7px;
}
.hero-ia-live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #a78bfa;
  flex-shrink: 0;
  animation: pulse-dot 2s ease infinite;
}
.hero-ia-chip {
  font-size: 9px; font-weight: 800;
  color: #a78bfa;
  background: rgba(124,58,237,0.2);
  padding: 1px 6px;
  border-radius: 4px;
}
.hero-ia-text {
  font-size: 10px;
  color: #64748b;
}

/* Cartes notification flottantes */
.hero-notif {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 21, 38, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 10;
  white-space: nowrap;
}
.hn-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.hn-icon--purple { background: rgba(124,58,237,0.2); color: #a78bfa; }
.hn-icon--green  { background: rgba(22,163,74,0.2);  color: #4ade80; }
.hn-icon--blue   { background: rgba(37,99,235,0.2);  color: #60a5fa; }
.hn-title { font-size: 11px; font-weight: 700; color: #f1f5f9; }
.hn-text  { font-size: 10px; color: #64748b; }

.hero-notif--1 {
  top: 8%;
  right: -5%;
  animation: notif-float-1 6s ease-in-out infinite;
}
.hero-notif--2 {
  bottom: 28%;
  right: -8%;
  animation: notif-float-2 7s ease-in-out 1s infinite;
}
.hero-notif--3 {
  top: 38%;
  left: -6%;
  animation: notif-float-3 8s ease-in-out 0.5s infinite;
}

@keyframes notif-float-1 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes notif-float-2 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}
@keyframes notif-float-3 {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(-6px); }
}

/* Scroll cue */
.hero__scroll-cue {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: var(--space-8);
  margin-top: auto;
}
.hsc-label {
  font-size: 10px;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hsc-arrow {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #334155;
  font-size: 11px;
  animation: scroll-bounce 2s ease infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%       { transform: translateY(5px); opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-10); padding-top: var(--space-12); }
  .hero__visual { display: none; }
  .hero__content { max-width: 100%; text-align: center; }
  .hero__cta-group { justify-content: center; }
  .hero__stats { justify-content: center; }
}
@media (max-width: 480px) {
  .hero__title { font-size: 2.6rem; }
  .hero__subtitle { font-size: var(--font-size-base); }
  .btn-hero-primary, .btn-hero-ghost { padding: 12px 20px; font-size: var(--font-size-sm); }
}

/* ============================================================
   9. (ancien LAPTOP MOCKUP — supprimé, remplacé par hero-app-window)
============================================================ */

/* ============================================================
   10. PROBLÈME — Tableau de bord comparatif
============================================================ */

.prob-section { background: var(--color-bg); }
.prob-header  { margin-bottom: var(--space-12); }

/* Layout 2 colonnes */
.prob-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-10);
  align-items: center;
}

/* ── Colonne gauche ── */
.prob-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* Jauge verticale */
.prob-gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.prob-gauge-pole {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.pgp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pgp-dot--green { background: #22c55e; }
.pgp-dot--red   { background: #ef4444; }

/* Track */
.prob-vtrack {
  position: relative;
  width: 10px;
  height: 260px;
  background: #e2e8f0;
  border-radius: var(--radius-full);
  cursor: pointer;
  user-select: none;
}

/* Fill */
.prob-vfill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #22c55e 0%, #f59e0b 45%, #ef4444 100%);
  pointer-events: none;
  transition: height 0.04s linear;
}

/* Thumb */
.prob-vthumb {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #cbd5e1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 3px rgba(37,99,235,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  font-size: 10px;
  color: #94a3b8;
  transition: border-color 0.2s, box-shadow 0.2s;
  z-index: 10;
}
.prob-vthumb:hover,
.prob-vthumb.is-dragging {
  border-color: #2563eb;
  box-shadow: 0 2px 12px rgba(0,0,0,0.16), 0 0 0 4px rgba(37,99,235,0.15);
  cursor: grabbing;
  color: #2563eb;
}

/* KPIs gauche */
.prob-kpis {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prob-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 10px var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.pk-val {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.03em;
  line-height: 1;
  transition: color 0.4s ease;
  min-width: 48px;
}
.pk-val--sm {
  font-size: var(--font-size-sm);
  font-weight: 700;
  min-width: auto;
}
.pk-val.is-bad { color: #ef4444; }

.pk-label {
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 1.4;
  text-align: right;
}

/* Bouton autoplay */
.prob-autoplay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: all var(--transition-base);
  width: 100%;
}
.prob-autoplay-btn:hover   { border-color: var(--color-blue); color: var(--color-blue); }
.prob-autoplay-btn.is-playing {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}

/* ── Colonne droite ── */
.prob-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Barre de statut */
.prob-status-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 10px var(--space-4);
  transition: border-color 0.4s ease;
}
.prob-status-bar.is-warning { border-color: #fde68a; }
.prob-status-bar.is-error   { border-color: #fca5a5; }

.psb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.4s ease;
  background: #22c55e;
}
.psb-dot.is-orange { background: #f59e0b; }
.psb-dot.is-red    { background: #ef4444; }

/* Grille des outils */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* Carte outil */
.tc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.tc.is-warn  { border-color: #fde68a; background: rgba(234,179,8,0.08); }
.tc.is-error { border-color: #fca5a5; background: rgba(239,68,68,0.08); }

.tc-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.tc-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.tc-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  transition: background 0.4s ease;
}
.tc-dot.is-warn  { background: #f59e0b; }
.tc-dot.is-error { background: #ef4444; }

.tc-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}
.tc-row-key { color: var(--color-text-muted); }
.tc-row-val {
  font-weight: 600;
  color: var(--color-text);
  transition: color 0.4s ease;
  text-align: right;
  max-width: 60%;
}
.tc-row-val.is-warn  { color: #d97706; }
.tc-row-val.is-error { color: #dc2626; }

.tc-badge {
  margin-top: var(--space-2);
  display: none;
  font-size: 10px;
  font-weight: 700;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  width: fit-content;
}
.tc-badge.is-visible { display: block; }
.tc.is-warn  .tc-badge { background: #fef3c7; color: #92400e; }
.tc.is-error .tc-badge { background: #fee2e2; color: #991b1b; }

/* Barre d'impact */
.prob-impact {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  transition: border-color 0.4s ease, background 0.4s ease;
}
.prob-impact.is-critical { border-color: #fca5a5; background: rgba(239,68,68,0.08); }

.pi-score-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
}
.pi-score {
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--color-navy);
  line-height: 1;
  transition: color 0.4s ease;
  min-width: 64px;
}
.pi-score.is-bad { color: #ef4444; }
.pi-unit {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-muted);
}

.pi-main {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
  transition: color 0.4s ease;
}
.pi-sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 1024px) {
  .prob-layout { grid-template-columns: 180px 1fr; gap: var(--space-6); }
  .tool-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .prob-layout { grid-template-columns: 1fr; }
  .prob-left   { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .prob-gauge-wrap { flex-direction: row; width: auto; gap: var(--space-3); }
  .prob-vtrack { width: 160px; height: 10px; }
  .prob-vfill  { height: 100% !important; width: 0% !important; top: 0; background: linear-gradient(90deg, #22c55e 0%, #f59e0b 45%, #ef4444 100%); }
  .prob-vthumb { top: 50% !important; left: 0% !important; }
  .prob-kpis   { flex-direction: row; width: auto; }
  .prob-kpi    { min-width: 80px; }
}
@media (max-width: 480px) {
  .tool-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   11. SOLUTION v2 — Pipeline animé + piliers détaillés
============================================================ */

/* Section */
.sol-v2 {
  background: linear-gradient(180deg, var(--color-bg) 0%, #091526 50%, var(--color-bg) 100%);
  overflow: hidden;
}

/* ── Pipeline ── */
.sol-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: var(--space-12) auto var(--space-16);
  max-width: 900px;
  min-height: 220px;
  position: relative;
}

/* Sources & Outputs */
.sol-sources,
.sol-outputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 2;
}

.sol-source-item,
.sol-output-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  transition: all var(--transition-base);
}
.sol-source-item i,
.sol-output-item i { color: var(--color-blue); font-size: 12px; }
.sol-source-item:hover,
.sol-output-item:hover {
  border-color: var(--color-blue);
  color: #60a5fa;
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}
.sol-source-item--muted,
.sol-output-item--muted {
  opacity: 0.45;
}

/* Connecteurs SVG */
.sol-connector {
  width: 90px;
  flex-shrink: 0;
  position: relative;
  height: 200px;
}
.sol-connector svg {
  width: 100%;
  height: 100%;
}

.sol-conn-path {
  stroke: var(--color-border);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  animation: dash-flow 1.8s linear infinite;
}
.sol-conn-path--mid {
  stroke: rgba(37,99,235,0.25);
  stroke-dasharray: 3 5;
  animation-duration: 1.2s;
}
@keyframes dash-flow {
  to { stroke-dashoffset: -24; }
}

/* Particules de données */
.sol-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.sol-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-blue);
  box-shadow: 0 0 6px rgba(37,99,235,0.7);
  left: 100%;
  animation: particle-flow-left 3s linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
.sol-particles--right .sol-particle {
  left: 0%;
  animation-name: particle-flow-right;
}

/* Décalage vertical selon la piste */
.sol-particle[style*="--track:0"] { top: 16%; }
.sol-particle[style*="--track:1"] { top: 48%; }
.sol-particle[style*="--track:2"] { top: 80%; }

@keyframes particle-flow-left {
  0%   { left: 100%; opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: -10%; opacity: 0; }
}
@keyframes particle-flow-right {
  0%   { left: 0%; opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* Nœud central */
.sol-core {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.sol-core-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(37,99,235,0.15);
  animation: ring-pulse 3s ease-in-out infinite;
}
.sol-core-ring--1 {
  width: 90px; height: 90px;
  border-color: rgba(37,99,235,0.25);
  animation-delay: 0s;
}
.sol-core-ring--2 {
  width: 115px; height: 115px;
  border-color: rgba(37,99,235,0.12);
  animation-delay: 0.6s;
}
.sol-core-ring--3 {
  width: 140px; height: 140px;
  border-color: rgba(37,99,235,0.06);
  animation-delay: 1.2s;
}
@keyframes ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.05); opacity: 0.6; }
}

.sol-core-inner {
  position: relative;
  z-index: 4;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--color-navy);
  border: 2px solid rgba(37,99,235,0.5);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.1), var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.sol-core-hex {
  font-size: 1.3rem;
  color: #60a5fa;
  line-height: 1;
}
.sol-core-label {
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
}
.sol-core-sub {
  font-size: 7px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.1em;
}

/* ── Piliers détaillés ── */
.sol-pillars-detail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.sol-detail-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.sol-detail-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.sol-detail-card[data-color="blue"]::after   { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.sol-detail-card[data-color="purple"]::after { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.sol-detail-card[data-color="green"]::after  { background: linear-gradient(90deg, #16a34a, #4ade80); }

.sol-detail-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.sol-detail-card:hover::after { opacity: 1; }

/* Header */
.sdc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sdc-num {
  font-size: var(--font-size-4xl);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-bg-alt);
  -webkit-text-stroke: 1px var(--color-border);
}
.sdc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  border: 1px solid var(--color-border);
}
.sol-detail-card[data-color="blue"]   .sdc-icon { color: var(--color-blue);   border-color: #bfdbfe; background: #eff6ff; }
.sol-detail-card[data-color="purple"] .sdc-icon { color: var(--color-purple); border-color: #ddd6fe; background: #f5f3ff; }
.sol-detail-card[data-color="green"]  .sdc-icon { color: var(--color-green);  border-color: #bbf7d0; background: #f0fdf4; }

.sdc-title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-navy);
}
.sdc-lead {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}
.sdc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sdc-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.5;
}
.sdc-list li .fa-check {
  font-size: 10px;
  color: var(--color-green);
  margin-top: 4px;
  flex-shrink: 0;
}

/* ── Visuels inline ── */
.sdc-visual {
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
}

/* UNIFY : roue rayonnante */
.sdc-visual--unify {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sdv-hub {
  position: absolute;
  width: 44px;
  height: 44px;
  background: var(--color-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 0 0 6px rgba(37,99,235,0.1);
}
.sdv-hub .logo-hex { color: #60a5fa; font-size: 1.2rem; }

.sdv-spokes { position: absolute; width: 100%; height: 100%; }
.sdv-spoke {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-text-muted);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%)
    rotate(var(--a))
    translateX(46px)
    rotate(calc(-1 * var(--a)));
  transition: all var(--transition-base);
  animation: spoke-pulse 4s ease infinite;
  animation-delay: calc(var(--a) / 60deg * 0.3s);
}
@keyframes spoke-pulse {
  0%, 100% { border-color: var(--color-border); }
  50%       { border-color: #bfdbfe; color: var(--color-blue); }
}

.sdv-orbit-ring {
  position: absolute;
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 1px dashed rgba(37,99,235,0.2);
  animation: orbit-spin 12s linear infinite;
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* ANALYSE : mini chart avec anomalie */
.sdc-visual--analyse { padding: var(--space-3) var(--space-4); }
.sdv-chart { position: relative; }
.sdv-chart-line { position: relative; }
.sdv-chart-line svg { width: 100%; height: 60px; }

.sdv-chart-polyline {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw-line 2s ease forwards;
  animation-delay: 0.5s;
}
.sdv-chart-polyline--predict {
  stroke: #a78bfa;
  stroke-dasharray: 5 4;
  stroke-width: 1.5;
  stroke-dashoffset: 0;
  animation: none;
}
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

.sdv-anomaly-dot {
  fill: #ef4444;
  filter: drop-shadow(0 0 4px rgba(239,68,68,0.6));
  animation: anomaly-blink 1.5s ease infinite;
}
@keyframes anomaly-blink {
  0%, 100% { opacity: 1; r: 5; }
  50%       { opacity: 0.4; r: 7; }
}

.sdv-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  font-weight: 700;
  color: #ef4444;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  margin-top: var(--space-2);
}
.sdv-alert-badge i { animation: anomaly-blink 1.5s ease infinite; }

.sdv-metrics-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.sdv-metric { text-align: center; flex: 1; }
.sdv-m-val  { display: block; font-size: var(--font-size-base); font-weight: 800; color: #60a5fa; }
.sdv-m-lbl  { display: block; font-size: 9px; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }

/* AGIR : liste de tâches */
.sdc-visual--agir {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}
.sdv-task {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}
.sdv-task--checked { opacity: 0.55; }
.sdv-task--active  { border-color: rgba(37,99,235,0.4); background: rgba(37,99,235,0.12); }

.sdv-task-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.sdv-check--done   { background: var(--color-green); border-color: var(--color-green); color: #fff; }
.sdv-check--active {
  border-color: var(--color-blue);
  animation: check-spin 1.5s linear infinite;
  background: conic-gradient(var(--color-blue) 60%, transparent 60%);
}
@keyframes check-spin { to { transform: rotate(360deg); } }

.sdv-task-content { flex: 1; min-width: 0; }
.sdv-task-title { font-size: 11px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdv-task-meta  { font-size: 9px; color: var(--color-text-light); margin-top: 1px; }

.sdv-task-score {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.sdv-score--high { background: rgba(22,163,74,0.12); color: var(--color-green); }
.sdv-score--mid  { background: rgba(202,138,4,0.12);  color: var(--color-yellow); }
.sdv-score--low  { background: rgba(100,116,139,0.1); color: var(--color-text-light); }

/* Stat compteur */
.sdc-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.sdc-stat-val  {
  font-size: var(--font-size-4xl);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--color-navy);
  line-height: 1;
}
.sdc-stat-unit { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-blue); }
.sdc-stat-label { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-left: var(--space-2); }

/* Responsive solution */
@media (max-width: 1024px) {
  .sol-pillars-detail { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .sol-pipeline { display: none; }
}
@media (max-width: 768px) {
  .sol-pillars-detail { grid-template-columns: 1fr; }
}

/* Anciens styles conservés pour compatibilité (hors usage) */
.solution-grid,
.solution-pillar,
.pillar-icon,
.pillar-number,
.pillar-title,
.pillar-desc,
.solution-divider,
.divider-line,
.divider-dot { display: none; }

/* ============================================================
   12. FONCTIONNALITÉS (TABS)
============================================================ */
.features-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
}
.features-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  transition: all var(--transition-base);
  flex-shrink: 0;
}
.tab-btn:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}
.tab-btn--active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.tab-num {
  font-size: var(--font-size-xs);
  font-weight: 700;
  opacity: 0.7;
}

/* Panels */
.feature-panel { display: none; }
.feature-panel--active { display: block; }

.feature-panel__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-md);
}

.feature-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-blue-light);
  color: var(--color-blue);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.feature-badge--purple { background: var(--color-purple-light); color: var(--color-purple); }
.feature-badge--orange { background: var(--color-orange-light); color: var(--color-orange); }
.feature-badge--gray   { background: var(--color-bg-alt); color: var(--color-text-muted); }

.feature-title {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.feature-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-6);
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text);
}
.feature-list li .fa-check {
  width: 18px;
  height: 18px;
  background: var(--color-green-light);
  color: var(--color-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

/* Feature mockups */
.feature-mockup {
  background: var(--color-bg-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  font-size: var(--font-size-xs);
  color: #e2e8f0;
}

.fm-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: #1e293b;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  color: #64748b;
}
.fm-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.fm-dot--red    { background: #ef4444; }
.fm-dot--yellow { background: #eab308; }
.fm-dot--green  { background: #22c55e; }

/* Dashboard mockup */
.feature-mockup--dashboard {
  padding-bottom: var(--space-4);
}
.fm-kpis {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4);
}
.fm-kpi {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}
.fm-kpi-label { font-size: 9px; color: #64748b; }
.fm-kpi-val   { font-size: var(--font-size-base); font-weight: 700; color: #f8fafc; }
.fm-kpi-up    { font-size: 9px; color: #4ade80; }
.fm-kpi-neutral { font-size: 9px; color: #94a3b8; }

.fm-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 80px;
  padding: 0 var(--space-4);
  margin-top: var(--space-2);
}
.fm-bar {
  flex: 1;
  height: var(--h, 50%);
  background: rgba(37,99,235,0.3);
  border-radius: 3px 3px 0 0;
}
.fm-bar--active { background: #2563eb; }

/* Search mockup */
.fm-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(37,99,235,0.4);
  border-radius: var(--radius-lg);
  font-size: 11px;
  color: #94a3b8;
}
.fm-search-bar i { color: #2563eb; }
.fm-cursor {
  animation: blink 1s ease infinite;
  color: #2563eb;
  margin-left: auto;
}
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }

.fm-search-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
}
.fm-search-result--muted { opacity: 0.5; }
.fsr-icon { color: #2563eb; font-size: var(--font-size-base); }
.fsr-title { font-size: 11px; font-weight: 600; color: #f1f5f9; }
.fsr-sub   { font-size: 10px; color: #64748b; margin-top: 2px; }
.fsr-badge { margin-left: auto; color: #22c55e; font-weight: 700; }

/* IA mockup */
.fm-ia-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-2);
  font-size: 11px;
  font-weight: 700;
  color: #a78bfa;
}
.fm-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 11px;
}
.fm-action--high   { background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.2); color: #fca5a5; }
.fm-action--mid    { background: rgba(202,138,4,0.1);  border: 1px solid rgba(202,138,4,0.2);  color: #fde68a; }
.fm-action--low    { background: rgba(22,163,74,0.1);  border: 1px solid rgba(22,163,74,0.2);  color: #86efac; }
.fm-priority { font-size: 10px; flex-shrink: 0; }

/* Modules mockup */
.fm-modules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
}
.fm-module {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform var(--transition-fast);
}
.fm-module:hover { transform: scale(1.03); }
.fm-module--commercial { background: rgba(37,99,235,0.15); color: #93c5fd; }
.fm-module--rh         { background: rgba(124,58,237,0.15); color: #c4b5fd; }
.fm-module--finance    { background: rgba(22,163,74,0.15);  color: #86efac; }
.fm-module--mgmt       { background: rgba(234,88,12,0.15);  color: #fdba74; }
.fm-module i           { font-size: var(--font-size-xl); }

/* ============================================================
   13. CAS D'USAGE
============================================================ */
.usecases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.usecase-card {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.usecase-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.usecase-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-xl);
  background: var(--color-blue-light);
  color: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  margin: 0 auto var(--space-5);
}
.usecase-card h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.usecase-card p {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ============================================================
   14. TARIFS
============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.pricing-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pricing-card--featured {
  background: var(--color-navy);
  border-color: var(--color-blue);
  color: #fff;
  transform: scale(1.04);
  box-shadow: var(--shadow-blue), var(--shadow-xl);
}
.pricing-card--featured:hover { transform: scale(1.04) translateY(-4px); }
.pricing-card--featured .pricing-tier,
.pricing-card--featured .pricing-target { color: rgba(255,255,255,0.7); }
.pricing-card--featured .price-amount { color: #fff; }
.pricing-card--featured .price-unit   { color: rgba(255,255,255,0.6); }
.pricing-card--featured .pricing-features li { color: #e2e8f0; }
.pricing-card--featured .pricing-features--muted { color: rgba(255,255,255,0.3); }
.pricing-card--featured .fa-check { color: #4ade80; }
.pricing-card--featured .fa-times  { color: rgba(255,255,255,0.2); }
.pricing-card--featured .btn--primary {
  background: #fff;
  color: var(--color-navy);
  border-color: #fff;
}
.pricing-card--featured .btn--primary:hover {
  background: #f0f9ff;
  box-shadow: 0 4px 12px rgba(255,255,255,0.3);
}

.pricing-badge-popular {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--color-blue), #60a5fa);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: var(--shadow-blue);
}

.pricing-card__header { margin-bottom: var(--space-6); }
.pricing-tier {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.price-amount {
  font-size: var(--font-size-5xl);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
}
.price-unit {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.pricing-target {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.pricing-features--muted {
  color: var(--color-text-light) !important;
  text-decoration: line-through;
}
.pricing-features .fa-check { color: var(--color-green); font-size: 11px; }
.pricing-features .fa-times  { color: var(--color-text-light); font-size: 11px; }

/* ============================================================
   15. TRACTION / SOCIAL PROOF
============================================================ */
.traction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.traction-badge {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.traction-badge:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.traction-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  background: var(--color-blue-light);
  color: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}
.traction-title {
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.traction-sub { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.beta-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}
.beta-logo {
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  transition: all var(--transition-base);
}
.beta-logo:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   16. CONTACT / FORM
============================================================ */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.contact-subtitle {
  font-size: var(--font-size-base);
  color: rgba(255,255,255,0.7);
  margin-top: var(--space-4);
  margin-bottom: var(--space-8);
  line-height: 1.8;
}

.contact-promises {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact-promises li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  color: rgba(255,255,255,0.85);
}
.contact-promises .fa-check-circle { color: #4ade80; font-size: var(--font-size-lg); }

/* Form */
.contact-form {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  backdrop-filter: blur(10px);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.form-group:last-of-type { margin-bottom: 0; }

.form-group label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  color: #fff;
  width: 100%;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.3); }

.form-group select option { background: var(--color-bg-dark); color: #fff; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.25);
}

.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
}

/* Message d'erreur inline sous chaque champ */
.field-error {
  display: block;
  font-size: var(--font-size-xs);
  color: #f87171;
  margin-top: 5px;
  min-height: 1em;
}

/* Label "facultatif" */
.label-optional {
  font-weight: 400;
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.35);
  margin-left: 4px;
}

/* Erreur globale (réseau / serveur) */
.form-error-global { display: none; }
.form-error-global:not([hidden]) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  color: #fca5a5;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}
.form-error-global .fa-exclamation-triangle {
  color: #f87171;
  flex-shrink: 0;
  margin-top: 2px;
}

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

.contact-form .btn--primary { margin-top: var(--space-5); }

.form-legal {
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.35);
  margin-top: var(--space-4);
  text-align: center;
  line-height: 1.6;
}

/* Succès */
.form-success {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-2xl);
  animation: fadeInUp 0.5s ease;
}
.success-icon {
  font-size: 3rem;
  color: #4ade80;
  margin-bottom: var(--space-4);
}
.form-success h3 {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-3);
}
.form-success p { color: rgba(255,255,255,0.7); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   17. FOOTER
============================================================ */
.footer {
  background: var(--color-bg-dark);
  color: rgba(255,255,255,0.6);
  padding-top: var(--space-16);
}
.footer .navbar__logo { color: #fff; margin-bottom: var(--space-3); }
.footer__tagline {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-2);
}
.footer__location {
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.footer__col h4 {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-4);
  letter-spacing: 0.05em;
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__col a {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition-fast);
}
.footer__col a:hover { color: rgba(255,255,255,0.9); }

.footer__bottom {
  padding: var(--space-6) 0;
  text-align: center;
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.3);
}

/* ============================================================
   18. RESPONSIVE — TABLETTE (≤ 1024px)
============================================================ */
@media (max-width: 1024px) {
  .solution-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .solution-divider {
    flex-direction: row;
    gap: var(--space-3);
  }
  .divider-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-border), transparent);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__content { max-width: 100%; }
  .badge-row { justify-content: center; }
  .hero__cta-group { justify-content: center; }
  .modules-row { justify-content: center; }
  .hero__mockup { display: none; }

  .cards-grid--3       { grid-template-columns: 1fr 1fr; }
  .pricing-grid        { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .pricing-card--featured { transform: none; }
  .pricing-card--featured:hover { transform: translateY(-4px); }
  .traction-grid       { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto var(--space-10); }
  .usecases-grid       { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  .contact-wrapper { grid-template-columns: 1fr; gap: var(--space-10); }

  .footer__inner { grid-template-columns: 1fr; }
  .footer__links { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   19. RESPONSIVE — MOBILE (≤ 768px)
============================================================ */
@media (max-width: 768px) {
  :root { --navbar-height: 64px; }

  .navbar__nav, .navbar__actions { display: none; }
  .burger { display: flex; }

  .section { padding: var(--space-16) 0; }

  .hero { min-height: auto; padding-top: calc(var(--navbar-height) + var(--space-8)); }
  .hero__inner { padding-top: var(--space-8); padding-bottom: var(--space-8); }

  .cards-grid--3 { grid-template-columns: 1fr; }
  .feature-panel__content {
    grid-template-columns: 1fr;
    padding: var(--space-6);
    gap: var(--space-6);
  }
  .features-tabs { flex-wrap: wrap; }
  .tab-btn { font-size: var(--font-size-xs); padding: var(--space-2) var(--space-3); }

  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: var(--space-6); }

  .footer__links { grid-template-columns: 1fr 1fr; gap: var(--space-6); }

  .solution-divider { display: none; }
  .solution-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero__title { font-size: var(--font-size-4xl); }
  .section-title { font-size: var(--font-size-3xl); }
  .footer__links { grid-template-columns: 1fr; }
  .beta-logos { gap: var(--space-2); }
  .beta-logo { font-size: var(--font-size-xs); padding: var(--space-2) var(--space-4); }
}

/* ============================================================
   20. PROFESSIONAL REFINEMENTS — override toward premium B2B
============================================================ */

/* -- Section eyebrow : ligne latérale sobre, pas de pilule colorée -- */
.section-eyebrow {
  background: transparent;
  border-left: 2px solid var(--color-blue);
  border-radius: 0;
  padding: 2px var(--space-3);
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--color-blue);
}
.section-eyebrow--light {
  border-left-color: rgba(255,255,255,0.5);
  background: transparent;
  color: rgba(255,255,255,0.7);
}

/* -- Cartes : angles plus droits, ombres plus subtiles -- */
.problem-card,
.solution-pillar,
.pricing-card,
.feature-panel__content,
.traction-badge,
.usecase-card,
.contact-form,
.feature-mockup,
.ia-demo-frame {
  border-radius: var(--radius-lg);
}

/* -- Icones : moins saturées, plus petites -- */
.problem-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  background: transparent !important;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted) !important;
}
.problem-card__icon--red    { border-color: #fecaca; color: var(--color-red) !important; }
.problem-card__icon--orange { border-color: #fed7aa; color: var(--color-orange) !important; }
.problem-card__icon--yellow { border-color: #fef08a; color: var(--color-yellow) !important; }

.pillar-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xl);
  background: transparent !important;
  border: 1px solid var(--color-border);
}
.pillar-icon--blue   { color: var(--color-blue) !important; border-color: #bfdbfe; }
.pillar-icon--purple { color: var(--color-purple) !important; border-color: #ddd6fe; }
.pillar-icon--green  { color: var(--color-green) !important; border-color: #bbf7d0; }

.usecase-icon {
  width: 46px;
  height: 46px;
  background: transparent !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted) !important;
  font-size: var(--font-size-lg);
}
.traction-icon {
  background: transparent !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted) !important;
}

/* -- Cards hover : plus subtil, sans translateY excessif -- */
.problem-card:hover,
.usecase-card:hover,
.traction-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.solution-pillar:hover { transform: translateY(-3px); }

/* -- Pricing featured : plus sobre -- */
.pricing-card--featured {
  background: var(--color-navy);
  border-color: rgba(37,99,235,0.4);
  transform: scale(1.02);
}
.pricing-card--featured:hover { transform: scale(1.02) translateY(-3px); }

/* -- Navbar logo text spacing -- */
.navbar__logo { letter-spacing: 0.04em; font-size: 1.3rem; font-weight: 900; color: #fff; }

/* -- Hero title : moins de gradient, plus sobre -- */
.hero__title--accent {
  font-style: italic;
  color: var(--color-blue);
  background: none;
  -webkit-text-fill-color: var(--color-blue);
}

/* -- Boutons : coins légèrement moins ronds -- */
.btn { border-radius: var(--radius-md); }
.btn--primary {
  background: var(--color-navy);
  border-color: var(--color-navy);
}
.btn--primary:hover {
  background: var(--color-blue);
  border-color: var(--color-blue);
  box-shadow: 0 4px 16px rgba(37,99,235,0.2);
}

/* -- Chips modules hero : plus sobres -- */
.module-chip {
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.6);
}

/* -- Section backgrounds -- */
.section--gray { background-color: var(--color-bg-alt); }

/* ============================================================
   21. ROADMAP MODULES — Carrousel horizontal premium
============================================================ */

.modules-roadmap {
  padding-bottom: 0;
  background: var(--color-bg-dark);
  overflow: hidden;
}

/* Header bicolonne */
.roadmap-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
  padding-top: var(--space-20);
}
.roadmap-header .section-title,
.roadmap-header .section-subtitle { color: #fff; }
.roadmap-header .section-subtitle { color: rgba(255,255,255,0.55); }

.roadmap-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
  flex-shrink: 0;
}

.roadmap-drag-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.08em;
}
.roadmap-drag-hint i { color: rgba(255,255,255,0.25); }

.roadmap-nav { display: flex; gap: var(--space-2); }
.roadmap-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: var(--font-size-sm);
}
.roadmap-nav-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

/* Viewport & track */
.roadmap-viewport {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  position: relative;
}
.roadmap-viewport.is-dragging { cursor: grabbing; }
.roadmap-viewport::before,
.roadmap-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  pointer-events: none;
  z-index: 2;
}
.roadmap-viewport::before {
  left: 0;
  background: linear-gradient(to right, #0f172a 0%, transparent 100%);
}
.roadmap-viewport::after {
  right: 0;
  background: linear-gradient(to left, #0f172a 0%, transparent 100%);
}

.roadmap-track {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-2) var(--space-8) var(--space-12);
  width: max-content;
  transition: transform 0.1s linear;
  will-change: transform;
  user-select: none;
}
.roadmap-track.no-transition { transition: none !important; }

/* Carte module */
.module-card {
  width: 300px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
  position: relative;
  overflow: hidden;
}
.module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.module-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-3px);
}
.module-card:hover::before { opacity: 1; }

/* Glow couleur selon statut */
.module-card[data-status="mvp"]  { box-shadow: 0 0 0 0 transparent; }
.module-card[data-status="mvp"]:hover  { box-shadow: 0 8px 32px rgba(37,99,235,0.12); }
.module-card[data-status="v1"]:hover   { box-shadow: 0 8px 32px rgba(124,58,237,0.12); }
.module-card[data-status="v1-5"]:hover { box-shadow: 0 8px 32px rgba(22,163,74,0.10); }
.module-card[data-status="v2"]:hover   { box-shadow: 0 8px 32px rgba(234,88,12,0.10); }
.module-card[data-status="v3"]:hover   { box-shadow: 0 8px 32px rgba(100,116,139,0.12); }

/* Header de la carte */
.mc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.mc-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  border: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* Couleurs icônes selon statut */
.module-card[data-status="mvp"]  .mc-icon { background: rgba(37,99,235,0.15); color: #60a5fa; border-color: rgba(37,99,235,0.25); }
.module-card[data-status="v1"]   .mc-icon { background: rgba(124,58,237,0.15); color: #a78bfa; border-color: rgba(124,58,237,0.25); }
.module-card[data-status="v1-5"] .mc-icon { background: rgba(22,163,74,0.15); color: #4ade80; border-color: rgba(22,163,74,0.25); }
.module-card[data-status="v2"]   .mc-icon { background: rgba(234,88,12,0.15); color: #fb923c; border-color: rgba(234,88,12,0.25); }
.module-card[data-status="v3"]   .mc-icon { background: rgba(100,116,139,0.1); color: #94a3b8; border-color: rgba(100,116,139,0.2); }

/* Badge statut */
.mc-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-full);
}
.mc-status--mvp  { background: rgba(37,99,235,0.15); color: #60a5fa; border: 1px solid rgba(37,99,235,0.25); }
.mc-status--v1   { background: rgba(124,58,237,0.15); color: #a78bfa; border: 1px solid rgba(124,58,237,0.25); }
.mc-status--v1-5 { background: rgba(22,163,74,0.15); color: #4ade80; border: 1px solid rgba(22,163,74,0.25); }
.mc-status--v2   { background: rgba(234,88,12,0.1); color: #fb923c; border: 1px solid rgba(234,88,12,0.2); }
.mc-status--v3   { background: rgba(100,116,139,0.1); color: #94a3b8; border: 1px solid rgba(100,116,139,0.2); }

/* Catégorie */
.mc-category {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  font-weight: 600;
}

/* Nom du module */
.mc-name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.3;
}

/* Description */
.mc-desc {
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  flex: 1;
}

/* Features list */
.mc-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mc-feature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.mc-feature::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* Footer de la carte */
.mc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: auto;
}
.mc-timeline {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.mc-timeline i { font-size: 10px; }

/* Barre de progression */
.mc-progress-wrap {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-full);
  margin-left: var(--space-4);
  overflow: hidden;
}
.mc-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.module-card[data-status="mvp"]  .mc-progress-fill { background: #2563eb; }
.module-card[data-status="v1"]   .mc-progress-fill { background: #7c3aed; }
.module-card[data-status="v1-5"] .mc-progress-fill { background: #16a34a; }
.module-card[data-status="v2"]   .mc-progress-fill { background: #ea580c; }
.module-card[data-status="v3"]   .mc-progress-fill { background: #475569; }

/* Barre de scroll globale en bas */
.roadmap-progress-bar-wrap {
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-full);
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: var(--space-8);
}
.roadmap-progress-bar {
  height: 100%;
  background: var(--color-blue);
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 0.15s linear;
}

/* Responsive carrousel */
@media (max-width: 768px) {
  .roadmap-header { flex-direction: column; align-items: flex-start; }
  .roadmap-header-right { align-items: flex-start; flex-direction: row; width: 100%; justify-content: space-between; }
  .module-card { width: 270px; }
  .roadmap-track { padding: var(--space-2) var(--space-6) var(--space-10); }
}
@media (max-width: 480px) {
  .module-card { width: 240px; }
}

/* ============================================================
   22. IA DEMO SECTION
============================================================ */

/* Fond section */
.ia-demo-section {
  background: linear-gradient(180deg, var(--color-bg) 0%, #0a1530 100%);
  overflow: hidden;
  position: relative;
}
.ia-demo-section::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(37,99,235,0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Chips de scénarios */
.ia-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}
.ia-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-base);
}
.ia-chip:hover { border-color: var(--color-blue); color: var(--color-blue); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ia-chip--active { background: var(--color-blue); border-color: var(--color-blue); color: #fff; box-shadow: var(--shadow-blue); }
.ia-chip i { font-size: var(--font-size-base); }

/* Cadre principal */
.ia-demo-frame {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto var(--space-8);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0,0,0,0.06);
  border: 1px solid var(--color-border);
  background: #0f172a;
}

/* Barre navigateur */
.ia-frame-titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: #1e293b;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ia-frame-dots { display: flex; gap: var(--space-2); }
.ifd-dot { width: 12px; height: 12px; border-radius: 50%; }
.ifd-dot--red    { background: #ef4444; }
.ifd-dot--yellow { background: #eab308; }
.ifd-dot--green  { background: #22c55e; }
.ia-frame-url {
  flex: 1;
  text-align: center;
  font-size: var(--font-size-xs);
  color: #475569;
  background: rgba(255,255,255,0.05);
  padding: var(--space-1) var(--space-6);
  border-radius: var(--radius-full);
  max-width: 320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.ia-frame-url i { color: #22c55e; font-size: 10px; }
.ia-frame-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #475569;
  font-size: var(--font-size-base);
}
.ia-frame-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue), var(--color-purple));
}

/* Corps dashboard */
.ia-dashboard-body {
  display: flex;
  height: 560px;
}

/* ── Sidebar ── */
.ia-sidebar {
  width: 160px;
  background: #080d1a;
  display: flex;
  flex-direction: column;
  padding: 14px 0;
  border-right: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.ia-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 8px;
}
.ia-sidebar-brand {
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.06em;
}
.ia-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}
.ia-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  color: #334155;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ia-nav-item i { font-size: 11px; width: 13px; text-align: center; flex-shrink: 0; }
.ia-nav-item:hover { background: rgba(255,255,255,0.04); color: #64748b; }
.ia-nav-item--active { background: rgba(37,99,235,0.15); color: #60a5fa; font-weight: 600; }
.ia-nav-item--ia { color: #4c1d95; }
.ia-nav-item--ia:hover { color: #a78bfa; background: rgba(124,58,237,0.08); }

/* ── Zone principale ── */
.ia-main-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Topbar module */
.ia-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #0b1120;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.ia-topbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ia-topbar-module {
  font-size: 11px;
  font-weight: 700;
  color: #60a5fa;
}
.ia-topbar-page {
  font-size: 11px;
  color: #334155;
}
.ia-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ia-topbar-date {
  font-size: 10px;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ia-topbar-badge {
  font-size: 12px;
  color: #334155;
}
.ia-topbar-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}

/* Contenu = dashboard + chat en overlay */
.ia-dash-content {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Dashboard grille (fond) */
.ia-dash-grid {
  position: absolute;
  inset: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

/* KPIs */
.ia-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  flex-shrink: 0;
}
.ia-kpi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.ia-kpi--blue   { border-left: 3px solid #2563eb; }
.ia-kpi--purple { border-left: 3px solid #7c3aed; }
.ia-kpi--green  { border-left: 3px solid #16a34a; }
.ia-kpi--orange { border-left: 3px solid #ea580c; }
.ia-kpi-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.ia-kpi--blue   .ia-kpi-icon { background: rgba(37,99,235,0.2);  color: #60a5fa; }
.ia-kpi--purple .ia-kpi-icon { background: rgba(124,58,237,0.2); color: #a78bfa; }
.ia-kpi--green  .ia-kpi-icon { background: rgba(22,163,74,0.2);  color: #4ade80; }
.ia-kpi--orange .ia-kpi-icon { background: rgba(234,88,12,0.2);  color: #fb923c; }
.ia-kpi-label  { font-size: 9px;  color: #475569; margin-bottom: 2px; }
.ia-kpi-value  { font-size: 13px; font-weight: 700; color: #f1f5f9; line-height: 1.2; }
.ia-kpi-trend  { font-size: 9px; margin-top: 2px; display: flex; align-items: center; gap: 3px; }
.ia-trend-up      { color: #4ade80; }
.ia-trend-warn    { color: #fbbf24; }
.ia-trend-neutral { color: #64748b; }

/* Rows de widgets */
.ia-widgets-row {
  display: grid;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.ia-widgets-row:first-of-type { grid-template-columns: 1fr 1fr 1fr; }
.ia-widgets-row:last-of-type  { grid-template-columns: 1fr 1fr; }

/* Widget base */
.ia-widget {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
  min-height: 0;
}

.ia-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.ia-widget-title {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.02em;
}

/* Badges widgets */
.ia-wbadge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(255,255,255,0.05);
  color: #475569;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ia-wbadge--live   { background: rgba(22,163,74,0.15);  color: #4ade80; }
.ia-wbadge--warn   { background: rgba(234,88,12,0.15);  color: #fb923c; }
.ia-wbadge--purple { background: rgba(124,58,237,0.15); color: #a78bfa; }
.ia-wbadge--blue   { background: rgba(37,99,235,0.15);  color: #60a5fa; }

/* Live dot */
.ia-live-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse-dot 2s ease infinite;
}

/* Sparkbars (graphique flux) */
.ia-sparkbars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 52px;
  padding-bottom: 16px;
  flex-shrink: 0;
}
.ia-sbar {
  flex: 1;
  height: var(--h);
  background: rgba(37,99,235,0.2);
  border-radius: 3px 3px 0 0;
  position: relative;
}
.ia-sbar--curr { background: #2563eb; }
.ia-sbar span {
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: #334155;
  white-space: nowrap;
}

/* Flux rows */
.ia-flux-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.ia-flux-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #475569;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ia-flux-in  { color: #4ade80; font-weight: 700; }
.ia-flux-out { color: #f87171; font-weight: 700; }
.ia-flux-net { border-top: 1px solid rgba(255,255,255,0.07); border-bottom: none; padding-top: 4px; }
.ia-flux-net span:last-child { color: #e2e8f0; font-weight: 700; }

/* Créances */
.ia-creance-list { display: flex; flex-direction: column; gap: 5px; }
.ia-creance {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  font-size: 10px;
}
.ia-creance--late { background: rgba(239,68,68,0.07); }
.ia-cr-client { flex: 1; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-cr-amt    { font-weight: 700; color: #cbd5e1; white-space: nowrap; font-size: 10px; }
.ia-cr-delay  {
  font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  background: rgba(255,255,255,0.05); color: #475569;
}
.ia-cr-delay--late { background: rgba(239,68,68,0.15); color: #f87171; }
.ia-cr-delay--ok   { background: rgba(22,163,74,0.12); color: #4ade80; }

/* Recommandations IA */
.ia-reco-list { display: flex; flex-direction: column; gap: 5px; }
.ia-reco {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 10px;
  color: #64748b;
  line-height: 1.45;
  padding: 6px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.ia-reco i { font-size: 10px; margin-top: 1px; flex-shrink: 0; color: #fbbf24; }
.ia-reco--urgent { background: rgba(239,68,68,0.07); }
.ia-reco--urgent i { color: #f87171; }

/* Dépenses */
.ia-dep-list { display: flex; flex-direction: column; gap: 6px; }
.ia-dep {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ia-dep-icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}
.ia-dep-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ia-dep-name  { font-size: 10px; font-weight: 600; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-dep-date  { font-size: 9px; color: #334155; }
.ia-dep-amt   { font-size: 11px; font-weight: 700; color: #64748b; white-space: nowrap; }
.ia-dep-amt--high { color: #f87171; }

/* Pipeline */
.ia-pipeline { display: flex; flex-direction: column; gap: 8px; }
.ia-plstage {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
}
.ia-pls-label { width: 82px; color: #334155; white-space: nowrap; flex-shrink: 0; }
.ia-pls-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  overflow: hidden;
}
.ia-pls-fill {
  height: 100%;
  width: var(--w);
  background: var(--c, #2563eb);
  border-radius: 100px;
}
.ia-pls-count { font-size: 9px; font-weight: 700; color: #475569; width: 14px; text-align: right; flex-shrink: 0; }

/* ── Chat panel — Premier plan ── */
.ia-chat-panel {
  position: absolute;
  right: 10px;
  top: 10px;
  bottom: 10px;
  width: 316px;
  background: rgba(7, 12, 26, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.09);
  display: flex;
  flex-direction: column;
  z-index: 20;
  overflow: hidden;
}

/* Header chat */
.ia-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.ia-chat-header-left { display: flex; align-items: center; gap: 10px; }
.ia-chat-brain-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(37,99,235,0.4), rgba(124,58,237,0.4));
  border: 1px solid rgba(124,58,237,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
  font-size: 14px;
  animation: brain-pulse 3s ease infinite;
}
@keyframes brain-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
  50%       { box-shadow: 0 0 0 6px rgba(124,58,237,0.15); }
}
.ia-chat-title  { font-size: 13px; font-weight: 700; color: #f1f5f9; }
.ia-chat-status {
  font-size: 10px; color: #475569;
  display: flex; align-items: center; gap: 4px;
}
.ia-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse-dot 2s ease infinite;
}
.ia-token-badge {
  font-size: 10px; font-weight: 700;
  color: #a78bfa;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.25);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; gap: 4px;
}
.ia-token-badge i { color: #fbbf24; }

/* Zone messages */
.ia-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  min-height: 0;
}
.ia-messages::-webkit-scrollbar { width: 4px; }
.ia-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* Bulles */
.ia-msg {
  display: flex;
  gap: 10px;
  animation: msg-appear 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes msg-appear {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ia-msg--user { flex-direction: row-reverse; }
.ia-msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  align-self: flex-end;
}
.ia-msg--user .ia-msg-avatar {
  background: linear-gradient(135deg, var(--color-blue), var(--color-purple));
  color: #fff; font-weight: 700;
}
.ia-msg--ai .ia-msg-avatar {
  background: linear-gradient(135deg, rgba(37,99,235,0.3), rgba(124,58,237,0.3));
  color: #a78bfa;
  border: 1px solid rgba(124,58,237,0.3);
  font-size: 11px;
}
.ia-msg-content { max-width: 78%; display: flex; flex-direction: column; gap: 6px; }
.ia-msg--user .ia-msg-content { align-items: flex-end; }
.ia-msg-bubble {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 11px;
  line-height: 1.6;
}
.ia-msg--user .ia-msg-bubble {
  background: #2563eb;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ia-msg--ai .ia-msg-bubble {
  background: rgba(255,255,255,0.06);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom-left-radius: 4px;
}

/* Indicateur frappe */
.ia-typing {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 13px;
}
.ia-typing-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #475569;
  animation: typing-bounce 1.2s ease infinite;
}
.ia-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ia-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

/* Card document */
.ia-doc-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(37,99,235,0.1);
  border: 1px solid rgba(37,99,235,0.25);
  border-radius: 10px;
  animation: msg-appear 0.4s ease both;
  animation-delay: 0.1s;
}
.ia-doc-icon {
  width: 34px; height: 34px;
  background: rgba(37,99,235,0.2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #60a5fa; font-size: 14px; flex-shrink: 0;
}
.ia-doc-name { font-size: 11px; font-weight: 700; color: #f1f5f9; }
.ia-doc-meta { font-size: 10px; color: #475569; }
.ia-doc-badge {
  margin-left: auto;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(22,163,74,0.2); color: #4ade80;
  border: 1px solid rgba(22,163,74,0.3);
}

/* Boutons d'action IA */
.ia-action-btns {
  display: flex; gap: 6px; flex-wrap: wrap;
  animation: msg-appear 0.4s ease both;
  animation-delay: 0.15s;
}
.ia-action-btn {
  font-size: 11px; font-weight: 600;
  padding: 5px 13px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}
.ia-action-btn--primary { background: #2563eb; color: #fff; }
.ia-action-btn--primary:hover { background: #1d4ed8; }
.ia-action-btn--ghost {
  background: rgba(255,255,255,0.08);
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,0.1);
}
.ia-action-btn--ghost:hover { background: rgba(255,255,255,0.12); color: #e2e8f0; }

/* Barre de saisie */
.ia-input-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.ia-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 7px 12px;
  min-height: 34px;
}
.ia-input-text {
  flex: 1;
  font-size: 11px;
  color: #e2e8f0;
  line-height: 1.4;
  word-break: break-word;
}
.ia-cursor {
  font-size: 13px;
  color: #60a5fa;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.ia-send-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #2563eb;
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.ia-send-btn:hover { background: #1d4ed8; }

/* Dots de scénario */
.ia-scenario-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.ia-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}
.ia-dot:hover { background: var(--color-blue); transform: scale(1.3); }
.ia-dot--active { background: var(--color-blue); transform: scale(1.3); }

/* Responsive */
@media (max-width: 768px) {
  .ia-demo-frame { border-radius: var(--radius-lg); }
  .ia-dashboard-body { height: 480px; }
  .ia-sidebar { width: 44px; }
  .ia-sidebar-brand { display: none; }
  .ia-nav-item span { display: none; }
  .ia-nav-item { justify-content: center; padding: 8px; }
  .ia-chat-panel { width: 260px; }
  .ia-widgets-row:first-of-type { grid-template-columns: 1fr 1fr; }
  .ia-widget--reco { display: none; }
  .ia-widgets-row:last-of-type { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ia-dashboard-body { height: 420px; }
  .ia-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .ia-chat-panel { width: 220px; right: 6px; top: 6px; bottom: 6px; }
}

/* ============================================================
   25. TRACTION — Quotes grid
============================================================ */

.quotes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: 0;
}
/* Dernière ligne : centrer la card stat quand elle est seule */
.quotes-grid > :last-child:nth-child(3n+1) {
  grid-column: 2;
}

.quote-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.quote-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37,99,235,0.2);
}

.quote-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.quote-card__initial {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--color-navy);
  color: #fff;
  font-weight: 800;
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.quote-card__icon {
  color: var(--color-blue);
  opacity: 0.3;
  font-size: var(--font-size-lg);
}
.quote-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  flex: 1;
  font-style: normal;
}
.quote-card__author {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.quote-card__name {
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.quote-card__role {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Stat card */
.quote-card--stat {
  background: var(--color-navy);
  border-color: rgba(37,99,235,0.35);
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.qcs-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: #60a5fa;
  background: rgba(37,99,235,0.18);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}
.qcs-number {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}
.qcs-label {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: #fff;
}
.qcs-sub {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.5);
}
.qcs-footer { margin-top: auto; }
.qcs-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.55);
}

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

/* ── Mobile : grille témoignages 1 colonne ── */
@media (max-width: 768px) {
  .quotes-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile : section jauge — refonte complète ── */
.prob-mobile-bar { display: none; } /* caché sur desktop */

@media (max-width: 768px) {
  /* Cacher la colonne gauche (jauge verticale + KPIs) */
  .prob-left { display: none !important; }

  /* Layout 1 colonne */
  .prob-layout { grid-template-columns: 1fr !important; gap: var(--space-4); }
  .prob-right  { width: 100%; }

  /* Boutons bascule mobile */
  .prob-mobile-bar {
    display: block;
    grid-column: 1 / -1;
    margin-bottom: var(--space-4);
  }
  .pmb-btns {
    display: flex;
    gap: var(--space-2);
  }
  .pmb-btn {
    flex: 1;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: all var(--transition-base);
  }
  .pmb-btn--green.is-active {
    background: rgba(34,197,94,0.15);
    border-color: #22c55e;
    color: #22c55e;
  }
  .pmb-btn--red.is-active {
    background: rgba(239,68,68,0.15);
    border-color: #ef4444;
    color: #ef4444;
  }

  /* Grille outils : 2 colonnes sur mobile */
  .tool-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-2); }
}

/* ── Mobile : carousel quotes (viewport + translateX) ── */
.quotes-mobile-viewport { display: block; } /* desktop : ne sert pas, caché si absent */

@media (max-width: 768px) {
  .quotes-mobile-viewport {
    overflow: hidden;
    position: relative;
    width: 100%;
  }
  /* Le grid devient le track */
  .quotes-mobile-viewport .quotes-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: 16px;
    will-change: transform;
    cursor: grab;
    user-select: none;
  }
  .quotes-mobile-viewport .quotes-grid > * {
    flex: 0 0 82%;
    max-width: 82%;
  }
  .quotes-mobile-viewport .quotes-grid > :last-child:nth-child(3n+1) {
    grid-column: auto;
  }
}

/* ============================================================
   26. SOLUTION — Tabs adaptations
============================================================ */

/* Sol tabs share .features-tabs / .tab-btn / .feature-panel CSS */
/* Override background to fit dark sol-v2 section */
#solution .feature-panel__content {
  background: rgba(13, 26, 46, 0.8);
  border-color: rgba(255,255,255,0.09);
}

/* Bigger visual in sol tabs */
.sol-tab-visual {
  height: 280px;
  background: rgba(8,15,30,0.6);
  border-color: rgba(255,255,255,0.08);
}
.sol-tab-visual .sdv-spoke {
  background: rgba(13,26,46,0.95);
  border-color: rgba(255,255,255,0.12);
  color: #94a3b8;
}
.sol-tab-visual .sdv-hub {
  background: #1a3a6b;
}

/* Sol tab stat */
.sol-tab-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.sol-tab-stat .sdc-stat-val {
  font-size: var(--font-size-4xl);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #60a5fa;
}
.sol-tab-stat .sdc-stat-unit {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: #60a5fa;
}
.sol-tab-stat .sdc-stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* feature-badge green variant */
.feature-badge--green {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
}

/* feature-badge default adapts to dark */
.feature-badge {
  background: rgba(37,99,235,0.15);
  color: #60a5fa;
}
.feature-badge--purple {
  background: rgba(124,58,237,0.15);
  color: #a78bfa;
}

/* feature-title color on dark */
.feature-title { color: #fff; }
.feature-desc  { color: var(--color-text-muted); }
.feature-list li { color: #cbd5e1; }

/* tab-btn dark adaptations */
.tab-btn {
  background: rgba(13,26,46,0.8);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55);
}
.tab-btn:hover {
  border-color: #2563eb;
  color: #60a5fa;
  background: rgba(37,99,235,0.1);
}
.tab-btn--active {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,0.35);
}

/* feature-panel__content on dark sol section */
.feature-panel__content {
  background: rgba(13,26,46,0.7);
  border-color: rgba(255,255,255,0.08);
}

/* But light on fonctionnalites section */
#fonctionnalites .feature-panel__content {
  background: #fff;
  border-color: #e2e8f0;
}
#fonctionnalites .tab-btn {
  background: #fff;
  border-color: #e2e8f0;
  color: #64748b;
}
#fonctionnalites .tab-btn:hover {
  border-color: #2563eb;
  color: #2563eb;
  background: #eff6ff;
}
#fonctionnalites .tab-btn--active {
  background: #1a3a6b;
  border-color: #1a3a6b;
  color: #fff;
  box-shadow: var(--shadow-md);
}
#fonctionnalites .feature-title { color: #0f172a; }
#fonctionnalites .feature-desc  { color: #64748b; }
#fonctionnalites .feature-list li { color: #0f172a; }
#fonctionnalites .feature-badge { background: #dbeafe; color: #1d4ed8; }

/* ============================================================
   27. PAGES LÉGALES (mentions légales, CGU, politique conf.)
============================================================ */

.legal-main {
  min-height: 100vh;
  padding-top: calc(var(--navbar-height) + var(--space-16));
  padding-bottom: var(--space-24);
  background: var(--color-bg);
}

.legal-hero {
  text-align: center;
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-12);
}

.legal-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
}

.legal-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.legal-content {
  max-width: 760px;
  margin: 0 auto;
}

.legal-intro {
  background: rgba(37,99,235,0.07);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-10);
}
.legal-intro p {
  color: #cbd5e1;
  line-height: 1.75;
  margin-bottom: var(--space-3);
}
.legal-intro p:last-child { margin-bottom: 0; }

.legal-section {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
}
.legal-section:last-of-type {
  border-bottom: none;
}

.legal-section h2 {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-blue);
}

.legal-section h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: #e2e8f0;
  margin: var(--space-5) 0 var(--space-3);
}

.legal-section p {
  color: #94a3b8;
  line-height: 1.8;
  margin-bottom: var(--space-4);
}
.legal-section p:last-child { margin-bottom: 0; }

.legal-section a {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-section a:hover { color: #93c5fd; }

.legal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.legal-list li {
  color: #94a3b8;
  padding-left: var(--space-5);
  position: relative;
  line-height: 1.7;
}
.legal-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--color-blue);
  font-weight: 700;
}

.legal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.legal-card p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: #94a3b8;
}
.legal-card strong { color: #e2e8f0; }

/* Tableau */
.legal-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.legal-table th {
  background: var(--color-surface);
  color: #e2e8f0;
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.legal-table td {
  color: #94a3b8;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  line-height: 1.6;
}
.legal-table tr:last-child td { border-bottom: none; }
.legal-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }

/* Liens de navigation bas de page */
.legal-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-10);
  margin-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}
.legal-nav-links a {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #60a5fa;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.legal-nav-links a:hover { color: #93c5fd; }

@media (max-width: 600px) {
  .legal-nav-links { flex-direction: column; align-items: flex-start; }
  .legal-main { padding-top: calc(var(--navbar-height) + var(--space-8)); }
}