/* ===========================================================================
 * Creación de cuenta — /inscription/
 *
 * Del prototipo «Registro.dc.html» (Écran 7). Se conservan TODOS los efectos
 * que pidió la clienta; lo que no se conserva son sus colores: `#e4252a`
 * aparecía 14 veces en el original y todo sale ahora de tokens.css.
 * ========================================================================= */

.eas-inscription {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-block-size: 100vh;
}

.eas-inscription__panneau {
	align-items: center;
	background-color: var(--eas-surface-page);
	display: flex;
	justify-content: center;
	padding: var(--eas-espace-48) var(--eas-espace-32);
}

.eas-inscription__carte {
	inline-size: 100%;
	max-inline-size: var(--eas-largeur-carte-inscription);
}

.eas-inscription__logo {
	block-size: auto;
	inline-size: var(--eas-largeur-logo-inscription);
}

/* ---------------------------------------------------------------------------
 * 1. Stepper
 *
 * Las pastillas hechas son BOTONES de verdad y se puede volver a ellas, que es
 * lo que pide el handoff. En el prototipo eran <div> con onClick: no se
 * tabulan, no se anuncian y no responden a Intro. Aquí el estado lo lleva un
 * atributo y el navegador pone el foco y el teclado gratis.
 * ------------------------------------------------------------------------- */

.eas-pas {
	margin-block: var(--eas-espace-26) 0;
}

