/* Présentation minimaliste : du texte noir sur fond blanc, en chasse fixe, comme le fichier .txt
   de 1997 ouvert dans un navigateur. Le thème sombre ne s'applique que si on le choisit dans le menu
   (data-theme="dark") : le réglage du système n'y change rien. */
:root {
	--ink: #000000;
	--paper: #ffffff;
	--dim: #555555; /* 7,4:1 sur blanc */
	--font: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
	color-scheme: light;
}
:root[data-theme="dark"] { --ink: #ffffff; --paper: #000000; --dim: #aaaaaa; /* 9:1 sur noir */ color-scheme: dark; }

* { box-sizing: border-box; }
/* L'attribut hidden doit l'emporter sur les display des classes (.btn, .row…). */
[hidden] { display: none !important; }

html { background: var(--paper); }
body {
	margin: 0 auto;
	max-width: calc(80ch + 2rem);
	padding: 1rem 1rem 3rem;
	background: var(--paper);
	color: var(--ink);
	font: 15px/1.5 var(--font);
	-webkit-text-size-adjust: 100%;
}
@media (min-width: 720px) { body { font-size: 16px; padding-top: 1.5rem; } }

a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
a:hover, a:focus-visible { background: var(--ink); color: var(--paper); text-decoration: none; outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* En-tête : le titre à gauche, les pages à droite. */
header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 2ch; margin-bottom: 2rem; }
header .site { font-weight: bold; text-decoration: none; }
header nav { display: flex; flex-wrap: wrap; gap: 0 2ch; }
header nav a[aria-current="page"] { text-decoration: none; font-weight: bold; }
header nav a[aria-current="page"]::before { content: "["; }
header nav a[aria-current="page"]::after { content: "]"; }

section { margin: 0 0 2.5rem; }
h1, h2, h3 { font-size: 1em; line-height: 1.5; font-weight: bold; margin: 0 0 1rem; }
h2 { text-transform: uppercase; letter-spacing: .05em; }
p, pre, ul, table { margin: 0 0 1rem; }
.dim { color: var(--dim); }
.prose { max-width: 72ch; }

/* L'en-tête centré du fichier original. */
.title { text-align: center; margin: 0 0 1.5rem; }
.title strong { text-transform: uppercase; letter-spacing: .05em; }

.rule { overflow: hidden; white-space: nowrap; margin: 0; color: var(--dim); user-select: none; }
.rule::after { content: "--------------------------------------------------------------------------------------------------------------------------------"; }

/* Lignes à points de conduite, comme dans le fichier texte. Les points sont posés derrière la
   première ligne ; le nom et le prix les masquent avec la couleur du fond. Si le nom passe à la
   ligne, le prix reste sur la première ligne, comme dans l'original. */
.list { list-style: none; padding: 0; margin: 0; overflow-anchor: none; } /* sinon « Afficher 60 de plus » garde le bouton à l'écran et cache les lignes ajoutées */
.list .row { display: block; overflow: hidden; background: var(--paper); color: var(--ink); }
.list .row::before {
	float: left; width: 0; white-space: nowrap; color: var(--dim); user-select: none;
	content: "........................................................................................................................................................................................................";
}
.list .name { background: inherit; padding-right: 1ch; -webkit-box-decoration-break: clone; box-decoration-break: clone; overflow-wrap: anywhere; position: relative; }
.list .price { float: right; background: inherit; padding-left: 1ch; white-space: nowrap; position: relative; }
.list button.row { all: unset; box-sizing: border-box; display: block; overflow: hidden; width: 100%; cursor: pointer; background: var(--paper); color: var(--ink); }
.list button.row:hover, .list button.row:focus-visible, .list button.row[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.list button.row:hover::before, .list button.row:focus-visible::before, .list button.row[aria-expanded="true"]::before { color: var(--paper); }
.list .head { display: flex; justify-content: space-between; color: var(--dim); }

/* La fiche d'un objet s'ouvre sous sa ligne. */
.detail { border-left: 2px solid var(--ink); margin: .5rem 0 1rem; padding: .25rem 0 .25rem 2ch; }
.detail h3 { margin-bottom: .25rem; }
.detail p:last-child, .detail table:last-child { margin-bottom: 0; }

/* Champs et boutons : traits noirs, rien d'autre. */
.field { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1ch; margin: 0 0 .75rem; }
.field label { flex: 0 0 9ch; }
input, select, .btn {
	font: inherit;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 0;
	padding: .25rem 1ch;
	min-width: 0;
}
input, select { flex: 1 1 24ch; }
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); }
input::placeholder { color: var(--dim); opacity: 1; }
.btn { cursor: pointer; display: inline-block; text-decoration: none; line-height: inherit; }
.btn:hover, .btn:focus-visible, .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem 1ch; margin: 1rem 0; }

