/* ==========================================================================
   InZeBox 0.35.0 – listes de produits
   Chargé par templates/_partials/head.tpl, après inzebox-product.css (dont il
   réutilise les variables d'onglets --ibx-tab-*) et AVANT le CSS boutique.

   1. Titre de bloc « style onglet » (.ibx-section-title) – réutilisable
   2. Marques en grille de logos (ps_brandlist, mode « texte »)
   3. Liste de produits (0.28.0) : titre, compteur, tri, miniatures
      (liens, prix, boutons, étoiles d'avis, cœur liste d'envies)
   ========================================================================== */

:root {
  --ibx-brand-gap: 4px;                      /* espace entre deux tuiles */
  --ibx-brand-columns: 3;                    /* 0.31.0 : 3 colonnes */
  --ibx-brand-reveal-duration: 1s;           /* transition grisé → couleurs */
  --ibx-brand-empty-opacity: .45;            /* logo grisé */
  --ibx-brand-tile-padding: .375rem;
  --ibx-brand-count-bg: var(--ibx-header-badge-bg, var(--primary, #0b69f6));     /* comme la pastille du panier */
  --ibx-brand-count-fg: var(--ibx-header-badge-fg, #fff);
  --ibx-brand-empty-color: #6b7280;          /* nom d'une marque sans produit : 4,8:1 */
  --ibx-brand-empty-bg: #f9fafb;
  --ibx-brand-tile-radius: .375rem;
  --ibx-brand-tile-bg: #fff;
  --ibx-brand-tile-border: #e5e7eb;
  --ibx-brand-tile-border-hover: var(--ibx-tab-active-color, var(--primary, #0b69f6));
}

/* 1. Titre de bloc : même rendu que l'onglet ACTIF de la fiche produit ------ */
.ibx-section-title {
  margin-bottom: .75rem;
  /* ligne grise continue (même principe que .ibx-tabs__nav) */
  box-shadow: inset 0 calc(-1 * var(--ibx-tab-line-width, 1px)) 0 var(--ibx-tab-line-color, #d9d9d9);
}

.ibx-section-title__label {
  display: inline-block;
  padding: .5rem 0 .625rem;
  margin: 0;
  font-size: var(--ibx-tab-font-size-mobile, .875rem);
  font-weight: var(--ibx-tab-font-weight-active, 700);
  line-height: 1.2;
  color: var(--ibx-tab-text-active-color, #1f2937);
  text-transform: var(--ibx-tab-text-transform, uppercase);
  text-decoration: none;
  /* liseré couleur boutique qui recouvre la ligne grise */
  border-bottom: var(--ibx-tab-active-width, 3px) solid var(--ibx-tab-active-color, var(--primary, #0b69f6));
}

a.ibx-section-title__label:hover {
  color: var(--ibx-tab-text-active-color, #1f2937);
  text-decoration: none;
}

a.ibx-section-title__label:focus-visible {
  outline: 2px solid var(--ibx-tab-active-color, var(--primary, #0b69f6));
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .ibx-section-title__label {
    font-size: var(--ibx-tab-font-size, 1rem);
  }
}

/* 2. Marques en grille de logos (0.27.0 ; pastilles 0.29.0 ; carrées 0.30.0 ;
      grisées dès l'affichage + transition 1 s, 3 colonnes : 0.31.0) --------
   États d'une tuile (classes posées par assets/js/inzebox-listing.js) :
     aucune classe  : en attente → grisée, non cliquable (état à l'affichage)
     .is-available  : la marque a des produits → couleurs (transition 1 s)
     .is-empty      : aucun produit → reste grisée, bordure pointillée, non cliquable */
.ibx-brand-grid {
  display: grid;
  grid-template-columns: repeat(var(--ibx-brand-columns), minmax(0, 1fr));
  gap: var(--ibx-brand-gap);
  padding: 0;
  margin: 0;
  list-style: none;
}

.ibx-brand-grid__item {
  min-width: 0;
}

/* Tuile carrée : logo seul, centré. État par défaut = grisé, non cliquable */
.ibx-brand-grid__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: var(--ibx-brand-tile-padding);
  color: var(--ibx-tab-text-active-color, #1f2937);
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  background: var(--ibx-brand-empty-bg);
  border: 1px solid var(--ibx-brand-tile-border);
  border-radius: var(--ibx-brand-tile-radius);
  transition:
    background-color var(--ibx-brand-reveal-duration) ease,
    border-color .15s ease-in-out,
    box-shadow .15s ease-in-out;
}

.ibx-brand-grid__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.ibx-brand-grid__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Marque sans logo : initiale en grand, couleur boutique atténuée */
.ibx-brand-grid__initial {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ibx-brand-tile-border-hover);
}

.ibx-brand-grid__logo,
.ibx-brand-grid__initial {
  opacity: var(--ibx-brand-empty-opacity);
  filter: grayscale(1);
  transition:
    filter var(--ibx-brand-reveal-duration) ease,
    opacity var(--ibx-brand-reveal-duration) ease;
}

/* Marque avec produits : couleurs, cliquable */
.ibx-brand-grid__item.is-available .ibx-brand-grid__link {
  pointer-events: auto;
  cursor: pointer;
  background: var(--ibx-brand-tile-bg);
}

.ibx-brand-grid__item.is-available :is(.ibx-brand-grid__logo, .ibx-brand-grid__initial) {
  opacity: 1;
  filter: none;
}

.ibx-brand-grid__item.is-available .ibx-brand-grid__initial {
  opacity: .5;
}

.ibx-brand-grid__item.is-available .ibx-brand-grid__link:hover {
  border-color: var(--ibx-brand-tile-border-hover);
  box-shadow: inset 0 0 0 1px var(--ibx-brand-tile-border-hover);
}

.ibx-brand-grid__item.is-available .ibx-brand-grid__link:focus-visible {
  outline: 2px solid var(--ibx-brand-tile-border-hover);
  outline-offset: 2px;
}

/* Marque sans produit : reste grisée ; survol autorisé pour l'info-bulle */
.ibx-brand-grid__item.is-empty .ibx-brand-grid__link {
  pointer-events: auto;
  cursor: not-allowed;
  border-style: dashed;
}

/* Pastille « nombre de produits », en haut à gauche, apparaît en 1 s */
.ibx-brand-grid__count {
  position: absolute;
  top: .1875rem;
  left: .1875rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 .3125rem;
  font-size: .6875rem;                          /* 11 px : tuiles plus petites en 3 colonnes */
  font-weight: 700;
  line-height: 1;
  color: var(--ibx-brand-count-fg);
  background: var(--ibx-brand-count-bg);
  border: 2px solid var(--ibx-brand-tile-bg);   /* anneau : détache la pastille du logo */
  border-radius: 999px;
  opacity: 0;
  transition: opacity var(--ibx-brand-reveal-duration) ease;
}

.ibx-brand-grid__count:empty {
  display: none;
}

.ibx-brand-grid__item.is-available .ibx-brand-grid__count {
  opacity: 1;
}

@media (forced-colors: active) {
  .ibx-brand-grid__count { border-color: CanvasText; }
  .ibx-brand-grid__item.is-empty .ibx-brand-grid__link { color: GrayText; }
}

/* JavaScript désactivé : rien ne lèvera l'état grisé → couleurs d'emblée (0.31.1,
   remplace le <noscript><style> en ligne qui cassait la compilation Smarty) */
@media (scripting: none) {
  .ibx-brand-grid__link {
    pointer-events: auto;
    cursor: pointer;
    background: var(--ibx-brand-tile-bg);
  }

  .ibx-brand-grid__logo,
  .ibx-brand-grid__initial {
    opacity: 1;
    filter: none;
  }
}

/* Mouvement réduit demandé par le système : passage en couleurs immédiat */
@media (prefers-reduced-motion: reduce) {
  .ibx-brand-grid__link,
  .ibx-brand-grid__logo,
  .ibx-brand-grid__initial,
  .ibx-brand-grid__count {
    transition: none;
  }
}

/* ==========================================================================
   3. LISTE DE PRODUITS (0.28.0) – CSS seul, aucun template modifié
   Réutilise les variables de inzebox-product.css :
     --ibx-tab-*  (titre « style onglet »), --ibx-btn-* (boutons),
     --ibx-link-color, et --ibx-header-icon-color (inzebox-header.css).
   Contrastes (texte 4,5:1, éléments non textuels 3:1) :
     prix = couleur boutique assombrie de 40 % : TPT 5,4:1, Proconfort 7,4:1.
   ========================================================================== */
:root {
  --ibx-listing-title-size: var(--ibx-tab-font-size, 1rem);              /* titre de la catégorie */
  --ibx-listing-title-size-mobile: var(--ibx-tab-font-size-mobile, .875rem);
  --ibx-listing-meta-color: var(--ibx-tab-text-color, #4b5563);           /* « Il y a x produits », « Trier par » */
  --ibx-listing-meta-size: .875rem;
  --ibx-price-color: color-mix(in srgb, var(--primary, #0b69f6) 60%, #000);
  --ibx-product-name-color: var(--ibx-tab-text-active-color, #1f2937);
  --ibx-accent: var(--ibx-tab-active-color, var(--primary, #0b69f6));    /* liserés, soulignements */
  --ibx-accent-tint: color-mix(in srgb, var(--primary, #0b69f6) 10%, #fff);
  --ibx-icon-accent: var(--ibx-header-icon-color, var(--primary, #0b69f6)); /* icônes : ≥ 3:1 */
  --ibx-star-color: var(--ibx-icon-accent);
  --ibx-star-empty-color: #d1d5db;
  --ibx-star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.5l-5.87 3.08 1.12-6.54L2.5 9.41l6.56-.95z'/%3E%3C/svg%3E");
}

/* 3a. Titre de la liste (catégorie, marque, recherche…), de la page « Toutes les
       marques » (0.35.0), des pages statiques CMS (0.36.0) et de toutes les pages à
       en-tête (compte client, connexion, inscription… 0.38.0) : style onglet actif */
#js-product-list-header,
.ibx-page-title,
.page-header {
  margin-bottom: 1rem;
  box-shadow: inset 0 calc(-1 * var(--ibx-tab-line-width, 1px)) 0 var(--ibx-tab-line-color, #d9d9d9);
}

#js-product-list-header .page-title-section,
.ibx-page-title .page-title-section,
.page-header .page-title-section {
  display: inline-block;
  padding: .5rem 0 .625rem;
  margin: 0;
  font-size: var(--ibx-listing-title-size-mobile);
  font-weight: var(--ibx-tab-font-weight-active, 700);
  line-height: 1.2;
  color: var(--ibx-tab-text-active-color, #1f2937);
  text-transform: var(--ibx-tab-text-transform, uppercase);
  border-bottom: var(--ibx-tab-active-width, 3px) solid var(--ibx-accent);
}

@media (min-width: 768px) {
  #js-product-list-header .page-title-section,
  .ibx-page-title .page-title-section,
  .page-header .page-title-section {
    font-size: var(--ibx-listing-title-size);
  }
}

/* 3b. « Il y a x produits » et « Trier par : » */
#js-product-list-top .products__count,
#js-product-list-top .products__sort-label {
  font-size: var(--ibx-listing-meta-size);
  color: var(--ibx-listing-meta-color);
}

/* Bouton du tri (« Pertinence ») : contour gris, liseré boutique au survol */
#js-product-list-top .products__sort-dropdown-button {
  --bs-btn-color: var(--ibx-product-name-color);
  --bs-btn-border-color: var(--ibx-tab-line-color, #d9d9d9);
  --bs-btn-hover-color: var(--ibx-product-name-color);
  --bs-btn-hover-bg: var(--ibx-accent-tint);
  --bs-btn-hover-border-color: var(--ibx-accent);
  --bs-btn-active-color: var(--ibx-product-name-color);
  --bs-btn-active-bg: var(--ibx-accent-tint);
  --bs-btn-active-border-color: var(--ibx-accent);
  font-size: var(--ibx-listing-meta-size);
  font-weight: 600;
}

#js-product-list-top .products__sort-dropdown .dropdown-menu {
  --bs-dropdown-link-hover-bg: var(--ibx-accent-tint);
  --bs-dropdown-link-hover-color: var(--ibx-product-name-color);
  --bs-dropdown-link-active-bg: var(--ibx-accent-tint);
  --bs-dropdown-link-active-color: var(--ibx-product-name-color);
  font-size: var(--ibx-listing-meta-size);
}

/* Tri en cours : gras + liseré à gauche (pas seulement la couleur) */
#js-product-list-top .products__sort-dropdown .dropdown-item.current {
  font-weight: 700;
  color: var(--ibx-product-name-color);
  background-color: var(--ibx-accent-tint);
  box-shadow: inset 3px 0 0 var(--ibx-accent);
}

/* Bouton « Filtrer » (mobile, recherche à facettes) */
#js-product-list-top .products__filter-button.btn-outline-primary {
  --bs-btn-color: var(--ibx-btn-outline-color);
  --bs-btn-border-color: var(--ibx-btn-outline-color);
  --bs-btn-hover-color: var(--ibx-btn-text);
  --bs-btn-hover-bg: var(--ibx-btn-bg);
  --bs-btn-hover-border-color: var(--ibx-btn-bg);
  --bs-btn-active-color: var(--ibx-btn-text);
  --bs-btn-active-bg: var(--ibx-btn-bg-hover);
  --bs-btn-active-border-color: var(--ibx-btn-bg-hover);
}

/* 3c. Miniatures produit (listes, accueil, produits associés) ------------- */
/* Nom du produit : texte foncé, soulignement couleur boutique au survol */
.product-miniature .product-miniature__title {
  color: var(--ibx-product-name-color);
  text-decoration: none;
}

.product-miniature .product-miniature__title:hover,
.product-miniature .product-miniature__title:focus-visible {
  color: var(--ibx-product-name-color);
  text-decoration: underline;
  text-decoration-color: var(--ibx-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Prix */
.product-miniature .product-miniature__price {
  font-weight: 700;
  color: var(--ibx-price-color);
}

.product-miniature .product-miniature__regular-price {
  color: var(--ibx-listing-meta-color);       /* gris foncé : 7,6:1 (Hummingbird : gris clair) */
}

/* « Ajouter au panier » : mêmes couleurs que sur la fiche produit */
.product-miniature .product-miniature__add.btn-primary {
  --bs-btn-color: var(--ibx-btn-text);
  --bs-btn-bg: var(--ibx-btn-bg);
  --bs-btn-border-color: var(--ibx-btn-bg);
  --bs-btn-hover-color: var(--ibx-btn-text);
  --bs-btn-hover-bg: var(--ibx-btn-bg-hover);
  --bs-btn-hover-border-color: var(--ibx-btn-bg-hover);
  --bs-btn-active-color: var(--ibx-btn-text);
  --bs-btn-active-bg: var(--ibx-btn-bg-hover);
  --bs-btn-active-border-color: var(--ibx-btn-bg-hover);
  --bs-btn-disabled-color: var(--ibx-btn-text);
  --bs-btn-disabled-bg: var(--ibx-btn-bg);
  --bs-btn-disabled-border-color: var(--ibx-btn-bg);
}

/* « Voir le détail » (produit sans ajout direct) */
.product-miniature .product-miniature__details.btn-outline-primary {
  --bs-btn-color: var(--ibx-btn-outline-color);
  --bs-btn-border-color: var(--ibx-btn-outline-color);
  --bs-btn-hover-color: var(--ibx-btn-text);
  --bs-btn-hover-bg: var(--ibx-btn-bg);
  --bs-btn-hover-border-color: var(--ibx-btn-bg);
  --bs-btn-active-color: var(--ibx-btn-text);
  --bs-btn-active-bg: var(--ibx-btn-bg-hover);
  --bs-btn-active-border-color: var(--ibx-btn-bg-hover);
}

/* Quantité - / + */
.product-miniature .quantity-button__group .btn {
  --bs-btn-color: var(--ibx-btn-outline-color);
  --bs-btn-hover-color: var(--ibx-btn-outline-color);
  --bs-btn-hover-bg: var(--ibx-btn-tint);
  --bs-btn-active-color: var(--ibx-btn-outline-color);
  --bs-btn-active-bg: var(--ibx-btn-tint);
}

.product-miniature .quantity-button__group .btn .material-icons {
  color: inherit;
}

/* Aperçu rapide : texte foncé, icône couleur boutique */
.product-miniature :is(.product-miniature__quickview-button, .product-miniature__quickview-touch) {
  --bs-btn-color: var(--ibx-product-name-color);
  --bs-btn-hover-color: var(--ibx-product-name-color);
  --bs-btn-hover-bg: var(--ibx-accent-tint);
  --bs-btn-active-color: var(--ibx-product-name-color);
  --bs-btn-active-bg: var(--ibx-accent-tint);
}

.product-miniature :is(.product-miniature__quickview-button, .product-miniature__quickview-touch) .material-icons {
  color: var(--ibx-icon-accent);
}

/* Focus clavier : couleur boutique au lieu de l'anneau bleu Bootstrap */
.product-miniature :is(.product-miniature__add, .product-miniature__details,
  .quantity-button__group .btn, .product-miniature__quickview-touch):focus-visible,
#js-product-list-top :is(.products__sort-dropdown-button, .products__filter-button):focus-visible {
  outline: 2px solid var(--ibx-icon-accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* 3d. Cœur « liste d'envies » (blockwishlist) ------------------------------
   Hummingbird range son CSS dans des couches (@layer) et impose les couleurs
   du bouton en !important dans la couche « ps-modules ». Règle des couches :
   pour les déclarations !important, la couche déclarée EN PREMIER l'emporte,
   et un !important hors couche perd. Seule solution sans toucher au module :
   placer la surcharge dans la première couche d'Hummingbird (« vendors »). */
@layer vendors {
  .product-miniature .wishlist-button-add {
    color: var(--ibx-icon-accent) !important;
    background-color: var(--bs-body-bg, #fff) !important;
    border-color: var(--ibx-tab-line-color, #d9d9d9) !important;
  }

  .product-miniature .wishlist-button-add:hover,
  .product-miniature .wishlist-button-add:focus-visible {
    color: var(--ibx-icon-accent) !important;
    background-color: var(--ibx-accent-tint) !important;
    border-color: var(--ibx-icon-accent) !important;
  }

  .product-miniature .wishlist-button-add:focus-visible {
    outline: 2px solid var(--ibx-icon-accent) !important;
    outline-offset: 2px !important;
  }
}

/* 3e. Étoiles d'avis (productcomments) ------------------------------------
   Le sprite PNG jaune du module est remplacé par une étoile dessinée en CSS
   (masque), aux couleurs de la boutique. S'applique partout où le module
   affiche une note (listes ET fiche produit).
   Demi-étoiles : le module découpe l'étoile en une partie pleine (à gauche)
   et une partie vide (à droite) de largeurs variables ; le masque est donc
   calé à gauche pour la partie pleine et à droite pour la partie vide. */
.star-content :is(.star, .star-on, .star-hover) {
  background: var(--ibx-star-empty-color);
  -webkit-mask: var(--ibx-star-shape) no-repeat right center / auto 100%;
          mask: var(--ibx-star-shape) no-repeat right center / auto 100%;
}

.star-content :is(.star-on, .star-hover) {
  background: var(--ibx-star-color);
  -webkit-mask-position: left center;
          mask-position: left center;
}

@media (forced-colors: active) {
  .star-content .star { background: GrayText; }
  .star-content :is(.star-on, .star-hover) { background: CanvasText; }
}


/* ==========================================================================
   4. PAGE « TOUTES LES MARQUES » (0.35.0) – templates/catalog/brands.tpl
   Pleine largeur, tuiles carrées (logo + nom), pastille du nombre de produits
   (donnée serveur), marque sans produit grisée et non cliquable.
   Aucun JavaScript, indépendant de la grille de la colonne gauche.
   ========================================================================== */
:root {
  --ibx-brands-gap: 8px;
  --ibx-brands-columns: 3;                       /* mobile */
  --ibx-brands-name-color: var(--ibx-price-color); /* couleur boutique assombrie (TPT 5,4:1) */
  --ibx-brands-count-size: 1.875rem;             /* pastille plus grande que dans la colonne */
}

@media (min-width: 768px)  { :root { --ibx-brands-columns: 4; } }
@media (min-width: 992px)  { :root { --ibx-brands-columns: 5; } }
@media (min-width: 1200px) { :root { --ibx-brands-columns: 6; } }

.ibx-brands {
  display: grid;
  grid-template-columns: repeat(var(--ibx-brands-columns), minmax(0, 1fr));
  gap: var(--ibx-brands-gap);
  padding: 0;
  margin: 0 0 2rem;
  list-style: none;
}

.ibx-brands__item {
  min-width: 0;
}

/* Tuile toujours carrée : logo dans l'espace restant, nom en bas */
.ibx-brands__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  align-items: center;
  aspect-ratio: 1;
  padding: .75rem .5rem .625rem;
  overflow: hidden;
  color: var(--ibx-brands-name-color);
  text-decoration: none;
  background: var(--ibx-brand-tile-bg, #fff);
  border: 1px solid var(--ibx-brand-tile-border, #e5e7eb);
  border-radius: calc(var(--ibx-brand-tile-radius, .375rem) * 1.5);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

a.ibx-brands__tile:hover {
  color: var(--ibx-brands-name-color);
  border-color: var(--ibx-brand-tile-border-hover);
  box-shadow: inset 0 0 0 1px var(--ibx-brand-tile-border-hover);
}

a.ibx-brands__tile:hover .ibx-brands__name {
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.ibx-brands__tile:focus-visible {
  outline: 2px solid var(--ibx-brand-tile-border-hover);
  outline-offset: 2px;
}

.ibx-brands__media {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.ibx-brands__media picture {
  display: contents;
}

.ibx-brands__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ibx-brands__name {
  flex: 0 0 auto;
  width: 100%;
  overflow: hidden;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pastille : mêmes couleurs que la colonne / le panier, plus grande */
.ibx-brands__count {
  position: absolute;
  top: .375rem;
  left: .375rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ibx-brands-count-size);
  height: var(--ibx-brands-count-size);
  padding: 0 .4375rem;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ibx-brand-count-fg);
  background: var(--ibx-brand-count-bg);
  border: 2px solid var(--ibx-brand-tile-bg, #fff);
  border-radius: 999px;
}

/* Marque sans produit : grisée, non cliquable */
.ibx-brands__item.is-empty .ibx-brands__tile {
  color: var(--ibx-brand-empty-color);
  cursor: not-allowed;
  background: var(--ibx-brand-empty-bg);
  border-style: dashed;
}

.ibx-brands__item.is-empty .ibx-brands__logo {
  opacity: var(--ibx-brand-empty-opacity, .45);
  filter: grayscale(1);
}

@media (max-width: 575.98px) {
  .ibx-brands__name { font-size: .75rem; }
  :root { --ibx-brands-count-size: 1.5rem; }
  .ibx-brands__count { font-size: .75rem; }
}

@media (forced-colors: active) {
  .ibx-brands__count { border-color: CanvasText; }
  .ibx-brands__item.is-empty .ibx-brands__tile { color: GrayText; }
}

@media (prefers-reduced-motion: reduce) {
  .ibx-brands__tile { transition: none; }
}


/* ==========================================================================
   5. LIENS DANS LES TEXTES (0.37.0) – toutes les pages
   Couleur : variables --bs-link-* redéfinies dans toutpourtoi.css / proconfort.css.
   - Dans les contenus rédigés (pages CMS, descriptions, blocs de texte) : lien
     SOULIGNÉ, pour qu'il ne se distingue pas du texte par la seule couleur.
   - Focus clavier : anneau couleur boutique au lieu du bleu.
   Les boutons (.btn), le menu, le pied de page et les tuiles gardent leur style.
   ========================================================================== */
:is(.rich-text, .page-content--cms, .product__description, .product__description-short,
    .ibx-customtext, .custom-text, #custom-text) a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:is(.rich-text, .page-content--cms, .product__description, .product__description-short,
    .ibx-customtext, .custom-text, #custom-text) a:not(.btn):hover {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ibx-tab-active-color, currentColor);
}

a:not(.btn):focus-visible {
  outline: 2px solid var(--ibx-tab-active-color, var(--bs-link-color));
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: none;
}

/* Bouton-lien Bootstrap (.btn-link) : suit aussi la couleur boutique */
.btn-link {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-active-color: var(--bs-link-hover-color);
}