:root {
    --couleur-bleu-fonce : #0C536B;
    --white-color : #FFFFFF;
    --couleur-primaire-site : #0C536B;    
    --bs-bg-opacity : 1;
    --couleur-lien-nav: #01536a;
    --couleur-cta: #f16334;
}

@media(max-width:500px){
    html { width: 100vw; padding: 0; margin: 0; overflow-x: hidden;}
}


body { font-family: "Karla", serif;
  font-optical-sizing: auto; font-size: 16px; 
  background-color: #f3fafb;
  padding: 0;margin: 0; overflow-x: hidden; width:100vw; }
body header {  -webkit-transition: all .1s ease-in; transition: all .1s ease-in;}
  
body #InfoTopHeader {width:100vw; display: flex; justify-content: center; align-items: center; overflow:hidden;}
body #InfoTopHeader p {margin-bottom: 0px;}
@media screen and (max-width: 768px) {
    body #InfoTopHeader {position: fixed; bottom: 0; z-index: 999;}
    #InfoTopHeader .text-wrapper {
      white-space: nowrap;
      animation: scroll-text 15s linear infinite;
    }
    
    @keyframes scroll-text {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }
  }
  
.pre-header {display: flex; justify-content: flex-end; align-items: center; gap: 15px; width: 100%;}

.top-bar {
    font-size: 0.875rem;
}
.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}
.bg-white {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--white-color), var(--bs-bg-opacity)) !important;
}

a, .cms-content a {
    color: #2fb3f1;
    font-weight: 600;
    transition:all 0.5s ease;
}
a:hover, .cms-content a:hover {
    color: #3e7cb4;
    font-weight: 600;
}


