@charset "utf-8";

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geo:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap');
/* CSS Main */

html{
  height: 100%;
  margin: 0;
   background-color: #10100d;
}

body {
  width:100%;
  height: auto;
  margin: 0;
background-color:#10100d;
  background-attachment: fixed;
  background-image: url("/css/img/zoha-gohar-I7WwxdS5iMo-unsplash.jpg");
    background-position: center;
    background-size: cover;
    opacity: 0;
      transition: opacity 0.1s ease-in;
}

body.loaded {
  opacity: 1;
}

h1 {
  font-family: "Geo", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px!important;
    color: #757575!important;
  letter-spacing: 2px;
  padding: 5px;
  border-radius: 8px;
  width: fit-content;
text-shadow: 2px -1px 4px rgb(0, 0, 0);
}


h2 {
  font-family: "Playfair", serif;
font-optical-sizing: auto;
font-variation-settings:
    "wdth" 87.5;
font-size: 26px!important;
font-style: normal;
}

/* Style pour mobile (écrans plus petits que 768px) */
@media screen and (max-width: 767px) {
  body {
    min-height: 1000px!important;
  }
  #global_card {
    width: 100%!important;
    height: 100% !important;
  }
  #board {
    height: auto!important;
    margin-bottom: 40px!important
  }
  .cover_album {
  width: 40%!important;
   opacity: 0;
  }
  .txt_cover_album {
  line-height: 2vh!important;
  }
  .name_album {
font-size: 23px !important;
}
#playlist_scroll {
height: 400px!important;
}
#catalogue {
height: 400px!important;
}
#bio {
height: 355px!important;
 opacity: 0;
}
#txt_legacy {
    height: 700px!important;
  }
  #info_cover_album {
background-size: 80%!important;

  }
  #pop_global_download {
    margin-top: 20px !important;
        margin-bottom: 50px !important;
  }
  #order_global {
    height: 500px!important;

  }
}
/* Style pour grand ecran (écrans plus grand que 900px) */
@media screen and (min-width: 767px) {

  #board {
    width: 900px!important;
    max-width: 900px!important;
    height: 500px!important;
  }
  #bio {
  height: 380px!important;
   opacity: 0;
}
#catalogue {
height: 380px!important;
}
#playlist_scroll {
  height: 318px!important;
}
#txt_legacy {
  height: 424px!important;
}
.name_album {
  font-size: 20px!important;
}
.name_author {
  font-size: 17px!important;
}
#global_order {
      height: 500px!important;
      margin-bottom: 10px;
}

}


#global_card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/*Effet Box*/
@keyframes pulseShadow {
	0% {
		box-shadow: 0px 10px 13px -7px #000000,
								0px 0px 18px 0px rgb(255, 255, 255);
	}
	100% {
		box-shadow: 0px 10px 13px -7px #000000,
								0px 0px 28px 5px rgb(255, 255, 255);
	}
}



#intro_load {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#intro_logo {
    width: 279px;
      aspect-ratio: 1 / 1;
      background-color: #10100d;
      border-radius: 50%;
      padding: 42px;
}

.nicescroll-cursors {
    box-shadow: 0px 0px 7px 2px #000, 0px 0px 30px 0px rgba(0,0,0,0.5) !important;
}
#board {
  width: 800px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto;
  background: linear-gradient(43deg,rgba(0, 0, 0, 1) 0%, rgba(46, 46, 46, 1) 100%);
  margin: 20px;
  border-radius: 8px;
  border: 2px #171717 solid;
  box-shadow: 0px 10px 13px -7px #000, 0px 0px 30px 0px rgb(255, 255, 255);
  /* Animation */
   animation: pulseShadow 2s ease-in-out infinite alternate;
}

#board_top {
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(33, 33, 33, 1) 100%);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom: 1px #3c3c3c solid;
  margin-bottom: 10px;
  overflow: hidden;
}
.txt_board_top {
  font-family: "Geo", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 25px;
    color: #626262;
    line-height: 40px;
    padding-left: 5px;
}

/*PROFIL /////////////////////////////////////////////////////////////////////*/
#bio {
  height: 280px;
  overflow-y: scroll;
  float: left;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-right: 15px;
  padding-left: 10px;
  padding-top: 15px;
  /*text-align: justify;*/
  font-family: "Geo", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #757575;
  border-radius: 8px;

 line-height: 18px;
  opacity: 0;
