/*
 * 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: 1420 / 360;
  min-height: 400px;
}
.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}
}
/* (au cas où) Déclarations locales des fontes — laisse si tu les as déjà */
@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;
}
/* Titres : remplace toute valeur du thème (ex: "Chelsea Market", cursive) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .page-title h1,
.page-heading, .product-detail .h1,
.product-title, .product-name,
.ap_title, .block .title_block {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 600;          /* lisible, semi-bold */
  line-height: 1.2;
}
/* Option : si tu veux un H1 un peu plus massif */
h1, .h1, .page-title h1 { font-weight: 600; /* mets 700 si tu as un OpenSans-Bold.woff2 */ }
body {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 400;
}
/* Empêche le "faux gras" si un 700 est demandé quelque part */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .page-title h1,
.page-heading, .product-detail .h1,
.product-title, .product-name,
.ap_title, .block .title_block {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;      /* on force bien le 600 */
  line-height: 1.2;
  font-synthesis-weight: none;       /* évite que le navigateur simule un 700 */
}
/* Harmonise <strong>/<b> pour éviter un 700 simulé */
strong, b { font-weight: 600; }

/* ============================================================
   Cross-selling (page produit) — PM module
   Objectifs: titres+prix visibles, bouton affiché, pas de clip,
   pas de hauteur figée, pas de scrollbar interne.
   Portée: .pm-csoc.page-product-box.product-accessories
   ============================================================ */

/* 1) Viewport du carrousel: hauteur auto, pas de scroll interne */
.pm-csoc.page-product-box.product-accessories .pm-csoc-owl-wrapper-outer,
.pm-csoc.page-product-box.product-accessories .owl-stage-outer,
.pm-csoc.page-product-box.product-accessories .bx-viewport {
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;   /* évite le débordement horizontal */
  overflow-y: hidden !important;   /* supprime la mini-scrollbar verticale */
  margin: 0 !important;
  padding: 0 !important;
  scrollbar-width: none;           /* Firefox (cosmétique) */
}
.pm-csoc.page-product-box.product-accessories .pm-csoc-owl-wrapper-outer::-webkit-scrollbar,
.pm-csoc.page-product-box.product-accessories .owl-stage-outer::-webkit-scrollbar,
.pm-csoc.page-product-box.product-accessories .bx-viewport::-webkit-scrollbar {
  width: 0; height: 0;             /* WebKit (cosmétique) */
}

/* 2) Carte produit: image -> texte (en colonne) */
.pm-csoc.page-product-box.product-accessories .product-miniature,
.pm-csoc.page-product-box.product-accessories .js-product-miniature {
  display: flex !important;
  flex-direction: column !important;
}

/* 3) Le conteneur image ne rogne pas */
.pm-csoc.page-product-box.product-accessories .thumbnail-container {
  position: relative !important;
  overflow: visible !important;
}

/* 4) Texte dans le flux (pas d'absolute), visible */
.pm-csoc.page-product-box.product-accessories .product-description {
  position: static !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  transform: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: .5rem !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 5) Titre + prix toujours visibles (même si le thème les montre au hover) */
.pm-csoc.page-product-box.product-accessories .product-title,
.pm-csoc.page-product-box.product-accessories .product-price-and-shipping {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  white-space: normal !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 6) Bouton panier visible */
.pm-csoc.page-product-box.product-accessories .button_display {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  height: auto !important;
  margin-top: .75rem !important;
  pointer-events: auto !important;
}
.pm-csoc.page-product-box.product-accessories .button_display .btn {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* 7) Overlays qui pourraient couvrir le texte/bouton -> neutralisés */
.pm-csoc.page-product-box.product-accessories .thumbnail-container .functional-buttons,
.pm-csoc.page-product-box.product-accessories .thumbnail-container .leo-more-info {
  pointer-events: none !important;
  position: static !important;
  z-index: 1 !important;
}

/* 8) “highlighted-informations” (quick-view/variants) ne doit pas créer de hauteur */
.pm-csoc.page-product-box.product-accessories .highlighted-informations {
  display: none !important; /* (si tu veux le garder en overlay, remplace par position:absolute; bottom:.25rem; pointer-events:none; ) */
  height: 0 !important;
}

