/* ═══════════════════════════════════════════════════════════════════════════
   CLEARZI — Page fournisseur
   Réutilise le design system de styles.css (tokens --cz-*, boutons, nav,
   footer, marquee, surlignage .hl). Ce fichier ne contient que les sections
   propres à la page fournisseur. Aucune valeur brute hors variantes rgba().
   La capture du hero reprend l'écran réel « Demander un paiement » de la
   plateforme, réduit à ce qui raconte l'histoire : je sélectionne mes
   factures, je vois ce que Clearzi me verse tout de suite.
   ═══════════════════════════════════════════════════════════════════════════ */

/* pas encore de liens de section : les actions restent collées à droite */
.supplier .nav-actions {
  margin-left: auto;
}

/* ══ Hero — Azure Mist → crème, comme la home ══ */
.f-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(42% 60% at 8% 2%, rgba(124, 247, 212, 0.18), transparent 62%),
    radial-gradient(56% 72% at 92% 18%, rgba(124, 247, 212, 0.16), transparent 68%),
    linear-gradient(180deg, var(--cz-azure) 0%, var(--cz-azure) 100%);
}

.f-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--cz-dots-ink);
  background-size: 26px 26px;
  -webkit-mask: linear-gradient(#000 55%, transparent 92%);
  mask: linear-gradient(#000 55%, transparent 92%);
  opacity: 0.5;
  pointer-events: none;
}

/* halo qui suit le curseur : les points s'allument en teal sous la souris */
.f-hero-spot {
  position: absolute;
  inset: 0;
  background-image: var(--cz-dots-ink-strong);
  background-size: 26px 26px;
  -webkit-mask: radial-gradient(240px at var(--mx, -500px) var(--my, -500px), #000 0%, transparent 68%);
  mask: radial-gradient(240px at var(--mx, -500px) var(--my, -500px), #000 0%, transparent 68%);
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}

.f-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 40px;
  max-width: var(--cz-content-max);
  margin: 0 auto;
  /* le header fixe est transparent : le hero commence derrière lui */
  padding: 152px var(--cz-margin) 64px;
}

.f-hero-inner > * {
  min-width: 0;
}

/* ── Colonne texte ── */
.f-hero-copy h1 {
  font-size: clamp(2.4rem, 4vw, 3.45rem);
  letter-spacing: -0.032em;
}

.f-hero-sub {
  margin-top: 30px;
  font-size: clamp(1.2rem, 1.65vw, 1.45rem);
  line-height: 1.55;
  color: var(--cz-ink);
}

/* la levée d'objection : rien à installer, le client est déjà connecté */
.f-hero-ready {
  margin-top: 26px;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.5;
  color: var(--cz-brand-700);
}

.f-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* secondary DS : pill menthe pâle (pas de cercle — un seul CTA par zone) */
.btn-soft {
  background: var(--cz-bg-selected);
  border: 1px solid var(--cz-brand-border-soft);
}

.btn-soft:hover {
  background: var(--cz-azure);
  border-color: var(--cz-brand-border);
}

/* ══ Aperçu de la plateforme ══ */
.f-hero-visual {
  position: relative;
}

/* halo ambiant aquamarine derrière le cadre */
.f-glow {
  position: absolute;
  top: 50%;
  right: -60px;
  width: 620px;
  height: 520px;
  max-width: 130%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(124, 247, 212, 0.34), rgba(124, 247, 212, 0.1) 56%, transparent 76%);
  pointer-events: none;
}

/* la fenêtre plateforme, posée directement sur le hero : sidebar encre +
   colonne de contenu, aucun cadre autour — c'est la fenêtre qui fait l'objet */
.f-app {
  position: relative;
  display: grid;
  grid-template-columns: 104px 1fr;
  column-gap: 14px;
  padding: 10px;
  background: var(--cz-white);
  border-radius: var(--cz-radius-pop);
  box-shadow:
    0 0 0 1px rgba(10, 33, 38, 0.05),
    0 2px 4px rgba(10, 33, 38, 0.04),
    0 14px 30px -10px rgba(10, 33, 38, 0.1),
    0 40px 74px -18px rgba(10, 33, 38, 0.18);
}

/* ── Sidebar produit ── */
.f-app-side {
  display: flex;
  flex-direction: column;
  padding: 14px 7px 18px;
  background: var(--cz-ink);
  border-radius: var(--cz-radius-md);
}

.f-side-logo {
  display: flex;
  padding: 0 5px;
}

.f-side-logo img {
  width: 54px;
  height: auto;
}

.f-side-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 20px;
}

.f-side-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-radius: var(--cz-radius-sm);
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 8.5px;
  line-height: 1.3;
  color: var(--cz-on-ink-soft);
}

.f-side-item svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* item actif : pill menthe pleine, comme la sidebar de la plateforme */
.f-side-item.is-active {
  background: var(--cz-aqua);
  color: var(--cz-ink);
}

/* ── Écran « Demander un paiement » ── */
.f-app-main {
  display: flex;
  flex-direction: column;
  min-width: 0; /* la capture se comprime, elle ne pousse jamais la page */
  padding: 13px 8px 10px 3px;
}

.f-app-title {
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--cz-ink);
}

.f-table {
  min-width: 0;
  margin-top: 12px;
}

.f-tr {
  display: grid;
  grid-template-columns: 26px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--cz-border-faint);
}

/* lignes sélectionnées : voile menthe + liseré menthe (état DS bg-selected) */
.f-tr.is-selected {
  background: rgba(124, 247, 212, 0.08);
  box-shadow: inset 2px 0 0 var(--cz-brand-400);
}

.f-tr-head {
  border-bottom-color: var(--cz-border-medium);
}

.f-th,
.f-td {
  display: flex;
  align-items: center;
  padding: 7px 6px;
}

.f-th {
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 9px;
  color: var(--cz-text-moderate);
}

.f-td {
  font-size: 10px;
  line-height: 1.3;
  color: var(--cz-text-soft);
  /* lignes de hauteur égale : la capture reste lisible, jamais de retour ligne */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* colonnes numériques : à droite, Saans Medium tabulaire (règle DS) */
.f-num {
  justify-content: flex-end;
  text-align: right;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.f-td.f-num {
  color: var(--cz-ink);
}

.f-td.f-ref {
  color: var(--cz-neutral-bolder);
  font-variant-numeric: tabular-nums;
}

/* case cochée : pastille menthe + coche encre */
.f-check {
  padding: 0;
  justify-content: center;
}

.f-td.f-check::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: var(--cz-radius-full);
  background-color: var(--cz-brand-400);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2126' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E");
  background-size: 7px;
  background-position: center;
  background-repeat: no-repeat;
}

/* la liste continue : on ne montre que le haut de la sélection */
.f-table-more {
  display: block;
  margin-top: 8px;
  padding-left: 6px;
  font-size: 9px;
  color: var(--cz-neutral-bolder);
}

/* ── Le paiement, en bas de l'écran : un montant, un bouton ── */
.f-payout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: 8px;
  column-gap: 14px;
  margin-top: 14px;
  padding: 13px 15px;
  background: var(--cz-bg-base);
  border-radius: var(--cz-radius-md);
  box-shadow: inset 0 0 0 1px var(--cz-border-faint);
}

.f-payout-label {
  font-size: 9.5px;
  color: var(--cz-text-moderate);
}

.f-payout-eta {
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 9.5px;
  text-align: right;
  color: var(--cz-brand-700);
}

.f-payout-amount {
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--cz-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* action primaire de la plateforme : pill menthe + cercle encre */
.f-payout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 3px 0 12px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-aqua);
  border: 1px solid var(--cz-brand-border);
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 9.5px;
  color: var(--cz-ink);
  white-space: nowrap;
}

