/* StudioLumile - PostGrid : styles front */

.studiolumile-postgrid {
	--rpg-columns: 3;
	--rpg-columns-tablet: 2;
	--rpg-columns-mobile: 1;
	--rpg-gap: 24px;
	--rpg-card-bg: #ffffff;
	--rpg-card-hover-bg: #f7f7f7;
	--rpg-border-color: #e5e5e5;
	--rpg-border-width: 1px;
	--rpg-border-radius: 8px;
	--rpg-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	--rpg-title-color: #1a1a1a;
	--rpg-title-font: inherit;
	--rpg-title-size: 20px;
	--rpg-title-weight: 600;
	--rpg-text-color: #555555;
	--rpg-text-font: inherit;
	--rpg-text-size: 15px;
	--rpg-meta-color: #888888;
	--rpg-tag-bg: #f1f1f1;
	--rpg-tag-color: #333333;
	--rpg-link-color: #e63946;
	--rpg-image-ratio: 16/9;
	--rpg-image-radius: 8px;
	--rpg-card-padding: 20px;
	--rpg-filter-bg: #ffffff;
	--rpg-filter-text: #555555;
	--rpg-filter-border: #e5e5e5;
	--rpg-filter-active-bg: #e63946;
	--rpg-filter-active-text: #ffffff;
	--rpg-filter-radius: 999px;
	--rpg-search-bg: #ffffff;
	--rpg-search-text: #333333;
	--rpg-search-border: #e5e5e5;
	--rpg-search-icon: #e63946;
	--rpg-search-radius: 999px;
	--rpg-meta-padding: 0px;

	box-sizing: border-box;
}

.studiolumile-postgrid *,
.studiolumile-postgrid *::before,
.studiolumile-postgrid *::after {
	box-sizing: inherit;
}

/* Contrôles : recherche + filtres */
.studiolumile-postgrid-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.studiolumile-postgrid-search {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 320px;
	flex: 1 1 240px;
}

.studiolumile-postgrid-search-input {
	width: 100%;
	/* Pas d'espace réservé par défaut : chaque icône (loupe/croix) réserve sa
	   propre place ci-dessous, uniquement du côté où elle se trouve réellement,
	   puisqu'elles sont désormais positionnées indépendamment l'une de l'autre. */
	padding: 10px 14px;
	border: var(--rpg-border-width) solid var(--rpg-search-border);
	border-radius: var(--rpg-search-radius);
	font-size: 14px;
	line-height: 1.4;
	background: var(--rpg-search-bg);
	color: var(--rpg-search-text);
	/* outline supprimé volontairement : le champ ne doit avoir AUCUN style
	   spécifique au clic/focus (voir section "Champ de saisie" du widget), en
	   dehors du texte indicatif qui s'efface — comportement natif du champ. */
	outline: none;
	transition: border-color 0.2s ease, border-width 0.2s ease, background-color 0.2s ease, color 0.2s ease, padding 0.2s ease;
}

/* Réserve de la place dans le texte du côté où se trouve chaque icône (la
   croix et la loupe étant positionnées indépendamment, chacune réserve sa
   propre place ; si les deux sont du même côté, la règle combinée ci-dessous
   l'emporte grâce à sa spécificité plus élevée). */
.studiolumile-search-clear-right .studiolumile-postgrid-search-input,
.studiolumile-search-loupe-right .studiolumile-postgrid-search-input {
	padding-right: 40px;
}

.studiolumile-search-clear-left .studiolumile-postgrid-search-input,
.studiolumile-search-loupe-left .studiolumile-postgrid-search-input {
	padding-left: 40px;
}

.studiolumile-search-loupe-right.studiolumile-search-clear-right .studiolumile-postgrid-search-input {
	padding-right: 76px;
}

.studiolumile-search-loupe-left.studiolumile-search-clear-left .studiolumile-postgrid-search-input {
	padding-left: 76px;
}

