@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
html {
  height: 100%;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

body {
  z-index: 1;
  justify-content: center;
  font-family: Arial, sans-serif;
  background-color: transparent;
  padding: 25px;
  border: 0px solid red;
  width: auto;
  max-width: 1600px;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
  top: 0px;
  margin-top: 60px;
background-image: linear-gradient(to bottom, #181818, #1b192e, #1d1844, #1d175b, #1e1271, #270e6e, #2e086b, #340368, #32084f, #2b0d38, #211024, #121112);
  background-attachment: fixed; /* Fixe l'image de fond */
  background-size: cover; /* Assure que l'image de fond couvre toute la fenêtre */
}


h1 {
  text-align: center;
}



  header{
	  z-index:999;
	  position:fixed;
	  top:0;
	  left:0;
	  right:0;

align-items:center;
    padding-top:0px;
  padding-bottom:0px;
    border-radius: 0px;
box-shadow: 0 1px 1px #202020;
height:80px;

/* From https://css.glass */
background: rgba(0, 0, 0, 0.70);

box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(12.3px);
-webkit-backdrop-filter: blur(12.3px);
border-bottom: 5px solid rgba(30, 30, 30, 0.50);

  }
  
    header section{
  display:flex;
  align-items:center;
  justify-content: space-between;

 margin:20px auto;
  width:auto;
max-width:1640px;
padding:0;
border: 0px solid red;
  }
  
      header section span{
  display:flex;
  align-items:center;
  justify-content: right;

 width:100px;
margin-right:10px;
border:0px solid red;
  }
  
   header section h1{
	    display:flex;
  align-items:center;
font-size:20px;
    font-family: "Montserrat", sans-serif;
	height:30px;
	color:#fff;
	border: 0px solid yellow;
	margin:0 0;
	margin-left:20px;
  } 

   header section a{
	    display:flex;
  align-items:center;
justify-content:center;
	
height:30px;
	border: 0px solid yellow;
	margin:0 0;
  } 

  
   header section h1 img{
	    display:flex;
  align-items:center;

	width:150px;
	color:#fff;
	border: 0px solid blue;
	padding:10px 0;
	
	
  }   
  
  
  
    header section span .fa-gear,
	.fa-user,
	.fa-magnifying-glass{
	position:relative;
	float:right;
	display:flex;
  justify-content: right;
   align-items:center;
right:0px;
margin:0 15px;
font-size:22px;
margin-top:0px;
color: #fff;
cursor: pointer;
  }
      header section span .fa-gear:hover{

color: #ccc;

  }  
  
        header section span .fa-user:hover{

color: #ccc;

  } 
          header section span .fa-magnifying-glass:hover{

color: #ccc;

  } 
  
      header section .fa-paperclip{

	position:relative;
	display:flex;
  justify-content: left;
   align-items:center;

left:0px;
margin-left:-92px;
font-size:60px;
margin-top:2px;
color: #25a4d4;
cursor: default;
opacity:.2;
  }
  

      header .fa-paperclip:hover{

color: #25a4d4;

  }  


form {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin: auto;
  gap: 10px;
  border:0px solid red;
}

input, button {
  padding: 10px;
  font-size: 16px;
}

#videoList {
  display: flex;
  justify-content:center;
  gap: 15px;
  flex-wrap: wrap; 
z-index:1;
 background-color: transparent;
 border:0px solid red;
  padding-top:20px;
}

#videoList #noVidMessage{
color:#fff;
font-size:16px;
}

#videoList #noVidMessage .fa-face-tired{
color:#fff;
font-size:40px;
margin-top:15px;
}





#videoTv {
  display: none;
  justify-content:center;
  gap: 15px;
  flex-wrap: wrap; 
z-index:1;
 background-color: #000;
 border:0px solid red;
 padding-top:30px;
}
#fusionBlock {
  display: flex;
  justify-content:space-between;
  align-items:center;
height:60px;
width:auto;
  border:0px solid red;
  
}
.InfoMovies{
	
}

.video-item {

  padding: 0px;
  padding-bottom:5px;

  max-width: 252px;
  width: 100%;
 text-align:left;
   border-radius: 10px;
 
/* From https://css.glass */
background: rgba(0, 0, 0, 0.60);
border-radius: 16px;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(12.3px);
-webkit-backdrop-filter: blur(12.3px);
border: 1px solid rgba(50, 50, 50, 0.50);


}






