/* ==================================================================
   Bijoux de Soie — page boutique et filtres
   ------------------------------------------------------------------
   Le panneau de filtres est injecté dans `.ast-woocommerce-container`,
   parent direct de `ul.products`. On ne restructure pas le DOM : une
   grille place le panneau en première colonne et TOUT le reste en
   seconde, y compris la barre d'outils et la pagination.

   Contrastes repris de la palette validée :
     texte courant #4A443E sur blanc        9,60:1
     or texte      #806732 sur blanc        5,38:1
     encre sur or de marque (bouton)        5,57:1
   ================================================================== */

/* --- Mise en page en deux colonnes --- */

@media (min-width: 1000px) {
	.ast-woocommerce-container:has(.bds-panneau-filtres) {
		display: grid;
		grid-template-columns: minmax(230px, 264px) minmax(0, 1fr);
		column-gap: clamp(2rem, 3.5vw, 3.5rem);
		align-items: start;
	}

	/*
	 * Fil d'Ariane, titre et messages : pleine largeur, au-dessus des deux
	 * colonnes. Ils n'ont pas à être comprimés à droite.
	 */
	.ast-woocommerce-container:has(.bds-panneau-filtres) > .woocommerce-breadcrumb,
	.ast-woocommerce-container:has(.bds-panneau-filtres) > .woocommerce-products-header,
	.ast-woocommerce-container:has(.bds-panneau-filtres) > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	/*
	 * Deux colonnes, une seule rangée : le panneau à gauche, tout le
	 * contenu à droite dans son conteneur. Ils démarrent donc exactement
	 * à la même hauteur.
	 *
	 * ⚠️ Historique de deux erreurs à ne pas refaire :
	 *
	 *   1. `grid-row: 1 / -1` sur le panneau. Les numéros de ligne
	 *      négatifs ne référencent que la grille EXPLICITE : sans
	 *      `grid-template-rows`, `-1` vaut 1 et la règle devient `1 / 2`.
	 *      Le panneau n'occupait qu'une rangée — celle du fil d'Ariane,
	 *      qui prenait alors toute sa hauteur.
	 *
	 *   2. `grid-row: auto / span 50` ensuite. Le panneau s'étendait bien,
	 *      mais l'auto-placement renvoyait la barre d'outils et la grille
	 *      SOUS ces rangées au lieu de les poser à côté.
	 *
	 * La solution n'était pas dans le CSS : il fallait un vrai conteneur
	 * pour la colonne de droite (voir bds_ouvre_contenu() dans
	 * functions.php). Le placement devient alors trivial et déterministe.
	 */
	.ast-woocommerce-container:has(.bds-panneau-filtres) > .bds-panneau-filtres {
		grid-column: 1;
		position: sticky;
		/* 24px d'air sous l'en-tête collant d'Astra */
		top: calc(var(--bds-entete-h, 90px) + 1.5rem);
		max-height: calc(100svh - var(--bds-entete-h, 90px) - 3rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	.ast-woocommerce-container:has(.bds-panneau-filtres) > .bds-boutique__contenu {
		grid-column: 2;
		min-width: 0;
	}
}

/* Sous 1000 px, le conteneur ne joue aucun rôle : il ne doit rien imposer. */
.bds-boutique__contenu { min-width: 0; }

/* --- Le panneau --- */

.bds-panneau-filtres {
	font-family: var(--bds-sans);
}

.bds-filtres__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: .9rem;
	margin-bottom: .4rem;
	border-bottom: 1px solid var(--bds-bordure);
}

.bds-filtres__titre {
	font-family: var(--bds-serif);
	font-weight: 400;
	font-size: 1.3rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bds-encre);
	margin: 0;
}

/* Le bouton de fermeture ne sert qu'au tiroir mobile. */
.bds-filtres__fermer {
	display: none;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--bds-bordure);
	border-radius: 2px;
	background: transparent;
	color: var(--bds-encre);
	cursor: pointer;
	place-items: center;
}

.bds-filtres__fermer svg { width: 18px; height: 18px; }

/* --- Groupes dépliables --- */

.bds-filtre {
	border-bottom: 1px solid var(--bds-bordure);
}

