/**
 * VITRINE KAIROS — FEUILLE DE STYLE (GET /site.css).
 *
 * Zero dependance, aucune image ni police externe. La distinction typographique vient
 * donc du contraste entre la grotesque systeme et la MONOSPACE systeme (--mono), cette
 * derniere reservee aux etiquettes, mesures et numeros d'etape.
 *
 * Le hero ouvre sur un fond d'encre trame comme du papier millimetre, en composition
 * asymetrique (texte a gauche, maquette produit a droite). Le reste de la page alterne
 * clair et blanc. L'indigo est celui du tableau de bord ; --signal, la seule couleur
 * chaude, ne dit que la chaleur d'un lead.
 *
 * Systemes : reveal au scroll (.reveal -> .is-visible), tiroir de navigation mobile
 * (.nav.is-open, sous 900 px), courbe SVG dessinee via stroke-dashoffset, compteurs,
 * toggle de facturation, accordeon FAQ (grille 0fr -> 1fr), pages legales typographiees.
 * Responsive complet ; prefers-reduced-motion desactive toutes les animations.
 */

/**
 * PALETTE. L'indigo est celui du tableau de bord (--indigo #4f46e5 de style.css), et non
 * plus un bleu propre a la vitrine : les deux surfaces divergeaient silencieusement, un
 * prospect passant de la page d'accueil a la console changeait de marque en chemin.
 *
 * Une seule couleur chaude, --signal, et elle est SEMANTIQUE : elle ne sert qu'a dire la
 * chaleur d'un lead (apex du logo, chiffres chauds, badge du plan recommande). Elle n'est
 * jamais decorative — c'est ce qui l'empeche de devenir un deuxieme accent.
 *
 * Les neutres tirent legerement vers l'indigo plutot que d'etre des gris purs : un gris
 * neutre a cote d'un accent colore se lit comme un defaut, pas comme un choix.
 */
:root {
  --accent: #4f46e5;
  --accent-fonce: #4338ca;
  --accent-clair: #a5a0f8;
  --accent-doux: #eef2ff;
  --signal: #e2603a;
  --signal-doux: #fdeee8;

  --encre: #0b1020;
  --encre-2: #141b33;
  --encre-3: #262e4d;
  --sur-encre: #eef0f8;
  --sur-encre-2: #9aa3c0;

  --texte: #1b2136;
  --texte-2: #5a6480;
  --texte-3: #8891a8;
  --bordure: #e3e7ef;
  --fond: #ffffff;
  --fond-doux: #f5f7fb;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  --radius: 14px;
  --ombre-carte: 0 1px 2px rgba(11, 16, 32, 0.05);
  --ombre-survol: 0 18px 44px rgba(11, 16, 32, 0.13);
  --ombre-flottante: 0 34px 80px -24px rgba(11, 16, 32, 0.55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* Le suivi se resserre a mesure que le corps grandit : sans cela, un gros titre en
   police systeme parait lache et bon marche. */
h1, h2, h3 { color: var(--encre); line-height: 1.14; letter-spacing: -0.022em; }
h2 { font-size: clamp(27px, 3.1vw, 36px); margin: 0 0 10px; text-align: center; }
h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -0.012em; }

section { max-width: 1120px; margin: 0 auto; padding: clamp(64px, 8vw, 104px) 24px; }

.section-sub {
  text-align: center;
  color: var(--texte-2);
  margin: 0 auto 44px;
  max-width: 62ch;
  font-size: 16.5px;
}

/**
 * SURTITRE MONOSPACE. La vitrine n'a pas de police achetee — aucune ressource externe
 * n'est autorisee. La distinction typographique vient donc du contraste entre la
 * grotesque systeme et la MONOSPACE systeme, reservee aux etiquettes, compteurs et
 * numeros d'etape. C'est un choix de sujet, pas un ornement : le produit mesure et
 * prouve, la monospace est la police des instruments.
 */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  text-align: center;
}

/* Texte reserve aux lecteurs d'ecran (en-tete muet du tableau comparatif). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ─── Systeme d'apparition au scroll ───────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible { opacity: 1; transform: none; }

/* ─── Boutons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -0.008em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms, border-color 160ms, box-shadow 160ms, transform 160ms, color 160ms;
}

/* Le focus clavier etait invisible sur toute la vitrine : un anneau decale, pose sur
   chaque cible, et non un simple changement de couleur qu'un daltonien ne verrait pas. */
