/*
Theme Name: Boutique FO
Theme URI: https://www.boutique-fo.fr
Author: Créach Agency
Description: Thème block sur-mesure pour la boutique en ligne Force Ouvrière. Charte FO, WooCommerce, polices auto-hébergées (aucun appel CDN externe).
Version: 1.2.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boutique-fo
Tags: e-commerce, block-theme, full-site-editing, custom-colors
*/

/* ------------------------------------------------------------------
   Ce fichier ne contient que ce que theme.json ne sait pas exprimer :
   micro-interactions, composants WooCommerce, détails d'accessibilité.
   Tout ce qui est jeton de design (couleur, taille, espacement) vit
   dans theme.json - ne pas le dupliquer ici.
------------------------------------------------------------------ */

:root {
	--fo-transition: 180ms cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Accessibilité : cible de focus toujours visible et cohérente */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--rouge);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Lien d'évitement */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--wp--preset--color--encre);
	color: #fff;
	border-radius: 0 0 8px 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}
.skip-link:focus {
	left: 0;
	top: 0;
}

/* ------------------------------------------------------------------
   En-tête
------------------------------------------------------------------ */

.fo-header {
	border-bottom: 1px solid var(--wp--preset--color--bordure);
	background: #fff;
}

.fo-logo {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	color: var(--wp--preset--color--rouge);
	text-decoration: none;
	line-height: 1;
}
.fo-logo:hover { text-decoration: none; }
.fo-logo svg {
	width: auto;
	height: 2.125rem;
	display: block;
}
.fo-logo__mot {
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 800;
	font-size: 1.0625rem;
	letter-spacing: -.03em;
	color: var(--wp--preset--color--encre);
	padding-left: .625rem;
	border-left: 1px solid var(--wp--preset--color--bordure);
	align-self: stretch;
	display: flex;
	align-items: center;
}

/* Bandeau d'annonce */
.fo-bandeau {
	background: var(--wp--preset--color--encre);
	color: #fff;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .01em;
}
.fo-bandeau a { color: #fff; text-decoration: underline; }

/* Navigation : soulignement animé */
.fo-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: .25rem;
}
.fo-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--wp--preset--color--rouge);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--fo-transition);
}
.fo-header .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.fo-header .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Compteur du panier */
.fo-panier {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .875rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--bordure);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	transition: border-color var(--fo-transition), background var(--fo-transition);
}
.fo-panier:hover {
	text-decoration: none;
	border-color: var(--wp--preset--color--rouge);
	background: var(--wp--preset--color--rouge-voile);
}
.fo-panier__nb {
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 .375rem;
	border-radius: 999px;
	background: var(--wp--preset--color--rouge);
	color: #fff;
	font-size: .75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}
.fo-panier__nb[data-vide="1"] { display: none; }

/* ------------------------------------------------------------------
   Cartes produit
------------------------------------------------------------------ */

.wc-block-grid__product,
.wp-block-post.product {
	position: relative;
	background: #fff;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 14px;
	padding: 1rem 1rem 1.25rem;
	transition: border-color var(--fo-transition), box-shadow var(--fo-transition), transform var(--fo-transition);
}
.wc-block-grid__product:hover,
.wp-block-post.product:hover {
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--carte-active);
	transform: translateY(-3px);
}

/* L'image respire dans un cadre gris, jamais rognée : le catalogue FO
   mélange des formats très différents (stylos, sacs, affiches). */
.wc-block-components-product-image,
.wp-block-post-featured-image {
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--gris);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	margin-bottom: .875rem;
}
.wc-block-components-product-image img,
.wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 320ms cubic-bezier(.2, .7, .3, 1);
}
.wc-block-grid__product:hover .wc-block-components-product-image img,
.wp-block-post.product:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.wc-block-components-product-title,
.wc-block-grid__product-title {
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.01em;
	margin-bottom: .375rem;
}

.wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -.02em;
}

/* Prix barré : le prix promo doit dominer visuellement l'ancien prix */
.wc-block-components-product-price del,
.woocommerce-Price-amount del,
del .woocommerce-Price-amount {
	color: var(--wp--preset--color--gris-texte);
	font-size: .8em;
	font-weight: 500;
	opacity: .75;
	margin-right: .375rem;
}
.wc-block-components-product-price ins,
.woocommerce-Price-amount ins {
	text-decoration: none;
	color: var(--wp--preset--color--rouge);
}

/* Pastilles d'état */
.fo-pastille {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	z-index: 2;
	padding: .3125rem .625rem;
	border-radius: 999px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1;
}
.fo-pastille--promo   { background: var(--wp--preset--color--rouge); color: #fff; }
.fo-pastille--nouveau { background: var(--wp--preset--color--encre); color: #fff; }
.fo-pastille--epuise  { background: var(--wp--preset--color--bordure); color: var(--wp--preset--color--gris-texte); }

/* ------------------------------------------------------------------
   Grille catégories (accueil)
------------------------------------------------------------------ */

.fo-categories {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	gap: 1rem;
}
.fo-categorie {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 190px;
	padding: 1.25rem;
	border-radius: 14px;
	background: var(--wp--preset--color--gris);
	border: 1px solid var(--wp--preset--color--bordure);
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	overflow: hidden;
	transition: border-color var(--fo-transition), box-shadow var(--fo-transition), transform var(--fo-transition);
}
.fo-categorie:hover {
	text-decoration: none;
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: var(--wp--preset--shadow--carte-active);
}
.fo-categorie__img {
	position: absolute;
	inset: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: .92;
	transition: transform 400ms cubic-bezier(.2, .7, .3, 1);
}
.fo-categorie:hover .fo-categorie__img { transform: scale(1.05); }
.fo-categorie__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26, 20, 22, .78) 0%, rgba(26, 20, 22, .15) 60%, transparent 100%);
}
.fo-categorie:has(.fo-categorie__img) { color: #fff; }
.fo-categorie__nom {
	position: relative;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -.02em;
	line-height: 1.15;
}
.fo-categorie__nb {
	position: relative;
	font-size: var(--wp--preset--font-size--xs);
	opacity: .8;
	margin-top: .1875rem;
}

/* ------------------------------------------------------------------
   Fiche produit
------------------------------------------------------------------ */

.fo-produit__prix .woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 800;
	letter-spacing: -.03em;
}

/* Ligne de réassurance sous le bouton d'ajout */
.fo-reassurance {
	display: grid;
	gap: .75rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--bordure);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-texte);
}
.fo-reassurance li {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	list-style: none;
}
.fo-reassurance svg {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--wp--preset--color--rouge);
	margin-top: .125rem;
}