.modal-video-container {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.modal-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
        
.btn-action, .btn-action:active {
    padding: 12px 20px;
    background: #f16334 !important;
    color: #FFF;
    font-size: 15px;
    text-indent: 5px;
    border-radius: 25px;
    overflow: hidden;
    transition:all 0.5s ease;
}

.btn-action i{ margin-left: 15px; transition: all 0.5s ease;}
.btn-action:hover i { transform: translateX(35px); color: #143256;  }

.btn-action.blue {background-color: #628ab4 !important;}

.site-content {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100vw;
     
    /*
    background-image: url('../img/bg_eau-petillante-sous-marine-bulles-oxygene-fond-blanc.jpg');
    background-repeat: repeat-x;
    background-position: bottom;
    */
}


body.shop .site-content {
    background-color: #fff!important;
    background-image: none;
}

#container.site-content {
	text-align:left;
	margin-top:0px!important;
        margin: 0!important;
        padding: 0!important;
}


.site-content header {
    position:relative; width: 90vw; margin: auto;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 0;
    margin: 0;
}


body.shop .site-content header {
    position: relative;
    z-index: 10;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    background-image:url("../img/bgheader_shop.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    height:23vh;
    padding-top:5vh;
}

.site-content header .logo {
    width: 20vw;
    text-align: right;
    transition: all 0.8s ease;
    height: 105px;
    display: flex; 
    justify-content: center;
    align-items: center;
        
}
.site-content header .logo img {
    width:250px;
}
.site-content header .bloc-nav {
    width: 75vw;
    padding: 0px;
    height: auto;
    display:flex; 
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
}
.site-content header .bloc-nav .logomif {width: 10rem; height: 2rem;}
.site-content main {
    position: relative;
    /*min-height: 100vh; */
}

.c-mega-menu > .nav.navbar-nav>li>a {color:var(--couleur-lien-nav);}



.site-content header .pre-header ul.BtnLangueHeader { display: flex; justify-content: center; align-items: center; gap:15px; list-style-type: none; }
.site-content header .pre-header ul.BtnLangueHeader li {}

.site-content header .bloc-nav ul.navbar-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding: 0px;
    height: 60px;
    border-radius: 8px;
}

.c-mega-menu > .nav.navbar-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    backdrop-filter: blur(30px);
    box-shadow: 0px 0px 30px rgba(227, 228, 237, 0.37);
    border: 2px solid rgba(255, 255, 255, 0.18);
}

    .c-mega-menu > .nav.navbar-nav>li>a {color:var(--couleur-lien-nav); transition: 0.8s all ease; padding: 15px; display: inline-block;}
    .c-mega-menu > .nav.navbar-nav>li>a:hover { background-color: #222; color:var(--couleur-lien-nav);}
.site-content header .bloc-nav ul.navbar-nav { border: 0px; box-shadow: none; backdrop-filter:none;}    

    
.c-mega-menu > .nav.navbar-nav > li > .dropdown-menu {
    display: none;
    left: auto;
    top: 48px;
    margin-top: -.002rem;
    padding-top: 10px;
    position: absolute;
    min-width: 300px;
    width: fit-content;
    z-index: 25;
    padding: 15px;
    background: #1c6986;
    border: 0;
    color: #FFF;
        
}
.c-mega-menu > .nav.navbar-nav>li.dropdown:hover {
    background-color: #1c6986; /* Remplacez par votre couleur */
}
.c-mega-menu > .nav.navbar-nav > li > .dropdown-menu ul {list-style-type: none; padding: 0;margin: 0}
.c-mega-menu > .nav.navbar-nav > li > .dropdown-menu ul li {padding: 6px; margin: 5px; border-bottom: 1px solid rgb(63 158 200 / 20%); position:relative;}
.c-mega-menu > .nav.navbar-nav > li > .dropdown-menu ul li:hover {background-color:rgb(82 184 229 / 20%);}
.c-mega-menu > .nav.navbar-nav > li > .dropdown-menu ul li:hover:after {content:"\f061"; font-family: "FontAwesome"; color:#FFF; position:absolute; right: 10px; }
.c-mega-menu > .nav.navbar-nav > li > .dropdown-menu ul li a {color:#FFF; font-size:15px;}
.c-mega-menu > .nav .open>a, .c-mega-menu > .nav .open>a:focus, .c-mega-menu > .nav .open>a:hover, .c-mega-menu > .nav>li>a:focus {background-color: transparent!important}
.c-mega-menu > .nav.navbar-nav > li {margin: 0 8px;}
.c-mega-menu > .nav.navbar-nav > li.IconebtnLink i {color:#fff;}
.c-mega-menu > .nav.navbar-nav > li.IconebtnLink:hover>a {background-color: transparent!important}
.c-mega-menu > .nav.navbar-nav > li.IconebtnLink:hover i {color:#ebd50b;}
.c-mega-menu > .nav.navbar-nav > li > .dropdown-menu.animated {top:100%; background-color: #2d3133; }
.c-mega-menu > .nav.navbar-nav > li > a:hover {background-color: rgb(28 105 134); border-radius: 15px;}
.c-mega-menu > .nav.navbar-nav > li > .dropdown-menu.animated  {top:100%; background-color: rgb(144 101 48 / 100%); }
 

.c-mega-menu > .nav.navbar-nav > li#cat_5 {background-color: var(--couleur-cta);border-radius: 15px;   }
.c-mega-menu > .nav.navbar-nav > li#cat_5 a {color:var(--white-color)!important; border-radius: 15px;}


 .c-mega-menu .nav-item .dropdown:hover > a {
    color: #FFF; /* La couleur souhaitée pour le premier lien */
    background-color: rgb(144 101 48 / 100%);
}
 
 .c-mega-menu > .nav.navbar-nav > li:hover > .dropdown-menu { display: block;}

 .c-mega-menu > .nav.navbar-nav > li .dropdown-menu > li > a { white-space: normal; letter-spacing: 1px; font-size: 15px; color: #fff; }
 .c-mega-menu > .nav.navbar-nav > li .dropdown-menu > li > a:hover {  background-color:rgb(34 34 34 / 20%) !important; color: #fff; font-weight: 600; }

  .c-mega-menu > .nav.navbar-nav > li > .dropdown-menu > a { 
     padding: 20px 15px; border-bottom: 1px solid #e7f1f1;  position: relative;
     display:block;
     color:#FFF;
 }
  .c-mega-menu > .nav.navbar-nav > li > .dropdown-menu > a:last-child { 
     border-bottom: 0px solid #e7f1f1;
 }
   .c-mega-menu > .nav.navbar-nav > li > .dropdown-menu > a:hover { 
     color:#FFF;
     transition: all .2s;
    
 }
   .c-mega-menu > .nav.navbar-nav > li > .dropdown-menu > a:after {
      position: absolute;
    right: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    vertical-align: -.125em;
    font-family: "FontAwesome"!important;
    font-weight: 300!important;
    content: "\f30b"!important;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    -webkit-transition: all .2s;
    transition: all .2s;
}
 .c-mega-menu > .nav.navbar-nav > li > .dropdown-menu > a:hover:after {
    margin-right: -10px;
    transition: all .2s;
}

h2 {
    text-transform: uppercase;
    font-size: 5.2rem;
}


    #BlockFonctionnement .HomeBtnActionScrollH {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

#MainBlockIntroSite {
    background-color: #0e4f67;
    color:#FFF;
    text-align: center;
    line-height: 28px;
    font-size: 16px;
    padding:100px 0;
    height: 600px;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    position:relative;
}

#MainBlockIntroSite:before {
    content: "";
    width: 100vw;
    height: 350px;
    background-image: url('../img/before_headervideo.svg');
    background-repeat: no-repeat;
    position: absolute;
    z-index: 12;
    top: -177px;
}
#MainBlockIntroSite:after {
    content: "";
    width: 100vw;
    height: 200px;
    background-image: url('../img/after_headervideo.svg');
    background-repeat: no-repeat;
    position: absolute;
    z-index: 12;
    bottom: -200px;
}
#MainBlockIntroSite h2 {font-size: 4.2rem; font-weight: 700;}
#MainBlockIntroSite h2 strong {font-weight: 900;}
@media(max-width:500px){
    #MainBlockIntroSite {flex-direction: column; gap: 40px; padding: 40px 0; height:auto;}
    #MainBlockIntroSite h2 {color:#FFF; font-size: 4.2rem; margin-bottom: 30px; top:0px;}
    #MainBlockIntroSite iframe.frame-video {width: 100%; height: auto; border-radius: 15px;}
    #MainBlockIntroSite:before {display: none; }
}


#BlockFonctionnement {
    padding-top: 0px;
    position: relative;
}

#BlockFonctionnement h2{ 
    text-align: center; 
    color: #222; 
    padding: 1.5rem 0;
}

#BlockFonctionnement #builderIn h3 {
    font-size:2.8rem;
    font-weight: 900;
    color:#0e4f67;
    padding: 25px 0 0 0;
}

#BlockFonctionnement > #content > .container:first-child { 
    max-width: 1500px; 
    width: 100%; 
    margin-bottom: 100px; 
}

/* Conteneur principal */
#BlockFonctionnement #builderIn { 
    margin-top: 0;
    position: relative;
}

#BlockFonctionnement #builderIn .stickyWindow { 
    width: 100%;
}

/* Configuration flex */
.flex-row { 
    -ms-flex-direction: row; 
    flex-direction: row; 
}

.d-flex { 
    display: flex; 
}



