/* ══════════════════════════════════════════════════════════════════════
   GATEWAVE — Landing, direction sombre.
   Le fond est un noir bleuté dérivé du navy de marque. L'interface réelle
   du produit, elle, est CLAIRE : on la montre telle quelle dans un cadre
   sombre, ce qui la fait ressortir comme un écran allumé. C'est aussi la
   seule façon honnête de montrer le produit — il est clair en vrai.
   Accent indigo remonté à #7c75ff : #635bff manque de contraste sur noir.
   Thème unique assumé, chaque couleur peinte explicitement.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Le CADRE est NOIR PUR, comme chez trysavi.fr. C'est ce qui fait que
     l'encoche — qui est de la couleur du cadre — disparait sur le fond et
     ne se voit QUE la ou elle mord dans le panneau. Un cadre presque noir
     laissait deviner la forme du bandeau au-dessus du panneau : mauvaise
     integration. */
  --bg-frame: #000000;
  --bg: #101a2e;         /* l'ÉCRAN : nettement plus clair, sinon le panneau ne se lit pas */
  --bg-2: #05070e;
  --gut: 12px;
  --r-screen: 26px;   /* le rayon du panneau hero */
  --surf: #0e1626;
  --surf-2: #131c2f;

  --accent: #7c75ff;
  --accent-2: #635bff;
  --accent-dim: rgba(124, 117, 255, .14);
  --accent-line: rgba(124, 117, 255, .3);

  --ok: #2fd39b;
  --ok-dim: rgba(47, 211, 155, .13);
  --warn: #e0a24a;
  --warn-dim: rgba(224, 162, 74, .13);
  --bad: #ef6b63;
  --bad-dim: rgba(239, 107, 99, .13);

  --ink: #eef0f6;
  --ink-2: rgba(238, 240, 246, .60);
  --ink-3: rgba(238, 240, 246, .36);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);

  /* L'écran produit reste clair : c'est l'interface réelle. */
  --paper: #ffffff;
  --paper-2: #f7f7f9;
  --paper-3: #f0f0f3;
  --p-text: #14141a;
  --p-text-2: #62626e;
  --p-text-3: #9b9ba6;
  --p-line: #e7e7ec;

  --e: cubic-bezier(.32, .72, 0, 1);
  --wrap: 1140px;

  /* Une seule famille de texte : Inter, comme le dashboard. Les titres ne
     changent pas de police, seulement de graisse et de crénage. */
  --f-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: 16.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: #fff; padding: 11px 18px; }
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }

/* Sections : un filet, du vide. Aucune carte décorative. */
.sec { padding-block: 112px; border-top: 1px solid var(--line); }
.sec.tight { padding-block: 78px; }

.kick {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .085em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 24px;
}
.kick::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.h2 { font-size: clamp(27px, 3.4vw, 40px); max-width: 20ch; }
/* Deux tons sur les titres : la partie accentuée porte la promesse. */
.h2 em { font-style: normal; color: var(--accent); }
.lead { margin-top: 20px; font-size: 18.5px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
.head { margin-bottom: 60px; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding-inline: 22px; border: 1px solid transparent; border-radius: 11px;
  font-family: var(--f-body); font-size: 15px; font-weight: 550; letter-spacing: -0.008em;
  cursor: pointer; white-space: nowrap;
  transition: background .3s var(--e), border-color .3s var(--e), transform .16s var(--e), box-shadow .3s var(--e);
}
.btn:active { transform: scale(.98); }
.btn-sm { height: 38px; padding-inline: 15px; font-size: 14px; border-radius: 9px; }
.btn-primary { background: var(--accent-2); color: #fff; box-shadow: 0 8px 28px -10px rgba(99, 91, 255, .85); }
.btn-primary:hover { background: var(--accent); box-shadow: 0 10px 34px -10px rgba(124, 117, 255, .95); }
.btn-line { background: rgba(255, 255, 255, .04); color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { background: rgba(255, 255, 255, .09); }
.btn .arw { transition: transform .3s var(--e); }
.btn:hover .arw { transform: translateX(3px); }

/* ══════════════ NAV ══════════════ */
.nav { position: sticky; top: 0; z-index: 90; display: flex; justify-content: center; padding-inline: 40px; }
.nav-in {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  height: 50px; padding-inline: 7px; background: var(--surf);
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 17px 17px;
  transition: height .4s var(--e);
}
.nav.slim .nav-in { height: 44px; }
.wing { position: absolute; top: 0; width: 14px; height: 14px; }
.wing.l { right: 100%; background: radial-gradient(circle 14px at 0 100%, transparent 13.3px, var(--bg-frame) 13.9px); }
.wing.r { left: 100%;  background: radial-gradient(circle 14px at 100% 100%, transparent 13.3px, var(--bg-frame) 13.9px); }
.brand { display: inline-flex; align-items: center; gap: 8px; padding-inline: 10px; }
.brand-mark { width: 24px; height: 24px; border-radius: 7px; flex: none; background: var(--accent-2); color: #fff; display: grid; place-items: center; }
.brand-mark svg { width: 16px; height: 16px; }
.brand-word { font-family: var(--f-display); font-size: 16px; font-weight: 600; letter-spacing: -0.022em; }
.rule { width: 1px; height: 19px; background: var(--line-2); flex: none; margin-inline: 4px; }
.nav-links { display: flex; gap: 1px; }
.nav-links a { font-size: 13.5px; font-weight: 450; color: var(--ink-2); padding: 7px 11px; border-radius: 8px; transition: color .2s var(--e), background .2s var(--e); }
.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
.burger { display: none; width: 40px; height: 40px; background: rgba(255,255,255,.07); border: 0; border-radius: 10px; cursor: pointer; place-items: center; padding: 0; }
/* Les deux barres occupent LA MEME cellule de grille : superposees au pixel.
   L'ecartement du hamburger et la croix sont alors deux etats d'une seule
   transformation, et rien ne peut deriver. Avec un gap et des translations
   compensatoires, la croix se refermait de travers — elle dessinait un « > ». */
.burger i { grid-area: 1 / 1; display: block; width: 15px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--e); }
.burger i:first-child { transform: translateY(-3.2px); }
.burger i:last-child { transform: translateY(3.2px); }
.burger[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }
.sheet {
  position: fixed; inset: 12px 12px auto; z-index: 120;
  background: var(--bg-2); border-radius: 26px;
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -20px rgba(0,0,0,.9);
  padding: 74px 20px 20px; display: flex; flex-direction: column;
}
.sheet[hidden] { display: none; }
.sheet a { color: var(--ink-2); font-size: 17px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.sheet a:last-of-type { border-bottom: 0; }
.sheet .btn { margin-top: 18px; width: 100%; }

/* Sélecteur de langue FR | EN : un petit segmenté, langue courante allumée.
   Barre desktop seulement ; sous 900 px il vit dans le menu (#sheet). */
.lang { display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 3px; margin-right: 4px;
  border-radius: 9px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line); }
.lang a { font-family: var(--f-body); font-size: 11.5px; font-weight: 550; line-height: 1; letter-spacing: .07em;
  color: var(--ink-3); padding: 6px 8px; border-radius: 6px;
  transition: color .2s var(--e), background .2s var(--e); }
.lang a:hover { color: var(--ink); }
.lang a[aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, .09); }
.sheet .lang { align-self: center; margin: 18px 0 0; }
.sheet .lang a { font-size: 13px; padding: 10px 16px; border-bottom: 0; }

/* ══════════════ HERO ══════════════ */
.hero-glow {
  position: absolute; inset: -20% 0 auto; height: 780px; pointer-events: none;
  background: radial-gradient(ellipse 58% 50% at 50% 26%, rgba(99, 91, 255, .22), transparent 70%);
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 30%, #000 5%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 58% at 50% 30%, #000 5%, transparent 100%);
}
.hero .wrap { position: relative; }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-line);
  padding: 6px 14px; border-radius: 30px; margin-bottom: 30px;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 2.6s var(--e) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.hero h1 { font-size: clamp(36px, 5.2vw, 60px); font-weight: 600; letter-spacing: -0.03em; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { margin-top: 26px; font-size: 19.5px; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.hero .lede b { color: var(--ink); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 34px; }

/* Les trois promesses, en ligne sous le CTA. */
.promises {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  margin-top: 32px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.022); overflow: hidden;
}
.promise {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; font-size: 13.5px; color: var(--ink-2);
  border-left: 1px solid var(--line);
}
.promise:first-child { border-left: 0; }
.promise b { color: var(--ink); font-weight: 600; }
.promise svg { width: 13px; height: 13px; color: var(--ok); flex: none; }

/* ══════════════ ÉCRAN PRODUIT ══════════════
   L'interface réelle est claire. On la pose dans un cadre sombre avec une
   lueur : elle se lit comme un écran allumé, et on ne maquille pas le produit. */
.screen { margin-top: 70px; position: relative; }
.screen::after {
  content: ""; position: absolute; inset: 18% 6% -8%; z-index: -1;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(99, 91, 255, .34), transparent 72%);
  filter: blur(46px);
}
.screen-in {
  background: var(--paper); border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4);
  color: var(--p-text);
}
.screen-bar { display: flex; align-items: center; gap: 12px; height: 38px; padding-inline: 15px; background: var(--paper-2); border-bottom: 1px solid var(--p-line); }
.screen-dots { display: inline-flex; gap: 5px; }
.screen-dots i { width: 8px; height: 8px; border-radius: 50%; background: #dedee6; }
.screen-url { font-family: var(--f-mono); font-size: 11px; color: var(--p-text-3); }
.screen-body { padding: 22px 24px 24px; }
.screen-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.screen-head b { font-size: 14.5px; font-weight: 600; }
.chip { font-size: 11.5px; font-weight: 500; color: var(--p-text-2); background: var(--paper-3); padding: 4px 10px; border-radius: 20px; }
.screen-note { margin-top: 20px; font-size: 11.5px; color: var(--p-text-3); }
.cap { margin-top: 16px; font-size: 13px; color: var(--ink-3); text-align: center; }

/* KPI dans l'écran : colonnes à filets, chiffres tabulaires. */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.kpi { padding: 2px 20px; border-left: 1px solid var(--p-line); }
.kpi:first-child { border-left: 0; padding-left: 0; }
.kpi-l { font-size: 12.5px; color: var(--p-text-2); }
.kpi-v { margin-top: 9px; font-family: var(--f-display); font-size: 24px; font-weight: 600; letter-spacing: -0.028em; font-variant-numeric: tabular-nums; line-height: 1; }
.kpi-f { margin-top: 9px; display: flex; align-items: center; gap: 7px; font-size: 12px; }
.up { color: #159c6f; font-weight: 600; white-space: nowrap; }
.kpi-h { color: var(--p-text-3); white-space: nowrap; }

/* ══════════════ LE HERO EST UN ÉCRAN ══════════════
   Logique trysavi.fr : la page est un cadre, le hero est un panneau posé
   dessus, et l'encoche de navigation est de la couleur DU CADRE — c'est ce
   qui la fait lire comme découpée dans le panneau et non posée sur du vide.
   Les deux ailes en quart de cercle font le raccord. */
body { background: var(--bg-frame); }
/* La gouttière tout autour : c'est elle qui fait exister le cadre. */
.frame { padding: var(--gut); }
.hero {
  position: relative; border-radius: var(--r-screen);
  background: var(--bg);
  padding-top: 118px; padding-bottom: 96px;
}
/* L'encoche est DANS le panneau, collée à son bord haut : le bas du bandeau
   et le haut de l'écran sont la même ligne. Sans ça les ailes ne raccordent
   rien et la barre a l'air posée à côté — c'était mon erreur. */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 130;
  display: flex; justify-content: center; padding-inline: 44px;
}
.nav-in { background: var(--bg-frame); }
/* La couleur des ailes est portee par leur degrade, pas par currentColor. */
/* Le panneau rogne ce qui déborde, SAUF les ailes qui doivent mordre dehors. */
.hero > .wrap { position: relative; }

/* ══════════════ HERO CENTRÉ (suite) ══════════════
   Schéma repris de tagada.io : pastille, titre en deux tons, une phrase,
   deux boutons, la ligne de preuve, puis l'écran produit. Tout centré sur
   une colonne étroite — c'est ce qui rend la page lisible d'un coup d'œil. */
.hero { text-align: center; }
.hero .grid-bg, .hero-glow, .hero-grid { border-radius: var(--r-screen); }
.hero h1 { max-width: 19ch; margin-inline: auto; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { margin-inline: auto; max-width: 54ch; }
.hero-cta { justify-content: center; }
/* Réassurance sous les CTA : lève la peur de l'engagement au moment du clic. */
.cta-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); letter-spacing: .01em; }
.promises { justify-content: center; margin-inline: auto; }
.hero .screen { max-width: 980px; margin-inline: auto; text-align: left; }
/* Le hero est centré, mais l'écran produit garde son alignement à gauche :
   des KPI centrés ne ressemblent plus à une interface. */

