/* Une salle d'archives mal eclairee, pas un tableau de bord.
 *
 * Le jeu se joue la nuit, dans un batiment ou quelqu'un est mort. L'interface
 * hors-jeu prepare a cela : fond sombre, ambre pour ce qui compte, rouge sourd
 * pour ce qui accuse. Les couleurs gardent le sens qu'elles avaient dans le
 * terminal (titres, a surveiller, favorable, hostile) — c'est la seule chose
 * de l'ancienne interface qui meritait d'etre transposee telle quelle. */

:root {
	--fond:        #0d0f13;
	--fond-carte:  #14171d;
	--fond-creux:  #1b1f27;
	--trait:       #2a303b;
	--texte:       #dfe3ea;
	--texte-faible:#8a93a3;
	--titre:       #f2cc66;   /* ambre : titres, ce qui structure */
	--intertitre:  #73ccdf;
	--bon:         #66d98a;
	--attention:   #f2b25c;
	--danger:      #ef6f6f;
	--focus:       #f2cc66;
}

* { box-sizing: border-box; }

/* L'attribut `hidden` n'est qu'un `display: none` de la feuille du navigateur :
 * n'importe quelle regle d'auteur qui pose un `display` le neutralise. Le
 * bandeau (`display: flex`) restait donc affiche sur l'ecran de connexion,
 * alors qu'il n'a rien a y faire. */
[hidden] { display: none !important; }

/* La page elle-meme ne defile JAMAIS. C'est l'ecran actif qui defile, dans sa
 * propre boite. Auparavant la hauteur du plein ecran etait calculee en
 * soustrayant une hauteur de bandeau ecrite en dur (49 px) : des que le
 * bandeau faisait un pixel de plus ou de moins, la page depassait, et l'on se
 * retrouvait avec DEUX barres de defilement — celle du fil, et une seconde qui
 * decalait tout de deux millimetres. Une colonne flex n'a pas ce probleme :
 * elle mesure, elle ne devine pas. */
html { height: 100%; }
body {
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Le fond portait un grain : une couche `position: fixed` plein ecran repetant
 * un degrade radial tous les 3 px. C'est un piege de rendu connu — le
 * navigateur rasterise des centaines de milliers de degrades, et recommence a
 * chaque defilement. Un simple degrade en haut de page donne la meme
 * profondeur pour rien, et ne se recalcule pas. */
body {
	background-image:
		radial-gradient(ellipse 90% 55% at 50% 0%, #171b22 0%, transparent 65%);
	background-repeat: no-repeat;
}

.ecran {
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 1.25rem;
	/* Chaque ecran occupe ce qui reste et defile CHEZ LUI. */
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

h1 { font-size: 1.6rem; margin: 0 0 .2rem; color: var(--titre); letter-spacing: .02em; }
h2 { font-size: 1.15rem; margin: 1.4rem 0 .5rem; color: var(--intertitre); }
h3 { font-size: .95rem; margin: 0 0 .25rem; }
p  { margin: .28rem 0; }

.discret { color: var(--texte-faible); font-size: .875rem; }
.erreur  { color: var(--danger); min-height: 1.4em; font-size: .9rem; }

/* ---------------------------------------------------------------- */
/* Formulaires                                                      */
/* ---------------------------------------------------------------- */

.carte {
	background: var(--fond-carte);
	border: 1px solid var(--trait);
	border-radius: 10px;
	padding: 1.05rem 1.2rem;
}

label { display: block; margin: .6rem 0 .22rem; font-size: .85rem; color: var(--texte-faible); }

input[type=text], input[type=password], input[type=number], select, textarea {
	width: 100%;
	padding: .6rem .7rem;
	background: var(--fond-creux);
	border: 1px solid var(--trait);
	border-radius: 6px;
	color: var(--texte);
	font: inherit;
}
/* Un signalement se redige : le champ doit pouvoir grandir vers le bas, mais
 * pas sur les cotes — une ligne de 200 caracteres ne se relit pas. */
textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }
input:focus, select:focus, textarea:focus, button:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
}

button {
	font: inherit;
	padding: .6rem 1.1rem;
	border-radius: 6px;
	border: 1px solid var(--trait);
	background: var(--fond-creux);
	color: var(--texte);
	cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--titre); }
button:disabled { opacity: .45; cursor: default; }

button.principal {
	background: var(--titre);
	border-color: var(--titre);
	color: #17130a;
	font-weight: 600;
}
button.discret-bouton { background: none; border: none; color: var(--texte-faible); padding: .3rem; }
button.discret-bouton:hover { color: var(--titre); }

