.single-membres .hero-banner {
    height: 425px
}

.single-membres .hero-banner h1 {
    max-width: 830px
}

.single-membres .hero-banner>.ctnr {
    height: 425px;
    display: flex;
    height: 100%;
    justify-content: space-between;
    flex-direction: column
}

.single-membres .hero-banner .bck {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover
}

h2.before {
    margin-bottom: 0px
}

.suggestions h2.before {
    margin-bottom: var(--gap3)
}

.subtitle {
    color: var(--tertiary-500);
    text-transform: uppercase;
    font-weight: 800;
    font-family: Montserrat;
    font-size: 24px;
    margin-bottom: var(--gap2)
}

.lassociation {
    margin-top: 110px;
    margin-bottom: 110px
}

@media (max-width: 850px) {
    .lassociation {
        margin-top:var(--gap3);
        margin-bottom: var(--gap3)
    }
}

.lassociation>.ctnr {
    display: flex;
    justify-content: space-between
}

@media (max-width: 850px) {
    .lassociation>.ctnr {
        flex-direction:column
    }
}

.lassociation>.ctnr>.column.infos {
    position: relative
}

@media (max-width: 850px) {
    .lassociation>.ctnr>.column.infos {
        order:1;
        margin-bottom: var(--gap3)
    }
}

.lassociation>.ctnr>.column.infos>.bloc {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tertiary-400);
    position: absolute;
    top: -100%;
    right: 0;
    background: var(--white);
    width: 400px;
    min-width: 100%;
    overflow: hidden
}

@media (max-width: 850px) {
    .lassociation>.ctnr>.column.infos>.bloc {
        position:relative;
        top: 0;
        width: unset;
        min-width: unset
    }
}

.lassociation>.ctnr>.column.infos>.bloc>.ctnr {
    padding: var(--gap1)
}

.lassociation>.ctnr>.column.infos .logo {
    max-width: 185px;
    align-self: center;
    margin-bottom: 22px
}

.lassociation>.ctnr>.column.infos .title {
    color: var(--primary-400);
    font-size: 35px;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
    margin-bottom: var(--gap2);
    white-space: nowrap
}

.lassociation>.ctnr>.column.infos .info {
    color: var(--grey-700);
    line-height: 150%;
    margin-bottom: var(--gap2);
    display: flex;
    column-gap: 5px
}

.lassociation>.ctnr>.column.infos .label {
    white-space: nowrap
}

.lassociation>.ctnr>.column.desc {
    max-width: 55%;
    width: 720px
}

@media (max-width: 850px) {
    .lassociation>.ctnr>.column.desc {
        max-width:100%;
        order: 2
    }
}

.description {
    color: var(--grey-700);
    line-height: 150%
}

section.lassociation .description p,section.lassociation .description br {
    margin-bottom: var(--gap1)
}