.btn:focus-visible,
.nav-links a:focus-visible,
.nav-brand:focus-visible,
.footer-col a:focus-visible,
.faq-q:focus-visible,
.switch:focus-visible,
.nav-burger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(11, 16, 32, 0.28), 0 10px 26px -8px rgba(79, 70, 229, 0.6);
}
.btn-primary:hover {
  background: var(--accent-fonce);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(11, 16, 32, 0.3), 0 16px 34px -10px rgba(79, 70, 229, 0.7);
}
.btn-primary:active { transform: none; }

.btn-ghost { border: 1px solid var(--bordure); color: var(--encre); background: #fff; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Sur le fond d'encre du hero, le bouton fantome s'inverse : une bordure claire et
   translucide, pas une carte blanche qui trouerait l'image. */
.hero .btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--sur-encre);
}
.hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.hero .btn:focus-visible { outline-color: var(--accent-clair); }

/* ─── Navigation ───────────────────────────────────────────────────────────── */

/**
 * Le FOND est pleine largeur, la largeur maximale vit sur .nav-inner. Auparavant le fond
 * translucide etait pose sur la boite de 1080 px : au defilement, la barre se detachait
 * en rectangle blanc et le contenu passait a sa gauche et a sa droite.
 */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  transition: padding 240ms ease;
}

/* Etat compact au defilement : pilote par site.js. */
.nav-compact { border-bottom-color: var(--bordure); box-shadow: 0 6px 26px rgba(11, 16, 32, 0.06); }
.nav-compact .nav-inner { padding: 10px 24px; }

/**
 * NAV SUR FOND SOMBRE (landing seulement, cf. navOnDark). Un blanc a 72 % pose sur le
 * hero d'encre virait au gris sale et le texte fonce y perdait son contraste. Au repos
 * la barre disparait donc dans le hero ; des le premier defilement, .nav-compact reprend
 * la main et tout redevient blanc. Les pages claires n'entrent jamais dans cet etat.
 */
/* La barre prend l'encre du hero plutot que de devenir transparente : elle est STICKY,
   donc au repos elle occupe sa propre bande au-dessus du hero — transparente, le texte
   blanc serait tombe sur le fond blanc de la page. En encre, la bande et le hero ne font
   qu'un seul bloc, sans avoir a passer la nav en position: fixed ni a rattraper sa
   hauteur en padding. */
