/**
 * eas-academy — Espace élève (/mon-espace/)
 *
 * Quinta pantalla del handoff. Depende de tokens.css y de coquille.css: aquí no
 * hay ni un color, ni un tamaño, ni un espacio escrito suelto (prohibición 7).
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * LO QUE SE APARTA DEL PROTOTIPO, Y POR QUÉ
 *
 * 1. LOS COLORES SON LOS NUESTROS. El prototipo vuelve a traer los del primer
 *    handoff —#e4252a diecinueve veces, más #1f2a37 y #ffc61a—. Se mapean a los
 *    tokens de marca, que están verificados: el rojo de acción da 5.88:1 sobre
 *    blanco y el navy pasa a --eas-sombre. Es el mismo remapeo que ya hicieron
 *    las cuatro pantallas anteriores.
 *
 * 2. EL ICONO ACTIVO DEL RAÍL NO ALTERNA. El prototipo lo pinta rojo o amarillo
 *    según la posición de la fila; el amarillo de marca da 1.80:1 sobre blanco y
 *    tokens.css lo declara NO apto para texto ni para iconos. Alternar dejaría
 *    la mitad de los estados activos casi invisibles. Van los cuatro en rojo,
 *    que es además la regla de diseño del proyecto: un solo acento.
 *
 * 3. LOS DEGRADADOS DE LOS CURSOS SALEN DEL NIVEL. El prototipo elige tres
 *    degradados a ojo; aquí la vignette toma el token del nivel MCER, que está
 *    derivado y verificado, y la insignia lleva siempre su etiqueta encima: el
 *    color nunca es el único indicador.
 *
 * 4. LAS SECCIONES SON RUTAS. El indicador deslizante sigue existiendo y sigue
 *    siendo un solo elemento colocado con --eas-rangee-active, pero no hay
 *    transición entre secciones porque cada una es una página.
 */

/* ---------------------------------------------------------------------------
 * 1. Rejilla
 * ------------------------------------------------------------------------- */

.eas-ecran--espace {
	background-color: var(--eas-surface-page);
}

.eas-espace__banniere,
.eas-espace {
	inline-size: 100%;
	margin-inline: auto;
	max-inline-size: var(--eas-largeur-atelier);
	padding-inline: var(--eas-espace-16);
}

.eas-espace__banniere {
	padding-block-start: var(--eas-espace-22);
}

.eas-espace {
	align-items: start;
	display: grid;
	gap: var(--eas-espace-22);
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--eas-espace-22) var(--eas-espace-48);
}

.eas-espace__principal {
	display: flex;
	flex-direction: column;
	gap: var(--eas-espace-18);
	min-inline-size: 0;
}

.eas-espace__titre {
	font-size: var(--eas-texte-24);
	font-weight: var(--eas-graisse-appuyee);
	line-height: var(--eas-interligne-serre);
	margin: 0;
}

.eas-carte {
	box-shadow: var(--eas-ombre-carte);
}

.eas-carte__entete {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--eas-espace-10);
}

.eas-carte__titre {
	flex: 1;
	font-size: var(--eas-texte-15);
	font-weight: var(--eas-graisse-appuyee);
	margin: 0;
	min-inline-size: 0;
}

.eas-carte__surtitre {
	color: var(--eas-texte-accent);
	font-size: var(--eas-texte-xs);
	font-weight: var(--eas-graisse-appuyee);
	letter-spacing: 0.07em;
	margin: 0;
}

.eas-vide {
	color: var(--eas-texte-second);
	font-size: var(--eas-texte-135);
	margin: var(--eas-espace-12) 0 0;
}

.eas-lien-discret {
	color: var(--eas-texte-accent);
	flex: none;
	font-size: var(--eas-texte-13);
	font-weight: var(--eas-graisse-forte);
	text-decoration: none;
}

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

/* Variante neutra del botón de acción: mismo tamaño, sin el acento. La usan
 * «Revoir le cours» y «Changer le mot de passe», que no son la acción
 * principal de su tarjeta. */
.eas-bouton--neutre {
	background-color: var(--eas-surface-carte);
	border-color: var(--eas-ligne-champ);
	color: var(--eas-texte);
}

.eas-bouton--neutre:hover,
.eas-bouton--neutre:focus {
	background-color: var(--eas-surface-survol);
	color: var(--eas-texte);
}

