/* Archives d'AMADEUSE — un terminal : noir, gris de phosphore, rouge AMADEUSE, cadres en traits fins */
:root {
	--fond: #050505;
	--texte: #c8c8c8;
	--pale: #8a8a8a;
	--faible: #4a4a4a;
	--rouge: #c70202;
	--rouge-vif: #ff2a1f;
	--ok: #96be96;
	--alerte: #d7b45a;
	--mem: #8ca0be;
	--med: #78c8be;
	--blanc: #f2f2f2;
	--police: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
	color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte); font: 15px/1.5 var(--police); }
body { overflow: hidden; }
::selection { background: var(--rouge); color: #000; }
a { color: var(--blanc); text-decoration: none; }
a:hover, a:focus-visible { color: #000; background: var(--blanc); outline: none; }
kbd { font: inherit; color: var(--pale); }
button, input, select, textarea { font: inherit; color: inherit; }

#ecran {
	height: 100%; display: grid; gap: 10px; padding: 14px;
	grid-template-columns: minmax(220px, 280px) 1fr;
	grid-template-rows: auto 1fr auto auto;
	grid-template-areas: "barre barre" "menu vue" "commande commande" "pied pied";
}

/* barre d'état */
#barre { grid-area: barre; display: flex; gap: 18px; align-items: center; background: var(--rouge); color: #000; padding: 3px 10px; font-weight: 700; }
#barre .titre { flex: 1; letter-spacing: .04em; }
#barre button { background: transparent; border: 1px solid #000; color: #000; font-weight: 700; padding: 0 8px; cursor: pointer; }
#barre button:hover { background: #000; color: var(--rouge); }

/* cadres : fieldset + legend = ┌─ TITRE ─┐ */
.boite { border: 1px solid var(--faible); margin: 0; padding: 8px 12px 12px; min-width: 0; }
.boite > legend { padding: 0 6px; color: var(--pale); font-weight: 600; letter-spacing: .05em; }
.boite.rouge { border-color: var(--rouge); }
.boite.rouge > legend { color: var(--rouge-vif); }

#menu { grid-area: menu; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
#menu a { display: block; padding: 2px 6px; }
#menu a.actif { background: var(--blanc); color: #000; }
#menu a.actif kbd { color: #000; }
#menu a.cache { display: none; }
#journal-boite { flex: 1; min-height: 0; overflow: hidden; }
#journal { font-size: 13px; color: var(--pale); display: flex; flex-direction: column; justify-content: flex-end; height: 100%; overflow: hidden; }
#journal div { white-space: pre-wrap; }

#vue { grid-area: vue; overflow: auto; min-height: 0; outline: none; scrollbar-color: var(--faible) transparent; }
#vue:focus-visible { outline: 1px dashed var(--faible); }

#commande { grid-area: commande; display: flex; gap: 10px; align-items: center; border: 1px solid var(--faible); padding: 4px 10px; }
#commande label { color: var(--blanc); font-weight: 700; white-space: nowrap; }
#saisie { flex: 1; background: transparent; border: 0; outline: 0; caret-color: var(--blanc); min-width: 0; }
#pied { grid-area: pied; color: #000; background: #2a2a2a; color: var(--pale); padding: 2px 10px; font-size: 13px; }

/* contenu */
h1, h2, h3, h4 { font-weight: 700; margin: .8em 0 .4em; letter-spacing: .03em; }
h1 { font-size: 1.35em; color: var(--blanc); }
h2 { font-size: 1.15em; color: var(--blanc); }
h3, h4 { font-size: 1em; color: var(--blanc); }
p { margin: .5em 0; }
hr { border: 0; border-top: 1px dashed var(--faible); margin: 1em 0; }
blockquote, .citation { border-left: 2px solid var(--rouge); margin: .8em 0; padding: .2em 0 .2em 1em; color: var(--texte); }
table { border-collapse: collapse; margin: .6em 0; width: 100%; }
td, th { border: 1px solid var(--faible); padding: 3px 8px; text-align: left; vertical-align: top; }
th { color: var(--blanc); }
img { max-width: 100%; height: auto; filter: grayscale(.4) contrast(1.1); border: 1px solid var(--faible); }
ul, ol { padding-left: 1.6em; }
code, tt { color: var(--alerte); }
.centre { text-align: center; }
.clignote { animation: clignote 1.2s steps(2) infinite; }
.surligne { background: var(--blanc); color: #000; padding: 0 4px; }
.alerte, .erreur { color: var(--rouge-vif); }
.ok { color: var(--ok); }
.ambre { color: var(--alerte); }
.pale { color: var(--pale); }
.mem { color: var(--mem); }
.badge { border: 1px solid currentColor; padding: 0 5px; font-size: .9em; }
.noirci { background: var(--texte); color: var(--texte); user-select: none; }
.caviar { background: #000; color: #000; border-bottom: 1px solid var(--faible); cursor: help; }
.caviar:hover { color: var(--texte); background: #1a1a1a; }

details { border: 1px solid var(--faible); margin: .6em 0; padding: 0 10px; }
details > summary { cursor: pointer; color: var(--blanc); padding: 4px 0; list-style: none; }
details > summary::before { content: "[+] "; color: var(--pale); }
details[open] > summary::before { content: "[-] "; }

.onglets .barre-onglets { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--faible); margin-top: .6em; }
.onglets .barre-onglets button { background: transparent; border: 1px solid var(--faible); border-bottom: 0; padding: 2px 12px; cursor: pointer; color: var(--pale); }
.onglets .barre-onglets button[aria-selected="true"] { background: var(--blanc); color: #000; }
.onglets .panneau-onglet { padding-top: .4em; }

/* listes navigables au clavier */
.liste { display: flex; flex-direction: column; }
.ligne { display: grid; gap: 14px; padding: 2px 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne > span { overflow: hidden; text-overflow: ellipsis; }
.ligne:hover, .ligne:focus { background: var(--blanc); color: #000; outline: none; }
.ligne:focus::before { content: "▶"; position: absolute; margin-left: -14px; }
.ligne.entete { color: var(--pale); cursor: default; border-bottom: 1px solid var(--faible); }
.ligne.entete:hover { background: none; color: var(--pale); }
.mort { color: var(--rouge-vif); }

.grille-fiche { display: grid; grid-template-columns: max-content 1fr; gap: 2px 18px; }
.grille-fiche dt { color: var(--pale); }
.grille-fiche dd { margin: 0; color: var(--blanc); }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.filtres { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* formulaires façon terminal */
input.champ, select.champ, textarea.champ { background: #000; border: 1px solid var(--faible); padding: 4px 8px; width: 100%; outline: none; }
input.champ:focus, select.champ:focus, textarea.champ:focus { border-color: var(--blanc); }
textarea.champ { min-height: 280px; resize: vertical; line-height: 1.5; }
.formulaire { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; align-items: center; }
.formulaire label { color: var(--pale); }
.formulaire .plein { grid-column: 1 / -1; }
.bouton { background: transparent; border: 1px solid var(--blanc); color: var(--blanc); padding: 3px 14px; cursor: pointer; letter-spacing: .05em; }
.bouton:hover, .bouton:focus-visible { background: var(--blanc); color: #000; outline: none; }
.bouton.rouge { border-color: var(--rouge-vif); color: var(--rouge-vif); }
.bouton.rouge:hover { background: var(--rouge); color: #000; }
.code { font-size: 2em; letter-spacing: .5em; text-transform: uppercase; text-align: center; max-width: 420px; }

/* apparition ligne à ligne */
.apparait > * { animation: apparait .28s steps(4) both; }
@keyframes apparait { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes clignote { 50% { opacity: .2; } }
.curseur::after { content: "█"; animation: clignote 1s steps(2) infinite; margin-left: 2px; }

/* phosphore : balayage, vignette, scintillement, décrochage */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; }
body::before { background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
body::after { background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.65) 100%); }
#ecran { text-shadow: 0 0 2px rgba(200,200,200,.25); animation: scintille 6s infinite; }
@keyframes scintille { 0%, 97%, 100% { opacity: 1; } 98% { opacity: .93; } 99% { opacity: .98; } }
body.decroche #ecran { animation: decroche .22s steps(3) 1; text-shadow: -2px 0 rgba(255,0,0,.55), 2px 0 rgba(0,220,255,.45); }
@keyframes decroche { 0% { transform: translate(0); } 33% { transform: translate(-4px, 1px); } 66% { transform: translate(3px, -1px); } 100% { transform: translate(0); } }

#voile[hidden] { display: none; }
#voile { position: fixed; inset: 0; z-index: 40; background: #000; display: flex; align-items: center; justify-content: center; padding: 20px; }
#voile .boite { max-width: 720px; width: 100%; background: #000; }

@media (max-width: 760px) {
	html, body { font-size: 14px; }
	#ecran { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; grid-template-areas: "barre" "menu" "vue" "commande"; padding: 8px; gap: 8px; }
	#menu .boite:first-child { display: flex; flex-wrap: wrap; gap: 2px 8px; }
	#menu a { padding: 0 4px; }
	#journal-boite, #pied, #horloge { display: none; }
	#barre { flex-wrap: wrap; gap: 6px 12px; }
	.ligne { grid-template-columns: 1fr !important; white-space: normal; }
	.ligne > span:not(:first-child):not(.garde) { display: none; }
	.formulaire { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.apparait > *, #ecran, .clignote, .curseur::after { animation: none !important; }
}

/* explorateur : trois colonnes qui défilent chacune de leur côté */
#vue.plein { overflow: hidden; }
.explorateur { display: grid; grid-template-columns: minmax(210px, 250px) minmax(260px, 380px) 1fr; gap: 10px; height: 100%; min-height: 0; }
.colonne { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 6px 8px 8px; }
.colonne > .defile { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-color: var(--faible) transparent; scrollbar-width: thin; }
.entree { display: flex; justify-content: space-between; gap: 10px; padding: 4px 6px; color: var(--texte); border-left: 2px solid transparent; }
.entree-texte { display: flex; flex-direction: column; min-width: 0; }
.entree-texte > span { overflow-wrap: anywhere; }
.entree small { color: var(--pale); font-size: 12px; }
.entree-droite { color: var(--pale); white-space: nowrap; }
.entree:hover, .entree:focus { background: #161616; color: var(--blanc); outline: none; border-left-color: var(--pale); }
.entree.actif { background: var(--blanc); color: #000; border-left-color: var(--rouge); }
.entree.actif small, .entree.actif .entree-droite { color: #333; }
.entree.retour { color: var(--pale); }
.entree.mort, .entree.mort small { color: var(--rouge-vif); }
.entree.actif.mort { background: var(--rouge); color: #000; }
.entree.bloque > .entree-texte > span::before { content: "[█] "; color: var(--rouge-vif); }
.entree.corrompu { color: var(--rouge-vif); font-style: italic; }
.entree.corrompu:hover { animation: clignote .4s steps(2) 2; }
.description { margin: 2px 6px 10px; font-size: 13px; }
.apercus { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.apercu { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid #222; color: var(--texte); }
.apercu:hover, .apercu:focus { border-color: var(--pale); background: #111; color: var(--blanc); }
.apercu span { font-size: 13px; }
.sous-onglets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.sous-onglets a { border: 1px solid var(--faible); padding: 0 6px; font-size: 13px; color: var(--pale); }
.sous-onglets a.actif { background: var(--blanc); color: #000; }
.page-wiki { overflow-wrap: break-word; }
@media (max-width: 1100px) {
	.explorateur { grid-template-columns: minmax(180px, 220px) 1fr; }
	.explorateur > .colonne:nth-child(3) { grid-column: 1 / -1; min-height: 60vh; }
	#vue.plein { overflow: auto; }
	.explorateur { height: auto; }
	.colonne { max-height: 70vh; }
}
@media (max-width: 760px) {
	.explorateur { grid-template-columns: 1fr; }
	.colonne { max-height: none; }
}
.groupe-titre { color: var(--rouge-vif); font-size: 12px; letter-spacing: .08em; margin: 10px 6px 4px; border-bottom: 1px solid #2a0000; }
.groupe-titre:first-child { margin-top: 2px; }
.entree.avant { color: var(--pale); }
pre.terminal { background: #000; border: 1px solid var(--faible); padding: 8px 10px; white-space: pre-wrap; color: var(--ok); }
table.fiche td:first-child { white-space: nowrap; width: 1%; color: var(--pale); }

/* introduction : l'emblème, le titre, le code de connexion */
#intro { position: fixed; inset: 0; z-index: 45; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; overflow: hidden; }
#intro.sortie { animation: intro-sortie .6s cubic-bezier(.7, 0, .9, .4) forwards; }
@keyframes intro-sortie { 0% { transform: scaleY(1); filter: brightness(1); } 60% { transform: scaleY(.006); filter: brightness(3); } 100% { transform: scale(0, .006); filter: brightness(5); } }
.intro-journal { position: absolute; top: 18px; left: 22px; font-size: 12px; color: var(--faible); white-space: pre; line-height: 1.45; }
.intro-centre { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(640px, 100%); }
.intro-embleme { position: relative; width: min(260px, 52vw); aspect-ratio: 1195 / 1230; opacity: 0; }
.intro-embleme img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: none; }
.intro-embleme .principal { filter: drop-shadow(0 0 1px #ff2a1f) drop-shadow(0 0 22px rgba(199, 2, 2, .55)) brightness(1.6); }
.intro-embleme .rouge-c { filter: brightness(0) saturate(100%) invert(14%) sepia(97%) saturate(7400%) hue-rotate(358deg); opacity: 0; }
.intro-embleme .cyan-c { filter: brightness(0) saturate(100%) invert(80%) sepia(60%) saturate(2000%) hue-rotate(140deg); opacity: 0; }
#intro.allume .intro-embleme { animation: allume 1.1s steps(1) forwards; }
@keyframes allume { 0% { opacity: 0; } 8% { opacity: .9; } 12% { opacity: 0; } 22% { opacity: 1; } 26% { opacity: .2; } 34%, 100% { opacity: 1; } }
#intro.allume .rouge-c { animation: chroma-r 3.8s infinite; }
#intro.allume .cyan-c { animation: chroma-c 3.8s infinite; }
@keyframes chroma-r { 0%, 86%, 100% { opacity: 0; transform: none; } 88% { opacity: .75; transform: translate(-7px, 1px); clip-path: inset(18% 0 52% 0); } 91% { opacity: .6; transform: translate(5px, -2px); clip-path: inset(60% 0 12% 0); } 94% { opacity: 0; } }
@keyframes chroma-c { 0%, 87%, 100% { opacity: 0; transform: none; } 89% { opacity: .6; transform: translate(6px, -1px); clip-path: inset(30% 0 40% 0); } 92% { opacity: .5; transform: translate(-4px, 2px); clip-path: inset(70% 0 5% 0); } 95% { opacity: 0; } }
#intro.allume .principal { animation: tranche 3.8s infinite; }
@keyframes tranche { 0%, 86%, 100% { transform: none; } 88% { transform: translateX(4px) skewX(-3deg); } 90% { transform: translateX(-3px); } 92% { transform: none; } }
.intro-titre { margin: 4px 0 0; font-size: clamp(30px, 6vw, 58px); letter-spacing: .32em; color: var(--blanc); text-indent: .32em; min-height: 1.2em; text-shadow: 0 0 18px rgba(199, 2, 2, .45); }
.intro-sous { margin: 0; color: var(--rouge-vif); letter-spacing: .18em; font-size: 13px; min-height: 1.4em; text-align: center; }
.intro-code { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; width: 100%; }
.intro-code label { color: var(--pale); letter-spacing: .14em; font-size: 13px; }
.intro-code input { width: min(380px, 100%); background: #000; border: 1px solid var(--faible); border-bottom: 2px solid var(--rouge); color: var(--blanc);
	font-size: clamp(22px, 4vw, 32px); letter-spacing: .3em; text-align: center; padding: 6px 10px; outline: none; caret-color: var(--rouge-vif); text-transform: uppercase; }
.intro-code input:focus { border-color: var(--pale); border-bottom-color: var(--rouge-vif); box-shadow: 0 0 24px rgba(199, 2, 2, .25); }
.intro-code input.refus { animation: refus .35s; border-color: var(--rouge-vif); }
@keyframes refus { 20% { transform: translateX(-10px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.intro-message { min-height: 1.4em; margin: 0; font-size: 13px; text-align: center; }
.intro-accueil { color: var(--ok); letter-spacing: .1em; text-align: center; margin-top: 18px; }
.intro-pied { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--faible); margin: 0; padding: 0 16px; }
.intro-pied code { color: var(--pale); }
.intro-visite { background: none; border: 0; color: var(--pale); text-decoration: underline; cursor: pointer; padding: 0; font-size: 12px; }
.intro-visite:hover, .intro-visite:focus-visible { color: var(--blanc); outline: none; }
#intro .apparition { animation: apparait .35s steps(4) both; }
@media (prefers-reduced-motion: reduce) { #intro *, #intro { animation: none !important; } .intro-embleme { opacity: 1; } }
#intro [hidden] { display: none !important; }