.nav-on-dark:not(.nav-compact) {
  background: var(--encre);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-on-dark:not(.nav-compact) .nav-brand { color: #fff; }
.nav-on-dark:not(.nav-compact) .logo { color: #fff; }
.nav-on-dark:not(.nav-compact) .nav-links a { color: rgba(255, 255, 255, 0.72); }
.nav-on-dark:not(.nav-compact) .nav-links a:hover,
.nav-on-dark:not(.nav-compact) .nav-links a[aria-current="page"] { color: #fff; }
.nav-on-dark:not(.nav-compact) .nav-links a::after { background: var(--accent-clair); }
.nav-on-dark:not(.nav-compact) .btn-nav-ghost { color: rgba(255, 255, 255, 0.72) !important; }
.nav-on-dark:not(.nav-compact) .btn-nav-ghost:hover { color: #fff !important; }
/* Le bouton s'inverse : encre sur encre serait invisible. */
.nav-on-dark:not(.nav-compact) .btn-nav {
  background: #fff;
  color: var(--encre) !important;
}
.nav-on-dark:not(.nav-compact) .btn-nav:hover { background: var(--accent-clair); }
.nav-on-dark:not(.nav-compact) .nav-burger {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
}
.nav-on-dark:not(.nav-compact) .nav-burger-bar { background: #fff; }
.nav-on-dark:not(.nav-compact) .btn:focus-visible,
.nav-on-dark:not(.nav-compact) .nav-links a:focus-visible,
.nav-on-dark:not(.nav-compact) .nav-brand:focus-visible,
.nav-on-dark:not(.nav-compact) .nav-burger:focus-visible { outline-color: var(--accent-clair); }

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19.5px;
  font-weight: 750;
  color: var(--encre);
  letter-spacing: -0.028em;
  text-decoration: none;
  flex: none;
}

.logo { width: 27px; height: 27px; color: var(--encre); flex: none; }
/* Le point de chaleur : la seule note chaude de l'identite, sur le sommet. */
.logo-apex { fill: var(--signal); }

.nav-menu { display: flex; align-items: center; gap: 30px; }

.nav-links { display: flex; align-items: center; gap: 28px; }

/* Le soulignement pousse depuis la gauche : un survol qui a une direction se remarque
   sans avoir besoin de changer la couleur du texte. */
.nav-links a {
  position: relative;
  color: var(--texte-2);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 550;
  padding: 4px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}
.nav-links a:hover { color: var(--encre); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--encre); font-weight: 620; }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 8px; }

/* Une seule action pleine dans la nav. « Se connecter » redevient un lien : deux boutons
   cote a cote se disputaient le regard et aucun ne gagnait. */
.btn-nav {
  background: var(--encre);
  color: #fff !important;
  padding: 9px 17px;
  border-radius: 9px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(11, 16, 32, 0.22);
}
.btn-nav:hover { background: var(--accent); transform: translateY(-1px); }

.btn-nav-ghost {
  color: var(--texte-2) !important;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 570;
}
.btn-nav-ghost:hover { color: var(--encre) !important; }

/* ─── Menu mobile ──────────────────────────────────────────────────────────── */

/* Deux barres qui deviennent une croix : trois barres pour un menu de quatre liens,
   c'est deja de l'ornement. */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 38px;
  padding: 0 9px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.nav-burger-bar {
  display: block;
  height: 1.8px;
  width: 100%;
  border-radius: 2px;
  background: var(--encre);
  transition: transform 260ms ease, opacity 200ms ease;
}
.nav-burger[aria-expanded="true"] .nav-burger-bar:first-child { transform: translateY(3.4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-bar:last-child { transform: translateY(-3.4px) rotate(-45deg); }

.nav-scrim { display: none; }

@media (max-width: 900px) {
  .nav-burger { display: flex; }

  /* Ancre sur la nav elle-meme (position: sticky cree le bloc conteneur) : le tiroir
     suit la hauteur reelle de la barre, y compris apres qu'elle se soit compactee.
     Une valeur en dur se serait desalignee au premier defilement. */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px 20px 22px;
    background: #fff;
    border-bottom: 1px solid var(--bordure);
    box-shadow: 0 24px 48px -20px rgba(11, 16, 32, 0.4);
    /* Ferme : replie a zero et retire du parcours clavier — un lien invisible ne doit
       pas rester focusable. */
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows 280ms ease, opacity 200ms ease, visibility 280ms;
  }
  .nav-menu > * { min-height: 0; overflow: hidden; }

  .nav.is-open .nav-menu {
    grid-template-rows: 1fr 1fr;
    opacity: 1;
    visibility: visible;
  }

  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a {
    padding: 13px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--bordure);
  }
  .nav-links a::after { display: none; }
  .nav-links a[aria-current="page"] { color: var(--accent); }

  .nav-actions { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 16px; }
  .nav-actions .btn { width: 100%; padding: 13px 18px; font-size: 15px; }
  .btn-nav-ghost { border: 1px solid var(--bordure); border-radius: 10px; }

  .nav.is-open .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(11, 16, 32, 0.4);
  }

  /**
   * La BARRE reste sur l'encre du hero, mais le TIROIR est blanc : sans ces reprises,
   * les couleurs claires de .nav-on-dark s'appliquaient aux liens du tiroir et donnaient
   * du blanc sur blanc — les liens etaient bien la, simplement invisibles.
   * La specificite doit egaler celle des regles sur fond sombre, d'ou le .nav-menu.
   */
  .nav-on-dark:not(.nav-compact) .nav-menu .nav-links a { color: var(--texte-2); }
  .nav-on-dark:not(.nav-compact) .nav-menu .nav-links a:hover,
  .nav-on-dark:not(.nav-compact) .nav-menu .nav-links a[aria-current="page"] { color: var(--accent); }
  .nav-on-dark:not(.nav-compact) .nav-menu .btn-nav-ghost { color: var(--texte-2) !important; }
  .nav-on-dark:not(.nav-compact) .nav-menu .btn-nav {
    background: var(--encre);
    color: #fff !important;
  }
  .nav-on-dark:not(.nav-compact) .nav-menu .btn-nav:hover { background: var(--accent); }
}

/* ─── Hero : fond d'encre, papier millimetre, composition asymetrique ──────── */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Le hero est un <section> : sans cela il heriterait du max-width de 1120 px et le
     fond d'encre s'arreterait en plein milieu de la fenetre. */
  max-width: none;
  padding: clamp(56px, 8vw, 104px) 24px clamp(72px, 9vw, 120px);
  background: var(--encre);
  color: var(--sur-encre);
}

/**
 * PAPIER MILLIMETRE plutot que taches floues. Le degrade radial etait le fond de
 * n'importe quelle vitrine SaaS ; une trame de mesure dit ce que fait le produit. Elle
 * s'efface vers le bas pour ne jamais concurrencer le texte.
 */
.hero-rule {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 62%, transparent 100%);
  pointer-events: none;
}