.video-item iframe, .video-item video {
width: 100%;

}
video{
	z-index:2;
	border: 0px solid red;
	background-color:#000;
    min-height: 148px;
	 
	
}
.plyr__video-wrapper{
	border: 1px solid transparent;
	  border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	background-color:#000;
	  
  
}

iframe{
		z-index:2;
	border: 1px solid transparent;
	background-color:#000;
  border-top-left-radius: 10px;
    border-top-right-radius: 10px;
min-height: 141px;

}
.videoPoster {
		z-index:2;
	position:absolute;
	  display: flex;
  justify-content:center;
  width: 100%;
background-color:#000;
  height: 147px;
  border-top-left-radius: 10px;
    border-top-right-radius: 10px;
left:0;
right:0px;
margin-left:0;
margin-right:0;
 margin: 0 auto;
  transition: opacity 0.6s ease;
  top: 1px;
  opacity: 1;
  cursor: pointer;
  max-width:255px;

    -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 10px), transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

}
select{
	  padding: 10px;
  font-size: 16px;
   

}



/* Pour styliser le fond au survol */
#videotrie:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Pour améliorer l'accessibilité sur focus */
#videotrie:focus {
  outline: none;
  box-shadow: 0 0 10px #fff;
}








#videoForm {
 display: none;
 
  max-width: 100%;
  margin: 40px auto;
  padding: 25px;

  border-radius: 10px;

  font-family: 'Segoe UI', sans-serif;
  color: #fff;
    appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
    box-shadow: 0 0 3px #404040;  
	margin-top:20px;
	margin-bottom:-30px;

/* From https://css.glass */
background: rgba(0, 0, 0, 0.70);


backdrop-filter: blur(12.3px);
-webkit-backdrop-filter: blur(12.3px);
	
	
}
#videoForm h1{
font-size:18px;
font-weight:bold;
text-align:left;
margin:0;
padding:0; 
margin-bottom:20px;
}

.form-columns {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.form-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#videoForm select,
#videoForm input {
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;

  color: #fff;
  font-size: 16px;
  transition: 0.3s ease;
  
    border-radius: 10px;
  box-shadow: 0 0 5px #303030;  
background-color: #101010;

  outline: none;
}

#videoForm select:focus,
#videoForm input:focus {
  background-color: #101010;
  box-shadow: 0 0 0 2px #4a90e2;
      appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
}

#videoForm option {

  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
  color: #fff;
   border-radius: 10px;
 
 background-color: #202020;

}

#videoForm button {
  margin-top: 25px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #b28c14, #b28c14);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

#videoForm button:hover {
  background: linear-gradient(135deg, #404040, #404040);
}







.video-item h3{
	font-size:12px;
	color:#fff;
	font-weight:500;
	text-align:left;
}

.video-item p{
	font-size:12px;
	color:#fff;
}
#sort-select{
	display: none; /* Cacher par défaut */
  padding: 10px;
  padding-right:15px;
  font-size: 15px;
width:100%;
  color: #fff;
  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
 background: #101010;
  border: none;
  cursor: pointer;
border-radius:10px;
}

#sortByDate{
	display: block; /* Cacher par défaut */
  padding: 10px;
  padding-left:18px;
  font-size: 15px;
width:100%;
  color: #fff;
  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
 background: transparent;
  border: none;
  cursor: pointer;
  
  
border-radius:10px;
 

}

.fa-circle{
	color:blue;
	font-size:16px;
	
}



#mediaSelect{
	display: block; /* Cacher par défaut */
 

  font-size: 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 0 5px #505050;
  border: none;
  background-color: transparent;
  color: #fff;
  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background:transparent;

  cursor: pointer;
  height:40px;
  
  background: #101010;

}



#sort-genre-select {
  display: block;
  padding: 10px;
  padding-right: 35px;
  font-size: 15px;
  width: 140px;
  color: #fff;
  appearance: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(0, 0, 0, 0.1); /* Opacité 80% */
  border: none;
  cursor: pointer;
  border-radius: 10px;
  z-index: 0;

  /* Masquer la scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

#sort-genre-select::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Limite à 12 options visibles */
#sort-genre-select option {
  color: #fff;
  background-color: #000;
  font-size: 15px;
  border: none;
  outline: none;
  border-radius: 15px;
  padding: 8px 15px;
  cursor: pointer;
  max-height:200px;
}

/* Supprimer la bordure et opacité de fond sur toutes options */
#sort-genre-select optgroup,
#sort-genre-select option {
  border: none !important;
  background-color: #000;
  opacity: 1 !important;
}


