/* ==========================================================================
   Assistants de l'espace membres
   Chargée uniquement sur les pages qui portent le gabarit « Assistant ».
   ========================================================================== */

/* --------------------------------------------------------------------------
   En-tête de page
   -------------------------------------------------------------------------- */

.enf-assistant__haut .enf-section__lede {
	margin-inline: 0;
	text-align: left;
}

.enf-assistant__quota {
	margin: 0;
	color: var(--enf-ink);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-semibold);
}

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */

.enf-form__aide {
	display: block;
	margin: 2px 0 6px;
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-regular);
}

.enf-assistant__form textarea {
	font-family: var(--enf-font-mono);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.enf-assistant__mention {
	margin: var(--enf-space-4) 0 0;
	padding: var(--enf-space-4);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg-slate);
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
}

/* --------------------------------------------------------------------------
   Attente

   Le point tourne, sauf si le visiteur a demandé moins d'animation — auquel
   cas le texte suffit, et c'est très bien.
   -------------------------------------------------------------------------- */

.enf-assistant__attente {
	display: flex;
	align-items: center;
	gap: var(--enf-space-3);
	margin: 0;
	padding: var(--enf-space-5);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg-slate);
	color: var(--enf-ink);
	font-weight: var(--enf-fw-semibold);
}

.enf-assistant__rotation {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--enf-line);
	border-top-color: var(--enf-orange);
	border-radius: 50%;
	animation: enf-tourne 900ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {

	.enf-assistant__rotation {
		animation: none;
		border-top-color: var(--enf-line);
	}
}

.enf-assistant__reprise {
	margin: var(--enf-space-6) 0 0;
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-semibold);
}

/* --------------------------------------------------------------------------
   Résultat — enveloppe
   -------------------------------------------------------------------------- */

.enf-resultat {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-6);
}

.enf-resultat:focus {
	outline: none;
}

.enf-resultat__simulation {
	margin: 0;
	padding: var(--enf-space-4);
	border: 1px dashed var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg-slate);
	color: var(--enf-ink);
	font-size: var(--enf-fs-small);
}

/* --------------------------------------------------------------------------
   Verdict

   Trois tons, trois couleurs pleines. Le texte est toujours de l'encre claire
   sur une surface sombre ou de l'encre pleine sur une surface claire : jamais
   de couleur sur couleur, dont le contraste dépendrait du navigateur.
   -------------------------------------------------------------------------- */

.enf-resultat__verdict {
	padding: var(--enf-space-6);
	border-radius: var(--enf-radius);
	border-left: 6px solid transparent;
	background-color: var(--enf-bg-slate);
}

.enf-resultat__verdict--ok {
	border-left-color: #15803d;
}

.enf-resultat__verdict--attention {
	border-left-color: var(--enf-orange);
}

.enf-resultat__verdict--alerte {
	border-left-color: #b32d2e;
}

.enf-resultat__titre {
	margin: 0 0 var(--enf-space-2);
	color: var(--enf-ink);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-h3);
	font-weight: var(--enf-fw-bold);
}

.enf-resultat__resume {
	margin: 0;
	color: var(--enf-body);
}

.enf-resultat__sous-titre {
	margin: 0 0 var(--enf-space-3);
	font-size: var(--enf-fs-h4);
}

/* --------------------------------------------------------------------------
   Anomalie de document
   -------------------------------------------------------------------------- */

.enf-resultat__anomalie {
	padding: var(--enf-space-5);
	border: 1px solid #b32d2e;
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg);
}

.enf-resultat__anomalie p {
	margin: 0 0 var(--enf-space-2);
}

.enf-resultat__anomalie p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Le coût
   -------------------------------------------------------------------------- */

.enf-resultat__cout {
	padding: var(--enf-space-6);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
}

.enf-resultat__ligne {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--enf-space-3);
	margin: 0 0 var(--enf-space-3);
	padding-bottom: var(--enf-space-3);
	border-bottom: 1px solid var(--enf-line);
}

.enf-resultat__libelle {
	color: var(--enf-ink);
	font-weight: var(--enf-fw-semibold);
}

.enf-resultat__detail {
	display: block;
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-regular);
}

.enf-resultat__valeur {
	color: var(--enf-ink);
	font-family: var(--enf-font-mono);
	font-size: 1.0625rem;
	white-space: nowrap;
}

.enf-resultat__ligne--total {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
	border-top: 2px solid var(--enf-ink);
	padding-top: var(--enf-space-3);
}

.enf-resultat__ligne--total .enf-resultat__valeur {
	font-size: var(--enf-fs-h4);
	font-weight: var(--enf-fw-bold);
}

.enf-resultat__mention {
	margin: var(--enf-space-3) 0 0;
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
}

/* --------------------------------------------------------------------------
   Signaux et manques
   -------------------------------------------------------------------------- */

.enf-resultat__liste {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.enf-resultat__item {
	padding-left: var(--enf-space-5);
	border-left: 3px solid var(--enf-line);
}

.enf-resultat__item--moyenne {
	border-left-color: var(--enf-orange);
}

.enf-resultat__item--elevee {
	border-left-color: #b32d2e;
}

.enf-resultat__item-titre {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--enf-space-2);
	margin: 0 0 4px;
	color: var(--enf-ink);
	font-weight: var(--enf-fw-semibold);
}

.enf-resultat__item-texte {
	margin: 0;
	color: var(--enf-body);
}

