*/
	
	/* 	NE PAS SUPPRIMER LE * / EN HAUT	SINON LE AFTER NE MARCHE PLUS, ET DEMANDE PAS MOIN POURQUOI*/
.audioChaineArea, area {position:relative;	}
	
.audioChaineArea::after, area:hover::after 
{
  /* position: absolute; */
  /* display: block; */
	    background-color: rgb(222 255 200 / 7%);
    content: ' ';
    z-index: 1; /* nécessaire */
    transition: border-radius 0.6s, box-shadow 0.2s;
    border-radius: 15px;
    box-shadow: 0 0 4px 3px rgb(0 25 50 / 30%);
	border: groove blue 1px; /* NEW */
  
}

	.material-symbols-sharp
	{
			vertical-align:middle;
	}
	
	audio {
		box-shadow: -2px 2px 9px 6px rgba(0,0,0,0.59);
		-webkit-box-shadow: -2px 2px 9px 6px rgba(0,0,0,0.59);
		-moz-box-shadow: -2px 2px 9px 6px rgba(0,0,0,0.59);
		    border-radius: 30px;
			    border-block: 3px white solid;
	}

	body { font-family: Helvetica ; background-color: #002a5c; color:white; margin:0;
	overflow-x:hidden;
	} 
				
		#page 
		{	
			background-color: black;     border-image: url(../images/mosaique_horizontale_double.png);
			/* border-image-repeat: repeat; */
			border-image-width: auto;
			border-image-outset: 5px;
			overflow-x: clip;
			min-height:650px;
	}
		
		.grise {color:grey;font-size:smaller;}
		
	.titre {
    font-weight: lighter;
    font-size: x-large;
    padding: 20px;
	color:white;
	/* border-radius: 50px; */
	width:50%;
	    /*letter-spacing: 0.1rem;*/
	margin-bottom:0;
	margin-top: 10px;
	}
	.soustitre {
	/* margin-left: -20%.; */
    padding: 10px 20px 10px 20px;
	box-shadow: 0px 2px 10px 2px rgb(0 0 0 / 40%);
	/* background-color:#d96851; 	 */
	background-color: #ed1c24;
	/* color:black; */
	border-radius: 10px;
	display:inline-block;
	margin-inline:25px;
	/* min-width:50%; */
	 /* font-style:italic; */
	 max-width: 600px;
	 font-weight: bold;
	margin-bottom: 1em;
	cursor: pointer;
	}
	.textesoustitre {	
	border-radius: 5px;
	 font-weight: bold;
    background-color: white;
    color: #d96851;
    padding-inline: 15px;
    padding-block: 5px;}
	.nombChap {	background-color:white;	color:#d96851;padding:10px;border-radius: 45%;  font-size: x-large;    font-weight: bold;}
	.sousnombre {	background-color: black;
    color: #d96851;
    padding: 12px;
    border-radius: 20px;
    font-size: large;font-style:normal;}
	
	
		/* ----------------------------------------------------------------------- */
	.menuReglages {
    display: none;
    position: absolute;
    top: 60px; /* Position initial au-dessus du lien de réglages */
    right: 5%;
    background-color: #000000bd;
	color:white;
    border: 1px dashed #aaa;
    padding: 10px;
    z-index: 1000;
    animation: slideDown 0.3s ease; /* Animation de déroulement */
}

		@keyframes slideDown {
			from {
				top: 30px; /* Position initial (cachée en haut) */
			}
			to {
				top: 60px; /* Position finale (juste en dessous du lien de réglages) */
			}
		}

		.reglagesHaut:focus-within .menuReglages {
			display: block;
			animation: none; /* Désactiver l'animation lorsque le menu est affiché */
			opacity: 1;
		}

		.menuReglages ul {
			list-style-type: none;
			padding: 0;
			margin: 0;
		}

		.menuReglages ul li {
			margin-bottom: 5px;
		}	
		.menuReglages ul li:hover {
		    border-bottom: deepskyblue solid thin;
			/* background-color: black; */
		}

		.menuReglages a {
			text-decoration: none;
			color: inherit;
			display: block;
			padding: 5px;
		}
		
	.reglagesHaut
	{	 position:absolute;text-decoration:none;color:inherit;	}
	#reglages { right:5%;			display:none;}
	#aide {	 left:5%;}
	#aide, #reglages {	top:30px;}
	
		/* ----------------------------------------------------------------------- */
	
	#logoQaydah	{	display:block;}
	
	span#titreSwitch {
	display: block;
    margin-top: 1rem;
    margin-bottom: -2rem;
    color: yellowgreen;
    font-family: sans-serif;
	}
	
	#toggles {	    
	/* margin-top: 1em; */
    background-color: #fffbc317;
    padding-block: 5px;
    border-radius: 10px;
    margin-inline: 5%;*
	}
	
	#switch_langue, #switch_typeL
{
	display:	inline-block;
	/* margin-top:	1em; */
	/* background-color: 	rgba(0,0,0,.05); */
	    padding: 0.3em 0em;
	margin-inline: 0.9em;
}

	.centrerHorizontalement 
	{
			display: flex;
			align-items: center;
			justify-content: center;
			/* margin-top: 10px; */
			background-color: #ffffff29;
			padding-block: 10px;
	}
			.jourSetP { 
			text-decoration:none;
			padding-inline: 15px;
			padding-block: 20px;
			max-width:35%;
			min-width:16%;
		    display: flex;
			background-color: #363226;
			color: white;	/* #f4e6bc */
			z-index: 2;
			position: relative; /* pour z-index */  
			transition: transform 1s ease; /* Transition pour le déplacement */
			 	}
		
		.jourSetP:active { 
			/* box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); */
			border-block: solid;
			margin-left: -20px;
		}
		
		#lectureAudioPageEntiere
		{
			position: relative;
			z-index: 1;
			display:none;
			/* transform: translate(-50%, -50%); */
			/* bottom: 0; */
			/* top: 200px; */
		}
		
		#pagePrec
		{
			border-radius: 0 50px 25px 0;
			/* outline: inset; */
			/* border-block-end-style: inset; */
			border-inline-end-style: outset;
			/* background: linear-gradient(-90deg, rgba(43,43,43,1) 0%, rgba(48,48,48,1) 70%, rgba(58,58,58,1) 100%); */
			background: linear-gradient(-90deg, rgb(170 135 5) 0%, rgb(180 140 7) 60%, rgb(190 150 14) 100%)
		}
		#pagePrec:active	{	transform: translateX(-40px); /* Déplacer le bouton à gauche de 20px */	}
		#pageSuiv:active	{	transform: translateX(40px); /* Déplacer le bouton à gauche de 20px */	}
		
		#pagePrec:active, #pageSuiv:active{	
			background:grey;
		}
		
		#pageSuiv
		{
			border-radius: 50px 0 0 25px;
			/* outline: ridge; */
			/* border-block-end-style: inset; */
			border-inline-start-style: inset;
			/* background: linear-gradient(90deg, rgba(43,43,43,1) 0%, rgba(48,48,48,1) 70%, rgba(58,58,58,1) 100%); */
			background: linear-gradient(-90deg, rgb(170 135 5) 0%, rgb(190 150 14) 60%, rgb(180 140 7) 100%);
		}
		#pageSuiv, #pagePrec	{border-color: deepskyblue;    border-width: thick;}
		
		#PageSelect
		{
		    padding: 10px;
			margin-inline: auto;
			font-size: large;
			position: relative;
			border-radius: 5px;
			text-align: center;
	}
		
		/* .mosaique {	margin:-11px;	} */
		
		.lettre_mot	{	width:30%;vertical-align: middle;}
		footer { text-align:center;       /*bottom: 0;border-top-style: ridge; background-color: #8c7500;	*/ color:white;}
	
		.lienTransparent {	text-decoration:none;	color:inherit;	}
		small {	font-size:xx-small;color:initial;}
	
		#contact_footer	{	
		    background: radial-gradient(circle at 50%, #9D7A08, #806800);
    margin-inline: 4%;
    padding: 20px;
    border-style: dashed;
	border-width: 2px;
    border-color: #f4e6bc;
    border-radius: 40px;
	}
	
	.pageSVG {
    transition: transform 0.3s ease; /* Ajouter une transition pour une animation fluide */
}
	