.f-payout-btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--cz-radius-full);
  background: var(--cz-ink);
}

.f-payout-btn-circle svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: var(--cz-aqua);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Logos clients : scroller intégré au hero ── */
/* Le hero, les logos et le constat se fondaient en trois zones claires. Plutôt
   qu'un filet, c'est le fond du hero qui tient : il reste en Azure Mist plein
   jusqu'en bas, logos compris, et le constat blanc s'en détache tout seul. */
.f-trust {
  position: relative;
  z-index: 1;
  padding: 26px 0 24px;
  border-top: 1px solid rgba(10, 33, 38, 0.06);
}

/* ══ Le constat — bloc éditorial sur Jet Black ══════════════════════════════
   L'affirmation et le chiffre qui la prouve vivent dans la même colonne ; les
   conséquences sont des lignes, pas une grille de cartes. */
/* ══ 01 · Le constat ══
   Grammaire des surfaces de la page : les chapitres qui décrivent le monde
   d'aujourd'hui — le problème du fournisseur — sont sur surface claire et
   neutre, sans une trace de menthe. L'Azure Mist et le Jet Black sont réservés
   à l'univers Clearzi. Ce chapitre était en Jet Black + accents rouges : la
   surface la plus « marque » du DS servait la partie qui n'est pas Clearzi, et
   le contraste encre/rouge virait à l'alerte. */
.f-cost {
  position: relative;
  overflow: hidden;
  /* le bas laisse respirer la flèche AU-DESSUS du médaillon de couture : sans
     lui, la flèche tombe sur la couture et le disque encre la recouvre. */
  padding: 40px var(--cz-margin) 46px;
  background:
    radial-gradient(58% 46% at 50% 0%, rgba(217, 88, 78, 0.05), transparent 62%),
    var(--cz-white);
}

.f-cost-inner {
  position: relative;
  z-index: 1;
  /* même rail que le header : content-max moins les marges */
  max-width: calc(var(--cz-content-max) - var(--cz-margin) * 2);
  margin: 0 auto;
}

.f-cost-top {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  column-gap: 64px;
  row-gap: 0; /* c'est la marge du lien qui règle l'air, pas la gouttière */
  align-items: stretch;
}

.f-cost-lead {
  grid-column: 1;
  grid-row: 1;
}

/* la liste occupe la colonne de droite, à hauteur de la colonne éditoriale
   (le lien de transition vit en ligne 2, sous le chiffre) */
.f-cost-list {
  grid-column: 2;
  grid-row: 1;
}

.f-cost-lead h2 {
  max-width: 16em;
  font-size: clamp(1.85rem, 2.7vw, 2.3rem);
  text-wrap: balance; /* pas de mot orphelin en fin de titre */
}

/* la citation : la moitié qui porte le sens passe en blanc */
.f-cost-quote {
  max-width: 32em;
  text-wrap: balance;
  margin-top: 22px;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  color: var(--cz-text-soft);
}

.f-cost-quote strong {
  font-family: var(--cz-font-medium);
  font-weight: 500;
  color: var(--cz-ink);
}

/* l'accent du titre suit le même registre (le .accent global reste menthe) */
.f-cost-lead h2 .accent {
  color: var(--cz-negative);
}

/* ── Le chiffre : une bulle illustrative, pas un paragraphe ── */
/* Registre du constat : ce chapitre décrit un préjudice subi, pas une réussite.
   L'aquamarine y était partout — chiffre, icônes, accent de titre — et faisait
   lire la douleur comme une performance. Elle est réservée à la sortie (le lien
   vers la solution) ; tout ce qui décrit le coût passe en registre négatif. */
.f-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 20px;
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: var(--cz-radius-card);
  background: var(--cz-negative-tint);
  box-shadow: inset 0 0 0 1px rgba(217, 88, 78, 0.16);
}

/* le chiffre est le focal : posé en menthe négative, tabulaire, compact */
.f-stat-value {
  grid-column: 1;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: clamp(2.3rem, 3.2vw, 2.9rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--cz-negative);
  font-variant-numeric: tabular-nums;
}

/* la conséquence, séparée du chiffre par un filet vertical discret */
.f-stat-label {
  grid-column: 2;
  padding-left: 20px;
  border-left: 1px solid rgba(217, 88, 78, 0.18);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cz-text-soft);
}

.f-stat-source {
  grid-column: 1 / -1;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(217, 88, 78, 0.16);
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cz-neutral-bolder);
}

/* lien de transition (et non bouton : l'action est en section 02).
   Placé en ligne 2 de la colonne gauche : en pile, il se lit donc après les
   quatre coûts, jamais avant. */
/* ── Passage vers la solution ───────────────────────────────────────────────
   Un lien d'ancre vers la section suivante n'apportait rien. Le constat énonce
   sa sortie, un filet menthe descend jusqu'à la couture encre → crème, et la
   marque y prend le relais : la réponse est littéralement juste en dessous. */
.f-handoff {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 44px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.f-handoff p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--cz-text-moderate);
}

.f-handoff-strong {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  letter-spacing: -0.015em;
  color: var(--cz-ink);
}

/* ── Flèche vers la solution ────────────────────────────────────────────────
   Un chevron menthe qui rebondit vers le bas : il désigne la réponse et conduit
   l'œil jusqu'au médaillon de la marque (la couture), posé juste en dessous.
   Même geste que la page acheteur. */
.f-handoff-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  color: var(--cz-brand-700);
  animation: f-handoff-bounce 1.9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.f-handoff-arrow svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* au survol du bloc, le chevron vire au menthe vif et le message se souligne */
.f-handoff:hover .f-handoff-arrow {
  color: var(--cz-brand-400);
}

.f-handoff:hover .f-handoff-strong {
  color: var(--cz-brand-700);
}

@keyframes f-handoff-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ── Les quatre coûts, en lignes ── */
/* centré dans la colonne plutôt qu'étiré sur toute la hauteur : les lignes
   restent serrées, l'espacement ne dépend plus de la hauteur de la colonne
   éditoriale de gauche. */
.f-cost-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 4px;
}

.f-cost-list,
.f-cost-lead,
.f-handoff {
  min-width: 0;
}

.f-cost-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 20px;
  align-items: start;
  padding: 16px 0;
}

.f-cost-item + .f-cost-item {
  border-top: 1px solid var(--cz-border-faint);
}

/* apparition en cascade, de haut en bas */
.f-cost-item:nth-child(2) { transition-delay: 80ms; }
.f-cost-item:nth-child(3) { transition-delay: 160ms; }
.f-cost-item:nth-child(4) { transition-delay: 240ms; }

.f-cost-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-negative-tint);
  box-shadow: inset 0 0 0 1px rgba(217, 88, 78, 0.16);
}

.f-cost-ico svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--cz-negative);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.f-cost-item h3 {
  padding-top: 9px;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
}

.f-cost-item p {
  max-width: 34em;
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--cz-text-moderate);
}

/* ══ La solution — bento : une promesse mère, quatre conséquences ══════════ */
/* ══ 02 · La solution ══
   Ici commence Clearzi : bande Azure Mist, comme le chapitre 02 de la page
   acheteur. Le passage blanc neutre → azure menthe est le pivot du récit. */
.f-gains {
  position: relative;
  /* le haut doit dépasser la descente du filet de couture (médaillon + filet
     ≈ 84px sous la couture) pour que le tag « 02 » ne soit pas percuté. */
  padding: 96px var(--cz-margin) 0;
  background:
    radial-gradient(64% 46% at 50% 0%, rgba(124, 247, 212, 0.2), transparent 62%),
    var(--cz-azure);
  border-top: 1px solid var(--cz-border-medium);
}

