/**
 * eas-theme — Tokens de diseño
 *
 * Única fuente de verdad para color, espaciado, radios, sombras y tipografía.
 * Prohibición 7 del proyecto: ningún valor de color, tamaño o espaciado puede
 * aparecer suelto en otra hoja. Si hace falta un valor nuevo, se añade aquí.
 *
 * Los contrastes anotados están calculados con WCAG 2.1 (luminancia relativa
 * sRGB) y verificados con scripts/verificar-contraste.php.
 *
 * @package eas-theme
 */

:root {

	/* ---------------------------------------------------------------------
	 * 1. Paleta de marca
	 *
	 * Un solo acento: el rojo se reserva para acciones y estados activos.
	 * Todo lo demás es neutro. Nombres en francés, como el resto de la interfaz.
	 * ------------------------------------------------------------------- */

	--eas-rouge:  #C8102E; /* acento principal: acciones, estados activos */
	--eas-sombre: #2E3239; /* texto, cabeceras, fondos oscuros */
	--eas-jaune:  #F5B715; /* acento secundario: destacados, insignias */
	--eas-creme:  #FDF8EC; /* fondos suaves */
	--eas-gris:   #F5F3F1; /* filas alternas, superficies */
	--eas-ligne:  #DCD9D5; /* bordes */

	--eas-blanc:  #FFFFFF; /* fondo base; se nombra para no escribirlo suelto */

	/* Alias en español: el CLAUDE.md del proyecto nombra la paleta en español.
	 * Se mantienen para que nada escrito contra aquel documento se rompa.
	 * Código nuevo: usar siempre los nombres franceses de arriba. */
	--eas-rojo:     var(--eas-rouge);
	--eas-oscuro:   var(--eas-sombre);
	--eas-amarillo: var(--eas-jaune);
	--eas-crema:    var(--eas-creme);
	--eas-linea:    var(--eas-ligne);

	/* ---------------------------------------------------------------------
	 * 2. Contraste verificado del acento
	 *
	 * #C8102E sobre #FFFFFF ......... 5.88:1  AA texto normal · AAA texto grande
	 * #C8102E sobre #FDF8EC (crème) . 5.55:1  AA texto normal · AAA texto grande
	 * #C8102E sobre #F5F3F1 (gris) .. 5.32:1  AA texto normal · AAA texto grande
	 * #FFFFFF sobre #C8102E ......... 5.88:1  AA texto normal · AAA texto grande
	 *
	 * El rojo sirve como texto sobre los tres fondos claros y como fondo de
	 * botón con texto blanco. Ninguna combinación llega a AAA en texto normal:
	 * si en algún sitio hiciera falta AAA, se usa --eas-sombre, que da 12.87:1.
	 *
	 * Advertencias sobre el resto de la paleta:
	 *   --eas-jaune sobre blanco da 1.80:1: NO es color de texto. Solo fondo,
	 *   y siempre con --eas-sombre encima (7.15:1, AAA).
	 *   --eas-ligne sobre blanco da 1.41:1: solo bordes decorativos, nunca texto
	 *   ni el único indicador de un límite con significado.
	 * ------------------------------------------------------------------- */

	/* ---------------------------------------------------------------------
	 * 3. Roles semánticos
	 *
	 * Las hojas de componentes usan estos, no los colores crudos: así un cambio
	 * de marca se hace en un sitio y el significado no se pierde por el camino.
	 * ------------------------------------------------------------------- */

	--eas-fond:            var(--eas-blanc);
	--eas-fond-doux:       var(--eas-creme);
	--eas-fond-surface:    var(--eas-gris);
	--eas-fond-inverse:    var(--eas-sombre);

	--eas-texte:           var(--eas-sombre);
	--eas-texte-doux:      #4A4F57; /* --eas-sombre aclarado; 8.24 blanco · 7.78 crème · 7.45 gris, AAA */
	--eas-texte-inverse:   var(--eas-blanc);
	--eas-texte-accent:    var(--eas-rouge);

	--eas-bordure:         var(--eas-ligne);
	--eas-bordure-forte:   var(--eas-sombre);

	--eas-action:          var(--eas-rouge);
	--eas-action-texte:    var(--eas-blanc);
	--eas-action-survol:   #A50D26; /* rojo oscurecido para :hover; 7.82:1 sobre blanco, AAA */

	/* Foco visible: obligatorio por el criterio de terminado nº 5.
	 *
	 * Va en DOS aros, no en uno. Un aro sombre sobre un botón rojo solo da
	 * 2.19:1, por debajo del 3:1 que exige WCAG 1.4.11 para elementos no
	 * textuales: sobre el acento se perdería. Con el aro interior blanco y el
	 * exterior sombre siempre hay uno de los dos que despega, sea cual sea el
	 * fondo (blanco/rojo 5.88:1 · blanco/sombre 12.87:1 · sombre/claros >11:1).
	 *
	 * Uso: outline en --eas-focus-interne y box-shadow en --eas-focus-externe. */
	--eas-focus-interne:   var(--eas-blanc);
	--eas-focus-externe:   var(--eas-sombre);
	--eas-focus-epaisseur: 3px;
	--eas-focus-decalage:  2px;

	/* ---------------------------------------------------------------------
	 * 4. Niveles MCER
	 *
	 * Derivados de la paleta, no elegidos a ojo: el recorrido va de --eas-jaune
	 * (A1) a --eas-sombre (C2) pasando por --eas-rouge en el centro, y cada
	 * parada se oscurece hasta cumplir dos condiciones a la vez:
	 *   1. contraste >= 4.5:1 sobre blanco, crème y gris;
	 *   2. separación >= 1.3:1 respecto al rojo de acción, para que una insignia
	 *      de nivel nunca se pueda confundir con un botón.
	 * El resultado supera AAA (>= 7:1) en las tres superficies claras, y admite
	 * texto blanco encima con el mismo margen.
	 *
	 * Reproducible con scripts/derivar-niveaux-mcer.php.
	 *
	 * ADVERTENCIA DE ACCESIBILIDAD: B1 y B2 quedan próximos en tono (ladrillo
	 * frente a carmín) porque son paradas contiguas del mismo recorrido. El color
	 * NUNCA es el único indicador de nivel: la insignia lleva siempre su etiqueta
	 * («A1», «B2»…). Esto vale igual para daltonismo, que afecta a todo el tramo
	 * cálido del recorrido.
	 * ------------------------------------------------------------------- */

	--eas-niveau-a1: #694F09; /* oro oscuro    ·  7.71:1 blanco ·  7.28:1 crème ·  6.97:1 gris */
	--eas-niveau-a2: #814212; /* ámbar         ·  7.72:1 blanco ·  7.28:1 crème ·  6.97:1 gris */
	--eas-niveau-b1: #9D251F; /* ladrillo      ·  7.73:1 blanco ·  7.29:1 crème ·  6.98:1 gris */
	--eas-niveau-b2: #A4162F; /* carmín        ·  7.68:1 blanco ·  7.25:1 crème ·  6.94:1 gris */
	--eas-niveau-c1: #6C2435; /* granate       · 10.82:1 blanco · 10.21:1 crème ·  9.77:1 gris */
	--eas-niveau-c2: #2E3239; /* pizarra       · 12.87:1 blanco · 12.15:1 crème · 11.63:1 gris */

	/* ---------------------------------------------------------------------
	 * 5. Escala de espaciado
	 *
	 * Nombrada por su valor en píxeles para que no haya que traducir mentalmente.
	 * Base 4: todo el ritmo vertical y horizontal sale de aquí.
	 * ------------------------------------------------------------------- */

	--eas-espace-4:  0.25rem; /*  4px */
	--eas-espace-8:  0.5rem;  /*  8px */
	--eas-espace-12: 0.75rem; /* 12px */
	--eas-espace-16: 1rem;    /* 16px */
	--eas-espace-24: 1.5rem;  /* 24px */
	--eas-espace-32: 2rem;    /* 32px */
	--eas-espace-48: 3rem;    /* 48px */
	--eas-espace-64: 4rem;    /* 64px */
	--eas-espace-96: 6rem;    /* 96px */

	/* ---------------------------------------------------------------------
	 * 6. Radios
	 * ------------------------------------------------------------------- */

	--eas-rayon-sm: 4px;    /* insignias, campos de formulario, celdas */
	--eas-rayon-md: 8px;    /* botones, tarjetas, avisos */
	--eas-rayon-lg: 16px;   /* módulos, paneles, ventanas modales */
	--eas-rayon-plein: 999px; /* píldoras y avatares; no cuenta como cuarto radio */

	/* ---------------------------------------------------------------------
	 * 7. Sombras
	 *
	 * Tintadas con --eas-sombre en vez de negro puro: sobre el crème, una sombra
	 * negra se ve sucia y grisácea.
	 * ------------------------------------------------------------------- */

	--eas-ombre-sm: 0 1px 2px rgba(46, 50, 57, 0.08);
	--eas-ombre-md: 0 2px 8px rgba(46, 50, 57, 0.10), 0 1px 2px rgba(46, 50, 57, 0.06);
	--eas-ombre-lg: 0 8px 24px rgba(46, 50, 57, 0.12), 0 2px 6px rgba(46, 50, 57, 0.08);

	/* ---------------------------------------------------------------------
	 * 8. Tipografía
	 *
	 * Móvil primero: estos son los tamaños de 375px. Los dos mayores crecen en
	 * pantallas anchas (ver el bloque de media query al final).
	 * La familia es Source Sans 3, que es lo que pide el handoff de diseño. Se
	 * carga desde Google Fonts con display=swap y la pila del sistema detrás: si
	 * la petición falla o tarda, la pantalla se lee igual, solo cambia la letra.
	 * Es la única dependencia de red del proyecto, y la justifica una decisión
	 * de marca, no la comodidad.
	 * ------------------------------------------------------------------- */

	--eas-police: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--eas-police-titre: var(--eas-police);
	--eas-police-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	--eas-texte-xs:   0.75rem;  /* 12px — metadatos, pies de tabla */
	--eas-texte-sm:   0.875rem; /* 14px — insignias, etiquetas, ayudas */
	--eas-texte-base: 1rem;     /* 16px — cuerpo de texto */
	--eas-texte-lg:   1.125rem; /* 18px — entradilla, cuerpo destacado */
	--eas-texte-xl:   1.5rem;   /* 24px — títulos de sección */
	--eas-texte-2xl:  2rem;     /* 32px — título de página */

	--eas-graisse-normale: 400;
	--eas-graisse-moyenne: 500;
	--eas-graisse-forte:   700;

	--eas-interligne-serre: 1.2;  /* títulos */
	--eas-interligne-base:  1.6;  /* cuerpo; suficiente para lectura larga */
	--eas-interligne-large: 1.75; /* lecciones, texto de estudio */

	/* Longitud de línea cómoda para el contenido de las lecciones. */
	--eas-mesure: 68ch;

	/* ---------------------------------------------------------------------
	 * 9. Disposición y movimiento
	 * ------------------------------------------------------------------- */

	--eas-largeur-max: 1200px;
	--eas-largeur-lecture: 720px;

	--eas-transition: 150ms ease;

	/* 🔴 Duraciones del registro. NO son --eas-transition (150 ms): el efecto
	 * «ligne → boîte» que pidió la clienta es LENTO a propósito —el handoff lo
	 * fija en .5s con esa curva— y acelerarlo lo destruye, porque lo que se ve
	 * es la caja formándose, no un cambio de estado. Van aquí y no sueltas en la
	 * hoja para que nadie las «optimice» a 150 ms sin saber qué rompe. */
	--eas-transition-morphe: 500ms cubic-bezier(0.22, 1, 0.36, 1);
	--eas-transition-barre:  600ms cubic-bezier(0.22, 1, 0.36, 1);
	--eas-transition-lente:  350ms ease;
	--eas-duree-entree:      450ms;

	/* Sombra del campo enfocado en el morph: es el acento al 28 %, proyectada
	 * hacia abajo. Sin ella la caja aparece plana y el efecto no se lee. */
	--eas-ombre-morphe: 0 10px 26px -10px rgb(200 16 46 / 28%);

	/* Sombra del texto sobre la foto. Es un REFUERZO, no la garantía: la
	 * garantía es el velo, que está medido en verificar-contraste.php. */
	--eas-ombre-texte-photo: 0 2px 14px rgb(16 20 24 / 35%);

	/* Objetivo táctil mínimo. WCAG 2.5.8 pide 24px; 44px es la recomendación de
	 * Apple y de Google, y es la que se aplica aquí a botones y enlaces de lista. */
	--eas-cible-tactile: 44px;

	/* Anchos de columna de las pantallas del alumno. No salen de la escala de
	 * espaciado porque no son ritmo, son disposición: el temario del reproductor
	 * y la columna lateral de la ficha de taller. */
	--eas-largeur-temario:      340px;
	--eas-largeur-fiche:        380px;
	--eas-largeur-progres:      280px;
	--eas-largeur-progres-min:  180px;
	--eas-largeur-carte-connexion: 360px; /* la columna del formulario de acceso */
	--eas-largeur-logo-connexion:  160px; /* el logotipo sobre ese formulario */
	--eas-largeur-filet:            34px; /* el filete rojo sobre el reclamo */
	--eas-largeur-carte-inscription: 400px; /* la columna del formulario de registro */
	--eas-largeur-logo-inscription:  152px; /* el logotipo sobre ese formulario */

	/* Capas: nombradas para no repartir z-index sueltos por las hojas. */
	--eas-couche-base:    1;
	--eas-couche-entete: 100;
	--eas-couche-modale: 200;
	--eas-couche-loader: 300; /* tapa a todo, incluida una modal que llegue abierta */
}