/* ComboBox désactivée visuellement */
#sort-genre-select[style*="pointer-events: none"] {
  opacity: 0.5;
  cursor: not-allowed;
}


#sort-select-date{
	  display: none; /* Cacher par défaut */
  padding: 10px;
  padding-right:15px;
  font-size: 15px;
  border-radius: 10px;

  box-shadow: 0 0 5px #505050;
  border: none;
  background-color: transparent;
  color: #fff;
  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;

  cursor: pointer;
  margin-left:20px;
  
 background: transparent;
background: -webkit-linear-gradient(90deg, rgba(21, 21, 21, 1) 0%, rgba(53, 53, 53, 1) 50%, rgba(21, 21, 21, 1) 100%);
background: -moz-linear-gradient(90deg, rgba(21, 21, 21, 1) 0%, rgba(53, 53, 53, 1) 50%, rgba(21, 21, 21, 1) 100%);
background: linear-gradient(90deg, rgba(21, 21, 21, 1) 0%, rgba(53, 53, 53, 1) 50%, rgba(21, 21, 21, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#151515", endColorstr="#151515", GradientType=1); 
}


#sort-select option,
#sortByDate option,
#mediaSelect option,
#sort-select-date {
    color: rgba(255, 255, 255, 1.0); /* Text color */
  background-color: #000;
    font-size: 15px;
	border: none;
	outline: none;
	border-top: none;
	border-radius:15px;
	padding:8px 15px;
cursor:pointer;

}		



  
  #hiddenType{
	  display:none;
	  
  }
  
#neWButton{
	
		border: 1px solid red;
		
}


#videoAjout{
	pointer-events:none;
	color: red;
}

#background-slider {
  position: relative;
  width: 100%;
  height:350px;
  overflow: hidden;
z-index:2;
  top:0;
  margin-top:20px;
border-radius:15px;
border: 5px solid rgba(20, 20, 20, .7);
margin-bottom:-30px;
  opacity:1;
  left:0;
  right:0;
  display:none;
}

#SectionRecherche {
  border: 0px solid red;
  max-width: 1600px;
  margin: 0;
  padding: 0;
  display: flex;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 5px #404040;
  margin-top: 0px;
  opacity: 0.8;
  background: #101010;
  position: relative;
  margin-right:-50px;

  /* Masqué par défaut */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* Loupe toujours visible */
#searchIcon {
  color: #fff;
  cursor: pointer;

  z-index: 99;
  margin-left: 15px;
  user-select: none;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  display: inline-block;
}

/* Conteneur entier visible quand active */
#SectionRecherche.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Input visible en active */
#SectionRecherche.active #rechTitle {
  max-width: 140px;
  opacity: 1;
  pointer-events: auto;
  cursor: text;
  margin-left: 0px;
  margin-right:20px;
  transition: max-width 0.3s ease, opacity 0.3s ease;
}

/* Input caché hors active */
#rechTitle {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-width 0.3s ease, opacity 0.3s ease;
  background:transparent;
  color:#fff;
  outline:none;
  border:none;
  
}

/* videoCount masqué par défaut */
#videoCount {
  position: relative;
  opacity: 0;
  pointer-events: none;
  color: #F5BB0A;
  display: flex;
  justify-content: center;
  margin-right: 0px;
  background: transparent;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  width: 35px;
  transition: opacity 0.3s ease;
  border: 0px solid red;
  margin-left:10px;
}

/* videoCount visible uniquement en active */
#SectionRecherche.active #videoCount {
  opacity: 1;
  pointer-events: auto;
}


.bgSlider {
  position: absolute;
   top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 5s ease-in-out;
   z-index: 0;
    
}

.bgSlider.active {
  opacity: 1;
  z-index: 1;
}

#pagination {
  display: flex;
  justify-content: center;
  align-items:center;
  margin: 20px 0px;
  gap: 30px;
  flex-wrap: wrap;
  border: 0px solid red;
 margin-top:40px;
}


#pagination button {


  border: none;
width:48px;
height:48px;
  border-radius: 50%;

  cursor: pointer;
  transition: background-color 0.3s ease;

 background-color: #F5BB0A;
margin:0;
padding:0;



 
}


#pagination button i {
	display:flex;
	justify-content:center;
	align-items:center;
  border: none;
cursor: pointer;
  transition: background-color 0.3s ease;
    font-size: 50px;
