/* =========================================================
   AB-CONNECT — accueil « chaîne de traitement »
   Univers visuel isolé : toutes les règles sont portées par
   `.home-page` ou par un élément propre à l'accueil, afin que
   les 41 autres pages conservent leur identité historique.
   ========================================================= */

.home-page {
  --home-bg: #05070c;
  --home-surface: #0b0f17;
  --home-surface-raised: #121826;
  --home-ink: #edeff5;
  --home-muted: rgba(237, 239, 245, 0.58);
  --home-line: rgba(237, 239, 245, 0.11);
  --home-line-strong: rgba(237, 239, 245, 0.16);
  --home-signal: #2e9bff;
  --home-violet: #7c5cff;
  --home-ok: #3ddc84;
  /* Couleur de la colonne « avant ». La maquette la pose sans la nommer : un
     orange chaud, assez éloigné du rouge pour dire « lent » et non « erreur ». */
  --home-slow: #ff9466;
  --home-gradient: linear-gradient(135deg, var(--home-signal), var(--home-violet));
  /* Voile de relief commun aux cartes : un dégradé clair en haut à gauche, qui
     se dissipe avant le bas. Sans lui les cartes sont des aplats. */
  --home-sheen: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015) 45%, transparent 70%);
  --home-lift: inset 0 1px 0 0 rgba(255, 255, 255, 0.05), 0 24px 44px -30px rgba(0, 0, 0, 0.7);
  --home-lift-hover: inset 0 1px 0 0 rgba(255, 255, 255, 0.07), 0 30px 60px -24px color-mix(in srgb, var(--home-signal) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--home-signal) 6%, transparent);
  --home-shadow: 0 40px 90px -36px rgba(0, 0, 0, 0.88);
  --home-radius: 18px;
  --home-radius-sm: 10px;
  --home-container: 1180px;
  --home-on-signal: #04121f;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  background: var(--home-bg);
  color: var(--home-ink);
  /* Exactement la hauteur de l'en-tête fixe : tout écart supplémentaire se
     cumule avec le rembourrage du hero et repousse le titre vers le bas. */
  padding-top: var(--header-height);
}

[data-theme="light"] .home-page {
  --home-bg: #f7f9fc;
  --home-surface: #ffffff;
  --home-surface-raised: #edf2f9;
  --home-ink: #10131a;
  --home-muted: rgba(16, 19, 26, 0.60);
  --home-line: rgba(16, 19, 26, 0.12);
  --home-line-strong: rgba(16, 19, 26, 0.18);
  --home-signal: #147fd9;
  --home-violet: #6549dd;
  --home-ok: #168c52;
  --home-slow: #b8500f;
  --home-shadow: 0 34px 80px -38px rgba(20, 36, 68, 0.28);
  --home-on-signal: #ffffff;
  /* Le voile de la maquette est un éclaircissement : sur fond clair il ne
     ferait qu'un halo blanc sur blanc, on l'inverse en ombre légère. */
  --home-sheen: linear-gradient(155deg, rgba(20, 36, 68, 0.04), rgba(20, 36, 68, 0.012) 45%, transparent 70%);
  --home-lift: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 20px 40px -30px rgba(20, 36, 68, 0.35);
  --home-lift-hover: inset 0 1px 0 0 rgba(255, 255, 255, 0.7), 0 26px 52px -26px color-mix(in srgb, var(--home-signal) 30%, transparent), 0 0 0 1px color-mix(in srgb, var(--home-signal) 10%, transparent);
}

.home-page::before { display: none; }

/* ---------- Arrière-plans ambiants ---------- */

.home-bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    linear-gradient(var(--home-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--home-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 74% 65% at 50% 0%, #000 0%, transparent 74%);
}

.home-spotlight {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    520px circle at var(--home-mx, 50%) var(--home-my, 18%),
    color-mix(in srgb, var(--home-signal) 10%, transparent),
    transparent 70%
  );
}

/* Seuls ces deux blocs passent au-dessus des fonds ambiants. L'en-tête, le
   lanceur et le panneau de chat sont `position: fixed` : leur imposer
   `relative` les remettait dans le flux — l'en-tête descendait sous le
   rembourrage de la page et le chat atterrissait en bas à gauche, après le
   pied de page. */
.home-page .home-main,
.home-page .site-footer { position: relative; z-index: 2; }

/* ---------- En-tête ---------- */

/* En-tête, pastille du logo, boutons et champs : plus rien ici. Ces éléments
   sont partagés avec les cent vingt-cinq autres pages, et leur habillage — le
   dégradé, le halo, le verre dépoli — est désormais celui du design system.
   Les redéfinir ici ferait diverger l'accueil au premier réglage. */
