/*

	ANIMATIONS CSS
		> https://www.theappguruz.com/tag-tools/web/CSSAnimations/
		> https://animista.net/play/attention/pulsate/pulsate-fwd


*/

/* body { */
  /* display: flex; */
  /* min-height: 100vh; */
  /* flex-direction: column; */
/* } */

/* main { */
  /* flex: 1 0 auto; */
/* } */

:root {
    --police-lecture: 'me_quran';
}


	#affichage
	{
		
		    padding-block: 10px;
	}

	.numChap {
    font-size: initial;
    color: initial;
    background-color: var(--baraw-chapitre);
    padding: 6px 10px;
    border-radius: 5px;

	}	
	
	#themeChapitre 
	{
		
	font-style: oblique;
    color: slategrey;
	}
	
	#motSelectModalIOS 
	{
		    color: #08a9de;
    display: block;
    line-height: 3em;
	}

nav .img-icon
{
	width:auto;
	height: 60px;
	vertical-align: middle;  /* aligne l'image verticalement avec le texte */
}

.img-icon
{
	width:60px;
	height: auto;
	margin-right: 1rem;
}


    body, nav, header  {
      padding-left: 150px;
    }
	
	

    @media only screen and (max-width : 992px) 
	{
      body, nav, header, main {
        padding-left: 0;
      }
    }
	
	
	
	
	footer 
	{
		color: white;
		background-image: radial-gradient(circle at center left, rgb(60, 60, 60) 0%, rgb(60, 60, 60) 6%,rgb(55, 55, 55) 6%, rgb(54, 54, 54) 27%,rgb(45, 45, 45) 27%, rgb(44, 44, 44) 42%,rgb(40, 40, 40) 42%, rgb(39, 39, 39) 63%,rgb(35, 35, 35) 63%, rgb(34, 34, 34) 64%,rgb(30, 30, 30) 64%, rgb(29, 29, 29) 71%,rgb(25, 25, 25) 71%, rgb(24, 24, 24) 100%);
	}
	
	footer li a img {	    vertical-align: middle;	width: 40px;} /*footer*/
	
	#chapterContent2, #chapterContent
	{
			/* direction: rtl; */
	}
	
	.selectLabel
	{
		top: auto !important;
	}
	
	.small-text {	 font-size: small !important; /* Ajustez la valeur selon vos besoins */	}

	#options
	{
		padding-block:1.5em;
		padding-inline: 25px;
		/* margin-block:1rem; */
		border-radius:35px	;
		
	}
	
.caseArabe, .caseArabe a, .lienArabe, .lienArabe a
{ 
	direction: rtl;
	text-decoration:none;
	color: var(--md-sys-color-on-background);
    text-align: right;
    font-size: large;
    letter-spacing: 0.5px;
	/* float:right; */
	font-family: var(--police-vocabulaire);
} 

.collection-item.caseArabe, .collection-item.caseArabe a
{
	font-size: large;   
	line-height: 3rem;
	word-spacing: 0.2em;
    font-family: var(--police-lecture);
}

/* HARAKAT VOYELLES COLORIZED */
.harakat {
    position: relative;
}

.harakat.kasra {
    top: 0.1em; /* Plus bas que les autres */
	color: var(--baraw-kasra);
}

.harakat.dammah {
    top: -0.2em; /* Plus haut que les autres */
	color: var(--baraw-dammah);
}
.harakat.fatha {
	color: var(--baraw-fatha);
}
.harakat.soukoun {
	color: var(--baraw-soukoun);
}
.harakat.tachdid {
	color: var(--baraw-tachdid);
}
.harakat.default {
    top: -0.1em; /* Légèrement au-dessus par défaut */
}


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

table td 
{
		/* font-size: larger; */
}

 table#vocabTotal {
	 
	 margin-top: 1em;
 }
 
 table#vocabTotal  th {	   
 text-transform: capitalize;
    font-size: large;
    letter-spacing: 0.05rem;
 }

