/* Guide du créateur (guide.html, guide.fr.html) : même charte « Cascade pop » que l'éditeur */
@font-face { font-family: "Anton"; src: url("fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("fonts/mplus-rounded-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
:root {
  --ink: #0b0720; --pink: #f70c93; --lemon: #fbd63f; --cyan: #4fc8f0; --lavender: #eb86d5;
  --panel: #161034; --panel2: #20184a; --line: #6a5db8; --line-soft: #2e2560;
  --text: #ffffff; --muted: #cfcbdc;
  --display: "Anton", Impact, sans-serif;
  --label: "M PLUS Rounded 1c", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--text); scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 "Bricolage Grotesque", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 85% -10%, #3a0f4a 0, transparent 60%), var(--ink); }
.top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: rgba(22, 16, 52, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line-soft); }
.top .brand { font: 400 22px var(--display); letter-spacing: .5px; color: var(--lemon); text-decoration: none;
  -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--pink); }
.top .spacer { flex: 1; }
.top a.btn { font: 800 13px var(--label); color: var(--text); text-decoration: none; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); white-space: nowrap; }
.top a.btn.primary { background: var(--pink); border-color: var(--ink); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.top a.btn:hover { border-color: var(--lemon); }
main { max-width: 820px; margin: 0 auto; padding: 32px 16px 80px; }
h1 { font: 400 clamp(34px, 6vw, 52px)/1.05 var(--display); color: var(--lemon); margin: 8px 0 12px; letter-spacing: .5px;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--pink); text-transform: uppercase; }
h2 { font: 400 28px/1.15 var(--display); letter-spacing: .5px; color: var(--text); margin: 48px 0 12px; text-transform: uppercase;
  scroll-margin-top: 70px; }
h2 .n { color: var(--pink); margin-right: 8px; }
h3 { font: 800 15px var(--label); letter-spacing: .4px; color: var(--cyan); margin: 28px 0 8px; text-transform: uppercase; }
p, li { color: var(--text); }
.lead { font-size: 18px; color: var(--muted); }
a { color: var(--lemon); }
code, kbd { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel2); border: 1px solid var(--line-soft);
  border-radius: 5px; padding: 1px 5px; }
kbd { border-color: var(--line); border-bottom-width: 2px; }
pre { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 14px; overflow-x: auto; }
pre code { background: none; border: 0; padding: 0; }
ol.steps { counter-reset: s; list-style: none; padding: 0; }
ol.steps > li { counter-increment: s; position: relative; padding: 2px 0 14px 48px; }
ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font: 800 14px var(--label); color: var(--ink); background: var(--lemon); box-shadow: 2px 2px 0 var(--pink); }
ol.steps > li b:first-child { display: block; }
.toc { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px 18px; }
.toc ol { margin: 6px 0 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.toc li { break-inside: avoid; }
.note { border-left: 4px solid var(--cyan); background: var(--panel); padding: 10px 14px; border-radius: 0 8px 8px 0; }
.note.warn { border-left-color: var(--lemon); }
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
th { font: 800 12px var(--label); letter-spacing: .4px; color: var(--muted); text-transform: uppercase; }
.lanes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 12px 0; }
.lanes div { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 14px; }
.lanes b { font: 800 13px var(--label); color: var(--lavender); display: block; margin-bottom: 4px; text-transform: uppercase; }
footer { color: var(--muted); font-size: 14px; border-top: 1px solid var(--line-soft); margin-top: 56px; padding-top: 16px; }
@media (max-width: 640px) {
  .toc ol { columns: 1; }
  .lanes { grid-template-columns: 1fr; }
  .top a.btn:not(.primary) { display: none; }
}