/* texture de points en tête de bande, comme sur la page acheteur */
.f-gains::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--cz-dots-ink);
  background-size: 26px 26px;
  -webkit-mask: linear-gradient(#000, transparent 38%);
  mask: linear-gradient(#000, transparent 38%);
  opacity: 0.4;
  pointer-events: none;
}

.f-gains-inner {
  position: relative;
  z-index: 1;
}

/* le passage arrive au centre : le chapeau du chapitre s'y aligne */
.f-gains-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* la marque à cheval sur la couture blanc → azure : disque encre, il masque le
   filet de bordure et signe l'entrée dans l'univers Clearzi. Calé sur le bord
   gauche du rail de contenu, dans le prolongement du filet du constat. */
.f-seam-mark {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-ink);
  box-shadow: 0 14px 32px -10px rgba(10, 33, 38, 0.35);
}

.f-seam-mark img {
  display: block;
  width: 26px;
  height: 26px;
}

/* le filet repart sous le médaillon et conduit au titre du chapitre */
.f-seam-mark::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 56px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, var(--cz-brand-400), transparent);
}

.f-gains-inner {
  /* même rail que le header : content-max moins les marges */
  max-width: calc(var(--cz-content-max) - var(--cz-margin) * 2);
  margin: 0 auto;
}

.f-gains-head h2 {
  max-width: 24em;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  text-wrap: balance;
}

/* teaser : cinq bénéfices en 3 + 2 — grille de 6 colonnes ; les trois tuiles du
   haut occupent 2 colonnes chacune, les deux du bas 3 colonnes : elles sont donc
   plus larges et couvrent la même largeur totale que la rangée du haut. */
.f-gain-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.f-gain {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 24px;
  background: var(--cz-white);
  border-radius: var(--cz-radius-pop);
  box-shadow:
    0 0 0 1px rgba(10, 33, 38, 0.05),
    0 2px 4px rgba(10, 33, 38, 0.04),
    0 14px 30px -16px rgba(10, 33, 38, 0.1);
}

/* les deux dernières tuiles : plus larges (3 colonnes), même largeur totale
   que les trois du dessus. */
.f-gain:nth-child(n + 4) {
  grid-column: span 3;
}

/* en-tête compact : l'icône posée à côté du titre pour gagner de la hauteur. */
.f-gain-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

/* pastille menthe pâle + glyphe teal — langage d'icône du design system
   (index, acheteur). */
.f-gain .pastille {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--cz-bg-selected);
  border: 1px solid var(--cz-brand-border-soft);
}

.f-gain .pastille svg {
  width: 20px;
  height: 20px;
  stroke: var(--cz-brand-700);
}

.f-gain h3 {
  font-size: 1.02rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--cz-ink);
}

.f-gain p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cz-text-moderate);
}

/* apparition en cascade */
.f-gain:nth-child(2) { transition-delay: 70ms; }
.f-gain:nth-child(3) { transition-delay: 140ms; }
.f-gain:nth-child(4) { transition-delay: 210ms; }
.f-gain:nth-child(5) { transition-delay: 280ms; }

/* ══ Deux modes — le même résultat, deux façons d'y arriver ════════════════
   La différence est portée par le schéma : côté automatique, un point parcourt
   le flux tout seul (réutilise l'animation hw-travel de styles.css) ; côté à la
   demande, les étapes sont numérotées — trois gestes, trois clics. */
/* Seconde moitié du chapitre 02 : « deux façons d'être payé » explique la
   solution qu'on vient de présenter. Même bande Azure Mist, pas de nouveau
   marqueur de chapitre — juste un sous-titre et un filet de respiration. */
.f-modes {
  padding: 0 var(--cz-margin) 52px;
  background: var(--cz-azure);
  border-bottom: 1px solid var(--cz-border-medium);
}

.f-modes-inner {
  /* même rail que le header : content-max moins les marges */
  max-width: calc(var(--cz-content-max) - var(--cz-margin) * 2);
  margin: 0 auto;
}

.f-modes-head {
  max-width: 640px;
  margin: 0 auto;
  padding-top: 40px;
  text-align: center;
}

/* filet de respiration entre les deux moitiés du chapitre */
.f-modes-head::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto 28px;
  background: var(--cz-border-moderate);
}

.f-modes-head h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.f-modes-accent {
  color: var(--cz-brand-700);
}

.f-modes-lead {
  margin-top: 14px;
  font-size: 15.5px;
  color: var(--cz-text-soft);
}

.f-modes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 32px;
}

/* les deux modes sont les choix clés du chapitre : cartes plus affirmées —
   filet 1px net, ombre franche, léger halo au survol. */
.f-mode {
  display: flex;
  flex-direction: column;
  padding: 30px 30px 28px;
  background: var(--cz-white);
  border-radius: var(--cz-radius-pop);
  box-shadow:
    0 0 0 1px rgba(10, 33, 38, 0.06),
    0 2px 4px rgba(10, 33, 38, 0.04),
    0 22px 46px -20px rgba(10, 33, 38, 0.16);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease;
}

.f-mode:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(10, 33, 38, 0.06),
    0 6px 12px rgba(10, 33, 38, 0.06),
    0 34px 66px -22px rgba(10, 33, 38, 0.22);
}

/* coins signature en miroir : les deux modes se répondent (langage de la home) */
.f-mode-auto { border-bottom-left-radius: var(--cz-radius-corner); }
.f-mode-ondemand { border-bottom-right-radius: var(--cz-radius-corner); }

.f-mode:nth-child(2) { transition-delay: 90ms; }

/* ── En-tête de carte ── */
.f-mode-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 20px;
}

.f-mode-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-bg-selected);
  box-shadow: inset 0 0 0 1px var(--cz-brand-border-soft);
}

.f-mode-ico svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--cz-brand-700);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* le mode « à la demande » est piloté par la main : pastille encre */
.f-mode-ondemand .f-mode-ico {
  background: var(--cz-ink);
  box-shadow: none;
}

.f-mode-ondemand .f-mode-ico svg {
  stroke: var(--cz-aqua);
}

.f-mode-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-aqua);
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cz-ink);
}

.f-mode-ondemand .f-mode-badge {
  background: var(--cz-ink);
  color: var(--cz-aqua);
}

.f-mode-id h3 {
  margin-top: 10px;
  max-width: 15em;
  font-size: clamp(1.24rem, 1.7vw, 1.48rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* la description porte le sens : texte encre (pas gris) et mots-clés surlignés
   menthe — l'emphase passe par la couleur, jamais par un faux gras. */
.f-mode-desc {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--cz-ink);
}

/* ── Le schéma du mode ── */
.f-flow {
  margin-top: 22px;
  padding: 20px 20px 18px;
  border-radius: var(--cz-radius-pop);
  background: var(--cz-bg-selected);
}

.f-flow-title {
  display: block;
  text-align: center;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--cz-brand-700);
}

.f-flow-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin-top: 18px;
}

.f-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  width: 92px;
  text-align: center;
}

/* bulle d'étape affinée (40 au lieu de 46) et affirmée : disque encre, glyphe
   clair — la même grammaire d'icône « importante » que le CTA et le médaillon. */
.f-flow-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-ink);
  box-shadow: 0 6px 14px -6px rgba(10, 33, 38, 0.4);
}

.f-flow-ico svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--cz-white);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* la coche de validation posée sur la facture approuvée */
.f-flow-tick {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  border-radius: var(--cz-radius-full);
  background-color: var(--cz-brand-400);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2126' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px var(--cz-white);
}

