/* La Semaine de Trop — le Chat Ras le Cul, faux logiciel collaboratif.
 *
 * Parti pris : l'interface reste absolument sérieuse. Tout l'humour vient du
 * contenu. Pas de police fantaisie, pas de couleur criarde — un outil métier
 * crédible au premier regard, dans lequel les absurdités arrivent.
 *
 * Le rouge de ras-le-cul.fr est réservé à la crise : il n'apparaît que quand
 * le personnage commence réellement à lâcher. C'est ce qui lui donne son poids.
 *
 * Aucune police ni image distante : le jeu doit se charger instantanément même
 * sous un pic de trafic.
 */

:root {
	--fond: #f1f3f6;
	--panneau: #ffffff;
	--panneau-doux: #f7f8fa;
	--rail: #33334a;
	--rail-actif: #45455f;

	--texte: #1f2430;
	--texte-doux: #6a7280;
	--texte-faible: #99a0ac;
	--bord: #e2e5ea;
	--bord-fort: #cdd2da;

	--violet: #5b5fc7;
	--violet-clair: #eceefb;
	--bleu: #2f6fb5;
	--jaune: #c98a08;
	--jaune-fond: #fdf5e2;
	--rouge: #d13438;
	--rouge-fond: #fdeced;
	--vert: #337a45;
	--vert-fond: #eaf4ec;

	--police: "Segoe UI", Inter, Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--rayon: 6px;
	--ombre: 0 1px 2px rgba(31, 36, 48, 0.08), 0 4px 12px rgba(31, 36, 48, 0.05);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
	background: var(--fond);
	color: var(--texte);
	font-family: var(--police);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* ----------------------------------------- Accueil, rendu dans la conversation */

.marque-logo {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	background: var(--violet);
	color: #fff;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
	flex: none;
}

.regles-bloc {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--bord);
}

.regles-texte { margin: 0 0 10px; color: var(--texte-doux); font-size: 14px; }

.regles-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	color: var(--texte-doux);
}

.regles-liste li { margin-bottom: 3px; }
.regles-liste li:last-child { margin-bottom: 0; }
.regles-liste b { color: var(--texte); font-weight: 600; }

/* Encarts d'accueil : historique local et statistiques globales */

.encart {
	margin-bottom: 16px;
	padding: 13px 15px;
	background: var(--panneau-doux);
	border: 1px solid var(--bord);
	border-radius: var(--rayon);
}

.encart-titre {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-faible);
}

.historique-resume {
	margin: 0 0 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: var(--texte-doux);
}

.historique-resume b { color: var(--texte); font-weight: 600; }

.historique-liste { margin: 0; padding: 0; list-style: none; font-size: 13px; }

.historique-liste li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--bord);
	color: var(--texte-doux);
}

.historique-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.historique-liste b { color: var(--texte); font-weight: 600; }
.historique-echec b { color: var(--rouge); }

/* ---------------------------------------------------------------- Boutons */