/* Disponibilité - le stock vient d'Hiboutik, on l'affiche sans ambiguïté */
.fo-stock {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}
.fo-stock::before {
	content: "";
	width: .5rem;
	height: .5rem;
	border-radius: 999px;
	background: currentColor;
}
.fo-stock--dispo   { color: #1B7F4D; }
.fo-stock--faible  { color: #B26A00; }
.fo-stock--epuise  { color: var(--wp--preset--color--gris-texte); }

/* ------------------------------------------------------------------
   Formulaires & tunnel
------------------------------------------------------------------ */

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], select, textarea,
.wc-block-components-text-input input {
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 10px;
	padding: .75rem .875rem;
	background: #fff;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	transition: border-color var(--fo-transition), box-shadow var(--fo-transition);
}
input:focus, select:focus, textarea:focus {
	border-color: var(--wp--preset--color--rouge);
	box-shadow: 0 0 0 3px var(--wp--preset--color--rouge-voile);
	outline: none;
}

.wc-block-components-checkout-step {
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 14px;
	padding: 1.5rem;
	background: #fff;
}

/* ------------------------------------------------------------------
   Pied de page
------------------------------------------------------------------ */

.fo-footer {
	background: var(--wp--preset--color--encre);
	color: #C9BFC1;
}
.fo-footer h2, .fo-footer h3, .fo-footer h4, .fo-footer h6 { color: #fff; }
.fo-footer a { color: #C9BFC1; text-decoration: none; }
.fo-footer a:hover { color: #fff; text-decoration: underline; }
.fo-footer .fo-logo { color: #fff; }
.fo-footer .fo-logo__mot { color: #fff; border-left-color: rgba(255, 255, 255, .22); }

/* ------------------------------------------------------------------
   Impression : étiquettes code-barres
------------------------------------------------------------------ */

@media print {
	.fo-header, .fo-footer, .fo-bandeau, .wp-block-navigation { display: none !important; }
}

/* ------------------------------------------------------------------
   Accueil - héro
------------------------------------------------------------------ */

/* Le mot mis en avant dans le titre : souligné rouge épais, posé
   derrière le texte plutôt qu'un changement de couleur - le rouge
   reste réservé aux éléments actionnables. */
.fo-accent {
	position: relative;
	white-space: nowrap;
}
.fo-accent::after {
	content: "";
	position: absolute;
	left: -.05em;
	right: -.05em;
	bottom: .06em;
	height: .16em;
	background: var(--wp--preset--color--rouge);
	border-radius: 2px;
	z-index: -1;
}

.fo-panneau-rouge {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 320px;
	padding: 2rem;
	border-radius: 18px;
	background: linear-gradient(135deg, #EF3341 0%, #C4212D 100%);
	color: #fff;
	box-shadow: var(--wp--preset--shadow--rouge);
}
.fo-panneau-rouge__filigrane {
	position: absolute;
	top: -12%;
	right: -14%;
	width: 78%;
	aspect-ratio: 480 / 345;
	opacity: .17;
	background: #fff;
	/* le logo sert de masque : une seule source, aucune image en plus */
	-webkit-mask: url("assets/images/logo-fo.svg") no-repeat center / contain;
	mask: url("assets/images/logo-fo.svg") no-repeat center / contain;
	pointer-events: none;
}
.fo-panneau-rouge__chiffre {
	position: relative;
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(3rem, 7vw, 4.25rem);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	margin: 0 0 .5rem;
}
.fo-panneau-rouge__texte {
	position: relative;
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.45;
	opacity: .95;
}

.fo-bandeau-promo { box-shadow: var(--wp--preset--shadow--rouge); }

/* ------------------------------------------------------------------
   Boutique - colonne de filtres et barre de tri
------------------------------------------------------------------ */

.fo-filtres ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}
.fo-filtres li { margin-bottom: .375rem; }
.fo-filtres a {
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}
.fo-filtres a:hover {
	color: var(--wp--preset--color--rouge);
	text-decoration: none;
}
.fo-filtres .count {
	color: var(--wp--preset--color--gris-texte);
	font-size: .8125rem;
}
.fo-filtres .current-cat > a { color: var(--wp--preset--color--rouge); font-weight: 600; }

.fo-barre-tri select {
	padding: .5rem .75rem;
	font-size: var(--wp--preset--font-size--sm);
}
.fo-barre-tri .woocommerce-result-count {
	margin: 0;
	color: var(--wp--preset--color--gris-texte);
}

/* Sur mobile, les filtres passent au-dessus et se replient */
@media (max-width: 781px) {
	.wp-block-column.fo-filtres {
		border: 0;
		border-radius: 0;
		padding: 0;
	}
}

/* ------------------------------------------------------------------
   Fiche produit - galerie
------------------------------------------------------------------ */

.woocommerce-product-gallery {
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--gris);
}
.woocommerce-product-gallery img { mix-blend-mode: multiply; }
.flex-control-thumbs {
	display: flex;
	gap: .5rem;
	padding: .75rem;
	margin: 0;
	list-style: none;
	background: #fff;
	border-top: 1px solid var(--wp--preset--color--bordure);
}
.flex-control-thumbs li { width: 64px; }
.flex-control-thumbs img {
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: border-color var(--fo-transition);
}
.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover { border-color: var(--wp--preset--color--rouge); }

/* Quantité + bouton alignés sur la fiche */
.fo-produit__infos form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-block: 1.25rem;
}
.fo-produit__infos .quantity input {
	width: 5rem;
	text-align: center;
	padding: .8rem .5rem;
}
.fo-produit__infos button.single_add_to_cart_button {
	flex: 1 1 220px;
	background: var(--wp--preset--color--rouge);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .95em 1.75em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--fo-transition), transform var(--fo-transition);
}
.fo-produit__infos button.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--rouge-fonce);
	transform: translateY(-1px);
}
.fo-produit__infos button.single_add_to_cart_button:disabled {
	background: var(--wp--preset--color--bordure);
	color: var(--wp--preset--color--gris-texte);
	cursor: not-allowed;
	transform: none;
}

/* Listes sans puces (pied de page, menus) */
.is-style-no-bullets { list-style: none; padding-left: 0; }

/* ------------------------------------------------------------------
   Correctifs de rendu WooCommerce
------------------------------------------------------------------ */

/* Les titres de produit sont des liens : ils ne doivent PAS être rouges.
   Le rouge reste le signal « action » (bouton, prix promo, lien de nav). */
.wp-block-post.product .wp-block-post-title a,
.wc-block-grid__product-title a,
.wc-block-components-product-title a {
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}
.wp-block-post.product .wp-block-post-title a:hover,
.wc-block-components-product-title a:hover {
	color: var(--wp--preset--color--rouge);
	text-decoration: none;
}

/* Pastille promo native de WooCommerce, remise à la charte */
.wc-block-components-product-sale-badge {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	right: auto;
	z-index: 2;
	margin: 0;
	padding: .3125rem .625rem;
	border-radius: 999px;
	background: var(--wp--preset--color--rouge);
	color: #fff;
	border: 0;
	font-family: var(--wp--preset--font-family--texte);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1;
}
/* le conteneur du badge ne doit pas réserver de place dans le flux */
.wp-block-post.product > .wp-block-woocommerce-product-sale-badge { position: static; }

/* Le bouton « Ajouter au panier » occupe toute la largeur de la carte */
.wp-block-post.product .wp-block-button__link,
.wp-block-post.product .wc-block-components-product-button a,
.wp-block-post.product .wc-block-components-product-button button {
	display: block;
	width: 100%;
	text-align: center;
}

/* Prix : la ligne barrée + le prix promo sur une seule ligne propre */
.wc-block-components-product-price__regular { margin-right: .375rem; }

/* La carte est un lien : tout le bloc devient cliquable au survol */
.wp-block-post.product { display: flex; flex-direction: column; }
.wp-block-post.product .wc-block-components-product-button { margin-top: auto; }

/* ------------------------------------------------------------------
   Correctif : soulignement du mot accentué
------------------------------------------------------------------ */

/* z-index négatif inutilisable ici (le parent crée un contexte
   d'empilement) : on peint le trait en dégradé de fond, sous le texte. */
.fo-accent::after { content: none; }
.fo-accent {
	background-image: linear-gradient(var(--wp--preset--color--rouge), var(--wp--preset--color--rouge));
	background-repeat: no-repeat;
	background-size: 100% .14em;
	background-position: 0 88%;
	padding-inline: .04em;
}

/* ------------------------------------------------------------------
   États sans image
------------------------------------------------------------------ */

/* Une catégorie sans visuel ne doit pas ressembler à une carte cassée :
   on y pose la marque en filigrane, ce qui la rend intentionnelle. */
.fo-categorie:not(:has(.fo-categorie__img))::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	width: 58%;
	aspect-ratio: 480 / 345;
	background: var(--wp--preset--color--rouge);
	opacity: .1;
	-webkit-mask: url("assets/images/logo-fo.svg") no-repeat center / contain;
	mask: url("assets/images/logo-fo.svg") no-repeat center / contain;
	transition: opacity var(--fo-transition), transform var(--fo-transition);
	pointer-events: none;
}
.fo-categorie:not(:has(.fo-categorie__img)):hover::before {
	opacity: .16;
	transform: translate(-50%, -63%) scale(1.04);
}

/* Le placeholder produit de WooCommerce, adouci */
img[src*="woocommerce-placeholder"] {
	opacity: .35;
	filter: grayscale(1);
}

/* ==================================================================
   LOGO OFFICIEL
   Le fichier fourni est un aplat blanc sur fond transparent : sa couche
   alpha décrit la forme exacte du logo. On l'emploie donc comme masque,
   ce qui permet de le teinter (rouge, blanc, rose pâle) à partir d'une
   seule source, sans jamais retoucher le dessin.
   ================================================================== */

.fo-logo__marque {
	display: block;
	width: 2.85rem;
	height: 2rem;
	flex: none;
	background: currentColor;
	-webkit-mask: url("assets/images/logo-fo.png") no-repeat center / contain;
	mask: url("assets/images/logo-fo.png") no-repeat center / contain;
}
.fo-logo svg { display: none; }

/* Filigranes : même source, teinte et opacité différentes */
.fo-panneau-rouge__filigrane,
.fo-categorie:not(:has(.fo-categorie__img))::before {
	-webkit-mask-image: url("assets/images/logo-fo.png");
	mask-image: url("assets/images/logo-fo.png");
}
.fo-panneau-rouge__filigrane { aspect-ratio: 1000 / 708; }
.fo-categorie:not(:has(.fo-categorie__img))::before { aspect-ratio: 1000 / 708; }

/* ==================================================================
   EN-TÊTE : zone de droite
   Trois éléments voisins avaient trois traitements différents (pilule
   dans une pilule, lien texte rouge, contour isolé). On les ramène à un
   seul gabarit : un champ de recherche sobre, puis deux boutons ronds
   de taille identique.
   ================================================================== */

