/* ==========================================================================
   Shine — page CATÉGORIE : bannière pleine largeur, barre d'outils, panneau
   de filtres vertical (tiroir).

   Couleurs : uniquement des jetons de la palette (custom.css). Aucun code
   hexadécimal en dur, pour que la recoloration du site reste centralisée.
   Typographie : charte Shine — Anek (menus, corps, boutons), Saira (accroche,
   fil d'Ariane, prix), BricolageGrotesque (titres H*).
   ========================================================================== */


/* ==========================================================================
   Dissous depuis catalog.css le 18/08/2026 — le fichier n'avait plus que ces
   12 règles de liste (en-tête de catégorie, tri, pagination, facettes) après
   le départ de la carte produit et de la fiche produit. Une requête de moins.
   ⚠ Placé en TÊTE : shine-category.css était chargé APRÈS catalog.css, l'ordre
   relatif des déclarations est donc conservé — la cascade ne bouge pas.
   ========================================================================== */

/* ----- En-tête catégorie : bandeau sombre + accent rouge (BAT intro) ----- */
.category__header {
  padding: 26px 0 30px;
  color: var(--shine-white);
  background: var(--shine-ink, var(--shine-ink));
}

.category__header > * {
  max-width: 1280px;
  padding-inline: 20px;
  margin-inline: auto;
}

.category__header .page-title-section,
.category__header h1 {
  max-width: 780px;
  padding-left: 22px;
  border-left: 3px solid var(--shine-race, var(--shine-race));
  font-family: "BricolageGrotesque", system-ui, sans-serif;
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 600;
  line-height: 0.95;
  text-transform: uppercase;
}

.category__header .category__description,
.category__header .category__description p {
  max-width: 780px;
  margin-top: 12px;
  margin-left: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--shine-grey-300);
}

/* ----- Grille produits ----- */
#js-product-list .products,
#products .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1280px;
  padding-inline: 20px;
  margin-inline: auto;
}

@media (max-width: 900px) {
  #js-product-list .products,
  #products .products {
    grid-template-columns: repeat(2, 1fr);
  }
}/* ----- Pagination ----- */
#products .pagination,
#js-product-list .pagination {
  gap: 6px;
}

/* Saira 400 (charte) ; #js-product-list couvre le conteneur re-rendu par les facettes.
   Hauteur imposée : sans ça les boutons à icône Material (24px/24px) sont 3px plus hauts
   que ceux à chiffre (line-height 21px). line-height:1 + height fixe = même boîte pour
   tous, quel que soit le contenu. */
#products .page-link,
#js-product-list .page-link {
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  font-family: "Saira", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--shine-ink, var(--shine-ink));
  border: 1.5px solid var(--shine-line, var(--shine-line));
  border-radius: 9px;
}

/* l'icône ne doit plus dicter la hauteur du bouton */
#products .page-link .material-icons,
#js-product-list .page-link .material-icons {
  font-size: 18px;
  line-height: 1;
}

/* Le chiffre peut être un <span class="pagination__number"> que le parent met en gris via
   @layer ps-components { .pagination__number { color: var(--bs-secondary-color) } }.
   Une règle NON layerisée gagne sur une règle layerisée, quelle que soit la spécificité.
   Volontairement NON scopée : ce markup n'apparaît pas sur la page catégorie, mais on
   veut la correction partout où le thème parent l'utilise (recherche, CMS, marques…). */
.pagination__number {
  color: inherit;
}

/* ----- Facettes (polish léger, cohérence pilules/rouge) ----- */
#search-filters .facet-title {
  font-family: "Anek", system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  text-transform: uppercase;
}

#search-filters .facet-label.active,
#search-filters .facet-label:hover {
  /* Doublon de la règle `.shine-filters .facet-label.active` plus bas : les deux
     peignaient le même libellé en vert sur blanc. Corrigées ensemble. */
  color: var(--shine-dark);
}

/* ==========================================================================
   1. Ossature pleine largeur
   ========================================================================== */

/* La page catégorie retire la largeur maximale de Bootstrap (voir le bloc
   container_class de category.tpl) : c'est ce qui permet à la bannière de
   toucher les deux bords. Chaque section reprend ensuite sa propre largeur. */
