* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    @font-face {
        font-family: 'Solid';
        src: url('solid.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    html, body {
        font-family: Calibri, sans-serif;
        height: 100%;
        margin: 0;
        padding: 0;
        /* overflow: hidden; */
    }
    /* #myVideo {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        min-width: 100%;
        min-height: 100%;
    } */
    #myVideo {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
    }
    .content {
        position: fixed;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        color: #f1f1f1;
        width: 100%;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    h1 {
        font-family: 'Solid', sans-serif;
        color: #C5E86C;
        text-align: center;
        margin-bottom: 20px;
        font-size: 2em;
    }
    .button-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }
    .button {
        background-color: #612d63; /* Mauve */
        border-radius: 4px;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 24px;
        margin: 4px 2px;
        cursor: pointer;
        transition-duration: 0.4s;
    }
    .button:hover {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
        /*transform: scale(1.1);  Agrandit le bouton de 10% */
        font-size: 28px; /* Augmente la taille du texte */
        /*color: #C5E86C; */
        color: #c1ff24;
        font-family: 'Solid', sans-serif;
        background-color: #441147; /* Mauve */
    }
    .buttonvert {
        background-color: #C5E86C; /* vert */
        border-radius: 4px;
        border: none;
        color: #612d63;
        padding: 8px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        margin: 4px 2px;
        cursor: pointer;
        transition-duration: 0.4s;
    }
    .buttonvert:hover {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
        /*transform: scale(1.1);  Agrandit le bouton de 10% */
        font-size: 18px; /* Augmente la taille du texte */
        color: #612d63;
        font-family: 'Solid', sans-serif;
        background-color: #c1ff24; /* vert pétard */
    }
    #snackbar {
        visibility: hidden;
        width: 80%; /* Largeur en pourcentage pour une meilleure responsivité */
        max-width: 400px; /* Limite la largeur maximale */
        margin-left: auto; /* Centrer horizontalement */
        margin-right: auto;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        font-size: 12px;
        transform: translateX(-50%); /* Centrer horizontalement */
        box-sizing: border-box;
    }
    /* Effet d'animation */
    #snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
    @-webkit-keyframes fadein {
        from {bottom: 0; opacity: 0;} 
        to {bottom: 30px; opacity: 1;}
    }
    @keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 30px; opacity: 1;}
    }
    @-webkit-keyframes fadeout {
        from {bottom: 30px; opacity: 1;} 
        to {bottom: 0; opacity: 0;}
    }
    @keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }
        /* .butbutton {
        background-color: black; 
        border-radius: 4px;
        border: none;
        color: white;
        padding: 7px 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 9px;
        margin: 4px 2px;
        cursor: pointer;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
    }
    .butbutton:hover {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    } */
    .butbutton {
        background-color: #612d63; 
        border-radius: 4px;
        border: none;
        color: white;
        padding: 7px 16px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 4px;
        margin: 4px 2px;
        cursor: pointer;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
    }
    .butbutton:hover {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    }

    footer {
        background-color: rgba(255, 255, 255, 0.2);
        color: white;
        text-align: center;
        padding: 2px;
        position: fixed;  /* Fixe le footer en bas */
        bottom: 0;  /* Le place tout en bas */
        left: 0;    /* Garantir que le footer prend toute la largeur */
        width: 100%; 
        font-family: Arial, sans-serif;
        font-size: 10px;
        display: flex;
        justify-content: center;  /* Centre horizontalement */
        align-items: center;      /* Centre verticalement */
        height: 20px;             /* Ajuste la hauteur du footer selon tes besoins */
        z-index: 1000; /* Ajouter un z-index pour s'assurer qu'il reste au-dessus des autres éléments */
    }
    footer a {
        color: #1e90ff;  /* Liens en bleu */
        text-decoration: none;
    }
    footer a:hover {
        text-decoration: underline;
    }
    @media (max-width: 600px) {
        .button {
            padding: 12px 24px;
            font-size: 18px;
            margin: 1px 0; /* Espace vertical de 2px entre les boutons */
            width: 100%;
        }
        .button-container {
            flex-direction: column;
            align-items: center;
            gap: 0; /* Pas de gap horizontal */
        }
        #myVideo {
            object-fit: cover;
            width: auto;
            height: auto;
            min-width: 100%;
            min-height: 100%;
        }
        #snackbar {
            font-size: 14px; /* Réduire la taille du texte pour les petits écrans */
            padding: 12px; /* Moins de padding pour les petits écrans */
            width: 90%; /* Prendre 90% de la largeur sur mobile */
            bottom: 20px; /* Remonter légèrement pour plus de visibilité */
        }