/* ============================================================
   TARMAC LANDING — Bridge vers tarmac-ui.css (design system v1)
   Les variables legacy (--ac, --ctag, --bg, etc.) sont mappees
   vers les tokens tarmac-ui (--brand, --bg, --card, etc.).
   IMPORTANT : tarmac-ui.css doit etre charge AVANT landing.css.
   ============================================================ */

:root {
  /* Couleurs explicites (valeurs litterales de tarmac-ui.css pour eviter
     les self-references CSS qui boucleraient). Si tarmac-ui.css change
     ses tokens, mettre a jour ici aussi. */
  --bg: #f6ede0;        /* creme */
  --bg2: #f1e6d3;
  --sf: #ffffff;
  --sf2: #fbf6ec;
  --sf3: #ebe2cd;
  --bd: #ebe2cd;
  --bd2: #f0e8d6;

  --tx: #1c1a16;
  --tx2: #4a463d;
  --tx3: #8a8270;

  /* Brand violet (au lieu de l'indigo legacy) */
  --ac: #4a2fd6;
  --ac2: #6e4dff;
  --acg: linear-gradient(135deg, #6e4dff, #4a2fd6);

  /* CTA violet (au lieu du corail legacy) */
  --cta: #6e4dff;
  --cta2: #4a2fd6;
  --ctag: linear-gradient(135deg, #6e4dff, #4a2fd6);

  /* Semantic */
  --gn: #0ea968;
  --rd: #d83a4a;
  --pu: #6e4dff;

  /* Fonts (Inter + JetBrains Mono comme tarmac-ui) */
  --f: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --m: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Shadows et radius */
  --sh: 0 2px 12px rgba(28,26,22,.05);
  --sh-hover: 0 8px 28px rgba(28,26,22,.12);
  --r: 12px;
  --rl: 18px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* ============== ACCESSIBILITY : Skip-to-content ============== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--ac);
  color: #fff;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  outline: 3px solid var(--cta);
  outline-offset: 2px;
}

/* Performance : décourager les reflows liés au chargement des fonts custom.
   Le family est déjà servi avec display=swap, on ajoute un fallback explicite
   pour éviter le FOIT (Flash Of Invisible Text). */
@supports (font-display: swap) {
  body { font-display: swap; }
}

body {
  font-family: var(--f);
  background: var(--bg);
  color: var(--tx);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Respect safe areas (iPhone notch & home indicator) sans casser le layout desktop */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

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

/* Tap highlight discret — pas de carré gris dégueu sur tap iOS */
a, button, summary, [role="button"], .btn {
  -webkit-tap-highlight-color: rgba(74, 47, 214, .12);
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============== NAV ============== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bd2);
  /* Safe-area pour iPhone avec encoche */
  padding-top: env(safe-area-inset-top);
}

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  font-family: var(--f);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  /* Fallback couleur si le navigateur ne supporte pas background-clip text */
  color: var(--ac);
  background: var(--acg);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Si le navigateur supporte la propriété background-clip, on rend bien transparent */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .logo, .grad, .footer-logo { color: transparent; }
}

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: 24px;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--tx2);
  transition: color .2s;
}

.nav-links a:hover { color: var(--ac); }

.nav-login { margin-left: auto; padding: 8px 14px; font-size: 13px; }
.nav-login + .nav-cta { margin-left: 8px; }
.nav-cta { margin-left: auto; }

.nav-burger {
  display: none;
  background: none;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  margin-left: auto;
  /* Touch target conforme iOS HIG (44+px) — sur mobile on monte à 48px */
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--tx);
  transition: background .15s, transform .1s;
  padding: 0;
}

.nav-burger .icon { width: 18px !important; height: 18px !important; stroke-width: 2; }

.nav-burger:active {
  background: var(--sf3);
  transform: scale(.95);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 10px;
  font-family: var(--f);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.1px;
  cursor: pointer;
  transition: all .2s;
  border: 0;
  text-align: center;
  white-space: nowrap;
  /* Évite la sélection accidentelle au double-tap mobile */
  -webkit-user-select: none;
  user-select: none;
  /* Min-height = touch target 44px (iOS HIG) — hauteur réelle pilotée par padding */
  min-height: 44px;
  line-height: 1.2;
}

/* Focus visible pour clavier — accessibilité */
.btn:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

/* État pressé visible : feedback tactile clair (mobile bat de la souris) */
.btn:active {
  transform: scale(.97);
}

.btn-cta {
  background: var(--ctag);
  color: white;
  box-shadow: 0 4px 16px rgba(193, 21, 54, .3);
}

.btn-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(193, 21, 54, .4);
}

.btn-cta:active {
  transform: scale(.97);
  box-shadow: 0 2px 8px rgba(193, 21, 54, .3);
}

.btn-ghost {
  background: var(--sf);
  color: var(--tx);
  border: 1px solid var(--bd);
}

.btn-ghost:hover {
  border-color: var(--ac);
  color: var(--ac);
}

.btn-ghost:active {
  background: var(--sf2);
  border-color: var(--ac);
}

.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-xl { padding: 18px 38px; font-size: 17px; border-radius: 12px; }
.btn-block { display: flex; width: 100%; }

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

.hero {
  padding: 80px 0 100px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  left: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(74, 47, 214, .08), transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -200px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(193, 21, 54, .05), transparent 70%);
  pointer-events: none;
}

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

.hero-eyebrow {
  display: inline-block;
  font-family: var(--m);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--pu);
  background: rgba(124, 58, 237, .1);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(124, 58, 237, .2);
  margin-bottom: 20px;
}

.hero-title {
  /* Mobile-first : 360px → 28px lisible, monte progressivement jusqu'à 60px desktop */
  font-size: clamp(28px, 7.5vw, 60px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.08;
  margin-bottom: 24px;
  /* Mots longs FR (kilométrage, particulier, multi-tenant…) : pas de débordement */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

.grad {
  /* Fallback couleur si le navigateur ne supporte pas background-clip text */
  color: var(--ac);
  background: var(--acg);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--tx2);
  margin-bottom: 32px;
  max-width: 520px;
  hyphens: auto;
  -webkit-hyphens: auto;
}

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

.hero-trust {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--tx3);
}