.eas-pas__liste {
	align-items: center;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eas-pas__item {
	align-items: center;
	display: flex;
	flex: 1;
}

.eas-pas__item:last-child {
	flex: none;
}

.eas-pas__pastille {
	background-color: var(--eas-surface-carte);
	block-size: var(--eas-taille-pastille);
	border: 2px solid var(--eas-ligne-champ);
	border-radius: var(--eas-rayon-plein);
	color: var(--eas-texte-tenu);
	display: grid;
	flex: none;
	font-size: var(--eas-texte-sm);
	font-weight: var(--eas-graisse-appuyee);
	inline-size: var(--eas-taille-pastille);
	min-block-size: 0;
	padding: 0;
	place-items: center;
	transition: all var(--eas-transition-lente);
}

.eas-pas__pastille[data-eas-etat="courant"] {
	background-color: var(--eas-rouge);
	border-color: var(--eas-rouge);
	color: var(--eas-action-texte);
}

/*
 * El paso hecho se pinta verde y es el ÚNICO que se puede pulsar. Se marca con
 * `disabled` y no solo con el color: un botón que parece pulsable y no hace
 * nada es peor que uno apagado, y `disabled` lo saca además del recorrido del
 * tabulador.
 */
.eas-pas__pastille[data-eas-etat="fait"] {
	background-color: var(--eas-vert-texte);
	border-color: var(--eas-vert-texte);
	color: var(--eas-action-texte);
	cursor: pointer;
}

.eas-pas__pastille[data-eas-etat="fait"] .eas-pas__numero {
	font-size: 0;
}

.eas-pas__pastille[data-eas-etat="fait"] .eas-pas__numero::after {
	content: "✓";
	font-size: var(--eas-texte-sm);
}

.eas-pas__barre {
	background-color: var(--eas-ligne-cadre);
	block-size: 2px;
	border-radius: var(--eas-rayon-plein);
	display: block;
	flex: 1;
	margin-inline: var(--eas-espace-8);
	overflow: hidden;
}

/* La barra se llena de 0 a 100 % con la curva del handoff, no con un salto. */
.eas-pas__jauge {
	background-color: var(--eas-rouge);
	block-size: 100%;
	display: block;
	inline-size: 0;
	transition: inline-size var(--eas-transition-barre);
}

.eas-pas__item[data-eas-franchi] .eas-pas__jauge {
	inline-size: 100%;
}

.eas-pas__legende {
	color: var(--eas-texte-tenu);
	font-size: var(--eas-texte-xs);
	font-weight: var(--eas-graisse-forte);
	letter-spacing: 0.4px;
	margin: var(--eas-espace-6) 0 0;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 2. 🔴 EL EFECTO «LIGNE → BOÎTE» — el que pidió la clienta expresamente
 *
 * En reposo el campo es una LÍNEA: sin borde, sin fondo, sin radio, solo el
 * subrayado. Al enfocarlo se convierte en una CAJA: borde rojo completo, fondo
 * blanco, esquinas de 10 y una sombra proyectada. Relleno y sin foco: caja
 * también, pero con borde gris y sin sombra.
 *
 * ⚠️ LA TRANSICIÓN ES `all`, Y AQUÍ SÍ ES LO CORRECTO. Normalmente `all` es
 * pereza —anima propiedades que no querías— pero este efecto cambia SEIS a la
 * vez (border, border-radius, background, padding, box-shadow y el color del
 * borde) y enumerarlas deja fuera la que se añada mañana, con lo que el morph
 * se rompe por la mitad sin avisar.
 *
 * ⚠️ Y EL `padding` FORMA PARTE DEL EFECTO: 2px en reposo, 14px en caja. Es lo
 * que hace que el texto se «meta» dentro de la caja al aparecer, en vez de que
 * la caja se dibuje alrededor de un texto quieto. Sin eso el morph se ve barato.
 * ------------------------------------------------------------------------- */

.eas-morphe {
	display: block;
}

.eas-morphe + .eas-morphe {
	margin-block-start: var(--eas-espace-18);
}

.eas-morphe__label {
	color: var(--eas-texte-tenu);
	display: block;
	font-size: var(--eas-texte-xs);
	font-weight: var(--eas-graisse-appuyee);
	letter-spacing: 0.4px;
	margin-block-end: var(--eas-espace-4);
	text-transform: uppercase;
}

.eas-morphe__saisie {
	background-color: transparent;
	/*
	 * ⚠️ 1,5 px, EL DEL HANDOFF, y no 2. Parece un detalle y no lo es: en
	 * reposo esta es la ÚNICA línea del campo, y a 2 px ya se lee como el
	 * borde de una caja. El morph deja entonces de ser «línea → caja» y pasa a
	 * ser «caja gris → caja roja», que es lo que hacía que el efecto se viera
	 * seco aunque la transición durase sus 500 ms.
	 */
	border: var(--eas-trait-morphe) solid transparent;
	border-block-end-color: var(--eas-ligne-champ);
	border-radius: 0;
	color: var(--eas-texte);
	font-size: var(--eas-texte-base);
	inline-size: 100%;
	padding: var(--eas-espace-11) var(--eas-espace-4);
	transition: all var(--eas-transition-morphe);
}

/*
 * 🔴 EL FOCO ES SOLO EL BORDE ROJO. Antes se veía DOBLE BORDE: el rojo del morph
 * más el aro de foco de `base.css`, que se le sumaba por fuera.
 *
 * ⚠️ Y AUN ASÍ EL CAMPO NO SE QUEDA SIN SEÑAL DE FOCO, que es lo que no se puede
 * hacer. Del reposo al foco cambian DOS cosas, no solo el color:
 *
 *   1. el borde pasa de transparente-con-línea-abajo a **rojo completo**, y
 *      --eas-rouge da 5.54:1 sobre el panel, muy por encima del 3:1 que pide
 *      WCAG 1.4.11 para un indicador no textual;
 *   2. aparece la sombra del morph, que el estado «relleno sin foco» NO tiene.
 *
 * Esa segunda es la que importa de verdad: en un campo YA RELLENO el borde solo
 * cambia de gris a rojo, y un indicador de foco que se distingue únicamente por
 * el color es exactamente lo que no vale. La sombra lo desempata.
 */
.eas-morphe__saisie:focus {
	background-color: var(--eas-surface-carte);
	border-color: var(--eas-rouge);
	border-radius: var(--eas-rayon-sm);
	box-shadow: var(--eas-ombre-morphe);
	outline: none;
	padding: var(--eas-espace-11) var(--eas-espace-14);
}

/*
 * `:focus-visible` se iguala a `:focus` a propósito: sin esto, `base.css` le
 * vuelve a añadir su aro doble a quien navega con teclado, que es justo el doble
 * borde que se quitó. La regla tiene que existir para GANARLE, no basta con
 * borrar la nuestra.
 */
.eas-morphe__saisie:focus-visible {
	box-shadow: var(--eas-ombre-morphe);
	outline: none;
}

/*
 * Relleno y sin foco. Se usa `:not(:placeholder-shown)` y NO una clase que
 * ponga el JavaScript: el navegador ya sabe si el campo tiene texto, y así el
 * efecto sobrevive al autorrelleno del gestor de contraseñas, que no dispara
 * ningún evento y dejaría la clase sin poner.
 */
.eas-morphe__saisie:not(:placeholder-shown):not(:focus) {
	background-color: var(--eas-surface-carte);
	border-color: var(--eas-ligne-cadre);
	border-radius: var(--eas-rayon-sm);
	padding: var(--eas-espace-11) var(--eas-espace-14);
}

/* ---------------------------------------------------------------------------
 * 2 ter. El campo que causó el error, al volver del servidor
 *
 * Caja con borde rojo y fondo de error, esté relleno o no. El selector largo es
 * para GANARLE al estado «relleno sin foco» de arriba (0-3-0), que si no lo
 * pintaría de gris: un código mal escrito es precisamente un campo relleno.
 *
 * El color no es la única señal: el mensaje va DEBAJO del campo, en texto, y
 * enlazado con aria-describedby. Con el foco puesto se suma la sombra del
 * morph, así que foco y error se ven a la vez.
 * ------------------------------------------------------------------------- */

.eas-morphe__saisie[aria-invalid="true"],
.eas-morphe__saisie[aria-invalid="true"]:not(:placeholder-shown):not(:focus) {
	background-color: var(--eas-erreur-fond);
	border-color: var(--eas-rouge);
	border-radius: var(--eas-rayon-sm);
	padding: var(--eas-espace-11) var(--eas-espace-14);
}

.eas-niveaux[aria-invalid="true"] .eas-niveau,
.eas-objectifs[aria-invalid="true"] .eas-objectif {
	border-color: var(--eas-rouge);
}

.eas-morphe__erreur {
	color: var(--eas-rouge-second);
	font-size: var(--eas-texte-13);
	font-weight: var(--eas-graisse-semi);
	line-height: var(--eas-interligne-base);
	margin: var(--eas-espace-6) 0 0;
}

/* ---------------------------------------------------------------------------
 * 3 bis. El indicador del botón «Continuer»
 *
 * ⚠️ EL GIRADOR TARDA 150 ms EN APARECER. Comprobar cuatro campos en el
 * navegador tarda cero, así que en el caso normal NO SE VE NUNCA — y eso es lo
 * correcto: enseñarlo igualmente fingiría un trabajo que no existe y frenaría
 * al alumno. Solo asoma donde la espera es de verdad, al enviar el último paso,
 * que sí va al servidor. Es la misma decisión que la capa del loader de página.
 * ------------------------------------------------------------------------- */

.eas-inscription__envoi {
	position: relative;
}

.eas-inscription__envoi::after {
	block-size: var(--eas-taille-girador);
	content: "";
	inline-size: var(--eas-taille-girador);
	opacity: 0;
}

.eas-inscription__envoi[data-eas-etat="verificando"]::after {
	animation:
		eas-girador-aparece 120ms linear 150ms both,
		eas-girador 700ms linear infinite;
	border: 2px solid rgb(255 255 255 / 35%);
	border-block-start-color: var(--eas-action-texte);
	border-radius: var(--eas-rayon-plein);
}

/* El ✓ del paso superado. Este SÍ se ve siempre: confirma que el paso quedó
 * bien antes de que la pantalla cambie debajo. */
.eas-inscription__envoi[data-eas-etat="ok"] {
	background-color: var(--eas-vert-texte);
}

.eas-inscription__envoi[data-eas-etat="ok"]::after {
	content: "✓";
	font-weight: var(--eas-graisse-appuyee);
	opacity: 1;
}

@keyframes eas-girador-aparece {
	to { opacity: 1; }
}

@keyframes eas-girador {
	to { transform: rotate(1turn); }
}

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

	.eas-inscription__envoi[data-eas-etat="verificando"]::after {
		animation: eas-girador-aparece 120ms linear 150ms both;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Medidor de fuerza y concordancia
 * ------------------------------------------------------------------------- */

.eas-force {
	margin-block-start: var(--eas-espace-8);
}

.eas-force__barres {
	display: flex;
	gap: var(--eas-espace-4);
}

.eas-force__barre {
	background-color: var(--eas-ligne-cadre);
	block-size: 4px;
	border-radius: var(--eas-rayon-plein);
	flex: 1;
	transition: background-color var(--eas-transition-lente);
}

/*
 * Los cuatro escalones. El color lo decide el NIVEL alcanzado, no la posición:
 * con fuerza 2 las dos barras encendidas van las dos en rojo, no una roja y
 * otra amarilla. Es lo que hace el prototipo y es lo legible.
 */
.eas-force[data-eas-niveau="1"] .eas-force__barre:nth-child(-n+1),
.eas-force[data-eas-niveau="2"] .eas-force__barre:nth-child(-n+2) {
	background-color: var(--eas-rouge);
}

.eas-force[data-eas-niveau="3"] .eas-force__barre:nth-child(-n+3) {
	background-color: var(--eas-jaune);
}

.eas-force[data-eas-niveau="4"] .eas-force__barre {
	background-color: var(--eas-vert-texte);
}

.eas-force__mot {
	display: block;
	font-size: var(--eas-texte-xs);
	font-weight: var(--eas-graisse-forte);
	margin-block-start: var(--eas-espace-4);
	min-block-size: 1em;
}

.eas-force__mot[data-eas-ton="faible"] { color: var(--eas-rouge); }
.eas-force__mot[data-eas-ton="moyen"]  { color: var(--eas-jaune-chip-texte); }
.eas-force__mot[data-eas-ton="fort"]   { color: var(--eas-vert-texte); }

/* ---------------------------------------------------------------------------
 * 4. Nivel y objetivo
 *
 * Radios de verdad con su <label>. El aspecto lo da :checked; el teclado, el
 * anuncio y el envío los da el navegador.
 * ------------------------------------------------------------------------- */

.eas-niveaux {
	display: grid;
	gap: var(--eas-espace-10);
	grid-template-columns: repeat(3, 1fr);
	margin-block-start: var(--eas-espace-16);
}

.eas-niveau {
	background-color: var(--eas-surface-carte);
	border: 2px solid var(--eas-ligne-cadre);
	border-radius: var(--eas-rayon-lg);
	cursor: pointer;
	display: block;
	padding: var(--eas-espace-12) var(--eas-espace-10);
	text-align: center;
	transition: all var(--eas-transition-morphe);
}

.eas-niveau__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.eas-niveau__code {
	color: var(--eas-texte);
	display: block;
	font-size: var(--eas-texte-125);
	font-weight: var(--eas-graisse-appuyee);
}

.eas-niveau__label {
	color: var(--eas-texte-tenu);
	display: block;
	font-size: var(--eas-texte-xs);
	font-weight: var(--eas-graisse-moyenne);
	margin-block-start: var(--eas-espace-4);
}

.eas-niveau:has(.eas-niveau__radio:checked) {
	background-color: var(--eas-rouge-doux);
	border-color: var(--eas-rouge);
	transform: scale(1.05);
}

.eas-niveau:has(.eas-niveau__radio:checked) .eas-niveau__code {
	color: var(--eas-rouge-texte);
}

/*
 * El foco del radio oculto tiene que verse en la tarjeta, o no hay teclado. Aquí
 * NO vale con el borde rojo: la tarjeta ya se pone roja al ELEGIRLA, así que
 * foco y selección se confundirían. Se marca con la sombra del morph, que la
 * selección no usa, y así los dos estados se distinguen.
 */
.eas-niveau:has(.eas-niveau__radio:focus-visible),
.eas-objectif:has(.eas-objectif__radio:focus-visible) {
	border-color: var(--eas-rouge);
	box-shadow: var(--eas-ombre-morphe);
	outline: none;
}

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

.eas-objectifs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eas-espace-8);
}

.eas-objectif {
	background-color: var(--eas-surface-carte);
	border: 2px solid var(--eas-ligne-cadre);
	border-radius: var(--eas-rayon-plein);
	color: var(--eas-texte-corps);
	cursor: pointer;
	font-size: var(--eas-texte-sm);
	font-weight: var(--eas-graisse-forte);
	padding: var(--eas-espace-8) var(--eas-espace-14);
	transition: all var(--eas-transition-lente);
}

.eas-objectif__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.eas-objectif:has(.eas-objectif__radio:checked) {
	background-color: var(--eas-rouge);
	border-color: var(--eas-rouge);
	color: var(--eas-action-texte);
}

/* ---------------------------------------------------------------------------
 * 5. Pasos y cascada de entrada
 * ------------------------------------------------------------------------- */

.eas-etape {
	border: none;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.eas-etape + .eas-etape {
	margin-block-start: var(--eas-espace-32);
}

.eas-etape__titre {
	font-size: var(--eas-texte-lg);
	font-weight: var(--eas-graisse-appuyee);
	margin-block: var(--eas-espace-22) var(--eas-espace-16);
	padding: 0;
}

.eas-etape__intro {
	color: var(--eas-texte-second);
	font-size: var(--eas-texte-sm);
	margin: calc(var(--eas-espace-10) * -1) 0 0;
}

/*
 * La cascada. Solo corre cuando el módulo ES marca el paso como activo, así
 * que sin JavaScript los tres bloques se ven quietos y a la vez, que es lo que
 * toca. Los hijos entran escalonados con un retardo derivado de su posición.
 */
[data-eas-actif] > * {
	animation: eas-inscription-entree var(--eas-duree-entree) ease-out both;
}

[data-eas-actif] > :nth-child(1) { animation-delay: 0ms; }
[data-eas-actif] > :nth-child(2) { animation-delay: 60ms; }
[data-eas-actif] > :nth-child(3) { animation-delay: 120ms; }
[data-eas-actif] > :nth-child(4) { animation-delay: 180ms; }
[data-eas-actif] > :nth-child(n+5) { animation-delay: 240ms; }

@keyframes eas-inscription-entree {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

.eas-inscription__nav {
	display: flex;
	gap: var(--eas-espace-10);
	margin-block-start: var(--eas-espace-26);
}

.eas-inscription__envoi {
	flex: 1;
}

/* El botón apagado mientras el paso no valga. Gris, y sin cursor de puntero. */
.eas-inscription__envoi[aria-disabled="true"] {
	background-color: var(--eas-chip-fond);
	color: var(--eas-texte-tenu);
	cursor: default;
}

.eas-inscription__pied {
	color: var(--eas-texte-second);
	font-size: var(--eas-texte-sm);
	margin-block-start: var(--eas-espace-22);
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * 6. El panel de la foto
 * ------------------------------------------------------------------------- */

.eas-inscription__scene {
	background-color: var(--eas-chip-fond);
	overflow: hidden;
	position: relative;
}

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

/*
 * Aquí el velo SÍ oscurece, y no contradice lo del acceso: allí el texto es
 * oscuro y el velo tenía que aclarar; aquí el reclamo va en BLANCO, así que
 * alejar el fondo del texto significa oscurecerlo. La regla es la misma —el
 * velo aleja, nunca acerca—; lo que cambia es de qué lado está el texto.
 */
.eas-inscription__voile {
	background-image: linear-gradient(
		200deg,
		rgb(255 255 255 / 15%) 0%,
		transparent 40%,
		var(--eas-voile-inscription) 100%
	);
	inset: 0;
	position: absolute;
}

.eas-inscription__reclame {
	inset-block-end: var(--eas-espace-48);
	inset-inline-start: var(--eas-espace-48);
	max-inline-size: 26rem;
	position: absolute;
}

/* El filete es AMARILLO aquí y rojo en el acceso: lo dice el handoff. */
.eas-inscription__filet {
	background-color: var(--eas-jaune);
	block-size: var(--eas-hauteur-filet);
	display: block;
	inline-size: var(--eas-largeur-filet);
	margin-block-end: var(--eas-espace-16);
}

.eas-inscription__accroche {
	color: var(--eas-texte-inverse);
	font-size: var(--eas-texte-xl);
	font-weight: var(--eas-graisse-appuyee);
	line-height: 1.25;
	margin: 0;
	text-shadow: var(--eas-ombre-texte-photo);
	text-wrap: pretty;
}

.eas-inscription__sous {
	color: var(--eas-texte-inverse);
	font-size: var(--eas-texte-base);
	line-height: 1.55;
	margin: var(--eas-espace-10) 0 0;
	text-shadow: var(--eas-ombre-texte-photo);
}

/* ---------------------------------------------------------------------------
 * Móvil: la foto se va, igual que el vídeo del acceso y por lo mismo.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {

	.eas-inscription {
		grid-template-columns: 1fr;
	}

	.eas-inscription__scene {
		display: none;
	}

	.eas-inscription__panneau {
		padding: var(--eas-espace-32) var(--eas-espace-20);
	}

	.eas-niveaux {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Criterio de terminado nº 5. El morph es el efecto pedido, pero es MOVIMIENTO:
 * con «reducir movimiento» los campos cambian de aspecto sin animarse, la
 * cascada no entra, la barra del stepper no se desliza y la tarjeta de nivel no
 * escala. Lo que se ve sigue siendo exactamente lo mismo, solo que ya puesto. */
@media (prefers-reduced-motion: reduce) {

	.eas-morphe__saisie,
	.eas-pas__pastille,
	.eas-pas__jauge,
	.eas-niveau,
	.eas-objectif,
	.eas-force__barre {
		transition: none;
	}

	[data-eas-actif] > * {
		animation: none;
	}

	.eas-niveau:has(.eas-niveau__radio:checked) {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * 7. El panel de la foto se queda FIJO
 *
 * El formulario de tres pasos cabe en pantalla, pero sin JavaScript se sirven
 * los tres seguidos y la columna izquierda crece. Sin esto la foto se iba con
 * el desplazamiento y dejaba un hueco gris debajo.
 *
 * `sticky` y no `fixed`: `fixed` la saca del flujo y habría que reservarle el
 * hueco a mano con un margen, que se desincroniza con la rejilla en cuanto
 * cambia un ancho. `sticky` sigue siendo un elemento de la rejilla y se queda
 * quieto solo mientras haya columna a la que acompañar.
 *
 * `align-self: start` es imprescindible: los elementos de una rejilla se estiran
 * a la altura de su fila por defecto, y un elemento estirado NO se pega —ya
 * ocupa todo el recorrido, así que no le queda por dónde deslizarse—.
 * ------------------------------------------------------------------------- */

@media (min-width: 901px) {

	.eas-inscription__scene {
		align-self: start;
		block-size: 100vh;
		inset-block-start: 0;
		position: sticky;
	}
}