/* 9) Ne pas forcer de ratio sur la vignette (évite la plaque blanche) */
.pm-csoc.page-product-box.product-accessories .product-miniature .product-thumbnail {
  aspect-ratio: auto !important;
  height: auto !important;
  margin: 0 !important;
}
.pm-csoc.page-product-box.product-accessories .product-miniature .product-thumbnail img {
  display: block !important;
  height: auto !important;
  width: 100% !important;
}

/* ====== Fallback léger pour anciens templates (#crossselling) ====== */
#crossselling .owl-stage-outer,
#crossselling .owl-wrapper-outer,
#crossselling .bx-viewport {
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}
#crossselling .product-miniature .thumbnail-container { overflow: visible !important; position: relative !important; }
#crossselling .product-miniature .product-description { position: static !important; margin-top: .5rem !important; }
#crossselling .product-title,
#crossselling .product-price-and-shipping { opacity: 1 !important; visibility: visible !important; transform: none !important; }

/* cas où le thème utilise .advtm_sub au lieu de .adtm_sub */
    #advtm_menu .li-niveau1.open    > .advtm_sub,
    #advtm_menu .li-niveau1.advtm_open > .advtm_sub,
    #advtm_menu .li-niveau1.adtm_open  > .advtm_sub,
    #adtm_menu  .li-niveau1.open    > .advtm_sub,
    #adtm_menu  .li-niveau1.advtm_open > .advtm_sub,
    #adtm_menu  .li-niveau1.adtm_open  > .advtm_sub {
      display:block !important;
      visibility:visible !important;
      opacity:1 !important;
      position:static !important;
      max-height:none !important;
      overflow:visible !important;
      -webkit-transform:none !important;
              transform:none !important;
    }
  }
}
/* ====== iOS/Safari fallback & rendering fixes (priorité basse, safe) ====== */

/* 1) Ouverture au tap même si la classe n’est pas posée (fallback iOS) */
#advtm_menu .li-niveau1:focus-within > .advtm_sub,
#advtm_menu .li-niveau1:focus-within > .adtm_sub,
#adtm_menu  .li-niveau1:focus-within > .advtm_sub,
#adtm_menu  .li-niveau1:focus-within > .adtm_sub {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  max-height:none !important;
  overflow:visible !important;
}

/* 2) Z-index & empêchement de clipping sur mobile */
@media (max-width: 991px){
  #advtm_menu .li-niveau1 > .advtm_sub,
  #advtm_menu .li-niveau1 > .adtm_sub,
  #adtm_menu  .li-niveau1 > .advtm_sub,
  #adtm_menu  .li-niveau1 > .adtm_sub {
    position: relative;      /* reste dans le flux, mais crée un contexte */
    z-index: 1001;           /* passe devant les voisins potentiels */
    pointer-events: auto;    /* s'assure que c’est cliquable */
  }
}

