@font-face{font-family:'DM Sans';font-weight:400 700;font-display:swap;src:url(fonts/dm-sans-latin.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:500 700;font-display:swap;src:url(fonts/space-grotesk-latin.woff2) format('woff2')}
:root{--bg:#f7f4f1;--ink:#171717;--muted:#737373;--red:#ef2529;--green:#1f9d55;--border:#e6e1de;
  --media:#ef2529;--asso:#2f6fdf;--createur:#9b3fd1;--politique:#e07a12}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',-apple-system,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;color:inherit}
[hidden]{display:none!important}
.shell{width:min(100%,560px);margin:auto;padding:calc(18px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom))}

/* En-tête */
.top{display:flex;align-items:center;justify-content:space-between}
.logo{font:700 30px/1 'Space Grotesk',sans-serif;letter-spacing:-.07em}.logo span{color:var(--red)}
.top-actions{display:flex;gap:6px}
.pill{border:1px solid var(--border);background:#fff;border-radius:30px;padding:8px 13px;font-weight:700;font-size:13px}
.pill.ghost{padding:8px 11px;color:var(--muted)}
.intro{padding:30px 0 22px}
.intro h1{font:700 clamp(43px,11vw,62px)/.96 'Space Grotesk',sans-serif;letter-spacing:-.065em;margin:0}
.intro h1 em{color:var(--red);font-style:normal}
.intro p{font-size:15px;line-height:1.45;color:var(--muted);margin:15px 0 0;max-width:430px}

/* Compteur */
.counter{position:relative;overflow:hidden;background:linear-gradient(135deg,#141414 50%,#3d1517);color:#fff;border-radius:28px;padding:18px 20px 20px;box-shadow:0 18px 40px #1d0e0e30}
.counter::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(#ef252955,transparent 70%)}
.badge{display:inline-flex;align-items:center;gap:7px;background:#ffffff14;border-radius:20px;padding:7px 11px;font-size:10px;font-weight:700;letter-spacing:.12em}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px #ef252933}}
.big{font:700 76px/1 'Space Grotesk',sans-serif;letter-spacing:-.07em;margin:20px 0 6px;font-variant-numeric:tabular-nums}
.big #done{display:inline-block}.big #done.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.18);color:#ff7477}}
.big small{font-size:30px;color:#ffffff80;letter-spacing:-.04em;margin-left:8px}
.lbl{font-size:13px;color:#d4d4d4}
.track{height:7px;background:#ffffff26;border-radius:50px;overflow:hidden;margin:18px 0 12px}
.track div{height:100%;width:0;background:linear-gradient(90deg,#ff5a5d,var(--red));border-radius:50px;transition:width .5s cubic-bezier(.22,1,.36,1)}
.next{font-size:12px;font-weight:700}

/* Filtres (collés en haut au défilement) + modes */
.filters{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:20px 0 8px;position:sticky;top:0;background:var(--bg);z-index:10;margin:0 -20px;padding-left:20px;padding-right:20px}
.filters::-webkit-scrollbar{display:none}
.filters button{border:1px solid #e0dbd7;background:#fff;border-radius:30px;padding:9px 12px;font-size:12px;font-weight:700;white-space:nowrap;transition:background .2s,color .2s}
.filters button b{font-weight:500;color:#9a948f;margin-left:3px}
.filters button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.filters button.active b{color:#ffffff99}
.modes{display:flex;background:#ebe6e2;border-radius:30px;padding:4px;margin-top:6px}
.modes button{flex:1;border:0;background:transparent;border-radius:26px;padding:9px;font-size:13px;font-weight:700;color:#777;transition:all .2s}
.modes button.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px #0002}

/* Carte (commune aux deux modes) */
.card{position:relative;background:#fff;border-radius:22px;padding:20px;box-shadow:0 8px 30px #281b1114;border-top:4px solid var(--c,var(--red))}
.card[data-cat=media]{--c:var(--media)}.card[data-cat=asso]{--c:var(--asso)}.card[data-cat=createur]{--c:var(--createur)}.card[data-cat=politique]{--c:var(--politique)}
.info{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.portrait{position:relative;flex:none;width:92px;height:92px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,var(--c),#f6b26b,var(--c))}
.portrait>div{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#f0ece9;border:3px solid #fff;display:grid;place-items:center;font:700 30px 'Space Grotesk';color:#afaaa5;letter-spacing:-.04em}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.cat{display:inline-block;text-transform:uppercase;letter-spacing:.1em;font-size:9px;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);border-radius:20px;padding:4px 8px}
.card h2{font:700 25px/1.08 'Space Grotesk',sans-serif;letter-spacing:-.05em;margin:7px 0 3px;overflow-wrap:anywhere}
.handle{font-size:12px;color:#9a948f;margin:0 0 5px;overflow-wrap:anywhere}
.desc{color:#555;font-size:14px;line-height:1.38;margin:0}
.nets{display:grid;gap:8px}
.action{display:flex;align-items:center;gap:11px;width:100%;border:0;border-radius:12px;min-height:50px;padding:0 16px;text-decoration:none;font-size:14px;font-weight:700;background:#181818;color:#fff;transition:transform .12s,background .2s}
.action:active{transform:scale(.98)}
.action svg{flex:none;width:20px;height:20px}
.action .go{flex:1}
.action .ok{font-size:15px;color:#ffffff80}
.action .check{font-size:11px;color:#ff8a8c;font-weight:600}
.action.visited{background:#2a2a2a}.action.visited .ok::before{content:"vu ✓ ";font-size:11px;color:#7fdc9e}
.mark{margin-top:12px;justify-content:center;background:var(--red);font-size:15px}
.card.isdone{box-shadow:0 0 0 2px var(--green),0 8px 30px #281b1114}
.card.isdone .mark{background:var(--green)}
.donebadge{position:absolute;top:14px;right:14px;background:var(--green);color:#fff;font-size:11px;font-weight:700;border-radius:20px;padding:5px 10px}
.navbtns{display:flex;gap:8px;margin-top:8px}
.navbtns .action{justify-content:center;background:#fff;color:#555;border:1px solid var(--border);font-size:13px;min-height:44px}
.action:disabled{opacity:.3}

/* Paquet de cartes */
#deck{display:grid;margin-top:16px}
#deck>.card{grid-area:1/1;touch-action:pan-y;user-select:none;-webkit-user-select:none;backface-visibility:hidden;will-change:transform;z-index:2;cursor:grab}
#deck>.card.under{z-index:1;opacity:0;transform:scale(.94) translate3d(0,12px,0);pointer-events:none}
.dots{display:flex;justify-content:center;gap:4px;margin:16px 0 0;flex-wrap:wrap}
.dots i{width:6px;height:6px;border-radius:50%;background:#d9d3cf;transition:all .3s}
.dots i.d{background:#9fd6b4}
.dots i.on{width:20px;border-radius:4px;background:var(--ink)}
.dots{flex-wrap:nowrap;align-items:center}.dots i.s{transform:scale(.6)}
.hint{text-align:center;color:#a09893;font-size:11px;margin:10px 0 0}

/* Liste */
#list .card{margin-top:14px}
#list .portrait{width:68px;height:68px}#list .portrait>div{font-size:22px}
#list .card h2{font-size:21px}
#list .card.isdone{opacity:.6}

footer{padding:30px 0 0;color:#96918e;font-size:11px;line-height:1.55}

/* Notification et confettis */
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#171717;color:#fff;padding:11px 16px;border-radius:30px;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:all .3s;z-index:50;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
#confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:fall 1.6s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fall{to{transform:translate3d(var(--x),105vh,0) rotate(var(--r));opacity:.2}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}