/* =====================================================================
   STELVOREN — LE CATALOGUE
   Gabarit d'archive produit : racine, catégories de tous niveaux,
   catégories de marque (tâches 89, 91, 93 — lot du 24/09/2026).

   Relevé Dev Mode du 24/09, fichier Figma « Refonte »
   (Wiukeiz8DyfOof3a1OSaPR) : `156:6667` (desktop, 1840) et `156:7189`
   (mobile, 393), nœuds cités devant chaque bloc. Mesuré sur l'univers
   Pilates, celui des maquettes de catégorie.

   Chargé sur les SEULES archives du catalogue (inc/catalogue.php), comme
   fiche-produit.css sur la seule fiche. Les deux composants partagés que
   ce gabarit utilise — le fil `stv-ariane` et la pagination
   `stv-pagination` — vivent dans composants.css.

   CETTE FEUILLE EST LA DERNIÈRE CHARGÉE sur ces pages (après le socle).
   Ce n'est pas une licence pour gagner par l'ordre : chaque règle qui
   affronte le kit Elementor (`h1`…`h6`, `a`, `button` à 0,1,1), le
   `reset.css` de Hello (`[type=submit]:hover` à 0,2,0) ou une classe du
   socle la bat AU COMPTE, et le dit.

   Largeurs intermédiaires : les valeurs posées ici entre 1840 et 393
   (marges, nombre de colonnes) suivent le rythme de la fiche produit ;
   elles sont PROVISOIRES jusqu'à la tâche 96 (lot 5).
   ================================================================== */


/* =====================================================================
   0. LA PAGE
   Hello Elementor plafonne `main.site-main` (1140 par défaut). Même levée
   que sur la fiche, classe répétée (0,2,1) : le sélecteur du parent
   change d'une version à l'autre.
   ================================================================== */

main.stv-catalogue-page.stv-catalogue-page {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}

/*
   La marge latérale, et le plafond de 1 680 (règle du socle, 22/09) :
   sous 1 840 la marge gagne, au-dessus le contenu se borne à 1 680 et
   le fond reste pleine largeur. Rythme de la fiche : 80, 48 sous 1 440,
   32 sous 1 025, 20 en mobile (la maquette mobile : 20).
*/
.stv-catalogue-page {
  --stv-catalogue-marge: var(--stv-espace-80);
  --stv-catalogue-gouttiere: max(
    var(--stv-catalogue-marge),
    (100% - var(--stv-largeur-contenu)) / 2
  );
  /* Le filet sous la barre d'outils (156:6693) : anthracite à 20 %. Vu une
     deuxième fois le 24/09 sous chaque question de la FAQ de catégorie
     (156:10129) — il est donc passé dans jetons.css. */
  --stv-catalogue-filet: var(--stv-filet-liste);
}

@media (max-width: 1439px) {
  .stv-catalogue-page { --stv-catalogue-marge: var(--stv-espace-48); }
}

@media (max-width: 1024px) {
  .stv-catalogue-page { --stv-catalogue-marge: var(--stv-espace-32); }
}

@media (max-width: 767px) {
  .stv-catalogue-page { --stv-catalogue-marge: 20px; }
}


/* =====================================================================
   1. L'EN-TÊTE DE LISTING — `topCotalogue` (156:6669)
   32 au-dessus et au-dessous, fil pleine largeur à gauche, H1 centré à
   48 sous le fil. Sans tuiles (niveau 3, 156:10192) la section fait
   32 + 33 + 48 + 68 + 32 = 213. Les tuiles (90) sont une section à part,
   juste dessous (§ 7.1, lot 3) : 213 + 300 = 513 avec elles.
   ================================================================== */

.stv-catalogue-entete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stv-espace-48);
  padding: var(--stv-espace-32) var(--stv-catalogue-gouttiere);
}

.stv-catalogue-entete .stv-ariane {
  align-self: stretch;
}

/*
   Le H1 (156:6674) : Outfit Medium 62 à 1,1, approche −0,01 em — les
   valeurs exactes du jeton du hero, mobile compris (42, 156:7195).
   Deux classes contre le kit (`h1` à 0,1,1).
*/
.stv-catalogue-entete .stv-catalogue-entete__titre {
  margin: 0;
  color: var(--stv-noir);
  font-family: var(--stv-police-titres);
  font-size: var(--stv-taille-hero);
  font-weight: 500;
  line-height: var(--stv-interligne-titre);
  letter-spacing: -0.01em;
  text-align: center;
}


/* =====================================================================
   2. LE CATALOGUE — barre d'outils, grille, pagination (156:6692)
   32 au-dessus, 80 au-dessous ; barre, puis 24, puis la grille, puis 48,
   puis la pagination.

   Des MARGES plutôt qu'un `gap` de flex : les avis de WooCommerce sont
   posés avant la barre dans une enveloppe souvent vide, qu'un `gap`
   compterait quand même.
   ================================================================== */

.stv-catalogue {
  padding: var(--stv-espace-32) var(--stv-catalogue-gouttiere) var(--stv-espace-80);
}

/* --- 2.1 La barre d'outils (156:6693) ------------------------------- */

.stv-catalogue-outils {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stv-espace-24);
  margin-bottom: var(--stv-espace-24);
  padding-bottom: var(--stv-espace-24);
  border-bottom: 1px solid var(--stv-catalogue-filet);
}

.stv-catalogue-outils__gauche {
  display: flex;
  align-items: center;
  gap: var(--stv-espace-32);
}

