/* Onboarding aux couleurs de la vitrine (decouvrir/) : fond violet du héros avec sa grille,
   titres Bricolage avec un mot surligné, textes Inter, choix façon « Ton objectif ? »
   (cartes blanches à rebord, pastille de couleur par objectif, coche jaune), bouton jaune à
   rebord et reflet, bulle de la mascotte en BD, console sombre « requete.sql ».
   Calque chargé en dernier et limité à #onboarding.ob-vitrine : retirer la classe ob-vitrine
   (ou ce fichier) rend l’ancien habillage, sans toucher à la logique de l’onboarding. */

@font-face{font-family:'Inter';src:url(assets/fonts/inter-medium.woff2) format('woff2');font-weight:400 550;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(assets/fonts/inter-semibold.woff2) format('woff2');font-weight:551 650;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(assets/fonts/inter-bold.woff2) format('woff2');font-weight:651 750;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(assets/fonts/inter-extrabold.woff2) format('woff2');font-weight:751 900;font-style:normal;font-display:swap}

html #onboarding.ob-vitrine{
  --v-ink:#1B1640;--v-ink-2:#4E4872;--v-ink-3:#6A6490;
  --v-line:#E9E5F7;--v-lip:#DCD5F2;--v-shadow-lip:rgba(27,22,64,.3);
  --v-accent:#6A4DF4;--v-accent-2:#8B6CFF;--v-accent-soft:#EEE9FF;--v-accent-ink:#5335E0;--v-accent-lip:#4B30CC;
  --v-mint:#9FF0C6;--v-sun:#FFC83D;--v-sun-hi:#FFD86B;--v-sun-lip:#E0A100;--v-sun-soft:#FFF4D6;
  --v-ok:#14955A;--v-ok-soft:#E3F6EC;--v-pink:#E0457B;--v-pink-soft:#FFE6EE;--v-blue:#2F7BEF;--v-blue-soft:#E3F0FF;--v-gold:#C98A00;
  --v-code:#1E1A3B;--v-code-2:#28234D;--v-kw:#C9BCFF;--v-str:#FFE08A;
  --v-display:'Bricolage Grotesque','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --v-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --v-mono:var(--mono,'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace);
  --v-press:cubic-bezier(.3,.7,.4,1);--v-pop:cubic-bezier(.34,1.56,.64,1);
  --v-swoosh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 20C70 8 170 6 296 14' fill='none' stroke='%239FF0C6' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E");
  --v-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1640' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background:linear-gradient(170deg,#6E50F6 0%,#5538E6 48%,#4529CC 100%)!important;
  color:#fff!important;font-family:var(--v-ui)!important;
}
/* Grille et halo du héros de la vitrine */
html #onboarding.ob-vitrine::before{content:''!important;display:block!important;position:absolute!important;inset:0!important;height:auto!important;z-index:0!important;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)!important;background-size:44px 44px!important;
  -webkit-mask-image:radial-gradient(ellipse 95% 60% at 75% 0%,#000 10%,transparent 78%);mask-image:radial-gradient(ellipse 95% 60% at 75% 0%,#000 10%,transparent 78%)}
html #onboarding.ob-vitrine::after{content:'';position:absolute;right:-190px;top:-170px;width:560px;height:560px;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(255,216,107,.2),rgba(255,216,107,0))}
html #onboarding.ob-vitrine>*{position:relative;z-index:1}
html #onboarding.ob-vitrine #ob-body{scrollbar-width:none}
html #onboarding.ob-vitrine #ob-body::-webkit-scrollbar{display:none}

/* Titres, textes, marque */
html #onboarding.ob-vitrine .ob-title{font-family:var(--v-display)!important;font-weight:800!important;font-size:clamp(29px,8.2vw,35px)!important;letter-spacing:-.03em!important;line-height:1.07!important;color:#fff!important;text-wrap:balance}
html #onboarding.ob-vitrine .ob-title em{font-style:normal;color:var(--v-sun-hi);background:var(--v-swoosh) no-repeat 0 100%/100% .26em;padding-bottom:.07em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html #onboarding.ob-vitrine .ob-lead{color:rgba(255,255,255,.84)!important;font:500 16px/1.55 var(--v-ui)!important;letter-spacing:0!important}
html #onboarding.ob-vitrine .ob-brand{color:#fff!important;font:800 20px/1 var(--v-display)!important;letter-spacing:-.02em!important}
html #onboarding.ob-vitrine .ob-brand code{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#fff!important;color:var(--v-accent)!important;box-shadow:0 3px 0 var(--v-shadow-lip)!important;font:800 14px/1 var(--v-mono)!important}

/* En-tête des étapes : retour, étape, progression menthe et jaune */
html #onboarding.ob-vitrine .ob-back{color:#fff!important;font:700 15px/1 var(--v-display)!important}
html #onboarding.ob-vitrine .ob-flow-status span{color:rgba(255,255,255,.85)!important;font:600 13px/1.2 var(--v-ui)!important}
html #onboarding.ob-vitrine .ob-flow-status em{color:var(--v-mint)!important;font:700 13px/1.2 var(--v-ui)!important}
html #onboarding.ob-vitrine .ob-mini-progress i{height:8px!important;background:rgba(255,255,255,.2)!important;box-shadow:none!important}
html #onboarding.ob-vitrine .ob-mini-progress i.done{background:var(--v-mint)!important}
html #onboarding.ob-vitrine .ob-mini-progress i.on{background:var(--v-sun)!important;box-shadow:0 0 14px rgba(255,200,61,.6)!important}
html #onboarding.ob-vitrine .ob-mini-progress i::after{display:none!important}

/* Mascotte : l’autocollant découpé de la vitrine (plus d’avatar rond), qui arrive d’un rebond et se balance,
   bulle de BD comme sur la vitrine */
html #onboarding.ob-vitrine .ob-chat{grid-template-columns:72px 1fr!important;gap:12px!important;margin:16px 0 18px!important}
html #onboarding.ob-vitrine .ob-chat img{width:72px!important;height:auto!important;aspect-ratio:450/674;border-radius:0!important;object-fit:contain!important;object-position:50% 50%!important;background:none!important;border:0!important;box-shadow:none!important;
  filter:none!important;rotate:-5deg;transform-origin:50% 92%;-webkit-user-drag:none;animation:obvApparait .24s ease-out both,obvStkBob 3.8s ease-in-out .7s infinite}
/* « Il pose une question » (Elisa, 7 novembre, 11 h 45 : son GIF, il penche la tête et se tapote le menton) : à la largeur de
   l'autocollant ; moins haut que lui, il laisse la question et ses réponses tenir sans rapetisser l'écran */
html #onboarding.ob-vitrine .ob-chat img.is-question{aspect-ratio:287/362}
/* 6 novembre, 23 h 16 (« la page bouge ») : la mascotte arrive en fondu, déjà à sa taille, puis se balance ; le résumé du rythme et
   l’aide du niveau, redessinés à chaque choix, changent en fondu, sans glisser */
html #onboarding.ob-vitrine :is(.ob-rhythm-summary,.ob-level-hint){animation-name:obvApparait}
html #onboarding.ob-vitrine .ob-bubble{min-height:0!important;padding:13px 15px!important;border:3px solid var(--v-ink)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 4px 0 var(--v-ink)!important;color:var(--v-ink)!important;font:800 16px/1.28 var(--v-display)!important;letter-spacing:-.01em!important}
html #onboarding.ob-vitrine .ob-bubble::before{left:-10px!important;top:calc(50% - 8px)!important;width:15px!important;height:15px!important;background:#fff!important;border:0!important;border-left:3px solid var(--v-ink)!important;border-bottom:3px solid var(--v-ink)!important;border-radius:0 0 0 3px!important}

/* Réponses : cartes blanches à rebord, pastille colorée, coche jaune quand c’est choisi */
html #onboarding.ob-vitrine .ob-answer-list{display:flex!important;flex-direction:column!important;gap:11px!important;padding:2px 0 8px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
html #onboarding.ob-vitrine .ob-answer{position:relative!important;display:flex!important;align-items:center!important;gap:13px!important;width:100%!important;min-height:64px!important;padding:10px 15px 10px 12px!important;border:2.5px solid #fff!important;border-radius:18px!important;background:#fff!important;color:var(--v-ink)!important;box-shadow:0 4px 0 var(--v-shadow-lip)!important;font:700 16px/1.25 var(--v-display)!important;letter-spacing:-.01em!important;text-align:left!important;transition:transform .12s var(--v-press),box-shadow .12s var(--v-press),border-color .15s,background-color .15s!important}
html #onboarding.ob-vitrine .ob-answer:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--v-shadow-lip)!important;background:#fff!important}
html #onboarding.ob-vitrine .ob-answer::after{content:none!important;display:none!important}
html #onboarding.ob-vitrine .ob-answer .ob-radio{display:none!important}
html #onboarding.ob-vitrine .ob-answer-icon{flex:none!important;width:42px!important;height:42px!important;border-radius:13px!important;display:grid!important;place-items:center!important;background:var(--v-accent-soft)!important;color:var(--v-accent-ink)!important;box-shadow:none!important}
html #onboarding.ob-vitrine .ob-answer-icon svg{width:21px!important;height:21px!important;stroke-width:2.1!important}
html #onboarding.ob-vitrine .ob-answer.on{border-color:var(--v-sun)!important;background:#FFFBEB!important;color:var(--v-ink)!important;box-shadow:0 4px 0 var(--v-sun-lip)!important}
html #onboarding.ob-vitrine .ob-answer.on::before{content:'';position:absolute;right:-9px;top:-9px;width:27px;height:27px;border-radius:50%;background:var(--v-sun) var(--v-check) center/15px no-repeat;box-shadow:0 2px 0 var(--v-sun-lip),0 0 0 3px #fff;animation:obvPop .35s var(--v-pop) both}
/* Même pastille par objectif que sur la vitrine */
html #onboarding.ob-vitrine .ob-goal .ob-answer:nth-child(1) .ob-answer-icon{background:var(--v-accent-soft)!important;color:var(--v-accent-ink)!important}
html #onboarding.ob-vitrine .ob-goal .ob-answer:nth-child(2) .ob-answer-icon{background:var(--v-pink-soft)!important;color:var(--v-pink)!important}
html #onboarding.ob-vitrine .ob-goal .ob-answer:nth-child(3) .ob-answer-icon{background:var(--v-blue-soft)!important;color:var(--v-blue)!important}
html #onboarding.ob-vitrine .ob-goal .ob-answer:nth-child(4) .ob-answer-icon{background:var(--v-sun-soft)!important;color:var(--v-gold)!important}
html #onboarding.ob-vitrine .ob-goal .ob-answer:nth-child(5) .ob-answer-icon{background:var(--v-ok-soft)!important;color:var(--v-ok)!important}
html #onboarding.ob-vitrine .ob-level .ob-answer:nth-child(1) .ob-answer-icon{background:var(--v-ok-soft)!important;color:var(--v-ok)!important}
html #onboarding.ob-vitrine .ob-level .ob-answer:nth-child(2) .ob-answer-icon{background:var(--v-blue-soft)!important;color:var(--v-blue)!important}
html #onboarding.ob-vitrine .ob-level .ob-answer:nth-child(3) .ob-answer-icon{background:var(--v-sun-soft)!important;color:var(--v-gold)!important}

/* Rythme : un chrono de couleur par durée, « Conseillé » en autocollant */
html #onboarding.ob-vitrine .ob-rhythm-list .ob-answer{min-height:70px!important}
html #onboarding.ob-vitrine .ob-rhythm-list .ob-radio{display:block!important;flex:none!important;width:42px!important;height:42px!important;border:0!important;border-radius:13px!important;background:var(--v-ok-soft) center/23px no-repeat!important;box-shadow:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314955A' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 13.5V10M10 3h4M12 3v3'/%3E%3C/svg%3E")!important}
html #onboarding.ob-vitrine .ob-rhythm-list .ob-answer:nth-child(2) .ob-radio{background-color:var(--v-accent-soft)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235335E0' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 13.5l3-2.5M10 3h4M12 3v3'/%3E%3C/svg%3E")!important}
html #onboarding.ob-vitrine .ob-rhythm-list .ob-answer:nth-child(3) .ob-radio{background-color:var(--v-pink-soft)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0457B' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 13.5l2 4M10 3h4M12 3v3'/%3E%3C/svg%3E")!important}
html #onboarding.ob-vitrine .ob-rhythm-list .ob-answer>span:nth-child(2){flex:1;min-width:0}
html #onboarding.ob-vitrine .ob-rhythm-list .ob-answer b{display:block;font:800 18px/1.15 var(--v-display)!important;color:var(--v-ink)!important}
html #onboarding.ob-vitrine .ob-rhythm-list .ob-answer small{display:block;margin-top:3px;font:500 13.5px/1.3 var(--v-ui)!important;color:var(--v-ink-3)!important}
html #onboarding.ob-vitrine .ob-rhythm-min{flex:none;padding:5px 9px 4px!important;border-radius:6px!important;background:var(--v-mint)!important;color:var(--v-ink)!important;font:800 11.5px/1 var(--v-display)!important;letter-spacing:.04em;text-transform:uppercase;transform:rotate(-3deg)}
html #onboarding.ob-vitrine .ob-rhythm-min:empty{display:none!important}
html #onboarding.ob-vitrine .ob-answer.on .ob-rhythm-min{margin-right:12px}

/* Encadrés d’aide sur fond violet : verre dépoli, mot clé en jaune */
html #onboarding.ob-vitrine :is(.ob-level-hint,.ob-rhythm-summary){margin-top:12px!important;padding:12px 14px!important;border:1.5px solid rgba(255,255,255,.22)!important;border-radius:16px!important;background:rgba(255,255,255,.1)!important;color:#fff!important;font:600 14px/1.45 var(--v-ui)!important;text-align:left!important;justify-content:flex-start!important}
html #onboarding.ob-vitrine :is(.ob-level-hint,.ob-rhythm-summary) b{color:var(--v-sun-hi)!important;font-weight:800!important}
html #onboarding.ob-vitrine :is(.ob-level-hint,.ob-rhythm-summary)>span:first-child{color:var(--v-mint)!important}

/* Chemin de niveau : carte blanche, départ en violet */
html #onboarding.ob-vitrine .ob-path{margin-top:12px!important;padding:15px 12px 12px!important;border:0!important;border-radius:18px!important;background:#fff!important;box-shadow:0 4px 0 var(--v-shadow-lip)!important}
html #onboarding.ob-vitrine .ob-path-track::before{background:var(--v-line)!important}
html #onboarding.ob-vitrine .ob-path-step{color:var(--v-ink-3)!important;font:700 11.5px/1.2 var(--v-ui)!important}
html #onboarding.ob-vitrine .ob-path-step i{border-color:var(--v-line)!important;background:#fff!important}
html #onboarding.ob-vitrine .ob-path-step.done{color:var(--v-ink-2)!important}
html #onboarding.ob-vitrine .ob-path-step.done i{background:var(--v-mint)!important;border-color:var(--v-mint)!important;color:var(--v-ink)!important}
html #onboarding.ob-vitrine .ob-path-step.start{color:var(--v-accent-ink)!important}
html #onboarding.ob-vitrine .ob-path-step.start i{background:var(--v-accent)!important;border-color:var(--v-accent)!important;color:#fff!important;box-shadow:0 3px 0 var(--v-accent-lip),0 0 0 5px rgba(106,77,244,.14)!important}
html #onboarding.ob-vitrine .ob-path-note{color:var(--v-ink-3)!important;font:500 12px/1.4 var(--v-ui)!important}
html #onboarding.ob-vitrine .ob-path-note b{color:var(--v-accent-ink)!important}

/* Prénom */
html #onboarding.ob-vitrine .ob-field>span{color:#fff!important;font:700 14px/1.2 var(--v-display)!important;margin-left:4px!important}
html #onboarding.ob-vitrine .ob-field input{height:60px!important;padding:0 18px!important;border:2.5px solid #fff!important;border-radius:18px!important;background:#fff!important;color:var(--v-ink)!important;font:600 17px/1 var(--v-ui)!important;box-shadow:0 4px 0 var(--v-shadow-lip)!important}
html #onboarding.ob-vitrine .ob-field input:focus{border-color:var(--v-sun)!important;box-shadow:0 4px 0 var(--v-sun-lip),0 0 0 5px rgba(255,200,61,.3)!important}
html #onboarding.ob-vitrine .ob-field input::placeholder{color:#A9A3C4!important;font-weight:500!important}
html #onboarding.ob-vitrine .ob-name-preview{margin-top:14px!important;padding:10px 14px!important;border:1.5px solid rgba(255,255,255,.24)!important;border-radius:16px!important;background:rgba(255,255,255,.1)!important;box-shadow:none!important}
html #onboarding.ob-vitrine .ob-name-preview>span:last-child{color:#fff!important;font:700 15px/1.3 var(--v-display)!important}
html #onboarding.ob-vitrine .ob-name-initial{background:var(--v-sun)!important;color:var(--v-ink)!important;box-shadow:0 3px 0 var(--v-sun-lip)!important;font:800 16px/1 var(--v-display)!important}
html #onboarding.ob-vitrine .ob-helper{color:rgba(255,255,255,.72)!important;font:500 13px/1.4 var(--v-ui)!important}

/* Consoles : la carte « requete.sql » de la vitrine */
html #onboarding.ob-vitrine :is(.ob-welcome-demo .ob-code,.ob-practice-card){background:var(--v-code)!important;border:0!important;border-radius:20px!important;box-shadow:0 4px 0 rgba(8,4,40,.45),0 22px 40px -22px rgba(8,4,40,.9)!important;overflow:hidden}
html #onboarding.ob-vitrine :is(.oc-bar,.ob-practice-head){display:flex!important;align-items:center!important;gap:7px!important;padding:11px 14px!important;margin:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;background:transparent!important;color:rgba(255,255,255,.55)!important;font:600 12px/1 var(--v-mono)!important}
html #onboarding.ob-vitrine .oc-bar i{width:10px!important;height:10px!important;border-radius:50%!important;background:#FF6B6B!important;opacity:1!important}
html #onboarding.ob-vitrine .oc-bar i:nth-child(2){background:#FFC83D!important}
html #onboarding.ob-vitrine .oc-bar i:nth-child(3){background:#4CD787!important}
html #onboarding.ob-vitrine .oc-bar em{margin-left:6px;font-style:normal;color:rgba(255,255,255,.55)!important}
html #onboarding.ob-vitrine .ob-practice-head::before{content:'';flex:none;width:46px;height:10px;margin-right:4px;background:radial-gradient(circle at 5px 5px,#FF6B6B 4.6px,transparent 5px),radial-gradient(circle at 23px 5px,#FFC83D 4.6px,transparent 5px),radial-gradient(circle at 41px 5px,#4CD787 4.6px,transparent 5px)}
html #onboarding.ob-vitrine .ob-practice-head span:last-child{margin-left:auto;color:var(--v-mint)!important}
html #onboarding.ob-vitrine :is(.oc-code,.ob-practice-code){margin:0!important;padding:14px 16px 6px!important;background:transparent!important;color:#EFEBFF!important;font:600 14px/1.7 var(--v-mono)!important;white-space:pre-wrap}
html #onboarding.ob-vitrine :is(.oc-code .k,.ob-practice-code .kw){color:var(--v-kw)!important;font-weight:800!important}
html #onboarding.ob-vitrine :is(.oc-code .s,.ob-practice-code .str){color:var(--v-str)!important}
html #onboarding.ob-vitrine .ob-practice-code .field{color:#fff!important}
html #onboarding.ob-vitrine .oc-res{margin:4px 14px 14px!important;padding:10px 12px!important;border-radius:12px!important;background:rgba(159,240,198,.12)!important;color:var(--v-mint)!important;font:700 14px/1.2 var(--v-ui)!important}
html #onboarding.ob-vitrine .oc-res i{font-style:normal;color:var(--v-mint)!important}
html #onboarding.ob-vitrine .ob-practice-card{padding-bottom:14px!important}
html #onboarding.ob-vitrine .ob-practice-run{display:flex!important;align-items:center;justify-content:center;gap:8px;width:calc(100% - 28px)!important;min-height:52px!important;margin:10px 14px 0!important;border:0!important;border-radius:15px!important;background:var(--v-sun)!important;color:var(--v-ink)!important;box-shadow:0 4px 0 var(--v-sun-lip)!important;font:800 16px/1 var(--v-display)!important}
html #onboarding.ob-vitrine .ob-practice-run:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--v-sun-lip)!important}
html #onboarding.ob-vitrine .ob-practice-result{margin:8px 14px 0!important;border:0!important;border-radius:14px!important;background:var(--v-code-2)!important;overflow:hidden}
html #onboarding.ob-vitrine .ob-practice-result>div:first-child{display:flex;justify-content:space-between;padding:10px 12px!important;background:rgba(159,240,198,.12)!important;color:var(--v-mint)!important;font:700 13px/1.2 var(--v-ui)!important}
html #onboarding.ob-vitrine .ob-practice-table span{color:#EFEBFF!important;border-color:rgba(255,255,255,.07)!important;font-family:var(--v-mono)!important}
html #onboarding.ob-vitrine .ob-practice-table span.head{color:rgba(255,255,255,.5)!important}
html #onboarding.ob-vitrine .ob-practice-reward{align-self:center;margin:16px auto 0!important;padding:8px 14px 7px!important;border-radius:8px!important;background:var(--v-mint)!important;color:var(--v-ink)!important;font:800 13.5px/1.3 var(--v-display)!important;text-align:center;transform:rotate(-1.5deg);box-shadow:0 3px 0 rgba(27,22,64,.25)}

/* Accueil */
/* Bienvenue : la mascotte en autocollant au milieu des stickers et des mots-clés de la vitrine (page de connexion) */
html #onboarding.ob-vitrine .ob-hello-stage{position:relative;width:100%;max-width:340px;height:204px;margin:6px auto 2px;container-type:inline-size}
html #onboarding.ob-vitrine .ob-hello-stage::before,html #onboarding.ob-vitrine .ob-hello-stage::after{content:'';position:absolute;z-index:0;width:22px;height:22px;pointer-events:none;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:obvTwinkle 3.2s ease-in-out infinite}
html #onboarding.ob-vitrine .ob-hello-stage::before{left:22%;top:2px;width:16px;height:16px;background:var(--v-mint)}
html #onboarding.ob-vitrine .ob-hello-stage::after{left:6%;top:70px;background:var(--v-sun-hi);animation-delay:-1.6s}
html #onboarding.ob-vitrine .ob-hello-stage .mascot-stk{position:absolute;z-index:2;left:50%;bottom:0;width:128px;margin-left:-64px;--mr:-3deg}
/* Le coucou (Elisa, 7 novembre, 11 h 04 : son GIF, plus large que l'autocollant) : à la même hauteur */
html #onboarding.ob-vitrine .ob-hello-stage .mascot-stk:has(.mstk-cat.is-coucou){width:156px;margin-left:-78px}
html #onboarding.ob-vitrine .ob-hello-stage .mstk-bub{right:80%;bottom:calc(100% - 52px);font-size:15px;transform-origin:92% 130%}
html #onboarding.ob-vitrine .ob-hs{position:absolute;z-index:3;opacity:0;animation:obvStkPop .6s var(--v-pop) var(--d,0s) forwards,obvFloat var(--f,5s) ease-in-out calc(var(--d,0s) + .6s) infinite}
html #onboarding.ob-vitrine .ob-hs-1{left:0;top:124px;--r:-6deg;--d:.6s;--f:5.4s}
html #onboarding.ob-vitrine .ob-hs-2{right:0;top:100px;--r:5deg;--d:.78s;--f:6s}
html #onboarding.ob-vitrine .ob-stk{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 10px 5px 11px;border-radius:7px;background:var(--v-mint);color:var(--v-ink);
  font:800 12.5px/1.1 var(--v-display);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
html #onboarding.ob-vitrine .ob-stk.sun{background:#FFE08A}
html #onboarding.ob-vitrine .ob-stk.lav{background:#DDD4FF}
html #onboarding.ob-vitrine .ob-stk svg{flex:none;width:32px;height:32px;margin:-14px -19px -14px 0;transform:rotate(12deg);filter:drop-shadow(0 3px 0 rgba(27,22,64,.2));overflow:visible}
html #onboarding.ob-vitrine .ob-hk{position:absolute;z-index:1;padding:6px 9px;border-radius:10px;background:var(--v-code);color:var(--v-kw);font:700 12px/1 var(--v-mono);box-shadow:0 4px 0 #0F0B2A;opacity:0;
  animation:obvFade .6s ease var(--d,1s) forwards,obvDrift var(--f,7s) ease-in-out var(--d,1s) infinite}
