/*
 * Bloc « Lire aussi », encart placé par la rédaction dans le corps d'un article.
 *
 * Chargé sur les seuls articles qui le contiennent, et dans l'éditeur, où
 * l'aperçu doit être identique. Jetons de 01-socle.css uniquement : aucune
 * couleur ni aucun rayon en dur.
 *
 * Style bouton sur le gris clair du thème, largeur ajustée au contenu, jamais
 * pleine largeur. Ni bordure, ni filet, ni image.
 *
 * ⚠️ Ne pas confondre avec .section-liee, la section « À lire aussi » de cinq
 * cartes rendue après l'article.
 */

.lire-aussi {
	margin-block: var(--ir-rythme-element);
}

.lire-aussi__lien {
	display: inline-flex;
	flex-direction: column;
	gap: var(--ir-esp-1);
	max-width: 100%;
	padding: 0.6875rem 1.125rem; /* 11 px 18 px */
	border: 0;
	border-radius: var(--ir-arrondi-bouton);
	background: var(--ir-fond-page);
	color: var(--ir-texte);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

/* Fond légèrement plus sombre, dérivé du gris et du texte plutôt qu'une valeur de plus. */
.lire-aussi__lien:hover,
.lire-aussi__lien:focus {
	background: color-mix(in srgb, var(--ir-fond-page) 92%, var(--ir-texte));
	color: var(--ir-texte);
}

.lire-aussi__lien:focus-visible {
	outline: 2px solid var(--ir-accent-fonce);
	outline-offset: 2px;
}

.lire-aussi__surtitre {
	font-family: var(--ir-police-texte);
	font-size: 0.6875rem; /* 11 px, demandé : sous Micro, voir CLAUDE.md */
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: var(--ir-ls-micro);
	text-transform: uppercase;
	color: var(--ir-accent);
}

.lire-aussi__titre {
	font-family: var(--ir-police-texte);
	font-size: 1.0625rem; /* 17 px */
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.lire-aussi__fleche {
	color: var(--ir-accent-fonce);
}

/* Encart inutilisable : visible des seules personnes qui peuvent l'éditer. */
.lire-aussi--alerte {
	padding: var(--ir-esp-2) var(--ir-esp-3);
	border: 1px dashed var(--ir-accent-fonce);
	border-radius: var(--ir-arrondi-bouton);
	background: var(--ir-rose);
	color: var(--ir-texte);
	font-size: var(--ir-t-petit);
}