@font-face {
    font-family: ChampagneLimousinesBold;
    src: url('./fonts/Document\ fonts/ChampagneLimousinesBold.ttf');
  }
@font-face {
    font-family: EagleLake-Regular;
    src: url('./fonts/Document\ fonts/EagleLake-Regular.ttf');
}
@font-face {
    font-family: adelia;
    src: url('./fonts/Document\ fonts/adelia.ttf');
  }
body{
    scroll-behavior: smooth;
    line-height: 1.8;
    font-family: ChampagneLimousinesBold;
    font-size: larger;
    background-color: #917FB9;
}
h1,h2,h3,h4,h5{
    font-family: EagleLake-Regular;
}
a{
    color: #000000;
    transition: all 0.5s;
}
#mentions-legales-modal a:hover{
    color: #dfd6ee;
}
.row{
    margin: 0;
}
.border-radius-50{
    border-radius: 50%;
}
.card{
    background-color: #ffffff77;
}
.btn-purple-dark{
    background-color: #917FB9;   
    color: #EAE4F3;
    transition: 0.8s;
    text-shadow: 1px 1px 3px #020202;
}
.btn-purple-dark:hover{
    color: rgb(56, 56, 56);
    background-color: #EAE4F3;
    text-shadow: 1px 1px 3px #b1b1b1;
}
.btn-light-perso{
    width: 100%;
    margin-top: 10px;
    background-color: #eae4f3da;
    transition: background-color 0.5s ease-in-out;
}
.btn-light-perso:hover{
    background-color: rgb(132, 114, 136);
}
header{
    background-image: url(./img/header-bg-transparent-high-v2.webp);
    position: relative;
    background-size:cover;
}
#logo{
    padding-top: 60px;
}
/* ---------- LINKS --------- */
.light-link{
    color: #222;
    text-decoration:underline;
    text-decoration-color: #917FB9;
    padding-bottom: 5px;
    border: none;
    background-color: #ffffff00;
}
.dark-link{
    color:#dcd6e6;
    text-decoration-color: #ece5f3;
    padding-bottom: 5px;
    border: none;
    text-decoration:underline;
    background-color: #ffffff00;
}
/* NAVBAR */
.navbar{
    text-align: center;
    padding: 20px 0;
    background-color: rgba(140, 121, 182, 0.968);
    box-shadow: rgb(38, 57, 77) 0px 8px 30px 0px;
}
.navbar-toggler{
    background-color: #fff;
    box-shadow: rgb(38, 57, 77) 1px 1px 10px 0px;
}
.nav-item{
    padding-right: 20px;
}
.nav-item a{
    color: #ece5f3;
    text-shadow: 1px 1px 3px #000000;
    transition: 0.6s;
}
.nav-item a:hover{
    color: #151416;
    text-shadow: 1px 1px 3px #e0e0e0;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color: #19181a;
    text-shadow: 1px 1px 3px #e0e0e0;
}
#navbar-rdv{
    background-color: #f1f0f0;
    /* text-shadow: 1px 1px 1px #00000048; */
    margin-top: 2px;
    transition: 0.6s ease-in-out;
    color: #6442ac;
    font-size: 15px;
}
.badge{
    padding: 15px;
    margin-right: 8px;
    box-shadow: rgb(38, 57, 77) 1px 1px 10px 0px;
}
.navbar-rdv-mobile{
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 15px 70px 15px 70px;
}
#navbar-rdv .nav-link{
    transition: 0.6s ease-in-out;
}
#navbar-rdv:hover{
    background-color: #a29fa7;
    transform: scale(1.02);
}
#navbar-rdv .nav-link:hover{
    color: #6442ac;
}
.dropdown-menu{
    background-color: rgba(140, 121, 182, 0.968);
    font-size: large;
}
/* -------------- MAIN ----------- */
/* ---------------------------MAIN DESCRIPTION--------------------- */
#main-description{
    background-image: url(./img/bg-section-1.webp);
    background-size: cover;
    height: 1000px;
    margin-top: -380px;
    text-align: justify;
    color: black;
}
#main-description-content{
    margin-top: 250px;
}
#main-description-content .row{
    /* background: rgb(145,127,185);
    background: radial-gradient(circle, rgba(145, 127, 185, 0.39) 1%, #00000050 20%); */
    background-color:#eae4f3c0;;
    padding: 45px 15px;
    border-radius: 35px;
    /* box-shadow: 0px 5px 5px 1px black; */
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
#main-description-content p{
    line-height: 2.5;
}
/* ---------- MODAL A PROPOS ---------- */
.modal-content{
    background-color: rgba(140, 121, 182, 0.928);
    color:#dcd6e6;
}
.modal-body{
    min-width: 50vw;
    min-height: 50vh;
}
.modal {
    text-align: center;
    padding: 0!important;
}
.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
/* ----------------------------------MAIN ACCROCHE----------------- */
#main-accroche{
    text-align: center;
    background-image: url(./img/leaf-bg-purple-10.webp);
    background-size: cover;
    color:#dcd6e6;
    height: 350px;
    margin-top: -50px;
    clip-path: polygon(0 0, 100% 50px, 100% calc(100% - 50px), 0 100%);
}
/* --------------------------MAIN SERVICES--------------------- */
#main-services{
    justify-content: space-around;
    margin-top: -50px;
    /* background-color: #917FB9; */
    background-image: url(./img/herbs-bg-purple-20.webp);
    background-size: contain;
    padding: 100px 0;
}
.margin-right-services{
    padding-right: 50px;
}
#link-mutuelles{
    margin: 80px 0;
}
#main-services ul{
    list-style-type: circle;
}
#main-services-deroulement, #main-services-benefices{
    text-align: justify;
}
#offcanvas-tarifs-ul{
    display: flex;
    justify-content: space-around;
    padding-top: 35px;
}
/* ----------------------------MAIN ATELIERS-------------------------- */
#main-ateliers{
    clip-path: polygon(0 0, 100% 50px, 100% calc(100% - 50px), 0 100%);
    padding: 150px 0;
    margin-top: -100px;
    background-image: url(./img/leaf-bg-purple-10.webp);
    background-size: cover;
    color:#dcd6e6;
}
#main-ateliers p{
    text-align: justify;
}
.main-ateliers-row{
    justify-content: center;
    margin-top: 50px;
}
.main-ateliers-row h3{
    margin: 20px 0 10px 0;
}
/* ------------------------MAIN CABINET---------------- */
#main-cabinet{
    padding: 150px 0;
    margin-top: -100px;
    background-color: #917FB9;
    background-image: url(./img/herbs-bg-purple-20.webp);
    background-size: contain;
}
.icon-cabinet{
    width: 30px;
    height: 30px;
    margin-right: 20px;
    padding-top: 2px;
}
#main-cabinet-infos{
    margin: 3rem 0;
}
.main-cabinet-infos-li{
    margin-bottom: 35px;
    margin-left: 20%;
}
#main-cabinet-google-map iframe{
    min-height:450px;
    margin: 3rem 0;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
