/**
 * WooCommerce Waouh Filtres
 *
 * Panneau de filtres à facettes. Ces règles ne présument rien de ce qui est
 * filtré : elles habillent le panneau, ses options, ses curseurs et son tiroir
 * mobile. La liste filtrée, elle, est stylée par son propre plugin.
 *
 * Les variables sont déclarées ici parce que le panneau doit pouvoir vivre
 * seul, sans rien attendre d'un conteneur extérieur.
 */

/* Le panneau doit pouvoir vivre seul : il porte donc ses propres variables,
   sans rien attendre d'un conteneur extérieur. Elles sont aussi déclarées par
   le plugin de tables pour son propre périmètre — même origine, celle de
   Flatsome, donc aucune divergence possible. */
.waouh-filters {
	/* Couleurs héritées de Flatsome : si la charte du thème change dans le
	   personnalisateur, la table suit. Les valeurs de repli sont celles de
	   Flatsome par défaut, déjà utilisées par le thème enfant. */
	--waouh-accent: var(--fs-color-primary, #446084);
	--waouh-success: var(--fs-color-success, #4b8544);
	--waouh-alert: var(--fs-color-alert, #b20000);
	--waouh-gold: #b8860b;
	/* Étiquettes de la table et des filtres. Le vert est celui du thème, déjà
	   employé par sa charte ; l'orange est la seule teinte ajoutée, et le blanc
	   y reste lisible à neuf pixels — ce qui écarte les oranges plus pâles.

	   La promotion ressort plus que la nouveauté, et c'est voulu : une remise se
	   remarque, une nouveauté s'apprend. */
	--waouh-nouveaute: var(--fs-color-success, #4b8544);
	--waouh-promotion: #cc6600;
	--waouh-warn: #e8a33d;

	--waouh-border: #e4e7ec;
	--waouh-bg-alt: #f7f9fb;
	--waouh-text: var(--fs-color-base, #2b2b2b);
	--waouh-muted: #7a8595;
	--waouh-radius: 0;
	--waouh-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--waouh-fade: 0.22s;
	--waouh-shadow-sm: 0 1px 3px rgba(20, 35, 60, 0.08);
	--waouh-shadow-md: 0 6px 18px rgba(20, 35, 60, 0.13);
	--waouh-ring: 2px;   /* épaisseur de bordure, commune à tous les filtres */
	--waouh-focus: 2px;  /* anneau de focus clavier, volontairement plus épais */
	--waouh-badge: 16px;
	--waouh-icon: 16px;   /* côté des icônes tracées, carrées et invariables */
	--waouh-control: 22px; /* hauteur commune du titre, de la valeur et du bouton */
	--waouh-pad: 14px;     /* retrait intérieur du panneau de filtres */
	--waouh-gap: 10px;     /* respiration verticale entre deux critères */
	--waouh-brand-size: 32px;
	--waouh-image-size: 32px;
}

/* -------------------------------------------------------------------------
   Filtres
   ------------------------------------------------------------------------- */

.waouh-filters__toggle {
	display: none;
	width: 100%;
	padding: 12px 16px;
	border: var(--waouh-ring) solid var(--waouh-border);
	border-radius: var(--waouh-radius);
	background: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.18s var(--waouh-ease), box-shadow 0.18s var(--waouh-ease);
}

.waouh-filters__toggle:hover {
	border-color: var(--waouh-accent);
	box-shadow: var(--waouh-shadow-sm);
}

.waouh-filters__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	margin-left: 8px;
	padding: 0 6px;
	background: var(--waouh-accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.waouh-filters__done {
	display: none;
}

/* Retour à zéro, au pied des critères. Posé au-dessus des résultats, il se
   lisait comme un entête de tableau ; ici il ferme la liste de ce qu'on vient
   de cocher, là où l'on revient pour tout reprendre. */
.waouh-reset {
	margin-top: var(--waouh-gap);
	padding: 8px 12px;
	border: var(--waouh-ring) solid var(--waouh-border);
	border-radius: var(--waouh-radius);
	/* Un fond, si léger soit-il, sépare le bouton du panneau : posé en blanc
	   sur blanc, il n'était qu'un cadre et se lisait comme un champ de plus.
	   La teinte est prise sur l'accent plutôt qu'en gris neutre — c'est une
	   commande, et elle annonce la couleur qu'elle prendra au survol. */
	background: color-mix(in srgb, var(--waouh-accent) 7%, #fff);
	font-size: 13px;
	line-height: 1.3;
	color: var(--waouh-text);
	cursor: pointer;
}

.waouh-reset:hover {
	border-color: var(--waouh-accent);
	background: color-mix(in srgb, var(--waouh-accent) 14%, #fff);
	color: var(--waouh-accent);
}

.waouh-reset .waouh-icon {
	margin-right: 6px;
}
/* Icônes tracées par le plugin, sans police d'icônes : elles suivent la
   couleur du texte, mais gardent une taille à elles.

   Carrées et toutes identiques : dimensionnées en « em », elles suivaient la
   taille de police de leur voisin — treize pixels dans un bouton, quinze dans
   un autre — et deux dessins censés se répondre ne se ressemblaient plus. */
.waouh-icon {
	width: var(--waouh-icon);
	height: var(--waouh-icon);
	flex: 0 0 auto;
	vertical-align: -0.2em;
}


.waouh-filters__body {
	position: sticky;
	/* Le script relève ce qui occupe le haut de la fenêtre — entête accroché,
	   barre d'administration — et le dépose ici. Sans lui, la valeur de repli
	   suppose qu'il n'y a rien, ce qui reste vrai sur une page nue. */
	top: calc(var(--waouh-top, 0px) + 24px);
	display: flex;
	flex-direction: column;
	padding: 4px var(--waouh-pad) var(--waouh-pad);
	border: var(--waouh-ring) solid var(--waouh-border);
	border-radius: var(--waouh-radius);
	background: #fff;
	box-shadow: var(--waouh-shadow-sm);
	overflow-anchor: none;
}

/* Chaque critère est séparé par un filet, plus lisible qu'un simple écart */
.waouh-filter {
	position: relative;
	padding: var(--waouh-gap) 0;
	border-bottom: 1px solid var(--waouh-border);
	/* Neutralise l'ancrage de défilement : masquer des valeurs change la
	   hauteur du panneau, et le navigateur en profiterait pour décaler la page. */
	overflow-anchor: none;
}

/* Critère en cours de manipulation. La réorganisation étant différée, ce
   repère dit quel filtre vient d'être touché quand le panneau bouge une
   demi-seconde plus tard. */
.waouh-filter::before {
	content: '';
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: calc(var(--waouh-pad) * -1);
	width: 2px;
	background: var(--waouh-accent);
	opacity: 0;
	transition: opacity 0.2s var(--waouh-ease);
}

.waouh-filter.is-current::before {
	opacity: 1;
}

.waouh-filter.is-current .waouh-filter__label {
	color: var(--waouh-accent);
}

/* Le filet sépare deux critères ; sous le dernier, il ne sépare plus rien.
   « last-child » n'y suffisait pas : le bouton de remise à zéro et celui du
   tiroir mobile ferment la liste, si bien que le dernier critère n'était jamais
   le dernier enfant. « last-of-type » vise le dernier bloc, quels que soient
   les boutons qui le suivent. */
.waouh-filter:last-child,
.waouh-filter:last-of-type {
	padding-bottom: 0;
	border-bottom: none;
}

.waouh-filter__label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--waouh-muted);
}

/* Recherche ------------------------------------------------------------ */

.waouh-filter--search {
	position: relative;
	padding-top: 4px;
}

/* Le champ est bas : sa hauteur vient du seul retrait, la ligne de texte ne
   dépassant pas quelques pixels de plus. C'est là qu'il fallait couper, plutôt
   que dans le titre — un critère sans titre se lit moins bien que les autres,
   même quand le filigrane le redit. */
.waouh-search {
	width: 100%;
	/* Deux pixels de retrait et un interligne au plus juste : la ligne de texte
	   fait le reste, et le champ tombe à vingt-six pixels. En dessous, le texte
	   saisi toucherait le filet. */
	padding: 2px 9px;
	line-height: 1.4;
	border: var(--waouh-ring) solid var(--waouh-border);
	border-radius: 0;
	background: var(--waouh-bg-alt);
	font-size: 13px;
	transition: border-color 0.18s var(--waouh-ease), box-shadow 0.18s var(--waouh-ease),
		background-color 0.18s var(--waouh-ease);
}

/* Flatsome habille tous les champs par « input[type="search"] », qui l'emporte
   sur une simple classe : sa hauteur fixe et son retrait revenaient donc
   par-dessus les nôtres, et le champ restait haut quoi qu'on écrive plus haut.
   On remonte la spécificité juste ce qu'il faut, et l'on annule cette hauteur
   plutôt que d'essayer de la suivre — c'est le contenu qui doit la donner. */
.waouh-filters input.waouh-search {
	height: auto;
	min-height: 0;
	padding: 3px 9px;
	font-size: 13px;
	line-height: 1.4;
	box-shadow: none;
}

.waouh-search:hover {
	border-color: color-mix(in srgb, var(--waouh-accent) 40%, var(--waouh-border));
}

.waouh-search:focus {
	border-color: var(--waouh-accent);
	background: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--waouh-accent) 15%, transparent);
	outline: none;
}

/* Pastilles textuelles -------------------------------------------------- */

/* Le défilement impose un rognage : sans marge intérieure, le soulèvement au
   survol et la pastille de coche seraient coupés en haut de liste. On réserve
   la place puis on la reprend en marge négative, l'alignement reste identique. */
.waouh-choices {
	/* Grille plutôt que flux : toutes les pastilles d'un même filtre ont la
	   même largeur et l'ensemble occupe toute la place disponible. Le nombre
	   de colonnes s'adapte à la largeur du panneau. */
	display: grid;
	/* auto-fill et non auto-fit : les colonnes vides sont conservées, donc
	   trois pastilles sur une ligne de quatre gardent leur largeur au lieu de
	   s'étirer pour combler le vide. */
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 8px;
	/* Réglable : le panneau porte « --waouh-list-max » quand une limite est
	   demandée, sinon la liste s'étend autant qu'il le faut. */
	max-height: var(--waouh-list-max, none);
	margin: -10px;
	padding: 10px;
	overflow-y: auto;
	overflow-anchor: none;
}

.waouh-choice {
	position: relative; /* ancre la case masquée en absolu */
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 28px;
	margin: 0;
	padding: 5px 7px;
	text-align: center;
	border: var(--waouh-ring) solid var(--waouh-border);
	border-radius: 0;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--waouh-text);
	cursor: pointer;
	transition: border-color 0.18s var(--waouh-ease), background-color 0.18s var(--waouh-ease),
		color 0.18s var(--waouh-ease), box-shadow 0.18s var(--waouh-ease), transform 0.18s var(--waouh-ease),
		opacity var(--waouh-fade) var(--waouh-ease), display var(--waouh-fade) var(--waouh-ease);
	transition-behavior: allow-discrete;
}

/* Survol commun à toutes les pastilles, logos compris : elles se soulèvent de
   trois pixels sur une ombre portée, le filet passant à l'accent adouci.

   Aucune teinte de fond ici, alors que le survol en posait une : le fond teinté
   dit « retenu », et rien d'autre. L'employer aussi au survol faisait hésiter
   sur l'état d'une pastille au moment précis où l'on s'apprête à la changer. */
.waouh-choice:hover {
	z-index: 1;
	border-color: color-mix(in srgb, var(--waouh-accent) 45%, transparent);
	transform: translateY(-3px);
	box-shadow: var(--waouh-shadow-md);
}

.waouh-choice:active {
	transform: translateY(-1px);
}

.waouh-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Sélection : même logique que les vignettes de marque — un filet d'accent et
   un fond à peine teinté, jamais d'aplat plein. Le libellé passe en bleu. */
.waouh-choice:has(input:checked) {
	border-color: var(--waouh-accent);
	background: color-mix(in srgb, var(--waouh-accent) 8%, #fff);
	color: var(--waouh-accent);
	box-shadow: var(--waouh-shadow-sm);
}

.waouh-choice:has(input:checked):hover {
	background: color-mix(in srgb, var(--waouh-accent) 14%, #fff);
}

/* Pastille de coche, commune à tous les filtres : même signal de sélection
   qu'il s'agisse d'un logo de marque ou d'une abréviation de catégorie. */
.waouh-choice::after {
	content: '';
	position: absolute;
	top: calc(var(--waouh-badge) / -2 + 2px);
	right: calc(var(--waouh-badge) / -2 + 2px);
	width: var(--waouh-badge);
	height: var(--waouh-badge);
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--waouh-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E") center / 8px no-repeat;
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.18s var(--waouh-ease), transform 0.18s var(--waouh-ease);
	pointer-events: none;
}

.waouh-choice:has(input:checked)::after {
	opacity: 1;
	transform: scale(1);
}

/* La pastille sélectionnée passe au-dessus de ses voisines */
.waouh-choice:has(input:checked) {
	z-index: 1;
}

.waouh-choice:has(input:focus-visible) {
	outline: var(--waouh-focus) solid var(--waouh-accent);
	outline-offset: 2px;
}

.waouh-choice > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Apparitions et disparitions ------------------------------------------- */

/* Une valeur devenue inatteignable sort de la grille, et un critère dont plus
   aucune valeur n'est proposable disparaît en entier — libellé compris, plutôt
   que de laisser un titre au-dessus du vide. Une valeur déjà cochée n'est
   jamais masquée, sans quoi il deviendrait impossible de la décocher.
   
   « display » ne s'interpole pas : sans « allow-discrete », le passage se fait
   d'un bloc, et le panneau paraît sauter à chaque geste. La bascule est donc
   repoussée à la fin de la transition en disparition, et jouée d'emblée en
   apparition — c'est ce que fait « allow-discrete », et « @starting-style »
   donne à l'élément qui vient de reprendre sa place un état de départ à
   interpoler. Les navigateurs qui ignorent ces deux règles retrouvent le
   comportement instantané d'avant : rien n'est perdu. */

.waouh-filter {
	transition: opacity var(--waouh-fade) var(--waouh-ease),
		transform var(--waouh-fade) var(--waouh-ease),
		display var(--waouh-fade) var(--waouh-ease);
	transition-behavior: allow-discrete;
}

.waouh-choice.is-empty,
.waouh-filter.is-empty {
	display: none;
	opacity: 0;
	transform: scale(0.96);
}

/* Réglage « éteindre » : la valeur reste à sa place, hors d'atteinte. La liste
   ne se réorganise donc plus à chaque geste, ce qui la rend moins vivante mais
   plus stable sous le doigt. Un critère entier resté sans valeur disparaît
   quand même : un titre au-dessus du vide n'apprend rien. */
.waouh-filters[data-empty="dim"] .waouh-choice.is-empty {
	display: inline-flex;
	opacity: 0.3;
	transform: none;
	pointer-events: none;
}

@starting-style {
	.waouh-choice,
	.waouh-filter {
		opacity: 0;
		transform: scale(0.96);
	}
}

/* Les boutons qui vont et viennent : la croix d'un curseur qu'on vient de
   régler, le retour à zéro au pied des critères, la pastille de comptage du
   tiroir mobile. Ils paraissaient et disparaissaient d'un bloc au milieu d'un
   panneau où tout le reste se fond, et ce sursaut attirait l'œil sur un bouton
   qu'on n'avait pas demandé.

   Ils partent de plus petit qu'ils n'arrivent : une chose qui se pose grandit,
   une chose qui s'en va se retire. La règle « [hidden] » d'auteur est ici
   nécessaire — celle du navigateur ne suffirait pas à masquer un bouton dont
   on déclare l'affichage par ailleurs. */
.waouh-range__reset,
.waouh-reset,
.waouh-filters__badge {
	transition: opacity var(--waouh-fade) var(--waouh-ease),
		transform var(--waouh-fade) var(--waouh-ease),
		display var(--waouh-fade) var(--waouh-ease),
		border-color 0.18s var(--waouh-ease),
		background-color 0.18s var(--waouh-ease),
		color 0.18s var(--waouh-ease);
	transition-behavior: allow-discrete;
}

.waouh-range__reset[hidden],
.waouh-reset[hidden],
.waouh-filters__badge[hidden] {
	display: none;
	opacity: 0;
	transform: scale(0.7);
}

@starting-style {
	.waouh-range__reset,
	.waouh-reset,
	.waouh-filters__badge {
		opacity: 0;
		transform: scale(0.7);
	}
}

/* Vignettes de marque --------------------------------------------------- */

/* Quand toutes les valeurs disposent d'une image — c'est le cas des marques —
   le filtre s'affiche en grille de logos. Les logos restent en couleur : ce
   sont des repères visuels, les ternir les rendrait plus difficiles à
   reconnaître. La sélection se lit à l'anneau et à la pastille de coche. */

.waouh-choices--image {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	max-height: 364px;
	/* 12 px : la pastille déborde de 8 px et le survol soulève de 3 px */
	margin: -12px;
	padding: 12px;
	overflow-y: auto;
	overflow-anchor: none;
}

/* Tuiles carrées, à la taille exacte des logos du tableau : « --waouh-brand-size »
   pour le dessin, plus son retrait et son filet. Un logo reconnu dans le
   panneau doit être le même objet que celui qu'on lira dans la ligne, à la
   taille près comme au dessin près.

   Colonnes de largeur fixe plutôt qu'étirées : étirées, les tuiles auraient
   grandi avec le panneau et la parenté se serait perdue au premier écran large.
   L'espace en trop passe entre elles. */
.waouh-choices:has(.waouh-choice--image) {
	grid-template-columns: repeat(auto-fill, calc(var(--waouh-brand-size) + 12px));
	justify-content: space-between;
	gap: 6px;
}

.waouh-choice--image {
	position: relative;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 1;
	padding: 4px;
	border: var(--waouh-ring) solid var(--waouh-border);
	border-radius: 0;
	background: #fff;
	transition: transform 0.2s var(--waouh-ease), box-shadow 0.2s var(--waouh-ease),
		border-color 0.2s var(--waouh-ease), opacity var(--waouh-fade) var(--waouh-ease),
		display var(--waouh-fade) var(--waouh-ease);
	transition-behavior: allow-discrete;
}

.waouh-choice--image img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	transition: transform 0.2s var(--waouh-ease);
}

/* Le soulèvement et l'ombre viennent de la règle commune à toutes les
   pastilles. Ne reste ici que ce qui appartient en propre à une image : le
   logo grandit un peu dans sa tuile. */
.waouh-choice--image:hover img {
	transform: scale(1.08);
}

/* Même filet que partout ailleurs : la pastille de coche porte l'essentiel du
   signal, l'épaisseur n'a pas à varier d'un critère à l'autre. */
.waouh-choice--image:has(input:checked) {
	border-color: var(--waouh-accent);
	box-shadow: var(--waouh-shadow-sm);
}

/* Vignettes de marque : pastille un peu plus grande, la tuile est plus large */
.waouh-choice--image {
	--waouh-badge: 18px;
}

.waouh-choice--image:has(input:focus-visible) {
	outline: var(--waouh-focus) solid var(--waouh-accent);
	outline-offset: 3px;
}

/* Curseur double -------------------------------------------------------- */

/* Deux rangées : l'entête, toujours là, et le corps qui s'ouvre.
   
   La seconde passe de zéro à sa taille naturelle, et c'est cette fraction qui
   s'anime — une hauteur automatique ne s'interpole pas, une fraction de grille
   si. Le corps grandit donc au lieu de paraître d'un bloc, sans qu'on ait eu à
   mesurer quoi que ce soit. */
.waouh-range {
	position: relative;
	display: grid;
	/* La rangée d'entête vaut exactement sa ligne, corps ouvert ou fermé : en
	   « auto » elle se serait étirée avec la seconde, et le titre aurait glissé
	   vers le bas pendant l'ouverture. */
	grid-template-rows: calc(var(--waouh-control) + 6px) 0fr;
	transition: grid-template-rows var(--waouh-fade) var(--waouh-ease);
}

.waouh-range.is-open {
	grid-template-rows: calc(var(--waouh-control) + 6px) 1fr;
}

/* Le titre, la valeur courante et le bouton d'annulation tiennent sur une
   seule ligne. Plutôt que d'espérer que chacun retombe sur ses pieds, on leur
   impose à tous la même hauteur de boîte : leurs bords ne peuvent alors plus
   se décaler, quoi que le thème déclare par ailleurs. */
/* La fourchette, sur la ligne du titre ---------------------------------- */

/* Elle résume le critère et commande son ouverture. Un histogramme et un rail
   par critère, tous dépliés, occupaient tout le panneau pour une information
   qui tient en deux nombres ; on ne déplie que celui qu'on veut régler. */
.waouh-range__toggle {
	display: inline-flex;
	align-items: center;
	/* La fourchette est une pastille encadrée, le chevron un trait nu : collés,
	   le second avait l'air d'appartenir à la première. */
	gap: 9px;
	height: var(--waouh-control);
	margin: 0;
	padding: 0 0 0 6px;
	border: 0;
	background: none;
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	white-space: nowrap;
	color: var(--waouh-muted);
	cursor: pointer;
	transition: color 0.15s var(--waouh-ease);
}

.waouh-range__toggle:hover {
	color: var(--waouh-accent);
}

/* Même pastille que les étiquettes du rail : c'est la même valeur, lue au même
   endroit une fois le curseur déplié. Deux dessins pour une seule chose
   auraient donné à croire qu'il s'agissait de deux informations. */
.waouh-range__summary {
	display: inline-flex;
	align-items: center;
	height: 18px;
	padding: 0 6px;
	border: var(--waouh-ring) solid var(--waouh-border);
	background: var(--waouh-bg-alt);
	transition: color 0.18s var(--waouh-ease), border-color 0.18s var(--waouh-ease),
		background-color 0.18s var(--waouh-ease);
}

/* Une borne posée par l'utilisateur allume la fourchette, comme elle allume
   l'étiquette du rail : la teinte dit « ce critère est réglé », pas « ce
   critère existe ». */
.waouh-range__summary.is-set {
	border-color: var(--waouh-accent);
	background: var(--waouh-accent);
	color: #fff;
}

/* Même chevron que partout ailleurs, tourné vers le bas puis vers le haut une
   fois le curseur déplié. */
.waouh-range__caret {
	width: 5px;
	height: 5px;
	margin-bottom: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s var(--waouh-ease);
}

.waouh-range.is-open .waouh-range__caret {
	margin: 2px 0 0;
	transform: rotate(-135deg);
}

/* Le corps du critère — histogramme, rail, étiquettes.
   
   Il ne disparaît plus : il est écrasé par sa rangée, et son débordement est
   masqué. C'est ce qui permet à l'ouverture de s'animer, « display » ne
   s'interpolant pas.
   
   Positionné, parce que les étiquettes de valeur le sont : sans cela leur
   ancrage remonterait au critère entier, et le débordement d'un aïeul non
   positionné ne les retiendrait pas — elles flotteraient sur l'entête, curseur
   replié.
   
   La visibilité tombe à la fin de la fermeture et revient d'emblée à
   l'ouverture : replié, le corps ne doit pas retenir le clavier, mais il doit
   rester à l'écran le temps de se refermer. */
.waouh-range__body {
	position: relative;
	overflow: hidden;
	min-height: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--waouh-fade) var(--waouh-ease),
		visibility 0s linear var(--waouh-fade);
}

.waouh-range.is-open .waouh-range__body {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--waouh-fade) var(--waouh-ease),
		visibility 0s linear;
}

/* Toute la ligne ouvre le critère, titre compris : viser une pastille de dix-huit
   pixels de haut pour déplier un curseur demandait une précision que rien ne
   justifie. Le bouton reste sous la fourchette pour le clavier et l'assistance
   vocale, et son clic remonte jusqu'ici. */
/* Hauteur ferme, et non plancher : tout ce que la ligne porte tient déjà dans
   la hauteur commune des contrôles — le titre, la fourchette, la croix qui
   paraît quand une borne est posée. Un plancher laissait l'un d'eux la faire
   grandir d'un pixel ou deux, et la ligne sautait au moment même où l'on
   déplie le curseur ou l'on pose une contrainte. */
.waouh-range__head {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: var(--waouh-control);
	margin-bottom: 6px;
}

.waouh-range__head .waouh-filter__label {
	display: flex;
	align-items: center;
	height: var(--waouh-control);
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.waouh-range__state {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	height: var(--waouh-control);
	margin-left: auto;
}

/* Règle commune aux deux contrôles. Les déclarations individuelles plus bas
   ne portent plus que sur l'apparence : dimensions, marges et interlignage
   sont fixés ici, une fois pour toutes. */
.waouh-filters .waouh-range__state > * {
	box-sizing: border-box;
	flex: 0 0 auto;
	align-self: center;
	height: var(--waouh-control);
	min-height: var(--waouh-control);
	max-height: var(--waouh-control);
	margin: 0;
	line-height: 1;
	vertical-align: middle;
}

/* Flatsome impose « min-height: 2.5em » et « line-height: 2.4em » à tous les
   boutons. min-height l'emporte sur height : sans le neutraliser, ce bouton
   reste plus haut que la pastille voisine quoi qu'on déclare. */
.waouh-range__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--waouh-control);
	min-width: var(--waouh-control);
	height: var(--waouh-control);
	min-height: var(--waouh-control);
	max-height: var(--waouh-control);
	padding: 0;
	line-height: 1;
	border: var(--waouh-ring) solid var(--waouh-border);
	background: #fff;
	font-size: 10px;
	line-height: 1;
	color: var(--waouh-muted);
	cursor: pointer;
	transition: border-color 0.18s var(--waouh-ease), color 0.18s var(--waouh-ease),
		background-color 0.18s var(--waouh-ease);
}

.waouh-range__reset:hover {
	border-color: var(--waouh-accent);
	background: color-mix(in srgb, var(--waouh-accent) 8%, #fff);
	color: var(--waouh-accent);
}

/* Histogramme de répartition ------------------------------------------- */

/* Les barres montrent où se concentre le catalogue. Sans elles, régler la
   plage se fait à l'aveugle : rien n'indique s'il reste des produits au-delà
   d'une certaine valeur. Les données viennent du rendu serveur, aucune requête
   supplémentaire n'est faite. */

/* Réglage : sans histogramme, le rail reprend la place. */
.waouh-filters[data-histogram="0"] .waouh-hist {
	display: none;
}

.waouh-hist {
	display: flex;
	align-items: flex-end;
	gap: 1px;
	/* L'histogramme tient lieu de rail : c'est lui qui porte la plage retenue,
	   d'où sa hauteur et son fond au ras de la ligne de saisie. */
	height: 32px;
	margin-bottom: 2px;
}

/* Gris clair : l'histogramme est un fond de lecture, il ne doit pas
   concurrencer les libellés ni les pastilles de sélection. Seul le contraste
   entre les deux gris signale la plage retenue. */
.waouh-hist__bar {
	flex: 1;
	min-height: 3px;
	height: var(--waouh-h, 0%);
	background: #eef0f3;
	transition: background-color 0.15s var(--waouh-ease);
}

/* Dans la plage : le gris soutenu d'origine. L'accent tranchait trop pour un
   fond de lecture — l'histogramme dit la répartition, il n'a pas à rivaliser
   avec les pastilles, qui portent seules la couleur. */
.waouh-hist__bar.is-in {
	background: #c9ced6;
}

/* Tranche vidée par les autres filtres : on garde un trait au sol plutôt
   qu'un vide, pour que la silhouette de l'histogramme reste lisible. */
.waouh-hist__bar.is-void {
	background: #f4f5f7;
}

.waouh-hist__bar {
	transition: background-color 0.15s var(--waouh-ease), height var(--waouh-fade) var(--waouh-ease);
}


/* Étiquettes de valeur --------------------------------------------------- */

/* Elles remplacent à la fois la pastille d'entête et la ligne de bornes :
   curseurs au repos, les deux poignées sont sur les bornes, donc les
   étiquettes les affichent déjà. Une seule information, au seul endroit où
   le regard se trouve pendant le réglage. */

/* Elles ne suivent plus le rail, elles s'y posent : la pastille est la poignée.
   Un rond ne dit rien, une pastille dit sa valeur — et l'on saisit ce qu'on
   lit, à l'endroit même où on le lit. Le curseur du navigateur reste dessous,
   invisible, pour faire le travail de saisie.

   Posée hors du flux, la ligne d'étiquettes recouvre le rail sans l'écarter,
   et laisse passer les clics vers les poignées qu'elle habille. */
.waouh-range__values {
	position: absolute;
	left: 0;
	right: 0;
	/* Sous la ligne au sol, au pied des barres. */
	bottom: 0;
	height: 18px;
	pointer-events: none;
}

.waouh-range__value {
	position: absolute;
	top: 0;
	display: inline-flex;
	align-items: center;
	height: 18px;
	padding: 0 6px;
	border: var(--waouh-ring) solid var(--waouh-border);
	background: var(--waouh-bg-alt);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--waouh-muted);
	transform: translateX(-50%);
	transition: color 0.18s var(--waouh-ease), border-color 0.18s var(--waouh-ease),
		background-color 0.18s var(--waouh-ease);
}

/* Le survol porte sur le critère entier : on ne peut pas survoler une pastille
   qui ne reçoit pas la souris. Seul le filet bouge — la pastille garde sa
   taille et son fond, sans quoi la ligne sauterait au passage du curseur. */
.waouh-range:hover .waouh-range__value {
	border-color: color-mix(in srgb, var(--waouh-accent) 45%, var(--waouh-border));
}

/* Seule une borne posée par l'utilisateur s'allume. Une poignée resserrée par
   un autre filtre garde la teinte neutre : sa position est subie. */
.waouh-range__value.is-set {
	border-color: var(--waouh-accent);
	background: var(--waouh-accent);
	color: #fff;
}

/* Le style d'auteur l'emporterait sur la règle « [hidden] » du navigateur. */
.waouh-range__value[hidden] {
	display: none;
}

/* Le rail loge la ligne d'étiquettes, qui s'y superpose : sa hauteur est celle
   d'une pastille. */
.waouh-range__track {
	position: relative;
	height: 20px;
}

/* Une ligne au sol, et non plus un rail : elle marque l'axe sur lequel on
   glisse, sans redire ce que les barres montrent déjà. */
.waouh-range__track::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--waouh-border);
}