/* La ligne de preuve sous les boutons : des faits, pas des adjectifs. */
.proofline {
  display: flex; align-items: center; justify-content: center; gap: 10px 22px;
  flex-wrap: wrap; margin-top: 26px; font-size: 13.5px; color: var(--ink-3);
}
.proofline b { color: var(--ink-2); font-weight: 600; }
.proofline span { display: inline-flex; align-items: center; gap: 7px; }
.proofline span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); margin-right: 15px; }

/* — Pastilles d'audience : dire à qui on parle avant d'expliquer quoi que ce soit. — */
.who { border-bottom: 1px solid var(--line); padding-block: 34px; }
.who-lab { display: block; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; }
.who-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.who-row span { font-size: 14px; color: var(--ink-2); padding: 9px 17px; border-radius: 30px; border: 1px solid var(--line); background: rgba(255,255,255,.025); transition: border-color .3s var(--e), color .3s var(--e); }
.who-row span:hover { border-color: var(--accent-line); color: var(--ink); }

/* ══════════════ SECTEURS ══════════════ */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; }
.lst-t { font-size: 11px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lst li { padding: 15px 0 15px 27px; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; position: relative; }
.lst li:last-child { border-bottom: 0; }
.lst.yes li::before { content: ""; position: absolute; left: 1px; top: 21px; width: 9px; height: 5px; border: solid var(--ok); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.lst.no li { color: var(--ink-2); }
.lst.no li::before { content: ""; position: absolute; left: 0; top: 24px; width: 11px; height: 1.5px; background: var(--ink-3); }

.note {
  margin-top: 40px; padding: 20px 22px; border: 1px solid var(--line);
  border-left: 2px solid var(--accent); border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, .022); font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
.note b { color: var(--ink); font-weight: 600; }

/* ══════════════ BENTO — le produit expliqué en 9 cartes ══════════════
   Motif repris du composant BentoGrid : grille 4 colonnes, apparition en
   cascade au scroll (0,1 s entre les enfants, une seule fois), une carte =
   une idée + une mini-démonstration animée. Ici en vanilla : pas de React
   sur une page statique, mais le même comportement au pixel. */
/* minmax(0,1fr) et pas 1fr : « 1fr » vaut minmax(AUTO,1fr), donc une colonne
   refuse de descendre sous la largeur mini de son contenu et fait déborder
   toute la grille. min-width:0 sur les cartes pour la même raison. */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bcard, .bcard-in { min-width: 0; }
/* Coque extérieure : dégradé + liseré intérieur, jamais de bordure franche. */
.bcard {
  position: relative; display: flex; border-radius: 26px; padding: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.016));
  box-shadow: 0 24px 48px -26px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.055);
  transition: transform .45s var(--e), box-shadow .45s var(--e);
}
/* Reflet sur la moitié haute de la coque : c'est lui qui fait le volume. */
.bcard::before {
  content: ""; position: absolute; inset: 1px auto auto 1px; right: 1px; height: 46%;
  border-radius: 25px 25px 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.055), transparent);
}
.bcard:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -26px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.09); }
.bcard-in {
  position: relative; flex: 1; overflow: hidden; min-height: 236px; border-radius: 21px;
  background: var(--surf); padding: 20px 20px 0; display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.045);
}
.bcard.w2 { grid-column: span 2; }
.b-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-dim); color: var(--accent); display: grid; place-items: center; margin-bottom: 14px; flex: none; }
.b-ico svg { width: 17px; height: 17px; }
.bcard h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; }
.bcard-in > p { margin-top: 7px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.b-demo { margin-top: 18px; flex: 1; display: flex; align-items: flex-end; padding-bottom: 22px; }

/* — Démo RAILS : le paiement bascule d'un rail à l'autre — */
.d-rails { width: 100%; display: grid; gap: 7px; }
.d-rail { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,.035); font-size: 13px; transition: background .4s var(--e); }
.d-rail i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; transition: background .3s var(--e), box-shadow .3s var(--e); }
.d-rail span { color: var(--ink-2); }
.d-rail b { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); transition: color .3s var(--e); }
.d-rail.ok { background: var(--ok-dim); } .d-rail.ok i { background: var(--ok); box-shadow: 0 0 10px var(--ok); } .d-rail.ok b { color: var(--ok); }
.d-rail.ko { background: var(--bad-dim); } .d-rail.ko i { background: var(--bad); } .d-rail.ko b { color: var(--bad); }

/* — Démo CHECKOUT — */
.d-pay { width: 100%; background: var(--paper); border-radius: 11px; padding: 13px; display: grid; gap: 7px; }
.d-pay-h { display: flex; align-items: center; gap: 7px; padding-bottom: 9px; border-bottom: 1px solid var(--p-line); }
.d-pay-h i { width: 17px; height: 17px; border-radius: 5px; background: var(--accent-2); flex: none; }
.d-pay-h span { font-size: 11.5px; font-weight: 600; color: var(--p-text); }
.d-pay-h em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--p-text); font-variant-numeric: tabular-nums; }
.d-pay-f { height: 27px; border-radius: 7px; background: var(--paper-2); border: 1px solid var(--p-line); display: flex; align-items: center; padding-inline: 9px; font-size: 10.5px; color: var(--p-text-3); }
.d-pay-b { height: 31px; border-radius: 7px; background: var(--accent-2); color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; position: relative; overflow: hidden; }
.d-pay-b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%); transform: translateX(-100%); animation: sheen 3.4s var(--e) infinite; }
@keyframes sheen { 0%,62% { transform: translateX(-100%); } 84%,100% { transform: translateX(100%); } }

