@charset "UTF-8";
/* CSS Document */ :root {
  --background-color: #12191a;
  --background-color-lighter: #1b2122;
	--color-font-grey :  #606465;
  --main-color: #ffffff;
  --secondary-color: #475051;
  --accent-color: #b31f66;
  --border-color: #414647;
  --border: solid 1px var(--border-color);
  --border-hight: solid 1px var(--secondary-color);
  --margin: 1rem;
  --wp-cursor-color: var(--border-color);
  --wp-selection-point-color: var(--main-color);
  --wp-range-slider-label-color: var(--color-font-grey);
  --wp-range-slider-color: var(--accent-color);
  --wp-range-slider-focus-color: transparent;
  --wp-range-slider-background-color: var(--color-font-grey);
  --wp-range-slider-background-focus-color: var(--color-font-grey);
	--wp-mute-solo-color : var(--color-font-grey);
}
/*-----------*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul, ol, li {
  list-style-type: none;
}
/*-----------*/
a {
  color: var(--accent-color);
}
body {
  background: var(--background-color);
  color: var(--main-color);
  font-family: 'Quicksand', sans-serif;
}
main {
  display: flex;
  min-height: 100vh;
  justify-content: space-between;
  flex-direction: column;
}
/*----------*/
/* HOME */
/*----------*/
.home {
  display: flex;
  height: 100vh;
}
.home > div {
  width: 40%;
  background: black url("../images/illustration.jpg") no-repeat center/cover;
  mix-blend-mode: revert;
  opacity: .8;
}
.home nav {
  align-self: flex-start;
  padding: calc(var(--margin) * 2);
	padding-top:calc(var(--margin) * 6);
  flex-grow: 2;
	max-width: 40rem;
}

.home nav h2 {
  font-size: .7em;
  margin-bottom: calc(var(--margin) / 2);
  font-weight: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.home .col_2{display:flex; column-gap: 2rem; }
.home .col_2 > div{width:100%;}
.home nav h3 a {
  font-size: .9em;
  margin-bottom: 0;
  font-weight: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration:none;
  color: #666;
	
	background: black;
padding: .3em .5em;
border-radius: 3px;
	display:flex; 
	justify-content:space-between;
	
	
}.home nav h3 a:after{
	content:"+";
}
.home nav h3 a:hover{
	color: lightgrey;
}
.home nav ul + h3{margin-top:.5em;}

.home .boxed h3 + ul:not(:target) {
	max-height:0;
	transition:all .2s;
}
.home .boxed ul:target {
	max-height:100vh;
	transition:all 1s;
}



.home nav ul:not(.social) {
  border-top: none;
  counter-reset: num;
	overflow:hidden;
}
.home nav ul:not(.social) li {
  border-bottom: var(--border);
  display: flex;
  aling-items: center;
  padding: 0 .5em;
}
.home nav  ul:not(.social) li:hover {
  background: var(--accent-color);
}
.home nav  ul:not(.social) li:hover > *, .home nav  ul:not(.social) li:hover:before {
  color: white;
}
.home nav  ul:not(.social) li:before {
  counter-increment: num;
  content: counter(num);
  padding: var(--margin) 0;
  margin-right: var(--margin);
  color: var(--border-color);
}
.home nav  ul:not(.social) li a {
  text-decoration: none;
  flex-grow: 2;
  padding: var(--margin) 0;
  display: flex;
}
.home nav  ul:not(.social) li a:hover {}
.home nav  ul:not(.social) li a:after {
  content: ">";
  flex-grow: 2;
  text-align: right
}

.home .social{
	display:flex;
	column-gap: 1rem;
	font-size:3em;
	padding-top:1rem;
}
.home .social a span{
	display:none;
}
.home .social a {
	color:white;
	opacity:.5;
}
.home .social a:hover {
	opacity:1;
}

.home .logo{
	
	mix-blend-mode: color-burn;
	opacity:.6;
height: 100%;
width: 100%;
object-fit: cover;
display: none;
}
/*||||||||||||||||||| MP3 PLAYER HOME */
.mp3Player {
  position: sticky;
  position: -webkit-sticky;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  background: #0F0808;
  border-bottom: solid 1px #1F1010;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  overflow: hidden;
  max-height: 0;
}
.mp3Player p {
  color: var(--folder-color);
  padding: 1em;
  font-size: 0.8em;
}
.mp3Player audio {
  display: block;
  flex-grow: 2;
  opacity: 0;
}
.mp3Player.visible {
  max-height: 5em;
}
.mp3Player.visible audio {
  opacity: 1;
}



/*----------*/
/* PLAyER */
/*----------*/
#primary_header {
  text-align: left;
  box-shadow: 0 0 10px black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  z-index: 1000;
  background: var(--background-color);
}
#primary_header .titraille {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  align-self: stretch;
}
#primary_header nav {
  align-self: stretch;
  margin-right: calc(var(--margin) * 2)
}
#primary_header nav p {
  height: 100%;
}
#primary_header nav a {
  background: var(--background-color-lighter);
  height: 100%;
  display: flex;
  align-items: center;
  text-decoration: none;
  border-right: var(--border);
  padding: 1rem;
  font-size: 2rem
}
#primary_header nav a span {
  display: none;
}
#primary_header nav a:before {
  content: "<";
}
table {
  border-left: var(--border);
  border-collapse: collapse;
}
table th, table td {
  border-right: var(--border);
  border-top: var(--border);
  padding: var(--margin);
  text-align: center;
}
table th {
  border-top: none;
}


