/* ============================================================
   PREMIUM (esprit Apple / Revolut) — page des prix, serment « Touch ID », révélations.
   Chargé après v2.css sur app.html. On n'anime que transform, opacity (et un flou bref à l'entrée).
   --v = facteur des durées (0,6 en mode tournage, posé par funnel.js). Ni or, ni violet, ni emoji, ni prix barré.
   ============================================================ */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* révélation verticale mot par mot (funnel.js reveal) : le mot monte de son masque avec un ressort.
   Le masque déborde un peu (padding compensé par marge négative) pour ne couper ni accents ni jambages */
.wr{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.08em .06em .16em;margin:-.08em -.06em -.16em}
.wr>span{display:inline-block;animation:wUp calc(.9s*var(--v,1)) cubic-bezier(.2,1.1,.3,1) backwards;animation-delay:calc(var(--wd,0)*1s*var(--v,1))}
@keyframes wUp{from{transform:translateY(112%)}}
/* entrée floue, une après l'autre (--bd = délai en s) ; « backwards » : une fois arrivé, l'élément retrouve sa propre transformation */
.app-body.ty-pricing .bi,.app-body.ty-oath .bi{animation:bIn calc(.8s*var(--v,1)) cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--bd,0)*1s*var(--v,1))}
@keyframes bIn{from{opacity:0;filter:blur(10px);transform:translateY(-20px)}}

/* ---------- chiffres qui défilent (comme NumberFlow) ---------- */
.nf{display:inline-flex;align-items:flex-start;font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:bottom}
.nf-c,.nf-x{display:inline-block;height:1.2em;line-height:1.2em;margin:-.1em 0}
.nf-c{overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
.nf-s{display:block;transition:transform calc(1s*var(--v,1)) cubic-bezier(.2,1.04,.3,1)}
.nf-s i{display:block;height:1.2em;font-style:normal;text-align:center}

/* ---------- page des prix ---------- */
.ty-pricing .px-h{text-align:center}
.app-body.ty-pricing .pz-t{font-size:clamp(38px,11vw,50px);line-height:1.02;letter-spacing:-.05em;font-weight:800;margin:16px 0 10px;animation:none}
.app-body.ty-pricing .pz-s{max-width:330px;margin:0 auto}
.pz-grp{display:grid;gap:14px;margin-top:24px}
/* carte : calme par défaut (transparente, bordure fine, texte clair). Choisie : calque clair qui apparaît en fondu (dégradé gris très clair
   → blanc), texte noir, anneau fin, légère mise à l'échelle (1,025 : 4 px de chaque côté à 375 px, la marge de 20 px suffit) */
.pz-card{position:relative;display:block;width:100%;padding:16px 16px 15px;border-radius:22px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--txt);text-align:left;cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent;
  transition:transform calc(.55s*var(--v,1)) var(--spring),border-color .35s,box-shadow .45s,color .35s,background .25s}
