/* Refonte (test B) : toutes les règles sont scopées sur #ocs-menu-xl, id de la nav de la refonte (NAV#ocs-menu-xl).
   Les éléments de ce fichier ne sont pas dans la nav : on passe par body:has(#ocs-menu-xl). */
/* ==========================================================================
   STRUCTURE PLP : bandeau de catégorie
   ========================================================================== */

body:has(#ocs-menu-xl) .category-banner-top {
   width: 100%;
}

body:has(#ocs-menu-xl) .main-content-result #description-category {
   width: 100%;
}

body:has(#ocs-menu-xl) .plp-header .container-cat-banner-updatedom .category-banner:not(:has(> .html-slot-container)) {
   padding-top: var(--ocs-unit-gap-16);
}

body:has(#header-banner-ocs) .ui-jules-plp {
   width: 100%;
   height: 100%;
   margin: 0 auto;
   box-sizing: border-box;
   position: relative;
   max-width: var(--maxWidth)!important;
   padding: 0 var(--ocs-unit-gap-16) !important;
}

body:has(#ocs-menu-xl) .ui-jules-plp div[class*="plp-"] {
    max-width: var(--maxWidth)!important;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
   width: 100%;
   margin: 0 auto;
   height: 100%;
   overflow: hidden;
   gap: 15px;
}

