/* Le container général du jeu */
#course-aux-nombres section div#container-coursenombres {
    background: linear-gradient(90deg,#97a97c,#cfe1b9, #97a97c ) ;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    display: grid;
    place-items: center;        /* centre le contenu (horizontalement et verticalement) */
    margin: 0;      /* enlève les marges du body */
}
#course-aux-nombres section header {
    display: flex;
    flex-direction: column;
    align-items: center;        /* centre horizontalement */
    justify-content: center;        /* centre verticalement */
}
#course-aux-nombres section h1{
    text-align: center;
    font-size: 80px;
    color: #f3d17c;
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5) ;
    margin: 10px;
}
#course-aux-nombres section .info_jeu{
    display: flex; 
    justify-content: center;        /* centre les éléments horizontalement */ 
    gap: 5px;       /* pour réduire l'espace entre les éléments */
}

#course-aux-nombres section .base {
    background: #f3d17c;
    border-radius: 10px;
    border: 5px #cf9963 solid;
    padding: 20px 150px;        /*modifie la longeur et largeur*/
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
    display: grid;      
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 10px 10px 50px;
    gap: 150px;     /*pour avoir un espace entre les cases*/
    place-items: center;        /* centre le contenu */
    margin-bottom: 50px;
    grid-row-gap: 100px;        /* pour qu'il y ait moins d'espace entres les lignes */
    
}
#course-aux-nombres section #message {
    grid-column: span 3;        /* pour qu'il prenne 3 colones */
    height: 100px;
    width: 300px;       
    background-color: #f8961e;
    border: 5px #bb3e03 solid;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    font-size: 30px;
    text-align: center;
    display: flex;      /* centre le texte à l'intérieur de la case */
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    
}
#course-aux-nombres section .centaine_t{
    font-size: 30px;
    color: #9a5771;
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5) ;

}
#course-aux-nombres section .dizaine_t{
    font-size: 30px;
    color: #8a5aa6;
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5) ;

    
}
#course-aux-nombres section .unite_t{
    font-size: 30px;
    color: #486782;
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5) ;


}
#course-aux-nombres section .centaine_c {
    height: 100px;
    width: 200px; 
    background-color: #ffc8dd;
    border: 5px #9a5771 solid;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    font-size: 30px;
    color: #9a5771;
    text-align: center;     /*centre le texte */

}
#course-aux-nombres section .dizaine_c {
    height: 100px;
    width: 200px; 
    background-color: #e2afff;
    border: 5px #8a5aa6 solid;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    font-size: 30px;
    color: #8a5aa6;
    text-align: center;     /*centre le texte */


}
#course-aux-nombres section .unite_c {
    height: 100px;
    width: 200px; 
    background-color: #bde0fe;
    border: 5px #486782 solid;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    font-size: 30px;
    color: #486782;
    text-align: center;     /*centre le texte */

}
#course-aux-nombres section #chiffre_random {
    font-size: 30px;
    width: 80px; 
    grid-column: 1/4;       /*pour dire à quel place il va au niveau de la largeur (début/fin)*/
    background-color: #f8961e;
    border: 5px #bb3e03 solid;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    text-align: center;     /*centre le texte */

}
#course-aux-nombres section button {
    grid-column: 1 / 4; /* poue dire quel place il prend */
    place-items: center; /* centre le contenu */
    padding: 10px 20px;
    background-color: #f07167;
    border: 5px #9b2226 solid;
    border-radius: 10px;
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;  
}
#course-aux-nombres section button:hover {
    background-color: #99e2b4;
    border: 5px #358f80 solid;

}
#course-aux-nombres section .t_and_s{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
}
#course-aux-nombres section .timer_score{
    font-size: 30px;
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5) ;
    color: #f8961e;
    -webkit-text-stroke: 2px #bb3e03;       /* bordure autour du texte */
}
#course-aux-nombres section #timer {
    background-color: #f8961e;
    border: 5px #bb3e03 solid;
    border-radius: 10px;
    font-size: 25px;
    width: 50px; 
    place-items: center;
    padding: 10px 20px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    max-width: 200px;            /*limite la taille de la case*/
    text-align: center;         /*centre le texte */
    margin: 5px;
}
#course-aux-nombres section #score {
    background-color: #f8961e;
    border: 5px #bb3e03 solid;
    border-radius: 10px;
    font-size: 25px;
    width: 50px; 
    place-items: center;
    padding: 10px 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    max-width: 200px;
    text-align: center;         /*centre le texte */
    margin: 5px;    
}
#course-aux-nombres section #bouton_start {
    display: flex;            /* utiliser flexbox pour centrer */
    justify-content: center;  /* centrer horizontalement */
    align-items: center;      /* centrer verticalement */
    text-align: center;       /* centre le texte */  
    margin: auto;
}


/*Pour l'animation du titre*/
#course-aux-nombres section .title-word {
    animation: color-animation 4s linear infinite;
  }
  
 #course-aux-nombres section .title-word-1 {
    --color-1: #590d22;
    --color-2: #240046;
    --color-3: #03045e;
  }
  
 #course-aux-nombres section .title-word-2 {
    --color-1: #c9184a;
    --color-2: #5a189a;
    --color-3: #0077b6;
  }
  
 #course-aux-nombres section .title-word-3 {
    --color-1: #ff758f;
    --color-2: #9d4edd;
    --color-3: #00b4d8;
  }
  
 #course-aux-nombres section .title-word-4 {
    --color-1: #ffb3c1;
    --color-2: #e0aaff;
    --color-3: #90e0ef;  
}
		
  
  #course-aux-nombres section @keyframes color-animation {
    0%    {color: var(--color-1)}
    32%   {color: var(--color-1)}
    33%   {color: var(--color-2)}
    65%   {color: var(--color-2)}
    66%   {color: var(--color-3)}
    99%   {color: var(--color-3)}
    100%  {color: var(--color-1)}
  }