.service-panel{
    position:fixed;

    inset:0;

    z-index:99999;

    visibility:hidden;
}

.service-panel.active{
    visibility:visible;
}

/* fond noir */
.service-panel-overlay{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    transition:.4s;
}

.service-panel.active .service-panel-overlay{
    opacity:1;
}

/* panneau */
.service-panel-content{

    position:absolute;

    top:0;
    right:-100%;

    width:900px;
    max-width:100%;

    height:100vh;

    background:#fff;

    overflow-y:auto;

    transition:.6s cubic-bezier(.22,.61,.36,1);

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

.service-panel.active .service-panel-content{
    right:0;
}

/* image */
.panel-image{
    height:100%;
}

.panel-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* contenu */
.panel-body{
    padding:50px;
}

.panel-badge{
    display:inline-block;

    padding:10px 18px;

    background:#eef9ff;

    border-radius:50px;

    color:#0095D9;

    font-weight:700;

    margin-bottom:20px;
}

.panel-body h2{
    font-size:42px;

    font-weight:800;

    color:#071B34;

    margin-bottom:25px;
}

.panel-body p{
    color:#64748b;

    line-height:2;
}

/* bouton fermer */
.close-panel{
    position:absolute;

    top:20px;
    right:20px;

    width:50px;
    height:50px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.1);

    z-index:20;
}