input{
  all: unset;
  appearance: none;
  -webkit-appearance: none; /* pour Safari/Chrome plus anciens */
  border: none;
  background: none;
  outline: none;
}

body {

  background: -moz-linear-gradient(top, cyan, blue);

  background: -webkit-linear-gradient(top, cyan, blue);

  background: -o-linear-gradient(top, cyan, blue);

  background: linear-gradient(top, cyan, blue);



  background-size: cover;

  background-repeat: no-repeat;

  background-attachment: fixed;



  font-family: "Franklin Gothic Medium";

}



.div_head {

  position: relative;

  width: 90%;

  height: 70px;

  display: flex;

  align-items: center; /* Centrer verticalement */



  justify-content: center; /* Centrer horizontalement */

  text-align: center; /* Centrer le texte horizontalement */



  margin: auto;

  margin-top: 4px;



  border: 12px ridge #00ffff;

  border-radius: 10px;

  border-top: none;

}



.nom_titre{

  margin-left: 15px;



  font-size: 35px; /* Définir la taille du texte */

  color: white;

  font-weight: bold; /* Rendre le texte en gras */

  

  text-shadow: -1.3px -1.3px 0 black, 1.3px -1.3px 0 black, -1.3px 1.3px 0 black,

      1.3px 1.3px 0 black;

}



.counter_style, .aujourd_style, .heure_style, .heure{

  display: flex;



  position: relative;



  justify-content: center; /* Centrer horizontalement */

  text-align: center;



  font-size: 35px; /* Définir la taille du texte */

  color: white;

  font-weight: bold; /* Rendre le texte en gras */

  font-family: "Open Sans", sans-serif, arial;



}



.counter_style{

  margin-top: 15%;

}

.aujourd_style{

  margin-top: 10%;

}

.heure_style{

  margin-top: 5%;

}

.heure{

  margin-top: 8%;

}



ul {

  position: relative;

  list-style-type: none;

  display: flex;

}



li {

  position: relative;



  width: 200px;

  height: 40px;

  left: -18px;



  display: flex; /* Utiliser le modèle de boîte flexible */

  justify-content: center; /* Centrer horizontalement */

  align-items: center; /* Centrer verticalement */

  text-align: center; /* Centrer le texte horizontalement */



  /* margin-left: 85px; */

}



.barre_menu_link {

  margin: auto;

  float: left;

  position: absolute;

  font-size: 35px; /* Définir la taille du texte */

  color: white;

  font-weight: bold; /* Rendre le texte en gras */

  text-decoration: none; /* Supprimer la décoration de lien par défaut */



  text-shadow: -1.3px -1.3px 0 black, 1.3px -1.3px 0 black, -1.3px 1.3px 0 black,

    1.3px 1.3px 0 black;

}

.ul_barre_menu_link{
  gap: 80px;
}


.barre_menu_link:hover {

  font-size: 45px;

}



.block {

  margin-left: 20%;
  margin-top: 5%;

  display: flex;
  position: absolute;

  float: left;

}



.image_picture {

  width: 333px;

  height: 591px;


  top: -20px;

  cursor: pointer;


  border-width: 17px;

  border-style: ridge;

  border-color: #00ffff;

  border-radius: 10px;

  /* transition douce lors du changement */
  transition: background-image 0.3 ease-in-out;

}

.image_picture:hover{

  width: 350px;
  height: 583px;
  transform: scale(1.1); /* Augmenter la taille de l'image de 20% lorsqu'elle est survolée */ 
}

.quatre_images{
  display: flex;
  position: absolute;

  justify-content: center; /* Centrer horizontalement */
  margin: auto;
  
}

.quatre_images:not(first-child){
  margin-left: 15px;
}

.images_pas{

  width: 310px;
  height: auto;

  margin-top: 45px;

  border-width: 17px;
  border-style: ridge;
  border-color: #00ffff;
  border-radius: 10px;

}

.images_pas{
  margin-left: 15px;
}

.chrome .quatre_images:not(first-child){
  margin-left: 30px;
}

.chrome .images_pas{
  margin-left: 20px;
}

.ccleaner .quatre_images:not(first-child){
  margin-left: 5px;
}

.ccleaner .images_pas{
  margin-left: 20px;
}

.opera .quatre_images:not(first-child){
  margin-left: 3px;
}

.opera .images_pas{
  margin-left: 20px;
}

.firefox .images_pas{
  margin-left: 20px;
}

.firefox .quatre_images:not(first-child){
  margin-left: 35px;
}