#scrolldownEffect {
  position: fixed;
  left: 60px;
  bottom: 1.02vh;
  height: 123px;
  z-index: 12000;
  mix-blend-mode: difference;
}
#scrolldownEffect p {
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.1em;
  transform-origin: 6px center;
  transform: rotate(-90deg);
}
#scrolldownEffect img {
  position: absolute;
}
#scrolldownEffect img:nth-child(2) {
  left: 3px;
  opacity: 0;
}
#scrolldownEffect img:nth-child(3) {
  left: 3px;
  top: 38px;
  opacity: 0;
}
#scrolldownEffect img:nth-child(4) {
  left: 3px;
  top: 50px;
  opacity: 0;
}
#scrolldownEffect img:nth-child(5) {
  top: 65px;
  opacity: 0;
}

@media (max-width: 480px) {
  #scrolldownEffect {
    display: none;
  }
}


/* Configuration du contenu défilant */
#BlockFonctionnement .Titre {    position: absolute;
    right: 250px;
    z-index: 3;
    color: #FFF;
    width: 550px;
    font-size: 3.5rem;
    line-height: 3.8rem;
    bottom: 200px;
    background-color: rgb(7 24 34 / 50%);
    
    padding: 40px;
    text-shadow: 2px 2px 2px #0e4f67;
    border-top-right-radius: 81px;
    border-bottom-left-radius: 81px;
}

#BlockFonctionnement .Titre span {
    font-size:2.2rem;
    line-height: 2.5rem;
}

@media(max-width:500px){
    #BlockFonctionnement .Titre {display: none;}
}

#BlockFonctionnement #builderIn .allContent {
    display: flex;
    will-change: transform; /* Optimisation des performances */
    -webkit-font-smoothing: antialiased;
    background-color: #FFF;
}

/* Styles du texte */
#BlockFonctionnement #builderIn .allContent .texte { 
    text-align: center; 
}

#BlockFonctionnement #builderIn .allContent .texte p { 
    font-size: 16px; 
    line-height: 1.6em;
}

#BlockFonctionnement #builderIn .allContent .texte b, 
#BlockFonctionnement #builderIn .allContent .texte strong  { 
    color: #0e4f67; 
    font-weight: 500;
}

#BlockFonctionnement #builderIn p.TitreSlide1 {color:#FFF; font-size:3em!important; align-content: center; padding: 40px;}




/* Version desktop */
@media (min-width: 768px) {
    #BlockFonctionnement #builderIn .stickyWindow {
        background-color: transparent;
        position: sticky;
        top: 0;
        overflow: hidden;
        height: 100vh;
        z-index: 1;
        
          background-image: url('../img/Avecbulles_postprod_B.jpg');
    background-repeat: no-repeat;
    background-size: cover;
        
    }

    #BlockFonctionnement #builderIn .allContent {
        -ms-flex-direction: row;
        flex-direction: row;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1;
        transform: translate3d(0, 0, 0); /* Activation de l'accélération matérielle */
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    #BlockFonctionnement #builderIn .image_texte {
        position: relative;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        width: 50vw;
        max-width: 50vw;
        min-width: 650px;
        height: 100%;
        padding: 70px 20px 0 20px;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    
    #BlockFonctionnement #builderIn .image_texte .texte{
        padding: 0 6vw;
    }
    
    /* pour le premier block */
    #BlockFonctionnement #builderIn .image_texte:first-child .in p { 
        font-size: 6.0rem!important;
        color:#b7d8e4;
        text-transform: uppercase;
        line-height: 7.5rem!important;
        font-weight: 900;
    }
    #BlockFonctionnement #builderIn .image_texte:first-child strong { color:#b7d8e4; word-wrap: break-word; letter-spacing: 5px;}

    #BlockFonctionnement #builderIn .image .ContainerCover {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 30px 40px;
    }

    #BlockFonctionnement #builderIn .image .ContainerCover img {
         /* height: calc(100vh / 4); */
        width: 100%;
        object-fit: contain;
        
    }
    
    #BlockFonctionnement #builderIn .image_texte.image_droite { 
        flex-direction: column-reverse; 
    }

    #BlockFonctionnement #builderIn .image_texte.image_gauche { 
        flex-direction: column;
    }

    #BlockFonctionnement #builderIn .image_texte:not(:last-child) { 
        border-right: 1px solid #DDDDDD; 
    }
}

