/* BNI HOME HEADER MEMBER TAB CSS V1 */

/*
 * Le header devient uniquement le repère
 * de positionnement du bouton.
 *
 * Aucun style des logos n'est modifié.
 */
.home-brand{
    position:relative;
    margin-bottom:34px !important;
}


/*
 * Petit onglet accroché au bord inférieur
 * droit du header.
 */
.home-member-tab{
    position:absolute;

    right:20px;
    bottom:-18px;

    z-index:5;

    min-height:36px;

    display:inline-flex;

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

    gap:7px;

    padding:
        8px
        12px;

    background:#b5122b;

    color:#fff;

    border:
        1px solid
        #b5122b;

    border-radius:4px;

    box-shadow:
        0 7px 16px
        rgba(92,0,18,.18);

    text-decoration:none;

    font-size:10px;
    line-height:1.2;

    font-weight:750;

    white-space:nowrap;

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}


.home-member-tab:hover{
    background:#8f0e21;

    border-color:#8f0e21;

    transform:
        translateY(-1px);

    box-shadow:
        0 9px 18px
        rgba(92,0,18,.23);
}


.home-member-tab svg{
    width:15px;
    height:15px;

    flex:0 0 15px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* TABLETTE */

@media(max-width:700px){

    .home-brand{
        margin-bottom:36px !important;
    }

    .home-member-tab{
        right:14px;

        bottom:-17px;

        min-height:34px;

        padding:
            7px
            10px;

        font-size:9px;
    }

}


/* PETIT MOBILE */

@media(max-width:440px){

    .home-member-tab{
        right:50%;

        transform:
            translateX(50%);

        width:
            calc(100% - 28px);

        max-width:260px;
    }

    .home-member-tab:hover{
        transform:
            translateX(50%)
            translateY(-1px);
    }

}


/* ACCESSIBILITE */

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

    .home-member-tab{
        transition:none;
    }

}


/* ============================================================
   BNI MEMBER PHOTO GALLERY V1
   ============================================================ */

.member-photo-gallery{
    margin-bottom:14px;

    background:#fff;

    border:
        1px solid
        var(--line);

    border-radius:8px;

    box-shadow:
        0 12px 30px
        rgba(63,0,13,.10);

    overflow:hidden;
}


.member-photo-gallery-head{
    display:flex;

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

    gap:20px;

    padding:
        14px
        18px
        12px;

    border-bottom:
        1px solid
        var(--line);
}


.member-photo-gallery-kicker{
    margin-bottom:2px;

    color:var(--bni-red);

    font-size:9px;
    line-height:1.2;

    font-weight:850;

    text-transform:uppercase;
    letter-spacing:.09em;
}


.member-photo-gallery-title{
    color:var(--ink);

    font-size:14px;
    font-weight:850;
}


.member-photo-gallery-count{
    flex:none;

    color:var(--muted);

    font-size:10px;
    font-weight:700;
}


.member-photo-viewport{
    width:100%;

    overflow:hidden;

    padding:
        4px
        0;
}


.member-photo-track{
    display:flex;

    width:max-content;

    will-change:transform;

    animation:
        bniMemberPhotoScroll
        38s
        linear
        infinite;
}


.member-photo-track.is-static{
    width:100%;

    justify-content:center;

    animation:none;
}


.member-photo-group{
    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:
        14px
        7px
        16px;
}


.member-photo-track.is-static
.member-photo-group{
    justify-content:center;

    flex-wrap:wrap;
}


.member-photo-card{
    width:105px;

    flex:none;

    display:block;

    padding:
        3px
        3px
        6px;

    color:var(--text);

    text-align:center;
    text-decoration:none;

    border-radius:6px;

    transition:
        transform .16s ease,
        background .16s ease;
}


.member-photo-card:hover{
    background:#faf8f6;

    transform:
        translateY(-2px);
}


.member-photo-visual{
    width:80px;
    height:80px;

    margin:
        0
        auto
        8px;

    padding:3px;

    background:#fff;

    border:
        2px solid
        rgba(181,18,43,.18);

    border-radius:50%;

    box-shadow:
        0 7px 18px
        rgba(43,0,8,.12);
}


.member-photo-visual img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    border-radius:50%;
}


.member-photo-name{
    min-height:28px;

    display:flex;

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

    color:#292929;

    font-size:10px;
    line-height:1.25;

    font-weight:800;
}


.member-photo-company{
    margin-top:3px;

    overflow:hidden;

    color:var(--muted);

    font-size:9px;
    line-height:1.25;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.member-photo-viewport:hover
.member-photo-track{
    animation-play-state:paused;
}


@keyframes bniMemberPhotoScroll{

    from{
        transform:
            translateX(0);
    }

    to{
        transform:
            translateX(
                calc(-50% - 7px)
            );
    }
}


@media(max-width:700px){

    .member-photo-gallery-head{
        padding:
            12px
            14px
            10px;
    }


    .member-photo-gallery-title{
        font-size:13px;
    }


    .member-photo-card{
        width:92px;
    }


    .member-photo-visual{
        width:70px;
        height:70px;
    }


    .member-photo-group{
        gap:9px;

        padding:
            12px
            5px
            14px;
    }
}


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

    .member-photo-track{
        width:max-content;

        animation:none !important;

        transform:none !important;
    }


    .member-photo-viewport{
        overflow-x:auto;
    }


    .member-photo-group[
        aria-hidden="true"
    ]{
        display:none;
    }


    .member-photo-card{
        transition:none;
    }
}



/* ============================================================
   BNI MEMBER FUNCTION V2
   Fonction affichee sous la photo du membre - badge vert
   ============================================================ */

.member-photo-function{

    background:
        #edf8f2;

    color:
        #147447;

    border:
        1px solid
        #c5e6d3;

    min-height:28px;

    display:flex;

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

    margin-top:5px;

    padding:
        3px
        4px;

    border-radius:4px;

    font-size:7.5px;
    line-height:1.25;

    font-weight:850;

    text-transform:uppercase;

    letter-spacing:.025em;

    white-space:normal;
}


@media(max-width:700px){

    .member-photo-function{
        min-height:26px;

        font-size:7px;
    }

}