/* Vérification supporter — la mise en page, partagée par toutes les pages /verify. * * Chaque projet ne redéfinit que ses TOKENS (le bloc :root de sa page), jamais ces règles : * la structure et le comportement restent identiques partout, seule la peau change. * * Thème CLAIR par défaut, comme le wiki, parce que c'est ce qui se lit le mieux sur une page * qu'on ouvre une seule fois. Le sombre est un choix explicite, retenu par verify.js via * [data-theme="dark"] sur . Les valeurs ci-dessous sont celles du site parapluie ; une * page qui oublie un token retombe dessus au lieu de casser. */ :root{ --bg:#f6f2e9; --panel:#fbf9f3; --panel-2:#f0ebdf; --line:rgba(58,44,32,0.14); --edge:rgba(58,44,32,0.28); --text:#2c352c; --muted:#6f685a; --accent:#4f7050; /* la couleur du projet : puce, focus, porte gratuite */ --kofi:#f16436; --yt:#e0002b; --radius:14px; --title:'Bricolage Grotesque', system-ui, sans-serif; --body:'Inter', system-ui, -apple-system, sans-serif; } :root[data-theme="dark"]{ --bg:#1b1712; --panel:#2a241c; --panel-2:#332c22; --line:rgba(255,240,210,0.10); --edge:rgba(255,240,210,0.22); --text:#f8f1e4; --muted:#c6bda8; --accent:#8fb083; --yt:#ff0033; } *{margin:0;padding:0;box-sizing:border-box} html{color-scheme:light} html[data-theme="dark"]{color-scheme:dark} body{ font-family:var(--body); color:var(--text); background:var(--bg); line-height:1.6; font-size:16.5px; min-height:100vh; -webkit-font-smoothing:antialiased; } a{color:var(--accent)} a:hover{text-decoration:underline} .shell{max-width:880px;margin:0 auto;padding:0 clamp(18px,4vw,28px) 72px} /* ── barre du haut : marque, langue, thème ─────────────────────── */ .top{display:flex;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid var(--line);margin-bottom:32px} .top .brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--title);font-size:18px;color:var(--text);text-decoration:none} .top .brand:hover{text-decoration:none;color:var(--accent)} .top .brand .dot{width:10px;height:10px;border-radius:2px;background:var(--accent)} .top .home{font-size:14.5px;color:var(--muted);text-decoration:none} .top .lang{margin-left:auto} select.lang{ font-family:var(--body);font-size:14px;color:var(--text);background:var(--panel); border:1px solid var(--line);border-radius:9px;padding:7px 9px;cursor:pointer; } .themetog{ width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;cursor:pointer; color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:9px; } .themetog:hover{color:var(--text)} .themetog svg{width:17px;height:17px} /* ── titres ────────────────────────────────────────────────────── */ h1{font-family:var(--title);font-weight:800;font-size:clamp(23px,4.2vw,32px);line-height:1.2;margin-bottom:10px} .lede{color:var(--muted);max-width:58ch;margin-bottom:28px} /* ── le pseudo ─────────────────────────────────────────────────── */ .name-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:24px} .name-box label{display:block;font-size:14px;color:var(--muted);margin-bottom:9px} #pseudo{ width:100%;font-family:var(--body);font-size:16.5px;color:var(--text);background:var(--bg); border:1px solid var(--edge);border-radius:9px;padding:13px 15px;outline:none; } #pseudo:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)} .check{display:flex;align-items:center;font-size:14px;color:var(--muted);min-height:22px;margin-top:9px} .check.ok{color:var(--accent);font-weight:500} .check.no{color:var(--kofi)} /* ── les deux portes ───────────────────────────────────────────── */ .doors{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:660px){.doors{grid-template-columns:1fr}} /* Une seule porte (Ko-fi) : colonne unique, largeur bornée, alignée au contenu. */ .doors.single{grid-template-columns:1fr;max-width:420px} .door{ position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); padding:22px 20px 20px;display:flex;flex-direction:column; } /* La porte gratuite est mise en avant : le prix d'à côté fait le reste du travail. */ .door.free{border-color:color-mix(in srgb, var(--accent) 55%, transparent);background:var(--panel-2)} .door .price{font-size:13px;color:var(--muted)} .door.free .price{color:var(--accent);font-weight:500} .door h2{font-family:var(--title);font-weight:800;font-size:19px;margin:8px 0 10px} .door p{font-size:14.5px;color:var(--muted);margin-bottom:18px;flex:1} .door .go{ display:block;width:100%;text-align:center;font-family:var(--body);font-size:15px;font-weight:500; color:#fff;border:none;border-radius:10px;padding:14px 18px;cursor:pointer;text-decoration:none; transition:filter .18s, transform .18s; } .door .go:hover{filter:brightness(1.07);transform:translateY(-1px);text-decoration:none} .door .go[disabled]{opacity:.42;cursor:not-allowed;transform:none;filter:none} .go.kofi{background:var(--kofi)} .go.yt{background:var(--yt)} .tag{ position:absolute;right:14px;top:-10px;font-size:12px;font-weight:600;color:var(--bg); background:var(--accent);padding:3px 10px;border-radius:6px; } .same{margin-top:22px;font-size:14.5px;color:var(--muted);border-left:2px solid var(--edge);padding-left:14px} .same b{color:var(--text);font-weight:600} .foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)} /* ── bandeau de retour ─────────────────────────────────────────── */ .banner{display:none;border-radius:12px;padding:15px 17px;margin-bottom:24px;font-size:15px;border:1px solid} .banner.show{display:block} .banner.good{border-color:color-mix(in srgb, var(--accent) 55%, transparent);background:color-mix(in srgb, var(--accent) 12%, transparent)} .banner.bad{border-color:color-mix(in srgb, var(--kofi) 55%, transparent);background:color-mix(in srgb, var(--kofi) 12%, transparent)} .banner b{font-family:var(--title);font-weight:800;display:block;margin-bottom:4px;color:var(--text)}