/**
 * Fichier : emma-fenetre.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Mise en forme de la fenêtre de discussion d'Emma. Couleurs, espacements,
 * rayons, tailles et durées passent par les variables du thème Discovery,
 * chacune avec une valeur de repli neutre pour les autres thèmes : le mode
 * contraste renforcé du thème s'applique donc sans règle propre.
 *
 * Disposition : une colonne sur écran étroit, dans l'ordre du document où
 * la conversation précède la posture d'Emma et la liste des conversations.
 * À partir de 48em, deux colonnes : la posture et la liste à gauche, la
 * conversation à droite, sans changer l'ordre du document.
 */

.rle-ea-fenetre {
	margin-block: var(--discovery-space-8, 2rem);
	color: var(--discovery-color-text, inherit);
}

.rle-ea-fenetre-titre {
	margin-block-end: var(--discovery-space-6, 1.5rem);
}

.rle-ea-colonnes {
	display: grid;
	gap: var(--discovery-space-8, 2rem);
}

@media (min-width: 48em) {
	.rle-ea-colonnes {
		grid-template-columns: minmax(12rem, 1fr) 3fr;
		align-items: start;
	}

	.rle-ea-colonne-conversation {
		grid-column: 2;
		grid-row: 1;
	}

	.rle-ea-colonne-emma {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: var(--discovery-scroll-margin, 1rem);
	}
}

.rle-ea-posture {
	margin-block-end: var(--discovery-space-4, 1rem);
}

.rle-ea-posture-image {
	display: block;
	width: 100%;
	max-width: 16rem;
	height: auto;
	border-radius: var(--discovery-radius-lg, 0.75rem);
}

@media (max-width: 47.99em) {
	.rle-ea-posture-image {
		max-width: 6rem;
	}
}

.rle-ea-conversations {
	margin-block-start: var(--discovery-space-6, 1.5rem);
}

.rle-ea-conversations ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rle-ea-conversations li {
	margin-block: var(--discovery-space-2, 0.5rem);
}

.rle-ea-conversations a[aria-current="page"] {
	font-weight: var(--discovery-weight-bold, 700);
}

.rle-ea-journal {
	display: grid;
	gap: var(--discovery-space-6, 1.5rem);
}

.rle-ea-message {
	padding: var(--discovery-space-4, 1rem) var(--discovery-space-5, 1.25rem);
	border: 1px solid var(--discovery-color-border, currentColor);
	border-radius: var(--discovery-radius-md, 0.5rem);
	background: var(--discovery-color-surface, transparent);
	line-height: var(--discovery-line-normal, 1.6);
}

.rle-ea-message--emma {
	border-inline-start-width: var(--discovery-space-1, 0.25rem);
	border-inline-start-color: var(--discovery-color-accent, currentColor);
}

.rle-ea-message-titre {
	margin: 0;
	font-size: var(--discovery-text-base, 1rem);
	font-weight: var(--discovery-weight-bold, 700);
}

.rle-ea-message-date {
	margin: var(--discovery-space-1, 0.25rem) 0 var(--discovery-space-3, 0.75rem);
	font-size: var(--discovery-text-sm, 0.875rem);
	color: var(--discovery-color-muted, inherit);
}

.rle-ea-message-corps > :first-child {
	margin-block-start: 0;
}

.rle-ea-message-corps > :last-child {
	margin-block-end: 0;
}

.rle-ea-message-corps h3,
.rle-ea-message-corps h4 {
	font-size: var(--discovery-text-lg, 1.125rem);
	margin-block: var(--discovery-space-4, 1rem) var(--discovery-space-2, 0.5rem);
}

.rle-ea-message-pieces-titre {
	margin-block: var(--discovery-space-3, 0.75rem) 0;
	font-size: var(--discovery-text-sm, 0.875rem);
}

.rle-ea-message-pieces {
	margin-block: var(--discovery-space-1, 0.25rem) 0;
	font-size: var(--discovery-text-sm, 0.875rem);
}

.rle-ea-avis {
	display: flex;
	flex-wrap: wrap;
	gap: var(--discovery-space-2, 0.5rem);
	margin-block-start: var(--discovery-space-4, 1rem);
}

.rle-ea-etat:empty,
.rle-ea-alerte:empty {
	margin: 0;
}

.rle-ea-etat {
	margin-block: var(--discovery-space-4, 1rem) 0;
	color: var(--discovery-color-muted, inherit);
}

