/* ═══════════════════════════════════════════════════════════════════════
 * themes.css — chaque thème change non seulement couleurs/fonts mais
 * aussi LAYOUT : largeur, grille (1/2/3/5 col), padding, taille titles,
 * border-radius, hiérarchie visuelle.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── Web fonts self-hosted ──────────────────────────────────────────── */
@font-face { font-family: 'VT323';            font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/vt323-400.ttf') format('truetype'); }
@font-face { font-family: 'Share Tech Mono';  font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sharetechmono-400.ttf') format('truetype'); }
@font-face { font-family: 'Orbitron';         font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/orbitron-400.ttf') format('truetype'); }
@font-face { font-family: 'Orbitron';         font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/orbitron-700.ttf') format('truetype'); }
@font-face { font-family: 'Crimson Text';     font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/crimsontext-400.ttf') format('truetype'); }
@font-face { font-family: 'Crimson Text';     font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/crimsontext-700.ttf') format('truetype'); }
@font-face { font-family: 'Archivo Black';    font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/archivoblack-400.ttf') format('truetype'); }
@font-face { font-family: 'Inter';            font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.ttf') format('truetype'); }
@font-face { font-family: 'Inter';            font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.ttf') format('truetype'); }
@font-face { font-family: 'Press Start 2P';   font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/pressstart2p-400.ttf') format('truetype'); }

/* ─── Theme switcher UI (commun) ─────────────────────────────────────── */
.theme-switcher {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.theme-label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-right: 6px; }
.theme-form { display: inline; margin: 0; }
.theme-btn {
  background: none; border: 1px solid var(--border); color: var(--text);
  padding: 3px 10px; font-family: inherit; font-size: 11px; cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
}
.theme-btn:hover { color: var(--bright); border-color: var(--cyan); }
.theme-btn.theme-active { background: var(--surface); color: var(--green); border-color: var(--green); }

/* ─── Isolation tile (commun) ────────────────────────────────────────── */
.iso-status { display: inline-block; padding: 2px 9px; font-size: 12px; border: 1px solid; margin-left: 8px; }
.iso-on  { color: var(--red);   border-color: var(--red);   background: rgba(248,81,73,.10); }
.iso-off { color: var(--green); border-color: var(--green); background: rgba(63,185,80,.10); }
.iso-note { color: var(--dim); font-size: 11px; margin-top: 8px; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════
 *  THÈME 1 — GitHub Dark (default, layout standard 3-col)
 * ═══════════════════════════════════════════════════════════════════════ */
body.theme-github-dark {
  --bg: #0d1117; --surface: #161b22; --border: #30363d;
  --text: #8b949e; --bright: #e6edf3;
  --green: #3fb950; --cyan: #58a6ff; --yellow: #d29922; --red: #f85149; --dim: #6e7681;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  THÈME 2 — Amber Terminal (1 colonne, dense, VT323 17px, scanlines)
 *  Layout : étroit (920px), tout vertical, panels avec bord épais
 * ═══════════════════════════════════════════════════════════════════════ */
body.theme-amber {
  --bg: #1a0f00; --surface: #2a1d05; --border: #6c4818;
  --text: #ffa030; --bright: #ffd070;
  --green: #b0ff20; --cyan: #ffc858; --yellow: #ffd040; --red: #ff5020; --dim: #a06820;
  font-family: 'VT323', 'Courier New', monospace; font-size: 18px; letter-spacing: .02em;
  text-shadow: 0 0 3px rgba(255,170,0,.4);
}
body.theme-amber .wrap { max-width: 920px; padding: 24px 20px; }
body.theme-amber .grid-3 { grid-template-columns: 1fr; gap: 12px; }
body.theme-amber .grid-2 { grid-template-columns: 1fr; gap: 12px; }
body.theme-amber .panel { border-width: 2px; margin-bottom: 14px; }
body.theme-amber .panel-title { font-size: 17px; letter-spacing: .15em; padding: 9px 16px; }
body.theme-amber .panel-body  { padding: 18px; }
body.theme-amber .stat-value  { font-size: 42px; letter-spacing: 0; }
body.theme-amber pre.logo     { font-size: 14px; line-height: 1.3; }
body.theme-amber nav a        { font-size: 17px; padding: 9px 24px; }
body.theme-amber input,
body.theme-amber button       { font-family: 'VT323', monospace; font-size: 16px; }
body.theme-amber th, body.theme-amber td { font-size: 15px; padding: 8px 10px; }
body.theme-amber::after {
  content: ''; position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,170,0,.05) 2px, rgba(255,170,0,.05) 3px);
  pointer-events: none; z-index: 9999; mix-blend-mode: screen;
}
body.theme-amber .stat-value,
body.theme-amber pre.logo { text-shadow: 0 0 6px rgba(255,170,0,.7), 0 0 16px rgba(255,170,0,.3); }

/* ═══════════════════════════════════════════════════════════════════════
 *  THÈME 3 — Matrix CRT (2 colonnes asym., vignette + scanlines + curve)
 *  Layout : 2-col, panels glow, fond noir profond avec vignette radiale
 * ═══════════════════════════════════════════════════════════════════════ */
body.theme-matrix {
  --bg: #000; --surface: #051805; --border: #155515;
  --text: #30d030; --bright: #80ff80;
  --green: #00ff41; --cyan: #00ffaa; --yellow: #aaff20; --red: #ff4080; --dim: #2a8a2a;
  font-family: 'Share Tech Mono', monospace;
  text-shadow: 0 0 4px rgba(0,255,65,.55);
}
body.theme-matrix .wrap { max-width: 1000px; padding: 28px 20px; }
body.theme-matrix .grid-3 { grid-template-columns: 1fr 2fr; gap: 14px; }  /* asymétrique */
body.theme-matrix .grid-2 { grid-template-columns: 2fr 1fr; gap: 14px; }
body.theme-matrix .panel {
  border: 1px solid rgba(0,255,65,.5);
  border-radius: 6px;  /* slight CRT curve */
  box-shadow: 0 0 14px rgba(0,255,65,.12), inset 0 0 10px rgba(0,255,65,.04);
}
body.theme-matrix .panel-title {
  text-transform: uppercase; letter-spacing: .12em;
  border-bottom: 1px solid rgba(0,255,65,.5);
}
body.theme-matrix .stat-value,
body.theme-matrix pre.logo {
  text-shadow: 0 0 4px currentColor, 0 0 12px currentColor, 0 0 24px rgba(0,255,65,.4);
}
body.theme-matrix .btn { font-family: 'Share Tech Mono', monospace; }
body.theme-matrix::before {
  content: ''; position: fixed; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(0,255,65,.03) 18px, rgba(0,255,65,.03) 19px),
    repeating-linear-gradient(0deg,  transparent 0, transparent 2px,  rgba(0,0,0,.3) 2px, rgba(0,0,0,.3) 3px);
  pointer-events: none; z-index: 9999;
}
body.theme-matrix::after {
  content: ''; position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.4) 85%, rgba(0,0,0,.85) 100%);
  pointer-events: none; z-index: 10000;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  THÈME 4 — Synthwave Cinematic (1 colonne, titles ÉNORMES, grille bg)
 *  Layout : large, panels pleine largeur, hiérarchie typographique forte
 * ═══════════════════════════════════════════════════════════════════════ */
body.theme-synthwave {
  --bg: #1a0b2e; --surface: rgba(45,18,75,.85); --border: #6d3aa2;
  --text: #c8a8ff; --bright: #ff79f0;
  --green: #50fa7b; --cyan: #8be9fd; --yellow: #f1fa8c; --red: #ff5577; --dim: #9b7ec9;
  font-family: 'Share Tech Mono', monospace;
  background:
    linear-gradient(180deg, rgba(26,11,46,0) 0%, rgba(45,10,90,.5) 70%, rgba(80,20,130,.8) 100%),
    repeating-linear-gradient(0deg,  transparent 0, transparent 38px, rgba(255,121,240,.08) 38px, rgba(255,121,240,.08) 39px),
    repeating-linear-gradient(90deg, transparent 0, transparent 38px, rgba(139,233,253,.06) 38px, rgba(139,233,253,.06) 39px),
    #1a0b2e;
  background-attachment: fixed;
}
body.theme-synthwave .wrap { max-width: 1100px; padding: 32px 24px; }
body.theme-synthwave .grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
body.theme-synthwave .grid-2 { grid-template-columns: 1fr; gap: 20px; }
body.theme-synthwave .panel {
  background: rgba(45,18,75,.55); backdrop-filter: blur(2px);
  border: 1px solid rgba(255,121,240,.45);
  box-shadow: 0 0 22px rgba(255,121,240,.15), inset 0 0 14px rgba(139,233,253,.05);
  margin-bottom: 22px;
}
body.theme-synthwave .panel-title {
  font-family: 'Orbitron', sans-serif; font-weight: 700;
  font-size: 18px; text-transform: uppercase; letter-spacing: .22em;
  background: linear-gradient(90deg, rgba(45,18,75,.9) 0%, rgba(80,30,120,.7) 100%);
  border-bottom: 1px solid rgba(255,121,240,.4);
  color: #ff79f0;
  text-shadow: 0 0 8px rgba(255,121,240,.7);
  padding: 16px 22px;
}
body.theme-synthwave .panel-body { padding: 22px; }
body.theme-synthwave .stat-value {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 44px;
  text-shadow: 0 0 8px currentColor, 0 0 22px currentColor;
}
body.theme-synthwave pre.logo {
  font-size: 16px; line-height: 1.3;
  background: linear-gradient(90deg, #ff79f0 0%, #8be9fd 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
body.theme-synthwave nav a.active { color: #ff79f0; text-shadow: 0 0 6px rgba(255,121,240,.6); }
body.theme-synthwave .btn { text-transform: uppercase; letter-spacing: .12em; }

/* ═══════════════════════════════════════════════════════════════════════
 *  THÈME 5 — Paper Magazine (2 colonnes, serif italic, étroit, papier)
 *  Layout : 880px max, 2-col magazine, titles italic huge, séparateurs
 * ═══════════════════════════════════════════════════════════════════════ */
body.theme-paper {
  --bg: #f7f3e8; --surface: #ede5cf; --border: #c4b896;
  --text: #4a3f2a; --bright: #1a1408;
  --green: #3d6b2e; --cyan: #2a5a8a; --yellow: #8a5e08; --red: #a83838; --dim: #807058;
  font-family: 'Crimson Text', Georgia, serif; font-size: 17px; line-height: 1.6;
}
body.theme-paper .wrap { max-width: 880px; padding: 44px 36px; }
body.theme-paper .grid-3 { grid-template-columns: 1fr 1fr; gap: 28px; }
body.theme-paper .grid-2 { grid-template-columns: 1fr 1fr; gap: 28px; }
body.theme-paper .panel {
  border: 1px solid #c4b896; border-radius: 3px;
  background: rgba(255,252,240,.6);
  box-shadow: 0 2px 6px rgba(60,40,10,.08), 0 0 0 1px rgba(255,255,255,.5) inset;
  margin-bottom: 28px;
}
body.theme-paper .panel-title {
  background: transparent;
  border-bottom: 1px solid #c4b896;
  font-family: 'Crimson Text', serif;
  font-style: italic; font-weight: 400;
  font-size: 22px; letter-spacing: 0; text-transform: none;
  padding: 16px 22px 12px;
  color: #2a2418;
}
body.theme-paper .panel-title::before {
  content: '— '; color: #807058;
}
body.theme-paper .panel-body  { padding: 22px; }
body.theme-paper .stat-value  { font-weight: 700; font-size: 32px; letter-spacing: 0; }
body.theme-paper .stat-label { font-style: italic; text-transform: none; letter-spacing: 0; font-size: 13px; }
body.theme-paper pre.logo    { font-size: 8px; opacity: .35; line-height: 1.1; }
body.theme-paper nav {
  border: none; border-bottom: 1px solid #c4b896; border-top: 1px solid #c4b896;
  background: transparent; padding: 4px 0;
}
body.theme-paper nav a {
  font-family: 'Crimson Text', serif; padding: 6px 18px;
  border-right: 1px dashed #d4c8a8;
}
body.theme-paper nav a.active { background: #f4ecd4; color: #2a2418; font-weight: 700; font-style: italic; }
body.theme-paper input[type="text"], body.theme-paper input[type="password"] {
  background: #fff; border: 1px solid #c4b896; border-radius: 3px; font-family: 'Crimson Text', serif; font-size: 16px;
}
body.theme-paper .btn { border-radius: 3px; padding: 6px 18px; font-family: 'Crimson Text', serif; font-size: 14px; }
body.theme-paper .badge { border-radius: 3px; }
body.theme-paper th, body.theme-paper td { font-family: 'Crimson Text', serif; font-size: 14px; padding: 8px 12px; }
body.theme-paper th { font-style: italic; text-transform: none; letter-spacing: 0; }
body.theme-paper .progress-wrap { background: #e0d4ad; border-radius: 2px; }
body.theme-paper .progress-bar  { border-radius: 2px; }
body.theme-paper footer         { color: #807058; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════
 *  THÈME 6 — Brutalist (NOUVEAU - design industriel, 1 colonne, sharp)
 *  Layout : large 1200px, panels 1-col pleine largeur, bordures 4px noires,
 *  titres ENORMES uppercase fond contrasté, Archivo Black
 * ═══════════════════════════════════════════════════════════════════════ */
body.theme-brutalist {
  --bg: #f5f1e8; --surface: #ffffff; --border: #1a1a1a;
  --text: #1a1a1a; --bright: #000000;
  --green: #2e8540; --cyan: #1559a8; --yellow: #ffb300; --red: #d62828; --dim: #6a6a6a;
  font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.45;
  background: #f5f1e8;
}
body.theme-brutalist .wrap { max-width: 1200px; padding: 32px 24px; }
body.theme-brutalist .grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 0; margin-bottom: 0; }
body.theme-brutalist .grid-2 { grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 0; }
body.theme-brutalist .grid-3 .panel,
body.theme-brutalist .grid-2 .panel { margin-bottom: 0; }
body.theme-brutalist .grid-3 .panel + .panel,
body.theme-brutalist .grid-2 .panel + .panel { border-left: 0; }
body.theme-brutalist .panel {
  border: 4px solid #1a1a1a; border-radius: 0;
  background: #ffffff;
  box-shadow: 6px 6px 0 #1a1a1a;
  margin-bottom: 28px;
}
body.theme-brutalist .panel-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 26px; text-transform: uppercase; letter-spacing: -.02em;
  background: #1a1a1a; color: #f5f1e8;
  border-bottom: none; padding: 16px 22px;
  font-weight: 400;
}
body.theme-brutalist .panel-body { padding: 22px; }
body.theme-brutalist .stat-value {
  font-family: 'Archivo Black', sans-serif; font-size: 52px;
  letter-spacing: -.03em; line-height: 1;
}
body.theme-brutalist .stat-label { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; }
body.theme-brutalist pre.logo { display: none; }
body.theme-brutalist header > h1::before {
  content: 'RASPY';
  font-family: 'Archivo Black', sans-serif; font-size: 64px;
  display: block; letter-spacing: -.04em; color: #1a1a1a; margin-bottom: 8px;
}
body.theme-brutalist .logo-bar { display: none; }
body.theme-brutalist header::before {
  content: 'RASPY';
  font-family: 'Archivo Black', sans-serif; font-size: 72px;
  display: block; letter-spacing: -.04em; color: #1a1a1a; line-height: 1; margin-bottom: 16px;
}
body.theme-brutalist nav {
  border: 4px solid #1a1a1a; background: #ffb300;
}
body.theme-brutalist nav a {
  font-family: 'Archivo Black', sans-serif; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0; padding: 10px 20px; border-right: 4px solid #1a1a1a; color: #1a1a1a;
}
body.theme-brutalist nav a:hover { background: #1a1a1a; color: #ffb300; }
body.theme-brutalist nav a.active { background: #1a1a1a; color: #ffb300; }
body.theme-brutalist nav a.logout { color: #d62828; background: #fff; }
body.theme-brutalist .btn {
  border: 3px solid #1a1a1a; border-radius: 0; padding: 8px 18px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase;
  box-shadow: 3px 3px 0 #1a1a1a;
}
body.theme-brutalist .btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #1a1a1a; }
body.theme-brutalist .badge { border-radius: 0; border-width: 2px; font-weight: 700; padding: 2px 8px; }
body.theme-brutalist input[type="text"],
body.theme-brutalist input[type="password"] {
  border: 3px solid #1a1a1a; border-radius: 0; background: #fff;
  font-family: 'Inter', sans-serif; font-size: 14px;
}
body.theme-brutalist th, body.theme-brutalist td { font-family: 'Inter', sans-serif; padding: 8px 12px; border-bottom-color: #1a1a1a; }
body.theme-brutalist th { font-weight: 700; text-transform: uppercase; font-size: 11px; }
body.theme-brutalist .progress-wrap { background: #1a1a1a; height: 8px; border-radius: 0; }
body.theme-brutalist .progress-bar { height: 8px; border-radius: 0; }
body.theme-brutalist footer { border-top: 4px solid #1a1a1a; font-family: 'Inter', sans-serif; font-weight: 700; padding: 14px 0; }
body.theme-brutalist .theme-btn { border: 2px solid #1a1a1a; border-radius: 0; font-family: 'Inter', sans-serif; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
 *  THÈME 7 — Compact (NOUVEAU - dense info, 5 colonnes, font 11px)
 *  Layout : large 1400px, grids 5-col, padding minimal, tables denses,
 *  logo masqué, Inter 11px, style tmux/htop
 * ═══════════════════════════════════════════════════════════════════════ */
body.theme-compact {
  --bg: #1a1a1a; --surface: #252525; --border: #3a3a3a;
  --text: #b0b0b0; --bright: #f0f0f0;
  --green: #4ade80; --cyan: #60a5fa; --yellow: #fbbf24; --red: #f87171; --dim: #707070;
  font-family: 'Inter', system-ui, sans-serif; font-size: 11px; line-height: 1.35;
}
body.theme-compact .wrap { max-width: 1400px; padding: 10px 14px; }
body.theme-compact .grid-3 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 6px; }
body.theme-compact .grid-2 { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
body.theme-compact .panel { margin-bottom: 6px; border-width: 1px; }
body.theme-compact .panel-title { padding: 4px 8px; font-size: 10px; letter-spacing: .04em; }
body.theme-compact .panel-body  { padding: 6px 8px; }
body.theme-compact .stat-value  { font-size: 16px; font-weight: 700; letter-spacing: 0; }
body.theme-compact .stat-label  { font-size: 9px; letter-spacing: .04em; }
body.theme-compact .stat-sub    { font-size: 9px; }
body.theme-compact pre.logo     { display: none; }
body.theme-compact header       { padding-bottom: 8px; margin-bottom: 10px; }
body.theme-compact nav a        { font-size: 10px; padding: 4px 10px; }
body.theme-compact th, body.theme-compact td { font-size: 10px; padding: 2px 6px; }
body.theme-compact th { font-size: 9px; letter-spacing: .04em; }
body.theme-compact .btn { padding: 2px 8px; font-size: 10px; }
body.theme-compact .badge { font-size: 9px; padding: 0 5px; }
body.theme-compact input[type="text"],
body.theme-compact input[type="password"] { padding: 3px 6px; font-size: 11px; }
body.theme-compact .progress-wrap, body.theme-compact .progress-bar { height: 3px; }
body.theme-compact .iso-note { font-size: 10px; }
body.theme-compact footer { padding-top: 6px; font-size: 10px; }

/* ═══════════════════════════════════════════════════════════════════════
 *  THÈME 8 — Newspaper "RASPY DAILY" (style NYT/Times print)
 *  Layout : 880px étroit, masthead énorme, drop caps, serif italic, papier
 * ═══════════════════════════════════════════════════════════════════════ */
body.theme-newspaper {
  --bg: #f5efdc; --surface: transparent; --border: #1a1408;
  --text: #1a1408; --bright: #000;
  --green: #2e5e1e; --cyan: #1a3a6e; --yellow: #8a5e08; --red: #8a1818; --dim: #5a4a30;
  font-family: 'Crimson Text', Georgia, serif; font-size: 16px; line-height: 1.55;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 50%, rgba(0,0,0,.015) 100%),
    #f5efdc;
}
body.theme-newspaper .wrap { max-width: 880px; padding: 40px 36px; }
body.theme-newspaper .logo-bar { display: none; }
body.theme-newspaper header {
  border-bottom: 3px double #1a1408;
  padding-bottom: 14px; margin-bottom: 28px;
  text-align: center;
}
body.theme-newspaper header::before {
  content: 'RASPY DAILY';
  display: block; font-family: 'Crimson Text', serif; font-weight: 700;
  font-size: 72px; letter-spacing: -.01em; line-height: 1;
  color: #1a1408; margin-bottom: 4px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.1);
}
body.theme-newspaper header::after {
  content: 'Vol. III, No. 132    ◆    « All the bits that\'s fit to print »    ◆    raspy.bounceme.net';
  display: block; font-style: italic; font-size: 12px; color: #5a4a30;
  border-top: 1px solid #1a1408; border-bottom: 1px solid #1a1408;
  padding: 4px 0; margin: 8px auto 0; max-width: 700px; letter-spacing: .04em;
}
body.theme-newspaper nav {
  display: flex; justify-content: center; gap: 0;
  border: none; padding: 10px 0; margin: 10px 0;
  border-top: 1px solid #5a4a30; border-bottom: 1px solid #5a4a30;
  background: transparent;
}
body.theme-newspaper nav a {
  font-family: 'Crimson Text', serif; font-style: italic;
  padding: 2px 18px; border-right: none; color: #1a1408;
  font-size: 14px; letter-spacing: .02em;
}
body.theme-newspaper nav a + a::before { content: '•'; margin-right: 36px; color: #5a4a30; }
body.theme-newspaper nav a.active { font-weight: 700; font-style: normal; text-decoration: underline; }
body.theme-newspaper .grid-3 { grid-template-columns: 1fr 1fr; gap: 28px; }
body.theme-newspaper .grid-2 { grid-template-columns: 1fr 1fr; gap: 28px; }
body.theme-newspaper .panel {
  border: none; background: transparent; box-shadow: none;
  border-top: 1px solid #5a4a30; border-bottom: 1px solid #5a4a30;
  padding: 0; margin-bottom: 28px;
}
body.theme-newspaper .panel-title {
  background: transparent; border-bottom: none;
  font-family: 'Crimson Text', serif; font-weight: 700;
  font-size: 26px; line-height: 1.1; letter-spacing: 0;
  text-transform: none; text-align: center;
  padding: 14px 0 6px;
  color: #1a1408;
}
body.theme-newspaper .panel-title::before { content: ''; }
body.theme-newspaper .panel-title::after {
  content: '❦'; display: block; font-size: 14px; color: #8a5e08;
  margin-top: 4px; font-weight: 400;
}
body.theme-newspaper .panel-body { padding: 14px 4px 18px; column-rule: 1px solid #c4b896; }
body.theme-newspaper .stat-value { font-weight: 700; font-size: 36px; letter-spacing: 0; }
body.theme-newspaper .stat-label { font-style: italic; font-size: 12px; letter-spacing: 0; text-transform: none; color: #5a4a30; }
body.theme-newspaper .stat-sub { font-style: italic; font-size: 13px; }
body.theme-newspaper th, body.theme-newspaper td {
  font-family: 'Crimson Text', serif; font-size: 14px; padding: 7px 12px;
  border-bottom: 1px dotted #8a7d5e;
}
body.theme-newspaper th { font-style: italic; text-transform: none; letter-spacing: 0; color: #5a4a30; font-weight: 400; }
body.theme-newspaper .btn {
  font-family: 'Crimson Text', serif; font-size: 14px; font-style: italic;
  border-radius: 0; border-width: 1px; padding: 5px 14px;
}
body.theme-newspaper .badge { border-radius: 0; border-width: 1px; font-style: italic; }
body.theme-newspaper .progress-wrap { background: #d4c8a8; height: 4px; }
body.theme-newspaper input[type="text"], body.theme-newspaper input[type="password"] {
  background: #fff8e8; border: 1px solid #5a4a30; border-radius: 0;
  font-family: 'Crimson Text', serif; font-size: 14px;
}
body.theme-newspaper footer {
  border-top: 3px double #1a1408; margin-top: 36px; padding-top: 14px;
  font-style: italic; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  THÈME 9 — Hacker / TTY (terminal pur, pas de panels visuels)
 *  Layout : large 1200px, sections séparées par ──── ASCII rules
 *  Tout en monospace, prompt $ partout, look boot log
 * ═══════════════════════════════════════════════════════════════════════ */
body.theme-hacker {
  --bg: #0a0a0a; --surface: #0a0a0a; --border: #404040;
  --text: #b8b8b8; --bright: #f0f0f0;
  --green: #5fff5f; --cyan: #5fd7ff; --yellow: #ffff5f; --red: #ff5f5f; --dim: #606060;
  font-family: 'Share Tech Mono', 'Courier New', monospace; font-size: 14px; line-height: 1.5;
}
body.theme-hacker .wrap { max-width: 1200px; padding: 18px 24px; }
body.theme-hacker .logo-bar { display: none; }
body.theme-hacker header {
  border: none; padding: 0; margin-bottom: 10px;
}
body.theme-hacker header::before {
  content: 'root@raspy:~# uname -a && cat /etc/welcome';
  display: block; color: #5fff5f; font-family: 'Share Tech Mono', monospace;
  font-size: 14px; margin-bottom: 8px;
}
body.theme-hacker header::after {
  content: 'Linux raspy 6.12 aarch64 — All systems nominal — Authorized access only.';
  display: block; color: #b8b8b8; font-size: 13px; margin-bottom: 14px;
  border-bottom: 1px dashed #404040; padding-bottom: 12px;
}
body.theme-hacker nav {
  border: none; background: transparent; padding: 0; margin-bottom: 10px;
  display: block;
}
body.theme-hacker nav a {
  display: inline; border: none; padding: 0 2px 0 0; color: #5fd7ff;
  font-size: 14px;
}
body.theme-hacker nav a::before { content: '['; color: #606060; }
body.theme-hacker nav a::after  { content: ']'; color: #606060; margin-right: 4px; }
body.theme-hacker nav a.active  { color: #5fff5f; font-weight: 700; }
body.theme-hacker nav a:hover   { background: transparent; color: #f0f0f0; text-decoration: underline; }
body.theme-hacker .grid-3 { grid-template-columns: 1fr; gap: 4px; }
body.theme-hacker .grid-2 { grid-template-columns: 1fr; gap: 4px; }
body.theme-hacker .panel {
  border: none; background: transparent; box-shadow: none;
  margin-bottom: 14px; padding: 0;
}
body.theme-hacker .panel-title {
  background: transparent; border: none;
  color: #5fff5f; padding: 6px 0 4px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px; text-transform: none; letter-spacing: 0;
}
body.theme-hacker .panel-title::before {
  content: '── '; color: #404040;
}
body.theme-hacker .panel-title::after {
  content: ' ────────────────────────────────────────────────────────────────';
  color: #404040; letter-spacing: 0;
}
body.theme-hacker .panel-body { padding: 6px 12px 8px; }
body.theme-hacker .stat-value { font-size: 18px; font-family: 'Share Tech Mono', monospace; }
body.theme-hacker .stat-label { font-size: 12px; text-transform: none; letter-spacing: 0; color: #606060; }
body.theme-hacker .stat-label::before { content: '$ '; color: #404040; }
body.theme-hacker pre.logo { color: #5fff5f; font-size: 9px; }
body.theme-hacker th, body.theme-hacker td {
  font-family: 'Share Tech Mono', monospace; font-size: 13px;
  padding: 3px 10px; border-bottom: none;
}
body.theme-hacker th { color: #606060; text-transform: none; letter-spacing: 0; border-bottom: 1px dashed #404040; }
body.theme-hacker tr:hover td { background: rgba(95,255,95,.05); }
body.theme-hacker .btn {
  border: 1px solid currentColor; border-radius: 0; background: transparent;
  font-family: 'Share Tech Mono', monospace; font-size: 13px; padding: 2px 12px;
}
body.theme-hacker .btn::before { content: '['; }
body.theme-hacker .btn::after  { content: ']'; }
body.theme-hacker .badge { border-radius: 0; border-width: 1px; font-family: 'Share Tech Mono', monospace; }
body.theme-hacker input[type="text"], body.theme-hacker input[type="password"] {
  background: #1a1a1a; border: 1px solid #404040; border-radius: 0;
  font-family: 'Share Tech Mono', monospace; color: #5fff5f;
}
body.theme-hacker .progress-wrap { background: #1a1a1a; height: 6px; }
body.theme-hacker .progress-bar  { height: 6px; }
body.theme-hacker footer {
  border-top: 1px dashed #404040; font-family: 'Share Tech Mono', monospace; color: #606060;
}
body.theme-hacker footer::before { content: '$ '; color: #5fff5f; }

/* ═══════════════════════════════════════════════════════════════════════
 *  THÈME 10 — Minimal Swiss (whitespace, Helvetica/Inter, alignement strict)
 *  Layout : étroit 760px, énorme spacing, no borders, juste typo
 * ═══════════════════════════════════════════════════════════════════════ */
body.theme-minimal {
  --bg: #fafafa; --surface: #fafafa; --border: #e8e8e8;
  --text: #2a2a2a; --bright: #000000;
  --green: #1b7a3a; --cyan: #1b4a8a; --yellow: #ab6c00; --red: #c0322b; --dim: #8a8a8a;
  font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.65;
  letter-spacing: -.005em;
}
body.theme-minimal .wrap { max-width: 760px; padding: 80px 32px 60px; }
body.theme-minimal .logo-bar { display: none; }
body.theme-minimal header { border: none; padding: 0; margin-bottom: 64px; }
body.theme-minimal header::before {
  content: 'raspy.';
  display: block; font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 84px; line-height: 1; letter-spacing: -.04em;
  color: #000; margin-bottom: 24px;
}
body.theme-minimal nav {
  border: none; padding: 0; margin-bottom: 0;
  display: flex; gap: 32px;
}
body.theme-minimal nav a {
  border: none; padding: 0; color: #8a8a8a; font-weight: 400;
  font-size: 14px; letter-spacing: -.005em;
}
body.theme-minimal nav a.active { color: #000; font-weight: 600; }
body.theme-minimal nav a:hover  { background: transparent; color: #000; text-decoration: none; }
body.theme-minimal .grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 48px; }
body.theme-minimal .grid-2 { grid-template-columns: 1fr 1fr; gap: 48px; }
body.theme-minimal .panel {
  border: none; background: transparent; box-shadow: none;
  padding: 0; margin-bottom: 64px;
}
body.theme-minimal .panel-title {
  background: transparent; border: none;
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
  padding: 0 0 16px; color: #8a8a8a;
}
body.theme-minimal .panel-body { padding: 0; }
body.theme-minimal .stat-value {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 64px;
  letter-spacing: -.04em; line-height: 1; color: #000;
}
body.theme-minimal .stat-label { display: none; }
body.theme-minimal .stat-sub   { color: #8a8a8a; margin-top: 6px; font-size: 13px; }
body.theme-minimal .stat       { gap: 0; }
body.theme-minimal th, body.theme-minimal td {
  padding: 14px 0; border-bottom: 1px solid #e8e8e8;
  font-family: 'Inter', sans-serif;
}
body.theme-minimal th { color: #8a8a8a; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; }
body.theme-minimal tr:hover td { background: transparent; }
body.theme-minimal .btn {
  border: 1px solid #000; border-radius: 999px; padding: 6px 18px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13px;
  background: transparent; color: #000;
}
body.theme-minimal .btn:hover { background: #000; color: #fff; }
body.theme-minimal .btn-red    { border-color: #c0322b; color: #c0322b; }
body.theme-minimal .btn-red:hover    { background: #c0322b; color: #fff; }
body.theme-minimal .btn-green  { border-color: #1b7a3a; color: #1b7a3a; }
body.theme-minimal .btn-green:hover  { background: #1b7a3a; color: #fff; }
body.theme-minimal .badge { border-radius: 999px; font-weight: 500; padding: 1px 10px; }
body.theme-minimal input[type="text"], body.theme-minimal input[type="password"] {
  background: #fff; border: 1px solid #e8e8e8; border-radius: 999px;
  padding: 8px 16px; font-family: 'Inter', sans-serif;
}
body.theme-minimal .progress-wrap { background: #e8e8e8; height: 2px; }
body.theme-minimal .progress-bar  { height: 2px; }
body.theme-minimal footer {
  border: none; padding-top: 48px; color: #8a8a8a; font-size: 12px;
  margin-top: 96px;
}

/* ═══════════════════════════════════════════════════════════════════════
 *  THÈME 11 — NES 8-bit (Press Start 2P, palette limitée, pixel borders)
 *  Layout : 800px, panels = boîtes "game UI" avec double border pixel,
 *  palette inspirée NES (gris ardoise, blanc, rouge, bleu)
 * ═══════════════════════════════════════════════════════════════════════ */
body.theme-nes {
  --bg: #6a6a6a; --surface: #d4d4d4; --border: #1a1a1a;
  --text: #1a1a1a; --bright: #000000;
  --green: #00a800; --cyan: #0058f8; --yellow: #fcd000; --red: #e40058; --dim: #707070;
  font-family: 'Press Start 2P', 'Courier New', monospace; font-size: 10px; line-height: 1.7;
  letter-spacing: .03em;
  background:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.06) 0 1px, transparent 1px 4px),
    #6a6a6a;
}
body.theme-nes .wrap { max-width: 800px; padding: 24px 16px; }
body.theme-nes .logo-bar { display: none; }
body.theme-nes header {
  border: none; padding: 0; margin-bottom: 14px;
}
body.theme-nes header::before {
  content: '★ RASPY ★';
  display: block; text-align: center;
  font-family: 'Press Start 2P', monospace; font-size: 20px; color: #fcd000;
  text-shadow: 2px 2px 0 #1a1a1a, 4px 4px 0 #e40058;
  padding: 14px 0; letter-spacing: .05em;
}
body.theme-nes nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px;
  background: #1a1a1a; border: 4px solid #fcfcfc; padding: 6px;
}
body.theme-nes nav a {
  background: #d4d4d4; border: 2px solid #1a1a1a; color: #1a1a1a;
  padding: 6px 10px; font-family: 'Press Start 2P', monospace; font-size: 8px;
  letter-spacing: .04em;
}
body.theme-nes nav a:hover  { background: #fcd000; }
body.theme-nes nav a.active { background: #e40058; color: #fcfcfc; }
body.theme-nes nav a.logout { background: #1a1a1a; color: #e40058; }
body.theme-nes .grid-3 { grid-template-columns: 1fr 1fr; gap: 10px; }
body.theme-nes .grid-2 { grid-template-columns: 1fr 1fr; gap: 10px; }
body.theme-nes .panel {
  border: 4px solid #1a1a1a; border-radius: 0; margin-bottom: 12px;
  background: #d4d4d4;
  box-shadow: inset -2px -2px 0 #707070, inset 2px 2px 0 #fcfcfc;
}
body.theme-nes .panel-title {
  background: #1a1a1a; color: #fcd000; border: none;
  font-family: 'Press Start 2P', monospace; font-size: 10px;
  text-transform: uppercase; padding: 8px 10px;
  letter-spacing: .06em;
}
body.theme-nes .panel-body { padding: 12px 10px; color: #1a1a1a; }
body.theme-nes .stat-value {
  font-family: 'Press Start 2P', monospace; font-size: 18px; color: #1a1a1a;
  letter-spacing: 0;
}
body.theme-nes .stat-label, body.theme-nes .stat-sub { font-size: 8px; color: #404040; letter-spacing: .04em; }
body.theme-nes th, body.theme-nes td {
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  padding: 6px 8px; border-bottom: 2px solid #707070;
}
body.theme-nes th { color: #1a1a1a; font-size: 8px; }
body.theme-nes tr:hover td { background: #fcd000; }
body.theme-nes .btn {
  background: #d4d4d4; border: 2px solid #1a1a1a; color: #1a1a1a;
  font-family: 'Press Start 2P', monospace; font-size: 8px;
  padding: 6px 12px; border-radius: 0;
  box-shadow: 2px 2px 0 #1a1a1a;
}
body.theme-nes .btn:hover { background: #fcd000; transform: translate(-1px,-1px); box-shadow: 3px 3px 0 #1a1a1a; }
body.theme-nes .btn-red   { background: #e40058; color: #fcfcfc; }
body.theme-nes .btn-green { background: #00a800; color: #fcfcfc; }
body.theme-nes .btn-cyan  { background: #0058f8; color: #fcfcfc; }
body.theme-nes .badge { border-radius: 0; border: 2px solid #1a1a1a; padding: 1px 4px; font-size: 8px; }
body.theme-nes input[type="text"], body.theme-nes input[type="password"] {
  background: #fcfcfc; border: 3px solid #1a1a1a; border-radius: 0;
  font-family: 'Press Start 2P', monospace; font-size: 10px; padding: 6px 8px;
}
body.theme-nes pre.logo { display: none; }
body.theme-nes .progress-wrap { background: #1a1a1a; height: 8px; border: 2px solid #1a1a1a; }
body.theme-nes .progress-bar  { height: 8px; }
body.theme-nes footer {
  border: 4px solid #1a1a1a; background: #1a1a1a; color: #fcd000;
  padding: 8px 12px; margin-top: 14px; font-size: 8px;
}
body.theme-nes .theme-btn {
  border: 2px solid #1a1a1a; border-radius: 0; background: #d4d4d4;
  font-family: 'Press Start 2P', monospace; font-size: 7px; padding: 4px 6px;
}

/* =============================================================================
   MOBILE RESPONSIVE OVERRIDES (ajouté 2026-05-19 audit #5)
   Neutralise les tailles/paddings/grids spécifiques aux thèmes non-default
   sur mobile. style.css a déjà des règles structurelles ; ici on force que
   les thèmes ne cassent pas la lisibilité sur petit écran.
   ============================================================================ */
@media (max-width: 720px) {
  /* Force les grilles à 1 colonne pour tous les thèmes */
  body[class*="theme-"] .grid-2,
  body[class*="theme-"] .grid-3,
  body[class*="theme-"] .grid-4,
  body[class*="theme-"] .grid-5 { grid-template-columns: 1fr !important; }

  /* Wrap container : pas de max-width forcée par les thèmes (ex: brutalist 1200px, compact 1400px) */
  body[class*="theme-"] .wrap { max-width: 100% !important; padding: 10px !important; }

  /* Stat values trop grosses sur mobile (ex: 84px minimal, 72px brutalist) */
  body[class*="theme-"] .stat-value { font-size: 28px !important; }

  /* Panel padding : compact a 4px, brutalist 16px ; on harmonise */
  body[class*="theme-"] .panel-body  { padding: 10px 12px !important; }
  body[class*="theme-"] .panel-title { padding: 8px 12px !important; font-size: 14px !important; line-height: 1.3 !important; }

  /* Logo ASCII : 8-9px reste trop large sur 320-720px */
  body[class*="theme-"] pre.logo,
  body.theme-newspaper .logo,
  body.theme-minimal .logo,
  body.theme-brutalist .logo { font-size: 7px !important; line-height: 1 !important; }

  /* Tables : font-size raisonnable + scroll horizontal localisé */
  body[class*="theme-"] table { font-size: 12px !important; }
  body[class*="theme-"] table td, body[class*="theme-"] table th { padding: 4px 6px !important; }

  /* Inputs / selects 16px = anti-zoom iOS */
  body[class*="theme-"] input[type="text"],
  body[class*="theme-"] input[type="password"],
  body[class*="theme-"] input[type="number"],
  body[class*="theme-"] select,
  body[class*="theme-"] textarea { font-size: 16px !important; }

  /* Boutons : tap target raisonnable */
  body[class*="theme-"] .btn, body[class*="theme-"] button { min-height: 36px !important; padding: 8px 12px !important; }

  /* Nav : font lisible sans tronquer */
  body[class*="theme-"] nav a { font-size: 13px !important; padding: 8px 10px !important; min-height: 36px !important; }

  /* Theme switcher en bas, plus compact */
  body[class*="theme-"] .theme-btn { font-size: 10px !important; padding: 4px 8px !important; }

  /* Newspaper masthead, Minimal "raspy." géant, Brutalist "RASPY" 72px → cap */
  body.theme-newspaper h1, body.theme-newspaper .masthead { font-size: 32px !important; }
  body.theme-minimal h1 { font-size: 36px !important; }
  body.theme-brutalist h1 { font-size: 28px !important; }
  body.theme-nes h1, body.theme-nes .raspy-title { font-size: 16px !important; }
}