/* ============================================
   NULLBOT LANDING PAGE — Ultra Modern B&W
   Visual language mirrored from nullcod.com
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d1d1d6;
  --gray-400: #a1a1aa;
  --gray-600: #52525b;
  --gray-800: #27272a;
  --live: #22c55e;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--black);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

h1 { font-size: clamp(2.45rem, 5.8vw, 5rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 3rem); }
h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }

p {
  color: var(--gray-600);
  font-size: 0.9875rem;
  line-height: 1.68;
  overflow-wrap: anywhere;
}

.text-outline {
  -webkit-text-stroke: 2px var(--black);
  color: transparent;
}

::selection {
  background: var(--black);
  color: var(--white);
}

a { color: inherit; }

/* ============================================
   LAYOUT
   ============================================ */

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--black);
  color: var(--white);
  padding: 0.65rem 1rem;
  border-radius: 0 0 10px 0;
  font-size: 0.85rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out-expo),
              background 0.15s var(--ease-in-out),
              box-shadow 0.15s var(--ease-in-out);
  white-space: normal;
  text-align: center;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.97); }

/* Primary */
.btn:not(.btn-ghost):not(.btn-outline) {
  background: var(--black);
  color: var(--white);
  padding: 0.65rem 1.25rem;
  border-radius: 100px;
}
.btn:not(.btn-ghost):not(.btn-outline):hover {
  background: var(--gray-800);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--black);
  padding: 0.65rem 1.25rem;
  border-radius: 100px;
  border: 1.5px solid var(--gray-200);
}
.btn-ghost:hover {
  border-color: var(--black);
  transform: translateY(-1px);
}

/* Sizes */
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; border-radius: 100px; }
.btn-lg { padding: 0.8rem 1.35rem; font-size: 0.95rem; border-radius: 14px; }

/* ============================================
   NAVIGATION
   ============================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1rem 2rem;
  transition: background 0.3s var(--ease-in-out),
              backdrop-filter 0.3s var(--ease-in-out),
              border-bottom 0.3s;
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--gray-200);
}

.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--black);
  text-decoration: none;
  flex-shrink: 0;
}

/* Brand mark — the "N" monogram square, matching the app icon / NullBotLogo */
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--black);
  color: var(--white);
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
.logo-word {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--black);
}

/* Nav brand: real nullbot wordmark image (replaces the N monogram) */
.nav-logo-img {
  height: 30px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
}

.nav-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-600);
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--black); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.nav-actions .btn { white-space: nowrap; }

/* ============================================
   HERO
   ============================================ */

.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 3rem;
  max-width: 1160px;
  margin: 0 auto;
  padding: 8rem 2rem 4rem;
  position: relative;
}

.hero-noise {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.875rem;
  border-radius: 100px;
  margin-bottom: 1.75rem;
  text-transform: uppercase;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.hero-title {
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.hero-sub {
  font-size: 1rem;
  max-width: 540px;
  margin-bottom: 2rem;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
  flex-wrap: wrap;
}

.stat { display: flex; flex-direction: column; gap: 0.2rem; }
.stat-num { font-size: 1rem; font-weight: 800; color: var(--black); letter-spacing: -0.03em; }
.stat-label { font-size: 0.75rem; color: var(--gray-400); font-weight: 500; }
.stat-divider { width: 1px; height: 32px; background: var(--gray-200); }

/* ============================================
   HERO VISUAL — LOOPING AGENT VIDEO
   ============================================ */

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Top-align the visual in its grid cell so the card's top lines up with
     the top of the text column (badge/title) instead of sitting centered
     and lower. A small offset drops it just below the badge baseline. */
  align-self: start;
  margin-top: 2.5rem;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-16px); }
}

.media-wrapper {
  position: relative;
  width: min(500px, 100%);
}