/*
   Le compteur « 652 Produits » (156:6702) : Outfit Regular 16 à 1,5 —
   c'est lui, 24 de haut, qui donne sa hauteur à la barre (24 + 24 + le
   filet = 49, la cote de la maquette). Deux classes contre les `p` du kit.
*/
.stv-catalogue-outils .stv-catalogue-outils__compte {
  margin: 0;
  color: var(--stv-noir);
  font-family: var(--stv-police-titres);
  font-size: var(--stv-taille-texte);
  font-weight: 400;
  line-height: var(--stv-interligne-texte);
  white-space: nowrap;
}

/*
   « Filtrer » (156:6696) — écrit, pas affiché : le bouton n'existe qu'avec
   le panneau (92, lot 4). Trois classes contre le `reset.css` de Hello
   (bouton bordé rose, survol `#c36` à 0,2,0).
*/
.stv-catalogue-outils .stv-catalogue-outils__filtrer.stv-catalogue-outils__filtrer {
  display: inline-flex;
  align-items: center;
  gap: var(--stv-espace-8);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--stv-noir);
  font-family: var(--stv-police-titres);
  font-size: var(--stv-taille-texte);
  font-weight: 400;
  line-height: var(--stv-interligne-texte);
  cursor: pointer;
}

/* --- 2.2 Le menu de tri (156:6699, déplié 156:6868) -----------------

   Le COMPOSANT est dans composants.css depuis le 25/09 (« MENU DE TRI —
   `stv-tri` ») : le panneau de recherche le porte sur toutes les pages, et
   la page de résultats dans son en-tête. Ne reste ici que sa place dans la
   barre d'outils.
*/

/*
   Trois classes : le formulaire garde la classe `woocommerce-ordering`
   (des extensions la cherchent), et `.woocommerce .woocommerce-ordering`
   (0,2,0, woocommerce.css) lui donne un flottant à droite et 1 em de
   marge basse — mesuré le 24/09 : une barre de 65 au lieu de 49.
*/
.stv-catalogue-outils .stv-tri.stv-tri {
  position: relative;
  float: none;
  margin: 0;
}

/* --- 2.3 La grille (156:6703) --------------------------------------

   Quatre colonnes de 402 à 24 d'écart à 1 840 — 4 × 402 + 3 × 24 = 1 680,
   la largeur de contenu. Colonnes FLUIDES (`1fr`), pas de largeur fixe :
   entre deux paliers, elles se partagent la place.

   TROIS classes : `.woocommerce ul.products` pèse 0,2,1 — deux classes
   ET un élément (woocommerce-layout.css, et composants.css, qui pose la
   grille générique des autres listes de produits : `auto-fill` à 280 de
   minimum, 48 d'écart). Deux classes perdaient : mesuré le 24/09, cinq
   colonnes de 298 à 48 d'écart au lieu de quatre de 402 à 24. Le compte
   se fait sur le sélecteur ENTIER, élément compris.
*/