/* le numéro du geste : ce mode se compte en clics — pastille menthe sur le
   disque encre, ce mode « à la demande » se lit 1 · 2 · 3. */
.f-flow-num {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-aqua);
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 10px;
  color: var(--cz-ink);
  box-shadow: 0 0 0 2px var(--cz-white);
  font-variant-numeric: tabular-nums;
}

.f-flow-step small {
  font-size: 12px;
  line-height: 1.35;
  color: var(--cz-text-soft);
}

/* ── Le connecteur : filet menthe + pointe ── */
.f-flow-link {
  position: relative;
  flex: 1;
  min-width: 26px;
  max-width: 78px;
  height: 2px;
  margin-top: 19px; /* centre des bulles (40px) */
  border-radius: var(--cz-radius-full);
  background: var(--cz-brand-border);
}

.f-flow-link::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-top: 2px solid var(--cz-brand-400);
  border-right: 2px solid var(--cz-brand-400);
  transform: rotate(45deg);
}

/* deux étapes seulement : le flux s'étale davantage */
.f-mode-auto .f-flow-link {
  max-width: 150px;
}

/* deux étapes : le flux reste court — c'est le message, il n'y a rien entre
   les deux. Il ne s'étale pas à la largeur du flux à la demande. */
.f-mode-auto .f-flow-link {
  max-width: 96px;
}

/* mode automatique : un point parcourt le flux, sans intervention */
.f-flow-link.is-live i {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-brand-400);
  box-shadow: 0 0 0 4px rgba(124, 247, 212, 0.35);
  animation: hw-travel 3.2s ease-in-out infinite;
}

/* mode à la demande : le schéma vit aussi — les gestes 1 · 2 · 3 s'allument en
   séquence (on clique, l'un après l'autre) ; l'écho de la travée automatique. */
.f-mode-ondemand .f-flow-num {
  animation: f-num-pulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.f-mode-ondemand .f-flow-step:nth-child(1) .f-flow-num { animation-delay: 0s; }
.f-mode-ondemand .f-flow-step:nth-child(3) .f-flow-num { animation-delay: 0.5s; }
.f-mode-ondemand .f-flow-step:nth-child(5) .f-flow-num { animation-delay: 1s; }

@keyframes f-num-pulse {
  0%, 34%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px var(--cz-white);
  }
  12% {
    transform: scale(1.22);
    box-shadow:
      0 0 0 2px var(--cz-white),
      0 0 0 6px rgba(124, 247, 212, 0.5);
  }
}

/* ── Les garanties du mode ── */
.f-mode-checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 20px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--cz-border-faint); /* le schéma se ferme ici */
}

.f-mode-checks li {
  position: relative;
  padding-left: 26px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cz-text-soft);
}

/* puce DS : cercle menthe pâle + coche teal (langage de model-list) */
.f-mode-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: var(--cz-radius-full);
  background-color: var(--cz-bg-selected);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007d63' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── CTA de clôture du chapitre 02 ── */
.f-modes-cta {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

/* le point voyageur, version verticale (schéma empilé) */
@keyframes f-travel-y {
  0% { top: -3px; opacity: 0; }
  15% { opacity: 1; }
  45% { top: calc(100% - 3px); opacity: 1; }
  60% { opacity: 0; }
  100% { top: calc(100% - 3px); opacity: 0; }
}

/* ══ Déjà en place — rien n'est demandé au fournisseur ═════════════════════
   La carte de droite est un vrai moment produit : je cherche mon client, il est
   déjà connecté. La bande de quatre items est volontairement secondaire. */
/* 04 · Déjà en place — bande blanche : le filet marque la couture avec la
   crème du chapitre 03, qui sans lui se fondait dedans */
.f-ready {
  padding: 60px var(--cz-margin) 64px;
  background: var(--cz-white);
  border-top: 1px solid var(--cz-border-medium);
}

.f-ready-inner {
  /* même rail que le header : content-max moins les marges */
  max-width: calc(var(--cz-content-max) - var(--cz-margin) * 2);
  margin: 0 auto;
}

.f-ready-top {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  align-items: center;
  gap: 56px;
}

.f-ready-top > * {
  min-width: 0;
}

/* la promesse, en menthe, avant le mécanisme */
.f-ready-title {
  margin-top: 16px;
}

/* l'accroche : le bénéfice émotionnel, en menthe, dominant (2 lignes tenues
   par le <br> : elles ne doivent jamais casser en orphelin). */
.f-ready-hook {
  display: block;
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--cz-brand-700);
}

/* le mécanisme : l'explication, en encre et nettement plus mesurée que
   l'accroche (≈ 0,65×) — la hiérarchie se lit d'un coup d'œil. */
.f-ready-statement {
  display: block;
  max-width: 19em;
  margin-top: 14px;
  font-size: clamp(1.1rem, 1.45vw, 1.28rem);
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--cz-ink);
  text-wrap: balance;
}

.f-ready-desc {
  max-width: 32em;
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--cz-text-soft);
}

/* la preuve chiffrée, reprise de la page d'accueil */
.f-ready-proof {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--cz-ink);
  font-variant-numeric: tabular-nums;
}

.f-ready-proof::before {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: var(--cz-radius-full);
  background-color: var(--cz-bg-selected);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007d63' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── La carte « vos clients participants » ── */
.f-ready-card {
  padding: 24px 24px 20px;
  background: var(--cz-white);
  border-radius: var(--cz-radius-pop);
  box-shadow:
    0 0 0 1px rgba(10, 33, 38, 0.05),
    0 2px 4px rgba(10, 33, 38, 0.04),
    0 18px 40px -14px rgba(10, 33, 38, 0.14);
}

.f-ready-card-title {
  display: block;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--cz-ink);
}

/* champ de recherche : un vrai input, qui filtre la liste en dessous */
.f-ready-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  margin-top: 16px;
  padding: 0 6px 0 14px;
  border-radius: var(--cz-radius-sm);
  background: var(--cz-bg-selected);
  box-shadow: inset 0 0 0 1px var(--cz-brand-border-soft);
  transition: box-shadow 160ms ease;
}

/* bouton de recherche : la recherche ne se déclenche qu'au clic (ou Entrée) —
   la liste ne bouge pas à chaque lettre, et rien n'est révélé pendant la frappe. */
.f-ready-search-btn {
  flex-shrink: 0;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--cz-radius-xs);
  background: var(--cz-ink);
  color: var(--cz-azure);
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 12.5px;
  cursor: pointer;
  transition: color 160ms ease, opacity 160ms ease;
}

.f-ready-search-btn:hover {
  color: var(--cz-white);
}

.f-ready-field:focus-within {
  box-shadow: inset 0 0 0 1px var(--cz-brand-border), var(--cz-focus-brand);
}

.f-ready-field svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--cz-brand-700);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.f-ready-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--cz-font-regular);
  font-size: 13px;
  color: var(--cz-ink);
}

.f-ready-field input::placeholder {
  color: var(--cz-text-moderate);
}

.f-ready-field input:focus {
  outline: none;
  box-shadow: none; /* le focus est porté par le champ entier */
}

/* zone de résultats à hauteur fixe : la carte ne bouge jamais, quel que soit
   le nombre de résultats. Hauteur choisie pour couper la 5e ligne en deux —
   c'est ce demi-rang visible qui dit « ça défile ». */
.f-ready-results {
  position: relative;
  min-height: 236px; /* place pour l'aperçu de clients ou l'état « vérifier » */
  margin-top: 10px;
}

/* liste non scrollable : seul un aperçu de quelques clients est montré (JS) ;
   le nombre total de clients n'est jamais révélé. La recherche fait apparaître
   le client cherché parmi tous les participants. */
