/* Barre d'outils en haut de l'écran, fixe */
#toolbar{
  position: fixed;
  top: 0;
  padding-block: 5px;
  width: 100%;
  /* height: 40px; */
  /* background-color: #f8f8f8; */
  background-image: linear-gradient(170deg, rgba(2, 2, 2,0.02) 0%, rgba(2, 2, 2,0.02) 51%,transparent 51%, transparent 100%),linear-gradient(212deg, rgba(82, 82, 82,0.01) 0%, rgba(82, 82, 82,0.01) 39%,transparent 39%, transparent 100%),linear-gradient(95deg, rgba(73, 73, 73,0.01) 0%, rgba(73, 73, 73,0.01) 66%,transparent 66%, transparent 100%),linear-gradient(119deg, rgba(174, 174, 174,0.01) 0%, rgba(174, 174, 174,0.01) 67%,transparent 67%, transparent 100%),linear-gradient(43deg, rgba(237, 237, 237,0.03) 0%, rgba(237, 237, 237,0.03) 13%,transparent 13%, transparent 100%),linear-gradient(148deg, rgba(11, 11, 11,0.01) 0%, rgba(11, 11, 11,0.01) 9%,transparent 9%, transparent 100%),linear-gradient(17deg, rgba(233, 233, 233,0.02) 0%, rgba(233, 233, 233,0.02) 13%,transparent 13%, transparent 100%),linear-gradient(198deg, rgba(248, 248, 248,0.02) 0%, rgba(248, 248, 248,0.02) 43%,transparent 43%, transparent 100%),linear-gradient(199deg, rgba(125, 125, 125,0.01) 0%, rgba(125, 125, 125,0.01) 39%,transparent 39%, transparent 100%),linear-gradient(12deg, rgba(2, 2, 2,0.02) 0%, rgba(2, 2, 2,0.02) 46%,transparent 46%, transparent 100%),linear-gradient(341deg, rgba(227, 227, 227,0.02) 0%, rgba(227, 227, 227,0.02) 13%,transparent 13%, transparent 100%),linear-gradient(215deg, rgba(201, 201, 201,0.03) 0%, rgba(201, 201, 201,0.03) 56%,transparent 56%, transparent 100%),linear-gradient(199deg, rgba(189, 189, 189,0.02) 0%, rgba(189, 189, 189,0.02) 2%,transparent 2%, transparent 100%),linear-gradient(34deg, rgba(116, 116, 116,0.03) 0%, rgba(116, 116, 116,0.03) 63%,transparent 63%, transparent 100%),linear-gradient(50deg, rgba(230, 230, 230,0.01) 0%, rgba(230, 230, 230,0.01) 30%,transparent 30%, transparent 100%),linear-gradient(162deg, rgba(10, 10, 10,0.02) 0%, rgba(10, 10, 10,0.02) 58%,transparent 58%, transparent 100%),linear-gradient(327deg, rgba(35, 35, 35,0.01) 0%, rgba(35, 35, 35,0.01) 15%,transparent 15%, transparent 100%),linear-gradient(255deg, rgba(191, 191, 191,0.03) 0%, rgba(191, 191, 191,0.03) 74%,transparent 74%, transparent 100%),linear-gradient(311deg, rgba(210, 210, 210,0.03) 0%, rgba(210, 210, 210,0.03) 46%,transparent 46%, transparent 100%),linear-gradient(272deg, rgba(212, 212, 212,0.01) 0%, rgba(212, 212, 212,0.01) 19%,transparent 19%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
  display: flex;
  /* flex-direction: column; */
  justify-content:  space-evenly; /* Centre les boutons */
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

/* Style pour les boutons */
.toolbar-button {
  background-color: transparent;
  border: none;
  padding: 10px;
  font-size: 12px;
  color: #6c5504;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
      /* padding-inline: 3%; /* + */ 
      /* min-width: 150px; */
}

.toolbar-button:hover {
  /* background-color: rgba(0, 0, 0, 0.05); */
  background-color: #ffdb727d;
  border-radius: 10px;
}
.toolbar-button:disabled, .toolbar-button:disabled:hover {		
  cursor: not-allowed; /* Changement de curseur pour indiquer que c'est désactivé */
  color:lightgrey;
  background: none;
  }
.toolbar-button:disabled > .button-text{		    color:lightgrey;  }

/* Style pour les icônes (Material Symbols) */
.toolbar-button .material-symbols-sharp {
  /* font-size: 25px; /* Taille de l'icône  
  margin-bottom: 2px; /* Espacement entre l'icône et le texte */
}

/* Style pour le texte sous l'icône */
.button-text {
  font-size: 14px; /* Taille du texte sous l'icône */
  color:black;
}

/* Pour que la barre soit responsive */
@media (max-width: 600px) {
  .toolbar-button {
    font-size: 12px;
    padding: 4px 35px;
        margin-top: 5px;
      /* min-width: 100px; */
  }

.toolbar-button  .material-symbols-sharp {
    font-size: 20px; /* Réduction de la taille des icônes sur petits écrans */
  }

  .button-text {
    font-size: 12px; /* Réduction de la taille du texte sur petits écrans */
    /* margin-bottom: -3px; */
        margin-top: 3px;
  }
}

@media (min-width: 601px) and  (max-width: 1023px) {
    
   .toolbar-button {
    font-size: 12px;
    padding: 10px 50px;

  }

}

/* Media query pour grands écrans (PC) */
@media (min-width: 1024px) {
    .mobileAudioSettings {  max-width: 40vw;    }
    #entete {   margin-top:0;   }
    
  /* Positionner la barre d'outils sur la gauche */
  #toolbar{
        position: fixed;
        top: 0;
        left: 0;
        width: 100px;
        height: 100vh;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        padding-top: 20px;
  }

  /* Ajuster les boutons dans la barre verticale */
  .toolbar-button {
    flex-direction: column;
    padding: 30px 0;
    width: 100%; /* Faire prendre toute la largeur */
    text-align: center;
  }

  /* Icônes plus grandes pour les grands écrans */
 .toolbar-button .material-symbols-sharp {
    font-size: 35px !important;
  }

  /* Ajuster l'espacement et l'alignement du texte sous l'icône */
  .button-text {
    font-size: 12px;
  }

  /* Ajuster le hover pour un meilleur UX sur PC */
  .toolbar-button:hover {
    /* background-color: rgba(0, 0, 0, 0.1); */
    border-radius: 0; /* Pas de coins arrondis pour une barre latérale */
    width: 100%;
  }
}