button {
	font-family: var(--police);
	font-size: 15px;
	cursor: pointer;
	border-radius: var(--rayon);
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

button:disabled { opacity: 0.5; cursor: default; }

.principal {
	display: block;
	width: 100%;
	padding: 12px 20px;
	background: var(--violet);
	color: #fff;
	border: 1px solid var(--violet);
	font-weight: 600;
}

.principal:hover:not(:disabled) { background: #4a4eb0; border-color: #4a4eb0; }

.secondaire {
	display: block;
	width: 100%;
	padding: 11px 20px;
	margin-top: 9px;
	background: var(--panneau);
	color: var(--texte);
	border: 1px solid var(--bord-fort);
	font-weight: 600;
}

.secondaire:hover { background: var(--panneau-doux); border-color: var(--texte-faible); }

/* ------------------------------------------------ Coquille de l'application */

.appli {
	display: grid;
	grid-template-columns: 216px minmax(0, 1fr) 244px;
	gap: 0;
	height: 100vh;
	max-width: 1240px;
	margin: 0 auto;
	background: var(--panneau);
	border-left: 1px solid var(--bord);
	border-right: 1px solid var(--bord);
}

/* Rail de navigation ------------------------------------------------------ */

.rail {
	background: var(--rail);
	color: #dcdce6;
	display: flex;
	flex-direction: column;
	padding: 16px 0;
	overflow-y: auto;
}

/* Le logo du site, en tête du rail. L'image fait 300 px de large (deux fois la
   taille d'affichage) pour rester nette sur les écrans à haute densité ; les
   attributs width/height du HTML réservent sa place avant même son chargement,
   ce qui évite au rail de sursauter. */
.rail-logo-lien {
	display: block;
	margin: 0 16px 18px;
	line-height: 0;
}

.rail-logo {
	width: 150px;
	height: auto;
	max-width: 100%;
}

.rail-logo-lien:hover .rail-logo { opacity: 0.85; }

.rail-marque {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 16px 20px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.rail-nom { letter-spacing: -0.01em; }

.rail-liste { margin: 0; padding: 0; list-style: none; flex: 1; }

.rail-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 16px;
	font-size: 13.5px;
	color: #c3c3d2;
	border-left: 3px solid transparent;
}

.rail-actif {
	background: var(--rail-actif);
	border-left-color: var(--violet);
	color: #fff;
	font-weight: 600;
}

.badge {
	min-width: 20px;
	padding: 1px 6px;
	background: var(--rouge);
	color: #fff;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.3s ease;
}

.badge-hs { background: #6b6b80; }

.rail-pied {
	margin: 16px 16px 0;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 12px;
	color: #9a9ab0;
}

.rail-pied strong { color: #dcdce6; font-weight: 600; display: block; margin-bottom: 8px; }

.rail-lien { color: #9a9ab0; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.rail-lien:hover { color: #dcdce6; }

/* Conversation ------------------------------------------------------------ */

.conversation {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-right: 1px solid var(--bord);
}

.conversation-entete {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 13px 22px;
	border-bottom: 1px solid var(--bord);
	background: var(--panneau);
}

.conversation-titre {
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-faible);
}

.conversation-jour {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	color: var(--texte);
	font-variant-numeric: tabular-nums;
}

.conversation-compteur {
	margin: 0;
	font-size: 12.5px;
	color: var(--texte-faible);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.frise {
	display: flex;
	gap: 4px;
	width: 220px;
	margin: 5px 0 4px;
}

.frise[hidden] { display: none; }

.frise-jour {
	flex: 1;
	padding: 4px 0;
	border: 1px solid transparent;
	border-radius: 5px;
	background: none;
	font-family: var(--police);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
}

.frise-avenir { background: var(--panneau-doux); color: var(--texte-faible); border-color: var(--bord); cursor: default; }
.frise-actuel { background: var(--violet); color: #fff; cursor: default; }

.frise-passe {
	background: var(--panneau);
	color: var(--texte);
	border-color: var(--bord-fort);
	cursor: pointer;
}

.frise-passe:hover { background: var(--panneau-doux); border-color: var(--texte-faible); }

.frise-panneau {
	position: absolute;
	top: 100%;
	left: 22px;
	right: 22px;
	z-index: 5;
	margin-top: 6px;
	padding: 14px 16px;
	background: var(--panneau);
	border: 1px solid var(--bord-fort);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
}

.frise-panneau[hidden] { display: none; }

.frise-panneau-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.frise-panneau-titre { margin: 0; font-size: 15px; font-weight: 600; }

.frise-panneau-fermer {
	padding: 4px 10px;
	background: var(--panneau-doux);
	border: 1px solid var(--bord-fort);
	border-radius: var(--rayon);
	font-family: var(--police);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--texte);
	cursor: pointer;
}

.frise-panneau-fermer:hover { background: var(--bord); }

.frise-panneau .bilan-table {
	padding: 0 0 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--bord);
}

.fil {
	flex: 1;
	overflow-y: auto;
	padding: 18px 22px 28px;
	scroll-behavior: smooth;
}

/* Message d'une personne -------------------------------------------------- */

.message {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 11px;
	margin-bottom: 16px;
	scroll-margin-top: 12px;
	animation: arrivee 0.22s ease both;
}

@keyframes arrivee {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.message-corps { min-width: 0; }

.message-entete {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}

.message-nom { font-size: 14px; font-weight: 600; }
.message-role { font-size: 12px; color: var(--texte-faible); }
.message-heure { font-size: 11.5px; color: var(--texte-faible); font-variant-numeric: tabular-nums; }

.etiquette-externe {
	padding: 0 5px;
	background: var(--jaune-fond);
	border: 1px solid #ecd9a8;
	border-radius: 3px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--jaune);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bulle {
	background: var(--panneau-doux);
	border: 1px solid var(--bord);
	border-radius: 3px 10px 10px 10px;
	padding: 11px 14px;
	font-size: 14.5px;
}

.bulle-objet { margin: 0 0 5px; font-weight: 600; }
.bulle-texte { margin: 0; }

/* Notification applicative ------------------------------------------------ */

.notification {
	margin-bottom: 16px;
	background: var(--panneau);
	border: 1px solid var(--bord-fort);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
	overflow: hidden;
	scroll-margin-top: 12px;
	animation: arrivee 0.22s ease both;
}

.notification-entete {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 13px;
	background: var(--panneau-doux);
	border-bottom: 1px solid var(--bord);
	font-size: 12px;
}

.notification-pastille {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
}

.notification-source { font-weight: 600; }
.notification-role { color: var(--texte-faible); }
.notification-heure { margin-left: auto; color: var(--texte-faible); font-variant-numeric: tabular-nums; }

.notification-corps { padding: 12px 14px; font-size: 14.5px; }
.notification-objet { margin: 0 0 5px; font-weight: 600; }
.notification-etiquette {
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-faible);
}
.notification-texte { margin: 0; }

/* Réponses rapides -------------------------------------------------------- */

.reponses {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 4px 0 18px 45px;
	scroll-margin-top: 12px;
}

.reponses-titre {
	margin: 0 0 2px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-faible);
}

.reponse {
	width: 100%;
	padding: 10px 14px;
	text-align: left;
	background: var(--panneau);
	color: var(--violet);
	border: 1px solid var(--bord-fort);
	border-radius: 16px;
	font-weight: 600;
	font-size: 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.reponse:hover { background: var(--violet-clair); border-color: var(--violet); }

/* Le bouton de connexion de l'accueil : même forme, mais c'est l'action
   principale de l'écran. */
.reponse-principale {
	background: var(--violet);
	border-color: var(--violet);
	color: #fff;
	justify-content: center;
}

.reponse-principale:hover { background: #4a4eb0; border-color: #4a4eb0; }

/* Le choix du métier : même bouton que les réponses, mais sur deux lignes —
   le nom du poste, puis ce qui t'y attend. D'où le passage en colonne, la
   règle générale alignant ses enfants côte à côte. */
.reponse-metier {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 9px 14px;
}

.metier-nom { font-size: 14px; font-weight: 600; }

.metier-accroche {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--texte-faible);
}

.reponse-metier:hover .metier-accroche { color: var(--texte); }

/* Le va-tout : il n'apparaît que sur une poignée d'événements, et il doit se
   voir venir. Bordure rouge et fond chaud — le joueur doit comprendre au
   premier coup d'œil que ce bouton n'est pas des trois autres, et qu'il
   l'engage vraiment. */
.reponse-vatout {
	background: var(--rouge-fond);
	border-color: var(--rouge);
	color: var(--rouge);
}

.reponse-vatout:hover {
	background: var(--rouge);
	border-color: var(--rouge);
	color: #fff;
}

.reponse-vatout-marque {
	flex: none;
	padding: 1px 7px;
	border: 1px solid var(--rouge);
	border-radius: 3px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rouge);
}

.reponse-vatout:hover .reponse-vatout-marque { border-color: #fff; color: #fff; }

.reponse-risque {
	padding: 1px 7px;
	background: var(--jaune-fond);
	border: 1px solid #ecd9a8;
	border-radius: 3px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--jaune);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* Ta réponse, envoyée ----------------------------------------------------- */

.envoye {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
	animation: arrivee 0.2s ease both;
}

.envoye-bulle {
	max-width: 78%;
	padding: 10px 14px;
	background: var(--violet);
	color: #fff;
	border-radius: 10px 3px 10px 10px;
	font-size: 14.5px;
}

.envoye-meta {
	margin: 3px 0 0;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.72);
	text-align: right;
}

/* Effets, en encart système ----------------------------------------------- */

.effets {
	margin: 0 0 18px 45px;
	padding: 10px 13px;
	background: var(--panneau-doux);
	border: 1px solid var(--bord);
	border-left: 3px solid var(--bord-fort);
	border-radius: var(--rayon);
	font-size: 13px;
}

.effets-titre {
	margin: 0 0 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-faible);
}

.pastilles { margin: 0 0 5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pastilles:last-child { margin-bottom: 0; }

.pastille-prefixe { font-size: 12.5px; color: var(--texte-doux); }

.pastille {
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 12.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	border: 1px solid transparent;
}

.pastille.bon     { background: var(--vert-fond);  border-color: #cfe4d4; color: var(--vert); }
.pastille.mauvais { background: var(--rouge-fond); border-color: #f3c9cb; color: #a82a2d; }
.pastille.neutre  { background: var(--panneau);    border-color: var(--bord-fort); color: var(--texte-doux); }

/* Encart d'échéance et d'alerte ------------------------------------------- */

.carte-dette {
	margin: 0 0 18px;
	padding: 12px 14px;
	background: var(--rouge-fond);
	border: 1px solid #f3c9cb;
	border-left: 3px solid var(--rouge);
	border-radius: var(--rayon);
	scroll-margin-top: 12px;
}

.dette-titre {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8f2427;
}

.dette-texte { margin: 0 0 10px; font-size: 14px; }

.carte-alerte {
	margin: 0 0 18px;
	padding: 12px 14px;
	background: var(--jaune-fond);
	border: 1px solid #ecd9a8;
	border-left: 3px solid var(--jaune);
	border-radius: var(--rayon);
	scroll-margin-top: 12px;
}

.alerte-titre {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #96660a;
}

.alerte-texte { margin: 0; font-size: 14px; }

/* Bilan de journée -------------------------------------------------------- */

.carte-bilan {
	margin: 0 0 18px;
	background: var(--panneau);
	border: 1px solid var(--bord-fort);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
	overflow: hidden;
	scroll-margin-top: 12px;
}

.bilan-titre {
	margin: 0;
	padding: 9px 14px;
	background: var(--panneau-doux);
	border-bottom: 1px solid var(--bord);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-doux);
}

.bilan-table { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }

.bilan-ligne {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) 34px 38px;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}

.bilan-nom { color: var(--texte-doux); }

.bilan-piste {
	height: 6px;
	background: var(--bord);
	border-radius: 3px;
	overflow: hidden;
}

.bilan-remplissage { height: 100%; border-radius: 3px; transition: width 0.45s ease; }

.bilan-valeur { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bilan-delta { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.bilan-delta.bon     { color: var(--vert); }
.bilan-delta.mauvais { color: var(--rouge); }
.bilan-delta.neutre  { color: var(--texte-faible); }

/* L'indicateur qui a lâché, signalé dans le récapitulatif final. */
.bilan-fautive .bilan-nom,
.bilan-fautive .bilan-valeur { color: var(--rouge); font-weight: 600; }

.bilan-verdict {
	margin: 0;
	padding: 11px 14px;
	border-top: 1px solid var(--bord);
	font-size: 13.5px;
	color: var(--texte-doux);
}

/* Rapport d'incident, écran de fin ---------------------------------------- */

.rapport {
	margin: 20px 0 0;
	background: var(--panneau);
	border: 1px solid var(--bord-fort);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
	overflow: hidden;
	scroll-margin-top: 12px;
}

.rapport-entete {
	padding: 12px 18px;
	background: var(--rail);
	color: #fff;
}

.rapport-service { margin: 0; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #b9b9cc; }
.rapport-titre { margin: 3px 0 0; font-size: 18px; font-weight: 600; }

.rapport-corps { padding: 18px; }

.rapport-champ {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr);
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid var(--bord);
	font-size: 14px;
}

.rapport-champ:last-of-type { border-bottom: 0; }
.rapport-cle { color: var(--texte-faible); font-size: 13px; }
.rapport-valeur { font-weight: 600; }
.rapport-valeur.alerte { color: var(--rouge); }

.rapport-conclusion {
	margin: 14px 0 0;
	padding: 13px 15px;
	background: var(--panneau-doux);
	border: 1px solid var(--bord);
	border-radius: var(--rayon);
	font-size: 14.5px;
}

.rapport-mention {
	margin: 14px 0 0;
	padding: 13px 15px;
	background: var(--violet-clair);
	border: 1px solid #d5d8f5;
	border-radius: var(--rayon);
}

.mention-cle {
	margin: 0 0 3px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--violet);
}

.mention-titre { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.mention-texte { margin: 0 0 10px; font-size: 14px; color: var(--texte-doux); }
.mention-repartition { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.rapport-boutons { padding: 0 18px 18px; }

.capture-partage { margin-bottom: 9px; }

.capture-apercu {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--rayon);
	border: 1px solid var(--bord);
	margin-bottom: 9px;
}

/* Panneau d'état ---------------------------------------------------------- */

.etat {
	background: var(--panneau-doux);
	padding: 16px 16px 20px;
	overflow-y: auto;
}

.etat-titre {
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-faible);
}

.indicateurs { display: flex; flex-direction: column; gap: 14px; }

.indicateur-tete {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}

.indicateur-nom { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* L'emoji identifie la jauge sans occuper de place utile. Sur mobile, où le
   libellé qualitatif est masqué faute de hauteur, c'est lui qui porte seul la
   distinction entre les quatre compteurs. */
.indicateur-emoji { font-size: 14px; line-height: 1; }
.indicateur-valeur { font-size: 12.5px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }

.indicateur-piste {
	height: 7px;
	background: var(--bord);
	border-radius: 4px;
	overflow: hidden;
}

.indicateur-barre { height: 100%; border-radius: 4px; transition: width 0.45s ease, background-color 0.45s ease; }

.indicateur-libelle { margin: 5px 0 0; font-size: 12px; color: var(--texte-doux); }

/* Repli : ces couleurs de danger ne s'appliquent qu'à une jauge sans couleur
   propre dans reglages.json. Sinon le moteur pose la sienne en style inline,
   qui l'emporte — voir le commentaire dans majEtat(). */
.calme    { background: var(--vert); }
.chaud    { background: var(--jaune); }
.critique { background: var(--rouge); }

/* La barre gardant sa couleur d'identité, l'alerte doit se lire ailleurs : le
   texte vire au rouge et la piste bat sous la barre. Deux signaux valent mieux
   qu'un, et aucun des deux ne coûte la lisibilité de la jauge. */
.indicateur.est-critique .indicateur-nom,
.indicateur.est-critique .indicateur-libelle { color: var(--rouge); }

.indicateur.est-critique .indicateur-piste {
	background: var(--rouge-fond);
	box-shadow: 0 0 0 1px var(--rouge) inset;
	animation: pulsation 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.indicateur.est-critique .indicateur-piste { animation: none; }
}

/* ------------------------------------------------- Dégradation progressive */

/* La tension monte : les compteurs du rail gonflent et virent au rouge. */
.appli.tendu .badge { background: #b8272b; }

.appli.critique { --bord: #f0d5d6; }
.appli.critique .badge { background: var(--rouge); animation: pulsation 1.4s ease-in-out infinite; }
.appli.critique .conversation-entete { border-bottom-color: #f0c2c4; }
.appli.critique .conversation-jour { color: var(--rouge); font-weight: 600; }

@keyframes pulsation {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}


/* ------------------------------------------------------------ Responsive */

@media (max-width: 900px) {
	.appli {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		height: 100vh;
	}

	/* Le rail disparaît : sur mobile, la conversation et l'état suffisent. */
	.rail { display: none; }

	/* L'état passe en bandeau horizontal collant, au-dessus du fil. */
	.etat {
		grid-row: 1;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 10px;
		padding: 10px 12px;
		border-bottom: 1px solid var(--bord);
	}

	.etat-titre { display: none; }
	.indicateurs { display: contents; }
	.indicateur-nom { font-size: 11.5px; }
	.indicateur-valeur { font-size: 11px; }
	.indicateur-libelle { display: none; }
	.conversation { grid-row: 2; border-right: 0; }
	.conversation-entete { padding: 10px 14px; }
	.conversation-jour { font-size: 17px; }
	.frise { width: 170px; }
	.frise-panneau { left: 14px; right: 14px; }
	.fil { padding: 14px 14px 24px; }
	.reponses, .effets { margin-left: 0; }
	.rapport-champ { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.bilan-ligne { grid-template-columns: 80px minmax(0, 1fr) 30px 34px; font-size: 12px; }
}

@media (max-width: 560px) {
			h1 { font-size: 27px; }
		.message { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; }
	.avatar { width: 28px; height: 28px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	*, .fil { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}