.page_options{display:flex; padding-right:var(--margin);}
.page_options a {
  display: block;
  color: var(--main-color);
  /*background-color: var(--accent-color);*/
  padding: calc(var(--margin) / 2);
	opacity:.3;
}
.page_options a:hover{opacity:1;}
.page_options a span {
  display: none;
}
.page_options a:before {
  content: "";
  display: block;
  height: 2.8rem;
  width: 2.8rem;
  border: solid 1px white;
  border-radius: 50%;
}

.dl_project a:before{  background: url("../images/icons/zip.svg") no-repeat center/80%;}
.listen_project a:before{  background: url("../images/icons/mix.svg") no-repeat center/80%;}
.bt_full a:before{  background: url("../images/icons/screen.svg") no-repeat center/60%;}
/*---------*/
#myplayer {
  align-self: center;
}
/*PROGRESS BAR*/
.the_time {
  font-family: monospace;
  font-weight: 100;
  margin: var(--margin) auto;
  text-align: right;
  letter-spacing: .2em;
  font-size: 3rem;
  color: var(--background-color-lighter);
  margin-bottom: var(--margin);
  margin-right: 0;
  text-overflow: "";
  overflow: hidden;
  white-space: nowrap;
  width: 11ch;
  
}
/*--------- CONTROLERS */
.controlers {
  display: flex;
  flex-direction: row;
  column-gap: 1rem;
  justify-content: flex-start;
  margin-bottom: var(--margin);
  padding-bottom: var(--margin);
  border-bottom: var(--border);
}
.controlers > div {
  display: flex;
  flex-direction: row;
  column-gap: 1rem;
}
.controlers > div:nth-child(2) {
  flex-grow: 2;
  margin-left: 2rem;
  border-left: var(--border);
  padding-left: 2rem
}
.controlers button {
  padding: .5rem;
  background: var(--background-color-lighter);
  border: none;
  /*border: var(--border);*/
  border-radius: 5px;
  color: var(--accent-color);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 10rem;
  font-size: .9em;
  letter-spacing: 0.05em;
}
.controlers button.hide {
  display: none;
}
.musicals_infos {
  align-self: center;
  flex-grow: 2;
  text-align: right;
  font-size: .9em;
  color: var(--secondary-color);
}
/*TRACKS CONTAINER*/
/**/
figure {
  width: 80%;
  margin: 2rem auto;
  padding-top: 4rem;
}
#global_player {
  display: flex;
}
#global_player #playlist {
  flex-grow: 2;
  border: var(--border);
  background: var(--background-color-lighter) url("../images/spiner.gif") no-repeat center/2rem;
  background-blend-mode: luminosity;
  border-radius: 5px;
}
#global_player .playlist {
  margin-bottom: 0;
}
#global_vol {
  display: flex;
  flex-direction: column;
  border: var(--border);
  background: var(--background-color-lighter);
  border-radius: 5px;
  align-self: flex-start;
  overflow: hidden;
  margin-left: 1rem;
}
#global_vol label {
  background: var(--background-color);
  padding: .5rem;
  color: var(--color-font-grey);
}
#infos {
  margin-bottom: 1rem;
  display: flex;
  column-gap: 1rem;
  justify-content: flex-start;
}
#infos .infos {
  border: none;
  background-color: var(--background-color-lighter);
  text-align: center;
  padding: .3rem .5rem;
  border-radius: 5px;
  font-size: .9rem;
  color: #5d6162;
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 9rem;
}
.small_font {
  font-size: .7em;
  margin-left: .25em;
}
#infos .infos:first-child {
  min-width: 0;
  background: var(--accent-color);
  color: white;
}
#infos .infos[class*="accord"], #infos .infos[class*="score"] a {
  display: flex;
  color: white;
  text-decoration: none;
  align-items: center;
  justify-content: space-between;
	cursor:pointer;
}
#infos .infos a {
  height: 100%;
	width:100%;
	padding:.3rem .5rem;
}
#infos .infos[class*="accord"]:before, #infos .infos[class*="score"] a:before {
  content: "";
  height: 2em;
  width: 2em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: content;
}
#infos .infos[class*="accord"] {
  background-color: #a18e37;
}
#infos .infos.accordGuit {
  background-color: #f27b35;
}
#infos .infos[class*="score"] {
  background-color: #1f60a1;
  padding: 0;
}
#infos .infos[class*="accord"]:before {
  background-image: url(../images/icons/tuning.svg);
}
#infos .infos[class*="score"] a:before {
  background-image: url(../images/icons/score.svg);
}

