/* Icone Textile — Filtres catalogue */
.itf {
	--itf-text: #1d1d1d;
	--itf-muted: #7a7a7a;
	--itf-line: #e4e4e4;
	--itf-accent: #1d1d1d;
	--itf-chip-bg: #fff;
	font-size: 14px;
	line-height: 1.35;
	color: var(--itf-text);
}
.itf a { text-decoration: none; color: inherit; box-shadow: none; }
.itf ul { list-style: none; margin: 0; padding: 0; }
.itf .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* Neutralise les styles de boutons du thème / kit Elementor */
.itf button.itf-group__toggle,
.itf button.itf-mobile-toggle {
	-webkit-appearance: none; appearance: none; box-sizing: border-box; cursor: pointer;
	background: transparent !important; color: var(--itf-text) !important;
	border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
	text-transform: none !important; letter-spacing: normal !important;
	font-family: inherit !important; font-size: 14px !important; line-height: 1.3 !important;
	margin: 0 !important; min-height: 0 !important; text-decoration: none !important;
}
.itf button.itf-group__toggle:hover, .itf button.itf-group__toggle:focus,
.itf button.itf-mobile-toggle:hover, .itf button.itf-mobile-toggle:focus { background: transparent !important; color: var(--itf-text) !important; }

/* Bouton mobile */
.itf button.itf-mobile-toggle { display: none; }

/* Filtres actifs */
.itf-active { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 14px; margin-bottom: 4px; border-bottom: 1px solid var(--itf-line); }
.itf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--itf-accent); color: #fff !important; font-size: 12px; font-weight: 600; }
.itf-pill span[aria-hidden] { font-size: 15px; line-height: 1; opacity: .8; }
.itf-reset { align-self: center; font-size: 12px; text-decoration: underline !important; color: var(--itf-muted) !important; margin-left: 4px; }

/* Groupes */
.itf-group { border-bottom: 1px solid var(--itf-line); }
.itf button.itf-group__toggle {
	width: 100%; display: flex; align-items: center; gap: 6px;
	padding: 14px 0 !important; font-weight: 700 !important; text-align: left;
}
.itf-group__toggle:focus-visible { outline: 2px solid var(--itf-accent); outline-offset: 2px; }
.itf-group__ico { margin-left: auto; width: 10px; height: 10px; position: relative; }
.itf-group__ico::before, .itf-group__ico::after { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 2px; background: currentColor; transition: transform .2s; }
.itf-group__ico::after { transform: rotate(90deg); }
.itf-group.is-open .itf-group__ico::after { transform: rotate(0); }
.itf-group__body { padding: 0 0 16px; }
.itf-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--itf-accent); color: #fff; font-size: 11px; font-weight: 700; }

/* Pastilles couleur */
.itf-list--swatch { display: grid; grid-template-columns: repeat(auto-fill, 28px); gap: 8px; }
.itf-swatch {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--itf-c, #ccc); border: 1px solid rgba(0,0,0,.15);
	transition: transform .15s;
}
.itf-swatch:hover { transform: scale(1.1); }
.itf-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--itf-accent) !important; }
.itf-swatch.is-active::after {
	content: ""; width: 7px; height: 12px; margin-top: -3px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
	filter: drop-shadow(0 0 1px rgba(0,0,0,.6));
}
.itf-swatch--blanc.is-active::after, .itf-swatch--beige.is-active::after, .itf-swatch--jaune.is-active::after,
.itf-swatch--fluo.is-active::after, .itf-swatch--metal.is-active::after { border-color: #1d1d1d; filter: none; }
.itf-swatch--fluo span { font-size: 9px; font-weight: 700; color: #1d1d1d; }
.itf-swatch--fluo.is-active span { display: none; }

/* Tailles */
.itf-list--chip { display: flex; flex-wrap: wrap; gap: 6px; }
.itf-chip {
	display: inline-flex; align-items: center; justify-content: center; min-width: 38px;
	padding: 4px 10px; border: 1px solid #cfcfcf; border-radius: 999px; background: var(--itf-chip-bg);
	font-size: 12px; transition: border-color .15s, background .15s;
}
.itf-chip:hover { border-color: var(--itf-accent); }
.itf-chip.is-active { background: var(--itf-accent); border-color: var(--itf-accent); color: #fff !important; }

/* Cases à cocher */
.itf-list--check li + li { margin-top: 6px; }
.itf-check { display: flex; align-items: center; gap: 8px; }
.itf-check__box { flex: 0 0 auto; width: 15px; height: 15px; border: 1px solid #9a9a9a; border-radius: 3px; background: #fff; position: relative; }
.itf-check:hover .itf-check__box { border-color: var(--itf-accent); }
.itf-check.is-active .itf-check__box { background: var(--itf-accent); border-color: var(--itf-accent); }
.itf-check.is-active .itf-check__box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.itf-count { color: var(--itf-muted); font-size: 12px; }

/* Chargement */
.itf-loading [aria-busy="true"] { opacity: .45; pointer-events: none; transition: opacity .15s; }
.itf-loading .itf { pointer-events: none; }

/* Mobile */
@media (max-width: 767px) {
	.itf button.itf-mobile-toggle {
		display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
		padding: 11px 16px !important; border: 1px solid var(--itf-text) !important; border-radius: 999px !important; font-weight: 700 !important;
	}
	.itf-mobile-toggle__ico { width: 16px; height: 2px; background: currentColor; position: relative; }
	.itf-mobile-toggle__ico::before, .itf-mobile-toggle__ico::after { content: ""; position: absolute; left: 3px; width: 10px; height: 2px; background: currentColor; }
	.itf-mobile-toggle__ico::before { top: -5px; } .itf-mobile-toggle__ico::after { top: 5px; left: 5px; width: 6px; }
	.itf-panel { display: none; padding-top: 10px; }
	.itf.is-mobile-open .itf-panel { display: block; }
}