html #onboarding.ob-vitrine .ob-hk-1{right:6%;top:18px;--d:.95s;--f:7.4s;--dx:-6px;--dy:-7px}
html #onboarding.ob-vitrine .ob-hk-2{right:9%;top:158px;--d:1.1s;--f:6.6s;--dx:-7px;--dy:-6px}
@container (max-width:320px){
  html #onboarding.ob-vitrine .ob-stk{font-size:11px;padding:5px 8px 4px 9px}
  html #onboarding.ob-vitrine .ob-stk svg{width:27px;height:27px;margin:-12px -15px -12px 0}
  html #onboarding.ob-vitrine .ob-hello-stage .mascot-stk{width:112px;margin-left:-56px}
  html #onboarding.ob-vitrine .ob-hello-stage .mascot-stk:has(.mstk-cat.is-coucou){width:136px;margin-left:-68px}
}
/* Écrans peu hauts (iPhone SE, 8) : scène plus basse pour garder le bouton et la console en vue */
@media (max-height:740px){
  html #onboarding.ob-vitrine .ob-hello-stage{height:152px;margin-top:0}
  html #onboarding.ob-vitrine .ob-hello-stage .mascot-stk{width:94px;margin-left:-47px}
  html #onboarding.ob-vitrine .ob-hello-stage .mascot-stk:has(.mstk-cat.is-coucou){width:114px;margin-left:-57px}
  html #onboarding.ob-vitrine .ob-hello-stage .mstk-bub{bottom:calc(100% - 38px);font-size:13.5px}
  html #onboarding.ob-vitrine .ob-hs-1{top:94px}
  html #onboarding.ob-vitrine .ob-hs-2{top:70px}
  html #onboarding.ob-vitrine .ob-hk-1{top:6px}
  html #onboarding.ob-vitrine .ob-hk-2{top:120px}
  html #onboarding.ob-vitrine .ob-hello-stage::after{top:46px}
  html #onboarding.ob-vitrine .ob-stk{font-size:11px;padding:5px 8px 4px 9px}
  html #onboarding.ob-vitrine .ob-stk svg{width:27px;height:27px;margin:-12px -15px -12px 0}
}
html #onboarding.ob-vitrine .ob-screen.welcome .ob-lead{max-width:340px!important}
html #onboarding.ob-vitrine .ob-welcome-demo{margin-top:20px!important}
html #onboarding.ob-vitrine .ob-proof-stats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:10px!important;margin-top:16px!important;width:100%;max-width:350px;border:0!important;background:none!important;overflow:visible!important}
html #onboarding.ob-vitrine .ob-proof-stats div{padding:12px 6px 11px!important;border:0!important;border-radius:16px!important;background:#fff!important;box-shadow:0 4px 0 var(--v-shadow-lip)!important}
html #onboarding.ob-vitrine .ob-proof-stats strong{font:800 23px/1 var(--v-display)!important;letter-spacing:-.02em!important;color:var(--v-accent)!important}
html #onboarding.ob-vitrine .ob-proof-stats div:nth-child(2) strong{color:var(--v-gold)!important}
html #onboarding.ob-vitrine .ob-proof-stats div:nth-child(3) strong{color:var(--v-ok)!important}
html #onboarding.ob-vitrine .ob-proof-stats span{margin-top:5px!important;color:var(--v-ink-3)!important;font:600 11.5px/1.2 var(--v-ui)!important}

/* Compte */
html #onboarding.ob-vitrine .ob-provider{min-height:56px!important;border:2.5px solid #fff!important;border-radius:16px!important;background:#fff!important;color:var(--v-ink)!important;box-shadow:0 4px 0 var(--v-shadow-lip)!important;font:700 15px/1.15 var(--v-display)!important}
html #onboarding.ob-vitrine .ob-provider:disabled{opacity:1!important;background:rgba(255,255,255,.92)!important}
html #onboarding.ob-vitrine .ob-provider small{padding:3px 6px!important;border-radius:6px!important;background:var(--v-sun-soft)!important;color:#8A5A00!important;font:800 9.5px/1 var(--v-display)!important;letter-spacing:.03em;text-transform:uppercase}
html #onboarding.ob-vitrine :is(.ob-auth-availability,.ob-auth-message,.ob-divider){color:rgba(255,255,255,.75)!important}
html #onboarding.ob-vitrine .ob-divider::before,html #onboarding.ob-vitrine .ob-divider::after{background:rgba(255,255,255,.22)!important}
html #onboarding.ob-vitrine .ob-local-proof{border:1.5px solid rgba(159,240,198,.45)!important;border-radius:16px!important;background:rgba(159,240,198,.12)!important;color:#fff!important}
html #onboarding.ob-vitrine .ob-local-proof b{color:#fff!important;font-family:var(--v-display)!important}
html #onboarding.ob-vitrine .ob-local-proof small{color:rgba(255,255,255,.78)!important}
html #onboarding.ob-vitrine .ob-local-proof>span{color:var(--v-mint)!important;background:rgba(159,240,198,.16)!important}
html #onboarding.ob-vitrine .ob-legal-note{color:rgba(255,255,255,.72)!important}
html #onboarding.ob-vitrine .ob-legal-link{color:var(--v-sun-hi)!important;font-weight:700!important;text-decoration:underline;text-underline-offset:2px}
html #onboarding.ob-vitrine .ob-legal-screen .legal-copy{margin-top:14px;padding:16px 18px 18px!important;border-radius:18px;background:#fff;box-shadow:0 4px 0 var(--v-shadow-lip)}
html #onboarding.ob-vitrine .ob-legal-screen .legal-copy :is(p,li){color:var(--v-ink-2)!important}

/* Écran final */
html #onboarding.ob-vitrine .ob-success{width:56px!important;height:56px!important;background:var(--v-mint)!important;color:var(--v-ink)!important;box-shadow:0 4px 0 rgba(27,22,64,.25),0 0 0 7px rgba(159,240,198,.2)!important}
html #onboarding.ob-vitrine .ob-screen.ready .mascot-stk{width:78px;margin:12px auto 8px;--mr:-4deg}
html #onboarding.ob-vitrine .ob-screen.ready .mstk-bub{right:auto;left:74%;bottom:calc(100% - 30px);transform-origin:12% 120%}
html #onboarding.ob-vitrine .ob-screen.ready .mstk-bub::after{right:auto;left:13px}
/* « C'est parti ! » (Elisa, 7 novembre, 12 h 13 : son GIF, plus large que l'autocollant) : à la même hauteur, la bulle au même endroit */
html #onboarding.ob-vitrine .ob-screen.ready .mascot-stk:has(.mstk-cat.is-parti){width:98px}
html #onboarding.ob-vitrine .ob-screen.ready .mascot-stk:has(.mstk-cat.is-parti) .mstk-bub{left:68%}
html #onboarding.ob-vitrine :is(.ob-ready-summary,.ob-ready-path){border:0!important;border-radius:18px!important;background:#fff!important;box-shadow:0 4px 0 var(--v-shadow-lip)!important;color:var(--v-ink)!important}
html #onboarding.ob-vitrine .ob-ready-row+.ob-ready-row{border-top:1.5px solid var(--v-line)!important}
html #onboarding.ob-vitrine .ob-ready-row b{font:800 15px/1.25 var(--v-display)!important;color:var(--v-ink)!important}
html #onboarding.ob-vitrine .ob-ready-row small{font:600 11.5px/1.2 var(--v-ui)!important;color:var(--v-ink-3)!important;text-transform:none}
html #onboarding.ob-vitrine .ob-ready-ico{width:36px!important;height:36px!important;border-radius:11px!important;background:var(--v-accent-soft)!important;color:var(--v-accent-ink)!important;font:800 14px/1 var(--v-display)!important}
html #onboarding.ob-vitrine .ob-ready-row:nth-child(2) .ob-ready-ico{background:var(--v-ok-soft)!important;color:var(--v-ok)!important}
html #onboarding.ob-vitrine .ob-ready-row:nth-child(3) .ob-ready-ico{background:var(--v-sun-soft)!important;color:var(--v-gold)!important;font-family:var(--v-mono)!important;font-size:12px!important}
html #onboarding.ob-vitrine .ob-ready-path{margin-top:12px!important}
html #onboarding.ob-vitrine .ob-ready-path-head{color:var(--v-ink)!important;font:800 13px/1.2 var(--v-display)!important}
html #onboarding.ob-vitrine .ob-ready-path-head span:last-child{color:var(--v-accent-ink)!important}
html #onboarding.ob-vitrine .ob-ready-days i{background:var(--v-line)!important;box-shadow:none!important}
html #onboarding.ob-vitrine .ob-ready-days i.on{background:var(--v-sun)!important;box-shadow:0 2px 0 var(--v-sun-lip)!important}
html #onboarding.ob-vitrine .ob-ready-path :is(p,small){color:var(--v-ink-3)!important}

/* Pied : bouton jaune à rebord et reflet, lien blanc */
html #onboarding.ob-vitrine .ob-foot{background:linear-gradient(to top,#4529CC 72%,rgba(69,41,204,0))!important;padding-top:18px!important}
html #onboarding.ob-vitrine .ob-cta{position:relative;overflow:hidden;isolation:isolate;min-height:58px!important;border:0!important;border-radius:18px!important;background:var(--v-sun)!important;color:var(--v-ink)!important;box-shadow:0 5px 0 var(--v-sun-lip)!important;font:800 17.5px/1 var(--v-display)!important;letter-spacing:-.01em!important;transition:transform .12s var(--v-press),box-shadow .12s var(--v-press)!important}
html #onboarding.ob-vitrine .ob-cta::after{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:obvShine 3.4s ease-in-out 1.2s infinite;pointer-events:none}
html #onboarding.ob-vitrine .ob-cta:active{transform:translateY(5px)!important;box-shadow:0 0 0 var(--v-sun-lip)!important}
html #onboarding.ob-vitrine .ob-cta:disabled{background:rgba(255,255,255,.14)!important;color:rgba(255,255,255,.72)!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)!important}
html #onboarding.ob-vitrine .ob-cta:disabled::after{display:none}
html #onboarding.ob-vitrine.ob-account-step .ob-cta{border:0!important;background:var(--v-sun)!important;color:var(--v-ink)!important;box-shadow:0 5px 0 var(--v-sun-lip)!important}
html #onboarding.ob-vitrine .ob-skip{color:#fff!important;font:700 15px/1 var(--v-display)!important;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:5px}
html #onboarding.ob-vitrine .ob-foot-note{color:rgba(255,255,255,.75)!important;font:500 12px/1.4 var(--v-ui)!important}
html #onboarding.ob-vitrine :is(.ob-cta,.ob-skip,.ob-answer,.ob-provider,.ob-back,.ob-legal-link,.ob-practice-run):focus-visible{outline:3px solid var(--v-sun)!important;outline-offset:3px!important}

/* Respirations et ajustements d’écran */
html #onboarding.ob-vitrine .ob-title+.ob-lead{margin-top:14px!important}
html #onboarding.ob-vitrine .ob-screen.welcome .ob-title+.ob-lead{margin-top:16px!important}
html #onboarding.ob-vitrine .oc-code .o{color:#EFEBFF!important}
html #onboarding.ob-vitrine .ob-practice .ob-chat{grid-template-columns:60px 1fr!important;margin:12px 0 14px!important}
html #onboarding.ob-vitrine .ob-practice .ob-chat img{width:60px!important;height:auto!important}
html #onboarding.ob-vitrine .ob-practice-reward{width:fit-content!important;max-width:100%}
html #onboarding.ob-vitrine .ob-foot{padding-top:12px!important}

@keyframes obvPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes obvStkIn{0%{opacity:0;transform:translateY(10px) scale(.6) rotate(-10deg)}100%{opacity:1;transform:none}}
@keyframes obvStkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) rotate(-2deg)}}
@keyframes obvStkPop{0%{opacity:0;transform:scale(.4) rotate(calc(var(--r,0deg) - 16deg))}70%{opacity:1}100%{opacity:1;transform:scale(1) rotate(var(--r,0deg))}}
@keyframes obvFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-6px) rotate(calc(var(--r,0deg) + 2deg))}}
@keyframes obvFade{to{opacity:.92}}
@keyframes obvDrift{0%,100%{translate:0 0}50%{translate:var(--dx,6px) var(--dy,-6px)}}
@keyframes obvTwinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.6) rotate(22deg);opacity:.7}}
@keyframes obvShine{0%,55%{left:-70%}100%{left:135%}}
@media (prefers-reduced-motion:reduce){
  html #onboarding.ob-vitrine :is(.ob-chat img,.ob-hs,.ob-hk,.ob-hello-stage::before,.ob-hello-stage::after){animation:none!important}
  html #onboarding.ob-vitrine .ob-hs{opacity:1;transform:rotate(var(--r,0deg))}
  html #onboarding.ob-vitrine .ob-hk{opacity:.92}
  html #onboarding.ob-vitrine .ob-cta::after{display:none}
  html #onboarding.ob-vitrine .ob-answer.on::before{animation:none}
}
html[data-motion="reduce"] #onboarding.ob-vitrine :is(.ob-chat img,.ob-hs,.ob-hk,.ob-hello-stage::before,.ob-hello-stage::after){animation:none!important}
html[data-motion="reduce"] #onboarding.ob-vitrine .ob-hs{opacity:1;transform:rotate(var(--r,0deg))}
html[data-motion="reduce"] #onboarding.ob-vitrine .ob-hk{opacity:.92}

/* ---------- 1er novembre, 13 h 46 : trois pages de plus, toujours aux couleurs de la vitrine ---------- */
/* Le parcours qui se construit : une carte blanche à rebord ; la barre jaune se remplit, les briques arrivent et se cochent en menthe,
   les modules du parcours s’allument en pastilles (ceux déjà acquis restent pâles, le départ est jaune). */
html #onboarding.ob-vitrine .ob-build .ob-title{margin-top:6px}
html #onboarding.ob-vitrine .ob-build-card{margin-top:18px;padding:16px;border-radius:22px;background:#fff;color:var(--v-ink);box-shadow:0 5px 0 var(--v-shadow-lip)}
html #onboarding.ob-vitrine .ob-build-bar{height:12px;border-radius:99px;background:var(--v-accent-soft);overflow:hidden}
html #onboarding.ob-vitrine .ob-build-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--v-sun),var(--v-sun-hi));transform:scaleX(0);transform-origin:0 50%}
html #onboarding.ob-vitrine .ob-build-pct{margin:8px 0 10px;color:var(--v-accent-ink);font:800 13px/1 var(--v-display);text-align:right}
html #onboarding.ob-vitrine .ob-build.is-built .ob-build-pct{color:var(--v-ok)}
html #onboarding.ob-vitrine .ob-build-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
html #onboarding.ob-vitrine .ob-build-list li{display:flex;align-items:center;gap:11px;opacity:.35;transform:translateY(4px);transition:opacity .3s,transform .35s var(--v-pop)}
html #onboarding.ob-vitrine .ob-build-list li.is-done{opacity:1;transform:none}
html #onboarding.ob-vitrine .ob-build-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--v-accent-soft);color:var(--v-accent-ink);font:800 15px/1 var(--v-display)}
html #onboarding.ob-vitrine .ob-build-list li>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
html #onboarding.ob-vitrine .ob-build-list b{font:800 14.5px/1.2 var(--v-display);color:var(--v-ink)}
html #onboarding.ob-vitrine .ob-build-list small{font:600 12px/1.3 var(--v-ui);color:var(--v-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html #onboarding.ob-vitrine .ob-build-ok{flex:none;width:24px;height:24px;border-radius:50%;background:var(--v-line);transition:background-color .2s}
html #onboarding.ob-vitrine .ob-build-list li.is-done .ob-build-ok{background:var(--v-mint) var(--v-check) center/14px no-repeat;animation:obOkPop .4s var(--v-pop)}
html #onboarding.ob-vitrine .ob-build-path{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px;padding-top:12px;border-top:1.5px solid var(--v-line)}
html #onboarding.ob-vitrine .ob-build-path span{padding:3px 8px;border-radius:99px;background:var(--v-accent-soft);color:var(--v-accent-ink);font:700 10.5px/1.3 var(--v-ui);
  opacity:0;transform:scale(.8);transition:opacity .25s,transform .3s var(--v-pop)}
html #onboarding.ob-vitrine .ob-build-path span.is-in{opacity:1;transform:none}
html #onboarding.ob-vitrine .ob-build-path span.is-skip{background:#F4F2FA;color:#A49FC0;text-decoration:line-through}
html #onboarding.ob-vitrine .ob-build-path span.is-start{background:var(--v-sun);color:var(--v-ink);box-shadow:0 2px 0 var(--v-sun-lip)}
@keyframes obOkPop{0%{transform:scale(.4)}100%{transform:scale(1)}}

/* La promesse (réf. Duolingo) : le nombre de jours en très grand, jaune soleil en relief, qui monte ; la mascotte ; la phrase. */
html #onboarding.ob-vitrine .ob-promise{align-items:center;text-align:center}
html #onboarding.ob-vitrine .ob-big{display:flex;flex-direction:column;align-items:center;margin-top:10px;line-height:.9}
html #onboarding.ob-vitrine .ob-big b{font:800 clamp(120px,40vw,168px)/.9 var(--v-display);letter-spacing:-.05em;color:var(--v-sun-hi);
  text-shadow:0 6px 0 var(--v-sun-lip),0 12px 0 rgba(27,22,64,.25);font-variant-numeric:tabular-nums;animation:obBigIn .6s var(--v-pop) both}
html #onboarding.ob-vitrine .ob-big span{margin-top:8px;color:var(--v-mint);font:800 15px/1 var(--v-ui);letter-spacing:.14em;text-transform:uppercase}
html #onboarding.ob-vitrine .ob-promise-stk{width:92px;height:auto;margin:14px auto 6px;rotate:-5deg;filter:drop-shadow(0 6px 0 rgba(27,22,64,.25));animation:obStkFloat 3.2s ease-in-out .6s infinite}
html #onboarding.ob-vitrine .ob-promise .ob-title{font-size:clamp(24px,6.6vw,29px)!important;text-align:center}
html #onboarding.ob-vitrine .ob-promise .ob-lead{text-align:center;margin-left:auto;margin-right:auto}
@keyframes obBigIn{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:none}}
@keyframes obStkFloat{0%,100%{translate:0 0;rotate:-5deg}50%{translate:0 -6px;rotate:-1deg}}

/* L’engagement : un cadre de certificat (double liseré violet sur blanc), le texte à son nom et la date ; une fois l’engagement pris
   (le doigt maintenu sur le bouton à l’empreinte, 5 novembre, 19 h 41), un tampon menthe « Validé ✓ » se pose de travers. */
html #onboarding.ob-vitrine .ob-pact .ob-title{margin-top:6px}
html #onboarding.ob-vitrine .ob-pact-card{position:relative;margin-top:18px;padding:20px 18px 14px;border-radius:22px;background:#fff;color:var(--v-ink);
  box-shadow:inset 0 0 0 3px var(--v-accent-soft),inset 0 0 0 5px #fff,inset 0 0 0 7px #D9CFFF,0 5px 0 var(--v-shadow-lip)}
html #onboarding.ob-vitrine .ob-pact-k{margin:0 0 10px;color:var(--v-accent-ink);font:800 11.5px/1.2 var(--v-ui);letter-spacing:.1em;text-transform:uppercase;text-align:center}
html #onboarding.ob-vitrine .ob-pact-txt{margin:0;color:var(--v-ink-2);font:600 15px/1.5 var(--v-ui);text-align:center}
html #onboarding.ob-vitrine .ob-pact-txt b{color:var(--v-ink);font-weight:800}
html #onboarding.ob-vitrine .ob-pact-stamp{position:absolute;right:14px;top:-14px;padding:6px 12px;border-radius:12px;background:var(--v-mint);color:var(--v-ink);font:800 13px/1 var(--v-display);
  box-shadow:0 3px 0 rgba(27,22,64,.25);rotate:8deg;opacity:0;transform:scale(1.6);pointer-events:none;transition:opacity .2s,transform .35s var(--v-pop)}
html #onboarding.ob-vitrine .ob-pact-card.is-signed .ob-pact-stamp{opacity:1;transform:none}

/* Tout tient sur un écran (13 h 46) : obFit ajoute un palier tant que la page déborde. */
/* ===== 9 novembre, 20 h 49 (Elisa : « problème d’espace, vérifie sur toute l’appli et l’onboarding ») =====
   Un seul pas vertical dans l’onboarding : 8 entre un titre et sa phrase, 12 entre la phrase et la bulle du chat, 16 entre la bulle et
   ce qu’on choisit (tuiles, réponses, champ), 12 entre deux réponses, 16 entre deux cartes, 24 avant un bloc à part (le téléphone, la
   notification). Mesuré page par page : on avait 9, 10, 11, 14, 17, 18, 20, 22, 25, 30, 34.
   Ici, avant les paliers ob-fit-N, qui resserrent encore quand l’écran est petit. */
html #onboarding.ob-vitrine .ob-screen>.ob-title+.ob-lead,html #onboarding.ob-vitrine .ob-screen>.ob-title+.ob-compte-sub{margin-top:8px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-lead{margin-bottom:0!important}
html #onboarding.ob-vitrine .ob-screen>.ob-chat{margin:12px 0 16px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-title+.ob-chat{margin-top:12px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-chat+:is(.ob-tiles,.ob-answer-list,.ob-field,.ob-practice-card,.ob-rappel-carte,.ob-ph){margin-top:0!important}
html #onboarding.ob-vitrine .ob-screen>.ob-chat+.ob-ph{margin-top:8px!important}   /* le téléphone : 24 */
html #onboarding.ob-vitrine .ob-screen>.ob-answer-list{display:flex;flex-direction:column;gap:12px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-answer-list>.ob-answer{margin:0!important}
html #onboarding.ob-vitrine .ob-screen>.ob-pays-carte+.ob-pays-changer,html #onboarding.ob-vitrine .ob-screen>.ob-tiles+.ob-genre,html #onboarding.ob-vitrine .ob-screen>.ob-build-hero+.ob-build-card,html #onboarding.ob-vitrine .ob-screen>.ob-tv+.ob-tv-profs{margin-top:16px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-pays-carte,html #onboarding.ob-vitrine .ob-screen>.ob-build-hero,html #onboarding.ob-vitrine .ob-screen>.ob-tv{margin-bottom:0!important}
html #onboarding.ob-vitrine .ob-screen>:is(.ob-rhythm-summary,.ob-apport)+.ob-modifiable{margin-top:12px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-rappel-carte+.ob-notif{margin-top:24px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-rappel-carte{margin-bottom:0!important}
html #onboarding.ob-vitrine .ob-screen>.ob-flow-top+.ob-chat{margin-top:16px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-compte-haut~.ob-title{margin-top:16px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-compte-sub+.ob-provider-list{margin-top:16px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-compte-sub{margin-bottom:0!important}
html #onboarding.ob-vitrine .ob-screen>.ob-provider-list{display:flex;flex-direction:column;gap:12px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-provider-list>.ob-provider{margin:0!important}
html #onboarding.ob-vitrine .ob-screen.welcome>.ob-welcome-demo{margin-top:16px!important}
html #onboarding.ob-vitrine .ob-screen.ready>.ob-success+.ob-title{margin-top:8px!important}
html #onboarding.ob-vitrine .ob-screen.ready>.mascot-stk+.ob-ready-summary{margin-top:12px!important}
html #onboarding.ob-vitrine .ob-screen.ready>.ob-ready-summary{display:flex;flex-direction:column;gap:8px!important}
html #onboarding.ob-vitrine .ob-screen.ready>.ob-ready-summary>.ob-ready-row{margin:0!important}
html #onboarding.ob-vitrine .ob-screen>.ob-flow-top{margin-bottom:0!important}
html #onboarding.ob-vitrine .ob-screen>.ob-flow-top+*{margin-top:16px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-flow-top+.ob-title{margin-top:8px!important}
html #onboarding.ob-vitrine .ob-screen.welcome>.ob-title{margin-bottom:0!important}
html #onboarding.ob-vitrine .ob-screen>.ob-lead+.ob-chat{margin-top:12px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-lead+.ob-pact-card{margin-top:24px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-chat.is-droite{margin-bottom:16px!important}
html #onboarding.ob-vitrine .ob-screen>.ob-chat+.ob-practice-card{margin-top:0!important}
html #onboarding.ob-vitrine .ob-screen>.ob-compte-haut{margin-bottom:0!important}
html #onboarding.ob-vitrine .ob-screen.ready>.ob-success{margin-bottom:0!important}
html #onboarding.ob-vitrine .ob-screen.ready>.mascot-stk{margin-bottom:0!important}