.stv-grille-produits.stv-grille-produits.stv-grille-produits {
  display: grid;
  grid-template-columns: repeat(var(--stv-grille-colonnes, 4), minmax(0, 1fr));
  gap: var(--stv-espace-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stv-grille-produits .stv-grille-produits__element {
  margin: 0;
}

/*
   LA CARTE DU CATALOGUE EST UNE VARIANTE, PAS UNE CORRECTION.

   Le composant Figma « Product » a deux variantes de catalogue,
   `product Catalog` (156:5289, 402 × 449) et `product Catalog Mobile`
   (156:5377, 353 × 382) — le designer les a factorisées lui-même. Elles
   diffèrent de la carte de l'accueil, qui est bâtie depuis la 22 et
   vérifiée : image carrée, 8 entre chaque bloc. Au catalogue :

     desktop  image 370 × 328 (ratio 370 / 328), 16 sous l'image,
              4 entre le nom et le prix — 16 + 328 + 16 + 48 + 4 + 13,2
              (« À partir de ») + 21 + 16 = 462, la cote de la carte V2
              (331:10271 ; 449 avant le 26/10, TTC seul) ;
     mobile   image 321 × 272, 8 sous l'image, nom en 14, prix en 12,
              « À partir de » en 10 (331:10298) — 16 + 272 + 8 + 48 + 4 + 11
              + 18 + 16 = 393 (382 avant la V2).

   La règle du protocole (« une maquette qui montre un composant différent
   décrit une variante ») s'applique : la carte de l'accueil n'est pas
   touchée, la variante ne vit que dans la grille. La photo reste en
   `contain` sur fond gris, fondue par `multiply` : un visuel produit ne
   se recadre pas.

   Trois classes sur le nom et le prix : la carte les écrit à 0,2,0.
*/
.stv-grille-produits .stv-carte-produit {
  gap: 0;
}

.stv-grille-produits .stv-carte-produit__media {
  aspect-ratio: 370 / 328;
}

.stv-grille-produits .stv-carte-produit .stv-carte-produit__nom {
  margin-top: var(--stv-espace-16);
  /* Le nom est un H2 sur le catalogue : rien de ce que le kit pose sur les titres ne doit passer. */
  letter-spacing: normal;
  text-transform: none;
}

.stv-grille-produits .stv-carte-produit .stv-carte-produit__prix {
  margin-top: var(--stv-espace-4);
  line-height: var(--stv-interligne-texte);
}

/* --- 2.4 La pagination (156:6749) : 48 sous la grille ------------- */

.stv-catalogue .stv-pagination {
  margin-top: var(--stv-espace-48);
}


/* =====================================================================
   3. LE TEXTE DE CATÉGORIE — `moreText` (156:6760)
   Colonne de 816, centrée, 48 au-dessus et au-dessous (32 en mobile).
   Intertitres Outfit Regular 24 à 1,5 en noir, 16 au-dessus du
   paragraphe, 48 entre deux blocs ; paragraphes Inter 16 à 1,5 en
   anthracite — la prose du socle ; lien de contact à 16 du texte.

   Disposition CENTRÉE ici. Les deux colonnes avec l'image du terme
   (156:9122) sont au § 6 (lot 2, 24/09).
   ================================================================== */

.stv-catalogue-texte {
  padding: var(--stv-espace-48) var(--stv-catalogue-gouttiere);
}

.stv-catalogue-texte__colonne {
  max-width: var(--stv-largeur-texte);
  margin-inline: auto;
}

/*
   LA VARIANTE « CATÉGORIE » DE LA PROSE. La prose du socle écrit ses
   intertitres en Inter Medium 24, anthracite (relevé des onglets de la
   fiche, 118:5927) ; le texte de catégorie les veut en Outfit Regular 24,
   noir. Une variante de la même prose, pas une seconde prose.

   `.stv-prose.stv-prose.stv-prose h2` pèse 0,3,1 dans socle.css : la
   variante pèse 0,4,1, et ne doit rien à l'ordre des fichiers.

   H3 traité comme H2 : les textes hérités de Flatsome en ont, la
   maquette n'en dessine pas, et un troisième style inventé serait pire
   que l'alignement.

   48 AU-DESSUS D'UN INTERTITRE, 16 au-dessous : la marge du paragraphe
   qui précède (1,5 em, 24) fusionne avec les 48, l'écart reste 48.
*/
.stv-prose.stv-prose.stv-prose.stv-prose--categorie h2,
.stv-prose.stv-prose.stv-prose.stv-prose--categorie h3 {
  margin: var(--stv-espace-48) 0 var(--stv-espace-16);
  color: var(--stv-noir);
  font-family: var(--stv-police-titres);
  font-size: var(--stv-taille-intertitre);
  font-weight: 400;
  line-height: var(--stv-interligne-texte);
  letter-spacing: normal;
}

.stv-prose.stv-prose.stv-prose.stv-prose--categorie > :first-child {
  margin-top: 0;
}

/*
   Les liens du texte (156:6770, « débutiez le pilates ») : en noir sur
   l'anthracite du paragraphe, graisse normale. ÉCART ASSUMÉ : la maquette
   ne les souligne pas. Noir sur anthracite, c'est un contraste de 1,2:1 —
   un lien qui ne se distingue que par sa couleur échoue au critère 1.4.1
   du RGAA. Le soulignement reste.
*/
.stv-prose.stv-prose.stv-prose.stv-prose--categorie a {
  color: var(--stv-noir);
  font-weight: 400;
}

/*
   Le lien « Échanger avec un membre de notre équipe » (156:6771) : casque
   de 18 × 20, 8 d'écart, Inter Medium 16 souligné, en noir. Deux classes
   contre le kit (`a` à 0,1,1). Le soulignement est sur le texte, pas sur
   l'icône : c'est `<span>` qui le porte.
*/
/* En flex : la ligne fait la hauteur du lien (24), pas l'interligne du paragraphe (28,4 mesurés). */
.stv-catalogue-texte .stv-catalogue-texte__contact {
  display: flex;
  margin: var(--stv-espace-16) 0 0;
}

.stv-catalogue-texte .stv-lien-icone {
  display: inline-flex;
  align-items: center;
  gap: var(--stv-espace-8);
  color: var(--stv-noir);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-texte);
  font-weight: 500;
  line-height: var(--stv-interligne-texte);
  text-decoration: none;
}

.stv-catalogue-texte .stv-lien-icone > span {
  text-decoration: underline;
  text-underline-position: from-font;
}

/* Survol : NON DESSINÉ — le même pas vers l'anthracite que les liens de prose. */
.stv-catalogue-texte .stv-lien-icone:hover,
.stv-catalogue-texte .stv-lien-icone:focus-visible {
  color: var(--stv-anthracite);
}

/* Boîte de 18 × 20 dans la maquette, 18,75 × 20,75 avec le trait. */
.stv-catalogue-texte .stv-lien-icone__icone {
  flex-shrink: 0;
  width: 18.75px;
  height: 20.75px;
  margin: -0.375px;
}


/* =====================================================================
   4. LARGEURS INTERMÉDIAIRES — PROVISOIRES (tâche 96, lot 5)
   Trois colonnes sous 1 025, deux sous 768 tant qu'une carte y tient à
   plus de 260, une seule à la largeur de la maquette mobile.
   ================================================================== */

@media (max-width: 1024px) {
  .stv-grille-produits { --stv-grille-colonnes: 3; }
}

@media (max-width: 767px) {
  .stv-grille-produits { --stv-grille-colonnes: 2; }
}

@media (max-width: 559px) {
  .stv-grille-produits { --stv-grille-colonnes: 1; }
}


/* =====================================================================
   5. MOBILE (156:7189)
   En-tête : 32 au-dessus et au-dessous, fil à 16 du H1 (156:7192) ;
   catalogue : 32 / 32 ; grille à 8 d'écart, cartes de 353 × 382
   (variante `product Catalog Mobile`) ; texte : 32 / 32, intertitres en
   20 (156:7258).
   ================================================================== */

@media (max-width: 767px) {
  .stv-catalogue-entete {
    gap: var(--stv-espace-16);
  }

  .stv-catalogue {
    padding-bottom: var(--stv-espace-32);
  }

  .stv-grille-produits.stv-grille-produits.stv-grille-produits {
    gap: var(--stv-espace-8);
  }

  .stv-grille-produits .stv-carte-produit__media {
    aspect-ratio: 321 / 272;
  }

  .stv-grille-produits .stv-carte-produit .stv-carte-produit__nom {
    margin-top: var(--stv-espace-8);
    font-size: var(--stv-taille-petit);
  }

  .stv-grille-produits .stv-carte-produit {
    --stv-carte-prix-taille: var(--stv-taille-copyright);
    --stv-carte-a-partir-taille: 10px;
  }

  .stv-catalogue-texte {
    padding-block: var(--stv-espace-32);
  }
}


/* =====================================================================
   6. LES SECTIONS DE CATÉGORIE (lot 2, 24/09/2026)
   Carte éditoriale dans la grille (98), texte en deux colonnes (K5),
   FAQ (101). Le rendu est dans inc/categorie.php ; la zone d'injection
   (100) n'a pas de règle ici — la section Elementor apporte les siennes.

   LES DEUX SECTIONS TEXTE + IMAGE SONT LE `stv-split` DU SOCLE, tel quel
   (80 | 816 | 48 | 816, image de 620) : rien n'est redessiné ici. Elles
   reçoivent seulement la marge du catalogue — 80, 48, 32, 20 selon la
   largeur, celle de la grille qu'elles suivent — à la place de celle des
   pages de contenu (80, puis 16 sous 1024) : sans cela, sous 1024, le
   texte déborderait de 16 à gauche de la grille. La variable est posée
   sur la section elle-même : le socle ne la déclare pas à ce niveau, il
   n'y a donc aucun compte à battre.
   ================================================================== */

.stv-catalogue-texte__split,
.stv-categorie-faq {
  --stv-page-gouttiere: var(--stv-catalogue-marge);
}

/* --- 6.1 La carte éditoriale — « Product CTA » (156:9082 / 156:7314) --

   DÉPLACÉE DANS composants.css LE 28/09 (lot « Article ») : la colonne de
   droite d'un article de blog porte la même carte (156:9944, « Découvrez
   nos articles Pilates »), et catalogue.css n'est chargée que sur les
   archives de produit. Les règles sont celles d'ici, aux mêmes comptes
   (0,2,0), avec la proportion en variable (`--stv-carte-editoriale-rapport`,
   402 / 449 par défaut) ; le relevé du 24/09 est repris là-bas.

   Ne reste ici que sa place dans la grille : l'élément de liste est en
   flex, le lien s'y étire à la hauteur de la rangée.
*/
.stv-grille-produits .stv-grille-produits__element--editoriale {
  display: flex;
}

/* --- 6.2 Le texte en deux colonnes (156:9122) ----------------------

   Le conteneur écrit par le gabarit (`stv-catalogue-texte`, 48 de marge)
   s'efface quand il porte un split : c'est la section du socle qui porte
   la sienne (80 en desktop, 32 en mobile). `:has()` pèse sa classe —
   0,2,0 contre 0,1,0.
*/
.stv-catalogue-texte:has(> .stv-catalogue-texte__split) {
  padding: 0;
}

/* La prose prend la colonne entière (le socle aligne les enfants à gauche, à leur largeur). */
.stv-catalogue-texte__split .stv-split__texte > .stv-prose {
  align-self: stretch;
}

/*
   LE PREMIER INTERTITRE DEVIENT LE TITRE DE LA SECTION (156:9126) :
   Outfit Medium 50 à 1,1, approche −0,25 px (−0,005 em), noir, 16 au-dessus
   du paragraphe — le titre de split du socle, en 32 en mobile par le jeton.
   0,5,1 : devant les intertitres de la prose « catégorie » (0,4,1) et sa
   règle du premier enfant (0,5,0).

   Les paragraphes gardent la mesure de lecture de la maquette : 705
   (156:9127), la colonne de 816 n'est pas la ligne de texte. En pixels et
   non en `ch` : les 68 ch du socle (`.stv-split__corps`) mesurent 686 en
   Inter 16 — relevé le 24/09 dans Chrome, pas 705 comme le socle le dit.
*/
.stv-prose.stv-prose.stv-prose.stv-prose--titree > h2:first-child,
.stv-prose.stv-prose.stv-prose.stv-prose--titree > h3:first-child {
  margin: 0 0 var(--stv-espace-16);
  color: var(--stv-noir);
  font-family: var(--stv-police-titres);
  font-size: var(--stv-taille-h2);
  font-weight: 500;
  line-height: var(--stv-interligne-titre);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.stv-prose--titree > p,
.stv-prose--titree > ul,
.stv-prose--titree > ol {
  max-width: 705px;
}

/* --- 6.3 La FAQ de catégorie (156:10123 / 156:7433) ----------------

   Le split retourné : image de 620 à gauche, colonne de 816 à droite,
   titre « FAQ - {nom} » (titre de split, 50 / 32) puis 48 (32 en mobile,
   `stv-split__texte--aere`) puis l'accordéon. L'accordéon lui-même est la
   variante `stv-faq--plus` de composants.css.
*/
.stv-categorie-faq .stv-categorie-faq__colonne > .stv-faq {
  align-self: stretch;
}

/* Sans image, la colonne reste seule : elle se centre, comme le texte sans image. */
.stv-categorie-faq.stv-categorie-faq--sans-image {
  justify-content: center;
}

/* --- 6.4 Mobile (156:7326, 156:7433) -------------------------------

   32 entre le texte et l'image empilés — la maquette mobile, sur les
   deux sections. Le socle garde 48 (l'écart de ses pages de contenu) :
   la variable est redéfinie sur ces deux sections seulement.
*/
@media (max-width: 767px) {
  .stv-catalogue-texte__split,
  .stv-categorie-faq {
    --stv-gouttiere: var(--stv-espace-32);
  }

  /* La carte éditoriale : sa proportion mobile (353 / 382) et son titre
     à 20 sont dans composants.css depuis le 28/09, avec le reste. */
}


/* =====================================================================
   7. LES TUILES ET « VOUS POURRIEZ AIMER » (lot 3, 25/09/2026)
   Tâches 90 et 102. Le rendu est dans inc/tuiles.php ; les deux modes de
   la carte collection et la rangée défilante (`.stv-tuiles`) vivent dans
   composants.css — le tableau de bord du compte reprendra les tuiles.
   Ici, seulement leur place dans le catalogue.
   ================================================================== */

/* --- 7.1 Les tuiles (156:6675 / 156:7196) --------------------------

   80 SOUS LE H1 (156:6675 à y = 261, le H1 finit à 181) : les 32 de
   l'en-tête + 48 ici. 32 dessous (la section du haut fait 513 avec
   tuiles, 213 sans). En mobile, 32 sous le H1 — ceux de l'en-tête, rien
   ici — et 32 dessous (156:7191 : 32 + 77 + 32 + 143 + 32 = 316).

   La piste mobile déborde de la gouttière du catalogue : 20, celle de la
   maquette.
*/
.stv-catalogue-tuiles {
  padding: var(--stv-espace-48) var(--stv-catalogue-gouttiere) var(--stv-espace-32);
}

.stv-catalogue-tuiles .stv-tuiles {
  --stv-tuiles-debord: var(--stv-catalogue-marge);
}

@media (max-width: 767px) {
  .stv-catalogue-tuiles {
    padding-top: 0;
  }
}

/* --- 7.2 « Vous pourriez aimer » (156:10238 / 156:7579) ------------

   32 au-dessus, 80 au-dessous, 80 sur les côtés ; titre centré Outfit
   Medium 50 à 1,1, approche −0,25 (le titre de split du socle, 32 en
   mobile par le jeton), 48 plus bas trois cartes à 24 d'écart — 3 × 544
   + 2 × 24 = 1 680. 32 + 55 + 48 + 804 + 80 = 1 019, la cote de la
   maquette.

   Des colonnes au TIERS de la rangée, centrées : deux cartes gardent la
   largeur de trois et se centrent, au lieu de s'étirer en deux portraits
   de 828 × 1 224.

   Mobile : 32 / 20, cartes empilées pleine largeur à 24 d'écart. La
   maquette n'a pas de titre en mobile — il est gardé (inc/tuiles.php),
   à 32 de la première carte, le rythme de la FAQ en mobile.

   Deux classes sur le titre contre le kit (`h2` à 0,1,1).
*/
.stv-suggestions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stv-espace-48);
  padding: var(--stv-espace-32) var(--stv-catalogue-gouttiere) var(--stv-espace-80);
}

