.flipbook-mobile{
    margin-top: 150px;
}
.bookWrapper {

  margin: auto;
	width: 600px;
	height: 500px;
}

.bookBg {
	position: relative;
	background-color: #000;
	width: 100%;
    
	height: 100%;
	border-radius: 10px;
}

.pageBg {
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: #999;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	border-radius: 0px;
}

.pageWrapper {
	position: absolute;
	width: 50%;
	height: 100%;
	float: left;
	-webkit-font-smoothing: antialiased;
}

.page {
	position: absolute;
	width: 100%;
	height: 100%;
}

.pageFace {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-align: center;
}

.couverture{
    height: 480px;
    width: 290px;
    background-size: cover; /* Pour couvrir toute la boîte avec l'image */
    background-position: center; /* Centrer l'image horizontalement et verticalement */
    background-repeat: no-repeat; /* Empêcher la répétition de l'image */
}
.fin{
    height: 480px;
    width: 290px;
    background-size: cover; /* Pour couvrir toute la boîte avec l'image */
    background-position: center; /* Centrer l'image horizontalement et verticalement */
    background-repeat: no-repeat; /* Empêcher la répétition de l'image */
}
.mainIllustration{
    height: 480px;
    width: 300px;
    
    background-size: cover; /* Pour couvrir toute la boîte avec l'image */
    background-position: center; /* Centrer l'image horizontalement et verticalement */
    background-repeat: no-repeat; /* Empêcher la répétition de l'image */
}
.front {
	background: linear-gradient(to right, #d9d9d9 0%, #f9f9f9 3%, #ffffff 8%, #ffffff 100%);
}

.back {
	background: linear-gradient(to right, #ffffff 0%, #ffffff 92%, #f9f9f9 97%, #d9d9d9 100%);
}
.flipbook-mobile h1, p{
    color: black;
    font-size: 16px;
}



/* FORMAT TABLETTE ET GRAND ECRAN */
@media screen and (max-width: 700px) {
   main{
    margin: 0;
   }
    .bookBg{
        max-width: 400px;
        max-height: 350px;
        margin: auto;
    }
    .flipbook-mobile h1, p{
      
        font-size: 13px;
    }
    .flipbook-mobile{
        display: flex;
    }
    .couverture {
        height: 330px;
        width: 190px;
    }
    
}

/* FORMAT PETIT ECRAN */
@media screen and (max-width: 425px) {
    .bookBg{
        max-width: 330px;
        max-height: 350px;
       
    }
    .couverture {
        height: 330px;
        width: 170px;
    }
    .flipbook-mobile h1, p{
      
        font-size: 12px;
    }
}