/* ============== SCREEN FRAME (mockup browser autour des screenshots) ============== */

.screen-frame {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(42, 40, 36, .18), 0 8px 20px rgba(42, 40, 36, .08);
  overflow: hidden;
  transition: transform .4s, box-shadow .4s;
}

.screen-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px rgba(42, 40, 36, .22), 0 12px 28px rgba(42, 40, 36, .1);
}

.screen-bar {
  background: var(--sf2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--bd2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.screen-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-r { background: #ff5f56; }
.dot-y { background: #ffbd2e; }
.dot-g { background: #27c93f; }

.screen-url {
  flex: 1;
  text-align: center;
  font-family: var(--m);
  font-size: 11px;
  color: var(--tx3);
  background: var(--sf);
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--bd2);
  margin-left: 8px;
}

.screen-img {
  display: block;
  width: 100%;
  height: auto;
  /* Toutes les captures sont harmonisées en 16:10 (1600x1000).
     aspect-ratio garantit 0 CLS et une proportion identique partout. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

/* ============== SHOWCASE (sections Cotation/Sourcing/Stock/CRM avec captures) ============== */

.showcase {
  padding: 100px 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--sf2) 100%);
}

.showcase .section-sub {
  text-align: center;
  color: var(--tx3);
  margin: -20px auto 70px;
  font-size: 16px;
  max-width: 600px;
}

.show-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 110px;
}

.show-row:last-child { margin-bottom: 0; }

.show-row.reverse {
  grid-template-columns: 1.2fr 1fr;
}

.show-row.reverse .show-text { order: 2; }
.show-row.reverse .show-visual { order: 1; }

.show-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ac);
  background: rgba(110, 77, 255, .08);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
}

.show-text h3 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--tx);
  margin-bottom: 18px;
  letter-spacing: -.5px;
}

.show-text p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--tx2);
  margin-bottom: 22px;
}

.show-text p .hot { color: var(--cta); font-weight: 700; }
.show-text p .warn { color: #d97706; font-weight: 700; }

.show-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.show-bullets li {
  padding: 8px 0 8px 28px;
  position: relative;
  font-size: 15px;
  color: var(--tx2);
  line-height: 1.5;
}

.show-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 20px;
  height: 20px;
  background: var(--ac) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px 12px no-repeat;
  color: transparent;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-visual .screen-frame {
  max-width: 100%;
}

/* ============== SECTIONS ============== */

section { padding: 80px 0; }

.section-eyebrow {
  font-family: var(--m);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--ac);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  letter-spacing: -.8px;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 56px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ============== TRUST BAR (Design Partners) ============== */

.trustbar {
  background: var(--sf);
  padding: 36px 0 32px;
  border-bottom: 1px solid var(--bd2);
}

.trustbar-eyebrow {
  font-family: var(--m);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--tx3);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.trustbar-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 44px;
  margin-bottom: 14px;
}

.tb-logo {
  font-family: var(--f);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--tx3);
  opacity: .82;
  /* Style "wordmark monochrome" : on garde lisible mais discret */
  filter: grayscale(1);
  transition: opacity .25s, color .25s;
  white-space: nowrap;
}

.tb-logo:hover { color: var(--tx2); opacity: 1; }

.trustbar-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--tx3);
  font-style: italic;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ============== POUR QUI ============== */

.for-who { background: var(--sf); }

.profiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.profile {
  background: var(--bg);
  border: 1px solid var(--bd2);
  border-radius: var(--r);
  padding: 26px 22px;
  text-align: center;
  transition: all .3s;
}

.profile:hover {
  border-color: var(--ac);
  transform: translateY(-3px);
  box-shadow: var(--sh-hover);
}

.p-ico {
  font-size: 20px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ac);
}

/* ============== SVG ICONS (style Lucide, monochrome) ============== */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  stroke-width: 1.6;
}

/* Tailles d'icônes consistantes — réduit (mai 2026) */
.p-ico .icon { width: 22px !important; height: 22px !important; }
.f-ico { display: inline-flex; align-items: center; justify-content: center; color: var(--ac); width: 34px; height: 34px; border-radius: 9px; background: rgba(74, 47, 214, .08); margin-bottom: 14px; }
.f-ico .icon { width: 16px !important; height: 16px !important; }
.feature-hero .f-ico { width: 40px; height: 40px; background: var(--acg); color: #fff; box-shadow: 0 6px 18px rgba(74,47,214,.22); }
.feature-hero .f-ico .icon { width: 20px !important; height: 20px !important; }
.show-tag .icon { width: 12px !important; height: 12px !important; margin-right: 6px; vertical-align: -2px; }
.hero-trust .icon { width: 12px !important; height: 12px !important; margin-right: 4px; color: var(--gn); vertical-align: -2px; }
.feature-grid-4 .f-ico { width: 30px; height: 30px; }
.feature-grid-4 .f-ico .icon { width: 15px !important; height: 15px !important; }
.ai-hero .f-ico { background: var(--acg); color: #fff; box-shadow: 0 6px 18px rgba(74,47,214,.22); width: 40px; height: 40px; }
.ai-hero .f-ico .icon { width: 20px !important; height: 20px !important; }

.p-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}

.p-sub {
  font-size: 13px;
  color: var(--tx3);
}

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

.features { background: var(--bg2); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.feature {
  background: var(--sf);
  border: 1px solid var(--bd2);
  border-radius: var(--r);
  padding: 28px;
  transition: all .3s;
}

/* Layout : icône + titre sur la même ligne, description + liste en dessous */
.feature:not(.ai-hero) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 10px;
  align-items: start;
}
.feature:not(.ai-hero) .f-ico { margin-bottom: 0; align-self: center; }
.feature:not(.ai-hero) h3 { margin-bottom: 0; align-self: center; }
.feature:not(.ai-hero) p,
.feature:not(.ai-hero) .f-bullets { grid-column: 1 / -1; margin-top: 0; }

.feature:hover {
  border-color: var(--ac);
  transform: translateY(-3px);
  box-shadow: var(--sh-hover);
}

.feature-hero {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(74, 47, 214, .04), rgba(110, 77, 255, .02));
  border-color: rgba(74, 47, 214, .2);
}

