/**
 * eas-theme — Base
 *
 * Reinicio ligero y estilos de los elementos HTML. Todo en términos de tokens:
 * en esta hoja no debe aparecer ni un color, ni un tamaño, ni un espaciado suelto.
 *
 * Móvil primero: lo que se escribe fuera de una media query es lo de 375px.
 *
 * @package eas-theme
 */

/* ---------------------------------------------------------------------------
 * 1. Reinicio
 * ------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

html {
	/* Que un enlace a #ancla no deje el título pegado al borde superior. */
	scroll-padding-top: var(--eas-espace-24);
	-webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------------------
 * 2. Documento
 * ------------------------------------------------------------------------- */

body {
	background-color: var(--eas-fond);
	color: var(--eas-texte);
	font-family: var(--eas-police);
	font-size: var(--eas-texte-base);
	font-weight: var(--eas-graisse-normale);
	line-height: var(--eas-interligne-base);
	min-height: 100vh;
	text-rendering: optimizeSpeed;
}

/* ---------------------------------------------------------------------------
 * 3. Títulos y texto
 * ------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--eas-police-titre);
	font-weight: var(--eas-graisse-forte);
	line-height: var(--eas-interligne-serre);
	/* Evita viudas feas en títulos franceses, que son largos. */
	text-wrap: balance;
}

h1 {
	font-size: var(--eas-texte-2xl);
}

h2 {
	font-size: var(--eas-texte-xl);
}

h3 {
	font-size: var(--eas-texte-lg);
}

h4,
h5,
h6 {
	font-size: var(--eas-texte-base);
}

/* Ritmo vertical: el margen va arriba, para que el último elemento de un
 * bloque no arrastre espacio sobrante al final. */
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table, pre) + * {
	margin-block-start: var(--eas-espace-16);
}

:where(h2, h3) {
	margin-block-start: var(--eas-espace-32);
}

p {
	max-width: var(--eas-mesure);
	text-wrap: pretty;
}

small {
	font-size: var(--eas-texte-sm);
}

/* ---------------------------------------------------------------------------
 * 4. Enlaces
 * ------------------------------------------------------------------------- */

a {
	color: var(--eas-texte-accent);
	/* El subrayado se queda: el color no puede ser el único indicador de enlace. */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--eas-transition);
}

