.ui-jules-snm
{
    display: block
}
.ui-jules-snm.notActive
{
    display: none
}
.ui-jules-snm .plp-snm
{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    max-width: 450px;
    max-height: 750px;
}
.ui-jules-snm .plp-snm .plp-snm__content
{
    display: flex;
    flex-flow: column nowrap;
    gap: clamp(1.25rem, 5.568vw + 0.136rem, 2.813rem);
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.ui-jules-snm .plp-snm .plp-snm__content .plp-snm__content-description p
{
    color: #fff;
    margin: 0;
    text-align: center;
    line-height: 1
}
.ui-jules-snm .plp-snm .plp-snm__content .plp-snm__content-description .plp-snm__content-title
{
    font-size: clamp(1.25rem, 5.568vw + 0.136rem, 2.813rem);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 15px
}
.ui-jules-snm .plp-snm .plp-snm__content .plp-snm__content-description .plp-snm__content-subTitle
{
    font-size: clamp(1rem, 2.227vw + 0.555rem, 1.625rem);
    font-weight: 500;
    padding: 0 .5em
}
.ui-jules-snm .plp-snm .plp-snm__content .plp-snm__content-description img
{
    width: 100%;
    display: block;
    max-width: clamp(5rem, 62.78vw - 7.556rem, 13.75rem)
}
.ui-jules-snm .plp-snm .plp-snm__content-listButton
{
    display: flex;
    flex-flow: column nowrap;
    gap: 14px
}
.ui-jules-snm .plp-snm .plp-snm__content-listButton .plp-snm__content-listButton-link
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(7.813rem, 24.664vw + 2.88rem, 11.25rem);
    height: clamp(1.563rem, 5.381vw + .486rem, 2.313rem);
    border: .125em solid #fff;
    background: -webkit-linear-gradient(left, #fff 50%, rgba(255, 255, 255, .3) 50%);
    background: -o-linear-gradient(left, #fff 50%, rgba(255, 255, 255, .3) 50%);
    background: linear-gradient(to right, rgba(255, 255, 255, .3) 50%, #fff 50%);
    background-size: 250%;
    background-position: right;
    color: #000;
    padding: .875em .438em;
    border-radius: 20px;
    cursor: pointer;
    transition: .5s ease-out;
    font-size: clamp(.625rem, 1.794vw + .266rem, .875rem)
}
.ui-jules-snm .plp-snm .plp-snm__content-listButton .plp-snm__content-listButton-link:hover,
.ui-jules-snm .plp-snm .plp-snm__content-listButton .plp-snm__content-listButton-link.active
{
    background-position: left;
    color: #fff
}
.ui-jules-snm .plp-snm .plp-snm__content-listButton .plp-snm__content-listButton-link.active
{
    cursor: initial
}
@media screen and (min-width:769px)
{
    .ui-jules-snm .plp-snm .plp-snm__content .plp-snm__content-description .plp-snm__content-title
    {
        font-size: clamp(1.75rem, 4vw - 0.172rem, 3.125rem);
        margin-bottom: clamp(1.125rem, 1.273vw + 0.513rem, 1.563rem);
    }
    .ui-jules-snm .plp-snm .plp-snm__content .plp-snm__content-description .plp-snm__content-subTitle
    {
        font-size: clamp(1.125rem, 1.818vw + 0.251rem, 1.75rem);
    }
    .ui-jules-snm .plp-snm .plp-snm__content .plp-snm__content-description img
    {
        max-width: clamp(7.5rem, 35.714vw - 4.643rem, 12.5rem)
    }
    .ui-jules-snm .plp-snm .plp-snm__content
    {
        gap: 35px
    }
}

@media screen and (min-width:1320px)
{
   .ui-jules-snm .plp-snm .plp-snm__content .plp-snm__content-description .plp-snm__content-title
    {
        font-size: clamp(1.75rem, 1.167vw + 0.787rem, 2.188rem);
        margin-bottom: clamp(1.125rem, 1.273vw + 0.513rem, 1.563rem);
    }
    .ui-jules-snm .plp-snm .plp-snm__content .plp-snm__content-description .plp-snm__content-subTitle
    {
        font-size: clamp(1.5rem, 0.667vw + 0.95rem, 1.75rem);
    }
}
/* -------------- */
/* Conteneur parent */
.plp-snm.snmGif
{
    aspect-ratio: 9/16;
    background: transparent;
    /* Pas de couleur de fond */
}
/* Images du slideshow */
.plp-snm.snmGif .animImg
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Pour que l'image remplisse bien le conteneur */
    opacity: 0;
    transition: opacity 0.5s ease;
}
/* La première image visible au départ */
.plp-snm.snmGif .animImg:first-child
{
    opacity: 1;
}
/* -------------- */
.animImg2,
.animImg3,
.animImg4,
.animImg5,
.animImg6
{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    width: 100%;
    height: auto;
}
.animImg2
{
    animation-name: fadeImg2;
}
@keyframes fadeImg2
{
    0%,
    16%
    {
        opacity: 0;
    }
    17%,
    33%
    {
        opacity: 1;
    }
    34%,
    100%
    {
        opacity: 0;
    }
}
.animImg3
{
    animation-name: fadeImg3;
}
@keyframes fadeImg3
{
    0%,
    33%
    {
        opacity: 0;
    }
    34%,
    50%
    {
        opacity: 1;
    }
    51%,
    100%
    {
        opacity: 0;
    }
}
.animImg4
{
    animation-name: fadeImg4;
}
@keyframes fadeImg4
{
    0%,
    50%
    {
        opacity: 0;
    }
    51%,
    66%
    {
        opacity: 1;
    }
    67%,
    100%
    {
        opacity: 0;
    }
}
.animImg5
{
    animation-name: fadeImg5;
}
@keyframes fadeImg5
{
    0%,
    66%
    {
        opacity: 0;
    }
    67%,
    83%
    {
        opacity: 1;
    }
    84%,
    100%
    {
        opacity: 0;
    }
}
.animImg6
{
    animation-name: fadeImg6;
}
@keyframes fadeImg6
{
    0%,
    83%
    {
        opacity: 0;
    }
    84%,
    99%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}
.content-SNM
{
    position: relative;
    display: block
}
@media (max-width:1279.98px)
{
    .header
    {
        z-index: 4
    }
}
.ui-jules-snm.op-chaussette-boxer .plp-snm
{
    border: 3px solid #f08012
}
.ui-jules-snm.op-chaussette-boxer .plp-snm .plp-snm__content
{
    top: initial;
    bottom: 1.5vw;
    transform: translate(-50%, 0)
}
.ui-jules-snm.op-chaussette-boxer .plp-snm .plp-snm__content-listButton
{
    gap: 4px
}
.ui-jules-snm.op-chaussette-boxer .plp-snm .plp-snm__content-listButton .plp-snm__content-listButton-link
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: clamp(1.563rem, 5.381vw + .486rem, 2.313rem);
    border: .125em solid #000;
    background: -webkit-linear-gradient(left, #000 50%, rgba(255, 255, 255, .3) 50%);
    background: -o-linear-gradient(left, #000 50%, rgba(255, 255, 255, .3) 50%);
    background: linear-gradient(to right, rgba(255, 255, 255, .3) 50%, #000 50%);
    background-size: 250%;
    background-position: right;
    color: #fff;
    padding: .875em .438em;
    border-radius: 20px;
    cursor: pointer;
    transition: .5s ease-out;
    font-size: clamp(.625rem, 1.794vw + .266rem, .875rem)
}
.ui-jules-snm.op-chaussette-boxer .plp-snm .plp-snm__content-listButton .plp-snm__content-listButton-link:hover,
.ui-jules-snm.op-chaussette-boxer .plp-snm .plp-snm__content-listButton .plp-snm__content-listButton-link.active
{
    background-position: left;
    color: #000
}
.ui-jules-snm.op-chaussette-boxer .plp-snm .plp-snm__content-listButton .plp-snm__content-listButton-link
{
    width: clamp(8.125rem, 35.714vw + .982rem, 13.125rem);
    height: clamp(1.625rem, 4.911vw + .643rem, 2.313rem);
    font-size: clamp(.375rem, 3.125vw - .25rem, .813rem)
}
@media screen and (min-width:544px)
{
    .ui-jules-snm.op-chaussette-boxer .plp-snm .plp-snm__content-listButton .plp-snm__content-listButton-link
    {
        width: clamp(8.125rem, 35.556vw - 3.964rem, 13.125rem);
        height: clamp(1.625rem, 4.889vw - .037rem, 2.313rem);
        font-size: clamp(.375rem, 3.111vw - .683rem, .813rem)
    }
}
@media screen and (min-width:769px)
{
    .ui-jules-snm.op-chaussette-boxer .plp-snm .plp-snm__content-listButton .plp-snm__content-listButton-link
    {
        width: clamp(9.75rem, 8.048vw + 5.882rem, 13.125rem);
        height: clamp(1.625rem, 1.639vw + .837rem, 2.313rem);
        font-size: clamp(.563rem, .634vw + .258rem, .813rem)
    }
}
.snm__video
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    gap: 5px;
    width: 100%;
    max-width: 345px;
    height: auto
}
.snm__video-title
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(7.813rem, 24.664vw + 2.88rem, 11.25rem);
    height: clamp(1.563rem, 5.381vw + .486rem, 2.313rem);
    border: .125em solid #000;
    background: -webkit-linear-gradient(left, #000 50%, rgba(255, 255, 255, .7) 50%);
    background: -o-linear-gradient(left, #000 50%, rgba(255, 255, 255, .7) 50%);
    background: linear-gradient(to right, rgba(255, 255, 255, .7) 50%, #000 50%);
    background-size: 250%;
    background-position: right;
    color: #fff;
    padding: .875em .438em;
    border-radius: 20px;
    cursor: pointer;
    transition: .5s ease-out;
    font-size: clamp(.625rem, 1.794vw + .266rem, .875rem);
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%)
}
.snm__video-title:hover
{
    background-position: left;
    color: #000
}
.snm__video-content
{
    width: 100%;
    height: 100%;
    position: relative
}
.snm__video-content::after
{
    content: "";
    aspect-ratio: 9/16
}
.snm__video-content video
{
    position: relative;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%
}
@media only screen and (max-width:960px)
{
    .snm__video-content:after
    {
        padding-top: 140%;
        content: ""
    }
}
.snm__video-content video::-webkit-media-controls-panel,
.snm__video-content video::-webkit-media-controls-play-button,
.snm__video-content video::-webkit-media-controls-volume-slider-container,
.snm__video-content video::-webkit-media-controls-volume-slider,
.snm__video-content video::-webkit-media-controls-mute-button,
.snm__video-content video::-webkit-media-controls-timeline,
.snm__video-content video::-webkit-media-controls-current-time-display,
.snm__video-content video::-webkit-full-page-media::-webkit-media-controls-panel,
.snm__video-content video::-webkit-media-controls-timeline-container,
.snm__video-content video::-webkit-media-controls-time-remaining-display,
.snm__video-content video::-webkit-media-controls-seek-back-button,
.snm__video-content video::-webkit-media-controls-seek-forward-button,
.snm__video-content video::-webkit-media-controls-fullscreen-button,
.snm__video-content video::-webkit-media-controls-rewind-button,
.snm__video-content video::-webkit-media-controls-return-to-realtime-button,
.snm__video-content video::-webkit-media-controls-toggle-closed-captions-button
{
    display: none
}
.ui-jules-snm .plp-snm .plp-snm__button
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: max-content;
    height: 32px;
    border-radius: 50px;
    cursor: pointer;
    transition: .5s ease-out;
    margin: 0;
    padding: 0 1em;
    position: absolute;
    left: 50%;
    bottom: 3%;
    transform: translateX(-50%);
    font-size: clamp(.75rem, .125vw + .725rem, .875rem);
    z-index: 1
}
.ui-jules-snm .plp-snm .plp-snm__button.white
{
    border: .15em solid #fff;
    background: -webkit-linear-gradient(left, #fff 50%, rgba(255, 255, 255, .6) 50%);
    background: -o-linear-gradient(left, #fff 50%, rgba(255, 255, 255, .6) 50%);
    background: linear-gradient(to left, #fff 50%, rgba(255, 255, 255, .6) 50%);
    background-size: 250%;
    background-position: right;
    color: #000
}
.ui-jules-snm .plp-snm .plp-snm__button.green
{
    border: .15em solid #006C47;
    background: -webkit-linear-gradient(left, #006C47 50%, rgba(255, 255, 255, .6) 50%);
    background: -o-linear-gradient(left, #006C47 50%, rgba(255, 255, 255, .6) 50%);
    background: linear-gradient(to left, #006C47 50%, rgba(255, 255, 255, .6) 50%);
    background-size: 250%;
    background-position: right;
    color: #fff
}
.ui-jules-snm .plp-snm .plp-snm__button.red
{
    border: .15em solid #E51E1E;
    background: -webkit-linear-gradient(left, #E51E1E 50%, rgba(255, 255, 255, .6) 50%);
    background: -o-linear-gradient(left, #E51E1E 50%, rgba(255, 255, 255, .6) 50%);
    background: linear-gradient(to left, #E51E1E 50%, rgba(255, 255, 255, .6) 50%);
    background-size: 250%;
    background-position: right;
    color: #fff
}
.ui-jules-snm .plp-snm .plp-snm__button.black
{
    border: .15em solid #000;
    background: -webkit-linear-gradient(left, #000 50%, rgba(0, 0, 0, .6) 50%);
    background: -o-linear-gradient(left, #000 50%, rgba(0, 0, 0, .6) 50%);
    background: linear-gradient(to left, #000 50%, rgba(0, 0, 0, .6) 50%);
    background-size: 250%;
    background-position: right;
    color: #fff
}
.ui-jules-snm .plp-snm .plp-snm__button.yellow
{
    border: .15em solid #FEDD00;
    background: -webkit-linear-gradient(left, #FEDD00 50%, rgba(255, 255, 255, .6) 50%);
    background: -o-linear-gradient(left, #FEDD00 50%, rgba(255, 255, 255, .6) 50%);
    background: linear-gradient(to left, #FEDD00 50%, rgba(255, 255, 255, .6) 50%);
    background-size: 250%;
    background-position: right;
    color: #000
}
.ui-jules-snm .plp-snm .plp-snm__button.orange
{
    border: .15em solid #FF8C09;
    background: -webkit-linear-gradient(left, #FF8C09 50%, rgba(255, 255, 255, .6) 50%);
    background: -o-linear-gradient(left, #FF8C09 50%, rgba(255, 255, 255, .6) 50%);
    background: linear-gradient(to left, #FF8C09 50%, rgba(255, 255, 255, .6) 50%);
    background-size: 250%;
    background-position: right;
    color: #fff
}
.ui-jules-snm .plp-snm .plp-snm__button.white:hover
{
    background-position: left;
    color: #000
}
.ui-jules-snm .plp-snm .plp-snm__button.green:hover
{
    background-position: left;
    color: #fff
}
.ui-jules-snm .plp-snm .plp-snm__button.yellow:hover
{
    background-position: left;
    color: #000
}
.ui-jules-snm .plp-snm .plp-snm__button.red:hover
{
    background-position: left;
    color: #000
}
.ui-jules-snm .plp-snm .plp-snm__button.orange:hover
{
    background-position: left;
    color: #000
}
.ui-jules-snm .plp-snm .plp-snm__button.black:hover
{
    background-position: left;
    color: #fff
}