/**
 * eas-academy — Coquille de las pantallas propias.
 *
 * Lo común a /apprendre/… y /atelier/…: enlace de evitación, botones, avisos,
 * barra de progreso, temario, pie y pantalla de mensaje.
 *
 * Depende de tokens.css y de base.css, que se prestan de eas-theme aunque el
 * tema no esté activo (ver includes/Screens/assets.php). Ningún valor de color,
 * espaciado o tipografía se escribe suelto aquí: prohibición 7.
 *
 * Móvil primero. El único punto de corte propio es 1024px, donde el reproductor
 * pasa de una columna a dos.
 */

/* ---------------------------------------------------------------------------
 * 1. Documento
 * ------------------------------------------------------------------------- */

.eas-academy {
	background-color: var(--eas-fond-doux);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Enlace de evitación: invisible hasta que recibe el foco por teclado. */
.eas-evitement {
	background-color: var(--eas-fond-inverse);
	border-radius: 0 0 var(--eas-rayon-md) 0;
	color: var(--eas-texte-inverse);
	inset-block-start: 0;
	inset-inline-start: 0;
	padding: var(--eas-espace-12) var(--eas-espace-24);
	position: absolute;
	text-decoration: none;
	transform: translateY(-110%);
	z-index: var(--eas-couche-modale);
}

.eas-evitement:focus {
	color: var(--eas-texte-inverse);
	transform: translateY(0);
}

/* ---------------------------------------------------------------------------
 * 2. Botones
 *
 * Se declara la clase en vez de fiarse del elemento: el mismo aspecto tiene que
 * valer para <a> y para <button>.
 * ------------------------------------------------------------------------- */

.eas-bouton {
	align-items: center;
	background-color: var(--eas-action);
	border: 1px solid transparent;
	border-radius: var(--eas-rayon-md);
	color: var(--eas-action-texte);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--eas-texte-base);
	font-weight: var(--eas-graisse-moyenne);
	gap: var(--eas-espace-8);
	justify-content: center;
	/* 44px: objetivo táctil cómodo en móvil. */
	min-height: var(--eas-cible-tactile);
	padding: var(--eas-espace-12) var(--eas-espace-24);
	text-decoration: none;
	transition: background-color var(--eas-transition), color var(--eas-transition);
}

.eas-bouton:hover,
.eas-bouton:focus {
	background-color: var(--eas-action-survol);
	color: var(--eas-action-texte);
	text-decoration: none;
}

.eas-bouton--discret {
	background-color: transparent;
	border-color: var(--eas-bordure);
	color: var(--eas-texte);
}

.eas-bouton--discret:hover,
.eas-bouton--discret:focus {
	background-color: var(--eas-fond-surface);
	border-color: var(--eas-bordure-forte);
	color: var(--eas-texte);
}

/* ---------------------------------------------------------------------------
 * 3. Avisos
 * ------------------------------------------------------------------------- */

.eas-avis {
	background-color: var(--eas-fond-surface);
	border-inline-start: 4px solid var(--eas-bordure-forte);
	border-radius: var(--eas-rayon-sm);
	font-size: var(--eas-texte-sm);
	margin-block-end: var(--eas-espace-24);
	padding: var(--eas-espace-12) var(--eas-espace-16);
}

.eas-avis--succes {
	background-color: var(--eas-fond-doux);
	border-inline-start-color: var(--eas-action);
}

/*
 * El aviso de error. Usa los mismos tokens que el chip «Échoué» del taller, no
 * un rojo aparte: en este sitio «algo ha fallado» se pinta siempre igual.
 */
.eas-avis--erreur {
	background-color: var(--eas-erreur-fond);
	border-inline-start-color: var(--eas-rouge);
	color: var(--eas-rouge-second);
}

