/*
Theme Name: AEL Guéret Tennis de Table
Description: Thème enfant de GeneratePress pour le club, clin d'œil aux couleurs officielles de la FFTT.
Author: Vincent Bré
Template: generatepress
Version: 1.0.0
*/

:root {
	--ael-bleu-fonce: #0a1eaf;
	--ael-bleu-clair: #0069ff;
	--ael-rouge: #ff2d50;
	--ael-blanc: #ffffff;
	--ael-noir: #000000;
	--ael-gris-clair: #f4f6fb;
	--ael-gris-texte: #333d4b;
}

body {
	font-family: 'Poppins', sans-serif;
	color: var(--ael-gris-texte);
	background-color: var(--ael-blanc);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Anton', 'Poppins', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ael-bleu-fonce);
}
.entry-content h2 {
	position: relative;
	margin-top: 56px;
	margin-bottom: 24px;
	padding-bottom: 12px;
}
.entry-content > h2:first-child {
	margin-top: 0;
}
/* Repère bleu clair sous les H2 : plus discret que le rouge du H1, pour
   garder une hiérarchie claire (rouge = page, bleu = section). */
.entry-content h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	background: var(--ael-bleu-clair);
	border-radius: 2px;
}
.entry-content h2.has-text-align-center::after {
	left: 50%;
	transform: translateX(-50%);
}

/* Même repère sur les H3 utilisés comme sous-titres de section (ex : "La
   salle", "Horaires — saison..."). Exclu des H3 qui servent de nom dans
   une carte (bureau/entraîneurs) : voir l'annulation plus bas. */
.entry-content h3 {
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 16px;
}
.entry-content h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 3px;
	background: var(--ael-bleu-clair);
	border-radius: 2px;
}
.entry-content h3.has-text-align-center::after {
	left: 50%;
	transform: translateX(-50%);
}
.ael-card h3 {
	padding-bottom: 0;
	margin-bottom: 4px;
}
.ael-card h3::after {
	content: none !important;
}

/* Petit trait rouge sous le titre de page (H1) — signature qui fait écho
   au filet tricolore de l'en-tête, sans en rajouter partout. */
.entry-header .entry-title {
	position: relative;
	padding-bottom: 32px;
	margin-bottom: 8px;
}

/* Titres des actualités et des albums : ce sont de vraies phrases (dates,
   ponctuation incluses), pas des libellés courts — l'Anton condensé en
   majuscules les rendait difficiles à lire. Anton reste réservé aux titres
   courts (pages, hero, boutons) ; ici on repasse en Poppins gras, casse
   normale, tout en gardant la couleur de la charte. */
.type-post .entry-title,
.type-album .entry-title,
article.type-post .entry-title,
article.type-album .entry-title {
	font-family: 'Poppins', sans-serif;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 700;
}
.entry-header .entry-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	background: var(--ael-rouge);
	border-radius: 2px;
}

/* Titre de la page Actualités : même carte blanche + même grand H1 avec trait
   rouge que sur les autres pages, mais avec ses propres classes plutôt que
   entry-header/entry-title/inside-article — ces classes sont redéfinies en
   petit format "carte" par les règles body.blog plus bas (pour les articles
   listés juste en dessous), qui s'appliqueraient sinon aussi à ce titre. */
.ael-page-header-wrap {
	background: var(--ael-blanc);
	/* Pas de padding horizontal : contrairement aux pages classiques, le
	   contenu qui suit ce titre (barre de filtres, grille de cartes) est
	   bord à bord, sans le padding de carte des pages à contenu unique —
	   un padding ici aurait décalé le titre vers la droite par rapport à
	   tout le reste. */
	padding: 40px 0 0;
}
@media (max-width: 768px) {
	.ael-page-header-wrap {
		padding: 30px 0 0;
	}
}
.ael-page-title {
	position: relative;
	padding-bottom: 32px;
	margin-bottom: 8px;
}
.ael-page-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	background: var(--ael-rouge);
	border-radius: 2px;
}

/* Bandeau / en-tête du site — fond blanc, un fin trait tricolore en pied de bandeau */
.site-header {
	background-color: var(--ael-blanc);
	border-bottom: 3px solid var(--ael-bleu-clair);
	box-shadow: 0 3px 0 0 var(--ael-rouge);
}
.site-header .site-description {
	color: var(--ael-gris-texte) !important;
}

/* Nom du club à côté du logo, en version compacte pour garder le menu sur une ligne */
.site-header .main-title {
	font-size: 1.4rem !important;
	white-space: nowrap;
}
.site-header .main-title a {
	font-family: 'Anton', sans-serif;
	color: var(--ael-bleu-fonce) !important;
}

/* En-tête sur une seule ligne : logo à gauche, menu à droite */
#masthead.site-header .inside-header {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-left: 20px !important;
	padding-right: 20px !important;
}
#masthead .site-branding-container {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: auto;
}
#masthead .site-logo img {
	max-height: 64px;
}

/* Navigation principale, désormais intégrée à l'en-tête */
#site-navigation.main-navigation {
	background-color: transparent;
	border-bottom: none;
	flex: 0 1 auto;
	width: auto;
}
#site-navigation .inside-navigation {
	width: auto;
	padding: 0;
}
#site-navigation #primary-menu {
	flex-wrap: nowrap;
}
#site-navigation .menu-item > a {
	padding-left: 6px;
	padding-right: 6px;
	font-size: 0.85rem;
	white-space: nowrap;
}
/* Anton (majuscules condensées) écrasait le menu à cette taille — lettres
   collées, effet "pâté". Poppins Semi-Bold + espacement généreux : même
   registre "majuscules" que le reste du site, mais lisible en petit. */