.shine-category-page__inner {
  max-width: 1280px;
  padding-inline: 20px;
  margin-inline: auto;
}

#products.shine-category {
  width: 100%;
}

/* Tout ce qui suit la liste produits occupe la PLEINE largeur : gouttière fluide, pas
   de plafond à 1280 px. Le point d'insertion displayCategoryAfterProducts, lui, est
   rendu hors de ce conteneur — un module doit pouvoir toucher les deux bords. */
.shine-category-page__wide {
  padding-inline: clamp(20px, 5vw, 80px);
}

.page--full-width #content-wrapper,
.page--full-width .center-column {
  width: 100%;
  max-width: 100%;
}

/* ==========================================================================
   2. En-tête de catégorie — titre seul

   ⚠ 13/08/2026 : le bandeau (image de couverture, voile sombre, hauteur imposée)
   a été retiré. Il ne reste que le H1, en noir et centré. Les styles de l'ancien
   bandeau sont dans l'historique git si la décision devait s'inverser.
   ========================================================================== */

.shine-cat-head {
  padding: 1em 0 0;
  text-align: center;
}

.shine-cat-head__inner {
  max-width: 1280px;
  padding-inline: clamp(20px, 4vw, 40px);
  margin-inline: auto;
}

.shine-cat-head__title {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  color: var(--shine-ink);
}

/* Pastilles de sous-catégories : version claire, centrée sous le titre. */
/* Une seule ligne qui défile, plutôt que deux ou trois lignes de pastilles :
   au-delà d'une ligne, le bloc pousse la grille produits vers le bas et le
   regard n'a plus de repère stable. Le défilement garde la hauteur constante,
   quel que soit le nombre de sous-catégories.
   `justify-content: center` ne vaut que tant que tout tient : dès qu'il y a
   débordement, il rognerait le premier élément — d'où le passage à
   `flex-start` avec des marges automatiques sur le conteneur intérieur. */
.shine-cat-head__subcats {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  gap: 8px;
  margin-top: 20px;
  padding-bottom: 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.shine-cat-head__subcats::-webkit-scrollbar { display: none; }

/* ⚠ Sélecteur volontairement plus précis que la simple classe : le thème parent
   style `a[href]` (0,1,1), qui l'emportait sur `.shine-cat-head__subcat` (0,1,0)
   et rendait le fond transparent avec une bordure noire. */
.shine-cat-head__subcats .shine-cat-head__subcat {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
  padding: 10px 18px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--shine-ink);
  background: var(--shine-white);
  border: 1px solid var(--shine-line);
  border-radius: 4px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.shine-cat-head__subcats .shine-cat-head__subcat:hover,
.shine-cat-head__subcats .shine-cat-head__subcat:focus-visible {
  /* Vert de charte au TEXTE sur fond clair = 1,15:1. Il reste en bordure, où il
     n'a pas de seuil à tenir, et le texte prend la couleur lisible.
     (Balayage de contraste du 02/09/2026, issu de la revue croisée Codex.) */
  color: var(--shine-dark);
  border-color: var(--shine-race);
}

/* ==========================================================================
   2 bis. Fil d'Ariane, sous la bannière
   ========================================================================== */

.shine-breadcrumb {
  background-color: transparent;
}

.shine-breadcrumb__inner {
  max-width: 1280px;
  padding: 14px 20px 0;
  margin-inline: auto;
  text-align: center;
}

/* la liste du fil d'ariane est un flex : c'est elle qu'il faut centrer */
.shine-breadcrumb .breadcrumb {
  justify-content: center;
}

.shine-breadcrumb .breadcrumb {
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   3. Barre d'outils : Filtres | compteur | tri
   ========================================================================== */

.shine-products__selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 22px 0 12px;
}

.shine-products__filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--shine-ink);
  background: transparent;
  border: 1.5px solid var(--shine-ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.shine-products__filters:hover,
.shine-products__filters:focus-visible {
  color: var(--shine-white);
  background: var(--shine-ink);
  border-color: var(--shine-ink);
}

.shine-products__filters-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--shine-dark);
  background: var(--shine-race);
  border-radius: 999px;
}

