body {

    background: rgb(0, 0, 0);
    background-image: url("dossier-images/galaxy-cool.gif");
    background-size: 50%;
    position: relative;  /* Permet le scroll vertical */

    
  
  }
  
  a {
    font-family: Arial, Helvetica, sans-serif;
    color: #1e5e56;
    font-size: 14px;
    margin: 0;
    padding: 0;
  }
  
  p {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 14px;
    margin: 0;
    padding: 0;
  }

  p2  {
    font-family:'Courier New', Courier, monospace;
    color: #000000;
    font-size: 1.65vh;
    padding: 2vh;
  }

  p3  {
    font-family:'Courier New', Courier, monospace;
    color: #000000;
    font-size: 17px;
    font-weight: 700;
  }
  

  p4  {
    font-family:'Courier New', Courier, monospace;
    color: #ff6200;
    font-size: 14px;
    padding: 2vh;
  }

  p4:hover  {
    font-family:'Courier New', Courier, monospace;
    color: #16c0b2;
    font-size: 14px;
    padding: 2vh;
  }


  
  a {
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    color: #31a499;
    font-weight: 600;
  }


  
  h1 {
    font-family: Arial, sans-serif;
    color: #000000;
    font-size: 17px;
    margin: 0;
    padding: 0;
  }
  
  
  h2 {
    font-family: Arial, sans-serif;
    color: #31a499;
  }
  
  h3 {
    font-family: Arial, sans-serif;
    font-size: 25px;
    color: #ffffff;
  }
  
  h4 {
    font-family: Arial, sans-serif;
    color: #7678c4;
    font-size: 17px; 
    margin: 0;
    padding: 0;
  }
  
  h5 {
    font-family: Arial, sans-serif;
    color: #ff8ea3;
  }

  h6 {
    font-family: Arial, sans-serif;
    color: #be0000;
    font-size: 12px;
    margin: 0;
    padding: 0;
    font-weight: normal; /* facultatif, pour un rendu plus léger */
  }

  h7 {
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
    font-size: 14px;
    margin: 0;
    padding: 0;
    font-weight: 100;
  }






  .main {
    position: relative;
    margin: 10px auto;
    width: 80vw;
    height: 700vh;
    background-color: #ac7c84;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    overflow:hidden  /* Permet le scroll vertical */
  }



  .img-articles-titre {
    position: absolute;
    width: 22vw;
    height: 16vh;
    background: transparent;
    z-index: 30;
  }

  .img-nouveaute {
    position: absolute;
    width: 14vw;
    height: 8vh;
    top: 28vh;
    left: 12vw;
    z-index: 30;
  }

/* Style du widget digital-clock */
.digital-clock {
    position: absolute;
    top: 10vh;
    left: -6vw;
    display: inline-block;   /* Affiche le widget en tant que bloc en ligne */
    font-family: 'Arial', sans-serif;  /* Choisir une police personnalisée */
    font-size: 12px;  /* Taille de la police */
    color: #333;  /* Couleur du texte */
    transform: scale(0.5);  /* Effet zoom léger */
}

/* Au survol, change de couleur */
.digital-clock:hover {
    transform: scale(0.6);  /* Effet zoom léger */
}

/* Pour centrer le widget sur la page */
.centered-widget {
    display: flex;
    height: 100vh;  /* Prend toute la hauteur de la fenêtre */
}


.img-lien-memoire {
    position: absolute;
    width: 10vw;
    height: 10vh;
    top: 2vh;
    left: 12vw;
    z-index: 30;
  }

  .img-lien-memoire:hover {
    transform: scale(1.1);
  }



  .img-bouton-haut {
    position: fixed;
    width: 10vw;
    right: 2vw;
    height: 5vh;
    bottom: 2vh;
    z-index: 1003;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
  }

  .img-bouton-haut:hover {
    transform: scale(1.1);
    box-shadow: 0px 10px 30px rgba(195, 0, 255, 0.3);
  }





