:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --panel: #ffffff;
  --panel2: #f1efe7;
  --hairline: #e7e3d8;
  --text: #14171f;
  --text-dim: #5b6472;
  --text-faint: #98a2ac;
  --blue: #2e6ff2;
  --blue-dim: #e8f0fe;
  --blue-deep: #1d4ed8;
  --cyan: #00c2ff;
  --navy: #0a1128;
  --gradient-cta: linear-gradient(90deg, #2e6ff2, #00c2ff);
  --gradient-flow: linear-gradient(135deg, #0a1128 0%, #2e6ff2 45%, #00c2ff 75%, #ffffff 100%);
  --success: #22c55e;
  --success-dim: #eaf9ef;
  --warning: #f5a623;
  --warning-dim: #fef3e2;
  --red: #f5455c;
  --red-dim: #fdeaec;
  --violet: #7c3aed;
  --violet-dim: #ede9fe;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 2px 8px rgba(20, 23, 31, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 23, 31, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, .brand-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  text-wrap: balance;
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(247, 245, 240, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--hairline);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}



.nav .brand { color: var(--text); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
}

/* « Clos-ia » porte un trait d'union, et un navigateur coupe volontiers une
   ligne à cet endroit : sur téléphone, la marque s'affichait « Clos- » puis
   « ia » en dessous. L'ancien nom, « Closia », n'avait pas ce problème — c'est
   le renommage qui l'a introduit. Partout où la marque est écrite dans un
   espace contraint, elle doit rester d'un seul tenant. */
.brand-text { white-space: nowrap; }

/* Les liens se rangent à droite, contre les deux boutons, plutôt que collés au
   logo. C'est la marque qui pousse tout le reste vers la droite : sans ce
   margin-right auto, les liens se recolleraient au logo. */
.nav-inner .brand { margin-right: auto; }

.nav-links {
  display: flex;
  gap: 24px;
  margin-right: 8px;
}

.nav-links a {
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 500;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.btn-primary {
  background: var(--gradient-cta);
  color: #fff;
}

.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost {
  background: var(--panel2);
  color: var(--text);
  border: 0.5px solid var(--hairline);
}

.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-block { width: 100%; padding: 13px; font-size: 15px; }

/* Voile bleu sous le hero. Pose sur le conteneur principal et non sur .hero-v2,
   qui est centre a 1300 px : un fond sur lui ferait une bande au lieu d'occuper
   toute la largeur. En pourcentage plutot qu'en 100vw, pour ne pas compter la
   barre de defilement et provoquer un debordement horizontal.
   Il remonte derriere la barre de navigation, devenue translucide. */
main#top {
  background:
    linear-gradient(180deg,
      rgba(46, 111, 242, 0.11) 0%,
      rgba(46, 111, 242, 0.055) 38%,
      rgba(46, 111, 242, 0.015) 68%,
      rgba(46, 111, 242, 0) 100%)
    no-repeat top center / 100% 760px;
}

.hero-v2 {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 24px 24px 72px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Le hero occupe le premier écran à lui seul : laisser apparaître le début
     de la section suivante coupe la promesse en deux avant qu'elle ait porté.
     svh plutôt que vh — sur mobile, vh compte la barre d'adresse qui se
     rétracte, et la section déborde toujours d'une centaine de pixels. */
  min-height: calc(100vh - var(--nav-h, 64px));
  min-height: calc(100svh - var(--nav-h, 64px));
}

.hero-v2-top { position: relative; z-index: 1; max-width: 860px; }

.hero-v2-title {
  font-size: clamp(25px, 3.1vw, 37px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 18px 0 0;
  text-wrap: balance;
}

.fade-word {
  background: var(--gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.mock-window.mock-window-hero { width: 1100px; max-width: 100%; }


@media (max-width: 860px) {
  .hero-v2 { padding: 72px 20px 0; }
}

/* Sur téléphone, ces 72 px s'ajoutaient au centrage vertical d'un bloc déjà
   haut d'un écran : le titre commençait au tiers de la hauteur et le premier
   coup d'œil ne montrait qu'un aplat bleu. Le hero occupe toujours l'écran,
   la promesse y est simplement lisible tout de suite. */
@media (max-width: 560px) {
  .hero-v2 { padding: 20px 18px 0; }
}

.hero-sub {
  font-size: 17.5px;
  color: var(--text-dim);
  margin: 18px 0 30px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }


.eyebrow-icon { margin-right: 6px; vertical-align: -1px; color: var(--blue); }

.mock-window {
  width: 100%;
  max-width: 380px;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--hairline);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
  overflow: hidden;
  background: var(--surface);
}

.mock-bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  background: var(--panel2);
  border-bottom: 0.5px solid var(--hairline);
}

.mock-bar span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hairline);
}

