.ressources__body header, .ressources__body .header, .ressources__body .menu-overlay{
  background-color:var(--bleu);
}


.ressources__page__header{
    display:flex;
    flex-direction: column;
    align-items: center;
    padding:30px 0;
    & h1{
        width:80%;
        font-family: 'PoppinsBlack';
        padding:5px 0;
        margin: 0;
        color: var(--bleu);
        font-size: 2.5rem;
        line-height:1.1;
    }
    & p{
        width:80%;
        font-size:1.2rem;
    }
}

.ressources__container{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
        & hr{
        width: 80%;
        color: var(--bleu);
        border: 0.5px solid var(--bleu);
    }
}

.ressource__item{
    display:flex;
    width:80%;
    margin: 30px 0;
    gap: 20px;
}

.ressource__titles{
    & h3{
        font-size: 1.4rem;
        font-family:'PoppinsBold';
        padding: 0;
        margin:0;
        line-height:1;
        color:var(--bleu);
        text-align:left;
    }
    & p{
        font-size:1rem;
        text-align:left;
        margin:0;
        padding:5px 0;
    }
    & h5{
        font-size: 1rem;
        font-family:'PoppinsMedium';
        padding: 5px 0;
        margin:0;
        line-height:1;
        color:var(--noir);
        text-align:left;
    }
}

.ressource__image{
    background-color:var(--bleu);
    height:100%;
    width:35%;
    display: flex;
    justify-content: center;
    align-items: end;
    aspect-ratio: 1/1;
    & img{
        object-fit: cover;
        width: 100%;
        aspect-ratio: 1/1;
    }
}

.ressource__item__content{
    width:65%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap:10px;
    & a{
        width:100%;
    }
}

#ressources__button{
    max-width:300px;
    & button{
        padding:15px;
        transition: all 0.2s;
        margin:0;
    }
}


@media screen and (max-width:1024px){
    .ressource__item{
        width:80%;
    }

    .ressource__titles{
        & p{
            font-size:0.9rem;
        }
    }

    #ressources__button{
        max-width:250px;
        & button{
            margin:0;
        }
    }
}


@media screen and (max-width:768px){
    .ressource__item{
        flex-direction: column;
    }

    .ressource__image{
        width:100%;
        & img{
            max-width:none;
        }
    }

    .ressource__item__content{
        width:100%;
        & p{
            padding: 5px 0;
        }
        & .date{
            padding:0;
        }
    }

        #ressources__button{
        max-width:100%;
        & button{
            margin:10px 0 0 0;
        }
    }

    .ressources__page__header{
        padding: 30px 0 0px 0;
        & p{
            font-size:0.9rem;
        }
    }
}


@media screen and (max-width:480px){
    .ressources__page__header{
        & h1{
            font-size:2rem;
        }
    }
}