:root,:root[data-theme="dark"]{color-scheme:dark;--bg:#0b0c0e;--panel:#15171b;--ink:#f2f1ec;--muted:#9c9ca3;--accent:#d3a44c;--line:#2a2e35;--soft:#1b1e23}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}:root[data-theme="light"]{color-scheme:light;--bg:#f7f6ff;--panel:#ffffff;--ink:#101a43;--muted:#575f83;--accent:#6a49e6;--line:#dedcf0;--soft:#f0effb}header,footer{max-width:1080px;margin:auto;padding:24px;display:flex;gap:24px;align-items:center;justify-content:space-between}header>a{font-size:24px;font-weight:850;letter-spacing:.06em;text-decoration:none}header span,footer{color:var(--muted)}main{max-width:1030px;margin:auto;padding:24px}h1{font-size:clamp(32px,5vw,58px);letter-spacing:-.04em;line-height:1.1;margin:10px 0 20px}h2{font-size:25px;line-height:1.25;margin:0 0 18px}p{max-width:85ch}.lead{font-size:20px;color:var(--muted);max-width:70ch}.eyebrow{font-size:14px;letter-spacing:.12em;color:var(--accent);font-weight:750}nav{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0}nav a{padding:9px 15px;border:1px solid var(--line);border-radius:10px;text-decoration:none}a{color:var(--accent)}section{padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:18px;margin:20px 0}section p{color:var(--muted)}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}label{display:flex;flex-direction:column;gap:7px;margin:10px 0;font-size:15px;font-weight:600}input,textarea,button{font:inherit}input,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:var(--bg)}button{background:var(--accent);color:var(--bg);border:0;border-radius:9px;padding:12px 18px;font-weight:700;cursor:pointer;margin:12px 6px 12px 0}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}output{display:block;padding:16px;border-radius:10px;background:var(--soft);margin-top:12px;overflow:auto}output:empty{display:none}.error{color:#ffaca5}:root[data-theme="light"] .error{color:#b8324a}summary{cursor:pointer;font-weight:650;padding:12px 0;color:var(--ink)}details{border-top:1px solid var(--line);margin-top:12px}.formula{font-family:ui-monospace,monospace}.hand-grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px}.hand-grid button{padding:8px 0;margin:0;font-size:14px;min-height:40px;background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:5px}.hand-grid button.pair{border-color:var(--accent)}.hand-grid button.suited{background:var(--bg)}.hand-grid button.selected{background:var(--accent);color:var(--bg)}table{border-collapse:collapse;min-width:100%;text-align:left}th,td{padding:9px;border-bottom:1px solid var(--line);white-space:nowrap}.tag{font-weight:700;color:var(--accent)}@media(max-width:620px){main{padding:12px}header,footer{padding:16px;gap:10px;flex-wrap:wrap}header span{display:none}section{padding:18px}.fields{grid-template-columns:1fr}.hand-grid{gap:2px;overflow:auto}.hand-grid button{font-size:12px;min-height:34px;border-radius:3px}h2{font-size:22px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Selecteur de theme : meme composant que dans l'application, pour que
   l'atelier ne ressemble pas a un autre produit. */
.theme-switch{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);
  background:var(--soft);border-radius:999px;padding:2px}
.theme-switch button{border:0;background:transparent;color:var(--muted);font:inherit;
  font-size:12px;font-weight:600;line-height:1;padding:7px 11px;border-radius:999px;
  cursor:pointer;min-height:32px}
.theme-switch button[aria-pressed="true"]{background:var(--accent);color:var(--bg)}
.theme-switch button:hover{color:var(--ink)}
:root :is(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* Selecteur de langue : meme pastille que le theme, pose juste avant
   lui dans l'en-tete. Codes a deux lettres, pas de drapeaux. */
.lang-switch{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);
  background:var(--soft);border-radius:999px;padding:2px;margin-right:8px}
.lang-switch button{border:0;background:transparent;color:var(--muted);font:inherit;
  font-size:12px;font-weight:600;line-height:1;letter-spacing:.02em;
  padding:6px 9px;border-radius:999px;cursor:pointer;min-height:30px}
.lang-switch button[aria-pressed="true"]{background:var(--accent);color:var(--bg)}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button:focus-visible,.theme-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:700px){.lang-switch{margin-right:6px}.lang-switch button{padding:6px 7px}}