.f-ready-list {
  padding-right: 2px;
}

.f-ready-list li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--cz-border-faint);
}

.f-ready-list li:last-child {
  border-bottom: 0;
}

/* sans cette règle, le display:grid l'emporterait sur [hidden] */
.f-ready-list li[hidden] {
  display: none;
}

.f-ready-list img {
  height: 22px;
  width: 100%;
  object-fit: contain;
  object-position: left center;
}

.f-ready-name {
  font-size: 13px;
  line-height: 1.3;
  color: var(--cz-text-soft);
}

/* au repos : ruban vertical qui fait défiler tous les clients branchés en
   boucle, pour ne pas laisser croire qu'ils ne sont qu'une poignée. Chaque
   client est cloné deux fois (JS) : translateY(-50%) reboucle sans couture.
   Le JS masque ce bloc dès qu'une recherche est lancée. */
.f-ready-marquee {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent, #000 12% 88%, transparent);
  mask: linear-gradient(180deg, transparent, #000 12% 88%, transparent);
}

.f-ready-marquee[hidden] {
  display: none;
}

.f-ready-marquee-track {
  display: flex;
  flex-direction: column;
  animation: f-ready-vscroll 26s linear infinite;
}

.f-ready-marquee:hover .f-ready-marquee-track {
  animation-play-state: paused;
}

@keyframes f-ready-vscroll {
  to { transform: translateY(-50%); }
}

.f-ready-mlist {
  flex-shrink: 0;
}

/* dans la boucle, la dernière ligne garde son filet (sinon la jointure saute) */
.f-ready-mlist li:last-child {
  border-bottom: 1px solid var(--cz-border-faint);
}

@media (prefers-reduced-motion: reduce) {
  .f-ready-marquee-track { animation: none; }
}

/* aucun résultat : au lieu d'annoncer « pas de résultat », on propose de
   vérifier. Occupe la zone de résultats sans en changer la hauteur. */
.f-ready-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 20px 18px;
  border-radius: var(--cz-radius-sm);
  background: var(--cz-bg-base);
  box-shadow: inset 0 0 0 1px var(--cz-border-faint);
}

.f-ready-empty[hidden] {
  display: none;
}

/* client trouvé : on confirme la connexion et on amène vers l'onboarding */
.f-ready-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--cz-border-faint);
}

.f-ready-found[hidden] {
  display: none;
}

.f-ready-found-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cz-text-soft);
}

/* bouton « Vérifier si ce client est connecté » — pill menthe + cercle noir */
.f-verify-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 8px 0 20px;
  border-radius: var(--cz-radius-button);
  background: var(--cz-aqua);
  border: 1px solid var(--cz-brand-border);
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--cz-ink);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.f-verify-btn:hover {
  background: var(--cz-brand-400);
  border-color: var(--cz-brand-400);
}

.f-verify-btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-ink);
  flex-shrink: 0;
}

.f-verify-btn-circle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--cz-aqua);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.f-ready-count {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cz-neutral-bolder);
}

/* ══ Modale « Vérifier si un client est connecté » ════════════════════════ */
.f-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.f-modal[hidden] {
  display: none;
}

.f-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 33, 38, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: f-modal-fade 200ms ease;
}

.f-modal-dialog {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--cz-white);
  border-radius: var(--cz-radius-panel);
  padding: 34px 32px 30px;
  box-shadow: var(--cz-shadow-frame);
  animation: f-modal-pop 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes f-modal-fade {
  from { opacity: 0; }
}

@keyframes f-modal-pop {
  from { opacity: 0; transform: translateY(12px); }
}

.f-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-bg-base);
  border: 1px solid var(--cz-border-faint);
  color: var(--cz-text-moderate);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.f-modal-close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.f-modal-close:hover {
  background: var(--cz-border-faint);
  color: var(--cz-ink);
}

.f-modal-body h3,
.f-modal-success h3 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--cz-ink);
  max-width: 15em;
  padding-right: 28px;
}

.f-modal-sub {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cz-text-moderate);
}

.f-modal-field {
  display: block;
  margin-top: 16px;
}

.f-modal-field > span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--cz-text-soft);
}

.f-modal-input,
.f-modal-client-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--cz-radius-sm);
  background: var(--cz-white);
  border: 1px solid var(--cz-border-moderate);
  font-family: var(--cz-font-regular);
  font-size: 14px;
  color: var(--cz-ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.f-modal-input::placeholder,
.f-modal-client-input::placeholder {
  color: var(--cz-neutral-bolder);
}

.f-modal-input:focus,
.f-modal-client-input:focus {
  outline: none;
  border-color: var(--cz-brand-400);
  box-shadow: var(--cz-focus-brand);
}

.f-modal-clients {
  margin-top: 20px;
  padding: 0;
  border: 0;
}

.f-modal-clients legend {
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--cz-text-soft);
}

#clientFields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.f-modal-add {
  align-self: flex-start;
  margin-top: 10px;
  padding: 4px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 13px;
  color: var(--cz-brand-700);
}

.f-modal-add:hover {
  color: var(--cz-ink);
}

.f-modal-submit {
  width: 100%;
  height: 48px;
  margin-top: 24px;
  justify-content: space-between;
}

.f-modal-submit:disabled {
  opacity: 0.7;
  cursor: default;
}

.f-modal-error {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cz-negative);
}

.f-modal-error[hidden] {
  display: none;
}

.f-modal-error a {
  color: var(--cz-negative);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.f-modal-success {
  text-align: center;
  padding: 8px 0 4px;
}

.f-modal-success[hidden] {
  display: none;
}

.f-modal-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-bg-selected);
  box-shadow: inset 0 0 0 1px var(--cz-brand-border);
}

.f-modal-check svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--cz-brand-700);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.f-modal-success h3 {
  margin: 0 auto;
  padding: 0;
}

.f-modal-success p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cz-text-moderate);
}

.f-modal-success .btn {
  margin-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .f-modal-backdrop,
  .f-modal-dialog {
    animation: none;
  }
}

/* ── Les quatre objections levées : bande secondaire ── */
.f-ready-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--cz-border-medium);
}

.f-ready-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 12px;
}

/* filet vertical entre les items (bande de réassurance, pas des cartes) */
.f-ready-item + .f-ready-item::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--cz-border-medium);
}

.f-ready-item h3 {
  min-height: 2.6em; /* deux lignes réservées : les descriptions s'alignent */
  display: flex;
  align-items: center;
  font-size: 0.98rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.f-ready-item p {
  grid-column: 2;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cz-text-moderate);
}

/* les mots qui portent la preuve : Saans Medium + encre — jamais de faux gras
   (le glyphe <strong> par défaut synthétiserait un gras que la fonte n'a pas). */
.f-ready-item p strong {
  font-family: var(--cz-font-medium);
  font-weight: 500;
  color: var(--cz-ink);
}

/* apparition en cascade */
.f-ready-item:nth-child(2) { transition-delay: 80ms; }
.f-ready-item:nth-child(3) { transition-delay: 160ms; }
.f-ready-item:nth-child(4) { transition-delay: 240ms; }

/* ══ La différence — les cinq garanties sur Jet Black ══════════════════════
   Un seul geste graphique : la marque Clearzi en embossage géant, coupée par
   le bord gauche. Les garanties ne sont pas des cartes : des lignes cochées. */
/* chapitre secondaire (moins capital que « les deux modes ») : échelle réduite,
   titre plus mesuré, garanties resserrées. */
.f-diff {
  position: relative;
  overflow: hidden;
  padding: 48px var(--cz-margin) 44px;
  background:
    radial-gradient(48% 52% at 78% 24%, rgba(124, 247, 212, 0.12), transparent 64%),
    var(--cz-ink);
}

