/* homedc.ch — terminal phosphore. Une feuille, zéro script, zéro ressource externe. Lisible dans lynx. */
:root { --bg:#030604; --fg:#b8c8b6; --dim:#6f7f6d; --green:#39ff6a; --green2:#1fbf4d; --amber:#ffb000; --line:#17301c; --glow:rgba(57,255,106,.45) }
* { box-sizing:border-box }
html { background:var(--bg); color:var(--fg); font:15px/1.55 ui-monospace,"DejaVu Sans Mono","Liberation Mono","Courier New",monospace; -webkit-text-size-adjust:100% }
body { margin:0; padding:1.4rem 1rem 3rem; max-width:92ch; margin-inline:auto; position:relative }
/* CRT : lignes de balayage + vignette, décoratif, jamais interactif */
.crt { position:fixed; inset:0; pointer-events:none; z-index:10;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%) }
a { color:var(--green); text-decoration:underline dotted; text-underline-offset:3px }
a:hover, a:focus { color:var(--bg); background:var(--green); text-decoration:none; outline:0; text-shadow:none }
pre { margin:0; white-space:pre; overflow-x:auto; tab-size:4 }
/* tout ce qui porte du texte se replie : jamais de défilement horizontal (seules la bannière et les logos restent figés) */
pre.unit, pre.box, pre.man, pre.specs, pre.boot { white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:visible }
b { color:var(--green); font-weight:700 }
.dim { color:var(--dim) } .ok { color:var(--green) } .info { color:var(--amber) }
/* séquence de démarrage : les lignes s'allument une à une */
.boot { color:var(--dim); font-size:.86em; line-height:1.4; margin-bottom:1.2rem }
.boot .l { display:block }
body.anim .boot .l { opacity:0; animation:allume .02s steps(1) forwards; animation-delay:calc(.25s + var(--i) * .28s) }
@keyframes allume { to { opacity:1 } }
/* bannière phosphore */
.banner { color:var(--green); text-shadow:0 0 2px var(--green), 0 0 10px var(--glow), 0 0 28px rgba(57,255,106,.18); font-size:14px; line-height:1.15; overflow:visible; padding-bottom:.4em; animation:respire 4s ease-in-out infinite }
body.anim .banner { opacity:0; animation:allume .02s steps(1) forwards 2.5s, respire 4s ease-in-out 2.5s infinite }
@keyframes respire { 50% { text-shadow:0 0 2px var(--green), 0 0 14px var(--glow), 0 0 40px rgba(57,255,106,.28) } }
.tagline { margin:1rem 0 .3rem; font-size:1.05em; color:var(--amber) }
.type { display:inline-block; white-space:nowrap; overflow:hidden; max-width:100%; vertical-align:bottom; border-right:1ch solid transparent }
body.anim .type { width:0; animation:tape 2s steps(41) forwards 2.9s, curseur 1s steps(1) infinite }
@keyframes tape { to { width:41ch } } @keyframes curseur { 50% { border-right-color:var(--green) } }
.meta { color:var(--dim); margin:0 0 1.2rem }
.prompt::after, .cursor::after { content:"█"; color:var(--green); animation:blink 1.1s steps(1) infinite; margin-left:.2ch }
@keyframes blink { 50% { opacity:0 } }
/* navigation */
nav { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.55rem 0; margin:0 0 1.8rem; color:var(--dim) }
nav a { margin-right:1.1rem; text-decoration:none } nav a[aria-current] { color:var(--amber) }
/* sections : titre « ──[ titre ]────────── » */
section { margin:2.4rem 0 }
h2 { display:flex; align-items:center; gap:.6ch; font-size:1em; font-weight:700; color:var(--amber); margin:0 0 1rem; text-shadow:0 0 8px rgba(255,176,0,.25) }
h2::before { content:"──[ "; color:var(--dim); white-space:pre } h2::after { content:" ]"; color:var(--dim); white-space:pre; flex:1; border-bottom:1px dashed var(--line); margin-bottom:.55em; margin-left:.2ch }
h2::after { content:" ]──"; }
p { max-width:80ch }
/* fiche « neofetch » */
.fetch { display:grid; grid-template-columns:auto auto; justify-content:center; align-items:center; gap:2.8rem; margin:0 0 1.6rem }
.logo { color:var(--green); text-shadow:0 0 8px var(--glow); font-size:.9em; line-height:1.15 }
.specs { line-height:1.5 }
@media (max-width:640px) { .fetch { grid-template-columns:1fr; justify-content:start } .logo { display:none } }
/* page de manuel */
.man { border:1px solid var(--line); padding:1rem 1.2rem; background:rgba(57,255,106,.03); font-size:.92em; line-height:1.45 }
.man .hd { color:var(--dim) } .man .opt { color:var(--green) }
/* tableau systemctl */
.units { border-collapse:collapse; width:100%; font-size:.92em }
.units th { text-align:left; color:var(--dim); font-weight:400; padding:.25rem .9rem .25rem 0; border-bottom:1px solid var(--line) }
.units td { padding:.3rem .9rem .3rem 0; vertical-align:top; border-bottom:1px dashed var(--line) }
.units td:first-child::before { content:"● "; color:var(--green) }
.units td:nth-child(3) { color:var(--green) }
.unit { border-left:2px solid var(--line); padding:.4rem 0 .4rem 1rem; margin:1.2rem 0; line-height:1.45 }
.box { border:1px solid var(--line); padding:.8rem 1rem; margin:1rem 0; background:rgba(57,255,106,.03) }
footer { margin-top:3rem; border-top:1px solid var(--line); padding-top:.8rem; color:var(--dim); font-size:.92em }
footer a { color:var(--green) }
@media (max-width:640px) { .type, body.anim .type { white-space:normal; width:auto; animation:none; border-right:0 } .banner { font-size:8.5px } body { padding:1rem .8rem 2rem } nav a { display:inline-block; margin:.2rem 1rem .2rem 0 } .man { font-size:.8em; padding:.7rem } .units { font-size:.8em } .units th:nth-child(2), .units td:nth-child(2), .units th:nth-child(4), .units td:nth-child(4) { display:none } }
@media (prefers-reduced-motion: reduce) { body.anim .boot .l, body.anim .banner, body.anim .type { animation:none; opacity:1; width:auto } .banner, .prompt::after, .cursor::after { animation:none } .type { border-right:0 } }