.pz-lt{position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:linear-gradient(to top,#d9dae0,#fff);opacity:0;transition:opacity calc(.45s*var(--v,1)) cubic-bezier(.2,.8,.2,1);pointer-events:none}
.pz-card:not(.on):hover{border-color:var(--line3)}
.pz-card:focus-visible{outline:2px solid var(--line3);outline-offset:4px}
.pz-card.on{color:#0a0a0f;border-color:transparent;transform:scale(1.025);box-shadow:0 0 0 1px rgba(255,255,255,.95),0 0 0 5px rgba(255,255,255,.07),0 26px 60px -26px rgba(255,255,255,.38),0 12px 30px -14px rgba(0,0,0,.9)}
.pz-card.on .pz-lt{opacity:1}
/* appui : enfoncement immédiat et doux (comme /tournage), puis ressort au relâchement */
.pz-card.is-p{transform:scale(.975);transition-duration:.12s,.35s,.45s,.35s,.25s;transition-timing-function:cubic-bezier(.2,.8,.2,1),ease,ease,ease,ease}
.pz-card.on.is-p{transform:scale(1.005)}
.pz-card.is-p:not(.on){background:rgba(255,255,255,.07)}
.pz-top{display:flex;align-items:center;gap:8px}
.pz-n{font-size:17px;font-weight:700;letter-spacing:-.03em;line-height:1.25}
.pz-big .pz-n{font-size:20px}
.pz-bdg{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);color:var(--txt);font-size:12px;font-weight:600;white-space:nowrap;transition:background .35s,border-color .35s,color .35s}
.on .pz-bdg{background:rgba(10,10,15,.06);border-color:rgba(10,10,15,.14);color:#2c2d33}
.pz-rd{margin-left:auto;width:24px;height:24px;flex:none;border-radius:50%;border:1.5px solid var(--line3);display:grid;place-items:center;transition:background .3s,border-color .3s}
.pz-rd svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.4);transition:opacity .2s,transform calc(.45s*var(--v,1)) var(--spring)}
.on .pz-rd{background:#0a0a0f;border-color:#0a0a0f}
.on .pz-rd svg{opacity:1;transform:none}
.pz-hook{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--muted2);transition:color .35s}
.on .pz-hook{color:#4a4b52}
.pz-pr{display:block;margin-top:16px;line-height:1}
.pz-big .pz-amt{font-size:clamp(52px,16vw,66px);font-weight:800;letter-spacing:-.055em}
.pz-per{display:block;margin-top:6px;font-size:15px;font-weight:600;transition:color .35s}
.pz-day{display:block;margin-top:10px;font-size:14.5px;color:var(--muted2);font-variant-numeric:tabular-nums;transition:color .35s}
.on .pz-day{color:#3c3d44}
.pz-was{display:block;margin-top:2px;font-size:13px;color:var(--muted);transition:color .35s}
.on .pz-was{color:#6a6b73}
.pz-save{display:inline-flex;align-items:center;gap:6px;min-height:28px;margin-top:12px;padding:3px 12px 3px 9px;border-radius:999px;background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.32);color:var(--green);font-size:13px;font-weight:600;transition:background .35s,border-color .35s,color .35s}
.on .pz-save{background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.26);color:#15803d}
.pz-save svg{width:13px;height:13px;flex:none}
/* 3 mois et 1 mois : une ligne (durée + phrase à gauche, prix à droite), plus calmes */
.pz-row{display:flex;align-items:flex-start;gap:12px}
.pz-l{flex:1;min-width:0}
.pz-r{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.pz-r .pz-pr{margin-top:1px}
.pz-r .pz-amt{font-size:24px;font-weight:800;letter-spacing:-.045em}
.pz-r .pz-per{margin-top:4px;font-size:12.5px;font-weight:500;color:var(--muted2)}
.on .pz-r .pz-per{color:#4a4b52}
.pz-row .pz-rd{margin:1px 0 0}
.pz-meta{display:block;margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .35s}
.on .pz-meta{color:#5a5b63}
/* « Ce que tu débloques » : pastilles rondes à double coche (cadenas si la formule n'y donne pas droit) */
.pz-list{margin-top:18px;padding:18px 18px 20px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.pz-ut{font-size:15px;font-weight:700;letter-spacing:-.02em}
.pz-list ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:11px}
.pz-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.4;color:var(--txt)}
.pz-ck{width:22px;height:22px;flex:none;margin-top:-1px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(to top,#d9dae0,#fff);color:#0a0a0f}
.pz-ck svg{width:13px;height:13px}
.pz-list li.no{color:var(--muted)}
.pz-list li.no .pz-ck{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--muted)}
.pz-list li.new{animation:bIn calc(.5s*var(--v,1)) cubic-bezier(.2,.8,.2,1) backwards}
/* bouton du bas : dégradé clair, ombre portée, texte noir ; le prix défile */
.app-foot .pz-cta{background:linear-gradient(to top,#d9dae0,#fff);color:#0a0a0f;font-weight:700;box-shadow:0 0 0 1px rgba(255,255,255,.75) inset,0 -2px 0 rgba(10,10,15,.07) inset,0 16px 36px -16px rgba(255,255,255,.5),0 6px 16px -4px rgba(0,0,0,.6)}
.app-foot .pz-cta.is-p{box-shadow:0 0 0 1px #fff inset,0 0 0 4px rgba(255,255,255,.1),0 10px 40px -8px rgba(255,255,255,.6)}
.pz-cta>span{display:inline-flex;align-items:center;gap:.28em}
.pz-cta .nf{font-weight:800}

/* ---------- « Engage-toi » : serment façon Touch ID ---------- */
.ts{display:flex;flex-direction:column;flex:1;text-align:center}
.app-body.ty-oath .ts-t{font-size:clamp(32px,9vw,40px);line-height:1.06;letter-spacing:-.04em;font-weight:800;color:#fff;margin:0 0 14px}
.ts-oath{max-width:330px;margin:0 auto;font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.4;color:var(--muted2)}
.ts-oath b{font-family:var(--sans);font-style:normal;font-weight:600;font-size:.8em;color:#fff}
/* engagements : une ligne chacun, un trait discret qui s'allume quand la ligne arrive */
.ts-ls{list-style:none;margin:0 auto;padding:0;max-width:340px;display:flex;flex-direction:column;gap:9px;text-align:left}
.ts-ls li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.38;color:var(--muted2)}
.ts-ls li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:2px;border-radius:2px;background:#fff;animation:wUp calc(.9s*var(--v,1)) cubic-bezier(.2,1.1,.3,1) backwards;animation-delay:calc(var(--ld,0)*1s*var(--v,1))}
@media(max-height:700px){.ts-ls{gap:6px}.ts-ls li{font-size:14.5px}.app-body.ty-oath .ts-t{font-size:clamp(28px,8vw,34px);margin-bottom:10px}.ts-mid{padding-top:14px}}
.ts-mid{margin:auto 0;padding:22px 0 calc(6px + var(--safe-b));display:flex;flex-direction:column;align-items:center}
.ts-fp{position:relative;width:164px;height:164px;border-radius:50%;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:transform calc(.5s*var(--v,1)) var(--spring)}
.ts-fp:focus-visible{outline:2px solid var(--line3);outline-offset:6px}
.ts-fp *{pointer-events:none}
.ts-fp.hold{transform:scale(.955);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.ts-fp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ts-glow{position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,0) 68%);opacity:0;transform:scale(.6)}
.ts-rb{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.12);stroke-width:2;transition:fill .35s,stroke .35s}
.ts-rf{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;transition:stroke .3s}
.ts-rf.ts-rg{stroke-width:10;stroke:rgba(255,255,255,.1)} /* halo de l'anneau (un second trait large, sans filtre : fluide sur iPhone) */
.ts-print{transform-origin:84px 84px;transition:opacity .3s,transform calc(.5s*var(--v,1)) var(--spring)}
.ts-print path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ts-print .b{stroke:rgba(255,255,255,.2)}
.ts-print .l{stroke:#fff;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.ts-ok{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0} /* caché tant qu'il n'est pas tracé : le bout arrondi ferait un point */
/* validé : anneau et fond verts, l'empreinte s'efface, la coche se dessine, petit rebond */
.ts-fp.ok{animation:tsOk calc(.6s*var(--v,1)) var(--spring)}
@keyframes tsOk{0%{transform:scale(.955)}45%{transform:scale(1.06)}100%{transform:none}}
.ts-fp.ok .ts-rf{stroke:var(--green2)}
.ts-fp.ok .ts-rf.ts-rg{stroke:rgba(52,199,89,.28)}
.ts-fp.ok .ts-rb{fill:rgba(52,199,89,.16);stroke:rgba(52,199,89,.4)}
.ts-fp.ok .ts-print{opacity:0;transform:scale(.7)}
.ts-fp.ok .ts-ok{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset calc(.42s*var(--v,1)) cubic-bezier(.3,.7,.3,1) .1s,opacity 0s .1s}
.ts-fp.ok .ts-glow{background:radial-gradient(circle,rgba(52,199,89,.38),rgba(52,199,89,0) 68%);opacity:1!important;transform:scale(1.08)!important;transition:opacity .3s,transform .5s var(--spring)}
/* relâché trop tôt : petit « non » horizontal, comme une empreinte refusée */
.ts-fp.nope{animation:tsNo .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes tsNo{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.ts-l{margin-top:18px;min-height:30px;line-height:30px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--muted2);transition:color .2s}
.ts-l.warn{color:#fff}
.ts-l.ok{color:var(--green);font-size:19px;font-weight:700}
.ts-h{margin-top:4px}

@media(prefers-reduced-motion:reduce){
  .ts-ls li::before,.wr>span,.app-body.ty-pricing .bi,.app-body.ty-oath .bi,.pz-list li.new,.ts-fp.ok,.ts-fp.nope{animation:none}
  .nf-s{transition:none}.pz-band{transition:none}}

/* ---------- questionnaire : aucun mouvement latéral au doigt ----------
   rien ne dépasse (clip), pas de rebond ni de « page précédente » par balayage horizontal (overscroll-behavior-x),
   et le doigt ne peut faire défiler que verticalement (pan-y) ; l'empreinte garde touch-action:none.
   Le curseur (input range natif) est laissé hors de pan-y pour que son glissement reste intact. */
html:has(body.fn),body.fn{overscroll-behavior-x:none;overflow-x:hidden;overflow-x:clip}
body.fn .app{max-width:min(560px,100vw);overflow-x:clip}
body.fn .app-top,body.fn .app-foot,body.fn .app-body:not(.ty-slider){touch-action:pan-y}
body.fn .app-body,body.fn .scr-old{max-width:100vw;overflow-x:clip}
.app-body.ty-oath .ts-fp{touch-action:none}

/* ---------- tarifs : 3 colonnes + comparatif (façon Apple), pensé pour 375 px ----------
   335 px utiles : 3 colonnes de ~106 px, écart 8 px. Le même gabarit (3 × 1fr, écart 8 px) sert aux cellules du tableau : tout s'aligne. */
.pz-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:30px;align-items:stretch}
.pz-col{display:flex;flex-direction:column;align-items:center;min-width:0;padding:18px 4px 13px;border-radius:18px;text-align:center}
.pz-col.on{transform:scale(1.03)}
.pz-col .pz-bdg{position:absolute;top:0;left:50%;transform:translate(-50%,-55%);height:21px;padding:0 8px;font-size:10.5px;letter-spacing:-.01em;
  background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)),var(--bg)}
.pz-col.on .pz-bdg{background:#fff;border-color:rgba(10,10,15,.16);color:#0a0a0f}
.pz-col .pz-n{font-size:15px}
.pz-col .pz-pr{margin-top:12px}
.pz-col .pz-amt{font-size:clamp(17px,5.3vw,22px);font-weight:800;letter-spacing:-.045em}
.pz-col .pz-per{margin-top:5px;font-size:12px;font-weight:500;color:var(--muted2)}
.pz-col.on .pz-per{color:#4a4b52}
.pz-col .pz-day{margin-top:6px;font-size:11.5px;white-space:nowrap}
.pz-all{display:block;margin-top:auto;padding-top:8px;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--txt)}
.pz-col.on .pz-all{color:#0a0a0f}
.pz-sum{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:16px;text-align:center}
.pz-sum .pz-save{margin-top:8px}
/* comparatif : pas de cadre (les cellules s'alignent exactement sous les colonnes) ; une bande claire glisse sur la colonne choisie */
.pz-cmp{margin:22px 0 18px}
.pz-cmp .pz-ut{text-align:center}
.pz-tb{--c:1;--g:8px;position:relative;margin-top:10px;padding-bottom:6px;isolation:isolate}
.pz-band{position:absolute;z-index:-1;top:0;bottom:0;width:calc((100% - 2*var(--g))/3);left:calc(var(--c)*((100% - 2*var(--g))/3 + var(--g)));
  border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:left calc(.5s*var(--v,1)) var(--spring)}
.pz-th,.pz-tc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);text-align:center}
.pz-th{padding:12px 0 8px;font-size:12px;font-weight:600;color:var(--muted)}
.pz-tr{padding:10px 6px 9px;border-top:1px solid var(--line)}
.pz-tl{font-size:13px;line-height:1.35;color:var(--muted2);text-align:center}
.pz-tc{margin-top:7px}
.pz-cl{display:flex;align-items:center;justify-content:center;min-height:24px;min-width:0;font-size:14px;color:var(--muted2);cursor:pointer;transition:color .3s}
.pz-cl b{font-weight:600;white-space:nowrap}
.pz-cl.on{color:var(--txt)}
.pz-cl .pz-ck{width:20px;height:20px;margin:0;opacity:.7;transition:opacity .3s}
.pz-cl .pz-ck svg{width:12px;height:12px}
.pz-cl.on .pz-ck{opacity:1}
.pz-no{display:block;width:10px;height:1.5px;border-radius:2px;background:var(--muted);opacity:.6}