.home-page .logo { white-space: nowrap; }

/* ---------- Structure ---------- */

/* Même géométrie que la maquette : la gouttière est un rembourrage intérieur,
   pas une réduction de largeur. Le contenu fait donc 1124px et le hero se
   plie sur trois lignes comme prévu, au lieu de gagner 56px et de tenir sur
   deux. La barre de l'en-tête garde, elle, ses 1180px de bord à bord. */
.home-wrap {
  max-width: var(--home-container);
  margin-inline: auto;
  padding: 0 28px;
}

.home-section { padding: 100px 0; }
.home-section.tight { padding-top: 0; }
.home-divider { height: 1px; margin: 0; border: 0; background: var(--home-line); }

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--home-signal);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--home-signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-signal) 14%, transparent);
}

.home-section-head { max-width: 620px; margin-bottom: 52px; }
.home-section-head.center { margin-inline: auto; text-align: center; }
.home-section-head.center .home-section-lead { margin-inline: auto; }

.home-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.home-section-lead { margin: 16px 0 0; color: var(--home-muted); font-size: 16.5px; }

/* ---------- Démonstration téléphonique ---------- */

.home-phone-demo { padding: 72px 0 10px; }

.home-phone-demo-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  align-items: center;
  gap: 48px;
  padding: 42px;
  overflow: hidden;
  border: 1px solid var(--home-line-strong);
  border-radius: var(--home-radius);
  background:
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--home-signal) 20%, transparent), transparent 34%),
    var(--home-surface);
  box-shadow: var(--home-shadow);
}

.home-phone-demo-copy h2 {
  margin: 12px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.045em;
}

.home-phone-demo-copy > p:not(.home-eyebrow) {
  max-width: 62ch;
  margin: 0;
  color: var(--home-muted);
  font-size: 16px;
  line-height: 1.65;
}

.home-phone-demo-copy > p.home-phone-demo-notice {
  margin-top: 16px;
  font-size: 12.5px;
}

.home-phone-demo-action { display: grid; justify-items: stretch; gap: 14px; }

.home-phone-demo-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--home-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.home-phone-demo-button {
  display: grid;
  justify-items: center;
  min-height: 76px;
  padding: 15px 24px;
  text-align: center;
}

.home-phone-demo-button strong {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.02em;
}

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

/* Pas de hauteur de fenêtre ni de centrage vertical : la maquette pose le
   hero juste sous l'en-tête. Centrer dans 100svh laissait une bande vide de
   200px et repoussait le module hors de l'écran. */
.home-hero {
  position: relative;
  padding: 88px 0 60px;
  overflow: hidden;
}

.home-hero::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -220px;
  top: -240px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--home-violet) 16%, transparent), transparent 69%);
  pointer-events: none;
}

/* Pas de `width` ici : la largeur vient de `.home-wrap`. En redéclarer une
   annulait le conteneur de 1180px et faisait déborder le hero d'un bord à
   l'autre, alors que l'en-tête et le pied restaient centrés. */
.home-hero-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 40px;
  align-items: center;
}

.home-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-align: left;
}

.home-lede {
  margin: 24px 0 0;
  max-width: 48ch;
  color: var(--home-muted);
  font-size: 17.5px;
  line-height: 1.6;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.home-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 56px 0 0;
  text-align: center;
}

.home-stat {
  min-width: 0;
  padding: 0 18px;
  margin: 0;
  border-right: 1px solid var(--home-line);
}

.home-stat:first-child { padding-left: 0; }
.home-stat:last-child { padding-right: 0; border-right: 0; }

.home-stat dt {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--home-ink);
}

.home-stat dd {
  margin: 2px 0 0;
  max-width: 22ch;
  margin-inline: auto;
  color: var(--home-muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.45;
}

/* ---------- Avant / Après ---------- */

/* Coque commune des modules de la maquette : fond opaque, voile de relief et
   ombre portée. Le module vit dans la colonne droite du hero. */
.home-compare {
  position: relative;
  background-color: var(--home-surface);
  background-image: var(--home-sheen);
  border: 1px solid var(--home-line-strong);
  border-radius: var(--home-radius);
  overflow: hidden;
  box-shadow: var(--home-shadow);
}

.home-compare-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--home-line);
  background: color-mix(in srgb, var(--home-ink) 2%, transparent);
}

.home-compare-label,
.home-compare-headline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.home-compare-label { display: flex; align-items: center; gap: 9px; color: var(--home-muted); }
.home-compare-headline { color: var(--home-signal); text-transform: none; letter-spacing: 0.04em; }