.feature-hero h3 { font-size: 22px; }

.feature h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -.3px;
}

.feature p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tx2);
}

.f-bullets {
  list-style: none;
  margin-top: 14px;
}

.f-bullets li {
  font-size: 13px;
  color: var(--tx2);
  padding: 4px 0 4px 22px;
  position: relative;
}

.f-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* ============== HOW ============== */

.how { background: var(--sf); }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}

.step {
  text-align: center;
  position: relative;
}

.step-num {
  width: 56px;
  height: 56px;
  background: var(--acg);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  margin: 0 auto 16px;
  box-shadow: 0 6px 20px rgba(74, 47, 214, .25);
}

.step-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.step-sub {
  font-size: 13px;
  color: var(--tx3);
}

/* ============== VS CONCURRENTS ============== */

.versus { background: var(--bg2); }

.vs-table-wrap {
  overflow-x: auto;
  border-radius: var(--rl);
  box-shadow: var(--sh);
}

.vs-table {
  width: 100%;
  background: var(--sf);
  border-collapse: collapse;
  border-radius: var(--rl);
  overflow: hidden;
}

.vs-table thead th {
  background: var(--sf2);
  padding: 18px 14px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--tx2);
  border-bottom: 2px solid var(--bd);
}

.vs-table thead th.vs-tarmac {
  background: var(--acg);
  color: white;
  font-size: 14px;
}

.vs-table tbody td {
  padding: 14px;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid var(--bd2);
}

.vs-table tbody tr:last-child td { border-bottom: 0; }

.vs-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--tx);
}

.vs-table .ok { color: var(--gn); font-size: 18px; font-weight: 700; }

.vs-table .vs-tarmac { color: var(--ac); font-weight: 700; }

.vs-summary {
  margin-top: 32px;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.vs-summary p {
  font-size: 15px;
  color: var(--tx2);
  line-height: 1.6;
}

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

.pricing { background: var(--sf); }

.trial-banner {
  text-align: center;
  background: linear-gradient(135deg, rgba(13, 148, 136, .08), rgba(13, 148, 136, .04));
  border: 1px solid rgba(13, 148, 136, .2);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 40px;
  font-size: 14px;
  color: var(--gn);
  font-weight: 600;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.pricing-grid.pricing-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 980px;
  margin: 0 auto;
  gap: 24px;
}

.pricing-note {
  text-align: center;
  font-size: 13px;
  color: var(--tx2, #6b7280);
  margin-top: 28px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.plan {
  background: var(--sf);
  border: 1px solid var(--bd2);
  border-radius: var(--rl);
  padding: 28px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all .3s;
}

.plan:hover {
  border-color: var(--ac);
  transform: translateY(-4px);
  box-shadow: var(--sh-hover);
}

.plan-popular {
  border-color: var(--ac);
  border-width: 2px;
  box-shadow: 0 12px 40px rgba(74, 47, 214, .15);
  transform: scale(1.03);
}

.plan-popular:hover { transform: scale(1.03) translateY(-4px); }

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--acg);
  color: white;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.plan-enterprise { background: linear-gradient(135deg, var(--bg), var(--bg2)); }

.plan-name {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ac);
  margin-bottom: 6px;
}

.plan-target {
  font-size: 12px;
  color: var(--tx3);
  margin-bottom: 20px;
  min-height: 32px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--bd2);
  padding-bottom: 20px;
}

.pp-prefix {
  font-size: 14px;
  font-weight: 500;
  color: var(--tx2);
  margin-right: 6px;
  font-family: var(--f);
  align-self: center;
}

.pp-amount {
  font-size: 44px;
  font-weight: 800;
  font-family: var(--m);
  letter-spacing: -1px;
  color: var(--tx);
  white-space: nowrap;
}

.pp-currency {
  font-size: 22px;
  font-weight: 700;
  color: var(--tx);
  margin-left: 2px;
}

.pp-period {
  font-size: 13px;
  color: var(--tx3);
  margin-left: 6px;
}

.plan-features {
  list-style: none;
  margin-bottom: 28px;
  flex: 1;
}

.plan-features li {
  font-size: 13px;
  color: var(--tx2);
  padding: 6px 0 6px 22px;
  position: relative;
}

.plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* ============== ROI ============== */

.roi { background: var(--bg2); padding: 60px 0; }

.roi-card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 60px 40px;
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
  box-shadow: var(--sh);
}

.roi-eyebrow {
  font-family: var(--m);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--cta);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.roi-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.5px;
  margin-bottom: 14px;
}

.roi-sub {
  font-size: 15px;
  color: var(--tx2);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ============== FAQ ============== */

.faq { background: var(--sf); }

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--bg);
  border: 1px solid var(--bd2);
  border-radius: var(--r);
  padding: 20px 24px;
  transition: all .2s;
}

.faq-item[open] {
  border-color: var(--ac);
  background: var(--sf);
  box-shadow: var(--sh);
}

.faq-item summary {
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
  user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--ac);
  font-weight: 300;
  transition: transform .2s;
}

.faq-item[open] summary::after {
  content: '−';
  transform: translateY(-50%);
}

.faq-item p {
  margin-top: 12px;
  font-size: 14px;
  color: var(--tx2);
  line-height: 1.65;
}

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

.final-cta {
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(193, 21, 54, .3), transparent 70%);
  pointer-events: none;
}

.cta-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -.5px;
  margin-bottom: 14px;
  position: relative;
}

.cta-sub {
  font-size: 17px;
  opacity: .9;
  margin-bottom: 36px;
  position: relative;
}

.final-cta .btn-cta { position: relative; }

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