.stv-suggestions .stv-suggestions__titre {
  margin: 0;
  color: var(--stv-noir);
  font-family: var(--stv-police-titres);
  font-size: var(--stv-taille-h2);
  font-weight: 500;
  line-height: var(--stv-interligne-titre);
  letter-spacing: -0.005em;
  text-align: center;
  text-wrap: balance;
}

/* La liste et ses éléments (trois colonnes au tiers, une en mobile) sont
   dans composants.css depuis le 05/10 : les pages conseils montrent la même
   rangée (`[stelvoren_collections mode="suggestion"]`), hors des archives. */

@media (max-width: 767px) {
  .stv-suggestions {
    gap: var(--stv-espace-32);
    padding-bottom: var(--stv-espace-32);
  }
}


/* =====================================================================
   8. LA RECHERCHE — page de résultats (lot « Recherche », 25/09/2026)
   Maquette 238:7914, en-tête `topCotalogue` 238:7916 : 80 au-dessus, 48
   au-dessous, 32 entre le champ et le bilan. Le champ : 816, filet noir
   dessous, 12 / 16 de marge intérieure, loupe de 14 à 12 du texte — le
   champ du panneau. Le bilan et la variante « Tri par » du menu sont dans
   composants.css (le panneau les porte sur toutes les pages).

   Ni fil ni H1 visibles : le H1 est dans la page, caché à l'œil
   (`stv-cache`). Ni tuiles, ni texte, ni suggestions — déjà vrai depuis
   les lots 1 à 3 sur une recherche.

   « Filtrer » (238:7930) n'est pas là tant que le lot 4 ne l'a pas allumé :
   la barre d'outils n'est pas écrite (`stelvoren_catalogue_outils()`), la
   grille suit donc le bilan à 48 + 32 = 80 au lieu de 140. Le jour où le
   bouton paraît, la barre revient avec son filet et l'écart de la maquette.

   Mobile (238:7810, dessiné pour le panneau et repris ici — décision de
   Logan du 25/09) : bilan en 12, nombre à gauche et tri à droite, cartes
   EN LIGNE de 353 × 122 à 8 d'écart.
   ================================================================== */