.fo-outils {
	display: flex;
	align-items: center;
	gap: .5rem;
}

/* Recherche : un seul contenant, la loupe à l'intérieur, pas de bouton */
.fo-header .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
}
.fo-header .wp-block-search__input {
	width: 100%;
	height: 2.625rem;
	padding: 0 .875rem 0 2.375rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 999px;
	background-color: var(--wp--preset--color--gris);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6060' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: .75rem center;
	background-size: 1rem;
	font-size: var(--wp--preset--font-size--sm);
	transition: border-color var(--fo-transition), background-color var(--fo-transition);
}
.fo-header .wp-block-search__input:focus {
	background-color: #fff;
	border-color: var(--wp--preset--color--rouge);
	box-shadow: 0 0 0 3px var(--wp--preset--color--rouge-voile);
}
.fo-header .wp-block-search__button { display: none; }

/* Boutons ronds : compte et panier partagent exactement le même gabarit */
.fo-icone-lien,
.fo-panier {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.625rem;
	height: 2.625rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	transition: border-color var(--fo-transition), background var(--fo-transition), color var(--fo-transition);
}
.fo-icone-lien:hover,
.fo-panier:hover {
	border-color: var(--wp--preset--color--rouge);
	background: var(--wp--preset--color--rouge-voile);
	color: var(--wp--preset--color--rouge);
	text-decoration: none;
}
/* Connecté : pastille discrète, sans changer la largeur de la barre */
.fo-icone-lien.is-connecte { border-color: var(--wp--preset--color--rouge); color: var(--wp--preset--color--rouge); }

.fo-panier { position: relative; }
.fo-panier__nb {
	position: absolute;
	top: -.25rem;
	right: -.25rem;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 .3125rem;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--wp--preset--color--rouge);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}

/* ==================================================================
   NAVIGATION : sous-menus
   Le soulignement rouge animé ne doit exister que sur le premier niveau.
   Appliqué aux entrées empilées d'un sous-menu, il les barrait toutes.
   ================================================================== */

.fo-header .wp-block-navigation__submenu-container {
	padding: .375rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--carte-active);
	background: #fff;
	min-width: 232px;
}
.fo-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: none;
}
.fo-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: .5rem .75rem;
	border-radius: 9px;
	transition: background var(--fo-transition), color var(--fo-transition);
}
.fo-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--rouge-voile);
	color: var(--wp--preset--color--rouge);
	text-decoration: none;
}
.fo-header .wp-block-navigation-item__content:hover { text-decoration: none; }

/* ==================================================================
   BOUTIQUE : colonne de filtres
   La catégorie consultée doit se repérer instantanément, et la
   hiérarchie doit se lire sans compter les parenthèses.
   ================================================================== */

.fo-filtres ul { margin: 0; padding: 0; list-style: none; }
.fo-filtres li { margin: 0 0 1px; }

.fo-filtres li > a {
	display: flex;
	justify-content: space-between;
	gap: .625rem;
	padding: .4375rem .625rem;
	border-radius: 8px;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	transition: background var(--fo-transition), color var(--fo-transition);
}
.fo-filtres li > a:hover {
	background: var(--wp--preset--color--gris);
	color: var(--wp--preset--color--encre);
}
.fo-filtres .count {
	flex: none;
	color: var(--wp--preset--color--gris-texte);
	font-variant-numeric: tabular-nums;
}

/* Catégorie en cours de consultation */
.fo-filtres .current-cat > a,
.fo-filtres li.current-cat-parent > a {
	background: var(--wp--preset--color--rouge-voile);
	color: var(--wp--preset--color--rouge);
	font-weight: 600;
	box-shadow: inset 2px 0 0 var(--wp--preset--color--rouge);
}
.fo-filtres .current-cat > a .count { color: var(--wp--preset--color--rouge); }

/* Sous-catégories : un décrochement suffit à dire la hiérarchie */
.fo-filtres .children {
	margin: 1px 0 .5rem;
	padding-left: .625rem;
	border-left: 1px solid var(--wp--preset--color--bordure);
}
.fo-filtres .children a { font-size: .875rem; }

/* Lien de retrait du filtre en cours */
.fo-filtres__tout {
	display: inline-block;
	margin-top: .75rem;
	font-size: var(--wp--preset--font-size--xs);
}

/* ==================================================================
   FICHE PRODUIT : quantité et réassurance
   ================================================================== */

/* La quantité et le bouton doivent faire la même hauteur, sinon la
   ligne « flotte ». 3.25rem correspond à la hauteur rendue du bouton. */
.fo-produit__infos form.cart { align-items: stretch; }

.fo-produit__infos .quantity {
	display: flex;
	align-items: stretch;
	height: 3.25rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}
.fo-produit__infos .quantity input.qty {
	width: 3rem;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	background: transparent;
	-moz-appearance: textfield;
}
.fo-produit__infos .quantity input.qty::-webkit-outer-spin-button,
.fo-produit__infos .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.fo-produit__infos .quantity input.qty:focus {
	outline: none;
	box-shadow: none;
}

.bfo-qte {
	flex: none;
	width: 2.5rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--encre);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--fo-transition), color var(--fo-transition);
}
.bfo-qte:hover { background: var(--wp--preset--color--gris); color: var(--wp--preset--color--rouge); }
.bfo-qte:disabled { opacity: .35; cursor: not-allowed; background: transparent; }

.fo-produit__infos button.single_add_to_cart_button {
	height: 3.25rem;
	padding-block: 0;
}

/* La liste de réassurance héritait du retrait de puce des <ul> */
.fo-reassurance {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}
.fo-reassurance li { margin-left: 0; }

/* ==================================================================
   COLONNE DE FILTRES : classes réelles du bloc WooCommerce
   Le bloc rend .wc-block-product-categories-list, pas la liste
   .cat-item de l'ancien widget. On cible donc son balisage exact.
   ================================================================== */

.fo-filtres .wc-block-product-categories-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.fo-filtres .wc-block-product-categories-list-item { margin: 0 0 1px; }

.fo-filtres .wc-block-product-categories-list-item > a,
.fo-filtres__tout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .625rem;
	padding: .4375rem .625rem;
	border-radius: 8px;
	color: var(--wp--preset--color--encre);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	transition: background var(--fo-transition), color var(--fo-transition);
}
.fo-filtres .wc-block-product-categories-list-item > a:hover,
.fo-filtres__tout:hover {
	background: var(--wp--preset--color--gris);
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}

.fo-filtres .wc-block-product-categories-list-item-count {
	flex: none;
	color: var(--wp--preset--color--gris-texte);
	font-variant-numeric: tabular-nums;
}
/* le bloc entoure le compteur de parenthèses : on les masque, la
   colonne de droite suffit à le distinguer du libellé */
.fo-filtres .wc-block-product-categories-list-item-count::before,
.fo-filtres .wc-block-product-categories-list-item-count::after { content: none; }

/* Catégorie en cours de consultation */
.fo-filtres a.is-active {
	background: var(--wp--preset--color--rouge-voile);
	color: var(--wp--preset--color--rouge);
	font-weight: 600;
	box-shadow: inset 2px 0 0 var(--wp--preset--color--rouge);
}
.fo-filtres a.is-active .wc-block-product-categories-list-item-count { color: var(--wp--preset--color--rouge); }

/* Sous-catégories : un décrochement dit la hiérarchie */
.fo-filtres .wc-block-product-categories-list--depth-1 {
	margin: 1px 0 .5rem;
	padding-left: .625rem;
	border-left: 1px solid var(--wp--preset--color--bordure);
}
.fo-filtres .wc-block-product-categories-list--depth-1 a { font-size: .8125rem; }

.fo-filtres__tout {
	margin-bottom: .375rem;
	font-weight: 600;
}

/* --- Correctif : le compteur est un frère du lien, pas son enfant ---
   C'est donc le <li> qui doit porter la mise en page et l'état actif. */

.fo-filtres .wc-block-product-categories-list-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .4375rem .625rem;
	border-radius: 8px;
	transition: background var(--fo-transition);
}
.fo-filtres .wc-block-product-categories-list-item:hover { background: var(--wp--preset--color--gris); }

.fo-filtres .wc-block-product-categories-list-item > a {
	display: inline;
	flex: 1 1 auto;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--encre);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}
.fo-filtres .wc-block-product-categories-list-item > a:hover { background: none; }

/* La sous-liste occupe toute la largeur sous son parent */
.fo-filtres .wc-block-product-categories-list-item > .wc-block-product-categories-list { flex: 0 0 100%; }