form label{ text-transform:uppercase; letter-spacing:.05em;}
form label em{display:block; color:var(--color-font-grey); text-transform:none;}
form input[type='number'], form input[type='text']{
	background:var(--color-font-grey);
	border:var(--border);
	padding:.3rem;
	border-radius:3px;
	color:var(--main-color);
	
}
form input + button{margin-left:.5rem; border-radius:3px; background:var(--accent-color); border:none;}
form input + button span {display:none;}
form input + button:before {content:""; display:block; height:1.7rem; width:1.7rem;  background-size:60%; background-repeat:no-repeat; background-position:center; }
#infos .start_reading_point label{margin-right:1rem; }
#infos .start_reading_point {
	background:var(--background-color-lighter);
	padding:.5rem;
	border-radius: 5px;
	display:flex;
	align-items: center;
	border:var(--border);
}
#infos .start_reading_point input{width:10ch;}
#infos .start_reading_point button:before{background-image: url("../images/icons/seek.svg");}
/*--------------------------------------------*/
.channel-wrapper .controls {
  padding-left: 3rem;
  background: var(--background-color);
  border: none;
  border-radius: 0;
}
.playlist .controls .track-header {
  background: black;
  margin-bottom: 0rem;
}
.playlist .controls .track-header + .btn-group {
  display: flex;
  margin-bottom: .7rem;
}

