/* ===========================
   CONTENEUR PRINCIPAL
=========================== */

#approche{

    position:relative !important;

    overflow:hidden;

}

#approche .wrapper-approche{
    min-height: 410px;
}

#approche .approche-content{
    min-height: 115px;
}
A/* ===========================
   CONTENEUR PRINCIPAL
=========================== */

#approche{

    position:relative !important;

    overflow:hidden;

}

#approche .wrapper-approche{
    min-height:410px;
}

#approche .approche-content{
    min-height:115px;
}



/* ===========================
   MODALES DESKTOP
=========================== */

#approche > .adn-modal{

    position:absolute !important;

    inset:0;

    display:flex;

    justify-content:flex-end;

    align-items:stretch;

    background:rgba(255,255,255,.15);

    z-index:1000;

    transform:translateX(100%);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    opacity .35s ease,
    visibility 0s linear .55s;

}



#approche > .adn-modal.adn-modal-visible{

    transform:translateX(0);

    opacity:1;

    visibility:visible;

    pointer-events:none;

    transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    opacity .35s ease,
    visibility 0s;

}



/* ===========================
   PANNEAU
=========================== */

.adn-modal.adn-modal-visible > .e-con-inner{

    pointer-events:auto;

}



.adn-modal > .e-con-inner{

    position:relative;

    height:100%;

    background:#fff;

    padding:0;

    border-radius:18px 0 0 18px;

    box-shadow:
    -25px 0 60px rgba(0,0,0,.18);

    overflow:auto;

    flex:0 0 auto;

    box-sizing:border-box;

}



/* ===========================
   CROIX
=========================== */

.adn-modal-close{

    position:absolute;

    top:18px;
    right:18px;

    width:42px;
    height:42px;

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

    background:#009E60;

    color:#fff;

    border-radius:50%;

    cursor:pointer;

    z-index:50;

    font-size:0;

    box-shadow:
    0 5px 15px rgba(0,0,0,.20);

    transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;

}



.adn-modal-close:before{

    content:"\f00d";

    font-family:"Font Awesome 5 Free";

    font-weight:900;

    font-size:18px;

}



.adn-modal-close:hover{

    transform:rotate(90deg) scale(1.08);

    background:#388e3c;

}



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

.img-modal{

    flex:0 0 20%;
    max-width:20%;

}

.img-modal img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.adn-modal .adn-modal-content{

    flex:1;

    padding:100px 30px 0 30px;



}

.adn-modal .adn-modal-content h3{

     font-family:"Inter", Sans-serif;
}


@media (min-width: 1025px) and (max-width: 1391px){


#approche .wrapper-approche{
    flex-basis: 24%;
}

#approche .wrapper-approche p{
    font-size: 15px;
}
#approche .wrapper-approche h2{
    font-size: 25px;
}

#approche > .adn-modal.adn-modal-visible > .e-con-inner{

    max-width: 900px!important;
    min-width: 900px!important;
    height: 95%!important;
 
}



.adn-modal-content{
    padding-top: 40px!important;
}

#approche > .adn-modal{

    justify-content: center!important;
}
}


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

@media (max-width:1024px){

    body > .adn-modal{

        position:fixed !important;

        top:0;
        right:0;
        bottom:0;
        left:0;

        display:flex;

        align-items:center;

        justify-content:center;

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

        backdrop-filter:blur(5px);

        -webkit-backdrop-filter:blur(5px);

        z-index:999999;

        transform:translateY(30px) scale(.96);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:
        transform .35s ease,
        opacity .30s ease;

        padding:12px;

    }



    body > .adn-modal.adn-modal-visible{

        transform:translateY(0) scale(1);

        opacity:1;

        visibility:visible;

        pointer-events:auto;

    }



    body > .adn-modal > .e-con-inner{

        width:100% !important;

        max-width:560px !important;

        height:auto;

        max-height:65vh;

        border-radius:18px;

        overflow:auto;

    }



    .img-modal{

        display:none;

    }



    .adn-modal .adn-modal-content{

        padding:80px 25px 30px;

    }



    .adn-modal-close{

        top:15px;

        right:15px;

    }

}

/* ===========================
   MODALES
=========================== */

#approche > .adn-modal{

    position:absolute !important;

    inset:0;

    display:flex;

    justify-content:flex-end;

    align-items:stretch;


    background:rgba(255,255,255,.15);


    z-index:1000;


    transform:translateX(100%);

    opacity:0;

    visibility:hidden;

    pointer-events:none;


    transition:

    transform .45s cubic-bezier(.22,.61,.36,1),

    opacity .30s ease,

    visibility 0s linear .45s;

}



/* ===========================
   MODALE ACTIVE
=========================== */

#approche > .adn-modal.adn-modal-visible{

    transform:translateX(0);

    opacity:1;

    visibility:visible;

    pointer-events:none;


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

}



/* ===========================
   PANNEAU BLANC
=========================== */

#approche > .adn-modal.adn-modal-visible > .e-con-inner{

    pointer-events:auto;


}



#approche > .adn-modal > .e-con-inner{

    position:relative;


    height:100%;


    background:#fff;


    padding:0px;


    border-radius:15px 0 0 15px;


    box-shadow:-20px 0 40px rgba(0,0,0,.18);


    overflow:auto;


    flex:0 0 auto;


    box-sizing:border-box;

}



/* ===========================
   CROIX
=========================== */

/* ===========================
   CROIX FERMETURE
=========================== */

.adn-modal-close{

    position:absolute;

    top:19px;
    right:19px;


    width:42px;
    height:42px;


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


    background:#009E60;

    color:#fff;


    border-radius:50%;


    cursor:pointer;


    z-index:50;


    font-size:0;


    box-shadow:
    0 5px 15px rgba(0,0,0,.20);


    transition:
    transform .25s ease,
    background-color .25s ease,
    box-shadow .25s ease;

}


/* Croix Font Awesome */
.adn-modal-close:before{

    content:"\f00d";

    font-family:"Font Awesome 5 Free";

    font-weight:900;

    font-size:18px;

}



/* Hover */

.adn-modal-close:hover{

    transform:rotate(90deg) scale(1.08);

    background:#388e3c;


    box-shadow:
    0 8px 20px rgba(0,0,0,.30);

}

.img-modal{
    flex-basis: 20%;
    max-width: 20%;

}

.img-modal img{
    max-height: 100%;
    height: 100%;
    min-width: 100%;
    object-fit: cover;
}

.adn-modal .adn-modal-content {
    flex-basis: 90%;
    padding-top: 100px;
}
/* ===========================
   TABLETTE
=========================== */

@media(max-width:1024px){


    #approche > .adn-modal{

        justify-content:center;

        padding:20px;

    }



    #approche > .adn-modal > .e-con-inner{


        width:100% !important;

        min-width:0 !important;

        max-width:100% !important;


        height:auto;


        max-height:calc(100% - 40px);


        padding:35px 25px;


        border-radius:15px;


    }

}