.mock-window-body { display: flex; background: #f4f6fb; }

.mock-sidebar {
  width: 40px;
  flex-shrink: 0;
  background: #fff;
  border-right: 0.5px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
}

.mock-sidebar-logo {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  margin-bottom: 4px;
}

.mock-sidebar-item {
  width: 20px;
  height: 5px;
  border-radius: 3px;
  background: var(--hairline);
}

.mock-sidebar-item.active {
  background: var(--blue);
}

.mock-body { flex: 1; min-width: 0; padding: 12px; background: #f4f6fb; }

.mock-banner {
  background: linear-gradient(135deg, #2e7cff 0%, #1746b8 100%);
  color: #fff;
  padding: 18px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(23, 70, 184, 0.26);
}

.mock-banner::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

.mock-greeting { position: relative; font-weight: 700; font-size: 18px; margin-bottom: 4px; }

.mock-sub { position: relative; font-size: 12px; opacity: 0.85; margin-bottom: 14px; }

.mock-stats {
  position: relative;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  opacity: 0.85;
}
.mock-stats b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; margin-right: 3px; }
.mock-stats .warn { color: #fca5a5; opacity: 1; }

.mock-tip {
  background: rgba(255,255,255,0.16);
  border: 0.5px solid rgba(255,255,255,0.28);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.4;
}

.mock-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 2px;
}

.mock-task {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 0.5px solid var(--hairline);
  border-left: 2.5px solid var(--blue);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  padding: 9px 10px;
}

.mock-task-time { font-size: 10.5px; font-weight: 700; color: var(--text-faint); font-family: "Plus Jakarta Sans", sans-serif; flex-shrink: 0; }
.mock-task-body { flex: 1; min-width: 0; }
.mock-task-title { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-task-meta { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; }
.mock-task-btn {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-dim);
  border-radius: 6px;
  padding: 5px 8px;
  white-space: nowrap;
}

.mock-row {
  display: flex;
  gap: 8px;
  padding: 16px;
}

.mock-card {
  flex: 1;
  background: var(--panel2);
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mock-card b { font-size: 18px; color: var(--text); font-family: "Plus Jakarta Sans", sans-serif; }

.mock-dot { width: 8px; height: 8px; border-radius: 50%; }
.mock-dot.blue { background: var(--blue); }
.mock-dot.violet { background: #7c3aed; }
.mock-dot.amber { background: #b45309; }

.mock-dot-status { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.mock-dot-status.red { background: var(--red); }
.mock-dot-status.amber { background: var(--warning); }
.mock-dot-status.green { background: var(--success); }

.mock-body-hero { padding: 18px; }

.mock-hero-columns {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  margin-top: 14px;
}

.mock-hero-col { display: flex; flex-direction: column; gap: 8px; }

.mock-col-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.mock-watch-mini {
  background: #fff;
  border: 0.5px solid var(--hairline);
  border-left: 2.5px solid var(--hairline);
  border-radius: 10px;
  padding: 9px 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.mock-watch-mini.danger { border-left-color: var(--red); }
.mock-watch-mini.warn { border-left-color: var(--warning); }
.mock-watch-mini.hot { border-left-color: var(--success); }

.mock-watch-mini-head { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--text); }
.mock-watch-mini-head b { margin-left: auto; font-family: "Plus Jakarta Sans", sans-serif; font-size: 11.5px; }
.mock-watch-mini-reason { font-size: 10.5px; color: var(--text-faint); margin-top: 3px; margin-left: 14px; }

@media (max-width: 860px) {
  .mock-hero-columns { grid-template-columns: 1fr; }
  .mock-window-hero .mock-sidebar { display: none; }
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 52px;
}

.eyebrow {
  display: block;
  color: var(--blue);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero-v2-top .eyebrow {
  margin-top: 16px;
  margin-bottom: 0;
}

.section-head h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.contact-sub, .section-head p { color: var(--text-dim); font-size: 15px; margin: 0; }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.features, .how {
  max-width: 1100px;
  margin: 0 auto;
  padding: 68px 24px;
}

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

.feature-card {
  background: var(--surface);
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  row-gap: 6px;
  align-content: start;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.feature-icon {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--blue-dim);
  color: var(--blue);
}

.feature-card h3 { grid-column: 2; font-size: 16.5px; font-weight: 700; margin: 0; align-self: end; }
.feature-card p { grid-column: 2; font-size: 13.5px; color: var(--text-dim); margin: 0; line-height: 1.55; }

.feature-lead {
  grid-column: span 2;
  grid-template-columns: 44px 1fr;
  background: var(--blue-dim);
  border-color: rgba(46,111,242,0.28);
}
.feature-lead .feature-icon { background: var(--surface); width: 44px; height: 44px; }
.feature-lead h3 { font-size: 20px; }
.feature-lead p { font-size: 14.5px; max-width: 420px; }
.feature-lead-tag {
  grid-column: 2;
  justify-self: start;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: var(--surface);
  padding: 5px 11px;
  border-radius: 999px;
  margin-top: 18px;
}

.fade-trail-caption {
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
  margin: -16px 0 28px;
}

.watch-window {
  max-width: 460px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--hairline);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
  overflow: hidden;
  background: var(--surface);
}

.watch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.watch-card {
  background: var(--panel2);
  border: 0.5px solid var(--hairline);
  border-left: 3px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.watch-card.hot { border-left-color: var(--success); }
.watch-card.warn { border-left-color: var(--warning); }
.watch-card.danger { border-left-color: var(--red); }

.watch-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.watch-emoji { font-size: 13px; }
.watch-company { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 13.5px; }
.watch-value { margin-left: auto; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; }
.watch-reason { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.watch-cta { font-size: 12px; font-weight: 600; color: var(--blue); }

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto 44px;
}

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

.compare-col {
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  border: 0.5px solid var(--hairline);
  background: var(--surface);
}

.compare-col.after {
  background: var(--blue-dim);
  border-color: rgba(46,111,242,0.28);
}

.compare-label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 14px;
}

.compare-col.after .compare-label { color: var(--blue); }

.compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.compare-list li {
  font-size: 14px;
  padding-left: 24px;
  position: relative;
  color: var(--text-dim);
}

.compare-col li::before { content: "✕"; position: absolute; left: 0; color: var(--text-faint); font-size: 12px; }
.compare-col.after li { color: var(--text); }
.compare-col.after li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

.forgotten-deals {
  max-width: 1100px;
  margin: 0 auto;
  padding: 68px 24px;
}

/* Dispersion → Clos-ia */
.dispersion { max-width: 1100px; margin: 0 auto; padding: 68px 24px; }

.dispersion-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 60px;
}

.dispersion-sources { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.source-chip {
  background: var(--surface);
  border: 0.5px solid var(--hairline);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  box-shadow: var(--shadow-sm);
}
.source-chip.s1 { transform: rotate(-3deg); }
.source-chip.s2 { transform: rotate(2deg); }
.source-chip.s3 { transform: rotate(-1.5deg); }
.source-chip.s4 { transform: rotate(2.5deg); }
.source-chip.s5 { transform: rotate(-2deg); }

.dispersion-arrow { color: var(--text-faint); }

.dispersion-hub {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--text);
  color: #fff;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  box-shadow: var(--shadow-md);
}

.dispersion-result { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.result-chip {
  background: var(--blue-dim);
  color: var(--blue-deep);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 12.5px;
  font-weight: 600;
}

/* Votre journée — démonstration */
.your-day { max-width: 1100px; margin: 0 auto; padding: 68px 24px; }

.day-window {
  border-radius: var(--radius-xl);
  border: 0.5px solid var(--hairline);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1);
  overflow: hidden;
  background: var(--surface);
}

.day-window-body { display: grid; grid-template-columns: 1fr 1.1fr; }

.day-col { padding: 32px; border-right: 0.5px solid var(--hairline); }

.day-col-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 18px;
}

.day-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 0.5px solid var(--hairline);
  font-size: 14px;
  color: var(--text-dim);
}
.day-item:last-child { border-bottom: none; }

.day-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-faint);
  width: 44px;
  flex-shrink: 0;
}

.day-item.active { color: var(--text); font-weight: 600; }
.day-item.active .day-time { color: var(--blue); }

.day-why { padding: 32px; background: var(--bg); }

.day-why-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue);
  margin-bottom: 16px;
}

.day-why-company { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 19px; margin-bottom: 18px; }
.day-why-company span { color: var(--text-dim); font-weight: 500; font-size: 14px; }

.day-why-rows { display: flex; flex-direction: column; gap: 11px; margin-bottom: 20px; }
.day-why-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); gap: 12px; }
.day-why-row b { color: var(--text); font-weight: 600; text-align: right; }
.day-why-row b.signal { color: #b91c4a; }

.day-why-reco {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--blue-dim);
  color: var(--blue-deep);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}
.reco-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }

.day-why-btn { width: 100%; }

@media (max-width: 760px) {
  .day-window-body { grid-template-columns: 1fr; }
  .day-col { border-right: none; border-bottom: 0.5px solid var(--hairline); }
}

/* Modules — hub visuel */
.modules { max-width: 1100px; margin: 0 auto; padding: 68px 24px; }

.hub {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 22px;
  place-items: center;
  padding: 20px 0;
}

.hub-center {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 16px 36px rgba(20, 23, 31, 0.28);
  z-index: 2;
}

.hub-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface);
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hub-node:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hub-node svg { color: var(--blue); }

.n1 { grid-column: 2; grid-row: 1; }
.n2 { grid-column: 1; grid-row: 1; }
.n3 { grid-column: 3; grid-row: 1; }
.n4 { grid-column: 1; grid-row: 3; }
.n5 { grid-column: 3; grid-row: 3; }

@media (max-width: 640px) {
  .hub { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, auto); gap: 14px; }
  .hub-center { grid-column: 1 / 3; grid-row: 1; }
  .n1 { grid-column: 1; grid-row: 2; }
  .n2 { grid-column: 2; grid-row: 2; }
  .n3 { grid-column: 1; grid-row: 3; }
  .n4 { grid-column: 2; grid-row: 3; }
  .n5 { grid-column: 1 / 3; grid-row: 4; }
}

/* Étapes — snippets */
.steps { position: relative; }
.steps::before { content: ""; position: absolute; top: 18px; left: 16%; right: 16%; height: 1px; background: var(--hairline); z-index: 0; }
.step { position: relative; z-index: 1; }

.step-snippet {
  margin-top: 18px;
  font-size: 11.5px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel2);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.step-snippet-ia { color: var(--blue-deep); background: var(--blue-dim); font-style: italic; }
.step-snippet-actions { display: flex; gap: 6px; background: none; padding: 0; flex-wrap: wrap; justify-content: center; }
.step-snippet-actions span { background: var(--blue-dim); color: var(--blue-deep); border-radius: 999px; padding: 6px 12px; font-weight: 600; }