/* ---------------------------------------------------------------------------
 * 4. Botones que se dibujan solos
 *
 * base.css da a TODO <button> el aspecto del botón de acción del tema: fondo
 * rojo, borde redondeado de 8px, relleno de 12/24 y 44px de alto mínimo. Está
 * bien para el sitio, y está mal para estas dos pantallas, donde hay botones
 * que son una casilla de 18px, un icono de 32px o una pestaña con su propio
 * subrayado. Sin desactivarlo:
 *
 *   min-height: 44px      convierte la casilla de 18×18 en un rectángulo de
 *                         18×44, porque min-height gana a height.
 *   padding: 12px 24px    ensancha los iconos del reproductor a 48px.
 *   button:hover          pintaba de rojo cualquiera de ellos al pasar el
 *                         ratón, porque un elemento con pseudoclase pesa
 *                         0-1-1: MÁS que una clase suelta. Eso se ha
 *                         arreglado en la raíz, envolviendo el bloque de
 *                         base.css en :where() para dejarlo con peso cero.
 *                         Por eso este reinicio ya NO nombra los estados:
 *                         hacerlo lo subía a 0-2-0 y entonces era ÉL quien
 *                         pisaba la geometría de los componentes en :hover y
 *                         en :disabled — la casilla perdía sus 18px justo al
 *                         pasar el ratón por encima.
 *
 * Cada componente pone encima lo que necesita; como esta hoja se carga antes
 * que lecteur.css y atelier.css, a igualdad de peso mandan ellas.
 *
 * Lo lleva todo botón propio de las pantallas de estudio. NO lo lleva
 * .eas-bouton, que sí es el botón de acción del tema y quiere esos valores.
 * ------------------------------------------------------------------------- */

.eas-bouton-nu {
	background: none;
	border: none;
	border-radius: 0;
	color: inherit;
	font: inherit;
	min-block-size: 0;
	min-inline-size: 0;
	padding: 0;
	transition: none;
	width: auto;
}

/* ---------------------------------------------------------------------------
 * 5. Pie
 * ------------------------------------------------------------------------- */

.eas-pied {
	align-items: center;
	border-block-start: 1px solid var(--eas-bordure);
	color: var(--eas-texte-doux);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--eas-texte-xs);
	gap: var(--eas-espace-8) var(--eas-espace-16);
	justify-content: space-between;
	margin-block-start: auto;
	padding: var(--eas-espace-16) var(--eas-espace-16);
}

.eas-pied p {
	margin: 0;
}

.eas-pied__marque {
	font-weight: var(--eas-graisse-moyenne);
}

/* ---------------------------------------------------------------------------
 * 6. Pantalla de mensaje (404, acceso denegado, sesión necesaria)
 * ------------------------------------------------------------------------- */

.eas-message {
	margin: 0 auto;
	max-inline-size: var(--eas-largeur-lecture);
	padding: var(--eas-espace-64) var(--eas-espace-16);
	text-align: center;
}

.eas-message__titre {
	margin-block-end: var(--eas-espace-16);
}

.eas-message__texte {
	color: var(--eas-texte-doux);
	margin-block-end: var(--eas-espace-32);
}

/*
 * «Avant de commencer» (Transactions/avant.php): nivel y objetivo de una cuenta
 * creada por una compra. Las tarjetas son las del registro (inscription.css,
 * que la pantalla encola); aquí solo va el marco.
 */
.eas-avant {
	margin: 0 auto;
	max-inline-size: var(--eas-largeur-lecture);
	padding: var(--eas-espace-48) var(--eas-espace-16) var(--eas-espace-64);
}

.eas-avant__titre {
	margin-block-end: var(--eas-espace-12);
}

.eas-avant__texte {
	color: var(--eas-texte-doux);
	margin-block-end: var(--eas-espace-24);
}

.eas-avant__erreur {
	color: var(--eas-rouge-second);
	font-weight: var(--eas-graisse-semi);
	margin-block-end: var(--eas-espace-16);
}

.eas-avant__groupe {
	border: 0;
	margin: 0 0 var(--eas-espace-24);
	padding: 0;
}

.eas-avant__sortie {
	color: var(--eas-texte-doux);
	margin-block-start: var(--eas-espace-32);
}


/* ---------------------------------------------------------------------------
 * 7. Barra superior de las pantallas de estudio
 *
 * Compartida por el espacio d'apprentissage y por el taller: las dos abren con
 * la misma cabecera fija de 60px, y vive aquí porque la coquille es lo único
 * que cargan las dos. Diseño del handoff, traducido a los tokens de marca.
 *
 * En móvil la cabecera se deja crecer y el título salta a su propia línea: a
 * 375px, logo + título + progreso en una sola fila de 60px no cabe sin
 * recortar el título hasta dejarlo en dos palabras.
 * ------------------------------------------------------------------------- */
/* --- Barra superior -------------------------------------------------- */