/* Los dos tamaños mayores crecen a partir de tableta. El resto no cambia:
 * el cuerpo de texto ya está bien a 16px en cualquier pantalla. */
@media (min-width: 768px) {

	:root {
		--eas-texte-xl:  1.75rem; /* 28px */
		--eas-texte-2xl: 2.5rem;  /* 40px */
	}
}

/* Criterio de terminado nº 5: respetar a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {

	:root {
		--eas-transition: 0ms;
	}
}

/* =====================================================================
 * 10. Escala de superficies del handoff de diseño
 *
 * Procedencia: design_handoff_plataforma_educativa (agosto 2026). El handoff
 * traía su propia paleta de marca (#e4252a / #ffc61a / #1f2a37); esa parte NO
 * se adopta. Se adopta la escala de superficies, chips y estados, y se remapea
 * sobre la marca ya verificada: rojo --eas-rouge, amarillo --eas-jaune, y
 * --eas-sombre en lugar del navy #1f2a37 del handoff.
 *
 * La sustitución se auditó par a par: NINGUNA combinación pierde AA al cambiar
 * de paleta, y dos la ganan (el rojo como texto sobre la superficie de página
 * pasa de 4.30:1 a 5.54:1, y sobre el fondo de error de 4.14:1 a 5.33:1).
 *
 * Cuatro valores del handoff sí se corrigieron, porque fallaban AA por sí solos
 * y el criterio de terminado nº 5 no admite excepciones. Cada uno lleva
 * anotado el original. Reproducible con scripts/verificar-contraste.php.
 * ------------------------------------------------------------------- */