/* ------------------------------------------------------------------------------------------------	 */

@media screen and (min-width: 701px) {
			#page {   border-image-outset: 10px;}
			.titre	{	width:20%;	}
			.soustitre	{	min-width: 10%;   max-width: 60%;	}
			
			.pageSVG  {	    width: -webkit-fill-available;	}
			
			   #snackbar 
		{
               transition: all ease 2s;
					bottom: 80%;
					left: 80%;
		}
		
			#lectureAudioPageEntiere
	{
				margin-block: 25px;
				width: 450px;
	}
	
	#toggles { margin-inline:15%;	}
}

	#pauseValue,#repetitionsValue	{	font-weight:bold;color:white;	}
	
	

	/* ------ REGLAGES DE L AUDIO DE LA PAGE ENTIERE ------- */
	
	#pause {	    text-align: left;}
	/* #pauseInput	{	    float: inline-start;	} */
	#repetition {	    text-align: left;	}
	/* #repetitionsInput {	    float: inline-end;	} */
	
	/* Positionner les labels au dessus des ranges */
#settingsForm label {
  display: block;
  margin-bottom: 5px;
          color: #cadfa0;
    font-family: Open Sans;
}
#settingsForm  {
  background-color:#0000001f;
  /* margin-inline: 10px; */
  padding-block: 20px;
}

/* Div contenant les ranges */
.audioSettings {
	/* visibility:hidden; */
  display: inline-block;
  margin-inline: 1.1em; /* Marge entre les ranges */
  margin-bottom:10px;
}

