/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
li, .li {
    color: #09090B;
}
.banner-cate {
    display: none;
}
.block-carousel-cate {
    display: none;
}
.search-widget form {
    position: relative;
    display: flex;
    justify-content: flex-end;
}
.header-top .container {
    background: transparent;
    color: #000;
    width: 100%;
}
#cms .page-header {
    max-width: 1180px;
    display: none;
}
.content {
    max-width: 1620px;
    margin: auto;
    margin-top: 1px;
    margin-bottom: 1px;
}
.card {
    margin-bottom: 0;
}
.card-header {
    padding: 0.15rem 1.25rem;
}
.card-block {
    padding: 0.75rem;
}
.PM_ASBlockOutputHorizontal .PM_ASCriterionsGroup {
  padding-top: 15px;
  padding-bottom: 15px;
  width: 50%;
}
.slideshow {
  margin-top: 0px!important;
  margin-bottom: 20px;
}
.sidebar .block .title_block a {
    color: #ffffff!important;
    background-image: -moz-linear-gradient(center bottom ,rgb(98,232,214) 19%,(#12378e) 74%);
    background-image: -webkit-linear-gradient(bottom,rgb(98,232,214) 19%,rgb(18,55,142) 74%);
    background-image: -ms-linear-gradient(center bottom ,rgb(98,232,214) 19%,rgb(18,55,142) 74%);
    background-image: -o-linear-gradient(center bottom ,rgb(98,232,214) 19%,rgb(18,55,142) 74%);
    display: block;
    border: 0 solid rgb(160,160,160);
    position: relative;
    text-transform: uppercase;
    font-family: "Open sans",sans-serif;
    font-size: 22px;
    letter-spacing: 0;
    font-weight: 700;
    border-bottom: 1px solid #ededed;
    margin: 0;
    padding: 14px 13px 20px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.footer-container .block .title_block {
    color: #5c9ddf;
    padding-top: 0;
    padding-bottom: 35px;
    font-size: 14px;
}
h4, .h4 {
    color: #5c9ddf;
}
.thumbnail-container .product-title a {
    white-space: normal;
}
div.pm-csoc .product-miniature .thumbnail-container.with-button .product-thumbnail img {
	margin-top: 0;
	width: 110px; 
} 
.header_logo .logo { display:block; height:auto; }  /* évite un micro-saut lié au line-height */
/* CLS quick-fix pack */
.header_logo .logo{ display:block; height:auto; }          /* logo stable */
.cookie-banner,.promo-bar{position:fixed;left:0;right:0;bottom:0;z-index:9999} /* ne pas “pousser” le contenu */
.home-slider, .ap-slideshow, .slick-hero, .slider-container{ aspect-ratio:1920/600; min-height:420px; }
.home-slider .slick-list{ min-height:420px; }
.home-slider .slick-track{ display:flex; }
.product-miniature .product-thumbnail{aspect-ratio:4/5;display:block;height:auto}
.home-banners img,.ap-image img,.ap-banner img{aspect-ratio:16/9;display:block;height:auto}
.cookie-banner, .promo-bar{ position:fixed; left:0; right:0; bottom:0; z-index:9999; }
.header-top{ min-height:80px; }
@media (max-width:576px){
  .home-slider, .ap-slideshow, .slick-hero, .slider-container{ aspect-ratio:375/300; min-height:300px; }
}
/* Adapte à TA 1ère slide desktop (remplace 1920/600 & 520px si besoin) */
.home-slider,
.ap-slideshow,
.slick-hero,
.slider-container {
  aspect-ratio: 1920 / 600;
  min-height: 520px;
}
.home-slider .slick-list { min-height: 520px; }
.home-slider .slick-track { display: flex; } /* évite les yoyos */
.home-slider img:first-child { width: 100%; height: auto; }
@media (max-width: 576px){
  .home-slider,
  .ap-slideshow,
  .slick-hero,
  .slider-container { aspect-ratio: 375 / 300; min-height: 300px; }
}
/* Produits en grille */
.product-miniature .product-thumbnail { aspect-ratio: 4 / 5; display:block; height:auto; }
/* Bannières/pictos de la 1ère rangée */
.home-banners img,
.ap-image img,
.ap-banner img { aspect-ratio: 16 / 9; display:block; height:auto; }
/* Empêche la barre haute de “grandir” après coup (polices/menus) */
.header-top { min-height: 80px; }  /* ajuste à ta vraie hauteur */
.header_logo .logo { display:block; height:auto; }  /* déjà ajouté, on garde */
@font-face{
  font-family:"Open Sans";
  src:url("/assets/fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Open Sans";
  src:url("/assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
body{ font-family:"Open Sans", Arial, sans-serif; }
/* Mets TON ratio & une hauteur mini “confort” */
.home-slider,.ap-slideshow,.slick-hero,.slider-container{aspect-ratio:1920/600;min-height:520px}
.home-slider .slick-list{min-height:520px}
.home-slider .slick-track{display:flex}
@media (max-width:576px){
  .home-slider,.ap-slideshow,.slick-hero,.slider-container{aspect-ratio:375/300;min-height:300px}
}
/* --- Cross-sell / Produits liés uniquement sur la page produit --- */
/* Modules concernés : accessoires, produits de la même catégorie, crossselling */
body#product .product-accessories .product-miniature,
body#product #productscategory .product-miniature,
body#product #crossselling .product-miniature {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body#product .product-accessories .thumbnail-container,
body#product #productscategory .thumbnail-container,
body#product #crossselling .thumbnail-container {
  display: flex;
  flex-direction: column;
}

/* Zone image : pleine largeur, espace réservé stable */
body#product .product-accessories .product-thumbnail,
body#product #productscategory .product-thumbnail,
body#product #crossselling .product-thumbnail {
  display: block;
  width: 100%;
  /* CHOIX 1 (recommandé) : ratio raisonnable */
  aspect-ratio: 4 / 5;   /* essaie 4/5 ; si tes vignettes sont carrées, mets 1/1 */
  overflow: hidden;
  /* Si tu préfères une hauteur fixe plutôt qu’un ratio, commente la ligne ci-dessus et décommente : */
  /* height: 200px;  */
}

body#product .product-accessories .product-thumbnail img,
body#product #productscategory .product-thumbnail img,
body#product #crossselling .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* montre 100% de l’image, n’écrase pas le texte */
  display: block;
}

/* Description sous l’image, jamais à côté/au-dessus */
body#product .product-accessories .product-description,
body#product #productscategory .product-description,
body#product #crossselling .product-description {
  position: static;
  width: 100%;
  margin-top: .5rem;
  clear: both;
  flex: 0 0 auto;
}

/* Titre : éviter les débordements sur 2 lignes max (ajuste si besoin) */
body#product .product-accessories .product-title,
body#product #productscategory .product-title,
body#product #crossselling .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em; /* réserve la place de 2 lignes */
}

/* Mobile : un peu plus bas si tu choisis la hauteur fixe */
@media (max-width: 576px){
  /* Si tu es en hauteur fixe, adapte ici */
  /* body#product .product-accessories .product-thumbnail,
     body#product #productscategory .product-thumbnail,
     body#product #crossselling .product-thumbnail { height: 200px; } */
}
/* augmente la zone de clic du toggle sur mobile */
@media (max-width: 991px){
  .atm__toggle{
    padding: .75rem;    /* plus facile au pouce */
    min-width: 40px;
    min-height: 40px;
  }
  /* optionnel: lien + toggle sur une ligne, espacés */
  .atm__item{ display:flex; align-items:center; justify-content:space-between; }
  .atm__link{ flex:1 1 auto; padding:.75rem .5rem; }
}
/* ATM menu: 1 ligne desktop, wrap mobile */
@media (min-width:992px){
  .atm{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .atm__lvl1{display:flex; flex-wrap:nowrap !important; gap:.15rem; align-items:center}
  .atm__lvl1>li, .atm__item{margin:0; flex:0 0 auto}
  .atm__link{display:inline-block; white-space:nowrap; padding:.50rem .60rem}
}
/* zone un peu étroite → on serre */
@media (min-width:992px) and (max-width:1200px){
  .atm__link{padding:.45rem .50rem; font-size:13px}
}
/* mobile: wrap normal */
@media (max-width:991px){
  .atm__lvl1{display:flex; flex-wrap:wrap; gap:.5rem}
  .atm__link{padding:.75rem .5rem}
}
/* (optionnel) masquer la barre de défilement horizontale si elle apparaît */
@media (min-width:992px){
  .atm::-webkit-scrollbar{display:none}
  .atm{scrollbar-width:none}
}
@media (min-width:992px){
  .atm--tight .atm__link{padding:.38rem .44rem; font-size:12.5px}
}
@media (min-width:992px){
  .atm__lvl1{flex-wrap:nowrap}
  .atm__lvl1>li,.atm__item{flex:0 0 auto}
  .atm__link{white-space:nowrap}
}