html #onboarding.ob-vitrine.ob-fit-1 .ob-title{font-size:clamp(24px,7vw,29px)!important}
html #onboarding.ob-vitrine.ob-fit-1 .ob-title+.ob-lead,html #onboarding.ob-vitrine.ob-fit-1 .ob-lead{margin-top:8px!important;font-size:14px!important}
html #onboarding.ob-vitrine.ob-fit-1 .ob-chat{grid-template-columns:58px 1fr!important;margin:10px 0 12px!important}
html #onboarding.ob-vitrine.ob-fit-1 .ob-chat img{width:58px!important}
html #onboarding.ob-vitrine.ob-fit-1 .ob-bubble{padding:10px 13px!important;font-size:15px!important}
html #onboarding.ob-vitrine.ob-fit-1 .ob-answer{min-height:54px!important;padding-top:7px!important;padding-bottom:7px!important}
html #onboarding.ob-vitrine.ob-fit-1 .ob-rhythm-list .ob-answer{min-height:58px!important}
html #onboarding.ob-vitrine.ob-fit-1 .ob-big b{font-size:clamp(96px,32vw,130px)}
html #onboarding.ob-vitrine.ob-fit-1 .ob-promise-stk{width:74px;margin:8px auto 4px}
html #onboarding.ob-vitrine.ob-fit-1 .ob-build-path{display:none}
html #onboarding.ob-vitrine.ob-fit-2 .ob-lead,html #onboarding.ob-vitrine.ob-fit-2 .ob-helper,html #onboarding.ob-vitrine.ob-fit-2 .ob-level-path,
html #onboarding.ob-vitrine.ob-fit-2 .ob-rhythm-summary,html #onboarding.ob-vitrine.ob-fit-2 .ob-practice-reward,html #onboarding.ob-vitrine.ob-fit-2 .ob-proof-stats{display:none!important}
html #onboarding.ob-vitrine.ob-fit-2 .ob-answer{min-height:48px!important}
html #onboarding.ob-vitrine.ob-fit-2 .ob-answer-list{gap:8px!important}
html #onboarding.ob-vitrine.ob-fit-2 .ob-promise-stk{display:none}
html #onboarding.ob-vitrine.ob-fit-2 .ob-build-list small{display:none}
html #onboarding.ob-vitrine.ob-fit-3 .ob-chat{display:none!important}
html #onboarding.ob-vitrine.ob-fit-3 .ob-level-hint,html #onboarding.ob-vitrine.ob-fit-3 .ob-welcome-demo,html #onboarding.ob-vitrine.ob-fit-3 .ob-ready-path{display:none!important}
html #onboarding.ob-vitrine.ob-fit-3 .ob-title{font-size:23px!important}
html #onboarding.ob-vitrine.ob-fit-3 .ob-screen.ready .mascot-stk,html #onboarding.ob-vitrine.ob-fit-3 .ob-hello-stage{display:none!important}
@media (prefers-reduced-motion:reduce){html #onboarding.ob-vitrine :is(.ob-big b,.ob-promise-stk,.ob-build-list li.is-done .ob-build-ok){animation:none!important}}

/* 15 h 12 : « rien de coupé », même sur les plus petits écrans. Dernier palier : tout se resserre encore, rien ne disparaît de plus. */
html #onboarding.ob-vitrine.ob-fit-4 .ob-title{font-size:21px!important;line-height:1.12!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-answer{min-height:42px!important;padding-top:5px!important;padding-bottom:5px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-rhythm-list .ob-answer{min-height:46px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-answer-list{gap:6px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-answer small{font-size:12px!important;line-height:1.25!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact-card{margin-top:10px;padding:14px 14px 10px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact-k{margin-bottom:6px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact-txt{font-size:13.5px;line-height:1.4}
html #onboarding.ob-vitrine.ob-fit-4 .ob-big b{font-size:clamp(80px,26vw,110px)}
html #onboarding.ob-vitrine.ob-fit-4 .ob-ready-row{padding-top:6px!important;padding-bottom:6px!important}
/* Le badge « Bientôt » a sa propre colonne : il ne recouvre plus « Continuer avec Apple / Google / un e-mail » sur les écrans étroits. */
html #onboarding.ob-vitrine .ob-provider{grid-template-columns:28px minmax(0,1fr) auto!important;column-gap:10px!important;padding:0 14px!important}
html #onboarding.ob-vitrine .ob-provider>span:not(.ob-provider-icon){min-width:0;overflow-wrap:normal}
html #onboarding.ob-vitrine.ob-fit-4 .ob-provider{min-height:46px!important;font-size:14px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-provider-list{gap:7px!important;margin-top:10px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-answer-icon{width:34px!important;height:34px!important;border-radius:11px!important}

/* ---------- 3 novembre, 13 h 25 : âge et profession, engagement centré, micro-interactions ----------
   « Demander l’âge et la profession (sélection) de manière UI/UX, collé à la DA de l’onboarding ; centré à la verticale pour le cadre
   signature ; améliorer les animations, les micro-interactions et l’onboarding de manière générale. » */

/* Âge et profession : des tuiles blanches à rebord, comme les réponses ; coche jaune soleil quand c’est choisi. */
html #onboarding.ob-vitrine .ob-tiles{display:grid;gap:11px;padding:2px 0 8px}
html #onboarding.ob-vitrine .ob-age-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
html #onboarding.ob-vitrine .ob-job-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html #onboarding.ob-vitrine .ob-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;margin:0;padding:12px 8px;
  border:2.5px solid #fff;border-radius:18px;background:#fff;color:var(--v-ink);box-shadow:0 4px 0 var(--v-shadow-lip);font:700 15px/1.2 var(--v-display);text-align:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .12s var(--v-press),box-shadow .12s var(--v-press),border-color .15s,background-color .15s}
html #onboarding.ob-vitrine .ob-tile:active{transform:translateY(4px);box-shadow:0 0 0 var(--v-shadow-lip)}
html #onboarding.ob-vitrine .ob-tile.on{border-color:var(--v-sun);background:#FFFBEB;box-shadow:0 4px 0 var(--v-sun-lip)}
html #onboarding.ob-vitrine .ob-tile.on:active{box-shadow:0 0 0 var(--v-sun-lip)}
html #onboarding.ob-vitrine .ob-tile.on::before{content:'';position:absolute;z-index:1;right:-9px;top:-9px;width:27px;height:27px;border-radius:50%;
  background:var(--v-sun) var(--v-check) center/15px no-repeat;box-shadow:0 2px 0 var(--v-sun-lip),0 0 0 3px #fff;animation:obvPop .35s var(--v-pop) both}
html #onboarding.ob-vitrine .ob-tile:focus-visible{outline:3px solid var(--v-sun);outline-offset:3px}
/* Âge : la tranche en grand chiffre, une couleur par tranche (celles des objectifs) */
html #onboarding.ob-vitrine .ob-age-tile{min-height:84px}
html #onboarding.ob-vitrine .ob-age-tile b{display:block;font:800 25px/1 var(--v-display);letter-spacing:-.03em;color:var(--v-accent-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
html #onboarding.ob-vitrine .ob-age-tile small{display:block;color:var(--v-ink-3);font:700 12px/1 var(--v-ui);letter-spacing:.02em}
html #onboarding.ob-vitrine .ob-age-tile:nth-child(2) b{color:var(--v-pink)}
html #onboarding.ob-vitrine .ob-age-tile:nth-child(3) b{color:var(--v-blue)}
html #onboarding.ob-vitrine .ob-age-tile:nth-child(4) b{color:var(--v-gold)}
html #onboarding.ob-vitrine .ob-age-tile:nth-child(5) b{color:var(--v-ok)}
html #onboarding.ob-vitrine .ob-age-tile:nth-child(6) b{color:var(--v-accent)}
/* Profession : la pastille de couleur au-dessus, le nom dessous (sur deux lignes au besoin) */
html #onboarding.ob-vitrine .ob-job-tile{min-height:104px;gap:9px;padding:14px 10px 12px}
html #onboarding.ob-vitrine .ob-job-tile>span:not(.ob-answer-icon){display:block;font:700 14.5px/1.22 var(--v-display);letter-spacing:-.01em;color:var(--v-ink);text-wrap:balance}
html #onboarding.ob-vitrine .ob-job-tile:nth-child(2) .ob-answer-icon{background:var(--v-blue-soft)!important;color:var(--v-blue)!important}
html #onboarding.ob-vitrine .ob-job-tile:nth-child(3) .ob-answer-icon{background:var(--v-pink-soft)!important;color:var(--v-pink)!important}
html #onboarding.ob-vitrine .ob-job-tile:nth-child(4) .ob-answer-icon{background:var(--v-sun-soft)!important;color:var(--v-gold)!important}
html #onboarding.ob-vitrine .ob-job-tile:nth-child(5) .ob-answer-icon{background:var(--v-ok-soft)!important;color:var(--v-ok)!important}
html #onboarding.ob-vitrine .ob-job-tile:nth-child(6) .ob-answer-icon{background:#F1EFF8!important;color:var(--v-ink-2)!important}
/* Tout tient sur un écran (obFit) : les tuiles se resserrent avec les autres paliers */
html #onboarding.ob-vitrine.ob-fit-1 .ob-age-tile{min-height:72px}
html #onboarding.ob-vitrine.ob-fit-1 .ob-job-tile{min-height:90px;gap:7px;padding:11px 8px 10px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-tiles{gap:8px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-job-tile{min-height:78px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-job-tile .ob-answer-icon{width:36px!important;height:36px!important;border-radius:11px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-age-tile{min-height:56px;gap:3px;padding:8px 6px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-age-tile b{font-size:21px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-job-tile{min-height:0;gap:4px;padding:7px 6px 8px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-job-tile .ob-answer-icon{width:30px!important;height:30px!important;border-radius:10px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-job-tile .ob-answer-icon svg{width:17px!important;height:17px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-job-tile>span:not(.ob-answer-icon){font-size:12.5px;line-height:1.18}
html #onboarding.ob-vitrine .ob-job-tile>span:not(.ob-answer-icon){-webkit-hyphens:auto;hyphens:auto}

/* La promesse : le chiffre, la mascotte et la phrase au milieu de l’écran, sous l’en-tête */
html #onboarding.ob-vitrine .ob-screen.ob-promise{min-height:100%}
html #onboarding.ob-vitrine .ob-promise .ob-big{margin-top:auto}
html #onboarding.ob-vitrine .ob-promise .ob-title{margin-bottom:auto;padding-bottom:12px}

/* Le halo jaune du coin haut droit (::after) dépasse de 190 px : #onboarding (overflow:hidden) pouvait donc défiler sur le côté
   dès qu’un élément était amené à l’écran (vu en test : tout l’onboarding décalé de 24 px vers la gauche). Rogné sans défilement
   possible : rien ne bouge plus horizontalement. */
@supports (overflow:clip){html #onboarding.ob-vitrine{overflow:clip}}

/* L’engagement : le cadre de signature au milieu de l’espace entre le titre et le bouton */
html #onboarding.ob-vitrine .ob-screen.ob-pact{min-height:100%}
html #onboarding.ob-vitrine .ob-pact .ob-lead{margin-bottom:18px}
html #onboarding.ob-vitrine .ob-pact .ob-pact-card{margin-top:auto;margin-bottom:auto}
html #onboarding.ob-vitrine .ob-pact-txt+.ob-pact-txt{margin-top:8px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact-txt+.ob-pact-txt{margin-top:5px}
/* « Chaque minute compte pour atteindre ton objectif. » reste lisible sur les téléphones courants et dans le cadre d’un ordinateur
   (le palier 2 cache les sous-titres des autres étapes) ; il ne part qu’au palier 5, sur le plus petit écran. Au palier 4, le cadre
   se resserre pour tenir sans défiler. */
html #onboarding.ob-vitrine.ob-fit-2 .ob-pact .ob-lead{display:block!important;margin-top:6px!important;margin-bottom:12px;font-size:13.5px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact .ob-lead{margin-bottom:8px;font-size:13px!important}
html #onboarding.ob-vitrine.ob-fit-5 .ob-pact .ob-lead{display:none!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact .ob-title{margin-top:0}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact .ob-pact-txt{font-size:13px;line-height:1.38}
/* Première requête, plus petit écran (palier 5) : la console et le résultat se resserrent pour tenir sans défiler. */
html #onboarding.ob-vitrine.ob-fit-5 .ob-practice-code{padding:8px 12px 2px!important;font-size:12.5px!important;line-height:1.5!important}
html #onboarding.ob-vitrine.ob-fit-5 .ob-practice-result{margin-top:4px!important}
html #onboarding.ob-vitrine.ob-fit-5 .ob-practice-result>div:first-child{padding:7px 10px!important}
html #onboarding.ob-vitrine.ob-fit-5 .ob-practice-table{margin-top:6px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-practice-table span{padding:4px 7px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-practice-card{padding-bottom:8px!important}
/* 23 h 21 : « Lance la requête pour découvrir le résultat » (bouton inactif de la première requête) tient sur une ligne dès 375 px,
   en plus petit ; au plus petit écran, sur deux lignes aérées. Le bouton actif « Continuer » garde sa taille. */
html #onboarding.ob-vitrine[data-ob-slide="practice"] .ob-cta:disabled{font-size:15px!important;line-height:1.2!important;padding-left:10px!important;padding-right:10px!important;text-wrap:balance}
/* 23 h 21 : le titre de la première requête tient sur deux lignes ; au plus petit écran, il se resserre un peu plus. */
html #onboarding.ob-vitrine.ob-fit-5 .ob-practice .ob-title{font-size:19px!important;line-height:1.12!important}

/* Changer d’étape : l’en-tête (retour, progression) reste en place ; le contenu glisse dans le sens du parcours (vers la gauche en
   avançant, vers la droite en revenant), sans flou : plus net et plus léger pour le téléphone. Les éléments qui ont leur propre
   entrée (mascotte, coche de fin, aides) la gardent.
   6 novembre, 23 h 16 (Elisa, captures des étapes 6 et 5 : « Il y a des pages qui sautent » ; à la question, « La page bouge » :
   elle apparaît puis se décale ou change de taille juste après) : le contenu ne glisse plus, les réponses et les tuiles ne
   rebondissent plus en arrivant (elles grossissaient en descendant de 8 px, puis dépassaient leur taille), la bulle ne s’ouvre plus
   en grandissant. La page apparaît en fondu, déjà à sa place : un fondu court, les blocs l’un après l’autre, puis plus rien ne bouge.
   Le rebond reste au toucher d’une réponse (ob-selection-update), là où c’est le doigt qui le provoque. */
html #onboarding.ob-vitrine .ob-screen{animation:none!important}
html #onboarding.ob-vitrine .ob-slide.out{animation:none!important}
html #onboarding.ob-vitrine .ob-slide.out .ob-screen>:not(.ob-flow-top){animation:obvOutFwd .14s ease-in both!important}
html #onboarding.ob-vitrine[data-ob-dir="back"] .ob-slide.out .ob-screen>:not(.ob-flow-top){animation-name:obvOutBack!important}
html #onboarding.ob-vitrine.ob-enter .ob-screen>:not(.ob-flow-top):not(.ob-promise-stk):not(.ob-success):not(.mascot-stk):not(.ob-name-preview):not(.ob-level-hint):not(.ob-rhythm-summary):not(.ob-practice-reward):not(.ob-auth-message){
  animation:obvApparait .26s ease-out backwards}
html #onboarding.ob-vitrine.ob-enter[data-ob-dir="fwd"] .ob-screen>:not(.ob-flow-top):not(.ob-promise-stk):not(.ob-success):not(.mascot-stk):not(.ob-name-preview):not(.ob-level-hint):not(.ob-rhythm-summary):not(.ob-practice-reward):not(.ob-auth-message){
  animation-name:obvInFwd;animation-duration:.26s}
html #onboarding.ob-vitrine.ob-enter[data-ob-dir="back"] .ob-screen>:not(.ob-flow-top):not(.ob-promise-stk):not(.ob-success):not(.mascot-stk):not(.ob-name-preview):not(.ob-level-hint):not(.ob-rhythm-summary):not(.ob-practice-reward):not(.ob-auth-message){
  animation-name:obvInBack;animation-duration:.26s}
html #onboarding.ob-vitrine.ob-enter .ob-screen>:nth-child(2){animation-delay:.03s}
html #onboarding.ob-vitrine.ob-enter .ob-screen>:nth-child(3){animation-delay:.06s}
html #onboarding.ob-vitrine.ob-enter .ob-screen>:nth-child(4){animation-delay:.09s}
html #onboarding.ob-vitrine.ob-enter .ob-screen>:nth-child(n+5){animation-delay:.12s}
@keyframes obvOutFwd{to{opacity:0}}
@keyframes obvOutBack{to{opacity:0}}
@keyframes obvInFwd{from{opacity:0}to{opacity:1}}
@keyframes obvInBack{from{opacity:0}to{opacity:1}}
@keyframes obvApparait{from{opacity:0}to{opacity:1}}
@keyframes obvRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Les réponses et les tuiles arrivent l’une après l’autre, après le titre : en fondu, à leur place (23 h 16) */
html #onboarding.ob-vitrine.ob-enter :is(.ob-answer,.ob-tile){animation:obvApparait .24s ease-out backwards;animation-delay:calc(var(--d,0ms) * .5 + .06s)}
/* Un choix : la carte rebondit, sa pastille (ou son chiffre) fait un petit saut */
html #onboarding.ob-vitrine.ob-selection-update .ob-tile.on{animation:iosSelectedPop .28s var(--spring-ios,cubic-bezier(.2,.9,.3,1)) both}
html #onboarding.ob-vitrine.ob-selection-update :is(.ob-answer,.ob-tile).on :is(.ob-answer-icon,.ob-radio),
html #onboarding.ob-vitrine.ob-selection-update .ob-age-tile.on b{animation:obvJoyIcon .5s var(--v-pop)}
@keyframes obvJoyIcon{0%{transform:none}35%{transform:scale(1.2) rotate(-9deg)}65%{transform:scale(.95) rotate(4deg)}100%{transform:none}}
/* À la souris : la carte se soulève sous le pointeur */
@media (hover:hover) and (pointer:fine){
  html #onboarding.ob-vitrine :is(.ob-answer,.ob-tile):not(.on):not(:active):hover{transform:translateY(-2px)!important;box-shadow:0 6px 0 var(--v-shadow-lip)!important}
  html #onboarding.ob-vitrine .ob-cta:not(:disabled):not(:active):hover{transform:translateY(-1px)!important;box-shadow:0 6px 0 var(--v-sun-lip)!important}
}

/* La mascotte : elle arrive d’un rebond en entrant sur l’étape, plus à chaque choix (l’écran est redessiné) ; sa bulle s’ouvre juste
   après elle ; quand la première requête réussit, elle saute de joie. */
html #onboarding.ob-vitrine:not(.ob-enter) .ob-chat img{animation:obvStkBob 3.8s ease-in-out infinite}
html #onboarding.ob-vitrine.ob-enter .ob-bubble{animation:obvApparait .24s ease-out .06s both}
html #onboarding.ob-vitrine.ob-cheer .ob-chat img{animation:obvJoy .8s var(--v-pop) both}
/* Le GIF de la question bouge déjà : il ne se balance plus par-dessus ; il arrive et saute de joie au choix, comme l'autocollant */
html #onboarding.ob-vitrine .ob-chat img.is-question{animation:obvApparait .24s ease-out both}
html #onboarding.ob-vitrine:not(.ob-enter) .ob-chat img.is-question{animation:none}
html #onboarding.ob-vitrine.ob-cheer .ob-chat img.is-question{animation:obvJoy .8s var(--v-pop) both}
/* D'autres chats dans les bulles (7 novembre, 14 h 04 : le coucou, « C'est parti ! », le présentateur) : leur forme, et les mêmes
   mouvements que la question ; le présentateur se met à droite de sa bulle, la pointe tournée vers lui */
html #onboarding.ob-vitrine .ob-chat img.is-coucou{aspect-ratio:289/352}
html #onboarding.ob-vitrine .ob-chat img.is-parti{aspect-ratio:302/359}
html #onboarding.ob-vitrine .ob-chat img.is-presente{aspect-ratio:315/362}
/* 14 h 27 : le réveil qui sonne, dans la bulle du rappel */
html #onboarding.ob-vitrine .ob-chat img.is-reveil{aspect-ratio:272/311}
/* 15 h 38 : il hoche la tête (les questions répondues), il écrit son pseudo sur un badge */
html #onboarding.ob-vitrine .ob-chat img.is-oui{aspect-ratio:294/351}
html #onboarding.ob-vitrine .ob-chat img.is-pseudo{aspect-ratio:298/305}
/* Le badge du pseudo se lit : le chat un peu plus grand sur cette page, qui a la place */
html #onboarding.ob-vitrine .ob-pseudo .ob-chat:has(img.is-pseudo){grid-template-columns:90px 1fr!important}
html #onboarding.ob-vitrine .ob-pseudo .ob-chat img.is-pseudo{width:90px!important}
html #onboarding.ob-vitrine .ob-chat img.is-gif{animation:obvApparait .24s ease-out both}
html #onboarding.ob-vitrine:not(.ob-enter) .ob-chat img.is-gif{animation:none}
html #onboarding.ob-vitrine.ob-cheer .ob-chat img.is-gif{animation:obvJoy .8s var(--v-pop) both}
html #onboarding.ob-vitrine .ob-chat.is-droite{direction:rtl}
html #onboarding.ob-vitrine .ob-chat.is-droite>*{direction:ltr}
html #onboarding.ob-vitrine .ob-chat.is-droite img{rotate:5deg}
html #onboarding.ob-vitrine .ob-chat.is-droite .ob-bubble::before{left:auto!important;right:-10px!important;border-left:0!important;border-bottom:0!important;border-top:3px solid var(--v-ink)!important;border-right:3px solid var(--v-ink)!important;border-radius:0 3px 0 0!important}
@keyframes obvBubbleIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes obvJoy{0%{transform:none}28%{transform:translateY(-14px) rotate(-10deg) scale(1.06)}52%{transform:translateY(0) rotate(4deg)}74%{transform:translateY(-5px) rotate(-3deg)}100%{transform:none}}

/* La progression : en avançant, le segment de l’étape se remplit de jaune soleil, de gauche à droite (l’ancienne animation était
   bloquée par un transform:none!important). Rien ne rejoue quand on fait un choix. */
html #onboarding.ob-vitrine .ob-mini-progress i.on{background:rgba(255,255,255,.2)!important;animation:none!important}
html #onboarding.ob-vitrine .ob-mini-progress i.on::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--v-sun);transform-origin:0 50%}
html #onboarding.ob-vitrine.ob-enter[data-ob-dir="fwd"] .ob-mini-progress i.on::before{animation:obvSegFill .5s cubic-bezier(.3,.8,.3,1) .08s both}
@keyframes obvSegFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Le bouton principal : il s’allume en douceur quand il devient utilisable, puis rebondit avec un reflet (obCtaWake). */
html #onboarding.ob-vitrine .ob-cta{transition:transform .12s var(--v-press),box-shadow .12s var(--v-press),background-color .25s ease,color .25s ease!important}
html #onboarding.ob-vitrine .ob-cta.is-awake{animation:obvCtaWake .55s var(--v-pop)}
html #onboarding.ob-vitrine .ob-cta.is-awake::after{animation:obvShineOnce .75s ease-out both}
@keyframes obvCtaWake{0%{transform:scale(.97)}45%{transform:scale(1.035)}100%{transform:none}}
@keyframes obvShineOnce{from{left:-70%}to{left:135%}}

@media (prefers-reduced-motion:reduce){
  html #onboarding.ob-vitrine .ob-slide.out .ob-screen>*,html #onboarding.ob-vitrine.ob-enter .ob-screen>*,html #onboarding.ob-vitrine :is(.ob-answer,.ob-tile),
  html #onboarding.ob-vitrine :is(.ob-answer,.ob-tile) *,html #onboarding.ob-vitrine .ob-bubble,html #onboarding.ob-vitrine .ob-chat img,
  html #onboarding.ob-vitrine .ob-mini-progress i.on::before,html #onboarding.ob-vitrine .ob-cta.is-awake,html #onboarding.ob-vitrine .ob-cta.is-awake::after{animation:none!important}
}
html[data-motion="reduce"] #onboarding.ob-vitrine :is(.ob-screen>*,.ob-answer,.ob-tile,.ob-answer *,.ob-tile *,.ob-bubble,.ob-chat img,.ob-cta.is-awake),
html[data-motion="reduce"] #onboarding.ob-vitrine .ob-mini-progress i.on::before,html[data-motion="reduce"] #onboarding.ob-vitrine .ob-cta.is-awake::after{animation:none!important}

/* ---------- 3 novembre, 17 h 32 : prénom accueilli en animation, parcours « waouh », requête animée, dernière page animée ----------
   Les états de repos sont les états finaux : les animations ne jouent que si l’appareil ne demande pas de réduire les mouvements
   (bloc « no-preference » ci-dessous), et rien n’y reste caché. */

/* Réf. 6 et 7, « la page s’élargit » : sur la promesse, l’en-tête (retour, étape, progression) se resserrait au centre de l’écran,
   puis reprenait toute la largeur sur l’engagement. Il garde maintenant toute la largeur, comme sur les autres étapes. */
html #onboarding.ob-vitrine .ob-promise>.ob-flow-top{align-self:stretch;width:100%;text-align:left}

/* 23 h 03, « l’écran n’est pas centré » (l’accueil) : le centrage reposait sur deux marges automatiques, au-dessus de la marque et
   sous le dernier bloc. Sur un téléphone, le dernier bloc (les trois chiffres) est retiré pour que tout tienne (obFit) : sa marge
   disparaissait avec lui et tout l’espace libre passait au-dessus, le contenu tassé en bas. Deux cales invisibles, en tête et en
   fin d’écran, se partagent maintenant l’espace, quel que soit le bloc retiré ; si la page est pleine, elles valent 0 et rien n’est
   coupé en haut. */
html #onboarding.ob-vitrine .ob-screen.welcome>.ob-brand{margin-top:0}
html #onboarding.ob-vitrine .ob-screen.welcome>:last-child{margin-bottom:0}
html #onboarding.ob-vitrine .ob-screen.welcome::before,html #onboarding.ob-vitrine .ob-screen.welcome::after{content:'';flex:none;width:100%;height:0}
html #onboarding.ob-vitrine .ob-screen.welcome::before{margin-bottom:auto}
html #onboarding.ob-vitrine .ob-screen.welcome::after{margin-top:auto}

/* Le prénom : « Enchantée, Elisa ! J’ai hâte d’en savoir plus sur toi. », en grand, sur deux lignes */
html #onboarding.ob-vitrine .ob-name-preview{position:relative;display:flex;align-items:center;gap:13px;margin-top:16px!important;padding:13px 16px 13px 13px!important;
  border:1.5px solid rgba(255,255,255,.26)!important;border-radius:20px!important;background:rgba(255,255,255,.12)!important;animation:none!important}
html #onboarding.ob-vitrine .ob-name-preview[hidden]{display:none!important}
html #onboarding.ob-vitrine .ob-name-initial{flex:none;width:44px!important;height:44px!important;font-size:20px!important}
html #onboarding.ob-vitrine .ob-name-msg{display:flex;flex-direction:column;gap:3px;min-width:0}
html #onboarding.ob-vitrine .ob-name-msg>b{color:#fff;font:800 19px/1.2 var(--v-display);letter-spacing:-.015em;overflow-wrap:anywhere}
html #onboarding.ob-vitrine .ob-name-msg>b em{font-style:normal;color:var(--v-sun-hi);background:var(--v-swoosh) no-repeat 0 100%/100% .26em;padding-bottom:.06em}
html #onboarding.ob-vitrine .ob-name-sub{color:rgba(255,255,255,.9);font:600 15px/1.35 var(--v-ui)}
html #onboarding.ob-vitrine .ob-name-spark{position:absolute;width:17px;height:17px;opacity:0;pointer-events:none;background:var(--v-sun-hi);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat}
html #onboarding.ob-vitrine .ob-name-spark:nth-of-type(1){right:18px;top:-9px}
html #onboarding.ob-vitrine .ob-name-spark:nth-of-type(2){left:44px;bottom:-7px;width:12px;height:12px;background:var(--v-mint)}
html #onboarding.ob-vitrine.ob-fit-2 .ob-name-sub{font-size:14px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-name-preview{margin-top:10px!important;padding:9px 12px 9px 10px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-name-initial{width:36px!important;height:36px!important;font-size:17px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-name-msg>b{font-size:17px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-name-sub{font-size:13.5px}