color: rgba(0, 0, 0, 1);
 border:1px solid #202020;
  border-radius: 50%;
     box-shadow: 0 0 15px #303030;
}
#pagination button i:hover {

color: #303030;
 
}
#pagination button:hover:not(:disabled) {
 background-color: #F5BB0A;
}



#pagination button:disabled {
  background-color: #fff;
  cursor: default;

  opacity: 1;
}
.page-counter {
	display:flex;
	justify-content:center;
	align-items:center;
  margin: 0 10px;
  font-weight: 500;
  color: white;
  font-size: 18px;
  border: 0px solid red;
  background-color: rgba(0, 0, 0, .7);
  padding:1px 15px;
  border-radius: 5px;
    box-shadow: 0 0 10px #303030;
	cursor:default;
	pointer-events:none;
	height:36px;
}



  header section span .fa-gear{

	display:flex;

  }

 .select-container-Inscription{
display:flex;
justify-content:center;
align-items:center;
  border-radius: 10px;
margin-left:20px;
margin-right:20px;
  box-shadow: 0 0 5px #505050;
  border: none;
 background: #101010;
width:97%;
}
 .select-container-Inscription .icon-container-Inscription .fa-angle-down{
position:relative;
color:#F5BB0A;
font-size:16px;
padding-right:40px;
font-weight:bold;
pointer-events:none;
}
 .select-container-Inscription .icon-container-Inscription .fa-angle-up{
display:none;
position:relative;
color:#F5BB0A;
font-size:15px;
padding-right:10px;
pointer-events:none;
}
 .select-container-Inscription .icon-container-Inscription{
position:relative;
border:0px solid red;
display:flex;
justify-content:center;
align-items:center;
width:0px;
pointer-events:none;
margin-top:5px;
margin-left:0px;
}  

#videoInscription {

	width:100%;
	cursor:pointer;
	  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color:#000;
  color:#fff;
  border-radius:10px;
  width:100%;
  border:none;
  border:0px solid red;
    font-size: 15px;
}   



 .select-container-top{
display:flex;
justify-content:space-between;
align-items:center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 0 2px #505050;
  border: none;
 background: #101010;
width:100%;
}
 .select-container-top .icon-container-top .fa-angle-down{
position:relative;
color:#F5BB0A;
font-size:16px;
padding-right:40px;
font-weight:bold;
pointer-events:none;
}
 .select-container-top .icon-container-top .fa-angle-up{
display:none;
position:relative;
color:#F5BB0A;
font-size:15px;
padding-right:10px;
pointer-events:none;
}
 .select-container-top .icon-container-top{
position:relative;
border:0px solid red;
display:flex;
justify-content:center;
align-items:center;
width:0px;
pointer-events:none;
margin-top:5px;
margin-left:0px;
}  
  

#videoTypes {
	width:100%;
	cursor:pointer;
	  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}   
  
#videoLang {
	width:100%;
	cursor:pointer;
	  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
} 
  
#videoSpecification {
	width:100%;
	cursor:pointer;
	  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}   
   #videoType {
	width:100%;
	cursor:pointer;
	  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline-color: yellow;
  -webkit-appearance: none;
  -moz-appearance: none;
}
  
  
  
  
  
  
  
  
  
 .select-container{
display:flex;
justify-content:space-between;
align-items:center;
 border-radius: 5px;
  box-shadow: 0 0 10px #303030;
  border: none;
 background: rgba(0, 0, 0, .70);
width:120px;
height:40px;
}
 .select-container .icon-container .fa-angle-down{
position:relative;
color:#F5BB0A;
font-size:16px;
right:-10px;
font-weight:bold;
pointer-events:none;
}
 .select-container .icon-container .fa-angle-up{
display:none;
position:relative;
color:#F5BB0A;
font-size:15px;
padding-right:5px;
pointer-events:none;
}
 .select-container .icon-container{
position:absolute;
border:0px solid red;
display:flex;
justify-content:right;
align-items:center;
width:100px;
pointer-events:none;
margin-top:5px;
}
.select-containerTwo{
display:flex;
position:relative;
z-index:5;
float:right;
justify-content:right;
align-items:center;
right:0;
margin-left:15px;
 border-radius: 5px;
  box-shadow: 0 0 10px #303030;
  border: none;
 background: rgba(0, 0, 0, .70);
width:145px;
margin-top:1px;
height:40px;
}
.select-containerTwo .icon-containerTwo{
position:absolute;
border:0px solid red;
display:flex;
justify-content:right;
align-items:center;
width:150px;
pointer-events:none;
margin-top:5px;

}



