/* Styles visuels (Paramètres › Style visuel) : surcharges de style.css, actives via <html data-style="…">.
   Sans attribut data-style, c'est le style « Classique » de style.css, inchangé.
   Chaque style redéfinit les variables de couleur de style.css en clair et en sombre (même schéma :
   préférence du téléphone, ou data-theme forcé), puis la forme des composants.
   Variables ajoutées : --on-accent2 (texte sur --accent2), --edge (bordure marquée), --field (fond des champs).
   Les styles d'accessibilité (7 et 8, toujours gratuits) redéfinissent aussi les couleurs des familles du dé (--s0-fg…--s3-tx).
   Contrastes visés (WCAG AA) : texte ≥ 4,5:1 sur --card et --bg, --on-accent sur --accent. */

@font-face{font-family:Rubik;src:url(fonts/rubik-400.woff2) format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/rubik-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/rubik-700.woff2) format('woff2');font-weight:700 900;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-600.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(fonts/spacegrotesk-500.woff2) format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(fonts/spacegrotesk-700.woff2) format('woff2');font-weight:600 900;font-display:swap}
@font-face{font-family:VT323;src:url(fonts/vt323-400.woff2) format('woff2');font-display:swap}

/* ---------- commun à tous les styles ---------- */
:root[data-style]{--field:var(--bg);--edge:var(--line)}
:root[data-style] input{font-family:inherit}
/* les règles « button » de chaque style ne doivent pas écraser les boutons d'action */
[data-style] button.primary{background:var(--accent);color:var(--on-accent)}
[data-style] button.secondary{background:var(--accent2);color:var(--on-accent2)}
[data-style] .kp .op{background:var(--accent2);color:var(--on-accent2)}
[data-style] :is(.kp .ok,.kp .fillkey){background:var(--accent);color:var(--on-accent)}
/* boutons « lien » : jamais de cadre ni d'ombre, quel que soit le style */
:root[data-style] :is(.lnk,.linkbtn,button.more,.sheet-in .close){border:0;box-shadow:none;background:none}
/* parties de l'historique : la carte (.hg) porte le cadre, le bouton qu'elle contient reste nu */
:root[data-style] .hist .hsum{border:0;box-shadow:none;background:none;border-radius:inherit;text-transform:none;letter-spacing:0;font-weight:400;transform:none}

/* ============ 1 · FLUENT : froid et dense, accent bleu-gris, bandeau de titre sombre, coins de 4px ============
   --head / --on-head / --head-accent : bandeau du haut (sa couleur passe aussi dans la barre du téléphone, applyLook) */