/* Le compteur pousse le tri à droite. */
#products .shine-products__count {
  margin-right: auto;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--shine-ink);
}

#products .shine-products__count strong {
  font-family: "Anek", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  /* Ce n'est pas un survol : le NOMBRE de produits s'affichait en permanence à
     1,15:1 sur blanc. Il porte déjà la taille et la graisse, la couleur n'avait
     rien à ajouter. */
  color: var(--shine-dark);
}

/* ==========================================================================
   4. Panneau de filtres vertical (tiroir)
   ========================================================================== */

.shine-filters {
  --bs-offcanvas-width: 380px;
  display: flex;
  flex-direction: column;
  background: var(--shine-white);
  color: var(--shine-ink);
}

.shine-filters__header {
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--shine-line);
}

.shine-filters__title {
  margin: 0;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shine-ink);
}

.shine-filters__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--shine-ink);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease;
}

.shine-filters__close:hover {
  background: rgb(var(--shine-ink-rgb) / 0.06);
}

.shine-filters__body {
  flex: 1 1 auto;
  padding: 8px 24px 24px;
  overflow-y: auto;
}

/* Le pied reste visible pendant le défilement des filtres. */
.shine-filters__footer {
  flex: 0 0 auto;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--shine-line);
  background: var(--shine-white);
}

.shine-filters__apply {
  width: 100%;
  justify-content: center;
}

/* ---- Habillage de l'accordéon rendu par ps_facetedsearch --------------------
   Le balisage vient de la surcharge du thème PARENT (accordéon Bootstrap, curseurs
   nouislider, pastilles de couleur). On ne le réécrit pas : on l'habille.
   --------------------------------------------------------------------------- */

.shine-filters .left-block__title {
  display: none; /* le titre du tiroir fait déjà le travail */
}

.shine-filters .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--shine-line);
}

.shine-filters .accordion-button {
  padding: 18px 0;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shine-ink);
  background: transparent;
  box-shadow: none;
}

.shine-filters .accordion-button:not(.collapsed) {
  color: var(--shine-ink);
  background: transparent;
}

.shine-filters .accordion-button:focus {
  box-shadow: none;
}

.shine-filters .accordion-body {
  padding: 0 0 18px;
  margin: 0;
  list-style: none;
}

.shine-filters .accordion-body > li {
  margin-bottom: 2px;
}

.shine-filters .search-filters__item {
  padding: 2px 0;
}

.shine-filters .form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0;
  margin: 0;
}

.shine-filters .form-check-input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--shine-line-strong, var(--shine-line));
  border-radius: 4px;
  cursor: pointer;
}

.shine-filters .form-check-input:checked {
  background-color: var(--shine-race);
  border-color: var(--shine-race);
}

.shine-filters .form-check-input:focus {
  border-color: var(--shine-race);
  box-shadow: 0 0 0 3px rgb(var(--shine-race-rgb) / 0.18);
}

.shine-filters .form-check-label {
  flex: 1 1 auto;
  margin: 0;
  cursor: pointer;
}

.shine-filters .search-filters__link {
  font-family: "Anek", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--shine-ink);
  text-decoration: none;
}

.shine-filters .facet-label.active .search-filters__link {
  font-weight: 600;
  /* Le vert de charte (#d6ff32) ne fait que 1,15:1 sur le fond blanc du tiroir :
     le libellé sélectionné devenait le MOINS lisible de la liste. L'état actif
     est déjà porté par la graisse et par la case cochée ; la couleur revient donc
     au texte normal (19:1). Le vert reste réservé aux fonds et aux ornements, où
     il tient son rôle. (Revue croisée Codex du 02/09/2026, finding retenu.) */
  color: var(--shine-dark);
}

.shine-filters .search-filters__magnitude {
  font-size: 12px;
  color: var(--shine-muted);
}

/* Pastilles de couleur / texture */
.shine-filters .color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgb(var(--shine-ink-rgb) / 0.2);
}