.footer {
  background: var(--tx);
  color: rgba(255, 255, 255, .7);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-logo {
  font-family: var(--f);
  font-size: 24px;
  font-weight: 800;
  /* Fallback couleur si le navigateur ne supporte pas background-clip text */
  color: #c4b6ff;
  background: linear-gradient(135deg, #a890ff, #c4b6ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}

.footer-tag {
  font-size: 14px;
  max-width: 280px;
  line-height: 1.5;
}

.footer-h {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  font-size: 14px;
  padding: 5px 0;
  color: rgba(255, 255, 255, .6);
  transition: color .2s;
}

.footer-col a:hover { color: white; }

.footer-bottom {
  text-align: center;
  font-size: 13px;
  /* WCAG AA: passe à .65 (≈ 5.5:1 sur tx #1c1c24) au lieu de .4 (4.2:1, limite) */
  color: rgba(255, 255, 255, .65);
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 24px;
}

/* ============== PROOF (KPIs + Témoignages Design Partners) ============== */

.proof {
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  padding: 80px 0;
}

.proof-sub {
  text-align: center;
  color: var(--tx2);
  max-width: 640px;
  margin: -36px auto 48px;
  font-size: 16px;
  line-height: 1.55;
}

/* --- KPI bar (4 chiffres calibre) --- */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 64px;
  background: var(--sf);
  border: 1px solid var(--bd2);
  border-radius: var(--rl);
  padding: 32px 24px;
  box-shadow: var(--sh);
}

.kpi {
  text-align: center;
  padding: 8px 6px;
  border-right: 1px solid var(--bd2);
}

.kpi:last-child { border-right: 0; }

.kpi-num {
  font-family: var(--m);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--tx);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.kpi-unit {
  font-family: var(--m);
  font-size: .55em;
  font-weight: 600;
  color: var(--ac);
  letter-spacing: -.5px;
}

.kpi-label {
  font-size: 12.5px;
  color: var(--tx3);
  line-height: 1.45;
  max-width: 200px;
  margin: 0 auto;
  font-weight: 500;
}

/* --- Témoignages --- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

.testimonial {
  background: var(--sf);
  border: 1px solid var(--bd2);
  border-radius: var(--rl);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}

.testimonial:hover {
  border-color: var(--ac);
  transform: translateY(-3px);
  box-shadow: var(--sh-hover);
}

.testimonial-placeholder {
  /* Hachures discrètes pour signaler le placeholder honnête */
  background: var(--sf);
  border-style: dashed;
  border-color: var(--bd);
}

.testimonial-placeholder::before {
  content: 'À venir';
  position: absolute;
  top: 14px;
  right: -36px;
  background: rgba(124, 58, 237, .08);
  color: var(--pu);
  font-family: var(--m);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 4px 40px;
  text-transform: uppercase;
  transform: rotate(38deg);
}

.t-quote { position: relative; padding-top: 4px; }
.t-mark {
  width: 22px;
  height: 22px;
  color: var(--ac);
  opacity: .4;
  margin-bottom: 8px;
}
.t-quote p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--tx2);
  font-style: italic;
}

.t-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--bd2);
}

.t-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sf2);
  color: var(--tx3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd2);
}

.t-avatar .icon { width: 16px !important; height: 16px !important; }

.t-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--tx);
}

.t-role {
  font-size: 12px;
  color: var(--tx3);
  margin-top: 2px;
}

.proof-cta {
  text-align: center;
}

/* ============== AI ANIMATION (chat interactif) ============== */

.ai-chat-bar {
  position: relative;
}

.ai-chat-replay {
  background: rgba(255,255,255,.18);
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s, transform .2s;
  opacity: .85;
}

.ai-chat-replay:hover { background: rgba(255,255,255,.28); transform: rotate(-25deg); opacity: 1; }
.ai-chat-replay .icon { width: 14px; height: 14px; }

/* État "paused on hover" : on signale visuellement */
.ai-chat-frame.is-paused .ai-chat-replay { background: rgba(255,255,255,.35); opacity: 1; }

/* Animation typing dot dans la zone d'input */
#ai-chat-typing {
  transition: color .2s;
}
#ai-chat-typing.is-typing {
  color: var(--tx);
}
#ai-chat-typing.is-typing::after {
  content: '|';
  display: inline-block;
  color: var(--ac);
  margin-left: 2px;
  font-weight: 400;
  animation: aiCursor 1s steps(2) infinite;
}

@keyframes aiCursor {
  50% { opacity: 0; }
}

/* Bulles avec apparition fluide */
.ai-msg {
  animation: aiMsgIn .35s cubic-bezier(.22,.61,.36,1) both;
  transform-origin: bottom center;
}

@keyframes aiMsgIn {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* "L'IA réfléchit" : 3 dots qui bouncent */
.ai-msg.ai-msg-thinking {
  background: var(--sf);
  border: 1px solid var(--bd2);
  border-bottom-left-radius: 4px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  width: auto;
  min-width: 56px;
}

.ai-msg-thinking span {
  width: 7px;
  height: 7px;
  background: var(--tx3);
  border-radius: 50%;
  display: inline-block;
  animation: aiThink 1.2s ease-in-out infinite;
}

.ai-msg-thinking span:nth-child(2) { animation-delay: .15s; }
.ai-msg-thinking span:nth-child(3) { animation-delay: .3s; }

@keyframes aiThink {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Badge tool exécuté */
.ai-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(13,148,136,.1), rgba(13,148,136,.04));
  border: 1px solid rgba(13, 148, 136, .25);
  color: var(--gn);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  margin-top: 8px;
  font-family: var(--m);
  letter-spacing: .2px;
  animation: aiMsgIn .35s cubic-bezier(.22,.61,.36,1) both;
}

.ai-tool-badge .icon { width: 13px; height: 13px; }

/* Mini graphique animé (3e scénario) */
.ai-mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
  margin-top: 10px;
  padding: 10px 4px 0;
  border-top: 1px solid var(--bd2);
}

.ai-mini-chart .bar {
  flex: 1;
  background: linear-gradient(180deg, var(--ac2), var(--ac));
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
  animation: aiBar .9s cubic-bezier(.22,.61,.36,1) both;
  min-width: 12px;
}

