/**
 * 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);
}


/* ---------------------------------------------------------------------------
 * 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.
 */
.eas-barre__theme {
	background-color: var(--eas-surface-carte);
	block-size: var(--eas-taille-bouton);
	border: 1px solid var(--eas-ligne-champ);
	border-radius: var(--eas-rayon-champ);
	color: var(--eas-texte);
	cursor: not-allowed;
	display: grid;
	flex: none;
	font-size: var(--eas-texte-15);
	inline-size: var(--eas-taille-bouton);
	opacity: var(--eas-opacite-desactive);
	place-items: center;
}

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