body{
  background-image:url(eva5.png);
  background-size: cover;
  background-position: 20% 25% ;
  overflow : hidden ; 
}

@font-face {
    font-family: 'et';
    src: url('et.otf') format('truetype');
}

.titre {
  position:fixed ;
  transform: scale(0.65);
  width: 1400px;       /* Largeur du bloc */
  height: 200px;      /* Hauteur du bloc */
  background-color: #ffffff;  /* Couleur de fond */
  border-radius: 25px ;
  left: 28vh;
  border: 4px solid #000000
}

.titre1 {
  position: fixed ;
  left: 86.8vh;
  top: 77px ;
  font-family: 'et';
  transform: scale(2.6) ;
}

/*-------------------------------------------------------------------------------------------*/

.onepiece{
  position: relative ;
  top: 250px ;
  left: 100px ;
  background-color: #ffffff;  /* Couleur de fond */
  border: 4px solid black ;
  height: 500px;
  width : 700px ;
  max-height: 70vh;
  overflow-y: scroll;
  margin: 0 -30px 15px -30px;
  padding: 12px 15px 12px 30px
}

.ONE {
  position: absolute ;
  top:-570px ;
  left: 15px ;
  transform: scale(0.25);
  float: right;
  border : solid black 5px ;
}

.titre3 {
  font-family : 'BebasNeue-Regular'
}

.journal2 {
  position: absolute;
  top: 10px ;
  left: 28px ;
  width:260px;/* Largeur du conteneur */
  height:65px;
  transform:scale(0.85) ;
  color: black;
  background: white;
  padding: 4px;
  image-rendering: pixelated;
  border-image-width: 14px;
  border-image-outset: 7px;
  border-image-slice: 36%;
  border-image-repeat: round round;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVAgMAAAA/TvYGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAAAAA////+Pj4EZhu1AAAAAR0Uk5TAP///7MtQIgAAABaSURBVHicY2T9zcDA+ptRUkeA4Yg6YyhrAMPq34xZ+nsYRdQYpbw/MLguY2TtLmBInc3IZnWAQfI5o+RzBgY2KxIodkuwPqgpkj4fGFyWo1ukLcBwVI0R4hYAN4IjlkoaqZsAAAAASUVORK5CYII=");
}	

.journal3 {
  position: absolute;
  top: 110px ;
  left: 346px ;
  width:210px;/* Largeur du conteneur */
  height:305px;
  transform:scale(1.2) ;
  color: black;
  background: white;
  padding: 4px;
  image-rendering: pixelated;
  border-image-width: 14px;
  border-image-outset: 7px;
  border-image-slice: 36%;
  border-image-repeat: round round;
  border-style: solid;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVAgMAAAA/TvYGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAAAAA////+Pj4EZhu1AAAAAR0Uk5TAP///7MtQIgAAABaSURBVHicY2T9zcDA+ptRUkeA4Yg6YyhrAMPq34xZ+nsYRdQYpbw/MLguY2TtLmBInc3IZnWAQfI5o+RzBgY2KxIodkuwPqgpkj4fGFyWo1ukLcBwVI0R4hYAN4IjlkoaqZsAAAAASUVORK5CYII=");
}	

.onepiece2{
  position: absolute ;
  top: 311px ;
  left: 1110px ;
  background-color: #ffffff;  /* Couleur de fond */
  border: 4px solid black ;
  height: 500px;
  width : 700px ;
  max-height: 70vh;
  overflow-y: scroll;
  margin: 0 -30px 15px -30px;
  padding: 12px 15px 12px 30px
}

.ONE2 {
  position: absolute ;
  top:-255px ;
  left: 255px ;
  transform: scale(0.42);
  float: right;
  border : solid black 5px ;
}









 .container6 {
        position: relative;
        display: inline-block; /* Assure que le conteneur se comporte comme un élément en ligne */
        transform: scale(0.21); /* Réduit la taille de 50% */
        transform-origin: center; /* Ajuste l'origine de la transformation pour qu'elle soit centrée */
        top: -723px ;
        left: -123px ;
        border : solid black 5px ;
    }

.container6{
    transition: transform 0.8s ease; /* Ajout de l'animation de zoom */
    display: inline-block; /* Nécessaire pour la mise en place d'une zone réduite */
    padding: 3px;
}

.container6:hover{
   transform: scale(0.225); /* Agrandissement de 20% au survol */
}

.container6{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.container6 span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 3.5rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.container6:hover span, .container7:focus span {
  opacity: 1;
}
.container6:hover img{
  /* add hover effects like transform or filter to your images here! */
}	

















































































.boite-de-texte {
    width: 300px;
    height: 50px;
    overflow: hidden;
    position: relative;
    border: 2px solid #000;
    left: 85vh;
    top: 150px ;
    background-color: #fff;
}

.boite-de-texte p {
    position: absolute;
    white-space: nowrap;
    animation: defiler 10s linear infinite;
}

@keyframes defiler {
    0% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
  

}