@media (max-width: 400px) {
    body {
  margin: 0;
  padding: 0; 
}

 .conteneur {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes */
    grid-template-rows:  1fr; /* Deux rangées: compte à rebours et le reste */
    gap: 20px;
    max-width: 100%;
    margin: 0;
    padding: 10px;
    max-height: 100%;
  }

 

  .compte-a-rebours-container {
    grid-column: 1/3; 
    grid-row: 1; /* Compte à rebours en première rangée */
    display: flex;
    align-items: top;
    justify-content: center; 
  }

  .boutons-container { /* Styles pour les boutons */
    grid-column: 2; /* Boutons dans la deuxième colonne */
    grid-row: 1; /* Boutons sur les deux rangées */
    margin-top: 360px;
    justify-content: left; 
    margin- right: 30px;
   
  }



#compte-a-rebours {
  display: flex; 
 justify-content: space-around;
  margin-top: 700px; /* Marge supérieure ajoutée */
  margin-left: 50px ;
}



 

  .gauche {
    align-items: flex-start; /* Aligner le contenu à gauche */
  }

 

  .bouton {
    display: block;
    width: 200%; /* Bouton prend toute la largeur */
  }

  button{
  background-color: #C0F511;
  margin: 30px; /* Ajoute une marge autour de chaque bouton */
  padding: 20px 30px; /* Ajoute un padding à l'intérieur de chaque bouton */
  color: black;
  border-radius: 20px;
}

  .cercle {
    margin: 10px 0; /* Ajuster les marges */
  width: 80px; 
  height: 80px;
  border-radius: 50%;
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  margin: 0 10px; 






  }
   .rose {
    background-size: cover; 
 height: 100vh;
 background-attachment: fixed;
     background-repeat: no-repeat; 
       background-image: url(./fillep.png);
  filter: brightness(1);
   margin: 0;
            padding: 0;

  }}























@media (min-width: 401px) and (max-width: 768px) {
    body {
  margin: 0;
  padding: 0; 
}

 .conteneur {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes */
    grid-template-rows:  1fr; /* Deux rangées: compte à rebours et le reste */
    gap: 20px;
    max-width: 100%;
    margin: 0;
    padding: 10px;
    max-height: 100%;
  }

 

  .compte-a-rebours-container {
    grid-column: 1/3; 
    grid-row: 1; /* Compte à rebours en première rangée */
    display: flex;
    align-items: top;
    justify-content: center; 
  }

  .boutons-container { /* Styles pour les boutons */
    grid-column: 2; /* Boutons dans la deuxième colonne */
    grid-row: 1; /* Boutons sur les deux rangées */
    margin-top: 360px;
    justify-content: left; 

   
  }



#compte-a-rebours {
  display: flex; 
 justify-content: space-around;
  margin-top: 700px; /* Marge supérieure ajoutée */
  margin-left: 50px ;
}



 

  .gauche {
    align-items: flex-start; /* Aligner le contenu à gauche */
  }

 

  .bouton {
    display: block;
    width: 200%; /* Bouton prend toute la largeur */
  }

  button{
  background-color: #C0F511;
  margin: 30px; /* Ajoute une marge autour de chaque bouton */
  padding: 20px 30px; /* Ajoute un padding à l'intérieur de chaque bouton */
  color: black;
  border-radius: 20px;
}

  .cercle {
    margin: 10px 0; /* Ajuster les marges */
  width: 80px; 
  height: 80px;
  border-radius: 50%;
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  margin: 0 10px; 






  }
   .rose {
    background-size: cover; 
 height: 100vh;
 background-attachment: fixed;
     background-repeat: no-repeat; 
       background-image: url(./fillep.png);
  filter: brightness(1);
   margin: 0;
            padding: 0;

  }}

@media (min-width: 769px) {
  body {
  margin: 0;
  padding: 0; 
}


.titre1{
  font-family: Bradley Hand, cursive,Trattatello, cursive,fantasy;
  color: white;
  font-size: 54px;
}

.rose{
  background-image: url(./fillebien.png);
  filter: brightness(1);

}

.titre2{
  font-family: arial;
  color: white;
  font-size: 54px;
} 

.titre3{
  font-family: arial;
  color: white;
}

.conteneur {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: repeat(5, minmax(80px, 1fr)); /* Hauteur minimale des rangées augmentée */
  gap: 20px; 

  margin: 0 ;
  padding: 10px;
 
}

.gauche {
  display: flex;           /* Utiliser Flexbox */
  flex-direction: column;  /* Organiser les éléments verticalement */
  align-items: center;    /* Centrer horizontalement */
  justify-content: space-around; /* Répartir l'espace verticalement */ 

}








.page2 {
  background-image: url(page2.png);
}

.compte-a-rebours-container {
  grid-column: 1; 
  grid-row: 5; 
  display: flex;
  align-items: center;
    grid-row: 2; /* Compte à rebours en première rangée */
}

#compte-a-rebours {
  display: flex; 
  justify-content: center; 
  margin-top: 500px; /* Marge supérieure ajoutée */
}

.cercle {
  width: 100px; 
  height: 100px;
  border-radius: 50%;
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  margin: 0 10px; 
}
.cercle  .valeur{
    font-size: 24px; 
  font-weight: bold;
}

.cercle .unite {
  font-size: 14px; 
}

.boutons-container {
  grid-row: 2; 
  display: flex; /* Utilise Flexbox pour l'alignement */
  justify-content: space-evenly; /* Espace les boutons uniformément */
  
  /*  Autres options pour 'justify-content' :
      - space-between : espacement maximum entre les boutons
      - space-evenly : espacement égal entre les boutons et les bords du conteneur
  */
  margin-top: 20px;
}
button{
  background-color: #C0F511;
 /* margin: 10px; /* Ajoute une marge autour de chaque bouton */
 padding: 30px 30px; /* Ajoute un padding à l'intérieur de chaque bouton */
  color: black;
  border-radius: 20px;
}
.boutons-container button {
  max-height: 40px; /* Ajustez la valeur selon vos besoins */
  margin:10px
  line-height: 0px
}

.survey{ justify-content: right;  color:black;background-color:yellow;}
.surv{background-color: yellow ;color: white; width: 10%; 
  height: 2px;
  margin: 0;
  padding: 20px;    align-items: bottom; 
}

}