.main-navigation a {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ael-gris-texte) !important;
	box-shadow: inset 0 -3px 0 0 transparent;
	transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.main-navigation ul ul {
	background-color: var(--ael-blanc);
	border: 1px solid #e7eaf0;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: var(--ael-bleu-clair) !important;
	box-shadow: inset 0 -3px 0 0 var(--ael-rouge);
}

/* Liens */
a {
	color: var(--ael-bleu-clair);
}
a:hover {
	color: var(--ael-rouge);
}

/* Boutons — seul endroit avec un aplat de couleur franc */
.button,
button,
input[type="submit"],
.wp-block-button__link {
	background-color: var(--ael-bleu-clair) !important;
	color: var(--ael-blanc) !important;
	border-radius: 4px;
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: none;
	transition: background-color 0.15s ease-in-out;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background-color: var(--ael-rouge) !important;
	color: var(--ael-blanc) !important;
}

/* Pied de page — gris très clair, pas de bloc de couleur */
.site-footer,
.site-info {
	background-color: var(--ael-gris-clair);
	color: var(--ael-gris-texte);
	border-top: 1px solid #e7eaf0;
}
.site-footer a {
	color: var(--ael-bleu-fonce);
}
.site-footer a:hover {
	color: var(--ael-rouge);
}

/* Petites touches : puces, séparateurs, citations */
.entry-content ul > li::marker {
	color: var(--ael-rouge);
}
hr {
	border: none;
	border-top: 3px solid var(--ael-bleu-clair);
	width: 60px;
	margin: 24px 0;
}
blockquote {
	border-left: 3px solid var(--ael-rouge);
	padding-left: 16px;
	color: var(--ael-gris-texte);
}

/* Fiches (bureau, entraîneurs) : photo + nom + rôle — pas d'accent de couleur
   ici, une carte parmi 17 sur la page : trop de bleu répété. */
.ael-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
}
.ael-card {
	background: var(--ael-blanc);
	border: 1px solid #e7eaf0;
	border-radius: 6px;
	padding: 16px;
	text-align: center;
}
.ael-card h3 {
	color: var(--ael-gris-texte);
	font-size: 1rem;
	margin: 0 0 4px;
}
.ael-card__photo {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 10px;
	display: block;
	border: 2px solid var(--ael-gris-clair);
}
/* Le bloc Image natif de WordPress pose la classe sur le <figure>
   englobant, pas sur l'<img> lui-même — object-fit doit s'appliquer à
   l'image, le cercle/bordure au conteneur. */
.ael-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ael-card p {
	margin: 0;
	color: var(--ael-gris-texte);
	font-size: 0.85rem;
	line-height: 1.3;
}
.ael-card__subtitle {
	display: block;
	font-size: 0.75rem;
	color: var(--ael-gris-texte);
	margin-top: 2px;
}

/* Documents à télécharger : icône + nom + bouton */
.ael-doc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}
.ael-doc-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	background: var(--ael-blanc);
	border: 1px solid #e7eaf0;
	border-radius: 8px;
	padding: 16px 14px;
	text-decoration: none;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.ael-doc-card:hover {
	border-color: #c7ccd6;
	box-shadow: 0 2px 8px rgba(10, 30, 175, 0.08);
}
.ael-doc-card__name {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: 1rem;
	color: var(--ael-gris-texte);
	line-height: 1.35;
	margin: 0;
}
.ael-doc-card__label {
	font-size: 0.88rem;
	color: var(--ael-bleu-clair);
	text-decoration: underline;
	margin: 0;
}
.ael-doc-card__label a {
	color: inherit;
	text-decoration: inherit;
}

/* Tableaux (horaires, tarifs) */
.ael-table-wrap {
	overflow-x: auto;
	margin: 16px 0;
}
table.ael-table,
.wp-block-table.ael-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	/* Le bloc Tableau natif de WordPress ajoute par défaut une bordure
	   "rgba(0,0,0,.1)" sur <table> — on la neutralise pour ne garder que
	   nos propres bordures de cellules (gris clair, cf. table td). */
	border: none;
}
.wp-block-table.ael-table table th,
.wp-block-table.ael-table table td {
	border-color: #e7eaf0;
}
/* Le bloc Tableau natif ajoute aussi un trait épais gris foncé sous
   <thead> (border-bottom: 3px solid currentColor) qui déborde du tableau —
   inutile, le fond bleu des th sert déjà de repère d'en-tête. */
.wp-block-table.ael-table table thead {
	border-bottom: none;
}
table.ael-table caption,
.wp-block-table.ael-table table caption {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	color: var(--ael-bleu-fonce);
	text-align: left;
	margin-bottom: 10px;
	font-size: 1.3rem;
}
/* Même couleur pour tous les en-têtes de tableau (Horaires, Tarifs,
   Critérium) : la variante par tableau ne se lisait pas comme un choix
   voulu mais comme une incohérence.
   Le bloc Tableau natif de WordPress place la classe "ael-table" sur le
   conteneur (.wp-block-table), pas sur <table> lui-même — d'où le doublon
   de sélecteurs ci-dessous. */