/* — Démo GLOBE : la planète qui tourne — */
.d-globe { width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.d-globe svg { width: 148px; height: 148px; overflow: visible; }
.g-line { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .32; }
.g-rim { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: .6; }
.g-mer { transform-origin: 50px 50px; }
.g-dot { fill: var(--ok); }
.g-dot circle:last-child { opacity: .45; }

/* — Démo COMPTEUR (versements) — */
.d-money { width: 100%; }
.d-money b { display: block; font-size: 30px; font-weight: 650; letter-spacing: -0.032em; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.d-money em { font-style: normal; font-size: .46em; color: var(--ink-2); }
.d-money > span { display: block; margin-top: 7px; font-size: 12.5px; color: var(--ink-3); }
.d-money div { margin-top: 14px; height: 34px; border-radius: 9px; background: var(--ok); color: #06231a; display: grid; place-items: center; font-size: 12.5px; font-weight: 650; }

/* — Démo LITIGE : ouvert -> défendu -> gagné — */
.d-lit { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 14px; }
.d-lit-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d-lit-h span { font-size: 12.5px; color: var(--ink-2); }
.d-lit-h b { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; background: rgba(255,255,255,.07); color: var(--ink-3); transition: background .4s var(--e), color .4s var(--e); }
.d-lit.s1 b { background: var(--warn-dim); color: var(--warn); }
.d-lit.s2 b { background: var(--accent-dim); color: var(--accent); }
.d-lit.s3 b { background: var(--ok-dim); color: var(--ok); }
.d-lit-bar { margin-top: 13px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.d-lit-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--accent); transition: width .9s var(--e), background .4s var(--e); }
.d-lit.s1 .d-lit-bar i { width: 34%; }
.d-lit.s2 .d-lit-bar i { width: 68%; }
.d-lit.s3 .d-lit-bar i { width: 100%; background: var(--ok); }
.d-lit-f { margin-top: 11px; font-size: 12px; color: var(--ink-3); }

/* — Démo SAV : la conversation se pose — */
.d-chat { width: 100%; display: grid; gap: 8px; }
.d-msg { max-width: 76%; padding: 9px 12px; font-size: 13px; line-height: 1.45; border-radius: 13px; opacity: 0; transform: translateY(6px); }
.d-msg.on { opacity: 1; transform: none; transition: opacity .4s var(--e), transform .4s var(--e); }
.d-msg.them { justify-self: start; background: rgba(255,255,255,.07); border-bottom-left-radius: 4px; }
.d-msg.us { justify-self: end; background: var(--accent-dim); color: #cfccff; border-bottom-right-radius: 4px; }

/* — Démo CATALOGUE : les produits s'activent — */
.d-cat { width: 100%; display: grid; gap: 6px; }
.d-cat-r { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-variant-numeric: tabular-nums; border-radius: 8px; background: rgba(255,255,255,.035); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.d-cat-r i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.1); flex: none; position: relative; transition: background .35s var(--e); }
.d-cat-r i::after { content: ""; position: absolute; left: 4.2px; top: 3.4px; width: 3.4px; height: 5.8px; border: solid #06231a; border-width: 0 1.7px 1.7px 0; transform: rotate(42deg) scale(.4); opacity: 0; transition: opacity .25s var(--e), transform .25s var(--e); }
.d-cat-r.on i { background: var(--ok); }
.d-cat-r.on i::after { opacity: 1; transform: rotate(42deg) scale(1); }
.d-cat-r b { margin-left: auto; padding-left: 6px; flex: none; font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* — Démo ACCEPTATION : les barres montent — */
.d-bars { width: 100%; display: flex; align-items: flex-end; gap: 6px; height: 92px; }
.d-bars i { flex: 1; border-radius: 4px 4px 0 0; background: rgba(255,255,255,.1); height: 0; transition: height .8s var(--e); }
.d-bars i:last-child { background: var(--ok); }
.d-cap { margin-top: 11px; font-size: 12.5px; color: var(--ink-3); }
.d-cap b { color: var(--ok); font-weight: 600; }

/* — Graphique du taux d'acceptation — */
.chartwrap { padding-bottom: 14px; align-items: stretch; }
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .gd { stroke: rgba(255,255,255,.10); stroke-width: 1; stroke-dasharray: 3 5; }
.chart .gd.on { stroke: rgba(255,255,255,.22); }
.chart text { font-family: var(--f-body); font-size: 10px; fill: var(--ink-3); }
.chart text.on { fill: var(--ink); }
.chart-tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -158%);
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 9px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.1);
  opacity: 0; transition: opacity .2s var(--e), left .18s var(--e), top .18s var(--e);
}
.chart-tip.on { opacity: 1; }

/* — Démo CANAUX — */
.d-chans { width: 100%; }
.d-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.d-chip { font-size: 12.5px; padding: 7px 13px; border-radius: 20px; border: 1px solid var(--line); color: var(--ink-2); background: rgba(255,255,255,.03); }
.d-code { margin-top: 12px; padding: 11px 13px; border-radius: 9px; background: #05080f; border: 1px solid var(--line); font-family: var(--f-mono); font-size: 11px; line-height: 1.7; color: #c9d1e8; overflow-x: auto; white-space: pre; }

/* Cascade d'apparition du bento (staggerChildren 0,1 s, une seule fois). */
.js-on .bento > * { opacity: 0; transform: translateY(18px); }
.bento > .on { opacity: 1; transform: none; transition: opacity .6s var(--e), transform .6s var(--e); }
@media (prefers-reduced-motion: reduce) {
  .js-on .bento > *, .d-msg { opacity: 1 !important; transform: none !important; }
  .d-pay-b::after { animation: none; }
}
@media (max-width: 1040px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bento { grid-template-columns: minmax(0, 1fr); } .bcard.w2 { grid-column: span 1; } }




/* ══════════════ LA PAGE DE PAIEMENT ══════════════
   C'est la première chose qu'un marchand vient voir chez un processeur.
   Elle est CLAIRE en vrai : on la montre telle quelle, dans un cadre sombre. */




/* ══════════════ TARIF ══════════════
   Le pourcentage seul ne dit rien à personne. On montre le calcul : vous
   encaissez X, on prend 15 %, vous recevez Y — et le curseur le rejoue. */
.tarif { display: grid; grid-template-columns: 55fr 45fr; gap: 46px; align-items: start; }
.calc { border: 1px solid var(--line); border-radius: 18px; background: var(--surf); padding: 30px 32px; }
.calc-l { font-size: 13.5px; color: var(--ink-2); }
.calc-v { margin-top: 10px; font-size: clamp(38px, 4.6vw, 52px); font-weight: 650; letter-spacing: -0.034em; line-height: 1; font-variant-numeric: tabular-nums; }
.calc-range { margin-top: 22px; }
.calc-range input { width: 100%; }
.calc-ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ink-3); }

input[type="range"] { -webkit-appearance: none; appearance: none; height: 5px; border-radius: 5px; background: rgba(255,255,255,.12); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 3px solid var(--surf); box-shadow: 0 0 0 1px var(--accent-line), 0 4px 14px -4px var(--accent); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 3px solid var(--surf); }

.calc-rows { margin-top: 30px; }
.calc-row { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); font-size: 15px; }
.calc-row span { color: var(--ink-2); }
.calc-row b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-row.fee b { color: var(--bad); }
.calc-row.net { border-top-width: 1px; padding-top: 20px; }
.calc-row.net span { color: var(--ink); font-weight: 600; font-size: 16.5px; }
.calc-row.net b { font-size: 28px; font-weight: 650; letter-spacing: -0.03em; color: var(--ok); }
.calc-f { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }


@media (max-width: 1040px) { .tarif { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 640px) { .calc { padding: 24px 22px; } }


.gabarit {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 34px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--warn); background: var(--warn-dim); border: 1px dashed rgba(224,162,74,.45); padding: 8px 14px; border-radius: 9px;
}
.thread { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.02); }
.th-h { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.th-av { width: 31px; height: 31px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; flex: none; }
.th-h b { font-size: 13.5px; font-weight: 600; }
.th-h span span { font-size: 11.5px; color: var(--ink-3); display: block; margin-top: 1px; }
.th-body { padding: 18px 16px; display: grid; gap: 10px; }
.msg { max-width: 84%; padding: 10px 14px; font-size: 14.5px; line-height: 1.5; border-radius: 15px; }
.msg.them { justify-self: start; background: rgba(255,255,255,.06); border-bottom-left-radius: 5px; }
.msg.us { justify-self: end; background: var(--ok-dim); color: #b8f0da; border-bottom-right-radius: 5px; }
.msg time { display: block; margin-top: 4px; font-size: 10.5px; color: var(--ink-3); text-align: right; }
.th-body > * { opacity: 0; transform: translateY(7px); }
.th-body > .on { opacity: 1; transform: none; transition: opacity .42s var(--e), transform .42s var(--e); }
.th-f { padding: 13px 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); }

/* ══════════════ FAQ ══════════════ */
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; gap: 16px; padding: 24px 0; cursor: pointer; list-style: none; min-height: 44px; font-size: 18px; font-weight: 550; letter-spacing: -0.02em; transition: color .25s var(--e); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; margin-left: auto; flex: none; width: 10px; height: 10px; border: solid var(--ink-3); border-width: 0 1.7px 1.7px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .34s var(--e), border-color .25s var(--e); }
.qa[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--accent); }
.qa summary:hover { color: var(--accent); }
.qa-b { overflow: hidden; }
.qa-b p { padding-bottom: 26px; max-width: 70ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* ══════════════ CLÔTURE ══════════════ */
.final { text-align: center; position: relative; overflow: hidden; }
.final-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(99, 91, 255, .2), transparent 70%); }
.final .wrap { position: relative; }
.final h2 { font-size: clamp(29px, 3.9vw, 46px); max-width: 19ch; margin-inline: auto; }
.final p { margin-top: 22px; font-size: 18px; color: var(--ink-2); max-width: 52ch; margin-inline: auto; }
.final-cta { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: 36px; }
.final-note { display: block; margin-top: 26px; font-size: 13px; color: var(--ink-3); }

/* ══════════════ FOOTER ══════════════ */
.foot { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: 60px 26px; }
.foot-g { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 46px; }
.foot .brand { padding-inline: 0; }
.foot-g > div > p { margin-top: 15px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 30ch; }
.fcol { display: flex; flex-direction: column; gap: 12px; }
.fcol b { font-size: 11px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-3); }
.fcol a { font-size: 14.5px; color: var(--ink-2); transition: color .25s var(--e); }
.fcol a:hover { color: var(--ink); }
.fcol p { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); max-width: 26ch; }
.foot-b { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }

/* ══════════════ REVEAL ══════════════ */
.js-on [data-rv] { opacity: 0; transform: translateY(20px); }
.js-on [data-rv].on { opacity: 1; transform: none; transition: opacity .7s var(--e), transform .7s var(--e); transition-delay: var(--d, 0ms); }
.js-on .code .row, .js-on .th-body > * { opacity: 0; }
.js-on .hero .lift { opacity: 0; transform: translateY(12px); }
.hero.lit .lift { opacity: 1; transform: none; transition: opacity .6s var(--e), transform .6s var(--e); transition-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .js-on [data-rv], .js-on [data-rv].on, .js-on .hero .lift { opacity: 1 !important; transform: none !important; transition: none !important; }
  .code .row, .th-body > * { opacity: 1 !important; transform: none !important; }
  .pill::before { animation: none; }
}

/* ══════════════════════════ RESPONSIVE ══════════════════════════ */
@media (max-width: 1040px) {
  .tarif, .proof { grid-template-columns: 1fr; gap: 46px; }
}
/* Entre 901 et 1100 px, la barre complète (liens + FR|EN + CTA) doit tenir :
   on resserre les marges plutôt que de retirer un élément. */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav { padding-inline: 24px; }
  .nav-links a { padding-inline: 8px; font-size: 13px; }
  .nav .rule { margin-inline: 2px; }
  .nav .lang a { padding-inline: 6px; }
}
@media (max-width: 900px) {
  .nav-links, .nav .btn, .nav .rule, .nav .lang { display: none; }
  .burger { display: grid; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.08); }
  .burger i { width: 13px; }
  .nav { padding-inline: 20px; }
  .nav-in { height: 44px; padding-inline: 5px 5px; border-radius: 0 0 15px 15px; gap: 2px; }
  .nav.slim .nav-in { height: 40px; }
  .nav .wing { width: 12px; height: 12px; }
  .nav .wing.l { background: radial-gradient(circle 12px at 0 100%, transparent 11.3px, var(--bg-frame) 11.9px); }
  .nav .wing.r { background: radial-gradient(circle 12px at 100% 100%, transparent 11.3px, var(--bg-frame) 11.9px); }
  .brand { gap: 7px; padding-inline: 7px; }
  .brand-mark { width: 21px; height: 21px; border-radius: 6px; }
  .brand-mark svg { width: 14px; height: 14px; }
  .brand-word { font-size: 15px; }
  .sec { padding-block: 80px; }
  .sec.tight { padding-block: 62px; }
  .head { margin-bottom: 44px; }
  .two { grid-template-columns: 1fr; gap: 42px; }
  .foot-g { grid-template-columns: 1fr 1fr; }
  .ti-l { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero { padding-top: 52px; padding-bottom: 64px; }
  .hero .lede { font-size: 18px; }
  .lead { font-size: 17.5px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 26px 0; }
  .kpi { border-left: 0; padding-inline: 0; }
  .kpi:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--p-line); }
  .screen { margin-top: 44px; }
  .screen-body { padding: 18px; }
  .msg { max-width: 92%; }
  .qa summary { font-size: 16.5px; }
}
@media (max-width: 420px) {
  .kpis { grid-template-columns: 1fr; }
  .kpi:nth-child(even) { padding-left: 0; border-left: 0; }
  .foot-g { grid-template-columns: 1fr; }
  .d-code { font-size: 10.5px; }
  .promises { grid-template-columns: 1fr; }
  .promise { border-left: 0; border-top: 1px solid var(--line); padding: 11px 15px; }
  .promise:first-child { border-top: 0; }
}
/* ══════════════════════════════════════════════════════════════════════
   AMBIANCE — sous le hero
   Le noir plat donnait une page « pas finie ». On pose des halos tres
   larges (donc flous par nature : un radial-gradient etale EST un flou,
   sans le cout GPU d'un filter: blur sur toute la page) et une trame fine
   masquee. Rien de tout ceci n'est au-dessus du hero : le cadre doit
   rester noir pur, sinon l'encoche de la navbar cesse de fonctionner.
   ══════════════════════════════════════════════════════════════════════ */