.eas-barre {
	align-items: center;
	background-color: var(--eas-surface-carte);
	border-block-end: 1px solid var(--eas-ligne-cadre);
	display: flex;
	flex-wrap: wrap;
	gap: var(--eas-espace-10);
	inset-block-start: 0;
	padding: var(--eas-espace-8) var(--eas-espace-16);
	position: sticky;
	z-index: var(--eas-couche-entete);
}

.eas-barre__marque {
	display: flex;
	flex: none;
	text-decoration: none;
}

.eas-barre__logo {
	block-size: var(--eas-hauteur-logo);
	inline-size: auto;
}

.eas-barre__separateur {
	background-color: var(--eas-ligne-cadre);
	block-size: var(--eas-espace-24);
	flex: none;
	inline-size: 1px;
}

.eas-barre__retour {
	color: var(--eas-texte-accent);
	flex: none;
	font-size: var(--eas-texte-13);
	font-weight: var(--eas-graisse-forte);
	text-decoration: none;
	white-space: nowrap;
}

.eas-barre__retour:hover,
.eas-barre__retour:focus-visible {
	text-decoration: underline;
}

.eas-barre__titre {
	flex: 1 1 100%;
	font-size: var(--eas-texte-sm);
	font-weight: var(--eas-graisse-semi);
	margin: 0;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * El interruptor de tema de la cabecera del taller. Se dibuja porque está en el
 * diseño y su hueco forma parte del ritmo de la barra, pero llega desactivado:
 * las variables del tema oscuro están escritas en tokens.css y nada las
 * enciende todavía.
 *
 * Se define aquí y no en lecteur.css porque /atelier/ no carga esa hoja.
 */
/* El final de la barra: modo nocturno y cuenta, juntos y pegados a la derecha.
 *
 * 🔴 `margin-inline-start: auto` ES LO QUE LOS LLEVA AL BORDE. Antes colgaban
 * sueltos detrás de `.eas-barre__titre`, que es `flex: 1 1 100%`: en cuanto la
 * barra se partía en dos líneas —y a 375 px se parte en tres— el botón y el
 * avatar quedaban en medio, que es justo lo que se veía. Agrupados y con el
 * margen automático, van al extremo en una línea y en tres. */
.eas-barre__fin {
	align-items: center;
	display: flex;
	flex: none;
	gap: var(--eas-espace-10);
	margin-inline-start: auto;
}

/* El interruptor de modo nocturno: botón de icono, redondo, del mismo alto que
 * el avatar para que los dos se lean como una sola pieza. */
.eas-barre__theme {
	align-items: center;
	background-color: var(--eas-surface-carte);
	block-size: var(--eas-taille-bouton);
	border: 1px solid var(--eas-ligne-champ);
	border-radius: 50%;
	color: var(--eas-texte);
	cursor: pointer;
	display: flex;
	flex: none;
	inline-size: var(--eas-taille-bouton);
	justify-content: center;
	padding: 0;
	transition: background-color var(--eas-transition), border-color var(--eas-transition);
}

.eas-barre__theme:hover {
	background-color: var(--eas-surface-survol);
	border-color: var(--eas-texte-second);
}

/* El foco se marca con el filete de marca, no solo con el color: un indicador
 * que solo cambia de color no vale (WCAG 1.4.11). */
.eas-barre__theme:focus-visible {
	border-color: var(--eas-rouge);
	outline: 2px solid var(--eas-rouge);
	outline-offset: 2px;
}

/* 🔴 SE ENSEÑA EL ICONO DEL MODO AL QUE SE VA, no el del modo en el que se
 * está, porque es lo que dice la etiqueta: «Activer le mode sombre» va con una
 * luna. Enseñar el modo actual y decir la acción contraria en el `aria-label`
 * es lo que hace que un botón de tema se pulse siempre al revés. */
.eas-barre__theme-icone--soleil {
	display: none;
}

.eas-barre__theme-icone--lune {
	display: block;
}

[data-eas-theme="sombre"] .eas-barre__theme-icone--soleil {
	display: block;
}

[data-eas-theme="sombre"] .eas-barre__theme-icone--lune {
	display: none;
}


.eas-barre__seuil {
	color: var(--eas-texte-second);
	flex: none;
	font-size: var(--eas-texte-125);
	margin: 0;
}

.eas-barre__seuil b {
	color: var(--eas-texte);
}

/* --- Insignias ------------------------------------------------------- */

.eas-insigne {
	border-radius: var(--eas-rayon-sm);
	flex: none;
	font-size: var(--eas-texte-105);
	font-weight: var(--eas-graisse-appuyee);
	letter-spacing: 0.05em;
	padding: var(--eas-espace-4) var(--eas-espace-8);
}

.eas-insigne--atelier {
	background-color: var(--eas-jaune);
	color: var(--eas-texte);
}

.eas-insigne--verrouille {
	border: 1px solid var(--eas-ligne-champ);
	color: var(--eas-texte-tenu);
}

/* --- Utilidad ------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * 8. Primitivas compartidas por las pantallas del alumno
 *
 * Vivían en atelier.css hasta que el espacio del alumno las necesitó también.
 * Se suben aquí en vez de copiarse: una tarjeta que se pinte distinto en dos
 * pantallas de la misma academia es un fallo que nadie va a ver hasta que
 * alguien las compare lado a lado.
 * ------------------------------------------------------------------------- */

.eas-carte {
	background-color: var(--eas-surface-carte);
	border: 1px solid var(--eas-ligne-cadre);
	border-radius: var(--eas-rayon-carte);
	padding: var(--eas-espace-16);
}

.eas-jetons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eas-espace-8);
	list-style: none;
	margin: 0;
	padding: 0;
}