.select-containerTwo .icon-containerTwo .fa-angle-down{
position:relative;
color:#F5BB0A;
font-size:16px;
padding-right:10px;
font-weight:bold;
pointer-events:none;

}
.select-containerTwo .icon-containerTwo .fa-angle-up{
display:none;
position:relative;
color:#F5BB0A;
font-size:16px;
padding-right:10px;
pointer-events:none;
} 
  
.fav-btn {
  z-index: 10;
  user-select: none;
  transition: transform 0.2s ease;
}
.fav-btn:hover {
  transform: scale(1.2);
}
.favories{
	display: none;
	background:#303030;
	color:#fff;
	outline:none;
	border:none;
	border-radius:5px;
	width:100%;
	cursor:pointer;
	font-size:14px;
	padding:7px 0;
	margin-bottom:10px;
}
.favories:hover{
	background:#1e5aa3;	

	color:#fff;
	cursor:pointer;
}
html.no-scroll {
  overflow: hidden;
}

.MenuBlock {
  z-index: 1001;
  display: block; /* Ne pas le cacher ici, on le masque via visibilité/opacité */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* tes styles existants ici... */
  position: fixed;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100%;
  top: 84px;
  padding: 0;


  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: opacity 0.4s ease;
  
  background: rgba(0, 0, 0, 0.70);

box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(12.3px);
-webkit-backdrop-filter: blur(12.3px);
}

.MenuBlock.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.MenuBlock::-webkit-scrollbar {
  display: none;
}

#overlay {
  position: fixed;
  top: 84px; /* hauteur de ton header ! */
  left: 0;
  width: 100%;
  height: calc(100% - 84px); /* tout sauf le header */
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  z-index: 999;
}

#overlay.active {
  opacity: 1;
  visibility: visible;
}

  
    .menuConection, .menuRegister {
      top: 0px;
      display: none;
      flex-direction: column;
      justify-content: center;

      border-bottom: 5px solid #202020;
     
width:auto;
      padding: 20px 30px;

  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

    .menuConection.active,
    .menuRegister.active {
      display: flex;
    }



    button {
width:100%;
justify-content:center;
align-items:center;
border: 1px solid transparent;
color:#fff;
background: #b28c14;
border-radius: 10px;
text-decoration:none;
     cursor: pointer;
	 	display:flex;
	align-items:center;
	  height:40px;	
	 margin-top:10px;
    }

button:hover{
color:#fff;
background: #404040;

}


    .switch-btn {

      background-color: #404040;
      color: #ccc;
      text-decoration: none;
      border: none;
      cursor: pointer;
      font-size: 14px;
	  margin-top:10px;
	  margin-bottom:0px;

    }
	
	.switch-btn:hover{
color:#fff;
background: #303030;

}
	
	
#userZone {
  display: none;
  width:auto;
  justify-content:left;
  align-items:center;
border-bottom:1px solid #202020;

}

#blockConection h1{
  width:100%;
  justify-content:left;
text-align:left;
   color:orange;
margin-top:15px;
left:0;
margin-left:0;
margin-bottom:10px;
}

#userZone section{
    margin: 0px 6px;


}

#loginForm {
 
  width:100%;
  justify-content:left;
  align-items:center;
    background:transparent;

}
#loginForm h1{
 
  width:100%;
  justify-content:left;
text-align:left;
   color:orange;
left:0;
margin-left:0;

}
#loginForm input{
   color: #fff;
  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
 background: rgba(20, 20, 20, .8);
  border: none;
  cursor: pointer;
  padding: 10px;

  font-size: 15px;
  border-radius: 5px;
 box-shadow: 0 0 5px #505050;
 width:90%;

}

#RegisterForm {

  width:auto;
  justify-content:left;
  align-items:center;
    background-color:transparent;
}

#RegisterForm h1{

  width:100%;
  justify-content:left;
text-align:left;
   color:orange;
left:0;
margin-left:0;
}

#RegisterForm input{
   color: #fff;
  appearance: none;     /* Supprime le style natif (Chrome/Safari/Firefox) */
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
 background: rgba(20, 20, 20, .8);
  border: none;
  cursor: pointer;
  padding: 10px;

  font-size: 15px;
  border-radius: 5px;
 box-shadow: 0 0 5px #505050;
 width:90%;
}



