:root {
    --txt-default: 17px;

    --txt-logo-mobile: 2rem;
    --txt-logo-tablette: 2.8rem;
    --txt-logo-desktop: 2.8rem;

    --txt-menu-mobile: 1.3rem;
    --txt-menu-tablette: 1.4rem;
    --txt-menu-desktop: 1.4rem;

    --txt-classique-mobile: 1.1rem;
    --txt-classique-tablette: 1.4rem;

    --txt-classique-desktop: 1.1rem;

    --txt-copyr-mobile: 0.8rem;
    --txt-copyr-tablette: 1rem;
    --txt-copyr-desktop: 1rem;

--color-main:#753bbd;
--color-main-2:#8f5acf;

--font-main:    font-family: 'Playfair Display', serif !important;
--color-gray:#666666;





}
  



        /* Masquer l'élément en le rendant transparent */
        .hidden {
            opacity: 0;
        }
  .img-carousel.hidden {
    display: none;
}


  

.loader  {
  animation: rotate 1s infinite;  
  height: 50px;
  width: 50px;
}

.loader:before,
.loader:after {   
  border-radius: 50%;
  content: '';
  display: block;
  height: 20px;  
  width: 20px;
}
.loader:before {
  animation: ball1 1s infinite;  
  background-color: var(--color-main);
  box-shadow: 30px 0 0 var(--color-main-2);
  margin-bottom: 10px;
}
.loader:after {
  animation: ball2 1s infinite; 
  background-color: var(--color-main-2);
  box-shadow: 30px 0 0 var(--color-main);
}
  

@keyframes rotate {
  0% { 
    -webkit-transform: rotate(0deg) scale(0.8); 
    -moz-transform: rotate(0deg) scale(0.8);
  }
  50% { 
    -webkit-transform: rotate(360deg) scale(1.2); 
    -moz-transform: rotate(360deg) scale(1.2);
  }
  100% { 
    -webkit-transform: rotate(720deg) scale(0.8); 
    -moz-transform: rotate(720deg) scale(0.8);
  }
}

@keyframes ball1 {
  0% {
    box-shadow: 30px 0 0 var(--color-main-2);
  }
  50% {
    box-shadow: 0 0 0 var(--color-main-2);
    margin-bottom: 0;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0 var(--color-main-2);
    margin-bottom: 10px;
  }
}

@keyframes ball2 {
  0% {
    box-shadow: 30px 0 0 var(--color-main);
  }
  50% {
    box-shadow: 0 0 0  var(--color-main);
    margin-top: -20px;
    -webkit-transform: translate(15px,15px);
    -moz-transform: translate(15px, 15px);
  }
  100% {
    box-shadow: 30px 0 0  var(--color-main);
    margin-top: 0;
  }
}
  
  .image-loader {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Styles supplémentaires pour le loader */
    }
  
.custom-container-bt{
    padding: 75px 0px 0px 0px;
 /*   height: 150vh;*/
    overflow-y: hidden;
}

html {
    font-size: var(--txt-default) !important;
}

body {
    font-family: var(--font-main)!important;
    color: var(--color-gray)!important;
}

.sp-megamenu-parent>li>a,
.sp-megamenu-parent>li>span {

    text-transform: lowercase;
}

#sp-position2>.sp-column {
    display: flex;
    justify-content: flex-end;
}




/**
      Hamburger
    **/
.hamburger {
    position: absolute;
    top: 5em;
    right: 5%;
    margin-left: -2em;
    margin-top: -45px;
    width: 2em;
    height: 45px;
    z-index: 5;
}

.hamburger div {
    position: relative;
    width: 3em;
    height: 7px;
    border-radius: 3px;
    background-color: #f8982b;
    margin-top: 8px;
    transition: all 0.3s ease-in-out;
}

#sp-menu-mobile .container {
    height: 55px;
    display: flex;
    justify-content: center;
    flex-direction: column;

    position: fixed;
    width: 100%;
    z-index: 1000;
    background-color: white;
    padding-top: 10px;
    padding-bottom: 5px;
}

.menu a, .lang-inline a {
    color: var(--color-gray)!important;
}

.menu a:hover, .lang-inline a:hover {
    color: var(--color-main)!important;
}


#sp-menu-mobile {
    height: 55px;

}

.offcanvas-inner {
    padding: 5px 10px !important;
}