/* The "bubble" — a frameless rounded container holding the looping video */
.media-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.03),
    0 30px 70px rgba(0,0,0,0.22),
    0 12px 28px rgba(0,0,0,0.12);
  z-index: 2;
  transition: transform 0.4s var(--ease-out-expo),
              box-shadow 0.4s var(--ease-out-expo);
}
.media-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 42px 90px rgba(0,0,0,0.26),
    0 16px 36px rgba(0,0,0,0.14);
}

.media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Diagonal light sweep — premium "glass" shine across the surface */
.media-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255,255,255,0.30) 47%,
    rgba(255,255,255,0.05) 55%,
    transparent 63%);
  transform: translateX(-130%);
  animation: media-shine 7s ease-in-out infinite;
}

@keyframes media-shine {
  0%, 55% { transform: translateX(-130%); }
  80%, 100% { transform: translateX(130%); }
}

/* Rotating glow halo behind the card */
.media-halo {
  position: absolute;
  inset: -38px;
  border-radius: 50px;
  background: conic-gradient(from 0deg,
    rgba(0,0,0,0.10),
    rgba(34,197,94,0.22),
    rgba(0,0,0,0.04),
    rgba(0,0,0,0.12),
    rgba(34,197,94,0.16),
    rgba(0,0,0,0.10));
  filter: blur(34px);
  opacity: 0.7;
  z-index: 0;
  animation: halo-spin 11s linear infinite;
}

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

/* Soft grounding glow beneath the card */
.media-glow {
  position: absolute;
  bottom: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 90px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.18) 0%, transparent 70%);
  filter: blur(24px);
  z-index: 1;
}

/* Floating badge bubbles — straddle the card edges */
.media-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  padding: 0.45rem 0.8rem;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  z-index: 5;
}
.media-bubble svg { flex-shrink: 0; color: var(--black); }

.media-bubble--tl { top: -22px; left: -10px; animation: mbtl 5s ease-in-out infinite; }
.media-bubble--tr { top: -20px; right: -8px; animation: mbtr 6s ease-in-out infinite 0.8s; }
.media-bubble--mr { top: 50%; right: -22px; animation: mbmr 5.5s ease-in-out infinite 0.4s; }
.media-bubble--bl { bottom: -20px; left: -8px; animation: mbbl 6.5s ease-in-out infinite 1.2s; }
.media-bubble--br { bottom: -22px; right: 28px; animation: mbbr 5s ease-in-out infinite 0.6s; }

@keyframes mbtl { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes mbtr { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mbmr { 0%,100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 8px)); } }
@keyframes mbbl { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes mbbr { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* On wider screens, let the video grow into the free right-hand margin
   (a "showcase bleed") WITHOUT touching the text column: its left edge
   stays at the grid cell, only the right edge extends toward the viewport.
   The text block keeps its exact position, aligned with the nav and the
   rest of the page (both capped at 1160px). */
@media (min-width: 1200px) {
  .hero-visual { justify-content: flex-start; }
  .media-wrapper {
    flex-shrink: 0;
    width: clamp(500px, 44vw, 700px);
  }
}

/* Very large screens have room to spare in the right margin — let the
   showcase grow further into it. Still anchored left, so the text column
   is never touched; only the right edge extends, with a safe gutter kept
   for the floating bubbles. */
@media (min-width: 1700px) {
  .media-wrapper { width: clamp(700px, 50vw, 980px); }
}

/* ============================================
   MARQUEE
   ============================================ */

.marquee-wrapper {
  overflow: hidden;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 1rem 0;
  background: var(--gray-50);
}

.marquee-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: marquee 26s linear infinite;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-400);
  letter-spacing: 0.01em;
}
.sep { color: var(--gray-300); }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================
   SECTION HEADER
   ============================================ */

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.25rem;
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 1rem;
}

.section-header h2 { margin-bottom: 1rem; }
.section-header p { font-size: 0.9875rem; }

/* ============================================
   FEATURES
   ============================================ */

.features { padding: 6rem 0; }

