@charset "UTF-8";
/* CSS Document */

.overlay-bottom:after{content:"";position:absolute;width:100%;height:100%;left:0;bottom:-1px;-webkit-mask-image:linear-gradient(to bottom,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,0.013) 9.7%,hsla(0,0%,0%,0.049) 18.7%,hsla(0,0%,0%,0.104) 27.2%,hsla(0,0%,0%,0.175) 35.1%,hsla(0,0%,0%,0.259) 42.6%,hsla(0,0%,0%,0.352) 49.6%,hsla(0,0%,0%,0.45) 56.2%,hsla(0,0%,0%,0.55) 62.5%,hsla(0,0%,0%,0.648) 68.4%,hsla(0,0%,0%,0.741) 74.1%,hsla(0,0%,0%,0.825) 79.5%,hsla(0,0%,0%,0.896) 84.8%,hsla(0,0%,0%,0.951) 89.9%,hsla(0,0%,0%,0.987) 95%,hsl(0,0%,0%) 100%);pointer-events:none;transform:translate3d(0,0,0);transition:all .6s;z-index:1}
.overlay-top:after{content:"";position:absolute;width:100%;height:100%;left:0;top:-1px;-webkit-mask-image:linear-gradient(to top,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,0.013) 9.7%,hsla(0,0%,0%,0.049) 18.7%,hsla(0,0%,0%,0.104) 27.2%,hsla(0,0%,0%,0.175) 35.1%,hsla(0,0%,0%,0.259) 42.6%,hsla(0,0%,0%,0.352) 49.6%,hsla(0,0%,0%,0.45) 56.2%,hsla(0,0%,0%,0.55) 62.5%,hsla(0,0%,0%,0.648) 68.4%,hsla(0,0%,0%,0.741) 74.1%,hsla(0,0%,0%,0.825) 79.5%,hsla(0,0%,0%,0.896) 84.8%,hsla(0,0%,0%,0.951) 89.9%,hsla(0,0%,0%,0.987) 95%,hsl(0,0%,0%) 100%);pointer-events:none;transform:translate3d(0,0,0);transition:all .6s;z-index:1}
.overlay-radial:after{content:"";position:absolute;width:100%;height:100%;left:0;bottom:0;-webkit-mask-image:radial-gradient(hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,0.013) 9.7%,hsla(0,0%,0%,0.049) 18.7%,hsla(0,0%,0%,0.104) 27.2%,hsla(0,0%,0%,0.175) 35.1%,hsla(0,0%,0%,0.259) 42.6%,hsla(0,0%,0%,0.352) 49.6%,hsla(0,0%,0%,0.45) 56.2%,hsla(0,0%,0%,0.55) 62.5%,hsla(0,0%,0%,0.648) 68.4%,hsla(0,0%,0%,0.741) 74.1%,hsla(0,0%,0%,0.825) 79.5%,hsla(0,0%,0%,0.896) 84.8%,hsla(0,0%,0%,0.951) 89.9%,hsla(0,0%,0%,0.987) 95%,hsl(0,0%,0%) 100%);pointer-events:none;transform:translate3d(0,0,0);transition:all .4s;z-index:1}
.overlay-black:after{background:#000}
.overlay-grey:after{background:#141414}
.overlay-blur:after{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.overlay-pink:after{background:#bf349b}
.overlay-multiply:after{mix-blend-mode:multiply}
.overlay-opacity-10:after{opacity:.1}
.overlay-opacity-20:after{opacity:.2}
.overlay-opacity-30:after{opacity:.3}
.overlay-opacity-40:after{opacity:.4}
.overlay-opacity-50:after{opacity:.5}
.overlay-opacity-60:after{opacity:.6}
.overlay-opacity-70:after{opacity:.7}
.overlay-opacity-80:after{opacity:.8}
.overlay-opacity-90:after{opacity:.9}
.overlay-opacity-100:after{opacity:.9}
.overlay-height-10:after{height:10%}
.overlay-height-20:after{height:20%}
.overlay-height-30:after{height:30%}
.overlay-height-40:after{height:40%}
.overlay-height-50:after{height:50%}
.overlay-height-60:after{height:60%}
.overlay-height-70:after{height:70%}
.overlay-height-80:after{height:80%}
.overlay-height-90:after{height:90%}


/* BLOC VIDEO */

.bloc-video {position: relative; width: 100%;}
	.bloc-video video {width: 100%; height: 100%; object-fit: cover; display: block;}
	
	.bloc-video .video-thumb {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;}
	.bloc-video.video-is-playing .video-thumb {opacity: 0;}
	.bloc-video video.video-preview {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}
	
	.bloc-video.hide-video-preview video.video-preview {opacity: 0;}
	
	.cta-button{letter-spacing:0;height:40px;width:40px;border-radius:50%;text-align:center;display:flex;justify-content:center;align-items:center;font-size:12px;cursor:pointer;z-index:2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:rgba(0,0,0,0.2);text-shadow:0 0 5px rgba(0,0,0,0.1);color:#FFF;transition:transform .4s}
	.bloc-video.video-player .cta-button{transform:scale(0);}
	
	.bloc-video.video-main-is-playing .cta-button{transform:scale(1)}
	.bloc-video .play-button {position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; pointer-events: none; background: rgba(0,0,0,0.2); transition: background .4s;}
	.bloc-video .play-button svg {fill: #FFF; width: clamp(60px,8vw, 128px); height: clamp(60px,8vw, 128px);transform:scale(1); transition: transform .4s;}

	.bloc-video.video-main-is-playing .play-button {background: rgba(0,0,0,0)}
	.bloc-video.video-main-is-playing .play-button svg {transform: scale(0);}
	.bloc-video .cta-button.volume-button{position:absolute;right:min(4vw, 64px); bottom: min(4vw, 64px); fill: #FFF;}
	.bloc-video .cta-button.volume-button svg{margin-bottom:0;transform:scale(0.9)}
	
	.bloc-video .cta-button.volume-button svg.icon-muted{display: none;}
	.bloc-video .cta-button.volume-button svg.icon-unmuted{display:block}
	
	.bloc-video .cta-button.volume-button.muted svg.icon-muted{display:block;}
	.bloc-video .cta-button.volume-button.muted svg.icon-unmuted{display:none}
	
	.bloc-video .cta-button.volume-button:not(.muted){background-color:#FFF;fill:#000}
 	.bloc-video .cta-button.volume-button:hover svg.icon-muted{fill:#000}
	
	@media screen and (min-width: 1200px) { 
	.cta-button:hover{background-color:#FFF;color:#000;text-shadow:0 0 0 rgba(0,0,0,0.1)}
	}



@keyframes hoverIn {
0%{left:0;width:0}
100%{left:0;width:100%}
}
@keyframes hoverOut {
0%{right:0;width:100%}
100%{right:0;width:0}
}


/* POPIN */

#popin-holder{position:fixed;width:100%;height:100%;z-index:10;pointer-events:none;opacity:0;transition:opacity 0 1s;font-family:AvantGarde,Arial,sans-serif;line-height:1.5;font-size:clamp(12px,0.9vw,16px);letter-spacing:.05rem;z-index:2000;top:0}
html.show-popin body{overflow:hidden;position:relative;overscroll-behavior:contain}
body{overflow-y:visible;position:static;margin-right:0;max-height:unset!important;min-height:unset!important;width:100%;overflow-x:clip}
html.show-popin body #popin-holder{pointer-events:all;opacity:1;transition:opacity 0;}
html.show-popin body #popin-holder .overlay{opacity:.6}
html.show-popin body #popin-holder .popin-look.is-active{transform:translate(0)}

#popin-holder .popin-look .maje-cta{position:relative;display:inline-block;font-size:80%;text-transform:uppercase;border:none!important}
#popin-holder .popin-look .maje-cta:before{content:'';width:100%;height:1px;background-color:#000;bottom:0;animation:hoverOut .2s forwards;position:absolute}
@media (min-width: 1200px) {
#popin-holder .popin-look .bloc-product:hover .maje-cta:before{animation:hoverIn .8s forwards}
}

#popin-holder .overlay{position:absolute;width:100%;height:100%;background:#000;opacity:0;transition:opacity 1s}
#popin-holder *{box-sizing:border-box;letter-spacing:0}
#popin-holder .popin-look{position:absolute;width:clamp(400px,40vw,512px);height:100%;right:0;z-index:5;background:#fff;grid-gap:min(2vw,32px);padding:0 min(4vw,64px) min(4vw,64px);overflow-y:scroll;overflow-x:hidden;transform:translateX(100%);transition:transform .6s}
#popin-holder .popin-look .product-area{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:min(1vw,16px);grid-row-gap:min(2vw,32px)}
#popin-holder .popin-look .product-area a{color:inherit;text-decoration:inherit;display:flex;flex-direction:column;grid-gap:min(1vw,16px)}
#popin-holder .popin-look .bloc-media img{width:100%;height:100%;object-fit:cover;display:block}
#popin-holder .popin-look .bloc-media{aspect-ratio:3/4;background:#f5f5f5}
#popin-holder .popin-look .popin-header{height:min(6vw,96px);text-align:center;position:relative;position:sticky;top:0;background:#fff;display:flex;align-items:center;text-align:center;text-transform:uppercase;font-family:AvantGarde,Arial,sans-serif;z-index:10}
#popin-holder .popin-look .popin-header > span{transform:translateY(2px)}
#popin-holder .popin-look .close-popin{position:absolute;width:24px;height:24px;background-image:url(https://fr-staging.maje.com/on/demandware.static/-/Library-Sites-Maje-Shared/fr_FR/landing/ss24/01-campagne/img/close-popin.svg);background-position:center;background-size:11px 11px;background-repeat:no-repeat;right:0;top:50%;transform:translateY(-50%)}
@media (max-width: 768px) {
#popin-holder .popin-look .product-area a{grid-gap:2vw}
#popin-holder .popin-look .product-area{grid-gap:4vw}
#popin-holder .popin-look{border-radius:4px 4px 0 0;transform:translateY(100%);bottom:0;width:100%;height:calc(var(--cvh,1vh) * 100 - 50px);padding:0 6vw;padding-bottom:12vw}
#popin-holder .popin-look .popin-header{height:60px}
}

/* PIN */

#landing-maje .pin{position:absolute;z-index:2;cursor:pointer}
#landing-maje .pin .pin-icon{position:relative;width:28px;height:28px;border:2px solid #FFF;border-radius:50%}
#landing-maje .pin .pin-icon span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#FFF}
#landing-maje .pin .pin-icon span:nth-child(1){width:10px;height:2px}
#landing-maje .pin .pin-icon span:nth-child(2){width:2px;height:10px}
@media (min-width: 1200px) {
#landing-maje .pin:hover .pin-icon{border-color:#000;background:#FFF}
#landing-maje .pin:hover .pin-icon span{background:#000}
}


/* FLICKITY */
.flickity-prev-next-button .flickity-button-icon{position:absolute;left:30%;top:30%;width:40%;height:40%}
.flickity-button{color:#000}
.flickity-prev-next-button.previous{left:min(2vw,32px)}
.flickity-prev-next-button.next{right:min(2vw,32px)}
@media (min-width: 1200px) {
.flickity-button:hover{background:#000;color:#FFF}
}


/* TRADS */

.popin-look .popin-header:before{content:'The look';font-family:AvantGarde,Arial,sans-serif;font-size:clamp(20px,2vw,32px);width:100%;text-transform:none;line-height:1;padding-top:4px}	
html[lang="fr"] .popin-look .popin-header:before{content:'Le look'}
html[lang="it"] .popin-look .popin-header:before{content:'Il look'}
html[lang="es"] .popin-look .popin-header:before{content:'El look'}
html[lang="de"] .popin-look .popin-header:before{content:'Look'}
	
#landing-maje .trad_see-more:before {content:'See more'}
html[lang="fr"] #landing-maje .trad_see-more:before{content:'Voir plus'}
html[lang="it"] #landing-maje .trad_see-more:before{content:'Vedere di più'}
html[lang="es"] #landing-maje .trad_see-more:before{content:'Ver más'}
html[lang="de"] #landing-maje .trad_see-more:before{content:'Mehr sehen'}

#landing-maje .trad_see-look:before {content:'See the look'}
html[lang="fr"] #landing-maje .trad_see-look:before{content:'Voir le look'}
html[lang="it"] #landing-maje .trad_see-look:before{content:'Vedere il look'}
html[lang="es"] #landing-maje .trad_see-look:before{content:'Ver el look'}
html[lang="de"] #landing-maje .trad_see-look:before{content:'Sich ansehen'}

/* BACKGROUND-FIXED */
#landing-maje .background-fixed{position:fixed;top:0;left:0;transform:translateZ(0);width:100%}
#landing-maje .background-fixed .bloc-media{pointer-events:none;transform-origin:top center;width:100%;height:100%}
#landing-maje .bloc-background{width:100%;clip:rect(0,auto,auto,0);position:absolute;height:100%;overflow:hidden;left:0;top:0}


/* CTA */

#landing-maje .maje-cta{height:32px;text-decoration:none;display:inline-flex;color:#000;border:1px solid #000;font-size:clamp(10px,0.9vw,13px);align-items:center;line-height:1;padding:0 clamp(20px,1.4641vw,23.426px);border-radius:5px;letter-spacing:.025rem;font-family:AvantGarde,Arial,sans-serif;font-weight:300;text-transform:uppercase;font-family:AvantGarde-Demi,Arial,sans-serif;cursor:pointer}
#landing-maje .maje-cta.white{background:transparent;border:1px solid #FFF;color:#FFF}
#landing-maje .maje-cta span{margin-bottom:-2px}
#landing-maje .maje-cta.border{border:1px solid #000}
@media (min-width: 1200px) {
#landing-maje .maje-cta:hover{background:#000;border:1px solid #000;color:#FFF}
#landing-maje .maje-cta.white:hover{background:#FFF;border:1px solid #000;color:#000}
#landing-maje .maje-cta.border:hover{background-color:#000;color:#fff}
}

@media (max-width: 768px) {
#landing-maje .maje-cta{height:30px}
}

#landing-maje .-flex{display:flex}
#landing-maje .-flex.-flex-column{flex-direction:column}
#landing-maje .-flex.-flex-x-start:not(.-flex-column){justify-content:flex-start}
#landing-maje .-flex.-flex-x-space:not(.-flex-column){justify-content:space-between}
#landing-maje .-flex.-flex-x-center:not(.-flex-column){justify-content:center}
#landing-maje .-flex.-flex-x-end:not(.-flex-column){justify-content:flex-end}
#landing-maje .-flex.-flex-y-start:not(.-flex-column){align-items:flex-start}
#landing-maje .-flex.-flex-y-center:not(.-flex-column){align-items:center}
#landing-maje .-flex.-flex-y-end:not(.-flex-column){align-items:flex-end}
#landing-maje .-flex.-flex-column.-flex-x-start{align-items:flex-start}
#landing-maje .-flex.-flex-column.-flex-x-center{align-items:center}
#landing-maje .-flex.-flex-column.-flex-x-end{align-items:flex-end}
#landing-maje .-flex.-flex-column.-flex-y-start{justify-content:flex-start}
#landing-maje .-flex.-flex-column.-flex-y-center{justify-content:center}
#landing-maje .-flex.-flex-column.-flex-y-end{justify-content:flex-end}