/* Version mobile */
@media (max-width: 500px) {
    #header h1 img {
        height: 40px; 
        margin-top: 5px; 
        left: 0; 
        position: fixed;
    }

    #BlockFonctionnement #builderIn h3 {padding: 25px;}
    #BlockFonctionnement #builderIn .image_texte:first-child {padding: 50px 25px;}
     #BlockFonctionnement #builderIn .image_texte:first-child .in p strong { 
        font-size: 3.0rem!important;
        color:#b7d8e4;
        text-transform: uppercase;
        line-height: 3.5rem!important;
        font-weight: 500;
    }
    
    #BlockHeadIntro .inner img.img-intro {
        width: 330px;
    }
    
    #BlockFonctionnement #builderIn .allContent {
        flex-direction: column;
        position: relative;
        z-index: 1;
    }

    #BlockFonctionnement #builderIn .allContent .image_texte { 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #BlockFonctionnement #builderIn .image_texte.image_droite,
    #BlockFonctionnement #builderIn .image_texte.image_gauche { 
        flex-direction: column-reverse !important;
    }
     #BlockFonctionnement #builderIn .allContent .containerCover {display: flex; justify-content: center; align-items: center; }
    #BlockFonctionnement #builderIn .allContent .containerCover img { 
        width: 85%; 
    }

    #BlockFonctionnement #builderIn .allContent .image_texte:nth-child(4) .containerCover img { 
        display: none; 
    }

    #BlockFonctionnement #builderIn .allContent .texte p { 
        padding: 15px;
        font-size: 0.9em; 
    }
}
    #SHomeActu {margin-top: 75px; position: relative; z-index: 4;}
    #SHomeActu .HeaderSection {display: flex; flex-direction: row;     justify-content: space-evenly; align-items: center; gap:50px;}    
    #SHomeActu h2 { font-size: 4.5rem; color: #0e4f67; margin-bottom: 80px; margin-left: 0vw;}
    
    #CarouselActuHomePage { margin-bottom: 30px;max-height: 400px; min-height: 350px; width:80vw; margin-left: 20vw; }
    #CarouselActuHomePage a.block-content {width: 350px; height: 350px;border-radius: 15px; overflow: hidden; display: flex; justify-content: center; align-items: center; position:relative;}
    #CarouselActuHomePage a.block-content:hover {box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
    #CarouselActuHomePage a.block-content .image {background-size: cover; background-position: center center; overflow: hidden; height: auto; transition: 2.8s ease; }
    #CarouselActuHomePage a.block-content .caption {display: none; background-color: rgb(34 34 34 / 50%); height: 100%; width: 100%;}
    #CarouselActuHomePage a.block-content:hover .caption {position:absolute; z-index: 5; display: flex; justify-content: center; align-items: center; padding: 25px; color: #fff;}
    #CarouselActuHomePage a.block-content:hover .caption h4 {color: #FFF;}
    #CarouselActuHomePage a.block-content:hover .caption i {color: #FFF; position: absolute; right:10px; bottom: 10px;}
    #CarouselActuHomePage a.block-content:hover .image {opacity: 0.8; transform: scale(1.2) rotate(5deg); overflow: hidden;}
    
    @media(max-width:500px){
         #CarouselActuHomePage { margin-bottom: 30px; max-height: 400px; min-height: 350px; width:100vw; margin-left: 0vw; }
        #CarouselActuHomePage a.block-content:first-child {margin-left: 20px;}
        #CarouselActuHomePage a.block-content {width: 100%; height: auto; aspect-ratio: 1 / 1;}
        #CarouselActuHomePage a.block-content .caption {position:absolute; z-index: 5; display: flex; justify-content: center; align-items: center; padding: 25px; color: #fff;}
        #CarouselActuHomePage a.block-content h4 {font-size:14px;}
        #CarouselActuHomePage a.block-content:first-child {margin: 0px;}
    }
    
      /* css du carousel */
    .owl-item {width: 350px!important;}
    .owl-nav {display: flex; justify-content: flex-start; align-items: center; gap: 15px; margin-top: 25px;}
    .owl-nav .owl-prev, .owl-nav .owl-next { background-color: #FFF; border:1px solid #222!important; height: 40px; width: 40px; display: flex!important; border-radius: 50%;justify-content: center;    align-items: center; transition: 0.6s all ease-in-out; }
    .owl-nav .owl-prev:hover, .owl-nav .owl-next:hover { background-color: #222; color: #FFF;}
    
    @media(max-width:500px){
            #SHomeActu {width: 100%; padding: 15px;}
            #SHomeActu h2 { font-size: 3rem; margin-bottom: 25px; }
            #SHomeActu .header {flex-direction: column; justify-content: flex-start;}
            #SHomeActu #CarouselActuHomePage { margin-top: 30px; margin-left: 0px;width: 100vw;}
            #SHomeActu .HeaderSection {flex-direction: column; gap: 25px;}
    
            
    }
    
/* Block Video */
#BlocktypeInstallation {display: flex; flex-direction: column; gap:15px; margin: 0px 0 0px 0;}
#BlocktypeInstallation .Header {
    padding: 75px; background-color: #1c3241; position:relative;
}

#BlocktypeInstallation .Header h2 {text-align: center; font-size: 5.5rem; font-weight: 900; color: #fff; }
#BlocktypeInstallation .Header h2 span {font-size: 5.5rem; color: #628ab4; font-weight: 700;}

#BlocktypeInstallation .BlockContent { display: flex; justify-content: space-around; align-items: center; gap: 25px; width: 100vw; position:relative; z-index: 2;}
#BlocktypeInstallation .BlockContent:nth-child(even):after { content:""; width: 100vw; height: 100%; background-image: url('../img/sep_home_page_bleu.svg'); background-repeat: no-repeat; background-size: contain;  position:absolute; z-index: 1; bottom: -300px;}

#BlocktypeInstallation .VideoContentHome { overflow: hidden; height: 480px; width: 20vw; position: relative; z-index: 5; border-radius: 25px; transition: all 0.5s; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
#BlocktypeInstallation .VideoContentHome:hover { width: 29vw; }

#BlocktypeInstallation .VideoContentHome video { position: absolute;left: 0%; width: auto; height: auto;}
#BlocktypeInstallation .VideoContentHome:hover video{left: 0%; animation-delay: 0.8s; animation-direction: alternate;  animation: slideUp 6s ease-in;}

#BlocktypeInstallation .VideoContentHome  video.VidLocalTec{left: -100%!important; transition: all 0.5s ease;}
#BlocktypeInstallation .VideoContentHome:hover video.VidLocalTec{left: -20%!important;}


#BlocktypeInstallation .VideoContentHome  video.VidInstallDeporte{left: -100%!important; transition: all 0.5s ease;}
#BlocktypeInstallation .VideoContentHome:hover video.VidInstallDeporte{left: -20%!important;}

#BlocktypeInstallation .VideoContentHome  video.VidInstallReno{left: -100%!important; transition: all 0.5s ease;}
#BlocktypeInstallation .VideoContentHome:hover video.VidInstallReno{left: -20%!important;}
/*
#BlocktypeInstallation .BlockContent .VideoContentHome:nth-child(1):hover video {left: -50%}
*/

/*
#BlocktypeInstallation .BlockContent .VideoContentHome:nth-child(1)  video {left: -106%!important; animation-delay: 0.8s; animation-direction: alternate;  animation: slideUp 6s ease-in;}
#BlocktypeInstallation .BlockContent .VideoContentHome:nth-child(1):hover video {left: -50%!important;}

#BlocktypeInstallation .VideoContentHome:nth-child(2):hover video{left: -25%; animation-delay: 0.8s; animation-direction: alternate;  animation: slideUp 6s ease-in;}

#BlocktypeInstallation .BlockContent .VideoContentHome:nth-child(3)  video {left: 40%!important; animation-delay: 0.8s; animation-direction: alternate;  animation: slideUp 6s ease-in;}
#BlocktypeInstallation .BlockContent .VideoContentHome:nth-child(3):hover video {left: -40%!important;}
*/

/*
#BlocktypeInstallation .BlockContent:nth-child(3) video{ width:854px; height: 480px; }
#BlocktypeInstallation .BlockContent:nth-child(3):hover .VideoContentHome video{ left:-100%; top: -25%; animation-delay: 0.8s; animation-direction: alternate;  animation: slideUp 6s ease-in;}
*/
#BlocktypeInstallation .BlockContent .texte {width: 40vw; z-index: 5; padding: 3vw; line-height: 2.5rem;}

@media(max-width:500px){
    #BlocktypeInstallation {padding: 0 15px;}
    #BlocktypeInstallation .Header {padding: 15px;}
    #BlocktypeInstallation .BlockContent {flex-direction: column;}
    #BlocktypeInstallation .VideoContentHome {width: 80vw;}
    #BlocktypeInstallation .Header h2 {font-size: 2.2em; margin-bottom: 40px;  margin-left: 0%;}
    #BlocktypeInstallation .Header h2 br {display: none;}
    #BlocktypeInstallation .Header h2 span {font-size: 0.95em; margin-left: 0px;}
    #BlocktypeInstallation .VideoContentHome {width: 90%;}
    #BlocktypeInstallation .VideoContentHome:hover {width:100vw;}
    #BlocktypeInstallation .BlockContent .texte {width: 100vw;}
    
    
    #BlocktypeInstallation .BlockContent:hover .VideoContentHome {width: 90%;}
    #BlocktypeInstallation .BlockContent:nth-child(3) {
        flex-direction: column-reverse;
    }
    
    #BlocktypeInstallation .BlockContent:nth-child(2) video{
        left:-80%;
    }
    #BlocktypeInstallation .BlockContent:nth-child(1) video{
        left:-110%;
        transition: all 0.8s ease;
    }
    #BlocktypeInstallation .BlockContent:nth-child(2):hover video {
        transform: translateX(-150px);
    }
    
    #BlocktypeInstallation .BlockContent:nth-child(3) video{
        left:-80%;
    }
    
}