.lienFrancais {
	font-weight: bold;
		/* color: darkblue; */
	}
	
	  .fixed-action-btn#lancerGO  > .btn-floating  {     border: solid white medium; border-radius: 50%;  
    border-bottom: ridge; } 
	.fixed-action-btn#lancerGO  > .btn-floating > i.material-icons {       padding-right: 3px;} /* a cause de la bordure rond epaisse ca decale */
	  
	  #abrevLang
	  {
		    left: 8px;
			font-size: smaller;
			font-weight: bold;
			text-align: center;
			bottom:14px;
		  
	  }
	  
	  /* logo langue dans rechercher >> bascué sur iconLang*/
	 .input-field  .material-icons.prefix
	  {
		  /* left: 25px; */
		/* top: 12px; */
	  }
	  
	 
	  
	  .langueFR 
	  {
		      background: linear-gradient(90deg, rgba(0, 0, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 0, 0, 1) 100%);

	  }
	  
	  .langueAR
	  {
		 color: green;
	  }	  
	  
	  .langueEN
	  {
		 background: linear-gradient(45deg, #00247d, #ffffff, #cf142b);
	  }
	  
	   .langueFR, .langueEN 
	  {
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
	  }
	  
	  .auMilieu {	vertical-align: middle;	
    font-size: large;}
	
	.rotate {
            transform: rotate(360deg); 
		  transition: transform 0.4s; /* Transition pour l'animation */
        }
	
	#iconLang
	{
		left: 25px;
		top: 12px;
	}
	
	.pulsate {
	-webkit-animation: pulsate 0.3s ease-out both;
	        animation: pulsate 0.3s ease-out both;
}
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
		-webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


/* --------------------- MODAL ------------------------*/
.icone {	     cursor: pointer;
    border-radius: 10px;
    border-style: none;
    padding-inline: 15px;
    padding-block: 10px;
	margin-inline: 5px;    margin-top: 10px;
	color: #333;
	}
	.qourane {	    background-color: powderblue;		}		.qouraneRacine {	    background-color: aliceblue;		}	.hadith	{	background-color: #fcf09d;		}
		/* .modal {	 	padding:	30px 10px !important;	} */

	/* // CONJUGAISON  */
	
	#conjugation-table {	font-family: var(--police-lecture); /*DroidNash-colored;*/	/*direction:rtl;	*/    font-size: larger;}
	#modalTitle{	font-family: Amiri-colored;    text-align: center;	}
	
	#tableConj th 	{	vertical-align:middle;	    font-size: medium;}
	
	#conjugation-table tr td:first-child {    font-weight: bold;    /* color: var(--md-sys-color-inverse-surface); */border-right-width: medium;
    letter-spacing: 1px;} /* background-color: #cff5ffb3;	 */
	#conjugation-table tr td:nth-child(odd):not(:first-child) {       background-color: var(--baraw-tableau-fond); /* Couleur de fond des colonnes impaires */	}
	#conjugation-table td {   border-right: solid black thin;    text-wrap-mode: nowrap;	    font-size: large;	}
	.trad-temps {	font-size:smaller;	font-weight:normal;	background-color: #483d8b0a;	}
	
	.titreVerbe {	font-size: x-large; color: royalblue;}
	td.pronomsFem {	background-color: blanchedalmond;	}
	td.pronomsMasc {	background-color: powderblue;	}
	td.pronomsFem, td.pronomsMasc	{	color:black;	}
	
	#chips-conjugaison	{	line-height:3em;	font-family:'Simple-colored';}
	#suggest-table .verbSuggest {	font-size:large;font-family: Al_QalamQM;	}
	
	
	/* ANIMATIONS */
	
	/* Classe pour appliquer une couleur de fond temporaire */
.highlight-background {    background-color: yellowgreen;     transition: background-color 0.5s ease;	}
/* Classe pour rétablir la couleur de fond initiale */
.fade-background {    background-color: transparent;    transition: background-color 0.5s ease;	}

	
@keyframes slideZoomIn {
    from {
        opacity: 0;
        transform: translateX(-50px) scale(0.8); /* Glisse de la gauche avec un zoom */
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1); /* Position et échelle normales */
    }
}
	
/* Appliquer une animation à toutes les lignes */
#tableConj tbody td, #suggest-table a  {
    opacity: 0; /* Caché par défaut */
    animation: slideZoomIn 0.6s ease forwards;
}
 #suggest-table a {
   animation-delay: 0.2s;
}

	

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

#loading-icon {
       display: none;
    /* justify-content: center; */
    /* align-items: center; */
    position: fixed;
    top: 50%;
    left: 40%;
    transform: scale(3);
	/* z-index: 1000; */
}