:root {
  color-scheme: dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(72% 0.15 27); --color-success: oklch(76% 0.13 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: oklch(17% 0.008 250); --color-paper-2: oklch(21% 0.009 250); --color-paper-3: oklch(13.5% 0.007 250);
  --color-ink: oklch(95% 0.005 250); --color-ink-2: oklch(83% 0.008 250); --color-muted: oklch(71% 0.01 250);
  --color-rule: oklch(31% 0.01 250); --color-rule-2: oklch(42% 0.012 250);
  --color-accent: oklch(82% 0.15 80); --color-accent-ink: oklch(18% 0.04 75); --color-accent-soft: oklch(29% 0.05 80); --color-focus: oklch(82% 0.15 80);
  --color-cool: oklch(77% 0.12 245); --color-cool-soft: oklch(29% 0.05 245);
  --color-ok: oklch(76% 0.15 150); --color-ok-soft: oklch(24.5% 0.03 150); --color-bad: oklch(70% 0.17 25); --color-bad-soft: oklch(24.5% 0.035 25);
  --font-display: "Host Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: var(--font-display);
  --font-outlier: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --radius-card: 10px; --radius-pill: 6px; --rule-hair: 1px;
  --shadow-card: none;
  --tracking-display: -0.03em; --display-weight: 500;
}
/* Thème clair du jeu (Paramètres) : le coloris « paper » de Console */
:root[data-theme='light'] {
  color-scheme: light;
  --color-paper: oklch(98% 0.006 85); --color-paper-2: oklch(95.5% 0.008 85); --color-paper-3: oklch(92.5% 0.01 85);
  --color-ink: oklch(19% 0.01 60); --color-ink-2: oklch(32% 0.012 60); --color-muted: oklch(45% 0.012 60);
  --color-rule: oklch(87% 0.01 85); --color-rule-2: oklch(74% 0.012 85);
  --color-accent: oklch(50% 0.13 70); --color-accent-ink: oklch(98.5% 0.005 85); --color-accent-soft: oklch(92% 0.05 80); --color-focus: oklch(50% 0.13 70);
  --color-cool: oklch(50% 0.14 250); --color-cool-soft: oklch(92% 0.04 245);
  --color-ok: oklch(48% 0.13 150); --color-ok-soft: oklch(93% 0.04 150); --color-bad: oklch(50% 0.17 25); --color-bad-soft: oklch(93% 0.04 25);
  --color-error: oklch(50% 0.17 25); --color-success: oklch(48% 0.13 150);
}

/* Pages du blog (/blog/…) : HTML statique généré par scripts/build-blog.mjs, avec tokens.css (charte Console).
   Pas de JavaScript du jeu ici : pages légères, lisibles par les moteurs de recherche dès le chargement. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.65; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.bl-container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-lg); }
.bl-narrow { max-width: 720px; margin: 0 auto; }

/* En-tête */
.bl-nav { border-bottom: var(--rule-hair) solid var(--color-rule); }
.bl-nav-in { display: flex; align-items: center; gap: var(--space-md); min-height: 64px; }
.bl-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; letter-spacing: -0.01em; }
.bl-brand .bl-logo { width: 28px; height: 28px; flex: none; display: inline-block; }
.bl-brand small { color: var(--color-muted); font-size: var(--text-xs); }
.bl-spacer { flex: 1; }
.bl-link { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); }
.bl-link:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.bl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 500; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.bl-btn:hover { filter: brightness(1.06); }

