/**
 * Bloc « mein/blog-grid » — grille des articles du journal.
 *
 * Styles en CLASSES uniquement (aucun style inline dans render.php).
 * Fidèle à la section GRILLE ARTICLES de la maquette « Blog » : cartes verticales
 * en auto-fill minmax(300px, 1fr). Style de carte aligné sur les cartes du bloc
 * « mein/lire-aussi » (cohérence visuelle du journal). Réutilise les tokens de
 * theme.json : couleurs (crème, sauge, sauge-clair, or-sable, titres, texte,
 * texte-discret) et polices (serif / sans).
 *
 * Enqueue automatique : déclaré via « style » dans block.json, WordPress ne
 * charge cette feuille que lorsque le bloc est présent sur la page.
 */

/* --- Atterrissage par ancre (repli sans JavaScript) -------------------- */

/*
 * Chaque pastille de filtre pointe sur « #<ancre-de-la-section> » (cf. render.php)
 * pour que le rechargement classique — JavaScript coupé, ou fetch en échec —
 * atterrisse sur la grille au lieu du haut de page.
 *
 * Sans cette marge, l'atterrissage cale le HAUT DE LA SECTION sur le haut du
 * viewport… c'est-à-dire SOUS la barre de navigation, qui est collante
 * (header.wp-block-template-part { position: sticky; top: 0 }) et haute de 76 px :
 * les pastilles arrivaient à moitié masquées, exactement là où le visiteur veut
 * lire quel filtre est actif. La marge de défilement décale le point d'arrivée
 * d'une hauteur de barre, plus une respiration.
 *
 * Portée volontairement au bloc et non à html : le thème n'a pas de règle globale,
 * on n'en introduit pas une qui modifierait le comportement d'autres ancres.
 */
.mein-blog-grid {
	scroll-margin-top: 96px;
}

/*
 * Barre d'administration WordPress (visiteur connecté) : 32 px de plus. Seulement
 * au-dessus de 782 px, seuil auquel elle passe en position:fixed — en dessous elle
 * défile avec la page et ne masque donc rien. Même seuil que le décalage appliqué
 * à la barre du site dans blocks/site-header/style.css.
 */
@media screen and (min-width: 783px) {

	.admin-bar .mein-blog-grid {
		scroll-margin-top: 128px;
	}
}

/* --- Conteneur centré (large ~1180px) ---------------------------------- */

.mein-blog-grid__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(24px, 3vw, 40px) clamp(20px, 5vw, 64px) clamp(56px, 7vw, 96px);
}

/* --- Barre de filtres par catégorie (au-dessus de la grille) ----------- */

.mein-blog-grid__filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(28px, 3.5vw, 44px);
}

/* Pastille : vraie balise <a> (lien serveur ?categorie=slug). */
.mein-blog-grid__filtre {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border-radius: 999px; /* pilule aux coins arrondis, cohérente avec le badge « À la une » */
	border: 1px solid var(--wp--preset--color--sauge-brumeux);
	background: var(--wp--preset--color--creme);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--texte);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Sauge foncé et non sauge : sur le fond crème de la pastille, le sauge ne donne
   que 4,32:1. Sauge foncé : 5,60:1. Cf. règle de charte, assets/css/main.css.
   La bordure, elle, reste en sauge : elle est non textuelle, seuil 3:1, et
   4,32:1 la satisfait largement. */
.mein-blog-grid__filtre:hover {
	border-color: var(--wp--preset--color--sauge);
	color: var(--mein-sauge-sur-clair);
}

/* Focus clavier visible (accessibilité). */
.mein-blog-grid__filtre:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 3px;
}

/* Pastille active : fond sauge plein, texte BLANC (reflète ?categorie=slug).
   La crème n'y donnait que 4,32:1 ; le blanc donne 4,62:1. Cette règle vient après
   « :filtre:hover » et pèse autant (0,2,0) : elle l'emporte donc aussi au survol
   d'une pastille active, ce qui est le comportement voulu. */
.mein-blog-grid__filtre.is-actif {
	background: var(--wp--preset--color--sauge);
	border-color: var(--wp--preset--color--sauge);
	color: var(--mein-texte-sur-sauge);
}

/* --- Zone de résultats + état de chargement ---------------------------- */