/* ---------------------------------------------------------------------------
 * 2. Cabecera
 * ------------------------------------------------------------------------- */

.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;
}

/* ---------------------------------------------------------------------------
 * 4. Banda de bienvenida
 * ------------------------------------------------------------------------- */

.eas-banniere {
	overflow: hidden;
	padding: 0;
}

.eas-banniere__scene {
	background-color: var(--eas-banniere-fond);
	block-size: var(--eas-hauteur-banniere);
	overflow: hidden;
	position: relative;
}

.eas-banniere__video {
	block-size: 100%;
	inline-size: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
}

/*
 * El velo es lo que hace legible el texto, no el vídeo. Va de opaco a
 * transparente hacia la derecha, así que el rótulo se apoya siempre sobre la
 * parte clara pase lo que pase en la imagen de fondo.
 */
.eas-banniere__voile {
	background-image: linear-gradient(90deg, var(--eas-voile-banniere) 0%, transparent 45%);
	inset: 0;
	position: absolute;
}

/*
 * ⚠️ EL SALUDO ARRANCA DONDE ACABA EL AVATAR, Y ESE HUECO SE CALCULA.
 *
 * El avatar sobresale de la banda hacia arriba y se cruza con la última
 * línea del saludo. El prototipo lo resolvía con un `left: 130px` a pelo;
 * aquí ese 130 se deriva de las tres medidas que lo componen, que son las
 * mismas que colocan el avatar de verdad:
 *
 *   --eas-espace-24     sangría de `.eas-banniere__identite`, donde empieza
 *   --eas-taille-avatar lo que ocupa (el borde va dentro: `box-sizing`)
 *   --eas-espace-22     el aire entre el avatar y el texto
 *
 * Escrito así, el día que el avatar cambie de tamaño el saludo se aparta
 * solo. Con el 130 en duro habría que acordarse, y no se acuerda nadie.
 *
 * Las tres son constantes en todos los anchos —la sangría de la fila de
 * identidad no cambia en ningún punto de corte—, así que el corredor del
 * avatar queda libre en 375, en 768, en 1024 y en 1440 por igual. Lo que sí
 * cambia con el ancho es cuántas líneas ocupa el texto, y por eso crece
 * hacia arriba (`inset-block-end`) y no hacia abajo: la banda mide 120px y
 * el saludo más largo que cabe aquí no pasa de tres líneas.
 */
.eas-banniere__accueil {
	color: var(--eas-texte);
	font-size: var(--eas-texte-13);
	font-weight: var(--eas-graisse-forte);
	inset-block-end: var(--eas-espace-16);
	inset-inline-start: calc(
		var(--eas-espace-24) + var(--eas-taille-avatar) + var(--eas-espace-22)
	);
	letter-spacing: 0.03em;
	margin: 0;
	max-inline-size: 40ch;
	padding-inline-end: var(--eas-espace-16);
	position: absolute;
}

.eas-banniere__identite {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--eas-espace-16);
	padding: 0 var(--eas-espace-24) var(--eas-espace-18);
}

.eas-banniere__qui {
	flex: 1;
	min-inline-size: 12rem;
	padding-block-start: var(--eas-espace-12);
}

.eas-banniere__nom {
	font-size: var(--eas-texte-19);
	font-weight: var(--eas-graisse-appuyee);
	margin: 0;
}

.eas-banniere__meta {
	color: var(--eas-texte-second);
	font-size: var(--eas-texte-13);
	margin: 0;
}

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

.eas-banniere__jetons .eas-jeton {
	padding: var(--eas-espace-6) var(--eas-espace-12);
	font-weight: var(--eas-graisse-appuyee);
}

/* ---------------------------------------------------------------------------
 * 5. Raíl de navegación
 * ------------------------------------------------------------------------- */

.eas-rail {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--eas-espace-10);
}

.eas-rail__liste {
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: relative;
}

/*
 * UN SOLO indicador detrás de las cuatro filas, colocado por la posición de la
 * activa. El salto es de 44px: los 42 de la fila más los 2 del hueco. La
 * transición se queda escrita porque el día que las secciones se cambien sin
 * recargar —si se decide— ya está; hoy no llega a verse.
 */