@keyframes aiBar {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Click simulé sur bouton (anim ring) */
.ai-chat-btn.is-pressed {
  background: var(--ctag) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 6px rgba(193, 21, 54, .15);
  transform: scale(.96);
  transition: transform .15s, box-shadow .25s, background .15s;
}

/* Body scrollable subtilement quand ça déborde */
.ai-chat-body {
  scroll-behavior: smooth;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ai-chat-body::-webkit-scrollbar { width: 4px; }
.ai-chat-body::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }

/* ============== FOOTER 5 COLONNES ============== */

.footer-grid-5 {
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr 1fr;
  gap: 36px;
}

.footer-col-brand .footer-tag { max-width: 300px; margin-bottom: 18px; }

.footer-mif {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
  font-weight: 500;
  letter-spacing: .2px;
}

.mif-flag {
  display: inline-flex;
  height: 12px;
  width: 18px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

.mif-flag span { flex: 1; height: 100%; }
.mif-bleu { background: #0055a4; }
.mif-blanc { background: #fff; }
.mif-rouge { background: #ef4135; }

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fb-sep { opacity: .4; }

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

@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-popular { transform: none; }
  .plan-popular:hover { transform: translateY(-4px); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid-5 { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-col-brand { grid-column: 1 / -1; }
  .profiles { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 24px 20px; }
  .kpi { border-right: 0; border-bottom: 1px solid var(--bd2); padding: 16px 6px; }
  .kpi:nth-last-child(-n+2) { border-bottom: 0; }
  .testimonials { grid-template-columns: 1fr 1fr; }
  .testimonials .testimonial:last-child { grid-column: 1 / -1; max-width: 460px; margin: 0 auto; width: 100%; }
}

@media (max-width: 768px) {
  /* === Container & sections === */
  .container { padding: 0 18px; }
  section { padding: 52px 0; }

  /* === Nav === */
  .nav-inner { padding: 0 16px; gap: 12px; height: 60px; }
  .nav-links { display: none; }
  .nav-cta, .nav-login { display: none; }
  .nav-burger { display: inline-flex; }
  .logo { font-size: 20px; }

  /* === Hero === */
  .hero { padding: 36px 0 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Mobile : on remet le visuel SOUS le texte pour donner le pitch + CTA en premier scroll */
  .hero-visual { order: 0; }
  .hero-content { order: -1; }
  .hero-eyebrow { font-size: 10px; padding: 5px 12px; margin-bottom: 14px; }
  .hero-sub { font-size: 16px; margin-bottom: 24px; }
  .hero-ctas { gap: 10px; margin-bottom: 24px; }
  .hero-ctas .btn { width: 100%; }
  .hero-trust { gap: 14px; font-size: 12px; }
  .hero::before, .hero::after { width: 320px; height: 320px; }

  /* === Section titles === */
  .section-title { font-size: clamp(22px, 6vw, 28px); margin-bottom: 36px; letter-spacing: -.4px; }
  .section-eyebrow { font-size: 10px; margin-bottom: 12px; }

  /* === Profiles === */
  .profiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .profile { padding: 20px 14px; }
  .p-ico { font-size: 18px; margin-bottom: 6px; }
  .p-ico .icon { width: 20px !important; height: 20px !important; }
  .p-title { font-size: 14px; }
  .p-sub { font-size: 12px; }

  /* === Features === */
  .feature-grid, .feature-grid-4 { grid-template-columns: 1fr; gap: 14px; }
  .feature { padding: 22px 20px; }
  .feature h3 { font-size: 17px; }
  .feature p { font-size: 14px; line-height: 1.55; }
  .feature-hero h3 { font-size: 19px; }

  /* === Showcase === */
  .showcase { padding: 52px 0; }
  .showcase .section-sub { margin: -8px auto 36px; font-size: 14px; }
  .show-row, .show-row.reverse { grid-template-columns: 1fr; gap: 24px; margin-bottom: 52px; }
  .show-row.reverse .show-text { order: 1; }
  .show-row.reverse .show-visual { order: 2; }
  .show-text h3 { font-size: 22px; letter-spacing: -.3px; }
  .show-text p { font-size: 15px; }
  /* Captures harmonisées en 16:10 — l'aspect-ratio défini sur .screen-img gère le sizing.
     Pas de max-height ici pour conserver la même proportion qu'en desktop. */
  .show-bullets li { font-size: 14px; padding: 6px 0 6px 26px; }

  /* === Steps === */
  .steps { grid-template-columns: 1fr 1fr; gap: 18px; }
  .step-num { width: 48px; height: 48px; font-size: 19px; margin-bottom: 12px; }
  .step-title { font-size: 15px; }
  .step-sub { font-size: 12px; }

  /* === VS table : on transforme la table en stack vertical cards === */
  .vs-table-wrap {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--sh);
    background: var(--sf);
  }
  .vs-table { display: block; width: 100%; }
  .vs-table thead { display: none; }
  .vs-table tbody, .vs-table tr { display: block; width: 100%; }
  .vs-table tbody tr {
    border-bottom: 1px solid var(--bd2);
    padding: 14px 16px;
  }
  .vs-table tbody tr:last-child { border-bottom: 0; }
  .vs-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    text-align: right;
    font-size: 13px;
    border: 0;
    gap: 12px;
  }
  /* Première cellule de chaque ligne = titre de la ligne (en gras + sous-titre) */
  .vs-table tbody td:first-child {
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: var(--tx);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bd2);
    margin-bottom: 6px;
    display: block;
  }
  /* Préfixe chaque cellule avec le label du concurrent */
  .vs-table tbody td:nth-of-type(2)::before { content: 'Tarmac'; font-weight: 700; color: var(--ac); }
  .vs-table tbody td:nth-of-type(3)::before { content: "L'Argus Pro"; font-weight: 600; color: var(--tx2); }
  .vs-table tbody td:nth-of-type(4)::before { content: 'La Centrale Pro'; font-weight: 600; color: var(--tx2); }
  .vs-table tbody td:nth-of-type(5)::before { content: 'Excel manuel'; font-weight: 600; color: var(--tx2); }
  .vs-table tbody td::before {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  .vs-table .ok { font-size: 18px; }
  .vs-summary { margin-top: 24px; }
  .vs-summary p { font-size: 14px; }

  /* === Pricing === */
  .pricing-grid, .pricing-grid.pricing-3 { grid-template-columns: 1fr; gap: 16px; max-width: 100%; }
  .plan { padding: 26px 20px; }
  .plan-popular { transform: none; }
  .plan-popular:hover { transform: translateY(-4px); }
  .pp-amount { font-size: 38px; }
  .plan-features li { font-size: 13.5px; padding: 7px 0 7px 22px; }
  .trial-banner { padding: 12px; font-size: 13px; margin-bottom: 28px; }

  /* === ROI === */
  .roi { padding: 44px 0; }
  .roi-card { padding: 36px 22px; }
  .roi-title { font-size: clamp(20px, 5vw, 24px); }
  .roi-sub { font-size: 14px; }

  /* === FAQ === */
  .faq-item {
    padding: 16px 18px;
    border-radius: 12px;
  }
  .faq-item summary {
    font-size: 15px;
    padding: 4px 36px 4px 0;
    min-height: 32px;
    display: flex;
    align-items: center;
  }
  .faq-item summary::after { font-size: 28px; }
  .faq-item[open] { padding-bottom: 18px; }
  .faq-item p { font-size: 14px; line-height: 1.6; }

  /* === Final CTA === */
  .final-cta { padding: 56px 0; }
  .cta-title { font-size: clamp(24px, 6vw, 32px); margin-bottom: 12px; }
  .cta-sub { font-size: 15px; margin-bottom: 28px; padding: 0 8px; }
  .final-cta .btn-xl { padding: 16px 24px; font-size: 15px; }

  /* === Trust bar === */
  .trustbar { padding: 28px 0 26px; }
  .trustbar-logos { gap: 18px 24px; }
  .tb-logo { font-size: 14px; }
  .trustbar-note { font-size: 12px; }

  /* === Proof : KPIs + Témoignages === */
  .proof { padding: 52px 0; }
  .proof-sub { font-size: 14px; margin: -20px auto 28px; padding: 0 8px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; padding: 18px 14px; margin-bottom: 36px; border-radius: 16px; }
  .kpi { padding: 12px 4px; border-right: 0; }
  .kpi:nth-child(odd) { border-right: 1px solid var(--bd2); }
  .kpi:nth-last-child(-n+2) { border-bottom: 0; }
  .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--bd2); }
  .kpi-num { font-size: 26px; letter-spacing: -1px; }
  .kpi-unit { font-size: 13px; }
  .kpi-label { font-size: 11.5px; max-width: 150px; }
  .testimonials { grid-template-columns: 1fr; gap: 14px; }
  .testimonials .testimonial:last-child { grid-column: 1; max-width: 100%; }
  .testimonial { padding: 22px 20px; }
  .t-quote p { font-size: 14px; }
  .proof-cta .btn { width: 100%; }

  /* === Footer : stack vertical (1 colonne) === */
  .footer {
    padding: 48px 0 24px;
    /* Safe-area iPhone home indicator */
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .footer-grid-5 { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .footer-col-brand { grid-column: 1; }
  .footer-mif { font-size: 11px; }
  .footer-col a {
    padding: 8px 0;
    font-size: 15px;
    min-height: 36px;
  }
  .footer-h { font-size: 12px; margin-bottom: 10px; }
  .footer-logo { font-size: 22px; }
  .footer-tag { font-size: 13px; max-width: 100%; }
  .footer-bottom { font-size: 12px; padding-top: 20px; }

  /* === Screen frame (mockups) plus discret en mobile === */
  .screen-bar { padding: 8px 12px; }
  .screen-dot { width: 9px; height: 9px; }
  .screen-url { font-size: 10px; padding: 3px 8px; }
}

/* Petits écrans (Android compacts, iPhone SE…) */
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .nav-inner { padding: 0 12px; gap: 8px; }
  .logo { font-size: 19px; }
  .profiles { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero-trust span { font-size: 11.5px; }
  .vs-table tbody tr { padding: 12px 14px; }
}

/* ============== NAV MOBILE (drawer) ============== */

/* Backdrop semi-transparent qui ferme le menu au tap extérieur */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 30, .45);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.nav-mobile {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(82vw, 320px);
  background: var(--sf);
  border-left: 1px solid var(--bd2);
  flex-direction: column;
  padding: calc(16px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom));
  gap: 4px;
  box-shadow: -8px 0 32px rgba(20, 18, 30, .12);
  z-index: 120;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-mobile.open {
  transform: translateX(0);
}

.nav-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bd2);
}

.nav-mobile-head .logo { font-size: 22px; }

.nav-mobile-close {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 0;
  background: var(--sf2);
  color: var(--tx);
  font-size: 22px;
  font-weight: 300;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .1s;
}

.nav-mobile-close:active {
  background: var(--sf3);
  transform: scale(.94);
}

.nav-mobile a {
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--tx);
  border-bottom: 1px solid var(--bd2);
  min-height: 48px;
  display: flex;
  align-items: center;
  transition: color .15s;
}

.nav-mobile a:active { color: var(--ac); }
.nav-mobile a:last-child { border-bottom: 0; }

/* Mise en avant du lead magnet Cotation gratuite dans le menu mobile */
.nav-mobile a.nav-mobile-highlight {
  background: linear-gradient(135deg, rgba(74, 47, 214, .08), rgba(110, 77, 255, .04));
  color: var(--ac);
  font-weight: 700;
  border: 1px solid rgba(74, 47, 214, .15);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 6px 0;
}

.nav-mobile .btn {
  width: 100%;
  margin-top: 10px;
  padding: 14px 18px;
  font-size: 15px;
}

/* Empêche le scroll du body quand le menu est ouvert */
body.nav-locked {
  overflow: hidden;
}

/* ============== ASSISTANT IA SECTION ============== */

.ai-section .ai-intro {
  text-align: center;
  color: var(--tx2);
  max-width: 760px;
  margin: -32px auto 56px;
  font-size: 17px;
  line-height: 1.55;
}

.ai-section .ai-intro b { color: var(--tx); }
.ai-section .ai-intro em {
  font-style: normal;
  font-family: var(--m);
  font-size: 15px;
  background: rgba(74, 47, 214, .06);
  padding: 1px 8px;
  border-radius: 6px;
  color: var(--ac);
}

/* Carte hero : split texte + mockup chat */
.ai-hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 40px;
  align-items: center;
  padding: 36px;
}