table.ael-table th,
.wp-block-table.ael-table table th {
	background: var(--ael-bleu-clair);
	color: var(--ael-blanc);
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.85rem;
	padding: 10px 12px;
	text-align: left;
}
table.ael-table td,
.wp-block-table.ael-table table td {
	padding: 10px 12px;
	border-bottom: 1px solid #e7eaf0;
}
table.ael-table td:first-child,
.wp-block-table.ael-table table td:first-child {
	font-weight: 600;
	color: var(--ael-bleu-fonce);
}
/* Tableau des horaires : les cellules "Jour" sont fusionnées (rowspan) sur
   les journées à plusieurs créneaux, donc ce n'est plus systématiquement la
   première cellule de chaque ligne (la ligne du créneau du soir, par
   exemple, commence directement par l'horaire) — :first-child colorierait
   alors l'horaire par erreur.
   On ne peut pas cibler les cellules de jour par une classe dédiée : le bloc
   Tableau natif de WordPress ne connaît pas d'attribut "class" par cellule
   dans son schéma (contrairement à rowspan) — Gutenberg considérerait le
   bloc comme invalide au prochain chargement de l'éditeur. On repère donc
   les lignes "coupées" par leur nombre de cellules à la place : une ligne
   normale a 4 colonnes (Jour, Horaires, Catégorie, Type), une ligne de
   créneau supplémentaire n'en a que 3 (pas de cellule Jour, fusionnée dans
   la ligne au-dessus). */
.ael-table--horaires tr:not(:has(td:nth-child(4))) td:first-child {
	font-weight: 400;
	color: inherit;
}
table.ael-table tbody tr:hover td,
.wp-block-table.ael-table table tbody tr:hover td {
	background: var(--ael-gris-clair);
}

/* Note en bas de tableau (astérisques) : le rouge sert de repère visuel */
.ael-table-note {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--ael-rouge);
	border-left: 3px solid var(--ael-rouge);
	padding: 4px 0 4px 12px;
	margin: 12px 0 0;
}

/* Titre "Critérium FFTT" entre les deux tableaux de tarifs : même habillage
   que la légende (caption) d'un tableau, en heading autonome. */
.ael-table-caption {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	color: var(--ael-bleu-fonce);
	text-align: left;
	margin: 24px 0 10px;
	font-size: 1.3rem;
	padding-bottom: 0;
}
.ael-table-caption::after {
	content: none !important;
}
/* Second bloc de cartes (entraîneurs) : un peu d'air avec la note du
   tableau des horaires juste au-dessus. */
.ael-card-grid + .ael-card-grid,
.ael-table-note + .ael-card-grid {
	margin-top: 24px;
}

/* Partenaires : cartes logo + nom + courte description, en grille */
.ael-partner-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}
.ael-partner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	background: var(--ael-blanc);
	border: 1px solid #e7eaf0;
	border-radius: 8px;
	padding: 24px 20px;
	text-align: center;
	text-decoration: none;
	color: var(--ael-gris-texte);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.ael-partner:hover {
	border-color: var(--ael-bleu-clair);
	box-shadow: 0 2px 8px rgba(0, 105, 255, 0.1);
}
.ael-partner img {
	height: 80px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
}
.ael-partner__name {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 1.25rem;
	color: var(--ael-bleu-fonce);
	margin: 0;
	width: 100%;
	text-align: center;
}
.ael-partner__desc {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--ael-gris-texte);
	text-align: justify;
	margin: 0;
	width: 100%;
}
.ael-partner__url {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ael-bleu-clair);
	text-decoration: underline;
	word-break: break-word;
	margin: 0;
}
.ael-partner__url a {
	color: inherit;
	text-decoration: inherit;
}
.ael-partner {
	justify-content: flex-start;
}
.ael-partner__socials {
	display: flex;
	gap: 10px;
	margin-top: 2px;
}
.ael-partner__socials img {
	max-height: 22px;
	width: auto;
}

/* Bandeau des fédérations affiliées (pied de page) */
.ael-federations {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 32px;
	flex-wrap: wrap;
	padding: 24px 16px;
	border-bottom: 1px solid #e7eaf0;
}
.ael-federations__label {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8rem;
	color: var(--ael-gris-texte);
}
.ael-federations img {
	height: 36px;
	width: auto;
	opacity: 0.9;
	transition: opacity 0.15s ease-in-out;
}
.ael-federations a:hover img {
	opacity: 1;
}

/* Logo du site */
.site-logo img {
	max-height: 88px;
	width: auto;
}

/* Palette de couleurs pour l'éditeur de blocs (Gutenberg)
   !important nécessaire : la règle de base des boutons force déjà sa
   couleur en !important, sinon un bouton "rouge" resterait bleu. */
.has-ael-bleu-fonce-background-color { background-color: var(--ael-bleu-fonce) !important; }
.has-ael-bleu-fonce-color { color: var(--ael-bleu-fonce) !important; }
.has-ael-bleu-clair-background-color { background-color: var(--ael-bleu-clair) !important; }
.has-ael-bleu-clair-color { color: var(--ael-bleu-clair) !important; }
.has-ael-rouge-background-color { background-color: var(--ael-rouge) !important; }
.has-ael-rouge-color { color: var(--ael-rouge) !important; }
.has-ael-gris-clair-background-color { background-color: var(--ael-gris-clair) !important; }
.has-ael-gris-clair-color { color: var(--ael-gris-clair) !important; }
.has-white-color { color: var(--ael-blanc) !important; }
.has-white-background-color { background-color: var(--ael-blanc); }