#pseudonyme{
display:flex;
justify-content:left;
align-items:center;
color:#fff;
padding: 0 0px;
height:18px;
border: 0px solid red;
width:auto;
}

#pseudonyme p{
display:flex;
justify-content:left;
align-items:center;
color:#fff;
padding: 0 0px;
height:18px;
border: 0px solid red;
margin-left:10px;
width:60px;
}

#userNameDisplay{
display:block;
left:0;
margin-left:0px;
border: 0px solid red;
color:#ccc;
margin-top:0px;
text-align:left;
padding-right:0;
width:auto;
}

#sexe{
display:flex;
justify-content:left;
align-items:center;
color:#fff;
padding: 0 0px;
height:18px;
border: 0px solid red;
width:auto;
margin-left:10px;
}

#userSexeDisplay{
display:block;
left:0;
margin-left:4px;
border: 0px solid red;
color:#ccc;
margin-top:0px;
text-align:left;
padding-right:0;
width:auto;
}


#creation{
display:flex;
justify-content:left;
align-items:center;
color:#fff;
padding: 0 0px;
height:18px;
border: 0px solid red;
width:100%;
margin-left:10px;
}
#creationdelete{
display:flex;
justify-content:left;
align-items:center;
color:#fff;
padding: 0 0px;
height:18px;
border-bottom: 1px solid #303030;
width:auto;
margin-left:0px;
margin-top:-10px;
font-size:14px;
padding-bottom:5px;
margin-bottom:10px;
}

#creationdelete p{

font-size:14px;
}


#userCreatedDisplayDelete{
display:block;
left:0;
margin-left:4px;
border: 0px solid red;
color:#ccc;
font-size:14px;
text-align:left;
padding-right:0;
width:auto;
}



#userCreatedDisplay{
display:block;
left:0;
margin-left:4px;
border: 0px solid red;
color:#ccc;

text-align:left;
padding-right:0;
width:auto;
}


#uploadCountDisplay{
display:flex;
justify-content:left;
align-items:center;
color:#fff;
padding: 0 0px;
height:24px;
border: 0px solid red;
width:100%;
margin-left:10px;
}

#uploadCount{
display:block;
left:0;
margin-left:4px;
border: 0px solid red;
color:#ccc;

text-align:left;
padding-right:0;
width:auto;
}
#uploadCountOne{
display:block;
left:0;
margin-left:4px;
border: 0px solid red;
color:#ccc;

text-align:left;
padding-right:0;
width:auto;
}

#aged{
display:flex;
justify-content:left;
align-items:center;
color:#fff;
padding: 0 0px;
height:24px;
border: 0px solid red;

}
#aged p{
display:flex;
justify-content:left;
align-items:center;
color:#fff;
padding: 0 0px;
height:24px;
border: 0px solid red;
margin-left:10px;
width:37px;

}




#userAgeDisplay{

display:block;
left:0;
margin-left:0px;
border: 0px solid red;
color:#ccc;
margin-top:0px;
text-align:left;
width:auto;


}



#avatos{
width:80px;
height:80px;
      border: 1px solid rgba(30, 30, 30, 0.70);
	  margin:0 0;
	  border-radius:10px;
margin-right:0px;
background:#000;
margin-left:-7px;
 padding:0px 0;
 border-radius:50%;
}

#salut{
left:0;
margin-left:0px;
text-align:left;
border-bottom: 1px solid #303030;
color:#fff;
top:0;
margin-top:0;
padding-bottom:8px;
margin-bottom:5px;
font-size:16px;
}

#logoutClick{
display:flex;
justify-content:center;
align-items:center;
border: 1px solid transparent;
color:#fff;
background: #b28c14;
border-radius: 10px;
text-decoration:none;
height:35px;
cursor:pointer;
}

#logoutClick:hover{
color:#fff;
background: #404040;

}

#SwitchProfile{
display:flex;
justify-content:center;
align-items:center;
border: 1px solid transparent;
color:#fff;

border-radius: 10px;
text-decoration:none;
height:35px;
cursor:pointer;
margin-top:15px;
background: #404040;
}

#SwitchProfile:hover{
color:#fff;
background: #b28c14;

}

.fa-gear{

	display:none;

  }
#MenuBonjour{
    display: block;
    text-align: left;
    margin-left: 0px;
    padding: 20px 0px;
    font-size: 14px;
border-left: 5px solid rgba(30, 30, 30, 0.50);

  padding-left:6px;
}

