/* Custom CSS */

/* Listing (catégorie/marque/fournisseur/recherche/...) : filtre + sous-catégories passés
   en pleine largeur au-dessus, filtre + listing produits en 2 colonnes en dessous.
   Voir templates/catalog/listing/product-list.tpl (surcharge thème enfant). */
#content-wrapper:has(.listing-split-row) {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media screen and (min-width: 1366px) {
  #content-wrapper:has(.listing-split-row) {
    width: 100%;
  }
}

/* Bannière "hero" (titre + fil d'Ariane) réduite. Valeurs d'origine 130px (desktop) /
   100px (mobile) reconstatées dans un fichier généré par le builder (Avanam Builder /
   TemplateMela, "custom_css_1.css"), chargé après ce fichier — d'où le !important plutôt
   que de dépendre de l'ordre de cascade avec un fichier généré dynamiquement. */
@media screen and (min-width: 768px) {
  .hero-section .page-title-wrapper {
    min-height: 70px !important;
  }
}

@media screen and (max-width: 767px) {
  #hero_section.hero-section .page-title-wrapper {
    min-height: 60px !important;
  }
}

/* Bannière "hero" : l'image breadcrumb-img.jpg posée en dur dans _pagetitle.scss
   (assets/css/child-theme.css, règle .hero-section) recouvre la couleur de fond choisie
   dans TemplateMela Core > Hero Section > Background color. Ce n'est pas un réglage du
   builder (aucun style inline sur #hero_section, confirmé en le testant) : juste du CSS.
   !important par précaution vis-à-vis du fichier généré par le builder chargé après
   (cf. commentaire min-height ci-dessus). */
#hero_section.hero-section {
  background-image: none !important;
}

/* Masque l'image de couverture de la catégorie (texte de description conservé). */
.block-category .category-cover {
  display: none;
}

/* Espace entre le menu (#header) et le bandeau hero : margin-bottom !important trouvé dans
   modules/templatemelacore/views/css/front/custom_css_1.css (CSS régénéré par le builder du
   thème à chaque modification d'un réglage d'espacement en back-office, valeur vue à 18px puis
   16px). Le module a fini par utiliser exactement notre sélecteur "html body .site-header,
   html body #header" -> spécificité identique des deux côtés, et son fichier chargeant après
   child-custom.css, l'égalité le fait gagner. On double le sélecteur d'ID et de classe pour
   dépasser sa spécificité et gagner indépendamment de l'ordre de chargement. */
@media (min-width: 1024px) {
  html body .site-header.site-header,
  html body #header#header {
    margin-bottom: 0 !important;
  }
}

/* Description catégorie tronquée à 4 lignes + bouton "Voir plus" / "Voir moins".
   Voir templates/catalog/_partials/category-header.tpl (le JS du toggle est inline dans ce
   template, pas dans child-custom.js — cf. commit fee0f52, asset JS de thème pas pris en
   compte sans réenregistrement côté back-office). */
#category-description.category-description-truncated {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.category-description-toggle {
  display: none;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--palette1);
  font-weight: var(--font-semibold);
  cursor: pointer;
}

.category-description-toggle.is-visible {
  display: inline-block;
}

/* Sous-catégories : texte dans la même couleur que la description catégorie (.text-muted =
   var(--palette4)), et vignette carrée (les images sources n'ont pas toutes le même ratio). */
#subcategories .subcategory-name {
  color: var(--palette4);
}

#subcategories ul li.subcategory-item {
  width: 160px;
  min-width: 160px;
}

#subcategories .subcategory-image a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  box-sizing: border-box;
}

#subcategories .subcategory-image a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bannière de réassurance sur les pages de listing (hook displayFooterCategory) : ce n'est
   pas le module blockreassurance mais un bloc builder Elementor (data-elementor-id="8",
   classe .elementor-8) en section "Boxed" (largeur plafonnée + centrée) au lieu de
   "Full Width". Sortie du flux via 50%/-50vw pour couvrir toute la largeur de l'écran, quel
   que soit le conteneur parent - même technique full-bleed que .carousel (theme.css). */
.elementor-8 .elementor-section-boxed {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Onglets fiche produit (Description/Composition/Détails du produit) : .tabs (theme.css)
   n'a pas de padding-bottom (padding:var(--sm-spacing) var(--mx-spacing) 0 en desktop,
   var(--xs-spacing) var(--sm-spacing) 0 en mobile ≤991px) - l'espace visible en bas du
   bloc dépend donc uniquement du margin-bottom du dernier élément de contenu, d'où un
   rendu incohérent : espace net avec un texte multi-paragraphes (ex: Description), quasi
   nul avec une seule ligne sans marge (ex: Composition). Padding bottom symétrique au
   padding top pour un espacement constant quel que soit le contenu. */
.tabs {
  padding-bottom: var(--sm-spacing);
}

@media screen and (max-width: 991px) {
  .tabs {
    padding-bottom: var(--xs-spacing);
  }
}

/* Accordéon footer sur mobile (voir child-theme.js pour le clic/classe "is-open").
   Ciblé sur .elementor-col-20 (les 5 blocs de liens du footer, 20% de large chacun) pour ne
   pas toucher la barre du bas du même #footer (paiement/réseaux sociaux, en .elementor-col-33
   et .elementor-inner-column), qui n'a pas de titre h3 à replier. */
@media screen and (max-width: 767px) {
  #footer .elementor-top-column.elementor-col-20 > .elementor-column-wrap > .elementor-widget-wrap > .elementor-element:not(:first-child) {
    display: none;
  }

  #footer .elementor-top-column.elementor-col-20.is-open > .elementor-column-wrap > .elementor-widget-wrap > .elementor-element:not(:first-child) {
    display: block;
  }

  #footer .elementor-top-column.elementor-col-20 > .elementor-column-wrap > .elementor-widget-wrap > .elementor-element:first-child {
    position: relative;
    padding-right: 24px;
    cursor: pointer;
  }

  #footer .elementor-top-column.elementor-col-20 > .elementor-column-wrap > .elementor-widget-wrap > .elementor-element:first-child::after {
    content: "+";
    position: absolute;
    top: 0;
    right: 4px;
    font-size: 20px;
    line-height: 1;
  }

  #footer .elementor-top-column.elementor-col-20.is-open > .elementor-column-wrap > .elementor-widget-wrap > .elementor-element:first-child::after {
    content: "\2212";
  }
}