/* --------- Thème & variables --------- */
:root{
  /* Couleurs communes (mode clair par défaut) */
  --bg:#ffffff;
  --text:#111;
  --muted:#6b7280;
  --brand:#0ea5e9;
  --panel:#f6f7f8;
  --panel-alt:#ffffff;
  --ring:#dbeafe;

  /* Code & surbrillance (clair) */
  --code-inline-bg:#f3f4f6;
  --code-block-bg:#e7ecf3; /* un peu plus sombre que inline pour contraster */
  --neon:#bbf7d0;          /* vert tendre */
  --neon-glow:rgba(187,247,208,.45);

  color-scheme: light;
}

[data-theme="dark"]{
  --bg:#0b0b0c;
  --text:#f3f4f6;
  --muted:#9ca3af;
  --brand:#38bdf8;
  --panel:#0f1115;
  --panel-alt:#0d0f12;
  --ring:#0b2530;

  /* Code & surbrillance (sombre) */
  --code-inline-bg:#1f2937;
  --code-block-bg:#111827;
  --neon:#86efac;
  --neon-glow:rgba(134,239,172,.55);

  color-scheme: dark;
}

/* --------- Reset & structure --------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
header,footer{background:var(--panel);padding:1rem 1.25rem;border-bottom:1px solid rgba(0,0,0,.06)}
footer{border-top:1px solid rgba(0,0,0,.06); border-bottom:none}
main{max-width:980px;margin:0 auto;padding:1.25rem}
nav.breadcrumbs{font-size:.9rem;color:var(--muted);margin:.25rem 0 .5rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
h1{font-size:1.6rem;margin:.2rem 0 .5rem}
h2{margin-top:1.25rem}

/* --------- Blocs de citation --------- */
blockquote{border-left:4px solid var(--brand);padding:.5rem .75rem;margin:.75rem 0;background:var(--panel-alt)}

/* --------- Listes & petites UI --------- */
ul,ol{padding-left:1.2rem}
kbd{background:#111;color:#fff;padding:.1rem .3rem;border-radius:.2rem;font-size:.85em}

/* --------- Formulaire de recherche --------- */
form.search{display:flex;gap:.5rem;align-items:center;margin:.5rem 0 0}
form.search input[type="search"]{flex:1;min-width:200px;padding:.5rem .6rem;border:1px solid var(--muted);border-radius:.5rem;background:var(--bg);color:var(--text);outline:none}
form.search input[type="search"]:focus{box-shadow:0 0 0 3px var(--ring);border-color:var(--brand)}
form.search button{padding:.5rem .75rem;border:1px solid var(--brand);background:transparent;color:var(--brand);border-radius:.5rem;cursor:pointer}

/* --------- Grille sommaire --------- */
.toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.75rem;margin-top:1rem}
.card{background:var(--panel);padding:1rem;border:1px solid rgba(0,0,0,.06);border-radius:.75rem}
.card h3{margin:.2rem 0 .4rem;font-size:1.05rem}
.meta{font-size:.85rem;color:var(--muted)}
.actions{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.actions a{padding:.4rem .6rem;border:1px solid var(--brand);border-radius:.5rem}
.note{color:var(--muted);font-size:.9rem}
hr.sep{border:none;border-top:1px solid rgba(0,0,0,.08);margin:1.25rem 0}
.encadre{background:var(--panel-alt);border-left:4px solid var(--brand);padding:.75rem 1rem;margin:.75rem 0}
.hidden{display:none !important}

/* --------- Mise en valeur <mark> & sélection --------- */
mark{ background:#fde68a; color:#111; padding:0 .15em; border-radius:.2em }
[data-theme="dark"] mark{ background:#b45309; color:#fff }
::selection{ background: var(--brand); color:#fff }

/* --------- Bouton de thème --------- */
.theme-toggle{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .6rem; border:1px solid var(--brand);
  background:transparent; color:var(--brand);
  border-radius:.5rem; cursor:pointer; font:inherit
}

/* --------- Code inline --------- */
code{
  background:var(--code-inline-bg);
  color:inherit;
  padding:.2em .4em;
  border-radius:.3em;
  font-size:.95em;
  border:1px solid var(--neon);
  box-shadow:0 0 3px var(--neon), 0 0 6px var(--neon-glow);
}

/* --------- Bloc de code --------- */
pre{
  background:var(--code-block-bg);
  color:inherit;
  padding:1em;
  border-radius:.5em;
  overflow-x:auto;
  border:1px solid var(--neon);
  font-size:.95em;
  box-shadow:0 0 5px var(--neon), 0 0 12px var(--neon-glow);
}
pre code{
  background:none;
  color:inherit;
  padding:0;
  border-radius:0;
  border:none;
  box-shadow:none;
}