/* overflow: clip et pas hidden — clip ne cree pas de conteneur de
   defilement, donc rien ne change au scroll de la page. Sans lui, le
   halo du bento (inset lateral negatif) elargit le document : +10 %
   de barre horizontale a toutes les largeurs. */
.below { position: relative; isolation: isolate; overflow: clip; }
.amb {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1200px 780px at 6% 1%,    rgba(124,117,255,.30), transparent 58%),
    radial-gradient(1000px 680px at 94% 12%,  rgba(47,211,155,.13),  transparent 60%),
    radial-gradient(1300px 900px at 50% 38%,  rgba(99,91,255,.22),   transparent 60%),
    radial-gradient(1000px 700px at 2% 60%,   rgba(124,117,255,.20), transparent 60%),
    radial-gradient(1100px 760px at 98% 82%,  rgba(99,91,255,.17),   transparent 60%),
    linear-gradient(180deg, #0a0f1e, #05080f 55%, #03050c);
}
/* Vignette : les halos montent, mais les bords doivent rester noirs, sinon
   la page perd le contraste qui fait tenir les cartes. */
.amb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 80% at 50% 45%, transparent 38%, rgba(0,0,0,.72) 100%);
}
/* Trame : elle ne se voit pas, elle se sent. Sans elle les halos flottent. */
.amb::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
}
/* Les filets de section sur fond noir faisaient des barres franches.
   En degrade, ils s'eteignent sur les bords. */
.below .sec { border-top: 0; }
.below .sec::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 18%, rgba(255,255,255,.12) 82%, transparent);
}
.below .sec { position: relative; }

/* ══════════════ LE BENTO EST MIS EN LUMIERE ══════════════
   C'est la section que l'on regarde le plus longtemps : elle a droit a son
   propre halo, et les cartes deviennent translucides pour qu'il passe au
   travers. Une carte opaque sur un fond travaille annule le fond. */
#produit::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 8% -10% 2%;
  background:
    radial-gradient(900px 620px at 20% 26%, rgba(124,117,255,.38), transparent 60%),
    radial-gradient(860px 580px at 82% 70%, rgba(99,91,255,.30), transparent 60%),
    radial-gradient(700px 480px at 52% 100%, rgba(47,211,155,.10), transparent 62%);
}
.bcard-in {
  background: linear-gradient(180deg, rgba(23,32,53,.80), rgba(11,17,30,.88));
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}
@supports not (backdrop-filter: blur(1px)) {
  .bcard-in { background: linear-gradient(180deg, #172035, #0b111e); }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE — reprise
   Trois defauts constates sur telephone : les promesses restaient sur
   trois colonnes jusqu'a 420px et se cassaient mot a mot ; le contenu du
   hero passait sous la navbar faute de degagement ; les boutons avaient
   des largeurs differentes. Corriges ici, apres les autres regles pour
   passer devant elles.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* La navbar mesure 44px : il faut la degager, pas la frôler. */
  .hero { padding-top: 96px; padding-bottom: 60px; }
  .pill { margin-bottom: 22px; font-size: 10.5px; letter-spacing: .06em; padding: 6px 12px; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 40px); max-width: 100%; }
  .hero .lede { font-size: 16.5px; margin-top: 20px; max-width: 34ch; }

  /* Une promesse par ligne : sur trois colonnes le texte se casse mot a mot. */
  .promises {
    grid-template-columns: 1fr; width: 100%; max-width: 360px;
    margin-top: 26px; border-radius: 13px;
  }
  .promise {
    border-left: 0; border-top: 1px solid var(--line);
    padding: 12px 16px; justify-content: flex-start; text-align: left; font-size: 13.5px;
  }
  .promise:first-child { border-top: 0; }

  /* Deux boutons de largeurs differentes, l'un sous l'autre : ca se voit. */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 9px; margin-top: 28px; }
  .hero-cta .btn { width: 100%; }

  /* La ligne de preuve se cassait en quatre lignes avec une puce orpheline
     en tete de chacune. En grille 2x2 sans separateur, elle se relit. */
  .proofline { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; text-align: left; }
  .proofline span { display: block; font-size: 13px; line-height: 1.35; }
  .proofline span + span::before { content: none; }

  .amb::before { background-size: 44px 44px; }
  .bcard-in { min-height: 0; }
}
@media (max-width: 560px) {
  /* La barre ne doit jamais toucher les bords du panneau. */
  .nav { padding-inline: 16px; }
  .nav-in { max-width: 100%; }
  .brand-word { font-size: 14.5px; }
  .hero { padding-top: 88px; }
}
/* ══════════════ FILM DU HERO ══════════════
   Présentation reprise au pixel de trendtrack.io (mesurée le 2026-10-05) :
   cadre vitré 10 px / rayon 36 px, écran intérieur rayon 26 px, pastille
   « Activer le son » vitrée en haut à droite. Lecture muette en boucle. */