/* Une seule nappe lumineuse, placee DERRIERE la maquette : elle sert a decoller le
   produit du fond, pas a decorer le vide. */
.hero-halo {
  position: absolute;
  z-index: -1;
  top: -12%;
  right: -8%;
  width: min(760px, 72vw);
  height: min(760px, 72vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.34), rgba(79, 70, 229, 0) 68%);
  filter: blur(18px);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 68px);
  max-width: 1180px;
  margin: 0 auto;
}

/* Surtitre monospace precede d'un point de chaleur : le meme signe que l'apex du logo. */
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sur-encre-2);
  animation: rise-in 700ms ease both;
}
.hero-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(226, 96, 58, 0.18);
  flex: none;
}

.hero-title {
  font-size: clamp(38px, 5.4vw, 62px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: #fff;
  margin: 0 0 22px;
}

/* Apparition en cascade : chaque ligne monte et se devoile a la suite. */
.hero-line { display: block; animation: rise-in 700ms ease both; }
.hero-line:nth-child(2) { animation-delay: 160ms; }

/* Un degrade sur le texte etait la solution par defaut. Un soulignement dans la couleur
   de chaleur dit quelque chose de vrai : c'est la chaleur qui fait le client. */
.hero-title em {
  font-style: normal;
  /* Insecable : coupe en deux, le soulignement se brisait en deux morceaux decales.
     La ligne se replie AVANT le groupe souligne plutot qu'au milieu. */
  white-space: nowrap;
  color: var(--accent-clair);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

.hero-sub {
  max-width: 56ch;
  margin: 0 0 34px;
  color: var(--sur-encre-2);
  font-size: 17px;
  line-height: 1.65;
  animation: rise-in 700ms ease 300ms both;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 34px;
  animation: rise-in 700ms ease 440ms both;
}

/* Trois garanties factuelles, en monospace : elles tiennent lieu de logos clients que
   le produit n'a pas encore, et elles sont vraies. */
.hero-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sur-encre-2);
  animation: rise-in 700ms ease 560ms both;
}
.hero-marks li { display: flex; align-items: center; gap: 8px; }
.hero-marks li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-clair);
  flex: none;
}

.hero-stage { position: relative; min-width: 0; }

/* ─── Maquette produit (fausse fenetre de tableau de bord) ─────────────────── */

/* La maquette n'est plus centree sous le texte mais posee a sa droite, sur le fond
   d'encre : une bordure claire et une ombre portee profonde la font flotter au lieu de
   la fondre dans la page. */
.mockup {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ombre-flottante);
  overflow: hidden;
  text-align: left;
}

.mockup-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  background: var(--fond-doux);
  border-bottom: 1px solid var(--bordure);
}

.mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: #cdd4e0; }
.mockup-dot:first-child { background: #e8a0a0; }

.mockup-url {
  margin: 0 0 0 10px;
  font-size: 12px;
  color: var(--texte-2);
}

.mockup-body { display: flex; min-height: 300px; }

.mockup-side {
  width: 56px;
  flex: none;
  padding: 16px 0;
  background: var(--encre);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.mockup-side-logo {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--accent);
  margin-bottom: 8px;
}

.mockup-side-item {
  width: 26px; height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
}

.mockup-side-item.is-active { background: rgba(255, 255, 255, 0.75); }

.mockup-main { flex: 1; padding: 22px 24px; }

.mockup-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.mockup-kpi {
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--fond-doux);
}

