html{scroll-behavior: smooth;}
body { padding-top:128px; overflow-x: hidden; color: #333;}
.header-with-topbar .navbar-top, .header-with-topbar .navbar-fixed-top { top: 56px; }
#body { width: 100vw; height: 100vh; position: fixed; z-index: 1; opacity: 0.08; background-color: beige; }
#contenu { position: relative; z-index: 20;}
.navbar .logo img {  transition: 0.5s ease-in-out !important;  display: block;  max-height: none; max-width: 185px; }
.navbar .logo { padding: 15px 0px;}
header nav .navbar-nav li a {margin: 0 16px;}
.color-secondaire { color: #333; }
.bg-secondaire { background: #333;}
nav.navbar.sidebar-nav { box-shadow: 0px 0px 10px rgba(0,0,0,0.5); padding-top:20px;}
.fixed .logo { padding: 0px !important; }
.fixed .logo img { max-width: 90px; }
.footer-logo {max-height: 150px;}

.box-link{ width: 100%; position: absolute; height: 100%; top: 0; left: 0; }

.diapo-texte { height: 80vh; }
.swiper-slide .title-large  {  font-size:35px; line-height:35px }
@media (min-width:600px) {  .swiper-slide .title-large  { font-size:45px; line-height:45px} }
@media (min-width:991px) {  .swiper-slide .title-large  { font-size:53px; line-height:53px;  } }
@media (min-width:1223px) {  .swiper-slide .title-large  { font-size:60px; line-height:60px} }
@media (max-width:991px) { #diapo-texte { background: var(--base-color); } .diapo-texte { height: auto !important; }  .swiper-slide .title-large  { text-align: center !important; } }

h1 { font-size:25px; line-height:25px } h2 {  font-size: 20px;  line-height: 20px;}
@media (min-width:600px) {  h1 { font-size:30px; line-height:30px }  h2 {  font-size: 25px;  line-height: 25px;} }
@media (min-width:991px) {  h1 { font-size:35px; line-height:35px }  h2 {  font-size: 30px;  line-height: 30px;} }
@media (min-width:1223px) { h1 { font-size:50px; line-height:52px }  h2 {  font-size: 30px;  line-height: 35px;} }

#bt_ville { background: #ed1f25 !important; padding: 10px; color: #fff; border-radius: 4px;}

.relative { position: relative;}
/* LAODING SITE */
#loading_site {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999999;
  display: block;
}
#loading_haut 
{  
  position: absolute;  width: 100vw; height: 100vh;  top: 0;  left: 0;  z-index: 2;  background-color:var(--base-color);  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_haut span
{
   content: ""; display: block; position:absolute; bottom: 0; right: 0; margin-bottom: 100px; width: 171px; height:100px; max-width: 100%; 
}
#loading_haut div
{
   content: ""; display: block; position:absolute; bottom: 0; right: 0; margin-bottom: 100px; width: 100%; height:100px; 
}
#loading_logo {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  text-align: center;  z-index: 5;}
#loading_haut.invisible {  top: 100%; }
#loading_logo.invisible img {  opacity: 0;}

.spinner {
  border-width: 3px;
  border-style: solid;
  border-color: #fff #fff #fff 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);
  }
}



.div-detail-bateau-left{  transform: translate(0px,-62px);}
.div-detail-bateau-right{  transform: translate(0px,-62px);}

@media (min-width:991px) 
{  
  .div-detail-bateau-left{  transform: translate(-60px,15px);}
  .div-detail-bateau-right{  transform: translate(60px,15px);}
  .div-photo-bateau-left{  transform: translate(60px,-15px);}
  .div-photo-bateau-right{  transform: translate(-60px,-15px);}
}
@media (min-width:1223px) 
{   
  .div-detail-bateau-left{  transform: translate(-60px,30px);}
  .div-detail-bateau-right{  transform: translate(60px,30px);}
  .div-photo-bateau-left{  transform: translate(60px,-30px);}
  .div-photo-bateau-right{  transform: translate(-60px,-30px);}
}

@media (max-width: 767px)
{
  .header-with-topbar .navbar-top, .header-with-topbar .navbar-fixed-top {  top: 30px !important; }
}
@media (max-width: 450px)
{
  #container-coordonnee { width: 100%; padding: 0px;  }
  #coordonnee { font-size: 9px;  display: block !important; padding: 0px !important; text-align: center;}
}

@media (max-width: 1198px)
{
.center-logo {  left: 0;  position: absolute;  max-width: 100%;  margin: 0;  top: 0;  transform: none;  padding: 0; z-index: 5; }
}

@media (max-width: 767px)
{
  .header-with-topbar.sticky .navbar-top { top: -50px !important; }
}
#navbar-collapse-toggle-1 { z-index: 10;}