.shine-filters .color.active {
  outline: 2px solid var(--shine-race);
  outline-offset: 2px;
}

/* Curseur de prix */
.shine-filters .search-filters__slider-container {
  padding: 6px 4px 4px;
}

.shine-filters .search-filters__slider-values,
.shine-filters .js-faceted-values {
  margin-top: 12px;
  font-family: "Saira", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--shine-ink);
}

.shine-filters .noUi-connect {
  background: var(--shine-race);
}

.shine-filters .noUi-handle {
  border-color: var(--shine-race);
}

/* Bouton « Tout effacer » */
.shine-filters .search-filters__clear {
  padding: 14px 0 4px;
}

.shine-filters .js-search-filters-clear-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--shine-ink);
  background: transparent;
  border: 1.5px solid var(--shine-line);
  border-radius: 999px;
}

.shine-filters .js-search-filters-clear-all:hover {
  color: var(--shine-dark);
  background: var(--shine-race);
  border-color: var(--shine-race);
}

.shine-filters .js-search-filters-clear-all .material-icons {
  font-size: 16px;
}

/* ==========================================================================
   5. Filtres actifs : pastilles supprimables (au-dessus de la liste)
   ========================================================================== */

.shine-active-filters {
  margin-top: 4px;
  margin-bottom: 8px;
}

.shine-active-filters__title {
  display: inline-block;
  margin-right: 8px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--shine-muted);
}

.shine-active-filters__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: middle;
}

.shine-active-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 12px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--shine-ink);
  background: rgb(var(--shine-race-rgb) / 0.06);
  border: 1px solid rgb(var(--shine-race-rgb) / 0.25);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.shine-active-filters__chip:hover {
  color: var(--shine-dark);
  background: var(--shine-race);
  border-color: var(--shine-race);
}

.shine-active-filters__chip .material-icons {
  font-size: 16px;
}

/* ==========================================================================
   6. Sous-catégories
   ========================================================================== */

.shine-subcategories {
  margin-top: 20px;
}

.shine-subcategories .subcategory__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.shine-subcategories .subcategory__list--with-images {
  gap: 16px;
}

.shine-subcategories .subcategory__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--shine-ink);
  background: transparent;
  border: 1.5px solid var(--shine-line);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.shine-subcategories .subcategory__link:hover {
  color: var(--shine-dark);
  background: var(--shine-race);
  border-color: var(--shine-race);
}

.shine-subcategories .subcategory__link--with-image {
  flex-direction: column;
  width: 150px;
  padding: 0;
  overflow: hidden;
  background: var(--shine-surface, var(--shine-white));
  border-color: var(--shine-line);
  border-radius: 12px;
}

.shine-subcategories .subcategory__link--with-image:hover {
  color: var(--shine-ink);
  background: var(--shine-surface, var(--shine-white));
  border-color: var(--shine-race);
}

.shine-subcategories .subcategory__thumbnail {
  display: block;
  width: 100%;
  height: auto;
}

.shine-subcategories .subcategory__link--with-image .subcategory__name {
  padding: 8px 10px;
}

/* ==========================================================================
   7. Adaptations écrans étroits
   ========================================================================== */

@media (max-width: 900px) {

  .shine-products__selection {
    gap: 10px 12px;
  }

  #products .shine-products__count {
    order: 3;
    width: 100%;
    margin-right: 0;
  }
}

@media (max-width: 575.98px) {
  .shine-filters {
    --bs-offcanvas-width: 100%;
  }
}

/* ==========================================================================
   7. Accessoires recommandés (champ « products » de la catégorie)
   ========================================================================== */

.shine-accessories {
  padding: clamp(32px, 4vw, 56px) 0 0;
}

.shine-accessories__title {
  margin: 0 0 24px;
  font-family: "BricolageGrotesque", system-ui, sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--shine-ink);
}