.mockup-kpi-label { margin: 0 0 4px; font-size: 11px; color: var(--texte-2); }
.mockup-kpi-value { margin: 0; font-size: 20px; font-weight: 800; color: var(--encre); }

.mockup-chart {
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 10px 12px 2px;
  margin-bottom: 16px;
}

.mockup-chart svg { display: block; width: 100%; height: 140px; }

/* Courbe dessinee : pathLength=1 cote SVG, le dashoffset fait tout le travail. */
.chart-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-line 2.2s ease 600ms forwards;
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

.chart-area { opacity: 0; animation: fade-in 900ms ease 1.6s forwards; }
.chart-dot { opacity: 0; animation: fade-in 500ms ease 2.4s forwards; }

@keyframes fade-in {
  to { opacity: 1; }
}

.mockup-rows { display: grid; gap: 8px; }

.mockup-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 10px 14px;
}

.mockup-row-name { width: 120px; height: 9px; border-radius: 5px; background: #dbe1ec; }
.mockup-row-bar { flex: 1; height: 9px; border-radius: 5px; background: var(--fond-doux); }

.mockup-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-doux);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

/* ─── Bandeau de preuve (compteurs) ────────────────────────────────────────── */

/* Le bandeau etait sombre comme le hero : colles l'un a l'autre, les deux ne formaient
   plus qu'un seul bloc noir. Il passe en clair et devient la respiration entre le hero
   d'encre et les cartes blanches. */
.proof {
  background: var(--fond-doux);
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  max-width: none;
  padding-top: clamp(44px, 5vw, 64px);
  padding-bottom: clamp(44px, 5vw, 64px);
}

.proof-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Filets verticaux entre les mesures : un releve d'instrument, pas quatre cartes. */
.proof-item { text-align: center; padding: 0 12px; }
.proof-item + .proof-item { border-left: 1px solid var(--bordure); }

.proof-value {
  margin: 0 0 8px;
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 800;
  color: var(--encre);
  letter-spacing: -0.035em;
  line-height: 1;
}

.proof-label {
  margin: 0 auto;
  max-width: 22ch;
  color: var(--texte-2);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ─── Fonctionnalites ──────────────────────────────────────────────────────── */

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

.feature-card {
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 26px 24px;
  background: var(--fond-doux);
  box-shadow: var(--ombre-carte);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

/* Elevation au survol : la carte se souleve et s'encre. */
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-survol);
  border-color: rgba(79, 70, 229, 0.35);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-doux);
  color: var(--accent);
  margin-bottom: 14px;
}

.feature-icon svg { width: 24px; height: 24px; }

.feature-card p { margin: 0; color: var(--texte-2); font-size: 14px; }

/* ─── Methode : etapes et connecteurs ──────────────────────────────────────── */

.how { background: var(--fond-doux); max-width: none; }
.how > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

.how-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}

/* Connecteur visuel : ligne pointillee qui relie les trois etapes. */
.how-grid::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 12%;
  right: 12%;
  border-top: 2px dashed rgba(79, 70, 229, 0.35);
}

.how-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--ombre-carte);
}

.how-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  margin: 0 0 12px;
  box-shadow: 0 0 0 6px #fff;
}

.how-step p:last-child { margin: 0; color: var(--texte-2); font-size: 14px; }

/* ─── Tarifs : toggle, cartes, plan recommande ─────────────────────────────── */

.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 34px;
}

.billing-label { font-size: 14px; font-weight: 650; color: var(--texte-2); }

.billing-promo {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-doux);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 4px;
}

/* Interrupteur : l'etat annuel est pilote par aria-checked (site.js). */
.switch {
  position: relative;
  width: 52px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: #cdd4e0;
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease;
}

.switch[aria-checked="true"] { background: var(--accent); }

.switch-dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(23, 32, 58, 0.3);
  transition: transform 200ms ease;
}

.switch[aria-checked="true"] .switch-dot { transform: translateX(24px); }

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

.plan-card {
  position: relative;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 28px 24px;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ombre-carte);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.plan-card:hover { transform: translateY(-4px); box-shadow: var(--ombre-survol); }

/* Plan recommande : mis a l'echelle, borde accent, ombre marquee. */
.plan-recommended {
  border: 2px solid var(--accent);
  box-shadow: 0 16px 44px rgba(79, 70, 229, 0.16);
  transform: scale(1.04);
  z-index: 1;
}

