.member-card-page{
    padding-bottom:50px;
}

.member-card-page-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:30px;
}

.member-card-page-heading h1{
    margin:12px 0 8px;
    font-size:2rem;
    color:#181419;
}

.member-card-page-heading p{
    max-width:700px;
    margin:0;
    color:#756d76;
    line-height:1.6;
}


/* =========================================================
   CARTE
========================================================= */

.digital-member-card-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    padding:10px 0 24px;
}

.digital-member-card{
    position:relative;
    isolation:isolate;

    width:100%;
    max-width:820px;
    aspect-ratio:1.586 / 1;

    overflow:hidden;

    border-radius:32px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(179,18,75,0.35),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #181419 0%,
            #211820 55%,
            #351521 100%
        );

    color:#ffffff;

    padding:36px;

    display:flex;
    flex-direction:column;

    box-shadow:
        0 30px 70px rgba(20,14,20,0.20),
        inset 0 0 0 1px rgba(255,255,255,0.08);
}


/* =========================================================
   DÉCORATION
========================================================= */

.digital-card-decoration{
    position:absolute;
    z-index:-1;
    border-radius:999px;
    pointer-events:none;
}

.digital-card-decoration-one{
    width:360px;
    height:360px;

    right:-160px;
    bottom:-190px;

    background:#b3124b;

    opacity:0.92;
}

.digital-card-decoration-two{
    width:240px;
    height:240px;

    right:80px;
    bottom:-170px;

    border:1px solid rgba(255,255,255,0.12);
}


/* =========================================================
   HEADER
========================================================= */

.digital-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.digital-card-brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.digital-card-brand-logo{
    width:58px;
    height:58px;

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

    background:#ffffff;

    border-radius:18px;

    padding:8px;
}

.digital-card-brand-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.digital-card-brand-name{
    font-size:1.1rem;
    font-weight:900;
    letter-spacing:0.08em;
}

.digital-card-brand-subtitle{
    margin-top:4px;

    font-size:0.72rem;
    font-weight:800;

    letter-spacing:0.18em;

    color:rgba(255,255,255,0.60);
}

.digital-card-status{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:9px 13px;

    border-radius:999px;

    font-size:0.72rem;
    font-weight:900;

    letter-spacing:0.05em;

    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
}

.digital-card-status-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#9b9b9b;
}

.digital-card-status.is-active
.digital-card-status-dot{
    background:#4bd68b;
    box-shadow:0 0 0 5px rgba(75,214,139,0.12);
}

.digital-card-status.is-inactive{
    color:rgba(255,255,255,0.55);
}


/* =========================================================
   MEMBER
========================================================= */

.digital-card-body{
    flex:1;

    display:grid;
    grid-template-columns:auto 1fr auto;

    align-items:center;

    gap:26px;

    padding:30px 0 22px;
}

.digital-card-photo{
    width:142px;
    height:142px;

    flex-shrink:0;

    border-radius:30px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #b3124b,
            #72102f
        );

    border:3px solid rgba(255,255,255,0.18);

    box-shadow:
        0 18px 35px rgba(0,0,0,0.20);
}

.digital-card-photo img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.digital-card-initials{
    width:100%;
    height:100%;

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

    font-size:2.5rem;
    font-weight:900;
}

.digital-card-member{
    min-width:0;
}

.digital-card-label{
    margin-bottom:8px;

    color:#d54179;

    font-size:0.74rem;
    font-weight:900;

    letter-spacing:0.13em;
}

.digital-card-member h2{
    margin:0;

    font-size:2.2rem;
    line-height:1.05;

    font-weight:500;

    letter-spacing:-0.04em;
}

.digital-card-member h2 strong{
    font-weight:900;
}

.digital-card-company{
    margin-top:13px;

    font-size:1.15rem;
    font-weight:800;
}

.digital-card-activity{
    margin-top:5px;

    color:rgba(255,255,255,0.62);

    font-size:0.92rem;
}

.digital-card-club{
    display:flex;
    align-items:center;
    gap:9px;

    margin-top:16px;

    font-size:0.9rem;
    font-weight:800;
}

.digital-card-club span{
    padding:5px 8px;

    border-radius:8px;

    background:#b3124b;

    font-size:0.62rem;
    font-weight:900;

    letter-spacing:0.08em;
}


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

.digital-card-company-logo{
    width:105px;
    height:105px;

    padding:12px;

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

    border-radius:22px;

    background:rgba(255,255,255,0.94);

    box-shadow:0 15px 30px rgba(0,0,0,0.16);
}

.digital-card-company-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}


/* =========================================================
   FOOTER
========================================================= */

.digital-card-footer{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,0.10);
}

.digital-card-footer > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.digital-card-footer span{
    font-size:0.62rem;

    letter-spacing:0.14em;

    font-weight:800;

    color:rgba(255,255,255,0.45);
}

.digital-card-footer strong{
    font-size:0.92rem;
}

.digital-card-footer-right{
    text-align:right;
}


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

.member-card-actions{
    display:flex;
    justify-content:center;

    gap:12px;

    margin-top:5px;
}

.member-card-download-message{
    max-width:820px;

    margin:18px auto 0;

    padding:13px 16px;

    border-radius:14px;

    text-align:center;

    font-weight:700;
}

.member-card-download-message-success{
    background:#eefcf5;
    color:#1f9d62;
}

.member-card-download-message-error{
    background:#fff1f1;
    color:#d64545;
}


/* =========================================================
   INFO
========================================================= */

.member-card-info{
    max-width:820px;

    margin:28px auto 0;

    display:flex;
    align-items:flex-start;

    gap:15px;

    padding:20px;

    border:1px solid #e7e2e7;

    border-radius:20px;

    background:#ffffff;
}

.member-card-info-icon{
    width:44px;
    height:44px;

    flex-shrink:0;

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

    border-radius:13px;

    background:#f6e3ea;

    color:#b3124b;

    font-size:0.8rem;
    font-weight:900;
}

.member-card-info strong{
    color:#181419;
}

.member-card-info p{
    margin:5px 0 0;

    color:#756d76;

    line-height:1.5;
}


/* =========================================================
   TABLETTE
========================================================= */

@media(max-width:800px){

    .digital-member-card{
        padding:26px;

        border-radius:26px;
    }

    .digital-card-photo{
        width:110px;
        height:110px;

        border-radius:24px;
    }

    .digital-card-member h2{
        font-size:1.7rem;
    }

    .digital-card-company-logo{
        width:82px;
        height:82px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .member-card-page-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .digital-member-card-wrapper{
        overflow-x:auto;

        justify-content:flex-start;

        padding-bottom:20px;
    }

    .digital-member-card{
        width:620px;
        min-width:620px;

        aspect-ratio:1.586 / 1;

        padding:28px;

        transform-origin:top left;
    }

    .digital-card-photo{
        width:112px;
        height:112px;
    }

    .digital-card-body{
        gap:20px;
    }

    .digital-card-member h2{
        font-size:1.75rem;
    }

    .digital-card-company-logo{
        width:85px;
        height:85px;
    }

    .member-card-actions{
        flex-direction:column;
    }

    .member-card-actions .btn{
        width:100%;
    }

}