/* Le parcours qui se construit : la mascotte au travail à côté du titre, l’étiquette et le pourcentage au-dessus d’une barre rayée,
   la brique en cours surlignée, sa pastille qui tourne, puis la coche ; à la fin, reflet, étincelles et halo. */
html #onboarding.ob-vitrine .ob-build-hero{position:relative;margin-top:6px}
html #onboarding.ob-vitrine .ob-build-hero .ob-title{margin:0!important;padding-right:74px;text-align:left}
/* La mascotte se pose à droite du titre, sans ajouter de hauteur : la carte et ses modules restent dans l’écran. Elle prend la
   hauteur du titre (un peu plus) : quand le titre se resserre (obFit), elle rapetisse avec lui et ne touche pas la progression. */
html #onboarding.ob-vitrine .ob-build-stk{position:absolute;right:4px;bottom:-2px;height:calc(100% + 12px);width:auto;max-width:62px;object-fit:contain;rotate:6deg;transform-origin:50% 92%;filter:drop-shadow(0 5px 0 rgba(27,22,64,.25));-webkit-user-drag:none;user-select:none;pointer-events:none}
/* « Il tape sur son ordi » (Elisa, 7 novembre, 12 h 06 : son GIF) : plus large que l'autocollant, à la même hauteur ; la place à
   droite du titre le permet (le texte du titre s'arrête bien avant) */
html #onboarding.ob-vitrine .ob-build-stk.is-ordi{max-width:76px}
html #onboarding.ob-vitrine .ob-build-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 9px}
html #onboarding.ob-vitrine .ob-build-k{min-width:0;color:var(--v-accent-ink);font:800 11.5px/1.2 var(--v-ui);letter-spacing:.08em;text-transform:uppercase}
html #onboarding.ob-vitrine .ob-build-pct{flex:none;margin:0;color:var(--v-ink);font:800 24px/1 var(--v-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right}
html #onboarding.ob-vitrine .ob-build.is-built :is(.ob-build-k,.ob-build-pct){color:var(--v-ok)}
html #onboarding.ob-vitrine .ob-build-track{position:relative;margin-bottom:12px}
html #onboarding.ob-vitrine .ob-build-bar{position:relative;height:14px}
html #onboarding.ob-vitrine .ob-build-bar i{width:100%;transform:none;clip-path:inset(0 100% 0 0 round 99px);
  background:repeating-linear-gradient(-45deg,var(--v-sun) 0 9px,var(--v-sun-hi) 9px 18px);background-size:25.456px 25.456px}
html #onboarding.ob-vitrine .ob-build.is-built .ob-build-bar i{background:linear-gradient(90deg,var(--v-sun),var(--v-sun-hi))}
html #onboarding.ob-vitrine .ob-build-bar::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-120%)}
html #onboarding.ob-vitrine .ob-build-burst{position:absolute;right:4px;top:50%;width:0;height:0;pointer-events:none}
html #onboarding.ob-vitrine .ob-build-burst i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--v-sun);opacity:0}
html #onboarding.ob-vitrine .ob-build-burst i:nth-child(even){background:var(--v-mint)}
html #onboarding.ob-vitrine .ob-build-burst i:nth-child(3n){left:-7px;top:-7px;width:14px;height:14px;border-radius:0;background:var(--v-accent-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat}
/* Les étincelles et les cartes qui glissent ne doivent jamais faire défiler l’étape sur le côté. */
html #onboarding.ob-vitrine #ob-body{overflow-x:hidden}
html #onboarding.ob-vitrine .ob-build-list{gap:8px}
html #onboarding.ob-vitrine .ob-build-path{margin-top:12px;padding-top:10px}
html #onboarding.ob-vitrine .ob-build-list li{position:relative;opacity:.4;transform:translateX(10px);transition:opacity .3s,transform .4s var(--v-pop)}
html #onboarding.ob-vitrine .ob-build-list li::before{content:'';position:absolute;z-index:0;inset:-5px -8px;border-radius:14px;background:var(--v-accent-soft);opacity:0;transform:scale(.96);transition:opacity .25s,transform .3s var(--v-pop)}
html #onboarding.ob-vitrine .ob-build-list li>*{position:relative;z-index:1}
html #onboarding.ob-vitrine .ob-build-list li:is(.is-active,.is-done){opacity:1;transform:none}
html #onboarding.ob-vitrine .ob-build-list li.is-active::before{opacity:1;transform:none}
html #onboarding.ob-vitrine .ob-build-ico{background:#F1EFF8;color:var(--v-ink-3);transition:background-color .25s,color .25s}
html #onboarding.ob-vitrine .ob-build-list li.is-active .ob-build-ico{background:#fff;color:var(--v-accent-ink)}
html #onboarding.ob-vitrine .ob-build-list li.is-done:nth-child(1) .ob-build-ico{background:var(--v-sun-soft);color:var(--v-gold)}
html #onboarding.ob-vitrine .ob-build-list li.is-done:nth-child(2) .ob-build-ico{background:var(--v-accent-soft);color:var(--v-accent-ink)}
html #onboarding.ob-vitrine .ob-build-list li.is-done:nth-child(3) .ob-build-ico{background:var(--v-blue-soft);color:var(--v-blue)}
html #onboarding.ob-vitrine .ob-build-list li.is-done:nth-child(4) .ob-build-ico{background:var(--v-pink-soft);color:var(--v-pink)}
html #onboarding.ob-vitrine .ob-build-list li.is-done:nth-child(5) .ob-build-ico{background:var(--v-ok-soft);color:var(--v-ok)}
html #onboarding.ob-vitrine .ob-build-list li.is-active .ob-build-ok{box-sizing:border-box;background:none;border:3px solid rgba(106,77,244,.2);border-top-color:var(--v-accent)}
html #onboarding.ob-vitrine .ob-build-path span{transform:scale(.6) rotate(-8deg);transition:opacity .25s,transform .4s var(--v-pop)}
html #onboarding.ob-vitrine .ob-build-path span.is-in{opacity:1;transform:none}
/* ---------- 4 novembre, 1 h 31 : « maîtrise de l’espace, ou fais les cadres plus grands en vertical » ----------
   Sur l’iPhone d’Elisa, obFit retirait d’un bloc les modules du parcours (ou la mascotte de la première requête) et laissait
   200 px vides au-dessus du bouton. La carte remplit maintenant la hauteur jusqu’au bouton : ses briques s’espacent, et les
   modules prennent la place qui reste (ceux qui ne tiennent pas entiers sont masqués, obFitChips). */
html #onboarding.ob-vitrine .ob-screen.ob-build{height:100%}
html #onboarding.ob-vitrine .ob-build-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
html #onboarding.ob-vitrine :is(.ob-build-top,.ob-build-track){flex:none}
html #onboarding.ob-vitrine .ob-build-list{flex:1 0 auto;justify-content:space-evenly}
html #onboarding.ob-vitrine .ob-build-path{position:relative;flex:0 1 auto;min-height:56px;overflow:hidden;align-content:flex-start}
html #onboarding.ob-vitrine .ob-build-path span.is-cut{visibility:hidden}
html #onboarding.ob-vitrine.ob-fit-1 .ob-build-path{display:flex}
html #onboarding.ob-vitrine.ob-fit-3 .ob-build-path{display:none}
/* La première requête, avant l’exécution : le contenu centré entre l’en-tête et le bouton. Après : la deuxième page, la console
   retournée prend toute la hauteur, ses lignes de résultat s’agrandissent. */
html #onboarding.ob-vitrine .ob-screen.ob-practice{min-height:100%;perspective:1100px}
html #onboarding.ob-vitrine .ob-screen.ob-practice:not(.is-result)>.ob-title{margin-top:auto!important}
html #onboarding.ob-vitrine .ob-screen.ob-practice:not(.is-result)>.ob-practice-card{margin-bottom:auto!important}
html #onboarding.ob-vitrine .ob-screen.ob-practice.is-result{height:100%;min-height:0}
html #onboarding.ob-vitrine .ob-practice.is-result .ob-practice-card{flex:1 0 auto;display:flex;flex-direction:column}
html #onboarding.ob-vitrine .ob-practice.is-result .ob-practice-result{flex:1 0 auto;display:flex;flex-direction:column}
html #onboarding.ob-vitrine .ob-practice.is-result .ob-practice-table{flex:1 0 auto;grid-auto-rows:1fr;align-items:center}
html #onboarding.ob-vitrine .ob-practice.is-result .ob-practice-table span{display:flex;align-items:center;height:100%;box-sizing:border-box}
html #onboarding.ob-vitrine .ob-practice.is-result .ob-lead b{color:var(--v-sun-hi)}
/* La phrase qui explique le résultat compte plus que le badge : au palier 2, c’est le badge qui part ; la phrase ne part qu’au palier 4. */
html #onboarding.ob-vitrine.ob-fit-2 .ob-practice.is-result .ob-lead{display:block!important}
html #onboarding.ob-vitrine.ob-fit-2 .ob-practice.is-result .ob-practice-reward{display:none!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-practice.is-result .ob-lead{display:none!important}
/* Le bouton de la construction : « Découvre ce que tu vas apprendre » et sa flèche */
html #onboarding.ob-vitrine .ob-cta-arrow{display:inline-flex;margin-left:8px;vertical-align:-3px}
html #onboarding.ob-vitrine .ob-cta-arrow svg{width:19px;height:19px}
/* « Découvre ce que tu vas apprendre » et sa flèche tiennent sur une ligne dès 375 px de large (plus petit et moins de marge) */
html #onboarding.ob-vitrine .ob-foot{container-type:inline-size}
html #onboarding.ob-vitrine[data-ob-slide="build"] .ob-cta{padding-left:12px!important;padding-right:12px!important}
@container (max-width:370px){html #onboarding.ob-vitrine[data-ob-slide="build"] .ob-cta{font-size:16px!important}}

/* 23 h 21 : la comète en tête de la barre, les nombres qui montent, les étoiles de la mascotte, les confettis (obBuildConfetti) */
html #onboarding.ob-vitrine .ob-build-head{position:absolute;z-index:1;top:7px;left:calc(var(--k,0) * 100%);width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0 16%,rgba(255,236,170,.95) 28%,rgba(255,200,61,.5) 50%,rgba(255,200,61,0) 70%);opacity:0;transition:opacity .3s}
html #onboarding.ob-vitrine .ob-build:not(.is-built) .ob-build-track[style*="--k"] .ob-build-head{opacity:1}
html #onboarding.ob-vitrine .ob-n{font-variant-numeric:tabular-nums}
html #onboarding.ob-vitrine .ob-build-spark{position:absolute;z-index:2;width:16px;height:16px;opacity:0;pointer-events:none;background:var(--v-sun-hi);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat}
html #onboarding.ob-vitrine .ob-build-spark:nth-of-type(1){right:54px;top:-8px}
html #onboarding.ob-vitrine .ob-build-spark:nth-of-type(2){right:-6px;top:8px;width:12px;height:12px;background:var(--v-mint)}
html #onboarding.ob-vitrine .ob-build-spark:nth-of-type(3){right:58px;bottom:2px;width:11px;height:11px;background:#fff}
html #onboarding.ob-vitrine.ob-fit-3 .ob-build-spark{display:none}
html #onboarding.ob-vitrine>.ob-build-confetti{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
html #onboarding.ob-vitrine>.ob-build-confetti i{position:absolute;display:block}
html #onboarding.ob-vitrine.ob-fit-2 .ob-build-pct{font-size:21px}
html #onboarding.ob-vitrine.ob-fit-3 .ob-build-stk{display:none}
html #onboarding.ob-vitrine.ob-fit-3 .ob-build-hero .ob-title{padding-right:0;text-align:center}
html #onboarding.ob-vitrine.ob-fit-4 .ob-build-top{margin-bottom:6px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-build-track{margin-bottom:9px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-build-list{gap:7px}

/* La première requête : chaque ligne se tape avec son curseur, « Exécuter » palpite ; à l’appui, il tourne pendant qu’un trait
   balaie la requête ; le résultat se déplie, « Paris » (le filtre du WHERE) s’allume, le badge se pose en tampon. */
html #onboarding.ob-vitrine .ob-practice-code{position:relative}
html #onboarding.ob-vitrine .ob-tl{display:inline-block;vertical-align:top;white-space:pre}
html #onboarding.ob-vitrine .ob-practice-run{position:relative;isolation:isolate}
html #onboarding.ob-vitrine .ob-practice-run::after{content:'';position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none}
html #onboarding.ob-vitrine .ob-practice-play{display:inline-block}
html #onboarding.ob-vitrine .ob-practice-run[aria-busy="true"]{cursor:progress}
html #onboarding.ob-vitrine .ob-practice-run[aria-busy="true"] .ob-practice-play{box-sizing:border-box;width:17px;height:17px;font-size:0;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%}
html #onboarding.ob-vitrine .ob-practice-card.is-running .ob-practice-code::after{content:'';position:absolute;left:8px;right:8px;top:14px;height:1.7em;border-radius:8px;pointer-events:none;
  background:rgba(159,240,198,.13);box-shadow:inset 3px 0 0 var(--v-mint);opacity:0}
html #onboarding.ob-vitrine .ob-practice-ok{display:inline-block;width:18px;height:18px;margin-right:7px;border-radius:50%;vertical-align:-4px;background:var(--v-mint) var(--v-check) center/11px no-repeat}
html #onboarding.ob-vitrine .ob-practice-n{font:inherit;font-variant-numeric:tabular-nums}
html #onboarding.ob-vitrine .ob-practice-table span.is-hit{color:var(--v-str)!important}
/* Le badge du premier succès fait partie de l’animation : au palier 2, c’est la phrase d’intro qui part, le badge reste ; il ne part
   qu’au palier 3, sur les petits écrans. */
html #onboarding.ob-vitrine.ob-fit-2 .ob-practice .ob-practice-reward{display:block!important}
html #onboarding.ob-vitrine.ob-fit-3 .ob-practice .ob-practice-reward{display:none!important}