.rle-ea-alerte {
	margin-block: var(--discovery-space-4, 1rem) 0;
	color: var(--discovery-color-erreur, inherit);
	font-weight: var(--discovery-weight-semibold, 600);
}

.rle-ea-formulaire {
	display: grid;
	gap: var(--discovery-space-4, 1rem);
	margin-block-start: var(--discovery-space-6, 1.5rem);
}

.rle-ea-champ-message label,
.rle-ea-champ-pieces label {
	display: block;
	font-weight: var(--discovery-weight-semibold, 600);
	margin-block-end: var(--discovery-space-2, 0.5rem);
}

.rle-ea-champ-message textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: var(--discovery-space-3, 0.75rem);
	font: inherit;
	color: inherit;
	background: var(--discovery-color-background, transparent);
	border: 1px solid var(--discovery-color-border, currentColor);
	border-radius: var(--discovery-radius-sm, 0.25rem);
	resize: vertical;
}

.rle-ea-aide {
	margin: var(--discovery-space-1, 0.25rem) 0 0;
	font-size: var(--discovery-text-sm, 0.875rem);
	color: var(--discovery-color-muted, inherit);
}

.rle-ea-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--discovery-space-3, 0.75rem);
}

.rle-ea-bouton,
.rle-ea-avis-bouton {
	min-height: 2.75rem;
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem);
	font: inherit;
	font-weight: var(--discovery-weight-semibold, 600);
	color: var(--discovery-color-background, Canvas);
	background: var(--discovery-color-accent, CanvasText);
	border: 2px solid var(--discovery-color-accent, CanvasText);
	border-radius: var(--discovery-radius-md, 0.5rem);
	cursor: pointer;
}

.rle-ea-bouton--secondaire,
.rle-ea-avis-bouton {
	color: var(--discovery-color-text, inherit);
	background: transparent;
	border-color: var(--discovery-color-border, currentColor);
}

.rle-ea-avis-bouton {
	min-height: 2.75rem;
	font-size: var(--discovery-text-sm, 0.875rem);
}

.rle-ea-avis-bouton[aria-pressed="true"] {
	color: var(--discovery-color-background, Canvas);
	background: var(--discovery-color-text, CanvasText);
	border-color: var(--discovery-color-text, CanvasText);
}

.rle-ea-bouton[aria-disabled="true"] {
	cursor: progress;
	opacity: 0.7;
}

.rle-ea-fenetre :is(a, button, input, textarea, select):focus-visible {
	outline: var(--discovery-focus-width, 3px) solid var(--discovery-focus-color, Highlight);
	outline-offset: var(--discovery-focus-offset, 2px);
}

.rle-ea-option {
	display: flex;
	align-items: center;
	gap: var(--discovery-space-2, 0.5rem);
}

.rle-ea-option input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
}

.rle-ea-retour {
	margin-block-start: var(--discovery-space-4, 1rem);
}

.rle-ea-conversations h3:focus {
	outline: var(--discovery-focus-width, 3px) solid var(--discovery-focus-color, Highlight);
	outline-offset: var(--discovery-focus-offset, 2px);
}


.rle-ea-indisponible {
	color: var(--discovery-color-muted, inherit);
}

.rle-ea-piege {
	position: absolute;
	inset-inline-start: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rle-ea-acces-formulaire {
	margin-block-end: var(--discovery-space-6, 1.5rem);
}

.rle-ea-acces {
	display: inline-flex;
	align-items: center;
	gap: var(--discovery-space-3, 0.75rem);
	min-height: 2.75rem;
	padding: var(--discovery-space-2, 0.5rem) var(--discovery-space-5, 1.25rem) var(--discovery-space-2, 0.5rem) var(--discovery-space-2, 0.5rem);
	font: inherit;
	font-weight: var(--discovery-weight-semibold, 600);
	color: var(--discovery-color-text, inherit);
	background: var(--discovery-color-surface, transparent);
	border: 2px solid var(--discovery-color-accent, currentColor);
	border-radius: var(--discovery-radius-full, 9999px);
	cursor: pointer;
}

.rle-ea-acces:focus-visible {
	outline: var(--discovery-focus-width, 3px) solid var(--discovery-focus-color, Highlight);
	outline-offset: var(--discovery-focus-offset, 2px);
}

.rle-ea-acces img {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: cover;
	border-radius: var(--discovery-radius-full, 9999px);
}