/* Reporting */
.reporting { max-width: 1100px; margin: 0 auto; padding: 68px 24px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.stat-tile { background: var(--surface); padding: 32px 26px; }
.stat-label { font-size: 12.5px; color: var(--text-faint); margin-bottom: 12px; }
.stat-value { font-family: "Plus Jakarta Sans", sans-serif; font-size: 32px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.stat-trend { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.stat-trend.up { color: var(--success); }

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

/* Reveal au scroll */
/* Le glissement vertical de 18 px a été retiré : avec l'apparition
   symétrique, il rejouait dans les deux sens et les maquettes bougeaient
   sans arrêt pendant la lecture. Seule la transparence varie désormais. */
.reveal { opacity: 0; transition: opacity 0.5s ease; }
.reveal.in-view { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.forgotten-soon-badge {
  text-align: center;
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 12px;
}

.launch-banner {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
  background: var(--blue-dim);
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
}

.how { background: var(--bg); border: 0.5px solid var(--hairline); border-radius: var(--radius-xl); max-width: 1060px; }

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

.step { text-align: center; padding: 0 12px; }

.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 0 auto 16px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.step h3 { font-size: 16px; margin: 0 0 8px; }
.step p { font-size: 13.5px; color: var(--text-dim); margin: 0; }

.step-card {
  background: var(--surface);
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
}
.step-card .step-num { background: var(--blue-dim, #e7e9fb); color: var(--blue); }

.pricing {
  max-width: 1100px;
  margin: 40px auto;
  padding: 68px 24px;
  background: radial-gradient(circle at 50% 0%, var(--blue-dim), transparent 60%);
  border-radius: var(--radius-xl);
}

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

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

.pricing-note-below {
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  margin: 28px auto 0;
  max-width: 640px;
}

.pricing-note-below a { color: var(--blue); font-weight: 600; }

.price-card {
  position: relative;
  background: var(--surface);
  border: 0.5px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-xl);
  padding: 26px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.price-card-featured {
  border: 1.5px solid rgba(46,111,242,0.28);
  box-shadow: 0 16px 40px rgba(46,111,242,0.16);
  transform: scale(1.03);
}

@media (max-width: 860px) {
  .price-card-featured { transform: none; }
}

.price-featured-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-cta);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.price-plan {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 19px;
  font-weight: 700;
  margin-top: 6px;
}

.price-sub {
  color: var(--text-dim);
  font-size: 13px;
  margin: 4px 0 18px;
}

.price-card .price-includes { flex: 1; }

/* --- Les trois offres comme une progression, pas comme trois tailles ---------
   L'étiquette du haut nomme le stade — visibilité individuelle, visibilité
   d'équipe, pilotage — et c'est elle qui porte la différence, avant le prix.
   Le texte est aligné à gauche : ces cartes se lisent, elles ne se scannent
   plus, et du texte centré sur quatre lignes se lit mal. */
.price-card { text-align: left; }
.price-card .price-row { justify-content: flex-start; margin-bottom: 8px; }

.price-stage {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
}

.price-card .price-plan { margin-top: 8px; font-size: 21px; }

.price-claim {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
  margin: 7px 0 14px;
}

/* La description pousse le bouton en bas : sans elle, les trois cartes
   n'alignaient plus leurs appels à l'action. */
.price-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 18px;
  flex: 1;
}

/* Le nombre d'utilisateurs et le prix du siège supplémentaire, juste sous le
   prix : c'est la deuxième chose qu'on cherche sur une carte tarifaire. */
.price-seats {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
  font-weight: 500;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--hairline);
}

/* L'offre de lancement s'annonce en clair, sans prix barré : le tarif affiché
   reste celui qui s'appliquera, et la remise est présentée comme ce qu'elle est
   — temporaire et datée. */

.price-footnote {
  margin: 22px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-faint);
}

.price-for {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-faint);
  border-left: 2px solid var(--hairline);
  padding-left: 11px;
  margin-bottom: 14px;
}

.price-feats {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.price-feats li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.price-feats li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--blue-dim);
  border: 1px solid rgba(46, 111, 242, 0.45);
}

/* Le récapitulatif de la progression, sous les cartes : une phrase par stade. */
.price-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 0.5px solid var(--hairline);
}

.price-progress span {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
}

.price-progress b {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

@media (max-width: 860px) {
  .price-progress { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

.price-badge {
  display: inline-flex;
  background: var(--blue-dim);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}




.price-instead {
  font-size: 12.5px;
  color: var(--text-faint);
  margin: -6px 0 14px;
}

.price-note {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 22px;
  line-height: 1.6;
}

.price-pending {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-dim);
}

.price-note {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.price-cta-secondary {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline);
}
.price-cta-secondary:hover { color: var(--blue); text-decoration-color: var(--blue); }

.price-includes {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-includes li {
  font-size: 14px;
  color: var(--text);
  padding-left: 26px;
  position: relative;
}

.price-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 700;
}


.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--surface);
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 4px 20px;
}

.faq-item summary {
  padding: 16px 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

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

.faq-item summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--blue);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}

.contact {
  max-width: 1100px;
  margin: 0 auto;
  padding: 96px 24px 120px;
}

/* La FAQ et le bloc de démonstration sont deux enfants voisins de la même
   section, sans rien entre eux : la dernière question touchait le bloc bleu,
   bord à bord, comme si les deux n'en faisaient qu'un. */
.contact-inner {
  margin-top: 64px;
  background: var(--gradient-flow);
  border-radius: var(--radius-xl);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  color: #fff;
}

.contact-inner .eyebrow { color: #cfe0ff; }
.contact-inner h2 { color: #fff; }
.contact-sub { color: rgba(255,255,255,0.85) !important; }

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(255,255,255,0.1);
  border: 0.5px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  padding: 24px;
}

.lead-form-head { margin-bottom: 2px; }
.lead-form-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; font-weight: 700; color: #fff; }
.lead-form-sub { margin: 4px 0 0; font-size: 12.5px; color: rgba(255,255,255,0.75); }

.lead-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.lead-form input, .lead-form textarea, .lead-form select {
  background: rgba(255,255,255,0.95);
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  resize: vertical;
}

.lead-status {
  margin: 0;
  font-size: 13px;
  min-height: 18px;
}

.footer {
  border-top: 0.5px solid var(--hairline);
  padding: 32px 24px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
  align-items: start;
}

.footer .brand { font-size: 14px; }
.footer p { margin: 0; color: var(--text-faint); font-size: 13px; }

@media (max-width: 860px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-lead { grid-column: span 2; }
  .steps { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; padding: 28px; margin-top: 40px; }
  .nav-links { display: none; }
}

/* Sous 560 px il ne reste que la marque et les deux boutons, et l'espacement
   de 24 px les faisait passer à la ligne chacun leur tour. On resserre, et on
   interdit aux libellés de se couper : « Se connecter » sur deux lignes dans
   un bouton de barre donne l'impression d'un site cassé. */
@media (max-width: 560px) {
  .nav-inner { gap: 8px; padding: 10px 16px; }
  .nav-inner .btn-sm { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
  .brand { font-size: 15.5px; gap: 7px; }
  .brand img { width: 28px; height: 28px; }
}

@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
  /* Sans cette ligne, .feature-lead garde son span 2 hérité du palier
     précédent : la grille crée une seconde colonne implicite et la page
     déborde horizontalement de près de 100 px sur téléphone. */
  .feature-lead { grid-column: auto; }
}

/* Assistant IA flottant */
.cw-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gradient-flow);
  border: none;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.cw-panel {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 440px;
  max-height: calc(100vh - 120px);
  background: var(--panel);
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
  font-family: inherit;
}

.cw-panel.cw-open {
  display: flex;
}

.cw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--gradient-flow);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.cw-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.cw-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cw-msg {
  max-width: 85%;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-line;
}

.cw-msg-assistant {
  align-self: flex-start;
  background: var(--panel2);
  color: var(--text);
}