background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(64, 64, 64, 0) 100%);
border: 1px #171717 solid;
}

#image_profil {
  border-radius: 50%;
  width: 150px;        /* même largeur et hauteur pour cercle parfait */
  height: 150px;
  background: #000;
  margin: 0 auto;
}

/* QUIL STYLE */
.ql-align-center {
  text-align: center;
}
.ql-align-right {
  text-align: right;
}
.ql-align-justify {
  text-align: justify;
}
.ql-align-left {
  text-align: left;
}

/*LISTE ALBUM //////////////////////////////////////////////////////////////////*/
.cover_album {
  background:
        url("img/default_album.png") no-repeat center center, /* image au-dessus */
        linear-gradient(20deg,rgba(64, 64, 64, 1) 0%, rgba(45, 45, 45, 1) 71%); /* gradient en dessous */
    background-size: 35%, cover; /* taille de l'image puis du gradient */

  position: relative;
  width: 28%;
  aspect-ratio: 1 / 1;

  border-radius: 8px;
  margin: 10px;
  display: inline-block;
  overflow: hidden;
  border: 1px #373737 solid;
   opacity: 0;
   box-shadow: 0px 10px 13px -7px #000, 0px 0px 30px 0px rgb(0, 0, 0);
}
.txt_cover_album {
  width: 100%;
  float: left;
  position: absolute;
  bottom: 0;          /* collé en bas */
  left: 0;
  background: rgba(0, 0, 0, 0.4); /* noir avec 60% d’opacité */
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 1px;
  padding-right: 1px;
  font-family: "Geo", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(12px, 2vw, 14px);
  color: #b3b3b3;
  line-height: 2vh;
}

#catalogue {
  height: 280px;
  overflow-y: scroll;
  float: left;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-right: 15px;
  padding-left: 10px;
  padding-top: 15px;
  border-radius: 8px;

  text-align: center;

}

/* MENU ////////////////////////////////////////////////////////////////////////////////*/
#menu {
  width: 200px;
  background: linear-gradient(0deg,rgba(66, 66, 66, 1) 0%, rgba(98, 98, 98, 1) 100%);
  float: left;
  position: absolute;
  display: none;
  z-index: 20;
  margin-top: -11px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border: 1px #2b2b2b solid;
  -webkit-box-shadow: 0px 10px 20px 5px #000000;
box-shadow: 0px 10px 20px 5px #000000;
}

#menu li, #menu li a {
    list-style: none;
    padding: 3px;
    cursor: pointer;
    font-family: "Geo", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    float: left;
    color: #1e1e1e;
    text-decoration: none;
    width: 100%;
     display: flex;
     line-height: 16px;
}

#menu li a:hover {
  color: #FFF;
}

#menu li:last-child a {
  font-size: 13px;
    display: flex;
    justify-content: center;
    gap: 3px;
    background-color: #353535;
    border-radius: 8px;
    margin: 4px;
    line-height: 13px;
    color: #171717;
    border: 1px #222 solid;
}
#menu li:last-child a:hover {
  color: #FFF;
}

#menu ul {
    float: left;
    margin-left: -29px;
    margin-top: 4px;
    margin-bottom: 5px!important;
}
#btn_menu {
  cursor: pointer;
}
#btn_menu:hover {
color: #878787;
}

/*PAGE ALBUM /////////////////////////////////////////////////////////////////*/
#info_cover_album {
width: 100%;
aspect-ratio: 1 / 1;