.playlist .controls .track-header + .btn-group button:hover{background:var(--background-color-lighter);}
.playlist .controls .track-header + .btn-group button:before{content:""; display:block; height: .8em; width:.8em; border:var(--border); border-radius:50%;}
.playlist .controls .track-header + .btn-group button.btn-mute.active:before{background:#f27b35; border-color:#f27b35;}
.playlist .controls .track-header + .btn-group button.btn-solo.active:before{background:#1f60a1;  border-color:#1f60a1;}
.playlist .controls .track-header + .btn-group button {
  flex-grow: 2;
  line-height: normal;
  border-left: none;
	display:flex;
	justify-content: space-between;
	align-items: center;
	border-color:var(--background-color-lighter);
}
.playlist .controls .track-header {
  text-transform: uppercase;
}
.playlist .btn-xs {
  border-radius: 0;
}
.playlist .btn-info {
  background: transparent;
  color: var(--accent-color);
  border-color: transparent;
  border-radius: 50%;
}
.stereopan:before, .stereopan:after {
  font-family: 'Quicksand', sans-serif;
}
.playlist .cursor {
  background: var(--border-color);
}
.channel-wrapper .controls:before {
  content: "";
  display: block;
  height: 100%;
  width: 3rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
}
.playlist .controls input[type="range"] {
  background-color: transparent;
}
.playlist .channel-progress {
  background: gray;
  mix-blend-mode: difference;
  opacity: 0.5;
}
.playlist .playlist-tracks {
  background: var(--secondary-color);
}
.channel-wrapper {
  border-bottom: var(--border);
  margin-bottom: 1px !important;
}
.channel-wrapper[class*="metronom"] .controls:before {
  background: var(--accent-color) url(../images/icons/metronom.svg) no-repeat center/contain;
}
.channel-wrapper[class*="metronom"] .channel {
  background: var(--accent-color);
}
.channel-wrapper[class*="basse"] .controls:before {
  background: #A18E37 url(../images/icons/basse.svg) no-repeat center/contain;
}
.channel-wrapper[class*="basse"] .channel {
  background: #A18E37;
}
.channel-wrapper[class*="drum"] .controls:before {
  background: #1F60A1 url(../images/icons/drum.svg) no-repeat center/contain;
}
.channel-wrapper[class*="drum"] .channel {
  background: #1F60A1;
}
.channel-wrapper[class*="guit"] .controls:before {
  background: #F27B35 url(../images/icons/guitare.svg) no-repeat center/contain;
}
.channel-wrapper[class*="guit"] .channel {
  background: #F27B35;
}
.channel-wrapper[class*="synth"] .controls:before {
  background: #16A19D url(../images/icons/key.svg) no-repeat center/contain;
}
.channel-wrapper[class*="synth"] .channel {
  background: #16A19D;
}
.channel-wrapper[class*="effect"] .controls:before {
  background: #105452 url(../images/icons/sound.svg) no-repeat center/contain;
}
.channel-wrapper[class*="effect"] .channel {
  background: #105452;
}

.playlist .channel-wrapper.silent .channel{mix-blend-mode: luminosity;}
/*---------- TRACK ACTION ELEMENTS*/
.track .hide {
  display: none;
}
.track button, .download_track a {
  background: transparent;
  border: solid 1px white;
  font-size: 0;
  text-indent: -9000px;
  height: calc(var(--margin) * 2);
  width: calc(var(--margin) * 2);
  margin: var(--margin);
  margin-top: 0;
  border-radius: 50%;
  display: block;
  cursor: pointer;
  opacity: .3
}
.track button:hover, .download_track a:hover {
  opacity: .6
}
.download_track {
  border-top: var(--border);
  padding-top: var(--margin);
  background: var(--background-color);
}
.download_track a {
  background: transparent url("../images/icons/download.svg") no-repeat center/60%;
}
.track button.mute {
  background: transparent url("../images/icons/unmute.svg") no-repeat center/60%;
}
.track button.unmute {
  background: transparent url("../images/icons/mute.svg") no-repeat center/60%;
}
.track button.solo {
  background: transparent url("../images/icons/solo.svg") no-repeat center/60%;
}
/*--------- CURSOR VOLUME INPUT RANGE*/
/*==============================*/
/* partie commune               */
/*==============================*/
input[type=range]#master-gain {
  width: 5px;
  height: 25vh;
  color: #FFF;
  background: black;
  border: var(--border-hight);
  -webkit-appearance: slider-vertical;
  margin: var(--margin) auto;
  transform: rotate(-0deg);
}
/*==============================*/
/* le curseur                   */
/*==============================*/
input[type=range]#master-gain::-webkit-slider-thumb, input[type=range]::-moz-range-thumb, input[type=range]::-ms-thumb {
  width: 2rem;
  height: .5rem;
  padding: 0.25em; /* largeur du bord */
  color: red;
  background: var(--background-color-lighter);
  border: var(--border-hight);
  border-radius: 2px;
  /* le bord */
}
input[type=range]#master-gain::-moz-range-thumb {
  width: 2rem;
  height: .5rem;
  padding: 0.25em; /* largeur du bord */
  color: red;
  background: var(--background-color-lighter);
  border: var(--border-hight);
  border-radius: 2px;
}
input[type=range]#master-gain::-ms-thumb {
  width: 2rem;
  height: .5rem;
  padding: 0.25em; /* largeur du bord */
  background: var(--background-color-lighter);
  border: var(--border-hight); /* le bord */
  border-radius: 2px;
}
/*POPUP*/
#wrapper {
  background: var(--background-color);
  opacity: 0;
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 2000;
  top: 100vh;
  ;
  left: 0;
  transition: opacity .4s;
}
#pop_content {
  background: var(--main-color);
  position: fixed;
  left: 50%;
  top: 150vh;
  padding: calc(var(--margin) * 3) calc(var(--margin) * 2);
  border: var(--border);
  font-size: 3em;
  color: var(--background-color);
  text-align: center;
  transform: translate(-50%, -50%);
  z-index: 2001;
  border-radius: 5px;
  box-shadow: 0 0 20px black;
  transition: all .4s;
}
.pop #wrapper {
  top: 0;
  opacity: .8;
  transition: opacity .4s;
}
.pop #pop_content {
  top: 50%;
  transition: all .4s;
}
#loading {
  background: black;
  position: fixed;
  height: 100vh;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 3000;
}
#loading p {
  margin: var(--margin);
}
#loading.ready {
  display: none;
}
/*------------- FOOTER*/
#primary_footer {
  font-size: .8em;
  color: var(--secondary-color);
  padding: var(--margin);
  text-align: center;
}


