/* 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; }

/* ── Fil d'Ariane (navigation dans les dossiers) ─────── */
.fil {
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px;
  padding:8px 10px; margin:0 0 10px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.85rem;
}
.fil-seg { color:var(--accent-2); cursor:pointer; }
.fil-seg.fil-courant { color:var(--text); font-weight:600; cursor:default; }
.fil-sep { color:var(--muted); }

/* ── 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; user-select:none; color:#2b333c; }
/* Flèche : plier/déplier sur place (clic ciblé, pas tout le row). */
.caret {
  display:inline-block; width:14px; height:14px; flex:0 0 auto; cursor:pointer;
  position:relative; border-radius:3px;
}
.caret::before {
  content:""; position:absolute; top:50%; left:4px; transform:translateY(-50%);
  width:0; height:0; border-left:5px solid var(--muted);
  border-top:4px solid transparent; border-bottom:4px solid transparent; transition:transform .12s;
}
.caret:hover { background:var(--accent-soft); }
li.dir.open > .row > .caret::before { transform:translateY(-50%) rotate(90deg); }
/* Nom de dossier : ENTRER dedans (clic). */
.dname { cursor:pointer; }
.dname:hover { text-decoration:underline; }
li.dir > ul { display:none; }
li.dir.open > ul { display:block; }
/* Navigation « entrer dans un dossier » : les maillons du chemin courant sont ouverts
   mais leur titre est masqué (on ne montre que le contenu du dossier courant), et on
   annule l'indentation accumulée pour obtenir une vraie vue à plat. */
li.dir.nav-chain > .row { display:none; }
li.dir.nav-chain > ul { padding-left:0; }
.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; }
.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); }
/* le terme trouvé dans l'extrait : surligné, lisible (pas en italique) */
.snip mark { font-style:normal; font-weight:600; }
.snip-toggle {
  font-style:normal; font-size:.72rem; color:var(--accent-2); cursor:pointer;
  white-space:nowrap; user-select:none;
}
.snip-toggle:hover { text-decoration:underline; }
.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;
  cursor:zoom-in; transition:box-shadow .12s, transform .12s;
}
.thumb:hover { box-shadow:var(--shadow-lg); transform:scale(1.02); }
.scopes label.sep { margin-left:auto; padding-left:20px; border-left:1px solid var(--border); }
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);
}

/* Mode embed (viewer chargé dans la lightbox) : pleine surface, image centrée. */
body.embed { height:100vh; overflow:hidden; }
body.embed .viewer-body { max-width:none; height:100vh; padding:14px;
  display:flex; align-items:center; justify-content:center; }
body.embed .viewer-body img.full { max-height:100%; box-shadow:none; }
body.embed .viewer-body embed { height:100%; box-shadow:none; }
/* code / notebook : on garde le défilement naturel, juste plein cadre */
body.embed .viewer-body:has(.nb-cell), body.embed .viewer-body:has(pre) {
  display:block; overflow:auto; align-items:initial; }

/* ── 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;
}

/* ── Lightbox ────────────────────────────────────────── */
.lightbox {
  position:fixed; inset:0; z-index:100; background:rgba(15,20,26,.82);
  display:flex; align-items:center; justify-content:center; padding:34px 22px 22px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.lightbox[hidden] { display:none; }
.lb-stage {
  width:min(1100px,96vw); height:92vh; display:flex; align-items:center; justify-content:center;
}
.lb-frame {
  width:100%; height:100%; border:none; border-radius:var(--radius);
  background:#fff; box-shadow:var(--shadow-lg);
}
.lb-close {
  position:absolute; top:10px; right:14px; width:38px; height:38px; padding:0;
  font-size:1.5rem; line-height:1; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer; transition:background .12s;
}
.lb-close:hover { background:rgba(255,255,255,.28); }
.lb-dl {
  position:absolute; top:14px; left:18px; z-index:101;
  background:#fff; box-shadow:var(--shadow);
}

@media (max-width:640px) {
  header, main, .viewer-body { padding-left:14px; padding-right:14px; }
  #count { margin-left:0; }
  .scopes label.sep { margin-left:0; border-left:none; padding-left:0; }
  .lb-stage { width:100vw; height:90vh; }
}

/* ── Portail : barre d'onglets commune (Documents / Wikipédia / Sites autorisés) ──────────
   Injectée par portail.js en tête de <body>, avant le <header> existant. Sticky au-dessus
   de l'en-tête du site docs (qui est lui aussi sticky : on empile proprement). */
.portail-tabs {
  position:sticky; top:0; z-index:30;
  background:var(--accent); color:#fff;
  box-shadow:var(--shadow);
}
.portail-tabs-inner {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  max-width:1200px; margin:0 auto; padding:0 22px;
}
.portail-titre {
  font-weight:700; font-size:.95rem; letter-spacing:.01em;
  padding:10px 0; margin-right:6px; opacity:.95;
}
.portail-tabs-list { display:flex; gap:2px; }
.portail-tab {
  display:inline-block; padding:12px 16px;
  color:#fff; text-decoration:none; font-size:.92rem; font-weight:600;
  border-bottom:3px solid transparent; transition:background .12s, border-color .12s;
}
.portail-tab:hover { background:rgba(255,255,255,.12); text-decoration:none; }
.portail-tab.is-active {
  border-bottom-color:#fff; background:rgba(255,255,255,.10);
}
/* Quand la barre d'onglets est présente, l'en-tête du site docs ne doit plus coller à 0
   (sinon il recouvre la barre) : on le décale sous les onglets. Hauteur de barre ≈ 44px. */
.portail-tabs ~ header { top:44px; }

@media (max-width:640px) {
  .portail-tabs-inner { padding:0 14px; gap:8px; }
  .portail-titre { width:100%; padding:8px 0 0; }
  .portail-tab { padding:10px 12px; }
}