:root {

	/* --- Superficies (handoff: --bg2 --card --thead --hover --field) ----- */

	--eas-surface-page:    #F7F8FA; /* fondo de las pantallas de estudio */
	--eas-surface-carte:   #FFFFFF; /* tarjetas, cabecera, paneles */
	--eas-surface-entete:  #FAFBFC; /* cabeceras de tabla y primera columna */
	--eas-surface-survol:  #F5F6F8; /* hover de botones neutros */
	--eas-surface-champ:   #FFFFFF; /* fondo de los campos de texto */

	/* --- Líneas (handoff: --line --line2 --inb --track) ------------------ */

	--eas-ligne-cadre:  #E6E8EC; /* bordes principales de tarjeta */
	--eas-ligne-fine:   #EEF0F3; /* separadores internos de tabla */
	--eas-piste:        #ECEEF1; /* pista de barras y anillos de progreso */

	/* CORREGIDO. El handoff daba --inb #c9cdd4, que sobre blanco es 1.59:1.
	 * WCAG 1.4.11 exige 3:1 para el contorno de un control de formulario, y de
	 * este color son los bordes de los 88 campos del taller y, sobre todo, el de
	 * la casilla VACÍA del temario, donde el borde es el único indicador de que
	 * la lección está sin hacer. Con el valor original apenas se distingue del
	 * papel. Oscurecido hasta cumplir 3:1 con margen sobre las cinco superficies
	 * claras en las que se apoya, incluida la fila amarilla de la lección en
	 * curso, que es la más exigente: 3.42 blanco · 3.22 página · 3.30 cabecera
	 * de tabla · 3.17 jaune-doux · 3.36 fila de taller. */
	--eas-ligne-champ: #888B8F;

	/* --- Texto (handoff: --text --text2 --muted --faint) ----------------- */

	/* --eas-texte ya existe arriba y vale --eas-sombre: es el que sustituye
	 * al navy #1f2a37 del handoff. Aquí solo van los tres escalones de abajo. */

	--eas-texte-corps:  #3A4453; /*  9.85:1 sobre carta — cuerpo de texto largo */
	--eas-texte-second: #5B6472; /*  5.98:1 sobre carta — metadatos, etiquetas */

	/* CORREGIDO. El handoff daba --faint #8a929c: 3.15:1 sobre blanco y 2.96:1
	 * sobre la superficie de página, por debajo de AA. No es texto decorativo:
	 * de este color van las pistas de vocabulario («l'école → la escuela»), que
	 * son justo lo que el alumno necesita leer para responder. Oscurecido hasta
	 * cumplir 4.5:1 sobre las cuatro superficies claras (5.07 · 4.77 · 4.90 · 4.53). */
	--eas-texte-tenu: #696F77;

	/* --- Chips y estados suaves ----------------------------------------- */

	--eas-chip-fond:   #F1F2F5; /* chip neutro */
	--eas-chip-texte:  #3A4453; /* 8.80:1 sobre el chip neutro */

	--eas-jaune-doux:        #FFF6DC; /* subrayado de lección activa, hover de acentos */
	--eas-jaune-chip-fond:   #FFF3CD; /* chip de tiempo verbal, marca temporal */

	/* CORREGIDO. El handoff daba --ychiptx #8a6d1a: 4.43:1, a un pelo de AA, y
	 * el chip es texto de 12px en negrita, que no cuenta como texto grande.
	 * Oscurecido a 4.55:1. */
	--eas-jaune-chip-texte: #886B1A;

	/* El rojo suave del handoff conserva su fondo, pero su texto (--rtext
	 * #b81c20) se remapea al rojo de marca: dos rojos casi iguales conviviendo
	 * en la misma pantalla se leen como un error de impresión, y el de marca
	 * contrasta mejor (5.88:1 sobre carta frente a 5.70:1). */
	--eas-rouge-doux:    #FDECEC; /* chip rojo suave, fondo de banner de fallo */
	--eas-rouge-texte:   var(--eas-rouge);
	--eas-rouge-ligne:   #F2C4C6; /* borde del banner de fallo */
	--eas-rouge-second:  #A04A4D; /* 5.31:1 sobre el fondo de error */
	--eas-erreur-fond:   #FDF1F1; /* fondo de campo con respuesta incorrecta */

	/* --- Verde de acierto (color nuevo adoptado del handoff) ------------- */

	--eas-vert:        #2E9E5B; /* borde de campo correcto (3.41:1, no textual) */

	/* CORREGIDO. #2e9e5b da 3.41:1 tanto como texto sobre blanco como debajo de
	 * texto blanco. Vale para el rondel de 40px (glifo de 19px/900 = texto
	 * grande, mínimo 3:1) y para bordes, pero no para el estado «Réussi ✓» de
	 * 13px ni para la pastilla de 22px con el número blanco encima. Este es el
	 * verde de esos dos usos: 4.86:1 sobre blanco y con blanco encima. */
	--eas-vert-texte:  #25814A;

	--eas-vert-doux:      #F0F9F2; /* fondo de campo correcto y de banner de éxito */
	--eas-vert-ligne:     #BFE3CC; /* borde del banner de éxito */
	--eas-vert-appuye:    #1C6B3D; /* 6.07:1 — titular del banner de éxito */
	--eas-vert-second:    #3F7D57; /* 4.56:1 — subtítulo del banner de éxito */

	/* --- Nota de condicionamiento (handoff: --notebg --noteline --notetx) - */

	--eas-note-fond:   #FFF9E8;
	--eas-note-ligne:  #F3DFA0;
	--eas-note-texte:  #6B5B1E; /* 6.36:1 sobre su fondo */

	/* --- Fila de taller en el temario (handoff: --atrow --atline) --------- */

	--eas-atelier-rangee: #FFFDF4; /* fondo de la fila que lleva a un taller */

	/* CORREGIDO, quinto valor del handoff que no llegaba a AA por sí solo.
	 *
	 * En la pantalla de validación, el borde punteado de una caja distingue
	 * «hay una propuesta esperando» de «este hueco está vacío», y esos dos
	 * estados solo se diferencian por el borde y por un glifo pequeño. El
	 * handoff daba #e3c34c, que sobre blanco es 2.05:1, por debajo del 3:1 que
	 * WCAG 1.4.11 exige a un gráfico que hace falta para entender el contenido.
	 * Oscurecido hasta cumplirlo sobre las cuatro superficies en que aparece:
	 * 3.25 blanco · 3.19 fila de taller · 3.06 página · 3.01 jaune-doux.
	 *
	 * No se reutiliza --eas-atelier-filet: ese sí es decorativo (la fila del
	 * temario se identifica por su insignia) y está documentado como exento en
	 * la sección 14 de scripts/verificar-contraste.php. Son dos usos distintos
	 * del mismo color del handoff, y solo uno de ellos porta significado. */
	--eas-propuesta-filet: #A58D37;
	--eas-atelier-filet:  #F0E3B0; /* su borde superior punteado */

	/* --- Zona de vídeo ---------------------------------------------------
	 *
	 * Estos NO son superficies: no cambian con el tema. Un vídeo se ve mejor
	 * sobre negro venga de donde venga quien lo mira, y el handoff lo fija
	 * igual en claro y en oscuro. Por eso viven aquí y no en el bloque de
	 * superficies, y por eso no tienen equivalente en el tema oscuro.
	 * ------------------------------------------------------------------- */

	--eas-scene-fond:      #101418; /* banda del reproductor */
	--eas-scene-texte:     #E8EAEE; /* 15.36:1 — etiquetas de los controles */
	--eas-scene-icone:     #C7CCD4; /* 11.47:1 — iconos y tiempo transcurrido */
	--eas-scene-filet:     #3A4048; /* borde del botón de velocidad, decorativo */
	--eas-scene-piste:     rgba(255, 255, 255, 0.18); /* pista de la barra de lectura */
	--eas-scene-soustitre: rgba(12, 14, 18, 0.78);    /* pastilla de los subtítulos */

	/* 🔴 Velo del vídeo de la pantalla de acceso. CLARO, no oscuro, y el
	 * prototipo lo tenía al revés.
	 *
	 * El reclamo va en --eas-texte —oscuro— encima del vídeo. Un velo que
	 * OSCURECE acerca el fondo al color del texto, que es justo lo contrario de
	 * lo que hace falta: medido, el rgba(31,42,55,.16) del prototipo deja el
	 * reclamo en 2.75:1 sobre un fotograma medio, por debajo de AA. Un velo
	 * claro empuja el fondo AL LADO CONTRARIO del texto.
	 *
	 * ⚠️ NO aguanta cualquier vídeo, como se escribió aquí al principio: el velo
	 * es un degradado y la parte alta y derecha del reclamo recibe menos que la
	 * esquina. Sobre un vídeo NEGRO el texto bajaría a 1.81:1. Con vídeos claros
	 * sí aguanta.
	 *
	 * 🔴 SUBIDO DEL 76 % AL 85 % EL 11 SEP 2026, al entrar la rotación de fondos.
	 * Lo pedía «White Space Tunnel», que al 76 % se quedaba en 4.47:1 —AA por los
	 * pelos, y por debajo—; al 85 % da 4.73:1. Subirlo solo mejora a los otros
	 * cuatro, porque el texto es oscuro y el velo blanco: letras 5.81 → 5.97,
	 * futuriste 4.93 → 5.17, lignes 6.65 → 6.76, abstrait 7.43 → 7.56.
	 *
	 * Y subirlo NO salva a cualquiera: el vídeo de triángulos rojos se quedó
	 * fuera de la rotación porque ni con el velo al 100 % pasa de 3.03:1.
	 *
	 * Un velo tiene que alejar el fondo del color del texto, nunca acercarlo.
	 * Cada vídeo se mide con scripts/medir-contraste-video.php. */
	--eas-voile-connexion: rgb(255 255 255 / 85%);

	/* Velo de la foto del registro. Aquí SÍ oscurece, y no contradice al del
	 * acceso: allí el reclamo es oscuro y el velo tenía que aclarar; aquí va en
	 * BLANCO, así que alejar el fondo del texto es oscurecerlo. La regla es la
	 * misma —el velo aleja del color del texto, nunca acerca—; lo que cambia es
	 * de qué lado está el texto. Medido en verificar-contraste.php. */
	--eas-voile-inscription: rgb(46 50 57 / 70%);
	/* El área del vídeo va un punto más clara que el marco que la rodea. El
	 * valor no está elegido a ojo: en el prototipo ese área es el .frame del
	 * marcador de imagen, que se pinta con rgba(127,127,127,.08) sobre la banda.
	 * Resuelto contra #101418 da exactamente esto. */
	--eas-scene-video:     #191D20; /* área interior del vídeo */

	/* --- Selección de texto --------------------------------------------- */

	--eas-selection: #FFE9A8;

	/* --- Medidas propias del handoff -------------------------------------
	 *
	 * No salen de la escala base 4: son las cotas exactas de las maquetas, y
	 * el handoff es de alta fidelidad. Viven aquí para que ninguna hoja tenga
	 * que escribirlas sueltas.
	 * ------------------------------------------------------------------- */

	--eas-hauteur-entete:    60px;  /* cabecera fija de las dos pantallas */
	--eas-hauteur-logo:      40px;  /* alto del logo dentro de la cabecera */
	--eas-largeur-atelier: 1240px;  /* ancho máximo de la rejilla del taller */
	--eas-largeur-lecture-large: 900px; /* columna de contenido del reproductor */

	--eas-rayon-carte: 10px; /* tarjetas del handoff */
	--eas-rayon-champ:  6px; /* campos de texto y botones pequeños */

	--eas-espace-6:  0.375rem; /*  6px */
	--eas-espace-10: 0.625rem; /* 10px */
	--eas-espace-14: 0.875rem; /* 14px */
	--eas-espace-18: 1.125rem; /* 18px */
	--eas-espace-20: 1.25rem;  /* 20px — relleno lateral de la cabecera */
	--eas-espace-22: 1.375rem; /* 22px */

	/* Escala tipográfica compacta de las pantallas de estudio. La escala
	 * general de la sección 8 es para páginas de lectura; estas pantallas son
	 * tableros densos y el handoff baja hasta los 10,5px en las insignias. */

	--eas-texte-105: 0.65625rem; /* 10.5px — insignias ATELIER / VERROUILLÉ */
	--eas-texte-11:  0.6875rem; /* 11px   — subtítulo del anillo */
	--eas-texte-115: 0.71875rem; /* 11.5px — cabecera de la tabla de ejercicio */
	--eas-texte-125: 0.78125rem; /* 12.5px — pistas de vocabulario */
	--eas-texte-13:  0.8125rem; /* 13px   — filas de la barra lateral */
	--eas-texte-135: 0.84375rem; /* 13.5px — campos, nota de condicionamiento */
	--eas-texte-145: 0.90625rem; /* 14.5px — introducción de la teoría */
	--eas-texte-15:  0.9375rem; /* 15px   — frases de los ejercicios */
	--eas-texte-17:  1.0625rem; /* 17px   — título de ejercicio, banner */
	--eas-texte-23:  1.4375rem; /* 23px   — cifra central del anillo */
	--eas-texte-24:  1.5rem;   /* 24px   — h1 del taller */

	/* El handoff usa 400, 600, 700, 800 y 900 de Source Sans 3. El 600 faltaba,
	 * y sin él el título del curso, «Votre progrès» y las pestañas inactivas se
	 * quedaban en 500: más finas de lo diseñado. */
	--eas-graisse-semi:    600;
	--eas-graisse-appuyee: 800;
	--eas-graisse-max:     900;

	--eas-ombre-barre: 0 2px 10px rgba(46, 50, 57, 0.06); /* barra de acentos fija */

	/* Piezas circulares y grosores del taller. Son cotas del handoff; ninguna
	 * sale de la escala de espaciado porque no marcan ritmo, son tamaños de
	 * objeto. La tecla de acento crece a --eas-cible-tactile en pantallas
	 * táctiles: 30px cumple el mínimo de 24px de WCAG 2.5.8, pero con el dedo
	 * no basta. */
	--eas-taille-touche:         30px; /* tecla de la barra de acentos */
	--eas-taille-pastille:       26px; /* pastilla numerada de cada tarjeta */
	--eas-taille-pastille-etape: 22px; /* pastilla de la barra lateral */
	--eas-taille-bilan:          40px; /* rondel ✓ / ✗ del banner de resultado */
	--eas-taille-anneau:        124px; /* anillo de evaluación */
	--eas-taille-anneau-creux:   94px; /* hueco central del anillo */
	--eas-largeur-tableau-min:  640px; /* ancho bajo el que la tabla se desplaza */
	--eas-largeur-pronom:       110px; /* primera columna de la tabla de ejercicio */

	--eas-bordure-champ: 1.5px; /* grosor del borde de los campos del taller */

	/* Atenuación de lo que se dibuja pero todavía no funciona.
	 *
	 * NO es un valor libre: el botón CC va en amarillo de marca con texto
	 * oscuro encima, y atenuar la barra entera mezcla los dos con el fondo de
	 * la banda. A 0.8 el par queda en 5.21:1 y a 0.7 cae a 4.36:1, por debajo
	 * de AA. Al tocarlo hay que volver a pasar scripts/verificar-contraste.php,
	 * que comprueba justamente el par ya mezclado. */
	--eas-opacite-desactive: 0.8;
	--eas-opacite-inerte:   0.65; /* campos de las pestañas que aún no guardan */

	/* Casilla del temario. Es CUADRADA: 18px, borde de 2px y las esquinas
	 * apenas matadas. Con el radio de 4px del resto de la interfaz se lee como
	 * un botón redondeado y deja de parecer una casilla de verificar. */
	--eas-taille-case:   18px;
	--eas-bordure-case:   2px;
	--eas-rayon-case:     3px;

	/* Piezas de la cabecera y del reproductor. */
	--eas-taille-bouton:        36px; /* botones cuadrados de la cabecera */
	--eas-taille-anneau-mini:   36px; /* anillo de progreso de la cabecera */
	--eas-taille-anneau-mini-creux: 28px;
	--eas-largeur-video:      1040px; /* ancho máximo de la banda de vídeo */
	--eas-bouton-vitesse-l:     34px; /* botón «1x» de la barra de controles */
	--eas-bouton-vitesse-h:     26px;
	--eas-taille-marqueur:      80px; /* icono del marco sin vídeo */
	--eas-hauteur-piste:         3px; /* barra de lectura del vídeo */
	--eas-taille-poignee:       11px; /* su tirador redondo */
	--eas-largeur-separateur:    1px;
	--eas-hauteur-separateur:   26px; /* filete vertical entre piezas de la cabecera */

	--eas-espace-11: 0.6875rem; /* 11px — hueco de las filas del temario */
	--eas-espace-26: 1.625rem; /* 26px — hueco entre pestañas y ritmo del cuerpo */

	--eas-texte-9:   0.5625rem; /*  9px — cifra dentro del anillo de la cabecera */
	--eas-texte-10: 0.625rem; /* 10px — insignia ATELIER del temario */
	--eas-texte-22: 1.375rem; /* 22px — h1 de la lección */

	/* ---------------------------------------------------------------------
	 * 10 bis. Espace élève (handoff «Panel del estudiante»)
	 *
	 * Cotas y sombra de la quinta pantalla. Se añaden aquí y no en su hoja por
	 * la prohibición 7; el resto de sus colores ya estaba, porque es el mismo
	 * handoff que las cuatro anteriores.
	 * ------------------------------------------------------------------- */

	--eas-texte-19: 1.1875rem; /* 19px — nombre del alumno en la cabecera de perfil */

	--eas-largeur-rail:        250px; /* columna de navegación del espacio */
	--eas-hauteur-banniere:    120px; /* banda de vídeo de la bienvenida */
	--eas-hauteur-rangee:       42px; /* fila de navegación; el indicador salta de 44 en 44 */
	--eas-taille-marque-loader: 96px; /* la marca del loader; 40vw la frena en móvil */
	--eas-taille-avatar:        84px; /* avatar que desborda la banda */
	--eas-taille-avatar-moyen:  76px; /* avatar de la ficha de perfil */
	--eas-taille-anneau-stat:   34px; /* anillo de las tarjetas de cifras */
	--eas-hauteur-carte-stat:   52px;
	--eas-hauteur-vignette:    110px; /* cabecera de color de la tarjeta de curso */
	--eas-hauteur-barre:         6px; /* barra de progreso */
	--eas-hauteur-filet:         3px; /* filete rojo del reclamo de acceso */
	--eas-taille-oeil:          20px; /* icono de mostrar/ocultar la contraseña */
	--eas-trait-morphe:        1.5px; /* la línea del campo en reposo; el handoff la fija ahí */
	--eas-taille-girador:       16px; /* indicador dentro del botón «Continuer» */
	--eas-taille-pastille:      30px; /* pastilla del stepper del registro */
	--eas-largeur-barre:       280px; /* su ancho máximo en «Reprendre» */

	/* Taller por etapas (handoff «Atelier por etapas», 10 sep 2026). Una tabla de
	 * conjugación DENTRO de un bloque del acordeón se desplaza a partir de 420px,
	 * no de los 640px de la tabla de ejercicio: la de teoría tiene menos columnas
	 * y no lleva campos. */
	--eas-largeur-conjugaison-min: 420px;
	--eas-taille-point:   9px;  /* punto de estado de «Progression des exercices» */
	--eas-taille-chevron: 16px; /* flecha de cada bloque del acordeón */
	--eas-taille-crayon:  12px; /* lápiz de las etapas corregidas por Sandra */
	--eas-largeur-titre-etape: 11rem; /* bajo esto, las fichas del ejercicio saltan de línea */
	--eas-hauteur-suivi-max:   40vh;  /* la lista de etapas de la columna fija; con 39 se desplaza */

	/* La sombra de tarjeta del handoff (`0 3px 10px -2px var(--shadow)`). No es
	 * ninguna de las tres de la escala general: el radio de dispersión negativo
	 * es lo que la mantiene pegada al borde inferior en una rejilla de tarjetas
	 * contiguas. */
	--eas-ombre-carte: 0 3px 10px -2px rgba(46, 50, 57, 0.06);

	/* Velo blanco sobre el vídeo de la banda. No es una superficie —no cambia con
	 * el tema— por el mismo motivo que la zona de vídeo.
	 *
	 * CORREGIDO, y este es el sexto valor del handoff que no llegaba a AA por sí
	 * solo. El prototipo lo da a 0.55, y el velo es LO ÚNICO que hace legible el
	 * texto de bienvenida sobre un vídeo cuyo contenido no controlamos: hoy es
	 * claro, pero el cliente puede cambiarlo por otro. En el peor caso —un vídeo
	 * negro— 0.55 compone un gris #8C8C8C y --eas-texte encima da 3.83:1, por
	 * debajo del 4.5:1 que exige AA para texto normal.
	 *
	 * A 0.70 el peor caso compone #B3B3B3 y sube a 6.14:1, con margen de sobra, y
	 * sobre un vídeo claro se queda en 11.9:1. Reproducible con la sección 15 de
	 * scripts/verificar-contraste.php. */
	--eas-voile-banniere: rgba(255, 255, 255, 0.70);
	--eas-banniere-fond:  #F2F3F5; /* lo que se ve mientras el vídeo no ha cargado */
}