:root[data-style=fluent]{--bg:#eef1f4;--card:#fff;--field:#fff;--ink:#1b2228;--muted:#56616b;--line:#dfe4e8;--edge:#c5cdd4;
  --accent:#3d5a78;--on-accent:#fff;--accent2:#e3eaf1;--on-accent2:#2c4560;--ok:#107c10;--warn:#c50f1f;
  --head:#1f2a33;--on-head:#fff;--head-accent:#9cc0e3;--sh:0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.14);color-scheme:light}
@media (prefers-color-scheme:dark){:root[data-style=fluent]:not([data-theme="light"]){--bg:#15191d;--card:#1f252b;--field:#171c20;--ink:#f1f4f6;--muted:#a3adb6;--line:#343d45;--edge:#4d5862;
  --accent:#8fb0d0;--on-accent:#111518;--accent2:#24313d;--on-accent2:#b9d0e6;--ok:#54b054;--warn:#e37d80;
  --head:#0a0d10;--on-head:#f1f4f6;--head-accent:#8fb0d0;--sh:0 0 2px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-style=fluent][data-theme="dark"]{--bg:#15191d;--card:#1f252b;--field:#171c20;--ink:#f1f4f6;--muted:#a3adb6;--line:#343d45;--edge:#4d5862;
  --accent:#8fb0d0;--on-accent:#111518;--accent2:#24313d;--on-accent2:#b9d0e6;--ok:#54b054;--warn:#e37d80;
  --head:#0a0d10;--on-head:#f1f4f6;--head-accent:#8fb0d0;--sh:0 0 2px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.35);color-scheme:dark}
:root[data-style=fluent],:root[data-style=fluent] body{font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
[data-style=fluent] header{background:var(--head);color:var(--on-head);margin-bottom:12px;padding:10px 16px}
[data-style=fluent] header h1{font-size:1.1rem;font-weight:600;letter-spacing:0}
[data-style=fluent] header h1 span{color:var(--head-accent)}
[data-style=fluent] #gear{border:0;background:none;color:var(--on-head)}
[data-style=fluent] .card{border:1px solid var(--line);border-radius:4px;padding:12px}
[data-style=fluent] .card h2{font-size:.72rem;font-weight:600;letter-spacing:.5px}
[data-style=fluent] .hero{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 4px 4px 0}
[data-style=fluent] .remind{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 4px 4px 0}
[data-style=fluent] .who div{border-radius:4px;border:1px solid var(--line)}
[data-style=fluent] .who b{font-size:1.25rem;font-weight:600}
[data-style=fluent] .chip{border-radius:2px;border:1px solid var(--line)}
[data-style=fluent] button{border-radius:4px;background:var(--card);border:1px solid var(--edge);font-weight:600}
[data-style=fluent] button.primary{border-color:transparent}
[data-style=fluent] button.secondary{border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
[data-style=fluent] :is(input,select,.entry .f,.entry .pick){border-radius:4px;border:1px solid var(--edge);border-bottom-color:var(--muted);background:var(--field)}
[data-style=fluent] .entry .f.act{outline:0;border-color:var(--edge);border-bottom:2px solid var(--accent)}
[data-style=fluent] .entry .pick.on{background:var(--accent2);border-color:var(--accent)}
[data-style=fluent] .bar{border-top-color:var(--line)}
[data-style=fluent] .suits button{border-radius:4px;border:2px solid transparent}
[data-style=fluent] .suits button.on{border-color:var(--ink)}
/* tableaux et classements en grille de données : en-tête grisé, lignes serrées, meneur marqué d'une barre */
[data-style=fluent] thead th{background:var(--bg);border-bottom:1px solid var(--edge)}
[data-style=fluent] :is(th,td){padding:5px 2px}
[data-style=fluent] tfoot .tot td{border-top:1px solid var(--muted)}
[data-style=fluent] ol.rank li{padding:6px 8px 6px 11px}
[data-style=fluent] ol.rank li:first-child{border-left:3px solid var(--accent);padding-left:8px;background:var(--accent2)}
[data-style=fluent] ol.rank.compact li{padding:4px 6px 4px 9px}
[data-style=fluent] ol.rank.compact li:first-child{padding-left:6px}
[data-style=fluent] .kp button{border:0;border-radius:4px;background:var(--bg)}
[data-style=fluent] .pc{border:1px solid var(--edge);border-radius:4px}
[data-style=fluent] .sheet-in{border-radius:6px 6px 0 0}
[data-style=fluent] .dlg-in{border-radius:6px}
[data-style=fluent] .toast{border-radius:4px;box-shadow:var(--sh)}

/* ============ 2 · POP : saturé et joyeux, violet, rose et jaune, Rubik très gras, pilules ============
   --violet / --on-violet : bloc de la manche ; --sun / --on-sun : meneur ; --accent-deep : relief du bouton principal.
   --accent2 reste pâle : beaucoup de composants de style.css y posent du texte foncé. */
:root[data-style=pop]{--bg:#f3edff;--card:#fff;--field:#f6f1ff;--ink:#24123f;--muted:#5d4b7a;--line:#e6dcf7;--edge:#cdbde9;
  --accent:#d1145f;--on-accent:#fff;--accent-deep:#8f0b40;--accent2:#e6d9ff;--on-accent2:#4a1d96;--ok:#1f7a3a;--warn:#c0152f;
  --violet:#6d28d9;--on-violet:#fff;--sun:#ffd23f;--on-sun:#3d2c00;color-scheme:light}
@media (prefers-color-scheme:dark){:root[data-style=pop]:not([data-theme="light"]){--bg:#17111f;--card:#241a33;--field:#2f2342;--ink:#f2eaff;--muted:#b9a9d4;--line:#33284a;--edge:#4b3d66;
  --accent:#ff5c9a;--on-accent:#2b0515;--accent-deep:#a3134f;--accent2:#3d2a63;--on-accent2:#e3d4ff;--ok:#6fdc8c;--warn:#ff8a9a;
  --violet:#7c4ddb;--on-violet:#fff;--sun:#ffd23f;--on-sun:#3d2c00;color-scheme:dark}}
:root[data-style=pop][data-theme="dark"]{--bg:#17111f;--card:#241a33;--field:#2f2342;--ink:#f2eaff;--muted:#b9a9d4;--line:#33284a;--edge:#4b3d66;
  --accent:#ff5c9a;--on-accent:#2b0515;--accent-deep:#a3134f;--accent2:#3d2a63;--on-accent2:#e3d4ff;--ok:#6fdc8c;--warn:#ff8a9a;
  --violet:#7c4ddb;--on-violet:#fff;--sun:#ffd23f;--on-sun:#3d2c00;color-scheme:dark}
:root[data-style=pop],:root[data-style=pop] body{font-family:Rubik,system-ui,sans-serif}
[data-style=pop] header{padding:16px 16px 12px}
[data-style=pop] header h1{font-size:1.4rem;font-weight:800}
[data-style=pop] #gear{border-radius:50%;width:44px;height:44px;padding:0;background:var(--card)}
[data-style=pop] .card{border:0;border-radius:26px;padding:16px}
[data-style=pop] .hist .hg{border-radius:20px}
[data-style=pop] .card h2{text-transform:none;letter-spacing:0;font-size:1.05rem;font-weight:800;color:var(--ink)}
/* bloc de la manche : violet plein, encarts translucides */
[data-style=pop] .hero{border:0;background:var(--violet);color:var(--on-violet)}
[data-style=pop] .hero h2,[data-style=pop] .hero h2 em{color:inherit}
[data-style=pop] .hero .who div,[data-style=pop] .hero .chip{background:rgba(255,255,255,.16);color:inherit}
[data-style=pop] .hero .who small{color:color-mix(in srgb,var(--on-violet) 82%,var(--violet))}
[data-style=pop] .hero .who b{font-size:1.4rem;font-weight:800}
[data-style=pop] .hero .chip.warn{background:var(--sun);color:var(--on-sun)}
[data-style=pop] .hero .suits button.on{box-shadow:0 0 0 3px var(--sun)}
[data-style=pop] .remind{border:0;background:var(--accent2);color:var(--on-accent2)}
[data-style=pop] button{border-radius:999px;background:var(--field);font-weight:600}
/* bouton principal en relief : ombre pleine décalée, enfoncé au toucher */
[data-style=pop] button.primary{font-weight:800;box-shadow:0 4px 0 var(--accent-deep);transition:transform .08s,box-shadow .08s}
[data-style=pop] button.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep)}
[data-style=pop] button.primary:disabled{box-shadow:none;transform:none}
[data-style=pop] .bar{background:var(--bg);border:0;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
[data-style=pop] .bar .inner>button{min-height:48px}
[data-style=pop] .counter button{background:var(--field)}
[data-style=pop] :is(input,select){border:0;border-radius:14px;background:var(--field)}
[data-style=pop] .chip{border-radius:999px;background:var(--field)}
[data-style=pop] .who div{border-radius:18px;background:var(--field)}
[data-style=pop] .suits button{border-radius:16px;border:0;box-shadow:none}
[data-style=pop] .suits button.on{box-shadow:0 0 0 3px var(--ink);transform:scale(1.04)}
[data-style=pop] .suits #roll{background:var(--field)}
[data-style=pop] td{border:0}
[data-style=pop] tbody tr:nth-child(odd) td{background:var(--field)}
[data-style=pop] tbody tr td:first-child{border-radius:10px 0 0 10px}
[data-style=pop] tbody tr td:last-child{border-radius:0 10px 10px 0}
[data-style=pop] tfoot .tot td{border-top:0;color:var(--accent);font-weight:800;padding-top:8px}
/* classement en pilules, meneur en jaune */
[data-style=pop] ol.rank li,[data-style=pop] ol.rank.compact li:last-child{border:0;background:var(--field);border-radius:999px;padding:6px 14px 6px 8px;margin-bottom:5px}
[data-style=pop] ol.rank li:first-child{background:var(--sun);color:var(--on-sun)}
[data-style=pop] ol.rank li:first-child .gap{color:var(--on-sun)}
[data-style=pop] ol.rank .pt{font-weight:800}
[data-style=pop] ol.rank.compact{column-gap:8px}
[data-style=pop] ol.rank.compact li{gap:6px;padding:6px 12px 6px 6px}
[data-style=pop] :is(.entry .f,.entry .pick){border:0;border-radius:14px;background:var(--field)}
[data-style=pop] .entry .f.act{outline:0;box-shadow:inset 0 0 0 2px var(--accent)}
[data-style=pop] .entry .pick.on{background:var(--accent2);color:var(--on-accent2)}
[data-style=pop] .kp{gap:6px}
[data-style=pop] .kp button{border-radius:16px;background:var(--field);font-weight:600}
[data-style=pop] .pc{border-radius:12px;background:var(--field)}
[data-style=pop] .pc:not(.seven){border-color:transparent}
[data-style=pop] .pc.sel{background:var(--accent)}
[data-style=pop] .sheet-in{border-radius:28px 28px 0 0;background:var(--card)}
[data-style=pop] .sheet.menu .sheet-in{border-radius:22px}
[data-style=pop] .sheet-in button{border-radius:16px}
[data-style=pop] .dlg-in{border-radius:28px;padding:22px 20px 18px}
[data-style=pop] .toast{border-radius:16px}

/* ============ 3 · TAPIS DE JEU : feutre vert, cartes crème, titres à empattements, touches dorées ============ */
:root[data-style=tapis]{--bg:#f4ecd8;--card:#fbf6ea;--ink:#2a2418;--muted:#6b5e46;--line:#e3d6b6;--edge:#cdbd98;
  --accent:#c2410c;--on-accent:#fff;--accent2:#c99a2e;--on-accent2:#2a2418;--ok:#237a36;--warn:#b42318;
  --gold:#c99a2e;--felt:#1f5e3b;--felt2:#174a2e;--sh:0 1px 0 rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.25);color-scheme:light}
@media (prefers-color-scheme:dark){:root[data-style=tapis]:not([data-theme="light"]){--bg:#1e2822;--card:#25302a;--ink:#f1e8d2;--muted:#b3a888;--line:#36463c;--edge:#4b5c51;
  --accent:#f5793f;--on-accent:#1e2822;--accent2:#e0b84f;--on-accent2:#1e2822;--ok:#6fcf86;--warn:#ff8f80;
  --gold:#e0b84f;--felt:#0f3321;--felt2:#0a2618;--sh:0 2px 10px rgba(0,0,0,.45);color-scheme:dark}}
:root[data-style=tapis][data-theme="dark"]{--bg:#1e2822;--card:#25302a;--ink:#f1e8d2;--muted:#b3a888;--line:#36463c;--edge:#4b5c51;
  --accent:#f5793f;--on-accent:#1e2822;--accent2:#e0b84f;--on-accent2:#1e2822;--ok:#6fcf86;--warn:#ff8f80;
  --gold:#e0b84f;--felt:#0f3321;--felt2:#0a2618;--sh:0 2px 10px rgba(0,0,0,.45);color-scheme:dark}
/* le feutre couvre toute la page ; --bg reste le fond (crème) des champs dans les cartes */
:root[data-style=tapis]{min-height:100%;background:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/3px 3px,radial-gradient(ellipse at 50% 30%,var(--felt),var(--felt2)) fixed var(--felt2)}
:root[data-style=tapis] body{background:transparent}
[data-style=tapis] header{border-bottom:1px solid rgba(201,154,46,.35);margin-bottom:14px;color:#f1e8d2}
[data-style=tapis] header h1{font-family:Fraunces,Georgia,serif;font-size:1.4rem;font-weight:600}
[data-style=tapis] header h1 span{color:var(--gold)}
[data-style=tapis] .card{border:0;border-radius:6px;box-shadow:var(--sh)}
[data-style=tapis] .card h2{font-family:Fraunces,Georgia,serif;text-transform:none;letter-spacing:.2px;font-size:1.05rem;font-weight:600}
[data-style=tapis] .card h2 em{font-family:system-ui,sans-serif;font-size:.8rem}
[data-style=tapis] .hero{border:0;border-left:5px solid var(--gold)}
[data-style=tapis] .remind{border:1px solid var(--gold)}
[data-style=tapis] button{border-radius:5px}
[data-style=tapis] button.primary{background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 82%,#000));box-shadow:0 2px 0 #8a2d08}
[data-style=tapis] button.primary:disabled{box-shadow:none}
[data-style=tapis] button.secondary{background:var(--gold)}
[data-style=tapis] .bar{background:color-mix(in srgb,var(--felt2) 94%,#000);border-top:1px solid rgba(201,154,46,.45)}
[data-style=tapis] .bar .inner>button:not(.primary),[data-style=tapis] .kpbar button:not(.primary){background:var(--card);border:1px solid var(--gold)}
[data-style=tapis] .chip{background:var(--bg);border:1px dashed var(--edge);border-radius:3px}
[data-style=tapis] .who div{border-radius:4px}
[data-style=tapis] table{font-family:Fraunces,Georgia,serif}
[data-style=tapis] th{font-family:system-ui,sans-serif}
[data-style=tapis] td{border-bottom-color:rgba(100,140,200,.35)}
[data-style=tapis] td.n{color:var(--accent);border-right:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
[data-style=tapis] tfoot .tot td{border-top:3px double var(--muted)}
[data-style=tapis] ol.rank,[data-style=tapis] .total,[data-style=tapis] .picktotal,[data-style=tapis] .entry .nm{font-family:Fraunces,Georgia,serif}
[data-style=tapis] .suits button{border-radius:5px;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
[data-style=tapis] .suits button.on{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 4px 8px rgba(0,0,0,.35)}
[data-style=tapis] .suits #roll{background:var(--bg);border-color:var(--bg)}
[data-style=tapis] .entry .nm{font-size:1.05rem}
[data-style=tapis] .entry .f{font-family:Fraunces,Georgia,serif;font-size:1.2rem;border:0;border-bottom:1px solid var(--edge);border-radius:0}
[data-style=tapis] .entry .f.act{outline:0;border-bottom:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--card))}
[data-style=tapis] .entry .pick{border-radius:5px;background:var(--bg)}
[data-style=tapis] .entry .pick.on{background:var(--gold)}
[data-style=tapis] .kp button{background:var(--card);border-radius:6px;box-shadow:0 2px 0 var(--edge);font-family:Fraunces,Georgia,serif;font-size:1.25rem}
[data-style=tapis] .kp .op{background:var(--gold)}
[data-style=tapis] .kp .ok,[data-style=tapis] .kp .fillkey{background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 82%,#000));color:var(--on-accent);font-family:system-ui,sans-serif;box-shadow:0 2px 0 #8a2d08}
[data-style=tapis] .kp .fillkey{font-size:.85rem}
[data-style=tapis] .pc{border-radius:7px;border:1px solid var(--edge);font-family:Fraunces,Georgia,serif;box-shadow:0 2px 4px rgba(0,0,0,.25)}
[data-style=tapis] .pc.sel{transform:translateY(-3px)}
[data-style=tapis] .pc.taken{box-shadow:none}
[data-style=tapis] .pc.seven:not(.suited){border:2px solid var(--gold)}
/* textes posés directement sur le feutre */
[data-style=tapis] .foot,[data-style=tapis] .foot .lnk{color:#d5e0d0}
[data-style=tapis] .linkbtn{color:#f1e8d2!important}
[data-style=tapis] .sheet-in{border-radius:10px 10px 0 0}
[data-style=tapis] .dlg-in{border-radius:6px;border-top:4px solid var(--gold)}
[data-style=tapis] .dlg-in p{font-family:Fraunces,Georgia,serif;font-size:1.05rem}

/* ============ 4 · NÉO-BRUTAL : traits noirs épais, ombres dures, jaune et orange ============ */
:root[data-style=brutal]{--bg:#fff4d6;--card:#fff;--field:#fffdf5;--ink:#111;--muted:#444;--line:#111;--edge:#111;
  --accent:#ff5a1f;--on-accent:#111;--accent2:#ffd84d;--on-accent2:#111;--ok:#1d7a32;--warn:#c4161c;--hard:3px 3px 0 #111;color-scheme:light}
@media (prefers-color-scheme:dark){:root[data-style=brutal]:not([data-theme="light"]){--bg:#232323;--card:#1b1b1b;--field:#111;--ink:#f5f5f5;--muted:#bbb;--line:#f5f5f5;--edge:#f5f5f5;
  --accent:#ff6b2c;--on-accent:#111;--accent2:#ffd84d;--on-accent2:#111;--ok:#5fd37a;--warn:#ff8080;--hard:3px 3px 0 #f5f5f5;color-scheme:dark}}
:root[data-style=brutal][data-theme="dark"]{--bg:#232323;--card:#1b1b1b;--field:#111;--ink:#f5f5f5;--muted:#bbb;--line:#f5f5f5;--edge:#f5f5f5;
  --accent:#ff6b2c;--on-accent:#111;--accent2:#ffd84d;--on-accent2:#111;--ok:#5fd37a;--warn:#ff8080;--hard:3px 3px 0 #f5f5f5;color-scheme:dark}
:root[data-style=brutal],:root[data-style=brutal] body{font-family:'Space Grotesk',system-ui,sans-serif}
[data-style=brutal] header{background:#ffd84d;color:#111;border-bottom:3px solid var(--edge);margin-bottom:14px}
[data-style=brutal] header h1{font-weight:700}
[data-style=brutal] header h1 span{color:#111;text-decoration:underline 3px #ff5a1f;text-underline-offset:3px}
[data-style=brutal] #gear{background:#fff;border:2px solid #111;border-radius:0;padding:2px 6px;box-shadow:2px 2px 0 #111}
[data-style=brutal] .card{border:2.5px solid var(--edge);border-radius:0;box-shadow:var(--hard)}
[data-style=brutal] .card h2{color:var(--ink);font-weight:700;letter-spacing:1px}
[data-style=brutal] .card h2 em{color:var(--ink);text-decoration:underline 2px var(--accent);text-underline-offset:3px}
[data-style=brutal] .remind{background:var(--accent2);color:#111}
[data-style=brutal] button{border:2.5px solid var(--edge);border-radius:0;box-shadow:var(--hard);font-weight:700;background:var(--card)}
[data-style=brutal] button:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}
[data-style=brutal] button:disabled{box-shadow:none}
[data-style=brutal] button.primary{color:#111}
[data-style=brutal] .counter button{border-radius:0}
[data-style=brutal] :is(input,select,.entry .f,.entry .pick){border:2px solid var(--edge);border-radius:0;background:var(--field)}
[data-style=brutal] .entry .pick{box-shadow:none}
[data-style=brutal] .entry .pick.on{background:var(--accent2)}
[data-style=brutal] .entry .f.act{outline:0;background:var(--accent2);color:#111}
[data-style=brutal] .entry .f.act small{color:#444}
[data-style=brutal] .entry .f.act .caret{background:#111}
[data-style=brutal] .bar{background:var(--bg);border-top:3px solid var(--edge)}
[data-style=brutal] .chip{border:2px solid var(--edge);border-radius:0;background:var(--card);font-weight:500}
[data-style=brutal] .chip.warn{background:var(--accent2);color:#111}
[data-style=brutal] .who div{border:2px solid var(--edge);border-radius:0}
[data-style=brutal] .suits button{border:2.5px solid var(--edge);border-radius:0;box-shadow:none}
[data-style=brutal] .suits button.on{box-shadow:var(--hard);transform:translate(-2px,-2px)}
[data-style=brutal] td{border-bottom:2px solid var(--line)}
[data-style=brutal] tfoot .tot td{border-top:3px solid var(--edge);background:var(--accent2);color:#111}
[data-style=brutal] tfoot .tot td.n{color:#111}
[data-style=brutal] ol.rank li{border-bottom:2px solid var(--line)}
[data-style=brutal] .hist .hg{border:2.5px solid var(--edge);border-radius:0}
[data-style=brutal] .hist .hg.sel{border-color:var(--accent);box-shadow:var(--hard)}
[data-style=brutal] .kp button{border-radius:0;box-shadow:2px 2px 0 var(--edge)}
[data-style=brutal] .kp .op{background:var(--accent2);color:#111}
[data-style=brutal] .kp .ok,[data-style=brutal] .kp .fillkey{background:var(--accent);color:#111}
[data-style=brutal] .pc{border:2.5px solid var(--edge);border-radius:0;box-shadow:2px 2px 0 var(--edge)}
[data-style=brutal] .pc.sel,[data-style=brutal] .pc.sel small{color:#111}
[data-style=brutal] .pc.taken{box-shadow:none}
[data-style=brutal] .pc.seven.suited.sel{outline:0;box-shadow:var(--hard)}
[data-style=brutal] .ci{border-color:var(--ink);box-shadow:2px -2px 0 -.5px var(--card),2px -2px 0 1px var(--ink)}
[data-style=brutal] .sheet-in{border:2.5px solid var(--edge);border-bottom:0;border-radius:0}
[data-style=brutal] .sheet.menu .sheet-in{border-bottom:2.5px solid var(--edge);border-radius:0;box-shadow:var(--hard)}
[data-style=brutal] .dlg-in{border:2.5px solid var(--edge);border-radius:0;box-shadow:6px 6px 0 var(--edge)}
[data-style=brutal] .toast{border-radius:0;border:2.5px solid #111;box-shadow:3px 3px 0 #111}

/* ============ 5 · VERRE : dégradé chaud, cartes translucides floutées ============ */
:root[data-style=verre]{--bg:rgba(255,255,255,.4);--bar:#ffb36b;--card:rgba(255,255,255,.55);--solid:#fdeaf0;--ink:#2a1530;--muted:#5a4260;--line:rgba(255,255,255,.5);--edge:rgba(255,255,255,.75);
  --accent:#9a2d0b;--on-accent:#fff;--accent2:rgba(255,220,200,.8);--on-accent2:#7a2600;--ok:#1d6b30;--warn:#a50f28;
  --pri:linear-gradient(135deg,#c43d12,#b8275a);--sh:0 8px 24px rgba(80,20,60,.15);
  --grad:linear-gradient(160deg,#ffb36b 0%,#ff6f91 45%,#9b6dff 100%);color-scheme:light}
@media (prefers-color-scheme:dark){:root[data-style=verre]:not([data-theme="light"]){--bg:rgba(255,255,255,.08);--bar:#3a1450;--card:rgba(30,20,45,.5);--solid:#2a1838;--ink:#fff;--muted:#cdbfdb;--line:rgba(255,255,255,.12);--edge:rgba(255,255,255,.22);
  --accent:#ff9466;--on-accent:#2a1838;--accent2:rgba(255,122,69,.22);--on-accent2:#ffc2a6;--ok:#7ee08f;--warn:#ffa3ab;
  --sh:0 8px 24px rgba(0,0,0,.35);--grad:linear-gradient(160deg,#3a1450 0%,#5a1e4f 45%,#14264f 100%);color-scheme:dark}}
:root[data-style=verre][data-theme="dark"]{--bg:rgba(255,255,255,.08);--bar:#3a1450;--card:rgba(30,20,45,.5);--solid:#2a1838;--ink:#fff;--muted:#cdbfdb;--line:rgba(255,255,255,.12);--edge:rgba(255,255,255,.22);
  --accent:#ff9466;--on-accent:#2a1838;--accent2:rgba(255,122,69,.22);--on-accent2:#ffc2a6;--ok:#7ee08f;--warn:#ffa3ab;
  --sh:0 8px 24px rgba(0,0,0,.35);--grad:linear-gradient(160deg,#3a1450 0%,#5a1e4f 45%,#14264f 100%);color-scheme:dark}
:root[data-style=verre]{min-height:100%;background:var(--grad) fixed #ff6f91}
:root[data-style=verre] body{background:transparent}
[data-style=verre] header h1{font-size:1.3rem}
[data-style=verre] #gear{border-radius:50%;width:42px;height:42px;padding:0;background:var(--bg);border:1px solid var(--edge)}
[data-style=verre] :is(.card,.bar,#gear,.kp button,.pc){-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
[data-style=verre] .card{border:1px solid var(--edge);border-radius:22px;box-shadow:var(--sh)}
[data-style=verre] .card h2{text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink)}
[data-style=verre] .hero{border:1px solid var(--edge)}
[data-style=verre] .remind{border:1px solid var(--edge);background:var(--accent2)}
[data-style=verre] button{border-radius:999px;background:var(--bg);border:1px solid var(--edge)}
[data-style=verre] button.primary{background:var(--pri);border:0;color:#fff;box-shadow:0 6px 16px rgba(226,65,106,.4)}
[data-style=verre] button.primary:disabled{box-shadow:none}
[data-style=verre] button.secondary{background:var(--accent2);color:var(--on-accent2)}
[data-style=verre] :is(input,select,.entry .f,.entry .pick){border-radius:14px;border:1px solid var(--edge);background:var(--bg)}
[data-style=verre] select option{background:var(--solid);color:var(--ink)}
[data-style=verre] .entry .f.act{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,69,.3)}
[data-style=verre] .entry .pick.on{background:var(--accent2)}
[data-style=verre] .bar{background:var(--card);border-top:1px solid var(--edge)}
[data-style=verre] .chip{border-radius:999px;border:1px solid var(--line)}
[data-style=verre] .who div{border-radius:14px}
[data-style=verre] .suits button{border-radius:14px;border:1px solid rgba(255,255,255,.6)}
[data-style=verre] .suits button.on{border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
[data-style=verre] td{border-bottom-color:var(--line)}
[data-style=verre] tfoot .tot td{border-top:1px solid var(--edge)}
[data-style=verre] ol.rank li{border-bottom-color:var(--line)}
[data-style=verre] .hist .hg{border-radius:18px}
[data-style=verre] .kp button{border-radius:16px;background:var(--card);border:1px solid var(--line)}
[data-style=verre] .kp .op{background:var(--accent2);color:var(--on-accent2)}
[data-style=verre] .kp .ok,[data-style=verre] .kp .fillkey{background:var(--pri);color:#fff;border:0}
[data-style=verre] .pc{border-radius:12px;background:var(--card);border:1px solid var(--edge)}
[data-style=verre] .pc.sel{background:var(--pri);color:#fff;border-color:transparent}
[data-style=verre] .pc.sel small{color:#fff}
[data-style=verre] .sheet-in{background:var(--solid);border-radius:22px 22px 0 0}
[data-style=verre] .sheet.menu .sheet-in{border-radius:20px}
[data-style=verre] .dlg-in{background:var(--solid);border-radius:22px}
[data-style=verre] .foot,[data-style=verre] .foot .lnk{color:var(--ink)}
[data-style=verre] .linkbtn{color:var(--ink)!important}
[data-style=verre] .toast{border-radius:16px}

/* ============ 6 · ARCADE : clair = écran LCD de console portable, sombre = néon ============ */
:root[data-style=arcade]{--bg:#b5c290;--card:#c4cfa1;--ink:#0f380f;--muted:#265026;--line:#8bac0f;--edge:#306230;
  --accent:#0f380f;--on-accent:#c4cfa1;--accent2:#8bac0f;--on-accent2:#0f380f;--ok:#0f380f;--warn:#7c1d1d;
  --glow:none;--pri-glow:none;--card-glow:none;
  --page:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px) #9bbc0f;color-scheme:light}
@media (prefers-color-scheme:dark){:root[data-style=arcade]:not([data-theme="light"]){--bg:#08061a;--card:#0d0b1e;--ink:#e8f7ff;--muted:#949ed0;--line:#26215a;--edge:#2de2e6;
  --accent:#ff2a6d;--on-accent:#0d0b1e;--accent2:#2a0f2f;--on-accent2:#ff5c8f;--ok:#3dff9a;--warn:#ff6b8f;
  --glow:0 0 8px currentColor;--pri-glow:0 0 14px rgba(255,42,109,.6);--card-glow:0 0 12px rgba(45,226,230,.25);
  --page:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 0,#1a1640,#05030f 70%) #05030f;color-scheme:dark}}
:root[data-style=arcade][data-theme="dark"]{--bg:#08061a;--card:#0d0b1e;--ink:#e8f7ff;--muted:#949ed0;--line:#26215a;--edge:#2de2e6;
  --accent:#ff2a6d;--on-accent:#0d0b1e;--accent2:#2a0f2f;--on-accent2:#ff5c8f;--ok:#3dff9a;--warn:#ff6b8f;
  --glow:0 0 8px currentColor;--pri-glow:0 0 14px rgba(255,42,109,.6);--card-glow:0 0 12px rgba(45,226,230,.25);
  --page:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 0,#1a1640,#05030f 70%) #05030f;color-scheme:dark}
/* VT323 est une police étroite : base agrandie à 20px (toutes les tailles en rem suivent) */
:root[data-style=arcade]{min-height:100%;background:var(--page) fixed}
:root[data-style=arcade],:root[data-style=arcade] body{font:20px/1.15 VT323,ui-monospace,monospace}
:root[data-style=arcade] body{background:transparent}
[data-style=arcade] header{background:var(--card);border-bottom:2px solid var(--edge);margin-bottom:14px}
[data-style=arcade] header h1{font-size:1.6rem;font-weight:400;letter-spacing:1px;color:var(--accent);text-shadow:var(--glow)}
[data-style=arcade] header h1 span{color:var(--edge)}
[data-style=arcade] #gear{border:2px solid var(--edge);border-radius:0;padding:2px 6px;font-size:1.1rem}
[data-style=arcade] .card{border:2px solid var(--edge);border-radius:0;box-shadow:var(--card-glow)}
[data-style=arcade] .card h2{font-size:1.1rem;font-weight:400;letter-spacing:2px;color:var(--edge);text-shadow:var(--glow)}
[data-style=arcade] .card h2 em{color:var(--accent)}
[data-style=arcade] .hero{border-color:var(--accent)}
[data-style=arcade] .remind{border:2px dashed var(--accent)}
/* VT323 n'a qu'une graisse : pas de faux gras */
[data-style=arcade] *{font-weight:400!important}
[data-style=arcade] button{border-radius:0;border:2px solid var(--edge);background:transparent;font-weight:400;letter-spacing:1px;text-transform:uppercase}
[data-style=arcade] button.primary{background:var(--accent);border-color:var(--accent);box-shadow:var(--pri-glow)}
[data-style=arcade] button.primary:disabled{box-shadow:none}
[data-style=arcade] button.secondary{background:var(--accent2);border-color:var(--on-accent2)}
[data-style=arcade] .counter button{border-radius:0}
[data-style=arcade] :is(input,select,.entry .f,.entry .pick){border-radius:0;border:2px solid var(--edge);background:transparent;color:var(--ink)}
[data-style=arcade] select{background:var(--card)}
[data-style=arcade] .entry .f{font-size:1.3rem}
[data-style=arcade] .entry .f.act{outline:0;border-color:var(--accent);color:var(--accent);box-shadow:var(--glow)}
[data-style=arcade] .entry .pick.on{background:var(--accent2)}
[data-style=arcade] .caret{background:var(--accent)}
[data-style=arcade] .bar{background:var(--card);border-top:2px solid var(--edge)}
[data-style=arcade] .chip{border-radius:0;border:1px solid var(--edge);background:transparent}
[data-style=arcade] .chip.warn{border-color:var(--accent);background:transparent}
[data-style=arcade] .who div{border:1px dashed var(--edge);border-radius:0;background:transparent}
[data-style=arcade] .suits button{border-radius:0;text-transform:none}
[data-style=arcade] .suits button.on{border-color:var(--ink);box-shadow:var(--glow)}
[data-style=arcade] .suits #roll{border:2px solid var(--edge)}
[data-style=arcade] td{border-bottom:1px dashed var(--line)}
[data-style=arcade] tfoot .tot td{border-top:2px solid var(--edge);color:var(--accent);text-shadow:var(--glow);font-weight:400}
[data-style=arcade] ol.rank li{border-bottom:1px dashed var(--line)}
[data-style=arcade] .hist .hg{border:1px dashed var(--line);border-radius:0}
[data-style=arcade] .hist .hg.sel{border:2px solid var(--accent);box-shadow:var(--pri-glow)}
[data-style=arcade] ol.rank .pt{color:var(--accent)}
[data-style=arcade] .kp button{border-radius:0;font-size:1.35rem;text-transform:none}
[data-style=arcade] .kp .op{border-color:var(--accent);color:var(--accent);background:transparent}
[data-style=arcade] .kp .ok,[data-style=arcade] .kp .fillkey{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
[data-style=arcade] .kp .ok{font-size:1.1rem}
[data-style=arcade] .kp .fillkey{font-size:.85rem}
[data-style=arcade] .pc{border-radius:0;border:2px solid var(--edge);background:transparent;text-transform:none}
[data-style=arcade] .pc.sel{background:var(--accent);border-color:var(--accent);box-shadow:var(--pri-glow)}
[data-style=arcade] .pc.seven:not(.suited){border-color:var(--ink)}
[data-style=arcade] .big{text-shadow:var(--glow)}
[data-style=arcade] .sheet-in{border:2px solid var(--edge);border-bottom:0;border-radius:0}
[data-style=arcade] .sheet.menu .sheet-in{border-bottom:2px solid var(--edge);border-radius:0}
[data-style=arcade] .sheet-in button{text-transform:none}
[data-style=arcade] .dlg-in{border:2px solid var(--edge);border-radius:0;box-shadow:var(--card-glow)}
[data-style=arcade] .toast{border-radius:0}
[data-style=arcade] .foot,[data-style=arcade] .foot .lnk,[data-style=arcade] .linkbtn{color:var(--ink)!important}

/* ============ 7 · CONTRASTE ÉLEVÉ (malvoyants) : noir et blanc purs, bordures épaisses, sélection signalée par ✓ ============
   Contrastes visés AAA (≥ 7:1) pour le texte. Familles du dé : fonds foncés et écriture blanche, dans les deux thèmes. */
:root[data-style=contraste]{--bg:#fff;--card:#fff;--field:#fff;--ink:#000;--muted:#333;--line:#000;--edge:#000;
  --accent:#8a2c00;--on-accent:#fff;--accent2:#ffd60a;--on-accent2:#000;--ok:#00632a;--warn:#a50000;color-scheme:light;
  --s0-fg:#fff;--s0-bg:#0b3d91;--s0-tx:#fff;--s1-fg:#fff;--s1-bg:#a3001b;--s1-tx:#fff;--s2-fg:#fff;--s2-bg:#5a1a8a;--s2-tx:#fff;--s3-fg:#fff;--s3-bg:#0d5c2a;--s3-tx:#fff}
@media (prefers-color-scheme:dark){:root[data-style=contraste]:not([data-theme="light"]){--bg:#000;--card:#000;--field:#000;--ink:#fff;--muted:#d9d9d9;--line:#fff;--edge:#fff;
  --accent:#ffb27a;--on-accent:#000;--accent2:#ffd60a;--on-accent2:#000;--ok:#7dff9a;--warn:#ff9e9e;color-scheme:dark}}
:root[data-style=contraste][data-theme="dark"]{--bg:#000;--card:#000;--field:#000;--ink:#fff;--muted:#d9d9d9;--line:#fff;--edge:#fff;
  --accent:#ffb27a;--on-accent:#000;--accent2:#ffd60a;--on-accent2:#000;--ok:#7dff9a;--warn:#ff9e9e;color-scheme:dark}
[data-style=contraste] header{border-bottom:2px solid var(--edge);margin-bottom:14px}
[data-style=contraste] :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[data-style=contraste] .card{border:2px solid var(--edge)}
[data-style=contraste] .hero{border-width:3px}
[data-style=contraste] .card h2{color:var(--ink);font-weight:700}
[data-style=contraste] :is(.remind,.newbadges){border:3px solid var(--edge)}
[data-style=contraste] button{border:2px solid var(--edge);background:var(--card);font-weight:600}
[data-style=contraste] button.primary{border-color:var(--accent)}
[data-style=contraste] button.secondary{border-color:var(--on-accent2)}
[data-style=contraste] button:disabled{opacity:.55;border-style:dashed}
[data-style=contraste] :is(.lnk,.linkbtn,button.more){text-decoration:underline}
[data-style=contraste] :is(input,select,.entry .f,.entry .pick){border:2px solid var(--edge);background:var(--field)}
[data-style=contraste] input:focus,[data-style=contraste] .entry .f.act{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--edge)}
[data-style=contraste] .entry .pick.on{background:var(--accent2);color:var(--on-accent2)}
[data-style=contraste] .bar{border-top:2px solid var(--edge)}
[data-style=contraste] .chip{border:1px solid var(--edge);background:var(--card)}
[data-style=contraste] .chip.warn{background:var(--accent2);color:var(--on-accent2);font-weight:600}
[data-style=contraste] .who div{border:1px solid var(--edge);background:var(--card)}
[data-style=contraste] .who small{font-size:.8rem}
[data-style=contraste] .suits button{position:relative;border:2px solid var(--edge)}
[data-style=contraste] .suits button.on{transform:none;outline:3px solid var(--edge);outline-offset:2px}
[data-style=contraste] .suits button.off{opacity:.5}
[data-style=contraste] .suits small{font-size:.75rem}
[data-style=contraste] tfoot .tot td{border-top:3px solid var(--edge)}
[data-style=contraste] .hist .hg{border:2px solid var(--edge)}
[data-style=contraste] .hist .hg.sel{border:3px solid var(--accent)}
[data-style=contraste] .hist.has .hg:not(.sel){opacity:.65}
[data-style=contraste] .pc{border:2px solid var(--edge)}
[data-style=contraste] .pc small{font-size:.65rem}
/* carte déjà attribuée : hachurée et marquée « pris », moins estompée que dans les autres styles */
[data-style=contraste] td .md.same{opacity:.6}
[data-style=contraste] .pc.taken{opacity:.6;background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--ink) 40%,transparent) 6px 8px)}
[data-style=contraste] .pc.taken small{font-size:0}
[data-style=contraste] .pc.taken small::after{content:'pris';font-size:.65rem}
[data-style=contraste] .pc.seven:not(.suited){border-color:var(--edge)}
[data-style=contraste] .pc.seven.suited{border:2px solid var(--edge)}
[data-style=contraste] .pc.seven.suited.sel{outline:3px solid var(--edge);outline-offset:2px}
[data-style=contraste] .pc.seven.suited.sel::after{background:var(--ink);color:var(--bg)}
[data-style=contraste] :is(.kpis div,dl.stats div,.badge,.nb,.gb,.rl,.feat){border:1px solid var(--edge)}
[data-style=contraste] .ci{border-color:var(--ink);box-shadow:2px -2px 0 -.5px var(--card),2px -2px 0 1px var(--ink)}
[data-style=contraste] .sheet-in{border:2px solid var(--edge);border-bottom:0}
[data-style=contraste] .sheet.menu .sheet-in{border-bottom:2px solid var(--edge)}
[data-style=contraste] .dlg-in{border:2px solid var(--edge)}
[data-style=contraste] .toast{border:2px solid var(--ink)}
[data-style=contraste] :is(.grip,.prof){border:0;background:none}
[data-style=contraste] .prof{border-bottom:1px solid var(--line)}

/* ============ 8 · DALTONIEN : bleu et orange (la paire sûre pour toutes les formes de daltonisme), jamais rouge contre vert ============
   Fond gris-bleu neutre, couleur principale bleue, secondaire orange. Familles du dé : palette Okabe-Ito (bleu, vermillon,
   jaune, rose), distinctes aussi par leur clarté. Juste / faux : bleu / vermillon. */
:root[data-style=daltonien]{--bg:#f3f6f9;--card:#fff;--field:#fff;--ink:#14202b;--muted:#4f5d6b;--line:#d5dde5;--edge:#b7c3cf;
  --accent:#0060a8;--on-accent:#fff;--accent2:#e69f00;--on-accent2:#14202b;--ok:#0060a8;--warn:#b84e00;color-scheme:light;
  --s0-fg:#fff;--s0-bg:#0072b2;--s0-tx:#fff;--s1-fg:#fff;--s1-bg:#b84e00;--s1-tx:#fff;--s2-fg:#000;--s2-bg:#f0e442;--s2-tx:#000;--s3-fg:#000;--s3-bg:#cc79a7;--s3-tx:#000}
@media (prefers-color-scheme:dark){:root[data-style=daltonien]:not([data-theme="light"]){--bg:#11161c;--card:#1b232c;--field:#11161c;--ink:#e8eef4;--muted:#a3b1bf;--line:#2c3845;--edge:#3d4c5c;
  --accent:#56b4e9;--on-accent:#0b1117;--accent2:#e69f00;--on-accent2:#0b1117;--ok:#56b4e9;--warn:#ff8a5c;color-scheme:dark}}
:root[data-style=daltonien][data-theme="dark"]{--bg:#11161c;--card:#1b232c;--field:#11161c;--ink:#e8eef4;--muted:#a3b1bf;--line:#2c3845;--edge:#3d4c5c;
  --accent:#56b4e9;--on-accent:#0b1117;--accent2:#e69f00;--on-accent2:#0b1117;--ok:#56b4e9;--warn:#ff8a5c;color-scheme:dark}
[data-style=daltonien] .suits button{position:relative}

/* ---------- styles d'accessibilité : famille du dé choisie marquée d'un ✓, pas seulement par sa bordure ---------- */
:is([data-style=contraste],[data-style=daltonien]) .suits button.on::after{content:'✓';position:absolute;top:-9px;right:-7px;width:22px;height:22px;line-height:22px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:.85rem;font-weight:800;box-shadow:0 0 0 2px var(--card)}
:is([data-style=contraste],[data-style=daltonien]) .pc.sel:not(.seven)::after{content:'✓';position:absolute;top:3px;right:6px;font-size:.75rem;line-height:1}