/* Page d'accueil Yukiz.
   Règles (skill anti-vibecode) : une couleur de marque (le mauve Yukiz) en aplat, pas de dégradé
   sur les titres, pas de halo flou, un rayon et un espacement réguliers, des ombres seulement
   sur ce qui flotte, le produit montré en action plutôt que des cartes. */
body:has(#s-welcome.on) { background: #FBFAF7; }
.lp { --ink: #17122B; --muted: #5F5970; --line: #E7E2EF; --bg: #FBFAF7; --band: #F3EFFA; --soft: #F6F2FD;
  --brand: #6D3FE0; --brand-dark: #5A30C4; --brand2: #9B6BFF; --rose: #FF7EC8;
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --space: 104px; --w: 1160px;
  font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ink); background: var(--bg); overflow-x: clip; }
.lp h1, .lp h2, .lp h3 { margin: 0; font-family: Fredoka, sans-serif; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.lp b, .lp strong, .lp small, .lp em { font-family: inherit; }
.lp button { font-family: inherit; }
.lp img[data-i] { object-fit: contain; }
.lp .eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }

/* Barre du haut */
.lp-nav { max-width: var(--w); margin: 0 auto; display: flex; align-items: center; gap: 28px; padding: 18px 24px; }
.lp-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 28px Fredoka; }
.lp-brand .mascot.tiny { width: 46px; height: 46px; }
.lp-links { display: flex; gap: 26px; margin-left: auto; }
.lp-links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; transition: color .15s; }
.lp-links a:hover { color: var(--ink); }
.lp-cta { border: 0; cursor: pointer; padding: 11px 18px; border-radius: var(--r-s); color: #fff; font-weight: 700; font-size: 15px; background: var(--ink); transition: background .15s; }
.lp-cta:hover { background: var(--brand); }

/* Hero : titre à gauche, l'action à droite, le produit en dessous */
.lp-hero { max-width: var(--w); margin: 0 auto; padding: 64px 24px 0; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: end; }
.lp-hero h1 { margin-top: 14px; font-size: clamp(42px, 5.6vw, 72px); line-height: 1.02; font-weight: 700; }
.lp-hero h1 mark { color: inherit; background: linear-gradient(transparent 62%, #FFD84D 62%, #FFD84D 92%, transparent 92%); padding: 0 .04em; }
.lp-sub { margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted); font-weight: 500; }
.lp-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 26px; }
.lp .btn { min-height: 54px; padding: 0 22px; border-radius: var(--r-s); font: 700 16px 'Plus Jakarta Sans', sans-serif; box-shadow: none; gap: 10px; }
.lp .btn.yt { position: relative; overflow: hidden; isolation: isolate; background: var(--brand); color: #fff; transition: background .15s; }
.lp .btn.yt:hover { background: var(--brand-dark); }
.lp .btn.yt .yt-ico { background: #fff; } .lp .btn.yt .yt-ico::after { border-left-color: #FF0033; }
/* Reflet qui passe sur le bouton (demandé par Bilal) */
.lp .btn.yt::after { content: ''; position: absolute; z-index: 1; top: -20%; bottom: -20%; left: -40%; width: 30%; pointer-events: none; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0%, 60% { transform: skewX(-20deg) translateX(0); } 85%, 100% { transform: skewX(-20deg) translateX(560%); } }
.lp-link { padding: 0; border: 0; background: none; cursor: pointer; font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; text-decoration-thickness: 2px; transition: text-decoration-color .15s; }
.lp-link:hover { text-decoration-color: var(--brand); }
.lp-trust { margin: 18px 0 0; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.lp-trust a { color: inherit; }
/* La VSL, avec la mascotte posée dessus */
.vsl { position: relative; margin-top: 136px; }
.vsl-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-l); overflow: hidden; display: grid; place-items: center; background: #1B1530; border: 1px solid var(--line); }
.vsl-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vsl-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 18, 43, 0) 50%, rgba(23, 18, 43, .55)); }
.vsl-play { position: relative; width: 84px; height: 84px; border: 0; border-radius: 50%; background: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.vsl-play:hover { transform: scale(1.05); }
.vsl-play span { margin-left: 6px; border-left: 24px solid var(--brand); border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.vsl-label { position: absolute; bottom: 18px; left: 24px; margin: 0; color: #fff; font-weight: 700; font-size: 15px; }
.vsl-label small { font-weight: 500; opacity: .8; }
.vsl-buddy { position: absolute; z-index: 2; right: 5%; top: -112px; display: flex; align-items: flex-end; gap: 6px; }
.vsl-buddy .vsl-mascot { width: 124px; height: 124px; }
.vsl-buddy .vsl-mascot svg { animation: buddy 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes buddy { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2.5deg); } }
.vsl-say { margin-bottom: 70px; padding: 10px 14px; border-radius: var(--r-m) var(--r-m) 4px var(--r-m); background: #fff; color: var(--ink); font: 600 16px Fredoka, sans-serif; white-space: nowrap; border: 1px solid var(--line); }

/* Sections : un seul rythme vertical */
.lp-sec { max-width: var(--w); margin: 0 auto; padding: var(--space) 24px 0; }
.lp-head { max-width: 720px; margin: 0 0 40px; }
.lp-head h2 { margin-top: 12px; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; font-weight: 700; }
.lp-head p { margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: var(--muted); font-weight: 500; }
/* La démo sur une bande teintée, pleine largeur (rompt le blanc) */
.tb-sec { position: relative; padding-bottom: var(--space); margin-top: var(--space); padding-top: var(--space); }
.tb-sec::before { content: ''; position: absolute; z-index: -1; inset: 0 50%; margin: 0 -50vw; background: var(--band); }
.tb-sec { isolation: isolate; }
.tb-cap { max-width: 1060px; margin: 22px auto 0; display: flex; align-items: center; gap: 14px; min-height: 52px; }
.tb-cap p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--muted); font-weight: 500; }
.tb-cap b { color: var(--ink); font-weight: 700; }
.tb-dots { display: flex; gap: 6px; flex: none; }
.tb-dots i { width: 8px; height: 8px; border-radius: 50%; background: #D8CFEA; transition: background .2s, width .2s; }
.tb-dots i.on { width: 22px; border-radius: 4px; background: var(--brand); }

/* Pied de page */
.lp-foot { max-width: var(--w); margin: 0 auto; padding: var(--space) 24px 34px; }
.lp-foot-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 30px; border-radius: var(--r-m); background: var(--band); }
.lp-foot-cta b { font: 600 22px Fredoka, sans-serif; }
.lp-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 28px 0 0; font-size: 13px; color: var(--muted); font-weight: 500; }
.lp-legal a { color: var(--muted); }
.lp-legal a:hover { color: var(--ink); }
.lp .fine { text-align: center; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 860px) {
  .lp { --space: 72px; }
  .lp-links { display: none; }
  .lp-cta { margin-left: auto; }
  .lp-hero { padding-top: 32px; }
  .vsl { margin-top: 72px; }
  .vsl-buddy { right: 2%; top: -84px; }
  .vsl-buddy .vsl-mascot { width: 86px; height: 86px; }
  .vsl-say { margin-bottom: 46px; font-size: 13px; padding: 8px 11px; }
  .lp .btn { width: 100%; }
  .lp-foot-cta { flex-direction: column; text-align: center; }
  .tb { padding: 9px; border-radius: 26px; }
  .tb-screen { border-radius: 18px; }
}
.tb.narrow .tb-in { width: 680px; height: 600px; }
.tb.narrow .ytb-main { grid-template-columns: 1fr; }
.tb.narrow .ytb-side { display: none; }
.tb.narrow .ytb-player { width: 636px; height: 358px; }
.tb.narrow .ytb-search { width: 300px; }
@media (prefers-reduced-motion: reduce) { .lp .btn.yt::after, .vsl-buddy .vsl-mascot svg { animation: none; } }

