/* -------------------------------------------------------------------------
   WooCommerce Waouh Marques
   -------------------------------------------------------------------------
   La grille de logos, dessinée comme les pastilles de marque du panneau de
   filtres. Les valeurs sont redéclarées ici et non empruntées : cette extension
   peut vivre seule sur un site qui n'a ni table ni panneau, et une déclaration
   dont la variable manque est purement et simplement ignorée.
   ------------------------------------------------------------------------- */

.waouh-marques {
	/* Portée limitée à la grille : ces variables ne doivent pas déteindre sur
	   le reste de la page, où le thème a les siennes. */
	--waouh-border: #e4e7ec;
	--waouh-text: var(--fs-color-base, #2b2b2b);
	--waouh-accent: var(--fs-color-primary, #446084);
	--waouh-ring: 2px;
	--waouh-focus: 2px;
	--waouh-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--waouh-shadow-md: 0 6px 18px rgba(20, 35, 60, 0.13);
	/* Les mesures des pastilles de marque du panneau de filtres, reprises au
	   pixel : case de 44, logo de 32, un retrait de 4 entre les deux. Ce sont
	   les deux mêmes logos qu'on regarde, et deux tailles proches sans être
	   égales se lisent comme une erreur plutôt que comme une intention. */
	--waouh-case: 44px;
	--waouh-logo: 32px;

	/* Des colonnes à taille fixe, et non des colonnes qui se partagent la
	   largeur : une case de marque a la taille de son logo, pas celle de la
	   place disponible. C'est aussi ce que fait le panneau de filtres, où les
	   pastilles gardent leur format quelle que soit la colonne qui les porte.

	   « auto-fill » : autant de colonnes que la largeur en admet, les cases
	   s'alignant à gauche sur la dernière ligne comme sur les autres. */
	display: grid;
	grid-template-columns: repeat(auto-fill, var(--waouh-case));
	justify-content: start;
	gap: 6px;

	/* Une liste, mais qui n'en a pas l'air : la sémantique sert l'assistance
	   vocale, la puce et le retrait ne servent personne ici. */
	margin: 0;
	padding: 0;
	list-style: none;
}

.waouh-marques__case {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La vignette. Le lien porte la bordure et le fond, et non l'image : c'est lui
   qu'on survole, qu'on tabule et qu'on clique, et la zone cliquable doit être
   celle qu'on voit. */
.waouh-marque {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	/* Une case carrée, parce que les logos le sont. C'est la seule forme qui les
	   accueille sans ménager de vide : dans une case plus large que haute, un
	   logo carré laisse deux bandes blanches sur les côtés, et l'œil lit ces
	   bandes comme un défaut d'alignement d'une marque à l'autre. Le carré cale
	   aussi les cases entre elles sans avoir à leur imposer une hauteur en
	   pixels, qui aurait été juste dans une colonne et fausse dans une autre. */
	aspect-ratio: 1 / 1;
	/* Positionnée pour que le « z-index » du survol ait prise : sur un élément
	   statique, il ne veut rien dire. */
	position: relative;
	padding: 4px;
	border: var(--waouh-ring) solid var(--waouh-border);
	background: #fff;
	text-align: center;
	text-decoration: none;
	color: var(--waouh-text);
	transition: border-color 0.18s var(--waouh-ease),
		box-shadow 0.18s var(--waouh-ease), transform 0.18s var(--waouh-ease);
}

/* Le survol des pastilles du panneau de filtres, au geste près : la case se
   soulève de trois pixels sur une ombre portée, le filet passant à l'accent
   adouci. Aucune teinte de fond — là-bas elle dit « retenu », et l'employer au
   survol ferait hésiter sur l'état d'une pastille au moment de la changer.

   Le « z-index » met la case soulevée devant ses voisines : sans lui, l'ombre
   qu'elle projette passerait sous celle d'à côté et se trouverait tranchée net
   au bord de la case suivante.

   Seules les cases qui mènent quelque part se soulèvent : une marque sans page
   n'a pas à faire croire qu'on peut la suivre. */
a.waouh-marque:hover,
a.waouh-marque:focus-visible {
	z-index: 1;
	border-color: color-mix(in srgb, var(--waouh-accent) 45%, transparent);
	transform: translateY(-3px);
	box-shadow: var(--waouh-shadow-md);
}

/* Au clic, la case redescend sans revenir tout à fait : le geste répond, et la
   pression se sent. */
a.waouh-marque:active {
	transform: translateY(-1px);
}

a.waouh-marque:focus-visible {
	outline: var(--waouh-focus) solid var(--waouh-accent);
	outline-offset: 2px;
}

/* Le logo, à l'intérieur de sa case. */
.waouh-marque__logo {
	display: block;
	/* La taille du logo dans le panneau de filtres. « contain » garde ses
	   proportions : un logo qui ne serait pas carré s'y inscrit sans être étiré,
	   ce qui compte pour un dessin de marque. */
	width: var(--waouh-logo);
	height: var(--waouh-logo);
	object-fit: contain;
}

/* Faute de logo, le nom. Il peut passer à la ligne, et se coupe plutôt que de
   sortir de sa case s'il est d'un seul tenant. */
.waouh-marque__nom {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

/* Une case qui porte un nom prend deux colonnes : un mot n'a pas la largeur d'un
   logo, et le serrer dans 44 px le couperait en morceaux illisibles. Elle cesse
   alors d'être carrée, la hauteur restant celle de ses voisines. */
.waouh-marques__case:has(.waouh-marque__nom) {
	grid-column: span 2;
}

.waouh-marque:has(.waouh-marque__nom) {
	aspect-ratio: auto;
	height: var(--waouh-case);
}

/* Le nom accompagne le logo pour 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-marques .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Le mouvement n'est pas l'information : qui l'a désactivé garde le filet et
   l'ombre, et perd seulement le soulèvement. */
@media (prefers-reduced-motion: reduce) {
	.waouh-marque {
		transition: none;
	}

	a.waouh-marque:hover,
	a.waouh-marque:focus-visible,
	a.waouh-marque:active {
		transform: none;
	}
}