/* docs.agregation-physique.org — feuille de style (recherche + visualiseur).
   Parti pris : sobre mais soigné. Palette retenue (ardoise + un bleu d'accent),
   typographie lisible, espacements généreux, transitions discrètes. */

:root {
  --accent:#1f5673;          /* bleu ardoise profond */
  --accent-2:#2e86ab;        /* bleu d'accent (liens, focus) */
  --accent-soft:#e8f1f6;     /* fond d'accent très clair */
  --hl:#ffe9a8;              /* surlignage recherche */
  --bg:#f4f5f7;
  --card:#ffffff;
  --border:#e4e7eb;
  --border-strong:#cdd3da;
  --text:#1f2429;
  --muted:#6b7480;
  --code-bg:#0d1117;
  --radius:10px;
  --radius-sm:6px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow-lg:0 4px 16px rgba(16,24,40,.10);
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:"Inter", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--accent-2); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── En-tête ─────────────────────────────────────────── */
header {
  position:sticky; top:0; z-index:20; background:var(--card);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow);
  padding:16px 22px;
}
.brand { display:flex; align-items:baseline; gap:12px; margin:0 0 12px; flex-wrap:wrap; }
.brand h1 {
  font-size:1.15rem; margin:0; color:var(--accent); font-weight:700;
  letter-spacing:-.01em;
}
.brand .sub { font-size:.82rem; color:var(--muted); }
.controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#q {
  flex:1; min-width:260px; font-size:1rem; padding:11px 15px;
  border:1px solid var(--border-strong); border-radius:var(--radius); outline:none;
  background:#fff; transition:border-color .15s, box-shadow .15s;
}
#q::placeholder { color:#9aa2ad; }
#q:focus { border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(46,134,171,.15); }
button {
  font-size:.84rem; padding:9px 13px; border:1px solid var(--border-strong);
  background:#fff; color:var(--text); border-radius:var(--radius);
  cursor:pointer; transition:background .13s, border-color .13s;
}
button:hover { background:#f3f5f7; border-color:var(--muted); }
button:active { background:#e9edf1; }
#count { font-size:.84rem; color:var(--muted); white-space:nowrap; margin-left:auto; }
.scopes { margin-top:11px; display:flex; gap:20px; font-size:.85rem; color:#414b56; }
.scopes label { cursor:pointer; user-select:none; display:flex; align-items:center; gap:7px; }
.scopes input { accent-color:var(--accent-2); width:15px; height:15px; }

/* ── Arbre ───────────────────────────────────────────── */
main { padding:16px 22px 80px; max-width:1120px; margin:0 auto; }
ul { list-style:none; margin:0; padding-left:20px; }
#tree > ul { padding-left:2px; }
li.dir > .row { font-weight:600; cursor:pointer; user-select:none; color:#2b333c; }
li.dir > .row::before {
  content:""; display:inline-block; width:0; height:0; margin-right:9px;
  border-left:5px solid var(--muted); border-top:4px solid transparent;
  border-bottom:4px solid transparent; transition:transform .12s; vertical-align:middle;
}
li.dir.open > .row::before { transform:rotate(90deg); }
li.dir > ul { display:none; }
li.dir.open > ul { display:block; }
.row {
  padding:4px 8px; border-radius:var(--radius-sm); line-height:1.55;
  display:flex; align-items:center; flex-wrap:wrap; gap:3px 9px;
  transition:background .1s;
}
.row:hover { background:var(--accent-soft); }
li.file .name { color:#23364a; font-weight:500; }
li.file a.name:hover { text-decoration:underline; }
.path { flex-basis:100%; font-size:.71rem; color:#9aa2ad; margin-left:1.4em; word-break:break-all; }
.snip {
  flex-basis:100%; font-size:.76rem; color:var(--muted); margin-left:1.4em;
  word-break:break-word; font-style:italic; padding:2px 0;
}
.snip::selection { background:var(--hl); }
.actions { display:inline-flex; gap:6px; }
.act {
  font-size:.71rem; padding:2px 9px; border-radius:999px; border:1px solid var(--border-strong);
  background:#fff; color:var(--accent-2); cursor:pointer; transition:all .12s; white-space:nowrap;
}
.act:hover { background:var(--accent-2); color:#fff; border-color:var(--accent-2); text-decoration:none; }
.thumb {
  vertical-align:middle; max-height:96px; max-width:128px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:#fff; box-shadow:var(--shadow); padding:2px;
}
mark { background:var(--hl); padding:0 2px; border-radius:3px; color:inherit; }
.hidden { display:none !important; }
#status {
  color:var(--muted); padding:28px; font-style:italic; text-align:center;
}
footer {
  position:fixed; bottom:0; right:0; font-size:.7rem; color:#9aa2ad;
  padding:5px 10px; background:#fff; border-top-left-radius:var(--radius-sm);
  border:1px solid var(--border); border-right:none; border-bottom:none;
}

/* ── Visualiseur ─────────────────────────────────────── */
.viewer-header {
  position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow); padding:13px 22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.viewer-header .fname { font-weight:650; color:var(--accent); word-break:break-all; }
.viewer-header .spacer { flex:1; }
.viewer-body { max-width:1000px; margin:0 auto; padding:22px; }
.viewer-body pre {
  background:var(--code-bg); border-radius:var(--radius); padding:18px; overflow:auto;
  font-size:.86rem; line-height:1.5; box-shadow:var(--shadow);
}
.viewer-body pre code { font-family:"SF Mono", "JetBrains Mono", Consolas, monospace; }
.viewer-body img.full {
  max-width:100%; height:auto; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); background:#fff;
}
.viewer-body embed, .viewer-body iframe {
  width:100%; height:86vh; border:1px solid var(--border);
  border-radius:var(--radius); background:#fff; box-shadow:var(--shadow);
}

/* ── Notebook ────────────────────────────────────────── */
.nb-cell {
  border:1px solid var(--border); border-radius:var(--radius); margin:14px 0; overflow:hidden;
  background:var(--card); box-shadow:var(--shadow);
}
.nb-cell .nb-in { background:#f7f9fb; border-bottom:1px solid var(--border); }
.nb-cell .nb-in pre { margin:0; border-radius:0; box-shadow:none; }
.nb-md { padding:16px 20px; }
.nb-md > :first-child { margin-top:0; }
.nb-md > :last-child { margin-bottom:0; }
.nb-md h1,.nb-md h2,.nb-md h3 { color:var(--accent); letter-spacing:-.01em; }
.nb-md code { background:var(--accent-soft); padding:1px 5px; border-radius:4px; font-size:.9em; }
.nb-md pre { background:var(--code-bg); }
.nb-out { padding:12px 20px; border-top:1px dashed var(--border); font-size:.88rem; }
.nb-out pre { background:#f7f9fb; color:#1f2429; box-shadow:none; border:1px solid var(--border); }
.nb-out img { max-width:100%; height:auto; border-radius:var(--radius-sm); }
.nb-label {
  font-size:.66rem; color:var(--muted); padding:5px 14px; font-family:monospace;
  letter-spacing:.04em; text-transform:uppercase;
}

@media (max-width:640px) {
  header, main, .viewer-body { padding-left:14px; padding-right:14px; }
  #count { margin-left:0; }
}