.stv-catalogue-entete.stv-catalogue-entete--recherche {
  gap: var(--stv-espace-32);
  padding: var(--stv-espace-80) var(--stv-catalogue-gouttiere) var(--stv-espace-48);
}

.stv-recherche-page {
  width: 100%;
  max-width: var(--stv-largeur-texte);
  margin: 0;
}

.stv-recherche-page .stv-recherche-page__cadre {
  display: flex;
  align-items: center;
  gap: var(--stv-espace-12);
  padding: var(--stv-espace-12) var(--stv-espace-16);
  border-bottom: 1px solid var(--stv-noir);
  color: var(--stv-noir);
}

/* Focus : NON DESSINÉ — le filet s'épaissit d'un pixel (même règle que le panneau). */
.stv-recherche-page .stv-recherche-page__cadre:focus-within {
  box-shadow: 0 1px 0 var(--stv-noir);
}

.stv-recherche-page .stv-recherche-page__loupe {
  display: block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.stv-recherche-page .stv-recherche-page__champ {
  flex: 1 1 auto;
  min-width: 0;
}

.stv-recherche-page .stv-recherche__champ.stv-recherche__champ::placeholder {
  color: var(--stv-texte-indication);
}

@media (max-width: 767px) {
  .stv-catalogue-entete.stv-catalogue-entete--recherche {
    gap: var(--stv-espace-16);
    padding: var(--stv-espace-32) var(--stv-catalogue-gouttiere) 0;
  }

  .stv-catalogue-page--recherche .stv-catalogue {
    padding-top: var(--stv-espace-16);
  }

  .stv-recherche-page {
    max-width: none;
  }

  .stv-catalogue-entete--recherche .stv-recherche-bilan {
    align-self: stretch;
    justify-content: space-between;
  }

  .stv-catalogue-entete--recherche .stv-recherche-bilan .stv-recherche-bilan__compte,
  .stv-catalogue-entete--recherche .stv-recherche-bilan .stv-tri .stv-tri__bouton {
    font-size: var(--stv-taille-copyright);
  }

  .stv-catalogue-entete--recherche .stv-recherche-bilan .stv-tri .stv-tri__bouton {
    gap: var(--stv-espace-8);
  }

  .stv-catalogue-entete--recherche .stv-recherche-bilan .stv-recherche-bilan__tiret {
    display: none;
  }

  .stv-catalogue-entete--recherche .stv-recherche-bilan .stv-tri .stv-tri__liste {
    right: 0;
    left: auto;
  }

  /* La carte en ligne (238:6864) — mêmes cotes que dans le panneau (composants.css). */
  .stv-catalogue-page--recherche .stv-grille-produits .stv-carte-produit {
    display: grid;
    grid-template-columns: 81.213px minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--stv-espace-16);
    align-items: start;
  }

  .stv-catalogue-page--recherche .stv-grille-produits .stv-carte-produit .stv-carte-produit__media {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    width: 81.213px;
    height: 90px;
    aspect-ratio: auto;
  }

  .stv-catalogue-page--recherche .stv-grille-produits .stv-carte-produit .stv-carte-produit__nom {
    grid-column: 2;
    grid-row: 2;
    align-items: flex-start;
    margin-top: 0;
    font-size: var(--stv-taille-texte);
  }

  .stv-catalogue-page--recherche .stv-grille-produits .stv-carte-produit .stv-carte-produit__prix {
    grid-column: 2;
    grid-row: 3;
    margin-top: var(--stv-espace-4);
  }

  /* Carte en ligne, centrée en hauteur pour elle-même : pas de rangée à aligner, la ligne vide est retirée (R28, 28/10). */
  .stv-catalogue-page--recherche .stv-grille-produits .stv-carte-produit .stv-carte-produit__a-partir--vide {
    display: none;
  }
}