#loginForm h2{
color: #fff;
font-size:16px;
}
#registerBox h2{
color: #fff;
font-size:16px;
}

#blockConection{
display:none;
      border-bottom: 0px solid #202020;
	  border-top: 0px solid #202020;
      padding: 0px 25px;
left:0;

	  margin-bottom:90px;   
  
		
}

.fa-circle{
	color:green;
	padding-left:5px;
	font-size:12px;
}


.menuConection{
display:none;
      border-bottom: 0px solid #202020;
	  border-top: 0px solid #202020;
      padding: 15px 25px;

left:0;
margin-bottom:90px;
  	
		
}
.menuRegister{
display:none;
      border-bottom: 0px solid #202020;
	  border-top: 0px solid #202020;
      padding: 15px 25px;
left:0;
    
margin-bottom:90px;
		
		
}


#logoutBtn{
display:none;

}

.fa-gear{
display:none;

}

#textesCompte{
color:#ccc;
font-size:14px;
padding:0;
text-align:left;
border: 0px solid red;
width:100%;
margin:0;
}

#textesAvatar{
color:#ccc;
font-size:14px;
padding:0;
text-align:left;
border: 0px solid red;
width:100%;
margin:0;
margin-top:2px;
}

#ImgConection{
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
}

#presentation{
color:#F5BB0A;
font-size:12px;
}


.submit{
top:0;
margin-top:0;

}


#videoUploader{
pointer-events:none;
display:none;
color: #F5BB0A;
}

.headerTop{
width:100%;
display:none;
height:5px;
top:0;
margin-top:-10px;
background:orange;
border-radius: 50%;
margin-bottom:30px;
background: #000000;
background: -webkit-linear-gradient(244deg, rgba(0, 0, 0, 1) 0%, rgba(201, 136, 30, 1) 50%, rgba(0, 0, 0, 1) 100%);
background: -moz-linear-gradient(244deg, rgba(0, 0, 0, 1) 0%, rgba(201, 136, 30, 1) 50%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(244deg, rgba(0, 0, 0, 1) 0%, rgba(201, 136, 30, 1) 50%, rgba(0, 0, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0);
opacity: .8;


}
.sectionTop{
	position:relative;
	display:flex;
	justify-content:space-between;
	align-items:center;
		border: 0px solid red;
		margin-bottom:0px;
		padding:0px auto;
		top:0px;
		margin-top:50px;
		background-color:transparent;
margin-bottom:-10px;

}

.sectionBody{
	position:relative;
	display:none;
	justify-content:center;
	flex:flex-wrap;
		border: 0px solid red;
		margin-bottom:0px;
		padding:0px auto;
		top:0px;
		margin-top:20px;
		background-color:#202020;
margin-bottom:0px;
width:100%;
height:70px;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border-radius: 50%;
  background-color: #999999; /* gris par défaut */
}


#plusde18{
color:#fff;	
}

.delete-btn{
	display:none;
}


#connexionModal{
	  display: block;
  position: relative;
  justify-content:left;

  background: transparent;
  color: #fff;
  padding: 0px;
border-bottom: 1px solid #303030;
  width:auto;
  top:0;
margin-top:0px;
  
  overflow-y: auto;
  z-index: 9999;
	
}

#connexionModal #logList{
font-size:14px;
text-decoration:none;
list-style-type:none;
border:0px solid #202020;
width:auto;
text-align:left;
padding:10px 10px;
	background-color:#101010;
	border-radius:10px;
	margin-top:-5px;
}

#DeleteModal{
	  display: block;
  position: relative;
  justify-content:center;
align-items:Center;
  background: transparent;
  color: #fff;
  padding: 0px;
border-bottom: 1px solid #404040;
border-top: 1px solid #404040;
  width:auto;
  top:0;
margin-top:0px;
  
  overflow-y: auto;
  z-index: 9999;
	
}
#DeleteModal{
	  display: block;
  position: relative;
  justify-content:center;
align-items:Center;
  background: transparent;
  color: #fff;
  padding: 0px;
border-bottom: 1px solid #303030;
border-top: 1px solid #303030;
  width:auto;
  top:0;
margin-top:0px;
padding-bottom:10px;  
  overflow-y: auto;
  z-index: 9999;
	
}
#DeleteModal p{
font-size:14px;
color:#fff;

}
#connexionModal p{
font-size:14px;
color:#fff;

}
#DeleteAccount{
display:flex;
justify-content:center;
align-items:center;
border: 1px solid transparent;
color:#fff;
background: #8c0b0b;
border-radius: 10px;
text-decoration:none;
height:35px;
}