.film { max-width: 980px; margin: 70px auto 0; position: relative; text-align: left;
  padding: 10px; border-radius: 36px; background: rgba(255, 255, 255, .02);
  outline: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 0 70px rgba(255, 255, 255, .02), inset 0 0 12px rgba(255, 255, 255, .04);
}
.film-in { position: relative; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .04); background: #000; }
.film-v { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-sound { position: absolute; top: 0; right: 0; padding: 16px; border: 0; background: none;
  color: #fff; cursor: pointer; font: 400 16px/1 var(--f-body); }
.film-sound-tag { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: rgba(15, 15, 16, .24); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  outline: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 0 70px rgba(255, 255, 255, .02), inset 0 0 12px rgba(255, 255, 255, .04);
  font-size: 14px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  transition: background .2s var(--e); }
.film-sound:hover .film-sound-tag { background: rgba(15, 15, 16, .42); }
.film-sound:focus-visible { outline: none; }
.film-sound:focus-visible .film-sound-tag { outline: 2px solid var(--accent); }
.film-sound svg { width: 18px; height: 18px; flex: none; }
.film-sound[aria-pressed="true"] .film-sound-tag { background: rgba(99, 91, 255, .45); }
@media (max-width: 560px) {
  /* Gouttière de 21 px au bord de l'écran, comme trendtrack.io sur mobile. */
  .film { margin-top: 44px; margin-inline: calc(21px - var(--film-gutter, 36px)); }
}

/* ══════════════ HERO « TOUT EN UN ÉCRAN » (desktop) ══════════════
   Plus de 2e bouton ni de promesses : le film montre tout. On resserre le haut
   et on dimensionne le film sur la hauteur de la fenêtre pour qu'il tienne
   ENTIER à l'arrivée (sans défiler), plafonné à 980 px, plancher 560 px.
   --film-y = distance du haut de page au haut du film + marge basse. */
@media (min-width: 901px) {
  .hero { padding-top: 96px; padding-bottom: 56px; }
  .pill { margin-bottom: 20px; }
  .hero .lede { margin-top: 18px; }
  .hero-cta { margin-top: 24px; }
  .film { --film-y: 562px; margin-top: 30px;
    width: min(980px, max(480px, calc((100svh - var(--film-y)) * 16 / 9 + 20px))); }
  .hero .lede { max-width: 64ch; }
}
/* Écrans de portable peu hauts : titre et sous-titre plus compacts pour
   laisser la hauteur au film. */
@media (min-width: 901px) and (max-height: 860px) {
  .hero { padding-top: 84px; }
  .pill { margin-bottom: 14px; }
  .hero h1 { font-size: clamp(36px, 4.2vw, 50px); }
  .hero .lede { font-size: 17px; margin-top: 14px; }
  .hero-cta { margin-top: 18px; }
  .cta-note { margin-top: 10px; }
  .film { --film-y: 456px; margin-top: 22px; }
}

/* ══════════════════════════════════════════════════════════════════════
   BATCH 6 (2026-10-06)
   ══════════════════════════════════════════════════════════════════════ */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-pill { border-radius: 999px; }
.head-c { text-align: center; }
.head-c .h2 { margin-inline: auto; }

/* ══════════════ DEVISES — défilement continu ══════════════
   Deux copies de la liste dans une piste qui glisse de -50 % : boucle sans
   couture. Fondu sur les bords par masque, pause au survol. Mouvement réduit :
   une seule liste, statique, centrée. */
.cur-band { padding: 46px 0 8px; }
.cur-wrap { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.cur-track { display: flex; width: max-content; animation: curRoll 52s linear infinite; }
.cur-wrap:hover .cur-track { animation-play-state: paused; }
@keyframes curRoll { to { transform: translateX(-50%); } }
.cur-row { display: flex; flex: none; gap: 12px; padding: 0 12px 0 0; margin: 0; list-style: none; }
.cur { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.cur-flag { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.cur-flag svg { width: 100%; height: 100%; }
.cur b { font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.cur i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--ink-3); }
@media (max-width: 720px) { .cur-band { padding-top: 34px; } .cur { padding: 5px 13px 5px 5px; gap: 8px; } .cur-flag { width: 22px; height: 22px; } .cur b { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .cur-track { animation: none; width: auto; justify-content: center; }
  .cur-row[aria-hidden] { display: none; }
  .cur-row { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; padding: 0; }
  .cur-wrap { -webkit-mask-image: none; mask-image: none; }
}

/* ══════════════ CHIFFRES — grille de trysavi.fr ══════════════
   Relevé sur la grille « Connecté aux outils… » (2026-10-06) : cellules de la
   couleur du fond, séparées par un filet de 1 px (gap 1 px sur fond blanc 12 %,
   bordure blanche 12 %), contenu centré (gap 8 px, padding 24/16), « + » de
   24 px aux croisements intérieurs, survol blanc 6 % en 500 ms. Ici les
   cellules sont carrées, comme demandé. */
.facts-sec .wrap { display: flex; justify-content: center; }
.facts { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 800px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); }
.fact { position: relative; min-width: 0; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 24px 16px; text-align: center; background: #070b15; transition: background-color .5s var(--e); }
.fact:hover { background: rgba(255, 255, 255, .06); }
.fact b { display: block; font-family: var(--f-display); font-size: clamp(32px, 3.5vw, 44px); font-weight: 650;
  letter-spacing: -0.032em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.fact b i { font-style: normal; color: var(--accent); }
.fact > span:not(.fact-mark) { font-size: 12.5px; line-height: 1.35; color: rgba(238, 240, 246, .5); }
.fact-mark { display: none; position: absolute; left: -12px; top: -12px; z-index: 1; width: 24px; height: 24px; border-radius: 50%;
  align-items: center; justify-content: center; background: #070b15; color: rgba(255, 255, 255, .45); }
.fact-mark svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
  .fact:nth-child(4) .fact-mark { display: flex; }
  .fact b { font-size: clamp(30px, 9vw, 40px); }
}

/* ══════════════ PAGE DE PAIEMENT — reproduction du checkout réel ══════════════
   Relevé sur une vraie page marchand le 2026-10-06 (1440 et 390 px). */
.cko { max-width: 760px; margin: 0 auto; }
.cko-screen { position: relative; min-width: 0; }
.cko-screen::after {
  content: ""; position: absolute; inset: 14% 8% -6%; z-index: -1;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(99,91,255,.30), transparent 72%);
  filter: blur(44px);
}

/* Maquette reprise du checkout réel (relevé 2026-10-06) : fond #f8f8f8,
   Inter, texte #1a1a1e ; deux cartes blanches ; panneau « Carte de crédit »
   (logos d'acceptation, Apple Pay + Google Pay, saisie carte simplifiée,
   bouton gris tant que la carte n'est pas complète). */
.pk { --pk-ink: #1a1a1e; --pk-mut: #6b7280; --pk-line: #e5e7eb; --pk-field: #e1e4e9;
  font-family: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px; line-height: normal; letter-spacing: normal; text-align: left; color: var(--pk-ink);
  background: #f8f8f8; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .85); }
.pk p { margin: 0; }
.pk-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding-inline: 14px; background: #ececf0; border-bottom: 1px solid #e0e0e6; }
.pk-bar > i { width: 8px; height: 8px; border-radius: 50%; background: #d4d4dc; }
.pk-url { margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11.5px; color: #8a8f9c; white-space: nowrap; }
.pk-url svg { width: 11px; height: 11px; flex: none; }
.pk-page { padding: 22px 20px 26px; background: #f8f8f8; }
.pk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.pk-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pk-tile { width: 38px; height: 38px; border-radius: 10px; flex: none; background: #0e0e0e; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.pk-brand b { font-size: 15px; font-weight: 700; white-space: nowrap; }
.pk-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--pk-mut); white-space: nowrap; }
.pk-secure svg { width: 13px; height: 13px; flex: none; }
.pk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pk-card { min-width: 0; background: #fff; border: 1px solid #ececef; border-radius: 16px; padding: 22px; box-shadow: 0 10px 30px rgba(17, 24, 39, .06); }
.pk-lab { font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #5b6271; margin-bottom: 4px !important; }
.pk-lab-o { margin-bottom: 12px !important; }
.pk-sub { font-size: 13px; line-height: 1.3; color: var(--pk-mut); }
.pk-item { display: flex; align-items: center; gap: 14px; }
.pk-th { width: 76px; height: 76px; border-radius: 10px; flex: none; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 20%, #3a3a3a, #101010); }
.pk-th svg { width: 22px; height: 22px; }
.pk-it { flex: 1; min-width: 0; }
.pk-it b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.pk-it span { display: block; margin-top: 2px; font-size: 13px; color: var(--pk-mut); }
.pk-item em { font-style: normal; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pk-sum { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pk-line); }
.pk-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 27px; font-size: 14px; color: var(--pk-mut); }
.pk-r > span:first-child { min-width: 0; white-space: nowrap; }
.pk-r > span:last-child { white-space: nowrap; }
.pk-free { color: #16803c; }
.pk-r.pk-tot { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--pk-line); font-size: 19px; font-weight: 700; color: var(--pk-ink); }
.pk-trust { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #f0f6fb; border: 1px solid #d9e6f2; }
.pk-trust-h { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.pk-trust-h svg { width: 16px; height: 16px; flex: none; color: #3b7fb6; }
.pk-trust-h b { font-weight: 600; }
.pk-trust-s { margin-top: 6px !important; font-size: 13px; color: var(--pk-mut); }
.pk-h { margin-top: 18px !important; font-size: 15.5px; font-weight: 700; }
.pk-h i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--pk-mut); }
.pk-sub-3ds { margin-top: 4px !important; line-height: 1.45; }
.pk-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.pk-in { grid-column: span 3; height: 48px; display: flex; align-items: center; padding: 0 15px; border: 1px solid var(--pk-field); border-radius: 12px;
  background: #fff; font-size: 15px; color: #6e7380; white-space: nowrap; overflow: hidden; }
.pk-in.w { grid-column: 1 / -1; }
.pk-zip { grid-column: span 2; }
.pk-city { grid-column: span 4; }
.pk-div { height: 1px; margin-top: 18px; background: var(--pk-line); }
/* Panneau « Carte de crédit » */
.pk-cc { margin-top: 18px; border: 1px solid var(--pk-field); border-radius: 12px; overflow: hidden; }
.pk-cc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 14px; background: #f8fafc; border-bottom: 1px solid var(--pk-field); }
.pk-cc-h b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.pk-brands { display: flex; gap: 5px; }
.pk-brands svg { width: 34px; height: 22px; display: block; }
.pk-cc-b { padding: 16px 14px 12px; }
.pk-wallets { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pk-wal { height: 44px; padding: 0 10px; border-radius: 4px; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; gap: 1px; min-width: 0;
  font-size: 19px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.pk-wal-t { margin-right: 6px; font-size: 16px; font-weight: 400; letter-spacing: 0; }
.pk-apple-logo { width: 16px; height: 19px; margin-top: -3px; flex: none; }
.pk-wal-g { gap: 4px; font-family: "Google Sans", "Product Sans", Roboto, -apple-system, Arial, sans-serif; }
.pk-wal-g .pk-wal-t { margin-right: 4px; font-family: "Inter Variable", Inter, -apple-system, Arial, sans-serif; }
.pk-g-logo { width: 18px; height: 18px; flex: none; }
.pk-or { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 12.5px; color: #8a8f9c; white-space: nowrap; }
.pk-or::before, .pk-or::after { content: ""; flex: 1; height: 1px; background: var(--pk-line); }
.pk-fields-card { margin-top: 14px; }
.pk-in-c { height: 44px; padding: 0 13px; font-size: 14px; border-radius: 10px; }
.pk-btn { margin-top: 16px; min-height: 52px; padding: 6px 14px; border-radius: 10px; background: #0e0e0e; color: #fff; display: grid; place-items: center; text-align: center;
  font-size: 16px; font-weight: 700; line-height: 1.15; }
.pk-small { margin-top: 10px !important; text-align: center; font-size: 11px; line-height: 1.3; color: #8a93a6; }
.pk-cgv { margin-top: 14px; display: flex; align-items: flex-start; gap: 13px; padding: 16px; border: 1px solid #e3e8ef; border-radius: 12px;
  background: #f5f8fb; font-size: 13px; line-height: 1.5; }
.pk-cgv i { width: 16px; height: 16px; flex: none; margin: 2px 0 0 3px; border: 1px solid #767676; border-radius: 3px; background: #fff; }
.pk-foot { margin-top: 16px !important; display: flex; justify-content: center; gap: 16px; font-size: 12px; color: var(--pk-mut); }
.pk-foot span { display: inline-flex; align-items: center; gap: 4px; }
.pk-foot svg { width: 12px; height: 12px; }
@media (max-width: 640px) {
  .pk-page { padding: 16px 12px 22px; }
  .pk-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pk-card { padding: 20px 18px; }
  .pk-fields-id .pk-in { grid-column: 1 / -1; }
  .pk-url { font-size: 10.5px; }
  .pk-secure { font-size: 12px; }
  .pk-r { font-size: 12.5px; gap: 8px; }
  .pk-r.pk-tot { font-size: 18px; }
}

/* ══════════════ INTÉGRATIONS — « Integration card » ══════════════
   Port vanilla du composant React fourni : zone visuelle 564/410 sur fond
   « muted » à trame de points 32 px (20 %) et fondu haut/bas ; logo au centre
   dans une tuile à double bordure, anneau qui pulse (1 → 1,15, .3 → 0, 3 s) ;
   six tuiles reliées par des tracés coudés (viewBox 564×410) avec un trait
   lumineux qui boucle (dasharray 40 160, offset 200 → -200, 4 s). Tuiles :
   32 px (mobile) → 54 px (desktop), via les unités de conteneur. */
.icard { max-width: 620px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  background: var(--surf); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .9); }
.icard-vis { --t: clamp(32px, 9.6cqi, 54px); position: relative; aspect-ratio: 564 / 410; overflow: hidden;
  container-type: inline-size; background: #121a2c; border-bottom: 1px solid var(--line); }
.icard-dots { position: absolute; inset: 0; opacity: .2;
  background-image: radial-gradient(circle, #eef0f6 1px, transparent 1.4px); background-size: 32px 32px; background-position: 16px 16px; }
.icard-vis::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #121a2c 0%, rgba(18, 26, 44, 0) 26%, rgba(18, 26, 44, 0) 74%, #121a2c 100%); }
.icard-paths { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.ic-base { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1.2; }
.ic-glow { fill: none; stroke: url(#icGrad); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 40 160; stroke-dashoffset: 200; animation: icFlow 4s linear infinite; animation-delay: calc(var(--i) * -0.67s); }
@keyframes icFlow { from { stroke-dashoffset: 200; } to { stroke-dashoffset: -200; } }
.icard-tiles { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; }
.it { position: absolute; left: calc(var(--x) / 564 * 100%); top: calc(var(--y) / 410 * 100%);
  width: var(--t); height: var(--t); transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 12px; color: var(--ink);
  background: var(--surf-2); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 18px -10px rgba(0, 0, 0, .7); }
.it svg { width: 46%; height: 46%; }
.it svg.it-woo { width: 74%; height: auto; }
.ic-core { position: absolute; left: 50%; top: 50%; z-index: 3; width: calc(var(--t) * 1.5); height: calc(var(--t) * 1.5);
  transform: translate(-50%, -50%); padding: 5px; border-radius: 16px;
  background: var(--surf); border: 1px solid rgba(255, 255, 255, .12); }
.ic-ring { position: absolute; inset: -1px; border-radius: 16px; border: 2px solid var(--accent); background: rgba(124, 117, 255, .25);
  animation: icPulse 3s ease-out infinite; pointer-events: none; }
@keyframes icPulse { from { transform: scale(1); opacity: .3; } to { transform: scale(1.15); opacity: 0; } }
.ic-core-in { position: relative; width: 100%; height: 100%; display: grid; place-items: center; border-radius: 11px;
  background: var(--surf-2); border: 1px solid rgba(255, 255, 255, .1); }
.ic-logo { width: 64%; height: 64%; display: grid; place-items: center; border-radius: 24%; background: #635bff;
  box-shadow: 0 6px 18px -6px rgba(99, 91, 255, .9); }
.ic-logo svg { width: 72%; height: 72%; }
/* Apparition : fondu + échelle .8 → 1, délais .1 … .7 s (classe .in posée par app.js). */
.js-on [data-icard] .it, .js-on [data-icard] .ic-core { opacity: 0; scale: .8; }
.js-on [data-icard].in .it, .js-on [data-icard].in .ic-core { opacity: 1; scale: 1;
  transition: opacity .5s var(--e) var(--d, 0ms), scale .5s var(--e) var(--d, 0ms); }
.icard-body { padding: 26px 28px 30px; text-align: center; }
.icard-body h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.icard-body p { margin: 8px auto 0; max-width: 42ch; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.icard-body .btn { margin-top: 22px; height: 44px; }
.ilegal { margin-top: 22px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
@media (max-width: 640px) { .icard-body { padding: 22px 20px 26px; } .icard-body h3 { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) {
  .ic-glow { animation: none; stroke-dashoffset: 0; stroke-dasharray: none; opacity: .55; }
  .ic-ring { animation: none; opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   PLAN 10 (2026-10-06) — 10 sections, une idée et un visuel par section.
   ══════════════════════════════════════════════════════════════════════ */

/* — Rythme : 3 panneaux plus clairs (Comparer, Produit, Tarif), façon trysavi.
     Ils reprennent le rayon et la gouttière du hero : la page alterne les tons. — */
.below .sec.tone {
  margin-inline: var(--gut); border-radius: var(--r-screen);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(124,117,255,.17), transparent 62%),
    radial-gradient(760px 480px at 100% 100%, rgba(47,211,155,.07), transparent 60%),
    #0f1830;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.below .sec.tone::before, .below .sec.tone + .sec::before { content: none; }
.sec-cta { display: flex; justify-content: center; margin-top: 40px; }
.sec-cta .btn { height: 46px; }

/* — Chiffres + devises : un seul bloc — */
.sec.tight.facts-sec { padding-block: 52px 60px; }
.facts-sec .wrap { flex-direction: column; align-items: center; gap: 30px; }
.facts { max-width: 720px; }
.facts-sec .cur-wrap { width: 100%; max-width: 1000px; }

/* — Avant / après — */
.vs { width: 100%; max-width: 880px; margin: 0 auto; table-layout: fixed; border-collapse: separate; border-spacing: 0;
  border-radius: 20px; overflow: hidden; background: rgba(5, 8, 15, .42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.vs th { padding: 16px 28px; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: rgba(255,255,255,.03); }
.vs td { padding: 20px 28px; border-top: 1px solid var(--line); font-size: clamp(17px, 1.55vw, 20px); font-weight: 550; letter-spacing: -0.015em; line-height: 1.35; }
.vs .vs-a { color: var(--ink-3); }
.vs td.vs-a { font-weight: 450; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(255,255,255,.24); }
.vs .vs-b { position: relative; padding-left: 64px; color: var(--ink); background: rgba(47,211,155,.045); box-shadow: inset 1px 0 0 rgba(47,211,155,.18); }
.vs th.vs-b { color: var(--ok); background: rgba(47,211,155,.08); }
.vs td.vs-b::before { content: ""; position: absolute; left: 28px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--ok-dim); box-shadow: inset 0 0 0 1px rgba(47,211,155,.45); }
.vs td.vs-b::after { content: ""; position: absolute; left: 35px; top: 50%; width: 8px; height: 4.5px; margin-top: -4px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
@media (max-width: 640px) {
  .vs { border-radius: 16px; }
  .vs th { padding: 12px 14px; font-size: 10.5px; letter-spacing: .07em; }
  .vs td { padding: 15px 14px; font-size: 15px; }
  .vs .vs-b { padding-left: 42px; }
  .vs td.vs-b::before { left: 13px; width: 20px; height: 20px; margin-top: -10px; }
  .vs td.vs-b::after { left: 19.5px; }
}

/* — Preuves : version d'origine (restaurée le 2026-10-06) — */
.proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.proof-c {
  margin: 0; border-radius: 18px; overflow: hidden; background: var(--surf);
  box-shadow: 0 24px 48px -26px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.07);
}
.proof-c img { display: block; width: 100%; height: auto; }
.proof-c figcaption { padding: 13px 15px; font-size: 13.5px; color: var(--ink-2); }
.proof-c figcaption b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.proof-n { margin-top: 26px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 860px) { .proofs { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* — Page de paiement : la maquette seule (pastilles retirées le 2026-10-06) — */

/* — Produit : bento d'origine (règles plus haut, section BENTO) — */
.mk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.mk span { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.035); font-size: 12.5px; color: var(--ink-2); }
.mk span i { font-style: normal; font-size: 14px; line-height: 1; }
.mk-cur { margin-top: 10px; font-size: 12px; color: var(--ink-3); }

/* — Secteurs : bande défilante, 2 rangées en sens opposés — */
#secteurs .head { margin-bottom: 40px; }
.sx-band { display: grid; gap: 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sx-track { display: flex; width: max-content; animation: sxRoll 72s linear infinite; }
.sx-rev { animation-direction: reverse; animation-duration: 64s; }
.sx-band:hover .sx-track { animation-play-state: paused; }
@keyframes sxRoll { to { transform: translateX(-50%); } }
.sx-row { display: flex; flex: none; gap: 12px; margin: 0; padding: 0 12px 0 0; list-style: none; }
.sx { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border-radius: 999px; white-space: nowrap; font-size: 15px; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.sx .stile-i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-dim); color: var(--accent); }
.sx .stile-i svg { width: 16px; height: 16px; }
@media (max-width: 720px) { .sx { font-size: 14px; padding: 6px 15px 6px 6px; } .sx .stile-i { width: 27px; height: 27px; } }
@media (prefers-reduced-motion: reduce) {
  .sx-track { animation: none; width: auto; justify-content: center; }
  .sx-row[aria-hidden] { display: none; }
  .sx-row { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; padding: 0 16px; }
  .sx-band { -webkit-mask-image: none; mask-image: none; }
}

/* — Tarif : « 15 %. Rien d'autre. » en très grand, le simulateur à côté — */
.price { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.price-h { font-size: clamp(84px, 11vw, 150px); font-weight: 650; letter-spacing: -0.055em; line-height: .9; }
.price-h em { display: block; margin-top: .14em; font-style: normal; font-size: .4em; letter-spacing: -0.03em; color: var(--accent); }
.price-sub { margin-top: 18px; font-size: 17px; color: var(--ink-2); }
.zeros-p { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.zeros-p li { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: 13.5px; color: var(--ink-2);
  background: rgba(47,211,155,.08); box-shadow: inset 0 0 0 1px rgba(47,211,155,.26); }
.zeros-p b { font-weight: 650; color: var(--ok); }
.price-r { padding: 30px 32px 32px; border-radius: 24px; background: rgba(5, 8, 15, .5);
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 30px 60px -30px rgba(0,0,0,.9); }
.price-lab { display: block; margin-bottom: 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.price-r .arc-calc__rows { margin-top: 14px; }
.price-cta { width: 100%; margin-top: 22px; }
@media (max-width: 900px) { .price { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 640px) { .price-r { padding: 24px 20px 24px; } }

/* — FAQ : 6 questions sur 2 colonnes — */
.faq-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; align-items: start; }
.faq-g .arc-accordion summary { font-size: 17px; padding: 22px 0; }
@media (max-width: 860px) { .faq-g { grid-template-columns: minmax(0, 1fr); } .faq-g .arc-accordion + .arc-accordion { border-top: 0; } }

/* — Clôture : Dossier → 24 h → en ligne demain — */
.steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 30px auto 0; padding: 0; list-style: none; }
.st { padding: 9px 17px; border-radius: 999px; font-size: 15px; font-weight: 550; color: var(--ink);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.st:last-child { color: var(--ok); background: var(--ok-dim); box-shadow: inset 0 0 0 1px rgba(47,211,155,.35); }
.st-arw { display: grid; color: var(--ink-3); }
.st-arw svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .steps { flex-direction: column; gap: 6px; } .st-arw svg { transform: rotate(90deg); } }

/* — Pied de page : 2 colonnes en mobile — */
@media (max-width: 900px) { .foot-g > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .foot-g { grid-template-columns: 1fr 1fr; gap: 30px 20px; } }

/* — Mise en page côte à côte : Page de paiement (texte | maquette) et
     Intégrations (carte | texte). La maquette garde ses proportions : elle est
     simplement mise à l'échelle (zoom) pour tenir dans un écran. — */
@media (min-width: 1041px) {
  .split { display: grid; grid-template-columns: minmax(0, 1fr) 578px; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 56px;
    grid-template-areas: ". v" "t v" "p v" "c v" ". v"; }
  .split-c { grid-area: c; margin-top: 30px; }
  .split-t { grid-area: t; margin-bottom: 0; }
  .split-v { grid-area: v; zoom: .76; }
  .split-t .h2 { font-size: clamp(27px, 2.6vw, 36px); max-width: none; }
  .split .cko { max-width: none; margin: 0; }
  .integ { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 72px; align-items: center;
    grid-template-areas: "v t" "l l"; }
  .integ-t { grid-area: t; margin-bottom: 0; }
  .integ-v { display: contents; }
  .integ .icard { grid-area: v; max-width: none; margin: 0; }
  .integ .ilegal { grid-area: l; }
}
@media (max-width: 1040px) {
  .split { display: flex; flex-direction: column; }
  .split-t { order: 1; text-align: center; }
  .split-t .h2, .split-t .lead { margin-inline: auto; }
  .split-v { order: 2; width: 100%; max-width: 760px; margin-inline: auto; }
  .split-c { order: 4; display: flex; justify-content: center; margin-top: 26px; }
  .integ-t { text-align: center; }
  .integ-t .h2 { margin-inline: auto; }
}
/* Respiration un peu plus serrée sur desktop : 10 sections au lieu de 15. */
@media (min-width: 901px) {
  .below .sec:not(.tight):not(#produit):not(#preuves) { padding-block: 96px; }
  .below .sec:not(#produit):not(#preuves) .head { margin-bottom: 48px; }
}

/* Maquette checkout : logo boutique, vraie photo produit, avis Trustpilot (comme la vraie page de paiement) */
.pk-logo { width: 38px; height: 38px; flex: none; display: block; }
.pk-logo svg { width: 100%; height: 100%; display: block; }
.pk-brand b.pk-wordmark { font-size: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pk-wordmark i { font-style: normal; font-weight: 800; color: #b8873e; }
.pk-th-img { overflow: hidden; background: #efe9e1; }
.pk-th-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-tp { grid-column: 1 / -1; margin-top: 20px; padding: 20px 22px; text-align: center; }
.pk-tp-r { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pk-tp-r b { font-size: 15px; font-weight: 800; color: #1c1c1c; letter-spacing: -0.01em; }
.pk-tp-r img { width: 118px; height: 25px; display: block; }
.pk-tp-s { margin-top: 7px !important; font-size: 12.5px; color: var(--pk-mut); }
.pk-tp-s strong { color: #1c1c1c; }

/* ═════════ Maquette page de paiement — design B (2026-10-07) ═════════
   Reprise de la page de paiement en ligne (même structure, mêmes tokens), en miniature.
   Mobile (base) : en-tête → express → récap → contact → livraison → paiement → avis.
   Large (conteneur ≥ 520px) : formulaire à gauche (blanc), récap + avis à droite (gris).
   Champ carte au format ACI : libellés au-dessus, n° pleine largeur + cadenas,
   expiration et CVC sur une ligne, nom sur la carte, bouton « Payer maintenant ». */
.pb { --pb-ink: #0f1222; --pb-ink2: #3c4256; --pb-sub: #6b7286; --pb-mute: #9aa1b0;
  --pb-line: #e6e8ee; --pb-line2: #eef0f4; --pb-soft: #f6f7f9; --pb-soft2: #eff1f5; --pb-ok: #0f8a5f;
  --pb-gut: 14px; --pb-in-h: 42px; --pb-in-r: 12px; --pb-in-fs: 13.5px;
  container: pb / inline-size; color: var(--pb-ink); background: #fff; font-family: var(--f-body);
  font-size: 13.5px; line-height: 1.4; letter-spacing: -0.005em; text-align: left; }
.pb p { margin: 0; }
.pb svg { display: block; }
.pb-grid { display: flex; flex-direction: column; }
.pb-main, .pb-side { display: contents; }

/* En-tête boutique */
.pb-head { order: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px var(--pb-gut); background: #fff; border-bottom: 1px solid var(--pb-line2); }
.pb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pb-logo { width: 34px; height: 34px; flex: none; }
.pb-logo svg { width: 100%; height: 100%; }
.pb-shop { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-secure { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--pb-sub); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.pb-secure svg { width: 12px; height: 12px; }

/* Étapes, Trustpilot, express */
.pb-top { order: 2; padding: 16px var(--pb-gut) 2px; background: var(--pb-soft); }
.pb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 16px; }
.pb-steps span { display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; font-weight: 550; color: var(--pb-mute); white-space: nowrap; }
.pb-steps span::before { content: ""; height: 3px; border-radius: 3px; background: #e3e6ec; }
.pb-steps .on { color: var(--pb-ink); font-weight: 600; }
.pb-steps .on::before { background: var(--pb-ink); }
.pb-tp { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 8px; padding: 10px;
  border-radius: 13px; background: #ecfaf3; border: 1px solid #c4ebd7; font-size: 12px; }
.pb-tp > b { font-size: 13.5px; font-weight: 700; }
.pb-stars { display: inline-flex; gap: 2px; }
.pb-stars svg { width: 17px; height: 17px; }
.pb-tp-n { display: inline-flex; align-items: center; gap: 4px; color: var(--pb-ink2); white-space: nowrap; }
.pb-tp-n b { font-weight: 650; letter-spacing: -0.02em; color: var(--pb-ink); }
.pb-tp-mark { width: 13px; height: 13px; }
.pb-xh { margin: 16px 0 10px !important; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pb-sub); }
.pb-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pb-wal { display: flex; align-items: center; justify-content: center; gap: 5px; height: 42px; border-radius: 11px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pb-wal-apple { background: #000; color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.pb-wal-g { background: #fff; color: #3c4043; border: 1.5px solid #dadce0; }
.pb-apple-ico { width: 15px; height: 18px; margin-top: -3px; }
.pb-g-ico { width: 16px; height: 16px; }
.pb-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; color: var(--pb-mute); font-size: 11.5px; white-space: nowrap; }
.pb-or::before, .pb-or::after { content: ""; flex: 1; height: 1px; background: #e1e4ea; }

/* Récapitulatif */
.pb-sum { order: 3; padding: 16px var(--pb-gut); background: var(--pb-soft2); border-top: 1px solid var(--pb-line); }
.pb-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px !important;
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--pb-ink2); }
.pb-h-s { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 550; letter-spacing: 0; text-transform: none; color: var(--pb-sub); }
.pb-h-s svg { width: 11px; height: 11px; }
.pb-item { display: flex; align-items: center; gap: 12px; }
.pb-thumb { width: 54px; height: 54px; flex: none; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--pb-line); }
.pb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-it { flex: 1; min-width: 0; }
.pb-it b { display: block; font-size: 13.5px; font-weight: 620; line-height: 1.3; letter-spacing: -0.01em; }
.pb-it span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--pb-sub); }
.pb-item em { font-style: normal; font-size: 13.5px; font-weight: 680; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-lines { margin-top: 14px; padding-top: 10px; border-top: 1px solid #e1e4ea; font-size: 12.5px; }
.pb-lines > div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; color: var(--pb-sub); }
.pb-lines > div span:last-child { font-variant-numeric: tabular-nums; }
.pb-free { color: var(--pb-ok) !important; font-weight: 650; }
.pb-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 11px; border-top: 1px solid #e1e4ea; }
.pb-total span { font-size: 14px; font-weight: 700; }
.pb-total b { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pb-ship { margin-top: 14px; padding: 11px 13px; border-radius: 12px; background: rgba(15, 18, 34, .06); border: 1px solid rgba(15, 18, 34, .2);
  font-size: 13px; font-weight: 600; color: var(--pb-ink); }

/* Formulaire */
.pb-form { order: 4; padding: 14px var(--pb-gut) 20px; background: var(--pb-soft); border-top: 1px solid var(--pb-line); }
.pb-sec + .pb-sec { margin-top: 18px; }
.pb-f { display: grid; gap: 8px; }
.pb-r2, .pb-rcp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pb-rcp { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); }
.pb-in { display: flex; align-items: center; min-width: 0; height: var(--pb-in-h); padding: 0 13px; border-radius: var(--pb-in-r);
  background: #fff; border: 1px solid #e2e5eb; color: var(--pb-mute); font-size: var(--pb-in-fs); white-space: nowrap; overflow: hidden; }
.pb-sel { color: var(--pb-ink); justify-content: space-between; }
.pb-sel::after { content: ""; width: 7px; height: 7px; margin: -4px 2px 0 10px; border-right: 2px solid #6b7286; border-bottom: 2px solid #6b7286; transform: rotate(45deg); flex: none; }

/* Carte de crédit — champ au format ACI */
.pb-box { border: 1px solid var(--pb-line); border-radius: 14px; background: #fff; overflow: hidden; }
.pb-boxh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; background: #fafbfc; border-bottom: 1px solid var(--pb-line); }
.pb-boxh b { font-size: 13px; font-weight: 700; white-space: nowrap; }
.pb-brands { display: flex; gap: 4px; }
.pb-brands svg { width: 30px; height: 19px; }
.pb-aci { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 12px 12px 12px; }
.pb-g { flex: 0 0 48%; min-width: 0; margin-bottom: 10px; }
.pb-g-w { flex-basis: 100%; }
.pb-l { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: #3a4256; white-space: nowrap; }
.pb-c { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid #e3e6ee; background: #fff;
  color: #9aa2b1; font-size: 13px; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.pb-c-lock { padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa2b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat right 11px center / 14px 14px; }
.pb-paybtn { flex: 0 0 100%; display: grid; place-items: center; height: 44px; margin-top: 2px; border-radius: 11px; background: #0e0e0e; color: #fff; font-size: 14.5px; font-weight: 700; }
.pb-trust { margin-top: 14px; text-align: center; }
.pb-trust-l { display: inline-flex; align-items: center; gap: 6px; color: var(--pb-ok); font-size: 12.5px; font-weight: 600; }
.pb-trust-l svg { width: 14px; height: 14px; }
.pb-badges { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 7px !important;
  color: var(--pb-mute); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pb-badges i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* Avis */
.pb-rev { order: 5; padding: 20px var(--pb-gut) 20px; background: #fff; border-top: 1px solid var(--pb-line); }
.pb-rev-t { font-size: 16px; font-weight: 750; letter-spacing: -0.02em; }
.pb-rev-s { margin-top: 3px !important; color: var(--pb-sub); font-size: 12px; }
.pb-rev-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; font-size: 12.5px; color: var(--pb-ink2); }
.pb-rev-h b { color: var(--pb-ink); }
.pb-rev-h .pb-stars svg { width: 20px; height: 20px; }
.pb-rv-list { display: grid; gap: 10px; margin-top: 14px; }
.pb-rv { padding: 13px 14px; border-radius: 14px; border: 1px solid var(--pb-line); background: #fbfbfc; }
.pb-rv .pb-stars svg { width: 13px; height: 13px; }
.pb-rv > b { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; }
.pb-rv p { margin-top: 3px !important; font-size: 12.5px; line-height: 1.45; color: var(--pb-ink2); }
.pb-rv-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 12px; }
.pb-rv-f b { font-weight: 650; color: var(--pb-ink2); }
.pb-ver { display: inline-flex; align-items: center; gap: 4px; color: var(--pb-ok); font-weight: 600; }
.pb-ver svg { width: 13px; height: 13px; }

/* Large : formulaire à gauche, récap + avis à droite (comme la page en ligne sur ordinateur) */
@container pb (min-width: 520px) {
  .pb-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .pb-main { display: block; background: #fff; padding: 18px 18px 20px 16px; }
  .pb-side { display: block; background: #f2f3f6; padding: 18px 14px 20px 16px; border-left: 1px solid var(--pb-line); }
  .pb-head { padding: 0 0 13px; margin-bottom: 15px; }
  .pb-top, .pb-form, .pb-sum, .pb-rev { padding: 0; background: transparent; border: 0; }
  .pb-form { margin-top: 0; }
  .pb-logo { width: 30px; height: 30px; }
  .pb-shop { font-size: 13.5px; }
  .pb-secure { font-size: 10.5px; }
  .pb-steps { margin-bottom: 13px; }
  .pb-steps span { font-size: 10.5px; }
  .pb-tp { padding: 8px; gap: 4px 7px; font-size: 11px; justify-content: flex-start; }
  .pb-tp > b { font-size: 12px; }
  .pb-tp .pb-stars svg { width: 14px; height: 14px; }
  .pb-wal { height: 36px; font-size: 13.5px; border-radius: 10px; }
  .pb-apple-ico { width: 13px; height: 16px; }
  .pb-g-ico { width: 14px; height: 14px; }
  .pb-or { margin: 12px 0 10px; font-size: 10.5px; }
  .pb { --pb-in-h: 34px; --pb-in-r: 10px; --pb-in-fs: 11.5px; }
  .pb-in { padding: 0 10px; }
  .pb-sec + .pb-sec { margin-top: 14px; }
  .pb-f, .pb-r2, .pb-rcp { gap: 6px; }
  .pb-boxh { padding: 7px 10px; }
  .pb-boxh b { font-size: 11.5px; }
  .pb-brands svg { width: 25px; height: 16px; }
  .pb-aci { padding: 10px 10px 10px; }
  .pb-g { margin-bottom: 8px; }
  .pb-l { font-size: 10px; margin-bottom: 3px; }
  .pb-c { height: 32px; padding: 0 9px; font-size: 11.5px; border-radius: 9px; }
  .pb-c-lock { background-size: 12px 12px; background-position: right 9px center; }
  .pb-paybtn { height: 36px; font-size: 12.5px; border-radius: 9px; }
  .pb-trust { margin-top: 11px; }
  .pb-trust-l { font-size: 11px; }
  .pb-badges { font-size: 8.5px; }
  .pb-thumb { width: 46px; height: 46px; border-radius: 10px; }
  .pb-it b, .pb-item em { font-size: 12px; }
  .pb-it span { font-size: 10.5px; }
  .pb-lines { font-size: 11.5px; margin-top: 12px; }
  .pb-total span { font-size: 12.5px; }
  .pb-total b { font-size: 16.5px; }
  .pb-ship { margin-top: 12px; padding: 9px 11px; font-size: 11.5px; border-radius: 10px; }
  .pb-rev { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e1e4ea; }
  .pb-rev-t { font-size: 13.5px; }
  .pb-rev-s { font-size: 10.5px; }
  .pb-rev-h { font-size: 11px; margin-top: 9px; }
  .pb-rev-h .pb-stars svg { width: 15px; height: 15px; }
  .pb-rv { padding: 10px 11px; border-radius: 11px; background: #fff; }
  .pb-rv > b { font-size: 11.5px; margin-top: 6px; }
  .pb-rv p { font-size: 10.5px; }
  .pb-rv-f { font-size: 10.5px; margin-top: 7px; }
  .pb-rv .pb-stars svg { width: 11px; height: 11px; }
}

/* ═════════ Maquette B — bouton payer interactif + écran de remerciement ═════════ */
.pb-paybtn { position: relative; width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.pb-paytxt { transition: opacity .2s; }
.pb-payspin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2.4px solid rgba(255,255,255,.35); border-top-color: #fff; opacity: 0; }
.pb.is-pay .pb-paytxt { opacity: 0; }
.pb.is-pay .pb-payspin { opacity: 1; animation: pb-spin .8s linear infinite; }
.pb.is-pay .pb-paybtn, .pb.is-done .pb-paybtn { cursor: default; }
@keyframes pb-spin { to { transform: rotate(360deg); } }

/* Le cadre maquette doit contenir l'overlay */
.cko-screen, .pb { position: relative; }
.pb { overflow: hidden; }

/* Écran de remerciement : remplace le checkout quand le paiement est « validé » */
.pbt { position: relative; z-index: 6; background: #fff; display: none; flex-direction: column;
  align-items: center; text-align: center; padding: 32px 20px 28px; }
.pb.is-done .pb-grid { display: none; }
.pb.is-done .pbt { display: flex; }
.pbt-in { width: 100%; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.pb.is-done .pbt-in > * { animation: pbt-rise .5s cubic-bezier(.2,.8,.2,1) both; }
.pb.is-done .pbt-badge { animation-delay: .05s; }
.pb.is-done .pbt-pill { animation-delay: .14s; }
.pb.is-done .pbt-title { animation-delay: .2s; }
.pb.is-done .pbt-sub { animation-delay: .26s; }
.pb.is-done .pbt-ord { animation-delay: .32s; }
.pb.is-done .pbt-card { animation-delay: .38s; }
.pb.is-done .pbt-track { animation-delay: .44s; }
.pb.is-done .pbt-back { animation-delay: .5s; }
.pb.is-done .pbt-replay { animation-delay: .56s; }
@keyframes pbt-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.pbt-badge { width: 72px; height: 72px; border-radius: 50%; background: #e7f8f0; display: grid; place-items: center; }
.pbt-badge svg { width: 42px; height: 42px; }
.pbt-c { stroke: #0f8a5f; stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 145; }
.pbt-k { stroke: #0f8a5f; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; }
.pb.is-done .pbt-c { animation: pbt-draw .5s .25s ease forwards; }
.pb.is-done .pbt-k { animation: pbt-draw .35s .6s ease forwards; }
@keyframes pbt-draw { to { stroke-dashoffset: 0; } }
.pbt-pill { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: #e7f8f0; color: #0b6b49; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pbt-pill i { width: 6px; height: 6px; border-radius: 50%; background: #12805c; }
.pbt-title { margin-top: 14px !important; font-family: var(--f-display); font-size: 22px; font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; color: #0f1222; }
.pbt-sub { margin-top: 9px !important; max-width: 340px; font-size: 13.5px; line-height: 1.5; color: #6b7286; }
.pbt-ord { margin-top: 15px; padding: 7px 14px; border-radius: 10px; background: #f2f3f7; font-size: 12px; color: #6b7286; }
.pbt-ord b { color: #0f1222; font-weight: 700; letter-spacing: .02em; }
.pbt-card { margin-top: 16px; width: 100%; text-align: left; padding: 15px 16px; border-radius: 16px; border: 1px solid #e6e8ee; background: #fbfbfc; }
.pbt-h { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #3c4256; margin-bottom: 12px !important; }
.pbt-item { display: flex; align-items: center; gap: 12px; }
.pbt-thumb { width: 46px; height: 46px; flex: none; border-radius: 11px; overflow: hidden; border: 1px solid #e6e8ee; background: #fff; }
.pbt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pbt-it { flex: 1; min-width: 0; }
.pbt-it b { display: block; font-size: 13px; font-weight: 650; letter-spacing: -0.01em; }
.pbt-it span { display: block; margin-top: 2px; font-size: 11.5px; color: #6b7286; }
.pbt-item em { font-style: normal; font-size: 13px; font-weight: 680; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pbt-line { display: flex; justify-content: space-between; margin-top: 13px; padding-top: 11px; border-top: 1px solid #e6e8ee; font-size: 12.5px; color: #6b7286; }
.pbt-tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 7px; }
.pbt-tot span { font-size: 13.5px; font-weight: 700; color: #0f1222; }
.pbt-tot b { font-size: 18px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pbt-paid { display: flex; align-items: center; gap: 7px; margin-top: 11px !important; font-size: 11.5px; color: #6b7286; }
.pbt-paid svg { width: 13px; height: 13px; flex: none; color: #9aa1b0; }
.pbt-track { margin-top: 16px; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pbt-st { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 10px; font-weight: 550; color: #9aa1b0; line-height: 1.2; text-align: center; position: relative; }
.pbt-st i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #d7dbe3; background: #fff; z-index: 1; }
.pbt-st::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: #e3e6ec; }
.pbt-st:first-child::before { display: none; }
.pbt-st.on { color: #0f8a5f; }
.pbt-st.on i { border-color: #0f8a5f; background: #0f8a5f; }
.pbt-st.on::before { background: #0f8a5f; }
.pbt-back { margin-top: 20px; width: 100%; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #0f1222; color: #fff; font-size: 14px; font-weight: 650; }
.pbt-replay { margin-top: 11px; background: none; border: 0; color: #6b7286; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.pbt-replay:hover { color: #0f1222; }
.pbt-replay:focus-visible, .pb-paybtn:focus-visible { outline: 2px solid var(--accent, #6b5bff); outline-offset: 2px; }

/* Confettis (discrets, un seul cycle à l'ouverture) */
.pbt-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pbt-confetti i { position: absolute; top: -12px; left: calc(7% + (var(--n) * 6.3%)); width: 7px; height: 11px; border-radius: 2px;
  background: hsl(calc(var(--n) * 51) 85% 60%); opacity: 0; transform: translateY(0) rotate(0); }
.pb.is-done .pbt-confetti i { animation: pbt-fall 1.5s cubic-bezier(.3,.6,.5,1) forwards; animation-delay: calc(.2s + var(--n) * .045s); }
@keyframes pbt-fall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(320px) rotate(540deg); } }

@media (min-width: 901px) { .pbt-title { font-size: 20px; } .pbt { padding: 22px 18px; } }

/* Respect de la réduction de mouvement : pas d'animation, affichage direct */
@media (prefers-reduced-motion: reduce) {
  .pbt, .pb.is-done .pbt { transition: none; }
  .pb.is-done .pbt-in > * { animation: none; }
  .pbt-c, .pbt-k { stroke-dashoffset: 0 !important; animation: none !important; }
  .pbt-confetti { display: none; }
  .pb.is-pay .pb-payspin { animation: none; }
}