/*
 * Conteneur des résultats (grille OU message « aucun article »). Neutre par
 * défaut : il n'existe que pour donner à view.js une cible de remplacement stable.
 *
 * ÉTAT DE CHARGEMENT — ce sont les VISUELS qui s'estompent, jamais le texte.
 *
 * Le réflexe serait de poser une opacité sur toute la zone. Calcul fait sur les
 * tokens réels du thème, c'est un recul d'accessibilité : le corps de carte
 * (texte #6B6157 sur crème #FBF7EF) offre 5,66:1, mais composité à 50 % sur le
 * fond sable de la page il tombe à 2,13:1 — très en deçà du 4,5:1 exigé par
 * WCAG 1.4.3 (AA) pour du texte de 14,5 px. Même à 85 % d'opacité on reste sous
 * le seuil (4,13:1), et à 90 % l'effet n'est plus perceptible : l'opacité globale
 * n'a donc aucun réglage à la fois visible ET conforme.
 *
 * On estompe donc le média des cartes — la plus grande masse visuelle de la
 * grille, et le seul élément qui ne porte aucun texte. Le signal est net, les
 * titres et extraits restent parfaitement lisibles. Aucune couleur en dur, aucune
 * barre de progression ni squelette qui ferait « sauter » la mise en page (donc
 * aucun décalage cumulatif, CLS préservé).
 *
 * pointer-events : pendant le court instant du chargement, on désarme le clic sur
 * les cartes — sans cela, un clic pourrait atterrir sur une carte qui vient d'être
 * remplacée et ouvrir un article que le visiteur ne visait plus. Le clavier, lui,
 * n'est pas concerné (pointer-events n'affecte pas le focus), et view.js pose
 * aria-busy sur la zone pour les technologies d'assistance.
 */
.mein-blog-grid.is-chargement .mein-blog-grid__resultats {
	pointer-events: none;
}

.mein-blog-grid.is-chargement .mein-blog-grid__media {
	opacity: 0.35;
}

/*
 * Focus du conteneur de résultats.
 *
 * Quand la pagination est active, render.php pose tabindex="-1" ici et view.js y
 * place le focus après un changement de page (le lien cliqué ayant été détruit
 * avec le contenu remplacé). Ce conteneur n'est PAS un contrôle : il n'entre pas
 * dans l'ordre de tabulation et rien ne s'y active. Un cadre permanent y serait
 * donc du bruit après un clic à la souris — mais son absence priverait un
 * utilisateur clavier voyant du seul repère lui disant où le focus a atterri.
 *
 * :focus-visible aurait été le bon outil, mais il ne fonctionne PAS ici — mesuré
 * au navigateur (Edge/Chromium 2026) : après une tabulation réelle jusqu'au lien
 * puis Entrée, el.matches( ':focus-visible' ) renvoie false sur le conteneur.
 * Chromium ne propage pas l'état « focus clavier » à un élément focalisé PAR
 * PROGRAMME. La règle serait donc restée lettre morte.
 *
 * On s'appuie donc sur une classe posée par view.js, qui sait, lui, de quelle
 * façon le lien a été activé (cf. l'heuristique detail === 0 côté JS). Un seul
 * mécanisme, déterministe et vérifiable, plutôt qu'une règle qui dépend du moteur.
 */
.mein-blog-grid__resultats:focus {
	outline: none;
}

/* Contour sauge sur le fond de la page : 4,07:1 mesuré au navigateur, au-dessus
   des 3:1 exigés par WCAG 1.4.11 pour un élément d'interface non textuel. */
.mein-blog-grid__resultats.is-focus-clavier:focus {
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 6px;
}

/* --- Pagination (liens de pages sous la grille) ------------------------ */

/*
 * Rendue DANS la zone de résultats (cf. render.php) : elle est donc remplacée en
 * même temps que la grille lors d'un filtrage ou d'un changement de page.
 */
.mein-blog-grid__pagination {
	margin-top: clamp(32px, 4vw, 48px);
}

.mein-blog-grid__pages {
	display: flex;
	flex-wrap: wrap;          /* jamais de débordement horizontal, même en 320px */
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mein-blog-grid__pages li {
	margin: 0;
}

/*
 * Pastille de page — même vocabulaire visuel que les pastilles de filtre
 * (pilule, bordure sauge brumeux, fond crème), à deux écarts près, MESURÉS au
 * navigateur sur les couleurs réellement calculées :
 *
 *  - la couleur de survol et le fond de la page courante utilisent « sauge foncé »
 *    (#5A6849) et non « sauge » (#6B7A58). Le sauge donne 4,32:1 — sous le seuil
 *    de 4,5:1 exigé par WCAG 1.4.3 (AA) pour du texte de 13 px (le gras ne suffit
 *    pas : « large » commence à 18,66 px gras). Le sauge foncé donne 5,60:1, pour
 *    un écart de teinte imperceptible ;
 *  - min-height/min-width 44px : cible tactile confortable, très au-delà du
 *    minimum de 24x24 px de WCAG 2.5.8 (AA). Mesuré : 64 px de haut.
 *
 * Le texte au repos (#6B6157 sur crème) mesure 5,66:1.
 *
 * N.B. — la pastille de FILTRE active, antérieure à ce composant, reste à 4,32:1 :
 * c'est un écart existant, laissé tel quel pour ne pas modifier un rendu validé,
 * et signalé comme tel. Ce composant-ci ne le reproduit pas.
 */
.mein-blog-grid__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--sauge-brumeux);
	background: var(--wp--preset--color--creme);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--texte);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