.cw-msg-user {
  align-self: flex-end;
  background: var(--blue-dim);
  color: var(--blue-deep);
}

.cw-thinking {
  color: var(--text-faint);
}

.cw-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 0.5px solid var(--hairline);
}

.cw-form input {
  flex: 1;
  background: var(--panel2);
  border: 0.5px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
}

.cw-form button {
  background: var(--blue-dim);
  color: var(--blue);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 560px) {
  .cw-panel { right: 16px; bottom: 84px; }
  .cw-toggle { right: 16px; bottom: 16px; }
}

/* ============================================================
   Espacement des sections ajoutées. Il n'existe pas de règle
   générique pour <section> : chaque section porte le sien.
   ============================================================ */
.contrast,
.funnel,
.why,
.prepare,
.context,
.integrations {
  max-width: 1100px;
  margin: 0 auto;
  padding: 68px 24px;
}

@media (max-width: 720px) {
  .contrast,
  .funnel,
  .why,
  .prepare,
  .context,
  .integrations {
    padding: 48px 20px;
  }
}

/* ============================================================
   REFONTE NARRATIVE — CRM vs Clos-ia, 40→4, Pourquoi, Préparer, IA
   Réutilise les tokens existants : aucune nouvelle couleur.
   ============================================================ */


/* --- 3. CRM classique vs Clos-ia --- */
.contrast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
}

.contrast-col {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contrast-col-accent {
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
}

.contrast-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.contrast-col-accent .contrast-label { color: var(--blue); }

.contrast-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contrast-list li {
  font-size: 15px;
  color: var(--text-dim);
  padding-left: 20px;
  position: relative;
}

.contrast-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hairline);
}

.contrast-col-accent .contrast-list li { color: var(--text); }
.contrast-col-accent .contrast-list li::before { background: var(--blue); }

.contrast-verdict {
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-faint);
  font-style: italic;
}

.contrast-col-accent .contrast-verdict { color: var(--text); }

.flowline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.flowline-step {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--panel2);
  border-radius: 999px;
  padding: 7px 15px;
  white-space: nowrap;
}

.flowline-step-accent {
  background: var(--blue);
  color: #fff;
}

.flowline-arrow {
  width: 18px;
  height: 1.5px;
  background: var(--hairline);
  position: relative;
  flex-shrink: 0;
}

.flowline-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -2.5px;
  border-left: 5px solid var(--hairline);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

/* --- 4. 40 opportunités → 4 priorités --- */
.funnel-flow {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.6fr);
  gap: 26px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.funnel-side { display: flex; flex-direction: column; gap: 6px; }

.funnel-count {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(44px, 7vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

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

.funnel-caption {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.funnel-dots {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  max-width: 200px;
}

.funnel-dots span {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--panel2);
  border: 1px solid var(--hairline);
}

.funnel-dots span.is-prio {
  background: var(--blue-dim);
  border-color: var(--blue);
}

.funnel-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.funnel-chevron {
  width: 26px;
  height: 26px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
  opacity: 0.75;
}

.funnel-middle-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
}

.prio-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prio-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.prio-card:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); }

.prio-hot { border-left-color: var(--red); }
.prio-warm { border-left-color: var(--warning); }
.prio-ok { border-left-color: var(--success); }

.prio-rank {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-faint);
}

.prio-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.prio-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}

.prio-why {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.4;
}

.prio-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}

.prio-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.prio-action {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

/* --- 5. Pourquoi cette action --- */
.why-card {
  max-width: 620px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.why-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px 24px;
  border-bottom: 1px solid var(--hairline);
  background: var(--panel2);
}

.why-company {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.why-contact {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

.why-head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.why-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.why-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  background: var(--red-dim);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.why-card-body { padding: 22px 24px 24px; }

.why-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}

.why-reasons {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.why-reasons li {
  font-size: 14.5px;
  color: var(--text);
  padding-left: 22px;
  position: relative;
}

.why-reasons li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--blue);
  opacity: 0.55;
}

.why-conclusion {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--panel2);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

.why-reco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--blue-dim);
  border-radius: var(--radius-sm);
}

.why-reco-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}

.why-reco-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-deep);
}

/* --- 6. Préparer --- */
.prepare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}

.prepare-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prepare-card-accent {
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
}

.prepare-kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

.prepare-card h3 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
}

.prepare-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.prepare-card li {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}

.prepare-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.5;
}

/* --- 10. IA contextuelle --- */
.context-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
}

.context-inputs,
.context-outputs {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.context-outputs { align-items: flex-end; text-align: right; }

.context-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
}

.context-chip {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 9px 17px;
}

.context-chip-accent {
  color: var(--blue-deep);
  background: var(--blue-dim);
  border-color: transparent;
  font-weight: 600;
}

.context-core {
  position: relative;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.context-core-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gradient-cta);
  opacity: 0.14;
}

.context-core-label {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--blue-deep);
}