.bds-filtre__titre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding: .95rem 0;
	cursor: pointer;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bds-encre);
	list-style: none;
}

.bds-filtre__titre::-webkit-details-marker { display: none; }

/* Chevron dessiné en CSS : pas d'icône à charger. */
.bds-filtre__titre::after {
	content: "";
	width: 8px;
	height: 8px;
	border-inline-end: 1.5px solid var(--bds-or-trait);
	border-block-end: 1.5px solid var(--bds-or-trait);
	transform: rotate(45deg);
	transition: transform var(--bds-court) var(--bds-courbe);
	flex: none;
	margin-inline-start: auto;
}

.bds-filtre[open] > .bds-filtre__titre::after { transform: rotate(-135deg); }

.bds-filtre__titre:hover { color: var(--bds-or-texte); }

.bds-filtre__compteur {
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding-inline: .35em;
	border-radius: 9px;
	background: var(--bds-or-marque);
	color: var(--bds-encre);
	font-size: .62rem;
	letter-spacing: 0;
}

.bds-filtre__corps {
	padding-bottom: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.bds-filtre__corps--pastilles {
	flex-direction: row;
	flex-wrap: wrap;
	gap: .55rem;
	padding-top: .2rem;
}

/* --- Cases à cocher --- */

.bds-case {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .42rem 0;
	cursor: pointer;
	font-size: .92rem;
	color: var(--bds-texte);
	transition: color var(--bds-court) var(--bds-courbe);
}

.bds-case input,
.bds-pastille-filtre input {
	/* Masqué visuellement mais toujours focusable et lisible par les
	   technologies d'assistance — jamais display:none. */
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.bds-case__marque {
	width: 16px;
	height: 16px;
	flex: none;
	border: 1px solid var(--bds-or-trait);
	border-radius: 2px;
	position: relative;
	transition: background-color var(--bds-court) var(--bds-courbe),
	            border-color var(--bds-court) var(--bds-courbe);
}

.bds-case__marque::after {
	content: "";
	position: absolute;
	inset-block-start: 2px;
	inset-inline-start: 5px;
	width: 4px;
	height: 8px;
	border-inline-end: 2px solid var(--bds-encre);
	border-block-end: 2px solid var(--bds-encre);
	transform: rotate(45deg) scale(0);
	transition: transform var(--bds-court) var(--bds-courbe);
}

.bds-case.is-coche .bds-case__marque,
.bds-case:has(input:checked) .bds-case__marque {
	background: var(--bds-or-marque);
	border-color: var(--bds-or-marque);
}

.bds-case.is-coche .bds-case__marque::after,
.bds-case:has(input:checked) .bds-case__marque::after {
	transform: rotate(45deg) scale(1);
}

.bds-case:hover { color: var(--bds-encre); }

.bds-case:has(input:focus-visible) .bds-case__marque,
.bds-pastille-filtre:has(input:focus-visible) .bds-pastille-filtre__rond {
	outline: 2px solid var(--bds-or-encre);
	outline-offset: 2px;
}

.bds-case__nom { flex: 1; }

.bds-case__n {
	font-size: .76rem;
	color: var(--bds-gris);
	font-variant-numeric: tabular-nums;
}

/* --- Pastilles de couleur --- */

.bds-pastille-filtre {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	position: relative;
}

.bds-pastille-filtre__rond {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: block;
	/* Anneau à 3:1 contre le fond : sans lui, une soie ivoire serait
	   invisible. Même raison que sur les cartes produit. */
	box-shadow: 0 0 0 1px rgba(28, 26, 24, .5);
	transition: transform var(--bds-court) var(--bds-courbe),
	            box-shadow var(--bds-court) var(--bds-courbe);
}

.bds-pastille-filtre:hover .bds-pastille-filtre__rond { transform: scale(1.1); }

/* Sélection marquée par un double anneau or, pas seulement par la
   couleur — indispensable pour qui ne distingue pas les teintes. */
.bds-pastille-filtre:has(input:checked) .bds-pastille-filtre__rond {
	box-shadow: 0 0 0 2px var(--bds-blanc), 0 0 0 4px var(--bds-or-marque);
}

/* Le nom reste accessible au survol et aux lecteurs d'écran. */
.bds-pastille-filtre__nom {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Prix --- */

.bds-prix {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding-top: .3rem;
}

.bds-prix__champ { flex: 1; }

.bds-prix__champ input {
	width: 100%;
	padding: .6em .7em;
	border: 1px solid var(--bds-bordure);
	border-radius: 2px;
	background: var(--bds-blanc);
	color: var(--bds-encre);
	font-family: var(--bds-sans);
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
}

.bds-prix__champ input:focus {
	outline: 2px solid var(--bds-or-trait);
	outline-offset: 1px;
	border-color: var(--bds-or-trait);
}

.bds-prix__tiret { color: var(--bds-gris); }

.bds-prix__plage {
	font-size: .78rem;
	color: var(--bds-gris);
	margin: .7rem 0 0;
	line-height: 1.5;
}

/* --- Actions --- */

.bds-filtres__actions {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	align-items: flex-start;
	padding-top: 1.3rem;
}

.bds-filtres__valider { width: 100%; justify-content: center; }

.bds-filtres__vider {
	font-size: .8rem;
	letter-spacing: .06em;
	color: var(--bds-or-texte);
}

/*
 * Avec JavaScript actif, la soumission est automatique : le bouton
 * devient redondant. Sans JavaScript il reste seul moyen de valider,
 * d'où le masquage conditionné à la classe posée par le script.
 */
.bds-js .bds-filtres__valider { display: none; }

/* ==================================================================
   BARRE D'OUTILS
   ================================================================== */

.bds-outils {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-bottom: 1.6rem;
	margin-bottom: 1.6rem;
	border-bottom: 1px solid var(--bds-bordure);
}

.bds-outils__ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.bds-outils__compte {
	margin: 0;
	font-size: .88rem;
	color: var(--bds-gris);
	letter-spacing: .04em;
}

.bds-outils__compte strong {
	font-family: var(--bds-serif);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--bds-encre);
	margin-inline-end: .15em;
}

.bds-outils__droite {
	display: flex;
	align-items: center;
	gap: .7rem;
}

.bds-outils__filtrer {
	display: none;
	align-items: center;
	gap: .5rem;
	padding: .62em 1.1em;
	border: 1px solid var(--bds-or-trait);
	border-radius: 2px;
	background: transparent;
	color: var(--bds-or-texte);
	font-family: var(--bds-sans);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

.bds-outils__filtrer svg { width: 17px; height: 17px; }

.bds-outils__filtrer:hover {
	background: var(--bds-or-marque);
	border-color: var(--bds-or-marque);
	color: var(--bds-encre);
}

/* Le menu de tri de WooCommerce, réhabillé */
.woocommerce .woocommerce-ordering select,
.bds-outils select {
	appearance: none;
	padding: .62em 2.2em .62em .9em;
	border: 1px solid var(--bds-bordure);
	border-radius: 2px;
	background-color: var(--bds-blanc);
	/* Chevron en SVG inline : aucune requête supplémentaire. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23806732' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8em center;
	background-size: 11px;
	color: var(--bds-encre);
	font-family: var(--bds-sans);
	font-size: .82rem;
	cursor: pointer;
}

body.rtl .woocommerce .woocommerce-ordering select,
body.rtl .bds-outils select {
	background-position: left .8em center;
	padding: .62em .9em .62em 2.2em;
}

.woocommerce .woocommerce-ordering { margin: 0; }

/* --- Jetons de filtres actifs --- */

.bds-jetons {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.bds-jeton {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4em .75em;
	border: 1px solid var(--bds-or-trait);
	border-radius: 2px;
	background: var(--bds-creme);
	color: var(--bds-or-texte);   /* 5,01:1 sur crème */
	font-size: .78rem;
	letter-spacing: .04em;
	text-decoration: none;
	background-image: none;
	transition: background-color var(--bds-court) var(--bds-courbe),
	            color var(--bds-court) var(--bds-courbe);
}

.bds-jeton:hover,
.bds-jeton:focus-visible {
	background: var(--bds-or-marque);
	border-color: var(--bds-or-marque);
	color: var(--bds-encre);
}

.bds-jeton__rond {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(28, 26, 24, .5);
	flex: none;
}

.bds-jeton__croix { font-size: 1.05em; line-height: 1; opacity: .75; }

.bds-jeton--vider {
	background: transparent;
	border-style: dashed;
}

/* ==================================================================
   AUCUN RÉSULTAT
   ================================================================== */

.woocommerce-info,
.woocommerce-no-products-found .woocommerce-info {
	font-family: var(--bds-sans);
}

/* ==================================================================
   TIROIR MOBILE
   Sous 1000 px, le panneau devient un tiroir latéral.
   ================================================================== */

@media (max-width: 999px) {
	.bds-outils__filtrer { display: inline-flex; }
	.bds-filtres__fermer { display: grid; }

	.bds-panneau-filtres {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: 9997;
		width: min(88vw, 380px);
		background: var(--bds-blanc);
		padding: 1.3rem var(--bds-marge, 1.15rem) 2rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		box-shadow: 0 0 40px rgba(28, 26, 24, .2);
		transform: translateX(-102%);
		transition: transform .38s var(--bds-courbe);
		visibility: hidden;
	}

	body.rtl .bds-panneau-filtres { transform: translateX(102%); }

	.bds-panneau-filtres.is-ouvert {
		transform: translateX(0);
		visibility: visible;
	}

	/* Voile derrière le tiroir */
	.bds-voile-filtres {
		position: fixed;
		inset: 0;
		z-index: 9996;
		background: rgba(28, 26, 24, .55);
		opacity: 0;
		visibility: hidden;
		transition: opacity .38s var(--bds-courbe), visibility .38s;
	}

	.bds-voile-filtres.is-ouvert { opacity: 1; visibility: visible; }

	.bds-js .bds-filtres__valider { display: inline-flex; }
}

/* Sans JavaScript, le tiroir doit rester consultable : on le laisse dans
   le flux plutôt que hors écran. */
@media (max-width: 999px) {
	html:not(.bds-js) .bds-panneau-filtres {
		position: static;
		transform: none;
		visibility: visible;
		width: auto;
		box-shadow: none;
		padding-inline: 0;
		margin-bottom: 2rem;
	}

	html:not(.bds-js) .bds-outils__filtrer,
	html:not(.bds-js) .bds-filtres__fermer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bds-panneau-filtres,
	.bds-voile-filtres { transition-duration: .01ms; }
}

/* ==================================================================
   EN-TÊTE DE LA BOUTIQUE
   ------------------------------------------------------------------
   Fil d'Ariane et titre, avec un rythme vertical maîtrisé. C'est ici
   qu'était le vide : le panneau de filtres occupait la rangée du fil
   d'Ariane et lui imposait sa hauteur (voir la note sur grid-row plus
   haut).

   Contrastes : lien du fil d'Ariane or texte sur blanc 5,38:1 ·
   texte courant 9,60:1 · titre encre 16,16:1.
   ================================================================== */

.woocommerce-breadcrumb {
	font-family: var(--bds-sans);
	font-size: .74rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bds-gris);
	margin: 0 0 1.1rem;
	padding: 0;
}

.woocommerce-breadcrumb a {
	color: var(--bds-or-texte);
	text-decoration: none;
	background-image: none;
	transition: color var(--bds-court) var(--bds-courbe);
}

.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus-visible {
	color: var(--bds-or-encre);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.woocommerce-products-header {
	margin: 0 0 clamp(1.6rem, 3vw, 2.6rem);
	padding: 0;
}

.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
	font-family: var(--bds-serif);
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bds-encre);
	margin: 0;
	padding: 0;
}

/* Le filet à losange du logo, en signature sous le titre. */
.woocommerce-products-header::after {
	content: "";
	display: block;
	position: relative;
	width: 84px;
	height: 1px;
	margin-top: 1.1rem;
	background: var(--bds-or-marque);
}

.woocommerce-products-header {
	position: relative;
}

.woocommerce-products-header::before {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 81px;
	width: 6px;
	height: 6px;
	background: var(--bds-or-marque);
	transform: translateY(2.5px) rotate(45deg);
}

/* La description de catégorie, quand il y en a une. */
.term-description {
	font-family: var(--bds-sans);
	font-size: 1rem;
	line-height: 1.72;
	color: var(--bds-texte);
	max-width: 62ch;
	margin: 1.3rem 0 0;
}