/* Dernière page : les ondes autour de la coche */
html #onboarding.ob-vitrine .ob-success{position:relative}
html #onboarding.ob-vitrine .ob-success>i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--v-mint);opacity:0;pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  /* Le prénom */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-name-preview.is-in{animation:obvNameIn .55s var(--v-pop) both!important}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-name-preview.is-in .ob-name-initial{animation:obvPopSpin .7s var(--v-pop) .06s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-name-preview.is-in .ob-name-msg>b{animation:obvSlideIn .42s cubic-bezier(.2,.85,.25,1) .12s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-name-preview.is-in .ob-name-msg>b em{animation:obvSwoosh .5s ease-out .45s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-name-preview.is-in .ob-name-sub{animation:obvSlideIn .42s cubic-bezier(.2,.85,.25,1) .3s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-name-preview.is-in .ob-name-spark{animation:obvSpark .9s ease-out .38s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-name-preview.is-in .ob-name-spark:nth-of-type(2){animation-delay:.58s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-field.is-shake input{animation:obvShake .4s ease both}

  /* Le parcours qui se construit */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build:not(.is-built) .ob-build-stk{animation:obvStkIn .6s var(--v-pop) .05s both,obvWork .4s ease-in-out .7s infinite alternate}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build.is-built .ob-build-stk{animation:obvJoy .8s var(--v-pop) both,obvStkBob 3.8s ease-in-out .9s infinite}
  /* Le GIF tape déjà : plus de frétillement ni de balancement par-dessus ; il arrive, puis saute de joie quand le parcours est prêt */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build:not(.is-built) .ob-build-stk.is-ordi{animation:obvStkIn .6s var(--v-pop) .05s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build.is-built .ob-build-stk.is-ordi{animation:obvJoy .8s var(--v-pop) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build:not(.is-built) .ob-build-bar i{animation:obvStripes .55s linear infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build.is-built .ob-build-bar::after{animation:obvBarShine .75s ease-out .05s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build.is-built .ob-build-burst i{animation:obvBurst 1s cubic-bezier(.2,.8,.3,1) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build.is-built .ob-build-pct{transform-origin:100% 60%;animation:obvPctPop .55s var(--v-pop) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build.is-built .ob-build-card{animation:obvCardGlow 1s ease-out both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build-list li.is-active .ob-build-ok{animation:obvSpin .7s linear infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build-list li.is-done .ob-build-ok{animation:obOkPop .4s var(--v-pop),obvOkRing .65s ease-out}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build-list li.is-done .ob-build-ico{animation:obvJoyIcon .5s var(--v-pop)}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build.is-built .ob-build-path span.is-start{animation:obvJoyIcon .6s var(--v-pop) .12s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build:not(.is-built) .ob-build-head{animation:obvHeadPulse .45s ease-in-out infinite alternate}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build-list li.is-done::before{animation:obvRowFlash .7s ease-out}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build.is-built .ob-build-spark{animation:obvSpark 1s ease-out .12s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build.is-built .ob-build-spark:nth-of-type(2){animation-delay:.3s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build.is-built .ob-build-spark:nth-of-type(3){animation-delay:.48s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build.is-built .ob-build-path span{animation:obvChipWave .5s var(--v-pop) calc(.1s + var(--i,0) * 40ms)}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-cta:not(:disabled) .ob-cta-arrow{animation:obvArrow 1.1s ease-in-out .4s infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-card.is-flip-out{transform:rotateY(90deg);opacity:.55;transition:transform .2s cubic-bezier(.5,0,.75,0),opacity .2s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-card.is-flip-in{animation:obvFlipIn .55s cubic-bezier(.2,.9,.3,1.12) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice.is-fresh>:is(.ob-title,.ob-lead){animation:obvRise .45s cubic-bezier(.2,.85,.25,1) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice.is-fresh>.ob-lead{animation-delay:.1s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build-hero .ob-title.is-swap{animation:obvTitleSwap .5s var(--v-pop) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-build-hero .ob-title.is-swap em{animation:obvSwoosh .5s ease-out .22s both}

  /* La première requête */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-card.is-typing .ob-tl{overflow:hidden;animation:obvType var(--t) steps(var(--n),end) var(--dl) backwards,obvCaret var(--t) linear var(--dl)}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-card.is-typing .ob-tl:last-child{animation:obvType var(--t) steps(var(--n),end) var(--dl) backwards,obvCaret var(--t) linear var(--dl),obvCaretBlink 1.05s steps(1,end) calc(var(--dl) + var(--t)) infinite}
  /* L’accueil (22 h 55, « ça saute trop ») : la requête est déjà à sa place, elle se dévoile ligne par ligne ; le résultat, lui aussi
     à sa place dès le départ, s’allume à la fin de l’écriture. Rien ne pousse le reste de la page. */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-welcome-demo.is-typing .ob-tl{overflow:hidden;animation:obvType var(--t) steps(var(--n),end) var(--dl) backwards,obvCaret var(--t) linear var(--dl)}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-welcome-demo.is-typing .oc-res{animation:obvResPop .45s var(--v-pop) var(--res-dl,2s) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-run:not(:disabled)::after{animation:obvRing 1.8s ease-in-out .5s infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-card.is-typing .ob-practice-run:not(:disabled)::after{animation-delay:1.85s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-run:not(:disabled) .ob-practice-play{animation:obvPlayNudge 1.8s ease-in-out .5s infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-run[aria-busy="true"] .ob-practice-play{animation:obvSpin .6s linear infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-card.is-running .ob-practice-code::after{animation:obvScan .74s cubic-bezier(.45,0,.55,1) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-result.is-new{transform-origin:50% 0;animation:obvResOpen .45s cubic-bezier(.2,.85,.25,1) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-result.is-new .ob-practice-ok{animation:obvPopSpin .55s var(--v-pop) .15s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-result.is-new .ob-practice-table span.is-hit{animation:obResultIn .35s var(--bounce-ios,var(--v-pop)) var(--rd,0ms) both,obvHit 1.1s ease-out calc(var(--rd,0ms) + .3s) both}
  /* 4 novembre, 2 h 13 (« le dernier cadre est pixelisé ») : l’animation partait d’une échelle de 0,4 et restait appliquée (both) ;
     Safari gardait le bandeau sur un calque dessiné à cette petite échelle, puis agrandi : un texte flou. Une fois posé, l’animation
     ne s’applique plus (backwards) : le bandeau, simplement penché, est redessiné net. */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-practice-reward.is-new{animation:obvStampIn .55s var(--v-pop) 1s backwards}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-bubble.is-new{transform-origin:0 50%;animation:obvBubbleIn .45s var(--v-pop) both}

  /* La dernière page, à l’arrivée */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-screen.ready .ob-success{animation:obvSealIn .6s var(--v-pop) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-screen.ready .ob-success-tick{stroke-dasharray:1;animation:obvTick .42s cubic-bezier(.6,0,.4,1) .32s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-screen.ready .ob-success>i{animation:obvRipple 1.2s cubic-bezier(.2,.7,.3,1) .36s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-screen.ready .ob-success>i+i{animation-delay:.62s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-screen.ready .ob-title em{animation:obvSwoosh .55s ease-out .55s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-screen.ready .ob-ready-row{animation:obvRise .45s cubic-bezier(.2,.85,.25,1) calc(.4s + var(--i,0) * .12s) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-screen.ready .ob-ready-ico{animation:obvPopSpin .5s var(--v-pop) calc(.5s + var(--i,0) * .12s) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-screen.ready .ob-ready-days i{transform-origin:0 50%;animation:obvBarGrow .38s cubic-bezier(.2,.85,.25,1) calc(.86s + var(--i,0) * .07s) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-screen.ready .ob-ready-days i.on{animation:obvBarGrow .38s cubic-bezier(.2,.85,.25,1) calc(.86s + var(--i,0) * .07s) both,obvDayPop .45s var(--v-pop) calc(1.1s + var(--i,0) * .07s)}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-screen.ready .ob-ready-path small{animation:obvFadeIn .4s ease 1.4s both}
  /* La fin de l’onboarding (4 novembre, 3 h 54) : les tuiles des sources, la fenêtre et la flèche du rappel, le widget qui surgit,
     les trois temps du tutoriel (voir plus bas, « La fin de l’onboarding ») */
  /* 11 h 08 (réf. 1, « la page bug à l’appui des trucs ») : l’entrée des tuiles rejouait à chaque choix (la page est redessinée) ;
     elle ne joue plus qu’à l’arrivée sur l’étape. */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-source-tile{animation:obvApparait .24s ease-out calc(var(--d,0ms) * .5) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-notif-alert{animation:obvNotifIn .5s var(--v-pop) .2s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-notif-btns .is-ok{animation:obvNotifOk 1.1s ease-in-out 1.1s infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-notif-arrow{animation:obvNotifFleche .4s var(--v-pop) .7s both,obvNotifBond 1.1s ease-in-out 1.1s infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-home .ob-wg{animation:obvWgPop .6s var(--v-pop) .3s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-home .ob-ph-app{animation:obvFadeUp .4s var(--v-press) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-home .a1{animation-delay:.12s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-home .a2{animation-delay:.18s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-home .a3{animation-delay:.24s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-home .a4{animation-delay:.3s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-home .a5{animation-delay:.36s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-home .ob-wg-cat{animation:obvCatUp .6s var(--v-pop) .7s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-home .ob-wg-fl{animation:obvFlamme 1.5s ease-in-out 1.2s infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="1"] .ob-ph-doigt{animation:obvWt1Doigt 3.4s var(--v-press) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="1"] .ob-ph-grid .ob-ph-app{animation:obvWiggle .26s ease-in-out calc(1.25s + var(--i) * .03s) infinite alternate}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="1"] .ob-ph-grid .ob-ph-app em{animation:obvBadge .25s var(--v-pop) 1.25s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="1"] :is(.ob-ph-edit,.ob-ph-ok){animation:obvWtApparait .3s 1.35s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="2"] .ob-ph-grid .ob-ph-app{animation:obvWiggle .26s ease-in-out calc(var(--i) * .03s) infinite alternate}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="2"] .ob-ph-edit{animation:obvWt2Edit 3.6s step-end both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="2"] .ob-ph-menu{animation:obvWt2Menu 3.6s var(--v-pop) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="2"] .ob-ph-menu span:first-child{animation:obvWt2Row 3.6s step-end both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="2"] .ob-ph-doigt{animation:obvWt2Doigt 3.6s var(--v-press) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="3"] .ob-ph-grid .ob-ph-app{animation:obvWiggle .26s ease-in-out calc(var(--i) * .03s) 14 alternate}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="3"] .ob-ph-grid :is(.t0,.t1,.t3,.t4){animation:obvWiggle .26s ease-in-out calc(var(--i) * .03s) 14 alternate,obvHide .25s 3.5s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="3"] .ob-ph-grid .ob-ph-app em{animation:obvBadgeOut .2s 3.75s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="3"] :is(.ob-ph-edit,.ob-ph-ok){animation:obvWtDisparait .3s 3.75s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="3"] .ob-ph-sheet{animation:obvWt3Sheet 5.2s var(--v-press) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="3"] .ob-ph-search b{animation:obvWt3Type 5.2s steps(7,end) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="3"] .ob-ph-preview{animation:obvWt3Prev 5.2s var(--v-pop) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="3"] .ob-ph-add{animation:obvWt3Add 5.2s ease both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="3"] .ob-ph-doigt{animation:obvWt3Doigt 5.2s var(--v-press) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-ph-tuto[data-phase="3"] .ob-ph-placed{display:block;animation:obvWt3Placed 5.2s var(--v-pop) both}
  /* Les jours par semaine (4 novembre, 9 h 36) : à l’arrivée, les points des jours s’allument du lundi au dimanche et les icônes de
     « ce que ça t’apporte » surgissent ; à chaque choix, le chiffre saute, ses jours se rallument et les deux nombres rebondissent
     (le défilement des nombres est dans obJoursCompter). */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-jour-dots i.on{animation:obvDotOn .32s var(--v-pop) calc(.42s + var(--d,0ms) + var(--j,0) * 32ms) backwards}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-selection-update .ob-jour-tile.on b{animation:obvJoyIcon .5s var(--v-pop)}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-selection-update .ob-jour-tile.on .ob-jour-dots i.on{animation:obvDotOn .3s var(--v-pop) calc(var(--j,0) * 34ms) backwards}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-apport-ico{animation:obvPopSpin .5s var(--v-pop) .5s backwards}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-apport-c+.ob-apport-c .ob-apport-ico{animation-delay:.62s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-selection-update .ob-apport-c b{transform-origin:0 70%;animation:obvNumBump .5s var(--v-pop)}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-selection-update .ob-apport-ico{animation:obvJoyIcon .5s var(--v-pop)}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-selection-update .ob-proj-big b{transform-origin:50% 70%;animation:obvNumBump .5s var(--v-pop)}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-tv-stk{animation:obvStkWobble .8s ease-in-out .55s both}
  /* La page de connexion (4 novembre, 10 h 16) : les trois boutons arrivent l’un après l’autre ; touché alors que la connexion n’est
     pas encore là, un bouton hoche la tête et son « Bientôt » saute (obConnexionBientot), pendant que la bulle de la mascotte se rouvre. */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-provider{animation:obvTileIn .34s var(--v-pop) calc(.16s + var(--i,0) * 70ms) backwards}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-provider.is-nudge{animation:obvShake .42s ease both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-provider.is-nudge small{animation:obvJoyIcon .5s var(--v-pop)}
  /* Juste après la première requête (10 h 45) : la mascotte saute de joie avec les confettis, le 🎉 se balance ; touchée sans
     connexion, la mascotte sautille et le message s’ouvre sous les boutons. */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-account.is-fete .ob-compte-stk{animation:obvJoy .9s var(--v-pop) .22s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-account .ob-compte-stk.is-oups{animation:obvJoyIcon .55s var(--v-pop)}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-account.is-fete .ob-fete-emoji{animation:obvFeteEmoji 1.2s var(--v-pop) .4s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-compte-msg.is-new{transform-origin:50% 0;animation:obvBubbleIn .4s var(--v-pop) both}
  /* Le rappel (11 h 08) : à l’arrivée, les jours de séance s’allument du lundi au dimanche. */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-rappel-semaine i.on{animation:obvDotOn .34s var(--v-pop) calc(.5s + var(--i,0) * 45ms) backwards}
  /* Le pays (13 h 18) : pendant la recherche, le globe tourne (Europe, Amériques, Asie) et une onde part ; puis le drapeau se pose
     d’un rebond, le nom glisse, la coche arrive. */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-pays-carte.is-cherche .ob-pays-globe i{animation:obvPaysGlobe .9s linear calc(var(--k) * -.3s) infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-pays-carte.is-cherche .ob-pays-globe::before{animation:obvPaysPing 1.2s ease-out infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-pays-carte.is-trouve .ob-pays-drapeau{animation:obvPaysPose .65s var(--v-pop) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-pays-carte.is-trouve .ob-pays-copy{animation:obvSlideIn .42s cubic-bezier(.2,.85,.25,1) .12s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-pays-carte.is-trouve.is-on::before{animation:obvPop .35s var(--v-pop) .32s both}
  /* « Ils apprécient Requête » (14 h 08) : la carte se pose en penchant, les pastilles et la barre arrivent, les formateurs se
     glissent un à un ; la lecture jaune lance une onde tant qu’elle attend, la barre du moment palpite pendant l’écoute. */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-tv-badge-c{animation:obvTileIn .4s var(--v-pop) .05s backwards}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-tv-laurier{animation:obvLaurier .65s var(--v-pop) .14s backwards}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-tv-laurier.is-d{animation-delay:.22s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-tv-ph{animation:obvTvIn .6s var(--v-pop) .08s backwards}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-tv-pick{animation:obvFadeUp .4s var(--v-press) .42s backwards}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-tv-voix{animation:obvFadeUp .45s var(--v-press) .5s backwards}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-tv-profs{animation:obvTileIn .4s var(--v-pop) .62s backwards}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .ob-tv-faces>*{animation:obvTvFace .42s var(--v-pop) calc(.74s + var(--i,0) * 70ms) backwards}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-tv:not(.is-lecture) .ob-tv-play::after{animation:obvTvRing 2.4s ease-out 1.4s infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-tv-wave i.cur{animation:obvTvCur .45s ease-in-out infinite alternate}
  /* Le cadre de la notification (14 h 08, réf. 2) : il tombe d’en haut d’un rebond, son halo respire, et un toucher part d’« Autoriser »
     au rythme de la flèche. */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-rappel-step .ob-notif-alert{animation:obvNotifTombe .7s var(--v-pop) .2s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-notif-cadre::before{animation:obvNotifHalo 2.2s ease-in-out .9s infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-rappel-step .ob-notif-btns .is-ok::after{animation:obvNotifTouche 2.2s ease-out 1.5s infinite}
  /* L’engagement au doigt (5 novembre, 19 h 41) : un halo appelle le doigt sur le bouton ; lâché trop tôt, la phrase tremble ; pris,
     le bouton rebondit et la coche se trace. */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-hold:not(.is-holding):not(.is-done)::before{animation:obvHoldHalo 2.4s ease-out infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-hold-hint.is-relance{animation:obvHoldHint .42s ease-out}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-hold.is-done{animation:obvHoldOk .5s var(--v-pop)}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .ob-hold.is-done .ob-hold-ok svg{animation:obvHoldCoche .35s ease-out .12s backwards}
  /* Le paywall (10 novembre) : le chat, l’étiquette, les avantages, les offres et leur pastille, puis « Continuer » au bout de 2 s */
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .pw-chat{animation:obvApparait .3s ease-out both,obvStkBob 3.8s ease-in-out .8s infinite}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .pw-tag{animation:pwTag .5s var(--v-pop) .15s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .pw-plus li{animation:pwMonte .4s cubic-bezier(.2,.8,.3,1) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .pw-plus li:nth-child(1){animation-delay:.25s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .pw-plus li:nth-child(2){animation-delay:.35s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .pw-plus li:nth-child(3){animation-delay:.45s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .pw-offre{animation:pwMonte .45s var(--v-pop) both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .pw-offre.is-an{animation-delay:.55s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .pw-offre.is-semaine{animation-delay:.65s}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine.ob-enter .pw-badge{animation:pwTag .5s var(--v-pop) .95s both}
  html:not([data-motion="reduce"]) #onboarding.ob-vitrine .pw-passer{animation:pwPasser .4s ease-out 2s both}
}
@media (prefers-reduced-motion:reduce){
  html #onboarding.ob-vitrine :is(.ob-build-list li,.ob-build-list li::before,.ob-build-ico,.ob-build-path span){transition:none!important}
}
html[data-motion="reduce"] #onboarding.ob-vitrine :is(.ob-build-list li,.ob-build-list li::before,.ob-build-ico,.ob-build-path span){transition:none!important}
@keyframes obvNameIn{0%{opacity:0;transform:translateY(6px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes obvPopSpin{0%{transform:scale(0) rotate(-120deg)}60%{transform:scale(1.15) rotate(10deg)}100%{transform:none}}
@keyframes obvSlideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes obvSwoosh{from{background-size:0% .26em}to{background-size:100% .26em}}
@keyframes obvSpark{0%{opacity:0;transform:scale(.2) rotate(0)}35%{opacity:1;transform:scale(1.15) rotate(40deg)}100%{opacity:0;transform:scale(.5) rotate(90deg)}}
@keyframes obvShake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes obvWork{from{transform:translateY(0) rotate(0)}to{transform:translateY(-3px) rotate(-3deg)}}
@keyframes obvStripes{from{background-position:0 0}to{background-position:25.456px 0}}
@keyframes obvBarShine{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
@keyframes obvBurst{0%{opacity:1;transform:rotate(var(--a)) translateX(0) scale(.5)}30%{opacity:1;transform:rotate(var(--a)) translateX(20px) scale(1.15)}100%{opacity:0;transform:rotate(var(--a)) translateX(40px) scale(.35)}}
@keyframes obvPctPop{0%{transform:none}40%{transform:scale(1.3)}100%{transform:none}}
@keyframes obvCardGlow{0%{box-shadow:0 5px 0 var(--v-shadow-lip),0 0 0 0 rgba(255,216,107,.75)}100%{box-shadow:0 5px 0 var(--v-shadow-lip),0 0 0 22px rgba(255,216,107,0)}}
@keyframes obvSpin{to{transform:rotate(360deg)}}
@keyframes obvOkRing{0%{box-shadow:0 0 0 0 rgba(159,240,198,.95)}100%{box-shadow:0 0 0 11px rgba(159,240,198,0)}}
@keyframes obvTitleSwap{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes obvType{from{max-width:0}to{max-width:calc(var(--n) * 1ch)}}
@keyframes obvCaret{from,to{box-shadow:2px 0 0 var(--v-sun)}}
@keyframes obvCaretBlink{0%{box-shadow:2px 0 0 var(--v-sun)}50%{box-shadow:2px 0 0 transparent}}
@keyframes obvRing{0%,100%{box-shadow:0 0 0 0 rgba(255,216,107,0)}50%{box-shadow:0 0 22px 3px rgba(255,216,107,.6)}}
@keyframes obvPlayNudge{0%,62%,100%{transform:none}74%{transform:translateX(4px)}86%{transform:translateX(-1px)}}
@keyframes obvScan{0%{opacity:0;transform:translateY(0)}14%{opacity:1;transform:translateY(0)}86%{opacity:1;transform:translateY(3.4em)}100%{opacity:0;transform:translateY(3.4em)}}
@keyframes obvArrow{0%,100%{transform:none}50%{transform:translateX(5px)}}
@keyframes obvFlipIn{from{transform:rotateY(-90deg);opacity:.55}to{transform:none;opacity:1}}
@keyframes obvHeadPulse{from{transform:scale(.82)}to{transform:scale(1.18)}}
@keyframes obvRowFlash{0%{opacity:1;transform:none;background:rgba(159,240,198,.6)}100%{opacity:0;transform:none;background:rgba(159,240,198,0)}}
@keyframes obvChipWave{0%,100%{transform:none}40%{transform:translateY(-5px) scale(1.07)}}
@keyframes obvResPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes obvResOpen{from{opacity:0;transform:translateY(-6px) scaleY(.7)}to{opacity:1;transform:none}}
@keyframes obvHit{0%{background-color:rgba(255,216,107,.5)}100%{background-color:rgba(255,216,107,0)}}
@keyframes obvStampIn{0%{opacity:0;transform:scale(.4) rotate(-12deg)}60%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:rotate(-1.5deg)}}
@keyframes obvSealIn{0%{transform:scale(0) rotate(-90deg)}60%{transform:scale(1.15) rotate(8deg)}100%{transform:none}}
@keyframes obvTick{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes obvRipple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
@keyframes obvBarGrow{from{transform:scaleX(0)}to{transform:none}}
@keyframes obvDayPop{0%{transform:none}40%{transform:scaleY(1.7)}100%{transform:none}}
@keyframes obvFadeIn{from{opacity:0}to{opacity:1}}

/* ---------- La fin de l’onboarding (Elisa, 4 novembre, 3 h 54, d’après l’onboarding de Duolingo) ----------
   « Comment as-tu connu Requête ? », le rappel du jour (la fenêtre d’iOS en aperçu, une flèche vers « Autoriser »), l’écran d’accueil
   avec le widget de la série et le tutoriel animé pour l’ajouter. Au repos, tout est visible et immobile (chaque temps du tutoriel
   montre son état) ; les animations sont dans le média « no-preference » plus haut, comme les autres. */
/* Les sources : tuiles en ligne, icône à gauche, deux colonnes ; une couleur par tuile, comme les objectifs. */
html #onboarding.ob-vitrine .ob-source-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html #onboarding.ob-vitrine .ob-source-tile{flex-direction:row;justify-content:flex-start;gap:10px;min-height:58px;padding:9px 11px;text-align:left}
html #onboarding.ob-vitrine .ob-source-tile .ob-answer-icon{width:34px!important;height:34px!important;border-radius:11px!important}
html #onboarding.ob-vitrine .ob-source-tile .ob-answer-icon svg{width:18px!important;height:18px!important}
html #onboarding.ob-vitrine .ob-source-tile>span:not(.ob-answer-icon){display:block;min-width:0;font:700 14px/1.2 var(--v-display);letter-spacing:-.01em;color:var(--v-ink);text-wrap:balance}
html #onboarding.ob-vitrine .ob-source-tile:nth-child(5n+2) .ob-answer-icon{background:var(--v-pink-soft)!important;color:var(--v-pink)!important}
html #onboarding.ob-vitrine .ob-source-tile:nth-child(5n+3) .ob-answer-icon{background:var(--v-blue-soft)!important;color:var(--v-blue)!important}
html #onboarding.ob-vitrine .ob-source-tile:nth-child(5n+4) .ob-answer-icon{background:var(--v-sun-soft)!important;color:var(--v-gold)!important}
html #onboarding.ob-vitrine .ob-source-tile:nth-child(5n) .ob-answer-icon{background:var(--v-ok-soft)!important;color:var(--v-ok)!important}
html #onboarding.ob-vitrine.ob-fit-2 .ob-source-tile{min-height:50px;padding-top:6px;padding-bottom:6px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-source-tile{min-height:42px;gap:7px}

/* Le rappel : la fenêtre d’iOS, en aperçu (un peu voilée), et la flèche jaune sous « Autoriser ». */
html #onboarding.ob-vitrine .ob-notif{position:relative;display:flex;flex-direction:column;align-items:center;width:min(270px,100%);margin:18px auto 0;transition:transform .35s var(--v-press)}
html #onboarding.ob-vitrine .ob-notif-alert{display:block;width:100%;overflow:hidden;border-radius:14px;background:rgba(242,242,247,.9);color:#1C1C1E;text-align:center;box-shadow:0 18px 44px rgba(20,10,60,.38);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html #onboarding.ob-vitrine .ob-notif-alert b{display:block;padding:19px 16px 0;font:600 17px/1.29 -apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;letter-spacing:-.02em}
html #onboarding.ob-vitrine .ob-notif-alert small{display:block;padding:4px 16px 19px;font:400 13px/1.38 -apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;color:#3C3C43}
html #onboarding.ob-vitrine .ob-notif-btns{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(60,60,67,.22)}
/* Les deux boutons de l’aperçu se touchent pour de vrai (6 novembre, 23 h 08) : « Autoriser » ouvre la vraie demande d’iOS, « Ne pas
   autoriser » passe à la suite (obRappelRefuser). Ils s’assombrissent sous le doigt, comme ceux d’iOS. */
html #onboarding.ob-vitrine .ob-notif-btns button{-webkit-appearance:none;appearance:none;margin:0;border:0;border-radius:0;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html #onboarding.ob-vitrine .ob-notif-btns button{display:block;padding:11px 4px 12px;font:400 16px/1.29 -apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;letter-spacing:-.02em;white-space:nowrap;color:#007AFF;opacity:.62}
html #onboarding.ob-vitrine .ob-notif-btns button+button{border-left:1px solid rgba(60,60,67,.22)}
html #onboarding.ob-vitrine .ob-notif-btns .is-ok{font-weight:600;opacity:1;background:rgba(0,122,255,.06)}
html #onboarding.ob-vitrine .ob-notif-btns button:active{background:rgba(60,60,67,.12)}
html #onboarding.ob-vitrine .ob-notif-btns .is-ok:active{background:rgba(0,122,255,.18)}
html #onboarding.ob-vitrine .ob-notif-btns button:focus-visible{outline:3px solid var(--v-sun);outline-offset:-3px}
html #onboarding.ob-vitrine .ob-notif-arrow{align-self:flex-end;width:34px;height:58px;margin:12px calc(25% - 17px) 0 0;color:var(--v-sun);filter:drop-shadow(0 3px 0 var(--v-sun-lip))}
html #onboarding.ob-vitrine .ob-rappel-note{margin:14px 0 0;text-align:center;text-wrap:balance;color:rgba(255,255,255,.8);font:600 13.5px/1.45 var(--v-ui)}

/* Le téléphone dessiné : cadre encre, écran lavande, îlot ; les apps en carrés pastel ; le widget violet de la série. */
html #onboarding.ob-vitrine .ob-ph{display:flex;justify-content:center;width:100%;margin:14px auto 0}
html #onboarding.ob-vitrine .ob-ph-frame{position:relative;display:block;width:min(226px,60vw);padding:8px;border-radius:38px;background:var(--v-ink);box-shadow:0 18px 40px rgba(20,10,60,.36),inset 0 0 0 2px rgba(255,255,255,.14)}
html #onboarding.ob-vitrine .ob-ph-screen{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:31px;background:linear-gradient(180deg,#F1EEFC 0%,#E2DBFA 100%)}
html #onboarding.ob-vitrine .ob-ph-island{position:absolute;z-index:3;left:50%;top:2.6%;width:31%;height:4.4%;transform:translateX(-50%);border-radius:99px;background:var(--v-ink)}
html #onboarding.ob-vitrine .ob-ph-app{position:relative;display:block;aspect-ratio:1;border-radius:24%;background:#D9D1F7;box-shadow:inset 0 -3px 0 rgba(27,22,64,.06)}
html #onboarding.ob-vitrine .ob-ph-app:nth-child(5n+2){background:#C9EEDC}
html #onboarding.ob-vitrine .ob-ph-app:nth-child(5n+3){background:#FFE7A8}
html #onboarding.ob-vitrine .ob-ph-app:nth-child(5n+4){background:#FFD3E0}
html #onboarding.ob-vitrine .ob-ph-app:nth-child(5n){background:#CFE0FF}
/* Le widget : la flamme et la série en jaune soleil, le chat qui dépasse du bas (comme RequeteWidget.swift). */
html #onboarding.ob-vitrine .ob-wg{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:22%;container-type:inline-size;background:linear-gradient(170deg,#7A5CFF 0%,#5538E6 55%,#4529CC 100%);box-shadow:0 6px 14px rgba(69,41,204,.35),inset 0 0 0 1.5px rgba(255,255,255,.18)}
html #onboarding.ob-vitrine .ob-wg-top{position:absolute;left:0;right:0;top:11%;display:flex;align-items:center;justify-content:center;gap:4%}
html #onboarding.ob-vitrine .ob-wg-fl{display:block;width:24%;color:var(--v-sun);filter:drop-shadow(0 2px 0 rgba(224,161,0,.7));transform-origin:50% 90%}
html #onboarding.ob-vitrine .ob-wg-fl svg{display:block;width:100%;height:auto}
html #onboarding.ob-vitrine .ob-wg-n{font:800 30px/1 var(--v-display);font-size:27cqw;letter-spacing:-.04em;color:var(--v-sun-hi);font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(27,22,64,.25)}
html #onboarding.ob-vitrine .ob-wg-cat{position:absolute;left:50%;bottom:-46%;width:66%;height:auto;transform:translateX(-50%);filter:drop-shadow(0 -2px 6px rgba(27,22,64,.25));pointer-events:none}

/* L’écran d’accueil (étape « widget ») : le haut du téléphone, qui s’efface vers le bas. */
html #onboarding.ob-vitrine .ob-ph-promo .ob-ph-frame{width:min(250px,66vw);border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:0;-webkit-mask-image:linear-gradient(#000 64%,transparent 98%);mask-image:linear-gradient(#000 64%,transparent 98%)}
html #onboarding.ob-vitrine .ob-ph-promo .ob-ph-screen{aspect-ratio:9/10.4;border-bottom-left-radius:0;border-bottom-right-radius:0}
html #onboarding.ob-vitrine .ob-ph-home{position:absolute;inset:15% 9% 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-content:start}
html #onboarding.ob-vitrine .ob-ph-home .ob-wg{grid-column:1/3;grid-row:1/3}

/* Le tutoriel (étape « widgetTuto ») : trois temps, joués en boucle (data-phase, obWidgetTutoJouer). Au repos, chaque temps montre
   son état : 1. les pastilles « − » et « Modifier » ; 2. le menu ouvert, « Modifier » touché ; 3. la galerie avec le widget.
   En mouvement : 1. le doigt appuie, les apps tremblent ; 2. il touche « Modifier », puis « Ajouter un widget » ; 3. la feuille monte,
   « Requête » s’écrit, le widget apparaît, « Ajouter le widget », la feuille descend et le widget se pose sur l’écran d’accueil. */
html #onboarding.ob-vitrine .ob-sr,html #onboarding.ob-vitrine .ob-sr-steps{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
html #onboarding.ob-vitrine .ob-wtuto .ob-chat{margin-top:6px!important}
html #onboarding.ob-vitrine .ob-wtuto .ob-bubble{min-height:3.9em!important;display:flex!important;align-items:center}
html #onboarding.ob-vitrine .ob-ph-tuto .ob-ph-frame{width:min(206px,54vw,calc(40vh * .5625))}
html #onboarding.ob-vitrine .ob-ph-edit,html #onboarding.ob-vitrine .ob-ph-ok{position:absolute;z-index:2;top:9%;padding:4px 9px;border-radius:99px;background:rgba(27,22,64,.08);color:var(--v-accent-ink);font:700 10.5px/1.2 var(--v-ui)}
html #onboarding.ob-vitrine .ob-ph-edit{left:7%;min-width:12px;padding:2px 9px 3px;text-align:center;font-size:15px;line-height:1.05}   /* le « + » de l’iPhone (6 novembre, 11 h 12) */
html #onboarding.ob-vitrine .ob-ph-ok{right:7%}
html #onboarding.ob-vitrine .ob-ph-menu{position:absolute;z-index:4;left:7%;top:15.5%;display:none;flex-direction:column;min-width:62%;padding:4px;border-radius:12px;background:#fff;box-shadow:0 10px 24px rgba(27,22,64,.22);transform-origin:12% 0}
html #onboarding.ob-vitrine .ob-ph-menu span{display:block;padding:6px 8px;border-radius:8px;color:var(--v-ink);font:700 10px/1.25 var(--v-ui);white-space:nowrap}
html #onboarding.ob-vitrine .ob-ph-menu span+span{color:var(--v-ink-3)}
html #onboarding.ob-vitrine .ob-ph-grid{position:absolute;left:10%;right:10%;top:18.5%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 11px}
html #onboarding.ob-vitrine .ob-ph-grid .ob-ph-app em{position:absolute;left:-5px;top:-5px;width:15px;height:15px;border-radius:50%;background:#A99ED3;box-shadow:0 0 0 1.5px #F1EEFC}
html #onboarding.ob-vitrine .ob-ph-grid .ob-ph-app em::before{content:'';position:absolute;left:4px;right:4px;top:6.5px;height:2px;border-radius:2px;background:#fff}
html #onboarding.ob-vitrine .ob-ph-placed{grid-column:1/3;grid-row:1/3;position:relative;z-index:1;display:none}
html #onboarding.ob-vitrine .ob-ph-sheet{position:absolute;z-index:5;left:0;right:0;bottom:0;height:64%;display:flex;flex-direction:column;align-items:center;gap:9%;padding:9% 9% 0;border-radius:18px 18px 0 0;background:#fff;box-shadow:0 -8px 24px rgba(27,22,64,.18);transform:translateY(105%)}
html #onboarding.ob-vitrine .ob-ph-search{display:flex;align-items:center;gap:6px;width:100%;padding:6px 9px;border-radius:99px;background:#F1EEFC}
html #onboarding.ob-vitrine .ob-ph-search i{flex:none;width:9px;height:9px;border:2px solid var(--v-accent);border-radius:50%;position:relative}
html #onboarding.ob-vitrine .ob-ph-search i::after{content:'';position:absolute;right:-4px;bottom:-4px;width:5px;height:2px;border-radius:2px;background:var(--v-accent);transform:rotate(45deg)}
html #onboarding.ob-vitrine .ob-ph-search b{display:block;overflow:hidden;white-space:nowrap;width:6.2em;color:var(--v-accent-ink);font:800 11px/1.3 var(--v-display)}
html #onboarding.ob-vitrine .ob-ph-preview{display:block;width:50%}
html #onboarding.ob-vitrine .ob-ph-add{display:block;margin-top:auto;margin-bottom:9%;padding:7px 14px;border-radius:99px;background:#007AFF;color:#fff;font:700 10.5px/1.2 var(--v-ui)}
html #onboarding.ob-vitrine .ob-ph-doigt{position:absolute;z-index:6;left:50%;top:68%;width:15%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.62);border:2px solid #fff;box-shadow:0 4px 14px rgba(27,22,64,.35);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
html #onboarding.ob-vitrine .ob-ph-tuto[data-phase="2"] .ob-ph-menu{display:flex}
html #onboarding.ob-vitrine .ob-ph-tuto[data-phase="2"] .ob-ph-edit{background:var(--v-accent);color:#fff}
html #onboarding.ob-vitrine .ob-ph-tuto[data-phase="2"] .ob-ph-menu span:first-child{background:var(--v-accent-soft);color:var(--v-accent-ink)}
html #onboarding.ob-vitrine .ob-ph-tuto[data-phase="3"] .ob-ph-sheet{transform:none}

@keyframes obvTileIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
@keyframes obvNotifIn{from{opacity:0;transform:scale(1.12)}}
@keyframes obvNotifOk{0%,100%{background:rgba(0,122,255,.06)}50%{background:rgba(0,122,255,.16)}}
@keyframes obvNotifFleche{from{opacity:0;transform:translateY(16px)}}
@keyframes obvNotifBond{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes obvWgPop{0%{opacity:0;transform:scale(.4) rotate(-8deg)}70%{opacity:1;transform:scale(1.06) rotate(1deg)}to{transform:none}}
@keyframes obvFadeUp{from{opacity:0;transform:translateY(12px)}}
@keyframes obvCatUp{from{transform:translate(-50%,40%)}}
@keyframes obvFlamme{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.1,1.16) rotate(-4deg)}60%{transform:scale(.96,1.04) rotate(3deg)}}
@keyframes obvWt1Doigt{0%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}20%,58%{opacity:1;transform:translate(-50%,-50%) scale(.76)}68%{opacity:1;transform:translate(-50%,-50%) scale(1)}82%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes obvWiggle{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
@keyframes obvBadge{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes obvWtApparait{from{opacity:0}to{opacity:1}}
@keyframes obvWt2Edit{0%{background:rgba(27,22,64,.08);color:var(--v-accent-ink)}29%,100%{background:var(--v-accent);color:#fff}}
@keyframes obvWt2Menu{0%,30%{opacity:0;transform:scale(.85)}38%,100%{opacity:1;transform:scale(1)}}
@keyframes obvWt2Row{0%{background:transparent;color:var(--v-ink)}60%,100%{background:var(--v-accent-soft);color:var(--v-accent-ink)}}
@keyframes obvWt2Doigt{0%{opacity:0;left:50%;top:64%;transform:translate(-50%,-50%) scale(1)}10%{opacity:1;left:50%;top:64%}24%{left:18%;top:11%;transform:translate(-50%,-50%) scale(1)}29%{left:18%;top:11%;transform:translate(-50%,-50%) scale(.76)}34%{left:18%;top:11%;transform:translate(-50%,-50%) scale(1)}54%{left:30%;top:19.6%;transform:translate(-50%,-50%) scale(1)}60%{left:30%;top:19.6%;transform:translate(-50%,-50%) scale(.76)}66%{left:30%;top:19.6%;transform:translate(-50%,-50%) scale(1)}86%{opacity:1}100%{opacity:0;left:30%;top:19.6%;transform:translate(-50%,-50%) scale(1)}}
@keyframes obvHide{to{opacity:0}}
@keyframes obvBadgeOut{from{transform:scale(1)}to{transform:scale(0)}}
@keyframes obvWtDisparait{from{opacity:1}to{opacity:0}}
@keyframes obvWt3Sheet{0%{transform:translateY(105%)}9%,60%{transform:translateY(0)}68%,100%{transform:translateY(105%)}}
@keyframes obvWt3Type{0%,10%{width:0}26%,100%{width:6.2em}}
@keyframes obvWt3Prev{0%,27%{opacity:0;transform:scale(.8)}34%,100%{opacity:1;transform:scale(1)}}
@keyframes obvWt3Add{0%,47%{transform:scale(1);background:#007AFF}50%{transform:scale(.93);background:#0062CC}55%,100%{transform:scale(1);background:#007AFF}}
@keyframes obvWt3Doigt{0%,30%{opacity:0;left:62%;top:74%;transform:translate(-50%,-50%) scale(1)}37%{opacity:1;left:62%;top:74%}46%{left:50%;top:87.5%;transform:translate(-50%,-50%) scale(1)}50%{left:50%;top:87.5%;transform:translate(-50%,-50%) scale(.76)}55%{left:50%;top:87.5%;transform:translate(-50%,-50%) scale(1)}62%,100%{opacity:0;left:50%;top:87.5%;transform:translate(-50%,-50%) scale(1)}}
@keyframes obvWt3Placed{0%,68%{opacity:0;transform:scale(.6)}76%{opacity:1;transform:scale(1.07)}82%,100%{opacity:1;transform:scale(1)}}

/* ---------- « Combien de jours par semaine ? » (Elisa, 4 novembre, 9 h 36, d’après une autre appli : « Combien de minutes par
   jour ? » et « Voilà ce que ça t’apporte ») ----------
   Quatre tuiles en ligne, comme l’âge : le chiffre en grand (une couleur par tuile), « jours », et les sept jours de la semaine en
   petits points, ceux des séances allumés. Dessous, une carte voilée, comme le récapitulatif du rythme : ce que ça t’apporte en un an,
   les nombres en jaune soleil, chacun avec son icône. Les animations sont dans le média « no-preference » plus haut. */
html #onboarding.ob-vitrine .ob-jours-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
html #onboarding.ob-vitrine .ob-jour-tile{--c:var(--v-accent-ink);--off:#E2DCF4;min-height:98px;gap:6px;padding:12px 4px 11px}
html #onboarding.ob-vitrine .ob-jour-tile.on{--off:#F3E3B5}
html #onboarding.ob-vitrine .ob-jour-tile:nth-child(2){--c:var(--v-pink)}
html #onboarding.ob-vitrine .ob-jour-tile:nth-child(3){--c:var(--v-blue)}
html #onboarding.ob-vitrine .ob-jour-tile:nth-child(4){--c:var(--v-ok)}
html #onboarding.ob-vitrine .ob-jour-tile b{display:block;font:800 32px/1 var(--v-display);letter-spacing:-.03em;color:var(--c);font-variant-numeric:tabular-nums}
html #onboarding.ob-vitrine .ob-jour-tile small{display:block;color:var(--v-ink-3);font:700 12px/1 var(--v-ui);letter-spacing:.02em}
html #onboarding.ob-vitrine .ob-jour-dots{display:flex;justify-content:center;gap:2.5px;margin-top:3px}
html #onboarding.ob-vitrine .ob-jour-dots i{display:block;flex:none;width:5px;height:5px;border-radius:50%;background:var(--off)}
html #onboarding.ob-vitrine .ob-jour-dots i.on{background:var(--c)}

html #onboarding.ob-vitrine .ob-apport{margin-top:16px;padding:13px 12px 12px;border:1.5px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(255,255,255,.1);color:#fff;text-align:center}
html #onboarding.ob-vitrine .ob-apport-k{margin:0 0 11px;color:rgba(255,255,255,.86);font:800 11.5px/1.25 var(--v-ui);letter-spacing:.1em;text-transform:uppercase;text-wrap:balance}
html #onboarding.ob-vitrine .ob-apport-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
/* Chaque nombre part de son icône, calée à gauche de sa moitié : quand il défile, l’icône ne bouge pas. */
html #onboarding.ob-vitrine .ob-apport-c{display:grid;grid-template-columns:auto minmax(0,1fr);justify-content:start;align-items:center;column-gap:9px;row-gap:3px;min-width:0;padding:0 6px 0 clamp(4px,3.4vw,16px)}
html #onboarding.ob-vitrine .ob-apport-c+.ob-apport-c{border-left:1.5px solid rgba(255,255,255,.18)}
html #onboarding.ob-vitrine .ob-apport-ico{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(255,200,61,.16);color:var(--v-sun)}
html #onboarding.ob-vitrine .ob-apport-ico svg{display:block;width:20px;height:20px}
html #onboarding.ob-vitrine .ob-apport-c b{grid-column:2;display:flex;align-items:baseline;font:800 clamp(23px,7.2vw,29px)/1 var(--v-display);letter-spacing:-.03em;color:var(--v-sun-hi);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:left;text-shadow:0 2px 0 rgba(27,22,64,.22)}
html #onboarding.ob-vitrine .ob-apport-c b i{display:inline-block;font-style:normal}
html #onboarding.ob-vitrine .ob-apport-c b em{margin-left:2px;font-style:normal;font-size:.6em;letter-spacing:0}
html #onboarding.ob-vitrine .ob-apport-c small{grid-column:2;color:rgba(255,255,255,.8);font:700 12px/1.2 var(--v-ui);text-align:left;white-space:nowrap}
html #onboarding.ob-vitrine .ob-apport-note{margin:12px 0 0;padding-top:10px;border-top:1.5px dashed rgba(255,255,255,.2);color:rgba(255,255,255,.74);font:600 12.5px/1.35 var(--v-ui);text-wrap:balance}
/* Tout tient sur un écran (obFit) */
html #onboarding.ob-vitrine.ob-fit-1 .ob-jour-tile{min-height:86px}
html #onboarding.ob-vitrine.ob-fit-1 .ob-apport{margin-top:12px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-jour-tile{min-height:76px;gap:4px;padding:9px 4px 8px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-jour-tile b{font-size:28px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-apport{padding:10px 10px 9px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-apport-k{margin-bottom:8px}
html #onboarding.ob-vitrine.ob-fit-3 .ob-apport-note{display:none}
html #onboarding.ob-vitrine.ob-fit-4 .ob-jour-tile{min-height:0;padding:7px 3px 6px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-jour-tile b{font-size:24px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-apport-ico{width:30px;height:30px;border-radius:10px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-apport-ico svg{width:17px;height:17px}

@keyframes obvDotOn{from{background:var(--off)}50%{transform:scale(1.65)}}
@keyframes obvNumBump{0%{transform:none}40%{transform:scale(1.14)}100%{transform:none}}

/* ---------- La page de connexion (Elisa, 4 novembre, 10 h 16 : « mettre la page de connexion (il faut pas qu’elle marche
   encore) ») ----------
   Comme les autres étapes : le titre centré, la mascotte, puis les trois boutons. « Continuer avec Apple » en noir, pomme et texte
   blancs, à la police du système (la charte d’Apple pour ce bouton), les deux autres en blanc à rebord, comme les réponses. Tant que
   la connexion n’est pas branchée, chacun porte « Bientôt » et reste vif : le toucher fait réagir la page (le bouton s’enfonce, puis
   hoche la tête). Plus de « Mode local et privé » (10 h 29 : le paywall vient après). Les animations sont dans le média
   « no-preference » plus haut. */
html #onboarding.ob-vitrine .ob-account .ob-title{text-align:center!important}
html #onboarding.ob-vitrine .ob-account .ob-provider-list{margin-top:22px!important;gap:10px!important}
html #onboarding.ob-vitrine .ob-provider{cursor:pointer;font:600 15.5px/1.15 -apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif!important;letter-spacing:-.01em;
  transition:transform .12s var(--v-press),box-shadow .12s var(--v-press)!important}
html #onboarding.ob-vitrine .ob-provider:not(:disabled):active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--v-shadow-lip)!important}
html #onboarding.ob-vitrine .ob-provider.is-apple{border-color:#000!important;background:#000!important;color:#fff!important;box-shadow:0 4px 0 rgba(8,5,28,.6)!important}
html #onboarding.ob-vitrine .ob-provider.is-apple:not(:disabled):active{box-shadow:0 0 0 rgba(8,5,28,.6)!important}
html #onboarding.ob-vitrine .ob-provider-icon svg{display:block;width:21px;height:21px}
html #onboarding.ob-vitrine .ob-provider.is-apple .ob-provider-icon{color:#fff}
html #onboarding.ob-vitrine .ob-provider.is-apple .ob-provider-icon svg{width:22px;height:22px;margin-top:-3px}
html #onboarding.ob-vitrine .ob-provider.is-email .ob-provider-icon{color:var(--v-accent)}
/* 9 novembre, 2 h 11 : « le trait avec l’e-mail dessous (ou) » : sous Apple et Google, le trait « ou » (blanc sur le violet), puis
   l’adresse e-mail en champ, comme le prénom : texte gris à gauche, à côté de l’enveloppe, sans le gras d’un bouton. */
html #onboarding.ob-vitrine .ob-account .ob-provider-list>.ob-divider{margin:2px 4px!important;font:700 13px/1 var(--v-ui)!important}
html #onboarding.ob-vitrine .ob-provider.is-champ{text-align:left}
html #onboarding.ob-vitrine .ob-provider.is-champ .ob-champ-ph{color:#A9A3C4;font-weight:500;font-size:16px}
/* 6 novembre, 23 h 16 : la phrase des conditions est sous le bouton jaune (.ob-foot-note.is-legal) ; le dernier bloc de la page garde
   la marge du bas qui centre tout à la verticale. 9 novembre, 2 h (sa réf. 1, « Ta première requête est réussie ») : « laisse un peu
   plus d’espace après le bouton continuer pour la partie confidentialité » : 12 px de plus entre le bouton et la phrase. */
html #onboarding.ob-vitrine .ob-screen.ob-account>:last-child{margin-bottom:auto!important}
html #onboarding.ob-vitrine .ob-foot-note.is-legal{max-width:340px;margin:12px auto 0!important;font-size:11.5px!important;line-height:1.45!important;text-align:center;text-wrap:balance}
/* 10 h 45 (« Ta première requête est réussie ! 🎉 », son texte) : tout centré à la verticale entre l’en-tête et le bouton, comme la
   promesse : la mascotte (celle de la promesse, qui flotte) au-dessus du titre, puis les deux phrases, les deux boutons, le message
   quand on en touche un, et les pages légales. Les confettis sont dans le calque de l’onboarding (obFeteConnexion). */
html #onboarding.ob-vitrine .ob-screen.ob-account{min-height:100%}
/* 7 novembre, 0 h 29 (réf. d’Elisa, « Refonte du haut de la page de connexion ») : le haut de la page, d’un seul bloc centré
   (obCompteHautHTML). Sa taille suit celle de la mascotte (--stk) : la tache, les confettis et les rayons sont dessinés dans le même
   cadre (330 × 150), l’étiquette « Bravo ! » se pose à son pied, à gauche. Sur les petits écrans, la mascotte rapetisse palier par
   palier au lieu de disparaître. */
html #onboarding.ob-vitrine .ob-account{--stk0:76px;--stk-k:1;--stk:calc(var(--stk0) * var(--stk-k))}
/* Sans les boutons (app iPhone tant que la connexion n’est pas branchée), la mascotte prend la place, sans déborder des écrans étroits */
html #onboarding.ob-vitrine .ob-account.is-sans-connexion{--stk0:min(104px,calc((100vw - 48px) / 3.3))}
html #onboarding.ob-vitrine .ob-compte-haut{position:relative;display:grid;place-items:center;flex:none;width:calc(var(--stk) * 3.3);max-width:100%;height:calc(var(--stk) * 1.5);margin:auto auto 0}
html #onboarding.ob-vitrine :is(.ob-compte-fond,.ob-compte-confettis){position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
html #onboarding.ob-vitrine .ob-compte-fond{fill:rgba(255,255,255,.13)}
html #onboarding.ob-vitrine .ob-compte-rai{fill:none;stroke:var(--v-sun);stroke-width:5;stroke-linecap:round}
html #onboarding.ob-vitrine .ob-account .ob-compte-stk{position:relative;display:block;width:var(--stk);margin:0}
/* Le « Bravo » (Elisa, 7 novembre, 11 h 31 : son GIF, il saute de joie) : plus large que l'autocollant, à peu près à sa hauteur ;
   il ne flotte plus par-dessus son saut ; « Bravo ! » se décale à son pied */
html #onboarding.ob-vitrine .ob-account .ob-compte-stk.is-bravo{width:calc(var(--stk) * 1.34);animation:none}
html #onboarding.ob-vitrine .ob-compte-haut:has(.ob-compte-stk.is-bravo) .ob-compte-bravo{right:calc(50% + var(--stk) * .6)}
/* Ouverte sans première requête (depuis Mon compte, après une déconnexion), la clé ouvre la porte (Elisa, 7 novembre, 14 h 27 : son
   GIF) : à peu près la hauteur de l'autocollant, plus large (la porte) ; il ne flotte plus par-dessus son geste */
html #onboarding.ob-vitrine .ob-account .ob-compte-stk.is-cle{width:calc(var(--stk) * 1.5);animation:none}
html #onboarding.ob-vitrine .ob-compte-bravo{position:absolute;right:calc(50% + var(--stk) * .52);bottom:calc(var(--stk) * -.07);z-index:1;margin:0;padding:.2em .6em .26em;border-radius:.48em;
  background:var(--v-sun);color:var(--v-ink);font:800 clamp(14px,calc(var(--stk) * .245),21px)/1.1 var(--v-display);letter-spacing:-.02em;white-space:nowrap;rotate:-6deg;box-shadow:0 .17em 0 var(--v-sun-lip)}
html #onboarding.ob-vitrine .ob-compte-rayons{position:absolute;right:100%;top:58%;width:1.1em;height:1.1em;margin-right:.08em;overflow:visible;fill:none;stroke:var(--v-sun);stroke-width:3.4;stroke-linecap:round}
@media (max-width:359px){html #onboarding.ob-vitrine .ob-compte-rayons{display:none}}
html #onboarding.ob-vitrine .ob-account .ob-compte-haut+.ob-title{margin-top:16px!important}
html #onboarding.ob-vitrine .ob-account .ob-title{font-size:clamp(26px,7.4vw,31px)!important}
html #onboarding.ob-vitrine.ob-fit-1 .ob-account .ob-title{font-size:clamp(24px,6.9vw,28px)!important}
html #onboarding.ob-vitrine.ob-fit-3 .ob-account .ob-title{font-size:23px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-account .ob-title{font-size:21px!important}
html #onboarding.ob-vitrine .ob-fete-emoji{display:inline-block;transform-origin:35% 85%}
/* 7 novembre, 1 h 05 (« regarde si au niveau espacement UI/UX on est bon ») : l’échelle de 4 px du 4 novembre. Le titre et ses deux
   phrases forment un groupe (10 px, comme partout), la carte et les boutons un autre (16 px, puis 10 px entre les boutons) ; entre les deux
   groupes, 24 px. Les paliers resserrent ces écarts dans le même ordre, sans jamais coller les boutons (leur rebord fait 4 px). */
html #onboarding.ob-vitrine .ob-compte-lead{margin:10px auto 0;max-width:340px;color:#fff;font:600 16.5px/1.4 var(--v-display);letter-spacing:-.01em;text-align:center;text-wrap:balance}
html #onboarding.ob-vitrine .ob-compte-lead span{display:block;text-wrap:balance}
/* La carte « Sauvegarde ta progression » : le nuage dans sa pastille, le titre, puis la phrase, à gauche */
html #onboarding.ob-vitrine .ob-compte-carte{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px;margin:24px 0 0;padding:13px 15px 13px 13px;border-radius:22px;background:rgba(255,255,255,.13);text-align:left}
html #onboarding.ob-vitrine .ob-compte-carte-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.13);color:#fff}
html #onboarding.ob-vitrine .ob-compte-carte-ico svg{display:block;width:26px;height:26px}
html #onboarding.ob-vitrine .ob-compte-carte-txt{display:grid;gap:3px;min-width:0}
html #onboarding.ob-vitrine .ob-compte-carte-txt b{color:#fff;font:700 16px/1.2 var(--v-display);letter-spacing:-.01em}
html #onboarding.ob-vitrine .ob-compte-carte-txt small{color:rgba(255,255,255,.8);font:500 13.5px/1.42 var(--v-ui);text-wrap:pretty}
html #onboarding.ob-vitrine .ob-compte-carte+.ob-provider-list{margin-top:16px!important}
html #onboarding.ob-vitrine .ob-account .ob-provider{min-height:52px!important}
html #onboarding.ob-vitrine .ob-compte-sub{margin:9px auto 0;max-width:330px;color:rgba(255,255,255,.8);font:500 14.5px/1.45 var(--v-ui);text-align:center;text-wrap:balance}
html #onboarding.ob-vitrine .ob-compte-msg{margin:10px 0 0;padding:9px 12px;border:1.5px solid rgba(255,255,255,.22);border-radius:13px;background:rgba(255,255,255,.12);
  color:#fff;font:600 13px/1.4 var(--v-ui);text-align:center;text-wrap:balance}
html #onboarding.ob-vitrine .ob-compte-msg:empty{margin:0;padding:0;border:0}
/* 7 novembre, 0 h 29 : sur les écrans où tout ne tient pas, les boutons et la carte se resserrent d’abord ; la mascotte ne rapetisse
   qu’au palier suivant (plus bas, --stk-k). */
html #onboarding.ob-vitrine.ob-fit-1 .ob-account .ob-provider-list{margin-top:14px!important;gap:10px!important}
html #onboarding.ob-vitrine.ob-fit-1 .ob-account .ob-provider{min-height:48px!important}
html #onboarding.ob-vitrine.ob-fit-1 .ob-compte-carte{margin-top:20px;padding:12px 14px 12px 12px}
html #onboarding.ob-vitrine.ob-fit-1 .ob-compte-carte-txt small{font-size:13px;line-height:1.38}
html #onboarding.ob-vitrine.ob-fit-1 .ob-compte-lead{font-size:16px}
html #onboarding.ob-vitrine.ob-fit-3 .ob-compte-lead{margin-top:10px;font-size:15px}
html #onboarding.ob-vitrine.ob-fit-3 .ob-compte-sub{font-size:13.5px}
html #onboarding.ob-vitrine.ob-fit-3 .ob-account .ob-provider{min-height:46px!important}
html #onboarding.ob-vitrine.ob-fit-3 .ob-account .ob-provider-list{margin-top:12px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-account .ob-provider-list{margin-top:10px!important;gap:8px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-account .ob-provider{min-height:44px!important}
/* 14 h 08 : avec Google, trois boutons ; au dernier palier, ils se resserrent encore (iPhone SE). */
html #onboarding.ob-vitrine.ob-fit-5 .ob-account .ob-provider{min-height:42px!important}
html #onboarding.ob-vitrine.ob-fit-5 .ob-account .ob-provider-list{margin-top:10px!important;gap:8px!important}
/* Écrans étroits (moins de 360 px) : « Bientôt » passe en pastille sur le coin du bouton, le texte garde toute sa ligne. */
@media (max-width:359px){
  html #onboarding.ob-vitrine .ob-provider{position:relative;grid-template-columns:24px minmax(0,1fr) 24px!important;column-gap:8px!important;padding:0 12px!important;font-size:14.5px!important}
  html #onboarding.ob-vitrine .ob-provider small{position:absolute;top:-8px;right:12px;box-shadow:0 2px 0 rgba(27,22,64,.18)}
  html #onboarding.ob-vitrine .ob-account .ob-provider-list{margin-top:10px!important;gap:12px!important}
}
@keyframes obvFeteEmoji{0%{transform:scale(0) rotate(-40deg)}35%{transform:scale(1.45) rotate(14deg)}55%{transform:scale(.92) rotate(-10deg)}75%{transform:scale(1.08) rotate(6deg)}100%{transform:none}}

/* ---------- Retours de 11 h 08 (Elisa, captures de son iPhone, TestFlight) ---------- */
/* Réf. 2, le rappel : « laisser choisir de manière UI/UX à quelle heure, et récupérer les jours mis dans l’autre page ». Une carte
   blanche à rebord, comme les tuiles : « À quel moment ? » (5 novembre, 12 h 12 : les moments, puis les heures, comme Mon compte),
   puis les jours de séance du parcours, allumés. La fenêtre d’iOS en aperçu,
   un peu plus petite, reste dessous avec sa flèche ; sur les petits écrans, elle s’efface la première. */
html #onboarding.ob-vitrine .ob-rappel-carte{margin-top:2px;padding:12px 14px;border-radius:20px;background:#fff;color:var(--v-ink);box-shadow:0 4px 0 var(--v-shadow-lip)}
html #onboarding.ob-vitrine .ob-rappel-k{color:var(--v-ink-2);font:700 13.5px/1.2 var(--v-ui)}
/* « À quel moment ? » (Elisa, 5 novembre, 12 h 12, réf. 5 : comme le rappel de Mon compte) : Matin, Après-midi, Soir dans un bloc,
   le moment choisi en blanc ; puis les heures en pastilles, la choisie en jaune soleil. */
html #onboarding.ob-vitrine .ob-rappel-carte>.ob-rappel-k{display:block;margin:2px 2px 9px}
html #onboarding.ob-vitrine .ob-rappel-choix .rp-seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:#F1EFF8}
html #onboarding.ob-vitrine .ob-rappel-choix .rp-slot{flex:1 1 0;min-width:0;min-height:38px;margin:0;padding:0 4px;border:0;border-radius:11px;background:transparent;color:var(--v-ink-2);
  font:700 13.5px/1 var(--v-display);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .15s,color .15s,box-shadow .15s}
html #onboarding.ob-vitrine .ob-rappel-choix .rp-slot{white-space:nowrap}
html #onboarding.ob-vitrine .ob-rappel-choix .rp-slot.on{background:#fff;color:var(--v-accent-ink);box-shadow:0 2px 0 var(--v-line),0 1px 5px rgba(27,22,64,.12)}
html #onboarding.ob-vitrine .ob-rappel-choix .rp-heures{display:grid;grid-template-columns:repeat(auto-fit,minmax(46px,1fr));gap:6px;margin-top:9px}
html #onboarding.ob-vitrine .ob-rappel-choix .rp-heure{min-width:0;min-height:40px;margin:0;padding:0 2px;border:2px solid var(--v-line);border-radius:12px;background:#fff;color:var(--v-ink);
  font:700 14px/1 var(--v-display);font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .12s var(--v-press),border-color .15s,background-color .15s,box-shadow .15s}
html #onboarding.ob-vitrine .ob-rappel-choix :is(.rp-slot,.rp-heure):active{transform:scale(.95)}
html #onboarding.ob-vitrine .ob-rappel-choix .rp-heure.on{border-color:var(--v-sun);background:#FFFBEB;box-shadow:0 3px 0 var(--v-sun-lip)}
html #onboarding.ob-vitrine .ob-rappel-choix :is(.rp-slot,.rp-heure):focus-visible{outline:3px solid var(--v-sun);outline-offset:2px}
html #onboarding.ob-vitrine .ob-rappel-jours{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;padding-top:10px;border-top:1.5px dashed var(--v-line)}
html #onboarding.ob-vitrine .ob-rappel-semaine{display:flex;gap:4px}
html #onboarding.ob-vitrine .ob-rappel-semaine i{--off:#F1EFF8;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--off);color:var(--v-ink-3);font:800 10.5px/1 var(--v-ui);font-style:normal}
html #onboarding.ob-vitrine .ob-rappel-semaine i.on{background:var(--v-accent);color:#fff}
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif{width:min(250px,100%);margin-top:14px}
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif-alert b{padding:15px 14px 0;font-size:15.5px}
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif-alert small{padding:3px 14px 14px;font-size:12px}
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif-btns button{padding:9px 4px 10px;font-size:15px}
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif-arrow{height:46px;margin-top:8px}
html #onboarding.ob-vitrine .ob-rappel-step .ob-rappel-note{margin-top:10px}
html #onboarding.ob-vitrine.ob-fit-1 .ob-rappel-step .ob-notif-alert small{display:none}
html #onboarding.ob-vitrine.ob-fit-2 .ob-rappel-step .ob-notif-arrow{display:none}
html #onboarding.ob-vitrine.ob-fit-3 .ob-rappel-step .ob-notif{display:none}
html #onboarding.ob-vitrine.ob-fit-2 .ob-rappel-choix .rp-heures{margin-top:7px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-rappel-choix :is(.rp-slot,.rp-heure){min-height:36px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-rappel-jours{margin-top:8px;padding-top:7px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-rappel-step .ob-rappel-note{margin-top:6px}
@media (max-width:359px){html #onboarding.ob-vitrine .ob-rappel-semaine i{width:19px;height:19px;font-size:9.5px}html #onboarding.ob-vitrine .ob-rappel-choix .rp-heure{font-size:13px}html #onboarding.ob-vitrine .ob-rappel-choix .rp-slot{font-size:12.5px;padding:0 2px}html #onboarding.ob-vitrine .ob-rappel-choix .rp-heures{grid-template-columns:repeat(auto-fit,minmax(42px,1fr));gap:5px}html #onboarding.ob-vitrine .ob-rappel-semaine{gap:3px}}
html #onboarding.ob-vitrine .ob-rappel-jours .ob-rappel-k{white-space:nowrap}

/* Réf. 4 (et le rythme) : « modifiable directement dans son planning, donc t’inquiète ». */
html #onboarding.ob-vitrine .ob-modifiable{display:flex;align-items:center;justify-content:center;gap:9px;margin:14px auto 0;max-width:340px;color:rgba(255,255,255,.84);font:600 13px/1.4 var(--v-ui);text-align:left;text-wrap:balance}
html #onboarding.ob-vitrine .ob-modifiable-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(159,240,198,.16);color:var(--v-mint)}
html #onboarding.ob-vitrine .ob-modifiable-ico svg{display:block;width:17px;height:17px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-modifiable{margin-top:8px;font-size:12.5px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-apport-note{margin-top:8px;padding-top:7px}
/* Le bouton remonté (réf. 7) prend 16 px aux étapes : sur un iPhone SE, la mascotte reste là grâce à ce palier. */
html #onboarding.ob-vitrine.ob-fit-2 .ob-source-grid{gap:8px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-source-tile{min-height:44px;padding-top:5px!important;padding-bottom:5px!important}
html #onboarding.ob-vitrine.ob-fit-2 .ob-source-tile>span:not(.ob-answer-icon){font-size:13px;line-height:1.12}
html #onboarding.ob-vitrine.ob-fit-2 .ob-source-tile .ob-answer-icon{width:30px!important;height:30px!important;border-radius:10px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-modifiable{display:none}

/* Réf. 3 : un raccourci de l’icône touché pendant l’onboarding le dit dans un bandeau, en haut. */
html #onboarding.ob-vitrine>.ob-bandeau{position:absolute;z-index:8;left:50%;top:calc(var(--safe-top,0px) + 10px);width:min(360px,calc(100% - 32px));margin:0;padding:11px 14px;border-radius:16px;
  background:var(--v-ink);color:#fff;font:700 14px/1.35 var(--v-display);text-align:center;text-wrap:balance;box-shadow:0 10px 28px rgba(20,10,60,.4);
  transform:translate(-50%,-160%);opacity:0;pointer-events:none;transition:transform .35s var(--v-pop),opacity .25s ease}
html #onboarding.ob-vitrine>.ob-bandeau.is-on{transform:translate(-50%,0);opacity:1}
@media (prefers-reduced-motion:reduce){html #onboarding.ob-vitrine>.ob-bandeau{transition:opacity .2s ease}}
html[data-motion="reduce"] #onboarding.ob-vitrine>.ob-bandeau{transition:opacity .2s ease}

/* Réf. 7 : « le bouton jaune, je trouve qu’on est trop bas » : il remonte, sur toutes les étapes (il ne saute pas d’une page à l’autre).
   4 novembre, 14 h 08 (réf. 3) : « monter encore le bouton jaune » : jusqu’à 24 px de plus sur les grands écrans (58 px sur un iPhone
   de 874 pt de haut) ; les petits écrans, qui ont moins de place, gardent les 34 px d’avant. */
html #onboarding.ob-vitrine .ob-foot{padding-bottom:calc(var(--safe-bottom,0px) + clamp(34px,6.6vh,58px))!important}

/* ---------- Le pays (4 novembre, 13 h 18 : « une page où il détecte le pays où la personne vit ») ----------
   La carte blanche à rebord des tuiles, jaune soleil et cochée quand le pays est là : le drapeau en grand, le nom, d’où il vient.
   Pendant la recherche, le globe (les trois emojis, l’un après l’autre) et « Je cherche où tu es… ». */
html #onboarding.ob-vitrine .ob-pays-carte{position:relative;display:flex;align-items:center;min-height:98px;box-sizing:border-box;margin:4px 0 0;padding:16px 18px;
  border:2.5px solid #fff;border-radius:22px;background:#fff;color:var(--v-ink);box-shadow:0 5px 0 var(--v-shadow-lip)}
html #onboarding.ob-vitrine .ob-pays-carte.is-on{border-color:var(--v-sun);background:#FFFBEB;box-shadow:0 5px 0 var(--v-sun-lip)}
html #onboarding.ob-vitrine .ob-pays-carte.is-on::before{content:'';position:absolute;z-index:1;right:-10px;top:-10px;width:30px;height:30px;border-radius:50%;
  background:var(--v-sun) var(--v-check) center/16px no-repeat;box-shadow:0 2px 0 var(--v-sun-lip),0 0 0 3px #fff}
html #onboarding.ob-vitrine .ob-pays-carte.is-cherche{border-color:#fff;background:#fff;box-shadow:0 5px 0 var(--v-shadow-lip)}
html #onboarding.ob-vitrine .ob-pays-carte.is-cherche::before{display:none}
html #onboarding.ob-vitrine .ob-pays-radar{display:none;align-items:center;gap:16px;color:var(--v-ink-2);font:800 18px/1.25 var(--v-display)}
html #onboarding.ob-vitrine .ob-pays-carte.is-cherche .ob-pays-radar{display:flex}
html #onboarding.ob-vitrine .ob-pays-carte.is-cherche .ob-pays-trouve{display:none}
html #onboarding.ob-vitrine .ob-pays-globe{position:relative;flex:none;width:56px;height:56px;font-size:46px;line-height:56px;text-align:center}
html #onboarding.ob-vitrine .ob-pays-globe::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--v-accent-2);opacity:0}
html #onboarding.ob-vitrine .ob-pays-globe i{position:absolute;inset:0;font-style:normal;opacity:0}
html #onboarding.ob-vitrine .ob-pays-globe i:first-child{opacity:1}
html #onboarding.ob-vitrine .ob-pays-trouve{display:flex;align-items:center;gap:16px;min-width:0}
html #onboarding.ob-vitrine .ob-pays-drapeau{flex:none;font-size:56px;line-height:1;filter:drop-shadow(0 3px 0 rgba(27,22,64,.18))}
html #onboarding.ob-vitrine .ob-pays-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
html #onboarding.ob-vitrine .ob-pays-copy b{color:var(--v-ink);font:800 24px/1.1 var(--v-display);letter-spacing:-.02em;text-wrap:balance}
html #onboarding.ob-vitrine .ob-pays-copy small{color:var(--v-ink-3);font:700 13.5px/1.3 var(--v-ui)}
html #onboarding.ob-vitrine .ob-pays-trouve.is-vide{width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
html #onboarding.ob-vitrine .ob-pays-trouve.is-vide .ob-pays-drapeau{font-size:46px}
html #onboarding.ob-vitrine .ob-pays-changer{display:block;margin:18px auto 0;padding:8px 12px;border:0;background:none;color:#fff;font:700 15.5px/1.3 var(--v-ui);
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html #onboarding.ob-vitrine .ob-pays-changer u{white-space:nowrap;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--v-mint)}
html #onboarding.ob-vitrine .ob-pays-changer:active{opacity:.7}
html #onboarding.ob-vitrine .ob-pays-changer:focus-visible{outline:3px solid var(--v-sun);outline-offset:2px;border-radius:10px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-pays-carte{min-height:84px;padding:12px 16px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-pays-drapeau{font-size:46px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-pays-changer{margin-top:10px}
@keyframes obvPaysGlobe{0%,32%{opacity:1}33%,100%{opacity:0}}
@keyframes obvPaysPing{0%{opacity:.75;transform:scale(.7)}100%{opacity:0;transform:scale(1.45)}}
@keyframes obvPaysPose{0%{opacity:0;transform:scale(.2) rotate(-25deg)}60%{opacity:1;transform:scale(1.18) rotate(6deg)}100%{transform:none}}

/* ---------- La flèche des boutons jaunes (4 novembre, 14 h 08, réf. 3 : « une flèche animée au bouton continuer, commencer, etc. ») ----------
   obSetFooter la pose sur chaque bouton jaune ; tant que le bouton attend (désactivé), elle se cache. */
html #onboarding.ob-vitrine .ob-cta:disabled .ob-cta-arrow{display:none}

/* ---------- Le cadre de la notification (14 h 08, réf. 2 : « mettre plus en avant le cadre des notices, peut-être avec animation ») ----------
   La fenêtre d’iOS en aperçu grandit et s’éclaire : blanche et cerclée de blanc (plus de gris translucide qui se fondait dans le
   violet), posée sur un halo jaune. */
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif{width:min(286px,100%);margin-top:18px}
html #onboarding.ob-vitrine .ob-notif-cadre{position:relative;width:100%;isolation:isolate}
html #onboarding.ob-vitrine .ob-notif-cadre::before{content:'';position:absolute;inset:-24px -34px;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,216,107,.62),rgba(255,216,107,.2) 60%,rgba(255,216,107,0))}
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif-alert{background:#F8F8FB;box-shadow:0 0 0 3px #fff,0 0 0 9px rgba(255,216,107,.32),0 24px 50px rgba(20,10,60,.5)}
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif-alert b{padding:17px 16px 0;font-size:16.5px}
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif-alert small{padding:4px 16px 15px;font-size:12.5px}
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif-btns button{padding:11px 4px 12px;font-size:16px}
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif-btns .is-ok{position:relative;overflow:hidden}
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif-btns .is-ok::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(0,122,255,.3);opacity:0;pointer-events:none}
/* Quand la page se resserre (obFit), le cadre reste en avant : la phrase « Modifiable… » part avant la flèche, qui raccourcit ; au
   palier 3, la flèche part (la mascotte se fait petite depuis 15 h 42), le cadre reste ; il ne part qu’au dernier palier (voir « Le
   rythme des espacements »). */
html #onboarding.ob-vitrine.ob-fit-1 .ob-rappel-step .ob-notif{margin-top:12px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-rappel-step .ob-notif-arrow{display:block;height:34px;margin-top:4px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-rappel-step .ob-rappel-note{display:none}
html #onboarding.ob-vitrine.ob-fit-3 .ob-rappel-step .ob-notif{display:flex}
html #onboarding.ob-vitrine.ob-fit-3 .ob-rappel-step .ob-notif-arrow{display:none}
html #onboarding.ob-vitrine.ob-fit-4 .ob-rappel-step .ob-notif{display:none}
@keyframes obvNotifTombe{0%{opacity:0;transform:translateY(-34px) scale(.86) rotate(-2deg)}55%{opacity:1;transform:translateY(5px) scale(1.04) rotate(.6deg)}78%{transform:translateY(-2px) scale(.99)}100%{opacity:1;transform:none}}
@keyframes obvNotifHalo{0%,100%{opacity:.6;transform:scale(.94)}50%{opacity:1;transform:scale(1.07)}}
@keyframes obvNotifTouche{0%{opacity:0;transform:scale(.2)}10%{opacity:1;transform:scale(.55)}45%{opacity:0;transform:scale(2.4)}100%{opacity:0;transform:scale(2.4)}}

/* ---------- « Ils apprécient Requête » (4 novembre, 14 h 08) ----------
   Le lecteur des avis audio du héros de la vitrine (decouvrir/vitrine.css, .ph et .pv-*), en carte de l’onboarding : la photo dans son
   cadre blanc un peu penché, les pastilles en haut à gauche (loin du visage), la barre sombre en verre avec la lecture jaune et l’onde
   menthe ; puis les formateurs. La carte prend la hauteur qui reste (la photo se recadre) : la page ne défile pas. */
html #onboarding.ob-vitrine .ob-screen.ob-temoins{min-height:100%}
html #onboarding.ob-vitrine .ob-temoins .ob-title{margin-bottom:0!important}
html #onboarding.ob-vitrine .ob-tv{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;margin-top:18px}
html #onboarding.ob-vitrine .ob-tv-ph{position:relative;flex:1 1 auto;min-height:230px;max-height:470px;overflow:hidden;container-type:inline-size;border:5px solid #fff;border-radius:30px;background:#F5F2FF;
  transform:rotate(-1.5deg);box-shadow:0 28px 46px -26px rgba(10,4,60,.8);touch-action:pan-y;transition:box-shadow .3s}
html #onboarding.ob-vitrine .ob-tv.is-lecture .ob-tv-ph{box-shadow:0 0 0 5px var(--v-sun-hi),0 28px 46px -26px rgba(10,4,60,.8)}
html #onboarding.ob-vitrine .ob-tv-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 24%;transition:opacity .25s;-webkit-user-select:none;user-select:none}
html #onboarding.ob-vitrine .ob-tv-img.swap{opacity:.2}
html #onboarding.ob-vitrine .ob-tv-pick{position:absolute;left:10px;top:10px;z-index:2;display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(20,15,48,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html #onboarding.ob-vitrine .ob-tv-pick button{width:30px;height:30px;padding:0;border:2px solid transparent;border-radius:50%;overflow:hidden;background:none;cursor:pointer;opacity:.7;transition:opacity .15s,border-color .15s}
html #onboarding.ob-vitrine .ob-tv-pick button[aria-pressed="true"]{border-color:var(--v-sun-hi);opacity:1}
html #onboarding.ob-vitrine .ob-tv-pick img{display:block;width:100%;height:100%;object-fit:cover}
html #onboarding.ob-vitrine .ob-tv-voix{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:20px;
  background:rgba(20,15,48,.6);-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5);box-shadow:0 12px 30px -14px rgba(10,4,40,.7),inset 0 0 0 1px rgba(255,255,255,.16);color:#fff}
html #onboarding.ob-vitrine .ob-tv-btns{flex:none;display:flex;align-items:center;gap:4px}
html #onboarding.ob-vitrine .ob-tv-play{position:relative;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--v-sun);color:var(--v-ink);
  box-shadow:0 4px 0 var(--v-sun-lip);cursor:pointer;transition:transform .12s var(--v-press),box-shadow .12s var(--v-press)}
html #onboarding.ob-vitrine .ob-tv-play:active{transform:translateY(3px);box-shadow:0 1px 0 var(--v-sun-lip)}
html #onboarding.ob-vitrine .ob-tv-play svg{width:19px;height:19px}
html #onboarding.ob-vitrine .ob-tv-play .pa,html #onboarding.ob-vitrine .ob-tv.is-lecture .ob-tv-play .pl{display:none}
html #onboarding.ob-vitrine .ob-tv.is-lecture .ob-tv-play .pa{display:block}
html #onboarding.ob-vitrine .ob-tv-play::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,216,107,.75);opacity:0;pointer-events:none}
html #onboarding.ob-vitrine .ob-tv-nav{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;cursor:pointer;transition:transform .15s var(--v-press)}
html #onboarding.ob-vitrine .ob-tv-nav:active{transform:scale(.9)}
html #onboarding.ob-vitrine .ob-tv-nav svg{width:15px;height:15px}
/* Carte étroite (iPhone SE) : les flèches laissent leur place au nom et au métier ; les pastilles et le balayage changent d’avis. */
@container (max-width:329px){html #onboarding.ob-vitrine .ob-tv-nav{display:none}}
html #onboarding.ob-vitrine :is(.ob-tv-play,.ob-tv-nav,.ob-tv-pick button,.ob-tv-wave):focus-visible{outline:3px solid var(--v-mint);outline-offset:3px}
html #onboarding.ob-vitrine .ob-tv-main{flex:1;min-width:0;display:grid;gap:4px}
html #onboarding.ob-vitrine .ob-tv-cap{display:flex;align-items:center;gap:7px;margin:0;font:800 10px/1 var(--v-display);letter-spacing:.05em;text-transform:uppercase;color:var(--v-sun-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html #onboarding.ob-vitrine .ob-tv-who{display:flex;align-items:baseline;gap:7px;min-width:0;margin:0;white-space:nowrap;color:#fff}
html #onboarding.ob-vitrine .ob-tv-who b{flex:none;font:800 14px/1.1 var(--v-display);letter-spacing:-.01em;color:#fff}
html #onboarding.ob-vitrine .ob-tv-who span{min-width:0;overflow:hidden;text-overflow:ellipsis;font:600 11.5px/1.1 var(--v-ui);color:rgba(255,255,255,.82)}
html #onboarding.ob-vitrine .ob-tv-stars{flex:none;font-style:normal;font-size:11px;letter-spacing:1px;color:var(--v-sun)}
html #onboarding.ob-vitrine .ob-tv-wave{display:flex;align-items:center;gap:1.5px;height:22px;overflow:hidden;border-radius:6px;cursor:pointer;touch-action:none}
html #onboarding.ob-vitrine .ob-tv-wave i{flex:1;min-width:1.5px;height:calc(var(--h) * 100%);border-radius:99px;background:rgba(255,255,255,.4);transition:background-color .15s}
html #onboarding.ob-vitrine .ob-tv-wave i.on{background:var(--v-mint)}
html #onboarding.ob-vitrine .ob-tv-wave i.cur{background:#fff}
html #onboarding.ob-vitrine .ob-tv-note{margin:9px 0 0;text-align:center;font:500 11.5px/1.3 var(--v-ui);color:rgba(255,255,255,.72)}
html #onboarding.ob-vitrine .ob-tv-profs{flex:none;display:flex;align-items:center;gap:12px;margin-top:14px;padding:11px 14px;border-radius:20px;background:#fff;color:var(--v-ink);box-shadow:0 5px 0 var(--v-shadow-lip)}
html #onboarding.ob-vitrine .ob-tv-faces{flex:none;display:flex;padding-left:10px}
html #onboarding.ob-vitrine .ob-tv-faces>*{width:34px;height:34px;margin-left:-10px;box-sizing:border-box;border:2.5px solid #fff;border-radius:50%;background:var(--v-accent-soft);object-fit:cover}
html #onboarding.ob-vitrine .ob-tv-faces b{display:grid;place-items:center;background:var(--v-accent);color:#fff;font:800 12px/1 var(--v-display)}
html #onboarding.ob-vitrine .ob-tv-profs p{min-width:0;margin:0;font:600 13.5px/1.25 var(--v-ui);color:var(--v-ink-2)}
html #onboarding.ob-vitrine .ob-tv-profs p b{display:block;font:800 17px/1.15 var(--v-display);letter-spacing:-.01em;white-space:nowrap;color:var(--v-accent-ink)}
html #onboarding.ob-vitrine.ob-fit-1 .ob-tv-note{display:none}
html #onboarding.ob-vitrine.ob-fit-1 .ob-tv{margin-top:12px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-tv-ph{min-height:200px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-tv-profs{margin-top:10px;padding:8px 12px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-tv-faces>*{width:30px;height:30px}
html #onboarding.ob-vitrine.ob-fit-3 .ob-tv-ph{min-height:170px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-tv-profs p b{display:inline;font-size:15px}
@keyframes obvTvIn{0%{opacity:0;transform:translateY(16px) scale(.92) rotate(-5deg)}60%{opacity:1;transform:translateY(-3px) scale(1.01) rotate(-.8deg)}100%{opacity:1;transform:rotate(-1.5deg)}}
@keyframes obvTvFace{0%{opacity:0;transform:translateX(-10px) scale(.6)}100%{opacity:1;transform:none}}
@keyframes obvTvRing{0%{opacity:.9;transform:scale(.9)}70%{opacity:0;transform:scale(1.45)}100%{opacity:0;transform:scale(1.45)}}
@keyframes obvTvCur{from{opacity:.55}to{opacity:1}}

/* ---------- Le rythme des espacements (4 novembre, 15 h 42 : « étudie les espacements pour que ça soit le plus UI/UX possible ») ----------
   Mesuré écran par écran (iPhone de 874, 844 et 667 pt de haut) : une échelle commune, en multiples de 4 px. Sous la barre d’étapes,
   le titre à 16 px sur toutes les pages (la construction et l’engagement étaient 6 px plus bas) ; sa phrase à 10 px ; la bulle de la
   mascotte à 16 px ; ce qu’on choisit à 20 px de la bulle (18 à 24 px selon les pages). Les pages courtes (le pays, l’âge) ne
   laissent plus 190 à 220 px de vide au-dessus du bouton : leur contenu grandit et se pose au tiers de la place qui reste (le centre
   optique). Les paliers de resserrement (obFit) gardent leurs écarts plus serrés. */
html #onboarding.ob-vitrine .ob-flow-top{margin-bottom:16px}
html #onboarding.ob-vitrine .ob-pact .ob-title{margin-top:0}
html #onboarding.ob-vitrine .ob-build-hero{margin-top:0}
html #onboarding.ob-vitrine .ob-title+.ob-lead{margin-top:10px!important}
html #onboarding.ob-vitrine .ob-chat{margin:16px 0 20px!important}
/* L’accueil : la mascotte ne touche plus le titre (2 px → 12 px) */
html #onboarding.ob-vitrine .ob-hello-stage{margin-bottom:12px}
/* « Ils apprécient Requête » : la carte à 14 px du badge (16 h 09) */
html #onboarding.ob-vitrine .ob-tv-badge+.ob-tv{margin-top:14px}
/* Le pays : une carte plus présente, posée au tiers de la place qui reste (1/3 au-dessus, 2/3 sous le lien) */
html #onboarding.ob-vitrine .ob-screen.ob-pays-step{min-height:100%}
html #onboarding.ob-vitrine .ob-pays-step .ob-pays-carte{margin-top:auto;min-height:116px;padding:18px 20px}
html #onboarding.ob-vitrine .ob-pays-step .ob-pays-drapeau{font-size:62px}
html #onboarding.ob-vitrine .ob-pays-step .ob-pays-changer{margin-bottom:auto}
html #onboarding.ob-vitrine .ob-screen.ob-pays-step::after{content:'';margin-top:auto}
/* L’âge : des tuiles plus hautes (plus faciles à toucher), au tiers de la place qui reste */
html #onboarding.ob-vitrine .ob-screen.ob-age-step{min-height:100%}
html #onboarding.ob-vitrine .ob-age-step .ob-age-grid{margin-top:auto;margin-bottom:auto}
html #onboarding.ob-vitrine .ob-screen.ob-age-step::after{content:'';margin-top:auto}
html #onboarding.ob-vitrine .ob-age-tile{min-height:clamp(84px,12.4vh,108px)}
html #onboarding.ob-vitrine .ob-age-tile b{font-size:clamp(25px,3.5vh,30px)}
/* La connexion, palier par palier (7 novembre, 0 h 29) : la mascotte rapetisse (--stk) avec sa tache et son « Bravo ! », la carte se
   resserre ; ni l’une ni l’autre ne part. */
html #onboarding.ob-vitrine.ob-fit-2 .ob-account{--stk-k:.87}
html #onboarding.ob-vitrine.ob-fit-2 .ob-account .ob-compte-stk{display:block}
html #onboarding.ob-vitrine.ob-fit-3 .ob-account{--stk-k:.76}
html #onboarding.ob-vitrine.ob-fit-3 .ob-compte-carte{gap:12px;margin-top:16px;padding:11px 14px 11px 11px;border-radius:18px}
html #onboarding.ob-vitrine.ob-fit-3 .ob-compte-carte-ico{width:40px;height:40px}
html #onboarding.ob-vitrine.ob-fit-3 .ob-compte-carte-ico svg{width:24px;height:24px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-account{--stk-k:.66}
html #onboarding.ob-vitrine.ob-fit-4 .ob-compte-carte{margin-top:12px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-compte-carte-txt b{font-size:15px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-compte-carte-txt small{font-size:12.5px;line-height:1.35}
/* Au dernier palier (Safari et ses barres, petits iPhone) : la carte garde son titre, la mascotte se fait plus petite ; les boutons
   restent entiers. Sur les écrans les plus bas (iPhone SE dans Safari), le haut part (1 h 05 : la mascotte partait dès ce palier et
   laissait près de 100 px vides sous les boutons). */
html #onboarding.ob-vitrine.ob-fit-5 .ob-account{--stk-k:.58}
html #onboarding.ob-vitrine.ob-fit-5 .ob-account .ob-title{font-size:20px!important}
@media (max-height:620px){
  html #onboarding.ob-vitrine.ob-fit-5 .ob-compte-haut{display:none}
  html #onboarding.ob-vitrine.ob-fit-5 .ob-account .ob-compte-haut+.ob-title{margin-top:auto!important}
}
html #onboarding.ob-vitrine.ob-fit-5 .ob-compte-lead{margin-top:8px;font-size:14px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-compte-carte{gap:10px;margin-top:10px;padding:8px 12px 8px 8px;border-radius:16px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-compte-carte-ico{width:32px;height:32px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-compte-carte-ico svg{width:20px;height:20px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-compte-carte-txt small{display:none}
/* Le champ (prénom, pseudo) à 20 px de la bulle, comme les choix */
html #onboarding.ob-vitrine .ob-chat+.ob-field{margin-top:0!important}
/* Les petits écrans (iPhone SE, mini, 844 pt) : au palier 3, la mascotte et sa bulle se font petites au lieu de disparaître (elles
   partaient pour quelques pixels et laissaient jusqu’à 150 px de vide) ; elles ne partent qu’au palier 4. Sur le rappel, le cadre de la
   notification part en tout dernier (palier 5). */
html #onboarding.ob-vitrine.ob-fit-3 .ob-chat{display:grid!important;grid-template-columns:40px 1fr!important;align-items:center!important;gap:10px!important;margin:8px 0 10px!important}
html #onboarding.ob-vitrine.ob-fit-3 .ob-chat img{width:40px!important}
html #onboarding.ob-vitrine.ob-fit-3 .ob-bubble{padding:8px 12px!important;font-size:13.5px!important;line-height:1.3!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-chat{display:none!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-rappel-step .ob-notif{display:flex}
html #onboarding.ob-vitrine.ob-fit-5 .ob-rappel-step .ob-notif{display:none}
/* « Ils apprécient Requête » sur un écran peu haut : la photo un peu plus basse, pour garder de l’air au-dessus du bouton */
@media (max-height:700px){html #onboarding.ob-vitrine .ob-tv-ph{min-height:200px}}

/* ---------- Le badge « 1 000+ personnes apprécient Requête » (4 novembre, 16 h 09 : « fais comme un badge qui fusionne 1000 personnes
   apprécient Requête et Ils apprécient Requête ») ----------
   Le titre de l’étape : deux branches de laurier jaunes autour du chiffre, en grand, et de « personnes apprécient Requête ». Les
   branches poussent depuis leur pied à l’arrivée, pendant que le chiffre défile (obTemoinsBrancher). */
html #onboarding.ob-vitrine .ob-tv-badge{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:0;color:#fff}
html #onboarding.ob-vitrine .ob-tv-laurier{flex:none;width:38px;height:88px;color:var(--v-sun-hi);transform-origin:50% 100%;filter:drop-shadow(0 2px 0 rgba(27,22,64,.25))}
html #onboarding.ob-vitrine .ob-tv-laurier svg{display:block;width:100%;height:100%;overflow:visible}
html #onboarding.ob-vitrine .ob-tv-laurier.is-d{transform:scaleX(-1)}
html #onboarding.ob-vitrine .ob-tv-badge-c{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
html #onboarding.ob-vitrine .ob-tv-badge-c b{font:800 46px/1 var(--v-display);letter-spacing:-.03em;color:var(--v-sun-hi);white-space:nowrap;text-shadow:0 3px 0 rgba(27,22,64,.22)}
html #onboarding.ob-vitrine .ob-tv-badge-c b i{font-style:normal;font-variant-numeric:tabular-nums}
html #onboarding.ob-vitrine .ob-tv-badge-c>span{font:800 15.5px/1.2 var(--v-display);letter-spacing:-.01em;color:#fff;text-wrap:balance}
html #onboarding.ob-vitrine.ob-fit-2 .ob-tv-badge-c b{font-size:38px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-tv-laurier{width:32px;height:74px}
@keyframes obvLaurier{0%{opacity:0;scale:.3;rotate:-28deg}70%{opacity:1;scale:1.06;rotate:4deg}100%{opacity:1;scale:1;rotate:0deg}}

/* ---------- 4 novembre, 17 h 27 (Elisa, captures de l’iPhone) ----------
   Réf. 4 : « j’ai l’impression que les textes ne sont pas bien centrés, ils ont l’air de partir vers la gauche ; vérifie pour les autres
   pages ». La phrase sous le titre (ob-lead, 360 px au plus) et la mention des conditions (ob-legal-note, 340 px) gardaient leur largeur
   maximale, mais « .ob-slides p{margin:0} » effaçait leurs marges automatiques : la boîte restait collée à gauche, et le texte centré
   dedans partait de 11 px vers la gauche (21 px pour les conditions, réf. 2 : « centre le sous-texte du bas avec les conditions »).
   Mesuré page par page, ligne par ligne : plus aucun texte centré décalé. */
html #onboarding.ob-vitrine .ob-slides p.ob-lead,html #onboarding.ob-vitrine .ob-slides p.ob-legal-note{margin-left:auto!important;margin-right:auto!important}
/* Réf. 3 : « trop collé, la partie notification, au cadre du haut ». Le cadre de la notification porte un anneau blanc et jaune de 9 px :
   à 12 px de marge, il touchait presque la carte de l’heure (3 px). Il s’en écarte de 21 px visibles, un peu moins sur les petits écrans. */
html #onboarding.ob-vitrine .ob-rappel-step .ob-notif{margin-top:32px}
html #onboarding.ob-vitrine.ob-fit-1 .ob-rappel-step .ob-notif{margin-top:30px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-rappel-step .ob-notif{margin-top:26px}
html #onboarding.ob-vitrine.ob-fit-3 .ob-rappel-step .ob-notif{margin-top:22px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-rappel-step .ob-notif{margin-top:20px}
/* Réf. 6 : « il y a un bout qui reste quand on change de page ». Sur l’iPhone, la pastille jaune cochée d’une tuile choisie (elle dépasse
   du coin de la tuile) restait un instant au bord de l’écran pendant la sortie de la page, coupée au bord de la tuile. Elle s’efface
   d’elle-même dès que la page sort. */
html #onboarding.ob-vitrine .ob-slide.out :is(.ob-tile.on,.ob-answer.on,.ob-pays-carte.is-on)::before{opacity:0!important;visibility:hidden!important;animation:none!important}
/* Réf. 1 : « Découvrez ce qu’ils en pensent (UI/UX, DA du site internet), après Requête ». Sous le badge, un autocollant lavande penché,
   comme « Tes retours font l’appli » sur la vitrine (decouvrir/vitrine.css, .sticker) : son étoile qui déborde à droite, ses confettis,
   et la moitié posée sur le bord de la carte des avis ; il se dandine une fois à l’arrivée. */
html #onboarding.ob-vitrine .ob-tv-badge+.ob-tv{margin-top:8px}
html #onboarding.ob-vitrine .ob-tv-stk{position:relative;z-index:3;align-self:center;margin:0 0 -13px;transform:rotate(-2deg);box-shadow:0 3px 0 rgba(27,22,64,.22)}
html #onboarding.ob-vitrine .ob-tv-stk::before,html #onboarding.ob-vitrine .ob-tv-stk::after{content:'';position:absolute;width:18px;height:21px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cpath d='M14 1l6 3.5-6 3.5z' fill='%238B6CFF'/%3E%3Crect x='2' y='10' width='8' height='3.5' rx='1' transform='rotate(-25 6 11.75)' fill='%23F0616A'/%3E%3Crect x='5' y='19' width='8' height='3.5' rx='1' transform='rotate(20 9 20.75)' fill='%23C9BCFF'/%3E%3C/svg%3E") no-repeat center/contain}
html #onboarding.ob-vitrine .ob-tv-stk::before{left:-22px;top:-11px}
html #onboarding.ob-vitrine .ob-tv-stk::after{right:-44px;bottom:-10px;transform:rotate(180deg)}
html #onboarding.ob-vitrine.ob-fit-4 .ob-tv-stk{display:none}
html #onboarding.ob-vitrine.ob-fit-4 .ob-tv-badge+.ob-tv{margin-top:14px}
@keyframes obvStkWobble{0%,100%{transform:rotate(-2deg)}30%{transform:rotate(3deg) scale(1.06)}60%{transform:rotate(-4deg)}}
/* « Demander si c’est une femme ou un homme, ou ne veut pas dire (dans l’écran de l’âge, peut-être) » : sous les âges, « Et tu es… » et
   trois tuiles comme les autres choix ; les âges et elles se posent ensemble au tiers de la place qui reste. */
html #onboarding.ob-vitrine .ob-age-step .ob-age-grid{margin-bottom:0}
html #onboarding.ob-vitrine .ob-age-step .ob-genre{margin-top:18px;margin-bottom:auto}
html #onboarding.ob-vitrine .ob-genre-q{margin:0 0 9px!important;color:rgba(255,255,255,.9)!important;font:800 12px/1.2 var(--v-ui)!important;letter-spacing:.1em;text-transform:uppercase;text-align:center}
html #onboarding.ob-vitrine .ob-genre-row{grid-template-columns:repeat(3,minmax(0,1fr))}
html #onboarding.ob-vitrine .ob-genre-c{min-height:54px;padding:8px 6px;color:var(--v-ink);font:800 15px/1.15 var(--v-display);letter-spacing:-.01em;text-align:center;text-wrap:balance}
html #onboarding.ob-vitrine .ob-genre-c.on{color:var(--v-accent-ink)}
html #onboarding.ob-vitrine.ob-fit-2 .ob-age-step .ob-genre{margin-top:12px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-genre-c{min-height:46px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-genre-q{margin-bottom:6px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-genre-c{min-height:40px;padding:6px 4px;font-size:14px}
/* Réf. 8 et 9 : « fusionner sur une page, car on s’en fout des activités sur un an, etc. : à enlever ». Sur la page des jours, à la
   place du bilan d’un an : à ce rythme, le grand chiffre jaune des jours (celui de l’ancienne page « 24 jours ») et la phrase qui dit
   la durée, les leçons et la date de fin. */
html #onboarding.ob-vitrine .ob-proj{padding:13px 16px 14px}
html #onboarding.ob-vitrine .ob-proj .ob-apport-k{margin-bottom:10px}
html #onboarding.ob-vitrine .ob-proj-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px;text-align:left}
html #onboarding.ob-vitrine .ob-proj-big{display:flex;flex-direction:column;align-items:center;min-width:72px;padding-right:16px;border-right:1.5px solid rgba(255,255,255,.18)}
html #onboarding.ob-vitrine .ob-proj-big b{display:block;font:800 clamp(46px,13.5vw,58px)/.9 var(--v-display);letter-spacing:-.04em;color:var(--v-sun-hi);
  text-shadow:0 4px 0 var(--v-sun-lip),0 8px 0 rgba(27,22,64,.22);font-variant-numeric:tabular-nums;white-space:nowrap}
html #onboarding.ob-vitrine .ob-proj-big b i{font-style:normal}
html #onboarding.ob-vitrine .ob-proj-big small{margin-top:10px;color:var(--v-mint);font:800 11.5px/1 var(--v-ui);letter-spacing:.14em;text-transform:uppercase}
html #onboarding.ob-vitrine .ob-proj-t{margin:0!important;color:#fff!important;font:700 15px/1.38 var(--v-ui)!important;text-wrap:pretty}
html #onboarding.ob-vitrine .ob-proj-t em{font-style:normal;color:var(--v-sun-hi)}
html #onboarding.ob-vitrine .ob-proj-t b{color:#fff;font-weight:800}
html #onboarding.ob-vitrine.ob-fit-2 .ob-proj-big b{font-size:44px}
html #onboarding.ob-vitrine.ob-fit-2 .ob-proj-t{font-size:14px!important}
html #onboarding.ob-vitrine.ob-fit-4 .ob-proj-big b{font-size:38px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-proj-t{font-size:13px!important;line-height:1.3!important}


/* ---------- 5 novembre, 19 h 41 : l’engagement au doigt (« mettre plutôt un doigt… pour remplacer la signature ») ----------
   Sous le certificat, la phrase, puis un grand bouton jaune soleil à l’empreinte, qu’un halo appelle. Maintenu : il s’enfonce, l’anneau
   blanc se remplit en 1,5 s, l’empreinte se colore de bas en haut. Fini : le bouton passe au menthe et coche, le tampon se pose. Lâché trop
   tôt : l’anneau se vide, la phrase passe au jaune et tremble. Les animations sont dans le média « no-preference » (plus haut) ; au
   repos, l’état final. */
html #onboarding.ob-vitrine .ob-pact-date{margin:12px 0 0;color:var(--v-ink-3);font:600 12px/1 var(--v-ui);text-align:center}
html #onboarding.ob-vitrine .ob-hold-zone{display:flex;flex-direction:column;align-items:center;gap:16px;margin:20px 0 4px}
html #onboarding.ob-vitrine .ob-hold-hint{display:flex;align-items:center;justify-content:center;min-height:2.7em;margin:0;max-width:300px;color:rgba(255,255,255,.86);font:650 14.5px/1.35 var(--v-ui);text-align:center;text-wrap:balance}
html #onboarding.ob-vitrine .ob-hold-hint.is-relance{color:var(--v-sun-hi)}
html #onboarding.ob-vitrine .ob-hold{position:relative;display:grid;place-items:center;width:96px;height:96px;margin:9px 0 6px;padding:0;border:0;border-radius:50%;
  background:var(--v-sun);color:#1B1640;box-shadow:0 6px 0 var(--v-sun-lip),0 16px 30px -12px rgba(27,22,64,.6);cursor:pointer;touch-action:none;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .16s var(--v-press),box-shadow .16s var(--v-press),background .3s}
html #onboarding.ob-vitrine .ob-hold::before{content:'';position:absolute;inset:-12px;border-radius:50%;background:rgba(255,216,107,.28);pointer-events:none}
html #onboarding.ob-vitrine .ob-hold:focus-visible{outline:3px solid #fff;outline-offset:14px}
html #onboarding.ob-vitrine .ob-hold.is-holding{transform:translateY(4px) scale(.97);box-shadow:0 2px 0 var(--v-sun-lip),0 8px 18px -10px rgba(27,22,64,.55)}
html #onboarding.ob-vitrine .ob-hold:is(.is-holding,.is-done)::before{opacity:0}
html #onboarding.ob-vitrine .ob-hold-ring{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);overflow:visible;transform:rotate(-90deg);pointer-events:none}
html #onboarding.ob-vitrine .ob-hold-track{fill:none;stroke:rgba(255,255,255,.2);stroke-width:4.5}
html #onboarding.ob-vitrine .ob-hold-fill{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:289.03;stroke-dashoffset:289.03}
html #onboarding.ob-vitrine .ob-hold.is-lache .ob-hold-fill{transition:stroke-dashoffset .35s ease-out}
html #onboarding.ob-vitrine .ob-hold-ico{position:relative;display:block;width:54px;height:54px;transition:opacity .15s,transform .2s var(--v-press)}
html #onboarding.ob-vitrine .ob-hold-ico svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html #onboarding.ob-vitrine .ob-hold-ico>svg{opacity:.38}
html #onboarding.ob-vitrine .ob-hold-plein{position:absolute;inset:0;clip-path:inset(calc((1 - var(--p,0)) * 100%) 0 0 0)}
html #onboarding.ob-vitrine .ob-hold.is-lache .ob-hold-plein{transition:clip-path .35s ease-out}
html #onboarding.ob-vitrine .ob-hold-ok{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.4);pointer-events:none}
html #onboarding.ob-vitrine .ob-hold-ok svg{width:46px;height:46px;fill:none;stroke:#0D5B3B;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0}
html #onboarding.ob-vitrine .ob-hold.is-done{background:var(--v-mint);box-shadow:0 6px 0 #5FCB97,0 16px 30px -12px rgba(27,22,64,.6)}
html #onboarding.ob-vitrine .ob-hold.is-done .ob-hold-ico{opacity:0;transform:scale(.6)}
html #onboarding.ob-vitrine .ob-hold.is-done .ob-hold-ok{opacity:1;transform:none;transition:opacity .2s .05s,transform .35s var(--v-pop) .05s}
html #onboarding.ob-vitrine .ob-hold.is-done .ob-hold-fill{stroke:var(--v-mint)}
@keyframes obvHoldHalo{0%{transform:scale(.88);opacity:.95}100%{transform:scale(1.32);opacity:0}}
@keyframes obvHoldOk{0%{transform:scale(.92)}55%{transform:scale(1.08)}100%{transform:none}}
@keyframes obvHoldCoche{from{stroke-dashoffset:24}}
@keyframes obvHoldHint{0%,100%{transform:none}25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-2px)}}
/* L’engagement pris, la page suivante arrive : « Plus tard » s’efface (sans que rien ne bouge) */
html #onboarding.ob-vitrine:has(.ob-hold.is-done) .ob-skip{opacity:0;pointer-events:none;transition:opacity .2s ease}
html #onboarding.ob-vitrine.ob-fit-2 .ob-pact .ob-hold-zone{gap:12px;margin-top:14px}
/* Le serment (Elisa, 7 novembre, 15 h 38 : son GIF, il lève la patte) : à droite du bouton à l’empreinte, la patte levée de son côté */
html #onboarding.ob-vitrine .ob-hold-zone.has-chat{position:relative}
html #onboarding.ob-vitrine .ob-hold-chat{position:absolute;bottom:0;left:calc(50% + 66px);width:92px;pointer-events:none}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact .ob-hold-chat{left:calc(50% + 56px);width:80px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-pact .ob-hold-chat{left:calc(50% + 44px);width:64px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact .ob-pact-date{margin-top:8px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact .ob-hold{width:82px;height:82px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact .ob-hold-ico{width:46px;height:46px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact .ob-hold-hint{font-size:13.5px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact .ob-hold-zone{gap:8px;margin-top:10px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact .ob-hold::before{inset:-7px}
html #onboarding.ob-vitrine.ob-fit-4 .ob-pact .ob-pact-stamp{top:auto;bottom:6px;right:8px;padding:4px 9px;font-size:12px}
/* Le plus petit écran : la date à gauche, le tampon à droite, comme au bas d’un certificat (centrée, le tampon la touchait) */
html #onboarding.ob-vitrine.ob-fit-5 .ob-pact .ob-pact-date{padding-left:2px;text-align:left}
/* 21 h 19 : « Un engagement envers toi-même » : « toi-même » ne se coupe pas au trait d’union */
html #onboarding.ob-vitrine .ob-nw{white-space:nowrap}
html #onboarding.ob-vitrine .ob-pact .ob-lead{text-wrap:balance}
/* Au plus petit écran (320 px), le titre prend deux lignes : le bouton à l’empreinte et ses marges se resserrent, pour que « C’est
   parti ! » ne le recouvre pas une fois l’engagement pris */
html #onboarding.ob-vitrine.ob-fit-5 .ob-pact .ob-hold{width:64px;height:64px;margin:6px 0 4px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-pact .ob-hold-ico{width:36px;height:36px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-pact .ob-hold-ok svg{width:32px;height:32px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-pact .ob-hold::before{inset:-6px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-pact .ob-hold-zone{gap:6px;margin-top:8px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-pact .ob-hold-hint{min-height:0;font-size:13px}
html #onboarding.ob-vitrine.ob-fit-5 .ob-pact .ob-pact-txt{font-size:12.5px;line-height:1.34}

/* ---------- Le paywall (Elisa, 10 novembre, 17 h 11 : « une page étudiée psychologiquement, de la même DA que le site internet ») ----------
   Le violet et la grille du héros, l'étiquette menthe penchée, le titre au mot surligné, le chat diplômé (l'objectif atteint) ; les
   avantages dans un cadre translucide avec les coches jaunes ; deux cartes blanches à rebord, l'annuelle choisie d'avance (bord soleil,
   pastille « −77 % ») ; la preuve sociale ; « Continuer » discret, qui n'apparaît qu'au bout de deux secondes. */
html #onboarding.ob-vitrine .ob-paywall{display:flex;flex-direction:column;padding-bottom:4px}
html #onboarding.ob-vitrine .ob-paywall .pw-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
html #onboarding.ob-vitrine .pw-lien{min-height:44px;padding:0 4px;border:0;background:none;color:rgba(255,255,255,.8);font:600 14px/1 var(--v-ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
html #onboarding.ob-vitrine .pw-lien:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:8px}
html #onboarding.ob-vitrine .pw-hero{position:relative;padding-right:96px}
html #onboarding.ob-vitrine .pw-chat{position:absolute;right:-4px;top:-6px;width:100px;height:auto;rotate:6deg;transform-origin:50% 92%;-webkit-user-drag:none;user-select:none;pointer-events:none}
html #onboarding.ob-vitrine .pw-tag{display:inline-block;margin:0 0 10px;padding:6px 12px 5px;border:2.5px solid #fff;border-radius:11px;background:var(--v-mint);color:var(--v-ink);
  font:800 13px/1 var(--v-display);rotate:-3deg;box-shadow:0 3px 0 var(--v-shadow-lip)}
html #onboarding.ob-vitrine .ob-paywall .ob-title{text-align:left!important;font-size:clamp(26px,7.4vw,32px)!important;margin:0!important}
html #onboarding.ob-vitrine .pw-but{margin:10px 0 0;color:rgba(255,255,255,.86);font:500 15px/1.4 var(--v-ui)}
html #onboarding.ob-vitrine .pw-but b{color:var(--v-sun-hi);font-weight:700}
html #onboarding.ob-vitrine .pw-plus{display:grid;gap:8px;margin:16px 0 0;padding:13px 14px;list-style:none;border-radius:18px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16)}
html #onboarding.ob-vitrine .pw-plus li{display:flex;align-items:flex-start;gap:10px;margin:0;color:#fff;font:500 15px/1.35 var(--v-ui)}
html #onboarding.ob-vitrine .pw-plus li::before{content:'';flex:none;width:22px;height:22px;margin-top:-1px;border-radius:50%;background:var(--v-sun) var(--v-check) 50% 52%/13px no-repeat;box-shadow:0 2px 0 var(--v-sun-lip)}
html #onboarding.ob-vitrine .pw-plus b{font-weight:800}
html #onboarding.ob-vitrine .pw-offres{display:grid;gap:12px;margin-top:18px}
html #onboarding.ob-vitrine .pw-offre{position:relative;display:grid;grid-template-columns:22px 1fr auto;grid-template-areas:"r t p" "r s s";align-items:center;column-gap:12px;row-gap:3px;
  width:100%;margin:0;padding:13px 16px;border:3px solid transparent;border-radius:18px;background:#fff;color:var(--v-ink);text-align:left;font:inherit;cursor:pointer;
  box-shadow:0 4px 0 var(--v-shadow-lip);transition:transform .14s var(--v-press),box-shadow .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent}
html #onboarding.ob-vitrine .pw-offre:active{transform:translateY(3px);box-shadow:0 1px 0 var(--v-shadow-lip)}
html #onboarding.ob-vitrine .pw-offre.is-on{border-color:var(--v-sun);box-shadow:0 4px 0 var(--v-sun-lip),0 0 0 4px rgba(255,200,61,.3)}
html #onboarding.ob-vitrine .pw-offre:focus-visible{outline:3px solid #fff;outline-offset:3px}
html #onboarding.ob-vitrine .pw-o-radio{grid-area:r;width:22px;height:22px;box-sizing:border-box;border:2.5px solid #CFC8EA;border-radius:50%}
html #onboarding.ob-vitrine .pw-offre.is-on .pw-o-radio{border:0;background:var(--v-sun) var(--v-check) 50% 52%/13px no-repeat;box-shadow:0 2px 0 var(--v-sun-lip)}
html #onboarding.ob-vitrine .pw-o-t{grid-area:t;font:800 17px/1.1 var(--v-display);letter-spacing:-.01em}
html #onboarding.ob-vitrine .pw-o-p{grid-area:p;color:var(--v-ink-2);font:600 13.5px/1.1 var(--v-ui);text-align:right;white-space:nowrap}
html #onboarding.ob-vitrine .pw-o-p b{color:var(--v-ink);font:800 21px/1 var(--v-display);letter-spacing:-.02em}
html #onboarding.ob-vitrine .pw-o-s{grid-area:s;color:#0E7A47;font:700 13px/1.2 var(--v-ui)}
html #onboarding.ob-vitrine .pw-badge{position:absolute;top:-12px;right:14px;padding:4px 9px 3px;border:2px solid #fff;border-radius:9px;background:#C8306A;color:#fff;font:800 12.5px/1 var(--v-display);rotate:3deg;box-shadow:0 2px 0 var(--v-shadow-lip)}
html #onboarding.ob-vitrine .pw-preuve{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 0;color:rgba(255,255,255,.92);font:600 14px/1.3 var(--v-ui);text-align:center}
html #onboarding.ob-vitrine .pw-preuve-stk svg{display:block;width:24px;height:24px}
html #onboarding.ob-vitrine .ob-paywall .ob-compte-msg:empty{display:none}
html #onboarding.ob-vitrine .ob-paywall .ob-compte-msg{margin:10px 0 0;color:#fff;font:600 14px/1.35 var(--v-ui);text-align:center}
html #onboarding.ob-vitrine.ob-paywall-step #ob-foot-note .pw-sans{display:block;margin-bottom:2px;color:#fff;font-weight:700}
/* iPhone SE et petits écrans : tout tient sans faire défiler, les deux offres comprises */
@media (max-height:700px){html #onboarding.ob-vitrine .pw-chat{width:74px;top:-2px}html #onboarding.ob-vitrine .pw-hero{padding-right:70px}
  html #onboarding.ob-vitrine .pw-tag{margin-bottom:7px;font-size:12px;padding:5px 10px 4px}
  html #onboarding.ob-vitrine .ob-paywall .ob-title{font-size:25px!important}html #onboarding.ob-vitrine .pw-but{margin-top:6px;font-size:14px}
  html #onboarding.ob-vitrine .pw-plus{margin-top:10px;padding:9px 12px;gap:5px}html #onboarding.ob-vitrine .pw-plus li{font-size:13.5px;gap:8px}
  html #onboarding.ob-vitrine .pw-plus li::before{width:19px;height:19px;background-size:11px}
  html #onboarding.ob-vitrine .pw-offres{margin-top:14px;gap:10px}html #onboarding.ob-vitrine .pw-offre{padding:9px 14px}
  html #onboarding.ob-vitrine .pw-o-p b{font-size:19px}html #onboarding.ob-vitrine .pw-preuve{margin-top:10px;font-size:13px}
  html #onboarding.ob-vitrine.ob-paywall-step #ob-foot-note{font-size:11.5px;line-height:1.35}}
@keyframes pwTag{from{opacity:0;transform:scale(.5) rotate(-10deg)}}
@keyframes pwMonte{from{opacity:0;transform:translateY(12px)}}
@keyframes pwPasser{from{opacity:0;visibility:hidden}}
/* L'essai gratuit (10 novembre, 18 h 49) : une pastille menthe devant le prix par semaine, sans prendre de hauteur */
html #onboarding.ob-vitrine .pw-essai{display:inline-block;margin-right:7px;padding:3px 7px 2px;border-radius:7px;background:var(--v-mint);color:var(--v-ink);font:800 11px/1.1 var(--v-display);font-style:normal;letter-spacing:0;vertical-align:1px;white-space:nowrap}