body {

  padding: 0;
  background: rgb(70, 53, 110);
  background-size: 900px;
  margin: 0 auto;
  position: relative;
  font-family: 'Courier New', Courier, monospace;

}

@font-face {
  font-family: 'MaPolice';
  src: url('dossier-images/FFCommaTrial-Regular.ttf') format('truetype');
}

p {

  color: #000000;
  font-size: 14px
}

p2 {

  color: #ffffff;
  font-size: 14px
}

p1 {

  color: #000000;
  font-size: 15px;
  font-weight: 600;
}

p3 {

  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}


a {

  font-size: 14px;
  color: #31a499;
}

h1 {

  color: #254a50;
  font-size: 30px
}


h2 {

  color: #31a499;
}

h3 {

  font-size: 25px;
  color: #ffffff;
}

h4 {

  color: #7678c4;
  font-size: 17px; 
  margin: 0;
  padding: 0;
}

h5 {

  color: #ff8ea3;
}

h6 {

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


.en-tete {
  position: absolute;
  top: 50px;
  left: 550px;
  width: 820px;
  height: 290px;
  margin: 0px auto;
  background: rgb(90, 90, 152);
  background-size: 900px;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
}

.more-ressources-here {
  position: absolute;
  top: 0px;
  left: 220px;
  width: 200px;
  height: 20px;
  z-index: 10;
}


.en-tete2 {
  position: absolute;
  top: 20px;
  left: 130px;
  width: 500px;
  height: 300px;
  transform: rotate(-2deg);
  margin: 0px auto;
  background-image: url(dossier-images/papierbleu.jpg);
  background-size: 1000px;
  border-radius: 10px;
  overflow: hidden;
  z-index: 2;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.dessins-filles2 {
  position: absolute;
  width: 350px;
  height: 270px;
  left: 230px;
  top: 50px;
  padding: 0px 0px;
  transform: rotate(6deg);
  border-radius: 10px;
  background: url(collages/dessinsfilles3.png) no-repeat;
  background-size: 250px;
  z-index: 107;
  }


.en-tete-texte {
  position: absolute;
  top: 40px;
  left: 150px;
  width: 600px;
  height: 190px;
  border-radius: 10px;
  overflow: auto;
  z-index: 2;
}


.box-fond-premiere {
  position: absolute;
  top: 130px;
  left: 100px;
  width: 1300px;
  height: 2000px;
  margin: 0px auto;
  background: rgb(90, 90, 152);
  box-shadow: 0 0 30px 10px rgba(90, 90, 152, 0.5); /* halo blanc flou */
  background-size: 900px;
  overflow: hidden;
  z-index: 1;
}



.zone-librepremiere {
  position: relative;
  top: 270px;
  width: 1500px;
  height: 2000px;
  margin: 0px auto;
  background-color: transparent;
  overflow: hidden;
  z-index: 3;
}


.zone-libre {
  position: absolute;
  top: 0px;
  width: 1500px;
  height: 2000px;
  margin: 0px auto;
  background-color: transparent;
  overflow: hidden;
  z-index: 4;
}

/* Chaque image a sa position libre */
.zone-libre img {
  position: absolute;
}


.texte-intro {
  position: absolute;
  top: 20px;
  left: 480px;
  width: 660px;
  height: 180px;
  z-index: 300;
}




.colonne-gauche {
  position: absolute;
  top: 300px;
  left: 50px;
  width: 320px;
  height: 600px;
  background: url('dossier-images/papierbleu.jpg');
  z-index: 100;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.texte-titre-actualite {
  position: absolute;
  top: 200px;
  left: 70px;
  width: 250px;
  height: 100px;
  z-index: 5;
  z-index: 101;
}

.img-cheval {
  position: absolute;
  top: 20px;
  left: 40px;
  width: 250px;
  height: auto;
  z-index: 5;
  z-index: 101;
}

.img-cheval:hover {
  transform: scale(1.02);
}




.img-diaryfond {
  top: 50px;
  left: 800px;
  width: 800px;
  height: auto;
  margin: 20px auto;
  overflow: visible;
  z-index: 2;
}

.img-objete {
  position: absolute;
  top: 860px;
  left: 800px;
  width: 300px;
  height: auto;
  z-index: 3;
}



.img-photomer:hover  {
  transform: scale(1.03);
}


.img-articles  {
  position:absolute;
  left: 500px;
  width: 600px;
  height: 800px;
  left: 350px;
  top: 1600px;
  z-index: 30;
}


.img-journalecriture:hover {
transform: rotate(1deg);
z-index: 6;
}





.gallery-container {
position: absolute;
top: 400px;
left: 400px;
border-radius: 10px;
overflow: hidden;
background-color: transparent;
z-index: 50;
}


.gallery-container.gallery1 {
top: 260px;
left: 50px;
width: 230px;
height: 270px;
z-index: 101;
}

.gallery-container.gallery2 {
top: 980px;
left: 550px;
transform: rotate(1.5deg);
z-index: 40;
width: 300px;
height: 200px;
box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.5); /* halo blanc flou */
}

.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: 20px; /* ou selon la taille de ton image */
height: 20px;
cursor: pointer;
z-index: 10;
user-select: none;
}

.arrow.left {
left: 10px;
}

.arrow.right {
right: 10px;
}

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



.box-nuages {
position: absolute;
top: 930px;
left: 70px;
width: 800px;
height: 400px;
border-radius: 10px;
overflow: hidden;
background: url('dossier-images/nuage-fond-clair.gif');
background-size: cover;
z-index: 20;
opacity: 0.5;
box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.5); /* halo blanc flou */
}