#DeleteAccount:hover{
color:#fff;
background: #404040;

}
.Avatar-Choose{
position:relative;
display:block;
justify-content:center;
align-items:center;
border:0px solid red;
padding:5px auto;

left:0;
margin-left:0;
width:auto;
margin:0;
margin-top:-2px;
margin-bottom:-10px;
}



  .avatar {

    border: 2px solid transparent;
    cursor: pointer;

	margin: 3px 5px;
    transition: 0.2s;
	border-radius:50%;
	width:48px;
height:48px;


  }
  .avatar.selected {
    border: 2px solid orange;
    transform: scale(1.05);
  }
footer{
	z-index:99;
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;

	  border-top: 1px solid #202020;
	  padding:10px 10px;
	  margin:0 auto;

	  margin-bottom:0;
left:0;
right:0;
	  margin-top:60px;
	  
/* From https://css.glass */
background: rgba(0, 0, 0, 0.70);

box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(12.3px);
-webkit-backdrop-filter: blur(12.3px);
border-top: 5px solid rgba(30, 30, 30, 0.50);
 
	  
}
footer section{
		display:flex;
	justify-content:space-between;
	align-items:center;
	width:100%;
		max-width:1600px;
	z-index:99;
    border: 0px solid red;
	height:20px;
}
footer section p{
color:#fff;
font-size:14px;
margin:auto 15px;
opacity:1;
}
footer section img{
padding:0;
margin:0;
}

.btn-supprimer{
          position:absolute;
		  bottom: 5px;
 width:30px;
 height:30px;
 right:0px;
          background-color: transparent;
          
          border: none;
       color: #fff;
          cursor: pointer;
       top:-10px;
		  border-bottom-right-radius:10px;
		  border-top-left-radius:10px;
		  z-index:9999;
}

.btn-supprimer:hover{
color: orange;
          background-color: transparent;
          
}

#ProfileList{
	display:none;
	
	 
  justify-content:center;
  gap: 15px;
  flex-wrap: wrap; 
z-index:1;
 background-color: transparent;
 border:0px solid red;
  padding-top:0px;
	
}

.profile-card {
	border:1px solid #ccc;
display:inline-block;
flex: flex-wrap;
	margin:0px 0;
	border-radius:10px;
	top:0;
	margin-top:0;
	text-align:center;
	background:#f9f9f9;
	
	background: rgba(0, 0, 0, 0.60);
border-radius: 16px;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(12.3px);
-webkit-backdrop-filter: blur(12.3px);
border: 1px solid rgba(50, 50, 50, 0.50);
	padding: 5px 10px;
	padding-top:15px;
}

.profile-card img{
width:100px;
height:100px;
border-radius:50%;
border:10px solid #303030;

}
.profile-card #userProfile{
	display:block;
justify-content:center;
align-items:center;
border:1px solid #202020;
padding-top:0;
padding:0px 20px;
margin-top:10px;
	border-radius:10px;
	background:rgba(10, 10, 10, .7);
}

.profile-card #userProfile h3{
color:#fff;
font-size:16px;
	text-align:left;
}
.profile-card #userProfile p{
color:#fff;
font-size:12px;
	text-align:left;
}


.iframeVid body{
	display:none;
}


.iframeVid div{
	display:none;
}

/* Contrôles du player sur une seule ligne */
.plyr__controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Barre de volume masquée par défaut */
.plyr__volume {
  display: none !important;
}

/* Affichée seulement en plein écran */
.plyr--fullscreen .plyr__volume {
  display: flex !important;
}

/* Barre de progression orange */
.plyr--full-ui .plyr__progress input[type='range']::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #bb8f0b var(--value, 0%), rgba(255,255,255,0.2) var(--value, 0%));
}
.plyr--full-ui .plyr__progress input[type='range']::-moz-range-progress {
  background: #bb8f0b;
}



.video-item .plyr__video-wrapper {
	display:flex;
	align-items:center;
min-height:148px;
border-radius:10px;
  background-color: black; /* pour éviter les bords transparents */
 
}


.plyr--video .plyr__control:focus-visible,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true] {
    background: #bb8f0b;bb8f0b
    background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));
    color: #fff;
    color: var(--plyr-video-control-color-hover,#fff)
}

.classHidden{
	 display:none;
	
}