.ai-hero-text h3 {
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -.4px;
}

.ai-hero-text p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--tx2);
}

.ai-hero-text p em {
  font-style: normal;
  font-family: var(--m);
  font-size: 13px;
  background: rgba(74, 47, 214, .06);
  padding: 1px 7px;
  border-radius: 5px;
  color: var(--ac);
}

/* ============== AI CHAT MOCKUP ============== */

.ai-chat-frame {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow:
    0 24px 60px rgba(42, 40, 36, .16),
    0 6px 18px rgba(42, 40, 36, .06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin-left: auto;
  width: 100%;
}

.ai-chat-bar {
  background: linear-gradient(135deg, #4F46E5 0%, #7c3aed 50%, #c11536 100%);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-chat-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ai-chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
  display: inline-block;
}

.ai-chat-x {
  font-size: 18px;
  opacity: .85;
  cursor: default;
  padding: 0 4px;
}

.ai-chat-body {
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
  padding: 18px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 280px;
}

.ai-msg {
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 82%;
  word-wrap: break-word;
}

.ai-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #6e4dff, #4a2fd6);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 8px rgba(74, 47, 214, .18);
}

.ai-msg-bot {
  align-self: flex-start;
  background: var(--sf);
  color: var(--tx);
  border: 1px solid var(--bd2);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(42, 40, 36, .04);
}

.ai-msg-bot b { color: var(--ac); }

.ai-chat-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ai-chat-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--sf2);
  color: var(--tx2);
  border: 1px solid var(--bd2);
  cursor: default;
}