.plan-recommended:hover { transform: scale(1.04) translateY(-4px); }

/* En --signal et non en --accent : la carte est deja cerclee d'indigo, un badge indigo
   sur bordure indigo ne designait rien. La couleur chaude est la seule de la page a cet
   endroit, et c'est precisement le plan vers lequel on veut diriger le regard. */
.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--signal);
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  margin: 0;
  white-space: nowrap;
}

.plan-price {
  font-size: 34px;
  font-weight: 800;
  color: var(--encre);
  margin: 8px 0 16px;
}

.plan-amount { white-space: nowrap; }

.plan-period { font-size: 14px; font-weight: 500; color: var(--texte-2); }

.plan-card ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: var(--texte-2);
  font-size: 14px;
  flex: 1;
}

.plan-card li { margin-bottom: 8px; padding-left: 22px; position: relative; }

.plan-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

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

/* ─── FAQ : accordeon anime ────────────────────────────────────────────────── */

.faq { max-width: 780px; }

.faq-list { display: grid; gap: 10px; }

.faq-item {
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.faq-item.open { border-color: rgba(79, 70, 229, 0.4); box-shadow: var(--ombre-carte); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 17px 20px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-weight: 650;
  color: var(--encre);
  font-family: inherit;
}

.faq-chev {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--texte-2);
  transition: transform 250ms ease;
}

.faq-item.open .faq-chev { transform: rotate(180deg); color: var(--accent); }

/* Animation sans mesure JS : la grille 0fr -> 1fr deroule la reponse. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
}

.faq-item.open .faq-a { grid-template-rows: 1fr; }

.faq-a-inner { overflow: hidden; }

.faq-a-inner p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--texte-2);
  font-size: 14px;
}

/* ─── CTA final et footer ──────────────────────────────────────────────────── */

.cta-final { max-width: none; background: var(--fond-doux); }

.cta-final-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--bordure);
  border-radius: 20px;
  padding: 52px 32px;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(79, 70, 229, 0.1), transparent 70%),
    #fff;
  box-shadow: var(--ombre-carte);
}

.cta-final p:last-child { margin-bottom: 0; }

.footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 32px;
}

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

.footer-col h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-2);
  margin: 0 0 4px;
}

.footer-col a {
  color: var(--texte-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 550;
}
.footer-col a:hover { color: var(--accent); }

.footer-brand p { margin: 6px 0 0; color: var(--texte-2); font-size: 13px; max-width: 300px; }

.footer-bottom {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--bordure);
  color: var(--texte-2);
  font-size: 13px;
}

/* ─── Pages accompagnantes ─────────────────────────────────────────────────── */

.page-hero {
  text-align: center;
  padding: 72px 24px 24px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(79, 70, 229, 0.1), transparent 70%),
    linear-gradient(180deg, #f3f6fe 0%, #ffffff 100%);
}

.page-hero h1 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.page-hero .section-sub { max-width: 620px; margin-left: auto; margin-right: auto; }

/* Page fonctionnalites : sections alternees texte / illustration. */
.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.detail-row-alt .detail-text { order: 2; }
.detail-row-alt .detail-illu { order: 1; }

.detail-text h2 { text-align: left; font-size: 26px; }
.detail-text p { margin: 0; color: var(--texte-2); font-size: 15px; }

.detail-illu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border: 1px solid var(--bordure);
  border-radius: 20px;
  background:
    radial-gradient(70% 90% at 50% 20%, rgba(79, 70, 229, 0.08), transparent 75%),
    var(--fond-doux);
  overflow: hidden;
}

/* Anneau decoratif qui tourne lentement derriere l'icone. */
.detail-illu-ring {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 2px dashed rgba(79, 70, 229, 0.3);
  animation: spin-slow 26s linear infinite;
}

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

.detail-illu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 26px;
  background: #fff;
  color: var(--accent);
  box-shadow: var(--ombre-survol);
}

.detail-illu-icon svg { width: 48px; height: 48px; }

/* Page tarifs : tableau comparatif. */
.compare { padding-top: 24px; }

.compare-scroll { overflow-x: auto; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  font-size: 14px;
}

.compare-table th, .compare-table td {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid var(--bordure);
}