.context-note {
  max-width: 640px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* --- Adaptations mobile --- */
@media (max-width: 880px) {
  .funnel-flow,
  .context-flow {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .funnel-middle { flex-direction: row; gap: 12px; }
  .funnel-chevron { width: 18px; height: 18px; }

  .context-outputs { align-items: stretch; text-align: left; }
  .context-core { margin: 0 auto; width: 92px; height: 92px; }

  .why-card-head { flex-direction: column; }
  .why-head-meta { align-items: flex-start; flex-direction: row; gap: 12px; align-items: center; }
}

@media (max-width: 560px) {
  .prio-card { grid-template-columns: 20px minmax(0, 1fr); }
  .prio-meta {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 4px;
  }
  .flowline-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .prio-card { transition: none; }
  .prio-card:hover { transform: none; }
}

/* ============================================================
   INTÉGRATIONS — trois niveaux de disponibilité, dits sans ambiguïté
   ============================================================ */

.integ-group {
  max-width: 1000px;
  margin: 0 auto 34px;
}

.integ-group:last-of-type { margin-bottom: 0; }

.integ-group-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}

.integ-status {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}

.integ-status-live { background: var(--success-dim); color: #147a4a; }
.integ-status-soon { background: var(--warning-dim); color: #a35f06; }
.integ-status-planned { background: var(--panel2); color: var(--text-faint); }

.integ-group-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

.integ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.integ-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.integ-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.integ-card-live {
  border-color: rgba(34, 197, 94, 0.4);
}

.integ-card h3 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.integ-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.integ-card-mini {
  padding: 15px 17px;
  gap: 4px;
}

.integ-card-mini h3 { font-size: 14px; }
.integ-card-mini p { font-size: 12.5px; }

.integ-disclaimer {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-faint);
  max-width: 640px;
}

@media (max-width: 560px) {
  .integ-group-head { flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
   CONDENSATION — le parcours en 4 temps, et les essentiels
   Ces deux sections remplacent huit sections qui redisaient la
   même chose. Elles réutilisent les tokens existants.
   ============================================================ */

.journey,
.essentials {
  max-width: 1100px;
  margin: 0 auto;
  padding: 68px 24px;
}

/* --- Détecter → Comprendre → Préparer → Agir --- */
.journey-steps {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.journey-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 2px solid var(--hairline);
}

/* La numérotation dit une séquence réelle : on ne peut pas préparer
   une action qu'on n'a pas encore comprise. */
.journey-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.04em;
}

.journey-step h3 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.journey-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* --- Les essentiels --- */
.essentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.essential {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.essential h3 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.essential p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

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

@media (max-width: 720px) {
  .journey,
  .essentials { padding: 48px 20px; }
  .journey-steps { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   RYTHME VERTICAL
   Les neuf sections étaient toutes transparentes, sans bordure :
   empilées sur le même fond, elles se lisaient comme un seul bloc
   continu. Un filet fin dit où l'une s'arrête.
   ============================================================ */

/* Les quatre premières sections vivent désormais dans un panneau de la
   simulation : le filet qui les séparait de la section précédente n'a plus rien
   à séparer, il souligne juste le titre. Seules les sections encore autonomes
   le gardent. */
#fonctions,
#integrations,
#faq,
#contact {
  border-top: 1px solid var(--hairline);
}

/* --- Les deux nombres doivent se lire sur la même ligne --- */
/* Avec align-items: center et des colonnes de hauteurs très
   différentes (234 px contre 428), le 40 et le 4 se retrouvaient
   décalés de 97 px : on ne pouvait plus les rapprocher du regard. */
.funnel-flow { align-items: start; }
.funnel-middle { padding-top: 26px; }

/* --- Six cartes tiennent en deux rangées de trois --- */
/* En quatre colonnes, la dernière rangée n'en portait que deux. */
.essentials-grid { grid-template-columns: repeat(3, 1fr); }

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

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

/* ============================================================
   MOCKUP FIDÈLE — la vraie liste Opportunités
   Reprend la mise en page réelle du produit : regroupement par
   étape, pastille de priorité, motif d'alerte sous l'entreprise.
   ============================================================ */

.crm-window {
  max-width: 780px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.crm-body { padding: 16px 18px 20px; }

.crm-stage {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 14px 4px 7px;
  border-bottom: 1px solid var(--hairline);
}

.crm-stage:first-child { padding-top: 4px; }
.crm-stage span { font-family: "JetBrains Mono", monospace; font-size: 11px; }

/* La colonne Étape répétait le titre du groupe juste au-dessus
   (« À CONTACTER » puis « À contacter » sur chaque ligne) : elle est
   retirée, et sa largeur profite aux colonnes qui portent l'information. */
.crm-cols,
.crm-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1.5fr) 90px 78px 68px;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
}

.crm-cols {
  padding-bottom: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* La première colonne du gabarit est la pastille : l'en-tête n'a pas
   d'intitulé à y placer. */
.crm-cols span:first-child { grid-column: 2; }

.crm-row {
  border-bottom: 1px solid var(--hairline);
  font-size: 12.5px;
}

.crm-row:last-child { border-bottom: none; }

.crm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  justify-self: center;
}

.crm-dot.red { background: var(--red); }
.crm-dot.amber { background: var(--warning); }
.crm-dot.blue { background: var(--blue); }

.crm-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-main b { font-weight: 600; color: var(--text); font-size: 13px; }

/* Le motif d'alerte est le texte que le produit écrit lui-même. */
.crm-main em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--red);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-contact,
.crm-date {
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-value {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.crm-date { font-family: "JetBrains Mono", monospace; font-size: 11.5px; }

@media (max-width: 720px) {
  /* Sur téléphone on garde ce qui porte l'alerte : entreprise, motif,
     montant. Le reste sortirait de l'écran. */
  .crm-cols { display: none; }
  .crm-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .crm-contact,
  .crm-date { display: none; }
}


/* ============================================================
   AGENDA SEMAINE — reprend la vue Semaine de Clos-ia
   Les couleurs encodent le TYPE de tâche, comme dans le produit :
   appels ambre, relances bleu, visio violet, RDV physique vert.
   Les tâches occupent une voie à gauche, les rendez-vous d'agenda
   la droite de la colonne.
   ============================================================ */

.week-intro {
  max-width: 620px;
  margin: 52px auto 20px;
  text-align: center;
}

.week-intro h3 {
  margin: 0 0 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
  text-wrap: balance;
}

.week-intro p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-dim); }

.week-window {
  max-width: 940px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.week-grid {
  display: grid;
  grid-template-columns: 50px repeat(5, minmax(0, 1fr));
  background: var(--hairline);
  gap: 1px;
  padding: 0 1px 1px;
}

.week-hours,
.week-day { background: var(--surface); }

.week-hours {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 6px 12px 0;
  text-align: right;
}

.week-hours span { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--text-faint); }

.week-dayname {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--hairline);
}

.week-dayname b {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

/* Les créneaux se positionnent DANS cette zone, sous l'en-tête.
   Les placer par rapport à la colonne entière les faisait recouvrir
   le nom du jour. */
.week-slots {
  position: relative;
  height: 290px;
}

.wk {
  position: absolute;
  padding: 4px 6px 4px 7px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Voie de gauche : les tâches. Droite : les rendez-vous d'agenda.
   C'est la répartition réelle du produit. */
.wk.t { left: 3px; width: calc(38% - 4px); }
.wk.e { left: 40%; right: 3px; }

.wk.call  { background: rgba(245, 166, 35, 0.16); color: #8a5a06; border-left: 2.5px solid #f5a623; }
.wk.mail  { background: #eaf0ff;                  color: #1d4ed8; border-left: 2.5px solid #246bfe; }
.wk.video { background: #f1e9fe;                  color: #6027c7; border-left: 2.5px solid #7c3aed; }
.wk.pin   { background: #eaf1ec;                  color: #3c5c49; border-left: 2.5px solid #527a61; }

/* Le ↻ marque une tâche oubliée que Clos-ia a replacée. */
.wk.redo i { font-style: normal; margin-right: 3px; opacity: 0.75; }

.week-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
  font-size: 11.5px;
  color: var(--text-dim);
}

.week-legend span { display: inline-flex; align-items: center; gap: 6px; }

.wk-key { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.wk-key.call { background: #f5a623; }
.wk-key.mail { background: #246bfe; }
.wk-key.video { background: #7c3aed; }
.wk-key.pin { background: #527a61; }

.wk-redo i {
  font-style: normal;
  font-weight: 700;
  color: var(--text-dim);
}

@media (max-width: 760px) {
  .week-grid { grid-template-columns: 40px repeat(3, minmax(0, 1fr)); }
  .week-day:nth-child(n + 5) { display: none; }
  .wk { font-size: 8.5px; }
  .wk.t { width: calc(44% - 4px); }
  .wk.e { left: 46%; }
}




/* ============================================================
   ASSISTANT IA — reprend l'écran réel de Clos-ia
   Bandeau, ligne d'analyse du jour, et trois dossiers avec le
   raisonnement qui les justifie.
   ============================================================ */

.ai-demo { margin-top: 56px; }

.ai-intro { max-width: 620px; margin: 0 auto 22px; text-align: center; }

.ai-intro h3 {
  margin: 0 0 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
  text-wrap: balance;
}

.ai-intro p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-dim); }

.assist-window {
  max-width: 960px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.assist-head {
  background: var(--gradient-cta);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.assist-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}

.assist-sub { font-size: 13px; color: rgba(255, 255, 255, 0.88); }

.assist-scan {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--text-dim);
}

.assist-scan-label { font-weight: 700; color: var(--text); }
.assist-scan b { font-weight: 700; color: var(--text); }

/* Le chiffre qui compte : quatre dossiers, pas dix-huit. Une sélection
   qui retient tout n'est pas une sélection. */
.assist-scan-alert { color: var(--red); }
.assist-scan-alert b { color: var(--red); }

.assist-body { padding: 18px 24px 24px; }

.assist-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}

.assist-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.assist-card {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.assist-kind {
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 4px;
}

.assist-kind.risk { color: var(--red); }
.assist-kind.mail { color: var(--blue); }
.assist-kind.rdv { color: #3c5c49; }

.assist-company {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.assist-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.assist-meta { font-size: 12.5px; color: var(--text-dim); }

.assist-why {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

.assist-why-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 5px;
}

.assist-why p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }

/* Volontairement du texte et non un bouton : un faux bouton qui ne
   répond pas au clic coûte plus de confiance qu'il n'en gagne. */
.assist-reco {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue);
}

@media (max-width: 900px) {
  .assist-cards { grid-template-columns: 1fr; }
  .assist-scan { gap: 4px 14px; padding: 12px 18px; }
  .assist-body { padding: 16px 18px 20px; }
}

/* ============================================================
   FORMULAIRE DE CONTACT — deux colonnes
   Six champs empilés faisaient une colonne interminable ;
   appariés, ils tiennent sans allonger la page.
   ============================================================ */

.lead-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Le libellé et son astérisque forment un seul élément : sans cette
   encapsulation, l'astérisque devenait une ligne flex à part et
   décalait le champ vers le bas, désalignant les deux colonnes. */
.lead-form .lead-label {
  display: block;
  line-height: 1.3;
}

.lead-form .req {
  color: #7fd4ff;
  font-weight: 700;
}

/* Un libellé sur deux lignes ne doit pas étirer son voisin. */
.lead-row { align-items: start; }

@media (max-width: 560px) {
  /* Deux colonnes sur un téléphone donneraient des champs de 130 px. */
  .lead-row { grid-template-columns: 1fr; }
}


/* ============================================================
   PIED DE PAGE — la marque, puis deux colonnes de liens
   Les pages du site et les mentions obligatoires ne se cherchent
   pas pour les mêmes raisons : elles ne se mélangent pas.
   ============================================================ */

/* Toujours utilisée par les pages légales, CGU, CGV, confidentialité
   et abonnement — retirer cette règle casserait leur pied de page. */
.footer-legal { color: var(--text-faint); font-size: 13px; }
.footer-legal:hover { color: var(--blue); }

.footer-brand { display: flex; flex-direction: column; gap: 6px; }

.footer-tag {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
}

.footer-copy {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-faint);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-col-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
}

.footer-col a {
  font-size: 13.5px;
  color: var(--text-dim);
  transition: color 140ms ease;
}

.footer-col a:hover { color: var(--text); }

/* Une flèche discrète prévient qu'on quitte le site. */
.footer-col .ext { font-size: 11px; opacity: 0.65; }

.footer { padding: 48px 24px 36px; }

@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }
  /* La marque reprend toute la largeur au-dessus des colonnes. */
  .footer-brand { grid-column: 1 / -1; }
}

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

/* ============================================================
   TEXTE À GAUCHE, PRODUIT À DROITE
   Un titre au-dessus d'une maquette empile deux hauteurs ;
   côte à côte, la section tient dans un écran et le produit
   se voit en même temps que l'argument.
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* L'en-tête de section est centré par défaut : ici il s'aligne
   à gauche, en regard du visuel. */
.split-text .section-head {
  text-align: left;
  margin: 0;
  max-width: none;
}

.split-text .section-head h2 { text-wrap: balance; }

.split-visual { min-width: 0; }

/* Les maquettes reprennent la largeur de leur colonne. */
.split-visual .why-card,
.split-visual .crm-window { max-width: none; margin: 0; }

.split-visual .demo-note { text-align: left; margin-left: 0; }

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .split-text .section-head { text-align: center; }
  .split-visual .demo-note { text-align: center; }
}

/* Ces deux sections portent un contenu plus dense à gauche —
   quatre étapes, six cartes — que les deux premières. */
.split-wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
}

/* Empilées en colonne, les étapes n'ont plus besoin de leur grille
   horizontale ni de leur filet de séparation. */
.split-text .journey-steps {
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 0;
}

.split-text .journey-step {
  border-top: none;
  padding-top: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
}

.split-text .journey-num { grid-row: span 2; }
.split-text .journey-step h3 { font-size: 16px; }
.split-text .journey-step p { font-size: 13.5px; }

.split-text .essentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.split-text .essential { padding: 14px 15px; }
.split-text .essential h3 { font-size: 14px; }
.split-text .essential p { font-size: 12.5px; }

.split-visual .week-intro { margin: 0 0 14px; text-align: left; max-width: none; }
.split-visual .week-intro h3 { font-size: 18px; }
.split-visual .week-intro p { font-size: 13.5px; }
.split-visual .ai-intro { margin: 0 0 14px; text-align: left; max-width: none; }
.split-visual .ai-intro h3 { font-size: 18px; }
.split-visual .ai-intro p { font-size: 13.5px; }
.split-visual .ai-demo { margin-top: 0; }
.split-visual .week-window,
.split-visual .assist-window { max-width: none; }

/* Trois cartes d'assistant dans une demi-largeur seraient illisibles. */
.split-visual .assist-cards { grid-template-columns: 1fr; gap: 10px; }

@media (max-width: 900px) {
  .split-wide { grid-template-columns: 1fr; }
  .split-text .journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-visual .week-intro,
  .split-visual .ai-intro { text-align: center; }
}

@media (max-width: 560px) {
  .split-text .journey-steps,
  .split-text .essentials-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   LE TEXTE RESTE, LE PRODUIT DÉFILE
   Dans ces sections le visuel est bien plus haut que le texte —
   747 px d'écart pour « De la détection à l'action ». Le texte
   s'immobilise le temps qu'on parcoure la maquette, au lieu de
   remonter hors de l'écran dès les premiers pixels.
   ============================================================ */

.split { align-items: start; }

.split-text {
  position: sticky;
  /* Le bandeau collant fait 62 px : on se pose en dessous. */
  top: 92px;
  align-self: start;
}

@media (max-width: 900px) {
  /* En une seule colonne, le texte précède le visuel : l'immobiliser
     le collerait au-dessus de son propre contenu. */
  .split-text { position: static; }
}

/* L'agenda de la semaine reprend toute la largeur : cinq colonnes de
   jours dans une demi-page donnaient des pastilles de 50 px, où chaque
   libellé se coupait au milieu d'un mot. */
#fonctions .week-intro { max-width: 620px; margin: 44px auto 20px; text-align: center; }
#fonctions .essentials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ============================================================
   ÉCOSYSTÈME — des noms, pas des phrases
   Trois paragraphes chargés se lisaient comme un pavé. Les noms
   d'outils sont des étiquettes : on les balaie du regard.
   ============================================================ */

.eco {
  max-width: 860px;
  margin: 48px auto 0;
  padding-top: 34px;
  border-top: 1px solid var(--hairline);
}

.eco-title {
  margin: 0 0 22px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: center;
}








/* Ce qui n'existe pas encore ne doit pas peser autant que le reste. */

.eco-note {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-faint);
  text-align: center;
}

@media (max-width: 620px) {
  .eco-row { grid-template-columns: 1fr; gap: 8px; }
  .eco-tag { justify-self: start; padding: 4px 12px; }
}

/* ============================================================
   TARIFS — la section tient dans un écran
   Trois cartes de 32 px de marge, un prix à 48 px et une bannière
   d'offre à part additionnaient plus d'un écran de hauteur. Tout
   est resserré sans rien retirer.
   ============================================================ */

.pricing { padding: 48px 24px; margin: 24px auto; }

.launch-banner { margin-bottom: 24px; padding: 9px 16px; font-size: 13px; }

.price-card { padding: 24px 22px; }

.price-plan { font-size: 17px; }
.price-sub { font-size: 12.5px; }

/* Le prix reste le point d'ancrage du regard, mais 48 px sur trois
   cartes prenaient à eux seuls un sixième de l'écran. */
.price-row { margin: 14px 0 6px; }
.price-instead { font-size: 12px; }
.price-note { font-size: 12.5px; line-height: 1.5; margin-bottom: 16px; }

.price-cta-secondary { margin-top: 10px; font-size: 12.5px; }

@media (max-width: 900px) {
  .pricing { padding: 40px 18px; }
}

/* ============================================================
   LES ESSENTIELS — remasterisé
   Six cartes encadrées, ombrées, sur fond blanc pesaient lourd
   pour six lignes de texte. Un filet fin suffit à séparer, comme
   pour les étapes du parcours : la section respire, et la
   maquette d'agenda redevient le seul objet visuel.
   ============================================================ */

#fonctions .essentials-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 32px;
  max-width: 1000px;
  margin: 0 auto;
}

#fonctions .essential {
  background: none;
  border: none;
  border-top: 2px solid var(--hairline);
  border-radius: 0;
  padding: 14px 0 0;
  gap: 5px;
}

#fonctions .essential-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

#fonctions .essential p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

@media (max-width: 820px) {
  #fonctions .essentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
}

@media (max-width: 520px) {
  #fonctions .essentials-grid { grid-template-columns: 1fr; }
}

/* Tarifs — second resserrage. Le titre, la bannière et les cartes
   gardent tout leur contenu, mais cessent de respirer pour trois. */
.pricing { padding: 34px 24px; margin: 16px auto; }
.pricing .section-head { margin-bottom: 18px; }
.launch-banner { margin-bottom: 18px; padding: 8px 16px; font-size: 12.5px; }
.price-card { padding: 20px 18px; }
.price-row { margin: 10px 0 4px; }
.price-plan { font-size: 16px; }
.price-note { font-size: 12px; margin-bottom: 12px; }
.price-cta-secondary { margin-top: 8px; font-size: 12px; }

/* ============================================================
   ARAIGNÉE DES INTÉGRATIONS
   Clos-ia au centre, les outils autour, reliés par un trait dont
   le style dit la disponibilité : plein pour ce qui marche,
   pointillé pour ce qui est à l'étude.
   ============================================================ */

.eco-web {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
}

.eco-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.eco-legend span { display: inline-flex; align-items: center; gap: 7px; }

.eco-key {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

.eco-key.live { background: #2e6ff2; }
.eco-key.soon { background: #a35f06; }
.eco-key.plan { background: none; border: 1px dashed #8a94a6; }
.eco-key.import { background: #dfe9fd; border: 1px solid #2e6ff2; }

/* Sous cette largeur les libellés se chevaucheraient : le diagramme
   laisse la place à une liste. */
@media (max-width: 700px) {
  .eco-web { display: none; }
  .eco-legend { display: none; }
  .eco-fallback { display: block; }
}

.eco-fallback { display: none; }

/* La section de l'agenda, désormais autonome. */
.agenda-week {
  max-width: 1100px;
  margin: 0 auto;
  padding: 68px 24px;
}


/* ============================================================
   SIMULATION DU PRODUIT
   Une fenêtre d'application : barre latérale collée à gauche
   comme dans Clos-ia, et l'écran correspondant à droite.
   ============================================================ */



/* --- barre latérale --- */





/* --- zone d'écran --- */

/* Les bénéfices de la section suivent la maquette : on descend dans l'écran
   choisi sans quitter la barre latérale, qui reste à portée de clic.
   Le conteneur d'origine est conservé — toutes ses règles en dépendent — mais
   il n'est plus une section pleine page : on lui reprend largeur et marges. */

/* --- Tenir dans un écran ---------------------------------------------------
   Chaque panneau doit se lire sans défiler. Les blocs rapatriés viennent de
   sections qui occupaient une page entière : on reprend leur respiration, on
   plafonne les illustrations qui grandissaient avec la largeur, et on resserre
   les titres. Rien n'est retiré, tout est compacté. */

/* L'araignée est un SVG : sa hauteur suit sa largeur. La borner en largeur est
   le seul moyen de la borner en hauteur. */



/* Deux blocs rapatriés ont perdu leur visuel, devenu un doublon de la maquette
   du panneau. Ce qui reste doit reprendre toute la largeur au lieu de tenir
   dans la colonne de texte d'une mise en page à deux colonnes. */

/* Les trois points de conclusion se détachent de la maquette qui les précède. */

.mk {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12.5px;
}

.mk b { font-weight: 700; color: var(--text); }
.mk em { font-style: normal; color: var(--text-dim); }
.mk-num { font-family: "JetBrains Mono", monospace; font-weight: 700; color: var(--text); white-space: nowrap; }

.mk-lab {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.mk-lab b { color: var(--text-faint); font-family: "JetBrains Mono", monospace; }

.mk-act {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-dim);
  border-radius: 6px;
  padding: 5px 9px;
  white-space: nowrap;
}

/* Aujourd'hui */
.mk-hero {
  background: var(--gradient-cta);
  border-radius: 10px;
  padding: 14px 16px;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}
.mk-hero em { display: block; font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.88); margin-top: 2px; }
.mk-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.9); text-align: left; }
.mk-stats b { color: #fff; }
.mk-stats i { font-style: normal; color: #ffd0d6; }

.mk-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.mk-cols > div { display: flex; flex-direction: column; gap: 6px; }

.mk-line {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  background: var(--bg);
  border-left: 2.5px solid var(--blue);
  border-radius: 7px;
  padding: 8px 10px;
}
.mk-t { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--text-dim); }
.mk-line em, .mk-watch em { display: block; font-size: 11px; margin-top: 1px; }

.mk-watch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  background: var(--bg);
  border-left: 2.5px solid var(--hairline);
  border-radius: 7px;
  padding: 8px 10px;
}
.mk-watch em { grid-column: 1 / -1; }
.mk-watch.red { border-left-color: var(--red); }
.mk-watch.amber { border-left-color: var(--warning); }
.mk-watch.green { border-left-color: var(--success); }

/* Opportunités */
.mk-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1.5fr) 82px 74px 64px;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--hairline);
}
.mk-row.head {
  grid-template-columns: minmax(0, 1.5fr) 82px 74px 64px;
  padding-left: 22px;
  border-bottom-color: var(--hairline-strong, var(--hairline));
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.mk-row em { display: block; font-size: 11px; color: var(--red); margin-top: 1px; }
.mk-dot { width: 7px; height: 7px; border-radius: 50%; justify-self: center; }
.mk-dot.red { background: var(--red); }
.mk-dot.amber { background: var(--warning); }
.mk-dot.blue { background: var(--blue); }

/* Agenda */
.mk-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mk-wcol { display: flex; flex-direction: column; gap: 5px; }
.mk-wday {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}
.mk-wk {
  font-size: 10px;
  font-weight: 600;
  border-radius: 5px;
  padding: 5px 6px;
  border-left: 2.5px solid;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-wk.call { background: rgba(245,166,35,0.16); color: #8a5a06; border-color: #f5a623; }
.mk-wk.mail { background: #eaf0ff; color: #1d4ed8; border-color: #246bfe; }
.mk-wk.video { background: #f1e9fe; color: #6027c7; border-color: #7c3aed; }
.mk-wk.pin { background: #eaf1ec; color: #3c5c49; border-color: #527a61; }

.mk-legend { font-size: 10.5px; color: var(--text-dim); display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.mk-legend .k { width: 9px; height: 9px; border-radius: 2px; margin-left: 6px; }
.mk-legend .k.call { background: #f5a623; }
.mk-legend .k.mail { background: #246bfe; }
.mk-legend .k.video { background: #7c3aed; }
.mk-legend .k.pin { background: #527a61; }

/* Assistant IA */
.mk-scan { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 11.5px; color: var(--text-dim); }
.mk-scan .alert, .mk-scan .alert b { color: var(--red); }
.mk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-card {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mk-card em { font-size: 11px; line-height: 1.5; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--hairline); }
.mk-card > span:first-child { font-size: 10.5px; font-weight: 700; }
.k-risk { color: var(--red); }
.k-mail { color: var(--blue); }
.k-rdv { color: #3c5c49; }
.mk-reco { font-size: 11px; font-weight: 700; color: var(--blue); margin-top: 4px; }

/* Activités */
.mk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mk-kpis > div { background: var(--bg); border-radius: 9px; padding: 11px 12px; }
.mk-kpis b { display: block; font-family: "JetBrains Mono", monospace; font-size: 16px; }
.mk-kpis em { display: block; font-size: 10.5px; margin-top: 2px; }

.mk-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  border-left: 2.5px solid;
  background: var(--bg);
  border-radius: 7px;
  padding: 9px 11px;
}
.mk-alert em { grid-column: 1; font-size: 11px; }
.mk-alert .mk-act { grid-row: span 2; }
.mk-alert.red { border-left-color: var(--red); }
.mk-alert.amber { border-left-color: var(--warning); }
.mk-note { font-size: 10.5px; color: var(--text-faint); }

/* Équipe */
.mk-mem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding: 9px 2px;
  border-bottom: 1px solid var(--hairline);
}
.mk-mem em { grid-column: 1; font-size: 11px; }
.mk-role {
  grid-row: span 2;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--panel2);
  border-radius: 6px;
  padding: 4px 9px;
  white-space: nowrap;
}
.mk-role.admin { color: var(--blue); background: var(--blue-dim); }

.mk-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  background: var(--bg);
  border-radius: 8px;
  padding: 11px 12px;
  margin-top: 4px;
}
.mk-rule em { grid-column: 1; font-size: 11px; }
.mk-switch {
  grid-row: span 2;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--hairline-strong, #d3d1c7);
  position: relative;
}
.mk-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}
.mk-switch.on { background: var(--blue); }
.mk-switch.on::after { left: auto; right: 2px; }

/* --- les apports, sous l'écran --- */



@media (max-width: 900px) {
  .mk-cols, .mk-cards, .mk-kpis { grid-template-columns: 1fr; }
  .mk-week { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-wcol:nth-child(n+4) { display: none; }
  .mk-row { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .mk-row > span:nth-child(3), .mk-row > span:nth-child(5) { display: none; }
  .mk-row.head { display: none; }
}

.tour { max-width: none; }

/* Le parcours n'a plus de visuel à côté : ses quatre étapes reprennent
   la largeur et la disposition horizontale. */
#parcours .section-head { text-align: center; margin-left: auto; margin-right: auto; }
#parcours .journey-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
#parcours .journey-step { border-top: 2px solid var(--hairline); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
#parcours .journey-step h3 { font-size: 18px; }
#parcours .journey-step p { font-size: 14px; }

@media (max-width: 900px) { #parcours .journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #parcours .journey-steps { grid-template-columns: 1fr; } }

/* ═══ REFONTE : PROBLÈME → DÉMONSTRATION → POURQUOI → PARCOURS → BÉNÉFICE → MANAGER ═══
   Une seule règle guide ces sections : le regard doit toujours savoir où aller.
   D'où peu de couleurs, un seul accent, et des chiffres qui portent la lecture. */

.demo, .parcours, .pour-qui {
  max-width: 1080px;
  margin: 0 auto;
  padding: 54px 28px;
}

/* — Problème : quatre chiffres qui écrasent, puis la question qui bloque — */
.pb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 34px auto 0;
  max-width: 780px;
}

.pb-stat {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 22px 16px;
  text-align: center;
}

.pb-stat b {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pb-stat span {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.35;
}

.pb-punch {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 34px 0 0;
}


/* — Démonstration : l'entonnoir, puis la carte qui fait tout comprendre — */
.demo-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 30px;
  flex-wrap: wrap;
}

.demo-step {
  flex: 1 1 230px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.demo-step .demo-num {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 5px;
}

.demo-step b { font-size: 15px; font-weight: 700; }

.demo-step.is-out {
  border-color: var(--blue);
  background: var(--blue-dim);
}

.demo-step.is-out b { color: var(--blue-deep); }

.demo-arrow { display: flex; align-items: center; color: var(--text-faint); font-size: 17px; }

.deal-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 620px;
  margin: 0 auto;
  overflow: hidden;
}

.deal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--hairline);
}

.deal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

.deal-id { flex: 1; min-width: 0; }
.deal-id b { display: block; font-size: 16px; font-weight: 700; }
.deal-id em { display: block; font-style: normal; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }

.deal-prio {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--red);
  background: var(--red-dim);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.deal-lab {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 9px;
}

.deal-signals { padding: 18px 22px; border-bottom: 1px solid var(--hairline); }
.deal-signals ul { margin: 0; padding: 0; list-style: none; }

.deal-signals li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.75;
}

.deal-signals li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

.deal-why { padding: 18px 22px; background: var(--panel2); border-bottom: 1px solid var(--hairline); }
.deal-why p { margin: 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }
.deal-conf { display: inline-block; margin-top: 11px; font-size: 12.5px; color: var(--text-dim); }
.deal-conf b { color: var(--success); }

.deal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  flex-wrap: wrap;
}

.deal-reco { font-size: 14px; font-weight: 700; }

.deal-btn {
  background: var(--gradient-cta);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}


/* — Parcours : quatre étapes numérotées, parce que l'ordre compte vraiment — */
.etapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}

.etape {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 22px 18px;
}

.etape-n {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--blue);
  margin-bottom: 11px;
}

.etape b { display: block; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.etape em { font-style: normal; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }

/* — Bénéfice : la même journée, avant et après — */
.av-ap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
}

.av, .ap {
  border-radius: var(--radius-md);
  padding: 26px 24px;
}

.av { background: var(--panel2); border: 1px solid var(--hairline); }
.ap { background: var(--blue-dim); border: 1px solid rgba(46, 111, 242, 0.22); }

.av-lab {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
}

.ap .av-lab { color: var(--blue-deep); }
.av p, .ap p { margin: 0; font-size: 16.5px; line-height: 1.55; }
.av p { color: var(--text-dim); }
.ap p { color: var(--text); font-weight: 600; }

/* — Manager : ce qui demande un arbitrage, et sur quel dossier — */
.mg-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  max-width: 720px;
  margin: 0 auto 34px;
  overflow: hidden;
}

.mg-head { padding: 16px 22px; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.mg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.mg-cols > div { padding: 18px 22px; }
.mg-cols > div + div { border-left: 1px solid var(--hairline); }

.mg-lab {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 11px;
}

.mg-line { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 4px 0; }
.mg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mg-dot.red { background: var(--red); }
.mg-dot.amber { background: var(--warning); }

.mg-focus { padding: 20px 22px; background: var(--panel2); border-top: 1px solid var(--hairline); }
.mg-focus b { display: block; font-size: 15px; margin-bottom: 4px; }
.mg-focus em { display: block; font-style: normal; font-size: 13px; color: var(--text-dim); line-height: 1.55; }

.mg-reco {
  display: block;
  margin-top: 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue-deep);
}

/* — Rôles : trois phrases, pas une de plus — */
.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 34px; }

.role {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 22px 20px;
}

.role b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.role em { font-style: normal; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }

@media (max-width: 860px) {
  .demo, .parcours, .pour-qui { padding: 40px 20px; }
  .pb-grid { grid-template-columns: 1fr 1fr; }
  .pb-stat b { font-size: 32px; }
  .pb-punch { font-size: 22px; }
  .etapes { grid-template-columns: 1fr 1fr; }
  .av-ap { grid-template-columns: 1fr; }
  .mg-cols { grid-template-columns: 1fr; }
  .mg-cols > div + div { border-left: none; border-top: 1px solid var(--hairline); }
  .roles-grid { grid-template-columns: 1fr; }
  .demo-step { min-width: 0; width: 100%; }
  .deal-actions { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .pb-grid { grid-template-columns: 1fr 1fr; }
  .etapes { grid-template-columns: 1fr; }
}

/* — Import : quatre gestes, une flèche entre chacun. La honnêteté sur la
     nature de l'opération vaut mieux qu'une promesse de synchronisation. — */

.imp-steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.imp-step {
  flex: 1 1 180px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 20px 18px;
}

.imp-step b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.imp-step em { font-style: normal; font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.imp-arrow {
  display: flex;
  align-items: center;
  color: var(--text-faint);
  font-size: 17px;
}

.imp-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-faint);
  max-width: 620px;
  margin: 22px auto 0;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .import-crm { padding: 40px 20px; }
  .imp-arrow { display: none; }
  .imp-step { flex-basis: 100%; }
}

@media (max-width: 700px) {
  .demo-flow { flex-direction: column; }
  .demo-arrow { justify-content: center; transform: rotate(90deg); }
}