/* Rendu A — Papier vermillon : papier grège, Archivo Black, ombres dures, nav en pastille haute, cartes empilées */
:root{--ink:#f1ece0;--ink2:#e6dfcf;--paper:#14120e;--muted:#5f5a4d;--acid:#ff4d2e;--line:#14120e33;--h:'Archivo Black',Impact,sans-serif;--b:'Archivo',system-ui,sans-serif}
body{font-family:var(--b)}
.big,.h2,.step b,.step h3,.stat b,.panel .w,.logo{letter-spacing:-.02em}
.big{line-height:.92}
header.top{inset:16px auto auto 50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:10px 12px 10px 22px;border-radius:999px;background:#14120e;color:#f1ece0;box-shadow:6px 6px 0 var(--acid);backdrop-filter:none;gap:20px}
.logo{font-size:20px}header nav{margin-left:0;gap:16px}header nav a{padding:8px 4px}
.btn{border:2.5px solid var(--paper);box-shadow:5px 5px 0 var(--paper);transition:transform .2s,box-shadow .2s,background .2s,color .2s;border-radius:12px}
.btn:hover{background:var(--paper);color:var(--ink)}.btn.fill{border-color:var(--paper);color:#14120e}
.hero::before{content:"";position:absolute;inset:104px 4vw auto auto;z-index:-1;width:min(26vw,380px);aspect-ratio:4/5;background:url(img/hero.webp) 62% 50%/cover;border:3px solid var(--paper);box-shadow:10px 10px 0 var(--paper);transform:rotate(3deg)}
.hero::after{content:"50 Skills · zéro slop · 50 Skills · zéro slop · ";position:absolute;right:calc(4vw + min(26vw,380px) - 70px);top:70px;width:128px;height:128px;border-radius:50%;background:var(--acid);color:#14120e;display:grid;place-content:center;text-align:center;font:400 13px/1.1 var(--h);text-transform:uppercase;padding:18px;overflow:hidden;animation:spin 14s linear infinite;border:3px solid var(--paper);z-index:3}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .big{max-width:70%;font-size:clamp(2.6rem,6.6vw,7.4rem)}.hero .big em{color:var(--acid);-webkit-text-stroke:0}
.hero-foot p{color:var(--muted)}
.stats{border-block:3px solid var(--paper)}.stat{border-right:3px solid var(--paper)}.stat:first-child b{color:var(--acid)}
.pin{height:auto}.pin .stick{position:static;height:auto;overflow:visible;padding:60px 0 20px}.track{display:block;width:auto;transform:none!important}.prog,.pcount{display:none}
.panel{position:sticky;top:30px;width:auto;height:auto;min-height:62vh;margin:0 var(--gut) 36px;padding:44px;background:var(--ink);border:3px solid var(--paper);border-radius:20px;box-shadow:12px 12px 0 var(--paper)}
.panel:nth-child(2){top:48px;background:#ffd9cf}.panel:nth-child(3){top:66px;background:#e9e2d0}.panel:nth-child(4){top:84px;background:#ffcfc2}
.panel .w{-webkit-text-stroke:0;color:var(--paper);font-size:clamp(3rem,9.5vw,10rem);overflow-wrap:anywhere}.panel.act .w{color:var(--acid)}
.panel .info p{color:var(--paper)}
.step b{color:var(--acid);-webkit-text-stroke:2px var(--paper)}
.strip{background:url(img/bande.webp) center/cover;border-block:3px solid var(--paper)}
.band{background:var(--paper);color:var(--ink)}.band span::after{color:var(--acid)}
.plate{border:2.5px solid var(--paper);border-radius:10px;box-shadow:6px 6px 0 var(--paper)}
.card:hover .plate{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:9px 9px 0 var(--paper)}
.plate .tag{background:var(--acid);color:#14120e}
.cta{background:var(--acid);color:#14120e;text-align:left;padding-bottom:calc(clamp(100px,16vw,200px) + 40px)}
.cta .big{font-size:clamp(3.4rem,13vw,13rem)}
.cta .btn.fill{background:#14120e;color:#f1ece0}
footer{color:var(--muted);margin-bottom:70px}
.card p,.pg .lead,.sk .lead,.hub span,.kid p{color:var(--muted)}
@media(max-width:700px){
 .hero::before{inset:70px var(--gut) auto var(--gut);width:auto;height:26vh;aspect-ratio:auto;transform:rotate(-1.5deg);box-shadow:6px 6px 0 var(--paper)}
 .hero::after{right:calc(var(--gut) + 8px);top:56px;width:92px;height:92px;font-size:10px;padding:12px}
 .hero{padding-top:calc(70px + 26vh + 28px)}.hero .big{max-width:none}
 .panel{padding:26px;position:static;margin-bottom:24px}.panel .w{font-size:16vw}
 header.top{padding:8px 10px 8px 14px;gap:10px}
}
.hero{padding-bottom:96px}

@media(max-width:700px){header nav a,footer a{padding:12px 6px}}
@media(min-width:701px) and (max-height:800px){.hero .big{font-size:clamp(2.2rem,5vw,5.2rem)}.hero::before{width:min(20vw,300px)}.hero::after{display:none}.rows{margin-top:16px}}
@media(max-width:700px){.hero::before{height:17vh}.hero{padding-top:calc(70px + 17vh + 16px);padding-bottom:84px}.hero .big{font-size:clamp(2rem,10.5vw,3rem)}.rows{display:none}.hero-foot{margin-top:16px}.hero-foot p{font-size:16px}}
@media(max-width:480px){[data-theme="a"] .lib h1,[data-theme="a"] .pg h1,[data-theme="a"] .sk h1{font-size:2.1rem;overflow-wrap:anywhere}}