/* copyparty — habillage « famille ». Chargé après browser.css par css-browser,
   par-dessus le thème 1 (classic light). Les variables sont posées sur
   html[class] et body : copyparty définit les siennes sur html.<thème>, plus
   spécifique qu'un simple :root (leçon du 21/09 — la première version perdait
   toutes ses variables et laissait Times New Roman). Rendu vérifié par
   captures Chrome sans écran sur le Pi. */

html[class], body {
  --font-main: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "DejaVu Sans Mono", monospace;
  --bg: #f4f4f1; --bg-u1: #fff; --bg-u2: #fafaf8; --bg-u3: #f4f4f1; --bg-u4: #fff; --bg-u5: #e6e6e2; --bg-u6: #e6e6e2;
  --bg-max: #fff; --tree-bg: #f4f4f1; --row-alt: #f7f7f4;
  --fg: #2a2a2a; --fg-max: #111; --fg-weak: #707070;
  --a: #1f5f8b; --a-b: #1f5f8b; --a-hil: #174a6d; --a-dark: #1f5f8b; --a-gray: #aaa;
  --btn-fg: #444; --btn-h-fg: #111; --btn-h-bg: #e3ecf3; --btn-1-fg: #fff; --btn-1-bg: #1f5f8b; --btn-1h-bg: #174a6d;
  --btn-bs: none; --btn-1-bs: none; --op-aa-sh: none; --op-a-sh: none; --txt-sh: transparent;
  --sort-1: #1f5f8b; --sort-2: #1f5f8b; --sz-b: #707070; --sz-k: #707070; --srv-1: #999; --srv-2: #999; --srv-3: #999;
  --f-sel-sh: #1f5f8b; --g-sh: none;
}
html, body { font-family: var(--font-main); font-size: 15px; line-height: 1.4; }

/* barre d'outils : icônes grisées, colorées au survol ; sans cadre */
#ops { background: transparent; box-shadow: none; border: 0; padding: .3em 0; }
#ops a { filter: grayscale(1) opacity(.55); border: 0; box-shadow: none; border-radius: 8px; padding: .3em .55em; margin: 0 .1em; }
#ops a:hover, #ops a.act { filter: none; background: var(--btn-h-bg); }
#ops a.act { box-shadow: inset 0 -2px 0 var(--a); border-radius: 0; }

/* arborescence */
#tree { border: 0; background: transparent; }
#tree a { border: 0; border-radius: 6px; box-shadow: none; }
#tree a.hl { background: var(--btn-h-bg); color: var(--fg); }

/* tableau des fichiers */
#files { border-collapse: collapse; }
#files th { font-weight: 600; color: var(--fg-weak); background: transparent; border: 0; border-bottom: 1px solid #ddd; padding: .5em .7em; }
#files td { border: 0; border-bottom: 1px solid #ececea; padding: .5em .7em; background: transparent; }
#files tr:nth-child(even) td { background: transparent; }
#files tr:hover td { background: #eef3f7; }
#files td.sz, #files td:nth-child(3) { font-family: var(--font-main); font-variant-numeric: tabular-nums; color: var(--fg-weak); }
#files td:nth-child(4), #files td:nth-child(5), #files td:nth-child(6) { color: var(--fg-weak); }
#files td:nth-child(6) a, #files td:nth-child(4) a { color: var(--fg-weak); }
#files td:first-child a { color: var(--a-gray); font-size: .85em; }
#files td:first-child a:hover { color: var(--a); }
#files a { text-decoration: none; }
#files a:hover { text-decoration: underline; }

/* README (markdown) : bannière sombre → titre simple */
#pro, #epi { font-family: var(--font-main); }
#pro h1, #epi h1, #pro h2, #epi h2, #pro h3, #epi h3 {
  background: transparent; color: var(--fg); border: 0; border-radius: 0; box-shadow: none;
  padding: .2em 0; margin: 1.2em 0 .5em; border-bottom: 1px solid #e0e0dc; font-weight: 600;
}
#pro h1, #epi h1 { font-size: 1.5em; }
#pro h1::before, #epi h1::before, #pro h1::after, #epi h1::after, #pro h2::before, #epi h2::before { display: none; content: none; }
#pro code, #epi code { background: #eeeeea; color: #333; border: 0; border-radius: 4px; padding: .05em .35em; }
#pro pre, #epi pre { background: #f0f0ec; color: #333; border: 0; border-radius: 6px; }

/* coin bas-droit (share / zip / lecteur) : sobre */
#widget, #wfp { background: rgba(255,255,255,.95); border: 1px solid #e0e0dc; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
#srv_info { color: #aaa; }

/* README rendu dans la page (no-sb-md) : classes réelles = #epi.mdo */
.mdo h1, .mdo h2, .mdo h3 {
  background: transparent !important; color: var(--fg) !important; border: 0; border-radius: 0; box-shadow: none;
  padding: .2em 0 !important; margin: 1.3em 0 .5em !important; border-bottom: 1px solid #e0e0dc; font-weight: 600; text-shadow: none;
}
.mdo h1 { font-size: 1.5em; } .mdo h2 { font-size: 1.25em; } .mdo h3 { font-size: 1.1em; }
.mdo h1::before, .mdo h1::after, .mdo h2::before, .mdo h2::after { display: none !important; content: none !important; }
.mdo code { background: #eeeeea; color: #333; border: 0; border-radius: 4px; padding: .05em .35em; }
.mdo pre { background: #f0f0ec; color: #333; border: 0; border-radius: 6px; padding: .8em 1em; }
.mdo pre code { background: transparent; padding: 0; }
.mdo a { color: var(--a); }
.mdo { max-width: 46em; line-height: 1.5; }

/* téléphone : le tableau doit tenir dans la largeur */
@media (max-width: 640px) {
  #files th:nth-child(5), #files td:nth-child(5) { display: none; }   /* colonne T */
  #files th:first-child, #files td:first-child { display: none; }     /* colonne c (zip / -txt-) */
  #files td, #files th { padding: .45em .4em; font-size: .92em; }
  #files td:nth-child(6) { white-space: normal; font-size: .85em; }
  #path { font-size: 1em; }
}

/* Navigation (control-panel · prev / up / next) : déplacée au-dessus de la
   liste par famille.js (les liens n'ont pas de conteneur dans le HTML de
   copyparty). Ici seulement leur habillage. */
#navhaut { display: flex; gap: .4em; flex-wrap: wrap; margin: .2em 0 .8em; }
#navhaut a { padding: .35em .8em; border: 1px solid #e0e0dc; border-radius: 6px; background: #fff; box-shadow: none; text-shadow: none; color: var(--a); }
#navhaut a:hover { background: var(--btn-h-bg); }
#navhaut a#goh { margin-right: .8em; }
#wrap > #repl { display: none; }   /* console π : pas pour la famille */

/* Barre d'outils en mots (famille.js remplace les emoji par des libellés) */
#ops a { filter: none; font-size: .92em; color: var(--fg-weak); }
#ops a:hover { color: var(--fg); }
#ops a.act { color: var(--a); }