.enf-resultat__gravite {
	padding: 2px 8px;
	border-radius: var(--enf-radius-pill);
	background-color: var(--enf-navy-deep);
	color: var(--enf-on-dark);
	font-size: 0.75rem;
	font-weight: var(--enf-fw-semibold);
	letter-spacing: var(--enf-ls-ui);
	text-transform: uppercase;
}

.enf-resultat__forts {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-2);
	margin: 0;
	padding-left: var(--enf-space-5);
	color: var(--enf-body);
}

/* --------------------------------------------------------------------------
   Questions et actions
   -------------------------------------------------------------------------- */

.enf-resultat__questions {
	padding: var(--enf-space-6);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg-slate);
}

.enf-resultat__ol {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-3);
	margin: 0;
	padding-left: var(--enf-space-6);
	color: var(--enf-ink);
}

.enf-resultat__actions {
	margin: var(--enf-space-5) 0 0;
}

.enf-resultat__avertissement {
	margin: 0;
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Relance — le message à copier
   -------------------------------------------------------------------------- */

.enf-relance {
	padding: var(--enf-space-6);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg);
}

.enf-relance__objet {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--enf-space-3);
	margin: 0 0 var(--enf-space-4);
	padding-bottom: var(--enf-space-4);
	border-bottom: 1px solid var(--enf-line);
	color: var(--enf-ink);
	font-weight: var(--enf-fw-semibold);
}

.enf-relance__etiquette {
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-regular);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.enf-relance__corps p {
	margin: 0 0 var(--enf-space-4);
	color: var(--enf-ink);
}

.enf-relance__corps p:last-child {
	margin-bottom: 0;
}

.enf-relance__mention {
	margin: var(--enf-space-4) 0 0;
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
}

.enf-relance__notes {
	margin: 0;
}

.enf-relance__notes dt {
	margin: var(--enf-space-4) 0 2px;
	color: var(--enf-ink);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.enf-relance__notes dt:first-child {
	margin-top: 0;
}

.enf-relance__notes dd {
	margin: 0;
	color: var(--enf-body);
}

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {

	.enf-resultat__verdict,
	.enf-resultat__cout,
	.enf-resultat__questions,
	.enf-relance {
		padding: var(--enf-space-4);
	}

	.enf-resultat__ligne {
		flex-direction: column;
		gap: 2px;
	}

	.enf-resultat__valeur {
		white-space: normal;
	}
}

/* --------------------------------------------------------------------------
   Les autres outils, et l'effacement
   -------------------------------------------------------------------------- */

.enf-assistant__autres {
	display: grid;
	gap: var(--enf-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {

	.enf-assistant__autres {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.enf-assistant__autre {
	padding: var(--enf-space-5);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg);
}

.enf-assistant__autre-titre {
	margin: 0 0 var(--enf-space-2);
	font-size: var(--enf-fs-h4);
}

.enf-assistant__autre-texte {
	margin: 0;
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
}

.enf-assistant__effacer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--enf-space-4);
	margin: 0;
}

.enf-assistant__effacer-texte {
	flex: 1 1 22rem;
	margin: 0;
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
}

/* --------------------------------------------------------------------------
   Le registre des attentes
   -------------------------------------------------------------------------- */

.enf-attentes__liste {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.enf-attentes__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--enf-space-4);
	padding: var(--enf-space-5);
	border: 1px solid var(--enf-line);
	border-left: 4px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg);
}

/* L'échéance passée se signale par le liseré ET par le texte de la ligne :
   une couleur seule ne se lit pas. */
.enf-attentes__item.is-echue {
	border-left-color: var(--enf-orange);
}

.enf-attentes__texte {
	flex: 1 1 18rem;
}

.enf-attentes__qui {
	margin: 0;
	color: var(--enf-ink);
	font-weight: var(--enf-fw-semibold);
}

.enf-attentes__quoi {
	margin: 2px 0 0;
	color: var(--enf-body);
}

.enf-attentes__meta {
	margin: 4px 0 0;
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
}

.enf-attentes__item.is-echue .enf-attentes__meta {
	color: var(--enf-ink);
	font-weight: var(--enf-fw-semibold);
}

.enf-attentes__solde {
	margin: 0;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Noter une attente
   -------------------------------------------------------------------------- */

.enf-attentes__ajout {
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg);
}

.enf-attentes__ajout-titre {
	display: flex;
	align-items: center;
	gap: var(--enf-space-3);
	min-height: 44px;
	padding: var(--enf-space-3) var(--enf-space-5);
	color: var(--enf-ink);
	cursor: pointer;
	font-weight: var(--enf-fw-semibold);
	list-style: none;
}

.enf-attentes__ajout-titre::-webkit-details-marker {
	display: none;
}

.enf-attentes__ajout-titre::before {
	content: "+";
	flex: 0 0 auto;
	color: var(--enf-orange);
	font-size: 1.25rem;
	line-height: 1;
}

.enf-attentes__ajout[open] .enf-attentes__ajout-titre::before {
	content: "–";
}

.enf-attentes__ajout-titre:focus-visible {
	outline: 2px solid var(--enf-orange);
	outline-offset: 2px;
}

.enf-attentes__form {
	padding: 0 var(--enf-space-5) var(--enf-space-5);
}

.enf-attentes__mention {
	margin: 0;
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
}

@media (max-width: 560px) {

	.enf-attentes__item {
		align-items: stretch;
		flex-direction: column;
		padding: var(--enf-space-4);
	}

	.enf-attentes__solde .enf-btn {
		width: 100%;
	}
}