body{
  background-image:url(ciel.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  overflow : hidden ; 
}

/* 1. On verrouille la boîte globale "all" pour qu'elle serve d'ancre */
.all {
  position: relative; /* Devient le point de repère absolu pour tout ton contenu */
  width: 100%;
  max-width: 1920px;  /* La taille maximale idéale de ton image de fond */
  margin: 0 auto;     /* Centre tout le site au milieu si l'écran est géant */
  min-height: 100vh;
  
  /* On applique ton fond d'écran directement sur la boîte .all pour qu'il ne se sépare pas du texte */
  background-image: url('nom_de_ton_image_de_fond.jpg'); 
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

 .prochain {
        position: absolute ;
        transform: scale(0.3); 
        top: -134px ;
        left: 1438px ;
        border : solid black 2px ; 
    }


.book-container { 
  width: 200px; 
  height: 300px; 
  perspective: 1000px; 
  margin: 50px auto; 
}

.onepiece {
  position: fixed;
  z-index: 9999;
  overscroll-behavior: none;
  top: 170px;
  left: 887px;
  
  background-color: #ffffff;
  border: 4px solid black;
  height: 570px;
  width: 600px;
  max-height: 70vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 12px 15px 12px 30px;
  border-radius: 15px;
  
  transform: scale(1.2);
  
  /* 👇 LES LIGNES MAGIQUES POUR LA FLUIDITÉ 👇 */
  will-change: left, top, transform; /* Prévient le navigateur pour optimiser les performances */
  transform-style: preserve-3d;     /* Force l'accélération matérielle (carte graphique) */
  
  cursor: grab;
  user-select: none;
}

.onepiece:active {
  cursor: grabbing;
}

.livre {
   width: 100%; 
  height: 100%; 
  position: relative; 
  top : 270px ; 
  left:  -440px ;
  transform : scale(2.4) ;
}

.book { 
  width: 100%; 
  height: 100%; 
  position: RELATIVE; 
  transform-style: preserve-3d; 
  transition: transform 1s ease-in-out; 
  transform: rotateY(-20deg) rotateX(10deg); 
}

.book-container:hover .book { 
  transform: rotateY(180deg) rotateX(10deg); 
}

.face { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  backface-visibility: hidden;
  border-radius: 2px; 
  box-shadow: inset 4px 0 10px rgba(0,0,0,0.1); 
}

.front { 
  background-image: url('hem.jpg'); 
  background-size: cover;
  background-position: center;
  transform: translateZ(10px); 
}

.back { 
  background-image: url('hem4.jpg'); 
  background-size: cover;
  background-position: center;
  transform: rotateY(180deg) translateZ(10px); 
}

.spine { 
  width: 20px; 
  height: 100%; 
  background: #F5F5DC; 
  position: absolute; 
  left: -10px; 
  transform: rotateY(-90deg); 
}

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

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

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

.container7{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.container7 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);
}
.container7:hover span, .container7:focus span {
  opacity: 1;
}
.container7:hover img{
  /* add hover effects like transform or filter to your images here! */
}	

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

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

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

.suivant{
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.suivant 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);
}
.suivant:hover span, .suivant:focus span {
  opacity: 1;
}
.suivant:hover img{
  /* add hover effects like transform or filter to your images here! */
}