/* --------------- OFFCANVAS PARKING CABINET --------- */
.offcanvas{
    --bs-offcanvas-width:auto;
    background-color: rgba(140, 121, 182, 0.968);
    color:#EAE4F3;
}
/* ------------------------------------AVIS------------------- */
#main-avis{
    clip-path: polygon(0 0, 100% 50px, 100% calc(100% - 50px), 0 100%);
    padding: 150px 0;
    margin-top: -100px;
    background-image: url(./img/leaf-bg-purple-10.webp);
    background-size: cover;
    color:#dcd6e6;
}
.carousel-elements-children{
    flex: 1 0 40%;
    margin: 25px 15px;
    padding: 10px;
    scroll-snap-align: start;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.carousel-elements-children .card-body{
    text-align: center;
}
.carousel-elements-children p{
    text-align: justify;
}
.carousel-elements-parent{
    border-radius: 5px;
    display: flex;
    overflow-x: scroll;
    padding: 1rem 0;
    scroll-snap-type: x mandatory;
    margin-top: 35px;
    --mask: linear-gradient(to right, 
      rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 94%, 
      rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
  ) 100% 100% / 100% 100% repeat-x;
  -webkit-mask: var(--mask); 
  mask: var(--mask);
}
/* -------------------------------------FOOTER ---------- */
footer{
    padding: 120px 0 90px 0;
    margin-top: -100px;
    background-image: url(./img/herbs-bg-purple-20.webp);
    background-size: contain;
}
.footer-liens-sociaux{
    transition: 300ms ease-in-out;
    width: 50px;
    margin-right: 10px;
}
.footer-liens-sociaux:hover{
    transform: scale(1.1);
}
#footer-infos-contact{
    align-items: center;
    justify-content: center;
}
/* ---------------- MODAL MENTIONS LEGALES ---------- */
.modal-dialog{
    max-width: 60%;
}
/* ----------- BACK TO TOP --------- */
#back-to-top-btn{
    position: fixed;
    bottom: 0px;
    left: 10px;
}
/* ************** MODAL SERVICES/ACCOMPAGNEMENTS ********** */
#modal-accompagnements .modal-body{
    background-color: #302c2ca8;
    text-align: justify;
}
#modal-accompagnements .navbar{
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(140, 121, 182, 0.911);
}
#modal-accompagnements ul{
    display: flex;
    justify-content: space-around;
    width: 100%;
}
#modal-accompagnements .collapse{
    width: 100%;
}
#modal-accompagnements #btn-close-accompagnements-ul{
   margin-top: 12px;
}
#modal-accompagnements #btn-close-accompagnements-title{
    display: none;
}
/* --------------- MODAL ATELIERS ---------- */
#modal-ateliers .modal-body{
    background-color: #302c2ca8;
    text-align: justify;
}
#modal-ateliers .navbar{
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(140, 121, 182, 0.911);
}
#modal-ateliers ul{
    display: flex;
    justify-content: space-around;
    width: 100%;
}
#modal-ateliers .collapse{
    width: 100%;
}
#modal-ateliers #btn-close-ateliers-ul{
    margin-top: 12px;
}
 #modal-ateliers #btn-close-ateliers-title{
     display: none;
}
/* ------------------------------------------- ANIMATIONS ----------- */
hr.solid {
    border-top: 3px solid #bbb;
    /* margin: 20px 0 20px 0; */
}
hr#Hypnose{
    margin-top: 0;
}
.two-lines{
    text-decoration: none;
    position: relative;
}
.two-lines::before, .two-lines::after{
    content: "";
    position: absolute;
    height: 2px;
    background-color: #26214d;
    /* opacity 0 au départ pour qu'elles soient invisibles */
    opacity: 0;
    /* left 50% et translate -50% pour centrer parfaitement */
    left: 50%;
    transform: translate(-50%, 10px);
    transition: all 0.3s ease-in-out;
}
.two-lines::before{
    /* une ligne plus large que l'autre */
    width: 90%;
    bottom: -4px;
}
.two-lines::after{
    /* une ligne plus petite que l'autre */
    width: 60%;
    bottom: -10px;
}
/* quand on va hover ... */
.two-lines:hover::before, .two-lines:hover::after{
    /* on redonne la visibilité aux élément en transition 0.2s */
    opacity: 1;
    /* on remonte les lignes grâce au 0px */
    transform: translate(-50%, 0px);
}
.two-lines::before, .two-lines:hover::after{
    transition-delay: 0.1s;
}
.two-lines:hover::before{
    transition-delay: 0s;
}
.slide-line{
    /* on met un position relative pour avoir une référence pour ses enfants */
    position: relative;
}