a.mein-blog-grid__page:hover {
	border-color: var(--wp--preset--color--sauge-fonce);
	color: var(--wp--preset--color--sauge-fonce);
}

/* Focus clavier visible (accessibilité). */
.mein-blog-grid__page:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 3px;
}

/* Page courante : <span> et non lien (aucune destination utile). */
.mein-blog-grid__page.is-actif {
	background: var(--wp--preset--color--sauge-fonce);
	border-color: var(--wp--preset--color--sauge-fonce);
	color: var(--wp--preset--color--creme);
}

/* Ellipse « … » : purement décorative (aria-hidden côté HTML). */
.mein-blog-grid__ellipse {
	display: inline-flex;
	justify-content: center;
	min-width: 20px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	/* Corps de texte plutôt que « texte discret » : 5,33:1 mesuré sur ce fond. */
	color: var(--wp--preset--color--texte);
}

/* --- Grille : auto-fill gère seule le nombre variable de cartes -------- */

.mein-blog-grid__grille {
	display: grid;
	/* min(100%, 300px) : garde-fou anti-débordement sur écran < 300px. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 26px;
}

/* --- Carte verticale cliquable ----------------------------------------- */

.mein-blog-grid__carte {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: var(--wp--preset--color--creme);
	border: 1px solid rgba(59, 50, 43, 0.06);
	border-radius: 22px;
	overflow: hidden; /* clippe l'image aux angles arrondis */
	box-shadow: 0 20px 46px -38px rgba(74, 63, 53, 0.4);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.mein-blog-grid__carte:hover,
.mein-blog-grid__carte:focus-visible {
	transform: translateY(-5px);
	box-shadow: 0 30px 60px -38px rgba(74, 63, 53, 0.5);
}

/* Focus clavier visible (accessibilité). */
.mein-blog-grid__carte:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 3px;
}

/* --- Média (image à la une ou placeholder) ----------------------------- */

.mein-blog-grid__media {
	position: relative;
	height: 184px;
	overflow: hidden;
	/* Fondu de l'état de chargement (cf. .is-chargement plus haut). */
	transition: opacity 0.25s ease;
}

.mein-blog-grid__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.mein-blog-grid__carte:hover .mein-blog-grid__image,
.mein-blog-grid__carte:focus-visible .mein-blog-grid__image {
	transform: scale(1.04);
}

/* Placeholder décoratif (aucune image réelle : cadre teinté sable). */
.mein-blog-grid__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, #eee4d4 0 14px, #e6dac8 14px 28px);
}

/* --- Corps de carte ---------------------------------------------------- */

.mein-blog-grid__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 24px 28px;
}

.mein-blog-grid__meta {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 13px;
}

.mein-blog-grid__categorie {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sauge-fonce);
}

.mein-blog-grid__point {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--or-sable);
}

.mein-blog-grid__temps {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12.5px;
	color: var(--wp--preset--color--texte-discret);
}

.mein-blog-grid__titre {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	font-size: 23px;
	line-height: 1.16;
	color: var(--wp--preset--color--titres);
	text-wrap: balance;
}

.mein-blog-grid__extrait {
	margin: 0 0 20px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--wp--preset--color--texte);
}

.mein-blog-grid__lien {
	margin-top: auto; /* pousse le lien en bas → cartes alignées */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* Sauge foncé : le sauge sur la carte crème ne donne que 4,32:1, contre 5,60:1
	   ici. Cf. règle de charte, assets/css/main.css. La flèche n'a pas de couleur
	   propre, elle hérite de ce lien et suit donc le correctif. */
	color: var(--mein-sauge-sur-clair);
}

.mein-blog-grid__fleche {
	font-size: 16px;
	transition: transform 0.25s ease;
}

.mein-blog-grid__carte:hover .mein-blog-grid__fleche,
.mein-blog-grid__carte:focus-visible .mein-blog-grid__fleche {
	transform: translateX(4px);
}

/* --- Message « aucun article » (discret, centré) ----------------------- */

.mein-blog-grid__vide {
	margin: 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	color: var(--wp--preset--color--texte-discret);
}

/* --- Responsive : une seule colonne sur très petit écran --------------- */

@media (max-width: 360px) {
	.mein-blog-grid__grille {
		grid-template-columns: 1fr;
	}
}

/* --- Respect de prefers-reduced-motion --------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.mein-blog-grid__carte,
	.mein-blog-grid__image,
	.mein-blog-grid__fleche,
	.mein-blog-grid__media {
		transition: none;
	}

	.mein-blog-grid__carte:hover,
	.mein-blog-grid__carte:focus-visible,
	.mein-blog-grid__carte:hover .mein-blog-grid__image,
	.mein-blog-grid__carte:focus-visible .mein-blog-grid__image,
	.mein-blog-grid__carte:hover .mein-blog-grid__fleche,
	.mein-blog-grid__carte:focus-visible .mein-blog-grid__fleche {
		transform: none;
	}
}