kbd { font: inherit; border: 1px solid var(--dim); padding: 0 .4ch; }
/* Les raccourcis clavier ne servent à rien sur un écran tactile. */
.keys { color: var(--dim); }
@media (hover: none), (pointer: coarse) { .keys { display: none; } }

pre, code { font: inherit; }
pre { overflow-x: auto; }

table { border-collapse: collapse; }
th, td { text-align: left; padding: 0 2ch .25rem 0; vertical-align: top; }
th { font-weight: normal; color: var(--dim); }
.scroll { overflow-x: auto; }
/* Sur petit écran, le tableau des points d'accès passe en liste. */
@media (max-width: 600px) {
	.endpoints tr:first-child { display: none; }
	.endpoints tr, .endpoints td { display: block; padding: 0; }
	.endpoints tr { margin-bottom: .75rem; }
	.endpoints td + td { color: var(--dim); }
}

footer { color: var(--dim); max-width: 72ch; }

.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wide { max-width: calc(84ch + 2rem); }

/* Langue des noms d'objets. */
.lang { display: inline-flex; }
.lang::before { content: "|"; color: var(--dim); margin-right: .5ch; }
.lang button { all: unset; cursor: pointer; padding: 0 .5ch; }
.lang button[aria-pressed="true"] { font-weight: bold; }
.lang button[aria-pressed="true"]::before { content: "["; }
.lang button[aria-pressed="true"]::after { content: "]"; }
.lang button:hover, .lang button:focus-visible { background: var(--ink); color: var(--paper); }

button.link { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }
button.link:hover, button.link:focus-visible { background: var(--ink); color: var(--paper); text-decoration: none; }
a.plain { text-decoration: none; }

.field-hint { margin: -.25rem 0 .75rem calc(9ch + 1ch); }
@media (max-width: 600px) { .field-hint { margin-left: 0; } }
.note { color: var(--dim); margin: .1rem 0 .5rem 2ch; }
.detail .note { margin-left: 0; color: inherit; }
.links { margin-top: .75rem; }
.no-notes .note, .no-notes .mark { display: none; }

/* Le sac : bandeau d'un sac reçu par lien. */
.shared { border: 1px solid var(--ink); padding: .5rem 1ch 0; margin: 0 0 1rem; }
.shared .actions { margin: .5rem 0; }

/* Tableaux : rubriques, sous-objets en retrait, colonne des poids. */
.list .group { font-weight: bold; margin-top: .5rem; }
.list li.sub > .row { padding-left: 2ch; }
.list .weight { float: right; width: 7ch; text-align: right; background: inherit; position: relative; }
.list .head .weight { display: inline-block; float: none; }
.list a.row { text-decoration: none; }
.list a.row:hover, .list a.row:focus-visible, .list li:target > .row { background: var(--ink); color: var(--paper); }
.list a.row:hover::before, .list a.row:focus-visible::before, .list li:target > .row::before { color: var(--paper); }
.list li:target > .row a { color: inherit; }
.list .row.strong, .list .row.total, .list button.row.picked { font-weight: bold; }
.crumbs { margin-bottom: .5rem; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2ch; margin-top: 1.5rem; }

/* Le texte brut. */
pre.txt { font-size: 14px; line-height: 1.4; overflow-x: auto; margin: 0; }
pre.txt .hit { background: var(--ink); color: var(--paper); }
@media (max-width: 600px) { pre.txt { font-size: 12px; } }

.print-only { display: none; }

/* Impression : noir sur blanc, sans les commandes, les points de conduite gardés. */
@media print {
	:root, :root[data-theme] { --ink: #000000; --paper: #ffffff; --dim: #444444; color-scheme: light; }
	@page { margin: 1.5cm; }
	html, body { background: #ffffff; }
	body { max-width: none; padding: 0; font-size: 10pt; }
	header nav, .actions, .keys, .filters, .field, .field-hint, .pager, .crumbs, .intro, .controls .prose, .lang, footer, #hint { display: none !important; }
	header { margin-bottom: 1rem; }
	section { margin-bottom: 1rem; }
	.print-only { display: block; }
	.controls, .qty, [data-minus], [data-plus], .no-print, .shared { display: none !important; }
	.list button.row.picked { font-weight: normal; }
	h1, h2 { margin-bottom: .5rem; }
	.list .row, .list .row *, .list .row::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.list .row, .list .row:hover, .list .row:focus-visible, .list li:target > .row { background: #ffffff !important; color: #000000 !important; }
	.list .row::before { color: #444444 !important; }
	.list li, .detail { break-inside: avoid; }
	a { text-decoration: none; }
	pre.txt { font-size: 8.5pt; white-space: pre-wrap; }
	pre.txt .hit { background: none; color: inherit; font-weight: bold; }
}