/* 3) Forcer un repaint WebKit (iPhone 13/Safari) quand ouvert */
@supports (-webkit-touch-callout: none) {
  #advtm_menu .li-niveau1.open    > .advtm_sub,
  #advtm_menu .li-niveau1.advtm_open > .advtm_sub,
  #advtm_menu .li-niveau1.adtm_open  > .advtm_sub,
  #adtm_menu  .li-niveau1.open    > .advtm_sub,
  #adtm_menu  .li-niveau1.advtm_open > .advtm_sub,
  #adtm_menu  .li-niveau1.adtm_open  > .advtm_sub,
  #advtm_menu .li-niveau1.open    > .adtm_sub,
  #advtm_menu .li-niveau1.advtm_open > .adtm_sub,
  #advtm_menu .li-niveau1.adtm_open  > .adtm_sub,
  #adtm_menu  .li-niveau1.open    > .adtm_sub,
  #adtm_menu  .li-niveau1.advtm_open > .adtm_sub,
  #adtm_menu  .li-niveau1.adtm_open  > .adtm_sub {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform: translateZ(0);  /* trigger repaint sans casser la mise en page */
            transform: translateZ(0);
    will-change: transform;
  }
}
/* ===== Correctif ciblé iPhone 13 (390x844 @3x) ===== */
@supports (-webkit-touch-callout: none) {
  @media screen and (min-device-pixel-ratio: 3)
         and (width: 390px)
         and (max-height: 900px) {

    /* Ouvre et évite le clipping + repaint WebKit */
    #advtm_menu .li-niveau1.open    > .advtm_sub,
    #advtm_menu .li-niveau1.advtm_open > .advtm_sub,
    #advtm_menu .li-niveau1.adtm_open  > .advtm_sub,
    #advtm_menu .li-niveau1:focus-within > .advtm_sub,
    #advtm_menu .li-niveau1.open    > .adtm_sub,
    #advtm_menu .li-niveau1.advtm_open > .adtm_sub,
    #advtm_menu .li-niveau1.adtm_open  > .adtm_sub,
    #advtm_menu .li-niveau1:focus-within > .adtm_sub,

    #adtm_menu  .li-niveau1.open    > .advtm_sub,
    #adtm_menu  .li-niveau1.advtm_open > .advtm_sub,
    #adtm_menu  .li-niveau1.adtm_open  > .advtm_sub,
    #adtm_menu  .li-niveau1:focus-within > .advtm_sub,
    #adtm_menu  .li-niveau1.open    > .adtm_sub,
    #adtm_menu  .li-niveau1.advtm_open > .adtm_sub,
    #adtm_menu  .li-niveau1.adtm_open  > .adtm_sub,
    #adtm_menu  .li-niveau1:focus-within > .adtm_sub {
      display:block !important;
      visibility:visible !important;
      opacity:1 !important;
      position:static !important;
      max-height:none !important;
      overflow:visible !important;
      pointer-events:auto !important;

      /* repaint iPhone 13 */
      -webkit-backface-visibility:hidden;
              backface-visibility:hidden;
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
      will-change: transform;
      z-index: 1001;
    }

    /* Empêche toute coupe par les ancêtres */
    #advtm_menu, #adtm_menu,
    #advtm_menu .li-niveau1, #adtm_menu .li-niveau1 {
      overflow: visible !important;
      position: relative;
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
    }
  }
}
/* Fallback léger : ouvre aussi au tap via :focus-within (aucun JS) */
#advtm_menu .li-niveau1:focus-within > .advtm_sub,
#advtm_menu .li-niveau1:focus-within > .adtm_sub,
#adtm_menu  .li-niveau1:focus-within > .advtm_sub,
#adtm_menu  .li-niveau1:focus-within > .adtm_sub {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* Tap confortable (ne change pas la mise en page) */
#advtm_menu .li-niveau1 > a,
#adtm_menu  .li-niveau1 > a {
  min-height: 44px;           /* zone tactile recommandée */
  display: flex; align-items: center;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* === Shop Marine — custom.css === */

/* Neutraliser galeries injectées en catégories (garde uniquement la cover) */
body#category .product-miniature .views_block,
body#category .product-miniature .thumbs_list,
body#category .product-miniature .thumbs_list_frame,
body#category .product-miniature .product-views,
body#category .product-miniature .leo-more-info, /* masque l’overlay parasite */
body#category .product-miniature .owl-carousel,
body#category .product-miniature .owl-wrapper,
body#category .product-miniature .owl-item {
  display:none !important; visibility:hidden !important; opacity:0 !important;
  max-height:0 !important; overflow:hidden !important;
}

/* Afficher l’image principale de la carte */
body#category .product-miniature .thumbnail-container .product-image,
body#category .product-miniature .thumbnail-container .product-thumbnail,
body#category .product-miniature .thumbnail-container picture > img {
  display:block !important; opacity:1 !important; visibility:visible !important;
  transform:none !important; filter:none !important; transition:none !important;
}

/* Variante : si l’image principale est dans .leo-more-info, débloquez-la ici
   (et commentez la ligne .leo-more-info du bloc au-dessus) */
/*
body#category .product-miniature .leo-more-info {
  display:block !important; opacity:1 !important; visibility:visible !important;
}
body#category .product-miniature .leo-more-info img {
  display:block !important; opacity:1 !important; visibility:visible !important;
}
*/

/* Produit : empêcher les effets “apparition au survol” sur la cover */
#product .product-cover img,
#product .images-container picture > img {
  opacity:1 !important; visibility:visible !important; filter:none !important;
  transition:none !important;
}


/* =======================
   5) Z-index modale (Bootstrap) > header
   ======================= */
.modal { z-index: 1050; }
.modal-backdrop { z-index: 1040; }