:root {

    --color-grey: #ce7d89;

    --dark-color: #bc243a;

    --base-color: #adadb0;

}



/* LAODING SITE */

#loading_site {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    z-index: 9999999;

    display: block;

  }

  #loading_haut {  position: absolute;  width: 50vw;  height: 100vh;  top: 0;  left: 0;  z-index: 2;  background-color: #fff;  transition: 1.2s ease-out;}

  #loading_haut img {  display:block; position: absolute;  width: 250px;  transition: 1.2s; left: 50%; transform: translateX(-50%); top: 100px; }

  #loading_bas {  position: absolute;  width: 50vw;  height: 100vh;  top: 0;  right: 0;  z-index: 2;  background-color:#fff;  transition: 1.2s ease-out; }

  #loading_logo {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  text-align: center;  z-index: 5;}

  #loading_haut.invisible {  opacity: 0;}

  #loading_bas.invisible {  opacity: 0;}

  #loading_logo.invisible img {  opacity: 0;}

  

  .spinner {

    border-width: 6px;

    border-style: solid;

    border-color: var(--base-color) var(--base-color) var(--base-color) transparent;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    animation: spin 5s infinite;

    position: relative;

    margin: 30px auto;

  }

  .spinner:before,

  .spinner :after {

    content: "";

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #fff;

    position: absolute;

    left: 3px;

  }

  .spinner :before {

    top: 3px;

  }

  .spinner :after {

    bottom: 3px;

  }

  @keyframes spin {

    100% {

      transform: rotate(360deg);

    }

  }

  



#contenu {
    max-width: 2200px;
    margin: auto;
    overflow-x: hidden;
}



.bg-grey {

    background-color: var(--color-grey) !important;

}

.color-grey {

    color: var(--color-grey) !important;

}



.bg-dark-color {

    background-color: var(--dark-color) !important;

}

.color-dark-color {

    color: var(--dark-color) !important;

}





.mr-3 {

    margin-right: 2rem !important;

}



.mobile-toggle:hover span,

.white-link .mobile-toggle:hover span {

    background-color: var(--base-color);

}



.menu-btn {

    padding: 16px;

    background-color: var(--base-color);

    border-radius: 50%;

}



@media (min-width: 1200px) {

    h1 {

        font-size: 60px;

        line-height: 60px;

    }

}



.clamp-3 {

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

/* ACCUEIL */

.home__hero {

    min-height: 80vh;

    display: flex;

    align-items: center;

}

.video_container_btn {

    bottom: 100px;

    left: 50%;

    transform: translateX(-50%);

}



.mask-hero{

    mask-image: url("/images/mask-hero_desktop.png");

    mask-size: contain;

    mask-repeat: no-repeat;

    height:100vh;

}

.mask-image{

    mask-image: url("/images/mask-image.png");

    mask-size: contain;

    mask-repeat: no-repeat;

    height:100%;

}

.text-hero{

    position: relative;

}

@media (max-width: 991px) {  

    .mask-hero{

        mask-image: url("/images/mask-hero_mobile.png");

        height:90vh;

        mask-size: 100% 90vh;

        max-width: 100vw;

    }

    .text-hero{

        position: absolute;

        top: 55%;

        left: 50%;

        transform: translate(-50%, -50%);

        background: rgb(255, 255, 255, 0.8);

        border-radius: 25px;

    }

    .mask-image{

        mask-position: center;

    }

}



/* BUTTONS */

.btn.btn-dark-gray {

    background: var(--color-grey);

    border-color: var(--color-grey);

}

.btn.btn-deep-pink {

    color: white;

    text-transform: none;

}



.btn.btn-dark-color {

    background: var(--dark-color);

    border-color: var(--dark-color);

    color: white;

    text-transform: none;

}

.btn.btn-dark-color:hover {

    background: transparent;

    border-color: var(--dark-color);

    color: var(--dark-color);

}



/* HEADER */

.mobile-toggle:hover span,

.white-link .mobile-toggle:hover span {

    background-color: white !important;

}

header a.logo img {

    max-height: 120px;

}



header nav .navbar-nav > li > a {

    text-transform: none;

}

.header-with-topbar .navbar-top,

.header-with-topbar .navbar-fixed-top {

    top: 33px;

}

.lien-menu.dropdown-toggle::before,

.lien-menu.dropdown-toggle::after {

    width: 0 !important;

}

.menu-tel {

    float: left;

    display: block;

    padding: 12px 16px;

    /* border: 3px black solid; */

}

@media (max-width: 991px) {

    .full-width-pull-menu .dropdown .dropdown-toggle {

        top: auto;

    }

}



@media screen and (max-width: 992px) {

    header a.logo img {

        max-height: 100px;

    }

    nav.navbar.bootsnav.no-full .navbar-collapse {

        max-height: none;

    }

    header .btn.btn-deep-pink {

        width: 100%;

        border-radius: 0;

        text-align: left;

        padding-left: 15px !important;

        text-transform: none;

    }

}

@media (max-width: 1245px) {

    header a.logo img {

        max-height: 100px;

    }

}

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

    header .btn.btn-deep-pink {

        margin-left: 24px;

    }

    header nav .navbar-nav > li > a {

        margin: 0 8px;

    }

    .mobile-toggle {

        display: none;

    }

}

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

    header nav .navbar-nav > li > a {

        margin: 0 12px;

    }

}