/* le logotype en embossage : il déborde à gauche et ne se lit qu'à moitié */
.f-diff-mark {
  position: absolute;
  top: 52%;
  left: -6%;
  width: 54%;
  min-width: 560px;
  height: auto;
  transform: translateY(-50%);
  opacity: 0.028;
  pointer-events: none;
  user-select: none;
}

.f-diff-inner {
  position: relative;
  z-index: 1;
  /* même rail que le header : content-max moins les marges */
  max-width: calc(var(--cz-content-max) - var(--cz-margin) * 2);
  margin: 0 auto;
}

.f-diff .section-head {
  max-width: 820px;
}

.f-diff .section-head h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.05rem);
  color: var(--cz-white);
  text-wrap: balance;
}

.f-diff .section-tag b {
  color: var(--cz-aqua);
}

/* soulignage du titre : un filet fin, décollé du texte (pas un marqueur épais) */
.f-diff .section-head h2 .hl {
  padding-bottom: 5px;
  background: linear-gradient(var(--cz-aqua), var(--cz-aqua)) no-repeat left bottom / 100% 2px;
}

.f-diff-body {
  display: grid;
  grid-template-columns: 1.32fr 0.68fr;
  align-items: center;
  gap: 52px;
  margin-top: 40px;
}

.f-diff-body > * {
  min-width: 0;
}

/* ── Les garanties ── */
.f-diff-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.f-diff-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
}

.f-diff-item:nth-child(2) { transition-delay: 70ms; }
.f-diff-item:nth-child(3) { transition-delay: 140ms; }
.f-diff-item:nth-child(4) { transition-delay: 210ms; }
.f-diff-item:nth-child(5) { transition-delay: 280ms; }

/* coche cerclée menthe : la marque de la garantie tenue */
.f-diff-check {
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: var(--cz-radius-full);
  box-shadow: inset 0 0 0 1.5px var(--cz-brand-400);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345dcb4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.f-diff-item h3 {
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  letter-spacing: -0.015em;
  color: var(--cz-white);
}

.f-diff-item p {
  max-width: 32em;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cz-on-ink-soft);
}

/* ── La preuve : la facture prête à être encaissée ── */
.f-diff-side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.f-diff-side .btn {
  align-self: flex-start;
}

.f-diff-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  width: 420px;
  height: 360px;
  max-width: 130%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(124, 247, 212, 0.22), transparent 74%);
  pointer-events: none;
}

.f-diff-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 360px;
  padding: 22px 22px 20px;
  border-radius: var(--cz-radius-pop);
  background:
    linear-gradient(158deg, rgba(124, 247, 212, 0.1), rgba(124, 247, 212, 0) 52%),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 30px 60px -24px rgba(0, 0, 0, 0.7);
}

.f-diff-card-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 13px;
  color: var(--cz-white);
}

.f-diff-card-tick {
  width: 20px;
  height: 20px;
  border-radius: var(--cz-radius-full);
  background-color: var(--cz-brand-400);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2126' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.f-diff-card-ref {
  margin-top: 16px;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cz-neutral-bolder);
  font-variant-numeric: tabular-nums;
}

.f-diff-card-amount {
  margin-top: 8px;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.7vw, 1.6rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--cz-white);
  font-variant-numeric: tabular-nums;
}

.f-diff-card-eta {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--cz-brand-400);
}

/* bouton de l'illustration : ce n'est PAS le CTA du site, juste un contrôle
   dans la capture produit. Traitement verre dépoli (fond translucide, filet
   discret, glyphe menthe) — impossible à confondre avec la pill menthe pleine
   « Demander une démo ». */
.f-diff-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  height: 32px;
  margin-top: 16px;
  padding: 0 12px;
  border-radius: var(--cz-radius-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 12px;
  color: var(--cz-white);
}

.f-diff-card-btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.f-diff-card-btn-circle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--cz-aqua);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ══ Démarrer — la clôture ═════════════════════════════════════════════════ */
/* 07 · Démarrer — chapitre de clôture : bande Azure Mist, filets en bordure.
   C'est le dernier moment lumineux avant la FAQ et le pied de page encre. */
.f-start {
  position: relative;
  padding: 60px var(--cz-margin) 64px;
  background:
    radial-gradient(62% 66% at 50% 0%, rgba(124, 247, 212, 0.18), transparent 64%),
    var(--cz-azure);
  border-top: 1px solid var(--cz-border-medium);
  border-bottom: 1px solid var(--cz-border-medium);
}

/* le chapeau du chapitre passe à gauche : on lisait la carte avant le titre.
   Même disposition que le chapitre 06 — titre à gauche, panneau à droite. */
.f-start-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 64px;
  /* même rail que le header : content-max moins les marges */
  max-width: calc(var(--cz-content-max) - var(--cz-margin) * 2);
  margin: 0 auto;
}

.f-start-inner > * {
  min-width: 0;
}

/* ── La carte « en 3 minutes » ── */
.f-start-card {
  padding: 38px 36px 34px;
  border-radius: var(--cz-radius-panel);
  border-bottom-right-radius: var(--cz-radius-corner); /* coin signature DS */
  background: linear-gradient(158deg, var(--cz-bg-selected), var(--cz-white) 70%);
  box-shadow:
    inset 0 0 0 1px var(--cz-brand-border-soft),
    0 18px 44px -20px rgba(10, 33, 38, 0.14);
}

.f-start-card h3 {
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  letter-spacing: -0.02em;
  color: var(--cz-brand-700);
}

.f-start-steps {
  margin-top: 30px;
}

.f-start-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  padding-bottom: 26px;
}

.f-start-step:last-child {
  padding-bottom: 0;
}

/* le filet pointillé qui relie les étapes : ici la séquence a du sens */
.f-start-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 8px;
  width: 0;
  border-left: 1.5px dotted var(--cz-brand-border);
}

.f-start-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-brand-700);
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 14px;
  color: var(--cz-white);
  font-variant-numeric: tabular-nums;
}

.f-start-step h4 {
  padding-top: 7px;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--cz-ink);
}

.f-start-step p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cz-text-soft);
}

.f-start-btn {
  margin-top: 30px;
}

/* ── La clôture : la plus grosse typo de la page ── */
.f-start-close h2 {
  max-width: 13em;
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.f-start-close p {
  max-width: 30em;
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--cz-text-soft);
}

/* Le médaillon débordait à gauche de la pilule : l'intention était que les
   rayons du burst tombent sur le fond clair, mais en pratique ils traversaient
   l'encre et la pilule perdait son extrémité arrondie — ça lisait comme un bug.
   Il repasse à droite, dans la pilule, comme tous les autres CTA du site. */
.btn-final {
  gap: 14px;
  height: 60px;
  margin-top: 36px;
  padding: 0 8px 0 30px;
  background: var(--cz-ink);
  color: var(--cz-aqua);
  font-size: 16px;
}

.btn-final .cta-circle {
  width: 44px;
  height: 44px;
  background: var(--cz-aqua);
}

.btn-final .cta-circle svg {
  width: 19px;
  height: 19px;
  stroke: var(--cz-ink);
}

/* les rayons sont là en permanence : c'est l'action principale de la page */
.btn-final:hover {
  color: var(--cz-white);
}

.btn-final:hover .cta-circle {
  box-shadow: 0 0 0 5px rgba(124, 247, 212, 0.22);
}

/* ══ La preuve — les chiffres, et ce que la plateforme montre ══════════════ */
/* 06 · La preuve — replacée avant « Démarrer » : on prouve, puis on propose
   d'agir. Sur la crème, la carte encre de la plateforme y ressort mieux que
   sur l'azure, désormais réservé au chapitre de clôture. */
