/**********************************************************************/
 /* Commun à toutes les pages */
 /**********************************************************************/

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Permet le défilement horizontal mais empêche le défilement vertical */
  overflow-y: hidden;

  width: 100%; /* Assure que la largeur du body prend bien toute la largeur de la fenêtre */
  height: 100vh; /* Hauteur fixe pour éviter le défilement vertical */
  color: whitesmoke;
}

/* -------------------- Structure des pages ------------------------- */

/* Contient toutes les pages */
.container {
  position: relative;
  width: 800vw; 
  height: 100vh;
  background-color: #f7ede2;
}

/* Dimensions d'une page */
.rectangle {
  display: flex;
  justify-content: center; /* Centrer horizontalement */
  align-items: center; /* Centrer verticalement */

  position: absolute;
  width: 100vw;
  height: 100vh;   
}

/* Dimensions de base d'une page */
.interieurRectangle {

  display: flex;
  justify-content: center; /* Centrer horizontalement */
  
  
  position: absolute;
  width: 95vw;
  height: 90vh;

  border-radius: 60px;
  background-color: #0e1229ef;
  box-shadow: 0.5vw 0.5vh 50px rgba(1, 5, 40, 0.901);
}

/* Dimensions de la page d'accueil */
.interieurRectangle_accueil {

  width: 85vw;
  height: 90vh;
}

/* Contener des pages vides */
.contenerParent {
  background-color: #c8331f00;
  display: flex;

  flex-direction: column; /* Aligner les conteneurs verticalement */
  height: 90vh; /* Assure que le conteneur principal occupe toute la hauteur de la fenêtre */
  width: 90vw;
  
}
.contenerEnfant_haut {
  background-color: #4df61000;
  width : 90vw;
  height: 10vh;
  align-items: center;
  justify-content: center; 
  padding-left: 10vh;
}
.contenerEnfant_bas {
  background-color: rgba(137, 43, 226, 0);
  width : 141.5vh;
  height: 90vh;
  align-items: center;
  justify-content: center; 

  padding-left: 35vw;
  padding-top: 25vh;
  
}


/* -------------------- Gestion des boutons ------------------------- */
.pageSuivante {

  background-image: url('images/Fleche_Droite.png');
  background-size: contain; /* Redimensionne l'image pour qu'elle soit contenue entièrement dans le bouton */
  background-repeat: no-repeat;

  background-color: #0a060100;
  border: none;
  
  position: absolute;
  top: 45vh;
  left: 85vw; 
  height: 8vh; /* Hauteur du bouton ajustée pour être moins intrusive */
  width: 8vw; /* Largeur du bouton ajustée */
  cursor: pointer; /* Change le curseur pour indiquer qu'il s'agit d'un bouton cliquable */
  font-size: 50px;
}

.pageSuivante_Page1 {
  left: 40vw; 
  margin-top: 9vw;
}

.pagePrecedente {

  background-image: url('images/Fleche_Gauche.png');
  background-size: contain; /* Redimensionne l'image pour qu'elle soit contenue entièrement dans le bouton */
  background-repeat: no-repeat;

  background-color: #0a060100;
  border: none;
  
  position: absolute;
  top: 45vh;
  left: 2vw; 
  height: 8vh; /* Hauteur du bouton ajustée pour être moins intrusive */
  width: 8vw; /* Largeur du bouton ajustée */
  cursor: pointer; /* Change le curseur pour indiquer qu'il s'agit d'un bouton cliquable */
  font-size: 50px;
}

.btnReload {

  height: 2vw;
  width: 2vw;
  border-radius: 120px;
  margin-bottom: 1vw;
  background-color:  #ffeba500;
  border: 10px solid  #ffeba5;
}

.btnReload:hover {

  height: 2vw;
  width: 2vw;
  border-radius: 120px;
  margin-bottom: 1vw;
  background-color:  #be8706;
  border: 10px solid  #ffeba5;

}

.btnIndice {

  height: 2vw;
  width: 2vw;
  border-radius: 120px;
  margin-bottom: 1vw;
  background-color:  #ffeba500;
  border: 10px solid  #ffeba5;

}

.btnIndice:hover {

  height: 2vw;
  width: 2vw;
  border-radius: 120px;
  margin-bottom: 1vw;
  background-color:  #be8706;
  border: 10px solid  #ffeba5;

}

 /**********************************************************************/
 /* Pop-up de message */
 /**********************************************************************/

 /* Style pour la modale */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(46, 31, 50, 0.922);
  
}

/* Contenu de la modale */
.modal-content {
  background-color: rgb(31, 24, 55);
  margin: 20vh auto;
  padding: 3vh;
  border: 0.1px solid  #ffeba5;
  width: 30%;
  border-radius: 60px;

  text-align: center;
  align-items: center;
}