/* État actif porté par la ligne entière */
.fo-filtres .wc-block-product-categories-list-item:has(> a.is-active) {
	background: var(--wp--preset--color--rouge-voile);
	box-shadow: inset 2px 0 0 var(--wp--preset--color--rouge);
}
.fo-filtres .wc-block-product-categories-list-item:has(> a.is-active) > a,
.fo-filtres .wc-block-product-categories-list-item:has(> a.is-active) > .wc-block-product-categories-list-item-count {
	color: var(--wp--preset--color--rouge);
	font-weight: 600;
}
.fo-filtres a.is-active { background: none; box-shadow: none; }

/* --- Correctifs finaux --- */

/* Les PNG du logo sont recadrés sur leur boîte alpha (ratio 1,084) :
   `contain` remplit donc exactement la boîte, sans marge fantôme. */
.fo-logo__marque {
	width: 2.28rem;
	height: 2.1rem;
}
.fo-footer .fo-logo__marque { width: 2.17rem; height: 2rem; }

/* Le compteur ne doit pas être renvoyé à la ligne par un libellé long :
   c'est au texte du lien de se replier, pas à la ligne de se casser. */
.fo-filtres .wc-block-product-categories-list-item > a { min-width: 0; }
.fo-filtres .wc-block-product-categories-list-item-count { flex: 0 0 auto; }

/* Base flex à 0 : le libellé long se replie sur lui-même au lieu de
   pousser le compteur à la ligne suivante. */
.fo-filtres .wc-block-product-categories-list-item > a { flex: 1 1 0; }

/* ==================================================================
   CORRECTIFS D'INTERACTION
   ================================================================== */

/* Sous-menu : on le descend pour dégager le soulignement rouge, et on
   comble l'écart par une zone transparente afin que le survol ne se
   rompe pas entre le libellé et le menu. */
.fo-header .wp-block-navigation__submenu-container {
	margin-top: 12px;
}
.fo-header .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

/* Galerie produit : plus d'agrandissement au survol. */
.woocommerce-product-gallery img,
.woocommerce-product-gallery__image img {
	transform: none !important;
	transition: none;
}
.woocommerce-product-gallery .zoomImg { display: none !important; }

/* Quantité : bloc calé à gauche, chiffre parfaitement centré.
   Les glyphes « - » et « + » n'ont pas la même chasse : on leur donne
   une largeur identique pour que le champ reste au milieu. */
.fo-produit__infos form.cart {
	justify-content: flex-start;
}
.fo-produit__infos .quantity {
	flex: 0 0 auto;
	margin: 0;
	justify-content: space-between;
}
.fo-produit__infos .quantity input.qty {
	width: 2.75rem;
	padding: 0;
	text-align: center;
	text-indent: 0;
}
.bfo-qte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	padding: 0;
	font-variant-numeric: tabular-nums;
}

/* ==================================================================
   INFOBULLES DE L'EN-TÊTE
   Les attributs `title` natifs mettent une seconde à apparaître et
   ignorent la charte. On les remplace par une infobulle maison, qui
   se déclenche aussi au clavier pour rester accessible.
   L'intitulé reste porté par `aria-label` : l'infobulle est purement
   visuelle et n'ajoute rien pour un lecteur d'écran.
   ================================================================== */

.fo-outils [data-infobulle] { position: relative; }

.fo-outils [data-infobulle]::after {
	content: attr(data-infobulle);
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	z-index: 30;
	padding: .375rem .625rem;
	border-radius: 7px;
	background: var(--wp--preset--color--encre);
	color: #fff;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -4px);
	transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
	pointer-events: none;
}

/* Petite pointe vers le bouton */
.fo-outils [data-infobulle]::before {
	content: "";
	position: absolute;
	top: calc(100% + 5px);
	left: 50%;
	z-index: 30;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--encre);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -4px) rotate(45deg);
	transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
	pointer-events: none;
	border-radius: 1px;
}

.fo-outils [data-infobulle]:hover::after,
.fo-outils [data-infobulle]:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.fo-outils [data-infobulle]:hover::before,
.fo-outils [data-infobulle]:focus-visible::before {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) rotate(45deg);
}

/* Sur écran tactile, il n'y a pas de survol : l'infobulle n'aurait
   d'autre effet que de clignoter au moment du tap. */
@media (hover: none) {
	.fo-outils [data-infobulle]::after,
	.fo-outils [data-infobulle]::before { content: none; }
}

/* Même piège que dans l'espace client : WooCommerce pose des pseudo-
   éléments de clearfix sur form.cart. Dans un conteneur en flex ils
   deviennent des éléments à part entière, et leur contenu (une espace)
   plus l'intervalle décalaient le bloc quantité de 16 px vers la
   droite, désaligné du texte au-dessus. */
.woocommerce div.product .fo-produit__infos form.cart::before,
.woocommerce div.product .fo-produit__infos form.cart::after {
	display: none;
}

/* WooCommerce laisse aussi 4 px de rembourrage à gauche du formulaire.
   Ajoutés à l'intervalle de la grille flex, ils décalaient le bloc
   quantité de 16 px par rapport au texte au-dessus. */
.woocommerce div.product .fo-produit__infos form.cart {
	padding-left: 0;
	margin-left: 0;
}

/* Le halo de focus collait au logo. On lui donne de l'air par du
   rembourrage, compensé par une marge négative pour ne pas décaler
   l'en-tête. */
.fo-logo {
	padding: .3125rem .5rem;
	margin: -.3125rem -.5rem;
	border-radius: 11px;
}
.fo-logo:focus-visible {
	outline: 2px solid var(--wp--preset--color--rouge);
	outline-offset: 1px;
}

/* ==================================================================
   BOUTON D'AJOUT AU PANIER DES LISTES
   ================================================================== */

.fo-bouton-panier {
	display: block;
	width: 100%;
	margin-top: var(--wp--preset--spacing--20);
	padding: .8em 1.4em;
	border-radius: 999px;
	background: var(--wp--preset--color--rouge);
	color: #fff;
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background var(--fo-transition);
}
.fo-bouton-panier:hover {
	background: var(--wp--preset--color--rouge-fonce);
	color: #fff;
	text-decoration: none;
}
.fo-bouton-panier.is-epuise {
	background: var(--wp--preset--color--gris);
	color: var(--wp--preset--color--gris-texte);
	cursor: not-allowed;
}
/* Retour visuel pendant la requête, fourni par WooCommerce */
.fo-bouton-panier.loading { opacity: .6; pointer-events: none; }
.fo-bouton-panier.added::after {
	content: " ✓";
	font-weight: 700;
}
/* Le lien « Voir le panier » que WooCommerce ajoute après l'ajout */
.wp-block-post.product .added_to_cart {
	display: block;
	margin-top: .5rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-align: center;
}

/* ==================================================================
   ÉTAT VIDE
   Une liste vide ne doit pas ressembler à une page cassée.
   ================================================================== */

.fo-vide {
	max-width: 460px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	text-align: center;
}
.fo-vide__icone {
	display: block;
	width: 4rem;
	height: 4rem;
	margin: 0 auto var(--wp--preset--spacing--30);
	border-radius: 999px;
	background: var(--wp--preset--color--rouge-voile);
	position: relative;
}
.fo-vide__icone::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--wp--preset--color--rouge);
	opacity: .55;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ==================================================================
   PIED DE PAGE COLLÉ AU BAS DE FENÊTRE
   Sur les pages courtes (404, confirmation), le pied de page ne doit
   pas flotter au milieu de l'écran avec du vide en dessous.
   ================================================================== */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}
.wp-site-blocks > main { flex: 1 0 auto; }
.wp-site-blocks > footer { flex: none; margin-block-start: 0; }

/* ==================================================================
   VUE MOBILE
   ================================================================== */

/* --- En-tête : tout sur une ligne --- */

.fo-recherche { position: relative; }
.fo-recherche__panneau { position: relative; }
.fo-recherche__panneau input[type="search"] {
	width: 210px;
	height: 2.625rem;
	padding: 0 .875rem 0 2.375rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 999px;
	background-color: var(--wp--preset--color--gris);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6060' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: .75rem center;
	background-size: 1rem;
	font-size: var(--wp--preset--font-size--sm);
}
.fo-recherche__panneau input[type="search"]:focus {
	background-color: #fff;
	border-color: var(--wp--preset--color--rouge);
	box-shadow: 0 0 0 3px var(--wp--preset--color--rouge-voile);
	outline: none;
}
/* Sur grand écran le champ est permanent, la bascule inutile */
.fo-recherche__bascule { display: none; }

