/* BARRE DE FILTRES (CercleKit) — le front.
 *
 * ⚠️ CE FICHIER HABILLE LE SITE DU CLIENT : aucun jeton `--ckui-*` (ils portent
 * la charte de NOTRE interface). Les valeurs sont des replis neutres que les
 * contrôles Elementor du widget remplacent, et les CHAMPS prennent le style des
 * formulaires CercleKit (`.ck-f-input`, réglé dans Création › Forms).
 *
 * ⚠️ LES CLASSES `cd-*` SONT CELLES DU FILTRE BOUTIQUE — c'est la barre que
 * Kévin a validée (wave-event.fr tourne avec). Tout est cantonné sous `.ck-bf` :
 * l'addon WooCommerce peut servir sa propre feuille sur la même page.
 */

.ck-bf {
	/* ⚠️ LES RÉGLAGES DU PANNEAU ARRIVENT ICI. Une barre a des écarts partagés
	   (sections, lignes, indentation) : un seul réglage doit les tenir tous,
	   d'où des variables plutôt que des valeurs recopiées partout. */
	--ck-bf-pad-y: 16px;
	--ck-bf-pad-x: 18px;
	--ck-bf-sep: #e5e5e2;
	--ck-bf-sep-ep: 1px;
	--ck-bf-titre-ecart: 14px;
	--ck-bf-case: 17px;
	--ck-bf-case-gap: 9px;
	--ck-bf-ligne: 5px;
	--ck-bf-indent: 18px;
	/* ⚠️ LARGEUR PLEINE PAR DÉFAUT, et c'est un défaut corrigé le 2026-09-23 :
	   sans elle, la barre prenait la largeur de son contenu et flottait dans
	   sa colonne. Kévin : « la barre a même pas une largeur 100% ». */
	width: 100%;
	box-sizing: border-box;
	font-size: 15px;
}
.ck-bf *, .ck-bf *::before, .ck-bf *::after { box-sizing: border-box; }
/* ⚠️ L'ENVELOPPE AUSSI. Un widget rétréci par son conteneur (align-self,
   `width: auto` d'un thème) emmènerait la barre avec lui, quoi qu'on mette
   sur `.ck-bf`. Mesuré chez Kévin : barre à 310 px dans une colonne large. */
.elementor-widget-ck_barre_filtres,
.elementor-widget-ck_barre_filtres > .elementor-widget-container { width: 100%; }
.ck-bf[hidden] { display: none !important; }

/* ⚠️ LE POINT DE DÉPART DE TOUT CE WIDGET : une barre collante plus haute que
   l'écran rend ses dernières catégories inatteignables. Elle défile donc DANS
   elle-même. `max-height` est posée par le réglage « Distance du haut » ; ce
   repli sert quand la barre n'est pas collante. */
.ck-bf__inner {
	display: flex;
	flex-direction: column;
	/* ⚠️ AUCUNE HAUTEUR IMPOSÉE PAR DÉFAUT. Le plafond (et le défilement
	   interne) arrive avec le réglage « Barre qui suit le défilement » : une
	   barre en flux n'a aucune raison d'être coupée. */
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid var(--ck-bf-sep);
	border-radius: 10px;
	width: 100%;
}
.ck-bf__inner > * { flex: 0 0 auto; }