.f-proof {
  padding: 60px var(--cz-margin) 64px;
  background: var(--cz-bg-base);
}

.f-proof-inner {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  align-items: center;
  gap: 56px;
  /* même rail que le header : content-max moins les marges */
  max-width: calc(var(--cz-content-max) - var(--cz-margin) * 2);
  margin: 0 auto;
}

.f-proof-inner > * {
  min-width: 0;
}

.f-proof-lead h2 {
  max-width: 12em;
  font-size: clamp(1.8rem, 2.9vw, 2.3rem);
  text-wrap: balance;
}

/* les quatre chiffres, en croix : deux filets suffisent à structurer */
.f-proof-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 40px;
}

.f-proof-stats li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  row-gap: 4px;
  padding: 26px 26px 26px 0;
}

.f-proof-stats li:nth-child(odd) {
  border-right: 1px solid var(--cz-border-medium);
}

.f-proof-stats li:nth-child(even) {
  padding-left: 26px;
  padding-right: 0;
}

.f-proof-stats li:nth-child(-n + 2) {
  border-bottom: 1px solid var(--cz-border-medium);
  padding-top: 0;
}

.f-proof-stats li:nth-child(n + 3) {
  padding-bottom: 0;
}

.f-proof-ico {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.f-proof-ico svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--cz-brand-700);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.f-proof-value {
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--cz-ink);
  font-variant-numeric: tabular-nums;
}

.f-proof-label {
  grid-column: 2;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--cz-text-soft);
}

/* ── La carte encre : le suivi en temps réel ── */
.f-proof-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px 34px 32px;
  border-radius: var(--cz-radius-panel);
  border-bottom-right-radius: var(--cz-radius-corner); /* coin signature DS */
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(124, 247, 212, 0.12), transparent 60%),
    var(--cz-ink);
  box-shadow: 0 30px 64px -26px rgba(10, 33, 38, 0.45);
}

.f-proof-card h3 {
  max-width: 16em;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  letter-spacing: -0.02em;
  color: var(--cz-white);
  text-wrap: balance;
}

.f-proof-card-lead {
  max-width: 28em;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cz-brand-400);
}

/* le parcours d'une facture chez le client : trois états, le dernier atteint */
.f-proof-pipe {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 26px;
  padding: 16px 18px;
  border-radius: var(--cz-radius-md);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.f-proof-stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--cz-on-ink-soft);
  white-space: nowrap;
}

.f-proof-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--cz-radius-full);
  box-shadow: inset 0 0 0 1.5px var(--cz-neutral-bolder);
}

.f-proof-stage.is-done {
  color: var(--cz-ink);
  padding: 4px 10px;
  margin: -4px 0;
  border-radius: var(--cz-radius-full);
  background: var(--cz-aqua);
}

.f-proof-stage.is-done .f-proof-dot {
  background: var(--cz-ink);
  box-shadow: none;
}

.f-proof-rail {
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: var(--cz-on-ink-faint);
}

.f-proof-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.f-proof-checks li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cz-on-ink-soft);
}

.f-proof-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--cz-radius-full);
  background-color: rgba(124, 247, 212, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cf7d4' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

.f-proof-card .btn {
  margin-top: 30px;
}

/* ══ FAQ — Jet Black, en continuité du pied de page comme sur la page acheteur.
   La page se referme donc sur un seul bloc sombre : questions puis contact. ══ */
.f-faq {
  position: relative;
  padding: 60px var(--cz-margin) 64px;
  background:
    radial-gradient(58% 62% at 50% 0%, rgba(124, 247, 212, 0.12), transparent 64%),
    var(--cz-ink);
}

.f-faq-inner {
  /* même rail que le header : content-max moins les marges */
  max-width: calc(var(--cz-content-max) - var(--cz-margin) * 2);
  margin: 0 auto;
}

.f-faq .section-head h2 {
  font-size: clamp(1.9rem, 3.1vw, 2.5rem);
  color: var(--cz-white);
}

.f-faq .section-sub {
  color: var(--cz-on-ink-soft);
}

.f-faq-accent {
  color: var(--cz-aqua);
}

.f-faq-list {
  max-width: 820px;
  margin: 44px auto 0;
}

.f-faq-item {
  border-top: 1px solid var(--cz-on-ink-faint);
}

.f-faq-item:last-child {
  border-bottom: 1px solid var(--cz-on-ink-faint);
}

.f-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--cz-font-medium);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--cz-white);
  transition: color 150ms ease;
}

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

.f-faq-item summary:hover {
  color: var(--cz-aqua);
}

/* le chevron « + » qui devient « − » : deux barres, une seule pivote */
.f-faq-chev {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--cz-radius-full);
  background: rgba(124, 247, 212, 0.1);
  box-shadow: inset 0 0 0 1px rgba(124, 247, 212, 0.24);
  transition: background-color 180ms ease;
}

.f-faq-chev::before,
.f-faq-chev::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.8px;
  border-radius: 2px;
  background: var(--cz-aqua);
  transform: translate(-50%, -50%);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.f-faq-chev::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.f-faq-item[open] .f-faq-chev {
  background: var(--cz-aqua);
  box-shadow: none;
}

.f-faq-item[open] .f-faq-chev::before,
.f-faq-item[open] .f-faq-chev::after {
  background: var(--cz-ink);
}

.f-faq-item[open] .f-faq-chev::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.f-faq-body {
  overflow: hidden;
  padding: 0 56px 26px 4px;
}

.f-faq-body p {
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--cz-on-ink-soft);
}

.f-faq-body p + p,
.f-faq-body ul + p {
  margin-top: 12px;
}

/* liens inline dans une réponse (fond encre → menthe). « Signaler votre
   intérêt » est un bouton qui ouvre la modale, d'où le reset d'apparence. */
.f-faq-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--cz-aqua);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 150ms ease;
}

.f-faq-link:hover {
  color: var(--cz-white);
}

/* liste d'avantages dans une réponse : puces menthe */
.f-faq-body ul {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 62ch;
}

.f-faq-body li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cz-on-ink-soft);
}

.f-faq-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: var(--cz-radius-full);
  background: var(--cz-aqua);
}

.f-faq-body li strong {
  color: var(--cz-white);
}

/* ══ Responsive ══ */
/* la capture reste dans le rail de contenu : ses bords s'alignent exactement
   sur le logo et le CTA du header — aucun débord. */
