/* ============================================================================ vNext — Onboarding flow (welcome → username → objectif → intérêts → priorité → première mission). Full-screen teal overlay that replaces the legacy #qzr-auth-gate pseudo modal. Rendered by qzr-auth.js showOnboarding(). Self-contained explicit hex tokens (mounts on ). ========================================================================== */ .qzr-onb{ position:fixed; inset:0; z-index:20000; display:flex; align-items:stretch; justify-content:center; background:#F1FAF6; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#06342A; } .qzr-onb__frame{ width:min(460px,100%); height:100%; display:flex; flex-direction:column; background:#F1FAF6; } @media (min-width:520px){ .qzr-onb{ padding:24px; align-items:center; } .qzr-onb__frame{ height:min(96vh,860px); border-radius:28px; overflow:hidden; box-shadow:0 24px 60px rgba(6,52,42,.16); border:1px solid #E6F2EC; } } /* progress + top bar (hidden on the welcome/dashboard step only — the wizard steps keep their back button + progress) */ .qzr-onb__top{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:16px 18px 6px; } .qzr-onb[data-step="welcome"] .qzr-onb__top{ display:none; } .qzr-onb__back{ width:32px;height:32px;flex:0 0 auto;border:none;border-radius:50%;background:#FFFFFF;color:#0F6E56;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px } .qzr-onb__back:hover{ background:#E6F5EF } .qzr-onb__progress{ flex:1 1 auto; display:flex; gap:6px } .qzr-onb__progress span{ flex:1 1 0; height:5px; border-radius:var(--qz-r-pill); background:#DCEFE8; transition:background var(--qz-dur-ui) ease } .qzr-onb__progress span.is-on{ background:#16A87A } .qzr-onb__body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px 22px 12px; -webkit-overflow-scrolling:touch; } .qzr-onb__foot{ flex:0 0 auto; padding:12px 22px calc(14px + env(safe-area-inset-bottom)); } /* Fit body + foot without scrolling on short viewports. The card/mascot sizes scale continuously via clamp(vh); these only tighten the fixed paddings. */ @media (max-height:760px){ .qzr-onb__body{ padding-top:12px } .qzr-onb__mascot{ margin:2px 0 } } @media (max-height:640px){ .qzr-onb__mascot-fig svg{ height:84px } /* below the clamp floor for very short screens */ .qzr-onb__bubble{ padding:10px 14px; font-size:13px } .qzr-onb-feature__d{ display:none } /* keep 4 cards compact: title only */ .qzr-onb__cta{ padding:13px } .qzr-onb__ghost{ padding:12px } /* Meme discipline que les boutons ci-dessus : sur un ecran court, la ligne legale se resserre au lieu de pousser le CTA hors du pied. */ .qzr-onb__legal{ margin-top:10px; font-size:11.5px; line-height:1.4 } } .qzr-onb__title{ margin:6px 0 0; font-size:24px; font-weight:800; color:#06342A; line-height:1.18; text-align:center } .qzr-onb__sub{ margin:8px 0 18px; font-size:14px; color:#5E8A7C; line-height:1.45; text-align:center } .qzr-onb__sub--accent{ color:#0F6E56; font-weight:600 } /* primary + ghost CTAs (Duolingo-ish 3D accent) */ .qzr-onb__cta{ width:100%; background:#16A87A; color:#fff; border:none; border-bottom:3px solid #0F6E56; border-radius:14px; padding:15px; font-size:16px; font-weight:700; cursor:pointer; transition:background var(--qz-dur-ui) ease, transform .05s ease } .qzr-onb__cta:hover{ background:#149870 } .qzr-onb__cta:active{ transform:scale(var(--qz-press-scale)); border-bottom-width:2px } .qzr-onb__cta:disabled{ opacity:.5; cursor:default } .qzr-onb__ghost{ width:100%; background:#FFFFFF; color:#06342A; border:1.5px solid #DCEFE8; border-radius:14px; padding:14px; font-size:15px; font-weight:600; cursor:pointer; margin-top:10px } .qzr-onb__ghost:hover{ border-color:#CDE7DC; background:#F8FCFA } /* Un ghost qui SUIT le CTA principal a besoin de respirer : sans cette marge les deux boutons se touchent et se lisent comme un seul bloc. */ .qzr-onb__cta + .qzr-onb__ghost{ margin-top:10px } .qzr-onb__skip{ display:block; width:100%; margin-top:12px; background:none; border:none; color:#5E8A7C; font-size:13.5px; cursor:pointer; text-align:center } .qzr-onb__skip:hover{ color:#06342A } /* ── Renvoi vers les documents légaux (directive Apple 5.1.1) ────────────── Le pied de page de l'application est recouvert par cet overlay et la route #reglages est fermée aux visiteurs : c'est la SEULE voie vers la politique de confidentialité pendant l'accueil. Elle doit donc se lire — d'où un contraste tenu (#5E8A7C sur #F1FAF6, et les liens en #0F6E56 soulignés), pas un gris décoratif. Mais elle ne doit pas peser : une ligne centrée sous le bouton, deux crans sous la taille du CTA. Elle se replie naturellement à 375 px — texte centré, aucune ancre à droite, donc rien ne peut sortir du cadre quand elle passe à la ligne. */ .qzr-onb__legal{ margin:14px 0 0; font-size:12.5px; line-height:1.5; color:#5E8A7C; text-align:center } .qzr-onb__legal a{ color:#0F6E56; font-weight:600; text-decoration:underline; text-underline-offset:2px } .qzr-onb__legal a:hover{ color:#06342A } /* ── Mascot ─────────────────────────────────────────────────────────────── */ .qzr-onb__mascot{ display:flex; justify-content:center; margin:6px 0 4px } .qzr-onb__mascot img{ width:96px; height:96px } /* Option A "mascotte vivante" : entrée à ressort puis flottement continu ; une réaction (coucou/saut/révérence/pirouette) uniquement au tap / CTA. */ .qzr-onb__mascot-fig{ display:flex; justify-content:center; transform-origin:50% 88%; animation:qzrOnbIn .8s cubic-bezier(.34,1.56,.64,1) both, qzrOnbFloat 3.4s ease-in-out 1s infinite } .qzr-onb__mascot-fig.is-wave{ animation:qzrOnbWave 1s ease both, qzrOnbFloat 3.4s ease-in-out 1.1s infinite } .qzr-onb__mascot-fig.is-jump{ animation:qzrOnbJump .8s ease both, qzrOnbFloat 3.4s ease-in-out .9s infinite } .qzr-onb__mascot-fig.is-bow{ animation:qzrOnbBow 1.1s ease both, qzrOnbFloat 3.4s ease-in-out 1.2s infinite } .qzr-onb__mascot-fig.is-spin{ animation:qzrOnbSpin .9s ease both, qzrOnbFloat 3.4s ease-in-out 1s infinite } .qzr-onb__mascot-fig svg{ width:auto; height:clamp(96px,17vh,144px); display:block } /* real mascot keeps its 200:240 ratio; vh clamp = auto-fit */ @keyframes qzrOnbFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } } @keyframes qzrOnbIn{ 0%{ transform:translateY(26px) scale(.55); opacity:0 } 60%{ transform:translateY(-6px) scale(1.06); opacity:1 } 80%{ transform:translateY(2px) scale(.98) } 100%{ transform:translateY(0) scale(1) } } @keyframes qzrOnbWave{ 0%,100%{ transform:rotate(0) } 20%,60%{ transform:rotate(-9deg) } 40%,80%{ transform:rotate(8deg) } } @keyframes qzrOnbJump{ 0%,100%{ transform:translateY(0) scaleY(1) } 18%{ transform:translateY(3px) scaleY(.9) } 45%{ transform:translateY(-26px) scaleY(1.05) } 70%{ transform:translateY(2px) scaleY(.94) } } @keyframes qzrOnbBow{ 0%,100%{ transform:rotate(0) } 35%,65%{ transform:rotate(11deg) translateY(4px) } } @keyframes qzrOnbSpin{ 0%{ transform:rotateY(0) } 100%{ transform:rotateY(360deg) } } @keyframes qzrOnbBubblePop{ 0%{ transform:translateY(6px) scale(.92); opacity:0 } 100%{ transform:translateY(0) scale(1); opacity:1 } } @media (prefers-reduced-motion:reduce){ .qzr-onb__mascot-fig, .qzr-onb__mascot-fig.is-wave, .qzr-onb__mascot-fig.is-jump, .qzr-onb__mascot-fig.is-bow, .qzr-onb__mascot-fig.is-spin, .qzr-onb__bubble{ animation:none !important } } .qzr-onb__bubble{ position:relative; background:#FFFFFF; border:1px solid #E6F2EC; border-radius:16px; padding:14px 16px; font-size:14px; color:#06342A; line-height:1.45; text-align:center; margin:10px 0 4px; box-shadow:0 1px 2px rgba(6,52,42,.05), 0 6px 18px rgba(6,52,42,.07);font-weight:600; animation:qzrOnbBubblePop .45s ease .35s both } /* arrow pointing up toward the mascot (border triangle + fill triangle) */ .qzr-onb__bubble::before,.qzr-onb__bubble::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); width:0; height:0; border-style:solid } .qzr-onb__bubble::before{ top:-9px; border-width:0 9px 9px; border-color:transparent transparent #E6F2EC } .qzr-onb__bubble::after{ top:-7px; border-width:0 8px 8px; border-color:transparent transparent #FFFFFF } /* ── Welcome (onb_00) ───────────────────────────────────────────────────── */ /* 4 cartes ; tailles en clamp(vh) pour tenir plein écran sans scroll partout. */ .qzr-onb-welcome__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1.6vh,12px); margin:clamp(12px,2.6vh,26px) 0 4px } .qzr-onb-feature{ background:#FFFFFF; border:1px solid #E6F2EC; border-radius:18px; padding:clamp(10px,2vh,18px) 12px; text-align:center } .qzr-onb-feature__ic{ width:clamp(40px,7.5vh,60px);height:clamp(40px,7.5vh,60px);margin:0 auto clamp(6px,1.2vh,10px);border-radius:14px;background:#E6F5EF;color:#0F6E56;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,3.4vh,27px) } .qzr-onb-feature__t{ font-size:14.5px; font-weight:700; color:#06342A } .qzr-onb-feature__d{ font-size:12.5px; color:#5E8A7C; margin-top:3px; line-height:1.35 } .qzr-onb-cta-card{ background:#FFFFFF; border:1px solid #E6F2EC; border-radius:18px; padding:18px 16px; margin-top:14px; text-align:center } .qzr-onb-cta-card__t{ font-size:16px; font-weight:700; color:#06342A } .qzr-onb-cta-card__d{ font-size:13px; color:#5E8A7C; margin:6px 0 14px; line-height:1.45 } /* ── Username ───────────────────────────────────────────────────────────── */ .qzr-onb-field{ margin-top:8px } .qzr-onb-input{ width:100%; box-sizing:border-box; text-align:center; padding:14px 16px; border:1.5px solid #DCEFE8; border-radius:14px; background:#FFFFFF; color:#06342A; font-size:18px; font-weight:600; letter-spacing:.01em; outline:none; transition:border-color var(--qz-dur-ui) ease, box-shadow var(--qz-dur-ui) ease; font-family:inherit } .qzr-onb-input::placeholder{ color:#A7C6BB; font-weight:500 } .qzr-onb-input:focus{ border-color:#16A87A; box-shadow:0 0 0 3px rgba(22,168,122,.13) } .qzr-onb-input.is-valid{ border-color:#16A87A } .qzr-onb-input.is-invalid{ border-color:#E24B4A; box-shadow:0 0 0 3px rgba(226,75,74,.1) } .qzr-onb-avail{ min-height:22px; margin-top:10px; font-size:12.5px; font-weight:600; color:#5E8A7C; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center } .qzr-onb-avail:before{ content:""; width:8px; height:8px; border-radius:50%; background:#9AA4B2; display:inline-block; flex:0 0 8px } .qzr-onb-avail.is-checking{ color:#8A6D1E } .qzr-onb-avail.is-checking:before{ background:#E0A52A; animation:qzrOnbPulse .8s ease-in-out infinite alternate } .qzr-onb-avail.is-valid{ color:#0F6E56 } .qzr-onb-avail.is-valid:before{ background:#16A87A } .qzr-onb-avail.is-invalid{ color:#E24B4A } .qzr-onb-avail.is-invalid:before{ background:#E24B4A } .qzr-onb-suggest{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px } .qzr-onb-suggest button{ border:1.5px solid #DCEFE8; border-radius:var(--qz-r-pill); background:#FFFFFF; color:#0F6E56; font-weight:600; font-size:13px; padding:7px 12px; cursor:pointer } .qzr-onb-suggest button:hover{ border-color:#16A87A; background:#E6F5EF } @keyframes qzrOnbPulse{ to{ opacity:.4 } } /* ── Goal (objectif) ────────────────────────────────────────────────────── */ .qzr-onb-opts{ display:flex; flex-direction:column; gap:12px; margin-top:6px } .qzr-onb-opt{ display:flex; align-items:center; gap:13px; text-align:left; padding:15px; border-radius:16px; background:#FFFFFF; border:2px solid #E6F2EC; cursor:pointer; transition:border-color var(--qz-dur-ui) ease, background var(--qz-dur-ui) ease } .qzr-onb-opt:hover{ border-color:#CDE7DC } .qzr-onb-opt.is-on{ border-color:#16A87A; background:#ECF9F3 } .qzr-onb-opt__ic{ width:44px;height:44px;flex:0 0 auto;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px } .qzr-onb-opt__ic--calm{ background:#E6F5EF; color:#0F6E56 } .qzr-onb-opt__ic--reg{ background:#E6F5EF; color:#0F6E56 } .qzr-onb-opt__ic--hot{ background:#FCEEE0; color:#D98324 } .qzr-onb-opt__ic--max{ background:#FBF3D6; color:#B9911A } .qzr-onb-opt__txt{ flex:1 1 auto; min-width:0 } .qzr-onb-opt__t{ font-size:15.5px; font-weight:700; color:#06342A } .qzr-onb-opt__d{ font-size:12.5px; color:#5E8A7C; margin-top:2px } .qzr-onb-opt__radio{ width:24px;height:24px;flex:0 0 auto;border-radius:50%;border:2px solid #DCEFE8;background:#FFFFFF;display:inline-flex;align-items:center;justify-content:center } .qzr-onb-opt.is-on .qzr-onb-opt__radio{ border-color:#16A87A } .qzr-onb-opt.is-on .qzr-onb-opt__radio:after{ content:""; width:12px; height:12px; border-radius:50%; background:#16A87A } /* ── Interests (chips) ──────────────────────────────────────────────────── */ .qzr-onb-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:6px } .qzr-onb-chip{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--qz-r-pill); border:1.5px solid #DCEFE8; background:#FFFFFF; color:#5E8A7C; font-size:14px; font-weight:600; cursor:pointer; transition:all var(--qz-dur-ui) ease } .qzr-onb-chip:hover{ border-color:#CDE7DC } .qzr-onb-chip.is-on{ background:#16A87A; border-color:#16A87A; color:#FFFFFF } .qzr-onb-chip i, .qzr-onb-chip .qzr-onb-chip__em{ font-size:13px } .qzr-onb-count{ text-align:center; font-size:13.5px; font-weight:700; color:#0F6E56; margin-top:14px } .qzr-onb-count.is-low{ color:#93B4A8 } /* ── Priority (ordered) ─────────────────────────────────────────────────── */ .qzr-onb-rank{ display:flex; flex-direction:column; gap:11px; margin-top:6px } .qzr-onb-rankrow{ display:flex; align-items:center; gap:12px; background:#FFFFFF; border:1.5px solid #E6F2EC; border-radius:16px; padding:12px 14px } .qzr-onb-rankrow.is-first{ border-color:#16A87A; background:#F6FCFA } .qzr-onb-rank__num{ width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:#EEF2F0;color:#5E8A7C;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px } .qzr-onb-rankrow.is-first .qzr-onb-rank__num{ background:#16A87A; color:#fff } .qzr-onb-rank__em{ font-size:20px; flex:0 0 auto } .qzr-onb-rank__name{ flex:1 1 auto; font-size:15px; font-weight:600; color:#06342A; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .qzr-onb-rank__moves{ display:flex; flex-direction:column; gap:3px; flex:0 0 auto } .qzr-onb-rank__mv{ width:30px;height:22px;border:1px solid #DCEFE8;border-radius:8px;background:#FFFFFF;color:#0F6E56;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px } .qzr-onb-rank__mv:hover{ background:#E6F5EF } .qzr-onb-rank__mv:disabled{ opacity:.35; cursor:default } /* ── Mission ────────────────────────────────────────────────────────────── */ .qzr-onb-mission{ background:#FFFFFF; border:1.5px solid #16A87A; border-radius:18px; padding:18px 16px; margin-top:8px } .qzr-onb-mission__eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#16A87A } .qzr-onb-mission__t{ font-size:19px; font-weight:800; color:#06342A; margin:6px 0 4px } .qzr-onb-mission__d{ font-size:13.5px; color:#5E8A7C; line-height:1.45 } .qzr-onb-mission__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px } .qzr-onb-mission__pill{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:var(--qz-r-pill); background:#F1FAF6; color:#0F6E56 } .qzr-onb-mission__pill--xp{ background:#FBF3D6; color:#9A7A10 } .qzr-onb-mstars{ display:flex; justify-content:center; gap:6px; color:#F5C542; font-size:18px; margin:2px 0 6px }