.bg-image{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%; 
    height: 40vh;
}

h1, h2 {
    text-shadow: 2px 2px red;
}

a {
    /* couleur du texte en noir et on enlève le soulignage des liens */
    color: black;
    text-decoration: none;
}

.bg-primary {
    background-color: #b81f1f !important;
}

.btn-primary {
    background-color: #333333 !important;
    border-color: #333333;
}

nav section {
    /* Longueur barre de recherche */
    width: 50%;
}

.help {
    /* Ajustement des marges intérieures des textes de la section avec le formulaire */
    color: azure;
    padding: 15px 20% 15px 20%;
}

#formhelp {
    /* Formulaire avec 20% de marge à gauche et à droite */
    margin: 0% 20% 0% 20%;
}


@media screen and (max-width: 768px) {

    main section {
        /* chaque article à la ligne en passant en version mobile */
        display: flex;
        flex-wrap: wrap; /* Permet de répartir les articles sur plusieurs lignes si l'espace est limité */
    } 

    /* Navigation principale */
    nav {
        /* Même principe que pour main section */
        display: flex;
        flex-wrap: wrap;
        text-align: center; /* Centrage horizontal du texte */
    }

    nav section {
        /* Étirement de la barre de recherche sur toute la largeur */
        width: 100%;
    }

    nav img {
        margin: 0 auto; /* Centrage horizontal du logo du site */
    }

    nav ul {
        /* Centrage des textes de la nav */
        width: 100%; /* Assure que la liste occupe toute la largeur du conteneur */
    }

    .help {
        /* Ajustement des marges intérieures des textes de la section avec le formulaire */
        color: azure;
        padding: 15px 5% 15px 5%;
    }
    
    #formhelp {
        /* Réajustement formulaire avec moins de marges sur les côtés */
        margin: 0% 5% 0% 5%; /* Marges externes : aucun espace en haut/bas, 5% à gauche/droite */
    }
}