/* Papouth Game Launcher - site vitrine. Style plat : bordures 2.5px, ombres dures, aucun dégradé. */
:root[data-theme="day"]{color-scheme:light;--bg:#FFF8EC;--surface:#fff;--surface-2:#fff;--text:#151515;--text-muted:#5a5448;--border:#151515;--border-strong:#151515;--shadow:#151515;--inv-bg:#151515;--inv-fg:#fff;--pink:#FF3D7F;--yellow:#FFC400;--blue:#2E6BFF;--violet:#7A3CFF;--lime:#B8F135;--on-dark:#fff;--on-bright:#151515;--scrim:rgba(21,21,21,.75)}
:root[data-theme="night"]{color-scheme:dark;--bg:#15151B;--surface:#1F1F28;--surface-2:#2A2A36;--text:#F2EFE8;--text-muted:#A9A6B5;--border:#3A3A4A;--border-strong:#F2EFE8;--shadow:#000;--inv-bg:#F2EFE8;--inv-fg:#15151B;--pink:#E0457C;--yellow:#E5B21F;--blue:#3A6FE8;--violet:#5B34C9;--lime:#9CCB3A;--on-dark:#fff;--on-bright:#151515;--scrim:rgba(0,0,0,.85)}
:root{--brand:var(--violet);--r:12px;--bd:2.5px solid var(--border);--sh:4px 4px 0 var(--shadow);--gut:16px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:#15151B;background:var(--bg);color:var(--text);font:16px/1.55 "Segoe UI","Leelawadee UI",Tahoma,system-ui,-apple-system,Arial,sans-serif}
img,video{max-width:100%;height:auto;display:block}
button,select{font:inherit;color:inherit}
a{color:var(--text)}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:var(--on-bright);padding:8px 14px;border:var(--bd);border-radius:10px;font-weight:800;z-index:200}
.skip:focus{left:8px}
:focus-visible{outline:2.5px solid var(--border-strong);outline-offset:3px}

/* En-tete */
.hdr{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:var(--bd)}
.hdr .wrap{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:17px;letter-spacing:-.4px;text-decoration:none}
.logo img{width:34px;height:34px;border-radius:9px;border:var(--bd);background:var(--lime)}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav a{padding:6px 10px;border-radius:99px;border:var(--bd);border-color:transparent;font-weight:700;text-decoration:none}
.nav a:hover{border-color:var(--border-strong)}
.tools{display:flex;gap:8px;align-items:center}
select.lang{border:var(--bd);border-radius:10px;background:var(--surface-2);padding:6px 10px;font-weight:700;box-shadow:3px 3px 0 var(--shadow);cursor:pointer}
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:var(--bd);border-radius:10px;background:var(--surface-2);cursor:pointer;box-shadow:3px 3px 0 var(--shadow)}
.themebtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="night"] .i-sun,:root[data-theme="day"] .i-moon{display:none}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:var(--bd);border-radius:10px;padding:10px 18px;font-weight:800;cursor:pointer;background:var(--surface-2);color:var(--text);box-shadow:3px 3px 0 var(--shadow);text-decoration:none;transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--shadow)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--shadow)}
.btn.big{padding:16px 30px;font-size:19px;border-radius:12px;box-shadow:5px 5px 0 var(--shadow)}
.btn.dl{background:var(--lime);color:var(--on-bright)}
.btn.inv{background:var(--inv-bg);color:var(--inv-fg)}
.btn.ac{background:var(--ac,var(--lime));color:var(--on-bright)}
.btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Hero */
h1,h2,h3{letter-spacing:-.6px;line-height:1.15}
h1{font-size:clamp(30px,6vw,52px);font-weight:900;margin:0 0 14px}
h2{font-size:clamp(24px,4vw,32px);font-weight:900;margin:0 0 8px}
.sec{padding:52px 0 8px}
.sec>.wrap>.lead{color:var(--text-muted);margin:0 0 24px;max-width:70ch}
.hero{margin-top:28px;border:var(--bd);border-radius:var(--r);padding:clamp(22px,5vw,52px);background:var(--brand);color:var(--on-dark);box-shadow:6px 6px 0 var(--shadow)}
.hero p{max-width:60ch;font-size:clamp(16px,2.4vw,19px);margin:0 0 24px}
.hero .meta{margin:14px 0 0;font-size:14px;font-weight:700}
.hero .note{margin:6px 0 0;font-size:14px;opacity:.95}

/* Pass */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;max-width:760px}
.plan{position:relative;background:var(--surface);border:var(--bd);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
.plan.best{background:var(--lime);color:var(--on-bright)}
.plan .name{font-weight:800}
.plan .price{font-size:38px;font-weight:900;letter-spacing:-1px;margin:4px 0}
.plan .price small{font-size:15px;font-weight:600;letter-spacing:0}
.plan .sub{margin:0;font-size:14px}
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:8px;font-size:13px;font-weight:800;border:var(--bd);background:var(--yellow);color:var(--on-bright)}
.plan .badge{position:absolute;top:-15px;right:14px;transform:rotate(4deg)}
.inside{margin-top:20px;display:inline-block;background:var(--surface);border:var(--bd);border-radius:10px;padding:8px 14px;font-weight:700}