.nuages-titre {
position: absolute;
top: 1000px;
left: 150px;
width: 270px;
height: 90px;
overflow: hidden;
z-index: 40;
transform: rotate(-2deg);
}

.nuages-def {
position: absolute;
top: 1040px;
left: 140px;
width: 330px;
height: 180px;
overflow: auto;
z-index: 80;
}

.box-nuages-fond-blanc {
  position: absolute;
  top: 980px;
  left: 110px;
  width: 400px;
  height: 300px;
  overflow: hidden;
  background-color: aliceblue;
  z-index: 21;
  }






.slider {
position: absolute;
top: 280px;
left: 530px;
width: 260px;
height: 90px; /* hauteur ajustée pour contenir les images */
background: url('dossier-images/papierbleuclair2.jpg');
overflow: hidden;
border: dotted rgb(82, 82, 172);
border-radius: 10px;
z-index: 100;
transform: rotate(-1deg);
}

.slider-track {
display: flex; /* important pour aligner horizontalement */
gap: 10;
animation: scroll 10s linear infinite;
}

.slide {
flex: 0 0 auto; /* largeur fixe */
width: 70px;
height: 100px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}

.slide img {
width: 70px;
height: 100px;
object-fit: contain;
background: transparent;
}

@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

.slide img:hover {
  transform: scale(1.05);
  }


.img-emojiii {
  width: 80px;
  height: 60px;
  left: 350px;
  top: 30px;
  z-index: 15;
  }

.img-bulleparole {
    width: 750px;
    height: 150px;
    left: 370px;
    top: -10px;
    z-index: 15;
  }




  .media-livres {
    position: absolute;
    width: 700px;
    height: 700px;
    left: 750px;
    top: 250px;
    z-index: 15;
  }

  .img-juno  {
    width: 170px;
    height: 220px;
    left: 200px;
    top: 200px;
    z-index: 15;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  }

  .img-juno:hover  {
    transform: scale(1.05);
    z-index: 100;
  }


  .img-eliza  {
    width: 160px;
    height: 220px;
    left: 370px;
    top: 280px;
    z-index: 16;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  }

  .img-eliza:hover  {
    transform: scale(1.05);
    z-index: 100;
  }

  .img-empirerecords {
    width: 160px;
    height: 220px;
    left: 100px;
    top: 300px;
    transform: rotate(-2deg);
    z-index: 15;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  }

  .img-empirerecords:hover  {
    transform: scale(1.05);
    z-index: 100;
  }

  .img-etranger {
    width: 150px;
    height: 220px;
    left: 520px;
    top: 300px;
    z-index: 15;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  }

  .img-etranger:hover  {
    transform: scale(1.05);
    z-index: 100;
  }

  .img-fanon {
    width: 140px;
    height: 200px;
    left: 430px;
    top: 140px;
    transform: rotate(3deg);
    z-index: 15;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  }

  .img-fanon:hover  {
    transform: scale(1.05);
    z-index: 100;
  }



  .box-clublecture {
    position: absolute;
    width: 370px;
    height: 270px;
    left: 480px;
    top: 250px;
    transform: rotate(-1deg);
    border-radius: 10px;
    background-image: url('dossier-images/papiercarnetjaune.JPG');
    background-size: 100%;
    z-index: 2;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  }


  .box-2 {
    position: absolute;
    width: 370px;
    height: 320px;
    left: 430px;
    top: 410px;
    transform: rotate(1deg);
    border-radius: 10px;
    background-image: url('dossier-images/papierbleuclair.jpg');
    background-size: 100%;
    z-index: 20;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  }

  .box-texte-diary {
    transform: rotate(1deg);
    position: absolute;
    top: 420px;
    left: 470px;
    width: 300px;
    height: 250px;
    margin: 20px auto;
    overflow: visible;
    overflow: auto;
    border-radius: 10px;;
    z-index: 160;
  }


  .box-de-fond-clublecture {
    position: absolute;
    top: 200px;
    left: 400px;
    width: 1025px;
    height: 650px;
    margin: 20px auto;
    overflow: visible;
    overflow: auto;
    border-radius: 10px;;
    z-index: 1;
    background-image: url('dossier-images/papierbleubleu.png');
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  }

  .feuille-comptine {
    position: absolute;
    left: 300px;
    width: 500px;
    height: 680px;
    right: 450px;
    top: -80px;
    border-radius: 10px;
    background: url(dossier-images/papier-violet.png);
    opacity: 0.2;
    background-size: 100%;
    z-index: 1;
    transform: rotate(-7deg);
  }
  

  .box-pokemons {
    position: absolute;
    overflow: auto;
    top: 880px;
    left: 900px;
    width: 550px;
    height: 500px;
    margin: 20px auto;
    border-radius: 10px;;
    z-index: 1;
    background-image: url('dossier-images/papierbleu.jpg');
    border: dotted rgb(223, 222, 255);
  }