/* =====================================================================
   9. LE PANNEAU DE FILTRES (fiche 92, lot du 23/10/2026)
   Maquettes `315:13209` (replié), `315:13328` (déplié), `156:8871`
   (mobile). Rendu par parties/catalogue-filtres.php, posé au `wp_footer`.

   LE MODULE D'OFF-CANVAS DU TIROIR, PAS UN SECOND : la boîte (608, toute la
   hauteur, à droite), le voile (bleu pétrole à 40 %, flou de 2), le
   glissement et le verrou de défilement sont ceux de `.stv-lateral`
   (composants.css). Ici, seulement ce qu'il y a dedans.

   RELEVÉ DEV MODE (315:13421) : marge intérieure 32 ; en-tête 30 (« Filtrer »
   Outfit 24, croix de 16) ; 32 jusqu'aux groupes ; chaque groupe un filet
   anthracite à 20 % au-dessus (`--stv-filet-liste`), 16 au-dessus et
   au-dessous de son titre (Inter 16 / 1,5 — Regular replié, Medium déplié,
   + / − de 14 au trait de 0,75), 24 jusqu'aux options ; options à 8 d'écart,
   rangées de 24 : case de 12, 6, libellé Inter 16 noir, compte Inter 14
   anthracite à droite. Prix : « Min » Inter 14 à 50 % (`--stv-texte-indication`),
   4, champ de 123 × 39 (filet anthracite à 40 %, `--stv-filet-onglets`, 8 / 4
   de marge, Inter 14 anthracite), 4, « € » ; 12 ; un trait gris clair qui
   prend la place restante (le rail du curseur retiré par la 87.6, gardé comme
   séparateur) ; 12 ; « Max », le même champ. Le dernier groupe a aussi son
   filet dessous (315:13320). Pied : « Réinitialiser les filtres » (secondaire)
   et « Appliquer » (primaire), 264 × 48 à 16 d'écart, à 32 du bas.

   L'EN-TÊTE ET LE PIED NE DÉFILENT PAS — le corps seul, entre les deux. Dans
   la maquette l'en-tête est dans le bloc des groupes ; ici il reste en haut,
   comme celui du tiroir (relevé du 23/09) : la fermeture toujours à portée.
   Au repos, le rendu est le même.

   POIDS. Le panneau est posé au `wp_footer` d'une archive (`body.woocommerce`)
   — donc AUSSI sous `.elementor-kit-44301`, que le `<body>` porte partout et
   dont la feuille est chargée sur les archives (mesuré le 23/10) : titres et
   boutons du kit à 0,1,1 (survol 0,2,1), et surtout ses CHAMPS —
   `.elementor-kit-44301 input:not([type="button"]):not([type="submit"])`, qui
   pèse 0,3,1 (chaque `:not()` compte son attribut) et pose fond gris, filet à
   35 %, marge de 8 / 12 et police du kit sur toute case et tout champ.
   Premier rendu : des cases de 26 × 18 grises. La case et le champ sont donc
   écrits à 0,4,0 ; le reste sous `.stv-filtres` (0,2,0), survols à 0,3,0. Et
   le `reset.css` de Hello (`input[type=number]` 0,1,1, son `:focus` 0,2,1).
   ================================================================== */