#BlockAideInstallation {display: flex; flex-direction: column; gap:0px; margin: 0px 0 0px 0;}
#BlockAideInstallation .header{
      padding: 75px; background-color:aliceblue; position:relative;
}
#BlockAideInstallation .Header h2 {text-align: center; font-size: 5.5rem; font-weight: 900; color: #1c3241; }
#BlockAideInstallation .Header h2 span {font-size: 4.5rem; color: #628ab4; font-weight: 700;}
#BlockAideInstallation .BlockContent {background-color:aliceblue; display: flex; justify-content: space-around; align-items: center; gap: 25px; width: 100vw; position:relative; z-index: 2;}

#BlockAideInstallation .BlockContent .text {width: 50vw;}
#BlockAideInstallation .BlockContent .text h3 {font-size:2.5rem;}
#BlockAideInstallation .BlockContent .text ul {padding: 8px; margin: 8px; list-style-type: none;}

@media(max-width:500px){
    #BlockAideInstallation .Header h2 {text-align: center; font-size: 3.5rem; font-weight: 900; color: #1c3241; }
    #BlockAideInstallation .header{ padding: 15px; }
    #BlockAideInstallation .BlockContent {margin-left: 0px; margin-right: 0px; padding: 30px;}
    #BlockAideInstallation .BlockContent {flex-direction: column-reverse; gap: 15px;}
    #BlockAideInstallation .BlockContent img {width: 100%;}
    #BlockAideInstallation .BlockContent .text {width: calc(100vw - 30px);}
}
/*===================================================================================*/
/*  FIL ARIANE
/*===================================================================================*/
#ArianeV2 { position:relative; z-index: 1; margin-left:10px !important; opacity: 0.7; -webkit-transition: opacity .6s ease-in;
    -moz-transition: opacity .6s ease-in;
    -o-transition: opacity .6s ease-in;
    transition: opacity .6s ease-in; 
    width:100vw;
    padding:0 25px;
    font-size:10px;
    font-weight: 400;
}
#ArianeV2:hover { opacity:1;  -webkit-transition: opacity .3s ease-in;
    -moz-transition: opacity .3s ease-in;
    -o-transition: opacity .3s ease-in;
    transition: opacity .3s ease-in; }
#ArianeV2 ul.ArianeNiveau1 { padding:0; margin:5px; height:30px;}
#ArianeV2 ul li {list-style-type:none; margin:0px;}
#ArianeV2 ul li.first {
    height:30px;
    list-style-type:none; float:left;
}
#ArianeV2 ul li i { margin-top: 10px; font-size:14px;}
#ArianeV2 ul li.first a {
    list-style-type:none; float:left; width:auto; 
    height:auto; 
    /*margin: 0 0 0 5px;*/
    font-size: 15px;
    font-weight: 400;
    padding:7px;
    position:relative;
    color: #2964ad;
}

#ArianeV2 ul li.last {
    height:30px;
    padding-left: 2px;
    list-style-type:none; float:left;
}

