@import url("reset.css");
/*@import url("fonts.css");*/
@font-face {
    font-family: 'bebasneue';
    src: url('bebasneue.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*
COULEURS
#ed1f29

#330000 rose
*/


body{ background:#fdfdf2; color:#58564b; font-family:'Roboto', san-serif; font-size:16px; font-weight:400; line-height:1; }
h1,h2,h3,h4{ font-family:'bebasneue', san-serif; font-weight:normal; line-height:1.3; text-transform:uppercase; }
p{ line-height:1.8; }
sup{ vertical-align: super; font-size: smaller; }
.underline{ text-decoration:underline; }
a:hover{ }
.container{ margin:0 auto; position:relative; max-width:1330px; width:100%; padding:0 30px; }
.container.narrow{ width:900px; }
.container:after{ clear: both; content: ""; display: block; height: 0; line-height: 0;  visibility: hidden; }
.strong{ font-weight:700; }
a.btn, button{ display:block; color:#fdfdf2; font-size:24px; font-family:'bebasneue', san-serif; font-weight:normal; line-height:1.3; letter-spacing:2px; text-transform:uppercase; text-align:center; background:#330000; padding:16px; width:100%; }
a.btn:hover, button:hover{ color:#fdfdf2; /*background:#1d2225;*/ background:#0c0000; }
a.btn.disabled, a.btn.disabled:hover{ background:#b5b29d; cursor:default; }
a.btn-light{font-size:24px;font-family:'bebasneue', san-serif;letter-spacing:2px;text-align:center;padding:0 30px;line-height:60px;outline:none;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;display:inline-block;position:relative;color:#fdfdf2}
a.btn-light:hover,a.btn-light:focus{text-decoration:none;color:#d9d9d9}
a.btn-light:before{position:absolute;top:0;left:0;width:55px;height:30px;border:2px solid #fdfdf2;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;border-right:0;border-bottom:0;box-sizing:border-box;content:""}
a.btn-light:after{position:absolute;bottom:0;right:0;width:55px;height:30px;border:2px solid #fdfdf2;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;border-left:0;border-top:0;box-sizing:border-box;content:""}
a.btn-light:hover:after,a.btn-light:hover:before{width:100%;height:100%;border-color:#d9d9d9}


/*LAYOUT*/
.wrap{ display:flex; flex-flow:row wrap; }

/*HOME*/
#main-header .socials { display: flex; align-items: center;  }
#main-header .socials .name { display:inline-block; padding:12px 50px; font-family:'bebasneue', sans-serif; text-transform:uppercase; font-size:26px; background: #fdfdf2; color: #330000; }
#main-header .socials ul { display: flex; flex-wrap: wrap; }
#main-header .socials li a { background: #330000; display: flex; align-items: center; justify-content: center; height: 50px; width: 50px; transition: .5s ease;}
#main-header .socials li a:hover {background: #0c0000; }
#main-header .socials svg { width: 30px; height: 30px; }
#main-header .socials a svg path { fill: #fdfdf2; transition: .5s ease; }

#main-header{ background:url(../images/header-nov2024.jpg) top center no-repeat; background-size:cover; height:100vh; position:relative;}
#main-header .mail{ position:absolute; top:0; right:0; display:inline-block; background:#fdfdf2; }
#main-header .mail>span{ display:inline-block; padding:12px 50px; font-family:'bebasneue', sans-serif; text-transform:uppercase; font-size:26px; }
#main-header .mail:after{ content:""; background:url(../images/icns/mail.svg) center center no-repeat #330000; background-size:30px 30px; display:block; float:right; height:50px; width:50px;transition:all .5s ease }
#main-header .mail:hover{ color:#330000; background:#fdfdf2; }
#main-header .mail:hover:after{ background-color:#d9d9d9; }

#main-header .title{ position:absolute; right:10%; top:30%; text-align:center; }
#main-header .title h1{ font-size:6vw; margin-bottom:40px; line-height: 1; color:#330000}
#main-header .title h1 .sm { font-size: 4.8vw; display: block; }
#main-header .title a { margin-top: 18px;}

#main-header .btn.market { display: inline-flex; align-items: center; justify-content: center; width: auto; position: absolute; top: 0; right: 0; padding: 12px 30px; }
#main-header .btn.market svg { width: 30px; margin-right: 10px; }

#main-content{ padding:0 80px; position:relative; }
#main-content:before{ content:""; position:absolute; bottom:980px; left:0; width:220px; height:20%; max-height:480px; background:url(../images/plus-pattern.png) 0 0 repeat; z-index:-1; }

.intro{ display:flex; flex-flow:row wrap;}
.intro-1{ width:43%; position:relative; /*padding:300px 20px; */}
.quote{ font-size:75px; font-family:'bebasneue', san-serif; line-height:1.3; text-transform:uppercase; text-align:center; display:block; margin:0 auto; width:270px; position:relative; }
.quote:before{ content:""; background:url(../images/icns/open-quotes.svg) center center no-repeat; background-size:50px 50px; height:50px; width:50px; position:absolute; top:-20px; left:-20px;}
.quote:after{ content:""; background:url(../images/icns/close-quotes.svg) center center no-repeat; background-size:50px 50px; height:50px; width:50px; position:absolute; bottom:-20px; right:-20px;}
.intro-1 .description { margin:200px 100px 250px 0;}
.intro-1 .medias{ position:absolute; top:0; right:0; z-index:20; display: flex; flex-wrap: wrap; justify-content: flex-end; }
.intro-1 .medias .social-logo { display:block; float:right; height:68px; width:68px; background-repeat:no-repeat; background-position:center center; background-color:transparent; background-size: 32px 32px; }
.intro-1 .medias .social-logo:hover {background-color:#edebdc;}

.intro-1 .medias .btn { display: flex; justify-content: center; align-items: center; max-width: 220px; }
.intro-1 .medias .btn svg { width: 30px; margin-right: 20px; }

.social-logo.insta{ background-image:url(../images/icns/instagram.svg?nov2024);}
.social-logo.yt{  background-image:url(../images/icns/youtube.svg?nov2024);}
.social-logo.fb{  background-image:url(../images/icns/facebook-alt.svg?nov2024);}
.social-logo.itunes{ background-image:url(../images/icns/itunes.svg?nov2024);}
.social-logo.tiktok{ background-image:url(../images/icns/tiktok.svg?nov2024);}
.social-logo.patreon{ background-image:url(../images/icns/patreon.svg?nov2024);}
.social-logo.twitter{ background-image:url(../images/icns/twitter.svg?nov2024);}
.social-logo.applepodcasts{ background-image:url(../images/icns/apple-podcast.svg?nov2024);}
.social-logo.googlepodcasts { background-image: url(../images/icns/google-podcasts.svg?nov2024); }
.social-logo.spotify { background-image: url(../images/icns/spotify.svg?nov2024); }
.social-logo.iheartradio { background-image: url(../images/icns/iheartradio.svg?nov2024); }

.intro-2{ width:57%; position:relative; margin-bottom: 100px;}
.intro-2:before{ content:""; position:absolute; bottom:0; right:0; width:50%; height:50%; background:url(../images/plus-pattern.png?nov2024) 0 0 repeat; z-index:1; }
.video{ margin-top:-100px; padding:18px; background:#fdfdf2; max-width:859px; position:relative; z-index:10; box-shadow:6px 2px 40px rgba(0,0,0,0.2); }
.video a{ position:relative; display:block; background:#330000; }
.video img{ width:100%; display:block;transition:all .5s ease }
.video a:hover img{ opacity:0.5; }
.video a:after{ content:""; position:absolute; top:0; right:0; left:0; bottom:0; background:url(../images/play-icn.png?nov2024) center center no-repeat; }



.list-top{ background:#330000; color:#fdfdf2; padding:7vw 0 340px; position:relative; z-index:5;  }
.list-top .wrap{ display:flex; flex-flow:row wrap; justify-content:space-between; }
.list-top .wrap>div{display:flex; justify-content:center; flex-direction:column;}
.list-top .title{ /*float:left;*/ }
.list-top .title h2{ font-size:70px; }
.cities{ /*float:right;*/ width:100%; max-width:370px; }
.cities .control-group{ width:100%; max-width:370px; float:left;}
.cities .select{position:relative;display:inline-block;width:100%;margin-right:28px}
.cities .select select{display:inline-block;width:100%;padding:10px 15px;cursor:pointer;color:#58564b;font-family:'Roboto',sans-serif;font-weight:400;font-size:16px;border:0;border-radius:0;outline:0;background:#fdfdf2;appearance:none;-webkit-appearance:none;-moz-appearance:none;transition:all 0.3s ease}
.cities .select select::-ms-expand{display:none}
.cities .select select:focus,.select select:hover{background:#fdfdf2}
.cities .select select:disabled{pointer-events:none;opacity:.5}
.cities .select__arrow{position:absolute;top:16px;right:15px;width:0;height:0;pointer-events:none;border-width:8px 5px 0;border-style:solid;border-color:#330000 transparent transparent}
.cities .select select:disabled~.select__arrow,.select select:focus~.select__arrow,.select select:hover~.select__arrow{border-top-color:#330000}
.list-content{position:relative; z-index:10; }
.list-content .list{ background:#fdfdf2; padding:50px; margin-top:-280px; }
.list-content .show{ background:#edebdc; padding:20px 40px; display:flex; flex-flow:row wrap; margin-bottom:14px;}
.list-content .show>div{display:flex; justify-content:center; flex-direction:column;}
.list-content .date{ width:14%; text-align:center; padding-right:25px; }
.list-content .desc{ width:52%; border-left:2px solid #e2e0cf; padding:25px 25px 25px 50px; }
.list-content .share{ width:12%; padding-right:25px; }
.list-content .action{ width:22%; }
.list-content .date .date-1{ font-size:70px; /*font-size:3.7vw;*/ line-height:1; font-weight:900; color:#330000; }
.list-content .date .date-2{ font-size:20px; /*font-size:1vw;*/ line-height:1; }
.list-content .desc h3{ font-family:'bebasneue', san-serif; text-transform:uppercase; font-size:40px; /*font-size:2.1vw;*/ color:#330000; }
.list-content .desc .title { font-size: 20px; font-weight: 900; line-height: 1.3; text-transform: uppercase;}
.list-content .desc .venue{ font-size:18px; /*font-size:1vw;*/ line-height:1.3; }
.list-content .desc .hour{ font-size:18px; /*font-size:1vw;*/ font-weight:900; padding:8px 0; }
.list-content .share a{ font-family:'bebasneue', san-serif; text-transform:uppercase; font-size:18px; color:#330000; background:url(../images/icns/facebook.svg?nov2024) left center no-repeat; background-size:18px 18px; padding-left:24px; }
.list-content .share a:hover{ opacity:0.5; }



.playlist-youtube { text-align: center; margin-top: 140px; }
.playlist-youtube h2 { font-size: 70px; margin-bottom: 70px; text-align: left; }
.playlist-youtube .list { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 40px; }
.playlist-youtube .item { width: 31%; float: left; margin-bottom: 60px; }
.playlist-youtube .video{ margin-top:0; padding:0; max-width:none; box-shadow:none; border: 10px solid #edebdc; }
.playlist-youtube .video img{ width: 100%; }
.playlist-youtube .date { color: #898989; text-transform: uppercase; font-weight: 500; margin-top: 14px; margin-bottom: 7px; font-size: 14px; }
.playlist-youtube h3 { font-size: 18px; letter-spacing: .025em; font-family: 'Roboto', sans-serif; font-weight: 900; padding:0 4px;}
.playlist-youtube a.btn { float:left; }
.playlist-youtube a.btn-light{font-size:24px;font-family:'bebasneue', san-serif;letter-spacing:2px;text-align:center;padding:0 30px;line-height:60px;outline:none;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;display:inline-block;position:relative;color:#330000; margin: auto;}
.playlist-youtube a.btn-light:hover, .playlist-youtube a.btn-light:focus{text-decoration:none;color:#656565}
.playlist-youtube a.btn-light:before{position:absolute;top:0;left:0;width:55px;height:30px;border:2px solid #330000;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;border-right:0;border-bottom:0;box-sizing:border-box;content:""}
.playlist-youtube a.btn-light:after{position:absolute;bottom:0;right:0;width:55px;height:30px;border:2px solid #330000;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;border-left:0;border-top:0;box-sizing:border-box;content:""}
.playlist-youtube a.btn-light:hover:after, .playlist-youtube a.btn-light:hover:before{width:100%;height:100%;border-color: #656565}


/*GÉRANCE*/
.gerance { /*margin-top:200px;*/}
.gerance .wrap { align-items: flex-start; }
.gerance .left { width: 40%; float: left;}
.gerance .right { width: 60%; float: left;}
.gerance .title {font-family:'bebasneue', san-serif; font-weight:normal; line-height:1.3; text-transform:uppercase; font-size:38px; width:100%; margin-bottom:30px; position: relative; padding-left: 240px; line-height: 65px; }
.gerance .title:before { content: ''; position: absolute; width:200px; height: 65px; background: #330000; left: 0; top:0; bottom: 0; }
.gerance .title a:hover { color: #898989; }
.gerance .contact { display:flex; justify-content: center; flex-direction: column; line-height:1.4; width:50%; float: left; }
.gerance .contact h2 { color:#330000; margin-bottom: 12px;}
.gerance .partenaires img { width:auto; max-height: 45px; margin-right:36px;}

/*FOOTER*/
#main-footer{ margin-top:100px; }
#main-footer .top{ padding:30px 80px; text-align: center; }
#main-footer .bottom-title{font-family:'bebasneue', san-serif; font-weight:normal; line-height:1; text-transform:uppercase; color:#330000; font-size:40px; float:left;}
#main-footer .bottom-medias{ display: inline-block; }
#main-footer .bottom-medias .btn{ float:left; background-color:#330000; display: flex; align-items:center; width:auto;}
#main-footer .bottom-medias .btn svg {width: 30px; margin-right: 10px;}
#main-footer .bottom-medias .btn.patreon { margin-left:12px; margin-right:0;}
#main-footer .bottom-medias a.social-logo { display:block; float:left; height:68px; width:68px; margin-left:30px; background-position:center center; background-repeat: no-repeat; background-size:32px 32px; }
#main-footer .bottom-medias a.social-logo:first-child { margin-left: 0;}
#main-footer .bottom-medias a:hover{ opacity:0.5; }
#main-footer .bottom{ background:#330000; color:#fdfdf2; padding:30px 20px; text-align:center; }
#main-footer .bottom a:hover { opacity: 0.5;}



@media (max-width: 1400px) {
	.gerance .title { padding-left: 150px;}
	.gerance .title:before { width: 130px; }
}

@media (max-width: 1319px) {
	a.btn{ font-size:20px; }
	#main-content{ padding:0 30px; }
	.list-content .list{ padding:30px; }
	.list-content .show{ padding:20px 25px; }
	.list-content .desc{ padding:25px; }
	.list-content .date .date-1{ font-size:50px; }
	.list-content .date .date-2{ font-size:16px; }
	.action a.btn{ font-size:20px; }
}
@media (max-width: 1200px) {
	.gerance .left { width: 100%; }
	.gerance .right { width: 100%; margin-top: 30px; }
	.gerance .contact {padding-left: 150px;}

	#spectacles { margin-top: 90px; }
}
@media (max-width: 1039px) {
	#spectacles { margin-top: 0px; }
	#main-header { height: 800px; }
	
	#main-header .title{ top:auto;bottom:200px;}	
	#main-header .btn-light{ letter-spacing: 0; }

	#main-content:before { top: 900px; }
	.intro{ flex-direction:column-reverse;}
	.intro-1{ width:100%; padding:40px 20px 70px; }
	.intro-2{ width:100%; margin-bottom: 0;}
	.intro-2 .video { margin-left: auto; margin-right: auto; }
	.intro-1 .description{ margin:0; }
	.intro-1 .medias{ right:auto; left: 0; justify-content: center; position: relative; margin: auto; max-width: 496px; }
	.intro-1 .medias .yt{ float:none; }
	.intro-1 .medias .fb{ float:none; }
	.intro-1 .medias .btn { margin-top: 25px; max-width: 100%; }
	.list-top .wrap{ display:block;}
	.list-top .wrap>div{display:block; margin-top:20px;}
	.list-content .date{ width:25%; }
	.list-content .desc{ width:75%; padding-right:0; }
	.list-content .share{ width:100%; padding-top:14px; padding-right:0; }
	.list-content .action{ width:100%; padding-top:14px; }
	.list-content .share a{ display:block; /*background:#fdfdf2;*/ background-image:none; padding:16px; text-align:center;}
	.list-content .share a span{ background:url(../images/icns/facebook.svg?nov2024) left center no-repeat; background-size:18px 18px; padding-left:24px; }
	.playlist-youtube .item { width: 48%; } 
	.cfix { display: inline-block; margin-top: 25px; }
}
@media (max-width: 850px) {
	.gerance .title { padding-left: 140px;}
	.gerance .title:before { width: 100px;}
	.gerance .contact {padding-left: 0px;}
}
@media (max-width: 825px) {
	#main-header .socials .name { display: none; }
	#main-footer .bottom-medias{ float:none; text-align:center; }
	#main-footer .bottom-medias .btn{ float:none; width: 100%; margin-top: 12px;}
	#main-footer .bottom-medias a.social-logo { display:inline-block; float:none; margin-left: 7px; margin-right:7px;}
}
@media (max-width: 699px) {
	#main-header{ height: 600px; }
	#main-header .mail>span{ display:none; }	
	
	#main-header .title{ position:absolute; bottom: 120px; text-align:left; max-width:100%; left: 0; text-align: center; right: 0; }
	#main-header .title h1{ font-size:40px; line-height:1; color: #fdfdf2;  }
	#main-header .title h1 .sm{ font-size:30px; }
	
	#main-header .btn-light{ line-height:1; padding:20px 12px; display:none; }
	.quote:before{ background-size:30px 30px; height:30px; width:30px;top:0; left:0;}
	.quote:after{ background-size:30px 30px; height:30px; width:30px;bottom:0; right:0;}
	.video { padding:10px; }
	.list-top{ padding:60px 0; }
	.list-top .title h2, .playlist-youtube h2 { font-size:40px; line-height:1; }
	.list-content  .container, .playlist-youtube .container { padding:0; }
	.list-content .list{ padding:0; margin:0; }
	.list-content .show{ padding:20px;}
	.list-content .date{ width:100%; padding:20px 0; text-align:left; }
	.list-content .desc{ width:100%; border:none; padding:0; }
	.list-content .desc h3{ font-size:30px; line-height:1; padding-bottom:10px; }
	.list-content .desc .venue{ font-size:16px; }  
	.playlist-youtube .item { width: 100%; } 
    .gerance .contact { display:block; width:100%; margin-bottom: 32px;}
	#main-footer{ margin-top:100px; }
	#main-footer .top{ padding:30px; }
	#main-footer .bottom-title{line-height:1; font-size:30px; float:none; text-align:center; }	
}

@media (max-width: 600px) {
	.intro-1 .medias{ max-width: 100%; }
}

@media (max-width: 500px) {

	#main-header .socials ul { flex-direction: column; }
	#main-header .btn.market { padding: 17px; }
	#main-header .btn.market span { display: none; }
	#main-header .btn.market svg { margin: 0; }

	#main-header h1.pyrd img { width:auto; max-height:60px; margin-top:10px; margin-left: 10px;}

	.intro-1 .medias .social-logo { width:40px; height:40px; background-size: 24px 24px;}

	.gerance .partenaires img { display: block; margin:24px auto;}

	.gerance .title { padding-left: 80px;}
	.gerance .title:before { width: 50px;}
	.gerance .contact {padding-left: 80px;}

}
@media (max-width: 400px) {
	.video a:after { background-size: 90px; }
	.gerance{ margin-top:100px; }
	.gerance .title { padding-left: 32px;}
	.gerance .title:before { width: 13px;}
	.gerance .contact {padding-left: 32px;}
}

/*SHOP*/
.shop{ padding:100px 0; }
.shop .fcenter{ justify-content:center; align-items:center; }
.shop h2 { font-size: 70px; margin-bottom: 70px; text-align: left; }
.shop .outer-slider{ margin:0 -15px; position:relative; }
.shop .outer-slider .tns-slider{ display:flex; }
.shop .inner-slide{ padding:0 15px; height:100%; }
.shop .inner-slide .box{ display:block; }
.shop .inner-slide .img{ overflow:hidden; }
.shop .inner-slide img{ width:100%; transition:all .5s ease-in-out; }
.shop .inner-slide a:hover img{ transform:scale(1.1); }
.shop .inner-slide .desc h3{ padding:20px 0 0; font-size:20px; transition:all .5s ease-in-out; }
.shop .inner-slide a:hover .desc h3{ color:#330000; }
.shop .inner-slide .buy{ display:block; padding:20px; margin:20px 0 0; font-family: 'bebasneue', san-serif; text-align: center; font-size: 22px; background:#330000; color:#fdfdf2; transition:all .5s ease-in-out; }
.shop .inner-slide a:hover .buy{ background:#0c0000; }
.shop .nav-slider{ display:flex; justify-content:center; gap:10px; margin:40px 0 0;  user-select: none; }
.shop .nav-slider .control{ display:flex; width:70px; height:70px; margin:0 0 10px; background:#edebdc; color:#555; cursor:pointer; transition:all .5s ease-in-out; }
.shop .nav-slider .control:hover{ background:#e2e0cf; color:#555; }
.shop .nav-slider .control svg{ width:14px; }
.shop .nav-slider .prev{ transform:rotate(-180deg); }
.shop .nav-slider .next{  }
@media (max-width: 1279px) {
	
}
@media (max-width: 1019px) {

}
@media (max-width: 619px) {
	.shop{ padding:50px 0; }
	.shop .container{ padding:0; }
	.shop h2 { font-size: 40px; margin-bottom: 30px; }
	.shop .outer-slider{ margin:0 -10px; }
	.shop .inner-slide{ padding:0 10px; }
	.shop .inner-slide .desc h3{ padding:15px 0 0; font-size:17px; }
	.shop .inner-slide .buy{ padding:15px 10px; margin:10px 0 0; font-size: 18px; }
	.shop .nav-slider .control{ width:50px; height:50px; }
	.shop .nav-slider .control svg{ width:10px; }
}