.audioSettings > .icones-g, .audioSettings > .icones-d  {
	
    line-height: 90%;
	font-size: 1.3em;
	background-color: #2c2c2c;
    border-radius: 5px;
}

.icones-g
{
		float: inline-end;
}
.icones-d
{
		float: inline-start;
}

/* Positionner les ranges côte à côte */
.audioSettings input[type="range"] {
  display: inline-block;
  vertical-align: middle;
  width: 8em;
}

/* Div contenant les boutons */
.button-group {
  /* display: inline-block; */
  display: block;
  padding-bottom: 1em;
}

/* Ajuster la taille, la forme et la position des boutons selon le design iOS */
.button-group button {
	
	display: inline-block;
  padding: 10px 20px;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère */
  transition: background-color 0.5s ease;
  font-weight:bold;
  vertical-align: -webkit-baseline-middle;
}

.button-group button:active 
{
	border-inline: solid 3px #edd99e;
}

#playPauseButton
{	
		background-color: #007aff; /* Couleur bleue par défaut d'iOS */
}
	
#playPauseButton:hover {
  background-color: #0056b3; /* Couleur bleue plus foncée au survol */
}
#finAudios:hover {
  background-color: orange; /* Couleur bleue plus foncée au survol */
}

#reglagesAudios,#finAudios	 {	
	/* vertical-align: top; */
    padding: 6px;
	background-color: transparent;
}

/* #reglagesAudios{		color:black;	} */
#finAudios{		color:red;	}
		
	
#reglagesAudios:active {
  background-color: yellow; 
}

#playPauseButton:focus {
  outline: none; /* Supprimer le focus par défaut */
}

	
	
	/* ------ REGLAGES DE L AUDIO DE LA PAGE ENTIERE ------- */


			
			/* - */
			/* - */
			/* - */
			/* - */
			/* - */
			/* RESPONSIVE DESIGN */
			/* - */
			/* - */
			/* - */
			/* - */
			/* - */
			/* - */
			
			
@media screen and (min-width: 1000px) {
	#page {      border-image-source: url("../images/mosaique_horizontale_double2.png");
    border-image-outset: 7px;}
	
	.jourSetP { 
		/* width:30%;  */
		padding-inline: 0px;
		border-radius: 30px !important;
		margin-top: -10%;
		
	}
	
	#pagePrec	{	    margin-left: 14%;	}
	#pageSuiv	{	    margin-right: 14%;	}
	
	#PageSelect	{	    margin-top: -80px;	}
	
	#lectureAudioPageEntiere
	{
				width: 500px;
	}
	
		#contact_footer	{	margin-inline:30%;	}
		
			#toggles { margin-inline:20%;	}
}
			
@media screen and (min-width: 1200px) 
{
	.pageSVG
	{
		width:40%;
	}

	#toggles { margin-inline:30%;	}
	
	#aide
		{
			left: 30% !important;
		}
		#reglages,.menuReglages 
		{
			right: 30%  !important;;
		}
}


		
		/* version MOBILE uniquement */
	@media screen and (max-width: 700px) 
	{	
		.pageSVG
		{
			/* margin-block: 20%; /* en mode mobile */ 
			width: 100%;
			margin-block: 20%; /* en mode mobile */
			/* transform: scale(1.28); /* zoom  */ 
		}
		
		.pageSVG,area::after {
			transform: scale(1.28); /* zoom  */	
		}
		
		area::after {
			border-radius:10px;
		}
		
		#PageSelect
		{
			max-width:110px;
		}
			
		#lectureAudioPageEntiere
		{
				min-width: 130%;
				right: 15%;
				transform: scale(0.6);
				    margin-bottom: -75px;
				margin-top: 20px;
		}
		
		#settingsForm
		{
			/* margin-top:10px; */
		}
		
	}
	
	@media screen and (min-width: 700px) and (max-width: 768px) 
	{	
		.pageSVG
		{
			width:100%;
		}
	}
	
	@media screen and (max-width: 768px) 
	{	
		#entete
		{
			margin-bottom:1em;
		}
	}
	
	@media screen and (min-width: 768px) 
	{	
		#entete
		{
			margin-bottom:1.5em;
		}
		#aide {	left:20%;	}
		#reglages,.menuReglages 	{right:	20%;	}
		
		.audioSettings input[type="range"] {			  width: auto;			}
		.audioSettings {	margin-inline: 3em;	}
		#settingsForm	{	margin-inline:13%;	}
		
		.centrerHorizontalement		{			padding-block: 0;	}
	}
	
	@media screen and (min-width: 769px) and (max-width: 999px) 
	{	
		.pageSVG
		{
			width:80%;
		}
	}
@media screen and (min-width: 1000px) and (max-width: 1199px) 
	{	
		.pageSVG
		{
			width:50%;
		}
		
	}