@media (max-width: 900px) {
	/* La barre d'outils et le menu partagent la première ligne */
	.fo-header .alignwide { flex-wrap: nowrap; gap: .5rem; }
	.fo-header .wp-block-navigation { order: 3; flex: none; }
	.fo-outils { order: 2; margin-left: auto; }
	.fo-logo__mot { display: none; }

	.fo-recherche__bascule { display: inline-flex; }

	/* Le champ devient un panneau déroulant sous l'en-tête */
	.fo-recherche__panneau {
		position: absolute;
		top: calc(100% + 14px);
		right: -3.25rem;
		width: min(78vw, 320px);
		padding: .625rem;
		border: 1px solid var(--wp--preset--color--bordure);
		border-radius: 14px;
		background: #fff;
		box-shadow: var(--wp--preset--shadow--carte-active);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
		z-index: 40;
	}
	.fo-recherche.is-ouvert .fo-recherche__panneau {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.fo-recherche__panneau input[type="search"] { width: 100%; }
}

/* --- Boutique : filtres repliés, sur la ligne de tri --- */

.fo-filtres-pliant > summary {
	display: none;
	cursor: pointer;
	list-style: none;
}
.fo-filtres-pliant > summary::-webkit-details-marker { display: none; }

@media (max-width: 781px) {
	.fo-barre-tri {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: .625rem;
	}
	/* Le décompte de résultats passe sous la ligne : la place manque */
	.fo-barre-tri .woocommerce-result-count { display: none; }
	.fo-barre-tri select { max-width: 52vw; }

	.wp-block-column.fo-filtres { display: contents; }

	.fo-filtres-pliant {
		position: relative;
		flex: none;
	}
	.fo-filtres-pliant > summary {
		display: inline-flex;
		align-items: center;
		gap: .4375rem;
		padding: .5rem .875rem;
		border: 1px solid var(--wp--preset--color--bordure);
		border-radius: 999px;
		background: #fff;
		font-size: var(--wp--preset--font-size--sm);
		font-weight: 600;
		white-space: nowrap;
	}
	.fo-filtres-pliant > summary::before {
		content: "";
		width: 1rem;
		height: 1rem;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M3 5h18M6 12h12M10 19h4'/%3E%3C/svg%3E") no-repeat center / contain;
	}
	.fo-filtres-pliant[open] > summary {
		border-color: var(--wp--preset--color--rouge);
		background: var(--wp--preset--color--rouge-voile);
		color: var(--wp--preset--color--rouge);
	}

	/* Le contenu se déploie en panneau, sans pousser les produits */
	.fo-filtres-pliant__corps {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		z-index: 20;
		width: min(86vw, 320px);
		max-height: 62vh;
		overflow-y: auto;
		padding: .875rem;
		border: 1px solid var(--wp--preset--color--bordure);
		border-radius: 14px;
		background: #fff;
		box-shadow: var(--wp--preset--shadow--carte-active);
	}
	.fo-filtres-pliant__corps h6 { margin-top: var(--wp--preset--spacing--20); }
	.fo-filtres-pliant__corps h6:first-child { margin-top: 0; }
}

/* --- Grilles de produits : deux par ligne jusqu'à 450 px --- */

@media (max-width: 781px) {
	/* WordPress impose une colonne unique sous 600 px, et répète sa
	   classe quatre fois pour verrouiller la règle. Pour la desserrer
	   sans !important, il faut reprendre le même sélecteur et y ajouter
	   le nom de balise. C'est verbeux, mais c'est le prix à payer pour
	   rester dans la cascade. */
	ul.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid,
	.wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wp-block-post.product { padding: .75rem .75rem 1rem; }
	.wp-block-post.product .wp-block-post-title { font-size: .8125rem; }
	.fo-bouton-panier { padding: .7em 1em; font-size: .8125rem; }
}
@media (max-width: 450px) {
	ul.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid,
	.wc-block-grid__products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==================================================================
   EN-TÊTE COLLÉ EN HAUT
   Le bloc « partie de modèle » enveloppe l'en-tête dans un conteneur
   qui fait exactement sa hauteur. Or un élément `sticky` ne se déplace
   que dans les limites de son parent : sans marge de manœuvre, il
   repartait avec le contenu. C'est donc l'enveloppe qu'il faut coller,
   sa hauteur étant celle de la page.
   ================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 30;
}
.fo-header {
	position: static;
	transition: box-shadow var(--fo-transition);
}
/* Ombre discrète une fois le contenu passé dessous */
.fo-header.is-defile { box-shadow: 0 1px 0 var(--wp--preset--color--bordure), 0 10px 24px -18px rgba(26, 20, 22, .35); }

/* Sur petit écran, le bandeau d'annonce mange un cinquième de la
   hauteur utile : on le replie dès que la page défile. */
@media (max-width: 900px) {
	.fo-bandeau {
		overflow: hidden;
		max-height: 6rem;
		transition: max-height 200ms ease, opacity 150ms ease;
	}
	.fo-header.is-defile .fo-bandeau {
		max-height: 0;
		opacity: 0;
	}
}

/* Le bouton d'ajout est un <a>, que WordPress ne passe pas en
   `border-box`. Sa largeur de 100 % s'ajoutait donc au rembourrage
   latéral et le faisait déborder de la carte. */
.fo-bouton-panier,
.fo-vide .wp-block-button__link,
.bfo-compte-carte {
	box-sizing: border-box;
	max-width: 100%;
}

/* ==================================================================
   FILTRES PRIX ET DISPONIBILITÉ
   ================================================================== */

.fo-filtre { margin-top: var(--wp--preset--spacing--40); }
.fo-filtre__titre {
	margin: 0 0 .625rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-texte);
}
.fo-filtre__titre + * + .fo-filtre__titre,
.fo-filtre__prix + .fo-filtre__titre { margin-top: var(--wp--preset--spacing--30); }

.fo-filtre__prix {
	display: flex;
	align-items: center;
	gap: .375rem;
	margin-bottom: var(--wp--preset--spacing--20);
}
.fo-filtre__prix label { flex: 1 1 0; min-width: 0; }
.fo-filtre__prix input {
	width: 100%;
	box-sizing: border-box;
	padding: .5rem .5rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
	-moz-appearance: textfield;
}
.fo-filtre__prix input::-webkit-outer-spin-button,
.fo-filtre__prix input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fo-filtre__tiret,
.fo-filtre__unite {
	flex: none;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-texte);
}

.fo-filtre__case {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}
.fo-filtre__case input { accent-color: var(--wp--preset--color--rouge); }

.fo-filtre__actions {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: var(--wp--preset--spacing--30);
}
.fo-filtre__valider {
	padding: .5rem 1.125rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--encre);
	color: #fff;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--fo-transition);
}
.fo-filtre__valider:hover { background: var(--wp--preset--color--rouge); }
.fo-filtre__vider { font-size: var(--wp--preset--font-size--xs); }

/* ==================================================================
   CARTE DE LA BOUTIQUE PHYSIQUE
   ================================================================== */

.fo-carte {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 18px;
	background: #fff;
	box-shadow: var(--wp--preset--shadow--carte);
}

.fo-carte__plan {
	position: relative;
	aspect-ratio: 420 / 260;
	background: #F4EFEF;
}
.fo-carte__plan svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fo-carte__etiquette {
	position: absolute;
	left: .875rem;
	bottom: .875rem;
	padding: .3125rem .625rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(4px);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-texte);
}

.fo-carte__infos { padding: 1.375rem 1.5rem 1.5rem; }

.fo-carte__adresse {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.45;
}
.fo-carte__adresse strong {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 1.125rem;
	letter-spacing: -.01em;
}

.fo-carte__acces {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .5rem;
}
.fo-carte__acces li {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gris-texte);
}

/* Pastilles de ligne de métro, aux couleurs du réseau parisien */
.fo-metro {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 999px;
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1;
}
.fo-metro--13 { background: #89C7D6; color: #1A1416; }
.fo-metro--4  { background: #BB4E9B; }
.fo-metro--6  { background: #79BB92; color: #1A1416; }

.fo-carte__puce {
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 999px;
	background: var(--wp--preset--color--rouge-voile);
	position: relative;
}
.fo-carte__puce::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: .75rem;
	height: .75rem;
	background: var(--wp--preset--color--rouge);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center / contain;
}

.fo-carte__lien {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}
.fo-carte__lien:hover { text-decoration: underline; }

@media (min-width: 782px) {
	.fo-carte { grid-template-columns: 1.15fr 1fr; }
	.fo-carte__plan { aspect-ratio: auto; height: 100%; min-height: 250px; }
}

/* ==================================================================
   RÉASSURANCE EN TROIS COLONNES
   Sur la fiche produit, la liste est verticale : la colonne est
   étroite. Sur l'accueil, la pleine largeur permet de la déployer en
   trois cartes, plus lisibles d'un coup d'œil.
   ================================================================== */

.fo-reassurance-large .fo-reassurance {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	/* Le filet est porté par le conteneur, pas par la liste : sinon il
	   se doublait avec celui de la section. */
	border-top: 0;
}

.fo-reassurance-large .fo-reassurance li {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 1.375rem 1.5rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 16px;
	background: #fff;
	transition: border-color var(--fo-transition), transform var(--fo-transition), box-shadow var(--fo-transition);
}
.fo-reassurance-large .fo-reassurance li:hover {
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--carte-active);
}

.fo-reassurance-large .fo-reassurance svg {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0 0 .875rem;
	padding: .625rem;
	box-sizing: content-box;
	border-radius: 999px;
	background: var(--wp--preset--color--rouge-voile);
	color: var(--wp--preset--color--rouge);
}

.fo-reassurance-large .fo-reassurance span {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--gris-texte);
}
.fo-reassurance-large .fo-reassurance strong {
	display: block;
	margin-bottom: .1875rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--wp--preset--color--encre);
}

