/* qg-theme.css — Apparence commune des pages du QG : mêmes polices et couleurs que l'Atelier.
   Chargé APRÈS le <style> de chaque page : il remplace ses couleurs et ses polices, sans toucher à sa mise en page ni à son fonctionnement. */
:root {
  --bg: #ECEFF2; --carte: #FFFFFF; --texte: #141B22; --doux: #5A6672; --bord: #D5DBE1; --accent: #2346A8;
  /* mêmes noms que l'Atelier, pour la barre de menu */
  --surface: #FFFFFF; --surface-2: #F5F7F9; --ink: #141B22; --muted: #5A6672; --line: #D5DBE1;
  --qg-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --qg-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --qg-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --qg-ombre: 0 1px 2px rgba(20, 27, 34, .06), 0 8px 24px rgba(20, 27, 34, .06);
  color-scheme: light;
}
body { font-family: var(--qg-body); }
main { padding-top: 8px; }
main h1 { font: 800 clamp(24px, 3.2vw, 32px)/1.1 var(--qg-display); letter-spacing: -.01em; margin: 16px 0 16px; text-wrap: balance; }
main h1 small { font: 400 14px var(--qg-body); letter-spacing: 0; }
main h2 { font-family: var(--qg-display); font-weight: 600; letter-spacing: -.005em; }
.carte { border-radius: 12px; box-shadow: var(--qg-ombre); }
button, select, input, textarea { border-radius: 8px; }
code { font-family: var(--qg-mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Design du module sur le site qui l'affiche (choisi dans l'Atelier, posé par qg-nav.js) ──
   data-plateforme + --marque : la couleur de la plateforme (s'HUB, MR VAPE…) ; data-apparence : sobre, douce ou vive. */
html[data-plateforme] { --accent: color-mix(in srgb, var(--marque) 84%, #000); }
html[data-plateforme] .qgb-logo b { background: var(--marque); color: #fff; }

html[data-apparence="douce"] {
  --bg: color-mix(in srgb, var(--marque, #2346A8) 6%, #FBFAF7); --bord: color-mix(in srgb, var(--marque, #2346A8) 12%, #E7E4DD);
  --line: var(--bord); --surface-2: color-mix(in srgb, var(--marque, #2346A8) 5%, #fff);
  --qg-ombre: 0 1px 3px rgba(20, 27, 34, .05), 0 14px 34px color-mix(in srgb, var(--marque, #2346A8) 11%, transparent);
}
html[data-apparence="douce"] .carte { border-color: transparent; border-radius: 22px; }
html[data-apparence="douce"] :is(button, select, input, textarea) { border-radius: 14px; }
html[data-apparence="douce"] main h1 { color: var(--accent); }

html[data-apparence="vive"] { --bg: #EEF0F3; }
html[data-apparence="vive"] main h1 { color: #fff; padding: 22px 20px; border-radius: 18px;
  background: linear-gradient(135deg, var(--marque, #2346A8), color-mix(in srgb, var(--marque, #2346A8) 55%, #000)); }
html[data-apparence="vive"] main h1 small { color: rgba(255, 255, 255, .85); }
html[data-apparence="vive"] .carte { border: 0; border-top: 4px solid var(--marque, #2346A8); border-radius: 14px; }
html[data-apparence="vive"] .qgb { background: color-mix(in srgb, var(--marque, #2346A8) 86%, #000); border-color: transparent; color: #fff; }
html[data-apparence="vive"] .qgb .qgb-nav a, html[data-apparence="vive"] .qgb .qgb-nom { color: rgba(255, 255, 255, .82); }
html[data-apparence="vive"] .qgb .qgb-nav a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
html[data-apparence="vive"] .qgb .qgb-nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .22); }
html[data-apparence="vive"] .qgb .qgb-logo b { background: #fff; color: var(--marque, #2346A8); }
html[data-apparence="vive"] .qgb .qgb-sortir { color: #fff; border-color: rgba(255, 255, 255, .45); }