/* accessibilité : titre lu mais invisible, lien d'évitement visible au clavier */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip { position:absolute; left:-999px; top:.5rem; background:var(--green); color:var(--bg); padding:.4rem .8rem; z-index:20; text-decoration:none }
.skip:focus { left:1rem }
/* impression : noir sur blanc, sans effets */
@media print { .crt, .boot, .skip { display:none } html { background:#fff; color:#000 } body { max-width:none } a, b, .ok, .opt, h2, .logo, .banner { color:#000; text-shadow:none } .banner { animation:none } .info { color:#000 } }

/* barre d'état façon tmux */
.tmux { position:fixed; left:0; right:0; bottom:0; z-index:15; background:var(--green2); color:var(--bg); font-size:.86em; line-height:1.9; padding:0 .8rem; white-space:nowrap; overflow:hidden; display:flex; gap:1.2ch }
.tmux a { color:var(--bg); text-decoration:none } .tmux a.cur { background:var(--bg); color:var(--green); padding:0 .6ch } .tmux a:hover, .tmux a:focus { background:var(--bg); color:var(--green) }
.tmux .sess { font-weight:700 } .tmux .droite { margin-left:auto }
.tmux .led { display:inline-block; width:.7em; height:.7em; border-radius:50%; background:var(--bg); box-shadow:0 0 6px var(--green); animation:blink 2.2s steps(1) infinite; vertical-align:-1px }
body { padding-bottom:3.2rem }
@media (max-width:640px) { .tmux .droite { display:none } }
@media print { .tmux { display:none } }
/* QR et vache */
.qrf { margin:1rem 0 } .qr { display:inline-block; line-height:1; font-size:.9em; color:var(--fg); background:#fff; color:#000; padding:.5em .6ch; border:3px solid #fff }
.qrf figcaption { color:var(--dim); font-size:.9em; margin-top:.4rem }
.cow { color:var(--green); white-space:pre; overflow-x:auto }

/* la baie se remplit : tiroir par tiroir, du bas vers le haut, puis la LED s'allume (CSS seul) */
.logo .u { display:block; opacity:.12 }
body.anim .logo .u { animation:remplir .4s ease-out forwards; animation-delay:calc(3.4s + var(--n) * .32s) }
@keyframes remplir { 0% { opacity:.12; transform:translateX(-.6ch) } 60% { opacity:1; transform:none; text-shadow:0 0 14px var(--green), 0 0 30px var(--glow) } 100% { opacity:1; transform:none; text-shadow:0 0 8px var(--glow) } }
.logo .led2::before { content:"●"; color:var(--dim) }
body.anim .logo .led2::before { animation:led2 .3s steps(1) 5.5s forwards, blink 1.6s steps(1) 5.8s infinite }
@keyframes led2 { to { color:var(--amber); text-shadow:0 0 8px var(--amber) } }
@media (prefers-reduced-motion: reduce) { .logo .u, body.anim .logo .u { opacity:1; animation:none } body.anim .logo .led2::before { animation:none; color:var(--amber) } }