/* ============================================================================
   Premium Data — le systeme, releve sur ramp.com le 13/09/2026 au navigateur.
   Les valeurs et leur provenance sont dans .impeccable/releve-ramp.md
   ========================================================================= */

@font-face{font-family:Geist;src:url(/fonts/geist-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Geist;src:url(/fonts/geist-latinext.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';src:url(/fonts/geist-mono-latin.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';src:url(/fonts/geist-mono-latinext.woff2) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* palette : le blanc de Ramp n'est pas neutre, tout le systeme est chaud */
  --ground:#FFFFFF;
  --surface:#F4F2F0;
  --ink:#0C0A08;
  --muted:rgba(12,10,8,.66);
  --faint:rgba(12,10,8,.58);
  --rule:#D2CECB;
  --rule-soft:rgba(12,10,8,.10);
  --dark:#1A1919;
  --on-dark:#FFFFFF;
  --on-dark-muted:rgba(255,255,255,.62);
  --rule-dark:rgba(255,255,255,.16);
  /* l'accent EST celui de Ramp, arbitrage du 14/09 :
     "ils ont des boutons jaune-vert, je veux exactement la meme DA" */
  --accent:#E4F222;
  --accent-hi:#D6E312;
  --accent-soft:#F7FCCB;
  --sur-accent:#0C0A08;
  --danger:#A4231C;

  /* grille */
  --gutter:64px;
  --content:1312px;
  --nav:64px;
  --strip:38px;

  /* controles */
  --ctrl:51px;
  --r:6px;
  --r-card:12px;

  --sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* les deux seules courbes du site releve */
  --ease:cubic-bezier(.45,.05,.55,.95);
  --ease-out:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
/* L'attribut hidden perd contre toute regle display de la feuille : .form-tete
   et .pieds-form restaient affiches au-dessus du calendrier en ligne. L'artefact
   masquait le defaut, son gabarit porte deja cette regle ; Cloudflare non. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:24px;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* ---------- grille ---------- */
.wrap{max-width:calc(var(--content) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter);width:100%}
.sec{padding:96px 0}
.sec-sm{padding:64px 0}
.sur{background:var(--surface)}
.noir{background:var(--dark);color:var(--on-dark)}
.noir .sur-titre,.noir .lede,.noir .mut{color:var(--on-dark-muted)}

/* ---------- echelle typographique, relevee ---------- */
.accroche{font-size:20px;line-height:28px;font-weight:400;color:var(--ink);
  padding-bottom:18px;border-bottom:1px solid var(--rule);max-width:620px}
.sur-titre{font-size:10px;line-height:15px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:400}
/* Le cran du haut de page. Le titre de la landing ne porte plus qu'une idee :
   il peut donc etre grand sans occuper trois lignes. */
.t0{font-size:64px;line-height:66px;font-weight:400;letter-spacing:-.03em;text-wrap:balance}
.t1{font-size:48px;line-height:52px;font-weight:400;letter-spacing:-.01px}
.t2{font-size:40px;line-height:44px;font-weight:400;letter-spacing:-.005px}
.t3{font-size:28px;line-height:32px;font-weight:400}
.t4{font-size:24px;line-height:28px;font-weight:400}
.t5{font-size:20px;line-height:26px;font-weight:400}
.lede{font-size:18px;line-height:26px;color:var(--muted)}
.mut{color:var(--muted)}
.fine{font-size:13px;line-height:19px;color:var(--muted)}
.mono{font-family:var(--mono);font-size:12px;line-height:18px;letter-spacing:.04em;text-transform:uppercase}

/* ---------- bandeau + nav ---------- */
.saut{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:6px}
.saut:focus{left:8px}
.strip{background:var(--dark);color:var(--on-dark);height:var(--strip);display:flex;align-items:center;font-size:14px;line-height:20px}
.strip .wrap{display:flex;align-items:center;gap:10px}
.nav{height:var(--nav);display:flex;align-items:center;border-bottom:1px solid var(--rule-soft);background:var(--ground);position:sticky;top:0;z-index:20}
.nav .wrap{display:flex;align-items:center;gap:32px}
.mark{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
/* L'ecart entre le signe et le mot vaut une cellule, soit 0,225 fois la
   hauteur du signe : a 22 px, 5 px. Regle de la DA, la regle du cran. */
.mark .signe{display:block;flex:none}
/* Selecteur de langue : trois jetons dans la barre, a droite du nom. Trois
   langues tiennent sur une ligne meme a 320 px, et un menu deroulant
   cacherait l'existence des deux autres versions. */
.langues{margin-left:auto;display:flex;gap:2px;border:1px solid var(--rule);
  border-radius:var(--r);padding:2px;background:var(--ground)}
.langues a{font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.06em;
  padding:7px 8px;border-radius:4px;text-decoration:none;color:var(--muted);
  transition:color .16s var(--ease),background .16s var(--ease)}
.langues a:hover{color:var(--ink)}
.langues a[aria-current=page]{background:var(--ink);color:var(--on-dark)}
.nav-l{display:flex;align-items:center;gap:28px;font-size:14px;line-height:14px}
.nav-l a{color:var(--muted);transition:color .24s var(--ease)}
.nav-l a:hover,.nav-l a[aria-current=page]{color:var(--ink)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:12px}

/* ---------- boutons, hauteurs relevees ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;height:var(--ctrl);padding:0 20px;
  border:1px solid transparent;border-radius:var(--r);font:inherit;font-size:16px;font-weight:400;
  cursor:pointer;white-space:nowrap;transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out)}
.b-pri{background:var(--accent);color:var(--sur-accent)}
.b-pri:hover{background:var(--accent-hi)}
.b-noir{background:var(--dark);color:var(--on-dark)}
.b-noir:hover{background:#000}
.b-sec{background:var(--surface);color:var(--ink)}
.b-sec:hover{background:#EAE7E4}
.b-inv{background:rgba(255,255,255,.05);color:var(--on-dark);border-color:var(--rule-dark)}
.b-inv:hover{background:rgba(255,255,255,.12)}
.b-sm{height:34px;padding:0 16px;font-size:14px}

/* ---------- cartes, filet de 1 px et aucune ombre ---------- */
.carte{background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-card);padding:28px}
.grille-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.col-2{display:grid;grid-template-columns:421px 1fr;gap:64px;align-items:start}
.hero{padding:72px 0 96px}
.hero-grille{display:grid;grid-template-columns:1fr 644px;gap:0 64px;
  grid-template-areas:"dit form" "faits form";align-items:start}
.hero-dit{grid-area:dit}
.hero-faits{grid-area:faits;margin-top:36px}
.form-zone{grid-area:form}
.hero-dit .t0,.hero-dit .t1{max-width:620px}
.hero-dit .lede{max-width:560px}

/* Le mot releve du titre. Fond a l'accent, encre noire : c'est le seul emploi
   de l'accent que la DA autorise sur fond clair, le texte jaune y fait
   1,23 contre 1. Le fond depasse un peu la ligne pour que le mot respire, et
   `clone` fait suivre le releve si le titre passe a la ligne. */
.hero-dit h1 mark,.hero-titre mark{background:var(--accent);color:var(--sur-accent);
  padding:0 .08em;border-radius:3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Le haut de page du 17/10/2026 : une colonne, le titre puis le champ, au centre. Un ecran, une action.
   La premiere question se lit seule (ni compteur ni jauge), en grand, dans un champ cerne a l'encre. */
.hero-centre{display:flex;flex-direction:column;align-items:center}
.hero-titre{text-align:center;max-width:19ch;margin:0 auto 44px}
.hero-centre .form-zone{width:100%;max-width:820px}
.hero-centre .form-carte{box-shadow:0 30px 80px -20px rgba(12,10,8,.18),0 2px 6px rgba(12,10,8,.05)}
.form-carte.a-q1 .form-tete{display:none}
.form-carte.a-q1 .etape{padding:32px 32px 4px}
.form-carte.a-q1 .q{font-size:26px;line-height:34px}
.form-carte.a-q1 .txt-libre,.form-carte.a-q1 .champ-libre .fantome{font-size:20px;line-height:28px;padding:20px 22px}
.form-carte.a-q1 .txt-libre{min-height:70px;border:2px solid var(--ink)}
.form-carte.a-q1 .txt-libre:focus{box-shadow:0 0 0 4px var(--accent)}
.form-carte.a-q1 .champ-libre .fantome{padding:22px 24px}
.form-carte.a-q1 .curseur{height:24px}
.form-carte.a-q1 .pieds-form{padding:12px 32px 32px}
.form-carte.a-q1 .pieds-form .b{height:58px;padding:0 30px;font-size:17px;font-weight:500}
.form-carte.a-q1 #next::after{content:"\2192";margin-left:10px}
.confiance{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 24px;margin:22px 0 0;padding:0;list-style:none;
  font-size:14px;line-height:20px;color:var(--muted)}
.confiance li{display:inline-flex;align-items:center;gap:8px}
.confiance img{width:28px;height:28px}
.confiance .offre{color:var(--ink)}
.confiance .offre b{font-weight:500}
.confiance .offre::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(12,10,8,.08)}
@media (max-width:760px){
  .hero-titre{margin-bottom:28px}
  .form-carte.a-q1 .etape{padding:24px 18px 4px}
  .form-carte.a-q1 .q{font-size:21px;line-height:28px}
  .form-carte.a-q1 .txt-libre,.form-carte.a-q1 .champ-libre .fantome{font-size:18px;line-height:26px;padding:16px 16px}
  .form-carte.a-q1 .champ-libre .fantome{padding:18px 18px}
  .form-carte.a-q1 .pieds-form{padding:12px 18px 22px}
  .confiance{gap:10px 16px;font-size:13px}
  .confiance .offre{flex-basis:100%;justify-content:center}
}

/* ---------- tableau, patron de module ---------- */
.tab{width:100%;border-collapse:collapse;border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;background:var(--ground)}
.tab caption{text-align:left;padding-bottom:16px;font-size:16px;line-height:24px;color:var(--muted)}
.tab th,.tab td{text-align:left;padding:16px 24px;border-bottom:1px solid var(--rule-soft);font-size:16px;line-height:24px;font-weight:400;vertical-align:top}
.tab thead th{font-family:var(--mono);font-size:12px;line-height:18px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--surface);border-bottom:1px solid var(--rule)}
.tab tr:last-child td{border-bottom:0}
.tab .num{text-align:right;font-family:var(--mono);font-size:14px;color:var(--muted);white-space:nowrap}
.tab tbody tr{transition:background-color .24s var(--ease)}
.tab tbody tr:hover{background:var(--surface)}

/* ---------- accordeon ---------- */
.acc{border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{display:flex;align-items:flex-start;gap:20px;padding:24px 0;cursor:pointer;list-style:none;font-size:20px;line-height:26px;font-weight:400;transition:color .24s var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--muted)}
.acc summary::after{content:"+";margin-left:auto;font-size:22px;line-height:26px;color:var(--muted);transition:transform .3s var(--ease-out)}
.acc details[open] summary::after{content:"\2212"}
.acc .rep{padding:0 44px 24px 0;font-size:16px;line-height:24px;color:var(--muted);max-width:720px}

/* ---------- liste de faits ---------- */
.faits{display:grid;gap:0;border-top:1px solid var(--rule)}
.faits > div{display:grid;grid-template-columns:1fr auto;gap:24px;padding:16px 0;border-bottom:1px solid var(--rule-soft)}

/* ---------- pied de page ---------- */
.pied{border-top:1px solid var(--rule);padding:64px 0 40px;background:var(--ground)}
.pied-cols{display:grid;grid-template-columns:1fr repeat(3,auto);gap:64px}
.pied h2{font-family:var(--mono);font-size:12px;line-height:18px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:16px}
.pied li{margin-bottom:10px;font-size:14px;line-height:20px}
.pied li a{color:var(--muted);transition:color .24s var(--ease)}
.pied li a:hover{color:var(--ink)}
.pied-bas{margin-top:56px;padding-top:24px;border-top:1px solid var(--rule-soft);display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;font-size:13px;line-height:19px;color:var(--muted)}
.pied-liens a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.pied-liens a:hover{color:var(--ink)}

/* ---------- apparition, une seule courbe, jamais de rebond ---------- */
/* Aucune section n'attend un observateur pour devenir visible : le contenu
   est lisible au repos. Un navigateur qui gele ses transitions (onglet en
   arriere-plan, capture, volet masque) rendrait sinon une page blanche. */

/* ---------- reprises ---------- */
@media (max-width:1180px){
  .hero-grille{grid-template-columns:1fr 560px;gap:0 48px}
}
@media (max-width:1060px){
  /* sur petit ecran le formulaire remonte au-dessus des faits :
     le haut de page doit rester court */
  .hero{padding:56px 0 72px}
  .hero-grille{grid-template-columns:1fr;gap:40px 0;grid-template-areas:"dit" "form" "faits"}
  .hero-faits{margin-top:0}
  .hero-dit .t0,.hero-dit .t1,.hero-dit .lede{max-width:760px}
  .form-zone{max-width:660px}
}
@media (max-width:1120px){
  :root{--gutter:40px}
  .col-2{grid-template-columns:1fr;gap:32px}
  .grille-4{grid-template-columns:repeat(2,1fr)}
  .pied-cols{grid-template-columns:1fr 1fr;gap:40px}
}
/* Ce qui se touche au doigt et non a la souris.

   Un pointeur grossier, c'est un doigt : il vise mal, et tout ce qui fait
   moins de 44 px se rate. Les jetons de langue faisaient 31 par 25, et la
   poignee des curseurs 18. On agrandit la zone sensible sans toucher au
   dessin, pour que la page garde la meme allure au clavier. */
@media (max-width:760px){
  :root{--gutter:20px}
  .accroche{font-size:17px;line-height:25px;padding-bottom:14px}
  .t0{font-size:36px;line-height:40px}
  .t1{font-size:32px;line-height:36px}
  .t2{font-size:27px;line-height:31px}
  .t3{font-size:22px;line-height:27px}
  .t4{font-size:20px;line-height:26px}
  .lede{font-size:17px;line-height:25px}
  .sec{padding:56px 0}
  .sec-sm{padding:40px 0}
  .grille-4,.grille-3,.grille-2{grid-template-columns:1fr}
  .nav-l{display:none}
  .strip{height:auto;padding:9px 0;font-size:13px;line-height:18px}
  .pied-cols{grid-template-columns:1fr;gap:32px}
  .tab th,.tab td{padding:14px 16px;font-size:15px}
  .acc summary{font-size:18px;line-height:24px}
}

/* ============================================================================
   MODULE FORMULAIRE — la landing EST le formulaire.
   Moteur repris de 08 - Equipe/Recrutement/landing-sdr/index.html
   ========================================================================= */

.form-zone{max-width:720px}
.form-carte{background:var(--ground);border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.form-tete{display:flex;align-items:center;gap:16px;padding:14px 28px;background:var(--surface);border-bottom:1px solid var(--rule)}
.form-tete .lab{font-family:var(--mono);font-size:12px;line-height:18px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.jauge{flex:1;height:3px;background:rgba(12,10,8,.12);border-radius:2px;overflow:hidden}
.jauge i{display:block;height:100%;width:11%;background:var(--accent);border-radius:2px;transition:width .3s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.jauge i{transition:none}}

.etape{display:none;padding:28px 28px 4px}
.etape.active{display:block}
.q{font-size:24px;line-height:30px;font-weight:400;letter-spacing:-.002em}
.q .sous{display:block;margin-top:10px;font-size:15px;line-height:22px;font-weight:400;color:var(--muted)}

.champ{position:relative;margin-top:20px}
.txt{width:100%;height:var(--ctrl);padding:0 20px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--ground);font-family:inherit;font-size:16px;line-height:24px;color:var(--ink);
  transition:border-color .24s var(--ease)}
.txt::placeholder{color:var(--faint)}
.txt:hover{border-color:rgba(12,10,8,.32)}
.txt:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

/* La premiere question se repond en une phrase, parfois longue. Une ligne
   unique la coupait des qu'elle depassait la largeur du champ, sur telephone
   comme au clavier. Le champ part a la hauteur d'un controle et grandit. */
.txt-libre{height:auto;min-height:var(--ctrl);padding:13px 20px;resize:none;
  overflow:hidden;font-family:inherit;display:block}

/* la machine a ecrire : un calque pose sur le champ, avec un vrai curseur */
.fantome{position:absolute;inset:0;display:flex;align-items:center;padding:0 20px;
  font-size:16px;line-height:24px;color:var(--faint);pointer-events:none;white-space:nowrap;overflow:hidden}
.fantome[hidden]{display:none}
/* Sur le champ libre, le calque suit le texte : il passe a la ligne au lieu
   d'etre coupe, et c'est lui qui donne sa hauteur au champ.

   `inset:0 0 auto 0` et non `inset:0` : cale en haut, a gauche et a droite,
   libre en bas. Avec les quatre cotes cales, sa hauteur etait celle du champ,
   donc il ne pouvait jamais dire au champ de grandir. */
.champ-libre .fantome{display:block;align-items:stretch;inset:0 0 auto 0;
  padding:13px 20px;white-space:pre-wrap;overflow-wrap:break-word;overflow:visible}
.curseur{display:inline-block;width:1px;height:19px;margin-left:1px;background:var(--ink);opacity:.7;
  animation:clign 1.06s steps(1) infinite;vertical-align:middle}
@keyframes clign{0%,49%{opacity:.7}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.curseur{animation:none;opacity:0}}

.choix{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.choix label{display:flex;align-items:center;gap:14px;min-height:var(--ctrl);padding:13px 20px;
  border:1px solid var(--rule);border-radius:var(--r);cursor:pointer;font-size:16px;line-height:24px;
  transition:border-color .24s var(--ease),background-color .24s var(--ease)}
.choix label:hover{border-color:rgba(12,10,8,.34);background:var(--surface)}
.choix input{position:absolute;opacity:0;width:0;height:0}
.choix .pt{flex:0 0 18px;width:18px;height:18px;border:1px solid var(--rule);border-radius:50%;position:relative;
  transition:border-color .24s var(--ease),background-color .24s var(--ease)}
.choix input:checked ~ .pt{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 4px var(--accent)}
.choix label:has(input:checked){border-color:var(--ink);background:var(--accent-soft)}
.choix input:focus-visible ~ .pt{outline:2px solid var(--ink);outline-offset:3px}

.erreur{min-height:20px;padding:8px 28px 0;font-size:14px;line-height:20px;color:var(--danger)}
.pieds-form{display:flex;align-items:center;gap:12px;padding:8px 28px 24px}
.pieds-form .b{font-size:16px}
.retour{height:var(--ctrl);padding:0 16px;border:1px solid var(--rule);border-radius:var(--r);background:var(--ground);
  font:inherit;font-size:15px;color:var(--muted);cursor:pointer;transition:color .24s var(--ease),border-color .24s var(--ease)}
.retour:hover{border-color:var(--ink);color:var(--ink)}

.fini{padding:40px 28px;text-align:left}
.fini .t4{margin-bottom:10px}

@media (max-width:760px){
  .etape,.form-tete,.pieds-form,.erreur{padding-left:18px;padding-right:18px}
  .q{font-size:20px;line-height:26px}
  .pieds-form{flex-wrap:wrap}
  .pieds-form .b{flex:1}
}

/* ============================================================================
   MODULE CHIFFRE ROULANT — le patron du compteur de Ramp
   ("US corporate payments processed by Ramp: 0.8769287%", qui bouge en direct).
   Chaque chiffre est une colonne de 0 a 9 qui se translate. Pas de CSS
   animation : comme chez eux, tout est pilote au script.
   ========================================================================= */

.compteur{display:inline-flex;align-items:baseline;font-weight:400;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.compteur .fixe{display:inline-block}
.rouleau{display:inline-block;height:1.2em;overflow:hidden;vertical-align:-.24em}
.rouleau b{display:block;font-weight:inherit;
  transition:transform 1.15s cubic-bezier(.45,.05,.55,.95)}
.rouleau b i{display:block;height:1.2em;line-height:1.2em;font-style:normal}
@media (prefers-reduced-motion:reduce){.rouleau b{transition:none}}

/* les rouleaux ne se lisent pas : un lecteur d'ecran et un copier-coller
   rendraient les dix chiffres de chaque colonne. Le nombre lisible vit a cote. */
.compteur .rouleau{user-select:none;-webkit-user-select:none}
.lu{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================================
   L'ENTONNOIR. Cinq etages, chacun explique par le taux qui l'a produit, et
   les quatre reglages sont dans la main du visiteur : la page ne promet aucun
   taux de decroche, elle simule celui qu'on lui donne.
   ========================================================================= */
.tonneau{display:grid;grid-template-columns:1fr 420px;gap:80px;align-items:start}

.etages{display:grid;gap:0;border-top:1px solid var(--rule-dark)}
.etage{padding:26px 0;border-bottom:1px solid var(--rule-dark);position:relative}
.etage .taux{font-size:13px;line-height:19px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--on-dark-muted);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.etage .taux b{white-space:nowrap;font-weight:400;color:var(--accent);font-variant-numeric:tabular-nums}
.etage .val{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.etage .compteur{font-size:52px;line-height:60px;color:var(--on-dark)}
.etage .quoi{font-size:18px;line-height:26px;color:var(--on-dark-muted)}
.etage .barre{margin-top:16px;height:6px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden}
.etage .barre i{display:block;height:100%;width:0;border-radius:3px;background:rgba(255,255,255,.34);
  transition:width .8s cubic-bezier(.45,.05,.55,.95)}
.etage.arrive .barre i{width:var(--part,100%)}
/* l'etage d'arrivee : c'est le resultat, il ne se lit pas comme les autres */
.etage.final{border-bottom:0;padding-bottom:0}
.etage.final .compteur{font-size:76px;line-height:86px;color:var(--accent)}
.etage.final .quoi{color:var(--on-dark)}
.etage.final .barre i{background:var(--accent)}
@media (prefers-reduced-motion:reduce){.etage .barre i{transition:none;width:var(--part,100%)}}

/* les reglages */
.reglages{background:rgba(255,255,255,.04);border:1px solid var(--rule-dark);
  border-radius:var(--r-card);padding:28px}
.reglages > p{font-family:var(--mono);font-size:12px;line-height:18px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:22px}
.reglage{margin-bottom:24px}
.reglage:last-child{margin-bottom:0}
.reglage label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:15px;line-height:22px;color:var(--on-dark);margin-bottom:10px}
.reglage label span{color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
/* la cible tactile fait 28 px de haut, la piste n'en fait que 4 :
   un curseur de 4 px ne s'attrape pas au doigt. */
.reglage input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;
  background:transparent;outline:none;cursor:pointer;margin:0;display:block}
.reglage input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:rgba(255,255,255,.18)}
.reglage input[type=range]::-moz-range-track{height:4px;border-radius:2px;
  background:rgba(255,255,255,.18)}
.reglage input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--accent);
  cursor:pointer;border:0}
.reglage input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:0}
.reglage input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.calc-note{margin-top:48px;padding-top:28px;border-top:1px solid var(--rule-dark);
  font-size:18px;line-height:26px;color:var(--on-dark-muted)}

/* ============================================================================
   MODULE PANNEAU TOURNANT — le patron des onglets produit de Ramp :
   un seul element actif, une barre qui se remplit, ca tourne tout seul.
   ========================================================================= */

.panneau{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.onglets{display:grid;gap:0;border-top:1px solid var(--rule)}
.onglet{border-bottom:1px solid var(--rule);padding:0;position:relative}
.onglet > button{display:block;width:100%;text-align:left;background:none;border:0;padding:22px 0;
  font:inherit;font-size:24px;line-height:30px;color:var(--faint);cursor:pointer}
.onglet:hover > button{color:var(--muted)}
.onglet[data-sel=true] > button{color:var(--ink)}
.onglet .corps{display:none;padding:0 0 24px;font-size:17px;line-height:26px;color:var(--muted);max-width:520px}
.onglet[data-sel=true] .corps{display:block}
.onglet .fil{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ink)}
.onglet[data-sel=true] .fil{width:100%;transition:width 5s linear}
@media (prefers-reduced-motion:reduce){.onglet[data-sel=true] .fil{transition:none;width:100%}}

/* la scene a droite : une carte qui se recompose a chaque onglet */
.scene{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:32px;min-height:340px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.scene .entete{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.scene .pastille{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 8px}
.scene .titre{font-family:var(--mono);font-size:12px;line-height:18px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.scene .rang{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--rule-soft);font-size:15px;line-height:22px;
  opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.scene .rang.vu{opacity:1;transform:none}
.scene .rang:last-child{border-bottom:0}
.scene .rang .val{font-family:var(--mono);font-size:13px;color:var(--muted);white-space:nowrap}
/* Sous 400 px, le libelle et la valeur ne tiennent plus cote a cote : la
   valeur, en `nowrap`, sortait de la carte par la droite. Elle passe dessous,
   calee a gauche, et le `nowrap` redevient inoffensif. */
@media (max-width:400px){
  .scene .rang{grid-template-columns:1fr;gap:4px}
  .scene .rang .val{justify-self:start}
}
.scene .rang .val.ok{color:var(--ink);background:var(--accent);padding:2px 8px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.scene .rang{opacity:1;transform:none;transition:none}}

@media (max-width:1060px){
  .panneau{grid-template-columns:1fr;gap:40px}
  .tonneau{grid-template-columns:1fr;gap:40px}
}
@media (max-width:760px){
  .etage .compteur{font-size:38px;line-height:46px}
  .etage.final .compteur{font-size:52px;line-height:62px}
  .etage .quoi{font-size:16px;line-height:24px}
  .reglages{padding:22px}
  .onglet > button{font-size:20px;line-height:26px}
}

/* ============================================================================
   TABLEAU VIVANT — §2.6 du script : "les lignes apparaissent les unes apres
   les autres, comme un compteur qui travaille. Rien ne clignote, rien ne
   rebondit. Le bloc doit avoir l'air d'un extrait de base, pas d'une publicite."
   ========================================================================= */

.vivant{width:100%;border-collapse:collapse;background:var(--ground);
  border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.vivant caption{caption-side:top;text-align:left;padding:0 0 20px;
  font-size:18px;line-height:26px;color:var(--muted)}
.vivant th,.vivant td{text-align:left;padding:18px 24px;font-weight:400;
  font-size:17px;line-height:25px;border-bottom:1px solid var(--rule-soft)}
.vivant thead th{font-family:var(--mono);font-size:12px;line-height:18px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  background:var(--surface);border-bottom:1px solid var(--rule);padding:14px 24px}
.vivant tbody tr:last-child td{border-bottom:0}
.vivant td.compte{text-align:right;font-family:var(--mono);font-size:14px;
  color:var(--muted);white-space:nowrap;width:1%}
.vivant tbody tr{transition:background-color .24s var(--ease)}
.vivant tbody tr:hover{background:var(--surface)}
/* l'entree des lignes est pilotee au script : une ligne non encore entree
   reste lisible, elle n'est jamais a opacite nulle en l'absence de script */
.vivant.anime tbody tr{opacity:.28;transition:opacity .5s var(--ease-out)}
.vivant.anime tbody tr.entre{opacity:1}
@media (prefers-reduced-motion:reduce){
  .vivant.anime tbody tr{opacity:1;transition:none}
}
@media (max-width:760px){
  .vivant th,.vivant td{padding:14px 16px;font-size:15px;line-height:22px}
  .vivant td.compte{font-size:13px}
}

/* ---------- pages du site ---------- */
.page-tete{padding:72px 0 8px}
.page-tete .t1{max-width:860px}
.page-tete .lede{margin-top:20px;max-width:620px}
.prose{max-width:680px}
.prose p{margin-top:20px;font-size:18px;line-height:28px;color:var(--muted)}
.prose p:first-child{margin-top:0}
.prose h2{margin-top:56px;font-size:28px;line-height:32px;font-weight:400;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.reserve{border:1px dashed var(--rule);border-radius:var(--r-card);padding:24px 28px;
  margin-top:20px;background:var(--surface)}
.reserve .mono{color:var(--muted);margin-bottom:8px}
.reserve p{margin:0;font-size:16px;line-height:24px;color:var(--muted)}
.nav-l a[aria-current=page]{color:var(--ink)}

/* Les marches deja comptes (17/10/2026, decision Q1) : le bloc .temoins porte une ligne de tete et la grille .cas-g
   (cartes .cas-c, plus bas). Les temoignages, la rangee de logos et leurs styles ont ete retires : rien n'y est invente. */
.temoins{padding:80px 0}
.temoins-tete{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.temoins-tete p{font-size:14px;line-height:20px;color:var(--muted)}

/* Il y avait ici trois lignes de declarations sans selecteur, restes d'une
   regle dont le selecteur avait ete supprime, suivies d'une accolade en trop.
   Le navigateur ne signale rien : il jette le fragment, puis **les deux regles
   qui suivaient**, et continue comme si de rien n'etait. Les deux jetees
   etaient celles qui font passer les temoignages sur une colonne. C'est pour
   ca que la page tenait 656 px de large sur un telephone de 375. */

@media (max-width:760px){.temoins{padding:56px 0}}

/* le calendrier Fillout, en fin de formulaire */
.agenda{width:100%;height:620px;border:1px solid var(--rule);border-radius:var(--r-card);
  margin-top:24px;background:var(--ground);display:block}
@media (max-width:760px){
  /* la carte du formulaire a deja ses marges : le calendrier prend toute sa largeur */
  .fini{padding:24px 0 0}
  .fini .t4{padding:0 18px}
  .agenda{height:660px;margin-top:16px;border-width:1px 0 0;border-radius:0}
}

/* ---- ce qui se touche au doigt, et non a la souris --------------------
   Un pointeur grossier vise mal : tout ce qui fait moins de 44 px se rate.
   Les jetons de langue faisaient 31 par 25, la poignee des curseurs 18.
   Ce bloc est **en fin de feuille** a dessein : a specificite egale, c'est
   le dernier qui l'emporte, et les regles de base viennent plus haut. */
@media (pointer:coarse){
  .langues a{min-height:44px;display:flex;align-items:center}
  .reglage input[type=range]{height:44px}
  .reglage input[type=range]::-webkit-slider-thumb{width:24px;height:24px}
  .reglage input[type=range]::-moz-range-thumb{width:24px;height:24px}
}
/* La largeur des jetons, seulement quand il y a la place : a 320 px la barre
   tient le nom et les trois langues au pixel pres. */
@media (pointer:coarse) and (min-width:381px){
  .langues a{padding-left:14px;padding-right:14px}
}
/* Et sous 360 px, l'ecart entre le nom et les langues se resserre : c'est
   lui qui poussait la barre 1 px au-dela du bord. */
@media (max-width:360px){
  .nav .wrap{gap:12px}
  .mark{font-size:14px;letter-spacing:.12em}
}

/* ---------- le pays, avant la commande ----------
   La carte est dessinee sur un canevas et non en SVG : 2 495 cellules font
   50 ko de balises, et 4 ko de donnees. Le texte de la reponse, lui, est du
   vrai texte dans la page : si le canevas ne s'affiche pas, l'information
   reste lisible et le bloc garde son sens. */
.monde{background:var(--dark);color:var(--on-dark)}
.monde .t2,.monde .lede,.monde .fine{color:var(--on-dark)}
.monde .lede,.monde .fine{color:var(--on-dark-muted)}
.monde-deux{margin-top:48px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:center}
.monde h2 mark{background:var(--accent);color:var(--sur-accent);padding:0 .08em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.monde-globe canvas{display:block;width:100%;max-width:600px;margin:0 auto;cursor:grab;touch-action:pan-y}
.monde-globe canvas:active{cursor:grabbing}
.monde-cote{display:grid;gap:12px}
.monde-cote:empty{display:none}
.compte{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--rule-dark)}
.compte .nn{grid-column:2;grid-row:1/span 2;align-self:center;display:grid;justify-items:end;gap:4px}
.compte .nn em{font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.07em;text-transform:uppercase;color:var(--on-dark-muted)}
.compte .nn .n{grid-row:auto}
.compte b{font-weight:500;font-size:15px;line-height:21px;color:var(--on-dark);grid-column:1;grid-row:1}
.compte small{grid-column:1;font-size:12px;line-height:17px;color:var(--on-dark-muted)}
.compte .n{font-family:var(--mono);font-size:28px;line-height:1;letter-spacing:-.02em;color:var(--on-dark);grid-row:span 2;align-self:center;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.monde-cote .fine{margin-top:4px;font-size:13px;line-height:19px}
@media (max-width:860px){
  .monde-deux{grid-template-columns:minmax(0,1fr);gap:32px}
}

/* ---------- ce qu'on peut prouver ----------
   Ce qui prouve n'est pas la carte, c'est le lien sortant : il transforme une
   decoration en citation que le lecteur peut ouvrir. */

/* ---- Le point de choix, etape 9 du formulaire (03/10/2026) ----------------
   Un recapitulatif, un choix, et ce qui se passe ensuite. Aucun prix : le prix
   se dit dans l'appel, arbitrage du 25/09. Le relief suit la regle
   R6 : a la valeur, jamais a la graisse franche. */
.recap{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr) auto;gap:8px 16px;
  align-items:baseline;margin:20px 0 0;padding:14px 16px;background:var(--surface);
  border-radius:var(--r);font-size:15px;line-height:22px}
.recap dt{color:var(--muted)}
.recap dd{margin:0;min-width:0;overflow-wrap:anywhere}
.recap .modif{font:inherit;font-size:13px;line-height:19px;color:var(--muted);background:none;border:0;
  border-bottom:1px solid var(--rule);padding:0;cursor:pointer}
.recap .modif:hover{color:var(--ink);border-color:var(--ink)}
.q-mini{margin-top:24px;font-size:18px;line-height:24px}
.choix-type{margin-top:12px}
.choix-type label{align-items:flex-start}
.choix-type .pt{margin-top:3px}
.choix-type .ct-t{display:block}
.choix-type .ct-d{display:block;margin-top:2px;font-size:13px;line-height:19px;color:var(--muted)}
.marches-titre{margin-top:24px;color:var(--faint)}
.marches{list-style:none;margin:8px 0 0;padding:0;counter-reset:m;border-top:1px solid var(--rule)}
.marches li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:12px 0;
  border-bottom:1px solid var(--rule);font-size:15px;line-height:22px;color:var(--muted)}
.marches li::before{counter-increment:m;content:counter(m,decimal-leading-zero);font-family:var(--mono);
  font-size:12px;line-height:22px;color:var(--faint)}
.marches b{font-weight:500;color:var(--ink)}
.pas-promis{margin-top:14px}
/* la case d'enregistrement : la meme carte que les choix, mais carree (on peut cocher, decocher, ne rien cocher) */
.choix-case{margin-top:20px}
.choix-case .pt{border-radius:4px}
.fine-accord:empty{display:none}
.fine-accord{margin-top:8px}
@media (max-width:600px){
  .recap{grid-template-columns:minmax(0,1fr) auto}
  .recap dt{grid-column:1 / -1;margin-top:4px}
}
/* le pied de la landing : une ligne, sans les colonnes du site */
.pied-landing{margin-top:0;padding-top:24px;padding-bottom:40px;border-top:1px solid var(--rule-soft)}

/* --- les marches deja comptes, a la place des temoignages (17/10/2026) --- */
.cas-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cas-c{display:grid;gap:12px;align-content:start;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:20px;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.cas-f{font:500 11px/1.3 'Geist Mono',ui-monospace,monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cas-q{font-size:17px;line-height:1.3}
.cas-n{display:grid;gap:4px}
.cas-n .pre{font:500 10.5px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cas-n b{font:400 32px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:-.03em;font-weight:400}
.cas-n small{font-size:12.5px;color:var(--muted)}
.cas-v{font-size:14px;font-weight:500;border-top:1px solid var(--rule-soft);padding-top:10px}
.cas-tous{margin-top:20px;font-size:15px}
.cas-tous a{font-weight:500}
@media (max-width:860px){.cas-g{grid-template-columns:1fr}}
.pied-liens{display:flex;flex-wrap:wrap;gap:6px 14px}

/* Le bouton qui reste a portee (17/10/2026). Dans l'en-tete sur ordinateur, en barre au bas du telephone. */
.nav-cta{height:38px;padding:0 16px;font-size:14px;margin-left:auto;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s .24s}
.nav-cta + .langues{margin-left:12px}
.cta-libre .nav-cta{opacity:1;visibility:visible;transform:none;transition:opacity .24s var(--ease),transform .24s var(--ease)}
.barre-cta{display:none}
@media (max-width:760px){
  .nav-cta{display:none}
  .nav-cta + .langues{margin-left:auto}
  .barre-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);border-top:1px solid var(--rule-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    transform:translateY(110%);transition:transform .28s var(--ease)}
  .barre-cta .b{width:100%;height:52px;font-size:16px;font-weight:500}
  .cta-libre .barre-cta{transform:none}
}
@media (prefers-reduced-motion:reduce){.nav-cta,.barre-cta{transition:none}}
/* Le dernier appel, centre comme le haut de page */
.fin-centre .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.fin-centre .t2{max-width:22ch}
.fin-centre .b{height:58px;padding:0 30px;font-size:17px;font-weight:500}
.fin-centre .b::after{content:"\2192";margin-left:10px}

/* Les grands nombres en chasse fixe : l'espace des milliers prenait la largeur d'un chiffre (17/10). */
.compte .n,.cas-n b{word-spacing:-.38em}
.compte .n .sep,.cas-n b .sep{margin:0 -.13em}