.offcanvas-active {
    overflow: hidden;
}

body.ltr.offcanvs-position-right.offcanvas-active .body-wrapper {
    right: 0px !important;
}

.offcanvas-menu {
    top: 65px !important;
    width: fit-content !important;
}

body.ltr.offcanvs-position-right.offcanvas-active .offcanvas-menu {
    height: fit-content;
    overflow: scroll;

}

body.ltr.offcanvs-position-right .offcanvas-menu {
    right: 0px !important;
    height: 0%;
}

.close-offcanvas {
    display: none;
}

#offcanvas-toggler {
    position: fixed;
    z-index: 9998;

    right: 0px;
    width: 50px;
    height: 50px !important;

}


.fa-bars:before {
    content: "";
    position: absolute;
    font-size: 45px;
    width: 35px;
    height: 2px;
    background: black;
    box-shadow: 0 0.25em 0 0 black, 0 0.5em 0 0 black;
}


#sp-position2 ul {
    padding-left: 0px;
    list-style-type: none;

}

#sp-position2 li {
    padding-left: 15px;


}

section#sp-menu-desktop {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* padding-top: 25px; */
    z-index: 1000;
    background-color: white;
    width: 100%;
    height: 69px;
}

#sp-menu-desktop>.container {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 25px;
    z-index: 1000;
    background-color: white;


}


.menu {
    align-items: flex-end;
    display: flex;
}

.menu a {
    padding: 0px !important;
    color: var(--color-gray)!important;
}

.offcanvas-inner>.sp-module {
    margin-bottom: 0px !important;
}

.lang-inline {
    display: flex;
    align-items: flex-end;
    text-transform: lowercase !important;
}

.element {
    width: 100%;
    /* Définissez une hauteur minimale pour que l'élément ait une hauteur initiale */
    float: left;
    background-image: url('https://charlesgeorges.rootcode.ch/images/2024/01/07/portrait_cg.jpg');
    /* Ajoutez ces propriétés pour un meilleur contrôle de l'image de fond */
    background-repeat: no-repeat;
}

.c-txt {
    text-align: justify;
}

.i-txt,
.copyr {
    font-style: italic;
}


.signature {
    height: auto;

}

.info-rel {
    position: relative;
}

.info-absolut {
    position: absolute;
    right: 0px;
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    justify-content: space-between;
    align-items: flex-end;



}

.custom-mail a{
    color: white!important;
}






.slideshow-container {
    max-width: 100%;
    margin: auto;
}

.mySlides {
    display: none;
    width: 100%;
    align-items: center;

}

.prev,
.next {
    cursor: pointer;
    font-size: 50px;
    color: var(--color-gray)!important;
    font-weight: 100!important;


}

.img-link-carousel{
    margin: 0px auto;

}

.arrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.line {
    width: 90%;
    background-color: var(--color-gray);
    height: 2px;
    display: flex;
    position: relative;
    align-items: center;
}

.dot {
    position: absolute;
    top: 0px;
    top: calc(50% - 0.5px);
    transform: translateY(-50%);
}
.textCarousel {
    text-align: center;
    font-family: var(--font-main);

    }
    #slideTitle{
        font-weight: 400!important;

    }
    #slideText{
        font-weight: 400!important;

    }



/* Smartphones (jusqu'à 600px) */
@media only screen and (max-width: 600px) {
    .textCarousel {
margin-top: 1rem;
     
        }

    .mySlides {
        height: 500px;
      
    }
    .mySlides img {
        max-height: 450px;
        max-width: 100%;
    }


    .signature {
        width: 250px;

    }

    .logo a {
        font-size: var(--txt-logo-mobile) !important;
    }

    .menu a,
    .lang-inline a {
        font-size: var(--txt-menu-mobile) !important;
    }

    .element {
        min-height: 1850px;
        background-size: 300px;
        background-position-x: -160px;
        background-position-y: bottom;
        shape-outside: polygon(0.76% 46.47%, 14.2% 45.95%, 23.41% 46.38%, 31.8% 48.56%, 44.88% 60.86%, 46.19% 79.69%, 29.98% 94.07%, 23.17% 99.61%, 6px 99.55%);
    }

    .custom-container .sppb-row-container {
        padding: 0px 15px 0px 0px !important;
    }

    #txt-elem .i-txt {
        padding: 0px 0px 0px 15px;
    }

    .c-txt {
        font-size: var(--txt-classique-mobile);
    }

    .copyr {
        font-size: 0.70rem;
    }

    .dotSvg {
        height: 10px;
        width: 10px;
        color: var(--color-main);
    }
																					  
																					  .custom-copyright{
																					  font-size:11px;}																				  
}