/* Onglets de filtre Actualités */
.ael-category-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 24px 0 32px;
	border-bottom: 1px solid #e7eaf0;
	padding-bottom: 0;
}
.ael-category-tabs__item {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1.3rem;
	color: var(--ael-gris-texte);
	padding: 10px 8px;
	margin-bottom: -1px;
	border-bottom: 3px solid transparent;
}
.ael-category-tabs__item:hover {
	color: var(--ael-bleu-clair);
}
.ael-category-tabs__item.is-active {
	color: var(--ael-bleu-fonce);
	border-bottom-color: var(--ael-rouge);
}

/* Bouton "outline" (variante secondaire) */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--ael-bleu-fonce) !important;
	border: 2px solid var(--ael-bleu-fonce);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--ael-bleu-fonce) !important;
	color: var(--ael-blanc) !important;
}

/* Galerie photos : filtres saison / thématique + grille d'albums */
.ael-gallery-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.ael-gallery-filters .ael-category-tabs {
	margin: 24px 0 0;
	border-bottom: none;
	flex: 1 1 auto;
}
.ael-season-select {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 24px 0 0;
}
.ael-season-select label {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	font-size: 1.2rem;
	color: var(--ael-gris-texte);
}
.ael-season-select select {
	font-family: 'Poppins', sans-serif;
	font-size: 1.15rem;
	padding: 10px 12px;
	border: 1px solid #e7eaf0;
	border-radius: 6px;
	color: var(--ael-bleu-fonce);
	background: var(--ael-blanc);
}

.ael-album-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #e7eaf0;
}
.ael-album-card {
	display: block;
	text-decoration: none;
	color: var(--ael-gris-texte);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #e7eaf0;
	transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.ael-album-card:hover {
	border-color: var(--ael-bleu-clair);
	box-shadow: 0 4px 12px rgba(0, 105, 255, 0.12);
}
.ael-album-card__thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ael-gris-clair);
}
.ael-album-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ael-album-card__thumb--empty {
	display: flex;
}
.ael-album-card__title {
	display: block;
	padding: 12px 14px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--ael-bleu-fonce);
}
.ael-gallery-empty {
	margin-top: 24px;
	color: var(--ael-gris-texte);
	font-style: italic;
}

/* Page d'un album : titre soigné + galerie de photos harmonisée, quel que
   soit le nombre de photos (1 ou 50) — rendu simple à obtenir : un titre
   d'article, puis un bloc Galerie rempli avec les photos de l'événement. */
.single-album .entry-title {
	font-size: 2rem;
	margin-bottom: 28px;
}
/* GeneratePress affiche l'image mise en avant au-dessus du titre sur les
   singuliers — pour un album, cette image est toujours la première photo
   de la galerie juste en dessous : doublon pur, on le masque ici. */
.single-album .featured-image.page-header-image-single {
	display: none;
}
/* Le bloc Galerie natif (flex + "is-cropped") répartit la hauteur des photos
   ligne par ligne : avec des photos aux formats très variés (portrait,
   panoramique...) ça peut donner une case écrasée ou démesurément étirée.
   On remplace par une grille à cases de ratio fixe — chaque photo est
   indépendante, plus de calcul de hauteur partagée entre voisines. */
.single-album .wp-block-gallery,
.single-post .wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px !important;
}
.single-album .wp-block-gallery .wp-block-image,
.single-post .wp-block-gallery .wp-block-image {
	width: auto !important;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	overflow: hidden;
}
.single-album .wp-block-gallery .wp-block-image > a,
.single-album .wp-block-gallery .wp-block-image > div,
.single-post .wp-block-gallery .wp-block-image > a,
.single-post .wp-block-gallery .wp-block-image > div {
	display: block !important;
	width: 100%;
	height: 100%;
}
.single-album .wp-block-gallery .wp-block-image img,
.single-post .wp-block-gallery .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform 0.2s ease-in-out;
}
.single-album .wp-block-gallery .wp-block-image a:hover img,
.single-post .wp-block-gallery .wp-block-image a:hover img {
	transform: scale(1.04);
}

/* Carrousel de photos (salle) : défilement horizontal léger, sans JS */
.ael-carousel {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 4px 4px 16px;
	margin: 16px 0;
	-webkit-overflow-scrolling: touch;
}
.ael-carousel img {
	scroll-snap-align: start;
	flex: 0 0 auto;
	height: 280px;
	width: auto;
	border-radius: 8px;
	object-fit: cover;
}
.ael-carousel::-webkit-scrollbar {
	height: 8px;
}
.ael-carousel::-webkit-scrollbar-thumb {
	background: var(--ael-bleu-clair);
	border-radius: 4px;
}

/* Bloc "Nous contacter" (résumé des coordonnées, ex: sur Infos pratiques) */
.ael-contact-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	background: var(--ael-gris-clair);
	border-radius: 8px;
	padding: 20px 24px;
	margin: 16px 0;
}
.ael-contact-info dt {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1.05rem;
	color: var(--ael-bleu-fonce);
	margin-bottom: 6px;
}
.ael-contact-info dd {
	margin: 0;
	color: var(--ael-gris-texte);
	font-size: 1.1rem;
}

/* Carte Leaflet */
.ael-map {
	width: 100%;
	height: 350px;
	border: 1px solid #e7eaf0;
	border-radius: 6px;
	margin: 16px 0;
	z-index: 1;
}