/* Grille éditoriale à filets fins (hairlines) — PLUS de boîtes ni d'aplats : les
   fonctionnalités vivent dans une matrice aérée, séparées par de simples traits
   1px. Bien plus léger et raffiné que des cartes grises pleines. Les bordures
   haute + gauche sont portées par la grille, droite + bas par chaque cellule,
   pour des filets nets non doublés. */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--gray-200);
  border-left: 1px solid var(--gray-200);
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2rem 2.75rem;
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  transition: background 0.3s var(--ease-in-out);
}
.feature-card:hover { background: var(--gray-50); }

.feature-card--large { grid-column: span 2; }

/* Mise en avant : un simple voile clair dans la matrice, jamais une boîte. */
.feature-card--highlight { background: var(--gray-50); }
.feature-card--highlight:hover { background: var(--gray-100); }

/* Icône en TRAIT FIN, sans carré noir : juste le glyphe, léger et précis. */
.feature-icon {
  display: flex;
  align-items: center;
  background: none;
  color: var(--black);
  margin-bottom: 1.6rem;
}
.feature-icon svg { width: 27px; height: 27px; }

.feature-card h3 { margin-bottom: 0.6rem; font-size: 1.05rem; letter-spacing: -0.02em; }
.feature-card p { font-size: 0.9rem; line-height: 1.66; color: var(--gray-600); }

/* Micro-label éditorial (mono, majuscules, fin) — pas de pilule lourde. */
.feature-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-400);
}

/* ============================================
   LIVING / CAPABILITIES (flagship + brain demo)
   ============================================ */

.living {
  padding: 6rem 0;
  border-top: 1px solid var(--gray-200);
}

/* Brain showcase: dark 3D panel on the left, explanatory legend on the right.
   The panel is intentionally dark — it reads as the product's own screen
   embedded in the white page, the only place the neon brain can glow. */
.brain-showcase {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.75rem;
  align-items: stretch;
  margin-bottom: 3.75rem;
}

.brain-panel {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 440px;
  background: radial-gradient(120% 100% at 70% 0%, #11162a 0%, #070912 55%, #05060c 100%);
  border: 1px solid var(--gray-800);
  box-shadow: 0 30px 70px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.brain-panel canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* The 3D content carries its own interaction (pointer parallax). */
  touch-action: pan-y;
}

.brain-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(to top, rgba(5,6,12,0.88), rgba(5,6,12,0.0));
  pointer-events: none;
  z-index: 2;
}

.brain-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: 0.5rem;
}

.brain-overlay h3 {
  color: var(--white);
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

/* Graceful fallback when WebGL is unavailable (brain-demo.js adds the class). */
.brain-panel.brain-fallback::after {
  content: "Aperçu 3D indisponible sur cet appareil — la Vue Cerveau reste pleinement disponible dans l'application.";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem;
  color: rgba(255,255,255,0.55);
  font-size: 0.875rem;
  line-height: 1.6;
}

.brain-aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 0.25rem;
}
.brain-aside h3 {
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  margin-bottom: 0.85rem;
}
.brain-aside p {
  font-size: 0.92rem;
  margin-bottom: 1.4rem;
}

.brain-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.brain-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  padding: 0.32rem 0.65rem;
  border-radius: 100px;
}
.brain-legend li span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, var(--gray-400));
  box-shadow: 0 0 6px var(--c, transparent);
  flex-shrink: 0;
}

/* The capability grid reuses .features-grid; just a touch more top breathing. */
.living-grid { margin-top: 0; }

@media (max-width: 1024px) {
  .brain-showcase { grid-template-columns: 1fr; gap: 1.5rem; }
  .brain-panel { min-height: 380px; }
}

@media (max-width: 768px) {
  .brain-panel { min-height: 300px; }
  .brain-overlay { padding: 1.1rem 1.25rem; }
  .brain-overlay h3 { font-size: 1.15rem; }
}

/* ============================================
   TEMPLATES
   ============================================ */

