body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            /*background-image: url("background-art.png");
            background-size: cover;
            background-repeat: no-repeat; 
            background: linear-gradient(to bottom right, #f2f2f2, #d9d9d9);*/
            background-color:#fff;
            
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;font-family: 'Playfair Display', serif;
        }
        
        /* Styles pour les écrans de tablette de 1024 pixels de largeur ou moins */
@media screen and (max-width: 1024px) {
    body {
        display: flex;
        flex-direction: column; /* Aligner les éléments en colonne */
        justify-content: flex-start; /* Positionner le contenu en haut de la page */
        align-items: center; /* Centrer horizontalement */
        height: 100vh; /* 100% de la hauteur de la vue */
        overflow-y: hidden; /* Empêcher le défilement vertical */
    }
    h2 {margin-bottom:10px; !important; font-size:20px !important;}
    .buttons, .bgimage {padding:20px !important;}
    .round-btn {padding:10px 20px !important;margin-bottom:12px !important;} {}
    button.round-btn a {font-size:18px !important;}
}
        /*body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(to bottom right, #f2f2f2, #d9d9d9);
            background-image: url("background-art.png");
            background-size: cover;
            background-repeat: no-repeat; 
        }*/
h2 {font-family: 'Playfair Display', serif; font-size:28px;color: #030e4f; text-align:center;}
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            
            animation: fadeInLeft 1s ease-in-out;
        }

        .buttons {
            width: 50%; padding:50px; justify-content:center;
        }

        .bgimage {
                width: 50%;padding: 50px;justify-content:center;

        }

        .round-btn {
            /*background-color: black;
            color: white;
            border: 2px solid #1e2330;
            border-radius: 50px; */
            width:100%;
            box-shadow:0 0 10px 5px rgba(0,0,0,.05);
            padding: 15px 20px;
            margin-bottom: 20px;
            cursor: pointer;
            /*transition: background-color 0.3s, color 0.3s;*/
            
            border: 2px solid #030e4f;
            
    box-shadow: #030e4f 8px 8px 0px 0px;
    color: rgb(0, 0, 0);
    background-color: #eee;
    width: calc(100% - 12px);
    border-radius: 8px;
        }

        .round-btn:hover {
            background-color: #eee;
            border: 2px solid #030e4f;
            color: black !important;
        }

        .text-btn {padding:15px 0 15px 0px; margin:auto; color:#fff;font-family: 'Playfair Display', serif;}
        .text-btn:hover { color:#000;}
        .round-btn a:hover {color:#ccc; text-decoration:none;}
        .text-btn a:hover {color:#000; text-decoration:none;}
        button.round-btn a {
            color: #06426a; font-size:20px;
            text-decoration: none;
        }
        .round-btn:hover {color:#000; text-decoration:none;}
.hidden {
    display: none;
}
        @media (max-width: 768px) {
            body, html {background-image:none !important; margin:10px;}
            body {align-items: inherit;}
            h2 {font-size:20px;}
            .container {
                flex-direction: column;
                align-items: center;
            }
.buttons {
    width: 100%;
    padding: 15px;
}
            .round-btn {
                width: 100%;
                margin-bottom: 20px;
            }
            .bgimage {
    margin: 0 auto;
    text-align: center; display:none !important;
}
        }

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .round-btn {
    /* Votre code CSS existant */
   
    transition: transform 0.3s ease-in-out
}

.round-btn:hover {
    /*transform: scale(1.1);*/
     /* Décalage vers le bas */
    box-shadow: #030e4f 3px 3px 0px 0px; 
    position:relative; top:5px; left:3px;
}
.social-icons {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .social-icons svg {
            width: 40px;
            height: 40px;
            margin: 0 10px;
        }
        path {
    fill: #030e4f;
}