.slide-line::before{
    /* on instancie un contenu vide */
    content: "";
    /* la position absolue de l'élément relatif */
    position:absolute;
    background-color: #222;
    width: 100%;
    height: 3px;
    bottom: 0;
    /* permet de placer le point de transformation - 100% sur x veut dire au bout de la ligne des X donc le E de explore */
    /* rien n'empêche d'aller plus loin que 100%  */
    transform-origin: 100% 0;
    /* je demande à ma ligne de représenter 0% de ma ligne (donc elle disparait) */
    transform: scaleX(0);
    transition: transform 0.4s;
}

/* quand on va hover, alors la pseudo class before */
.slide-line:hover::before{
    /* je demande en hover à ma ligne de démarrer à gauche */
    transform-origin: 0 0;
    /* et de rejoindre la droite */
    transform: scaleX(1);
}
/* ********** BOTTOM NAVBAR ******** */
#bottom-navbar{
    width: 100%;
    height: 55px;
    background-color: rgba(140, 121, 182, 0.968);
    position: fixed;
    bottom: 0;
    border-top: solid rgba(0, 0, 0, 0.514);
    box-shadow: rgb(38, 57, 77) 0px 8px 30px 0px;

}
#bottom-navbar-title{
    font-style: italic;
    color: #ccc9d1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: adelia;
    font-size: smaller;
    margin-right: 30px;
    margin-top: 10px;
}
/* -----------------------------MEDIA QUERIES--------------------- */
@media only screen and (min-width: 992px){
    /* ------------------------------ SCROLLBAR AVIS ----------- */
    ::-webkit-scrollbar-track {
        background-color: #ffffff3d;
        border-radius: 5px;
    }

    ::-webkit-scrollbar {
        height: 15px;
        background-color: #f5f5f500;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #38383870;
    }
}
@media only screen and (max-width: 992px){
    #header-logo{
        justify-content: center;
        margin-top: 70px;
    }
    #logo{
        margin: 25px 0;
    }
    .navbar{
        left: 0;
    }
    .nav-item{
        margin-bottom: 30px;
    }
    #footer-icons{
        margin-top: 20px;
    }
    /* ------- MAIN ----- */
    #main-description{
        background-image: url(./img/bg-section-1-mobile.webp);
        background-size: cover;
        height: 1500px;
    }
    #main-description-content .row{
        padding: 15px;
    }
    #main-description-content img{
        margin: 20px 5px;
    }
    /*-------- MODAL A PROPOS --------- */
    .modal-dialog{
            min-width: 93vw;
            min-height: 93vh;
    }
    #main-accroche{
        height: 350px;
    }
    .margin-right-services{
        padding-right: 0px;
    }
    #main-services{
        padding: 50px 0;
    }
    .margin-top-services{
        margin: 35px 0;
    }
    #link-mutuelles{
        margin: 50px 0;
    }
    #main-services-photo-benefices{
        display: none;
    }
    #main-services-photo-deroulement{
        margin-bottom: 35px;
    }
    #offcanvas-tarifs-ul{
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        padding-top: 0;
    }
    #pour-qui{
        margin-bottom: 40px;
    }
    .main-cabinet-infos-li{
        margin-left: 0;
    }
    #main-cabinet-infos{
        margin-bottom: 0;
    }
    #main-cabinet-google-map{
        margin-top: 0;
    }
    #main-cabinet-photos img{
        margin-bottom: 65px;
    }
    .carousel-elements-children{
        flex: 1 0 75%;
    }
    /* --------- FOOTER --------- */
    footer{
        flex-direction: column;
        padding: 100px 0;
    }
    #footer-infos-contact{
        margin: 35px 0;
        text-align: center;
        flex-direction: column;
    }
    /* ********** MODAL ACCOMPAGNEMTS ******* */
    #modal-accompagnements .navbar{
        padding: 5px;
    }
    #modal-accompagnements #btn-close-accompagnements-ul{
        display: none;
    }
    #modal-accompagnements #btn-close-accompagnements-title{
        display: block;
    }
    /* ********** MODAL ATELIERS ********** */
    #modal-ateliers .navbar{
        padding: 5px;
    }
    #modal-ateliers #btn-close-ateliers-ul{
        display: none;
    }
    #modal-ateliers #btn-close-ateliers-title{
        display: block;
    }
    /* ----------- ANIMATIONS --------- */
    
}