/* Icônes Facebook / FFTT / UFOLEP dans l'en-tête */
.ael-header-social {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding-left: 12px;
	margin-left: 4px;
	border-left: 1px solid #e7eaf0;
}
.ael-header-social img {
	height: 26px;
	width: 26px;
	object-fit: contain;
	transition: transform 0.15s ease-in-out;
}
.ael-header-social a:hover img {
	transform: scale(1.15);
}

/* ===== Page d'accueil ===== */

/* Hero : dégradé de bleu (foncé → clair), avec une diagonale rouge discrète
   pour casser la monotonie sans quitter la palette. */
.ael-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ael-bleu-fonce) 0%, var(--ael-bleu-clair) 100%);
	padding: 56px 24px;
	text-align: center;
	color: var(--ael-blanc);
}
.ael-hero::after {
	content: "";
	position: absolute;
	top: -20%;
	right: -8%;
	width: 55%;
	height: 160%;
	background: var(--ael-rouge);
	opacity: 0.12;
	transform: rotate(18deg);
	pointer-events: none;
}
.ael-hero__kicker {
	position: relative;
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.95rem;
	color: var(--ael-blanc);
	opacity: 0.85;
}
.ael-hero__title {
	position: relative;
	color: var(--ael-blanc) !important;
	font-size: clamp(2rem, 5vw, 3rem);
	margin: 10px 0 16px;
}
.ael-hero__text {
	position: relative;
	max-width: 640px;
	margin: 0 auto 28px;
	font-size: 1.15rem;
	opacity: 0.95;
}
.ael-hero__buttons {
	position: relative;
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}
.ael-hero__buttons .ael-btn-outline-white {
	background: transparent;
	border: 2px solid var(--ael-blanc);
	color: var(--ael-blanc) !important;
}
.ael-hero__buttons .ael-btn-outline-white:hover {
	background: var(--ael-blanc);
	color: var(--ael-bleu-fonce) !important;
}

/* GeneratePress ajoute un padding de 40px (30px en mobile) à
   ".site-main .wp-block-group__inner-container" — pensé pour un gros bloc de
   contenu isolé, mais qui s'applique aussi à chaque groupe imbriqué de la
   page d'accueil (un groupe dans un groupe = un ".wp-block-group__inner-
   container" de plus à chaque niveau), ajoutant un vide avant chaque titre
   de section sans rapport avec le padding déjà réglé explicitement dessus.
   Neutralisé partout sur l'accueil : c'est déjà l'origine du même problème
   qu'on avait corrigé sur les cartes "Dernières actualités" (photo/date). */
body.home .entry-content .wp-block-group__inner-container {
	padding: 0;
}

/* Bandeau d'affiliation (juste sous le hero) : les 2 logos de fédération
   mis en avant tôt dans la page plutôt qu'en bas de page ou noyés dans les
   chiffres clés — un seul endroit pour cette info, pas de doublon. */
.ael-affiliation {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	max-width: 700px;
	margin: 28px auto 0;
	padding: 14px 24px;
	border: 1px solid #d5dae3;
	border-radius: 999px;
	text-align: center;
}
.ael-affiliation__label {
	margin: 0;
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1.05rem;
	color: var(--ael-bleu-fonce);
}
.ael-affiliation__logos {
	display: flex;
	align-items: center;
	gap: 18px;
}
.ael-affiliation__logo img {
	max-height: 44px;
	width: auto;
	object-fit: contain;
}
@media (max-width: 600px) {
	.ael-affiliation__text { flex-basis: 100%; }
}

/* Chiffres clés : vraies cartes (bordure + fond blanc) pour bien séparer
   chaque chiffre — un simple texte dans une grille ne se distinguait pas
   assez d'un chiffre à l'autre. Écart chiffre → texte resserré (l'ancien
   line-height du gros chiffre en Anton laissait un vide plus grand que les
   8px de margin ne le laissaient penser). */
.ael-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 16px;
	padding: 40px 0 20px;
}
.ael-stat {
	background: var(--ael-blanc);
	/* Plus foncée que le gris clair habituel (#e7eaf0) : sur fond blanc,
	   cette bordure-là est quasi invisible — ces cartes en ont besoin pour
	   se distinguer les unes des autres. */
	border: 1px solid #d5dae3;
	border-radius: 8px;
	padding: 20px 16px;
	text-align: center;
}
.ael-stats__number {
	display: block;
	margin: 0;
	font-family: 'Anton', sans-serif;
	font-size: 2.2rem;
	line-height: 1.15;
	color: var(--ael-rouge);
}
.ael-stats__label {
	display: block;
	margin: 4px 0 0;
	font-size: 0.9rem;
	color: var(--ael-gris-texte);
}
/* Petit badge de progression, sous le chiffre de licenciés — évite d'avoir
   une carte à part juste pour "43 → 96", qui répétait le "96" voisin. */
.ael-stats__delta {
	display: inline-block;
	margin: 10px 0 0;
	padding: 3px 12px;
	background: var(--ael-gris-clair);
	color: var(--ael-bleu-fonce);
	font-weight: 600;
	font-size: 0.78rem;
	border-radius: 999px;
}

/* Pourquoi nous rejoindre : cartes à accent alterné (répété tous les 3 pour
   couvrir n'importe quel nombre de cartes, pas seulement les 3 premières) */
