/* Conteneur Clavier */
    #keyboard-overlay {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: var(--md-sys-color-background);
      z-index: 1000;
      box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
      padding: 10px;
      border-radius: 8px 8px 0 0;
    }
	
	
    #arabic-keyboard {
      max-width: 700px;
      margin: 0 auto; /* Centre le clavier horizontalement */
    }

    .keyboard-row {
      display: flex;
      justify-content: center;
      gap: 4px;
      margin: 8px 0;
    }

    .key, .key-action {
	 margin-block: 5px;
    flex: 1;
    max-width: 40px;
    text-align: center;
    padding-block: 15px;
      cursor: pointer;
      border-radius: 6px;
      background-color: #f0f0f0;
      box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
      transition: background-color 0.1s ease, transform 0.1s ease;
	      color: var(--md-sys-color-scrim);
	     font-family: 'DroidNash-colored';
		 font-size: larger;
		 
    }
	
	@media (min-width: 768) {	
	
		  .key, .key-action {  max-width: 50px;	}
	}
	
	@media (min-width: 1025px) {
	
	  .key, .key-action {  max-width: 60px;	
	 margin-block: 0;}
	}

    .key:hover, .key-action:hover {
      background-color: cyan;
    }

    .key:active, .key-action:active {
         background-color: var(--baraw-chapitre);
      transform: scale(0.95);
    border: solid thin green;
    }

    .key-action {
	  max-width: 80px;
    font-weight: bold;
    /* text-align: center; */
    justify-content: center;
    }
	
	  /* Position des boutons Retour et Entrer */
    #keyboard-header {
      display: flex;
      justify-content: space-evenly;
      margin-block: 10px;
    }
	
	/* pour rendre swipeable si trop large*/
	.table-scroll {
  overflow-x: auto;
  width: 100%;
  position:relative;
}

.table-scroll table {
  min-width: max-content;
  border-collapse: collapse;
}

/* PRONOMS */
/* quand le tableau est en LTR -> fixe à gauche */
#tableConj[dir="ltr"] #conjugation-table tr td:first-child {
  left: 0;
  right: auto;
}

/* quand le tableau est en RTL -> fixe à droite */
#tableConj[dir="rtl"] #conjugation-table tr td:first-child {
  right: 0;
  left: auto;
}


/* couleurs */
:root{
  --colMasc: #b0e0e624;
  --colFemn: #ffebcd21;
}

/* --- Groupes de 3 lignes alternés (3 A, 3 B, 3 A, ...) --- */
/* On cible les lignes dans #conjugation-table et on exclut les 2 dernières lignes */
#conjugation-table tr:nth-child(6n+1):not(:nth-last-child(-n+2)) td:not(:first-child),
#conjugation-table tr:nth-child(6n+2):not(:nth-last-child(-n+2)) td:not(:first-child),
#conjugation-table tr:nth-child(6n+3):not(:nth-last-child(-n+2)) td:not(:first-child){
  background-color: var(--colMasc);
}

#conjugation-table tr:nth-child(6n+4):not(:nth-last-child(-n+2)) td:not(:first-child),
#conjugation-table tr:nth-child(6n+5):not(:nth-last-child(-n+2)) td:not(:first-child),

#conjugation-table tr:nth-child(6n+6):not(:nth-last-child(-n+2)) td:not(:first-child){
  background-color: var(--colFemn);
}

button.btn-quiz {
		width : 100%;
      font-size : x-large;
      font-family : Simple-colored;
      margin-bottom : -0.5em;
      direction : rtl;

	}


	/* // CONJUGAISON  */
	
	#conjugation-table {	font-family: var(--police-lecture); /*DroidNash-colored;*/	/*direction:rtl;	*/    font-size: larger;}
	#modalTitle{	font-family: Amiri-colored;    text-align: center;	}
	#detailsVerbe {	font-family: Simple-colored;    text-align: center;	    font-weight: bold;}
	
	#tableConj th 	{	vertical-align:middle;	    font-size: medium;}
	
	/* Colonne de PRONOMS */
	#conjugation-table tr td:first-child { 
	font-weight: bold;   
    font-family: 'DroidNash-colored';
	/* color: var(--md-sys-color-inverse-surface); */
	border-right-width: medium;
    /* letter-spacing: 1px;  */
	border-bottom:hidden;
	  position: sticky;
		z-index: 3;
	} /* 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;
    border-bottom: hidden;	}
	.trad-temps {	font-size:smaller;	font-weight:normal;	background-color: #483d8b0a;	}
	
	.titreVerbe {	font-size: x-large; color: royalblue; font-family: Amiri-colored;}
	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;	}
	
	/* 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;
}