.sliderpoke {
  position: absolute;
  top: 270px;
  left: 20px;
  width: 510px;
  height: 200px; /* hauteur ajustée pour contenir les images */
  background: url('dossier-images/papierbleubleu.png');
  overflow: hidden;
  border: dotted rgb(82, 82, 172);
  border-radius: 10px;
  z-index: 100;
  overflow: auto;
  }
  
  .sliderpoke-track {
  display: flex; /* important pour aligner horizontalement */
  gap: 10px;
  animation: scroll 20s linear infinite;
  }
  
  .slidepoke {
  flex: 0 0 auto; /* largeur fixe */
  width: 280px;
  height: 200px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  
  .slidepoke img {
  width: 270px;
  height: 190px;
  object-fit: contain;
  background: transparent;
  }
  
  @keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
  }
  
  .slidepoke img:hover {
    transform: scale(1.01);
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.5); /* halo blanc flou */
    }
  


    .texte-komiya {
      overflow: auto;
      position: absolute;
      top: 30px;
      left: 50px;
      width: 450px;
      height: 200px; /* hauteur ajustée pour contenir les images */
      z-index: 100;
      }

    
      .deux-partie-nuages-et-pokemon {
        position: absolute;
        top: 30px;
        left: 0px;
        width: 1600px;
        height: 700px; /* hauteur ajustée pour contenir les images */
        z-index: 10;
        }




        
        .img-mademyown {
          position: absolute;
          top: 1800px;
          left: 150px;
          width: 100px;
          height: 30px;
          z-index: 2;
        }



        .grande-boite-bleu {
          position: absolute;
          width: 700px;
          height: 500px;
          left: 140px;
          top: 1450px;
          transform: rotate(1deg);
          border-radius: 10px;
          background-image: url('dossier-images/papierbleubleu.png');
          background-size: 60%;
          z-index: 2;
          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        }

        .petite-box-jaune {
          position: absolute;
          width: 330px;
          height: 250px;
          left: 740px;
          top: 1550px;
          border-radius: 10px;
          background-image: url('dossier-images/papiercarnetjaune.JPG');
          background-size: 100%;
          z-index: 30;
          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        }

        .petite-box-bleuclaire {
          position: absolute;
          width: 480px;
          height: 320px;
          left: 950px;
          top: 1610px;
          transform: rotate(-1deg);
          border-radius: 10px;
          background-image: url('dossier-images/papierbleuclair.jpg');
          background-size: 100%;
          z-index: 30;
          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        }


        .grd-boite-bleue-texte {
          position: absolute;
          left: 40px;
          top: 50px;
          z-index: 30;
        }

        .img-papiervioletytb {
          position: absolute;
          width: 450px;
          height: 400px;
          transform: rotate(4deg);
          left: 100px;
          top: 30px;
          z-index: 30;
          opacity: 0.17;
        }


        .video1 {
          position: absolute;
          border-radius: 5px;
          border: dotted white;
          width: 220px;
          height: 120px;
          left: 20px;
          top: 70px;
          z-index: 30;
          transform: rotate(-1deg);
          background-image: url('dossier-images/video1.png');
          background-size: cover;
        }

        .video1:hover {
          border: solid white;
          transform: scale(1.05);
        }

        .video2 {
          position: absolute;
          border-radius: 5px;
          border: dotted white;
          width: 220px;
          height: 120px;
          left: 260px;
          top: 120px;
          z-index: 30;
          transform: rotate(-1deg);
          background-image: url('dossier-images/video4.png');
          background-size: cover;
        }

        .video2:hover {
          border: solid white;
          transform: scale(1.05);
          z-index: 100;
        }

        .video3 {
          position: absolute;
          border-radius: 5px;
          border: dotted white;
          width: 220px;
          height: 120px;
          left: 100px;
          top: 220px;
          z-index: 30;
          transform: rotate(-1deg);
          background-image: url('dossier-images/video2.png');
          background-size: cover;
        }

        .video3:hover {
          border: solid white;
          transform: scale(1.05);
        }


        .petite-box-bleue-texte-box {
          position: absolute;
          border-radius: 5px;
          border: dotted white;
          width: 420px;
          height: 250px;
          left: 30px;
          top: 25px;
          z-index: 30;
        }