body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Empêche le défilement horizontal */
}

/* Conteneur principal */
#principal {
    margin: 2% 4% 4% 4%;
}

/* Bloc titre */
#titre {
    text-align: center;
    color: #303848;
    border: 2px solid #BF9268;
}

/* Coordonnées */
#coordonee {
    text-align: center;
}

/* Tailles des titres */
#principal h1 {
    font-size: 1.5em;
}

#principal h2 {
    font-size: 1.2em;
}

/* Section objectif */
#objectif_style {
    text-align: center;
}

#objectif_style h2 {
    background-color: #303848;
    color: white;

    /* ON GARDE EXACTEMENT LE MÊME COMPORTEMENT */
    margin-left: 20%;
    margin-right: 20%;

    position: relative;
    z-index: 2;
}

/* Ligne horizontale */
hr {
    display: block;
    width: 100%;
    height: 20px;

    border: 0;
    border-top: 1px solid #BF9268;

    margin: -1.7em 0;
    padding: 0;

    position: relative;
    z-index: 1;
}

/* Texte objectif */
#objectif_texte {
    margin: 1.7em 0;
}

/* block regroupe reste */
#bloc {
    display: flex;
    flex-wrap: wrap;
    margin-left: 4%;
    margin-right: 20%;
    align-content: space-evenly;
    gap: 20px;
    max-width: 100%; /* Empêche le débordement */
    box-sizing: border-box;
}

#bloc_1 {
    background-color: #F2F2F2;
    flex: 0 0 250px;
    min-width: 0; /* Permet au bloc de rétrécir */
    box-sizing: border-box;
}

#bloc_1 p {
    margin-left: 10%;
}

#hoby_titre {
    margin-top: 30%;
}

#bloc_2 {
    flex: 1;
    min-width: 0; /* Permet au bloc de rétrécir */
    box-sizing: border-box;
}

.bloc_2_titre {
    position: relative;
    width: auto;
    max-width: 100%; /* Empêche le débordement */
}

.bloc_2_titre h2 {
    color: white;
    background-color: #303848;
    display: inline-block;
    padding-right: 20px;
    margin: 0;
    position: relative;
    z-index: 2;
    max-width: 100%;
    box-sizing: border-box;
}

.bloc_2_titre::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #BF9268;
    z-index: 1;
    transform: translateY(-50%);
}

/* Responsive : empiler sur petits écrans */
@media (max-width: 660px) {
    #principal {
        margin: 5%;
    }

    #bloc {
        margin-left: 0; /* Supprime la marge gauche */
        margin-right: 5%;
        justify-content: flex-start; /* Aligne à gauche */
    }

    #bloc_1 {
        flex: 0 0 40%; /* Bloc_1 prend 40% de la largeur */
        max-width: 40%;
        margin-left: 5%; /* Espace à gauche */
    }

    #bloc_2 {
        flex: 1; /* Bloc_2 prend l'espace restant */
        min-width: 0;
    }

    #objectif_style h2 {
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media (max-width: 480px) {
    #principal {
        margin: 3%;
    }

    #bloc {
        margin-left: 0;
        margin-right: 3%;
        gap: 15px;
    }

    #bloc_1 {
        flex: 0 0 35%; /* Bloc_1 prend 35% sur très petits écrans */
        max-width: 35%;
        margin-left: 3%;
    }

    #bloc_2 {
        flex: 1;
    }

    #objectif_style h2 {
        margin-left: 0;
        margin-right: 0;
    }
}