.home-compare-kicker {
  margin: 0;
  padding: 22px 26px 0;
  color: var(--home-signal);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hauteur minimale figée sur les trois blocs qui changent : sans elle, un
   énoncé néerlandais plus long que le français faisait sauter la colonne
   entière à chaque rotation. */
.home-compare-task {
  margin: 0;
  padding: 8px 26px 4px;
  min-height: 68px;
  color: var(--home-ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.home-compare-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  margin-top: 10px;
}

.home-compare-col { padding: 16px 18px 22px; min-width: 0; }

.home-compare-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--home-signal) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--home-signal) 28%, transparent);
  color: var(--home-signal);
  font-size: 14px;
}

.home-compare-col-head {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-compare-figure {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 2.05vw, 20px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
}

.home-compare-col.before .home-compare-col-head,
.home-compare-col.before .home-compare-figure { color: var(--home-slow); }
.home-compare-col.after .home-compare-col-head,
.home-compare-col.after .home-compare-figure { color: var(--home-ok); }

.home-compare-caption {
  margin: 9px 0 0;
  color: var(--home-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-compare-gain {
  margin: 18px 26px 20px;
  padding: 14px 18px;
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--home-ok) 30%, transparent);
  background: color-mix(in srgb, var(--home-ok) 9%, transparent);
  color: var(--home-ok);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

/* Le fondu porte sur les trois blocs à la fois : les faire disparaître
   séparément laissait voir l'énoncé d'un exemple au-dessus des chiffres du
   suivant. */
.home-compare-task,
.home-compare-cols,
.home-compare-gain { transition: opacity 0.35s ease; }
.home-compare.is-fading .home-compare-task,
.home-compare.is-fading .home-compare-cols,
.home-compare.is-fading .home-compare-gain { opacity: 0; }

.home-compare-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 26px 22px;
  min-height: 7px;
}

.home-compare-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--home-ink) 18%, transparent);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.home-compare-dots button.is-current { background: var(--home-signal); transform: scale(1.3); }
.home-compare-dots button:hover { background: color-mix(in srgb, var(--home-signal) 60%, transparent); }

.home-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--home-ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-ok) 20%, transparent);
  animation: home-blink 1.7s ease-in-out infinite;
}

@keyframes home-blink { 50% { opacity: 0.35; } }

/* ---------- Services ---------- */

/* La maquette a quitté la grille en filets d'un pixel pour des cartes
   détachées : chacune porte son voile, son ombre et son relèvement au survol.
   Sans l'écart de 18px, l'ombre d'une carte se posait sur sa voisine. */
.home-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.home-service-card,
.home-price-card,
.home-usecase {
  position: relative;
  overflow: hidden;
  background-color: var(--home-surface);
  background-image: var(--home-sheen);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  box-shadow: var(--home-lift);
  transition:
    transform 0.4s var(--ease),
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background-color 0.4s ease;
}

.home-service-card:hover,
.home-service-card:focus-visible,
.home-price-card:hover,
.home-usecase:hover {
  transform: translateY(-5px);
  background-color: var(--home-surface-raised);
  border-color: color-mix(in srgb, var(--home-signal) 32%, transparent);
  box-shadow: var(--home-lift-hover);
}

.home-service-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: minmax(50px, auto) 1fr;
  column-gap: 10px;
  row-gap: 10px;
  align-items: start;
  padding: 28px 24px 26px;
  color: inherit;
  text-decoration: none;
}

/* Halo qui s'allume dans l'angle au survol. Détaché du fond pour ne pas
   réanimer le dégradé de la carte à chaque passage du curseur. */
.home-service-card::after {
  content: "";
  position: absolute;
  top: -60%;
  right: -40%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--home-signal) 16%, transparent), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.home-service-card:hover::after,
.home-service-card:focus-visible::after { opacity: 1; }

.home-service-card .num {
  align-self: center;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--home-signal) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--home-signal) 22%, transparent);
  color: var(--home-signal);
  font-family: var(--font-mono);
  font-size: 12px;
}

.home-service-card h3 {
  align-self: center;
  min-width: 0;
  width: auto;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.home-service-card p {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--home-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

/* ---------- Processus ---------- */

/* Trois étapes numérotées, posées sous un filet plutôt que dans des boîtes :
   la maquette réserve la carte aux éléments sur lesquels on peut agir. */
.home-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-process-step { padding: 20px 0 0; border-top: 1px solid var(--home-line); }

.home-process-step .num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--home-signal);
}