margin: 0 auto;
border-radius: 8px;


}
#global_title_album {
  float: left;
  width: 100%;
  margin-bottom: 10px;

}
.name_album {
  font-family: "Playfair", serif;
font-optical-sizing: auto;
font-variation-settings:
    "wdth" 87.5;
font-size: 16px;
font-style: normal;
text-align: left;
    padding: 5px;
  color: #757575;
    float: left;
    width: 100%;
    margin-top: 10px;
}
.name_author {
  font-family: "Playfair", serif;
font-optical-sizing: auto;
font-variation-settings:
    "wdth" 87.5;
font-size: 14px;
font-style: normal;
text-align: left;
    padding: 5px;
  color: #4a4a4a;
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.date_album, .date_album a {
  font-family: "Geo", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    padding: 5px;
    background-color: #282828;
    border-radius: 8px;
    color: #5e5e5e;
    float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  text-decoration: none;
}

#btn_back_list {
  font-family: "Geo", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #868686;
  padding: 3px;
  float: right;
  margin-top: -35px;
  text-shadow: 2px -1px 4px rgb(0, 0, 0);
}
#btn_back_list:hover {
  color: #FFF;
}
/*PLAYLIST/////////////////////////////////////////////////////////////////*/
.playlist {
   opacity: 0;
}
#playlist_scroll {
height: 220px;
  overflow-y: scroll;
  float: left;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 16px;
  padding-right: 15px;
  padding-left: 10px;
  border-radius: 8px;

  margin-bottom: 15px;
}
.playlist--list {
	list-style: none;
	margin: 0 0 0 0;
	padding: 0;
  font-family: "Geo", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
	line-height: .95;
  text-align: left;
color: #555;
box-shadow: 0px 10px 13px -7px #000, 0px 0px 14px 0px rgb(0, 0, 0);
 border-radius: 8px;
}
	.playlist--list li {
		margin: 0;
		padding: 0;
		cursor: pointer;
		padding: 15px 10px;
		background: #202020;
border-bottom: 1px #2b2b2b solid;

		box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
		&:first-child {
      border-top-left-radius: 8px;
 border-top-right-radius: 8px;
		}
		&:hover {
			background-color: #2b2b2b;
			color: #b0b0b0;
		}
		&.active {
			background: linear-gradient(90deg,rgb(0, 0, 0) 0%, rgb(26, 26, 26) 100%);
			color: #48cc3c;
		}
    	&:last-child {
        border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom: none;
      }
	}
}

.player-container {
  max-width: 100%;
      margin: auto;

    }
		:root {
		      --plyr-color-main: #48cc3c; /* Couleur principale */
		      --plyr-audio-controls-background:  linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(33, 33, 33, 1) 100%); /* Fond du lecteur */
		      --plyr-audio-control-color: #48cc3c; /* Couleur des icônes */
					--plyr-audio-control-color-hover:#48cc3c;
					--plyr-audio-control-background-hover:none;
          --plyr-tooltip-background:#48cc3c;
          --plyr-tooltip-color:#000;
          --plyr-font-family: "Geo", sans-serif;
          --plyr-font-size-small: 16px; /* bulles / tooltips */
           --plyr-range-thumb-background:#c4c4c4;
           --plyr-progress-fill-filled-background:linear-gradient(90deg,rgba(47, 117, 45, 1) 0%, rgba(72, 204, 60, 1) 100%)!important;

		    }
				::after, ::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.plyr--audio .plyr__controls {
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
border-radius: 8px!important;
	margin-bottom: 10px;
  margin-top: 10px;
  border: 1px #313131 solid;
  box-shadow: 0px 10px 13px -7px #000, 0px 0px 14px 0px rgb(0, 0, 0);
}

.plyr__controls .plyr__controls__item.plyr__time {
  cursor: pointer;
}
.duration {
  padding: 2px;
    background: #2b2b2b;
    border-radius: 4px;
    margin-left: 5px;

}
.duration_selected {

    background: none;


}
/*CONTACT/////////////////////////////////////////////////////////////////*/
#txt_contact {

    float: left;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 15px;
    padding-left: 10px;
    padding-top: 10px;
    text-align: justify;
    font-family: "Geo", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #757575;
    border-radius: 8px;
    border: 1px #2b2b2b solid;
    line-height: 18px;
    padding-bottom: 10px;
    opacity: 0;
}
#txt_contact_formulaire {

    float: left;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 15px;
    padding-left: 10px;
    padding-top: 10px;
    text-align: justify;
    font-family: "Geo", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #757575;

    line-height: 18px;
    padding-bottom: 10px;
}

.input_name, .textarea {
background-color: #000;
	width: 100%;
border-radius: 6px;
padding: 8px;
	border: 1px #2b2b2b solid;
	float: left;
	margin-bottom: 10px;
  font-size: 14px;
  	font-family: 'Archivo Narrow', sans-serif !important;
  color: #a8a8a8;

  padding:5px;

  		float: left;
}
/* Supprime le contour bleu du focus */
.input_name:focus , .textarea:focus  {
  outline: none;
  box-shadow: none;
  border: none;
  background-color: #151515; /* léger changement pour montrer le focus */
  color:#FFF;
  	border: 1px #FFF solid;
}

