/* UtopUA : même charte que le positionnement et UtopIA Guides (cadre, en-tête dégradé, fond gris clair), couleur
   de base verte #009933 (David, 22/10/2026). Aucune dépendance externe : police Nunito servie par l'application. */

/* Nunito servie par l'application elle-même (David, 22/10/2026 : « installe nunito ») : jusque-là
   déclarée mais jamais chargée, chaque poste affichait sa police de secours. Police variable (graisses
   200 à 1000), fichiers WOFF2 tirés de google/fonts, licence OFL dans fonts/Nunito-OFL.txt. Aucun CDN :
   rien ne part du poste vers l'extérieur. Même déclaration dans le positionnement (static/style.css) et Guides. */
@font-face {
	font-family: "Nunito";
	src: url("fonts/Nunito.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Nunito";
	src: url("fonts/Nunito-Italic.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: italic;
	font-display: swap;
}

:root {
	--primaire: #009933;
	--degrade: linear-gradient(93.12deg, #000000 0.52%, var(--primaire) 100%);
	--fond: #f1f1f1;
	--carte: #ffffff;
	--texte: #1a1a1a;
	--texteDoux: #5a5a66;
	--bordure: #d8d8e0;
	--surligne: #cce8d6;
	--erreur: #cc3300;
	--ombre: 0 2px 8px rgba(0, 0, 0, 0.08);
	--rayon: 10px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 100%;
	line-height: 1.5;
	color: var(--texte);
	background: var(--fond);
}

/* Masqué à l'écran mais lu par les lecteurs d'écran. */
.visuellement-cache {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Cadre, en-tête et pied (même design que le positionnement) ---------- */
.cadre {
	position: fixed;
	inset: 10px;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.90);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	/* Haut très arrondi, bas à peine : comme le positionnement. overflow caché
	   pour que l'en-tête et le pied épousent ces coins. */
	border-radius: 20px 20px 10px 10px;
	overflow: hidden;
}

.entete {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	padding: 15px 20px;
	color: #fff;
	background: var(--degrade);
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
	/* L'ombre doit passer au-dessus de la zone qui défile. */
	position: relative;
	z-index: 2;
}
.entete__logo { flex-shrink: 0; }
.entete__titre { min-width: 0; flex: 1 1 auto; }
.entete h1 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.entete p { margin: 0; font-size: 0.9rem; }
/* Bouton rond blanc, comme ceux du positionnement. */
.entete__boutons {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}
.entete__bouton {
	flex-shrink: 0;
	padding: 0;
	color: #fff;
	font-family: inherit;
	font-style: normal;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background: transparent;
	text-decoration: none;
}
.entete__bouton:hover, .entete__bouton:focus-visible { background: rgba(255, 255, 255, 0.15); }

/* Serveurs du positionnement (#1150, 21/10/2026) : mêmes pictos que la page du positionnement, serveur blanc sur une tuile
   transparente (libre), orange (occupé) ou rouge (indisponible) ; nom et détail dans la bulle de survol. */
.serveurs {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-right: 6px;
}
.serveurs[hidden] { display: none; }
.serveur { display: flex; color: #fff; line-height: 1; cursor: default; }
.serveur__tuile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.75);
	background: transparent;
	transition: background-color 0.3s ease;
}
.serveur--occupe .serveur__tuile { background: #fb8c00; }
.serveur--indisponible .serveur__tuile { background: #e53935;   /* rouge (David, 21/10/2026 : « gris --> rouge ») */ }
@media (prefers-reduced-motion: reduce) {
	.serveur__tuile { transition: none; }
}

/* « UA » du nom : blanc gras sur une pastille verte (David, 22/10/2026 : le vert seul se lisait mal sur le dégradé ;
   choix n° 4 parmi jaune, orange, vert fluo, pastille). Fin liseré blanc pour que la pastille se détache aussi là où le
   dégradé est vert (droite de l'en-tête, centre de la carte de connexion). */
.ua {
	margin-left: 2px;
	padding: 0 6px;
	font-weight: 800;
	color: #fff;
	background: var(--primaire);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 6px;
}

/* Login dans le titre : plus discret que « UtopUA ». */
.entete__login { font-weight: 400; font-size: 0.9rem; opacity: 0.85; }
/* Bouton « i » : lettre italique à empattements comme celui du positionnement. */
.entete__bouton--i { font-family: Georgia, serif; font-style: italic; font-weight: 400; font-size: 0.9rem; }
/* ---------- Fenêtre d'aide et fenêtre d'informations ---------- */
.aide {
	width: calc(100% - 32px);
	max-width: 580px;
	max-height: calc(100% - 32px);
	padding: 0;
	border: none;
	border-radius: 14px;
	overflow: hidden;
	color: var(--texte);
	background: var(--carte);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.aide[open] { display: flex; flex-direction: column; }
.aide::backdrop { background: rgba(0, 0, 0, 0.45); }
.aide__entete {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	padding: 14px 18px;
	color: #fff;
	background: var(--degrade);
}
.aide__entete h2 { margin: 0; flex: 1; font-size: 1.05rem; }
/* Bouton rond dans l'en-tête des fenêtres (ticket d'incident), comme les boutons de l'en-tête de page. */
.aide__bouton {
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	border: 1.5px solid #fff; border-radius: 50%;
	background: transparent; text-decoration: none;
}
.aide__bouton:hover, .aide__bouton:focus-visible { background: rgba(255, 255, 255, 0.18); }
.aide__fermer {
	width: 28px; height: 28px;
	padding: 0;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	border: none;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.aide__fermer:hover, .aide__fermer:focus-visible { background: rgba(255, 255, 255, 0.18); }
.aide__corps { padding: 6px 20px 20px; overflow-y: auto; font-size: 0.95rem; }
.aide__corps h3 { margin: 16px 0 6px; font-size: 1rem; color: var(--primaire); }
.aide__corps p { margin: 6px 0; }
.aide__corps ul { margin: 6px 0; padding-left: 20px; }
.aide__corps li { margin: 4px 0; }
.aide__corps a { color: var(--primaire); }
/* Adresse de contact : couleur de base, sans soulignement. */
.aide__corps a.aide__mail { color: var(--primaire); text-decoration: none; }
.aide__situation {
	margin-top: 16px;
	padding: 10px 12px;
	border-left: 4px solid var(--primaire);
	border-radius: 6px;
	background: var(--fond);
	font-size: 0.9rem;
}
.aide__situation:empty { display: none; }
.aide__situation--alerte { border-left-color: var(--erreur); }
.aide__situation[hidden] { display: none; }

/* Fenêtre d'informations : libellés à gauche, valeurs à droite. */
.infos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 14px 0 6px; }
.infos dt { color: var(--texteDoux); }
.infos dd { margin: 0; font-weight: 600; }

/* Pied de page très fin, dégradé inversé. */
.pied {
	flex-shrink: 0;
	height: 14px;
	background: linear-gradient(268.91deg, #000000 -2.14%, var(--primaire) 99.69%);
	box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.15);
	position: relative;
	z-index: 2;
}

/* La zone centrale est la seule à défiler. */
.zone {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
/* ---------- Connexion ---------- */
button {
	font: inherit;
	cursor: pointer;
}
.login-box button {
	padding: 12px 22px;
	color: #fff;
	font-weight: 600;
	border: none;
	border-radius: var(--rayon);
	background: var(--degrade);
}
.page-login {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.login-box {
	width: 100%;
	max-width: 480px;
	padding: 2rem;
	text-align: center;
	color: #fff;
	border-radius: 12px;
	background: var(--degrade);
	box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.5);
}
.login-box h1 { margin: 0 0 4px; font-size: 1.5rem; }
.login-box__logo { display: block; margin: 0 auto 6px; }
.login-box input {
	width: 100%;
	margin: 0.4rem 0;
	padding: 0.6rem;
	font: inherit;
	border: 1px solid #ccc;
	border-radius: 6px;
}
.login-box button {
	width: 100%;
	margin-top: 1rem;
	background: linear-gradient(93.12deg, var(--primaire) -10%, #000000 110%);
}
/* Remplace le bouton pendant la vérification des accès : rond qui tourne + texte. */
.login-attente { margin: 1rem 0 0; padding: 0.6rem 0; }
.login-attente[hidden] { display: none; }
.login-attente::before {
	content: "";
	display: inline-block;
	width: 1.1em; height: 1.1em;
	margin-right: 10px;
	vertical-align: -0.2em;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: tourne 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.login-attente::before { animation: none; }
}
.login-erreur { color: #ffb3a0; margin: 0.8rem 0 0; min-height: 1.5em; }
.login-note { margin: 0.6rem 0 0; font-size: 0.8rem; opacity: 0.8; }


@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Conversation ---------- */
.conversation {
	max-width: 900px;
	margin: 0 auto;
	padding: 24px 16px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.message {
	max-width: min(720px, 90%);
	padding: 10px 14px;
	border-radius: 14px;
	box-shadow: var(--ombre);
	overflow-wrap: anywhere;
}
.message p { margin: 0 0 6px; }
.message p:last-child { margin-bottom: 0; }
/* UtopUA à gauche, sur blanc, filet vert ; la personne à droite, sur le dégradé. */
.message--utopua {
	align-self: flex-start;
	background: var(--carte);
	border-left: 4px solid var(--primaire);
	border-bottom-left-radius: 4px;
}
.message--personne {
	align-self: flex-end;
	color: #fff;
	background: var(--degrade);
	border-bottom-right-radius: 4px;
	white-space: pre-wrap;
}
.message--erreur { border-left-color: var(--erreur); }
/* Pendant une lecture ou en attente de Mistral : rond qui tourne + texte, sur la même ligne. */
.message--attente { display: flex; align-items: center; }
.message--attente::before {
	content: "";
	display: inline-block;
	width: 1em; height: 1em;
	margin-right: 10px;
	vertical-align: -0.15em;
	border: 3px solid var(--surligne);
	border-top-color: var(--primaire);
	border-radius: 50%;
	animation: tourne 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.message--attente::before { animation: none; }
}
/* Document lu : comptes, plan indenté par niveau de titre, alertes. */
.document__nom { font-weight: 700; }
.document__comptes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; padding: 0; list-style: none; }
.document__comptes li {
	padding: 2px 10px;
	font-size: 0.85rem;
	border-radius: 999px;
	background: var(--surligne);
	font-variant-numeric: tabular-nums;
}
.document__plan { margin: 6px 0; padding: 0; list-style: none; font-size: 0.95rem; }
.document__plan li { margin: 2px 0; padding-left: calc(var(--niveau, 0) * 18px); }
.document__plan li[data-niveau="0"], .document__plan li[data-niveau="1"] { font-weight: 700; }
.document__alertes { margin: 8px 0 0; padding-left: 18px; color: var(--erreur); font-size: 0.9rem; }

/* ---------- Saisie (en bas, hors de la zone qui défile) ---------- */
.saisie {
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 16px;
	border-top: 1px solid var(--bordure);
	background: var(--carte);
}
.saisie textarea {
	flex: 1 1 auto;
	min-width: 0;
	max-height: 40vh;
	padding: 9px 12px;
	font: inherit;
	line-height: 1.4;
	resize: none;
	border: 1px solid var(--bordure);
	border-radius: 10px;
}
.saisie textarea:focus-visible, .saisie button:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.saisie__joindre {
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	padding: 0;
	color: var(--primaire);
	border: 1px solid var(--bordure);
	border-radius: 10px;
	background: var(--carte);
	cursor: pointer;
}
.saisie__joindre:hover { background: var(--surligne); }
.saisie__envoyer {
	flex-shrink: 0;
	height: 40px;
	padding: 0 18px;
	color: #fff;
	font: inherit;
	font-weight: 700;
	border: none;
	border-radius: 10px;
	background: var(--degrade);
	cursor: pointer;
}
.saisie button:disabled { opacity: 0.5; cursor: default; }
/* Document glissé au-dessus de la page : la zone de conversation s'entoure de vert. */
.zone--depot { outline: 3px dashed var(--primaire); outline-offset: -8px; }

/* ---------- Petits écrans ---------- */
@media (max-width: 560px) {
	.entete { padding: 12px 16px; }
	.entete p { display: none; }
	.cadre { inset: 6px; }
	.saisie { padding: 8px 10px; }
	.saisie__envoyer { padding: 0 12px; }
}