a:hover,
a:focus {
	color: var(--eas-action-survol);
	text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------------
 * 5. Foco visible
 *
 * Doble aro: el interior blanco y el exterior sombre. Un aro solo no vale,
 * porque sobre un botón rojo el sombre da 2.19:1 y WCAG 1.4.11 pide 3:1.
 * Con los dos, siempre hay uno que despega del fondo.
 * ------------------------------------------------------------------------- */

:focus-visible {
	outline: var(--eas-focus-epaisseur) solid var(--eas-focus-interne);
	outline-offset: var(--eas-focus-decalage);
	box-shadow: 0 0 0 calc(var(--eas-focus-epaisseur) * 2 + var(--eas-focus-decalage)) var(--eas-focus-externe);
}

/* Solo se quita el aro por defecto cuando de verdad se sustituye por el nuestro. */
:focus:not(:focus-visible) {
	outline: none;
}

/* ---------------------------------------------------------------------------
 * 6. Multimedia
 * ------------------------------------------------------------------------- */

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

figure {
	margin-block: var(--eas-espace-24);
}

figcaption {
	color: var(--eas-texte-doux);
	font-size: var(--eas-texte-sm);
	margin-block-start: var(--eas-espace-8);
}

/* ---------------------------------------------------------------------------
 * 7. Formularios
 * ------------------------------------------------------------------------- */

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

input,
textarea,
select {
	background-color: var(--eas-fond);
	border: 1px solid var(--eas-bordure);
	border-radius: var(--eas-rayon-sm);
	padding: var(--eas-espace-8) var(--eas-espace-12);
	width: 100%;
}

textarea {
	min-height: 8em;
	resize: vertical;
}

/*
 * :where() deja este bloque con peso CERO.
 *
 * Sin él, «button:hover» pesa 0-1-1 —un elemento más una pseudoclase— y le gana
 * a cualquier clase suelta (0-1-0). Es decir: todo botón con estilo propio se
 * volvía rojo al pasar el ratón, y ningún .mi-boton podía impedirlo sin subir
 * artificialmente su especificidad. Con :where(), esto es lo que se ve cuando
 * nadie ha dicho otra cosa, que es lo que una capa base debe ser.
 */
:where(button, input[type="submit"]) {
	background-color: var(--eas-action);
	border: 1px solid transparent;
	border-radius: var(--eas-rayon-md);
	color: var(--eas-action-texte);
	cursor: pointer;
	font-weight: var(--eas-graisse-moyenne);
	/* 44px de alto mínimo: objetivo táctil cómodo en móvil. */
	min-height: var(--eas-cible-tactile);
	padding: var(--eas-espace-12) var(--eas-espace-24);
	transition: background-color var(--eas-transition);
	width: auto;
}

:where(button, input[type="submit"]):hover {
	background-color: var(--eas-action-survol);
}

/* ---------------------------------------------------------------------------
 * 8. Listas, citas, tablas y código
 * ------------------------------------------------------------------------- */

ul,
ol {
	padding-inline-start: var(--eas-espace-24);
}

li + li {
	margin-block-start: var(--eas-espace-4);
}

blockquote {
	border-inline-start: 4px solid var(--eas-action);
	color: var(--eas-texte-doux);
	padding-inline-start: var(--eas-espace-16);
}

hr {
	background-color: var(--eas-bordure);
	border: 0;
	height: 1px;
	margin-block: var(--eas-espace-32);
}

table {
	border-collapse: collapse;
	width: 100%;
}

th,
td {
	border-block-end: 1px solid var(--eas-bordure);
	padding: var(--eas-espace-12);
	text-align: start;
}

tbody tr:nth-child(even) {
	background-color: var(--eas-fond-surface);
}

code,
pre {
	font-family: var(--eas-police-mono);
	font-size: var(--eas-texte-sm);
}

pre {
	background-color: var(--eas-fond-surface);
	border-radius: var(--eas-rayon-md);
	overflow-x: auto;
	padding: var(--eas-espace-16);
}

/* ---------------------------------------------------------------------------
 * 9. Utilidades de disposición y accesibilidad
 * ------------------------------------------------------------------------- */

.eas-contenant {
	margin-inline: auto;
	max-width: var(--eas-largeur-max);
	padding-inline: var(--eas-espace-16);
	width: 100%;
}

.eas-contenant--lecture {
	max-width: var(--eas-largeur-lecture);
}

/* Texto solo para lectores de pantalla. Al recibir el foco se muestra, para que
 * el enlace de salto sea utilizable con teclado. */
.eas-lien-evitement {
	background-color: var(--eas-fond);
	color: var(--eas-texte-accent);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.eas-lien-evitement:focus-visible {
	clip-path: none;
	height: auto;
	inset-block-start: var(--eas-espace-8);
	inset-inline-start: var(--eas-espace-8);
	padding: var(--eas-espace-8) var(--eas-espace-16);
	width: auto;
	z-index: var(--eas-couche-modale);
}

/* ---------------------------------------------------------------------------
 * 10. Esqueleto de página
 * ------------------------------------------------------------------------- */

.eas-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.eas-site__contenu {
	flex: 1 0 auto;
	padding-block: var(--eas-espace-32);
}

.eas-entete,
.eas-pied {
	background-color: var(--eas-fond-doux);
	border-block-end: 1px solid var(--eas-bordure);
	padding-block: var(--eas-espace-16);
}

.eas-pied {
	border-block-end: 0;
	border-block-start: 1px solid var(--eas-bordure);
	color: var(--eas-texte-doux);
	font-size: var(--eas-texte-sm);
	padding-block: var(--eas-espace-32);
}

/* ---------------------------------------------------------------------------
 * 11. Insignias de nivel MCER
 *
 * El color acompaña, nunca sustituye a la etiqueta: dentro va siempre el texto
 * del nivel. Sin él, ni el daltonismo ni un lector de pantalla lo distinguen.
 * ------------------------------------------------------------------------- */

.eas-niveau {
	background-color: var(--eas-niveau-couleur, var(--eas-fond-inverse));
	border-radius: var(--eas-rayon-plein);
	color: var(--eas-texte-inverse);
	display: inline-block;
	font-size: var(--eas-texte-sm);
	font-weight: var(--eas-graisse-forte);
	letter-spacing: 0.03em;
	padding: var(--eas-espace-4) var(--eas-espace-12);
}

.eas-niveau--a1 { --eas-niveau-couleur: var(--eas-niveau-a1); }
.eas-niveau--a2 { --eas-niveau-couleur: var(--eas-niveau-a2); }
.eas-niveau--b1 { --eas-niveau-couleur: var(--eas-niveau-b1); }
.eas-niveau--b2 { --eas-niveau-couleur: var(--eas-niveau-b2); }
.eas-niveau--c1 { --eas-niveau-couleur: var(--eas-niveau-c1); }
.eas-niveau--c2 { --eas-niveau-couleur: var(--eas-niveau-c2); }