@media (max-width: 781px) {
	.fo-reassurance-large .fo-reassurance { grid-template-columns: minmax(0, 1fr); }
	.fo-reassurance-large .fo-reassurance li { padding: 1rem 1.125rem; }
}

/* ==================================================================
   COLONNE DE FILTRES COLLÉE, AVEC SON PROPRE DÉFILEMENT
   Sur grand écran, la colonne suit la lecture au lieu de disparaître
   en haut de page. Quand elle est plus haute que l'écran, c'est elle
   qui défile, pas la page.
   ================================================================== */

@media (min-width: 782px) {
	.wp-block-column.fo-filtres {
		/* Un élément étiré à la hauteur de la ligne n'a nulle part où
		   coller : il faut le laisser à sa hauteur naturelle. */
		align-self: flex-start;
		position: sticky;
		top: calc(var(--fo-entete-h, 150px) + 1.25rem);
		/* Hauteur ajustée en continu par le script : tant que la colonne
		   n'est pas collée, elle démarre plus bas que l'en-tête et une
		   hauteur figée la ferait déborder sous l'écran. */
		max-height: var(--fo-filtres-h, calc(100vh - var(--fo-entete-h, 150px) - 2.5rem));
		overflow-y: auto;
		/* Le défilement s'arrête à la colonne au lieu de se propager
		   à la page une fois arrivé au bout. */
		overscroll-behavior: contain;
		padding-right: .5rem;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--bordure) transparent;
	}

	.wp-block-column.fo-filtres::-webkit-scrollbar { width: 6px; }
	.wp-block-column.fo-filtres::-webkit-scrollbar-track { background: transparent; }
	.wp-block-column.fo-filtres::-webkit-scrollbar-thumb {
		background: var(--wp--preset--color--bordure);
		border-radius: 999px;
	}
	.wp-block-column.fo-filtres:hover::-webkit-scrollbar-thumb { background: #D6C9C9; }

	/* Pas de fondu en bas : il effaçait le dernier lien de la colonne,
	   ce qui donnait l'impression d'un texte à moitié chargé. */
}

/* ==================================================================
   FILTRE PRIX : CURSEUR À DEUX POIGNÉES
   Deux champs `range` superposés. Le premier laisse passer les clics
   (`pointer-events: none`) sauf sur sa poignée, sinon celui du dessus
   capterait toute la zone et la poignée basse serait inatteignable.
   ================================================================== */

.fo-filtre__curseur {
	position: relative;
	height: 1.5rem;
	margin: 0 .25rem .875rem;
}

.fo-filtre__piste,
.fo-filtre__plage {
	position: absolute;
	top: 50%;
	height: 4px;
	border-radius: 999px;
	transform: translateY(-50%);
	pointer-events: none;
}
.fo-filtre__piste {
	left: 0;
	right: 0;
	background: var(--wp--preset--color--bordure);
}
.fo-filtre__plage {
	left: var(--depart, 0%);
	right: calc(100% - var(--fin, 100%));
	background: var(--wp--preset--color--rouge);
}

.fo-filtre__poignee {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1.5rem;
	margin: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}
.fo-filtre__poignee:focus { outline: none; }

.fo-filtre__poignee::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--wp--preset--color--rouge);
	box-shadow: 0 1px 4px rgba(26, 20, 22, .28);
	cursor: grab;
	transition: transform 120ms ease;
}
.fo-filtre__poignee::-moz-range-thumb {
	pointer-events: auto;
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--wp--preset--color--rouge);
	box-shadow: 0 1px 4px rgba(26, 20, 22, .28);
	cursor: grab;
}
.fo-filtre__poignee:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }
.fo-filtre__poignee:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--wp--preset--color--rouge-voile); }
.fo-filtre__poignee::-moz-range-track { background: none; }

/* --- Filtrage instantané : le bouton disparaît quand JavaScript prend
   le relais, mais reste servi pour qui n'en a pas. --- */
.fo-filtre[data-auto] .fo-filtre__valider { display: none; }
.fo-filtre[data-auto] .fo-filtre__actions { margin-top: var(--wp--preset--spacing--20); }

.fo-filtre__attente {
	display: none;
	width: .875rem;
	height: .875rem;
	border: 2px solid var(--wp--preset--color--bordure);
	border-top-color: var(--wp--preset--color--rouge);
	border-radius: 999px;
	animation: fo-tourne .6s linear infinite;
}
.fo-filtre.is-attente .fo-filtre__attente { display: inline-block; }
@keyframes fo-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.fo-filtre__attente { animation: none; }
}

/* ==================================================================
   COMPTEURS DE CATÉGORIE EN PASTILLE DISCRÈTE
   ================================================================== */

.fo-filtres .wc-block-product-categories-list-item-count {
	padding: .0625rem .4375rem;
	border-radius: 999px;
	background: var(--wp--preset--color--gris);
	color: #9C8E8E;
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1.5;
}
.fo-filtres .wc-block-product-categories-list-item:has(> a.is-active) > .wc-block-product-categories-list-item-count {
	background: #fff;
	color: var(--wp--preset--color--rouge);
}

/* Un peu d'air entre le contenu et la barre de défilement */
@media (min-width: 782px) {
	.wp-block-column.fo-filtres { padding-right: 1rem; }
}

/* ==================================================================
   BARRE FILTRER / TRI : UN SEUL GABARIT
   Les deux commandes étaient côte à côte avec des formes différentes
   (pilule contre rectangle arrondi) et des hauteurs qui ne tombaient
   pas juste. On les aligne sur le même dessin.
   ================================================================== */

.fo-barre-tri select,
.fo-filtres-pliant > summary {
	height: 2.625rem;
	box-sizing: border-box;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 999px;
	background-color: #fff;
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1;
}

/* Le chevron natif du menu déroulant ne suit pas la charte : on le
   remplace par le nôtre, calé sur le même gris que le reste. */
.fo-barre-tri select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .875rem center;
	background-size: 1rem;
	cursor: pointer;
	transition: border-color var(--fo-transition), background-color var(--fo-transition);
}
.fo-barre-tri select:hover { border-color: #D6C9C9; }
.fo-barre-tri select:focus-visible {
	border-color: var(--wp--preset--color--rouge);
	box-shadow: 0 0 0 3px var(--wp--preset--color--rouge-voile);
	outline: none;
}

@media (max-width: 781px) {
	.fo-filtres-pliant > summary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .4375rem;
	}
	.fo-barre-tri select { max-width: 54vw; }
}

/* ==================================================================
   RÉASSURANCE : PAS DE SURVOL SUR UN BLOC NON CLIQUABLE
   Le soulèvement et l'ombre laissaient croire à un lien.
   ================================================================== */

.fo-reassurance-large .fo-reassurance li,
.fo-reassurance-large .fo-reassurance li:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--wp--preset--color--bordure);
	transition: none;
}

/* ==================================================================
   TUILES DE CATÉGORIE, VERSION LISIBLE
   L'ancienne boutique posait le libellé en évidence au-dessus du
   produit : c'était juste, on identifie la rubrique avant de regarder
   l'objet. On reprend ce principe, sur une seule ligne au format
   bureau, et on abandonne le texte incrusté sur la photo qui rendait
   la lecture dépendante du visuel.
   ================================================================== */

.fo-categories {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: .625rem;
}

.fo-categorie {
	/* On remet à plat la mise en forme précédente */
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 0;
	padding: .875rem .5rem 1rem;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 14px;
	background: linear-gradient(180deg, #FFFFFF 0%, var(--wp--preset--color--rouge-voile) 100%);
	color: var(--wp--preset--color--encre);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--fo-transition), transform var(--fo-transition), box-shadow var(--fo-transition);
}
.fo-categorie:hover {
	border-color: var(--wp--preset--color--rouge);
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--rouge);
	text-decoration: none;
}
/* La règle d'origine passait le texte en blanc dès qu'il y avait une
   image de fond : sans image de fond, elle n'a plus lieu d'être. */
.fo-categorie:has(.fo-categorie__img) { color: var(--wp--preset--color--encre); }
.fo-categorie:not(:has(.fo-categorie__img))::before { content: none; }