.menu_droite{
 
  top: 80px;
  color: white;

  font-size: 27px; /* Définir la taille du texte */
  line-height: 27px;

  text-decoration: none; /* Supprimer la décoration de lien par défaut */

  font-weight: bold; /* Rendre le texte en gras */

  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black,

    1px 1px 0 black;

}

.menu {

  display: flex;
  position: relative;

  top: 55px;

  margin-top: 20px;

  width: 270px;

  height: 40px;


  margin-left: 50%;

  border-width: 12px;

  border-style: ridge;

  border-color: #00ffff;

  border-radius: 10px;


  justify-content: center; /* Centrer horizontalement */

  align-items: center; /* Centrer verticalement */

  text-align: center; /* Centrer le texte horizontalement */

}


.menu_link, .form_link, .input_link {

  display: flex;

  height: 40px;
  padding-top: 40px;
  
  margin: auto;

  float: left;

  position: relative;

  margin-top: -40px;

  cursor: pointer;

  color: white;

  font-size: 27px; /* Définir la taille du texte */

  text-decoration: none; /* Supprimer la décoration de lien par défaut */

  font-weight: bold; /* Rendre le texte en gras */

  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black,

    1px 1px 0 black;

}

.input_link:hover{
  font-size: 31px;
  cursor: pointer;
}

.menu_link:hover{

  font-size: 31px;

}

/* Media query pour les écrans de moins de 768px de large (smartphones) */
@media (max-width: 768px) {

    .quatre_images{
      all: unset;

      display: grid;

      /* Crée 2 colonnes de largeur égale */
      grid-template-columns: repeat(2, min-content);

      /* Ajoute un espace entre les images */
      gap: 35px;

      position: absolute;
      left: 47%;
      transform: translateX(-50%);
      
    }

    body{
      display: inline-block;
      width: 100%; /* On compense la réduction de taille pour remplir l'écran */

      zoom: 0.35;
      /*transform-origin: top left; /* pour éviter que le contenu ne flotte au milieu */
        
      overflow: hidden;
      scrollbar-width: none; /* pour Firefox */
      -ms-overflow-style: none; /* pour Internet Explorer et Edge */
      
    }

    html, body{
      &::-webkit-scrollbar{display: none;}
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .ul_barre_menu_link{
      gap: inherit !important;
    }


    #nouvel_an  * {
      scale: inherit;
      width: inherit;
    }

    #nouvel_an{
      scale: 1.4;
      margin: auto;
      width: 100%; /* On compense la réduction de taille pour remplir l'écran */
      margin-top: 150px !important;
    }

    .menu_droite {
      margin-left: 250px;
    }

    .image_picture{
      margin-top: 40px;
    }

    *:not(.div_head, .input_link){
      -webkit-text-size-adjust: none !important;
      -moz-text-size-adjust: none !important;
      text-size-adjust: none !important;

      font: unset !important;
      
      font-family: 'Times New Roman', Times, serif !important;
      font-weight: bold !important;  
      font-size: 30px !important;
    }

    .input_link * {
      margin-top: inherit !important;
      font-size: inherit !important;
    }

    .div_head *{
      font-size: inherit !important;
      margin-bottom: inherit !important;
      width: inherit !important;
    }

    .div_head{
      -webkit-text-size-adjust: none !important;
      -moz-text-size-adjust: none !important;
      text-size-adjust: none !important;

      font: unset !important;
      
      font-family: 'Times New Roman', Times, serif !important;
      font-weight: bold !important;  

      font-size: 40px !important;

      top: -5px !important;

      width: 95% !important;

    }

    .input_link {
      transform: translateY(-3%);
      font-size: 31px !important;
      font-family: 'Times New Roman', Times, serif !important;
      font-weight: bold !important; 

    }

    .ul_barre_menu_link, .nom_titre{
      justify-content: unset !important;
      gap: 60px !important; 

      margin-top: 25px !important;
      margin-right: 20px !important;
      
    }


  }

  .boutons{
      scale: 1.8;
      margin: auto;
      width: 100%; /* On compense la réduction de taille pour remplir l'écran */
      margin-top: 350px !important;
  }

  .aujourd_style, .heure_style, #change_heure, .counter_style, #change_heure{
      scale: 1.8;
      margin: auto;
      width: 100%; /* On compense la réduction de taille pour remplir l'écran */
      margin-top: 150px !important;
  }

  #jours_rebours, #heures_rebours * {
    font-size: inherit !important;
 
  }

  #jours_rebours, #heures_rebours{
    font-size: 25px !important;
 
  }

/*  
@media (orientation: landscape) and (max-width: 950px){

  body{
    transform: rotate(-90%);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}
*/