.eas-jeton {
	background-color: var(--eas-chip-fond);
	border-radius: var(--eas-rayon-plein);
	color: var(--eas-chip-texte);
	font-size: var(--eas-texte-xs);
	font-weight: var(--eas-graisse-forte);
	padding: var(--eas-espace-4) var(--eas-espace-10);
}

.eas-jeton--rouge {
	background-color: var(--eas-rouge-doux);
	color: var(--eas-rouge-texte);
}

.eas-jeton--jaune {
	background-color: var(--eas-jaune-chip-fond);
	color: var(--eas-jaune-chip-texte);
}

.eas-jeton--vert {
	background-color: var(--eas-vert-doux);
	color: var(--eas-vert-appuye);
}

.eas-visuellement-cache {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

@media (min-width: 768px) {

	.eas-barre {
		block-size: var(--eas-hauteur-entete);
		flex-wrap: nowrap;
		gap: var(--eas-espace-14);
		padding: 0 var(--eas-espace-20);
	}

	.eas-barre__titre {
		flex: 1 1 auto;
	}

	.eas-pied {
		padding-inline: var(--eas-espace-32);
	}
}

/* ---------------------------------------------------------------------------
 * 9. Loader — la marca con el rayo trazándose
 *
 * Sustituye al vídeo de 8,3 MB que se barajó: un loader que tarda más en bajar
 * que la página que tapa no cubre una espera, la crea. Esto son ~2 KB de SVG en
 * línea. El porqué de cada decisión está en includes/Screens/loader.php.
 *
 * 🔴 EL ESTADO POR DEFECTO ES EL LOGOTIPO COMPLETO, y esa dirección importa.
 * Las animaciones solo QUITAN cosas del estado base (`stroke-dashoffset: 0` =
 * rayo entero). Así, si las animaciones no corren —«reducir movimiento», un
 * navegador viejo, un fallo— lo que queda es la marca quieta y bien dibujada.
 * Al revés (base vacía, animación que lo dibuja) el mismo fallo dejaría un
 * logotipo a medias, y nadie se enteraría.
 * ------------------------------------------------------------------------- */

.eas-loader {
	align-items: center;
	background-color: var(--eas-surface-page);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: var(--eas-couche-loader);

	/*
	 * Dos animaciones sin relación entre ellas:
	 *   apparition — la revela a los 180 ms. Una carga rápida la retira antes,
	 *                y entonces NO SE VE NADA, que es el caso que hay que
	 *                optimizar: sin este retraso cada navegación parpadearía.
	 *   abandon    — la red de seguridad. A los 6 s se aparta pase lo que pase,
	 *                por si el script del final del documento nunca llega.
	 */
	animation:
		eas-loader-apparition 200ms ease-out 180ms both,
		eas-loader-abandon 1ms linear 6s forwards;
}

@keyframes eas-loader-apparition {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes eas-loader-abandon {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

.eas-loader__marque {
	block-size: auto;
	inline-size: var(--eas-taille-marque-loader);
	max-inline-size: 40vw;
}

/* --- La marca ---------------------------------------------------------- */

.eas-marque__e {
	fill: var(--eas-rouge);
}

.eas-marque__s {
	fill: none;
	stroke: var(--eas-jaune);
	stroke-width: 32;
}

.eas-marque__etincelle {
	fill: var(--eas-jaune);
}

/*
 * Los dos trazos del rayo. `--eas-trait` es la longitud de CADA UNO y la pone
 * el PHP al lado de las coordenadas, porque es su hipotenusa: si se mueve un
 * punto del rayo, el número tiene que moverse con él.
 */
.eas-marque__eclair {
	fill: none;
	stroke-linecap: round;
	stroke-width: 6;
}

.eas-marque__eclair--haut {
	stroke: var(--eas-jaune);
}

.eas-marque__eclair--bas {
	stroke: var(--eas-rouge);
}

/* --- El trazado, solo dentro del loader -------------------------------- */

/*
 * `dasharray` de un solo valor: una raya tan larga como el trazo, y un hueco
 * igual. Con `dashoffset` en +largo la raya está empujada fuera por delante
 * (no se ve nada); en 0 cubre el trazo entero; en -largo ha salido por el otro
 * extremo. Animar de +largo a -largo dibuja el rayo y lo deja escapar por
 * abajo, y el ciclo empalma sin salto: no hay ni un fotograma en que el rayo
 * «desaparezca de golpe» para volver a empezar.
 */
.eas-loader .eas-marque__eclair {
	stroke-dasharray: var(--eas-trait);
	animation: eas-marque-eclair 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* El de abajo entra después: el rayo cae, no se enciende entero de una vez. */
.eas-loader .eas-marque__eclair--bas {
	animation-delay: 180ms;
}

@keyframes eas-marque-eclair {
	0%   { stroke-dashoffset: var(--eas-trait); }
	45%  { stroke-dashoffset: 0; }
	60%  { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: calc(var(--eas-trait) * -1); }
}

/* La chispa del centro late con el rayo, no por su cuenta. */
.eas-loader .eas-marque__etincelle {
	animation: eas-marque-etincelle 1.5s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes eas-marque-etincelle {
	0%, 30%   { opacity: 0.25; transform: scale(0.86); }
	48%, 60%  { opacity: 1;    transform: scale(1); }
	100%      { opacity: 0.25; transform: scale(0.86); }
}

/* La E y la S entran una vez y se quedan: son la parte estable de la marca. */
.eas-loader .eas-marque__e,
.eas-loader .eas-marque__s {
	animation: eas-marque-entree 450ms ease-out both;
}

.eas-loader .eas-marque__s {
	animation-delay: 90ms;
}

@keyframes eas-marque-entree {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------------------------------------------------------------------------
 * Criterio de terminado nº 5. Con «reducir movimiento» NO hay animación
 * ninguna: ni trazado, ni latido, ni entrada. Queda el logotipo quieto y
 * entero, que es el estado base declarado arriba.
 *
 * `apparition` y `abandon` SÍ se conservan, y no es un descuido: la primera es
 * un retraso con un fundido de opacidad —no hay movimiento que reducir— y sin
 * ella el loader parpadearía en cada carga rápida, que es justo lo que molesta
 * a quien pide menos movimiento. La segunda es la red de seguridad que impide
 * que la capa se quede pegada: quitarla sería cambiar el movimiento por un
 * sitio inutilizable.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.eas-loader .eas-marque__eclair,
	.eas-loader .eas-marque__etincelle,
	.eas-loader .eas-marque__e,
	.eas-loader .eas-marque__s {
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
 * 🔴 `hidden` TIENE QUE GANAR SIEMPRE. Va en la cáscara, no en cada pantalla.
 *
 * El navegador esconde `[hidden]` con `display: none` desde su hoja de usuario,
 * y CUALQUIER `display` de una hoja de autor la gana — porque una hoja de autor
 * pesa más que la del navegador, por poco específica que sea. Así que un
 * `.eas-etape { display: flex }` deja visible un elemento con `hidden` puesto,
 * y el JavaScript que lo esconde parece no funcionar.
 *
 * Pasó exactamente eso el 10 sep 2026: los tres pasos de /inscription/ se veían
 * apilados en una sola página. `pintar()` ponía `f.hidden = true` y el
 * `display: flex` de `.eas-etape` lo ignoraba. No había error en consola, no
 * había nada roto en el JS: simplemente el CSS mandaba.
 *
 * `atelier.css` y `lecteur.css` ya lo habían tropezado y cada uno lo parcheó por
 * su cuenta, con SEIS reglas `.la-clase[hidden] { display: none }` repartidas.
 * Eso es curar el síntoma una vez por clase y volver a caer en la siguiente. La
 * regla va aquí, una vez, y cubre a las que vengan.
 *
 * El `!important` es necesario y es de los pocos que se justifican: compite
 * contra reglas de autor que pueden ser más específicas que este selector.
 * ------------------------------------------------------------------------- */

[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * 10. La cuenta: avatar, nombre y menú
 *
 * Vino de `espace.css` el 18 sep 2026, cuando la ficha del taller empezó a
 * enseñar también con qué cuenta está el alumno. Es de la cáscara: la barra
 * superior es lo único que comparten todas las pantallas propias.
 * ------------------------------------------------------------------------- */

.eas-barre__utilisateur {
	align-items: center;
	display: flex;
	flex: none;
	gap: var(--eas-espace-10);
	margin: 0;
}

.eas-barre__nom {
	font-size: var(--eas-texte-135);
	font-weight: var(--eas-graisse-forte);
}

/* ---------------------------------------------------------------------------
 * 3. Avatar
 *
 * Iniciales sobre el rojo suave por defecto. Si el alumno tiene foto, se pinta
 * la foto: mismo tamaño, mismo círculo, misma caja.
 *
 * Lo que NO cambia es de dónde sale la imagen. Nunca de Gravatar, que
 * identifica a la persona por el hash de su correo y obligaría al navegador de
 * cada alumno a mandárselo a un tercero en cada carga de la pantalla. La foto
 * vive en la biblioteca de medios del sitio; la resuelve
 * `Espace/avatar.php`, que además se la sirve a `get_avatar()` para que la
 * administración enseñe la misma cara que el panel.
 * ------------------------------------------------------------------------- */

.eas-avatar {
	background-color: var(--eas-rouge-doux);
	border-radius: var(--eas-rayon-plein);
	color: var(--eas-rouge-texte);
	display: grid;
	flex: none;
	font-weight: var(--eas-graisse-appuyee);
	place-items: center;
}

/*
 * La foto ocupa el círculo entero recortando lo que sobre, en vez de
 * deformarse: `cover`. Aunque la foto llegue cuadrada —lo suyo—, un retrato de
 * 3:4 subido más adelante se recortaría por los lados y no saldría un óvalo.
 *
 * El `background-color` heredado de `.eas-avatar` no es decoración muerta: es
 * lo que ocupa el círculo mientras la imagen viaja, así que la banda no se abre
 * con un agujero blanco.
 */
.eas-avatar--photo {
	display: block;
	object-fit: cover;
}

.eas-avatar--mini {
	block-size: var(--eas-taille-bouton);
	font-size: var(--eas-texte-13);
	inline-size: var(--eas-taille-bouton);
}

.eas-avatar--moyen {
	block-size: var(--eas-taille-avatar-moyen);
	font-size: var(--eas-texte-24);
	inline-size: var(--eas-taille-avatar-moyen);
}

/*
 * ⚠️ `position: relative` NO ES DECORACIÓN: es lo que pone el avatar POR
 * DELANTE de la banda. `.eas-banniere__scene` está posicionada, así que se
 * pinta en la capa de los elementos posicionados; el avatar, que es un
 * elemento de caja flexible sin posicionar, se pinta ANTES y los 32px que
 * sobresalen hacia arriba quedaban tapados por el fondo opaco de la escena.
 * Posicionándolo entra en la misma capa y, al venir después en el documento,
 * gana sin necesidad de inventar un z-index. Es lo que hace el prototipo.
 */
.eas-avatar--grand {
	block-size: var(--eas-taille-avatar);
	border: var(--eas-espace-4) solid var(--eas-surface-carte);
	font-size: var(--eas-texte-24);
	inline-size: var(--eas-taille-avatar);
	margin-block-start: calc(var(--eas-espace-32) * -1);
	position: relative;
}

/* --- El menú de la cuenta ---------------------------------------------- */

/*
 * ⚠️ AQUÍ NO VA NINGÚN `margin-inline-start: auto`, y quitarlo fue el objeto de
 * una tarea entera. Lo llevaba de cuando el bloque de cuenta colgaba
 * directamente de `.eas-barre`; desde que vive dentro de `.eas-barre__fin` —que
 * se ajusta a su contenido— ese margen automático no tiene espacio libre que
 * absorber y no hace nada. Lo único que hacía era mandar a quien viniera a
 * buscar por qué el grupo no se va a la derecha: la respuesta está arriba, en
 * `.eas-barre__fin`, y tiene que estar en un solo sitio.
 */
.eas-compte {
	flex: none;
	position: relative;
}

/*
 * El triángulo que `<summary>` pinta por su cuenta sobra: el bloque ya lleva su
 * flecha, colocada donde toca. `::-webkit-details-marker` es para Safari, que
 * todavía no atiende a `list-style` aquí.
 */
.eas-compte__bouton {
	align-items: center;
	border-radius: var(--eas-rayon-plein);
	cursor: pointer;
	display: flex;
	gap: var(--eas-espace-8);
	list-style: none;
	min-block-size: var(--eas-cible-tactile);
	padding: var(--eas-espace-4) var(--eas-espace-8);
}

.eas-compte__bouton::-webkit-details-marker {
	display: none;
}

.eas-compte__bouton:hover {
	background-color: var(--eas-surface-survol);
}

.eas-compte__nom {
	white-space: nowrap;
}

.eas-compte__fleche {
	color: var(--eas-texte-second);
	font-size: var(--eas-texte-11);
	transition: transform var(--eas-transition);
}

.eas-compte[open] .eas-compte__fleche {
	transform: rotate(180deg);
}

/*
 * El menú cuelga del bloque, no del documento: por eso `.eas-compte` está
 * posicionado. No hace falta z-index propio —la barra entera ya vive en
 * `--eas-couche-entete`— y `inset-inline-end: 0` lo alinea por la derecha, que
 * es de donde cuelga en una esquina superior derecha.
 */
.eas-compte__menu {
	background-color: var(--eas-surface-carte);
	border: 1px solid var(--eas-ligne-cadre);
	border-radius: var(--eas-rayon-md);
	box-shadow: var(--eas-ombre-lg);
	display: flex;
	flex-direction: column;
	inset-block-start: calc(100% + var(--eas-espace-6));
	inset-inline-end: 0;
	min-inline-size: var(--eas-largeur-menu-compte);
	padding: var(--eas-espace-6);
	position: absolute;
}

.eas-compte__lien {
	border-radius: var(--eas-rayon-sm);
	color: var(--eas-texte);
	display: flex;
	align-items: center;
	font-size: var(--eas-texte-135);
	min-block-size: var(--eas-cible-tactile);
	padding: var(--eas-espace-6) var(--eas-espace-12);
	text-decoration: none;
}

.eas-compte__lien:hover,
.eas-compte__lien:focus-visible {
	background-color: var(--eas-surface-survol);
}

.eas-compte__lien--sortie {
	color: var(--eas-rouge-texte);
}

.eas-compte__filet {
	border: 0;
	border-block-start: 1px solid var(--eas-ligne-fine);
	margin: var(--eas-espace-6) 0;
}

/* A 375 px la barra ya va apretada: queda el avatar, que es lo que identifica la
 * cuenta de un vistazo. El nombre sigue llegando al lector de pantalla. */
@media (max-width: 599px) {

	.eas-compte__nom,
	.eas-compte__fleche {
		display: none;
	}
}

/* 🔴 EN MODO OSCURO EL BOTÓN NECESITA UN BORDE MÁS CLARO.
 *
 * Su relleno (--eas-surface-carte, #1E242B) contra el fondo de la barra
 * (--eas-surface-entete, #232A32) está en 1.08:1: no se distingue. Lo único que
 * dibuja el contorno del control es el filete, así que tiene que llegar al 3:1
 * de WCAG 1.4.11 — y `--eas-ligne-champ` se queda en 1.51:1.
 *
 * Con `--eas-texte-tenu` da 4.03:1. Comprobado en la sección 21 de
 * scripts/verificar-contraste.php. */
[data-eas-theme="sombre"] .eas-barre__theme {
	border-color: var(--eas-texte-tenu);
}