@media screen and (min-width: 961px) {
   body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau {
      align-items: center;
   }
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau:not(:has(> .plp-bandeau__content-image)) {
   align-items: start;
   max-width: var(--maxWidth);
   margin: 0 auto;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau.no-result {
   align-items: center;
}

/* ==========================================================================
   TITRE ET IMAGE DU BANDEAU
   ========================================================================== */

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__title {
   font-family: 'Subjectivity', sans-serif;
   font-style: normal;
   font-weight: 700;
   font-size: 24px;
   color: #000;
   margin: 0 var(--ocs-unit-gap-16);
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-image {
   overflow: hidden;
   width: 100%;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-image img {
   display: block;
   width: 100%;
   height: auto;
}

/* ==========================================================================
   GÉLULES (.plp-bandeau__content-gelule)
   ========================================================================== */

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: start;
   overflow-x: auto;
   overflow-scrolling: touch;
   -webkit-overflow-scrolling: touch;
   -moz-overflow-scrolling: touch;
   -ms-overflow-scrolling: touch;
   gap: 0.75em;
   width: 100%;
   height: auto;
   scrollbar-width: none;
   position: relative;
}

@media screen and (min-width: 961px) {
  body:has(#ocs-menu-xl) .plp-bandeau .plp-bandeau__content-gelule {
       margin: 0;
   }
}
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule a,
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule button {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 16px;
   transition: background-position 0.5s ease-out;
   border: 1px solid rgba(0, 0, 0, 0.75);
   background: linear-gradient(to left, rgb(255, 255, 255) 50%, #e7e7e7 50%);
   background-size: 280%;
   background-position: right;
   border-radius: 0 !important;
   padding: 1.225rem .625rem !important;
   color: #000;
   flex: 0 0 auto;
   min-width: 68px;
   height: 32px;
   position: relative;
   cursor: pointer;
   margin-bottom: 0.5em;
}

@media screen and (min-width: 320px) and (max-width: 961px) {
   body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule a.showGelule.active + a:nth-child(2),
   body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule button.showGelule.active + button:nth-child(2) {
      margin-left: var(--ocs-unit-gap-16);
   }
}



body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau.no-result .plp-bandeau__content-gelule a:first-child,
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau.no-result .plp-bandeau__content-gelule button:first-child,
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule button:first-child,
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule a:first-child {
   margin-left: 0;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau.no-result .plp-bandeau__content-gelule a:last-child,
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau.no-result .plp-bandeau__content-gelule button:last-child,
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule button:last-child,
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule a:last-child {
   margin-right: 0;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule a:hover,
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule button:hover {
   background-position: left;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule a.active,
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule button.active {
   background-position: left;
   cursor: default;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau__content-gelule a[data-color='orange'] {
   border: 1px solid #4aba56;
   background: -webkit-linear-gradient(left, rgb(255, 255, 255) 50%, #4aba5633 50%);
   background: -o-linear-gradient(left, rgb(255, 255, 255) 50%, #4aba5633 50%);
   background: linear-gradient(to left, rgb(255, 255, 255) 50%, #4aba5633 50%);
   background-position: right;
   background-size: 280%;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau__content-gelule a[data-color='orange']:hover {
   background-position: left;
}

/* Gélule fixée en bas */
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule.is-fixed {
   position: fixed;
   z-index: 2;
   bottom: 0;
   left: 0;
   padding: 0.75em 0;
   backdrop-filter: blur(1px);
   /* background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 33%, rgba(0, 0, 0, 0.44) 100%); */
   width: 100%;
   display: flex;
   justify-content: safe center;
   align-items: center;
}

body:has(#ocs-menu-xl):has(.nav-item.show) .plp-bandeau__content-gelule.is-fixed {
   z-index: 1;
}

body:has(#ocs-menu-xl):has(.plp-bandeau__content-gelule.is-fixed) #plp .icon-top {
   bottom: 3em !important;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule.is-fixed a {
   margin-bottom: 0;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__content-gelule.is-hidden {
   opacity: 0;
   pointer-events: none;
   /* ou visibility: hidden; selon l'effet souhaité */
}

/* ==========================================================================
   CARTES / COUPES (.plp-bandeau__container--content_card-content)
   ========================================================================== */

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container {
   display: flex;
   align-items: start;
   justify-content: center;
   flex-flow: column;
   overflow: hidden;
   width: 100%;
   row-gap: 0.75em;
   padding: 0.5em 0;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content {
   display: flex;
   flex-direction: column;
   justify-content: end;
   row-gap: 1em;
   width: 100%;
}

@media screen and (min-width: 961px) {
   body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container {
      padding-left: 0;
   }
   body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content {
      flex-direction: row;
      column-gap: 1em;
      max-width: 100%;
   }
}

/* CSS copié à l'identique du composant coupe du guide denim (LP-Guide-Denim-FR.html) —
   mêmes valeurs, mêmes breakpoints, même technique de bordure chevauchée. */
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content {
   display: flex;
   flex-flow: row nowrap;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   width: 100%;
   margin: 0;
   padding: 0;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content::-webkit-scrollbar {
   display: none;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li {
   list-style: none;
   flex: 1 0 auto;
   scroll-snap-align: start;
   background-color: #f5f3ee;
   border: 1px solid #000;
   margin-left: -1px;
   display: flex;
   flex-direction: column;
   padding: 0.75rem 0.75rem 0;
   transition: background-color 0.3s ease;
   cursor: pointer;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li:first-child {
   margin-left: 0;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li:hover,
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li:has(a.active) {
   background-color: #0e5ab3;
}

/* 961px–1299px : scrollbar fine visible (usage souris) */
@media screen and (min-width: 961px) and (max-width: 1299px) {
   body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content {
      scrollbar-width: thin;
      padding-bottom: 0.5rem;
   }
   body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content::-webkit-scrollbar {
      display: block;
      height: 4px;
   }
   body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content::-webkit-scrollbar-track {
      background: #e7e3da;
   }
   body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content::-webkit-scrollbar-thumb {
      background: #000;
   }
}

/* 1300px+ : assez de place → toutes les cartes pleine largeur, plus de slider */
@media screen and (min-width: 1300px) {
   body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content {
      overflow-x: visible;
   }
   body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li {
      flex: 1 0 0;
   }
}

/* L'image fixe sa propre hauteur via aspect-ratio — la carte s'adapte */
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li img {
   width: 100%;
   aspect-ratio: 3/4;
   object-fit: cover;
   object-position: top;
   display: block;
}

/* Zone texte : léger chevauchement sur le bas de l'image */
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li .plp-bandeau__container--content_card-content-body {
   flex-shrink: 0;
   margin-top: -20px;
   padding: 0 0.5rem 1rem;
   position: relative;
   z-index: 1;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.1rem;
}

@media screen and (min-width: 768px) {
   body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li .plp-bandeau__container--content_card-content-body {
      margin-top: -25px;
   }
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li .plp-bandeau__container--content_card-content-title {
   font-size: clamp(1.375rem, 1.25vw + 1.125rem, 2.25rem);
   text-transform: uppercase;
   color: #0e5ab3;
   margin: 0;
   transition: color 0.3s ease;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li:hover .plp-bandeau__container--content_card-content-title,
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li a.active .plp-bandeau__container--content_card-content-title {
   color: #fff;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li .plp-bandeau__container--content_card-content-fit {
   font-size: 0.75rem;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: #8a8f8c;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
   margin: 0;
   transition: color 0.3s ease;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li:hover .plp-bandeau__container--content_card-content-fit,
body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li a.active .plp-bandeau__container--content_card-content-fit {
   color: rgba(255, 255, 255, 0.75);
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li.dimmed img {
   opacity: 0.7;
   transition: opacity 0.25s ease-in;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-bandeau .plp-bandeau__container .plp-bandeau__container--content_card-content li.dimmed:hover img {
   opacity: 1;
}

/* ==========================================================================
   BANDEAU D'INCLUSION (.ui-jules-bandeau)
   ========================================================================== */

body:has(#ocs-menu-xl) .ui-jules-bandeau {
   margin: 0;
   box-sizing: border-box;
   width: 100%;
   padding: 0 0.5em;
}

body:has(#ocs-menu-xl) .ui-jules-bandeau .bandeau__initial {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-flow: column nowrap;
   gap: 1em;
   padding: 16px;
   max-width: 1920px;
   width: auto;
   margin: 0.5em auto;
   border-radius: 20px;
}

body:has(#ocs-menu-xl) .ui-jules-bandeau .bandeau__inclusion {
   border-radius: 20px;
   background-color: #ece9df;
   position: relative;
   padding: 1em;
   z-index: 1;
   align-items: start;
   gap: 0.75em;
}

body:has(#ocs-menu-xl) .ui-jules-bandeau .bandeau__inclusion .bandeau__inclusion--title {
   font-size: clamp(1rem, 0.125vw + 0.975rem, 1.125rem);
   margin: 0;
   font-weight: 700;
   text-transform: uppercase;
}

body:has(#ocs-menu-xl) .ui-jules-bandeau .bandeau__inclusion .bandeau__inclusion--description {
   font-size: clamp(0.875rem, 0.125vw + 0.85rem, 1rem);
   margin: 0;
   width: 100%;
}

body:has(#ocs-menu-xl) .ui-jules-bandeau .bandeau__inclusion .bandeau__inclusion--subTitle {
   font-size: 16px;
   margin: 0;
   font-weight: 700;
}

body:has(#ocs-menu-xl) .ui-jules-bandeau .bandeau__inclusion .bandeau__inclusion--link {
   font-size: 14px;
   text-decoration: underline;
}

/* ==========================================================================
   SWIPER
   ========================================================================== */

body:has(#ocs-menu-xl) .swiper-button-next,
body:has(#ocs-menu-xl) .swiper-button-prev {
   z-index: 3 !important;
}

/* ==========================================================================
   TEXTE SEO EN HAUT DE PLP
   ========================================================================== */

body:has(#ocs-menu-xl):has(#header-banner-ocs) .ui-jules-plp .plp-seo__top-content {
   width: 100%;
   margin: 0.5em auto 0;
   max-width: var(--maxWidth);
}

body:has(#ocs-menu-xl):has(#header-banner-ocs) .ui-jules-plp .plp-seo__top-content .plp-seo__top-content-text {
   font-size: clamp(0.875rem, 0.125vw + 0.85rem, 1rem);
   width: auto;
   margin: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
}

/* Voir plus / Voir moins */

body:has(#ocs-menu-xl) .ui-jules-plp .plp-seo__readmore-gradient {
   height: 40px;
   margin-top: -40px;
   background: linear-gradient(to bottom, transparent, #ffffff);
   pointer-events: none;
   position: relative;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-seo__readmore-btn {
   display: block;
   background: none;
   border: none;
   cursor: pointer;
   color: #474747;
   font-size: clamp(0.875rem, 0.125vw + 0.85rem, 1rem);
   text-decoration: none;
   padding: 0.25em 0;
   margin: 0 var(--ocs-unit-gap-16) 0;
   font-family: inherit;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-seo__readmore-btn::after {
   content: ' ▾';
   font-size: 0.9em;
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-seo__readmore-btn[aria-expanded='true']::after {
   content: ' ▴';
}

body:has(#ocs-menu-xl) .ui-jules-plp .plp-seo__readmore-btn:hover {
   opacity: 0.7;
}