.actions { display: flex; gap: .6rem; align-items: center; margin-top: .85rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- */
/* Listes choisissables                                             */
/* ---------------------------------------------------------------- */

.liste { display: grid; gap: .45rem; margin: .7rem 0; }

.item {
	width: 100%;
	text-align: left;
	padding: .7rem .9rem;
	background: var(--fond-carte);
	border: 1px solid var(--trait);
	border-radius: 8px;
	display: grid;
	gap: .25rem;
	cursor: pointer;
}
.item:hover { border-color: var(--titre); background: var(--fond-creux); }
.item .ligne { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.item .nom { font-weight: 600; }

/* Les etiquettes du menu terminal, mot pour mot : dire si la reponse est figee
 * ou tiree n'est pas un detail quand on choisit de rejouer. */
.etiquette {
	font-size: .72rem;
	padding: .1rem .45rem;
	border-radius: 4px;
	border: 1px solid currentColor;
	white-space: nowrap;
}
.etiquette.tirage    { color: var(--attention); }
.etiquette.sauvegarde{ color: var(--bon); }
.etiquette.resolue   { color: var(--bon); }

/* ---------------------------------------------------------------- */
/* Briefing                                                         */
/* ---------------------------------------------------------------- */

.dossier { border-left: 2px solid var(--trait); padding-left: 1rem; margin: 1rem 0; }
.dossier .cle { color: var(--texte-faible); }
.victime { color: var(--danger); font-weight: 600; }

.objectifs { list-style: none; padding: 0; margin: .5rem 0; }
.objectifs li { color: var(--attention); padding-left: 1.1rem; position: relative; }
.objectifs li::before { content: '›'; position: absolute; left: 0; }

.gens { display: grid; gap: .7rem; margin-top: .6rem; }
.gens .personne { padding-left: 1rem; border-left: 2px solid var(--trait); }
.gens .metier { color: var(--texte-faible); font-size: .875rem; }
.gens .description { font-size: .9rem; margin-top: .2rem; }
/* Tant que la personne ne s'est pas presentee, sa description reste absente —
 * et on le DIT, plutot que de laisser un blanc qu'on prendrait pour un oubli. */
.gens .inconnue { color: var(--texte-faible); font-style: italic; font-size: .85rem; }

/* ---------------------------------------------------------------- */
/* Barre de lancement                                               */
/* ---------------------------------------------------------------- */

.lancement { margin: 1.5rem 0; }
.lancement .libelle { color: var(--texte-faible); font-size: .9rem; min-height: 1.4em; }
.jauge {
	height: 6px;
	background: var(--fond-creux);
	border-radius: 3px;
	overflow: hidden;
	margin-top: .5rem;
}
.jauge .remplissage {
	height: 100%;
	width: 0;
	background: var(--titre);
	transition: width .4s ease;
}
/* Pendant un appel au modele, l'attente peut durer une minute : une barre
 * immobile passerait pour un plantage. */
.jauge.attente .remplissage {
	background: linear-gradient(90deg, var(--trait) 0%, var(--titre) 50%, var(--trait) 100%);
	background-size: 200% 100%;
	animation: glisse 1.4s linear infinite;
}
@keyframes glisse { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- */
/* Quota                                                            */
/* ---------------------------------------------------------------- */

.quota { display: grid; gap: .4rem; }
.quota .jauge .remplissage { background: var(--bon); }
.quota .jauge.bas .remplissage { background: var(--attention); }
.quota .jauge.vide .remplissage { background: var(--danger); }

.bandeau {
	/* Colle en haut : le briefing est long, et c'est precisement en le lisant
	 * qu'on veut garder sous les yeux ce qui reste de l'essai — et pouvoir
	 * atteindre les reglages pour y ajouter sa cle. */
	flex: none;
	z-index: 10;
	display: flex; justify-content: space-between; align-items: center;
	gap: 1rem; padding: .7rem 1.25rem;
	border-bottom: 1px solid var(--trait);
	background: var(--fond-carte);
	font-size: .875rem;
	flex-wrap: wrap;
}
/* Les deux moities du bandeau alignent leur contenu au centre. Elles etaient
 * en ligne : un bouton parmi du texte se posait sur la ligne de base, donc
 * legerement trop bas. */
.bandeau > span { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.bandeau .qui { color: var(--titre); font-weight: 600; }

/* « Accueil » n'est pas un lien de service comme les autres : c'est la sortie,
 * celle qu'on cherche quand on ne sait plus ou l'on est. En bouton discret il
 * se confondait avec le nom du compte juste a cote. Il garde donc un contour
 * et la couleur d'accent — sans etre plein, ce qui en ferait l'action
 * principale de chaque page. */
.bandeau #aller-accueil {
	flex: none;
	padding: .3rem .8rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--titre);
	border-color: color-mix(in srgb, var(--titre) 45%, transparent);
	background: color-mix(in srgb, var(--titre) 10%, transparent);
}
.bandeau #aller-accueil:hover {
	border-color: var(--titre);
	background: color-mix(in srgb, var(--titre) 20%, transparent);
}
/* Un peu d'air avant le nom du compte, sinon les deux se touchent. */
.bandeau #aller-accueil + .qui { margin-left: .4rem; }

@media (max-width: 560px) {
	.ecran { padding: 1.5rem 1rem 3rem; }
	.bandeau { padding: .6rem 1rem; }
}

/* ---------------------------------------------------------------- */
/* La partie                                                        */
/* ---------------------------------------------------------------- */

/* Une partie ouverte n'est jamais DEMONTEE quand on va ailleurs : elle passe
 * en coulisse. La cacher en display:none reduisait le canvas a 0x0 ; WebGL y
 * perdait son contenu, et l'on revenait sur un ecran noir alors que la scene
 * se portait bien — boucle en marche, camera a la bonne taille, tout en ordre
 * sauf l'image. Mesure : 0 couleur, 0x0 pixels au retour.
 *
 * En coulisse, elle garde exactement sa place et sa taille, mais ne se voit
 * pas et n'attrape rien. */
.en-coulisse {
	position: fixed !important;
	inset: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: -1;
}

.ecran.plein {
	max-width: none;
	padding: 0;
	position: relative;
	overflow: hidden;
}

/* Deux tiers / un tiers : la scene dit ou l'on est, le fil dit ce qui a ete
 * dit. Les bulles sont ephemeres par choix (D5) ; sans un fil visible en
 * permanence, ce choix obligeait a ouvrir le carnet pour relire une phrase
 * prononcee dix secondes plus tot. */
.plateau {
	display: grid;
	grid-template-columns: 2fr 1fr;
	/* Entetes, boites, barre de saisie. La rangee du milieu est BORNEE a la
	 * hauteur disponible : en « auto », elle grandit avec son contenu, le canvas
	 * mesure son parent, le parent grandit du canvas, et la scene gonfle a
	 * chaque retour dans la partie. */
	grid-template-rows: auto minmax(0, 1fr) auto;
	height: 100%;
}
.hud-haut { grid-column: 1; grid-row: 1; }
#scene    { grid-column: 1; grid-row: 2; min-height: 0; position: relative; overflow: hidden; }
/* Les discussions occupent les deux memes rangees que la carte : c'est la
 * grille qui garantit l'egalite des hauteurs, et non un calcul a la main. */
.cote-fil { grid-column: 2; grid-row: 1 / 3; }
/* La barre de saisie tient toute la largeur, sous les deux boites : elle
 * flottait auparavant par-dessus la scene et masquait le bas de la carte. */
.hud      { grid-column: 1 / 3; grid-row: 3; }
/* Hors du flux : le canvas prend la taille que la scene lui donne, et ne
 * participe jamais au calcul de la hauteur de son parent. */
#scene canvas { display: block; position: absolute; top: 0; left: 0; }

.cote-fil {
	border-left: 1px solid var(--trait);
	min-height: 0;
	background: var(--fond-carte);
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.fil-tete {
	padding: .7rem 1rem;
	border-bottom: 1px solid var(--trait);
	font-size: .9rem;
}
#j-fil { flex: 1; overflow-y: auto; padding: .8rem 1rem 1.2rem; font-size: .9rem; }

/* Le texte par-dessus la scene, jamais dedans (D4). */
/* La barre du dessus : la piece ou l'on se trouve, comme un cartouche de
 * plan. Elle etait en bas, melee a l'interlocuteur et aux boutons, et c'est
 * l'information qu'on cherche le plus souvent. */
.hud-haut {
	flex: none;
	padding: .5rem 1rem;
	background: var(--fond-carte);
	border-bottom: 1px solid var(--trait);
	color: var(--titre);
	font-size: .95rem;
	letter-spacing: .03em;
	min-height: 2.1rem;
}

.hud {
	flex: none;
	padding: .7rem 1rem .8rem;
	background: var(--fond-carte);
	border-top: 1px solid var(--trait);
}
.hud-ligne { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.hud-saisie { display: flex; gap: .6rem; }
.hud-saisie input { flex: 1; }

/* ---------------------------------------------------------------- */
/* Le carnet : plein ecran, onglets sur la tranche                   */
/* ---------------------------------------------------------------- */

.carnet {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	/* Le carnet ET ses onglets sont centres ENSEMBLE. La page se centrait
	 * auparavant toute seule (margin: 0 auto), ce qui la decollait de ses
	 * onglets : deux objets flottants au lieu d'un carnet. */
	justify-content: center;
	background: rgba(6, 7, 10, .82);
	padding: 2.5rem 1.5rem;
}

/* Un papier, pas une fenetre : le carnet est un objet du jeu. */
.carnet-page {
	flex: 1 1 900px;
	max-width: 900px;
	background: #16151230;
	background-color: #1a1815;
	border: 1px solid #3a352c;
	border-radius: 4px 10px 10px 4px;
	box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 22px 0 24px -22px rgba(0,0,0,.8);
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}
/* La reliure. */
.carnet-page::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 26px;
	background: repeating-linear-gradient(
		to bottom, transparent 0 26px, #2a2620 26px 28px);
	border-right: 1px solid #322d26;
}

.carnet-tete {
	display: flex; justify-content: space-between; align-items: center;
	padding: 1rem 1.5rem 1rem 3.2rem;
	border-bottom: 1px solid #322d26;
	color: var(--titre);
}
#j-panneau-corps {
	flex: 1;
	overflow-y: auto;
	padding: 1.2rem 1.5rem 1.2rem 3.2rem;
	color: #e8e2d4;
	line-height: 1.65;
}
.carnet-pied {
	display: flex; justify-content: space-between; align-items: center;
	padding: .6rem 1.5rem .6rem 3.2rem;
	border-top: 1px solid #322d26;
	font-size: .85rem;
}
.carnet-pied button[hidden] { visibility: hidden; display: inline-block; }

/* Les onglets depassent sur la tranche, comme des intercalaires : colles a la
 * page, et glisses d'un pixel dessous pour que la bordure soit commune. */
.carnet-onglets {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding-top: 2rem;
	margin-left: -1px;
	flex: none;
}
.carnet-onglets .onglet {
	writing-mode: vertical-rl;
	padding: 1rem .55rem;
	background: #1a1815;
	border: 1px solid #3a352c;
	border-left: none;
	border-radius: 0 8px 8px 0;
	color: var(--texte-faible);
	cursor: pointer;
	font-size: .85rem;
	letter-spacing: .04em;
}
.carnet-onglets .onglet:hover { color: var(--texte); }
.carnet-onglets .onglet.actif {
	background: #242019;
	color: var(--titre);
	border-color: var(--titre);
}

#j-panneau-corps h4 { margin: 1.3rem 0 .4rem; color: var(--intertitre); font-size: .95rem; }
#j-panneau-corps h4:first-child { margin-top: 0; }
#j-panneau-corps .fait { padding-left: 1.1rem; position: relative; margin: .2rem 0; }
#j-panneau-corps .fait::before { content: '·'; position: absolute; left: .3rem; }
#j-panneau-corps .fait.aveu { color: var(--danger); }
#j-panneau-corps .fait.aveu::before { content: '!'; }
#j-panneau-corps .personne { margin: .6rem 0; }

/* Ce qui se dit — dans le fil de droite comme dans le carnet. */
.dit { margin: .5rem 0; }
.dit .qui { color: var(--titre); font-weight: 600; }
/* Le joueur en blanc franc : c'est lui, il ne se confond avec personne. La
 * valeur passe par une variable, sinon un theme CLAIR ecrirait son nom en blanc
 * sur du creme — et son portrait, qui reprend `currentColor`, disparaitrait
 * avec. */
.dit.player .qui { color: var(--joueur, #ffffff); }
.dit.action { color: var(--texte-faible); font-style: italic; padding-left: .8rem; }
.dit.systeme { color: var(--texte-faible); font-size: .85rem; }
.dit.note { color: var(--bon); font-size: .85rem; }

@media (max-width: 900px) {
	.plateau { grid-template-columns: 1fr; grid-template-rows: 2fr 1fr; }
	.cote-fil { border-left: none; border-top: 1px solid var(--trait); }
}

/* ------------------------------------------------------------------ */
/* Les reglages du serveur (administrateur)                            */
/* ------------------------------------------------------------------ */

.srv-grille {
	display: grid;
	grid-template-columns: 14rem 1fr;
	gap: .3rem .9rem;
	align-items: center;
	margin: .8rem 0;
}

.srv-grille label { color: var(--texte-faible); font-size: .9rem; }

/* Ce que l'environnement fixe est montre, mais pas modifiable : accepter une
 * saisie qui ne changerait rien est pire que la refuser. */
.srv-grille input[disabled] { opacity: .5; }
/* Un port ou un plafond n'a pas besoin de toute la largeur, et un champ long
 * pour trois chiffres laisse croire qu'on en attend davantage. */
.srv-grille input[type=number] { width: 10rem; }
.srv-grille input[type=checkbox] { width: auto; accent-color: var(--titre); }
.srv-grille .fixe { font-size: .8rem; color: var(--texte-faible); }

/* Le modele et son effort de raisonnement partagent une ligne : l'effort est
 * un reglage de CE modele, pas un voisin. Le nom prend la place, la liste
 * juste ce qu'il lui faut. */
.srv-grille .avec-effort { display: flex; gap: .5rem; align-items: center; }
.srv-grille .avec-effort input { flex: 1; min-width: 0; }
.srv-grille select.effort {
	flex: none;
	width: auto;
	padding: .6rem .5rem;
	font-size: .8rem;
	letter-spacing: .06em;
	color: var(--texte-faible);
}
.srv-details { margin-top: .6rem; }
.srv-details div { padding: .5rem 0 0 .8rem; line-height: 1.5; }

/* ------------------------------------------------------------------ */
/* Les barres de defilement                                            */
/* ------------------------------------------------------------------ */

/* Discretes et de la couleur du reste : la barre par defaut de Chrome est
 * claire et large, et c'etait la chose la plus lumineuse d'un ecran sombre. */
* { scrollbar-width: thin; scrollbar-color: var(--trait) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: var(--trait);
	border-radius: 6px;
	border: 3px solid transparent;
	background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #3c4453; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ------------------------------------------------------------------ */
/* La barre d'actions du bas                                           */
/* ------------------------------------------------------------------ */

/* Collee en bas de l'ecran qui defile. « Retour » et « Entrer » sont les
 * boutons qu'on cherche, et les reglages sont assez longs pour qu'aller les
 * chercher demande de derouler toute la page. */
/* La barre du bas : un PANNEAU, pas un degrade.
 *
 * Elle n'etait qu'un fondu vers la couleur du fond. Les boutons paraissaient
 * flotter dans le vide, et selon ce qui defilait derriere on ne voyait plus ou
 * commencait la barre. Un fond translucide avec son trait du haut dit ou elle
 * commence, et le flou derriere garde l'impression qu'il reste du contenu
 * dessous — ce qui est vrai.
 *
 * Elle porte parfois plus que des boutons : sur l'ecran de preparation, la
 * jauge et le temps ecoule sont dedans. `.actions` reste la rangee de boutons,
 * `.barre-bas` le panneau qui la tient. */
.barre-bas {
	position: sticky;
	bottom: 0;
	margin-top: 1rem;
	padding: .7rem .9rem;
	border: 1px solid var(--trait);
	border-radius: 10px;
	background: color-mix(in srgb, var(--fond-carte) 88%, transparent);
	/* Le flou n'est pas partout ; sans lui le fond translucide suffit, il est
	 * seulement moins joli. */
	backdrop-filter: blur(6px);
}
/* La rangee de boutons ne reprend pas la marge du haut quand elle EST le
 * panneau : le padding s'en charge. */
.barre-bas.actions { margin-top: 1rem; }
.barre-bas > .actions:first-child { margin-top: 0; }
/* Dans la barre, la preparation se serre : elle partage la place avec les
 * boutons, et 1,5 rem de marge la poussait hors de l'ecran. */
.barre-bas .lancement { margin: 0 0 .5rem; }
.barre-bas .erreur { min-height: 0; }
.barre-bas .erreur:empty { display: none; }

/* ------------------------------------------------------------------ */
/* Ce que la partie a consomme                                         */
/* ------------------------------------------------------------------ */

/* La barre du terminal, mot pour mot : « API 30 appels · entree 67.4k ·
 * sortie 13.8k · cache 62% · ~0.028 $ ». Les libelles s'effacent, les
 * nombres se lisent, le prix ressort. Une seule ligne « 92 919 jetons » ne
 * disait ni la part d'entree, ni celle du cache — c'est-a-dire rien de ce
 * qu'on regarde quand on se demande pourquoi une partie coute cher. */
.compteur { margin-left: .5rem; }
.compteur .etiq { color: var(--texte-faible); }
.compteur .val  { color: var(--texte); }
.compteur .cache { color: var(--bon); }
.compteur .cout { color: var(--attention); }

/* ------------------------------------------------------------------ */
/* Le resume d'une enquete                                             */
/* ------------------------------------------------------------------ */

/* Quatre lignes, puis des points de suspension. Une premisse de dix lignes
 * repoussait les enquetes suivantes hors de l'ecran, et l'on choisissait sans
 * voir ce qu'on avait le choix de prendre. La ligne du dessous — genre, lieu,
 * annee — reste entiere : c'est elle qui distingue deux enquetes au coup
 * d'oeil. */
#liste-enquetes .resume {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Les enquetes, vues par l'hote                                       */
/* ------------------------------------------------------------------ */

.adm-liste { margin: .8rem 0; }
.adm-ligne {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .38rem .2rem;
	border-bottom: 1px solid var(--trait);
}
.adm-ligne:last-child { border-bottom: none; }
/* Une enquete fermee reste lisible, mais on voit au premier coup d'oeil
 * qu'elle ne compte pas : la griser sans autre signe la ferait passer pour un
 * defaut d'affichage. */
.adm-ligne.fermee .adm-titre { color: var(--texte-faible); text-decoration: line-through; }
.adm-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-rang { width: 1.6rem; color: var(--texte-faible); font-size: .85rem; text-align: right; }
.adm-ligne button { padding: .2rem .55rem; font-size: .9rem; }
.adm-ligne input[type=checkbox] { width: auto; accent-color: var(--titre); }

/* Genre, lieu, annee, nombre de personnes : la ligne qui SITUE l'enquete. Elle
 * portait la meme grisaille que le resume juste au-dessus, si bien que les
 * deux se lisaient comme un seul bloc de texte — alors que celle-ci se
 * parcourt d'un coup d'oeil pour comparer deux enquetes. Le bleu des
 * intertitres l'en detache sans crier. */
#liste-enquetes .meta {
	color: var(--intertitre);
	font-size: .85rem;
	letter-spacing: .01em;
}

/* Une enquete que l'on ne peut pas ouvrir : le catalogue reste lisible — on
 * veut voir ce qui existe — mais rien d'autre ne se lance tant qu'une
 * generation est en cours. Celle qui genere, elle, reste cliquable et ramene
 * a son ecran de preparation. */
.item.indisponible { opacity: .45; cursor: not-allowed; }
.item.indisponible:hover { border-color: var(--trait); background: var(--fond-carte); }
.item.en-cours { border-color: var(--titre); }
.item .etiquette.generation { border-color: var(--titre); color: var(--titre); }

/* ---------------------------------------------------------------- */
/* Accueil                                                          */
/* ---------------------------------------------------------------- */

/* Deux boutons et une phrase : c'est tout ce qu'on doit lire en arrivant.
 * La liste des enquetes tenait ce role et disait trop peu — notamment qu'une
 * preparation etait en cours. */
.accueil { margin-top: 1.5rem; }
.accueil .actions { margin-top: .8rem; }

/* ---------------------------------------------------------------- */
/* Le badge des signalements                                        */
/* ---------------------------------------------------------------- */

/* Un compte, pas une pastille muette : « 3 » se comprend sans survol. Il ne
 * porte QUE les tickets ouverts, sinon il ne redescendrait jamais. */
.badge {
	display: inline-block;
	min-width: 1.1rem;
	padding: 0 .3rem;
	margin-left: .25rem;
	border-radius: 999px;
	background: var(--danger);
	color: var(--fond);
	font-size: .72rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.35;
}

/* ---------------------------------------------------------------- */
/* Signalements                                                     */
/* ---------------------------------------------------------------- */

/* Un ticket se replie : la liste sert a voir CE QUI RESTE a traiter, et dix
 * descriptions ouvertes la rendent illisible. Le titre, l'auteur et la date
 * suffisent a decider si l'on ouvre. */
.ticket {
	background: var(--fond-carte);
	border: 1px solid var(--trait);
	border-left: 3px solid var(--attention);
	border-radius: 8px;
	padding: .6rem .9rem;
	margin: .45rem 0;
}
/* Resolu et ignore ne se confondent pas d'un coup d'oeil : l'un est un travail
 * fait, l'autre un travail refuse. */
.ticket.resolved { border-left-color: var(--bon); opacity: .75; }
.ticket.ignored  { border-left-color: var(--texte-faible); opacity: .6; }

.ticket summary {
	cursor: pointer;
	display: flex;
	gap: .6rem;
	align-items: baseline;
	flex-wrap: wrap;
}
.ticket .tk-titre { font-weight: 600; }
.ticket .tk-qui { font-size: .82rem; }
.ticket .tk-statut { color: var(--texte-faible); }
/* Le texte du joueur, tel qu'il l'a ecrit — retours a la ligne compris. */
.ticket .tk-corps { white-space: pre-wrap; margin: .6rem 0; }
.ticket .actions { margin-top: .5rem; }
.ticket .actions button { padding: .25rem .6rem; font-size: .85rem; }

/* ---------------------------------------------------------------- */
/* Invitations                                                      */
/* ---------------------------------------------------------------- */

.inv-ligne {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: .8rem;
	align-items: baseline;
	padding: .4rem 0;
	border-bottom: 1px solid var(--trait);
}
.inv-ligne:last-child { border-bottom: none; }
.inv-ligne .inv-nom { color: var(--texte); }
/* Un code deja consomme n'est plus a distribuer : il reste pour la trace. */
.inv-ligne.utilise { opacity: .55; }
.inv-ligne.utilise code { text-decoration: line-through; }

/* ---------------------------------------------------------------- */
/* Supprimer une sauvegarde                                         */
/* ---------------------------------------------------------------- */

/* Le bouton est SEPARE de la zone qui reprend la partie : les deux gestes sont
 * voisins et l'un est irreversible. */
.sauvegarde { display: flex; gap: .5rem; align-items: stretch; }
.sauvegarde .item { flex: 1; }
.sauvegarde .jeter {
	flex: none;
	color: var(--texte-faible);
	border: 1px solid var(--trait);
	border-radius: 8px;
	white-space: nowrap;
}
.sauvegarde .jeter:hover { color: var(--danger); border-color: var(--danger); }

/* Quitter la partie n'est pas anodin — on retourne a l'accueil, la scene est
 * detruite. Un rouge PALE : assez pour marquer une hesitation, pas assez pour
 * crier au danger comme le fait `--danger` sur les vraies erreurs. */
/* Derive de `--danger` et non ecrit en dur : deux couleurs figees ici ne
 * suivaient aucun theme, et ce bouton restait rose sur un ecran sepia. */
#j-quitter {
	color: color-mix(in srgb, var(--danger) 72%, var(--texte));
	border-color: color-mix(in srgb, var(--danger) 42%, var(--trait));
}
#j-quitter:hover:not(:disabled) {
	color: var(--danger);
	border-color: var(--danger);
}

/* ---------------------------------------------------------------- */
/* Les comptes                                                      */
/* ---------------------------------------------------------------- */

/* Un compte se replie, comme un ticket : la liste sert a voir QUI joue, et
 * huit fiches depliees ne se parcourent pas. L'entete porte donc ce qui se
 * compare d'un coup d'oeil — le nom, sous quel nom il enquete, et ou il en
 * est — le detail attend qu'on le demande. */
.compte {
	background: var(--fond-carte);
	border: 1px solid var(--trait);
	border-radius: 8px;
	padding: .6rem .9rem;
	margin: .45rem 0;
}
.compte.proprietaire { border-left: 3px solid var(--titre); }
.compte summary {
	cursor: pointer;
	display: flex;
	gap: .6rem;
	align-items: baseline;
	flex-wrap: wrap;
}
.compte .usr-nom { font-weight: 600; }
.compte .usr-pseudo { color: var(--intertitre); }
/* Pousse le resume a droite : les chiffres s'alignent d'une ligne a l'autre et
 * se comparent sans les lire un par un. */
.compte .usr-resume { margin-left: auto; font-size: .82rem; }
.compte .usr-role { color: var(--titre); }

.usr-grille {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .3rem .9rem;
	margin-top: .7rem;
	padding-top: .6rem;
	border-top: 1px solid var(--trait);
	font-size: .9rem;
}

/* Le sommaire de l'administration : quatre entrees, chacune disant ce qu'elle
 * contient. Ce sont les memes fiches que le catalogue des enquetes — un
 * sommaire n'a pas besoin d'un dessin a lui. */
.sommaire { margin-top: 1rem; }

/* Les codes en attente. Le code, a qui il est destine, depuis quand, et de quoi
 * le retirer : la ligne se lit de gauche a droite dans cet ordre. */
.inv-ligne {
	grid-template-columns: auto 1fr auto auto;
}
.inv-ligne .jeter {
	color: var(--texte-faible);
	padding: .2rem .5rem;
	font-size: .85rem;
}
.inv-ligne .jeter:hover { color: var(--danger); }

/* Ce que l'hote peut faire d'un compte. Separe du detail par un trait : ce sont
 * des actions, dont une irreversible, et non des informations de plus. */
.usr-actions {
	display: flex;
	gap: .6rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: .7rem;
	padding-top: .6rem;
	border-top: 1px solid var(--trait);
}
.usr-actions .usr-mdp { display: flex; gap: .5rem; flex: 1; min-width: 18rem; }
.usr-actions input { flex: 1; min-width: 0; padding: .4rem .6rem; font-size: .9rem; }
.usr-actions button { padding: .35rem .7rem; font-size: .85rem; white-space: nowrap; }
.usr-actions .jeter { color: #d98c8c; border-color: #6b3b3b; }
.usr-actions .jeter:hover { color: var(--danger); border-color: var(--danger); }
.usr-actions p { flex-basis: 100%; margin: 0; }

/* Les comptes du sommaire d'administration. Ils restent affiches a zero — une
 * pastille qui disparait laisse croire que le chiffre n'existe pas, alors que
 * « aucun ticket » est justement ce qu'on venait verifier. */
.sommaire .compte-de {
	min-width: 1.6rem;
	text-align: center;
	color: var(--texte-faible);
	font-variant-numeric: tabular-nums;
}
/* Ce qui reclame une action, et seulement quand il y en a une : un « 0 » en
 * rouge appelle l'oeil pour rien. */
.sommaire .compte-de.alerte {
	color: var(--danger);
	font-weight: 700;
}

/* ---------------------------------------------------------------- */
/* Les enquetes, vues par l'hote                                    */
/* ---------------------------------------------------------------- */

/* Une enquete sans tampon a jour n'est pas jouable : le moteur refuse de la
 * lancer et les joueurs ne la voient meme pas. Elle doit donc se reperer d'un
 * coup d'oeil dans la liste. */
.adm-ligne.non-verifiee { border-left: 3px solid var(--attention); }
.etiquette.non-analysee { color: var(--attention); }
.adm-ligne .adm-analyser { padding: .2rem .55rem; font-size: .85rem; white-space: nowrap; }

/* Le rapport de l'outil, tel qu'il l'ecrit : sa mise en page est la sienne. */
.rapport { margin-top: .8rem; }
.rapport .rapport-tete {
	display: flex;
	gap: .6rem;
	align-items: center;
	margin-bottom: .6rem;
}
.rapport .rapport-tete button { margin-left: auto; }
.rapport .rapport-corps {
	margin: 0;
	max-height: 24rem;
	overflow: auto;
	padding: .7rem .9rem;
	background: var(--fond-creux);
	border: 1px solid var(--trait);
	font-family: ui-monospace, "DejaVu Sans Mono", monospace;
	font-size: .82rem;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

/* ---------------------------------------------------------------- */
/* Choisir son personnage                                           */
/* ---------------------------------------------------------------- */

/* Au milieu de l'ecran, par-dessus ce qu'on regardait. `position: fixed` : on y
 * vient depuis les reglages comme depuis la partie, et la partie ne defile
 * pas. */
.modale {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, .6);
}
.modale .perso-boite { width: min(26rem, 100%); }

/* Trois rangees, une par piece : la fleche de gauche, la piece, la fleche de
 * droite. Chaque rangee est haute comme SA piece, donc les fleches tombent en
 * face de ce qu'elles changent — c'est tout l'objet de cette grille.
 *
 * Le personnage reste d'un seul tenant parce que les trois pieces se touchent :
 * aucun ecart entre les rangees, et l'empilement se lit comme un corps. */
.perso-vue {
	display: grid;
	grid-template-columns: auto auto auto;
	justify-content: center;
	align-items: center;
	column-gap: 1.2rem;
	row-gap: 0;
	margin: 1.2rem 0;
}
.perso-vue .sprite {
	display: block;
	grid-column: 2;
	background-repeat: no-repeat;
	/* Du pixel art : on l'agrandit sans le lisser. L'agrandissement lui-meme
	 * est fait sur la taille et le fond (voir ZOOM dans app.js), pas par une
	 * transformation — celle-ci grossit l'image sans changer la place occupee,
	 * et les fleches ne tombaient plus en face de rien. */
	image-rendering: pixelated;
}
.perso-fleche {
	padding: .25rem .65rem;
	font-size: 1.3rem;
	line-height: 1;
	/* La fleche est centree sur la hauteur de sa piece. */
	align-self: center;
}

/* Le teint : une rangee a part, sous le personnage. Il ne se choisit pas comme
 * une piece — c'est la meme peau sur les trois — et le montrer dans la colonne
 * laisserait croire qu'il n'affecte que le visage. */
.perso-teint {
	display: grid;
	grid-template-columns: auto auto auto;
	justify-content: center;
	align-items: center;
	column-gap: 1.2rem;
	margin-top: .8rem;
}