@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(polices/Poppins-Bold.ttf) format("truetype")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(polices/Poppins-Medium.ttf) format("truetype")}
:root{--plum:#2E1238;--mag:#B0237E;--jaune:#FFC845;--rose:#F2B8D8}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0,#5A1A56 0,#2E1238 55%,#160910 100%) fixed;color:#fff;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.page{max-width:460px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.tete{display:flex;align-items:center;gap:12px}
.tete img{border-radius:50%;background:#fff}
.tete b{display:block;font-size:15px}
.tete span{display:block;font-size:12px;color:var(--rose);font-weight:500}
.cadre{position:relative;width:100%;aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#160910;box-shadow:0 24px 60px rgba(0,0,0,.45)}
video{width:100%;height:100%;object-fit:cover;display:block}
.son{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:9px 14px;background:rgba(22,9,16,.72);color:#fff;font:600 13px/1 Poppins,system-ui,sans-serif;cursor:pointer}
.son svg{width:20px;height:20px}
.son[aria-pressed="false"] .onde{display:none}.son[aria-pressed="true"] .barre{display:none}
.lecture{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:0;background:var(--jaune);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.lecture svg{width:40px;height:40px}
.fin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;background:rgba(46,18,56,.9);text-align:center;animation:apparait .45s ease-out}
.fin[hidden],.lecture[hidden],.son[hidden],.passer[hidden]{display:none}
.fin img{border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,200,69,.35)}
.qui{margin:0;font-size:24px;font-weight:700}.qui span{display:block;font-size:14px;font-weight:500;color:var(--rose)}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:330px;min-height:58px;padding:14px 20px;border-radius:999px;background:var(--jaune);color:var(--plum);font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 14px 30px rgba(0,0,0,.35);animation:pulse 1.8s ease-in-out .6s infinite}
.cta svg{width:24px;height:24px;flex:none}
.duo{display:flex;gap:10px;width:100%;max-width:330px}
.sec{flex:1;min-height:48px;display:grid;place-items:center;border-radius:999px;border:2px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;font-weight:700;font-size:15px}
.revoir{border:0;background:none;color:var(--rose);font:600 14px Poppins,system-ui,sans-serif;text-decoration:underline;cursor:pointer;padding:8px}
.passer{align-self:center;border:0;background:none;color:var(--rose);font:600 14px Poppins,system-ui,sans-serif;text-decoration:underline;cursor:pointer;padding:6px}
.note{margin:0;text-align:center;font-size:13px;line-height:1.5;color:#E9D6EF}
.note a{color:var(--jaune)}
a:focus-visible,button:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}
@keyframes apparait{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.cta,.fin{animation:none}}