.home-process-step h3 {
  margin: 14px 0 10px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.home-process-step p { margin: 0; color: var(--home-muted); font-size: 14.5px; line-height: 1.6; }

/* ---------- Tarifs ---------- */

.home-price-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 1180px) {
  .home-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.home-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
}

.home-price-card.featured {
  border-color: color-mix(in srgb, var(--home-signal) 40%, transparent);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--home-signal) 10%, transparent), transparent 60%);
}

/* Le badge reste dans le flux de la carte. En grille de quatre colonnes, le
   titre et le badge ne tiennent pas toujours sur la même ligne : l'ancienne
   position absolue réduisait alors AB-Studio à quelques caractères et donnait
   l'impression que les deux textes se chevauchaient. */
.home-price-badge {
  position: static;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 3px 9px 3px 7px;
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--home-signal) 48%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--home-signal) 11%, transparent);
  color: var(--home-signal);
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-price-card.featured h3 { padding-right: 0; }

.home-price-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--home-gradient);
  box-shadow: 0 0 10px color-mix(in srgb, var(--home-signal) 65%, transparent);
}

.home-price-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
}

.home-product-name {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--home-signal);
}

.home-price-card > p { margin: 0; color: var(--home-muted); font-size: 14px; line-height: 1.6; }

.home-price {
  margin: 24px 0 4px !important;
  font-family: var(--font-display);
  font-size: clamp(22px, 1.8vw, 30px) !important;
  line-height: 1.12 !important;
  font-weight: 750;
  letter-spacing: -0.035em;
  color: var(--home-ink) !important;
  text-wrap: balance;
}

.home-price::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--home-gradient);
}

.home-price-period {
  margin: 14px 0 24px !important;
  font-family: var(--font-mono);
  font-size: 11.5px !important;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.home-price-tax {
  margin: 0 !important;
  font-family: var(--font-mono);
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-muted) !important;
}

.home-price-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 13px 22px;
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius-sm);
  background: color-mix(in srgb, var(--home-ink) 3%, transparent);
  color: var(--home-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.home-price-link:hover,
.home-price-link:focus-visible { border-color: var(--home-signal); color: var(--home-signal); }

.home-price-card.featured .home-price-link {
  background: var(--home-gradient);
  border-color: transparent;
  color: var(--home-on-signal);
}

/* ---------- Usages ---------- */

.home-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.home-usecase { padding: 26px 24px; }

.home-usecase .tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--home-signal) 10%, transparent);
  color: var(--home-signal);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-usecase h3 {
  margin: 16px 0 10px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.home-usecase p { margin: 0; color: var(--home-muted); font-size: 14px; line-height: 1.6; }

/* ---------- Bande CTA et contact ---------- */

/* Bande de la maquette : le texte à gauche, l'action à droite, et un dégradé
   des deux couleurs de signal en fond. Elle repasse en colonne dès que la
   place manque, sans point de rupture à déclarer. */
.home-contact-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 44px 40px;
  border: 1px solid var(--home-line-strong);
  border-radius: 22px;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--home-signal) 12%, transparent),
    color-mix(in srgb, var(--home-violet) 8%, transparent)
  );
}

.home-contact-cta-text { flex: 1 1 26ch; }

.home-contact-cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 26px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.home-contact-cta p { margin: 8px 0 0; max-width: 56ch; color: var(--home-muted); font-size: 15px; }

/* La colonne de gauche ne porte que deux phrases : étirée sur la hauteur du
   formulaire, elle laissait un vide de la taille de la carte. Elle se cale en
   haut et se resserre, et le formulaire récupère la largeur. */
.home-page .contact-grid {
  align-items: start;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 48px;
  background: var(--home-surface);
  background-image: var(--home-sheen);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  box-shadow: var(--home-shadow);
  padding: 42px;
}