.fo-categorie__nom {
	position: relative;
	order: 1;
	font-family: var(--wp--preset--font-family--titre);
	font-size: .75rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rouge);
	hyphens: auto;
}

.fo-categorie__visuel {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: .625rem;
	aspect-ratio: 1;
}
.fo-categorie__img {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 1;
	mix-blend-mode: multiply;
	transition: transform 320ms cubic-bezier(.2, .7, .3, 1);
}
.fo-categorie:hover .fo-categorie__img { transform: scale(1.06); }

.fo-categorie__nb {
	order: 3;
	margin-top: .5rem;
	font-size: .6875rem;
	font-weight: 600;
	color: var(--wp--preset--color--gris-texte);
	opacity: .85;
}

/* Sans visuel, la marque tient lieu d'illustration */
.fo-categorie:not(:has(.fo-categorie__img)) .fo-categorie__visuel::after {
	content: "";
	width: 55%;
	aspect-ratio: 1000 / 708;
	background: var(--wp--preset--color--rouge);
	opacity: .14;
	-webkit-mask: url("assets/images/logo-fo.png") no-repeat center / contain;
	mask: url("assets/images/logo-fo.png") no-repeat center / contain;
}

@media (max-width: 1200px) {
	.fo-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.fo-categorie__nom { font-size: .8125rem; }
}
@media (max-width: 600px) {
	.fo-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Les libellés n'ont pas tous le même nombre de lignes : sans hauteur
   réservée, les visuels et les compteurs se décalent d'une tuile à
   l'autre. On réserve deux lignes et on ancre le compteur en bas. */
/* Pas de `height: 100%` ici : dans une grille, les éléments s'étirent
   déjà à la hauteur de leur ligne. Imposée au bandeau, la règle le
   bloquait à la hauteur calculée pour la ligne et son contenu débordait
   par-dessus les tuiles du dessous. */
.fo-categorie__nom {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.4em;
}
.fo-categorie__nb { margin-top: auto; padding-top: .5rem; }
.fo-categorie__visuel { margin-top: .5rem; }

/* Le menu de tri est enveloppé dans un <form> WooCommerce qui conserve
   sa marge basse par défaut : elle décalait la commande de quelques
   pixels vers le haut par rapport au bouton « Filtrer ». */
.fo-barre-tri form.woocommerce-ordering {
	display: flex;
	align-items: center;
	margin: 0;
}
.fo-barre-tri { align-items: center; }

/* Libellé de catégorie plus affirmé, sans compteur : le nombre de
   références n'aide pas au choix et concurrençait le nom. */
.fo-categorie__nom {
	font-size: .9375rem;
	letter-spacing: .02em;
	min-height: 2.6em;
}
.fo-categorie { padding-bottom: 1.125rem; }
.fo-categorie__visuel { margin-top: .625rem; }
@media (max-width: 1200px) {
	.fo-categorie__nom { font-size: 1rem; }
}

/* La carte est désormais un service externe : l'iframe remplit le
   cadre et perd sa bordure par défaut. */
.fo-carte__plan iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	border: 0;
}
.fo-carte__plan { background: var(--wp--preset--color--gris); }

/* ==================================================================
   TRI EN ICÔNE SOUS 375 px
   En dessous, le libellé « Tri par défaut » ne tient plus : à 320 px
   la commande débordait de 20 px. Le tri étant peu utilisé, on le
   réduit à une icône plutôt que de comprimer les deux commandes.
   ================================================================== */

@media (max-width: 374px) {
	.fo-barre-tri select {
		/* font-size: 0 masque le libellé de la commande fermée sans
		   toucher à la liste déroulante, dont les options gardent leur
		   taille ci-dessous. Plus sûr qu'une couleur transparente, qui
		   rend la liste illisible sur certains systèmes. */
		width: 2.625rem;
		min-width: 2.625rem;
		padding: 0;
		font-size: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1416' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h11M4 12h7M4 17h4'/%3E%3Cpath d='M17 10l3-3 3 3'/%3E%3Cpath d='M20 7v10'/%3E%3C/svg%3E");
		background-position: center;
		background-size: 1.125rem;
	}
	.fo-barre-tri select option {
		font-size: .9375rem;
		color: var(--wp--preset--color--encre);
	}

	/* Le bouton Filtrer reprend la place libérée */
	.fo-filtres-pliant { flex: 1 1 auto; }
	.fo-filtres-pliant > summary { width: 100%; }
}

/* ==================================================================
   CATÉGORIES : UN BANDEAU PUIS UNE LIGNE DE SEPT
   « Les indispensables » ouvre la section sur toute la largeur, ce qui
   libère assez de place pour agrandir les libellés des sept autres.
   ================================================================== */

.fo-categories {
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: .75rem;
}

.fo-categorie--bandeau {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 132px;
	padding: 1.25rem 0 1.25rem 1.75rem;
	text-align: left;
	background: linear-gradient(100deg, #FFFFFF 0%, var(--wp--preset--color--rouge-voile) 100%);
}
.fo-categorie--bandeau .fo-categorie__nom {
	order: 0;
	display: block;
	min-height: 0;
	font-size: 1.5rem;
	letter-spacing: -.01em;
	text-transform: none;
	line-height: 1.1;
}
/* Une accroche discrète, ajoutée en CSS pour ne pas alourdir le bloc */
.fo-categorie--bandeau .fo-categorie__nom::after {
	content: "La sélection qui ne quitte jamais le stock";
	display: block;
	margin-top: .3125rem;
	font-family: var(--wp--preset--font-family--texte);
	font-size: .9375rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--gris-texte);
}
.fo-categorie--bandeau .fo-categorie__visuel {
	order: 1;
	flex: 0 0 auto;
	width: 30%;
	max-width: 280px;
	margin: 0;
	aspect-ratio: 16 / 7;
}
.fo-categorie--bandeau .fo-categorie__img { object-position: center right; }

/* Les sept suivantes : libellés plus grands, tuiles plus aérées */
.fo-categorie:not(.fo-categorie--bandeau) {
	padding: 1.125rem .625rem 1.25rem;
}
.fo-categorie:not(.fo-categorie--bandeau) .fo-categorie__nom {
	font-size: 1rem;
	letter-spacing: .01em;
	min-height: 2.4em;
}

@media (max-width: 1200px) {
	.fo-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.fo-categorie--bandeau {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem;
		padding: 1.25rem;
		min-height: 0;
	}
	.fo-categorie--bandeau .fo-categorie__visuel { width: 100%; max-width: none; }
	.fo-categorie--bandeau .fo-categorie__nom { font-size: 1.25rem; }
}
@media (max-width: 600px) {
	.fo-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fo-categorie:not(.fo-categorie--bandeau) .fo-categorie__nom { font-size: .9375rem; }
}

/* Bandeau resserré : le visuel occupe toute la hauteur et garde une
   marge à droite, au lieu de flotter contre le bord. */
.fo-categorie--bandeau {
	min-height: 0;
	padding: 1.5rem 1.75rem;
	gap: 2rem;
}
.fo-categorie--bandeau .fo-categorie__visuel {
	width: 26%;
	max-width: 250px;
	aspect-ratio: auto;
	height: 118px;
}
.fo-categorie--bandeau .fo-categorie__img { object-position: center; }

/* Tuiles : visuel en format paysage plutôt que carré, ce qui réduit le
   vide laissé par les photos qui ne remplissent pas le cadre. */
.fo-categorie:not(.fo-categorie--bandeau) .fo-categorie__visuel {
	aspect-ratio: 4 / 3;
	margin-top: .5rem;
}
.fo-categorie:not(.fo-categorie--bandeau) {
	padding: 1rem .625rem 1.125rem;
}

@media (max-width: 781px) {
	.fo-categorie--bandeau .fo-categorie__visuel { height: 132px; }
}

/* ==================================================================
   HIÉRARCHIE DE L'ACCUEIL
   Les nouveautés ne doivent pas capter plus d'attention que le choix
   des catégories, qui est l'entrée principale du catalogue : leur
   bouton passe donc en second plan.
   ================================================================== */

.fo-nouveautes .fo-bouton-panier {
	background: #fff;
	border: 1px solid var(--wp--preset--color--bordure);
	color: var(--wp--preset--color--encre);
	transition: border-color var(--fo-transition), color var(--fo-transition), background var(--fo-transition);
}
.fo-nouveautes .fo-bouton-panier:hover {
	background: #fff;
	border-color: var(--wp--preset--color--rouge);
	color: var(--wp--preset--color--rouge);
}
.fo-nouveautes .fo-bouton-panier.is-epuise {
	background: var(--wp--preset--color--gris);
	border-color: var(--wp--preset--color--bordure);
	color: var(--wp--preset--color--gris-texte);
}