.templates {
  padding: 6rem 0;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.template-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 1.4rem 1.1rem;
  text-align: center;
  transition: transform 0.25s var(--ease-out-expo),
              border-color 0.25s,
              box-shadow 0.25s var(--ease-out-expo);
}
.template-card:hover {
  transform: translateY(-4px);
  border-color: var(--black);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.template-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--black);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.template-card h3 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.template-card p {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--gray-400);
}

/* ============================================
   HOW IT WORKS
   ============================================ */

.how { padding: 6rem 0; }

.steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
}

.step { flex: 1; padding: 0 1.8rem; }
.step:first-child { padding-left: 0; }
.step:last-child { padding-right: 0; }

.step-num {
  font-size: 0.75rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--gray-300);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.step h3 { margin-bottom: 0.625rem; }
.step p { font-size: 0.9375rem; }

.step-line {
  width: 1px;
  height: 80px;
  background: var(--gray-200);
  margin-top: 1.5rem;
  flex-shrink: 0;
}

/* ============================================
   MES GAINS — simulateur ROI
   ============================================ */

.gains { padding: 5rem 0; border-top: 1px solid var(--gray-200); }

/* Hero spectaculaire CENTRÉ, une colonne (disposition d'avant). */
.sim2 { max-width: 920px; margin: 0 auto; }

/* Situation : statut (pleine largeur) + effectif + filtre alternative */
.sim2-situation {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-end;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--gray-200);
}
.sim2-sit { display: flex; flex-direction: column; gap: 0.65rem; min-width: 0; }
.sim2-sit--full { flex-basis: 100%; }
.sim2-sit-q { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); }

/* Chips (statut + rôles partagent le style) */
.sim2-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sim2-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 100px; padding: 0.4rem 0.85rem; cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.sim2-chip-l { font-size: 0.8rem; font-weight: 600; color: var(--black); }
.sim2-chip-s { font-family: var(--font-mono); font-size: 0.68rem; color: var(--gray-400); }
.sim2-chip:hover { border-color: var(--black); }
.sim2-chip.is-on { background: var(--black); border-color: var(--black); }
.sim2-chip.is-on .sim2-chip-l { color: var(--white); }
.sim2-chip.is-on .sim2-chip-s { color: rgba(255,255,255,0.6); }

/* Fonctions = grille de TUILES régulières (libellé concret + coût), bien plus
   lisible et mieux disposée qu'un nuage de pastilles. */
.sim2-funcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 0.55rem; }
.sim2-funcs .sim2-chip {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
}
.sim2-funcs .sim2-chip-l { line-height: 1.25; }
.sim2-funcs .sim2-chip-s { white-space: nowrap; flex-shrink: 0; }

/* Stepper effectif */
.sim2-stepper { display: inline-flex; align-items: center; border: 1px solid var(--gray-200); border-radius: 100px; overflow: hidden; }
.sim2-step {
  width: 40px; height: 40px; border: none; background: var(--white);
  font-size: 1.2rem; line-height: 1; color: var(--black); cursor: pointer; transition: background 0.15s;
}
.sim2-step:hover { background: var(--gray-100); }
.sim2-step-in {
  width: 56px; text-align: center; border: none;
  border-left: 1px solid var(--gray-200); border-right: 1px solid var(--gray-200);
  font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--black);
  -moz-appearance: textfield; appearance: textfield;
}
.sim2-step-in::-webkit-outer-spin-button,
.sim2-step-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sim2-note { font-size: 0.88rem; line-height: 1.5; color: var(--gray-600); margin-top: 1.1rem; min-height: 1.3em; }