.ael-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	/* Pas de max-width/margin:auto ici : son parent (le groupe "wide" du
	   titre "Pourquoi nous rejoindre") a déjà la bonne largeur — un second
	   centrage indépendant décalait les cartes de 50px vers la droite par
	   rapport au titre. */
}
.ael-feature {
	background: var(--ael-blanc);
	border: 1px solid #e7eaf0;
	border-radius: 8px;
	padding: 28px 24px;
	border-top: 4px solid var(--ael-bleu-clair);
}
.ael-feature:nth-child(3n+2) { border-top-color: var(--ael-rouge); }
.ael-feature:nth-child(3n+3) { border-top-color: var(--ael-bleu-fonce); }
.ael-feature h3 {
	font-size: 1.15rem;
	margin: 0 0 8px;
}
.ael-feature p {
	margin: 0;
	color: var(--ael-gris-texte);
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: justify;
}

/* Bande photo vers la galerie */
.ael-photo-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	/* Idem .ael-features : le parent "wide" (titre "En images") a déjà la
	   bonne largeur, pas besoin d'un second centrage. */
}
.ael-photo-strip a {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 6px;
}
.ael-photo-strip img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease-in-out;
}
.ael-photo-strip a:hover img {
	transform: scale(1.08);
}
@media (max-width: 700px) {
	.ael-photo-strip { grid-template-columns: repeat(3, 1fr); }
}

/* Grille de cartes "Dernières actualités" (accueil) — même langage visuel
   que les cartes d'albums de la galerie : carte blanche, image en 4/3,
   texte compact. Remplace l'ancien rendu (bloc Requête brut, sans carte),
   trop grand et trop proche de la mise en page de l'ancien site. */
.ael-actu-grid .wp-block-post-template {
	gap: 24px;
}
.ael-actu-grid .wp-block-post {
	position: relative;
	background: var(--ael-blanc);
	border: 1px solid #e7eaf0;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.ael-actu-grid .wp-block-post:hover {
	border-color: var(--ael-bleu-clair);
	box-shadow: 0 4px 12px rgba(0, 105, 255, 0.12);
}
/* Lien "étiré" : le lien du titre couvre toute la carte (photo, date,
   extrait compris) pour que la carte entière soit cliquable, pas que le
   titre — la photo garde son propre lien (même destination) en dessous. */
.ael-actu-grid .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.ael-actu-grid .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ael-gris-clair);
}
.ael-actu-grid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ael-actu-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
/* Le bloc Groupe (date + titre + extrait) ajoute son propre wrapper interne
   (.wp-block-group__inner-container), qui hérite de la règle générale
   ".site-main .wp-block-group__inner-container { padding: 40px }" prévue
   pour les gros blocs pleine page — d'où le grand vide entre la photo et la
   date. C'est aussi ce wrapper (pas ael-actu-card__body) qui contient
   réellement date/titre/extrait : le "gap" ci-dessus ne s'appliquait donc
   jamais entre eux, qui se touchaient (date collée au titre). */
.ael-actu-card__body .wp-block-group__inner-container {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ael-actu-grid .wp-block-post-date {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ael-bleu-clair);
	font-weight: 600;
}
.ael-actu-grid .wp-block-post-title,
.ael-actu-grid .wp-block-post-title a {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: normal;
	color: var(--ael-bleu-fonce);
	margin: 0;
}
.ael-actu-grid .wp-block-post-excerpt {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--ael-gris-texte);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ael-actu-grid .wp-block-post-excerpt a {
	display: none;
}

/* Actus vides : message convivial plutôt qu'un vide gênant.
   Bordure bleu clair = message informatif (le rouge est réservé aux
   notes importantes, ex : astérisques du tableau des horaires). */
.ael-empty-actus {
	text-align: center;
	padding: 32px 20px;
	background: var(--ael-gris-clair);
	border-left: 3px solid var(--ael-bleu-clair);
	border-radius: 0 8px 8px 0;
	color: var(--ael-gris-texte);
	max-width: 1100px;
	margin: 0 auto;
}

/* Bandeau "Prêt à nous rejoindre ?" (bas de page) : le texte et le bouton
   n'étaient pas alignés verticalement (défaut du layout flex de Gutenberg,
   align-items: normal).
   Le padding gauche/droite est nécessaire ici : les titres H2 classiques
   sont correctement décalés du bord grâce au padding automatique du layout
   "constrained" de Gutenberg, mais ce bandeau utilise un layout "flex" (pour
   aligner texte + bouton), qui n'a pas cette compensation — le texte
   collait au bord gauche du bloc "pleine largeur" sans ce padding.
   justify-content: flex-start (+ gap) plutôt que space-between : avec
   l'ancien réglage, le bouton était plaqué tout à droite du bandeau, très
   loin du texte sur un écran large — il suit maintenant le texte de près. */
.ael-cta-band__inner {
	align-items: center;
	/* !important nécessaire : le bloc Gutenberg pose sa propre classe
	   ".is-content-justification-space-between" avec la même spécificité
	   qu'un simple sélecteur de classe ici. */
	justify-content: flex-start !important;
	gap: 20px 48px;
	padding: 0 40px;
}
@media (max-width: 768px) {
	.ael-cta-band__inner {
		padding: 0 30px;
	}
}
/* Sans ça, le bloc texte (largeur "constrained" = 100% du conteneur flex)
   prenait toute la largeur disponible et repoussait le bouton à la ligne
   suivante au lieu de le placer à côté. */
.ael-cta-band__inner > *:first-child {
	flex: 1 1 420px;
	max-width: 640px;
}
.ael-cta-band__inner > *:last-child {
	flex: 0 0 auto;
}