.home-page .contact-info h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(25px, 2.9vw, 32px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.home-page .contact-info p {
  margin: 14px 0 0;
  max-width: 34ch;
  color: var(--home-muted);
  font-size: 15.5px;
}

.home-page .contact-form textarea { min-height: 132px; }

/* ---------- Révélations et inclinaison ---------- */

.home-page .tilt-card { transition: transform 0.28s var(--ease); transform-style: preserve-3d; }

/* ---------- Points de rupture ---------- */

/* Le menu plein écran partagé se cale sur le header vitré et le fond de
   l'accueil, sinon il découvre 2px de page et affiche un autre noir/blanc. */
@media (max-width: 1120px) {
  .home-page { --header-current-height: 78px; padding-top: 78px; }
  .home-page nav.main-nav { background: var(--home-bg); }
}

@media (max-width: 1050px) {
  .home-page .home-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .home-hero-cols { grid-template-columns: 1fr 420px; gap: 36px; }
}

/* Le repli de la grille de contact est porté par `.home-page` : la règle
   partagée, moins spécifique, ne l'emporterait pas sur la nôtre. */
@media (max-width: 880px) {
  .home-page .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .home-page .contact-info p { max-width: 52ch; }
}

@media (max-width: 860px) {
  .home-page .home-hero { padding: 64px 0 74px; }
  .home-page .home-section.tight { padding-top: 0; }
  .home-page .home-hero-cols { grid-template-columns: 1fr; gap: 44px; }
  .home-page .home-compare { max-width: 600px; width: 100%; }
  .home-page .home-card-grid,
  .home-page .home-price-grid,
  .home-page .home-usecase-grid,
  .home-page .home-process-grid { grid-template-columns: 1fr; }
  .home-page .home-section { padding: 84px 0; }
  .home-page .contact-grid { padding: 28px; }
  .home-page .home-contact-cta { padding: 36px 26px; }
  .home-page .home-phone-demo-card { grid-template-columns: 1fr; gap: 30px; padding: 34px 28px; }
}

/* Les trois chiffres du hero.

   Sous ~660px de fenêtre, la ligne en flex ne tient plus : la troisième entrée
   descendait seule à la ligne suivante et la deuxième gardait son filet
   séparateur suspendu dans le vide. La grille tient les trois colonnes ; les
   libellés se replient sur deux lignes sans décaler les chiffres.

   Le seuil est à 700 et pas à 660 : la mesure vaut pour le français, et « 100%
   RELIÉ À VOS OUTILS » a des équivalents plus longs en néerlandais. */
@media (max-width: 700px) {
  .home-page .home-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; text-align: center; }
  /* Rembourrage symétrique, pas seulement à droite : le décalage de bureau
     collait le texte centré contre le filet de gauche de sa colonne. */
  .home-page .home-stat { padding: 0 8px; margin: 0; }
  .home-page .home-stat:first-child { padding-left: 0; }
  .home-page .home-stat:last-child { padding-right: 0; }
  /* Le chiffre et son libellé suivent la largeur de colonne : à 700px la
     grille laisse la taille de bureau, à 360px elle la resserre. */
  .home-page .home-stat dt { font-size: clamp(19px, 5vw, 24px); }
  .home-page .home-stat dd { font-size: clamp(10.5px, 2.9vw, 12.5px); letter-spacing: 0.02em; }
}

@media (max-width: 560px) {
  .home-wrap { padding: 0 20px; }
  .home-page .home-hero h1 { font-size: clamp(38px, 12vw, 52px); }
  .home-page .home-compare-headline { display: none; }
  /* Les deux colonnes s'empilent : la flèche pivote pour continuer à pointer
     de la situation actuelle vers la situation automatisée. */
  .home-page .home-compare-cols { grid-template-columns: 1fr; }
  .home-page .home-compare-arrow { margin: 6px auto; transform: rotate(90deg); }
  .home-page .home-compare-col { padding: 14px 22px; }
  .home-page .home-compare-task { min-height: 0; }
  .home-page .home-section { padding: 66px 0; }
  .home-page .home-section.tight { padding-top: 0; }
  .home-page .contact-grid { padding: 22px; }
  .home-page .home-phone-demo { padding-top: 52px; }
  .home-page .home-phone-demo-card { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .live-dot { animation: none; }
  .home-page .home-compare-task,
  .home-page .home-compare-cols,
  .home-page .home-compare-gain { transition: none; }
  .home-page .tilt-card { transform: none !important; transition: none; }
  #home-particles { display: none; }
}

.home-project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-bottom:28px; }
.home-project-card { min-width:0; border:1px solid var(--line,rgba(125,140,165,.25)); border-radius:18px; overflow:hidden; background:var(--card,var(--bg)); }
.home-project-card a { display:block; height:100%; color:inherit; text-decoration:none; }
.home-project-card img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; border-bottom:1px solid var(--line,rgba(125,140,165,.25)); }
.home-project-card a > div { padding:24px; }
.home-project-card h3 { font-size:20px; margin:0 0 12px; }
.home-project-card p { color:var(--ink-dim); line-height:1.65; margin-bottom:20px; }
.home-project-card a:focus-visible { outline:3px solid var(--brand,#559cff); outline-offset:-3px; }
.pricing-scope-note { max-width:960px; margin:28px auto 0; color:var(--ink-dim); font-size:14px; line-height:1.8; text-align:left; }
@media(max-width:700px) { .home-project-grid { grid-template-columns:1fr; } }