/* HERO — le chiffre, énorme et centré */
.sim2-hero { text-align: center; padding: 2.25rem 0 1.25rem; }
.sim2-hero-k {
  display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray-400); margin-bottom: 0.5rem;
}
.sim2-hero-v {
  display: block; font-size: clamp(3.2rem, 11vw, 7rem); font-weight: 800;
  letter-spacing: -0.05em; line-height: 0.95; color: var(--live);
  font-variant-numeric: tabular-nums;
}
.sim2-hero-u { display: block; font-size: 1rem; color: var(--gray-600); font-weight: 500; margin-top: 0.7rem; }
.sim2-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin-top: 1.6rem; }
.sim2-pill {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  border: 1px solid var(--gray-200); border-radius: 100px; padding: 0.45rem 0.95rem;
}
.sim2-pill b { font-size: 0.95rem; font-weight: 800; color: var(--black); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sim2-pill i { font-style: normal; font-size: 0.78rem; color: var(--gray-600); }

/* Comparaison */
.sim2-vs { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem 0; border-top: 1px solid var(--gray-200); }
.sim2-vs-cap { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 0.25rem; }
.sim2-vs-row { display: grid; grid-template-columns: minmax(140px, auto) 1fr auto; align-items: center; gap: 0.5rem 1rem; }
.sim2-vs-k { font-size: 0.88rem; font-weight: 600; color: var(--black); }
.sim2-vs-track { height: 14px; border-radius: 100px; background: var(--gray-100); overflow: hidden; }
.sim2-vs-fill { display: block; height: 100%; width: 0; border-radius: 100px; transition: width 0.6s var(--ease-out-expo); }
.sim2-vs-fill.is-human { background: var(--black); }
.sim2-vs-fill.is-bot { background: var(--live); }
.sim2-vs-v { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; color: var(--black); text-align: right; min-width: 96px; font-variant-numeric: tabular-nums; }

/* Filtre alternative (segmenté) : embauche / société externe / solo */
.sim2-bases { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.3rem; background: var(--gray-100); border-radius: 11px; align-self: flex-start; }
.sim2-base { border: none; background: transparent; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; color: var(--gray-600); padding: 0.5rem 0.85rem; border-radius: 8px; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.sim2-base:hover { color: var(--black); }
.sim2-base.is-active { background: var(--white); color: var(--black); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* Réglages (sous le hero), en grille 2 colonnes */
.sim2-controls { padding-top: 1.75rem; border-top: 1px solid var(--gray-200); }
.sim2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.5rem; }
.sim2-ctl { display: flex; flex-direction: column; gap: 0.7rem; }
.sim2-ctl--wide { grid-column: 1 / -1; }
.sim2-ctl.is-for-work[hidden], .sim2-ctl.is-for-solo[hidden] { display: none; }

.sim2-ctl-l { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--black); }
.sim2-val { font-family: var(--font-mono); font-weight: 700; color: var(--black); }
.sim2-hint { font-size: 0.74rem; line-height: 1.4; color: var(--gray-400); }

/* Champ nombre */
.sim2-num {
  width: 100%; font-family: var(--font-mono); font-size: 1rem; font-weight: 600;
  color: var(--black); background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 0.6rem 0.85rem; transition: border-color 0.18s, box-shadow 0.18s;
}
.sim2-num:focus { outline: none; border-color: var(--black); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }

/* Curseurs monochromes */
.sim2-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: 100px; background: var(--gray-200); cursor: pointer; margin: 0.2rem 0;
}
.sim2-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--black); border: 3px solid var(--white); box-shadow: 0 1px 5px rgba(0,0,0,0.25); cursor: pointer;
}
.sim2-range::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--black); border: 3px solid var(--white); box-shadow: 0 1px 5px rgba(0,0,0,0.25); cursor: pointer;
}