.eas-rail__marqueur {
	background-image: linear-gradient(100deg, var(--eas-jaune-doux) 0%, var(--eas-note-fond) 55%, transparent 100%);
	block-size: var(--eas-hauteur-rangee);
	border-radius: var(--eas-rayon-md);
	box-shadow: inset 2px 0 0 var(--eas-jaune);
	inset-block-start: 0;
	inset-inline: 0;
	pointer-events: none;
	position: absolute;
	transform: translateY(calc(var(--eas-rangee-active, 0) * (var(--eas-hauteur-rangee) + 2px)));
	transition: transform var(--eas-transition);
}

.eas-rail__lien {
	align-items: center;
	block-size: var(--eas-hauteur-rangee);
	border-radius: var(--eas-rayon-md);
	color: var(--eas-texte-second);
	display: flex;
	font-size: var(--eas-texte-sm);
	font-weight: var(--eas-graisse-semi);
	gap: var(--eas-espace-11);
	padding-inline: var(--eas-espace-12);
	position: relative;
	text-decoration: none;
}

.eas-rail__lien:hover {
	background-color: var(--eas-surface-survol);
	color: var(--eas-texte);
	text-decoration: none;
}

.eas-rail__lien--actif {
	color: var(--eas-texte);
	font-weight: var(--eas-graisse-appuyee);
}

/* Sin fondo propio al pasar por encima de la fila activa: el indicador ya está
 * debajo y los dos juntos ensucian el degradado. */
.eas-rail__lien--actif:hover {
	background-color: transparent;
}

.eas-rail__icone {
	align-items: center;
	display: flex;
	flex: none;
	inline-size: var(--eas-espace-20);
	justify-content: center;
	transition: transform var(--eas-transition);
}

/* El icono activo: rojo de marca y un punto más grande. NO alterna con el
 * amarillo, ver la cabecera de esta hoja. */
.eas-rail__lien--actif .eas-rail__icone {
	color: var(--eas-texte-accent);
	transform: scale(1.22);
}

.eas-rail__libelle {
	min-inline-size: 0;
}

.eas-rail__filet {
	background-color: var(--eas-ligne-fine);
	block-size: 1px;
	border: 0;
	margin: var(--eas-espace-8) var(--eas-espace-4);
}

.eas-rail__lien--sortie {
	block-size: auto;
	padding-block: var(--eas-espace-11);
}

/* ---------------------------------------------------------------------------
 * 6. Tarjetas de cifras
 * ------------------------------------------------------------------------- */