/* Liste des articles */
.bl-hero { padding: var(--space-2xl) 0 var(--space-xl); }
.bl-kicker { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-sm); }
.bl-hero h1 { font-size: var(--text-display-s); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.08; margin: 0 0 var(--space-md); }
.bl-hero p { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 640px; margin: 0; }
.bl-list { list-style: none; padding: 0; margin: 0 0 var(--space-2xl); display: grid; gap: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.bl-item { border-bottom: var(--rule-hair) solid var(--color-rule); }
.bl-item a { display: grid; gap: 6px; padding: var(--space-lg) 0; text-decoration: none; }
.bl-item h2 { font-size: var(--text-title); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; margin: 0; }
.bl-item a:hover h2 { color: var(--color-accent); }
.bl-item p { margin: 0; color: var(--color-ink-2); }
.bl-meta { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.bl-empty { color: var(--color-muted); padding: var(--space-xl) 0; }
.bl-draft { color: var(--color-bad); }

/* Article */
.bl-article { padding: var(--space-2xl) 0 var(--space-xl); }
.bl-article header { margin-bottom: var(--space-xl); }
.bl-article h1 { font-size: clamp(2rem, 2.6vw + 1rem, 3rem); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.1; margin: var(--space-xs) 0 var(--space-md); }
.bl-lead { color: var(--color-ink-2); font-size: var(--text-lead); margin: 0 0 var(--space-md); }
.bl-cover { margin: 0 0 var(--space-xl); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.bl-cover img { display: block; width: 100%; }

.bl-prose > * + * { margin-top: 1.1em; }
.bl-prose h2 { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; margin-top: 2em; }
.bl-prose h3 { font-size: var(--text-lg); font-weight: 500; margin-top: 1.6em; }
.bl-prose h2 + *, .bl-prose h3 + * { margin-top: 0.6em; }
.bl-prose a { color: var(--color-cool); text-underline-offset: 3px; }
.bl-prose ul, .bl-prose ol { padding-left: 1.4em; }
.bl-prose li + li { margin-top: 0.35em; }
.bl-prose blockquote { margin-left: 0; padding: 0.2em 0 0.2em var(--space-md); border-left: 3px solid var(--color-accent); color: var(--color-ink-2); }
.bl-prose hr { border: 0; border-top: var(--rule-hair) solid var(--color-rule); margin: 2em 0; }
.bl-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); display: block; overflow-x: auto; }
.bl-prose th, .bl-prose td { text-align: left; padding: 8px 10px; border-bottom: var(--rule-hair) solid var(--color-rule); }
.bl-prose th { color: var(--color-muted); font-weight: 500; }
.bl-prose :not(pre) > code { font-family: var(--font-outlier); font-size: 0.88em; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: 4px; padding: 0.1em 0.35em; }
.bl-prose pre { margin-left: 0; margin-right: 0; padding: var(--space-md); background: #0d1017; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow-x: auto; font-family: "JetBrains Mono", var(--font-outlier); font-size: 0.86rem; line-height: 1.6; color: #d7dce5; }
.bl-prose pre code { font-family: inherit; }
.bl-prose .h-anchor { color: inherit; text-decoration: none; }
.bl-prose .h-anchor:hover::after { content: " #"; color: var(--color-muted); }

/* Encart d'appel à l'action en fin d'article */
.bl-cta { margin: var(--space-2xl) 0 var(--space-xl); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-card); background: var(--color-accent-soft); display: grid; gap: var(--space-sm); }
.bl-cta b { font-size: var(--text-lg); font-weight: 500; }
.bl-cta p { margin: 0; color: var(--color-ink-2); }
.bl-cta .bl-btn { justify-self: start; }
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bl-tags li { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-muted); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); padding: 2px 8px; }
.bl-back { display: inline-block; margin-bottom: var(--space-lg); }

/* « À lire aussi » : maillage interne entre articles */
.bl-related { margin-top: var(--space-2xl); }
.bl-related h2 { font-family: var(--font-outlier); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-sm); }
.bl-related ul { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.bl-related li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.bl-related a { display: grid; gap: 4px; padding: var(--space-md) 0; text-decoration: none; }
.bl-related b { font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.01em; line-height: 1.3; }
.bl-related a:hover b { color: var(--color-accent); }
.bl-related span { color: var(--color-ink-2); font-size: var(--text-sm); }

/* Pied de page */
.bl-footer { margin-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); padding: var(--space-2xl) 0 var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
.bl-foot-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 2fr); gap: var(--space-xl); align-items: start; }
.bl-foot-brand { display: grid; gap: var(--space-sm); max-width: 36ch; }
.bl-foot-brand .bl-brand { color: var(--color-ink); font-size: var(--text-lg); justify-self: start; }
.bl-foot-brand .bl-logo { width: 30px; height: 30px; }
.bl-foot-brand p { margin: 0; line-height: 1.55; }
.bl-foot-col h4 { margin: 0 0 var(--space-sm); font-family: var(--font-outlier); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }
.bl-foot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.bl-foot-col a { color: var(--color-ink-2); text-decoration: none; }
.bl-foot-col a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.bl-foot-bottom { margin: var(--space-2xl) 0 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); }

/* Coloration du code Terraform (mêmes classes que l'éditeur du jeu) */
.t-com { color: #6a7386; font-style: italic; }
.t-str { color: #a5e3a0; }
.t-interp { color: #7dd3fc; }
.t-num { color: #fbbf77; }
.t-bool { color: #f9a8d4; }
.t-kw { color: #c4b5fd; font-weight: 600; }
.t-label { color: #fde68a; }
.t-attr { color: #93c5fd; }
.t-ref { color: #f0abfc; }
.t-fn { color: #67e8f9; }
.t-punct { color: #8b95a8; }
.t-key { color: #93c5fd; }

@media (max-width: 640px) {
  .bl-container { padding: 0 var(--space-md); }
  .bl-nav .bl-link { display: none; }
  .bl-hero { padding-top: var(--space-xl); }
  .bl-foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-foot-brand { grid-column: 1 / -1; }
}