.centre-galerie-gif {
  position: absolute;
  width: 13vw;
  height: 1000vh;
  top: 150vh;
  left: 0vw;
  background: url('dossier-images/papier-aubergine.png');
  background-size: cover;
  z-index: 0;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
  overflow-y: auto;      /* Permet le scroll vertical */
  overflow-x: hidden; 
}



.centre-galerie-gif img {
  position: relative;
  width: 8vw;
  height: auto;
  z-index: 10;
  left: 15%;  
}

.img-gif {
  position: relative;
  width: 10vw;
  height: auto;
  z-index: 10;
}

.centre-galerie-gif img:hover {
  transform: scale(1.1);
}




  .centre-scroll {
    position: absolute;
    margin: 10px auto;
    width: 72vw;
    height: auto;
    top: 32vh;
    left: 17vw;
    background: transparent;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    overflow-y: hidden;      /* Permet le scroll vertical */
    overflow-x: hidden; 
  }





  















.puzzle-box {
  position: relative;
  width: 60vw;
  height: 160vh;
  top: 0vh;
  background-color: rgb(255, 180, 155);
  z-index: 0;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
}



.img-puzzle {
position: absolute;
top: 0vh;
width: 20vw;
height: 8vh;
z-index: 30;
}


.img-puzzle-titre {
  position: absolute;
  top: 0vh;
  left:20vw;
  width: 20vw;
  height: 8vh;
  z-index: 30;
  }

.text-puzzle {
  position: absolute;
  width: 58vw;
  height: 100vh;
  top: 10vh;
  left: 1vw;
  background: transparent;
  z-index: 1;
}

.img-photos-puzzle {
  position: absolute;
  top: 95vh;
  left: 1vw;
  width: 58vw;
  height: 50vh;
  z-index: 30;
  }





.grotte-box {
  position: relative;
  width: 60vw;
  height: 40vh;
  top: 0vh;
  background-color: rgb(185, 220, 217);
  z-index: 0;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
}

.img-grotte {
position: absolute;
top: 20vh;
width: 26vw;
height: 18vh;
z-index: 30;
}

.img-grotte2 {
  position: absolute;
  top: 20vh;
  width: 15vw;
  height: 18vh;
  left: 27vw;
  z-index: 30;
  }

.text-grotte-box {
  position: absolute;
  width: 58vw;
  height: 40vh;
  top: 2vh;
  left: 1vw;
  background: transparent;
  z-index: 1;
}












  .bande-haut {
    position: absolute;
    width: 90vw;
    height: 32vh;
    top: 0vh;
    background: url('dossier-images/papier-aubergine.png');
    background-size: cover;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    overflow:hidden;
  }

  .bande-haut-haut {
    position: absolute;
    width: 90vw;
    height: 10vh;
    top: 0vh;
    background-color: pink;
    background-size: cover;
    z-index: 0;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    overflow:hidden;
  }

  .img-gumball  {
    position: relative;
    width: 15vw;
    height: auto;
    z-index: 5;
  }



  .article-colonne-chapitres {
    position: absolute;
    width: 13vw;
    height: 150vh;
    left: 0vw;
    background-color: #31a499;
    z-index: 100;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    overflow-y: auto;      /* Permet le scroll vertical */
    overflow-x: hidden; 
  }







  .bannieres-en-bas  {
    position: absolute;
    width : 93vw;
    height : 5vh;
    left: 0vh;
    bottom: 10vh;
    z-index: 20;
  }
  
  .bannieres-en-bas img  {
      width: 12.5vw;
      margin: 1vw;
      border-radius: 8px;
  }
  
  .bannieres-en-bas img:hover  {
    transform: scale(1.1);
  }