.compare-table thead th {
  background: var(--fond-doux);
  color: var(--encre);
  font-size: 15px;
}

.compare-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 600;
  color: var(--texte);
}

.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }

.check { width: 18px; height: 18px; color: var(--accent); vertical-align: middle; }

/* Page contact : carte centrale sobre. */
.contact-card {
  max-width: 560px;
  margin: 24px auto 72px;
  text-align: center;
  border: 1px solid var(--bordure);
  border-radius: 20px;
  padding: 44px 32px;
  background: #fff;
  box-shadow: var(--ombre-carte);
}

.contact-card h2 { margin-top: 0; }
.contact-card p { color: var(--texte-2); }
.contact-note { font-size: 13px; margin-bottom: 0; }

/* Formulaire de contact : aligne a gauche dans une carte centree. Un champ se lit et
   se remplit de gauche a droite ; centrer les libelles obligerait l'oeil a chercher le
   debut de chaque ligne. Seul le bouton reste pleine largeur, parce que c'est la seule
   chose a faire une fois les champs remplis. */
.contact-form { margin-top: 28px; text-align: left; }

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

.contact-form .field { margin: 0; display: flex; flex-direction: column; gap: 6px; }

.contact-form label {
  font-size: 13px;
  font-weight: 650;
  color: var(--texte);
  letter-spacing: 0.01em;
}

.contact-form abbr { color: var(--accent); text-decoration: none; }

.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form input[type='tel'] {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--texte);
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form input:focus-visible {
  outline: none;
  border-color: var(--accent);
  /* L'anneau reste visible au clavier : la bordure seule ne suffit pas a un daltonien. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.contact-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0 24px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--texte-2);
}

.contact-consent input { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.contact-consent a { color: var(--accent); }

.contact-form .btn-primary { width: 100%; justify-content: center; }

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

/* Pages legales : typographie sobre et lisible. */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px;
}

.legal h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}

.legal h2 {
  text-align: left;
  font-size: 19px;
  margin: 34px 0 10px;
}

.legal p { color: var(--texte-2); font-size: 15px; margin: 0 0 12px; }

.legal a { color: var(--accent); }

/* ─── Mouvement reduit : tout est visible, rien ne bouge ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .detail-illu-ring { animation: none !important; }
  .chart-line { stroke-dashoffset: 0; animation: none !important; }
  .chart-area, .chart-dot { opacity: 1; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */

/* Le hero repasse en une colonne avant les autres grilles : deux colonnes serrees
   cassent le titre bien avant que les cartes ne genent. */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-sub { max-width: none; }
  .hero-halo { top: auto; bottom: -10%; right: -30%; }
  .mockup { max-width: 720px; }
}

@media (max-width: 920px) {
  .features-grid, .plans-grid { grid-template-columns: 1fr 1fr; }
  /* Sur deux colonnes, le filet vertical retomberait en debut de seconde ligne. */
  .proof-grid { grid-template-columns: 1fr 1fr; gap: 32px 18px; }
  .proof-item + .proof-item { border-left: 0; }
  .how-grid { grid-template-columns: 1fr; }
  .how-grid::before { display: none; }
  .detail-row { grid-template-columns: 1fr; gap: 24px; }
  .detail-row-alt .detail-text { order: 1; }
  .detail-row-alt .detail-illu { order: 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .plan-recommended { transform: none; }
  .plan-recommended:hover { transform: translateY(-4px); }
}

@media (max-width: 640px) {
  /* Les tailles du hero sont deja en clamp() : les figer ici annulerait l'echelle
     fluide. Seuls les retraits horizontaux ont besoin d'un reglage. */
  section { padding: 52px 20px; }
  .hero { padding-left: 20px; padding-right: 20px; }
  .hero-cta { margin-bottom: 28px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .features-grid, .plans-grid { grid-template-columns: 1fr; }
  .plan-recommended { order: -1; }
  .mockup-side { display: none; }
  .mockup-kpis { grid-template-columns: 1fr; }
  .nav-inner { padding: 13px 18px; }
  .nav-compact .nav-inner { padding: 10px 18px; }
  .nav-menu { padding: 12px 18px 20px; }
  .hero-marks { gap: 8px 16px; font-size: 10.5px; }
  .footer-grid { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 30px; }
}