/* ===== v22 : la grande tablette (page YouTube + barre Yukiz), qui se joue toute seule ===== */
.tb-sec .lp-head { margin-bottom: 40px; }
.tb { position: relative; max-width: 1060px; margin: 0 auto; padding: 18px; border-radius: 42px; background: #1B1530; box-shadow: 0 50px 100px -40px rgba(52, 26, 128, .55), inset 0 0 0 2px #2E2647; isolation: isolate; }
.tb::after { content: ''; position: absolute; left: 50%; top: 50%; right: 7px; width: 6px; height: 6px; margin-top: -3px; left: auto; border-radius: 50%; background: #3A3157; }
.tb-screen { position: relative; height: var(--h, 560px); border-radius: 24px; overflow: hidden; background: #fff; }
.tb-in { position: absolute; left: 0; top: 0; width: 1000px; height: 625px; transform: scale(var(--k, 1)); transform-origin: 0 0; font-family: Roboto, 'Plus Jakarta Sans', Arial, sans-serif; color: #0F0F0F; }
/* En-tête YouTube */
.ytb { display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 20px; }
.ytb-burger { display: grid; gap: 4px; } .ytb-burger i { width: 18px; height: 2px; background: #0F0F0F; border-radius: 2px; }
.ytb-logo { display: flex; align-items: center; gap: 4px; font: 700 19px/1 Arial, sans-serif; letter-spacing: -.04em; }
.ytb-logo i { position: relative; width: 28px; height: 20px; border-radius: 6px; background: #FF0033; }
.ytb-logo i::after { content: ''; position: absolute; left: 11px; top: 5px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ytb-search { position: relative; margin: 0 auto; width: 440px; height: 36px; padding: 0 16px; border-radius: 99px; border: 1px solid #D3D3D3; display: flex; align-items: center; font-size: 14px; color: #0F0F0F; }
.ytb-search b { position: absolute; right: -1px; top: -1px; bottom: -1px; width: 58px; border-radius: 0 99px 99px 0; border: 1px solid #D3D3D3; background: #F8F8F8; }
.ytb-av { width: 30px; height: 30px; border-radius: 50%; background: #7C5CFF; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.ytb-main { display: grid; grid-template-columns: 640px 1fr; gap: 22px; padding: 4px 22px 0; }
.ytb-player { position: relative; width: 640px; height: 360px; border-radius: 12px; overflow: hidden; background: #000; }
.ytb-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 7s linear, filter .4s; }
.tb.play .ytb-img { transform: scale(1.12); }
.tb[data-s="1"] .ytb-img, .tb[data-s="2"] .ytb-img { filter: brightness(.5); }
.ytb-prog { position: absolute; left: 12px; right: 12px; bottom: 40px; height: 4px; background: rgba(255, 255, 255, .35); }
.ytb-prog i { display: block; height: 100%; width: 32%; background: #FF0033; transition: width 4s linear; }
.ytb-ctrl { position: absolute; left: 14px; bottom: 12px; display: flex; gap: 10px; color: #fff; font-size: 13px; font-weight: 600; }
.ytb-ctrl .dim { opacity: .75; margin-left: -6px; }
.yk-pz { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--brand); display: grid; place-items: center; font-size: 22px; font-weight: 800; opacity: 0; transform: scale(.7); transition: .3s; }
.tb[data-s="1"] .yk-pz.on { opacity: 1; transform: none; }
.yk-q { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%) translateX(60px); opacity: 0; width: 400px; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .97); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); text-align: center; transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .3, 1); font-family: 'Plus Jakarta Sans', sans-serif; }
.tb[data-s="1"] .yk-q.on, .tb[data-s="2"] .yk-q { opacity: 1; transform: translate(-50%, -50%); }
.yk-q p { margin: 0 0 14px; font: 600 21px Fredoka, sans-serif; color: var(--ink); }
.yk-opts { display: flex; gap: 12px; justify-content: center; }
.yk-o { width: 100px; padding: 12px 6px 8px; border-radius: 16px; background: #F7F4FE; display: grid; justify-items: center; gap: 4px; transition: box-shadow .25s, transform .25s, opacity .25s; }
.yk-o img { width: 54px; height: 54px; }
.yk-o small { font-weight: 700; font-size: 13px; color: var(--ink); }
.yk-o.lit { box-shadow: 0 0 0 3px #FACC15; }
.yk-o.ok { box-shadow: 0 0 0 4px #22C55E; background: #fff; transform: scale(1.06); }
.tb[data-s="2"] .yk-o:not(.ok).fade { opacity: .45; }
.yk-bravo { position: absolute; left: 50%; top: 18px; transform: translateX(-50%) translateY(-10px); display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; transition: .35s; font-family: 'Plus Jakarta Sans', sans-serif; }
.yk-bravo img { width: 26px; height: 26px; } .yk-bravo b { color: var(--brand); font-size: 16px; }
.yk-bravo.on { opacity: 1; transform: translateX(-50%); }
/* Barre Yukiz sous la vidéo */
.yk-bar { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: #F7F4FE; border: 1px solid #ECE4FF; font-family: 'Plus Jakarta Sans', sans-serif; }
.yk-pill { display: flex; align-items: center; gap: 6px; flex: none; font-size: 13px; font-weight: 700; color: var(--brand); }
.yk-pill .mascot { width: 22px; height: 22px; }
.yk-pill b { display: inline-block; min-width: 9px; }
.yk-tl { position: relative; flex: 1; height: 6px; border-radius: 6px; background: #E6DDFF; }
.yk-tl > i { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: 6px; background: linear-gradient(90deg, var(--brand2), var(--rose)); transition: width 4s linear; }
.yk-tl b { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--brand2); display: grid; place-items: center; font-size: 9px; color: #fff; transition: .3s; }
.yk-tl b.done { background: #22C55E; border-color: #22C55E; }
.ytb-title { margin: 12px 0 0; font: 700 19px/1.3 Roboto, Arial, sans-serif; letter-spacing: 0; }
.ytb-ch { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ytb-chav { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #FFC93C, #FF7A3C); }
.ytb-ch b { display: block; font-size: 14px; font-family: Roboto, Arial, sans-serif; } .ytb-ch small { font-size: 12px; color: #606060; }
.ytb-sub { margin-left: 14px; padding: 8px 14px; border-radius: 99px; background: #0F0F0F; color: #fff; font-size: 13px; font-weight: 600; }
.ytb-side { display: grid; gap: 10px; align-content: start; }
.ytb-side div { display: grid; grid-template-columns: 150px 1fr; gap: 8px; }
.ytb-side .th { height: 84px; border-radius: 8px; display: grid; place-items: center; }
.ytb-side .th img { width: 46px; height: 46px; }
.ytb-side p { margin: 2px 0 0; display: grid; gap: 7px; align-content: start; }
.ytb-side p b { height: 9px; border-radius: 5px; background: #E5E5E5; } .ytb-side p b.s { width: 60%; background: #EFEFEF; }
/* La mascotte, élément vivant de la page */
.yk-m { position: absolute; left: 0; top: 0; z-index: 5; width: 64px; height: 64px; transform: translate(var(--x, 300px), var(--y, 420px)) scale(var(--sc, 1)); transition: transform .9s cubic-bezier(.45, .05, .25, 1); pointer-events: none; }
.yk-m .mascot { width: 100%; height: 100%; display: block; }
.yk-m.fast { transition-duration: .55s; }
.yk-m.walk .mascot svg { animation: ykwalk .5s ease-in-out infinite alternate; }
@keyframes ykwalk { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-5px) rotate(4deg); } }
.yk-m.press .mascot svg { transform: scale(.82) rotate(-8deg); transition: transform .15s; }
.yk-m::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 36px; height: 8px; margin-left: -18px; border-radius: 50%; background: rgba(23, 18, 43, .18); filter: blur(2px); }
.ytb-side div { grid-template-columns: 150px 1fr; align-items: start; }
.ytb-side img.th { width: 150px; height: 84px; object-fit: cover; border-radius: 8px; display: block; }
.ytb-side p { gap: 4px; }
.ytb-side p b { height: auto; background: none; font: 600 12.5px/1.3 Roboto, Arial, sans-serif; color: #0F0F0F; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ytb-side p small { font: 400 11.5px Roboto, Arial, sans-serif; color: #606060; }
.yk-m { width: 88px; height: 88px; }
.yk-m::after { width: 46px; margin-left: -23px; }
.yk-say { position: absolute; left: 92%; bottom: 72%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #fff; color: var(--ink); font: 600 15px Fredoka, sans-serif; white-space: nowrap; box-shadow: 0 10px 26px -8px rgba(23, 18, 43, .35), 0 0 0 1px #ECE4FF; opacity: 0; transform: translateY(6px) scale(.9); transform-origin: bottom left; transition: opacity .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.yk-say.on { opacity: 1; transform: none; }


/* ===== v24 : bloc parents, téléphone réaliste + deux étiquettes (esprit youkids.io) ===== */
.pv-sec { padding-bottom: 0; }
.pv-sec .lp-head { margin-bottom: 30px; }
.pv { position: relative; height: 820px; display: flex; justify-content: center; }
/* Bande de couleur sous le téléphone (pleine largeur) */
.pv-band { position: absolute; left: 50%; bottom: 0; width: 100vw; height: 250px; transform: translateX(-50%); background: linear-gradient(120deg, #2A1466, #4B23B8 45%, #7B3FE0 75%, #B44BD8); }
.pv-band::after { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 160px at 70% 0%, rgba(255, 126, 200, .35), transparent 70%); }
/* Le téléphone */
.iph { position: relative; z-index: 1; margin-top: 10px; width: 340px; height: 700px; border-radius: 58px; padding: 11px;
  background: linear-gradient(145deg, #3B3B44, #121218 40%, #2A2A31 75%, #0B0B10);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), inset 0 0 0 5px #0A0A0E, 0 60px 80px -30px rgba(23, 18, 43, .55), 0 30px 40px -24px rgba(23, 18, 43, .4);
  transform: rotate(-7deg); }
.iph::before, .iph::after { content: ''; position: absolute; width: 4px; border-radius: 3px; background: linear-gradient(90deg, #2B2B33, #4A4A55); }
.iph::before { left: -4px; top: 150px; height: 60px; box-shadow: 0 80px 0 #3A3A44; }
.iph::after { right: -4px; top: 190px; height: 92px; }
.iph-screen { position: relative; height: 100%; border-radius: 47px; overflow: hidden; background: #fff; padding: 0 20px; font-family: 'Plus Jakarta Sans', sans-serif; }
.iph-status { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 10px 0 14px; }
.iph-status b { font: 600 15px -apple-system, 'Plus Jakarta Sans', sans-serif; }
.iph-island { position: absolute; left: 50%; top: 11px; width: 116px; height: 34px; margin-left: -58px; border-radius: 99px; background: #000; }
.iph-icons { display: flex; align-items: center; gap: 6px; }
.iph-icons .sig { display: flex; align-items: flex-end; gap: 2px; height: 11px; } .iph-icons .sig em { width: 3px; background: #111; border-radius: 1px; }
.iph-icons .sig em:nth-child(1) { height: 4px; } .iph-icons .sig em:nth-child(2) { height: 6px; } .iph-icons .sig em:nth-child(3) { height: 8.5px; } .iph-icons .sig em:nth-child(4) { height: 11px; }
.iph-icons .wifi { width: 15px; height: 11px; background: #111; clip-path: path('M7.5 11 L0 3.2 A11 11 0 0 1 15 3.2 Z'); }
.iph-icons .bat { position: relative; width: 24px; height: 11px; border-radius: 3.5px; border: 1.5px solid #9A9A9A; }
.iph-icons .bat::before { content: ''; position: absolute; inset: 1.5px; width: 15px; border-radius: 1.5px; background: #111; }
.iph-icons .bat::after { content: ''; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: #9A9A9A; }
.pa-head { display: flex; align-items: center; gap: 8px; padding: 10px 0 12px; border-bottom: 1px solid #F0EDF6; }
.pa-head .mascot { width: 28px; height: 28px; }
.pa-head b { font: 700 18px Fredoka, sans-serif; }
.pa-av { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand2), var(--rose)); color: #fff; font-weight: 700; font-size: 13px; }
.pa-over { margin: 16px 0 0; font-size: 12px; font-weight: 600; color: #8A849B; }
.pa-title { margin: 2px 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.pa-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pa-kpis div { padding: 10px; border-radius: 14px; background: #F7F6FA; }
.pa-kpis small { display: block; font-size: 10.5px; font-weight: 600; color: #8A849B; }
.pa-kpis b { display: block; margin-top: 4px; font-size: 19px; font-weight: 800; }
.pa-kpis em { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; font-weight: 700; color: #16A34A; }
.pa-chart { display: block; width: 100%; height: 70px; margin-top: 14px; }
.pa-sub { margin: 14px 0 8px; font-size: 15px; font-weight: 800; }
.pa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pa-list li { display: flex; gap: 10px; align-items: center; }
.pa-list img { width: 82px; height: 46px; border-radius: 9px; object-fit: cover; flex: none; }
.pa-list b { display: block; font-size: 12.5px; line-height: 1.3; }
.pa-list small { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; color: #16A34A; }
.pa-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; padding: 12px 34px 0; display: flex; justify-content: space-between; border-top: 1px solid #F0EDF6; background: #fff; }
.pa-tabs i { width: 22px; height: 22px; border-radius: 7px; background: #E4E1EC; }
.pa-tabs i.on { background: var(--ink); }
.iph-home { position: absolute; left: 50%; bottom: 8px; width: 130px; height: 5px; margin-left: -65px; border-radius: 9px; background: #111; }
/* Les deux étiquettes, posées sur le téléphone ; le halo est derrière elles */
.pv-card { position: absolute; z-index: 2; top: 290px; width: 470px; padding: 34px 36px; border-radius: var(--r-l); background: #fff; text-align: center; box-shadow: 0 30px 60px -30px rgba(52, 26, 128, .45), 0 0 0 1px rgba(236, 232, 245, .9); }
.pv-card.l { right: calc(50% + 70px); }
.pv-card.r { left: calc(50% + 70px); }
.pv-card h3 { font: 700 34px/1.08 Fredoka, sans-serif; letter-spacing: -.01em; margin: 0; }
.pv-card h3 span { color: var(--brand); }
.pv-card p { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted); font-weight: 500; }
@media (max-width: 1180px) { .pv-card { width: 400px; padding: 28px; } .pv-card h3 { font-size: 29px; } }
@media (max-width: 960px) {
  .pv { height: auto; flex-direction: column; align-items: center; padding-bottom: 40px; }
  .pv-band { height: 55%; }
  .iph { width: min(340px, 86vw); height: auto; aspect-ratio: 340 / 700; transform: rotate(-5deg); }
  .pv-card { position: relative; top: auto; left: auto !important; right: auto !important; width: 100%; max-width: 520px; padding: 30px 24px; }
  .pv-card.l { margin-top: -150px; }
  .pv-card.r { margin-top: 16px; }
  .pv-card h3 { font-size: 30px; }
}
@media (min-width: 961px) {
  .pv { height: 920px; }
  .iph { width: 384px; height: 790px; border-radius: 64px; }
  .iph-screen { border-radius: 52px; padding: 0 24px; }
  .pv-card { top: 340px; }
  .pv-band { height: 290px; }
}
/* v25 : bande plus fine (ordinateur seulement), encart « il a appris » dans le téléphone */
@media (min-width: 961px) { .pv-band { height: 200px; } }
@media (max-width: 960px) { .pv-band { display: none; } }
.pa-learn { margin-top: 12px; padding: 14px 14px 12px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #6D3FE0, #A24BF0 55%, #F06BBE); box-shadow: 0 12px 24px -12px rgba(109, 63, 224, .6); }
.pa-learn small { display: block; font-size: 11.5px; font-weight: 600; opacity: .9; }
.pa-learn > b { display: block; margin-top: 2px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.pa-learn ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.pa-learn li { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 10px; background: rgba(255, 255, 255, .16); font-size: 12px; font-weight: 600; }
.pa-learn li::before { content: '✓'; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #6D3FE0; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.pa-learn p { margin: 9px 0 0; font-size: 11.5px; font-weight: 700; opacity: .95; }
.pa-learn { margin: 0 0 12px; }
@media (min-width: 961px) { .pv-card { top: 450px; } }

/* v26 : encart « appris » plus sobre, halo léger au-dessus du titre, reflet sur les boutons */
.pa-learn { position: relative; overflow: hidden; margin: 2px 0 12px; padding: 11px 12px 10px 15px; border-radius: 14px; color: var(--ink); background: #FBF9FF; border: 1px solid #ECE4FF; box-shadow: none; }
.pa-learn::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #9B6BFF, #FF7EC8); }
.pl-top { display: flex; align-items: center; justify-content: space-between; }
.pl-top small { font-size: 11px; font-weight: 700; color: var(--brand); opacity: 1; text-transform: uppercase; letter-spacing: .04em; }
.pl-top b { font-size: 12px; font-weight: 800; color: var(--brand); padding: 2px 8px; border-radius: 99px; background: #EFE7FF; }
.pa-learn ul { margin-top: 7px; gap: 4px; }
.pa-learn li { padding: 0; background: none; font-size: 12px; font-weight: 600; color: var(--ink); }
.pa-learn li::before { width: 14px; height: 14px; font-size: 8.5px; background: #EFE7FF; color: var(--brand); }
.pa-learn p { margin-top: 8px; padding-top: 7px; border-top: 1px solid #EFEAF8; font-size: 11px; font-weight: 600; color: #8A849B; opacity: 1; }

.lp-hero { position: relative; isolation: isolate; }
/* Bouton lecture au milieu de l'image : on voit tout de suite que c'est une vidéo */
.vsl-shade { background: none; } /* l'étiquette a son propre fond : plus besoin de voile sombre */
.vsl-play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; box-shadow: 0 0 0 10px rgba(255, 255, 255, .28), 0 18px 40px rgba(23, 18, 43, .35); }
.vsl-play span { margin-left: 7px; border-left-width: 26px; border-top-width: 16px; border-bottom-width: 16px; }
.vsl-play:hover { transform: scale(1.06); }
.vsl-label { left: 24px; bottom: 20px; padding: 8px 12px; border-radius: var(--r-s); background: rgba(23, 18, 43, .88); }
@media (max-width: 860px) {
  .vsl-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .3), 0 10px 24px rgba(23, 18, 43, .3); }
  .vsl-play span { margin-left: 4px; border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
  .vsl-label { display: none; } /* trop petit : l'étiquette cacherait la phrase */
}
@media (max-width: 860px) { .vsl { margin-top: 118px; } .lp .btn { font-size: 15px; padding: 0 14px; } .lp-cta { padding: 9px 14px; font-size: 14px; } }

/* v30 : hero recentré ; troisième couleur (accent) pour le second bouton et les respirations */
.lp { --accent: #FFC93C; --accent-ink: #3A2A00; --accent-soft: #FFF7DD; }
.lp-hero { text-align: center; }
.lp-hero h1 { margin: 14px auto 0; max-width: 900px; }
.lp-sub { max-width: 640px; margin: 22px auto 0; }
.lp-start { justify-content: center; }
.lp-trust { text-align: center; }
.lp .btn.alt { background: var(--accent); color: var(--accent-ink); border: 0; transition: filter .15s; }
.lp .btn.alt:hover { filter: brightness(.96); }
.lp-hero h1 mark { background: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 92%, transparent 92%); }
.tb-sec::before { background: var(--accent-soft); }
.lp-foot-cta { background: var(--accent-soft); }
/* La vraie VSL dans le cadre */
.vsl-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.vsl-frame.playing .vsl-shade, .vsl-frame.playing .vsl-play, .vsl-frame.playing .vsl-label { display: none; }

/* v31 : halo léger derrière le grand titre (demande de Bilal) */
.lp-hero { position: relative; isolation: isolate; }
/* Halo surtout au-dessus du titre, qui ne déborde que sur son haut */
.lp-nav { position: relative; z-index: 1; }
.lp-hero::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -96px; width: min(860px, 94vw); height: 250px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 42% 50%, rgba(155, 107, 255, .22), transparent 68%), radial-gradient(ellipse at 62% 55%, rgba(255, 126, 200, .13), transparent 68%); filter: blur(30px); }

/* Sur téléphone : halo léger derrière les deux étiquettes du bloc parents */
@media (max-width: 960px) {
  .pv { isolation: isolate; }
  .pv::after { content: ''; position: absolute; z-index: -1; left: -8%; right: -8%; bottom: 10px; height: 560px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse at 45% 45%, rgba(155, 107, 255, .26), transparent 66%), radial-gradient(ellipse at 60% 70%, rgba(255, 126, 200, .16), transparent 66%); filter: blur(30px); }
  .pv-card { z-index: 2; }
}

/* La légende sous la tablette, bien mise en avant : une carte reliée à la tablette */
.tb-cap { position: relative; max-width: 860px; margin: 30px auto 0; padding: 18px 22px; gap: 18px; border-radius: var(--r-m); background: #fff; border: 1.5px solid #E2D9F7; box-shadow: 0 16px 34px -20px rgba(52, 26, 128, .45); transition: opacity .16s; }
.tb-cap::before { content: ''; position: absolute; left: 50%; top: -9px; width: 16px; height: 16px; margin-left: -8px; background: #fff; border-left: 1.5px solid #E2D9F7; border-top: 1.5px solid #E2D9F7; transform: rotate(45deg); }
.tb-cap.swap { opacity: .25; }
.tb-num { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font: 700 22px Fredoka, sans-serif; }
.tb-cap p { flex: 1; margin: 0; }
.tb-cap b { display: block; font: 600 22px/1.25 Fredoka, sans-serif; color: var(--ink); }
.tb-cap p span { display: block; margin-top: 3px; font-size: 16.5px; line-height: 1.5; color: var(--muted); font-weight: 500; }
.tb-dots { margin-left: auto; }
@media (max-width: 860px) {
  .tb-cap { padding: 14px 16px; gap: 12px; align-items: flex-start; }
  .tb-num { width: 38px; height: 38px; font-size: 18px; }
  .tb-cap b { font-size: 19px; }
  .tb-cap p span { font-size: 15px; }
  .tb-dots { display: none; }
}

/* Essais de bande sous le téléphone (ordinateur) */
.pv-band-info { display: none; }
@media (min-width: 961px) {
  .lp.bande-1 .pv-band { background: #F1EBFC; } .lp.bande-1 .pv-band::after { display: none; }
  .lp.bande-2 .pv-band { height: 340px; background: linear-gradient(180deg, rgba(241, 235, 252, 0), #EEE6FC 65%, #EFE7FC); } .lp.bande-2 .pv-band::after { display: none; }
  .lp.bande-3 .pv-band { display: none; }
  .lp.bande-3 .pv { isolation: isolate; }
  .lp.bande-3 .pv::after { content: ''; position: absolute; z-index: -1; left: 4%; right: 4%; top: 360px; height: 420px; border-radius: 50%; background: radial-gradient(ellipse at 30% 50%, rgba(155, 107, 255, .24), transparent 60%), radial-gradient(ellipse at 72% 50%, rgba(255, 126, 200, .18), transparent 60%); filter: blur(34px); }
  .lp.bande-3 .iph { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), inset 0 0 0 5px #0A0A0E, 0 70px 90px -40px rgba(23, 18, 43, .5); }
  .lp.bande-4 .pv-band { background: #17122B; height: 210px; } .lp.bande-4 .pv-band::after { display: none; }
  .lp.bande-4 .pv-band-info { position: absolute; inset: 0; max-width: 1160px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; }
  .lp.bande-4 .pv-band-info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: #fff; font: 600 18px 'Plus Jakarta Sans', sans-serif; }
  .lp.bande-4 .pv-band-info li::before { content: '✓'; color: #FFC93C; font-weight: 800; margin-right: 10px; }
  .lp.bande-4 .alt-cta { background: #FFC93C; color: #17122B; font-size: 17px; padding: 14px 26px; }
}

/* Sous-titre du hero sur téléphone : 2 lignes au plus (demande de Bilal, 27/10). */
@media (max-width: 560px) { .lp-hero .lp-sub { font-size: clamp(13px, 3.55vw, 15px); line-height: 1.5; max-width: none; } }