.stv-filtres .stv-filtres__formulaire {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}

/* --- 9.1 L'en-tête (315:13423) ------------------------------------- */

.stv-filtres .stv-filtres__entete {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--stv-espace-16);
  height: 30px;
  margin: var(--stv-espace-32) var(--stv-espace-32) 0;
}

/* `315:13424` : Outfit Regular 24, interligne « normal » — 30, comme le tiroir. */
.stv-filtres .stv-filtres__titre {
  margin: 0;
  color: var(--stv-noir);
  font-family: var(--stv-police-titres);
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0;
  text-transform: none;
}

/*
   La croix (315:13425) : la même que celle du tiroir — 16 dessinés, 17 avec le
   trait, tracé identique à l'export de `156:11308` (vérifié le 23/10). Zone de
   clic portée à 32 par un pseudo-élément, sans rien déplacer.
*/
.stv-filtres .stv-filtres__fermer {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--stv-noir);
  cursor: pointer;
}

.stv-filtres .stv-filtres__fermer::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.stv-filtres .stv-filtres__fermer svg {
  display: block;
  width: 17px;
  height: 17px;
  margin: -0.5px;
}

.stv-filtres .stv-filtres__fermer:hover,
.stv-filtres .stv-filtres__fermer:focus {
  background: transparent;
  color: var(--stv-anthracite);
}

.stv-filtres .stv-filtres__fermer:focus-visible {
  outline: 2px solid var(--stv-anthracite);
  outline-offset: 6px;
}

/* --- 9.2 Le corps et les groupes (315:13426) ----------------------- */

/*
   Le corps défile, seul. `overscroll-behavior: contain` : au bout de la liste,
   le défilement ne passe pas à la page derrière.
*/
.stv-filtres .stv-filtres__corps {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--stv-espace-32);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.stv-filtres .stv-filtres__groupe {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--stv-filet-liste);
}

.stv-filtres .stv-filtres__groupe:last-child {
  border-bottom: 1px solid var(--stv-filet-liste);
}

/*
   Le titre d'un groupe, tout entier cliquable : 16 + 24 + 16 = 56, plus le
   filet — les 57 de la maquette repliée. Regular replié, Medium déplié
   (315:13310 / 315:13429).
*/
.stv-filtres .stv-filtres__resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stv-espace-16);
  padding: var(--stv-espace-16) 0;
  color: var(--stv-noir);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-texte);
  font-weight: 400;
  line-height: var(--stv-interligne-texte);
  list-style: none;
  cursor: pointer;
}

.stv-filtres .stv-filtres__resume::-webkit-details-marker {
  display: none;
}

.stv-filtres .stv-filtres__groupe[open] > .stv-filtres__resume {
  font-weight: 500;
}

/* Focus : NON DESSINÉ — le contour des champs du site, collé au titre. */
.stv-filtres .stv-filtres__resume:focus-visible {
  outline: 2px solid var(--stv-anthracite);
  outline-offset: 2px;
}

.stv-filtres .stv-filtres__signe {
  display: block;
  flex: 0 0 auto;
  color: var(--stv-noir);
}

/* 14 dessinés, 14,75 avec le trait : la boîte de la maquette, débord rendu. */
.stv-filtres .stv-filtres__signe--plus {
  width: 14.75px;
  height: 14.75px;
  margin: -0.375px;
}

.stv-filtres .stv-filtres__signe--moins {
  width: 14.75px;
  height: 0.75px;
  margin: 0 -0.375px;
}

.stv-filtres .stv-filtres__groupe[open] .stv-filtres__signe--plus,
.stv-filtres .stv-filtres__groupe:not([open]) .stv-filtres__signe--moins {
  display: none;
}

/*
   Le contenu d'un groupe déplié : 24 sous le titre (16 de sa marge + 8), 16
   sous la dernière option. Un `<fieldset>` : le lecteur d'écran annonce le
   groupe en entrant dans ses cases.
*/
.stv-filtres .stv-filtres__contenu {
  min-width: 0;
  margin: var(--stv-espace-8) 0 0;
  padding: 0 0 var(--stv-espace-16);
  border: 0;
}

.stv-filtres .stv-filtres__options {
  display: flex;
  flex-direction: column;
  gap: var(--stv-espace-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stv-filtres .stv-filtres__options > li {
  margin: 0;
}

/* --- 9.3 Une option (315:13432) ------------------------------------ */

/* Toute la rangée coche la case : 24 de haut, le libellé et le compte compris. */
.stv-filtres .stv-filtres__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stv-espace-16);
  min-height: 24px;
  margin: 0;
  cursor: pointer;
}

.stv-filtres .stv-filtres__choix {
  display: inline-flex;
  align-items: center;
  gap: var(--stv-espace-6);
  min-width: 0;
}

.stv-filtres .stv-filtres__libelle {
  color: var(--stv-noir);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-texte);
  font-weight: 400;
  line-height: var(--stv-interligne-texte);
}

.stv-filtres .stv-filtres__compte {
  flex: 0 0 auto;
  color: var(--stv-anthracite);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-petit);
  font-weight: 400;
  line-height: var(--stv-interligne-texte);
}

/*
   LA CASE (315:13441 / 315:13434) : 12 × 12, filet noir de 1, fond blanc.
   COCHÉE — DESSINÉE ICI, pour la première fois sur le site : aplat noir et
   coche blanche au trait de 0,75, tracé EXPORTÉ de l'asset de `315:13434`
   (23/10). La case de la commande (socle § 9.6) la reconstruisait en
   attendant (142) : à aligner sur ce dessin le jour où on y touche.
   La case native garde son rôle et son clavier ; seul le dessin change.
   0,4,0 contre le champ du kit (0,3,1, voir l'en-tête de la section).
*/
.stv-filtres.stv-filtres .stv-filtres__case.stv-filtres__case {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--stv-noir);
  border-radius: var(--stv-rayon);
  background: var(--stv-blanc);
  cursor: pointer;
}