/* ── LES SECTIONS ───────────────────────────────────────────────────────── */
.ck-bf .cd-block { padding: var(--ck-bf-pad-y) var(--ck-bf-pad-x); }
.ck-bf .cd-block + .cd-block { border-top: var(--ck-bf-sep-ep) solid var(--ck-bf-sep); }
.ck-bf .cd-block__title {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.ck-bf .cd-block__nom { flex: 1 1 auto; min-width: 0; }
.ck-bf .cd-block__n {
	flex: 0 0 auto;
	min-width: 20px;
	padding: 1px 7px;
	border-radius: 999px;
	background: currentColor;
	font-size: 11px;
	line-height: 17px;
	text-align: center;
}
/* La pastille prend la couleur du titre en fond : son chiffre s'écrit donc en
   blanc par-dessus, sans hériter du même ton. */
.ck-bf .cd-block__n > b { color: #fff; font-weight: 700; }
.ck-bf .cd-block__n:empty { display: none; }
.ck-bf--sans-n .cd-fopt__n { display: none; }
.ck-bf .cd-block__title::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .25s ease;
}
.ck-bf .cd-block.cd-collapsed .cd-block__title::after { transform: rotate(-45deg); }
.ck-bf .cd-block__title:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ck-bf .cd-block__body { margin-top: var(--ck-bf-titre-ecart); }
.ck-bf .cd-block.cd-collapsed .cd-block__body { display: none; }
/* Cartes fixes : pas de chevron, pas de main au survol — rien ne se replie. */
.ck-bf--fixe .cd-block__title { cursor: default; }
.ck-bf--fixe .cd-block__title::after { content: none; }

/* ── LES CHAMPS ─────────────────────────────────────────────────────────── */
/* Aucun habillage ici : ils portent `.ck-f-input`, donc les réglages de
   Création › Forms. Redéclarer bordure ou fond les écraserait. */
.ck-bf__champ { position: relative; }
.ck-bf__champ .ck-bf__s { width: 100%; padding-right: 38px; }
.ck-bf__champ .ck-bf__sel { width: 100%; }
/* Les deux menus de date, l'année puis le mois. */
.ck-bf__date { display: flex; flex-direction: column; gap: 8px; }
/* Côte à côte (réglage « Disposition des deux menus ») : les deux menus se
   partagent la ligne à parts égales. Sans `min-width: 0`, un `select` refuse
   de rétrécir sous la largeur de sa plus longue option. */
.ck-bf__date > .ck-bf__sel { min-width: 0; }
.ck-bf__date .ck-bf__sel[disabled] { opacity: .5; cursor: not-allowed; }

/* La croix du navigateur s'en va : grise, d'une taille imposée, différente sur
   chaque machine. La nôtre prend la couleur du texte. */
.ck-bf__s::-webkit-search-decoration,
.ck-bf__s::-webkit-search-cancel-button,
.ck-bf__s::-webkit-search-results-button { -webkit-appearance: none; appearance: none; display: none; }
.ck-bf__x {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	opacity: .5;
	font: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
/* Aucun effet au survol : neutralise aussi le survol des boutons du thème (fond
   rose de Hello Elementor). Son `[type="button"]:hover` pèse autant que
   `.ck-bf__x:hover` : sans le parent, c'est l'ordre des feuilles qui tranche. */
.ck-bf__champ .ck-bf__x:hover,
.ck-bf__champ .ck-bf__x:focus,
.ck-bf__champ .ck-bf__x:focus-visible {
	background: none;
	color: inherit;
	opacity: .5;
}
.ck-bf__x[hidden] { display: none; }

/* ── LES CASES ──────────────────────────────────────────────────────────── */
.ck-bf .cd-filtergroup + .cd-filtergroup { margin-top: 14px; }
.ck-bf .cd-filtergroup__nom { margin: 0 0 6px; font-size: 13px; font-weight: 600; opacity: .6; }
.ck-bf .cd-filterlist {
	display: flex;
	flex-direction: column;
	max-height: 340px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ck-bf .cd-fopt {
	display: flex;
	align-items: center;
	gap: var(--ck-bf-case-gap);
	margin: 0;
	padding: var(--ck-bf-ligne) 2px var(--ck-bf-ligne) calc(2px + var(--cd-d, 0) * var(--ck-bf-indent));
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
	position: relative;
}
.ck-bf .cd-fopt--parent { font-weight: 600; }
.ck-bf .cd-fopt[hidden], .ck-bf .cd-filtergroup[hidden], .ck-bf .cd-block[hidden] { display: none !important; }
/* ⚠️ PAS `display:none` : la case sortirait de l'ordre de tabulation. */
.ck-bf .cd-fopt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ck-bf .cd-fopt__box {
	flex: 0 0 auto;
	width: var(--ck-bf-case);
	height: var(--ck-bf-case);
	border: 1px solid currentColor;
	border-radius: 4px;
	background: #fff;
	position: relative;
	transition: background .15s ease, border-color .15s ease;
}
.ck-bf .cd-fopt__box::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 45%;
	width: 28%;
	height: 55%;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg) scale(0);
	transition: transform .15s ease;
}
/* ⚠️ LE CONTOUR RESTE VISIBLE UNE FOIS COCHÉ : le fond s'assombrit, la bordure
   garde sa couleur. Avant, les deux étaient `currentColor` — le contour
   disparaissait dans le fond, et Kévin n'avait plus de case dessinée. */
.ck-bf .cd-fopt input:checked ~ .cd-fopt__box {
	background: color-mix(in srgb, currentColor 85%, transparent);
	border-color: currentColor;
}
.ck-bf .cd-fopt input:checked ~ .cd-fopt__box::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.ck-bf .cd-fopt input:checked ~ .cd-fopt__txt { font-weight: 600; }
.ck-bf .cd-fopt input:focus-visible ~ .cd-fopt__box { outline: 2px solid currentColor; outline-offset: 2px; }
.ck-bf .cd-fopt__txt { flex: 1 1 auto; min-width: 0; }
.ck-bf .cd-fopt__n { flex: 0 0 auto; font-size: 12px; opacity: .55; font-variant-numeric: tabular-nums; }

/* ── LES CATÉGORIES (navigation) ────────────────────────────────────────── */
.ck-bf__cats { display: flex; flex-direction: column; }
.ck-bf__cat {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 2px;
	color: inherit;
	text-decoration: none;
}
.ck-bf__cat > span { margin-left: auto; }
.ck-bf__cat--retour { font-weight: 600; opacity: .8; }
.ck-bf__cat.is-ici { font-weight: 700; }
.ck-bf__cat:hover { text-decoration: underline; }
.ck-bf__cat.is-ici { border-radius: 6px; }

/* ── LA LISTE PENDANT LE CHARGEMENT ─────────────────────────────────────── */
/* Posé sur la LISTE, hors du widget : c'est elle qui attend. */
.ck-bf-charge { opacity: .45; transition: opacity .2s ease; pointer-events: none; }
.ck-bf-vide { padding: 48px 20px; text-align: center; opacity: .6; }

/* L'aide de l'éditeur — jamais servie à un visiteur. */
.ck-bf-aide {
	margin: 0 0 12px;
	padding: 14px 16px;
	border: 1px dashed currentColor;
	border-radius: 6px;
	opacity: .7;
	font-size: 13px;
}

/* ── MOBILE : la barre devient un tiroir ────────────────────────────────── */
.ck-bf__mbtn { display: none; }
@media (max-width: 767px) {
	/* ⚠️ LE THÈME PEINT LES `button`, SOUVENT EN `!important`. Notre repli
	   passe donc en classe doublée `.ck-bf .ck-bf__mbtn` (0,2,0) : il tient
	   devant un thème ordinaire, et les réglages du panneau — qui sortent en
	   `!important` avec trois classes devant — passent devant lui. */
	.ck-bf .ck-bf__mbtn {
		display: block;
		width: 100%;
		padding: 12px 8px;
		border: 1px solid #e5e5e2;
		border-radius: 8px;
		background: none;
		color: inherit;
		font: inherit;
		font-weight: 600;
		line-height: 1.3;
		cursor: pointer;
	}
	.ck-bf .ck-bf__inner { display: none; }
	.ck-bf.is-ouverte .ck-bf__inner { display: flex; margin-top: 12px; max-height: none; }
	/* Réglage « Replier dans un bouton sur mobile » éteint : pas de bouton
	   (il n'est pas rendu), la barre reste là. */
	.ck-bf.ck-bf--sans-tiroir .ck-bf__inner { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.ck-bf *, .ck-bf *::before, .ck-bf *::after { transition: none !important; }
}