/* GALERIE CERCLEKIT — MULTIPLE (5.0, Kévin 06/10).
 *
 * La barre de filtres est CELLE de la « Barre de filtres (CercleKit) » :
 * ses classes (`.ck-bf`, `.ck-bf__cat` pour les cartes, `.cd-fopt` pour les
 * cases) et sa feuille (ck-barre-filtres.css, chargée avant celle-ci). Ici :
 * la place de la barre autour de la grille, et les couleurs par défaut.
 *
 * ⚠️ RIEN NE VIENT DU THÈME : police, couleurs et rayon sont ceux du design
 * system CercleKit — les noms de la palette sont les mêmes sur tous les sites
 * (tab-palette.php, « noms canoniques »). Le panneau Elementor les remplace
 * (sa règle, `{{WRAPPER}} …`, est plus précise).
 *
 * Imprimée avec le bloc (Cercle_Admin_UI_PGallery_Widget::imprimer_multiple) :
 * une page sans galerie multiple ne la charge pas.
 */

.ck-galm {
	--ck-galm-w: 15rem;
	/* Les espacements du design system (Création › Espacements) ; tant qu'un
	   jeton n'est pas réglé, son repli est la valeur d'avant. */
	--ck-galm-ecart: var(--ck-space-2xl, 2rem);
	--ck-galm-gap: var(--ck-space-sm, .5rem);
	display: grid;
	gap: var(--ck-galm-ecart);
	font-family: var(--ck-font-primary, inherit);
}
.ck-galm--gauche { grid-template-columns: var(--ck-galm-w) minmax(0, 1fr); }
.ck-galm--droite { grid-template-columns: minmax(0, 1fr) var(--ck-galm-w); }
.ck-galm--droite > .ck-bf { order: 2; }
.ck-galm > .ck-bf { align-self: start; color: var(--neutres-900, #1a1a1a); --ck-bf-sep: var(--neutres-300, #e6e5e5); }
.ck-galm .ck-bf .cd-block__body { margin-top: 0; }
/* Le titre au-dessus de la carte (à gauche / à droite) : l'allure du titre
   de la Barre de filtres, à la police et à la couleur du design system. */
.ck-galm .ck-galm__titre {
	margin: 0 0 var(--ck-space-md, .75rem);
	font-family: var(--ck-font-primary, inherit);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--neutres-900, #1a1a1a);
}
.ck-galm .ck-galm__images { min-width: 0; }

/* ── LES CARTES ── sans cadre autour : les cartes suffisent. */
.ck-galm--cartes .ck-bf__inner { background: none; border: 0; border-radius: 0; }
.ck-galm--cartes .ck-bf .cd-block { padding: 0; }
.ck-galm .ck-bf__cats { gap: var(--ck-galm-gap); }
.ck-galm--haut .ck-bf__cats { flex-direction: row; flex-wrap: wrap; }
.ck-galm .ck-bf__cat {
	margin: 0;
	padding: var(--ck-space-sm, .5rem) var(--ck-space-lg, 1rem);
	font: inherit;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	color: var(--neutres-700, #3c3939);
	background: var(--neutres-100, #f3f2f2);
	border: .0625rem solid var(--neutres-100, #f3f2f2);
	border-radius: var(--ck-radius-sm, .25rem);
	box-shadow: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* ⚠️ LE THÈME PEINT LES BOUTONS AU SURVOL (fond rose de Hello Elementor :
   `[type="button"]:hover`) : le parent dans la règle passe devant lui. */
.ck-galm .ck-bf .ck-bf__cat:hover,
.ck-galm .ck-bf .ck-bf__cat:focus {
	color: var(--neutres-900, #1a1a1a);
	background: var(--neutres-300, #e6e5e5);
	border-color: var(--neutres-300, #e6e5e5);
	text-decoration: none;
}
.ck-galm .ck-bf .ck-bf__cat.is-ici {
	color: var(--neutres-0, #fff);
	background: var(--primaire-accent, #1a1a1a);
	border-color: var(--primaire-accent, #1a1a1a);
	font-weight: inherit;
}
.ck-galm .ck-bf__cat:focus-visible { outline: .125rem solid currentColor; outline-offset: .125rem; }

/* ── LES CASES ── */
.ck-galm--cases .ck-bf__inner { background: var(--neutres-0, #fff); }
.ck-galm .cd-filterlist { max-height: none; gap: max(0rem, calc(var(--ck-galm-gap) - .625rem)); }
.ck-galm--haut .cd-filterlist { flex-direction: row; flex-wrap: wrap; column-gap: var(--ck-space-xl, 1.5rem); }
.ck-galm .cd-fopt__box { color: var(--primaire-accent, currentColor); background: transparent; }
.ck-galm .cd-fopt__txt { color: var(--ck-galm-texte, inherit); }

/* ── LES PHOTOS FILTRÉES ── */
.ck-galm .ck-pg__item[hidden] { display: none; }

/* ── TÉLÉPHONE : la barre passe au-dessus, ses choix en ligne ── */
@media (max-width: 767px) {
	.ck-galm--gauche,
	.ck-galm--droite { grid-template-columns: minmax(0, 1fr); }
	.ck-galm--droite > .ck-bf { order: 0; }
	.ck-galm .ck-bf__cats,
	.ck-galm .cd-filterlist { flex-direction: row; flex-wrap: wrap; }
}