@font-face {
    font-family: 'Geist-Regular';
    src: url('/fonts/Geist-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Geist-Bold';
    src: url('/fonts/Geist-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Golden-Dragon-Solid';
    src: url('/fonts/golden-dragon-solid.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Golden-Dragon-Outline';
    src: url('/fonts/golden-dragon-outline.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Golden-Dragon-Shadow';
    src: url('/fonts/golden-dragon-shadow.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/*@font-face {
    font-family: 'EP-Stellari-Display';
    src: url('/fonts/ep-stellari-display.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}*/

/*@font-face {
    font-family: 'Ostrovsky-Bold';
    src: url('/fonts/ostrovsky-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}*/

body {
    font-family: Geist-Regular, sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    color: #fff;
    /*background-color: dimgray;*/
    background-image: url('/images/bg.jpg');
    background-attachment: fixed;
    background-size: cover; /* Ajuste l'image pour couvrir toute la page */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    margin: 0; /* Supprime les marges par défaut */
}

.fade-out {
    opacity: 0;
}

header {
    font-weight: 700;
    background-color: #111;
    color: #FFFFFF;
    padding: 1em;
    text-align: center;
}

h1 {
    font-family: Golden-Dragon-Solid, sans-serif;
    font-size: 1.5em;
    text-align: center;
    text-shadow: 0px 0.2em 0.5em #000000;
}

    header h1 {
        font-weight: 700;
        font-size: 2.8em;
        margin: 3vh 0 0 0;
    }

@media (max-width: 400px) {
    header h1 {
        font-size: 2.2em;
    }
}

    h2 {
        font-family: Golden-Dragon-Solid, sans-serif;
        font-size: 1.3em;
        text-shadow: #000 0 0 0.3em;
    }

    header h2 {
        font-size: 2em;
        margin: 2vh 0 2vh 0;
    }

@media (max-width: 1129px) {
    header h2 {
        font-size: 1.6em;
    }
}

    p {
        margin: 0 0 0 0;
    }

    nav {
        display: flex;
        justify-content: center;
        gap: 2.5vw;
        background-color: rgba(8, 8, 8, 0.8);
        backdrop-filter: blur(16px);
        box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.5);
    }

        nav a {
            font-family: Golden-Dragon-Solid, sans-serif;
            text-align: center;
            color: #f0f0f0;
            text-decoration: none;
            font-size: 1.2em;
            padding: 1vh 1vh;
        }

            nav a:hover {
                color: #ff2a00;
            }

a{
    color: #FFFFFF;
}

    a:visited {
        color: inherit; /* ou choisis une couleur spécifique comme #000000 */
    }

    ul {
        text-align: left;
        padding: 0 0 0 1.4em;
        margin: auto;
        display: inline-block;
    }

    li {
        list-style-position: outside;
        font-size: 1em;
    }

    #language-switch {
        position: absolute;
        top: 10px;
        right: 20px;
    }

        #language-switch img {
            cursor: pointer;
            width: 30px;
            margin-left: 10px;
        }

    .lang-en, .lang-fr {
        display: none;
    }

    .section {
        margin-top: auto;
        padding: 1em 0 0 0;
        text-align: center;
    }

    .social-sidebar {
        position: fixed;
        top: 50%;
        right: 0px;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 15px;
        z-index: 1000;
        background-color: rgba(8, 8, 8, 0.5);
        backdrop-filter: blur(16px);
        box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.5);
        padding: 10px; /* Pour donner un peu d'espace autour des icônes */
        border-top-left-radius: 8px; /* Coin en haut à gauche arrondi */
        border-bottom-left-radius: 8px; /* Coin en bas à gauche arrondi */
    }

        /* Style pour les icônes de réseaux sociaux */
        .social-sidebar a img {
            width: 40px;
            height: 40px;
            transition: transform 0.1s ease;
        }

        /* Animation au survol */
        .social-sidebar a:hover img {
            transform: scale(1.1);
        }

    @media (max-width: 1129px) {
        .social-sidebar {
            display: none;
        }
    }

.sound-toggle-sidebar {
    position: fixed;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    z-index: 1000;
    background-color: rgba(8, 8, 8, 0.5);
    backdrop-filter: blur(16px);
    box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-top-right-radius: 8px; /* Coin en haut à droite arrondi */
    border-bottom-right-radius: 8px; /* Coin en bas à droite arrondi */
}

    .sound-toggle-sidebar img {
        width: 40px; /* Taille de l'image */
        height: 40px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

        .sound-toggle-sidebar img:hover {
            transform: scale(1.1); /* Zoom léger au survol */
        }

    .button {
        outline: none;
        cursor: pointer;
        border: none;
        padding: 0.5em 0;
        margin: 1.5em auto 1em auto;
        font-family: inherit;
        font-size: inherit;
        position: relative;
        display: inline-block;
        font-weight: 700;
        font-size: 1em;
        border-radius: 3em;
        overflow: hidden;
        background: #ff2a00; /* couleur après l'animation */
        width: 10em;
        transition: color 0.4s;
    }

        .button span {
            position: relative;
            z-index: 10; /* Assure que le texte est au-dessus */
            color: #FFFFFF; /* couleur texte avant le hover */
            transition: color 0.4s;
        }

    .buttoncontact:hover span {
        color: #000000; /* couleur texte après le hover */
    }

    .button::before,
    .button::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .button::before {
        content: "";
        background: #9d0000; /* couleur pour l'animation */
        width: 120%;
        left: -10%;
        transform: skew(30deg);
        transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
    }

    .button:hover::before {
        transform: translate3d(100%, 0, 0);
    }
}

.contact{
    padding: 0.2em 0 0 0;
    background-color: #111111;
}

.social-media-links {
    display: none; /* Masque les images par défaut */
}

/* Styles pour les écrans de 1129px ou moins */
@media (max-width: 1129px) {
    .social-media-links {
        display: flex;
        gap: 1em;
        justify-content: center; /* Centre les images horizontalement */
        align-items: center; /* Centre les images verticalement */
        padding: 1em 0; /* Ajoute un espace de 2em en haut et en bas */
    }

        .social-media-links img {
            width: 2em;
        }
}

#contactformcontainer {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    margin: 10em auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 5px;
    font-weight: bold;
}

input, textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

footer {
    background-color: #111;
    color: #f0f0f0;
    text-align: center;
    padding: 1.3em;
}

a[href^="mailto:"] {
    color: #ff2a00;
}