.ai-chat-btn-primary {
  background: var(--acg);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(74, 47, 214, .25);
}

.ai-chat-input {
  background: var(--sf);
  border-top: 1px solid var(--bd2);
  padding: 10px 12px 12px;
}

.ai-chat-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ai-chip {
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 14px;
  background: rgba(74, 47, 214, .06);
  color: var(--ac);
  border: 1px solid rgba(74, 47, 214, .15);
  white-space: nowrap;
  cursor: default;
}

.ai-chat-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: 10px;
  padding: 8px 6px 8px 12px;
}

.ai-chat-placeholder {
  flex: 1;
  font-size: 13px;
  color: var(--tx3);
}

.ai-chat-send {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--acg);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(74, 47, 214, .25);
}

/* ============== AI PERKS (4 mini-cartes) ============== */

.ai-perks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.ai-perk {
  background: var(--sf);
  border: 1px solid var(--bd2);
  border-radius: var(--r);
  padding: 22px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all .3s;
}

.ai-perk:hover {
  border-color: var(--ac);
  transform: translateY(-2px);
  box-shadow: var(--sh-hover);
}

.ai-perk-ico {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
}

.ai-perk-body { min-width: 0; }

.ai-perk-h {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--tx);
  letter-spacing: -.2px;
}

.ai-perk-p {
  font-size: 12.5px;
  color: var(--tx2);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 1024px) {
  .ai-hero { grid-template-columns: 1fr; gap: 30px; padding: 28px; }
  .ai-chat-frame { margin: 0 auto; max-width: 460px; }
  .ai-perks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .ai-section .ai-intro { font-size: 15px; margin: -16px auto 36px; }
  .ai-hero { padding: 22px; gap: 22px; }
  .ai-hero-text h3 { font-size: 22px; }
  .ai-chat-frame { max-width: 100%; }
  .ai-chat-body { min-height: 240px; padding: 14px 12px 8px; }
  .ai-msg { font-size: 13px; }
  .ai-perks { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
}

/* ============== ANIMATIONS ============== */

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

.hero-content > * { animation: fadeUp .6s ease both; }
.hero-content > :nth-child(1) { animation-delay: .05s; }
.hero-content > :nth-child(2) { animation-delay: .12s; }
.hero-content > :nth-child(3) { animation-delay: .2s; }
.hero-content > :nth-child(4) { animation-delay: .28s; }
.hero-content > :nth-child(5) { animation-delay: .36s; }

.mockup { animation: fadeUp .8s ease both; animation-delay: .15s; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

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

/* ============== A11Y : prefers-reduced-motion ==============
   Désactive toutes les animations / transitions pour les utilisateurs
   sensibles (vertige, troubles vestibulaires, neurodivergence). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .ai-anim-cursor, .ai-anim-typing-dot { animation: none !important; }
}

/* ============== Bloquer les hover-bounce sur tap mobile ==============
   Sur les écrans tactiles, hover provoque des "stick" indésirables au tap.
   On ne déclenche les hover-transforms que sur les périphériques qui ont un hover réel. */
@media (hover: none) {
  .feature:hover, .profile:hover, .plan:hover, .blog-card:hover,
  .screen-frame:hover, .ai-perk:hover, .testimonial:hover {
    transform: none;
    box-shadow: var(--sh);
    border-color: var(--bd2);
  }
}

/* ============================================================
 * ANIMATIONS GLOBALES (scroll reveal, counters, CTA, hover glow,
 * progress bar). Tout est respectueux de prefers-reduced-motion.
 * ============================================================ */

/* Reduced motion : désactive toutes les anims décoratives.
   On garde la visibilité finale (opacity 1, transform none). */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .scroll-progress-bar { display: none !important; }
  .btn-cta { animation: none !important; }
  .btn-cta::before { animation: none !important; transition: none !important; }
  .feature::before { transition: none !important; }
}

/* === Scroll reveal stagger === */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* Délais de stagger via data-reveal-delay (ms) */
.reveal[data-reveal-delay="50"]  { transition-delay: 50ms; }
.reveal[data-reveal-delay="100"] { transition-delay: 100ms; }
.reveal[data-reveal-delay="150"] { transition-delay: 150ms; }
.reveal[data-reveal-delay="200"] { transition-delay: 200ms; }
.reveal[data-reveal-delay="250"] { transition-delay: 250ms; }
.reveal[data-reveal-delay="300"] { transition-delay: 300ms; }
.reveal[data-reveal-delay="350"] { transition-delay: 350ms; }
.reveal[data-reveal-delay="400"] { transition-delay: 400ms; }

/* === Scroll progress bar (fixée en haut, suit la lecture) === */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--ac), var(--cta));
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(193, 21, 54, .35);
  transition: width .08s linear;
}