/*------------------------------------------- RESPONSIVE */
@media (max-width: 1650px) {
  .controlers button {
    min-width: 7rem;
  }
}
@media (max-width: 1250px) {
  figure {
    width: 90%;
    margin: 2rem auto;
  }
  .controlers button {
    min-width: 0;
  }
  .controlers button span {
    display: none;
  }
	.controlers > div:nth-child(2) {
    margin-left: 1rem;
    padding-left: 1rem;
  }
}
@media (max-width: 1100px) {
	
  .home nav {
    /*font-size: 1.3em;*/
	  	font-size: 1em;
	  width: 100%;

  }
  .home > div {
    width: 40%;
  }
  .controlers button {
    font-size: 1.5em;
  }
	#primary_header{position:static;}
	figure{padding-top:0;}
  #global_vol {
    display: none;
  }
	.the_time {
    color: var(--color-font-grey);
    text-align: center;
  }
	#infos .infos{flex-grow:2;}
	
	.bt_full{display:none;}
	.home .col_2{display:block; }
	.home .col_2 div + div{margin-top:2rem;}
}
@media (max-width: 600px) {
	
  .home {
    flex-direction: column;
	  
  }
  .home > div {
    width: 100%;
    min-height: 100vw;
  }
  .controlers {
    flex-direction: column;
    row-gap: 1rem;
  }
  .controlers > div:nth-child(2) {
    margin-left: 0;
    padding-left: 0;
    border: none;
  }
	
	.controlers > div:nth-child(3) {display:none;}
  .controlers button {
    flex-grow: 2;
    justify-content: center;
  }
  #infos {
    display: none;
  }
  .channel-wrapper .controls {
    width: 100% !important;
  }
  .playlist .playlist-time-scale {
    display: none !important;
  }
  #global_player .playlist {
    margin-bottom: 0;
    margin-top: 0;
    min-height: 25vh;
  }
	
	.home nav {
  
  	padding: calc(var(--margin));
		padding-bottom: 10rem;
  
	}
	.home nav h3 a {
		font-size: .7em;}
	.mp3Player{
		flex-direction: column-reverse;
		position:fixed;
			
		
	}
	.mp3Player audio{
		width:100%;
	}
	.home nav{
		padding-top: calc(var(--margin) * 2);
	}
  
}

/*-------------------------------------------------- MOBIL DEVICE */



.mobile .all_tracks .track{display:flex; align-items:center; background:var(--background-color-lighter); border:var(--border); border-radius:5px; padding-right:.3rem; margin-bottom:.5rem;}
.mobile .all_tracks .track .volumeSlider{flex-grow:2; margin-left:1rem;}
.mobile .all_tracks .track button{margin:.3rem 0 .3rem 1rem;}
.mobile .all_tracks .track button + button{margin-left:.3rem;}

#time-line {
  width: 100%;
  height: 10px;
  background: var(--background-color-lighter);
  margin-bottom: var(--margin);
  border-radius: 10px;
  cursor: pointer;
  border: solid 3px var(--background-color);
}
#time-line .progress_bar {
  height: 4px;
  width: 0%;
  background: var(--accent-color);
  position: relative;
  border-radius: 2px 0 0 2px;
  transition: width .5s linear;
}
#time-line .progress_bar .cursor {
  height: 10px;
  width: 2px;
  background: var(--accent-color);
  position: absolute;
  right: 0;
  top: -3px;
}
#time-line .progress_bar .cursor .time_current{ position:absolute; color:var(--accent-color); top:-1.5em; left:50%;transform:translateX(-50%); font-size:.9em; }


.all_tracks .track:before {
  content: "";
  display: block;
  height: 3rem;
  width: 3rem;
 
}

.all_tracks .track[class*="metronom"]:before {
  background: var(--accent-color) url(../images/icons/metronom.svg) no-repeat center/contain;
}

.all_tracks .track[class*="basse"]:before {
  background: #A18E37 url(../images/icons/basse.svg) no-repeat center/contain;
}

.all_tracks .track[class*="drum"]:before {
  background: #1F60A1 url(../images/icons/drum.svg) no-repeat center/contain;
}

.all_tracks .track[class*="guit"]:before {
  background: #F27B35 url(../images/icons/guitare.svg) no-repeat center/contain;
}

.all_tracks .track[class*="synth"]:before {
  background: #16A19D url(../images/icons/key.svg) no-repeat center/contain;
}

.all_tracks .track[class*="effect"]:before {
  background: #105452 url(../images/icons/sound.svg) no-repeat center/contain;
}

.mobile #primary_header h1{font-size:1.2rem; margin-right:1rem;}