/* Tablettes (de 601px à 1024px) */
@media only screen and (min-width: 601px) {
																					  .custom-copyright{
																					  font-size:18px;}
    .dotSvg {
        height: 10px;
        width: 10px;
        color: var(--color-main);
    }
    .textCarousel {
        margin-top: 1rem;
             
                }
    .mySlides img {
        max-height: 450px;
        max-width: 100%;
    }

    .mySlides {
        height: 500px;
      
    }
    
    .signature {
        width: 350px;

    }

    .logo a {
        font-size: var(--txt-logo-tablette) !important;
    }

    .menu a,
    .lang-inline a {
        font-size: var(--txt-menu-tablette) !important;
    }

    #offcanvas-toggler {

        line-height: 15px !important;

    }

    .element {
        shape-outside: polygon(0% 0.3%, 27.75% 0.3%, 44.36% 0.1%, 50.47% 137px, 53.2% 18.6%, 55.6% 27.3%, 55.01% 41.7%, 52.73% 51.8%, 45.49% 72.1%, 40.85% 89.3%, 50.59% 99.90%, 0px 100%);
        min-height: 1000px;
        background-size: contain;
        background-position-y: 0px;
        background-position-x: 0;




    }

    .custom-container .sppb-row-container {
        padding: 0px 15px 0px 0px !important;
    }

    #txt-elem .i-txt {
        padding: 0px 0px 0px 15px;
    }

    .c-txt {
        font-size: var(--txt-classique-tablette);
    }



}

@media only screen and (min-width: 750px) {

    .element {
        shape-outside: polygon(0% 0.3%, 27.75% 0.3%, 36.03% 5.8%, 35.3% 111px, 36.53% 16.3%, 38.93% 23.1%, 40.18% 36.4%, 38.9% 48.8%, 32.16% 72.6%, 28.02% 90.7%, 36.92% 99.40%, 0px 100%);





    }
    .dotSvg {
        height: 13px;
        width: 13px;
        color: var(--color-main);
    }

}




/* Ordinateurs de bureau (plus de 1024px) */
@media only screen and (min-width: 992px) {
    .mySlides img {
        max-height: 700px;
        max-width: 100%;
    }

    .mySlides {
        height: 700px;
      
    }
    
    .logo a {
        font-size: var(--txt-logo-desktop) !important;
        line-height: 0px;

    }

    .menu a,
    .lang-inline a {
        font-size: var(--txt-menu-desktop);
        line-height: 0px;
    }

    .c-txt {
        font-size: var(--txt-classique-desktop);
    }

    .element {
        shape-outside: polygon(0% 0.3%, 27.75% 0.3%, 31.2% 4.5%, 31.62% 105px, 31.6% 16%, 33.42% 19.9%, 34.02% 32.7%, 34.57% 49.8%, 30.31% 70.3%, 24.07% 99.90%, 0px 100%);
        min-height: 1000px;
        background-size: contain;
        background-position-y: 0px;
        background-position-x: 0;




    }


}

@media only screen and (min-width: 1200px) {
    .element {
        shape-outside: polygon(0% 0.3%, 20.46% 0.2%, 23.75% 4.9%, 23.92% 113px, 24.15% 16.2%, 26.63% 20.2%, 26.49% 32.6%, 27.37% 43.5%, 24.85% 54.7%, 21.17% 84.30%, 0px 100%);

    }

}



@media only screen and (min-width: 1400px) {
    #sp-menu-desktop>.container {
        padding: 25px 30px 0px 30px;
    }

    .copyr {
        font-size: var(--txt-copyr-desktop);
    }

    .element {
        shape-outside: polygon(0% 0.3%, 18.07% -0.1%, 22.06% 3.8%, 23.23% 92px, 22.89% 14.6%, 25.25% 20%, 24.45% 34%, 26.29% 47.3%, 23.97% 62.30%, 30.09% 100%, 0px 100%);
    }




}