/* === CTA pulse + shimmer === */
@keyframes cta-pulse {
  0%, 100% {
    box-shadow: 0 8px 20px rgba(193, 21, 54, .25),
                0 0 0 0 rgba(193, 21, 54, .35);
  }
  50% {
    box-shadow: 0 10px 24px rgba(193, 21, 54, .35),
                0 0 0 10px rgba(193, 21, 54, 0);
  }
}
.btn-cta {
  position: relative;
  overflow: hidden;
  animation: cta-pulse 4.5s ease-in-out infinite;
}
.btn-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg,
              transparent 20%,
              rgba(255, 255, 255, .35) 50%,
              transparent 80%);
  transform: skewX(-20deg);
  transition: left .65s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.btn-cta:hover::before { left: 130%; }

/* === Hover glow gradient sur cards features === */
.feature {
  position: relative;
  overflow: hidden;
}
.feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 320px at var(--mx, 50%) var(--my, 50%),
    rgba(74, 47, 214, .12),
    transparent 50%
  );
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 0;
}
.feature > * { position: relative; z-index: 1; }
.feature:hover::before { opacity: 1; }
.feature-hero:hover::before {
  background: radial-gradient(
    circle 380px at var(--mx, 50%) var(--my, 50%),
    rgba(193, 21, 54, .10),
    transparent 55%
  );
}

/* === Pulse subtile sur l'icône au hover de la card === */
.feature .f-ico {
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.feature:hover .f-ico {
  transform: scale(1.08) rotate(-3deg);
}

/* === KPIs counter : empêche les sauts de layout pendant l'anim === */
.kpi-num [data-counter] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
}

/* === Stagger via nth-child (pas de modif HTML nécessaire) === */
/* Profiles (4 cards "Pour qui") */
.profiles .reveal:nth-child(1) { transition-delay: 0ms; }
.profiles .reveal:nth-child(2) { transition-delay: 70ms; }
.profiles .reveal:nth-child(3) { transition-delay: 140ms; }
.profiles .reveal:nth-child(4) { transition-delay: 210ms; }

/* Features grid (6 cards) */
.feature-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.feature-grid .reveal:nth-child(2) { transition-delay: 60ms; }
.feature-grid .reveal:nth-child(3) { transition-delay: 120ms; }
.feature-grid .reveal:nth-child(4) { transition-delay: 180ms; }
.feature-grid .reveal:nth-child(5) { transition-delay: 240ms; }
.feature-grid .reveal:nth-child(6) { transition-delay: 300ms; }
.feature-grid .reveal:nth-child(7) { transition-delay: 360ms; }

/* KPIs (4 stats) */
.kpis .reveal:nth-child(1) { transition-delay: 0ms; }
.kpis .reveal:nth-child(2) { transition-delay: 80ms; }
.kpis .reveal:nth-child(3) { transition-delay: 160ms; }
.kpis .reveal:nth-child(4) { transition-delay: 240ms; }

/* Pricing plans (3) */
.pricing-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.pricing-grid .reveal:nth-child(2) { transition-delay: 100ms; }
.pricing-grid .reveal:nth-child(3) { transition-delay: 200ms; }

/* Testimonials (3) */
.testimonials .reveal:nth-child(1) { transition-delay: 0ms; }
.testimonials .reveal:nth-child(2) { transition-delay: 100ms; }
.testimonials .reveal:nth-child(3) { transition-delay: 200ms; }

/* Screen grid (showcase) */
.screen-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.screen-grid .reveal:nth-child(2) { transition-delay: 80ms; }
.screen-grid .reveal:nth-child(3) { transition-delay: 160ms; }
.screen-grid .reveal:nth-child(4) { transition-delay: 240ms; }
.screen-grid .reveal:nth-child(5) { transition-delay: 320ms; }

/* FAQ items (10) */
.faq-list .reveal:nth-child(1) { transition-delay: 0ms; }
.faq-list .reveal:nth-child(2) { transition-delay: 40ms; }
.faq-list .reveal:nth-child(3) { transition-delay: 80ms; }
.faq-list .reveal:nth-child(4) { transition-delay: 120ms; }
.faq-list .reveal:nth-child(5) { transition-delay: 160ms; }

/* Section-eyebrow + section-title + section-sub (pile dans le viewport ensemble) */
.section-eyebrow.reveal { transition-delay: 0ms; }
.section-title.reveal   { transition-delay: 60ms; }
.section-sub.reveal     { transition-delay: 120ms; }

/* ============== PRICING 4 PLANS (mai 2026 — ajout du Lite 199€) ============== */
.pricing-grid.pricing-4 {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  margin: 0 auto;
  gap: 16px;
}

/* Plan Lite : style un peu plus sobre que les autres */
.plan.plan-lite {
  background: linear-gradient(180deg, rgba(74, 47, 214, .02), transparent);
}
.plan.plan-lite .plan-name { color: var(--tx2); }

/* Stagger 4 plans */
.pricing-grid .reveal:nth-child(4) { transition-delay: 300ms; }

/* Responsive 4 plans : 2x2 sur tablette, 1 colonne sur mobile */
@media (max-width: 1100px) {
  .pricing-grid.pricing-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pricing-grid.pricing-4 { grid-template-columns: 1fr; }
}

/* Hero sub stat — la phrase d'économie chiffrée (mai 2026) */
.hero-sub-stat {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bd2);
  font-weight: 600;
  color: var(--tx);
  font-size: .95em;
}
@media (max-width: 768px) {
  .hero-sub-stat { font-size: .9em; }
}