/* Plans provisoires */
.sim2-plans { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sim2-plan {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: 100px;
  padding: 0.35rem 0.8rem; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
  color: var(--gray-600); cursor: pointer; transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.sim2-plan:hover { border-color: var(--black); color: var(--black); }
.sim2-plan.is-on { background: var(--black); border-color: var(--black); color: var(--white); }

.sim2-adv { margin-top: 1.6rem; }
.sim2-adv summary { cursor: pointer; font-weight: 600; color: var(--gray-600); font-size: 0.82rem; list-style: none; user-select: none; }
.sim2-adv summary::-webkit-details-marker { display: none; }
.sim2-adv summary::before { content: "+ "; font-family: var(--font-mono); }
.sim2-adv[open] summary::before { content: "– "; }
.sim2-adv[open] summary { margin-bottom: 1.1rem; }
.sim2-adv:hover summary { color: var(--black); }

.sim2-flag { font-size: 0.74rem; color: var(--gray-400); font-style: italic; margin-top: 1.6rem; }
.sim2-cta { display: flex; justify-content: center; margin-top: 2.25rem; }

@media (max-width: 760px) {
  .sim2-situation { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .sim2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sim2-vs-row { grid-template-columns: 1fr auto; }
  .sim2-vs-track { grid-column: 1 / -1; order: 3; }
  .sim2-vs-v { min-width: 0; }
}

/* ============================================
   PRICING
   ============================================ */

.pricing { padding: 6rem 0; background: var(--gray-50); border-top: 1px solid var(--gray-200); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
  max-width: 1020px;
  margin: 0 auto;
}

.tier-card {
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--white);
  min-height: 100%;
  transition: transform 0.25s var(--ease-out-expo),
              box-shadow 0.25s var(--ease-out-expo);
}
.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

/* Plan mis en avant : carte CLAIRE distinguée (liseré noir + légère échelle +
   ombre) plutôt qu'un aplat noir. Badge "Populaire" noir pour l'accent. */
.tier-card--featured {
  background: var(--white);
  border: 1.5px solid var(--black);
  transform: scale(1.02);
  box-shadow: 0 22px 64px rgba(0,0,0,0.12);
}
.tier-card--featured:hover {
  transform: scale(1.02) translateY(-4px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.16);
}
.tier-card--featured .tier-badge {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.tier-badge {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  color: var(--black);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  border: 1px solid var(--gray-200);
  white-space: nowrap;
}

.tier-name {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

.tier-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}
.tier-price .amount {
  font-size: clamp(1.9rem, 4vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.tier-price .period { font-size: 0.875rem; opacity: 0.6; }

.tier-discount {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0097b2;
  margin-bottom: 0.85rem;
}

.tier-desc {
  font-size: 0.9rem;
  opacity: 0.72;
  margin: 0.5rem 0 1.25rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.tier-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.tier-features .check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  margin-top: 2px;
}
.tier-divider { height: 1px; background: var(--gray-100); margin: 0 0 1rem; }

.tier-cta {
  display: block;
  text-align: center;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  border: none;
  line-height: 1.35;
}
.tier-cta:hover { opacity: 0.85; transform: translateY(-1px); }

.tier-cta--primary { background: var(--black); color: var(--white); }
.tier-cta--outline { background: transparent; color: var(--black); border: 1px solid var(--gray-300); }

.tier-note {
  font-size: 0.75rem;
  text-align: center;
  margin-top: 0.65rem;
  opacity: 0.45;
  line-height: 1.5;
}

/* ============================================
   FINAL CTA
   ============================================ */

.final-cta { padding: 6rem 0; }

.final-cta-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.final-cta-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--black);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  margin: 0 auto 2rem;
}

.final-cta-inner h2 { margin-bottom: 1rem; }
.final-cta-inner > p { margin-bottom: 2rem; }

.final-cta-actions {
  display: flex;
  gap: 0.875rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  padding: 3.5rem 0 2rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  margin-bottom: 3rem;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--black);
  text-decoration: none;
  margin-bottom: 0.75rem;
}
.footer-logo .logo-mark { width: 34px; height: 34px; border-radius: 9px; font-size: 19px; }
.footer-logo .logo-word { font-size: 1.5rem; }

.footer-brand p { font-size: 0.9rem; color: var(--gray-400); }

.footer-links { display: flex; gap: 4rem; }

.footer-col { display: flex; flex-direction: column; gap: 0.625rem; }

.footer-col-title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.25rem;
}

.footer-col a {
  font-size: 0.9rem;
  color: var(--gray-400);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--black); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
  font-size: 0.8125rem;
  color: var(--gray-400);
}
.footer-mono { font-family: var(--font-mono); font-size: 0.75rem; }