.shine-accessories__grid {
  display: grid;
  /* En pleine largeur, un nombre de colonnes figé donnerait des cartes démesurées sur
     un grand écran : on laisse la grille en poser autant que la place le permet. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
}

.shine-accessories__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--shine-white);
  border: 1px solid var(--shine-line);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.shine-accessories__card:hover,
.shine-accessories__card:focus-visible {
  border-color: var(--shine-race);
  box-shadow: 0 10px 28px rgb(var(--shine-ink-rgb) / 0.1);
  transform: translateY(-2px);
}

.shine-accessories__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--shine-paper);
}

.shine-accessories__name {
  padding: 14px 16px 18px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--shine-ink);
}

@media (max-width: 900px) {
  .shine-accessories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .shine-accessories__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   7 bis. Informations complémentaires, sous la liste produits
   ========================================================================== */

/* ==========================================================================
   Présentation de la catégorie, sous la liste produits (descendue de la
   bannière le 13/08/2026 : elle n'y porte plus que le H1).
   ========================================================================== */
.shine-category__about {
  padding: clamp(28px, 3.5vw, 48px) 0 0;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--shine-ink);
}

.shine-category__about-title {
  margin: 0 0 14px;
  font-family: "BricolageGrotesque", system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--shine-ink);
}

/* La description PrestaShop garde l'accroche en Saira, comme dans la bannière. */
.shine-category__about-lead {
  max-width: 78ch;
  margin: 0 0 12px;
  font-family: "Saira", system-ui, sans-serif;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--shine-ink-4);
}

.shine-category__about-body {
  max-width: 88ch;
}

.shine-category__about-body :is(h2, h3, h4) {
  margin-top: 1.4em;
  margin-bottom: 0.4em;
  font-family: "BricolageGrotesque", system-ui, sans-serif;
  font-weight: 600;
}

.shine-category__about-body p:last-child {
  margin-bottom: 0;
}

.shine-category__more {
  padding: clamp(32px, 4vw, 56px) 0 0;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--shine-ink);
}

/* Le sous-titre porte .shine-eyebrow (rouge, Anek, majuscules, étoile) : on ne
   règle ici que son espacement dans ce bloc. */
.shine-category__more-eyebrow {
  margin: 0 0 6px;
}

/* Titre de section : le H2 reprend la casse naturelle — la phrase est trop longue
   pour des majuscules, contrairement au « GUIDE SHINE » qu'il remplace. */
.shine-category__more-title {
  margin: 0;
  font-family: "BricolageGrotesque", system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--shine-ink);
}

.shine-category__more-rule {
  height: 1px;
  margin: 26px 0 0;
  border: 0;
  background: var(--shine-line);
  opacity: 1; /* Bootstrap met .25 sur les <hr> */
}

.shine-category__more-body {
  padding-top: 28px;
}

.shine-category__more :is(h2, h3, h4) {
  margin-top: 1.4em;
  margin-bottom: 0.4em;
  font-family: "BricolageGrotesque", system-ui, sans-serif;
  font-weight: 600;
}

.shine-category__more h2 { font-size: clamp(20px, 2.2vw, 26px); }
.shine-category__more h3 { font-size: 18px; }

.shine-category__more p:last-child {
  margin-bottom: 0;
}

.shine-category__more a {
  color: var(--shine-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.shine-category__more a:hover {
  /* Le lien est déjà souligné : le survol se marque par l'assombrissement du
     texte plutôt que par une couleur illisible. */
  color: var(--shine-dark);
}

/* ==========================================================================
   8. Champs de catégorie rendus par cyliumproductfields
   (hook displayFooterCategory → .cpf-category-content)

   Le module rend un balisage neutre : on l'habille ici plutôt que de le
   surcharger, pour que le thème reste la seule source de style.
   ⚠ Le bloc est rendu HORS de .shine-category-page__inner (il vient d'un hook,
   après le conteneur) : il reprend donc lui-même la largeur et les gouttières.
   ========================================================================== */

.cpf-category-content {
  max-width: 1280px;
  padding: clamp(40px, 5vw, 72px) 20px 8px;
  margin-inline: auto;
}

/* Le module pose `display: flex` sur cet élément : la grille de produits devient
   alors un élément flexible qui se dimensionne à son contenu (mesuré : 824 px au
   lieu des 1225 disponibles). On rend la mise en page au thème. */
.cpf-field-item {
  display: block;
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* Le libellé du champ tient lieu de titre de section (« Les accessoires
   recommandés ») : on lui donne la même valeur typographique qu'un H2 de la
   charte, sans en faire un H2 — le module rend un <span>, et inventer un niveau
   de titre fausserait le plan du document pour les lecteurs d'écran. */
.cpf-field-label {
  display: block;
  margin-bottom: 24px;
  font-family: "BricolageGrotesque", system-ui, sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--shine-ink);
}

/* ---- Liste de produits (champ de type « products ») ---- */

.cpf-products-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
}

.cpf-product-item {
  min-width: 0;
}

.cpf-product-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--shine-white);
  border: 1px solid var(--shine-line);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cpf-product-link:hover,
