/* titre */
.titre img {
    border: 10px solid var(--peche);
}

.titre {
    position: relative;
    margin: 0 2em;
    display: flex;
    justify-content: center;
}

    .titre div {
        text-align: center;
        position: absolute;
        bottom: -10%;
        width: 50%;
        height: 50%;
        background-color: rgba(255, 255, 255, 0.9);
        border: solid 0px rgba(0, 0, 0, 0.1);
    }
    .titre .pos {
        width: 100%;
        height: 90%;
        background-color: transparent;
        border: solid 0px rgba(0, 0, 0, 0.1);
    }
    .titre h1,
    .titre h2 {
        margin: 0;
        font-size: 2em;
    }
.brit {
    font-family: BrittanySignature;
    font-weight: bold;
    font-size: 200%;
}
.brittitre {
    font-weight: bold;
    font-size: 22px;
}
/* categories_header */
.categories_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 3em 2em;
}

    .categories_header a {
        text-decoration: none;
        color: var(--noir);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        margin: 1em;
    }

    .categories_header p {
        text-align: center;
        font-weight: 600;
    }

    .categories_header img {
        border-radius: 100px;
    }
/* vingtAnsXP */
.vingtAnsXP {
    background-image: url(/images/20ansXP.png);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 2em;
    border-bottom: 20px solid var(--peche);
}

    .vingtAnsXP img {
        width: 50%;
        margin-top: 1em;
    }

    .vingtAnsXP p {
        margin: 0;
        font-size: 5em;
    }
/* accueil_engagements */
.accueil_engagements {
    display: flex;
    flex-direction: row;
    position: relative;
    height: 750px;
    margin: 3em 0;
}

    .accueil_engagements div {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .accueil_engagements p {
        margin: 0;
        text-align: center;
    }

    .accueil_engagements .imageEtElem .main_image {
        border-radius: 350px;
        width: 70%;
    }

    .accueil_engagements .imageEtElem {
        position: relative;
    }

        .accueil_engagements .imageEtElem p {
            position: absolute;
            top: 15px;
            left: 15px;
            background-color: var(--peche);
            border-radius: 50%;
            width: 150px;
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
            font-weight: 700;
            padding: 1.5rem;
            transform: rotate(-20deg);
        }

.accueil_smiley {
    position: absolute;
    /* width: 10%; */
    bottom: 15px;
    right: 15px;
    background-color: var(--peche);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    padding: 1.5rem;
    transform: rotate(20deg);
}

.accueil_engagements .txt p {
    font-size: 2em;
    margin: -13px;
}

/* accueil_valeurs */
.accueil_valeurs img {
    width: 30%;
    margin-bottom: 1em;
}

.accueil_valeurs {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

    .accueil_valeurs div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        margin: 2em;
    }

    .accueil_valeurs p {
        margin: 0;
        padding-bottom: 0.5em;
    }

    .accueil_valeurs div strong {
        font-weight: bolder;
    }
/* accueil_partenaires */
.accueil_partenaires {
    margin: 1em 0;
}

    .accueil_partenaires .img-top {
        object-fit: cover;
        width: 100%;
        height: 50%;
    }

    .accueil_partenaires div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 2em 6em;
    }

        .accueil_partenaires div img {
            height: 70px;
            width: auto;
            padding: 1em;
        }
/* accueil_footer */
.accueil_footer .pt-un {
    display: flex;
    align-items: end;
    font-size:12pt;
}

.accueil_footer_contact {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-right: 2em;
    padding-bottom: 1em;
}

    .accueil_footer_contact img {
        width: 80%;
    }

    .accueil_footer_contact p {
        margin: 0.5em 0;
    }

    .accueil_footer_contact a {
        margin: 0.5em 0;
        text-decoration: none;
        color: black;
        font-weight: bold;
    }
/* ------------------------------ RESPONSIVE ------------------------------ */

@media (max-width: 920px) {
    em{
        font-size: 34px;
    }
    /* titre : Responsive */
    .brit {
        font-size: 100%;
    }

    .brittitre {
        font-size: 14px;
    }
    .titre img{
        border:10px solid var(--peche);
    }
    .titre .pos {
        width: 100%;
        height: 100%;
        top: 10%;
        transform: translate(0, 0%);
        background-color: transparent;
        border: solid 0px red;
    }
    .titre div {
        width: 60%;
    }
    .titre img {
        border: 5px solid var(--peche);
    }

    /* categories_header : Responsive */
    .categories_header {
        flex-wrap: wrap;
        justify-content: center;
        font-size:14px;
    }

        .categories_header a {
            width: 25%;
        }

    /* vingtAnsXP : Responsive */

    .vingtAnsXP p {
        font-size: 170%;
    }
    /* accueil_engagegemt : Responsive */
    .accueil_engagements {
        flex-direction: column;
        height: auto;
        margin-bottom: 1em;
    }

        .accueil_engagements div {
            width: 100%;
        }

        .accueil_engagements .imageEtElem .main_image {
            object-fit: cover;
            height: 10em;
        }

        .accueil_engagements .imageEtElem {
            margin-bottom: 2em;
        }

            .accueil_engagements .imageEtElem p {
                width: 70px;
                height: 70px;
                color: black;
                font-size: 0.6em;
                top: 0px;
                left: 40px;
            }

            .accueil_engagements .imageEtElem .accueil_smiley {
                width: 70px;
                height: 70px;
                padding: 1rem;
                bottom: 0;
                right: 40px;
            }

        .accueil_engagements .txt p {
            font-size: 1em;
        }
    /* accueil_valeurs : Responsive */
    .accueil_valeurs {
        flex-wrap: wrap;
    }

    .accueil_footer .pt-un img {
        display: none;
    }
    /* accueil_footer_logos : Responsive */
    .accueil_footer_logos {
        width: 50%;
        flex-direction: column;
        align-items: center;
    }

        .accueil_footer_logos a {
            margin-top: 0.5em;
        }

    .accueil_footer_contact {
        width: 50%;
    }
}