@media (min-width: 991px) {

    .full-width-pull-menu .link-style-2 ul li a {

        font-size: 36px;

        line-height: 72px;

    }

}



/* FOOTER */

.footer-logo {

    max-height: none;

    width: 80%;

    max-width: 200px;

}



/* ACCUEIL */

.home_hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

}



/* CIRCUITS */

.circuits-carousel .swiper-slide {

    height: auto;

}

.circuits-carousel .swiper-portfolio-prev,

.circuits-carousel .swiper-portfolio-next {

    top: 25%;

    transform: none;

}



.circuits-carousel .blog-post {

    border-bottom: 2px solid #fff;

    transition: border 0.3s ease;

    height: 100%;

    display: flex;

    flex-direction: column;

}

.circuits-carousel .blog-post-style5 .blog-post .blog-post-images {

    height: auto;

    background-color: var(--color-grey);

}

.circuits-carousel .blog-post-style5 .blog-post .blog-post-images img {

    transition: all 0.4s ease;

}

.circuits-carousel .blog-post-style5 .blog-post .blog-post-images img:hover {

    opacity: 0.5;

    transform: scale(1.05);

}

.circuits-carousel .blog-post:hover {

    border-bottom: 2px solid var(--base-color);

}

.circuits-carousel .post-details {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



#calendrier {

    position: sticky;

    z-index: 100;

}

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

    #calendrier {

        --header-height: 92px;

        position: sticky;

        top: calc(var(--header-height) + 24px);

        max-height: calc(calc(100vh - var(--header-height)) - 48px);

        overflow: auto;

    }

}



.blog-post-style5 .blog-post .blog-categories {

    position: absolute;

    top: 0;

    bottom: auto;

    left: auto;

    right: 0;

    z-index: 25;

    padding: 10px 20px 8px;

    border-radius: 20px 0 0 20px;

}

.circuits-carousel .blog-post {

    border-radius: 25px;

    overflow: hidden;

    /* box-shadow: 0 2px 8px #fade4470; */

    border: #f7f7f7 2px solid;

}

/* FLOTTE */

.last-paragraph-no-margin p:last-of-type {

    margin-bottom: revert;

}



/* Carousel circuits */

.team-style-1 figure figcaption .team-member-position {

    padding: 0 20px;

}



.circuits-carousel .swiper-slide {

    padding-bottom: 25px;

}





/* RESA */

.pt-resa {

    padding-top:150px;

}

@media screen and (max-width: 992px) {

    .pt-resa {

        padding-top:80px;

    }

}





/* PARCOURS TRACE */

.parcours {

    margin-top: -300px;

    display: block;

    margin: 0 auto;

    height: 1600px;

    width: 50%;

    position: absolute;

    left: 5%;

    z-index: 1;

}



#line {

    stroke: var(--dark-color);

    stroke-width: 8;

    fill: none;

    /* stroke-dasharray: 10!important; */

}



@media screen and (max-width: 992px) {

    .parcours {

        display: none;

    }

}

@media (min-width: 993px) {

    .parcours {

        margin-top: -255px;

        height: 1260px;

    }

}

@media (min-width: 1023px) {

    .parcours {

        height: 1340px;

    }

}

@media (min-width: 1300px) {

    .parcours {

        height: 1480px;

    }

}

@media (min-width: 1420px) {

    .parcours {

        margin-top: -243px;

        height: 1660px;

    }

}

@media (min-width: 1472px) {

    .parcours {

        height: 1600px;

    }

}

@media (min-width: 1802px) {

    .parcours {

        height: 1980px;

    }

}