/* Loupe et croix sont deux blocs indépendants, chacun librement positionnable
   (réglages "Emplacement de la loupe" / "Emplacement de la croix"). Centrage
   vertical par la technique "top:0 + bottom:0 + hauteur fixe + margin:auto" :
   sur une boîte positionnée en absolu dont TOUS les décalages (top, bottom)
   ET la hauteur sont fixés, les navigateurs répartissent l'espace restant à
   parts égales entre margin-top et margin-bottom quand ils valent "auto" —
   ce calcul fait partie du modèle de boîte lui-même (CSS 2.1 §10.6.4), il ne
   dépend donc PAS de la valeur de `display` (flex ou non) ni d'un `transform`,
   contrairement aux deux techniques essayées précédemment : il ne peut donc
   pas être neutralisé par un display:inline/block imposé ailleurs (thème,
   Elementor...), cause la plus probable des décalages observés jusqu'ici. La
   hauteur (28px) correspond exactement à celle du bouton loupe/croix qu'il
   contient (voir plus bas) : celui-ci remplit alors tout le bloc, sans avoir
   besoin d'un centrage flex supplémentaire à l'intérieur. */
.studiolumile-postgrid-search-loupe-wrap,
.studiolumile-postgrid-search-clear-wrap {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 28px;
	margin-top: auto;
	margin-bottom: auto;
	line-height: 0;
	transition: color 0.2s ease, left 0.2s ease, right 0.2s ease;
}

/* Loupe : droite par défaut. */
.studiolumile-postgrid-search-loupe-wrap {
	right: 6px;
}

.studiolumile-search-loupe-left .studiolumile-postgrid-search-loupe-wrap {
	left: 6px;
	right: auto;
}

/* Croix : droite par défaut, décalée pour ne pas chevaucher la loupe. Écart
   volontairement plus large que la largeur du bouton loupe (28px) pour
   laisser un espace visuel net entre les deux icônes, plutôt qu'un simple
   contact bord à bord qui peut donner une impression de chevauchement. */
.studiolumile-postgrid-search-clear-wrap {
	right: 42px;
}

.studiolumile-search-clear-left .studiolumile-postgrid-search-clear-wrap {
	left: 42px;
	right: auto;
}

.studiolumile-postgrid-search-clear,
.studiolumile-postgrid-search-btn {
	position: static;
	box-sizing: border-box;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	box-shadow: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Réinitialise le padding interne fantôme que Firefox ajoute par défaut à
   l'intérieur des <button> (pseudo-élément de focus) : sans ce reset,
   l'icône peut sembler légèrement décentrée dans ce navigateur. */
.studiolumile-postgrid-search-clear::-moz-focus-inner,
.studiolumile-postgrid-search-btn::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* Centrage de l'icône, qu'il s'agisse du SVG par défaut ou d'une icône de la
   banque d'icônes (Font Awesome/eicons) choisie via le réglage "Icône". Le SVG
   par défaut a une vraie boîte englobante : un simple display:block suffit à
   le centrer dans le bouton (déjà flex/centré, voir règle ci-dessus). Les
   glyphes de police d'icônes (<i>), eux, ne sont PAS centrés par un flex posé
   sur le <i> lui-même (le glyphe est un pseudo-élément ::before sans largeur
   propre) : on reprend donc la technique standard d'Elementor pour les icônes
   de police (largeur forcée à 1em + texte centré), plus fiable qu'un flex ici. */
.studiolumile-postgrid-search-clear svg,
.studiolumile-postgrid-search-btn svg {
	display: block;
	width: 16px;
	height: 16px;
	margin: 0;
	flex-shrink: 0;
}

.studiolumile-postgrid-search-clear i,
.studiolumile-postgrid-search-btn i {
	display: inline-block;
	width: 1em;
	text-align: center;
	line-height: 1;
	margin: 0 !important;
}

.studiolumile-postgrid-search-btn {
	color: var(--rpg-search-icon);
}

.studiolumile-postgrid-search-clear {
	color: var(--rpg-search-text);
	opacity: 0.6;
	border-radius: 50%;
}

.studiolumile-postgrid-search-clear:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.06);
}

