<h1 id="mainTitle">La Bonne Pêche</h1>
    
    <a href="#" class="bt" onclick="ouvrirPopup('popupMenu')">Consulter la carte</a>
    
    <div id="popupMenu" class="popup">
        <header>
            <h1>La Carte</h1>
            <a href="#" class="bt closeBt" onclick="fermerPopup(this)">X</a>
        </header>
        <!-- FLIPBOOK -->
        <div id="flipbook1">
            <div id="page1" class="page">
                <section>
                    <h2>Bienvenue à Bon Port</h2>
                    Vous allez vous régaler
                </section>
            </div>
            <div id="page2" class="page">
                <section>
                    <h2>Entrées</h2>
                    <ul>
                        <li>Soupe de poisson - 8,50 €</li>
                        <li>Salade de la mer - 12,00 €</li>
                        <li>Carpaccio de thon - 14,00 €</li>
                        <li>Terrine de saumon - 11,50 €</li>
                        <li>Huîtres fraîches - 15,00 € (12 pièces)</li>
                    </ul>
                </section>
            </div>
            <div id="page3" class="page">
                <section>
                    <h2>Poissons</h2>
                    <ul>
                        <li>Saumon grillé - 18,50 €</li>
                        <li>Daurade royale - 20,00 €</li>
                        <li>Bar en croûte de sel - 22,00 €</li>
                        <li>Cabillaud à la vapeur - 19,00 €</li>
                        <li>Sole meunière - 24,50 €</li>
                    </ul>
                </section>
            </div>
            <div id="page4" class="page">
                <section>
                    <h2>Crustacés</h2>
                    <ul>
                        <li>Homard au beurre - 35,00 €</li>
                        <li>Crevettes à l'ail - 16,50 €</li>
                        <li>Crabe farci - 18,00 €</li>
                        <li>Langoustines rôties - 20,50 €</li>
                        <li>Bulots mayonnaise - 14,00 €</li>
                    </ul>
                </section>
            </div>
            <div id="page5" class="page">
                <section>
                    <h2>Desserts</h2>
                    <ul>
                        <li>Tarte au citron - 6,50 €</li>
                        <li>Crème brûlée - 7,00 €</li>
                        <li>Mousse au chocolat - 6,00 €</li>
                        <li>Sorbet citron - 5,50 €</li>
                        <li>Île flottante - 7,50 €</li>
                    </ul>
                </section>
            </div>
            <div id="page6" class="page">
                <section>
                    <h2>Boissons</h2>
                    <ul>
                        <li>Eau - 5,00 €</li>
                        <li>Sancerre - 26,00 €</li>
                        <li>Muscat - 22,00 €</li>
                        <li>Pinot Gris - 24,00 €</li>
                        <li>Sauvignon Blanc - 23,00 €</li>
                    </ul>
                </section>
            </div>
         </div>

        <!-- <div id="flipbook2"></div> -->

    </div>

.popup{
    background:white;
    width:80%;
    max-width:1280px;
    margin:auto;
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    padding:20px 2%;
    border-radius:20px;
    box-shadow:0 0 20px 0 rgba(0,0,0,0.7);
    /* display:none; */
    opacity:0;
    pointer-events: none;
}

.popup header .bt.closeBt{
    padding:5px;
    position:absolute;
    top:10px;
    right:10px;
    width:25px;
    height:25px;
    border-radius:50%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.popup footer{
    display:flex;
    justify-content: center;
}

.popup footer .bt{
    margin:0 10px;
    flex:1;
    max-width:30%;
}

html,body{
    height:100%;
    box-sizing: border-box;
}

body{
    background:linear-gradient(to top,#1e3c72,#2a5298);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display:flex;
    flex-direction: column;
    align-items: center;
}

#mainTitle{
    font-size:3em;
}

#bandeau{
    max-width:100%;
    border-radius:20px;
    margin:20px auto;
    display: block;
}

.bt{
    text-decoration: none;
    color:#1e3c72;
    font-weight:bold;
    background-color: white;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    padding:10px;
    border-radius: 5px;
    transition: background 500ms;
}

.bt:hover{
    background-color: royalblue;
    color:white;
}

#flipbook1,#flipbook2{
    border:30px solid #1e3c72;
    box-shadow: 0 0 15px 5px rgba(0,0,0,0.5);
}

.page{
    background:linear-gradient(to left,lightgray,white);
}

.page section{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
    height:100%;
    box-sizing: border-box;
}

.page section ul li{
    list-style-type: none;
    margin-bottom:10px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

#page1{
    background:darkblue;
    color:white;
}