/* =====================================================================
 * 11. Tema oscuro — PREPARADO, NO ACTIVADO
 *
 * Los valores están tomados del handoff (columna «sombre») y remapeados igual
 * que los claros. Nada pone hoy el atributo data-eas-theme: el modo oscuro
 * queda fuera de alcance hasta que se decida dónde vive el interruptor y cómo
 * persiste. Cuando llegue, esto es todo lo que hay que encender.
 *
 * SIN AUDITAR. Estos pares no han pasado por verificar-contraste.php: hacerlo
 * es requisito para activar el tema, no para dejarlo escrito.
 * ------------------------------------------------------------------- */

[data-eas-theme="sombre"] {

	--eas-surface-page:    #14171B;
	--eas-surface-carte:   #1E242B;
	--eas-surface-entete:  #232A32;
	--eas-surface-survol:  #262D35;
	--eas-surface-champ:   #171C21;

	--eas-ligne-cadre:  #2B323B;
	--eas-ligne-fine:   #28303A;
	--eas-ligne-champ:  #3D4650;
	--eas-piste:        #2B323B;

	--eas-texte:        #E8EBEF;
	--eas-texte-corps:  #B8C0CA;
	--eas-texte-second: #98A2AE;
	--eas-texte-tenu:   #7E8894;

	--eas-chip-fond:   #2A313A;
	--eas-chip-texte:  #C3CCD6;

	--eas-jaune-doux:        #35301C;
	--eas-jaune-chip-fond:   #383016;
	--eas-jaune-chip-texte:  #FFD75E;

	--eas-rouge-doux:   #361F21;
	--eas-rouge-texte:  #FF9598;
	--eas-rouge-ligne:  #5C2D30;
	--eas-rouge-second: #D99A9D;
	--eas-erreur-fond:  #361F21;

	--eas-vert-doux:    #1C2F23;
	--eas-vert-ligne:   #2D5C40;
	--eas-vert-appuye:  #6FCE96;
	--eas-vert-second:  #8FBF9F;

	--eas-note-fond:   #332D18;
	--eas-note-ligne:  #4D4526;
	--eas-note-texte:  #E5D48A;

	--eas-atelier-rangee: #282619;
	--eas-atelier-filet:  #4A4228;

	--eas-selection: #5A4D1A;

	--eas-ombre-barre: 0 2px 10px rgba(0, 0, 0, 0.35);
	--eas-ombre-carte: 0 3px 10px -2px rgba(0, 0, 0, 0.35);
}