.eas-chiffres {
	display: grid;
	gap: var(--eas-espace-14);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.eas-chiffre {
	align-items: center;
	display: flex;
	gap: var(--eas-espace-11);
	min-block-size: var(--eas-hauteur-carte-stat);
	padding: var(--eas-espace-10) var(--eas-espace-16);
}

.eas-chiffre__valeur {
	color: var(--eas-texte);
	flex: none;
	font-size: var(--eas-texte-22);
	font-weight: var(--eas-graisse-max);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.eas-chiffre__unite {
	color: var(--eas-texte);
	font-size: var(--eas-texte-22);
	font-weight: var(--eas-graisse-max);
}

.eas-chiffre__label {
	color: var(--eas-texte-second);
	font-size: var(--eas-texte-xs);
	font-weight: var(--eas-graisse-forte);
	line-height: 1.25;
}

.eas-chiffre--courbe {
	gap: var(--eas-espace-12);
}

.eas-chiffre__bloc {
	flex: none;
}

.eas-chiffre__bloc .eas-chiffre__label {
	display: block;
	margin-block-start: var(--eas-espace-4);
}

.eas-chiffre__graphe {
	flex: 1;
	min-inline-size: 0;
}

/* --- Anillo ---------------------------------------------------------- */

.eas-anneau {
	block-size: var(--eas-taille-anneau-stat);
	display: block;
	flex: none;
	inline-size: var(--eas-taille-anneau-stat);
}

.eas-anneau__piste {
	fill: none;
	stroke: var(--eas-piste);
	stroke-width: 3;
}

/*
 * El arco viene del servidor YA en su valor: --eas-arc-reste es lo que queda
 * por trazar. Sin JavaScript se ve así de entrada, que es lo correcto; el
 * módulo ES solo lo rebobina a --eas-arc y lo suelta.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * EL ARCO VA EN ROJO DE MARCA, LA PISTA SIGUE NEUTRA. Y NO ES SOLO GUSTO:
 *
 * 1. LA BARRA DE PROGRESO DE ESTA MISMA PANTALLA YA ES ROJA SOBRE --eas-piste
 *    (sección 7, `.eas-progres__part`). El anillo y la barra dicen lo mismo
 *    —cuánto llevas— y se ven a diez centímetros el uno del otro: pintarlos
 *    con dos parejas de color distintas es inventar dos idiomas para un
 *    concepto. El anillo estaba en gris porque se quedó sin revisar, no
 *    porque se decidiera.
 *
 * 2. EL AMARILLO NO PUEDE SER EL ARCO. --eas-jaune sobre la pista da 1.55:1 y
 *    sobre la tarjeta 1.80:1, muy por debajo del 3:1 que exige WCAG 1.4.11
 *    para lo que no es texto. Es la misma razón por la que se le quitó al
 *    raíl la alternancia rojo/amarillo. El arco PORTA EL DATO: es justo lo
 *    que no puede ir en un color que no se ve.
 *
 * 3. Y COMO PISTA TAMPOCO, aunque ahí el contraste no lo impida —una pista no
 *    porta información, y la gris de hoy está a 1.16:1 de la tarjeta, todavía
 *    menos—. El motivo es de significado: con la pista en amarillo pleno, un
 *    anillo al 25 % es tres cuartas partes de amarillo saturado, y el papel
 *    declarado del amarillo en tokens.css es «destacados, insignias».
 *    Destacaría la parte que FALTA. Además la regla de diseño del proyecto es
 *    un solo acento por pieza.
 *
 * Contrastes de lo que queda puesto, con scripts/verificar-contraste.php:
 *   arco --eas-rouge sobre --eas-piste ....... 5.06:1  (mínimo 3:1) ✔
 *   arco --eas-rouge sobre la tarjeta ........ 5.88:1  (mínimo 3:1) ✔
 *   glifo --eas-texte-second sobre la tarjeta  5.98:1  (mínimo 4.5:1) ✔
 *
 * El glifo NO cambia. Se queda en gris a propósito: identifica de qué es el
 * anillo (▶ ✓ ★), no cuánto llevas. En rojo daría 5.88:1 —también legible—,
 * pero entonces el color dejaría de significar «progreso» dentro de la pieza.
 */
.eas-anneau__arc {
	fill: none;
	stroke: var(--eas-rouge);
	stroke-dasharray: var(--eas-arc);
	stroke-dashoffset: var(--eas-arc-reste);
	stroke-linecap: round;
	stroke-width: 3;
	transform: rotate(-90deg);
	transform-origin: center;
}

.eas-anneau__glyphe {
	fill: var(--eas-texte-second);
	font-size: 12px;
	font-weight: var(--eas-graisse-appuyee);
}

/*
 * El dibujo del centro, para lo que no tiene carácter que lo diga (la hoja de
 * «Ateliers réussis»). MISMO COLOR que el glifo de texto —`--eas-texte-second`,
 * 5.98:1 sobre la tarjeta—, así que la comprobación de contraste que ya existe
 * lo cubre: cambia el trazo, no el color.
 *
 * El grosor no sale de la escala de espaciado por lo mismo que el radio y el
 * trazo del anillo: son medidas de un dibujo, no ritmo de página. 1,5 es lo que
 * iguala la mancha del `✓` de la tarjeta de al lado, que va en 12 px y en
 * `--eas-graisse-appuyee`.
 */
.eas-anneau__dessin {
	fill: none;
	stroke: var(--eas-texte-second);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.5;
}

/* --- Curva ------------------------------------------------------------ */

.eas-courbe {
	block-size: 30px;
	display: block;
	inline-size: 100%;
	overflow: visible;
}

.eas-courbe__seuil {
	stroke: var(--eas-piste);
	stroke-dasharray: 3 4;
	stroke-width: 1;
}

.eas-courbe__trace {
	fill: none;
	stroke: var(--eas-rouge);
	stroke-dasharray: var(--eas-trace);
	stroke-dashoffset: 0;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.eas-courbe__aire {
	opacity: 1;
}

.eas-courbe__haut {
	stop-color: var(--eas-rouge);
	stop-opacity: 0.14;
}

.eas-courbe__bas {
	stop-color: var(--eas-rouge);
	stop-opacity: 0;
}

.eas-courbe__point {
	fill: var(--eas-rouge);
	stroke: var(--eas-surface-carte);
	stroke-width: 1.5;
}

/* ---------------------------------------------------------------------------
 * 7. Barra de progreso
 * ------------------------------------------------------------------------- */

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

.eas-progres__piste {
	background-color: var(--eas-piste);
	block-size: var(--eas-hauteur-barre);
	border-radius: var(--eas-rayon-plein);
	flex: 1;
	max-inline-size: var(--eas-largeur-barre);
	overflow: hidden;
}

.eas-progres__part {
	background-color: var(--eas-rouge);
	block-size: 100%;
	display: block;
	inline-size: var(--eas-part, 0%);
}

.eas-progres__part--fini {
	background-color: var(--eas-vert-texte);
}

.eas-progres__texte {
	color: var(--eas-texte-second);
	flex: none;
	font-size: var(--eas-texte-125);
	font-weight: var(--eas-graisse-forte);
}

/* ---------------------------------------------------------------------------
 * 8. Reprendre où vous étiez
 * ------------------------------------------------------------------------- */

.eas-reprise {
	padding: var(--eas-espace-20) var(--eas-espace-22);
}

.eas-reprise__corps {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--eas-espace-18);
	margin-block-start: var(--eas-espace-12);
}

.eas-reprise__quoi {
	flex: 1;
	min-inline-size: 15rem;
}

.eas-reprise__lecon {
	font-size: var(--eas-texte-17);
	font-weight: var(--eas-graisse-appuyee);
	margin: 0;
}

.eas-reprise__cours {
	color: var(--eas-texte-second);
	font-size: var(--eas-texte-13);
	margin: var(--eas-espace-4) 0 0;
}

/* ---------------------------------------------------------------------------
 * 9. Últimos intentos
 * ------------------------------------------------------------------------- */

.eas-derniers {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: var(--eas-espace-8) 0 0;
	padding: 0;
}

.eas-derniers__ligne {
	align-items: center;
	border-block-start: 1px solid var(--eas-ligne-fine);
	display: flex;
	flex-wrap: wrap;
	gap: var(--eas-espace-12);
	padding: var(--eas-espace-11) 0;
}

.eas-pastille-etat {
	block-size: var(--eas-espace-10);
	border-radius: var(--eas-rayon-plein);
	flex: none;
	inline-size: var(--eas-espace-10);
}

.eas-pastille-etat--reussi {
	background-color: var(--eas-vert);
}

.eas-pastille-etat--echoue {
	background-color: var(--eas-rouge);
}

.eas-derniers__nom {
	color: var(--eas-texte);
	flex: 1;
	font-size: var(--eas-texte-sm);
	font-weight: var(--eas-graisse-forte);
	min-inline-size: 8rem;
	overflow: hidden;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

.eas-derniers__date {
	color: var(--eas-texte-tenu);
	flex: none;
	font-size: var(--eas-texte-125);
}

.eas-derniers__score {
	flex: none;
	font-size: var(--eas-texte-135);
	font-weight: var(--eas-graisse-appuyee);
	min-inline-size: 3rem;
	text-align: end;
}

.eas-derniers__score--reussi {
	color: var(--eas-vert-texte);
}

.eas-derniers__score--echoue {
	color: var(--eas-rouge-texte);
}

/* --- Chip de estado, compartido con la tabla ------------------------- */

.eas-etat {
	border-radius: var(--eas-rayon-plein);
	display: inline-block;
	font-size: var(--eas-texte-11);
	font-weight: var(--eas-graisse-appuyee);
	padding: var(--eas-espace-4) var(--eas-espace-10);
	white-space: nowrap;
}

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

.eas-etat--echoue {
	background-color: var(--eas-erreur-fond);
	color: var(--eas-rouge-texte);
}

.eas-etat--attente {
	background-color: var(--eas-chip-fond);
	color: var(--eas-chip-texte);
}

/* ---------------------------------------------------------------------------
 * 10. Cours suivis
 * ------------------------------------------------------------------------- */

.eas-cours {
	display: grid;
	gap: var(--eas-espace-16);
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.eas-cours__fiche {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

/*
 * La vignette toma el color del NIVEL. --eas-teinte llega desde la plantilla
 * con el token del nivel; si el curso no declara ninguno se queda el neutro,
 * que es lo correcto: no se inventa un color para un dato que no existe.
 */
.eas-cours__vignette {
	align-items: flex-end;
	background-color: var(--eas-teinte, var(--eas-surface-entete));
	background-image: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.28) 100%);
	block-size: var(--eas-hauteur-vignette);
	display: flex;
	padding: var(--eas-espace-14) var(--eas-espace-18);
}

.eas-insigne--niveau {
	background-color: var(--eas-surface-carte);
	color: var(--eas-texte);
	letter-spacing: 0.06em;
}

.eas-cours__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--eas-espace-10);
	padding: var(--eas-espace-16) var(--eas-espace-18);
}

.eas-cours__nom {
	font-size: var(--eas-texte-base);
	font-weight: var(--eas-graisse-appuyee);
	line-height: 1.3;
	margin: 0;
}

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

.eas-cours__fiche .eas-progres {
	margin-block-start: auto;
}

.eas-cours__action {
	inline-size: 100%;
}

/* ---------------------------------------------------------------------------
 * 11. Mes tentatives
 * ------------------------------------------------------------------------- */

.eas-tentatives {
	padding: 0;
}

/* La tabla se desplaza dentro de su marco en vez de encogerse: seis columnas
 * apretadas dejan de poder leerse en filas, que es para lo que sirve una tabla.
 * Mismo criterio que las del taller. */
.eas-tentatives__cadre {
	overflow-x: auto;
}

.eas-tableau-tentatives {
	border-collapse: collapse;
	inline-size: 100%;
	min-inline-size: var(--eas-largeur-tableau-min);
	text-align: start;
}

.eas-tableau-tentatives th,
.eas-tableau-tentatives td {
	padding: var(--eas-espace-12) var(--eas-espace-18);
	text-align: start;
	vertical-align: middle;
}

.eas-tableau-tentatives thead th {
	background-color: var(--eas-surface-entete);
	border-block-end: 1px solid var(--eas-ligne-cadre);
	color: var(--eas-texte-tenu);
	font-size: var(--eas-texte-11);
	font-weight: var(--eas-graisse-appuyee);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.eas-tableau-tentatives tbody th,
.eas-tableau-tentatives tbody td {
	border-block-end: 1px solid var(--eas-ligne-fine);
	font-size: var(--eas-texte-135);
}

.eas-tableau-tentatives__nom {
	font-weight: var(--eas-graisse-forte);
}

.eas-tableau-tentatives__date,
.eas-tableau-tentatives__seuil {
	color: var(--eas-texte-second);
	font-size: var(--eas-texte-125);
	white-space: nowrap;
}

.eas-tableau-tentatives__score {
	font-weight: var(--eas-graisse-appuyee);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.eas-tableau-tentatives__score--reussi {
	color: var(--eas-vert-texte);
}

.eas-tableau-tentatives__score--echoue {
	color: var(--eas-rouge-texte);
}

.eas-tableau-tentatives__score--attente {
	color: var(--eas-texte-tenu);
}

.eas-tableau-tentatives__action {
	white-space: nowrap;
}

.eas-tableau-tentatives__action a {
	color: var(--eas-texte-accent);
	font-size: var(--eas-texte-125);
	font-weight: var(--eas-graisse-appuyee);
	text-decoration: none;
}

.eas-tableau-tentatives__action a:hover,
.eas-tableau-tentatives__action a:focus-visible {
	text-decoration: underline;
}

.eas-tentatives__note {
	color: var(--eas-texte-tenu);
	font-size: var(--eas-texte-125);
	margin: 0;
	padding: var(--eas-espace-12) var(--eas-espace-18);
}

/* ---------------------------------------------------------------------------
 * 12. Mon profil
 * ------------------------------------------------------------------------- */

.eas-profil__entete {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--eas-espace-22);
	padding: var(--eas-espace-22) var(--eas-espace-24);
}

.eas-profil__qui {
	flex: 1;
	min-inline-size: 12rem;
}

.eas-profil__nom {
	font-size: var(--eas-texte-19);
	font-weight: var(--eas-graisse-appuyee);
	margin: 0;
}

.eas-profil__meta {
	color: var(--eas-texte-second);
	font-size: var(--eas-texte-135);
	margin: var(--eas-espace-4) 0 0;
}

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

.eas-profil__form {
	padding: var(--eas-espace-22) var(--eas-espace-24);
}

.eas-profil__grille {
	display: grid;
	gap: var(--eas-espace-16) var(--eas-espace-20);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.eas-champ-bloc {
	margin: 0;
}

.eas-champ-bloc__label {
	color: var(--eas-texte-tenu);
	display: block;
	font-size: var(--eas-texte-xs);
	font-weight: var(--eas-graisse-appuyee);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.eas-saisie {
	background-color: var(--eas-surface-champ);
	border: var(--eas-bordure-champ) solid var(--eas-ligne-champ);
	border-radius: var(--eas-rayon-champ);
	color: var(--eas-texte);
	font-family: inherit;
	font-size: var(--eas-texte-sm);
	inline-size: 100%;
	margin-block-start: var(--eas-espace-6);
	/* 44px de alto: el mismo objetivo táctil que el resto de los controles. */
	min-block-size: var(--eas-cible-tactile);
	padding: var(--eas-espace-10) var(--eas-espace-12);
}

.eas-saisie--fige {
	background-color: var(--eas-surface-entete);
	color: var(--eas-texte-corps);
}

.eas-profil__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eas-espace-10);
	margin-block-start: var(--eas-espace-18);
}

/* ---------------------------------------------------------------------------
 * 13. Pantallas anchas
 * ------------------------------------------------------------------------- */

@media (min-width: 768px) {

	.eas-espace__banniere,
	.eas-espace {
		padding-inline: var(--eas-espace-24);
	}

	.eas-carte {
		padding: var(--eas-espace-22) var(--eas-espace-24);
	}

	.eas-banniere,
	.eas-cours__fiche,
	.eas-tentatives {
		padding: 0;
	}
}

@media (min-width: 1024px) {

	.eas-espace {
		grid-template-columns: var(--eas-largeur-rail) minmax(0, 1fr);
	}

	/* El raíl acompaña al desplazamiento, por debajo de la cabecera fija. */
	.eas-rail {
		padding: var(--eas-espace-10);
		position: sticky;
		top: calc(var(--eas-hauteur-entete) + var(--eas-espace-22));
	}
}

/* ---------------------------------------------------------------------------
 * 14. Menos movimiento
 *
 * Un vídeo en bucle detrás de un texto es justo lo que esta preferencia existe
 * para evitar. Se queda en el primer fotograma; el velo y el rótulo no cambian,
 * así que la banda se lee igual.
 * ------------------------------------------------------------------------- */

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

	.eas-rail__marqueur,
	.eas-rail__icone {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * 15. Nota sobre los valores en `rem` y `ch` de esta hoja
 *
 * Quedan sueltos unos pocos —`min-inline-size: 12rem`, `minmax(17rem, 1fr)`,
 * `max-inline-size: 40ch`— y no incumplen la prohibición 7: no son medidas de
 * diseño sino UMBRALES DE PLEGADO, el ancho por debajo del cual una columna se
 * va a la línea siguiente. Van en unidades relativas a propósito, para que la
 * rejilla se pliegue antes si el visitante agranda la letra. atelier.css hace lo
 * mismo con los suyos. Un token por umbral solo añadiría un nombre que no
 * significa nada fuera de su regla.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 10. Estado vacío del tablero
 *
 * Lo que ve un alumno el día que se registra. No es un caso raro: es el primero
 * de todos, y sin esto vería tres anillos a cero y un «Reprendre» sin destino,
 * o sea un panel que parece roto.
 * ------------------------------------------------------------------------- */

.eas-debut {
	text-align: center;
}

.eas-debut__salut {
	font-size: var(--eas-texte-lg);
	font-weight: var(--eas-graisse-appuyee);
	margin: 0;
}

.eas-debut__dit {
	color: var(--eas-texte-corps);
	margin: var(--eas-espace-8) auto 0;
	max-inline-size: 34rem;
}

.eas-debut__texte {
	color: var(--eas-texte-second);
	margin: var(--eas-espace-16) auto 0;
	max-inline-size: 34rem;
}

.eas-debut__bouton {
	margin-block-start: var(--eas-espace-20);
}