/* =====================================================================================================================
   Pinch · versions 56 à 58 · le sas (connexion / inscription) et le questionnaire, plein écran, mobile d'abord.
   Toujours sombre : les jetons du thème officiel (css/theme.css, --fd-*), avec des valeurs de secours ici.
   Une question par vue ; les vues glissent horizontalement (fondu seul avec « réduire les animations »).
   ===================================================================================================================== */
html.ob-on,html.ob-on body{overflow:hidden}
/* version 58 : visiteur sans session, avant que le script ouvre le sas : rien de l'application ne s'affiche
   (filet : tout réapparaît au bout de 6 s si le script ne s'est pas lancé) */
html.sas-wait,html.sas-wait body{background:#0c0a18}
html.sas-wait body>:not(#onboarding-container){visibility:hidden;animation:sasfilet 0s linear 6s forwards}
@keyframes sasfilet{to{visibility:visible}}
#onboarding-container{
  --ob-bg:var(--fd-page,#0c0a18); --ob-bg2:var(--fd-page-2,#121020); --ob-card:var(--fd-card,#181628); --ob-line:var(--fd-line,#26233d);
  --ob-ink:var(--fd-title,#fff); --ob-mute:var(--fd-label,#9e9cb8); --ob-acc:var(--fd-accent,#ffc837); --ob-on-acc:var(--fd-on-accent,#000);
  --ob-ok:var(--mint,#55db9c); --ob-vio:var(--violet,#5c4ade); --ob-r:20px;
  position:fixed;inset:0;z-index:200;color:var(--ob-ink);color-scheme:dark}
#onboarding-container[hidden]{display:none}
.ob{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(120% 70% at 85% -10%,rgba(92,74,222,.26),transparent 60%),radial-gradient(90% 60% at -10% 110%,rgba(255,200,55,.07),transparent 60%),linear-gradient(180deg,var(--ob-bg),var(--ob-bg2));
  animation:obin .45s cubic-bezier(.2,.8,.2,1)}
.ob.ob-bye{opacity:0;transform:scale(.985);transition:opacity .3s,transform .3s}
@keyframes obin{from{opacity:0}}

/* ---------- en haut : retour, progression, compteur ---------- */
.ob-top{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:14px;padding:calc(14px + env(safe-area-inset-top,0px)) 18px 6px}
.ob-back{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ob-line);border-radius:50%;background:transparent;color:var(--ob-ink);font-size:20px;cursor:pointer;transition:background-color .2s,border-color .2s}
.ob-back.ob-off{visibility:hidden}
.ob-back:focus-visible,.ob-next:focus-visible,.ob-pm:focus-visible{outline:3px solid var(--ob-acc);outline-offset:3px}
@media (hover:hover){.ob-back:hover{background:var(--ob-card);border-color:var(--ob-mute)}}
.ob-bar{height:4px;border-radius:99px;background:var(--ob-line);overflow:hidden}
.ob-bar[hidden]{display:block!important;visibility:hidden}
.ob-bar i{display:block;width:0;height:100%;border-radius:inherit;background:var(--ob-acc);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.ob-count{justify-self:end;font-size:13px;font-weight:700;color:var(--ob-mute);font-variant-numeric:tabular-nums}

/* ---------- les vues ---------- */
.ob-stage{position:relative;flex:1;min-height:0}
.ob-step{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  transition:transform .44s cubic-bezier(.2,.8,.2,1),opacity .34s ease}
.ob-step.from-r{transform:translateX(56px);opacity:0}
.ob-step.from-l{transform:translateX(-56px);opacity:0}
.ob-step.fade{opacity:0}
.ob-step.out{pointer-events:none;opacity:0}
.ob-step.out.to-l{transform:translateX(-56px)}
.ob-step.out.to-r{transform:translateX(56px)}
@media (prefers-reduced-motion:reduce){ .ob-step,.ob-step.from-r,.ob-step.from-l,.ob-step.out{transform:none!important} .ob,.ob-bar i{animation:none;transition:none} }
.ob-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;width:min(560px,100%);margin:0 auto;padding:20px 22px 12px}
.ob-q{margin:0;font-family:var(--f-display,inherit);font-weight:900;font-stretch:115%;font-size:clamp(30px,8.4vw,48px);line-height:1;letter-spacing:-.01em;outline:none;text-wrap:balance}
.ob-sub{margin:0;color:var(--ob-mute);font-size:16px;line-height:1.4}
.ob-kicker{margin:0;color:var(--ob-ok);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- le prénom ---------- */
.ob-text{width:100%;margin-top:22px;padding:10px 2px 12px;border:0;border-bottom:2px solid var(--ob-line);border-radius:0;background:transparent;color:var(--ob-ink);
  font-family:inherit;font-weight:800;font-size:clamp(30px,9vw,46px);line-height:1.1;text-align:center;caret-color:var(--ob-acc);transition:border-color .25s}
.ob-text::placeholder{color:var(--fd-placeholder,#6c6987)}
.ob-text:focus{outline:none;border-bottom-color:var(--ob-acc)}

/* ---------- les sélecteurs numériques ---------- */
.ob-num{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:10px;margin-top:26px}
.ob-pm{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--ob-line);border-radius:50%;background:var(--ob-card);color:var(--ob-ink);font-size:28px;line-height:1;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background-color .15s,transform .15s}
.ob-pm:active{transform:scale(.92);background:var(--ob-line)}
.ob-val{display:flex;align-items:baseline;justify-content:center;gap:8px;min-width:0;padding-bottom:8px;border-bottom:2px solid var(--ob-line);transition:border-color .25s}
.ob-val:focus-within{border-bottom-color:var(--ob-acc)}
.ob-input{width:4.2ch;min-width:0;padding:0;border:0;background:transparent;color:var(--ob-ink);font:900 clamp(54px,17vw,86px)/1 var(--f-display,inherit);font-variant-numeric:tabular-nums;text-align:right;caret-color:var(--ob-acc)}
.ob-input:focus{outline:none}
.ob-unit{color:var(--ob-mute);font-weight:800;font-size:22px}
.ob-range{width:100%;margin-top:18px;accent-color:var(--ob-acc);height:28px;background:transparent}
.ob-hint{min-height:22px;margin:4px 0 0;text-align:center;font-weight:700;font-size:15px;color:var(--ob-ok)}
.ob-hint.err{color:#ff8a65}
.ob-hint[data-obj="masse"]{color:var(--ob-acc)}

/* ---------- les cartes (sexe, activité) ---------- */
.ob-cards{display:grid;gap:10px;margin-top:14px}
.ob-card{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 16px;border:1px solid var(--ob-line);border-radius:var(--ob-r);background:var(--ob-card);cursor:pointer;
  transition:border-color .2s,background-color .2s,transform .2s}
.ob-card input{position:absolute;opacity:0;pointer-events:none}
.ob-card:has(input:focus-visible){outline:3px solid var(--ob-acc);outline-offset:2px}
@media (hover:hover){.ob-card:hover{border-color:var(--ob-mute)}}
.ob-card.on{border-color:var(--ob-acc);background:linear-gradient(0deg,rgba(255,200,55,.10),rgba(255,200,55,.10)),var(--ob-card)}
.ob-card:active{transform:scale(.99)}
.ob-badge{flex:none;display:grid;place-items:center;min-width:44px;height:30px;padding:0 8px;border-radius:99px;background:var(--ob-line);font-weight:900;font-size:13px;font-variant-numeric:tabular-nums}
.ob-card.on .ob-badge{background:var(--ob-acc);color:var(--ob-on-acc)}
.ob-ct{flex:1;display:grid;gap:3px;min-width:0}
.ob-ct b{font-size:17px;line-height:1.2}
.ob-ct small{color:var(--ob-mute);font-size:14px;line-height:1.35}
.ob-tick{flex:none;width:24px;height:24px;border:2px solid var(--ob-line);border-radius:50%;transition:border-color .2s,background-color .2s}
.ob-card.on .ob-tick{border-color:var(--ob-acc);background:radial-gradient(circle,var(--ob-acc) 0 45%,transparent 48%)}

/* ---------- le bouton du bas ---------- */
.ob-foot{position:sticky;bottom:0;width:min(560px,100%);margin:0 auto;padding:14px 22px calc(18px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,transparent,var(--ob-bg) 30%)}
.ob-next{width:100%;min-height:58px;padding:0 22px;border:0;border-radius:99px;background:var(--ob-acc);color:var(--ob-on-acc);font-family:inherit;font-weight:900;font-size:17px;line-height:1.15;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 10px 30px rgba(255,200,55,.18);transition:transform .2s,opacity .2s,background-color .2s,box-shadow .2s}
.ob-next:disabled{background:var(--ob-line);color:#7b8090;box-shadow:none;cursor:not-allowed}
.ob-next:not(:disabled):active{transform:scale(.98)}
@media (hover:hover){.ob-next:not(:disabled):hover{transform:translateY(-1px)}}
.ob-next.wait{opacity:.7}
.ob-cta{font-size:clamp(15px,4.1vw,17px);padding-inline:16px}
.ob-cta .ob-nw{white-space:nowrap}

/* ---------- l'analyse, puis le bilan ---------- */
.ob-bilan{justify-content:center}
.ob-anim{display:grid;justify-items:center;gap:22px;text-align:center}
.ob-anim[hidden],.ob-res[hidden]{display:none}
.ob-anim p{margin:0;font-weight:800;font-size:19px;color:var(--ob-ink)}
.ob-ring{width:72px;height:72px;border-radius:50%;border:5px solid var(--ob-line);border-top-color:var(--ob-acc);border-right-color:var(--ob-ok);animation:obspin .9s linear infinite}
@keyframes obspin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.ob-ring{animation-duration:2.4s}}
.ob-res{display:flex;flex-direction:column;gap:14px;animation:obrise .5s cubic-bezier(.2,.8,.2,1)}
@keyframes obrise{from{opacity:0;transform:translateY(16px)}}
.ob-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.ob-tile{display:grid;gap:6px;padding:18px 16px;border:1px solid var(--ob-line);border-radius:var(--ob-r);background:var(--ob-card)}
.ob-tile b{font:900 clamp(34px,10vw,46px)/1 var(--f-display,inherit);font-variant-numeric:tabular-nums;color:var(--ob-acc)}
.ob-tile-p b{color:var(--ob-ok)}
.ob-tile span{color:var(--ob-mute);font-weight:700;font-size:14px}
.ob-plan{margin:0;font-size:15px;line-height:1.45}
.ob-macros{margin:0;color:var(--ob-mute);font-size:14px;font-variant-numeric:tabular-nums}
.ob-macros b{color:var(--ob-ink)}
.ob-recap{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ob-recap li{padding:6px 11px;border:1px solid var(--ob-line);border-radius:99px;font-weight:700;font-size:13px;color:var(--ob-mute)}
.ob-consent{display:flex;align-items:flex-start;gap:12px;margin-top:4px;padding:14px;border:1px solid var(--ob-line);border-radius:16px;font-size:14px;line-height:1.4;cursor:pointer}
.ob-consent input{position:absolute;opacity:0;pointer-events:none}
.ob-cbx{flex:none;width:24px;height:24px;margin-top:1px;border:2px solid var(--ob-mute);border-radius:7px;transition:background-color .2s,border-color .2s}
.ob-consent input:checked+.ob-cbx{border-color:var(--ob-ok);background:var(--ob-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.ob-consent:has(input:focus-visible){outline:3px solid var(--ob-acc);outline-offset:2px}
.ob-note{margin:0;color:var(--ob-mute);font-size:13px;line-height:1.4}
.ob-foot-end{position:static;padding-inline:0;background:none}
.ob-login{margin:-6px auto 0;padding:0 22px calc(14px + env(safe-area-inset-bottom,0px));text-align:center}
.ob-link{padding:8px 10px;border:0;background:none;color:var(--ob-mute);font-family:inherit;font-weight:700;font-size:15px;line-height:1.2;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ob-link:focus-visible{outline:3px solid var(--ob-acc);outline-offset:2px;border-radius:8px}
@media (hover:hover){.ob-link:hover{color:var(--ob-ink)}}

@media (min-width:760px){
  .ob-top{padding-inline:32px}
  .ob-body{padding-inline:28px}
  .ob-cards.ob-cards{gap:12px}
}
@media (max-height:640px){ .ob-num{margin-top:14px} .ob-q{font-size:clamp(26px,7vw,40px)} }

/* ================================ version 58 : le sas (accueil, connexion, inscription, e-mail, attente) ================================ */
.ob[data-phase="sas"]:is([data-ecran="accueil"],[data-ecran="attente"]) .ob-top{visibility:hidden}
/* l'accueil : le nom, le slogan, trois étapes, puis les deux boutons */
.ob-hello{justify-content:flex-end;gap:18px;padding-bottom:8px}
.ob-logo{margin:0;font-family:var(--f-display,inherit);font-weight:900;font-stretch:125%;font-size:clamp(64px,22vw,128px);line-height:.86;letter-spacing:-.03em;text-transform:uppercase;outline:none;
  color:var(--ob-ink)}
.ob-logo::after{content:"";display:block;width:64px;height:6px;margin-top:16px;border-radius:99px;background:var(--ob-acc)}
/* version 65 : le logo officiel (currentColor = l'encre du sas) ; petit au-dessus des formulaires ; « Pi » dans l'anneau d'attente */
.ob-logo{font-size:0;line-height:0}
.ob-logo-svg{display:block;width:clamp(200px,62vw,300px);height:auto;color:var(--ob-ink)}
.ob-mark{display:block;width:84px;height:auto;margin-bottom:6px;color:var(--ob-ink)}
.ob-wait{position:relative;display:grid;place-items:center;width:72px;height:72px}
.ob-wait .ob-ring{position:absolute;inset:0}
.ob-pi{position:relative;width:40px;height:40px;color:var(--ob-ink)}
.ob-slogan{margin:0;max-width:19em;color:var(--ob-ink);font-weight:700;font-size:clamp(20px,5.6vw,26px);line-height:1.2;text-wrap:balance}
.ob-how{display:grid;gap:8px;margin:6px 0 0;padding:0;list-style:none;color:var(--ob-mute);font-weight:700;font-size:15px}
.ob-how li{display:flex;align-items:center;gap:12px}
.ob-how b{flex:none;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ob-line);border-radius:50%;background:var(--ob-card);color:var(--ob-acc);font-size:13px}
.ob-foot-sas{display:grid;gap:10px;position:static;background:none}
.ob-ghost{width:100%;min-height:54px;padding:0 22px;border:1px solid var(--ob-line);border-radius:99px;background:var(--ob-card);color:var(--ob-ink);font-family:inherit;font-weight:800;font-size:16px;line-height:1.15;cursor:pointer;
  transition:border-color .2s,background-color .2s,transform .2s}
.ob-ghost:not(:disabled):active{transform:scale(.98)}
@media (hover:hover){.ob-ghost:not(:disabled):hover{border-color:var(--ob-mute)}}
.ob-ghost:disabled{opacity:.6;cursor:progress}
.ob-ghost:focus-visible{outline:3px solid var(--ob-acc);outline-offset:3px}
.ob-legal{display:flex;justify-content:center;align-items:center;gap:4px;margin:2px 0 0;color:var(--ob-mute)}
.ob-legal .ob-link{font-size:13px}
/* connexion et inscription */
.ob-auth{justify-content:flex-start;gap:12px;padding-top:max(20px,6vh)}
.ob-auth .ob-q{font-size:clamp(30px,8vw,44px)}
.ob-fields{display:grid;gap:12px;margin-top:10px}
.ob-field{display:grid;gap:6px;color:var(--ob-mute);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.ob-in{width:100%;min-height:54px;padding:0 18px;border:1px solid var(--ob-line);border-radius:16px;background:var(--ob-card);color:var(--ob-ink);font-family:inherit;font-weight:600;font-size:17px;letter-spacing:0;text-transform:none;
  caret-color:var(--ob-acc);transition:border-color .2s,box-shadow .2s}
.ob-in::placeholder{color:var(--fd-placeholder,#6c6987)}
.ob-in:focus{outline:none;border-color:var(--ob-acc);box-shadow:0 0 0 3px rgba(255,200,55,.18)}
.ob-in:-webkit-autofill{-webkit-text-fill-color:var(--ob-ink);-webkit-box-shadow:0 0 0 40px var(--ob-card) inset;caret-color:var(--ob-acc)}
.ob-pw{position:relative;display:block}
.ob-pw .ob-in{padding-right:96px}
.ob-eye{position:absolute;top:50%;right:8px;translate:0 -50%;min-height:38px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--ob-mute);font-family:inherit;font-weight:800;font-size:13px;letter-spacing:.02em;text-transform:none;cursor:pointer}
.ob-eye:focus-visible{outline:2px solid var(--ob-acc)}
@media (hover:hover){.ob-eye:hover{color:var(--ob-ink)}}
.ob-err{min-height:20px;margin:0;color:#ff9b7a;font-weight:700;font-size:14px;line-height:1.35}
.ob-err:empty{min-height:0}
.ob-err.ob-ok{color:var(--ob-ok)}
.ob-auth .ob-next{margin-top:4px}
.ob-or{display:flex;align-items:center;gap:12px;margin:4px 0;color:var(--ob-mute);font-weight:700;font-size:13px}
.ob-or::before,.ob-or::after{content:"";flex:1;height:1px;background:var(--ob-line)}
.ob-switch,.ob-fine{margin:0;text-align:center;color:var(--ob-mute);font-size:15px;line-height:1.4}
.ob-fine{font-size:13px}
.ob-switch .ob-link,.ob-fine .ob-link{padding:4px 2px;color:var(--ob-ink);font-size:inherit}
.ob-fine .ob-link{color:var(--ob-mute)}
.ob-mail{color:var(--ob-ink);word-break:break-all}
.ob-next.wait,.ob-ghost.wait{cursor:progress}
.ob-next.wait::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:obspin .8s linear infinite}
@media (min-height:760px){ .ob-auth{justify-content:center;padding-top:20px} }


/* ================================ version 60 : aide sous les champs, mot de passe oublié, code 2FA, clavier ================================ */
/* l'aide (et l'erreur) d'un champ, juste sous lui : neutre, validée (vert) ou en erreur (orange vif) */
.ob-aide{min-height:18px;margin:-6px 2px 0;color:var(--ob-mute);font-weight:700;font-size:13px;line-height:1.35;text-transform:none;letter-spacing:0;transition:color .2s}
.ob-aide:empty{min-height:0;margin-top:-12px}
.ob-aide.ok{color:var(--ob-ok)}
.ob-aide.err{color:#ff9b7a}
.ob-aide.err::before{content:"⚠ ";font-weight:900}
.ob-in[aria-invalid="true"]{border-color:#ff9b7a;box-shadow:0 0 0 3px rgba(255,155,122,.16)}
.ob-forgot{margin:-4px 0 0;text-align:right}
.ob-forgot .ob-link{padding:4px 2px;font-size:14px}
/* le code à 6 chiffres : grand, centré, chiffres alignés */
.ob-code{margin-top:18px;letter-spacing:.32em;font-variant-numeric:tabular-nums;padding-left:.32em}
.ob-code[aria-invalid="true"]{border-bottom-color:#ff9b7a}
.ob-aide-c{margin-top:2px;text-align:center}
.ob-aide-c:empty{margin-top:0}
.ob-fin-note{margin-top:10px}
/* le clavier est ouvert (iOS) : le sas épouse la zone visible au-dessus du clavier */
#onboarding-container.ob-kb{inset:auto 0 auto 0;top:var(--ob-vvt,0px);height:var(--ob-vvh,100%)}
/* on écrit (téléphone, iOS comme Android) : tout se range en haut, le champ et « Continuer » restent visibles */
#onboarding-container.ob-typing .ob-body{justify-content:flex-start;padding-top:10px;gap:10px}
#onboarding-container.ob-typing .ob-top{padding-top:calc(6px + env(safe-area-inset-top,0px))}
#onboarding-container.ob-typing .ob-text{margin-top:10px}
#onboarding-container.ob-typing .ob-foot{padding-top:8px;padding-bottom:10px}
#onboarding-container.ob-typing .ob-auth{padding-top:10px}
#onboarding-container.ob-typing .ob-sub{font-size:15px}
@media (max-height:520px){ #onboarding-container.ob-typing .ob-sub{display:none} }