/* =============================================================================
   MAIN CSS — chargé en asynchrone. Pages intérieures hors Elementor :
   contenu éditorial, listes d'articles, recherche, 404.
   ⚠️ AUCUN HEX — tout passe par les tokens.
   ============================================================================= */

/* --- Contenu éditorial ------------------------------------------------------ */
.entry {
	width: min(100% - var(--gutter) * 2, 48rem);
	margin: var(--sp-8) auto var(--section-y);
}

.entry__header {
	margin-bottom: var(--sp-8);
}

.entry__header .eyebrow {
	margin-bottom: var(--sp-3);
}

.entry__titre,
.liste__titre {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-title);
	text-wrap: balance;
}

.entry__visuel img {
	width: 100%;
	border-radius: var(--r-lg);
	margin-bottom: var(--sp-8);
}

.prose {
	font-size: var(--fs-md);
	font-weight: var(--fw-light);
	line-height: 1.65;
}

.prose > * + * {
	margin-top: 1.1em;
}

.prose h2 {
	margin-top: 1.8em;
	font-size: var(--fs-xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}

.prose h3 {
	margin-top: 1.5em;
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}

.prose strong {
	font-weight: var(--fw-semibold);
}

.prose a {
	color: var(--accent-texte);
	text-underline-offset: 0.2em;
}

.prose ul,
.prose ol {
	padding-left: 1.25em;
}

.prose li::marker {
	color: var(--rouge);
}

.prose blockquote {
	padding: var(--sp-6) var(--sp-8);
	border-radius: var(--r-lg);
	background: var(--rose);
	font-weight: var(--fw-regular);
}

.prose img {
	border-radius: var(--r-md);
}

/* --- Listes (actualités, archives, recherche) ------------------------------ */
.liste {
	width: min(100% - var(--gutter) * 2, var(--container));
	margin: var(--sp-8) auto var(--section-y);
}

.liste__header {
	display: grid;
	gap: var(--sp-6);
	margin-bottom: var(--sp-12);
}

.liste__compte {
	margin-bottom: var(--sp-6);
	font-weight: var(--fw-medium);
}

.liste--404 {
	display: grid;
	justify-items: start;
	gap: var(--sp-6);
	max-width: 48rem;
}

.liste__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--sp-8);
}

.carte {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--r-xl);
	background: var(--creme);
	overflow: hidden;
	transition: transform 0.4s var(--ease-out);
}

.carte:hover {
	transform: translateY(-4px);
}

.carte__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.carte__corps {
	display: grid;
	gap: var(--sp-2);
	padding: var(--sp-6);
}

.carte__date {
	color: var(--rouge-texte);
	font-size: var(--fs-sm);
	text-transform: uppercase;
}

.carte__titre {
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
}

.carte__lien {
	text-decoration: none;
}

/* Le lien du titre couvre toute la carte : une seule cible, une seule annonce. */
.carte__lien::after {
	content: '';
	position: absolute;
	inset: 0;
}

.carte__lien:focus-visible {
	outline: none;
	box-shadow: none;
}

.carte:has(.carte__lien:focus-visible) {
	outline: 3px solid var(--marine);
	outline-offset: 3px;
}

.carte__extrait {
	font-size: var(--fs-sm);
	line-height: 1.5;
}

/* --- Formulaire de recherche ------------------------------------------------ */
.recherche {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	max-width: 36rem;
	padding: 0.3125rem 0.3125rem 0.3125rem 1.25rem;
	border: 1.5px solid var(--marine);
	border-radius: var(--r-pill);
	background: var(--blanc);
}

.recherche input {
	flex: 1;
	min-width: 0;
	height: 2.75rem;
	border: 0;
	background: none;
}

.recherche input:focus {
	outline: none;
}

.recherche:focus-within {
	outline: 3px solid var(--marine);
	outline-offset: 3px;
}

.recherche__btn {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: var(--rouge);
	color: var(--blanc);
}

.recherche__btn .icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* --- Pagination ------------------------------------------------------------- */
.pagination {
	margin-top: var(--sp-12);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: var(--sp-4);
	border-radius: var(--r-pill);
	background: var(--creme);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--rouge);
	color: var(--blanc);
}