/* ==========================================================================
   SINGLE MEMBRE
   ========================================================================== */

.single-membre {
    position: relative;

    background: #FFFFFF;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.single-membre__hero {
    position: relative;

    overflow: hidden;

    padding: 150px 0 80px;

    background: #0E2434;

    color: #FFFFFF;
}

.single-membre__decor {
    position: absolute;

    left: -120px;
    bottom: -230px;

    width: clamp(480px, 58vw, 920px);
    height: clamp(480px, 58vw, 920px);

    background-image: url("https://lons-entrepreneurs.fr/wp-content/uploads/2026/09/motifFlecheLons.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;

    opacity: .72;

    pointer-events: none;
}

.single-membre__row {
    position: relative;
    z-index: 2;

    min-height: 520px;
}


/* ==========================================================================
   VISUEL
   ========================================================================== */

.single-membre__visual {
    position: relative;

    width: 100%;

    max-width: 600px;

    margin: 0 auto;
}

.single-membre__portrait {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 50%;

    background: #153951;
}

.single-membre__portrait-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.single-membre__portrait-fallback {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 48px;

    color: #FFFFFF;

    font-family: "Poppins", sans-serif;
    font-size: 3rem;
    font-weight: 700;

    text-align: center;
}


/* ==========================================================================
   LOGO ENTREPRISE
   ========================================================================== */

.single-membre__logo-circle {
    position: absolute;

    right: -4%;
    bottom: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 200px;
    height: 200px;

    padding: 32px;

    overflow: hidden;

    border-radius: 50%;

    background: #153951;
}

.single-membre__logo {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center;

    filter: grayscale(100) brightness(100);
}


/* ==========================================================================
   CONTENU
   ========================================================================== */

.single-membre__content {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 24px;

    width: 100%;
}

.single-membre__eyebrow,
.single-membre__title {
    width: 100%;
}

.single-membre__eyebrow > *:last-child,
.single-membre__title > *:last-child {
    margin-bottom: 0;
}


/* Surtitre */

.single-membre__eyebrow,
.single-membre__eyebrow p,
.single-membre__eyebrow a,
.single-membre__eyebrow strong,
.single-membre__eyebrow b {
    color: #2EA3F2;
}

.single-membre__eyebrow p {
    margin: 0;

    font-weight: 500;
}


/* Titre */

.single-membre__title,
.single-membre__title *,
.single-membre__fallback-title {
    color: #FFFFFF;
}

.single-membre__fallback-title {
    margin: 0;
}


/* ==========================================================================
   TAGS
   ========================================================================== */

.single-membre__tags {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.single-membre__tag {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 7px 14px;

    border-radius: 24px;

    background: #153951;

    color: #FFFFFF;

    font-family: "Poppins", sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
}


/* ==========================================================================
   ACTIONS
   ========================================================================== */

.single-membre__actions {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 12px;
}

.single-membre__socials {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}

.single-membre__social {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin: 0;

    color: #FFFFFF;

    font-family: "Poppins", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        opacity .3s ease,
        transform .3s cubic-bezier(.16, 1, .3, 1);
}

.single-membre__social img {
    display: block;

    width: auto;
    height: auto;

    max-width: 28px;
    max-height: 28px;

    object-fit: contain;
}

.single-membre__social:hover {
    opacity: .75;

    transform: translateY(-2px);
}


/* ==========================================================================
   BLOCS GUTENBERG
   ========================================================================== */

.single-membre__blocks {
    position: relative;

    background: #FFFFFF;
}


/* ==========================================================================
   ANIMATION
   ========================================================================== */

.js-single-membre-visual,
.js-single-membre-content {
    will-change: opacity, transform;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {

    .single-membre__logo-circle {
        width: 170px;
        height: 170px;

        padding: 28px;
    }

}


@media (max-width: 991.98px) {

    .single-membre__hero {
        padding: 120px 0 64px;
    }

    .single-membre__row {
        min-height: 0;

        row-gap: 64px;
    }

    .single-membre__visual {
        max-width: 520px;
    }

    .single-membre__content {
        max-width: 760px;

        margin: 0 auto;
    }

    .single-membre__decor {
        left: -230px;
        bottom: -180px;

        opacity: .45;
    }

}


@media (max-width: 575.98px) {

    .single-membre__hero {
        padding: 100px 0 52px;
    }

    .single-membre__row {
        row-gap: 48px;
    }

    .single-membre__visual {
        width: calc(100% - 28px);
    }

    .single-membre__logo-circle {
        right: -14px;
        bottom: -14px;

        width: 120px;
        height: 120px;

        padding: 20px;
    }

    .single-membre__content {
        gap: 20px;
    }

    .single-membre__actions {
        align-items: flex-start;

        flex-direction: column;
    }

    .single-membre__decor {
        left: -210px;
        bottom: -80px;

        width: 540px;
        height: 540px;

        opacity: .35;
    }

}


@media (prefers-reduced-motion: reduce) {

    .js-single-membre-visual,
    .js-single-membre-content {
        opacity: 1 !important;

        transform: none !important;

        will-change: auto;
    }

    .single-membre__social {
        transition: none;
    }

}