/*
* FbTest01 — direction artistique « Studio »
*
* Prise de vue studio, tirage sombre : fond charbon, cyclorama dégradé
* derrière chaque produit, lueur douce au sol, accent blanc.
*
* Pas de couleur d'accent : sur fond noir avec de la photo culinaire,
* la couleur doit venir des aliments. Un accent coloré leur ferait
* concurrence.
*
* Les jetons vivent dans theme.json ; ce fichier ne fait que les habiller.
* Les alias --fbs-* évitent de répéter les noms de variables WordPress.
*/
:root {
--fbs-gris: var(--wp--preset--color--gris, #0b0b0c);
--fbs-gris-2: var(--wp--preset--color--gris-2, #141416);
--fbs-cyclo-a: #1c1c20;
--fbs-cyclo-b: #0d0d0f;
--fbs-encre: var(--wp--preset--color--encre, #f4f2ef);
--fbs-encre-2: var(--wp--preset--color--encre-2, #a8a49e);
--fbs-encre-3: var(--wp--preset--color--encre-3, #75726d);
--fbs-filet: var(--wp--preset--color--filet, #26262a);
--fbs-filet-2: var(--wp--preset--color--filet-2, #3a3a40);
--fbs-accent: var(--wp--preset--color--accent, #ffffff);
--fbs-accent-2: var(--wp--preset--color--accent-2, #e2ded7);
--fbs-sur-accent: #0b0b0c;
/* voile d'accent : le blanc n'a pas de version « 10 % » lisible sur
du charbon, il faut passer par une opacité explicite. */
--fbs-accent-voile: rgba(255, 255, 255, 0.1);
/* Vert prélevé sur la canette agrumes fleuris (#8D9F33), remonté en
luminosité pour tenir sur du charbon : contraste mesuré 10,62:1,
soit AAA. La couleur vient du produit, pas d'une charte inventée. */
--fbs-vert: var(--wp--preset--color--vert, #b2c944);
--fbs-vert-2: var(--wp--preset--color--vert-2, #8d9f33);
--fbs-vert-voile: rgba(178, 201, 68, 0.14);
--fbs-g: var(--wp--preset--font-family--grotesque, "Bricolage Grotesque", system-ui, sans-serif);
--fbs-t: var(--wp--preset--font-family--texte, "Inter", system-ui, sans-serif);
--fbs-r: 20px;
}
/* --------------------------------------------------------------- en-tête */
.fbs-top {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--fbs-gris) 90%, transparent);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--fbs-filet);
}
.fbs-top__in {
gap: 28px;
align-items: center;
}
.fbs-logo a,
.fbs-logo {
font-family: var(--fbs-g);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.035em;
text-decoration: none;
}
.fbs-nav {
margin-left: auto;
}
.fbs-nav a {
font-size: 14.5px;
color: var(--fbs-encre-2);
text-decoration: none;
}
.fbs-nav a:hover {
color: var(--fbs-encre);
}
/* le panier prend la pastille noire de la maquette */
/* Bouton panier du theme. Remplace le mini-panier de WooCommerce, dont le
tiroir depend de l'API d'interactivite : elle n'hydrate pas sur cette
installation, le clic restait donc sans effet. Un lien vers la page
panier fonctionne meme sans JavaScript. */
.fbs-panier {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--fbs-accent);
color: var(--fbs-sur-accent);
border-radius: 999px;
padding: 10px 18px;
font-family: var(--fbs-t);
font-size: 14px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background 0.18s;
}
.fbs-panier:hover {
background: var(--fbs-accent-2);
}
.fbs-panier__i {
display: block;
flex: 0 0 auto;
}
.fbs-panier__n {
font-variant-numeric: tabular-nums;
}
.fbs-panier-live {
margin-left: 6px;
display: flex;
align-items: center;
}
/* ----------------------------------------------------------------- héros */
.fbs-hero {
margin: 32px 0 0;
display: grid;
grid-template-columns: 0.92fr 1.08fr;
align-items: stretch;
border-radius: 24px;
overflow: hidden;
background: var(--fbs-gris-2);
border: 1px solid var(--fbs-filet);
}
.fbs-hero__txt {
padding: 54px 46px;
display: flex;
flex-direction: column;
justify-content: center;
}
.fbs-pill {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--fbs-accent);
color: var(--fbs-sur-accent);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.03em;
border-radius: 999px;
padding: 7px 16px;
}
.fbs-hero__h {
font-family: var(--fbs-g);
font-weight: 800;
font-size: clamp(34px, 4.4vw, 55px);
line-height: 1.02;
letter-spacing: -0.038em;
margin: 20px 0 16px;
}
.fbs-hero__h em {
font-style: normal;
color: var(--fbs-accent);
}
.fbs-hero__p {
color: var(--fbs-encre-2);
font-size: 16.5px;
line-height: 1.62;
margin: 0 0 26px;
max-width: 38ch;
}
.fbs-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.fbs-b1,
.fbs-b2 {
font-family: var(--fbs-t);
font-size: 15px;
font-weight: 600;
border-radius: 12px;
padding: 14px 24px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.fbs-b1 {
background: var(--fbs-accent);
color: var(--fbs-sur-accent);
border: 0;
transition: background 0.18s;
}
.fbs-b1:hover {
background: var(--fbs-accent-2);
color: var(--fbs-sur-accent);
}
.fbs-b2 {
background: transparent;
color: var(--fbs-encre);
border: 1px solid var(--fbs-filet-2);
}
.fbs-b2:hover {
border-color: var(--fbs-encre);
}
/* le cyclorama : mur blanc qui se courbe vers le sol */
.fbs-cyclo {
position: relative;
display: grid;
place-items: center;
padding: 44px 40px;
background: linear-gradient(180deg, var(--fbs-cyclo-a) 0%, var(--fbs-gris-2) 52%, var(--fbs-cyclo-b) 100%);
}
/* Sur fond sombre l'ombre portée doit être une LUEUR, pas une tache noire :
une ombre noire sur du charbon est simplement invisible. */
.fbs-cyclo::after {
content: "";
position: absolute;
left: 50%;
bottom: 14%;
width: 60%;
height: 26px;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.09), transparent 70%);
filter: blur(10px);
}
/* PAS de mix-blend-mode ici : multiply sur un fond sombre efface l'image.
Les visuels sont générés sur fond noir, ils se fondent d'eux-mêmes. */
.fbs-cyclo img {
position: relative;
max-width: 100%;
max-height: 350px;
object-fit: contain;
}
/* ------------------------------------------------------------------ offre */
/* Inversion totale : fond blanc, texte noir. Sur une page entierement
noire, c'est le contraste maximal possible sans introduire de couleur.
Mesure avant refonte : l'ancienne etiquette avait une densite d'encre
de 15,7 pour mille contre 135 pour le heros — elle etait le bloc le
moins visible de la page alors qu'elle porte l'argument commercial. */
.fbs-deal {
margin: 30px 0 0;
background: var(--fbs-vert);
color: var(--fbs-gris);
border-radius: var(--fbs-r);
padding: clamp(24px, 3vw, 36px) clamp(22px, 3.4vw, 44px);
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: clamp(24px, 3.4vw, 48px);
}
.fbs-deal__k {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: rgba(11, 11, 12, 0.62);
margin-bottom: 2px;
}
/* Le mot porteur : le plus gros caractere de la page apres le titre du
heros. C'est la promesse, pas le mecanisme, qui doit etre lue en premier. */
.fbs-deal__g {
display: block;
font-family: var(--fbs-g);
font-weight: 800;
font-size: clamp(44px, 6.4vw, 78px);
line-height: 0.88;
letter-spacing: -0.045em;
text-transform: uppercase;
color: var(--fbs-gris);
}
.fbs-deal__c {
min-width: 0;
}
.fbs-deal__p {
margin: 0 0 18px;
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.5;
color: rgba(11, 11, 12, 0.78);
max-width: 46ch;
}
.fbs-deal__pied {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.fbs-deal__jauge {
display: flex;
align-items: center;
gap: 7px;
}
.fbs-deal__jauge i {
width: 38px;
height: 8px;
border-radius: 999px;
background: rgba(11, 11, 12, 0.16);
transition: background 0.25s;
}
.fbs-deal__jauge i.on {
background: var(--fbs-gris);
}
/* Les barres non franchies : un noir tres dilue, lisible sur le vert
sans creer un second niveau de contraste qui brouillerait la lecture. */
.fbs-deal__jauge i {
background: rgba(11, 11, 12, 0.2);
}
.fbs-deal__cpt {
margin-left: 6px;
font-family: var(--fbs-g);
font-weight: 800;
font-size: 15px;
color: rgba(11, 11, 12, 0.62);
font-variant-numeric: tabular-nums;
}
/* Bouton en negatif du bloc : noir sur blanc, l'inverse des boutons du
reste de la page. */
.fbs-deal__cta {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 13px 22px;
border-radius: 999px;
background: var(--fbs-gris);
color: var(--fbs-encre);
font-size: 14.5px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.fbs-deal__cta:hover {
transform: translateX(2px);
opacity: 0.88;
}
/* Offre acquise : le bloc s'inverse (noir sur vert -> vert sur noir).
Le mot reste PLEIN : teste en lettres creuses, les contre-formes se
chevauchaient et « OFFERT » devenait illisible a cette graisse. */
.fbs-deal.is-applied {
background: var(--fbs-gris-2);
color: var(--fbs-encre);
box-shadow: inset 0 0 0 2px var(--fbs-vert);
}
.fbs-deal.is-applied .fbs-deal__g {
color: var(--fbs-vert);
}
.fbs-deal.is-applied .fbs-deal__k {
color: var(--fbs-vert-2);
}
.fbs-deal.is-applied .fbs-deal__p {
color: var(--fbs-encre-2);
}
.fbs-deal.is-applied .fbs-deal__jauge i {
background: var(--fbs-filet-2);
}
.fbs-deal.is-applied .fbs-deal__jauge i.on {
background: var(--fbs-vert);
}
.fbs-deal.is-applied .fbs-deal__cpt {
color: var(--fbs-encre-2);
}
.fbs-deal.is-applied .fbs-deal__cta {
background: var(--fbs-vert);
color: var(--fbs-gris);
}
@media (max-width: 900px) {
.fbs-deal {
grid-template-columns: 1fr;
gap: 18px;
}
.fbs-deal__cta {
margin-left: 0;
}
}
/* Le contenu est remplace apres un ajout au panier : la transition CSS des
barres est perdue puisque les elements sont neufs. Cette animation courte
signale le changement, sinon le compteur bouge sans qu'on le remarque. */
.fbs-etiq-live.is-maj .fbs-deal__g,
.fbs-etiq-live.is-maj .fbs-deal__jauge i.on {
animation: fbs-pouls 0.42s ease-out;
}
@keyframes fbs-pouls {
0% {
transform: scale(0.94);
opacity: 0.55;
}
60% {
transform: scale(1.03);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.fbs-etiq-live.is-maj .fbs-deal__g,
.fbs-etiq-live.is-maj .fbs-deal__jauge i.on {
animation: none;
}
.fbs-deal__cta:hover {
transform: none;
}
}
/* ------------------------------------------------------ bannière section */
/* Bandeau large mais l'image reste ENTIÈRE : les canettes sont le sujet,
les recadrer couperait les libellés de parfum. Le fond noir du visuel
se confond avec celui du cadre, donc les côtés ne se voient pas. */
/* Fond calé sur celui du visuel — mesuré à rgb(6,8,7) dans sa zone vide.
Avec --fbs-gris-2 (rgb(20,20,22)) l'écart de 13,8 dessinait une arête
verticale nette à la jointure image/panneau. */
.fbs-banniere {
position: relative;
display: block;
margin: 0 0 26px;
border-radius: var(--fbs-r);
overflow: hidden;
background: rgb(2, 4, 3);
text-decoration: none;
}
/* Aucun voile : le bandeau est centré et occupe toute la largeur.
Un dégradé latéral assombrirait les canettes des extrémités. */
/* `contain` : les 5 canettes descendent jusqu'à 90 % de la hauteur source,
un `cover` en bandeau exigerait 500 px de haut pour ne pas les trancher.
L'image est donc affichée entière ; le fond du panneau est calé sur celui
du visuel (rgb 2,4,3, mesuré) pour que ses bords ne se voient pas. */
.fbs-banniere__img {
width: 100%;
height: auto;
max-height: 340px;
object-fit: contain !important;
object-position: center;
display: block;
margin: 0 auto;
transition: transform 0.4s ease;
}
/* Texte sous le visuel : les canettes occupent toute la largeur, aucune
zone vide ne peut l'accueillir en surimpression. */
.fbs-banniere__txt {
display: block;
padding: 0 clamp(20px, 4vw, 44px) 24px;
text-align: center;
}
.fbs-banniere__t {
display: block;
font-family: var(--fbs-g);
font-weight: 800;
font-size: clamp(19px, 2.3vw, 26px);
line-height: 1.15;
letter-spacing: -0.03em;
color: var(--fbs-encre);
}
.fbs-banniere__d {
display: block;
margin-top: 8px;
font-size: 14px;
line-height: 1.5;
color: var(--fbs-muet);
}
.fbs-banniere:hover .fbs-banniere__img {
transform: scale(1.03);
}
/* Pas de titre incrusté : l'en-tête de section juste en dessous porte
déjà le nom de la catégorie. L'afficher ici le répéterait deux fois
à quelques dizaines de pixels d'intervalle. */
@media (max-width: 720px) {
.fbs-banniere__img {
max-height: 200px;
}
.fbs-banniere__txt {
padding-bottom: 18px;
}
}
/* -------------------------------------------------------------- sections */
.fbs-sec {
margin: 62px 0 0;
}
.fbs-sec__h {
display: flex;
align-items: flex-end;
gap: 16px;
margin-bottom: 24px;
}
.fbs-sec__t {
font-family: var(--fbs-g);
font-weight: 700;
font-size: 28px;
letter-spacing: -0.03em;
margin: 0;
}
.fbs-sec__n {
font-size: 14px;
color: var(--fbs-encre-3);
padding-bottom: 4px;
margin: 0;
}
.fbs-sec__a {
margin-left: auto;
font-size: 14.5px;
color: var(--fbs-accent);
font-weight: 600;
text-decoration: none;
padding-bottom: 4px;
}
.fbs-sec__a:hover {
text-decoration: underline;
}
/* Pastille NOUVEAU : blanc plein sur la photo, en haut a gauche. Le mot
est un argument commercial a part entiere, il ne doit pas se fondre
dans l'image comme le ferait un texte translucide. */
.fbs-neuf {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
padding: 6px 11px;
border-radius: 999px;
background: var(--fbs-vert);
color: var(--fbs-gris);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
line-height: 1;
pointer-events: none;
}
/* ---------------------------------------------------------------- grille */
/* min(250px, 100%) : sur un écran étroit la colonne ne peut pas
rester bloquée à 250px et déborder du viewport. */
.fbs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
gap: 22px;
}
/* !important : sur les gabarits de requête, WordPress ajoute
is-layout-flow au groupe de la carte, ce qui écrase display:flex
et laisse les cartes de hauteurs inégales. */
.fbs-card {
background: var(--fbs-gris-2);
border: 1px solid var(--fbs-filet);
border-radius: var(--fbs-r);
overflow: hidden;
display: flex !important;
flex-direction: column;
height: 100%;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
/* le corps doit pousser le pied vers le bas dans la boucle de requête */
.fbs-card > .fbs-card__body {
flex: 1;
}
/* au survol, la carte s'éclaire au lieu de porter une ombre : sur fond
charbon une ombre ne se voit pas, un halo si. */
.fbs-card:hover {
transform: translateY(-4px);
border-color: var(--fbs-filet-2);
box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* La carte du produit qui sera offert : liseret vert, meme code que le
bloc d'offre. Le lien entre la promesse et l'article concerne doit se
lire sans texte. */
.fbs-card.is-hot {
border-color: var(--fbs-vert);
box-shadow: 0 0 0 1px var(--fbs-vert);
}
/* Les visuels sont des scènes cadrées sur fond noir, pas des produits
détourés : l'image remplit le cadre au lieu de flotter dedans.
Plus de padding — une marge ferait une bordure noire visible autour
d'une image qui porte déjà son propre fond.
min-height:0 — sans ça, la taille minimale automatique de l'élément
flex vaut la hauteur intrinsèque de l'image et casse aspect-ratio. */
.fbs-card__img {
position: relative;
aspect-ratio: 1 / 1;
flex: 0 0 auto;
min-height: 0;
overflow: hidden;
display: block;
padding: 0;
margin: 0;
background: var(--fbs-cyclo-b);
}
/* Pas de lueur simulée au sol : chaque visuel apporte son propre
éclairage studio et son ombre portée. En ajouter une créerait
une seconde source lumineuse incohérente. */
/* width/height 100% + contain : une image en portrait ne peut pas
pousser le cadre, ce que max-height ne garantit pas dans une grille.
!important : le bloc post-featured-image écrit object-fit:cover en
style inline, ce qui recadrerait le produit au lieu de le montrer
entier sur son cyclorama. */
.fbs-card__img img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover !important;
object-position: center;
display: block;
transition: transform 0.35s ease;
}
/* léger zoom au survol : la carte réagit sans que rien ne bouge autour */
.fbs-card:hover .fbs-card__img img {
transform: scale(1.04);
}
.fbs-card__body {
padding: 18px 19px 20px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.fbs-tag {
align-self: flex-start;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--fbs-vert);
background: var(--fbs-vert-voile);
border-radius: 999px;
padding: 4px 11px;
}
.fbs-card__n {
font-family: var(--fbs-t);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0;
margin: 0;
}
.fbs-card__n a {
color: var(--fbs-encre);
text-decoration: none;
}
.fbs-card__n a:hover {
color: var(--fbs-accent);
}
.fbs-card__img,
.fbs-card__img:hover {
text-decoration: none;
}
.fbs-card__f {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.fbs-price,
.fbs-card__f .wc-block-components-product-price {
font-family: var(--fbs-g);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.03em;
color: var(--fbs-encre);
}
/* le symbole monétaire, plus discret que le montant */
.fbs-price i,
.fbs-card__f .woocommerce-Price-currencySymbol {
font-style: normal;
font-size: 13px;
color: var(--fbs-encre-3);
font-weight: 600;
margin-left: 2px;
}
/* Le bloc product-button pose fbs-add sur un WRAPPER .wp-block-button ;
le bouton réel est l'enfant. On neutralise le wrapper et on stylise
l'enfant, sinon le fond noir s'applique au conteneur et le bouton
passe sous le prix au lieu de s'aligner à côté. */
.fbs-card__f > .wp-block-button {
background: none;
padding: 0;
margin: 0;
border: 0;
display: flex;
flex: 0 0 auto;
}
a.fbs-add,
.fbs-card__f .wc-block-components-product-button__button {
font-family: var(--fbs-t);
font-size: 13.5px;
font-weight: 600;
line-height: 1.2;
background: var(--fbs-accent);
color: var(--fbs-sur-accent);
border: 0;
border-radius: 11px;
padding: 11px 16px;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background 0.16s;
}
a.fbs-add:hover,
.fbs-card__f .wc-block-components-product-button__button:hover {
background: var(--fbs-accent-2);
color: var(--fbs-sur-accent);
}
/* le prix ne doit pas pousser le bouton hors ligne */
.fbs-card__f {
flex-wrap: nowrap;
}
.fbs-card__f > .fbs-price {
min-width: 0;
}
/* état « ajouté » d'AJAX, sans casser la mise en page */
.fbs-add.added {
background: var(--fbs-accent);
}
.fbs-add.loading {
opacity: 0.65;
}
.fbs-grid .added_to_cart {
display: none;
}
/* --------------------------------------------------------------- piliers */
.fbs-piliers {
margin: 34px 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 1px;
background: var(--fbs-filet);
border: 1px solid var(--fbs-filet);
border-radius: 18px;
overflow: hidden;
}
/* le fond du conteneur transparaît dans les gouttières et dessine
les séparateurs — pas de bordure à gérer par cellule. */
.fbs-pilier {
background: var(--fbs-gris-2);
padding: 26px 28px;
}
.fbs-pilier__t {
font-family: var(--fbs-g);
font-weight: 700;
font-size: 17px;
letter-spacing: -0.02em;
margin: 0 0 6px;
color: var(--fbs-encre);
}
.fbs-pilier__p {
margin: 0;
font-size: 14.5px;
line-height: 1.55;
color: var(--fbs-encre-2);
}
/* ---------------------------------------------------- héros mode vitrine */
/* sans pastille promo, le titre doit respirer davantage */
.fbs-hero.is-vitrine .fbs-hero__h {
margin-top: 0;
}
.fbs-hero.is-vitrine .fbs-hero__p {
max-width: 42ch;
}
/* Visuel dédié : c'est une scène cadrée, pas un produit détouré.
Elle remplit son panneau au lieu de flotter au centre, et le
cyclorama s'efface — l'image porte déjà son propre fond. */
.fbs-cyclo.has-visuel {
padding: 0;
background: var(--fbs-gris-2);
}
.fbs-cyclo.has-visuel::after {
display: none;
}
/* !important : sans lui, la règle générique des images de carte
(object-fit sur .fbs-card__img img) l'emporte et laisse des bandes
noires en haut et en bas — l'image est en 4:3 et le panneau en ~16:9. */
.fbs-cyclo.has-visuel .fbs-cyclo__img {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover !important;
object-position: center;
display: block;
}
/* Le visuel porte son propre fond noir : un fondu latéral le raccorde
au panneau de texte, sinon on voit une arête franche entre les deux. */
.fbs-cyclo.has-visuel {
position: relative;
}
.fbs-cyclo.has-visuel::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
90deg,
var(--fbs-gris-2) 0%,
rgba(20, 20, 22, 0.55) 14%,
transparent 38%
);
}
/* ----------------------------------------------- renvoi vers le catalogue */
.fbs-cat {
margin: 62px 0 0;
background: var(--fbs-gris-2);
border: 1px solid var(--fbs-filet);
border-radius: 18px;
padding: 30px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.fbs-cat__h {
font-family: var(--fbs-g);
font-weight: 700;
font-size: 24px;
letter-spacing: -0.03em;
margin: 0 0 4px;
}
.fbs-cat__p {
margin: 0;
font-size: 14.5px;
color: var(--fbs-encre-2);
}
/* ------------------------------------------------------- tri du catalogue */
.fbs-sec__h--archive {
margin-bottom: 24px;
align-items: baseline;
}
/* le compteur WooCommerce enveloppe son texte dans un qui garde
ses marges par défaut et décale la ligne de base du titre. */
.fbs-sec__n .woocommerce-result-count {
margin: 0;
font-size: 14px;
color: var(--fbs-encre-3);
}
.fbs-tri {
margin-left: auto;
}
/* idem : le bloc de tri sort un