/* Bandeau "Suivez-nous sur Facebook" */
.ael-facebook-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px;
	text-align: center;
}
.ael-facebook-banner img {
	height: 32px;
	width: 32px;
}
.ael-facebook-banner span,
.ael-facebook-banner .ael-fb-text {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 1.1rem;
	color: var(--ael-bleu-fonce);
	margin: 0;
}

/* ===== Liste des actualités (page Actualités + catégories) =====
   Par défaut GeneratePress empile les articles les uns sous les autres,
   sans grille ni pagination visible (on l'avait coupée par erreur en même
   temps que la navigation précédent/suivant d'un article seul). On repasse
   en grille de cartes, cohérente avec celle de l'accueil. */
body.blog .site-main,
body.archive .site-main,
body.category .site-main,
body.search .site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
	/* Même marge gauche/droite que .inside-article sur les autres pages
	   (Infos pratiques, Galerie photos...) — sinon le titre (et tout le
	   reste) démarre plus à gauche qu'ailleurs sur le site. */
	padding: 0 40px;
}
@media (max-width: 768px) {
	body.blog .site-main,
	body.archive .site-main,
	body.category .site-main,
	body.search .site-main {
		padding: 0 30px;
	}
}
/* La barre de filtres (saison/thématique) est injectée en tout premier
   dans <main> — sans ça elle devient une case de la grille au même titre
   qu'une carte d'article, au lieu de s'étaler sur toute la largeur
   au-dessus (comme sur la galerie photo). */
body.blog .site-main > .ael-gallery-filters,
body.archive .site-main > .ael-gallery-filters,
body.category .site-main > .ael-gallery-filters,
body.search .site-main > .ael-gallery-filters {
	grid-column: 1 / -1;
	margin: 0 0 8px;
}
/* Même chose pour le titre de page Actualités, injecté juste avant la barre
   de filtres : sans ça il devient lui aussi une case de la grille au lieu de
   s'étaler pleine largeur au-dessus. */
body.blog .site-main > .ael-page-header-wrap,
body.archive .site-main > .ael-page-header-wrap,
body.category .site-main > .ael-page-header-wrap,
body.search .site-main > .ael-page-header-wrap {
	grid-column: 1 / -1;
	margin: 0 0 8px;
}
/* Sur les archives de catégorie, GeneratePress ajoute aussi un titre de
   page ("Résultats & compétitions"...) en enfant direct de <main> — même
   souci que la barre de filtres : sans le forcer en pleine largeur, il
   devient une case de la grille et décale le premier article vers la
   droite (au lieu de l'avoir juste en dessous, pleine largeur).
   Il arrive aussi APRÈS la barre de filtres dans le HTML (ordre du hook
   WordPress) : on le replace visuellement avant avec `order`, et on
   l'habille comme un petit titre de section (trait bleu, cf. Infos
   pratiques) plutôt que le grand H1 des pages — un simple repère de
   contexte, pas un titre à mettre en avant. */
/* Le filtre actif dans la barre au-dessus (onglet en surbrillance + saison
   sélectionnée) indique déjà clairement le contexte : le titre de page
   généré par WordPress ("Résultats & compétitions"...) est redondant. */