.cpf-product-link:focus-visible {
  border-color: var(--shine-race);
  box-shadow: 0 10px 28px rgb(var(--shine-ink-rgb) / 0.1);
  transform: translateY(-2px);
}

.cpf-product-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--shine-paper);
}

.cpf-product-name {
  padding: 14px 16px 18px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--shine-ink);
}

/* ---- Champs de texte enrichi (Guide, conseils…) ---- */

.cpf-field-type-richtext .cpf-field-value,
.cpf-field-type-text .cpf-field-value {
  max-width: 78ch;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--shine-ink);
}

@media (max-width: 900px) {
  .cpf-products-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .cpf-products-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Défilement infini des listes produit (shine-listing.js)
   La pagination native reste dans le DOM : c'est elle qui porte l'URL de la
   page suivante, lue par le JS. Elle est seulement masquée à l'écran — ce sont
   des <button>, donc aucun lien perdu pour les moteurs.
   ========================================================================== */
/* ⚠ Pas de `display: none` : la pagination est faite de vrais liens, seule voie
   de découverte des pages profondes pour un moteur. On la sort du champ visuel
   sans la sortir du document — et elle revient si on l'atteint au clavier, sinon
   on tabulerait sur des liens invisibles. */
#js-product-list.shine-infinite-on .products__pagination {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#js-product-list.shine-infinite-on .products__pagination:focus-within {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

.shine-infinite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 0 8px;
  text-align: center;
}

.shine-infinite__status {
  margin: 0;
  font-family: "Anek", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--shine-muted);
}

.shine-infinite__button {
  min-width: 240px;
  padding: 12px 26px;
  font-family: "Saira", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--shine-ink);
  background: var(--shine-white);
  border: 1.5px solid var(--shine-line);
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.shine-infinite__button:hover:not(:disabled) {
  /* Vert de charte au TEXTE sur fond clair = 1,15:1. Il reste en bordure, où il
     n'a pas de seuil à tenir, et le texte prend la couleur lisible.
     (Balayage de contraste du 02/09/2026, issu de la revue croisée Codex.) */
  color: var(--shine-dark);
  border-color: var(--shine-race);
}

.shine-infinite.is-loading .shine-infinite__button {
  opacity: 0.6;
  cursor: progress;
}

/* rien à cliquer une fois la liste épuisée */
.shine-infinite.is-done {
  padding-top: 20px;
}

/* ==========================================================================
   Description en tête de page (19/08/2026)
   Elle ouvre la page, au-dessus du fil d'Ariane. Pleine largeur pour laisser
   passer un bloc Creative Elements ; le texte simple, lui, est ramené à la
   largeur de la grille produits, sinon une ligne courrait sur 1900 px.
   ========================================================================== */
.shine-cat-intro {
  margin: 0 0 4px;
}

.shine-cat-intro__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Un bloc Creative Elements gère sa propre largeur : on lui rend la sienne. */
.shine-cat-intro__inner:has(> .elementor) {
  max-width: none;
  padding-inline: 0;
}

.shine-cat-intro__inner > :first-child {
  margin-top: 0;
}

.shine-cat-intro__inner > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   FAQ de catégorie — entre la liste produits et les informations complémentaires
   ========================================================================== */
.shine-category__faq {
  margin-top: 48px;
}

.shine-category__faq-title {
  margin: 0 0 18px;
  font-family: "Anek", system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  color: var(--shine-ink);
}