/* La plage retenue se lit sur l'histogramme. La peindre une seconde fois sur
   la ligne ne dirait rien de plus et brouillerait les pastilles, qui y sont
   posées. */
.waouh-range__fill {
	display: none;
}

/* Histogramme éteint dans les réglages : la plage n'a plus où se lire, la
   ligne au sol redevient donc le rail d'avant. Sans cela, le critère se
   réduirait à deux pastilles posées sur un trait, sans rien entre elles. */
.waouh-filters[data-histogram="0"] .waouh-range__track::before {
	top: 8px;
	height: 4px;
}

.waouh-filters[data-histogram="0"] .waouh-range__fill {
	display: block;
	top: 8px;
	height: 4px;
	background: var(--waouh-accent);
}

.waouh-filters[data-histogram="0"] .waouh-range__values {
	bottom: 1px;
}

.waouh-range__input {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3; /* réordonné à la volée pour saisir la poignée la plus proche */
	width: 100%;
	height: 20px;
	margin: 0;
	padding: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

/* Poignées transparentes : ce qu'on voit et ce qu'on saisit sont deux choses
   distinctes depuis que la pastille tient lieu de poignée. Elles gardent la
   largeur de la pastille pour qu'on l'attrape là où on la voit, et le curseur
   annonce seul qu'il y a prise. */
.waouh-range__input::-webkit-slider-thumb {
	width: 44px;
	height: 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: grab;
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
}

.waouh-range__input::-moz-range-thumb {
	width: 44px;
	height: 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: grab;
	pointer-events: auto;
}

.waouh-range__input:active::-webkit-slider-thumb {
	cursor: grabbing;
}

.waouh-range__input:active::-moz-range-thumb {
	cursor: grabbing;
}

/* L'anneau de focus se pose sur la pastille, seule chose visible ; il ne peut
   donc plus venir de la poignée. */
.waouh-range__input:focus-visible {
	outline: none;
}

.waouh-range:has(.waouh-range__input:focus-visible) .waouh-range__value {
	border-color: var(--waouh-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--waouh-accent) 25%, transparent);
}

/* Barre de défilement discrète dans les listes de filtres */
.waouh-choices {
	scrollbar-width: thin;
	scrollbar-color: var(--waouh-border) transparent;
}

.waouh-choices::-webkit-scrollbar {
	width: 6px;
}

.waouh-choices::-webkit-scrollbar-thumb {
	border-radius: 0;
	background: var(--waouh-border);
}

.waouh-choices::-webkit-scrollbar-thumb:hover {
	background: var(--waouh-muted);
}



/* -------------------------------------------------------------------------
   Mobile : le panneau devient un tiroir
   ------------------------------------------------------------------------- */

@media (max-width: 849px) {

	.waouh-filters__toggle {
		display: block;
	}

	/* Tiroir plein écran plutôt qu'accordéon. L'accordéon poussait les 147
	   cartes vers le bas : on réglait un filtre, on redescendait, et on avait
	   perdu sa place. Ici la liste ne bouge pas, elle est simplement couverte. */
	.waouh-filters__body {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 9999;
		margin: 0;
		padding: 16px 16px 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border: 0;
		background: #fff;
	}

	.waouh-filters.is-open .waouh-filters__body {
		display: flex;
	}

	/* Reste sous le pouce pendant qu'on fait défiler les filtres, et annonce
	   le résultat avant même de refermer. */
	.waouh-filters__done {
		position: sticky;
		bottom: 0;
		display: block;
		width: calc(100% + 32px);
		margin: 16px -16px 0;
		padding: 15px 16px;
		border: 0;
		background: var(--waouh-accent);
		font-size: 15px;
		font-weight: 600;
		color: #fff;
		cursor: pointer;
	}

}

@media (prefers-reduced-motion: reduce) {
	.waouh-filters *,
	.waouh-filters {
		transition: none !important;
		transform: none !important;
	}
}