#ArianeV2 ul li.last a {
    background:transparent;
    list-style-type:none; float:left; width:auto; height:16px; 
    /* margin: 0 0 0 5px; */
    font-size: 1.5rem;
    padding:7px;
    position:relative;
    color: #323232;
    font-weight: 500;
}

#ArianeV2 ul li.first img {
}
#ArianeV2 ul li.last img {
    background:transparent;
}

#ArianeV2 ul li ul {
    display:none;
    background-color: #fff;
    border: 0px solid #efefef;
    /* box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); */
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    border-top: 2px solid #2964ad;
    color: #FFF;
    display: block;
    font-size: 13px;
    line-height: 18px;
    padding: 5px;
    position: absolute;
    margin-top:0px;
    margin-left:12px;
    width:auto;
}


#ArianeV2 ul li.first ul li.SousNiveau {cursor:pointer;clear:both; display:block; list-style-type:none; background-color:transparent; width: 100%; border-bottom: 1px solid #efefef;}
#ArianeV2 ul li.first ul li.SousNiveau:hover {background: none repeat scroll 0 0 #FFF !important; color:#333; cursor:pointer; clear:both; display:block; list-style-type:none;}

#ArianeV2 ul li ul li a, #ArianeV2 ul li ul li a:link {
    font-size: 13px;
    padding: 7px 20px 7px 10px;
    display: block;
    color: #444;
    white-space: nowrap;
}
#ArianeV2 ul li ul li a:hover {  color:#2964ad; 
-webkit-transition: color .3s ease-in;
    -moz-transition: color .3s ease-in;
    -o-transition: color .3s ease-in;
    transition: color .3s ease-in;
    
}

#footer {position: relative;display: flex; width: 100vw; flex-direction: column; justify-content: center; align-items: flex-start;}
#footer .bg-video {
    position:relative;
    display: block;
    height: 350px;
    overflow: hidden;
    z-index: 1;
    width:100vw;
}

/*
#footer .bg-video:after {
    position: absolute;
    z-index: 2;
    background-color: rgb(0 0 0 / 60%);
    content: " ";
    height: 350px;
    width: 100vw;
}
*/
#footer .bg-video video { margin-top: 0; position: relative; z-index: 1; width: 100vw;}
#footer .bg-video picture {display:none; width:100%; height:350px; position: relative; z-index: 1; background-image: url(../img/ImgFooter_Mobile.jpg); background-size: cover;} 


#footer .fpart-first {background-color: transparent; position: absolute; top: 0; left: 0; width: 100vw; height: auto; min-height: 350px; z-index: 5; padding-top: 50px;}
#footer .fpart-first:before {
    background-color: rgb(0 0 0 / 60%);
    position: absolute;
    content: " ";
    height: 375px;
    width: 100vw;
    top: -25px;
}
#footer .fpart-first img.logomif {width:80px;}
#footer .fpart-second {width: 100vw; background-color: #ffffff; color: #222; font-size: 13px; padding: 15px 0px;}
#footer .fpart-second a {color:var(--couleur-bleu-fonce);}
#footer .fpart-first, #footer .fpart-first a {
    color: #fff;
    padding-top: 20px;

}

#footer ul li a {
    font-size:13px;
}

@media(max-width:500px){
    #footer {background-color: var(--couleur-primaire-site);}
    #footer .bg-video {position: relative; height: fit-content; overflow: visible;}
    #footer .bg-video video {display:none!important;}
    
    #footer .bg-video picture {position: relative; z-index: 1; width:100%; height:100%; background-color: var(--couleur-primaire-site); display:block}
    #footer .fpart-first {position:relative;}
    #footer .fpart-first:before {height: 100%; top: 0px; content: none;}
    
    #footer .fpart-first h6 { width: 100%; text-align: center; font-size: 16px; background-color: rgb(255 255 255 / 20%); padding: 10px 0px; }
    #footer .fpart-first ul { display: flex; flex-direction: column;}
    #footer .fpart-first ul li { width: 100%; text-align: center; }
    
}


/*Page accueil */
#BlockIntroSite {
    height: 92vh;
    width: 100%;
    position: relative;
    z-index: 1;
    top: 0;
    overflow: hidden;
    background-color: #EFEFEF;
    display: block;
    /*
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: nowrap;
    */
    padding: 0;
    margin: 0;
    
}


#BlockIntroSite .bgHeader {position: absolute; z-index: 1;}
#BlockIntroSite video {width: 100%;}
#BlockIntroSite .content {position: absolute;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
}

#BlockIntroSite .content div.TitleHeader {font-size:5rem; font-weight: 600; color: #FFF; margin: 40px 0; text-shadow: 2px 2px 2px #0e4f67;}
#BlockIntroSite .content span {font-size:2rem; font-weight: 400; color: #FFF;}
#BlockIntroSite .content span b { background-color: #0e4f67; padding: 5px 8px; font-weight: 400; border-radius: 8px;}

@media(max-width:500px){
    #BlockIntroSite {  height: 26vh; background-color: #ffffff; display: flex; justify-content: center; align-items: center; }
    #BlockIntroSite .content div.TitleHeader {font-size: 3.2rem; text-align: center; line-height: 3rem; margin: 15px 0; word-break:break-word;}
    #BlockIntroSite .content span {font-size:1.5rem; line-height: 2rem; font-weight: 400; color: #FFF; text-align: center; display: none;}
    #BlockIntroSite .content span b {background-color: transparent; padding:0px;}
    #BlockIntroSite .content .BtnVideoYoutube a {margin-top: 0px;}
}



main .VisuelBox {position: relative;top: -250px; z-index: 5; margin: auto;}
main .VisuelBox img {width:400px; margin-left: 5vw; position: absolute; z-index: 8;}
/*
main .VisuelBox:after {content:""; height: 35px; width: 100%; background-color: var(--couleur-bleu-fonce); display: block; position: absolute; bottom: 40px; z-index: 2;}
*/