.studiolumile-postgrid-search-clear[hidden] {
	display: none;
}

.studiolumile-postgrid-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.studiolumile-filter-btn {
	border: var(--rpg-border-width) solid var(--rpg-filter-border);
	background: var(--rpg-filter-bg);
	color: var(--rpg-filter-text);
	padding: 8px 16px;
	border-radius: var(--rpg-filter-radius);
	font-size: 13px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.studiolumile-filter-btn:hover {
	border-color: var(--rpg-filter-active-bg);
}

.studiolumile-filter-btn.is-active {
	background: var(--rpg-filter-active-bg);
	border-color: var(--rpg-filter-active-bg);
	color: var(--rpg-filter-active-text);
}

/* Grille */
.studiolumile-postgrid-grid {
	display: grid;
	grid-template-columns: repeat(var(--rpg-columns-mobile), 1fr);
	gap: var(--rpg-gap);
}

@media (min-width: 600px) {
	.studiolumile-postgrid-grid {
		grid-template-columns: repeat(var(--rpg-columns-tablet), 1fr);
	}
}

@media (min-width: 1024px) {
	.studiolumile-postgrid-grid {
		grid-template-columns: repeat(var(--rpg-columns), 1fr);
	}
}

.studiolumile-postgrid-no-results {
	text-align: center;
	color: var(--rpg-text-color);
	padding: 40px 0;
}

/* Carte */
/* display:flex + flex-direction:column : garantit que le bouton d'appel à
   action ("Découvrir") reste toujours collé au bord bas de la carte, quelle
   que soit la longueur du titre/texte au-dessus. Les cartes d'une même ligne
   de grille ont déjà toutes la même hauteur (comportement par défaut de CSS
   Grid : align-items:stretch), mais SANS ce flex, l'espace en trop d'une
   carte au contenu plus court que ses voisines restait un simple vide APRÈS
   le bouton (fin de boîte block normale) plutôt que d'être absorbé avant lui
   — c'est ce qui donnait l'impression que le bouton "flottait" plus ou moins
   haut selon la longueur du titre. Voir .studiolumile-postgrid-card-link ci-dessous
   pour la partie qui absorbe réellement cet espace. */
.studiolumile-postgrid-card {
	display: flex;
	flex-direction: column;
	background: var(--rpg-card-bg);
	border: var(--rpg-border-width) solid var(--rpg-border-color);
	border-radius: var(--rpg-border-radius);
	overflow: hidden;
	transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
	margin: 0;
}

.studiolumile-postgrid-card:hover {
	background: var(--rpg-card-hover-bg);
	box-shadow: var(--rpg-shadow);
	transform: translateY(-2px);
}

.studiolumile-postgrid-card-link {
	/* flex:1 (et non une hauteur fixe) : absorbe tout l'espace restant dans la
	   carte flex ci-dessus, quelle que soit la longueur réelle de son propre
	   contenu (image/titre/extrait). Ce qui pousse tout ce qui suit ce lien
	   dans la carte (bouton "Découvrir", étiquettes "en dessous du bouton") à
	   se retrouver systématiquement juste après lui, au bord bas exact de la
	   carte — jamais avant, jamais avec un vide résiduel après. */
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

.studiolumile-postgrid-card-image {
	aspect-ratio: var(--rpg-image-ratio);
	overflow: hidden;
	border-radius: var(--rpg-image-radius) var(--rpg-image-radius) 0 0;
}

.studiolumile-postgrid-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, filter 0.4s ease;
}

/* Effet de survol de l'image (réglage "Effet au survol" de la section Image mise en avant). */
.studiolumile-postgrid-card:hover .studiolumile-postgrid-card-image.studiolumile-img-hover-zoom-in img,
.studiolumile-postgrid-card:hover .studiolumile-postgrid-card-image.studiolumile-img-hover-dim img,
.studiolumile-postgrid-card:hover .studiolumile-postgrid-card-image.studiolumile-img-hover-brighten img,
.studiolumile-postgrid-card:hover .studiolumile-postgrid-card-image.studiolumile-img-hover-grayscale img {
	transform: scale(1.05);
}

.studiolumile-postgrid-card:hover .studiolumile-postgrid-card-image.studiolumile-img-hover-zoom-out img {
	transform: scale(0.94);
}

.studiolumile-postgrid-card:hover .studiolumile-postgrid-card-image.studiolumile-img-hover-none img {
	transform: none;
}

.studiolumile-postgrid-card:hover .studiolumile-postgrid-card-image.studiolumile-img-hover-dim img {
	filter: brightness(0.75);
}

.studiolumile-postgrid-card:hover .studiolumile-postgrid-card-image.studiolumile-img-hover-brighten img {
	filter: brightness(1.15);
}

.studiolumile-postgrid-card-image.studiolumile-img-hover-grayscale img {
	filter: grayscale(1);
}

.studiolumile-postgrid-card:hover .studiolumile-postgrid-card-image.studiolumile-img-hover-grayscale img {
	filter: grayscale(0);
}

/* Aspect de l'image (réglage "Aspect" de la section Image mise en avant). */
.studiolumile-postgrid-card-image.studiolumile-img-style-frame {
	margin: 10px;
	border: var(--rpg-border-width) solid var(--rpg-border-color);
	border-radius: var(--rpg-image-radius);
}

.studiolumile-postgrid-card-image.studiolumile-img-style-frame {
	transition: border-color 0.25s ease, border-width 0.25s ease;
}

/* Trait de séparation entre l'image et le titre : élément dédié (et non une
   simple bordure posée sur l'image) afin de pouvoir régler librement la
   distance qui le sépare de l'image (réglage "Distance par rapport à l'image"). */
.studiolumile-postgrid-card-separator {
	height: var(--rpg-border-width);
	background-color: var(--rpg-border-color);
	margin: 0;
	transition: background-color 0.25s ease, height 0.25s ease, margin-top 0.25s ease;
}

.studiolumile-postgrid-card-body {
	padding: var(--rpg-card-padding);
}

.studiolumile-postgrid-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	color: var(--rpg-meta-color);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.studiolumile-postgrid-card-meta span {
	display: inline-flex;
	align-items: center;
	border-style: solid;
	border-width: 0;
	border-color: transparent;
	padding: var(--rpg-meta-padding);
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.studiolumile-postgrid-card-title {
	margin: 0 0 10px;
	color: var(--rpg-title-color);
	font-family: var(--rpg-title-font);
	font-size: var(--rpg-title-size);
	font-weight: var(--rpg-title-weight);
	line-height: 1.3;
	transition: color 0.25s ease;
}

.studiolumile-postgrid-card-excerpt {
	color: var(--rpg-text-color);
	font-family: var(--rpg-text-font);
	font-size: var(--rpg-text-size);
	line-height: 1.6;
	margin: 0 0 12px;
	transition: color 0.25s ease;
}

.studiolumile-postgrid-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.studiolumile-postgrid-card-tags-top {
	margin-bottom: 10px;
}

.studiolumile-postgrid-card-tags-above-image {
	padding: var(--rpg-card-padding) var(--rpg-card-padding) 0 var(--rpg-card-padding);
}

.studiolumile-postgrid-card-tags-below-cta {
	padding: 0 var(--rpg-card-padding) var(--rpg-card-padding);
	margin-top: -8px;
}

.studiolumile-postgrid-tag {
	background: var(--rpg-tag-bg);
	color: var(--rpg-tag-color);
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Bouton d'appel à action ("Découvrir") : placé hors du lien englobant la
   carte (voir Studiolumile_PostGrid_Render::render_card()) pour éviter un lien
   imbriqué dans un autre lien, invalide en HTML. */
.studiolumile-postgrid-card-cta {
	padding: 0 var(--rpg-card-padding) var(--rpg-card-padding);
}

/* font-size/font-weight/line-height : volontairement PAS fixés ici (contrairement
   aux versions précédentes) — c'est désormais le groupe de contrôles Typographie
   natif d'Elementor (voir "Bouton d'action" → onglet Style dans le widget) qui
   les pilote entièrement, avec les mêmes valeurs par défaut (14px / 600 / 1) que
   celles historiquement codées en dur ici. Les fixer aussi dans cette feuille de
   style créait une règle concurrente de spécificité CSS égale ou supérieure à
   celle générée par Elementor selon les cas, empêchant parfois tout changement
   de taille/police depuis ce panneau de s'appliquer réellement. */
.studiolumile-postgrid-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--rpg-link-color);
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.studiolumile-postgrid-cta-btn svg {
	display: block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.studiolumile-postgrid-cta-btn i {
	display: inline-block;
	width: 1em;
	text-align: center;
	line-height: 1;
	margin: 0 !important;
}

/* Pagination */
.studiolumile-postgrid-pagination-wrap {
	margin-top: 32px;
	display: flex;
	justify-content: center;
}

.studiolumile-postgrid-pagination {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.studiolumile-page-btn {
	min-width: 38px;
	height: 38px;
	border-radius: 6px;
	border: var(--rpg-border-width) solid var(--rpg-border-color);
	background: #fff;
	cursor: pointer;
	color: var(--rpg-text-color);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.studiolumile-page-btn.is-active {
	background: var(--rpg-link-color);
	border-color: var(--rpg-link-color);
	color: #fff;
}

.studiolumile-page-btn.studiolumile-page-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.studiolumile-page-btn.studiolumile-page-arrow svg {
	display: block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.studiolumile-postgrid-load-more {
	padding: 12px 32px;
	border-radius: 999px;
	border: var(--rpg-border-width) solid var(--rpg-link-color);
	background: transparent;
	color: var(--rpg-link-color);
	cursor: pointer;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease;
}

.studiolumile-postgrid-load-more:hover {
	background: var(--rpg-link-color);
	color: #fff;
}

/* ==========================================================================
   Widget "StudioLumile - PostGrid Cover" : carte image pleine + titre/bouton
   en superposition. Toutes les personnalisations avancées (couleurs,
   typographie, superposition, position du titre...) sont pilotées nativement
   par Elementor via des sélecteurs ciblant {{WRAPPER}} (voir la classe du
   widget dédié) ; les règles ci-dessous ne posent que des valeurs de base
   sensées, utilisées telles quelles en shortcode/hors Elementor.
   ========================================================================== */

.studiolumile-postgrid-cover-card {
	position: relative;
	border-radius: var(--rpg-cover-radius, 8px);
	overflow: hidden;
}

.studiolumile-postgrid-cover-link {
	display: block;
	position: relative;
	text-decoration: none;
	color: inherit;
}

.studiolumile-postgrid-cover-image {
	position: relative;
	width: 100%;
	aspect-ratio: var(--rpg-cover-ratio, 1 / 1);
	background: var(--rpg-cover-placeholder-bg, #e5e5e5);
	overflow: hidden;
}

.studiolumile-postgrid-cover-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, filter 0.4s ease;
}

.studiolumile-postgrid-cover-card:hover .studiolumile-postgrid-cover-image img {
	transform: scale(1.06);
}

/* Filtre "noir et blanc" : voir les réglages "Intensité (au repos)" /
   "Intensité (au survol)" de la section Carte (widget Galerie), qui
   appliquent directement filter: grayscale(...) via les sélecteurs natifs
   Elementor (image_grayscale_amount / image_grayscale_hover_amount dans
   class-studiolumile-postgrid-widget-cover.php) — aucune classe CSS requise ici. */

.studiolumile-postgrid-cover-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--rpg-cover-overlay-bg, linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0) 60%));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.studiolumile-postgrid-cover-card:hover .studiolumile-postgrid-cover-overlay,
.studiolumile-postgrid-cover-card:focus-within .studiolumile-postgrid-cover-overlay {
	opacity: 1;
}

.studiolumile-postgrid-cover-content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	transform: translateY(12px);
	transition: transform 0.3s ease;
}

.studiolumile-postgrid-cover-card:hover .studiolumile-postgrid-cover-content,
.studiolumile-postgrid-cover-card:focus-within .studiolumile-postgrid-cover-content {
	transform: translateY(0);
}

.studiolumile-postgrid-cover-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--rpg-cover-title-color, #ffffff);
}

.studiolumile-postgrid-cover-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	background: var(--rpg-cover-cta-bg, #ffffff);
	color: var(--rpg-cover-cta-color, #1a1a1a);
}

.studiolumile-postgrid-cover-cta.studiolumile-cta-icon-left {
	flex-direction: row;
}

.studiolumile-postgrid-cover-cta.studiolumile-cta-icon-right {
	flex-direction: row;
}

.studiolumile-postgrid-cover-cta svg {
	display: block;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.studiolumile-postgrid-cover-cta i {
	display: inline-block;
	width: 1em;
	text-align: center;
	line-height: 1;
}

.studiolumile-postgrid.is-loading .studiolumile-postgrid-results {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* ------------------------------------------------------------------ */
/* Accessibilité (RGAA)                                                */
/* ------------------------------------------------------------------ */

/* Classe utilitaire "visuellement masqué" : le contenu reste disponible aux
   technologies d'assistance (lecteurs d'écran) mais n'occupe aucune place à
   l'écran et n'est jamais visible. Utilisée par la zone de statut aria-live
   (voir render_search_form()/render()) qui annonce le nombre de résultats
   après chaque recherche/filtre/pagination en Ajax. */
.studiolumile-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Indicateur de focus visible (clavier) sur tous les éléments interactifs de
   la grille : recherche, croix, filtres, pagination, cartes, CTA. Le plugin
   retire volontairement l'outline par défaut du navigateur sur certains
   éléments (voir plus haut, pour éviter un contour disgracieux au clic
   souris) ; :focus-visible le restitue uniquement pour la navigation clavier
   (RGAA 10.7 : dans tous les cas, un lien ou une commande doit disposer d'un
   contour ou d'un effet visuel de focus perceptible). La couleur reprend
   l'accent de la galerie (--rpg-link-color) pour rester cohérente avec le
   style choisi, avec un repli neutre si la variable n'est pas définie. */
.studiolumile-postgrid-search-input:focus-visible,
.studiolumile-postgrid-search-btn:focus-visible,
.studiolumile-postgrid-search-clear:focus-visible,
.studiolumile-filter-btn:focus-visible,
.studiolumile-page-btn:focus-visible,
.studiolumile-postgrid-load-more:focus-visible,
.studiolumile-postgrid-card-link:focus-visible,
.studiolumile-postgrid-cta-btn:focus-visible,
.studiolumile-postgrid-cover-link:focus-visible {
	outline: 2px solid var(--rpg-link-color, #1a73e8);
	outline-offset: 2px;
}

/* La carte "image pleine" (widget Cover) affiche titre/CTA seulement au survol
   par défaut : :focus-within garantit qu'ils apparaissent aussi dès qu'un
   utilisateur au clavier atteint le lien par tabulation (déjà géré plus haut),
   on s'assure ici que le contour de focus reste visible par-dessus l'image. */
.studiolumile-postgrid-cover-link:focus-visible {
	outline-offset: -2px;
}

/* Respecte la préférence système "réduire les animations" (RGAA 13.3) :
   supprime les transitions/animations décoratives (zoom image, glissement du
   bandeau de la carte Cover, etc.) pour les personnes sensibles au mouvement,
   sans retirer aucune fonctionnalité. */
@media (prefers-reduced-motion: reduce) {
	.studiolumile-postgrid *,
	.studiolumile-postgrid *::before,
	.studiolumile-postgrid *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}