/* Layout : "album de stickers" — grosse zone de collage en haut, verdict tamponné dessous, cartes à contour épais et ombre décalée */
:root{
  --bg:#efe9ff; --card:#ffffff; --ink:#140f2e; --muted:#5a5378; --edge:#140f2e;
  --pop:#ff3d8b; --sun:#ffd23f; --sky:#3d7bff;
  --ok:#0ea56b; --mid:#f08a00; --bad:#ff2e4d; --unk:#7a7396;
  --display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#130f29; --card:#1f1a3d; --ink:#f4f0ff; --muted:#b2aad6; --edge:#f4f0ff;
  --pop:#ff5c9f; --sun:#ffd84f; --sky:#6f9bff;
  --ok:#35d896; --mid:#ffa53a; --bad:#ff5a72; --unk:#a49cc7; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#130f29; --card:#1f1a3d; --ink:#f4f0ff; --muted:#b2aad6; --edge:#f4f0ff;
  --pop:#ff5c9f; --sun:#ffd84f; --sky:#6f9bff;
  --ok:#35d896; --mid:#ffa53a; --bad:#ff5a72; --unk:#a49cc7; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1.2px,transparent 1.3px);background-size:22px 22px;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--sky)}
.wrap{max-width:680px;margin:0 auto;padding-inline:16px;padding-block:18px 40px;display:flex;flex-direction:column;gap:22px}
.card{background:var(--card);border:2.5px solid var(--edge);border-radius:18px;box-shadow:5px 5px 0 var(--edge);padding:18px}

/* Barre du haut */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.planPill{font:inherit;font-weight:800;font-size:.85rem;background:var(--card);color:var(--ink);border:2.5px solid var(--edge);border-radius:999px;padding:5px 12px;cursor:pointer;box-shadow:2px 2px 0 var(--edge);display:inline-flex;gap:6px;align-items:center;font-variant-numeric:tabular-nums}
.planPill.pro{background:var(--sun);color:#140f2e}
.installBtn{font:inherit;font-weight:700;font-size:.85rem;background:none;border:2px dashed var(--edge);color:var(--ink);border-radius:999px;padding:5px 12px;cursor:pointer}

header{display:flex;flex-direction:column;gap:6px}
h1{font-family:var(--display);font-weight:900;font-size:clamp(2rem,8vw,3.2rem);line-height:1.02;margin:0;letter-spacing:-.02em;text-wrap:balance}
h1 .q{display:inline-block;margin-top:.12em;background:var(--sun);color:#140f2e;border:2.5px solid var(--edge);border-radius:12px;padding:0 .18em;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--edge)}
.sub{margin:0;color:var(--muted);font-weight:600;max-width:52ch}

/* Zone de collage */
.form{display:flex;flex-direction:column;gap:14px}
.paste{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  min-height:190px;border:3px dashed var(--edge);border-radius:18px;background:color-mix(in srgb,var(--sky) 10%,var(--card));
  padding:20px;cursor:pointer;transition:transform .15s ease, background .15s ease}
.paste:hover{transform:translateY(-2px)}
.paste.over{background:color-mix(in srgb,var(--pop) 18%,var(--card));border-style:solid}
.paste.flash{animation:flash .5s ease}
@keyframes flash{0%{background:var(--sun)}100%{background:color-mix(in srgb,var(--sky) 10%,var(--card))}}
#pasteIdle{display:flex;flex-direction:column;align-items:center;gap:4px}
.paste .big{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,4.5vw,1.5rem);line-height:1.15}
.keys{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;align-items:center;font-family:var(--mono);font-size:.82rem;margin:8px 0}
@media (hover:none) and (pointer:coarse){.keys{display:none}}
kbd{font-family:var(--mono);background:var(--card);border:2px solid var(--edge);border-bottom-width:4px;border-radius:7px;padding:2px 8px;font-size:.85rem}
#pasteIdle small{display:block;max-width:34ch;color:var(--muted);font-weight:600}
.paste img{max-height:220px;max-width:100%;border-radius:10px;border:2.5px solid var(--edge)}
.paste input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}
.or::before,.or::after{content:"";flex:1;height:2px;background:color-mix(in srgb,var(--ink) 15%,transparent)}
textarea,input[type=text]{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:2.5px solid var(--edge);border-radius:12px;padding:10px 12px}
textarea{min-height:84px;resize:vertical}
label.lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px}
textarea:focus,input:focus,button:focus-visible,.paste:focus-visible,a:focus-visible{outline:3px solid var(--pop);outline-offset:3px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.go{font-family:var(--display);font-weight:800;font-size:1.05rem;background:var(--pop);color:#fff;border:2.5px solid var(--edge);border-radius:999px;padding:12px 24px;cursor:pointer;box-shadow:4px 4px 0 var(--edge);transition:transform .1s, box-shadow .1s}
.go:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--edge)}
.go:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--edge)}
.go:disabled{opacity:.6;cursor:wait}
.go.alt{background:var(--sun);color:#140f2e}
.ghost{font:inherit;font-weight:700;font-size:.88rem;background:var(--card);color:var(--ink);border:2px solid var(--edge);border-radius:999px;padding:6px 14px;cursor:pointer}
.ghost:disabled{opacity:.6}
.toggle{display:flex;gap:8px;align-items:center;font-weight:600;font-size:.9rem;color:var(--muted);cursor:pointer}
.toggle input{accent-color:var(--pop);width:18px;height:18px}
.status{font-weight:700;min-height:1.4em}
.status.err{color:var(--bad)}
.loading{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:600}
.dots span{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--pop);margin-right:4px;animation:bounce 1s infinite}
.dots span:nth-child(2){animation-delay:.15s;background:var(--sun)}.dots span:nth-child(3){animation-delay:.3s;background:var(--sky)}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Verdict */
.result{display:flex;flex-direction:column;gap:18px}
.tag{align-self:flex-start;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;background:var(--sun);color:#140f2e;border:2px solid var(--edge);border-radius:999px;padding:3px 10px}
.claim{font-style:italic;color:var(--muted);margin:0;border-left:4px solid var(--sky);padding-left:12px}
.claimImg{max-height:140px;align-self:flex-start;border-radius:10px;border:2px solid var(--edge)}
.verdict{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.stamp{--c:var(--unk);display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,6vw,2rem);color:var(--c);border:4px solid var(--c);border-radius:14px;padding:8px 16px;transform:rotate(-6deg);letter-spacing:.02em;line-height:1;background:color-mix(in srgb,var(--c) 10%,var(--card))}
.stamp .emo{font-size:1.4em}
.stamp.slam{animation:slam .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes slam{0%{transform:rotate(-20deg) scale(2.4);opacity:0}70%{transform:rotate(-4deg) scale(.92);opacity:1}100%{transform:rotate(-6deg) scale(1)}}
.v-vrai,.v-plutot_vrai{--c:var(--ok)}.v-trompeur{--c:var(--mid)}.v-faux{--c:var(--bad)}.v-invérifiable{--c:var(--unk)}.v-opinion{--c:var(--sky)}
.meter{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px}
.meter .lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.meter .bar{position:relative;height:16px;border-radius:999px;border:2.5px solid var(--edge);background:linear-gradient(90deg,var(--ok),var(--sun) 50%,var(--bad))}
.meter .cursor{position:absolute;top:50%;width:26px;height:26px;margin-left:-13px;transform:translateY(-50%);border-radius:50%;background:var(--card);border:3px solid var(--edge);display:grid;place-items:center;font-size:.8rem;transition:left .8s cubic-bezier(.3,1.4,.5,1)}
.meter .tier{font-weight:800;font-size:.95rem}
.punch{font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,4vw,1.35rem);line-height:1.25;margin:0;text-wrap:balance}
.explain{margin:0;max-width:65ch}
h2{font-family:var(--display);font-weight:800;font-size:.95rem;margin:0 0 10px}
ul.points,ul.flags,ul.sources{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.points li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:start;padding:10px 12px;border:2px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:12px}
.pill{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:999px;color:#fff;white-space:nowrap;margin-top:2px;background:var(--unk)}
.p-vrai{background:var(--ok)}.p-faux{background:var(--bad)}.p-exagéré,.p-trompeur{background:var(--mid)}.p-opinion{background:var(--sky)}
.points b{display:block}
.points span.d{grid-column:2;color:var(--muted);font-size:.93rem}
.flags li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.flags li::before{content:"🚩";flex:none}
.sources li{display:flex;flex-direction:column;min-width:0}
.sources a{color:var(--sky);font-weight:800;text-decoration:none;overflow-wrap:anywhere}
.sources a:hover{text-decoration:underline}
.sources span{color:var(--muted);font-size:.92rem}
.seen{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ok);margin-left:6px}
.reflex{background:var(--sun);color:#140f2e;border:2.5px solid var(--edge);border-radius:14px;padding:12px 14px;font-weight:700;transform:rotate(-1deg)}
.reflex b{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:2px}
.meta{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin:0}
.live{display:flex;flex-direction:column;gap:12px;border:2.5px solid var(--edge);border-radius:14px;padding:14px;background:color-mix(in srgb,var(--sky) 12%,var(--card))}
.live h2{margin:0}
.liveIntro,.liveTip{margin:0;font-size:.93rem}
.liveTip{color:var(--muted);font-weight:600}
.liveGroup{display:flex;flex-direction:column;gap:6px}
.lg{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-weight:700;font-size:.86rem;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--edge);border-radius:999px;padding:5px 12px;box-shadow:2px 2px 0 var(--edge)}
.chip:hover{background:var(--sun);color:#140f2e}

/* Paywall */
.paywall{display:flex;flex-direction:column;gap:12px;background:color-mix(in srgb,var(--pop) 10%,var(--card))}
.paywall h2{font-size:1.15rem;margin:0}
.paywall ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px;font-weight:600}
.price{font-family:var(--display);font-weight:900;font-size:1.6rem}

/* Compte */
dialog{border:2.5px solid var(--edge);border-radius:18px;box-shadow:6px 6px 0 var(--edge);background:var(--card);color:var(--ink);padding:20px;width:min(460px,calc(100vw - 32px));max-height:85vh}
dialog::backdrop{background:color-mix(in srgb,#140f2e 55%,transparent)}
.acct{display:flex;flex-direction:column;gap:16px}
.acct h2{font-size:1.1rem;margin:0}
.acct section{display:flex;flex-direction:column;gap:8px;border-top:2px solid color-mix(in srgb,var(--ink) 12%,transparent);padding-top:14px}
.acct p{margin:0}
.code{font-family:var(--mono);font-size:1.6rem;letter-spacing:.15em;background:var(--bg);border:2px dashed var(--edge);border-radius:12px;padding:8px 12px;text-align:center;user-select:all}
.closeX{position:absolute;top:10px;right:12px;font-size:1.3rem;background:none;border:0;color:var(--ink);cursor:pointer}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);font-weight:700;border-radius:999px;padding:10px 18px;z-index:10;max-width:calc(100vw - 32px);text-align:center}

footer{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;color:var(--muted);font-size:.82rem}
footer nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
footer a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){.stamp.slam,.paste.flash,.dots span{animation:none}.meter .cursor{transition:none}.paste,.go{transition:none}}