/* Optionnel : survol léger */
.input_name:hover, .textarea:hover  {
  background-color: #151515;
}

#btn_send_mail {
  font-size: 14px;
  font-family: 'Archivo Narrow', sans-serif !important;
  color: #BDBDBD;
  float: right;
  padding: 8px;
  background: linear-gradient(200deg,rgb(89, 89, 89) 1%, rgb(30, 30, 30) 100%);
  border: 3px #4d4d4d groove;
  border-radius: 11px;
  cursor: pointer;
  margin-bottom: 10px;
}
#error-send-mail, #error-email {
	position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);

	  font-size: 14px;
	  font-family: 'Archivo Narrow', sans-serif !important;
	  color: #FFF;
	  background-color: #ff3520;
	  padding: 5px 10px;
	  border-radius: 8px;
	  text-align: center;
		z-index: 100;
		  display: none;
}
#ok-send-mail {
	position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);

	  font-size: 14px;
	  font-family: 'Archivo Narrow', sans-serif !important;
	  color: #FFF;
	  background-color: #20b900;
	  padding: 5px 10px;
	  border-radius: 8px;
	  text-align: center;
		z-index: 100;
		  display: none;
}
#txt_legacy {
  height: 315px;
  overflow-y: scroll;
  float: left;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-right: 15px;
  padding-left: 10px;
  padding-top: 15px;
  font-size: 14px;
    font-family: 'Archivo Narrow', sans-serif !important;
  color: #a8a8a8;
  opacity: 0;
}
/*DOWNLOAD/////////////////////////////////////////////////////////////////*/
/* Bouton download */
.btn_down {
  position: relative;
  width: 150px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid #4CB72E;
    background-color: #2f8e22;
  overflow: hidden;
  margin: 0 auto;
  font-size: 14px;
  	font-family: 'Archivo Narrow', sans-serif !important;
color: #caffc3;
  border-radius: 5px;
  margin-bottom: 20px!important;
  padding: 0;
  box-shadow: 0 0px 6px rgb(64, 219, 43);
}

.btn_down, .btn_down__icon, .btn_down__text {
  transition: all 0.3s;
}

.btn_down .btn_down__text {
  transform: translateX(22px);
color: #caffc3;
  font-weight: 600;
}

.btn_down .btn_down__icon {
  position: absolute;
  transform: translateX(109px);
  height: 100%;
  width: 39px;
background-color: #4CB72E;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn_down .svg {
  width: 20px;
  fill: #caffc3;
}

.btn_down:hover {
background: #4CB72E;
}

.btn_down:hover .btn_down__text {
  color: transparent;
}

.btn_down:hover .btn_down__icon {
  width: 148px;
  transform: translateX(0);
}

.btn_down:active .btn_down__icon {
background-color: #111;
}

.btn_down:active {
  border: 1px solid #2b2b2b;
}

#global_download {
display: none;
   height: 100%;
}

#close_pop_download {
  width: 29px;
    height: 24px;
    float: right;
    font-size: 24px;
    line-height: 0;
color: #c83636;
    margin: 10px;
    cursor: pointer;
}
#close_pop_download:hover {
  color: #ea0505;
}

#pop_global_download {
  display: flex;
    justify-content: center;
    align-items: center;
height: 84%;
}
#pop_download {
  width: 90%;
background: linear-gradient(0deg,rgb(0, 0, 0) 0%, rgb(38, 38, 38) 71%);
padding-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0px 10px 13px -7px #000, 0px 0px 30px 0px rgb(0, 0, 0);
  border: 1px #393939 solid;
}
#pop_topbar {
  width: 100%;
  height: 41px;
  background: linear-gradient(0deg,rgb(0, 0, 0) 0%, rgb(33, 33, 33) 100%);
  float: left;
  border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom: 1px #393939 solid;

}
.top_pop_title {
  font-size: 13px;
    font-family: 'Archivo Narrow', sans-serif !important;
    color: #757575;
    padding: 5px;

    margin-left: 10px;
    margin-top: 5px;
    float: left;
  }
  .txt_pop_attente_validation {
    font-size: 14px;
      font-family: 'Archivo Narrow', sans-serif !important;
      color: #0AC416;

  }