body.blog .site-main > .page-header,
body.archive .site-main > .page-header,
body.category .site-main > .page-header,
body.search .site-main > .page-header {
	display: none;
}
body.blog .site-main > article,
body.archive .site-main > article,
body.category .site-main > article,
body.search .site-main > article {
	position: relative;
	background: var(--ael-blanc);
	border: 1px solid #e7eaf0;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
body.blog .site-main > article:hover,
body.archive .site-main > article:hover,
body.category .site-main > article:hover,
body.search .site-main > article:hover {
	border-color: var(--ael-bleu-clair);
	box-shadow: 0 4px 12px rgba(0, 105, 255, 0.12);
}
/* Même lien "étiré" que sur la page d'accueil : la carte entière devient
   cliquable via le lien du titre, pas seulement le titre ou la photo. */
body.blog .site-main > article .entry-title a::after,
body.archive .site-main > article .entry-title a::after,
body.category .site-main > article .entry-title a::after,
body.search .site-main > article .entry-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
body.blog .site-main .inside-article,
body.archive .site-main .inside-article,
body.category .site-main .inside-article,
body.search .site-main .inside-article {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
}
/* Vignette de l'article (générée par GeneratePress en dehors des vues
   article seul) : format fixe pour que toutes les cartes s'alignent. */
body.blog .post-image,
body.archive .post-image,
body.category .post-image,
body.search .post-image {
	margin: 0;
}
body.blog .post-image a,
body.archive .post-image a,
body.category .post-image a,
body.search .post-image a {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
body.blog .post-image img,
body.archive .post-image img,
body.category .post-image img,
body.search .post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
body.blog .site-main .entry-header,
body.archive .site-main .entry-header,
body.category .site-main .entry-header,
body.search .site-main .entry-header {
	padding: 10px 16px 10px;
}
body.blog .site-main .entry-title,
body.archive .site-main .entry-title,
body.category .site-main .entry-title,
body.search .site-main .entry-title {
	position: relative;
	font-size: 1.05rem;
	line-height: 1.35;
	margin: 0;
	padding-bottom: 10px;
	/* Les titres de "Résultats & compétitions" sont souvent longs (phase,
	   journée, date) et tiennent sur 3-4 lignes — un clamp à 2 lignes les
	   coupait en plein mot, avec le trait rouge planté au milieu du texte
	   restant au lieu de passer dessous. 4 lignes couvre la quasi-totalité
	   des titres du site sans les tronquer. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.blog .site-main .entry-header::after,
body.archive .site-main .entry-header::after,
body.category .site-main .entry-header::after,
body.search .site-main .entry-header::after {
	content: none !important;
}
/* Petit trait rouge repris sous le titre de carte, mais plus discret et
   plus rapproché que sur un article seul (pas de place à perdre ici). */
body.blog .site-main .entry-title::after,
body.archive .site-main .entry-title::after,
body.category .site-main .entry-title::after,
body.search .site-main .entry-title::after {
	content: "" !important;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 3px;
	background: var(--ael-rouge);
	border-radius: 2px;
}
/* Date de publication : discrète, sans "by" (auteur retiré côté PHP).
   .entry-meta est imbriquée DANS .entry-header (qui a déjà 16px de
   padding) : lui redonner 16px de padding-left revient à décaler la date
   deux fois par rapport au titre — on la laisse coller au bord de son
   parent déjà décalé. */
body.blog .site-main .entry-meta,
body.archive .site-main .entry-meta,
body.category .site-main .entry-meta,
body.search .site-main .entry-meta {
	padding: 8px 0 0;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ael-bleu-clair);
	font-weight: 600;
}
body.blog .site-main .entry-summary,
body.archive .site-main .entry-summary,
body.category .site-main .entry-summary,
body.search .site-main .entry-summary {
	padding: 12px 16px 16px;
	margin-top: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
/* L'extrait peut contenir plusieurs paragraphes (retours à la ligne
   conservés, cf. ael_card_excerpt côté PHP) : on borne la hauteur totale
   plutôt que chaque paragraphe individuellement, pour des cartes de
   hauteur cohérente quel que soit le nombre de paragraphes gardés. */
body.blog .site-main .entry-summary p,
body.archive .site-main .entry-summary p,
body.category .site-main .entry-summary p,
body.search .site-main .entry-summary p {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--ael-gris-texte);
	margin: 0 0 6px;
}
/* Le texte de l'extrait est borné en hauteur (avec un fondu) ; le bouton
   "Lire la suite" est en dehors de ce wrapper, donc jamais coupé. */
.ael-excerpt-text {
	max-height: 96px;
	overflow: hidden;
	position: relative;
}
.ael-excerpt-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 24px;
	background: linear-gradient(rgba(255, 255, 255, 0), var(--ael-blanc));
	pointer-events: none;
}
/* "Lire la suite" : bouton plutôt qu'un lien texte perdu dans le paragraphe. */
.read-more {
	display: inline-block;
	margin-top: 10px;
	padding: 6px 14px;
	background: var(--ael-bleu-clair);
	color: var(--ael-blanc) !important;
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.78rem;
	border-radius: 4px;
	text-decoration: none !important;
	transition: background-color 0.15s ease-in-out;
}
.read-more:hover {
	background: var(--ael-rouge);
}
/* Catégorie ("dossier") en bas de carte : petit badge plutôt qu'un texte brut. */
body.blog .site-main footer.entry-meta,
body.archive .site-main footer.entry-meta,
body.category .site-main footer.entry-meta,
body.search .site-main footer.entry-meta {
	padding: 0 16px 16px;
	margin-top: auto;
}
body.blog .site-main footer.entry-meta .cat-links,
body.archive .site-main footer.entry-meta .cat-links,
body.category .site-main footer.entry-meta .cat-links,
body.search .site-main footer.entry-meta .cat-links,
body.blog .site-main footer.entry-meta a,
body.archive .site-main footer.entry-meta a,
body.category .site-main footer.entry-meta a,
body.search .site-main footer.entry-meta a {
	font-size: 0.7rem;
}
body.blog .site-main footer.entry-meta a,
body.archive .site-main footer.entry-meta a,
body.category .site-main footer.entry-meta a,
body.search .site-main footer.entry-meta a {
	display: inline-block;
	background: var(--ael-gris-clair);
	color: var(--ael-bleu-fonce) !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	text-decoration: none !important;
	margin: 2px 4px 2px 0;
}
body.blog .site-main footer.entry-meta a:hover,
body.archive .site-main footer.entry-meta a:hover,
body.category .site-main footer.entry-meta a:hover,
body.search .site-main footer.entry-meta a:hover {
	background: var(--ael-bleu-clair);
	color: var(--ael-blanc) !important;
}

/* Pagination numérotée en bas de liste */
.paging-navigation,
#nav-below {
	grid-column: 1 / -1;
	margin-top: 16px;
}
.paging-navigation .nav-links,
#nav-below .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.paging-navigation .page-numbers,
#nav-below .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 6px;
	border: 1px solid #e7eaf0;
	color: var(--ael-bleu-fonce);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	text-decoration: none !important;
	transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.paging-navigation .page-numbers:hover,
#nav-below .page-numbers:hover {
	border-color: var(--ael-bleu-clair);
	background: var(--ael-gris-clair);
}
.paging-navigation .page-numbers.current,
#nav-below .page-numbers.current {
	background: var(--ael-bleu-clair);
	border-color: var(--ael-bleu-clair);
	color: var(--ael-blanc);
}
.paging-navigation .page-numbers.dots,
#nav-below .page-numbers.dots {
	border: none;
	background: none;
}
/* Les liens "Older/Newer posts" texte de secours de GeneratePress restent
   masqués : the_posts_pagination() (numérotée) suffit et est plus claire. */
#nav-below .nav-previous,
#nav-below .nav-next {
	display: none;
}