/* Jeux */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px}
.game{background:var(--surface);border:var(--bd);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh);transition:transform .1s,box-shadow .1s}
.game:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow)}
.game img{width:100%;aspect-ratio:63/50;object-fit:cover;border-bottom:var(--bd);background:var(--surface-2)}
.game .body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.game .nm{font-weight:900;font-size:20px;letter-spacing:-.5px;margin:0}
.game .tg{margin:0;font-size:14.5px;flex:1}
.game .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.game,.sale{--ac:var(--ac-raw,var(--violet))}
:root[data-theme="night"] .game,:root[data-theme="night"] .sale{--ac:color-mix(in srgb,var(--ac-raw,#5B34C9) 82%,#15151B)}
:root[data-theme="night"] .sale[data-blue] .btn.ac{color:var(--on-dark)}
.chip{padding:3px 12px;border-radius:8px;border:var(--bd);background:var(--lime);color:var(--on-bright);font-size:13px;font-weight:800}

/* Etapes */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;counter-reset:s}
.steps li{padding:18px;background:var(--surface);border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:99px;border:var(--bd);background:var(--yellow);color:var(--on-bright);font-weight:900;margin-bottom:10px}
.steps h3{margin:0 0 4px;font-size:19px}.steps p{margin:0;color:var(--text-muted)}

/* FAQ */
.faq details{background:var(--surface);border:var(--bd);border-radius:10px;margin-bottom:12px;box-shadow:3px 3px 0 var(--shadow)}
.faq summary{cursor:pointer;font-weight:800;padding:14px 18px;list-style-position:inside}
.faq details[open] summary{border-bottom:var(--bd)}
.faq details p{margin:0;padding:14px 18px;color:var(--text-muted)}

/* Pied */
.ftr{margin-top:64px;border-top:var(--bd);padding:26px 0 40px;background:var(--surface)}
.ftr .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.ftr a{font-weight:700}
.ftr .copy{margin-left:auto;color:var(--text-muted);font-size:14px}

/* Page jeu */
.crumb{margin:22px 0 14px}
.sale-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.viewer{position:relative;aspect-ratio:16/9;background:#000;border:var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.viewer video,.viewer>img{width:100%;height:100%;object-fit:contain}
.viewer.cover-only>img{object-fit:cover}
.strip{display:flex;gap:10px;margin-top:14px;overflow-x:auto;padding:4px 4px 10px}
.thumb{flex:0 0 132px;aspect-ratio:16/9;padding:0;border:var(--bd);border-radius:8px;overflow:hidden;background:var(--surface-2);cursor:pointer}
.thumb:hover{box-shadow:3px 3px 0 var(--ac)}
.thumb img{width:100%;height:100%;object-fit:cover}
.panel{background:var(--surface);border:var(--bd);border-radius:var(--r);padding:20px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:8px}
.panel.buy{position:sticky;top:84px}
.panel h1{font-size:30px;margin:0}
.price-big{font-size:34px;font-weight:900;letter-spacing:-1px;margin:6px 0 0}
.price-big small{font-size:14px;font-weight:600;color:var(--text-muted);letter-spacing:0}
.panel .or{margin:0;color:var(--text-muted);font-size:14px}
.kv{display:grid;grid-template-columns:100px 1fr;gap:8px 12px;margin:10px 0 0;padding-top:14px;border-top:var(--bd);border-color:var(--border);font-size:14px}
.kv dt{color:var(--text-muted);font-weight:700}.kv dd{margin:0}
.desc{max-width:75ch;font-size:17px;line-height:1.65;margin:0}
.feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.feat li{padding:11px 14px;background:var(--surface);border:var(--bd);border-radius:10px;border-left:7px solid var(--ac)}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.shot{padding:0;border:var(--bd);border-radius:10px;overflow:hidden;background:var(--surface-2);cursor:zoom-in;box-shadow:3px 3px 0 var(--shadow)}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover}
.shot:hover{box-shadow:5px 5px 0 var(--ac)}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:100;background:var(--scrim);display:none;align-items:center;justify-content:center;padding:16px}
.lb.open{display:flex}
.lb figure{margin:0;max-width:min(1100px,100%);position:relative}
.lb img{max-height:80vh;width:auto;margin:0 auto;border:var(--bd);border-color:var(--border-strong);border-radius:var(--r);box-shadow:8px 8px 0 var(--shadow);background:#000}
.lb figcaption{text-align:center;color:#fff;margin-top:12px;font-weight:700}
.lb .x,.lb .pv,.lb .nx{position:absolute;padding:6px 14px;font-size:22px;line-height:1.2}
.lb .x{top:12px;right:12px}.lb .pv{left:12px;top:50%}.lb .nx{right:12px;top:50%}

/* Legal */
.legal{max-width:78ch;padding-top:28px}
.legal h2{margin-top:30px;font-size:22px}
.legal .todo{background:var(--yellow);color:var(--on-bright);padding:1px 6px;border-radius:5px;font-weight:700}
.legal table{border-collapse:collapse;width:100%;margin:10px 0}
.legal td,.legal th{border:var(--bd);border-color:var(--border);padding:8px 10px;text-align:left;vertical-align:top}
.center{text-align:center;padding:90px 0}

@media (max-width:860px){.sale-grid{grid-template-columns:1fr}.panel.buy{position:static;order:-1}.nav{margin-left:0;order:3;width:100%}.tools{margin-left:auto}.ftr .copy{margin-left:0;width:100%}}
@media (max-width:480px){.btn.big{width:100%;font-size:17px;padding:15px 16px}.kv{grid-template-columns:90px 1fr}}

/* Boutique : compte, modales, formulaires, merci */
[hidden]{display:none!important}
body.modal-open{overflow:hidden}
.acct{position:relative}
.acct-btn{padding:6px 12px;font-size:15px}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--surface);border:var(--bd);border-radius:10px;box-shadow:var(--sh);padding:6px;display:flex;flex-direction:column;z-index:60}
.acct-menu a,.acct-menu button{display:block;text-align:left;padding:8px 12px;border:0;border-radius:8px;background:none;font-weight:700;text-decoration:none;cursor:pointer;color:var(--text)}
.acct-menu a:hover,.acct-menu button:hover{background:var(--surface-2)}
.tools .acct>.btn{box-shadow:3px 3px 0 var(--shadow);padding:6px 14px}
.plan .btn{margin-top:16px;width:100%}
.panel .btn.wide,.btn.wide{width:100%}
.panel .alt{align-self:flex-start;font-weight:700}
.btn.owned{background:var(--surface-2);color:var(--text);box-shadow:none;cursor:default;font-size:14px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:3px 3px 0 var(--shadow)}
.btn.pp{background:var(--yellow);color:var(--on-bright)}
.modal-bg{position:fixed;inset:0;z-index:120;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.modal{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--surface);border:var(--bd);border-radius:var(--r);box-shadow:8px 8px 0 var(--shadow);padding:22px 20px}
.modal-t{font-size:22px;margin:0 36px 12px 0}
.modal-x{position:absolute;top:12px;right:12px;padding:2px 10px;font-size:16px}
.modal-body{display:flex;flex-direction:column;gap:12px}
.muted{color:var(--text-muted);margin:0}
.small{font-size:13.5px}
.sum{margin:0;padding:10px 14px;background:var(--surface-2);border:var(--bd);border-radius:10px}
.note-box{margin:0;padding:10px 14px;background:var(--surface-2);border:var(--bd);border-radius:10px;font-weight:600}
.err-box{border-color:var(--pink)}
.err{margin:0;color:var(--pink);font-weight:700}
:root[data-theme="day"] .err{color:#C2185B}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{flex:1;padding:8px 10px;border:var(--bd);border-radius:10px;background:var(--surface);font-weight:800;cursor:pointer}
.tab.on{background:var(--inv-bg);color:var(--inv-fg)}
.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-weight:700;font-size:14px}
.inp{width:100%;padding:10px 12px;border:var(--bd);border-radius:10px;background:var(--surface-2);color:var(--text);font:inherit}
.hint{color:var(--text-muted);font-size:13px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.chk input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--violet)}
.chk.legal{padding:10px 12px;border:var(--bd);border-radius:10px;background:var(--surface-2)}
.pay-row{display:flex;flex-direction:column;gap:10px}
.narrow{max-width:760px}
.shop-main{padding-top:28px;padding-bottom:8px;display:flex;flex-direction:column;gap:22px}
.card{background:var(--surface);border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:20px;display:flex;flex-direction:column;gap:12px}
.card h1,.card h2{margin:0}
.acct-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.acct-head h1{margin:0 0 4px;font-size:clamp(26px,5vw,36px)}
.status{margin:0;font-weight:800;display:flex;align-items:center;gap:10px}
.status.ok .tick,.status .tick{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:99px;border:var(--bd);background:var(--lime);color:var(--on-bright)}
.status.ok{color:var(--text)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.glist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.grow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 14px;border:var(--bd);border-radius:10px;background:var(--surface-2)}
.grow .badge{background:var(--lime)}
.spin{width:22px;height:22px;border-radius:99px;border:3px solid var(--border);border-top-color:var(--text);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.more{margin:0}
.shop-main .steps{grid-template-columns:1fr}
.steps li .btn{margin-top:12px}
.steps{margin:0}
@media (max-width:480px){.modal{padding:18px 14px}.acct-btn{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hdr .wrap{gap:8px}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}