.txt_pop {
  font-size: 13px;
    font-family: 'Archivo Narrow', sans-serif !important;
    color: #D5AD62;

}
.icon-flac {
  color: #eea500;
width: 35px;
}

#price_zone {
  width: 100%;
    height: 40px;
    float: left;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
#euros_price {
  width: 35px;
    height: 35px;
    float: right;
    position: absolute;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    background: linear-gradient(-22deg,rgb(0, 142, 76) 0%, rgb(144, 176, 27) 100%);
    font-size: 18px;
    font-family: 'Archivo Narrow', sans-serif !important;
    color: #cce8b9;
    text-align: center;
    font-weight: 800;
    line-height: 33px;
    border: 1px #25bb5b solid;
    text-shadow: 0px 1px 2px #033e19;
    box-shadow: 0px 0px 10px 0px #062200, 0px 0px 20px 0px rgb(0, 0, 0);

}

#txt_paypal_info_secure {
  display: flex;
    width: 100%;
    justify-content: center;
    font-size: 12px;
    font-family: 'Archivo Narrow', sans-serif !important;
    color: #737373;
    line-height: 10px;
    margin-bottom: 6px;
    margin-top: 6px;
}

#input_mail {
display: flex;
width: 190px;

justify-content: center;
}
#btn_sold {
  display: flex;
  justify-content: center;
width: 90px;

}
#input_email_paypal {
  width: 100%;
    height: 40px;
    background-color: #FFF;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border: none;
    padding: 5px;
    font-size: 16px;
    font-family: 'Archivo Narrow', sans-serif !important;
    color: #000;
    font-weight: 600;
border: 1px #ddd solid;
box-shadow: inset 0px 0px 18px 3px rgba(0,0,0,0.63);
border-right: none;
}
#input_email_paypal:focus {
  outline: none;
}
#btn_paypal_pay {
  width: 100%;
    height: 40px;
    background: linear-gradient(22deg,rgba(0, 48, 135, 1) 0%, rgba(47, 125, 125, 1) 71%);
    border: 1px #489595 solid;
    font-size: 20px;
    font-family: 'Archivo Narrow', sans-serif !important;
    color: #7ecebf;
    font-weight: 600;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    line-height: 36px;
    padding-left: 10px;
    border-left: none;
text-shadow: 0px 0px 6px #05282d;
cursor: pointer;
}
#btn_paypal_pay:hover{
  text-shadow: 0px 0px 6px #1ba2b5;
}

#mail_absent, #mail_incorrect {
	position: absolute;
  margin-top: 7px;
	  font-size: 14px;
	  font-family: 'Archivo Narrow', sans-serif !important;
	  color: #FFF;
	  background-color: #ff3520;
	  padding: 5px 10px;
	  border-radius: 8px;
	  text-align: center;
		z-index: 100;
		  display: none;
      margin-left: -87px;
}
/*order/////////////////////////////////////////////////////////////////*/
#order_global {
  width: 100%;
  display: flex;          /* nécessaire pour centrer l'enfant */
  justify-content: center;
  align-items: center;
  height: 435px;
}

#order_content {
  width: 70%;            /* largeur de l'enfant */
  text-align: center;
}

.txt_link_download {
  font-size: 18px;
    font-family: 'Archivo Narrow', sans-serif !important;
    color: #0AC416;
    background: #000;
    width: 150px;
    margin: 0 auto;
      margin-top: 0px;
      margin-bottom: 0px;
    padding: 5px;

    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px #393939 solid;


}
.txt_link_download:hover{
text-shadow: 0px 0px 6px #5bd263;
}

.txt_link_expirat {
  font-size: 18px;
    font-family: 'Archivo Narrow', sans-serif !important;
    color: #FF6B12;
    background: #000;
    width: 150px;
    margin: 0 auto;
      margin-top: 0px;
      margin-bottom: 0px;
    padding: 5px;

    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px #393939 solid;
}

.error_order {
  font-size: 18px;
    font-family: 'Archivo Narrow', sans-serif !important;
color: red;
}