/* ============================================================================
   REKOV — l'engagement, dans le héro
   ----------------------------------------------------------------------------
   Remplace la barre de faits. Les trois chiffres disaient un prix, un délai et
   une part sur le même ton, sans jamais énoncer ce qui distingue vraiment
   l'offre : le risque est porté par Rekov, pas par le client.

   Règle de langue qui commande la copie : le visiteur n'est JAMAIS sujet du
   verbe payer. « Vous ne payez que si… » installe malgré tout une dépense à
   venir et fait du client le débiteur dès le premier écran. C'est Rekov qui
   est payé, ou ne l'est pas.

   Contrainte de composition : aucun second énoncé au corps d'un titre. Le héro
   a déjà un h1 ; deux masses display se disputent le même regard. Ce sont donc
   les chiffres qui portent la taille, jamais une phrase.
============================================================================ */

.xf {
  border-top: 2px solid var(--fg);
  padding: clamp(1.2rem, 2.4vw, 1.8rem) 0 clamp(1.1rem, 2.2vw, 1.6rem);
}
.xf__r { display: flex; align-items: flex-start; gap: clamp(1.1rem, 2.6vw, 2.2rem); }
.xf__n {
  font-weight: 800; font-size: var(--t-num);
  letter-spacing: -0.045em; line-height: 0.82; color: var(--accent);
  flex-shrink: 0;
}
.xf__b { min-width: 0; flex: 1 1 auto; }
.xf__t {
  display: block; max-width: 62ch;
  font-size: clamp(0.88rem, 0.83rem + 0.22vw, 1.0625rem);
  line-height: 1.6; color: var(--fg-2); text-wrap: pretty;
}
/* La promesse de remboursement porte le même poids que le zéro qui la
   précède : c'est la phrase qui retire le risque. */
.xf__t em { font-style: normal; color: var(--accent); font-weight: 800; }

/* ---- La question et sa réponse ----
   L'étiquette n'annonce pas une rubrique : elle formule la question que le
   visiteur se pose déjà. Le chiffre devient une réponse, et une réponse se lit
   plus vite qu'un argument. */
.qa__q {
  display: block; margin-bottom: 0.5rem;
  font-size: clamp(0.95rem, 0.88rem + 0.34vw, 1.2rem);
  font-weight: 500; line-height: 1.4; color: var(--fg);
}
.qa__q::before {
  content: ""; display: inline-block;
  width: 22px; height: 2px; background: var(--accent);
  vertical-align: 0.3em; margin-right: 0.6em;
}
/* La réponse est plus grosse que le paragraphe, mais reste sous le corps du
   titre : c'est ce qui l'empêche de devenir un second énoncé display. Le
   rapport recherché est celui d'une réplique — la question, la réponse, puis
   le détail à voix basse.

   Pas de terre claire dessus : l'accent est déjà pris par le « 0 € » à gauche,
   et deux masses colorées dans un bloc aussi court se neutralisent. */
.qa__a {
  display: block; margin-bottom: 0.85rem;
  font-weight: 800;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.15rem);
  letter-spacing: -0.035em; line-height: 1.05; color: var(--fg);
}

/* ---- La levée d'obstacles ----
   Le geste n'est pas celui de la console : là-bas le trait raye une valeur
   FAUSSE pour la remplacer par la bonne. Ici il n'y a rien à corriger — ces
   barrières n'existent pas. Le mot est barré d'un filet fin, puis il s'estompe :
   ce qui reste est un résidu, la trace de ce qui a été retiré. Il dit « on l'a
   enlevé », pas « c'est faux ».

   L'estompe part APRÈS le trait (0,8 s puis 1,15 s) : sans cet ordre, le mot
   s'efface avant d'avoir été rayé et le geste ne se lit plus. */
.no { display: flex; flex-wrap: wrap; gap: 0.55rem clamp(1rem, 2.2vw, 1.8rem); margin-top: 0.2rem; }
.no__i {
  position: relative;
  font-size: clamp(0.88rem, 0.83rem + 0.22vw, 1.0625rem);
  font-weight: 500; line-height: 1.5; color: var(--fg-2);
  animation: noFade 0.5s var(--ease) both;
  animation-delay: calc(1.15s + var(--i, 0) * 0.16s);
}
@keyframes noFade { to { opacity: 0.3; } }
/* La rature s'accroche à un inline-block dont la hauteur est celle des
   glyphes, pas celle de la ligne : sur une boîte étirée, le trait tomberait
   sous le mot et se lirait comme un soulignement. */
.no__i::after {
  content: ""; position: absolute; left: -0.08em; right: -0.08em; top: 53%;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  animation: noStrike 0.34s var(--ease-io) both;
  animation-delay: calc(0.8s + var(--i, 0) * 0.16s);
}
@keyframes noStrike { to { transform: scaleX(1); } }
.no + .xf__t { margin-top: 0.85rem; }

@media (max-width: 620px) {
  .xf__r { flex-direction: column; gap: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .no__i { animation: none; opacity: 0.3; }
  .no__i::after { animation: none; transform: scaleX(1); }
}