/* Site public d'Ici Montsou — habillage 3615.
   Les titres et étiquettes sont en VT323 (vidéotex) ; le texte courant est en
   IBM Plex Mono, parce qu'une police pixel ne se lit pas sur un paragraphe. */
:root {
  --noir: #000; --fond: #0b0b0e; --bleu: #2d4bff; --rouge: #ff3b3b; --magenta: #ff4fd8;
  --vert: #39e75f; --cyan: #3ee6ff; --jaune: #ffe23e; --blanc: #f4f4f4; --gris: #9a9aa6;
  --vt: "VT323", ui-monospace, monospace;
  --txt: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--fond); }
body { background: var(--fond); color: var(--blanc); font: 16px/1.55 var(--txt); min-height: 100vh; }
a { color: var(--cyan); }
a:hover { color: var(--jaune); }
button, input, textarea { font: inherit; color: inherit; }

.bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 16px;
  background: var(--bleu); border-bottom: 4px solid var(--blanc); }
.logo { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--blanc); }
.logo .n3615 { font: 28px var(--vt); color: var(--jaune); }
.logo .nom { font: 700 30px/1 "Playfair Display", serif; }
.devise { font: 22px var(--vt); letter-spacing: 3px; color: var(--cyan); flex: 1; }
.bandeau nav a { font: 22px var(--vt); letter-spacing: 1px; color: var(--noir); background: var(--jaune);
  padding: 2px 10px; text-decoration: none; display: inline-block; }
.mosaique { height: 14px; background:
  linear-gradient(90deg, var(--bleu) 0 8%, transparent 8% 11%, var(--cyan) 11% 17%, transparent 17% 21%,
  var(--vert) 21% 30%, transparent 30% 33%, var(--jaune) 33% 41%, transparent 41% 45%, var(--rouge) 45% 52%,
  transparent 52% 55%, var(--magenta) 55% 64%, transparent 64% 68%, var(--cyan) 68% 74%, transparent 74% 79%,
  var(--vert) 79% 85%, transparent 85% 89%, var(--jaune) 89% 95%, transparent 95%); }

main { max-width: 1240px; margin: 0 auto; padding: 24px 16px 60px; }
footer { text-align: center; padding: 24px 16px 40px; font: 20px var(--vt); color: var(--gris); }
footer a { color: var(--gris); }

/* page vidéotex : un cadre blanc, une barre de couleur */
.vtx { background: var(--noir); border: 3px solid var(--blanc); margin-bottom: 20px; }
.vtx > :not(.barre) { margin-left: 16px; margin-right: 16px; }
.vtx > :last-child { margin-bottom: 16px; }
.barre { display: flex; justify-content: space-between; gap: 12px; padding: 1px 12px;
  font: 24px/1.3 var(--vt); letter-spacing: 1px; color: var(--noir); margin-bottom: 12px; }
.barre.bleu { background: var(--bleu); color: var(--blanc); }
.barre.rouge { background: var(--rouge); } .barre.magenta { background: var(--magenta); }
.barre.vert { background: var(--vert); } .barre.cyan { background: var(--cyan); }
.barre.jaune { background: var(--jaune); } .barre.blanc { background: var(--blanc); }
.barre .ecran { color: var(--rouge); background: var(--noir); padding: 0 6px; margin-left: 8px; }
.gros { font-size: 18px; }
.vide { color: var(--gris); font-style: italic; }
.intro { color: #d8d8e0; margin-bottom: 14px; }

.direct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; padding: 12px 16px;
  border: 3px solid var(--blanc); margin-bottom: 20px; font: 26px var(--vt); }
.direct.on { border-color: var(--rouge); } .direct.on .lbl { color: var(--rouge); }
.direct.off .lbl { color: var(--cyan); }
.direct .val { color: var(--jaune); font-size: 34px; text-decoration: none; }
.clignote { animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .clignote { animation: none; } }