.gallery-container {
  position: absolute;
  top: 12vh;
  left: 100vh;
  width: 20vw;
  height: 17vh;
  border-radius: 10px;
  overflow: hidden;
  background-color: transparent;
  z-index: 5;
  border: dotted white;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.gallery-image.active {
  display: block;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; /* ou selon la taille de ton image */
  height: 30px;
  cursor: pointer;
  z-index: 10;
  user-select: none;
}

.arrow.left {
  left: 10px;
}

.arrow.right {
  right: 10px;
}

.gallery-container:hover  {
  z-index: 70;
  transform: scale(1.02);
}



.img-news-titre {
  position: absolute;
  width: 8vw;
  left: 0vw;
  height: auto;
}
.img-news-titre:hover {
  transform: scale(1.04);
  box-shadow: 0px 10px 30px rgba(181, 17, 72, 0.3);
}

.img-accueil {
  position: absolute;
  width: 18vw;
  left: 0vw;
  top: 2vh;
  height: auto;
}

.img-accueil:hover {
  transform: scale(1.04);
}




.img-welcome {
  position: absolute;
  width: 7vw;
  left: 15vw;
  top: 12vh;
  height: auto;
}

.menu  {
  position: absolute;
  width: 0vw;
  left: 20vw;
  height: 7vh;
  bottom:0vh;
  z-index: 100;
}

.bt-accueil {
  position: absolute;
  width: 8vw;
  left: 0vw;
  height: 4.5vh;
  top: 2.5vh;
  z-index: 100;
  background-image:url("dossier-images/bt-accueil.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.bt-accueil:hover {
  background-image:url("dossier-images/bt-accueil-hover.png");
  background-size: 100%;
  background-repeat: no-repeat;
}


.bt-articles {
  position: absolute;
  width: 8vw;
  left: 8vw;
  height: 5vh;
  top: 2vh;
  z-index: 100;
  background-image:url("dossier-images/bt-articles-hover.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.bt-articles:hover {
  background-image:url("dossier-images/bt-articles-hover.png");
  background-size: 100%;
  background-repeat: no-repeat;
}


.bt-memoire {
  position: absolute;
  width: 8vw;
  left: 16vw;
  height: 5vh;
  top: 2vh;
  z-index: 100;
  background-image:url("dossier-images/bt-memoire.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.bt-memoire:hover {
  background-image:url("dossier-images/bt-memoire-hover.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.premiere-box-actu {
  position: relative;
  width: 60vw;
  height: 20vh;
  top: 0vh;
  background-color: rgb(215, 215, 215);
  z-index: 0;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
  border: solid purple;
  margin-bottom: 2vh;
}

.texte-box-actu {
  position: absolute;
  width: 20vw;
  height: 8vh;
  top: 10vh;
  left: 1vh;
  z-index: 0;
}

.img-actu {
  position: absolute;
  width: 40vw;
  right: 0vw;
  height: 20vh;
}



.img-actu-gif1 {
  position: absolute;
  width: 8vw;
  height: 7vh;
  left: 24vw;
  top: 7vh;
}

.img-actu-gif2 {
  position: absolute;
  width: 8vw;
  height: 7vh;
  left: 35vw;
  top: 7vh;
}

.img-actu-gif3 {
  position: absolute;
  width: 8vw;
  height: 7vh;
  left: 45vw;
  top: 7vh;
}

.img-actu-gif1:hover {
  transform: scale(1.04);
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
}

.img-actu-gif2:hover {
  transform: scale(1.04);
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
}
.img-actu-gif3:hover {
  transform: scale(1.04);
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
}

.bannieres-messages-bas {
  position: absolute;
  width: 11vw;
  height:  60vh;
  top: 20vh;
  left: 1vw;
  background-color: rgba(215, 215, 215, 0.493);
  z-index: 0;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
  margin-bottom: 2vh;
}

.bannieres-messages-bas img {
  position: relative;
  width: 10vw;
  height: auto;
  margin: 1vh;
}

.bannieres-messages-bas img:hover {
  transform: scale(1.05) rotate(1deg);
}



.img-jb {
  position: relative;
  width: 60vw;
  height: auto;
}

.img-article-artique {
  position: relative;
  width: 60vw;
  height: auto;
}


.img-commune  {
  position: relative;
  width: 60vw;
  height: auto;
}

.img-insta-lait {
  position: relative;
  width: 60vw;
  height: auto;
}

.img-article-a-venir {
  position: relative;
  width: 60vw;
  height: auto;
}