/* ------------------------------- */


		/* ----------------------------------------------------------------------- */
	
	/* v1.3 */
	
	.mobileAudioSettings {
    position: fixed;
   top: 80px;
    left: 0;
    right: 0;
   box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
    border-top: 1px solid #ccc;
    padding: 10px;
    display: none; /* Caché initialement */
    z-index: 1000; /* S'assure qu'il apparaît au-dessus des autres contenus */
	width: 75vw;
    margin: auto;
    border-radius: 20px;
    border: solid white 2px;
	padding-block: 1em;
}
	
	#pause_settingsMobile
	{
		     background-image: radial-gradient(circle at top right, rgb(4, 20, 62) 0%, rgb(4, 20, 62) 28%, rgb(49, 29, 62) 28%, rgb(49, 29, 62) 45%, rgb(94, 38, 62) 45%, rgb(94, 38, 62) 63%, rgb(138, 47, 62) 63%, rgb(138, 47, 62) 100%);
   
	}
	
	#repetition_settingsMobile
	{
background-image: linear-gradient(215deg, rgba(156, 156, 156, 0.03) 0%, rgba(156, 156, 156, 0.03) 50%,rgba(20, 20, 20, 0.03) 50%, rgba(20, 20, 20, 0.03) 100%),linear-gradient(107deg, rgba(179, 179, 179, 0.03) 0%, rgba(179, 179, 179, 0.03) 50%,rgba(7, 7, 7, 0.03) 50%, rgba(7, 7, 7, 0.03) 100%),linear-gradient(25deg, rgba(30, 30, 30, 0.01) 0%, rgba(30, 30, 30, 0.01) 50%,rgba(165, 165, 165, 0.01) 50%, rgba(165, 165, 165, 0.01) 100%),linear-gradient(146deg, rgba(54, 54, 54, 0.03) 0%, rgba(54, 54, 54, 0.03) 50%,rgba(246, 246, 246, 0.03) 50%, rgba(246, 246, 246, 0.03) 100%),linear-gradient(225deg, rgba(8, 8, 8, 0.01) 0%, rgba(8, 8, 8, 0.01) 50%,rgba(133, 133, 133, 0.01) 50%, rgba(133, 133, 133, 0.01) 100%),linear-gradient(38deg, rgba(57, 57, 57, 0.02) 0%, rgba(57, 57, 57, 0.02) 50%,rgba(196, 196, 196, 0.02) 50%, rgba(196, 196, 196, 0.02) 100%),linear-gradient(122deg, rgba(115, 115, 115, 0.02) 0%, rgba(115, 115, 115, 0.02) 50%,rgba(101, 101, 101, 0.02) 50%, rgba(101, 101, 101, 0.02) 100%),linear-gradient(154deg, rgba(217, 217, 217, 0.01) 0%, rgba(217, 217, 217, 0.01) 50%,rgba(126, 126, 126, 0.01) 50%, rgba(126, 126, 126, 0.01) 100%),linear-gradient(144deg, rgba(204, 204, 204, 0.01) 0%, rgba(204, 204, 204, 0.01) 50%,rgba(139, 139, 139, 0.01) 50%, rgba(139, 139, 139, 0.01) 100%),linear-gradient(90deg, rgb(0, 2, 29),rgb(4, 150, 89));
	}
	
	.blurred {
    filter: blur(3px);
}

	.closeBtn
	{
		    filter: hue-rotate(90deg);
    float: right;
    cursor: pointer;
    /* color: red; */
    position: absolute;
    top: -15px;
    left: 90%;
    background: #efefef;
    padding: 7px;
    border-radius: 50%;
    border: #3c3c3c solid 2px;
	}
	
	/* --------------------*/