.sommaire { display: flex; flex-direction: column; }
.ligne { display: grid; grid-template-columns: 48px 1fr; gap: 0 12px; padding: 10px 0;
  border-top: 1px dashed #333; text-decoration: none; color: var(--blanc); }
.ligne:hover { background: #111; }
.ligne .num { font: 30px/1 var(--vt); color: var(--magenta); grid-row: span 2; }
.ligne .titre { font: 30px/1.05 var(--vt); color: var(--jaune); }
.ligne .info { font-size: 14px; color: var(--gris); }
.ligne.statut-archive .titre { color: var(--gris); }

.entete-dossier { margin-bottom: 18px; }
.entete-dossier .lbl { font: 22px var(--vt); color: var(--cyan); letter-spacing: 2px; }
.entete-dossier h1 { font: 52px/1 var(--vt); color: var(--jaune); margin: 4px 0 8px; }
.entete-dossier .description { max-width: 70ch; color: #d8d8e0; }

.colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .colonnes { grid-template-columns: 1fr; } }

.piece .contenu .titre { font-weight: 600; margin-bottom: 4px; }
.piece .qui, .questions .qui { color: var(--cyan); font-size: 14px; }
.piece figure img, .source img { display: block; max-width: 100%; height: auto; }
.piece figcaption { color: var(--gris); font-size: 14px; margin-top: 4px; }
.source { display: grid; grid-template-columns: 160px 1fr; gap: 14px; }
.source:not(:has(img)) { grid-template-columns: 1fr; }
.source img { width: 160px; height: 100px; object-fit: cover; border: 2px solid var(--vert); }
.source .titre a { color: var(--blanc); font-weight: 600; }
.source .site { color: var(--vert); font-size: 14px; }
@media (max-width: 560px) { .source { grid-template-columns: 1fr; } .source img { width: 100%; height: auto; } }
.credit { color: var(--gris); font-size: 13px; margin-top: 6px; }

details.commentaires { margin-top: 10px; border-top: 1px dashed #333; padding-top: 6px; }
details summary { cursor: pointer; color: var(--gris); font-size: 14px; }
.commentaires ul, .coms { list-style: none; margin: 8px 0; }
.commentaires li, .coms li { padding: 4px 0; border-bottom: 1px dotted #222; }
.commentaires li b, .coms li b { color: var(--vert); font-weight: 600; margin-right: 6px; }

.questions { list-style: none; }
.questions li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dotted #333; }
.vote { font: 22px var(--vt); background: none; border: 2px solid var(--magenta); color: var(--magenta);
  padding: 0 6px; cursor: pointer; height: fit-content; text-align: center; }
span.vote { cursor: default; }
.vote.fait { background: var(--magenta); color: var(--noir); }
.emissions { list-style: none; }
.emissions > li { margin-bottom: 10px; }
.emissions .titre { color: var(--jaune); font: 22px var(--vt); }
.emissions ul { list-style: none; font-size: 14px; }
.emissions b { color: var(--cyan); font-weight: 400; }

form.contrib { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
form.contrib textarea, form.contrib input { background: #0f0f14; border: 2px solid #555; padding: 8px; width: 100%; }
form.contrib textarea:focus, form.contrib input:focus { outline: none; border-color: var(--cyan); }
form.contrib button, .page button { align-self: flex-start; font: 22px var(--vt); background: var(--vert); color: var(--noir);
  border: none; padding: 2px 14px; cursor: pointer; }
.page button.danger { background: var(--rouge); }
.retour { font-size: 14px; color: var(--vert); }
.retour.erreur { color: var(--rouge); }
.note-modo, .connecte-toi { font-size: 13px; color: var(--gris); margin-top: 8px; }
.signaler { background: none; border: none; color: #666; cursor: pointer; font-size: 13px; }
.signaler:hover { color: var(--rouge); }

.page p { margin-bottom: 12px; }
.texte h2 { font: 26px var(--vt); color: var(--cyan); margin: 14px 0 4px; }
.texte p { max-width: 75ch; }
.mes-contribs { list-style: none; }
.mes-contribs li { padding: 10px 0; border-bottom: 1px dotted #333; }
.mes-contribs button { background: none; border: 2px solid var(--rouge); color: var(--rouge); font: 18px var(--vt); padding: 0 8px; }

.nouveau { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); font: 24px var(--vt);
  background: var(--jaune); color: var(--noir); border: 3px solid var(--noir); padding: 4px 18px; cursor: pointer; z-index: 5; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }