/**
 * WooCommerce Waouh Tables
 *
 * Deux rendus à partir du même HTML : tableau dense sur grand écran,
 * cartes empilées sur mobile. Le basculement est purement CSS.
 */

/* Les deux plugins déclarent les mêmes variables, chacun pour son propre
   périmètre. C'est le prix de leur indépendance : la table doit s'afficher
   correctement sans le panneau, et réciproquement. Les valeurs viennent de
   Flatsome dans les deux cas, elles ne peuvent donc pas diverger en silence.
   
   L'aperçu d'image est posé sur le document, hors de « .waouh-tables » : sans ce
   second porteur, aucune variable ne lui parviendrait, et une déclaration dont
   une variable manque est simplement ignorée. */
.waouh-tables,
.waouh-preview {
	/* 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: 24px; /* hauteur commune du titre, de la valeur et du bouton */
	--waouh-pad: 18px;     /* retrait intérieur du panneau de filtres */
	--waouh-gap: 16px;     /* respiration verticale entre deux critères */
	--waouh-brand-size: 32px;
	--waouh-image-size: 32px;
	/* Hauteur au-delà de laquelle le tableau défile sur place. Une fenêtre
	   moins la place du menu du thème et du décompte : la table tient à
	   l'écran, entêtes comprises, quelle que soit la taille du catalogue. */
	--waouh-table-max: calc(100vh - 160px);
}

/* La mise en page, elle, n'appartient qu'à la table : deux colonnes, le
   panneau de filtres puis le tableau. */
/* Deux colonnes : le panneau de filtres, puis le tableau. */
.waouh-tables {
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr;
	gap: 24px;
	/* Chaque colonne à sa hauteur : le tableau borné à l'écran, le panneau
	   étiré autant qu'il a de critères. Les étirer à la même hauteur revenait à
	   creuser un blanc sous le plus court des deux. */
	align-items: start;
	color: var(--waouh-text);
}

/* Sans le plugin de filtres, il n'y a pas de panneau : la table prend tout. */
.waouh-tables--bare {
	grid-template-columns: 1fr;
}

/* -------------------------------------------------------------------------
   Décompte
   ------------------------------------------------------------------------- */

.waouh-count {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--waouh-border);
	font-size: 14px;
	color: var(--waouh-muted);
}

.waouh-count__shown {
	font-size: 17px;
	color: var(--waouh-text);
}

/* -------------------------------------------------------------------------
   Tableau
   ------------------------------------------------------------------------- */

/* Une colonne de grille refuse par défaut de descendre sous la largeur de son
   contenu : sans cela, un tableau large repousserait la colonne au lieu de
   défiler dans son cadre. */
.waouh-tables__main {
	min-width: 0;
	/* Le cadre prend toute la hauteur laissée par le décompte, qui reste sous
	   lui : c'est ce qui fait descendre le tableau jusqu'au bas du panneau
	   quand celui-ci est le plus grand. */
	display: flex;
	flex-direction: column;
}

/* Le cadre défilant. Cent produits font une page de plusieurs écrans : arrivé
   au milieu, on ne savait plus quelle colonne on lisait, l'entête étant resté
   tout en haut du document — là où le thème pose déjà sa propre barre, qui le
   recouvrait. Le tableau défile donc chez lui, et ses entêtes se collent au
   haut de ce cadre, toujours en vue.

   Le décompte reste dehors, sous le cadre : c'est un total, il ne défile pas
   avec les lignes. */
.waouh-table-scroll {
	/* Le script pose une hauteur ferme : celle du plus grand des deux, panneau
	   ou tableau, bornée à l'écran. La valeur ci-dessous n'est qu'un repli, le
	   temps qu'il mesure — et le seul recours si le script ne tourne pas. */
	max-height: var(--waouh-table-max);
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	/* Barre de défilement discrète, comme dans les listes du panneau. */
	scrollbar-width: thin;
	scrollbar-color: var(--waouh-border) transparent;
	/* Fin de course laissée au navigateur, sans « overscroll-behavior ».

	   On avait essayé de la retenir : « contain » faisait rebondir la table sur
	   sa butée, « none » supprimait le rebond mais enfermait la molette, la page
	   ne pouvant plus avancer tant que le curseur restait sur le tableau — qui
	   occupe presque tout l'écran. Laissée à sa charge, la fin de course passe
	   simplement le relais à la page, avec la retenue que chaque navigateur
	   applique déjà entre deux gestes. */
}

/* Voile du bas : il reste des produits sous le pli ---------------------- */

/* Un cadre borné ne montre rien de sa limite : la dernière ligne visible a
   l'air d'être la dernière tout court. Le voile brouille et efface ce qui
   touche le bord, et se retire dès qu'on touche le fond. Même chose que dans
   le panneau de filtres, écrite deux fois — c'est le prix de l'indépendance
   des deux plugins.

   Un pseudo-élément collant, et non un calque posé par-dessus : il se cale
   seul au bas de la zone de défilement, le script n'a rien à positionner.

   La flèche est peinte en fond du voile, et non tracée dans un second
   pseudo-élément : « ::before » ouvrirait la boîte, donc se placerait avant le
   tableau, et un conteneur de bloc n'offre aucun moyen de l'en déloger. */
.waouh-table-scroll::after {
	/* Flèche dessinée, et non empruntée à la police du thème : rien ne dit
	   qu'un autre site en charge une, ni laquelle. */
	content: '';
	/* En bloc : un pseudo-élément est en ligne par défaut, et une boîte en ligne
	   ignore la hauteur, la marge négative et le fond qu'on lui donne — le voile
	   avait tout simplement disparu. La disposition venait autrefois du « flex »
	   qui centrait le glyphe ; la flèche étant passée en fond, il est parti
	   avec. */
	display: block;
	position: sticky;
	bottom: 0;
	z-index: 3;
	height: 52px;
	margin-top: -52px;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8595' stroke-opacity='.7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"),
		linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 60%);
	background-repeat: no-repeat, no-repeat;
	background-position: center bottom 4px, 0 0;
	background-size: 15px 15px, auto;
	backdrop-filter: blur(3px);
	/* Le flou lui-même est dégradé : appliqué d'un bloc, il traçait une ligne
	   nette en haut du voile — une frontière franche pour annoncer un
	   débordement, ce qui disait le contraire de ce qu'on veut dire. */
	mask-image: linear-gradient(to bottom, transparent, #000 40%);
	pointer-events: none;
	/* « display » ne s'interpole pas : « allow-discrete » diffère la bascule le
	   temps du fondu, et le voile s'efface avant de quitter la page. */
	transition: opacity 0.2s var(--waouh-ease),
		display 0.2s var(--waouh-ease);
	transition-behavior: allow-discrete;
}

/* Rien à annoncer : le voile quitte la page.
   
   Retiré, et non rendu transparent. Un « backdrop-filter » agit sur ce qui se
   trouve derrière l'élément, et ce brouillage-là ne suit ni l'opacité ni la
   visibilité : le voile devenait invisible mais continuait de troubler les
   dernières lignes, même sans rien à faire défiler. Seul son retrait de la
   page l'emporte à coup sûr. */
.waouh-table-scroll.is-bottom::after {
	display: none;
	opacity: 0;
}

/* 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-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}

.waouh-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 10px 8px;
	border-bottom: var(--waouh-ring) solid var(--waouh-border);
	background: #fff;
	font-size: 12px;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	color: var(--waouh-muted);
}

.waouh-table th.is-sortable {
	cursor: pointer;
	user-select: none;
}

.waouh-table th.is-sortable:hover,
.waouh-table th.is-sorted {
	color: var(--waouh-accent);
}

/* Flatsome aligne les cellules de tableau à gauche ; on remonte la
   spécificité pour que le centrage tienne.
   
   L'entête et ses cellules sont visés par la même classe de colonne, et non
   par deux critères distincts : l'entête suivait « is-numeric » alors que les
   cellules suivaient la classe de colonne, si bien qu'un attribut textuel
   avait ses valeurs centrées sous un titre aligné à gauche. */
.waouh-tables .waouh-table th.waouh-col-attr,
.waouh-tables .waouh-table td.waouh-col-attr,
.waouh-tables .waouh-table th.waouh-col-category,
.waouh-tables .waouh-table td.waouh-col-category {
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.waouh-tables .waouh-table td.waouh-col-attr .waouh-cell {
	display: block;
	width: 100%;
	text-align: center;
}

.waouh-tables .waouh-table th.waouh-col-price,
.waouh-tables .waouh-table td.waouh-col-price {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* La flèche reste à droite du libellé, comme partout ailleurs, et occupe donc
   de la largeur dans l'entête. Le retrait supplémentaire va aux cellules
   seules : elles reculent d'autant, et les montants tombent à l'aplomb du
   libellé. L'entête, lui, garde son alignement à droite sans rien réserver. */
.waouh-tables .waouh-table td.waouh-col-price {
	padding-right: 20px; /* 8px de retrait courant + 12px pour la flèche */
}

.waouh-th__arrow {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 4px;
	border-right: 4px solid transparent;
	border-bottom: 5px solid currentColor;
	border-left: 4px solid transparent;
	opacity: 0;
	transition: opacity 0.15s, transform 0.15s;
}

/* Le centrage porte sur « libellé + flèche », si bien que le libellé seul
   penchait d'une demi-flèche vers la gauche et ne tombait jamais à l'aplomb
   des valeurs. Plutôt que de sortir la flèche du flux — elle disparaissait
   sous l'entête voisin, qui a son propre fond opaque — on lui oppose une
   cale de même largeur : le libellé se retrouve au milieu, la flèche reste
   là où elle était. */
.waouh-tables .waouh-table th.waouh-col-attr.is-sortable::before,
.waouh-tables .waouh-table th.waouh-col-category.is-sortable::before {
	content: '';
	display: inline-block;
	width: 12px; /* flèche (8px) + sa marge (4px) */
}



.waouh-table th.is-sortable:hover .waouh-th__arrow {
	opacity: 0.35;
}

.waouh-table th.is-sorted .waouh-th__arrow {
	opacity: 1;
}

.waouh-table th.is-desc .waouh-th__arrow {
	transform: rotate(180deg);
}

/* Fond uniforme : la lisibilité vient du filet de séparation, pas d'une
   alternance de teintes. Le survol reste le seul repère coloré.
   
   Et fondu au filtrage : une ligne écartée se retirait d'un bloc, si bien que
   sur 131 produits chaque frappe faisait sauter la liste. Même mécanique que
   dans le panneau — « display » ne s'interpolant pas, « allow-discrete »
   diffère la bascule et « @starting-style » donne son point de départ à la
   ligne qui revient. Pas de mise à l'échelle ici : une ligne de tableau n'est
   pas transformable de façon fiable selon les navigateurs, seule l'opacité
   l'est. */
.waouh-table tbody tr {
	background: #fff;
	transition: background-color 0.12s var(--waouh-ease),
		opacity var(--waouh-fade) var(--waouh-ease),
		display var(--waouh-fade) var(--waouh-ease);
	transition-behavior: allow-discrete;
}

.waouh-table tbody tr[hidden] {
	display: none;
	opacity: 0;
}

@starting-style {
	.waouh-table tbody tr {
		opacity: 0;
	}
}

.waouh-table tbody tr:hover {
	background: color-mix(in srgb, var(--waouh-accent) 5%, #fff);
}

/* La ligne entière mène à la fiche produit : le curseur l'annonce. */
.waouh-table tbody tr[data-href] {
	cursor: pointer;
}

/* Une valeur ne se coupe pas en deux : c'est à la colonne de s'élargir. Une
   dureté sans entête devenait étroite au point d'écrire « 36 » sur une ligne
   et « ° » sur la suivante. Les colonnes qui s'y prêtent — un nom de produit,
   long par nature — sont désignées dans les réglages de la table. */
.waouh-table td,
.waouh-table th {
	white-space: nowrap;
}

.waouh-table td.waouh-wrap,
.waouh-table th.waouh-wrap {
	white-space: normal;
}

/* Tout le surplus de largeur va aux colonnes qui acceptent de passer à la
   ligne, et à elles seules. Réparti sur toutes, comme le fait un tableau par
   défaut, il donnait de l'air à des colonnes insécables qui n'en avaient nul
   besoin pendant que le nom se coupait en deux juste à côté. Une colonne ne
   passe donc à la ligne que lorsque la table est réellement pleine.

   Réservé au tableau : en dessous, les cellules deviennent des blocs posés
   côte à côte, où une largeur de 100 % chasserait tout le reste de la ligne. */
@media (min-width: 850px) {
	.waouh-table th.waouh-wrap,
	.waouh-table td.waouh-wrap {
		width: 100%;
	}
}

.waouh-table td {
	position: relative;
	padding: 8px;
	border-bottom: 1px solid var(--waouh-border);
	vertical-align: middle;
}

/* Cellules ------------------------------------------------------------- */

/* Flatsome applique « img { max-width: 100% } ». Sans le neutraliser, une
   cellule étroite comprime l'image bien en dessous de sa taille demandée. */

.waouh-table td img.waouh-brand-logo {
	display: block;
	width: var(--waouh-brand-size);
	height: var(--waouh-brand-size);
	min-width: var(--waouh-brand-size);
	max-width: none;
	object-fit: contain;
}

.waouh-table td img.waouh-product-image {
	display: block;
	width: var(--waouh-image-size);
	height: var(--waouh-image-size);
	min-width: var(--waouh-image-size);
	max-width: none;
	object-fit: contain;
}

/* Emplacement réservé quand un produit n'a pas de visuel : évite que la
   colonne saute d'une ligne à l'autre. */
.waouh-no-image {
	display: block;
	border: 1px dashed var(--waouh-border);
	border-radius: 0;
}

.waouh-col-category,
.waouh-col-details {
	width: 1%;
	white-space: nowrap;
}

/* Le bouton de détail ferme la ligne, au ras du bord droit — là même où le
   navigateur pose sa barre de défilement, qui flotte au-dessus du contenu sur
   plusieurs systèmes plutôt que de lui prendre de la place. On la lui réserve
   donc à la main : « scrollbar-gutter » n'y peut rien, une barre flottante ne
   réclamant aucune gouttière. */
.waouh-table th.waouh-col-details,
.waouh-table td.waouh-col-details {
	padding-right: 18px;
}

.waouh-table-scroll::-webkit-scrollbar {
	width: 8px;
}

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

.waouh-table-scroll::-webkit-scrollbar-track {
	background: transparent;
}

/* Largeur réservée : la colonne ne peut plus se comprimer sous la taille
   de l'image, quel que soit le nombre d'attributs affichés. */
.waouh-table .waouh-col-brand {
	width: calc(var(--waouh-brand-size) + 16px);
	min-width: calc(var(--waouh-brand-size) + 16px);
	white-space: nowrap;
}

.waouh-table .waouh-col-image {
	width: calc(var(--waouh-image-size) + 16px);
	min-width: calc(var(--waouh-image-size) + 16px);
	white-space: nowrap;
}

/* Pastilles et nom côte à côte, et non dans le fil du texte : un nom qui passe
   à la ligne repartait sous la pastille, sa seconde ligne décalée de la
   première. Le nom forme désormais son propre bloc, à droite des pastilles.

   Les pastilles se centrent sur la hauteur du nom, une ligne ou deux : calées
   en haut, elles paraissaient tomber d'un cran dès qu'un nom en occupait deux. */
.waouh-name {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

/* L'écart est tenu par la boîte ; la marge que la pastille porte ailleurs — la
   colonne des étiquettes, le panneau de filtres — l'y doublerait. */
.waouh-name .waouh-flag {
	flex: 0 0 auto;
	margin-right: 0;
}

.waouh-product-link {
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

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

/* Pastilles d'étiquette ------------------------------------------------- */

/* Une seule pastille pour trois emplacements — devant le nom, dans la colonne
   des étiquettes, dans le filtre. Reconnaître dans le panneau ce qu'on a vu
   dans la table est ce qui fait le lien entre les deux. */

.waouh-flag {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 6px;
	border-radius: 0;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	vertical-align: 2px;
	white-space: nowrap;
}

/* Pastille en icône, au choix dans les réglages. Le fond garde la couleur de
   l'étiquette — c'est elle qui porte le sens — et le dessin remplace le mot.
   Un peu plus haute et carrée : un glyphe seul dans une pastille taillée pour
   cinq lettres flotterait au milieu. */
.waouh-flag--icon {
	/* Carré, et de côté fixe. Un retrait de part et d'autre d'un glyphe donnait
	   une pastille plus large que haute, et d'une largeur différente selon le
	   dessin — les glyphes d'une police n'ont pas tous la même. Ici c'est la
	   boîte qui commande, et le dessin se centre dedans. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--waouh-icon) + 4px);
	height: calc(var(--waouh-icon) + 4px);
	padding: 0;
	font-size: 11px;
	line-height: 1;
}

/* Icône suivie du mot, dans le panneau de filtres. La pastille reprend alors
   sa largeur naturelle — c'est le texte qui commande, comme sans icône — et
   l'écart sépare les deux sans les éloigner. Le dessin est pris un cran plus
   grand : à la taille du texte, un glyphe paraît plus petit qu'une capitale. */
.waouh-flag--icon-text {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.waouh-flag--icon-text i {
	font-size: 1.2em;
	line-height: 1;
}

/* Le libellé qui accompagne l'icône s'adresse à l'assistance vocale seule. La
   classe vient de WordPress, mais rien ne garantit qu'un thème la définisse :
   sans cette règle, le mot s'afficherait à côté du dessin qu'il double. */
.waouh-tables .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.waouh-flag--nouveaute {
	background: var(--waouh-nouveaute);
	color: #fff;
}

/* Un orange franc, plus clair que l'or d'avant : une remise se remarque, et
   le blanc y reste lisible à neuf pixels — ce qui écarte les oranges plus
   pâles, sur lesquels il passe sous le seuil de contraste. */
.waouh-flag--promotion {
	background: var(--waouh-promotion);
	color: #fff;
}

/* Dans la colonne des étiquettes, les pastilles se suivent et peuvent passer
   à la ligne, comme les étiquettes ordinaires. */
.waouh-col-tags .waouh-flag {
	margin: 0 3px 2px 0;
}

/* Dans un filtre, la pastille n'est pas dans l'option : elle est l'option.
   Elle occupe donc toute la case, bord à bord, et c'est la bordure de l'option
   qui continue de porter l'état de sélection. */
.waouh-choice:has(.waouh-flag) {
	padding: 0;
}

.waouh-choice .waouh-flag {
	display: flex;
	flex: 1 1 auto;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	font-size: 10px;
	vertical-align: baseline;
}
/* Étiquettes produit, si la colonne est affichée */
.waouh-tag {
	display: inline-block;
	margin: 0 3px 2px 0;
	padding: 2px 7px;
	border: var(--waouh-ring) solid var(--waouh-border);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--waouh-muted);
	white-space: nowrap;
}

.waouh-tag--promotion {
	border-color: var(--waouh-alert);
	color: var(--waouh-alert);
}

.waouh-tag--nouveaute {
	border-color: var(--waouh-success);
	color: var(--waouh-success);
}

.waouh-cat-badge {
	display: inline-block;
	padding: 2px 7px;
	border: 1px solid var(--waouh-border);
	border-radius: 0;
	font-size: 11px;
	font-weight: 700;
	color: var(--waouh-muted);
}

.waouh-plus {
	color: var(--waouh-accent);
	font-weight: 700;
}

.waouh-empty {
	color: #c4c4c4;
}

/* Niveau d'un attribut ordonné. L'intensité vient du rang dans l'échelle, pas
   du mot : le plugin ne connaît pas le vocabulaire du catalogue. */
.waouh-level {
	color: color-mix(in srgb, var(--waouh-alert) calc(var(--waouh-level, 0) * 100%), var(--waouh-muted));
}

/* Booléen : vert quand c'est oui, gris quand c'est non. */
.waouh-bool.is-on {
	color: var(--waouh-success);
}

.waouh-bool.is-off {
	color: #c4c4c4;
}

/* Barre de niveau derrière la valeur ----------------------------------- */

/* Jauge sur rail. Le rail gris porte l'information décisive : sans lui, une
   barre courte se lit comme une donnée manquante plutôt que comme une valeur
   basse. Il donne le repère du maximum de la colonne. */
.waouh-gauge {
	position: absolute;
	bottom: 3px;
	left: 50%;
	transform: translateX(-50%);
	width: 36px;
	max-width: calc(100% - 12px);
	height: 4px;
	background: var(--waouh-border);
}

.waouh-gauge__fill {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--waouh-bar, 0);
	height: 100%;
	background: var(--waouh-accent);
}

.waouh-cell {
	position: relative;
}

.waouh-details-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 0;
	background: var(--waouh-bg-alt);
	color: var(--waouh-muted);
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

/* Le chevron s'allume dès le survol de la ligne, pas seulement du bouton :
   il signale la destination du clic. */
.waouh-table tbody tr:hover .waouh-details-button,
.waouh-details-button:hover,
.waouh-details-button:focus-visible {
	background: var(--waouh-accent);
	color: #fff;
}

.waouh-no-results {
	padding: 40px 0;
	text-align: center;
	color: var(--waouh-muted);
	transition: opacity var(--waouh-fade) var(--waouh-ease),
		display var(--waouh-fade) var(--waouh-ease);
	transition-behavior: allow-discrete;
}

.waouh-no-results[hidden] {
	display: none;
	opacity: 0;
}

@starting-style {
	.waouh-no-results {
		opacity: 0;
	}
}

/* -------------------------------------------------------------------------
   Aperçu d'image
   -------------------------------------------------------------------------
   Posé sur le document, hors de la table : il doit pouvoir déborder de la
   ligne survolée. Sa position est calculée en JavaScript. */

.waouh-preview {
	position: fixed;
	z-index: 10000;
	/* Cadre carré fixe, comme la vignette de la table : les visuels du catalogue
	   n'ont pas tous le même format. L'image s'y loge sans le contraindre, ce
	   qui met l'aperçu à l'abri des règles de dimensionnement du thème. */
	display: flex;
	box-sizing: content-box;
	width: 240px;
	height: 240px;
	align-items: center;
	justify-content: center;
	padding: 8px;
	/* Même épaisseur que les filtres et les entêtes : l'aperçu appartient à la
	   table, il ne doit pas avoir l'air d'une infobulle du navigateur. */
	border: var(--waouh-ring) solid var(--waouh-border);
	background: #fff;
	box-shadow: var(--waouh-shadow-md);
	opacity: 0;
	transform: scale(0.96);
	pointer-events: none;
	transition: opacity 0.16s var(--waouh-ease), transform 0.16s var(--waouh-ease);
}

.waouh-preview.is-visible {
	opacity: 1;
	transform: scale(1);
}

/* L'image se loge dans le cadre sans le contraindre : quelle que soit la règle
   qui l'emporte sur ses dimensions, elle reste bornée par le carré. */
.waouh-preview img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Le curseur annonce qu'il y a quelque chose à voir. */
.waouh-table td.waouh-col-image {
	cursor: zoom-in;
}

/* -------------------------------------------------------------------------
   Barre de tri mobile
   -------------------------------------------------------------------------
   Doublon assumé de l'entête du tableau : sur grand écran l'entête porte le
   tri, sur mobile il est masqué. Un seul comportement en JavaScript, deux
   habillages. */

.waouh-sortbar {
	display: none;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.waouh-sortbar__label {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--waouh-muted);
}

.waouh-sortbar__scroll {
	display: flex;
	flex: 1 1 auto;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.waouh-sortbar__scroll::-webkit-scrollbar {
	display: none;
}

.waouh-sortbar__pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	box-sizing: border-box;
	min-height: 34px;
	padding: 0 12px;
	border: var(--waouh-ring) solid var(--waouh-border);
	border-radius: 0;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--waouh-text);
	cursor: pointer;
}

.waouh-sortbar__pill.is-sorted {
	border-color: var(--waouh-accent);
	background: var(--waouh-accent);
	color: #fff;
}

/* Flèche : absente au repos, elle n'apparaît que sur la pastille active pour
   dire dans quel sens on trie. */
.waouh-sortbar__arrow {
	display: none;
	width: 0;
	height: 0;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	border-bottom: 5px solid currentColor;
}

.waouh-sortbar__pill.is-sorted .waouh-sortbar__arrow {
	display: inline-block;
}

.waouh-sortbar__pill.is-desc .waouh-sortbar__arrow {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
   Mobile : liste du critère courant
   ------------------------------------------------------------------------- */

@media (max-width: 849px) {

	.waouh-tables {
		grid-template-columns: 1fr;
	}

	.waouh-sortbar {
		display: flex;
	}

	/* Liste, une ligne par produit.
	   
	   Le défilement horizontal demandait un geste que personne ne fait, et les
	   cartes empilées noyaient chaque valeur dans son bloc. Ici la ligne ne
	   montre qu'un seul critère : celui sur lequel on trie. On compare donc sur
	   la dimension qu'on a choisie, une douzaine de produits par écran, et la
	   barre de tri au-dessus sert à la fois de commande et de légende — elle
	   dit quel critère est affiché. */

	.waouh-table,
	.waouh-table tbody,
	.waouh-table tr,
	.waouh-table td {
		display: block;
		width: auto;
	}

	.waouh-table thead {
		display: none;
	}

	/* Plus d'entête à garder en vue, donc plus de cadre : un défilement dans le
	   défilement se prend mal au doigt, et la page s'arrêterait de bouger dès
	   que le pouce tombe sur la liste. */
	.waouh-table-scroll {
		max-height: none;
		overflow: visible;
	}

	.waouh-table tbody tr {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 2px;
		/* Le filet passe de la cellule à la ligne : les cellules n'en forment
		   plus une, elles sont posées côte à côte dans un flux. */
		border-bottom: 1px solid var(--waouh-border);
	}

	.waouh-table td {
		padding: 0;
		border-bottom: none;
	}

	.waouh-tables {
		--waouh-brand-size: 24px;
	}

	.waouh-table td.waouh-col-brand {
		flex: 0 0 var(--waouh-brand-size);
	}

	.waouh-table td.waouh-col-name {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		font-size: 14px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Le nom vit dans sa propre boîte : c'est elle, et non la cellule, qui doit
	   tronquer ce qui dépasse. */
	.waouh-table td.waouh-col-name .waouh-product-link {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Ce qui ne tient pas sur une ligne, et que le filtre couvre déjà : le
	   visuel, la sous-catégorie, les étiquettes, et tous les critères sauf
	   celui qu'on regarde. */
	.waouh-table td.waouh-col-image,
	.waouh-table td.waouh-col-category,
	.waouh-table td.waouh-col-tags,
	.waouh-table td.waouh-col-attr {
		display: none;
	}

	.waouh-tables .waouh-table td.waouh-col-attr.is-sort-col {
		display: block;
		flex: 0 0 46px;
		text-align: right;
		font-weight: 600;
	}

	/* La jauge quitte le fond de cellule pour se ranger sous sa valeur. */
	.waouh-table td.waouh-col-attr.is-sort-col .waouh-gauge {
		position: static;
		display: block;
		width: 100%;
		max-width: none;
		margin-top: 3px;
		transform: none;
	}

	.waouh-tables .waouh-table td.waouh-col-price {
		flex: 0 0 auto;
		padding-right: 0;
		font-weight: 600;
	}

	/* Pas de cadre défilant ici, donc pas de barre à esquiver : la place
	   réservée sur grand écran est rendue à la ligne. */
	.waouh-table td.waouh-col-details {
		flex: 0 0 auto;
		padding-right: 0;
	}

	.waouh-details-button {
		width: 32px;
		height: 32px;
	}

	.waouh-details-button {
		width: 32px;
		height: 32px;
	}
}

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

/* -------------------------------------------------------------------------
   Cohabitation avec le gabarit du thème enfant
   -------------------------------------------------------------------------
   La page de catégorie affiche une colonne latérale contenant les widgets
   BeRocket. Quand notre table est active, elle porte ses propres filtres :
   on masque l'ancienne colonne et on récupère toute la largeur.
   Aucune modification du thème n'est nécessaire, et retirer la table
   restaure l'affichage d'origine.
   ------------------------------------------------------------------------- */

.category-page-row:has(.waouh-tables) > .large-3 {
	display: none;
}

.category-page-row:has(.waouh-tables) > .large-9 {
	max-width: 100%;
	flex-basis: 100%;
}