/* Global Styles */
body {
    background: url('./image/bg.png') no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    font-family: 'Bebas Neue', sans-serif;
    color: white;
}


.border {
    width: 90%; /* Largeur adaptative */
    max-width: 900px; /* Limite la largeur pour grands écrans */
    margin: 20px auto; /* Centre le contenu avec un espacement au-dessus et en dessous */
    text-align: center;
}

h3 {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 25px;
    margin: 0; /* Supprime les marges */
}

h3 + h3 {
    margin-top: 0; /* Supprime la marge entre les deux h3 */
}


h3 b{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
}

.titre {
    margin-top: 10px;
    margin-bottom: 20px;
}

h1 {
    color: white;
    font-size: 49px;
    font-family: 'Bebas Neue', sans-serif;
    margin: 0;
}

h1 + h1{
    margin-top: 0;
}

b {
    color: #ffe300;
    font-family: 'Oswald', sans-serif;
}

.line {
    text-align: start;
    font-size: 18px;
}

.line p{
    margin-bottom: 35px;
}

.sans {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permet de passer sur plusieurs lignes */
    gap: 10px; /* Ajoute de l'espace entre les éléments */
    margin-bottom: 20px; /* Ajoute un espace entre cette section et les autres */
    font-size: 20px;
}

.sans i.bi {
    color: #ffe300;
    font-size: 20px;
}

.sans p {
    margin: 0;
}

.vid {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

iframe {
    width: 100%; /* Largeur adaptative */
    height: 450px; /* Hauteur par défaut */
    max-width: 100%; /* Empêche le débordement */
    border: none;
}

/* Conteneur pour aligner les icônes et le texte */
.caret-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espace entre les éléments */
    margin: 20px 0; /* Espacement autour */
}

.caret-container i.bi {
    color: white;
    font-size: 30px;
}

h2 {
    font-size: 24px;
    text-align: center;
    line-height: 1.5;
    margin: 0;
}

/* Footer */
footer {
    text-align: center;
    font-size: 14px;
    margin-top: 20px;
    padding: 10px;
    background-color: #222; /* Fait ressortir le footer */
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    h1 {
        font-size: 28px;
    }

    b {
        font-size: 28px;
    }

    .sans {
        font-size: 16px;
        gap: 5px;
    }

    iframe {
        height: 300px; /* Hauteur réduite pour les petits écrans */
    }

    .caret-container i.bi {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 24px;
    }

    b {
        font-size: 24px;
    }

    .sans {
        flex-direction: column; /* Affiche les éléments en colonne sur les très petits écrans */
        font-size: 14px;
    }

    iframe {
        height: 250px; /* Hauteur encore plus petite pour les très petits écrans */
    }

    h2 {
        font-size: 18px;
    }
}