/* ============================================
   SCROLL REVEAL
   ============================================ */

/* Uses the independent `translate` property (not `transform`) so an
   element's own transform — hover lift, featured scale — composes with
   the reveal slide instead of being overridden. Hidden state is gated
   behind `.js` so the page stays fully visible if JS never runs. */
.reveal { opacity: 1; }

.js .reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.7s var(--ease-out-expo),
              translate 0.7s var(--ease-out-expo);
}
.js .reveal.visible { opacity: 1; translate: 0 0; }

.js .reveal-delay-1 { transition-delay: 0.08s; }
.js .reveal-delay-2 { transition-delay: 0.16s; }
.js .reveal-delay-3 { transition-delay: 0.24s; }
.js .reveal-delay-4 { transition-delay: 0.32s; }
.js .reveal-delay-5 { transition-delay: 0.4s; }

/* ============================================
   CUSTOM CURSOR (desktop, opt-in via JS)
   ============================================ */

.cursor, .cursor-ring { display: none; }

body.cursor-on .cursor {
  display: block;
  position: fixed;
  top: 0; left: 0;
  width: 7px;
  height: 7px;
  background: var(--black);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

body.cursor-on .cursor-ring {
  display: block;
  position: fixed;
  top: 0; left: 0;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(0,0,0,0.25);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--ease-out-expo),
              height 0.25s var(--ease-out-expo),
              border-color 0.25s var(--ease-in-out);
}

body.cursor-on .cursor-ring.hovering {
  width: 52px;
  height: 52px;
  border-color: rgba(0,0,0,0.45);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 7rem; }
  .hero-sub { margin: 0 auto 2.5rem; }
  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { display: none; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .feature-card--large { grid-column: span 2; }
  /* La cellule mise en avant reste sur 1 colonne en tablette pour que la
     matrice de filets reste pleine (pas de cellule vide en bout de rangée). */
  .feature-card--highlight { grid-column: span 1; }
  .templates-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .tier-card--featured { transform: none; }
  .tier-card--featured:hover { transform: translateY(-4px); }
  .nav { padding: 0.85rem 1.25rem; }
  .nav-inner { flex-wrap: wrap; }
  .nav-links {
    gap: 1rem;
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-top: 0.2rem;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-actions { gap: 0.5rem; }
}

@media (max-width: 768px) {
  h1 { font-size: 2.15rem; }
  h2 { font-size: 1.8rem; }
  .container { padding: 0 1rem; }
  .nav { padding: 0.75rem 1rem; }
  .nav-links { display: none; }
  .nav-actions { width: auto; }
  .hero { padding: 6.5rem 1rem 3rem; gap: 2rem; }
  .hero-stats { display: grid; grid-template-columns: 1fr; gap: 0.9rem; text-align: center; }
  .stat-divider { display: none; }
  .features-grid { grid-template-columns: 1fr; }
  .feature-card--large { grid-column: span 1; }
  .feature-card--highlight { grid-column: span 1; }
  .templates-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { flex-direction: column; }
  .step { padding: 0; }
  .step-line { width: 80px; height: 1px; margin: 0; }
  .footer-inner { flex-direction: column; gap: 2.5rem; }
  .footer-links { flex-wrap: wrap; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  body.cursor-on .cursor, body.cursor-on .cursor-ring { display: none; }
}

@media (max-width: 480px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .templates-grid { grid-template-columns: 1fr; }
  .final-cta-actions { flex-direction: column; }
  .final-cta-actions .btn { width: 100%; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .js .reveal { opacity: 1; translate: none; }
}