/** Go to Top Button CSS **/
        
#CercleScroll {
    position: fixed;
    right: 15px;
    bottom: 15px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    z-index: 9;
    visibility: hidden;
    -webkit-transform: translateY(150px);
    -ms-transform: translateY(150px);
    transform: translateY(150px);
    background: var(--couleur-primaire-site);
    color:var(--white-color);
    background-image: -moz-linear-gradient( 160deg, rgb(255, 183, 43) 0%, rgb(255, 192, 0) 100%);
    background-image: -ms-linear-gradient( 160deg, rgb(255, 183, 43) 0%, rgb(255, 192, 0) 100%);
    display:flex; 
    justify-content: center; 
    align-items: center;
    
}


#CercleScroll.active {
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    animation: bounceInDown 2s;
    -webkit-animation: bounceInDown 2s;
    -moz-animation: bounceInDown 2s;
}

#CercleScroll.active-out {
    visibility: visible;
    transition: all 0.8s ease-in-out;
    animation: zoom-in-zoom-out 0.5s;
    -webkit-animation: zoom-in-zoom-out 0.5s;
    -moz-animation: zoom-in-zoom-out 0.5s;
}

@keyframes zoom-in-zoom-out {
0% {transform: scale(1, 1);}
50% { transform: scale(1.5, 1.5);opacity:1;}
100% { transform: scale(1, 1); opacity:0;}
}



#CercleScroll svg {
    height: 20px;
    width: 20px;
    fill: var(--white-color);
}


/* Menu REsponsive V2 */
#SearchResponsiveForm div.col-xs-9, #SearchResponsiveForm div.col-xs-3 { padding-left:0px; padding-right:0px;}

#navresponsive{display:none}
#headerResponsive{display:none}
@media (max-width: 1198px){
    img.c-desktop-logo {width:210px; transition:all 0.7s}
    .c-mega-menu  > .navbar-nav > .Tel {display:none;}
}

@media screen and (max-width: 480px){
    
    #header {min-height: 50px; display:none;}
    
    #header .header-row { text-align: center; padding: 10px 0; margin-top: 15px; }
    .site-content {padding-top: 55px;}
    #PageFicheProduit a.fb  {display:block; width: 100%}
    #PageFicheProduit #BtnWhishList {display:block; width: 100%;}
    
    #PageFicheProduit #NombreAvis a { position:relative; top:17px
              
            
}

@media (max-width: 990px){
.c-layout-header {display:none}

#headerResponsive .SearchResponsive {
    position: relative;
    top: 0px;
    z-index: 105;
    width: 55px;
    height: 55px;
    transition:all 0.7s;
    opacity: 1;
    text-align: center;
}


#headerResponsive .SearchResponsive a {top:18px; font-size:1.5rem; position:relative;}
#headerResponsive .SearchResponsive i {color:#222;}
#headerResponsive.menuOpen.inSub .SearchResponsive {left:550px; opacity: 0}


#headerResponsive #BlockSearchResponsive { height:55px; padding:5px 10px; background-color:#000; width: 100%; position: absolute; top: 55px;}
#headerResponsive #BlockSearchResponsive {display:none;}

#headerResponsive.SearchOpen #BlockSearchResponsive {display:block;}
#headerResponsive.SearchOpen #BlockSearchResponsive form {display:flex; justify-content: flex-start; align-items: center; }
#headerResponsive.SearchOpen #BlockSearchResponsive > div {padding: 0px!important;}
#headerResponsive.SearchOpen #BlockSearchResponsive input {min-height: 42px!important;}
 
#headerResponsive .BtnElement {display: flex; width: 50vw; flex-wrap: nowrap;}
#headerResponsive .BtnElement > div { width: calc(100%/4); }
#headerResponsive .BtnCaddieResponsive .ajax_cart_quantity {
    z-index: 104;
    right: 8px;
}
#headerResponsive .BtnCaddieResponsive .badge-caddie { background-color:#2964ad; color:#FFF;}

#headerResponsive .BtnCaddieResponsive {
    position: relative;
    top: 0px;
    z-index: 105;
    width: auto;
    height: 55px;
    background: #fff;
    display: flex; justify-content: center; align-items: center;
    
}
#headerResponsive .BtnCaddieResponsive i {
    color: #47a9d2;
    margin: auto;
    position: relative;
    font-size: 2rem;
}

#headerResponsive .BtnEspaceClientResponsive,
#headerResponsive .btnEspaceClient {
    top: 0;
    width: 55px;
    height: 55px;
    background: #FFF;
    overflow: hidden;
    transition:all 0.3s;
     display: flex; justify-content: center; align-items: center;
}


#headerResponsive .btnEspaceClient i, #headerResponsive .BtnEspaceClientResponsive i {
    color: #222;
    margin: auto;
    position: relative;
    font-size: 2rem;
}
#headerResponsive .BtnDeconnectionEspaceClient {
    top: 0;
    width: 55px;
    height: 55px;
    background: #ff0000;
    overflow: hidden;
    transition:all 0.3s;
     display: flex; justify-content: center; align-items: center;
}
#headerResponsive .BtnDeconnectionEspaceClient i {
    color: #FFF;
    margin: auto;
    position: relative;
    font-size: 2rem;
}
#headerResponsive.menuOpen .btnEspaceClient, #headerResponsive.menuOpen .BtnDeconnectionEspaceClient {transition:all 0.3s; top:-55px;}

