/* Tuteur IA — page de chat. Colonne unique, lisible dès 320 px, confortable à 720 px. */
:root {
	--tia-principale: #2f5d62;
	--tia-retour: #fff4d6;
	--tia-tuteur: #f1f3f4;
	--tia-participant: #e3eef0;
	--tia-police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tia-texte: #1f2328;
	--tia-doux: #5f6b76;
	--tia-fond: #ffffff;
	--tia-rayon: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	background: var(--tia-fond);
	color: var(--tia-texte);
	font-family: var(--tia-police);
	font-size: 16px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

.tia {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 12px;
}

.tia-tete { flex: 0 0 auto; margin-bottom: 8px; }
.tia-nom { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tia-principale); font-weight: 600; }
.tia-titre { font-size: 1.1rem; margin: 2px 0 0; line-height: 1.3; }
.tia-accueil { margin: 6px 0 0; color: var(--tia-doux); font-size: 0.95rem; }

.tia-corps {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tia-fil {
	/* Grandit avec les messages : la saisie suit le dernier message au lieu de
	   rester collée en bas d'un cadre vide ; une fois le cadre plein, le fil défile. */
	flex: 0 1 auto;
	min-height: 120px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 4px 2px;
}

.tia-bulle {
	max-width: 88%;
	padding: 10px 12px;
	border-radius: var(--tia-rayon);
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.tia-de-tuteur { align-self: flex-start; background: var(--tia-tuteur); border-bottom-left-radius: 4px; }
.tia-de-participant { align-self: flex-end; background: var(--tia-participant); border-bottom-right-radius: 4px; }
.tia-texte { white-space: pre-wrap; }
.tia-texte + .tia-texte, .tia-retour + .tia-texte { margin-top: 8px; }

.tia-retour {
	background: var(--tia-retour);
	border-left: 4px solid var(--tia-principale);
	border-radius: 8px;
	padding: 8px 10px;
}
.tia-etiquette {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	background: var(--tia-principale);
	border-radius: 999px;
	padding: 1px 8px;
	margin-bottom: 4px;
}

.tia-ecrit { color: var(--tia-doux); font-style: italic; font-size: 0.9rem; padding: 4px 2px; }
.tia-mention { color: var(--tia-doux); font-size: 0.85rem; margin-top: 6px; }
.tia-bloc { align-self: stretch; text-align: center; }
.tia-erreur { align-self: stretch; background: #fdecea; color: #8a1f11; border-radius: 8px; padding: 8px 10px; font-size: 0.9rem; }

.tia-saisie { flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; }
.tia-saisie textarea {
	flex: 1 1 auto;
	min-width: 0;
	resize: none;
	font: inherit;
	padding: 9px 10px;
	border: 1px solid #c9d1d9;
	border-radius: 10px;
	min-height: 44px;
	max-height: 140px;
}
.tia-saisie textarea:focus, .tia-evaluation input[type=text]:focus, .tia-evaluation textarea:focus {
	outline: 2px solid var(--tia-principale);
	outline-offset: 1px;
}

.tia-actions { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; }
.tia-actions .tia-conseil { margin-right: auto; }

.tia-bouton {
	display: inline-block;
	font: inherit;
	font-weight: 600;
	padding: 9px 16px;
	min-height: 44px;
	border-radius: 10px;
	border: 1px solid var(--tia-principale);
	background: #fff;
	color: var(--tia-principale);
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}
.tia-principal { background: var(--tia-principale); color: #fff; }
.tia-secondaire { font-weight: 500; font-size: 0.9rem; min-height: 38px; padding: 6px 12px; }
.tia-bouton:disabled { opacity: 0.5; cursor: default; }
.tia-bouton:focus-visible { outline: 2px solid var(--tia-principale); outline-offset: 2px; }

.tia-message-etat { margin: 8px 0 12px; }

.tia-consentement p { margin: 0 0 10px; }
.tia-case { display: block; margin: 12px 0; }
.tia-case input { width: 18px; height: 18px; vertical-align: -3px; }

.tia-evaluation { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.tia-evaluation h2 { font-size: 1.05rem; margin: 0; }
.tia-evaluation fieldset { border: 0; margin: 0; padding: 0; }
.tia-evaluation legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.tia-notes { display: flex; gap: 6px; flex-wrap: wrap; }
.tia-note { position: relative; }
.tia-note input { position: absolute; opacity: 0; }
.tia-note span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border: 1px solid #c9d1d9; border-radius: 10px; cursor: pointer;
}
.tia-note input:checked + span { background: var(--tia-principale); color: #fff; border-color: var(--tia-principale); }
.tia-note input:focus-visible + span { outline: 2px solid var(--tia-principale); outline-offset: 2px; }
.tia-champ { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.tia-champ input, .tia-evaluation textarea {
	font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid #c9d1d9; border-radius: 10px; width: 100%;
}
.tia-choix { display: inline-block; margin: 0 14px 8px 0; }
.tia-evaluation textarea { margin-top: 4px; }

.tia-pied { flex: 0 0 auto; font-size: 0.8rem; color: var(--tia-doux); text-align: center; }
.tia-lien, .tia-lien-discret { color: var(--tia-doux); }

@media (max-width: 420px) {
	.tia { padding: 8px; }
	.tia-bulle { max-width: 94%; }
	.tia-saisie { flex-direction: column; align-items: stretch; }
	.tia-saisie .tia-bouton { width: 100%; }
}

/* 0.7.0 : numéros de message, aide du retour, téléchargement */
.tia-numero { font-size: 0.7rem; color: var(--tia-doux); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.tia-de-participant .tia-numero { text-align: right; }
.tia-aide { color: var(--tia-doux); font-size: 0.85rem; margin: 0 0 8px; }
.tia-evaluation fieldset .tia-champ { margin-top: 8px; }
.tia-telecharger { display: inline-block; margin: 0 8px 12px 0; text-decoration: none; }

/* 0.8.0 : fin de séance, la page du cadre défile d'un seul tenant */
body.tia-mode-fin .tia { height: auto; min-height: 100%; }
body.tia-mode-fin .tia-corps { flex: 0 0 auto; }
body.tia-mode-fin .tia-fil { flex: 0 0 auto; overflow: visible; }
body.tia-mode-fin .tia-evaluation { overflow: visible; }

/* 0.9.0 : message du formulaire de fin (champ manquant, retour écrit non envoyé) */
.tia-avis { margin: 0; padding: 8px 10px; border-radius: 8px; background: #fff4d6; border-left: 4px solid #c58a00; font-size: 0.9rem; }

/* 0.10.0 : description de la leçon */
.tia-description { margin: 4px 0 0; color: var(--tia-doux); font-size: 0.95rem; }

/* 0.10.0 : enchaînement de leçons */
.tia-passage { border-left: 4px solid var(--tia-principale); background: var(--tia-tuteur); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.tia-passage-titre { font-weight: 600; margin: 4px 0 6px; }
.tia-passage .tia-texte { white-space: pre-wrap; }
.tia-suite { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; border: 1px solid #c9d1d9; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.tia-suite:hover, .tia-suite:focus { border-color: var(--tia-principale); }
.tia-suite .tia-mention { margin-top: 0; }
.tia-recommandee { border: 2px solid var(--tia-principale); }
.tia-suite .tia-etiquette { align-self: flex-start; }