/* Bouton pour fermer la modale */
.close {
  color: rgb(14, 2, 41);  
  
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.5vh;


  background-color:  #ffeba5;
  
  height: 3vh;
  width: 8vw;
  border-radius: 60px;

  margin-top: 2vh;
  
  
}

.close:hover {
  color: black;
  background-color:  #e36d3f;
  text-decoration: none;
  cursor: pointer;
  
}

.titreModale {  
  font-size: 5vh;
  font-family: "mexcellent", sans-serif;
  margin-bottom: 1.5vh;
  color: #ffeba5;
}
.messageModale {
  color: #ffeba5;

  font-size: 2.1vh;
  font-family: 'Lucida Sans Unicode';

}
 /**********************************************************************/
 /* Page 1 - Accueil */
 /**********************************************************************/

.page1 { 
  
  background: linear-gradient(to bottom, #ffe388 0%, #ffeba5 30%, #ffeba5 60%, #ffeba5 60%, #ffe388 100%);
 
  left: 0vw; /* Position de départ de la première page */
}
.cacherBouton {
  display: none;
}

/* -------------------- Structure de la page ------------------------- */
.containerPage1 {
  background-color: #00fa2a00;
  display: flex;
  flex-direction: column;
  height: 20vh;
  width: 70vw;
  padding-top: 15%; /* Réduire l'espace en haut */
  padding-bottom: 15%; /* Réduire l'espace en bas */
  justify-content: center; /* Centrer verticalement le contenu */
  text-align: center;
}

/* -------------------- Hiérarchie des textes ------------------------- */

.h1 {
  color: #ffeba5;

  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-size: 8vw;  
  font-weight: 900;
  

  margin-bottom: 30px; /* Supprimer la marge en bas */
}

.h2 {
  color: #ffeba5;
  font-size: 1.5vw;

  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;

  margin-top: 0; /* Supprimer la marge en haut */
  margin-bottom: 0; /* Supprimer la marge en bas */
}



 /**********************************************************************/
 /* Page 2 - Le graphique */
 /**********************************************************************/

 
.page2 { 
  
  background: linear-gradient(to bottom, #ffe388 0%, #ffeba5 30%, #ffeba5 60%, #ffeba5 60%, #ffe388 100%);
  left: 100vw; /* Décalage pour la deuxième page */
}

/* -------------------- Structure de la page ------------------------- */

.containerGeneral {
  display: flex;
  flex-direction: column; /* Divise le container en colonnes */  
  width: 70vw;
  height: 80vh;

  margin-top: 9vh;
  border-radius: 30px;
}

.section1 {
  text-align: center;
  color:#b53535;
  margin-top: 0px;
  background-color: #ff08e200;


}

.section2 {
  display: flex;
  background-color: #817ab100;
            
  align-items: center;     
  justify-content: center; 
  
  

}
.section3 {  
  background-color: #44e60a00;

}
.section4 {
                  /* Donne à la section 4 un tiers de l'espace */
  text-align: center;       /* Centre le texte dans la section4 */
 
  background-color: #96c5a100;

  margin-right: 5vw;
}

/* -------------------- Hiérarchie des textes ------------------------- */
.h2_P2 {
  color: #ffeba5;
 
   
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-size: 2vw;  
  font-weight: 900;

  margin: 1vh; /* Supprimer la marge en bas */
}
.h2_P2_minimum {
 
  color: #ffeba5;

  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-size: 4vw;  
  font-weight: 900;
}

.h2_P2_sousConsigne {
  color: #ffeba5;

  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-size: 1vw;  
  font-weight: 350;
}

.nb_P2 {

  color: #ffeba5;

  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-size: 3vw;  
  font-weight: 400;

  margin: 20px; /* Supprimer la marge en bas */
}
.p_nb_P2 {
 
  color: #ffeba5; 
  
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-size: 1vw;  
  font-weight: 400;

  margin: 20px;
}
.p_clics_P2 {
 
  color: #ffeba5;

  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-size: 1.2vw;  
  font-weight: 400;


  margin: 20px; /* Supprimer la marge en bas */
}

/* -------------------- Gestion du tableau ------------------------- */

.tabContainer {
                       
  width: auto;                   
  height: 15vh;
  border: 0px solid #ffeba541;
 
  justify-content: center;      
  align-items: flex-end;
  background-color: #45437800;
}

.table {
  background-color: #46437155;
 
  margin-left: 19vw;
  margin-top: 3vh;
  border-radius: 25px;
}

.celluleValue {
  background-color: #149e8000;
  height: 1vh;
  width: 5vw;
}

td {
  border-right: 10px solid #ffeba5;
  padding: 0vh;
  text-align: center;

  
  color: #ffeba5;
 
  background-color: #817ab100;

  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-size: 1.5vw;  
  font-weight: 800;

}

.td_Boutton {
  padding-top: 1vh;
}

th {
  border-right: 10px solid #ffeba5;
  padding-top: 1vh;
  padding-left: 1vh;
  padding-right: 1vh;
  text-align: center;

 
  color: #ffeba5;
 
  background-color: #7a9eb100;

  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-size: 1vw;  
  font-weight: 400;
}




th:last-child, td:last-child {
 border-left: none;   /*Supprime la bordure droite pour la dernière colonne */
 border-right: none;
 background-color: #a79d1600;
}

/* -------------------- Gestion du graphique ------------------------- */

.containerGraphique {
  width: 21vw;
  height: 30vh;
  border: 1px solid #ffeba541;
  display: flex;
  justify-content: space-between; /* ou tout autre style de disposition souhaité */
  align-items: flex-end;
  margin-right: 10vw;
  margin-top: 4vh;

  background-color:#c80b0b00 ;
  border-radius: 25px;
}

.bar {

  height: auto; /* ou supprimez complètement cette règle */
  width: 20px; /* ou toute autre largeur souhaitée */
  flex: 1;
  background-color: blue;
  margin: 0 10px;
  border-radius: 15px;
  transition: height 0.5s ease;
 
  background: linear-gradient(to bottom, 
  #df9a19 0%, 

  #df9a19 30%,  #df9a19 30%, 

  #df9a19 60%, #df9a19 60%, 

  #df9a19 80%, #df9a19 80%, 

  #df9a19 100%);
 }

 /**********************************************************************/
 /* Page 3 -  */
 /**********************************************************************/


.page3 {

  background: linear-gradient(to bottom, #ffe388 0%, #ffeba5 30%, #ffeba5 60%, #ffeba5 60%, #ffe388 100%);
 
  left: 200vw;
}

.text_P3 {

  text-align: center;
  font-size: 7vh;
  width: 80vw;
  height: 30vh;
  margin-top: 20vh;
  background-color: #6eaf7d00;
}

 /**********************************************************************/
 /* Page 4 -  */
 /**********************************************************************/

.page4 { 
  
  background: linear-gradient(to bottom, #ffe388 0%, #ffeba5 30%, #ffeba5 60%, #ffeba5 60%, #ffe388 100%);
 
  left: 300vw;
}

.text_P4 {

  text-align: center;
  font-size: 7vh;
  width: 80vw;
  height: 30vh;
  margin-top: 20vh;
  background-color: #6eaf7d00;
}


 /**********************************************************************/
 /* Page 5 -  */
 /**********************************************************************/

.page5 {
  
  background: linear-gradient(to bottom, #ffe388 0%, #ffeba5 30%, #ffeba5 60%, #ffeba5 60%, #ffe388 100%); 
  left: 400vw;
}


.text_P5 {

  text-align: center;
  font-size: 7vh;
  width: 80vw;
  height: 30vh;
  margin-top: 20vh;
  background-color: #6eaf7d00;
}

 /**********************************************************************/
 /* Page 6 -  */
 /**********************************************************************/

.page6 {

  background: linear-gradient(to bottom, #ffe388 0%, #ffeba5 30%, #ffeba5 60%, #ffeba5 60%, #ffe388 100%);
 
   left: 500vw;
}


.text_P6 {

  text-align: center;
  font-size: 7vh;
  width: 80vw;
  height: 30vh;
  margin-top: 20vh;
  background-color: #6eaf7d00;
}

 /**********************************************************************/
 /* Page 7 -  */
 /**********************************************************************/

.page7 {
  
  
  background: linear-gradient(to bottom, #ffe388 0%, #ffeba5 30%, #ffeba5 60%, #ffeba5 60%, #ffe388 100%);
 
  left: 600vw;
}

.text_P7 {

  text-align: center;
  font-size: 7vh;
  width: 80vw;
  height: 30vh;
  margin-top: 20vh;
  background-color: #6eaf7d00;
}
 /**********************************************************************/
 /* Page 8 -  */
 /**********************************************************************/

.page8 {
  
 background: linear-gradient(to bottom, #ffe388 0%, #ffeba5 30%, #ffeba5 60%, #ffeba5 60%, #ffe388 100%);
 
 left: 700vw; 
}

.text_P8 {

  text-align: center;
  font-size: 7vh;
  width: 80vw;
  height: 30vh;
  margin-top: 20vh;
  background-color: #6eaf7d00;
}