#navresponsive{position:fixed; display:block; top:100%;  left:0; z-index:99; background:#fff; width:100%; height:100%; font-size:34px; overflow:auto; -webkit-overflow-scrolling: touch; text-align:center;}
#navresponsive.inSub {z-index: 101;}
#navresponsive, #navresponsive ul.sub{ transition:all 0.7s}
#navresponsive.active{top:0}

#navresponsive .current{background-color: #0c536b; color: #FFF; position:relative;top:0; left: 70px; height:55px; opacity:0; visibility: hidden; right:0px; font-size:14px; font-weight: 700; text-transform:uppercase;line-height:16px; width:calc(100vw - 65px); transition:all 0.3s; text-align: left; padding: 8px 0 0 8px; display: flex;
            justify-content: flex-start;
            align-items: center;}
#navresponsive .previous{cursor:pointer;position:absolute;left:0;top:0;opacity:0;visibility: hidden;background:#fff;color:#222;font-size: 12px;line-height: 13px;font-weight:bold; width: 62px;height: 55px;text-align:center;z-index:999;transition:all 0.3s; display: flex; justify-content: center; align-items: center;}
#navresponsive .previous i {color: #0c536b; transition: all 0.5s ease;}
#navresponsive .previous:hover{color:#222;transition:all 0.3s;}
#navresponsive .containerSub{display:block;width:100%;position: fixed;left: 100vw;top: 0px; margin-top:55px; bottom: 0;overflow-x:  hidden;overflow-y: auto;-webkit-overflow-scrolling: smooth;background: #fff;transition:all 0.5s;}
#navresponsive .containerSub ul li a{color:#222}
#navresponsive .containerSub.active{left:0}
#navresponsive .containerSub{z-index:5}
#navresponsive .containerSub .containerSub{z-index:6}
#navresponsive .containerSub .containerSub .containerSub{z-index:7}
#navresponsive ul{display:table;margin-left:auto;margin-right:auto;}
#navresponsive ul li{display: table-row;}
#navresponsive ul.sub{position: relative;top:100%;display: table;}
#navresponsive ul.sub {
    margin-top: 80px;
    position: relative;
    padding: 0px;
    width: 90%;
}

#navresponsive.active ul.sub{top: 0;height: auto;}
#navresponsive ul.sub.active{left:0}
#navresponsive ul.principal{margin-top:80px;position:  relative; padding:0px; width:100%}
#navresponsive ul li a{color:#222;font-size:17px;font-weight:400;display:table-cell;padding: 15px 5px;display: table-cell;position:relative; transition:all 0.3s}
#navresponsive ul li a:hover,#navresponsive ul li a:focus{color:#222}
#navresponsive ul li.hasSub > a:before{content: "\f061"; font-family: "FontAwesome"; display:block; position:absolute; width:5px; height:10px;  right:15%; top:50%; margin-top:-10px; z-index:1; color:#585858;}
#navresponsive ul li a:after{content: " "; display:block; height:1px; background:#efefef; width: 170px; position:absolute; bottom:0; left:50%; margin-left:-85px}

#navresponsive ul li .title{font-weight:bold;font-size: 14px;color:#808080;text-transform:uppercase;}
#navresponsive.inSub .current{opacity:1; visibility:visible}
#navresponsive.inSub .previous{opacity:1; visibility:visible}
#navresponsive .button{background:#ff0000; width:100%; display:block; font-size:18px; font-weight:400; color:#FFF; text-align:center; position:absolute; bottom:15px; }
#navresponsive .button:hover{background:#000000; color:#FFF; }
#navresponsive .contentScrolled .button{position:relative;}
#navresponsive .button:after{display:none}
#navresponsive .button:after{content:" ";}

#headerResponsive{position:fixed;top:0;width:100vw; height:55px;background:#fff;z-index:100;  transition:all 0.5s; flex-direction: row;
            display:flex; justify-content: flex-start; align-items: center; gap: 2%;}
#headerResponsive .logo{width:50vw;position:relative;top:0px;left:0px; transition:all 0.3s}
#headerResponsive .logo img{width:100%; height: 55px;}

#headerResponsive .burger{position:relative; width:55px;height:55px; background:#fff; overflow:hidden; display: flex;flex-direction: column; } 
#headerResponsive .burger span{display:block; position:absolute; top:20px; height:2px; left:50%; margin-left:-12px; width:25px; background:#585858; transition:all 0.6s}
#headerResponsive .burger span:nth-child(2){top:26px;}
#headerResponsive .burger span:nth-child(3){top:32px;}

#headerResponsive.menuOpen .burger span:nth-child(1){bottom: 0;top:26px;transform: rotate(-135deg);transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); background:#FF0000;height: 2px;}
#headerResponsive.menuOpen .burger span:nth-child(2){margin-left:55px}
#headerResponsive.menuOpen .burger span:nth-child(3){ bottom: 0;top:26px;transform: rotate(135deg);transition: bottom 0.1s ease-out, transform 0.10s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);    background:#FF0000;   height: 2px;}


#headerResponsive .langs{position:absolute; width:55px; padding-top:55px; min-height:55px; max-height:55px; right:55px; top:0; background:#c0c0bf; overflow:hidden; line-height:55px; text-transform:uppercase; text-align:center; font-size:10px; transition:all 0.5s}
#headerResponsive .langs.openit{max-height:700px}
#headerResponsive .langs a{color:#FFF;}
#headerResponsive .langs li{display:block; height:55px;  background:#c0c0bf;}
#headerResponsive .langs li.active{position:absolute; top:0; left:0; width:100%;}
#headerResponsive.inSub .logo{opacity:0; visibility: hidden;}	
#headerResponsive.inSub .langs{opacity:0; visibility: hidden;}	
#headerResponsive.inSub{width:55px} #page404{background-size:50vw;}
#headerResponsive.inSub .BtnElement {display: none;}

}