.stv-filtres.stv-filtres .stv-filtres__case.stv-filtres__case:checked {
  background: var(--stv-noir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M9.63636 3L4.63636 8L2.36364 5.72727' stroke='white' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 12px 12px no-repeat border-box;
}

.stv-filtres.stv-filtres .stv-filtres__case.stv-filtres__case:focus-visible {
  outline: 2px solid var(--stv-anthracite);
  outline-offset: 2px;
}

/* --- 9.4 Le prix (315:13486) --------------------------------------- */

.stv-filtres .stv-filtres__prix {
  display: flex;
  align-items: center;
  gap: var(--stv-espace-12);
}

.stv-filtres .stv-filtres__borne {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--stv-espace-4);
  min-width: 0;
  margin: 0;
  color: var(--stv-anthracite);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-petit);
  font-weight: 400;
  line-height: var(--stv-interligne-texte);
}

.stv-filtres .stv-filtres__borne-libelle {
  color: var(--stv-texte-indication);
}

/*
   Le champ : 123 × 39 (8 + 21 + 8 et le filet). Un `type="number"` pour le
   clavier numérique, sans ses flèches (non dessinées). 0,4,0 contre le kit
   (0,3,1) et Hello.
*/
.stv-filtres.stv-filtres .stv-filtres__champ.stv-filtres__champ {
  -moz-appearance: textfield;
  appearance: textfield;
  flex: 0 1 123px;
  box-sizing: border-box;
  width: 123px;
  min-width: 0;
  height: 39px;
  margin: 0;
  padding: var(--stv-espace-8) var(--stv-espace-4);
  border: 1px solid var(--stv-filet-onglets);
  border-radius: var(--stv-rayon);
  background: var(--stv-blanc);
  color: var(--stv-anthracite);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-petit);
  font-weight: 400;
  line-height: var(--stv-interligne-texte);
  transition: none;
}

.stv-filtres .stv-filtres__champ::-webkit-inner-spin-button,
.stv-filtres .stv-filtres__champ::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Focus : NON DESSINÉ — le filet passe au noir, le contour des champs du site. */
.stv-filtres.stv-filtres .stv-filtres__champ.stv-filtres__champ:focus {
  border-color: var(--stv-noir);
  outline: 2px solid var(--stv-anthracite);
  outline-offset: 0;
}

.stv-filtres .stv-filtres__devise {
  flex: 0 0 auto;
}

/* Le trait entre les deux (315:13492) : 1 de gris clair, la place restante. */
.stv-filtres .stv-filtres__trait {
  flex: 1 1 auto;
  min-width: 0;
  height: 0;
  border-top: 1px solid var(--stv-gris-clair);
}

/* --- 9.5 Le pied (315:13515) --------------------------------------- */

.stv-filtres .stv-filtres__pied {
  display: flex;
  flex: 0 0 auto;
  gap: var(--stv-espace-16);
  padding: 0 var(--stv-espace-32) max(var(--stv-espace-32), env(safe-area-inset-bottom));
}

/*
   Deux boutons du site, à parts égales (264 dans 544). Graisse 400 et non le
   Medium 500 de la maquette : `.stv-bouton`, décision de Logan du 23/09, tenue
   partout. 0,3,0 : le bouton du site pèse 0,2,0.
*/
.stv-filtres .stv-filtres__bouton.stv-bouton {
  flex: 1 1 0;
  box-sizing: border-box;
  min-width: 0;
}

/* --- 9.6 Mobile (156:8871) : plein écran, boutons empilés en bas ----

   Le panneau prend tout l'écran (`max-width: 100vw` de `.stv-lateral`). Marge
   de 20, celle du catalogue mobile (la maquette, et non les 16 du tiroir qui
   n'a pas de maquette mobile). Les deux boutons pleine largeur, l'un sous
   l'autre à 8, FIXÉS EN BAS (point 3 du lot, Logan, 23/10 — la maquette les
   pose au bas d'un panneau de 1 359 sans dire s'ils suivent le défilement).
   Le prix tient en 353 : écarts de 2, trait de 15 (156:9002) ; sous 393, les
   champs rétrécissent.
*/
@media (max-width: 767px) {
  .stv-filtres .stv-filtres__entete {
    margin: var(--stv-espace-32) 20px 0;
  }

  .stv-filtres .stv-filtres__corps {
    padding: var(--stv-espace-32) 20px;
  }

  .stv-filtres .stv-filtres__pied {
    flex-direction: column;
    gap: var(--stv-espace-8);
    padding: 0 20px max(var(--stv-espace-32), env(safe-area-inset-bottom));
  }

  .stv-filtres .stv-filtres__bouton.stv-bouton {
    flex: 0 0 auto;
    width: 100%;
  }

  .stv-filtres .stv-filtres__prix {
    gap: 2px;
  }

  .stv-filtres .stv-filtres__trait {
    flex: 0 1 15px;
  }
}

/* --- 9.7 La vue filtrée sans résultat (point 2 du lot) -------------

   NON DESSINÉE (88) : la barre (« Filtrer », 0 produit), puis une phrase et
   « Réinitialiser les filtres » — le bouton secondaire du site, à sa largeur.
   Provisoire.
*/
.stv-filtres-vide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stv-espace-24);
}

.stv-filtres-vide .stv-filtres-vide__texte {
  margin: 0;
  color: var(--stv-texte-secondaire);
  font-family: var(--stv-police-texte);
  font-size: var(--stv-taille-texte);
  font-weight: 400;
  line-height: var(--stv-interligne-texte);
}