/* The Query Book — charte data-workers.com : sombre (Inter, turquoise) et clair (papier, encre, Arvo). */
:root, html[data-theme="dark"] {
  --bg: #070b15; --panel: #0f172a; --panel-2: #131c31; --line: rgba(148,163,184,.16); --line-2: rgba(148,163,184,.28);
  --ink: #f8fafc; --ink-2: #cbd5e1; --muted: #94a3b8; --brand: #2dc4c2; --brand-ink: #062a2a; --brand-soft: rgba(45,196,194,.12);
  --accent: #fe4d1a; --ok: #34d399; --ok-soft: rgba(52,211,153,.12); --ko: #f87171; --ko-soft: rgba(248,113,113,.12);
  --warn: #fbbf24; --code-bg: #0b1222; --code-ink: #e2e8f0; --kw: #2dc4c2; --str: #fbbf24; --num: #f472b6; --com: #64748b; --fn: #a5b4fc;
  --radius: 14px; --radius-s: 10px; --shadow: 0 10px 30px rgba(0,0,0,.35); --border: 1px solid var(--line);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-title: var(--font);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
html[data-theme="light"] {
  --bg: #ebe7de; --panel: #f6f3ec; --panel-2: #efebe2; --line: rgba(29,27,25,.22); --line-2: #1d1b19;
  --ink: #1d1b19; --ink-2: #3b3833; --muted: #6f6a62; --brand: #c2393f; --brand-ink: #f6f3ec; --brand-soft: rgba(194,57,63,.08);
  --accent: #fe4d1a; --ok: #2f7d4f; --ok-soft: rgba(47,125,79,.1); --ko: #b0353b; --ko-soft: rgba(176,53,59,.08);
  --warn: #9a6b00; --code-bg: #1d1b19; --code-ink: #f3efe6; --kw: #ff8a5c; --str: #ffd84a; --num: #9fd3ff; --com: #9a948a; --fn: #c9b8ff;
  --radius: 2px; --radius-s: 2px; --shadow: 4px 4px 0 #1d1b19; --border: 1.5px solid #1d1b19;
  --font: 'Arvo', Rockwell, Georgia, serif; --font-title: var(--font);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.7 var(--font); -webkit-font-smoothing: antialiased; }
html[data-theme="light"] body {
  background-image: linear-gradient(rgba(120,110,95,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(120,110,95,.10) 1px, transparent 1px);
  background-size: 28px 28px;
}
a { color: var(--brand); }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
kbd { font: 600 11px var(--mono); padding: 1px 5px; border: 1px solid currentColor; border-radius: 4px; opacity: .7; margin-left: 6px; }

/* En-tête */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: var(--border); }
.sitenav { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; min-width: 0; }
.sitenav a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.sitenav a:last-child { color: var(--ink); }
.sitenav a:hover { color: var(--ink); }
.sitenav img { border-radius: 6px; }
html[data-theme="light"] .sitenav img { border-radius: 0; }
.sitenav span { color: var(--muted); }
.top-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.switch, .console-btn, .menu-btn { border: var(--border); background: transparent; color: var(--ink-2); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
html[data-theme="light"] .switch, html[data-theme="light"] .console-btn, html[data-theme="light"] .menu-btn { border-radius: 2px; }
.switch:hover, .menu-btn:hover { border-color: var(--brand); color: var(--ink); }
.console-btn { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.console-btn:hover { filter: brightness(1.08); }
.menu-btn { display: none; padding: 6px 11px; }

/* Mise en page */
.layout { display: grid; grid-template-columns: 290px minmax(0, 1fr) 220px; max-width: 1480px; margin: 0 auto; }
.sidebar { position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; padding: 22px 16px 40px 20px; border-right: var(--border); }
.toc { position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; padding: 34px 20px; font-size: 13px; }
.toc p { margin: 0 0 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: var(--border); }
.toc a { display: block; padding: 4px 0 4px 12px; color: var(--muted); text-decoration: none; line-height: 1.4; }
.toc a:hover, .toc a.on { color: var(--ink); }
.toc a.on { box-shadow: inset 2px 0 0 var(--brand); }
.content { min-width: 0; padding: 34px 48px 0; }
.chapter { max-width: 780px; margin: 0 auto; }

/* Menu des chapitres */
.progress { padding: 14px; border: var(--border); border-radius: var(--radius-s); background: var(--panel); margin-bottom: 18px; }
.progress-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.progress-label b { color: var(--ink); }
.progress-bar { height: 6px; margin-top: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress-bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .4s; }
.nav-part { margin: 18px 0 6px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.chapters ol { list-style: none; margin: 0; padding: 0; }
.chapters a { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px;
  color: var(--ink-2); text-decoration: none; font-size: 14px; line-height: 1.35; }
html[data-theme="light"] .chapters a { border-radius: 2px; }
.chapters a:hover { background: var(--brand-soft); color: var(--ink); }
.chapters a[aria-current] { background: var(--brand-soft); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.nav-num { font: 600 12px var(--mono); color: var(--muted); }
.nav-prog { font: 600 11px var(--mono); color: var(--muted); }
.nav-prog.full { color: var(--ok); }

/* Texte du chapitre */
.chap-kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.chapter h1 { margin: 6px 0 4px; font: 800 clamp(30px, 4vw, 42px)/1.15 var(--font-title); letter-spacing: -.02em; }
html[data-theme="light"] .chapter h1 { font-weight: 700; letter-spacing: 0; }
.chap-meta { margin: 0 0 28px; color: var(--muted); font-size: 14px; }
.chapter h2 { margin: 48px 0 12px; font: 700 26px/1.25 var(--font-title); padding-bottom: 8px; border-bottom: var(--border); }
.chapter h3 { margin: 30px 0 8px; font: 700 19px/1.3 var(--font-title); }
.chapter p, .chapter li { color: var(--ink-2); }
.chapter strong { color: var(--ink); }
.chapter img, .chapter video { display: block; max-width: 100%; height: auto; margin: 22px auto; border-radius: var(--radius-s); border: var(--border); background: #fff; }
.chapter figure { margin: 22px 0; }
.chapter figcaption { text-align: center; font-size: 13px; color: var(--muted); margin-top: -10px; }
.chapter table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; display: block; overflow-x: auto; }
.chapter th, .chapter td { padding: 8px 12px; text-align: left; border-bottom: var(--border); vertical-align: top; }
.chapter th { color: var(--ink); background: var(--panel); white-space: nowrap; }
.chapter code { font: 0.88em var(--mono); background: var(--brand-soft); color: var(--ink); padding: 1px 5px; border-radius: 4px; }
.chapter blockquote { margin: 18px 0; padding: 4px 18px; border-left: 3px solid var(--brand); color: var(--muted); }

/* Schémas */
.diagram { margin: 22px 0; padding: 14px; border: var(--border); border-radius: var(--radius-s); background: var(--panel); overflow-x: auto; }
.diagram pre.mermaid { margin: 0; background: none; text-align: center; color: var(--ink); font: 13px var(--mono); }

/* Encadrés */
.callout { margin: 22px 0; padding: 14px 18px; border-radius: var(--radius-s); border: var(--border); background: var(--panel); }
.callout > :last-child { margin-bottom: 0; }
.callout-title { margin: 0 0 4px; font-weight: 700; color: var(--ink) !important; }
.callout.attention { border-left: 4px solid var(--warn); }
.callout.astuce, .callout.note { border-left: 4px solid var(--brand); }
.callout.rappel { border-left: 4px solid var(--muted); }
.callout.entretien, .callout.pro { border-left: 4px solid var(--accent); }
html[data-theme="light"] .callout { box-shadow: var(--shadow); }

/* Blocs SQL */
.sql { margin: 18px 0; border-radius: var(--radius-s); border: var(--border); background: var(--code-bg); overflow: hidden; }
.sql pre { margin: 0; padding: 14px 16px; overflow-x: auto; }
.sql code, .sql pre code { background: none; padding: 0; color: var(--code-ink); font: 14px/1.6 var(--mono); }
.sql .k { color: var(--kw); font-weight: 600; } .sql .s { color: var(--str); } .sql .n { color: var(--num); }
.sql .c { color: var(--com); font-style: italic; } .sql .f { color: var(--fn); }
.sql-actions { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid rgba(148,163,184,.14); }
.sql-actions button, .q-actions button, .console-run button, .console-question button, .console-tools button, .q-done, .sql-result .more {
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.sql-actions button { color: #cbd5e1; border-color: rgba(148,163,184,.3); }
.sql-actions .run, .console-exec, .q-console { background: var(--brand) !important; border-color: var(--brand) !important; color: var(--brand-ink) !important; }
html[data-theme="light"] .sql-actions button, html[data-theme="light"] .q-actions button, html[data-theme="light"] .console-run button,
html[data-theme="light"] .console-question button, html[data-theme="light"] .console-tools button, html[data-theme="light"] .q-done { border-radius: 2px; }
html[data-theme="light"] .sql-actions button:not(.run) { color: #f3efe6; border-color: rgba(243,239,230,.4); }
button:disabled { opacity: .45; cursor: default; }
.sql-result { background: var(--panel); border-top: var(--border); max-height: 420px; overflow: auto; }
.sql.static { opacity: .95; }

/* Éditeurs dans le texte */
.sql .CodeMirror { height: auto; background: var(--code-bg); color: var(--code-ink); font: 14px/1.6 var(--mono); padding: 8px 6px; }
.sql .CodeMirror-scroll { min-height: 40px; }
.sql .CodeMirror-lines { padding: 4px 0; }
.sql-actions .reset, .sql-actions .to-console { margin-left: 0; }
.sql-actions .to-console { margin-left: auto !important; font-weight: 500; opacity: .8; }
.sql-actions .check { background: var(--ok) !important; border-color: var(--ok) !important; color: #04130b !important; }
html[data-theme="light"] .sql-actions .check { color: #fff !important; }
.q-work { margin-top: 14px; border-color: var(--brand); }
html[data-theme="light"] .q-work { border: 1.5px solid #1d1b19; }
.q-work-label { margin: 0 !important; padding: 7px 14px; font: 700 12px var(--font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand) !important; border-bottom: 1px solid rgba(148,163,184,.14); }
html[data-theme="light"] .q-work-label { color: #ff8a5c !important; }
.q-feedback { padding: 10px 14px; font-size: 14px; font-weight: 600; border-top: var(--border); }
.q-feedback.ok { background: var(--ok-soft); color: var(--ok); }
.q-feedback.ko { background: var(--ko-soft); color: var(--ko); }
.q-feedback[hidden] { display: none; }
.console-hint { color: var(--muted); font-size: 12px; }
.console-cm { height: 34%; min-height: 150px; border-bottom: var(--border); }
.console-cm .CodeMirror { height: 100%; font: 14px/1.55 var(--mono); background: var(--code-bg); color: var(--code-ink); }

/* Tableaux de résultats */
.grid { border-collapse: collapse; font: 13px/1.4 var(--mono); width: max-content; min-width: 100%; display: table !important; margin: 0 !important; }
.grid th, .grid td { padding: 6px 12px !important; border-bottom: 1px solid var(--line) !important; white-space: nowrap; text-align: left; }
.grid th { position: sticky; top: 0; background: var(--panel-2) !important; color: var(--ink); font-weight: 600; z-index: 1; }
.grid th small { display: block; font-weight: 400; color: var(--muted); font-size: 10px; }
.grid td.num { text-align: right; } .grid td.null { color: var(--muted); font-style: italic; }
.grid tr:hover td { background: var(--brand-soft); }
.res-info { padding: 8px 12px; font-size: 12px; color: var(--muted); font-family: var(--mono); }
.res-error { padding: 12px 14px; color: var(--ko); font: 13px/1.5 var(--mono); white-space: pre-wrap; background: var(--ko-soft); }
.res-error .hint { display: block; margin-top: 6px; color: var(--ink-2); font-family: var(--font); }

/* Questions */
.question { margin: 30px 0; padding: 18px 20px; border-radius: var(--radius); border: var(--border); background: var(--panel); position: relative; }
html[data-theme="dark"] .question { background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
html[data-theme="light"] .question { box-shadow: var(--shadow); }
.question.done { border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.q-head h3 { margin: 0 !important; font-size: 17px !important; color: var(--brand); }
.q-done span { font-size: 14px; }
.question.done .q-done { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.q-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.solution { margin-top: 14px; border-top: 1px dashed var(--line-2); padding-top: 10px; }
.solution summary { cursor: pointer; font-weight: 700; color: var(--ink-2); font-size: 14px; list-style: none; }
.solution summary::before { content: '▸ '; color: var(--brand); }
.solution[open] summary::before { content: '▾ '; }
.solution-body { margin-top: 6px; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 60px 0 30px; }
.pager a { display: block; padding: 14px 18px; border: var(--border); border-radius: var(--radius-s); text-decoration: none; color: var(--ink); font-weight: 700; background: var(--panel); }
.pager a:hover { border-color: var(--brand); }
.pager small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.pager .next { text-align: right; }
.sitefoot { max-width: 780px; margin: 0 auto; padding: 18px 0 40px; border-top: var(--border); color: var(--muted); font-size: 13px; }
.sitefoot a { color: var(--muted); }

/* Console */
.console { position: fixed; z-index: 50; top: 60px; right: 0; bottom: 0; width: min(760px, 52vw); display: flex; flex-direction: column;
  background: var(--panel); border-left: var(--border); box-shadow: -20px 0 40px rgba(0,0,0,.35); }
html[data-theme="light"] .console { box-shadow: -4px 0 0 #1d1b19; }
.console[hidden] { display: none; }
.console-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: var(--border); }
.console-status { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.console-status.ready::before { content: '● '; color: var(--ok); }
.console-tools { margin-left: auto; display: flex; gap: 6px; }
.console-tools button[aria-expanded="true"] { border-color: var(--brand); color: var(--ink); }
.console-question { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--brand-soft); border-bottom: var(--border); font-size: 13px; }
.console-question[hidden] { display: none; }
.cq-label { font-weight: 700; margin-right: auto; }
.cq-check { background: var(--ok) !important; border-color: var(--ok) !important; color: #04130b !important; }
html[data-theme="light"] .cq-check { color: #fff !important; }
.console-body { flex: 1; display: flex; min-height: 0; }
.console-side { width: 240px; overflow-y: auto; border-right: var(--border); padding: 10px; font-size: 13px; }
.console-side[hidden] { display: none; }
.console-side h4 { margin: 12px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.console-side details summary { cursor: pointer; padding: 3px 4px; font-family: var(--mono); color: var(--ink); }
.console-side details summary small { color: var(--muted); }
.console-side ul { list-style: none; margin: 2px 0 6px 14px; padding: 0; font: 12px/1.5 var(--mono); color: var(--ink-2); }
.console-side li span { color: var(--muted); }
.console-side li[title] { cursor: help; }
.console-side .peek { margin: 2px 0 6px 14px; font-size: 11px; padding: 2px 8px; border: 1px solid var(--line-2); background: none; color: var(--brand); border-radius: 6px; }
.console-side .hist { display: block; width: 100%; text-align: left; margin-bottom: 6px; padding: 6px 8px; border: var(--border); background: var(--code-bg); color: var(--code-ink);
  font: 11px/1.4 var(--mono); border-radius: 6px; white-space: pre-wrap; max-height: 80px; overflow: hidden; }
.console-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.console-run { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: var(--border); }
.console-info { margin-left: auto; font: 12px var(--mono); color: var(--muted); }
.console-feedback { padding: 10px 14px; font-size: 14px; border-bottom: var(--border); }
.console-feedback.ok { background: var(--ok-soft); color: var(--ok); }
.console-feedback.ko { background: var(--ko-soft); color: var(--ko); }
.console-feedback[hidden] { display: none; }
.console-result { flex: 1; overflow: auto; }
.console-result .empty { padding: 30px; text-align: center; color: var(--muted); font-size: 14px; }
.backdrop { display: none; }

/* CodeMirror aux couleurs du site */
.CodeMirror-gutters { background: var(--code-bg); border-right: 1px solid rgba(148,163,184,.14); }
.CodeMirror-linenumber { color: var(--com); }
.CodeMirror-cursor { border-left: 2px solid var(--brand); }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: rgba(45,196,194,.22) !important; }
.cm-s-default .cm-keyword { color: var(--kw); font-weight: 600; } .cm-s-default .cm-string { color: var(--str); }
.cm-s-default .cm-number { color: var(--num); } .cm-s-default .cm-comment { color: var(--com); font-style: italic; }
.cm-s-default .cm-builtin, .cm-s-default .cm-variable-2 { color: var(--fn); } .cm-s-default .cm-operator { color: var(--code-ink); }
.cm-s-default .cm-atom { color: var(--num); } .cm-s-default .cm-variable-3, .cm-s-default .cm-type { color: var(--fn); }
.CodeMirror-matchingbracket { color: var(--brand) !important; text-decoration: underline; }
.CodeMirror-hints { z-index: 60; font: 13px var(--mono); background: var(--panel); border: var(--border); }
.CodeMirror-hint { color: var(--ink); } li.CodeMirror-hint-active { background: var(--brand); color: var(--brand-ink); }

/* Écrans moyens et mobiles */
@media (max-width: 1200px) { .layout { grid-template-columns: 270px minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .menu-btn { display: inline-block; }
  .sidebar { position: fixed; z-index: 45; top: 60px; left: 0; width: min(320px, 86vw); background: var(--bg); transform: translateX(-102%); transition: transform .25s; }
  .sidebar.open { transform: none; }
  .backdrop.on { display: block; position: fixed; inset: 60px 0 0; z-index: 40; background: rgba(0,0,0,.45); }
  .content { padding: 24px 16px 0; }
  .console { width: 100vw; }
  .console-side { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; background: var(--panel); width: 78%; }
  .console-body { position: relative; }
}
@media (max-width: 560px) {
  .topbar { padding: 0 10px; gap: 8px; }
  .sitenav a:first-child { font-size: 0; gap: 0; }
  .topbar { gap: 6px; }
  .sitenav { flex: 1; min-width: 0; gap: 6px; }
  .sitenav a:last-of-type { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions { gap: 6px; flex-shrink: 0; }
  /* mêmes pastilles rondes (38 px) et mêmes icônes que les autres pages de data-workers.com */
  .theme-switch, .lang-switch { width: 38px; height: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
  html[data-theme="light"] .theme-switch, html[data-theme="light"] .lang-switch { border-radius: 2px; }
  .theme-switch { font-size: 0; }
  .theme-switch::before { content: ''; width: 19px; height: 19px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
  html[data-theme="light"] .theme-switch::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.5 14.6A8.6 8.6 0 0 1 9.4 3.5a8.6 8.6 0 1 0 11.1 11.1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.5 14.6A8.6 8.6 0 0 1 9.4 3.5a8.6 8.6 0 1 0 11.1 11.1z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .lang-switch { font-size: 12px; text-decoration: none; }
  .console-btn { padding: 6px 10px; }
  .pager { grid-template-columns: 1fr; }
  .chapter h2 { font-size: 22px; }
  .question { padding: 14px; }
}

/* Boutons sur une ligne, y compris sur mobile */
.sql-actions { flex-wrap: wrap; }
.sql-actions button, .console-btn, .switch { white-space: nowrap; }
@media (max-width: 560px) {
  .console-btn { font-size: 0; }
  .console-btn::after { content: '⌨ SQL'; font-size: 13px; }
  .sql-actions .check { font-size: 0; }
  .sql-actions .check::after { content: '✓ Vérifier'; font-size: 13px; }
  html[lang="en"] .sql-actions .check::after { content: '✓ Check'; }
}
@media (max-width: 400px) {
  .console-btn::after { content: 'SQL'; font-size: 12px; }
  .topbar { padding: 0 8px; gap: 5px; }
  .sitenav { gap: 5px; font-size: 13px; }
  .sitenav span { display: none; }
  .menu-btn, .console-btn { padding: 6px 8px; }
  .theme-switch, .lang-switch { width: 34px; height: 34px; }
}

/* Extrait gratuit */
.sample-tag { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
html[data-theme="light"] .sample-tag { border-radius: 2px; }
.chapters a.locked { opacity: .55; }
.chapters a.locked:hover { opacity: .9; }
.nav-lock { font-size: 11px; }
.cta-btn { display: inline-block; margin-top: 4px; padding: 10px 18px; border-radius: 10px; background: var(--accent); color: #fff !important; font-weight: 700; text-decoration: none; }
html[data-theme="light"] .cta-btn { border-radius: 2px; box-shadow: 3px 3px 0 #1d1b19; }
.cta-btn:hover { filter: brightness(1.08); }
.cta-achat { margin-top: -30px; }
@media (max-width: 560px) { .sample-tag { display: none; } }

/* Console sur mobile : en-tête compact, croix de fermeture toujours visible */
@media (max-width: 560px) {
  .console-head { gap: 8px; padding: 8px 10px; }
  .console-hint { display: none; }
  .console-status { font-size: 0; }
  .console-status.ready::before { font-size: 12px; }
  .console-tools { gap: 4px; }
  .console-tools button { padding: 5px 8px; font-size: 12px; }
  .console-close { font-size: 14px !important; padding: 5px 10px !important; }
  .console-run { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .console-run kbd { display: none; }
  .console-info { margin-left: 0; width: 100%; }
}