/* Bandeau destockage : un rouge à peine posé, l'accent reste au bouton. */
.fo-bandeau-promo {
	box-shadow: none;
	border: 1px solid #F3D9DC;
}

/* ==================================================================
   VARIANTE À L'ESSAI : TUILES DE CATÉGORIE PLUS ROUGES
   Le rouge occupe le haut de la tuile, derrière le libellé, puis se
   dissout vers le blanc là où se pose la photo — le produit garde donc
   un fond neutre. Bloc isolé pour pouvoir être retiré d'un seul tenant.
   ================================================================== */

.fo-categorie:not(.fo-categorie--bandeau) {
	/* Repères en pixels et non en pourcentage : le libellé occupe 17 à
	   55 px et le visuel démarre à 63 px. Exprimé en pourcentage, le
	   dégradé se déplaçait avec la hauteur de la tuile et venait mordre
	   sur la photo. */
	/* Maintenant que les visuels sont détourés, le produit peut se poser
	   sur le dégradé : on prolonge donc le rouge sous le libellé et on
	   étale la transition, au lieu de la couper net à 64 px. */
	background: linear-gradient(
		180deg,
		#EF3341 0,
		#EF3341 62px,
		#EE5A65 84px,
		#F49AA1 108px,
		#FBDDE0 130px,
		#FFFFFF 158px
	);
	/* Pas de bordure : même transparente, elle laissait apparaître un
	   filet du dégradé sur les arêtes arrondies. */
	border: 0;
	background-clip: padding-box;
}
.fo-categorie:not(.fo-categorie--bandeau) .fo-categorie__nom {
	color: #FFFFFF;
}
.fo-categorie:not(.fo-categorie--bandeau):hover {
	box-shadow: 0 10px 30px -14px rgba(239, 51, 65, .55);
}

/* Le bandeau suit la même logique, mais à l'horizontale : rouge côté
   texte, blanc côté visuel. */
.fo-categorie--bandeau {
	background: linear-gradient(
		100deg,
		#EF3341 0%,
		#EF3341 40%,
		#F19098 58%,
		#FFFFFF 76%
	);
	border: 0;
	background-clip: padding-box;
}
.fo-categorie--bandeau .fo-categorie__nom { color: #FFFFFF; }
.fo-categorie--bandeau .fo-categorie__nom::after { color: rgba(255, 255, 255, .88); }

/* Le fond blanc du visuel n'a plus lieu d'être fondu au rouge */
.fo-categorie .fo-categorie__img { mix-blend-mode: normal; }

/* Sans bordure, la partie basse des tuiles se confondait avec le fond
   de page : elles ne se lisaient plus comme des cartes. Une ombre
   portée redonne le contour sans réintroduire de filet coloré. */
.fo-categorie {
	box-shadow: 0 1px 2px rgba(26, 20, 22, .05), 0 10px 26px -14px rgba(26, 20, 22, .16);
}
.fo-categorie:not(.fo-categorie--bandeau):hover,
.fo-categorie--bandeau:hover {
	box-shadow: 0 2px 4px rgba(239, 51, 65, .12), 0 14px 34px -14px rgba(239, 51, 65, .45);
}

/* ==================================================================
   PAGINATION
   Des chiffres nus collés au pied de page ne se lisaient ni comme des
   cibles cliquables, ni comme une position dans la liste.
   ================================================================== */

.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--bordure);
}

.wp-block-query-pagination-numbers { display: flex; align-items: center; gap: .375rem; }

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .75rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--encre);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--fo-transition), background var(--fo-transition), color var(--fo-transition);
}
.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--rouge);
	background: var(--wp--preset--color--rouge-voile);
	color: var(--wp--preset--color--rouge);
	text-decoration: none;
}

/* Page en cours */
.wp-block-query-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--rouge);
	background: var(--wp--preset--color--rouge);
	color: #fff;
}
/* Les points de suspension ne sont pas une cible */
.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	min-width: 1.5rem;
	padding: 0;
	color: var(--wp--preset--color--gris-texte);
}

.wp-block-query-pagination-previous { margin-right: .375rem; }
.wp-block-query-pagination-next { margin-left: .375rem; }

@media (max-width: 600px) {
	.wp-block-query-pagination-previous,
	.wp-block-query-pagination-next { padding: 0 .625rem; font-size: var(--wp--preset--font-size--xs); }
}

/* ==================================================================
   POURSUITE DE LA VISITE
   En bas d'une liste, on ne doit pas se retrouver dans une impasse.
   ================================================================== */

.fo-suite {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--bordure);
}
.fo-suite__titre {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--xl);
}

/* ==================================================================
   MENU « BOUTIQUE » EN PANNEAU VISUEL
   Une liste de huit intitulés oblige à lire pour choisir. Le panneau
   reprend les vignettes de l'accueil : on reconnaît la rubrique au
   visuel, et la structure du site reste la même d'un écran à l'autre.
   ================================================================== */

.fo-mega { position: static; }

.fo-mega__bouton {
	display: inline-flex;
	align-items: center;
	gap: .3125rem;
	padding: .25rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	cursor: pointer;
	position: relative;
}
.fo-mega__bouton svg { transition: transform var(--fo-transition); }
.fo-mega__bouton[aria-expanded="true"] { color: var(--wp--preset--color--rouge); }
.fo-mega__bouton[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Le même soulignement animé que les autres entrées de navigation */
.fo-mega__bouton::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--wp--preset--color--rouge);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--fo-transition);
}
.fo-mega:hover .fo-mega__bouton::after,
.fo-mega__bouton[aria-expanded="true"]::after { transform: scaleX(1); }

/* Panneau pleine largeur, ancré sous l'en-tête */
.fo-mega__panneau {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 40;
	background: #fff;
	border-top: 1px solid var(--wp--preset--color--bordure);
	box-shadow: 0 18px 40px -22px rgba(26, 20, 22, .38);
}
.fo-mega__panneau[hidden] { display: none; }

.fo-mega__contenu {
	max-width: 1280px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}

.fo-mega__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .625rem;
}

.fo-mega__tuile {
	display: flex;
	align-items: center;
	gap: .875rem;
	padding: .625rem .75rem;
	border-radius: 12px;
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	transition: background var(--fo-transition);
}
.fo-mega__tuile:hover {
	background: var(--wp--preset--color--rouge-voile);
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}

.fo-mega__vignette {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 10px;
	/* Aplat rouge plein : les visuels étant détourés, ils se posent
	   dessus sans avoir besoin d'un fond clair pour se détacher. */
	background: var(--wp--preset--color--rouge);
	overflow: hidden;
}
.fo-mega__vignette img {
	width: 84%;
	height: 84%;
	object-fit: contain;
}

.fo-mega__texte { display: flex; flex-direction: column; min-width: 0; }
.fo-mega__nom {
	font-family: var(--wp--preset--font-family--titre);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
}
.fo-mega__sous {
	margin-top: .125rem;
	font-size: .75rem;
	line-height: 1.3;
	color: var(--wp--preset--color--gris-texte);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fo-mega__pied {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--bordure);
}
.fo-mega__pied a {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}
.fo-mega__pied a:hover { text-decoration: underline; }

/* Sur petit écran, le hamburger prend le relais : le panneau n'a pas
   sa place et son bouton ferait doublon avec le menu. */
@media (max-width: 900px) {
	.fo-mega { display: none; }
}

/* ==================================================================
   EN-TÊTE : ZONE DE NAVIGATION VRAIMENT CENTRÉE
   Avec `space-between`, le centre dépendait de la largeur du logo et
   de celle des outils : il n'était jamais aligné sur le milieu de la
   page. Une grille en trois colonnes règle le problème une fois pour
   toutes, quelle que soit la longueur des entrées.
   ================================================================== */

@media (min-width: 901px) {
	.fo-header .alignwide {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
	}
	.fo-header .alignwide > .fo-logo { justify-self: start; }
	.fo-header .alignwide > .fo-nav-centre { justify-self: center; }
	.fo-header .alignwide > .fo-outils { justify-self: end; }
}

.fo-nav-centre {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}
/* Le bloc de navigation ne doit plus s'étirer : il ne reste qu'« Aide » */
.fo-nav-centre .wp-block-navigation { flex: none; }

/* Les titres de colonne du pied de page et des filtres sont des h2 pour
   ne pas casser la hiérarchie du document. Leur apparence reste celle
   d'un intertitre discret : la structure sémantique et la présentation
   sont deux choses distinctes. */
.has-fo-titre-colonne,
.fo-filtre__titre {
	font-size: var(--wp--preset--font-size--xs) !important;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.4;
}
.fo-footer .has-fo-titre-colonne { color: #fff; }
.fo-filtres .has-fo-titre-colonne { color: var(--wp--preset--color--gris-texte); }