#book-album{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: auto;
}
.titleBook{
    margin-bottom: 50px;
    margin-top: 150px;
    font-family: "Edu AU VIC WA NT dots", sans-serif;
    font-size: 50px;
    color: blueviolet;
    text-align: center;
}
.book {
    width: 900px;
    height: 600px;
    position: relative;
    perspective: 2000px; /* Donne l'effet 3D */
    /* margin-bottom: 10px; */
    margin: auto; /* Centre le livre horizontalement */
    display: flex; /* Pour aligner les pages */
    justify-content: center;
    align-items: center;    
}
.page {
    width: 50%;
    height: 100%;
    position: absolute;
    background-color: #EEC4C9;
    border: 1px solid #808080;
    border-radius: 5px;
    transform-origin: center;
    transform-style: preserve-3d;
    transition: transform 3000ms ease; /*temps des pages*/
    box-shadow: 2px 2px 3px #808080;
    transition: transform 3000ms ease, z-index 0s ease 1s; /* Le z-index change après l'animation */
}
.page .content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 5px;
    
}
.page:nth-child(odd) {
    transform-origin: left center; /* Origine de transformation pour les pages impaires */
}

.page:nth-child(even) {
    transform-origin: right center; /* Origine de transformation pour les pages paires */
}


.front {
    z-index: 1;
    backface-visibility: hidden;
}
.back {
    transform: rotateY(180deg); /* Pour faire en sorte que le dos de la page soit visible quand elle est retournée */
    backface-visibility: hidden;
    background-color: #EEC4C9; /* couleur face arriere */
}
#book-album .book .page .front img,
#book-album .book .page .back img,
#book-album .book .page .front video,
#book-album .book .page .back video {
    width: 95%;
    height: 95%;
    object-fit: contain;
}

.page:nth-child(2) {
    z-index: 19;
}
.page:nth-child(3) {
    z-index: 18;
}
.page:nth-child(4) {
    z-index: 17;
}
.page:nth-child(5) {
    z-index: 16;
}
.page:nth-child(6) {
    z-index: 15;
}
.page:nth-child(7) {
    z-index: 14;
}
.page:nth-child(8) {
    z-index: 13;
}
.page:nth-child(9) {
    z-index: 12;
}
.page:nth-child(10) {
    z-index: 11;
}
.page:nth-child(11) {
    z-index: 10;
}
.page:nth-child(12) {
    z-index: 9;
}
.page:nth-child(13) {
    z-index: 8;
}
.page:nth-child(14) {
    z-index: 7;
}
.page:nth-child(15) {
    z-index: 6;
}
.page:nth-child(16) {
    z-index: 5;
}
.page:nth-child(17) {
    z-index: 4;
}
.page:nth-child(18) {
    z-index: 3;
}
.page:nth-child(19) {
    z-index: 2;
}
.page:nth-child(20) {
    z-index: 1;
}
.page:nth-child(21) {
    z-index: 0;
}
.page.flipped {
    z-index: -1;
    transform: rotateY(-180deg);
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.button-prev, 
.button-next {
    background-image: url(./img/fond.jpg);
    background-size: cover;
    background-position: center;
    font-family: "Edu AU VIC WA NT dots", sans-serif;
    margin: 50px 30px;
    padding: 10px;
    font-size: 18px;
    border-radius: 10px;
    width: 100px;
    border:1px solid blueviolet;
}
.button-prev:hover, 
.button-next:hover{
    font-size: 19px;
    box-shadow: 1px 1px 1px blueviolet;
}
.buttons{
    height: 120px;
    flex-direction: row;
    gap: 20px; /* Espacement entre les boutons */
}


@media (max-width: 900px) {
    .book {
        width: 90%; /* Réduire la largeur */
        /*height: auto;*/ /*Adapter la hauteur*/
    }
    .titleBook {
        font-size: 30px; /* Réduire la taille de police */
    }
}