@media (max-width: 1080px) {
  .f-hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 124px;
    padding-bottom: 56px;
    text-align: center;
  }

  /* sous le desktop, le 3 + 2 laisse place à 2 tuiles égales par rangée */
  .f-gain-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .f-gain,
  .f-gain:nth-child(n + 4) {
    grid-column: auto;
  }

  .f-hero-copy h1 {
    margin: 0 auto;
  }

  .f-hero-actions {
    justify-content: center;
  }

  .f-hero-visual {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
  }

  .f-glow {
    right: 50%;
    width: 520px;
    height: 440px;
    transform: translate(50%, -50%);
  }

  /* la colonne éditoriale passe au-dessus des quatre lignes */
  .f-cost-top {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .f-cost-lead,
  .f-cost-list,
  .f-handoff {
    grid-column: auto;
    grid-row: auto;
  }

  .f-handoff {
    margin-top: 12px;
  }

  .f-cost-lead h2,
  .f-cost-quote,
  .f-stat-label {
    max-width: 34em;
  }

  /* les deux modes s'empilent */
  .f-modes-grid {
    grid-template-columns: 1fr;
  }

  /* les garanties passent au-dessus de la preuve */
  .f-diff-body {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 44px;
  }

  /* en pile, la carte ne s'étire pas sur toute la largeur */
  .f-diff-side {
    align-items: center;
  }

  .f-diff-card {
    max-width: 460px;
  }

  .f-diff-side .btn {
    align-self: center;
  }

  .f-diff-mark {
    left: -240px;
    width: 520px;
  }

  /* les chiffres passent au-dessus de la carte de suivi */
  .f-proof-inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  /* la clôture passe au-dessus de la carte des étapes */
  .f-start-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* la carte passe sous le texte, la bande en 2 × 2 */
  .f-ready-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .f-ready-visual {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

  .f-ready-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
    margin-top: 52px;
  }

  .f-ready-item + .f-ready-item::before {
    display: none;
  }

  /* colonnes plus larges : les titres tiennent sur une ligne */
  .f-ready-item h3 {
    min-height: 0;
  }

  /* un filet horizontal sépare les deux rangées */
  .f-ready-item:nth-child(n + 3) {
    padding-top: 30px;
    border-top: 1px solid var(--cz-border-medium);
  }

  .f-mode {
    padding: 32px 30px 30px;
  }
}

@media (max-width: 820px) {
  .f-app {
    grid-template-columns: 98px 1fr;
    column-gap: 12px;
  }
}

@media (max-width: 620px) {
  .f-hero-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .f-cost {
    padding: 40px 20px 44px;
  }

  .f-stat {
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding: 20px 20px 18px;
  }

  .f-stat-value {
    grid-column: 1;
  }

  /* en pile : le filet vertical disparaît, la conséquence passe dessous */
  .f-stat-label {
    grid-column: 1;
    padding-left: 0;
    border-left: 0;
  }

  .f-cost-item {
    grid-template-columns: 38px 1fr;
    column-gap: 16px;
    padding: 20px 0;
  }

  .f-cost-ico {
    width: 38px;
    height: 38px;
  }

  .f-cost-ico svg {
    width: 19px;
    height: 19px;
  }

  .f-cost-item h3 {
    padding-top: 7px;
    font-size: 1.02rem;
  }

  .f-gains {
    padding: 90px 20px 64px;
  }

  .f-gain-grid {
    gap: 14px;
  }

  .f-gain {
    padding: 22px 20px 20px;
  }

  /* icône un peu réduite sur mobile, toujours présente */
  .f-gain .pastille {
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
  }

  .f-gain .pastille svg {
    width: 24px;
    height: 24px;
  }

  .f-gain h3 {
    font-size: 1.1rem;
  }

  .f-gain p {
    font-size: 14px;
  }

  .f-modes {
    padding: 40px 20px 48px;
  }

  .f-mode {
    padding: 26px 22px 24px;
  }

  .f-mode-ico {
    width: 54px;
    height: 54px;
  }

  .f-mode-ico svg {
    width: 25px;
    height: 25px;
  }

  .f-flow {
    padding: 18px 16px 16px;
  }

  /* le schéma passe à la verticale : icône à gauche, libellé à droite */
  .f-flow-steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .f-flow-step {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: auto;
    text-align: left;
  }

  .f-flow-step small {
    font-size: 12.5px;
  }

  .f-flow-link {
    flex: none;
    width: 2px;
    min-width: 0;
    max-width: none;
    height: 22px;
    margin: 4px 0 4px 19px;
  }

  .f-flow-link::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: 50%;
    margin: 0 0 0 -3px;
    transform: rotate(135deg);
  }

  .f-flow-link.is-live i {
    top: 0;
    left: -3px;
    animation-name: f-travel-y;
  }

  .f-mode-checks {
    grid-template-columns: 1fr;
    gap: 11px;
    padding-top: 22px;
  }

  .f-ready {
    padding: 56px 20px 64px;
  }

  .f-ready-card {
    padding: 20px 18px 16px;
  }

  .f-ready-grid {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 44px;
    padding-top: 32px;
  }

  .f-diff {
    padding: 44px 20px 44px;
  }

  .f-diff-list {
    gap: 22px;
  }

  .f-diff-item {
    column-gap: 16px;
  }

  .f-diff-check {
    width: 30px;
    height: 30px;
    background-size: 14px;
  }

  .f-proof {
    padding: 56px 20px 64px;
  }

  /* les quatre chiffres passent en colonne : les filets deviennent horizontaux */
  .f-proof-stats {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  /* :nth-child(odd) plus spécifique que li : on le cible explicitement */
  .f-proof-stats li:nth-child(odd),
  .f-proof-stats li:nth-child(even) {
    padding: 22px 0;
    border-right: 0;
  }

  .f-proof-stats li:nth-child(-n + 2) {
    padding-top: 22px;
  }

  .f-proof-stats li:not(:last-child) {
    border-bottom: 1px solid var(--cz-border-medium);
  }

  .f-proof-stats li:first-child {
    padding-top: 0;
  }

  .f-proof-stats li:last-child {
    padding-bottom: 0;
  }

  .f-proof-card {
    padding: 28px 24px 26px;
  }

  /* le parcours passe à la ligne plutôt que de se comprimer */
  .f-proof-pipe {
    flex-wrap: wrap;
    gap: 10px 8px;
  }

  .f-proof-rail {
    display: none;
  }

  .f-faq {
    padding: 56px 20px 64px;
  }

  .f-faq-body {
    padding-right: 20px;
  }

  .f-start {
    padding: 60px 20px 72px;
  }

  .f-start-card {
    padding: 28px 24px 26px;
  }

  .btn-final {
    height: 56px;
    padding: 0 7px 0 24px;
    font-size: 15px;
  }

  .btn-final .cta-circle {
    width: 40px;
    height: 40px;
  }

  .f-ready-item:nth-child(n + 3) {
    padding-top: 0;
    border-top: none;
  }

  /* une seule colonne : plus besoin de réserver deux lignes */
  .f-ready-item h3 {
    min-height: 0;
  }

  /* la capture se resserre : sidebar réduite à ses icônes */
  .f-app {
    grid-template-columns: 42px 1fr;
    column-gap: 10px;
    padding: 8px;
    border-radius: var(--cz-radius-band);
  }

  .f-app-side {
    padding: 12px 6px 14px;
  }

  .f-side-logo {
    justify-content: center;
    padding: 0;
  }

  .f-side-logo img {
    width: 30px;
  }

  .f-side-item {
    justify-content: center;
    padding: 9px 0;
    font-size: 0;
    line-height: 0;
    gap: 0;
  }

  .f-side-item svg {
    width: 14px;
    height: 14px;
  }

  .f-app-main {
    padding: 10px 4px 6px 0;
  }

  .f-th,
  .f-td {
    padding: 7px 5px;
  }

  .f-td {
    font-size: 9px;
  }
}

@media (max-width: 440px) {
  .f-gain-grid {
    grid-template-columns: 1fr;
  }

  /* très étroit : on garde le cœur du sujet — la facture et son montant */
  .f-tr {
    grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr);
  }

  .f-client {
    display: none;
  }

  .f-payout {
    padding: 11px 12px;
  }

  .f-payout-amount {
    font-size: 16px;
  }

  .f-payout-btn {
    height: 28px;
    padding: 0 3px 0 10px;
    font-size: 9px;
  }
}

/* ══ Mouvements réduits ══ */
@media (prefers-reduced-motion: reduce) {
  .f-flow-link.is-live i {
    animation: none;
    opacity: 0;
  }

  .f-handoff-arrow,
  .f-mode-ondemand .f-flow-num {
    animation: none;
  }

  .f-mode,
  .f-gain {
    transition: none;
  }
}