/******************************************** De Base ***********************************************/
body {
    background-color: #f7f7f7 !important;
	margin : 0 0 0 0;
	font-family: 'Montserrat', sans-serif !important;
	font-size:16px !important;
	font-display: swap;
	font-weight : 100;
}

h1, h2, h3, h4 {
	font-family: 'Merienda', cursive !important;
	font-display: swap;
}

html {
	scroll-behavior: smooth;
}

.mobileAff, .mobaff{
	display : none;
}
.deskAff{
	display : block;
}
.l2{
	padding-left : 20px;
}

a:link{
	color:#333;text-decoration:none;
}
a:visited{
	color:#333;text-decoration:none;
}
a:hover{
	color:#333;text-decoration:none;
}
a:active{
	color:#333;text-decoration:none;
}

#menu a:link{
	color:white;text-decoration:none;
}
#menu a:visited{
	color:white;text-decoration:none;
}
#menu a:hover{
	color:white;text-decoration:none;
}
#menu a:active{
	color:white;text-decoration:none;
}

.btnmenu1, .btnmenu2{
	padding-left : 20px;
}

.menupos{
position: absolute;
    z-index: 100000;
	
}

input[type=text],input[type=email],input[type=tel], select, textarea {
	padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  background-color : f0f0f0;
}
h1{
		margin : 0 0 10px 0;
		padding : 0;
		color: #1b2942;
}
th, td {
  padding: 15px !important;
}

#footer{
	padding : 15px;
	color : #333;
	background-color: #DDCDBA;
}

#footer a:link{
	color:#333;text-decoration:none;
}
#footer a:visited{
	color:#333;text-decoration:none;
}
#footer a:hover{
	color:#333; text-decoration: underline;
}
#footer a:active{
	color:#333;text-decoration:none;
}

.btn-grad {
	background-image: linear-gradient(to right, #2b5876 0%, #4e4376 51%, #2b5876 100%);
	margin: 30px;
    padding: 20px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
	font-weight:600;
	cursor : pointer;
	}
.btn-grad:hover { 
	background-position: right center; 
	color :#59162d !important;
	text-decoration: none;
	font-weight:600; 
}

#content {
	max-width : 1600px;
	min-height :800px;
	background-color: #f7f7f7;
	padding : 100px 0px 0px 0px;
	
}


.tarif{
	border : 1px solid #c9c9c9;
	padding-bottom : 20px;
}

.imgtarif{
	background-size: cover;
	width: 100%;
	height: 270px;
}
.tarif h4{
	min-height : 76px;
}

#imageoffre { height: 280px; overflow: hidden; }

.desc{
	max-width : 1600px;
	padding : 50px;
}
.euro img {
	width : 90%;
}

.paderic{
	padding-left : 120px;
}
	
.padfabdesk{
	padding-left : 160px !important;
}

.test{
	 background-color : #DDCDBA !important;
}

/******************************************** MENU SECONDAIRE ***********************************************/

.menusec{
	position : absolute;
	top: 70px; right: 20px;
	z-index : 99999;
	font-weight:700;
}

.menusec a{
	color : white;
	font-size: 14px;
}

.menusec li{
	display : inline-block;
	
}

.menusec a:hover{
	color : white;
	text-shadow: 0 0 0.6em white;
	text-decoration : none;
}


/* ################################################          MENU DESKTOP           ############################################### */
.menuPri a{
	color : white;
	font-weight:700;
	text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

.menuPri a:hover{
	color : white;
	text-shadow: 0 0 0.6em white;
	text-decoration : none;
}
.menuPri{
	width : 100%;
	margin: 0  auto;
    position: absolute;
	top: 10px; left: 50%; /* à 50%/50% du parent référent */
	transform: translate(-50%, 0); /* décalage de 50% de sa propre taille */
	
}

.logohau{
	padding : 20vh;
}

.tabmenu li, .tabmenu2 li{
	display: inline-block;
	padding : 10px;
	text-shadow: 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000;
}

.tabmenu3 li{
	display: inline-block;
	padding : 10px;
}


.menuPriStly{
	
	margin-bottom : 50px;
	background-color: #DDCDBA;
}



/* ##############################################                   Menu mobile                   ######################################################## */


/* Config */
:root {
  --burger-button-size: 1.8rem;
  --burger-button-thickness: 6px;
  --burger-button-color: white;
  --nav-width: 20rem;
  --nav-bg: #6a3c58;
  --nav-link-bg: #98748a;
  --nav-link-color: #images/tarif/;
  --nav-link-hover: purple;
  --main-bg: #f7f7f7;
}


/* styling  nav */
.navigation {
  position: absolute;
  display: grid;
  align-content: start;
  gap: 2px;
  width: var(--nav-width);
  min-height: 100vh;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 0; /* will be under everything */
}

/* styling opened nav */
.main {
  transition: transform .25s;
  will-change: transform;
}
.main.is-opened {
  transform: translateX(20rem);
}



/* Global deco */

* {
  box-sizing: border-box;
}


.main {
  background: var(--main-bg);
  min-height: 100vh;
}

.navigation {
  background: #DDCDBA;
}
.navigation__link {
  padding: 1rem;
  color: white;
  text-decoration: none;
}

.navigation a:link{
	color:white !important;text-decoration:none;
}
.navigation a:visited{
	color:white !important;text-decoration:none;
}
.navigation a:hover{
	color:white !important;text-decoration:none;
}
.navigation a:active{
	color:white !important;text-decoration:none;
}
.navigation__link:hover,
.navigation__link:focus,
.navigation__link:active {
  background: var(--nav-link-hover);
}

.menu {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
}
.line {
  fill: none;
  stroke: #DDCDBA;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
	
}
.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.line2 {
  stroke-dasharray: 50 60;
  stroke-width: 6;
}
.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}
.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

/******************************************************Module de paiment ***************************************************/

input#show {
    display:none;
}
input#show1 {
    display:none;
}

div#contentaff {
    display:none;
}

div#contentaff2 {
    display:none;
}
input#show:checked ~ div#contentaff {
  display:block;
}
input#show1:checked ~ div#contentaff2 {
  display:block;
}

.mouseff{	
	cursor: pointer;
}



/******************************************************Module de paiment fin***************************************************/



/* ##############################################                   Slider                   ############################################################ */


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200&display=swap');
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  background: #eee;
  min-height: 100vh;
  width:100%;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
}  

#carousel .carousel-item{
  height:100vh;
  width:100%;
  min-height:350px;
  background:no-repeat center center scroll;
  background-size:cover;
}
#carousel .carousel-inner .carousel-item{
  transition:-webkit-transform 1s ease;
  transition:transform 1s ease;
  transition:transform 1s ease, -webkit-transform 1s ease;
}
#carousel .carousel-item .caption{
  padding:40px;
  color:white;
  animation-duration: 1s;
  animation-delay: 1s;
}
#carousel .caption h2{
  animation-duration: 1s;
  animation-delay: 1s;
}
#carousel .caption p{
  animation-duration: 1s;
  animation-delay: 1.2s;
}

#carousel .caption a{
  animation-duration: 1s;
  animation-delay: 1.4s;
}
.delicious-btn{
  display: inline-block;
  min-width:160px;
  height:60px;
  color:#images/tarif/;
  border:none;
  border-radius: 0;
  padding:0 30px;
  font-size:16px;
  line-height:58px;
  font-weight:600;
  -webkit-transition-duration: 1000ms;
  transition-duration: 1000ms;
  text-transform: capitalize;

}


/******************************************** Page d'accueil ***********************************************/

.sectionVid{
	padding-bottom : 100px;
}
.sectionText{
	padding : 0px 40px 0 40px !important;

}
.row{
	margin-right : 0px !important;
	margin-left : 0px !important;
	
}
.col-xs-12, .col-sm-12, .col-lg-6{
	padding-right : 0px !important;
	padding-left : 0px !important;
}

.section1sans img{
	width : 100%;
}
.section1sans a{
	color : grey;
}
.section1sans{
	background-color : #ede1d3;
	padding : 80px 0px 100px 0px;
	
}

.pad20{
	padding : 10px !important;
}
.contentoffre{
	padding-bottom : 100px;
}

.classique{
	padding : 0px 100px 100px 100px;
}


.padl20{
	padding-left : 20px !important;
}
.pad100{
	padding : 100px 0 100px 0;
}
.padb100{
		padding-bottom : 20px;
	}
.pad20{
	padding : 10px !important;
}
	
#video{
	padding : 0 40px 0 40px !important;
}

.flechebas{
	position:absolute;
	bottom : 70px;
	margin-left : -80px !important;
}
/******************************************** Desktop ***********************************************/
@media all and (min-width: 1025px){
  #carousel .carousel-item.boat{
  background-image:url("images/slide/1.jpg");
}
#carousel .carousel-item.sea{
  background-image:url("images/slide/2s.jpg");
}
#carousel .carousel-item.river{
  background-image:url("images/slide/3.jpg");
}
#carousel .carousel-item.mont{
  background-image:url("images/slide/4.jpg");
}
#carousel .carousel-item.river5{
  background-image:url("images/slide/5s.jpg");
}
#carousel .carousel-item.river6{
  background-image:url("images/slide/6.jpg");
}
#carousel .carousel-item.river7{
  background-image:url("images/slide/7.jpg");
}
#carousel .carousel-item.river8{
  background-image:url("images/slide/8.jpg");
}
#carousel .carousel-item.river9{
  background-image:url("images/slide/9.jpg");
}
#carousel .carousel-item.river10{
  background-image:url("images/slide/10.jpg");
}
#carousel .carousel-item.river11{
  background-image:url("images/slide/11.jpg");
}

.classique2{
	padding : 0px 100px 100px 100px;
}
.descrmar{
	margin-top : -50px;
}
.description{
	margin-top:-50px;
}
}

/******************************************** Mobile ***********************************************/




@media all and (max-width: 1024px){
	
	.carousel-inner, .carousel-item{
		min-height : 780px !important;
	}
	
	.classique2{
		padding : 10px !important;
		padding-top : 90px !important;
	}
	
	.padfab, .paderic{
		width : 100%;
	}
	
	.paderic{
		padding-left : 25%;
	}
	.all{
		padding-top: 150px !important;
	}
	
	
	.menusec li{
	display : block;
	
}
	
	.contentoffre{
		margin-top: 0px;
		padding : 130px 5px 20px 5px;
	}
	
	.contenu{
		padding : 120px 5px 20px 5px;
	}
	
	.menusec{
		top : 0px;
	}
	
	.mobsupp{
		display : none;
	}
	
	h1, h2, h3, h4 {
		margin-bottom : 30px !important;
	}
	th, td {
	  padding: 0px !important;
	}

	#menu{
		padding : 0px !important;
	}
	#menu ul{
		background-color : #e3c896;
	}
	
	.mobmen{
		padding-top : 30px !important;
	}
	
	.moba a{
		font-size : 40px !important;
	}
	.moba{
		padding-top : 0px !important;
		margin-top : -10px !important;
	}
	
	table { 
	  width: 100%; 
	  border-collapse: collapse; 
	}
	/* Zebra striping */
	tr:nth-of-type(odd) { 
	  background: #eee; 
	}
	th { 
	  background: #333; 
	  color: white; 
	  font-weight: bold; 
	}
	td, th { 
	  padding: 6px; 
	  border: 1px solid #ccc; 
	  text-align: left; 
	}

.mobileAff, .mobaff{
	display : block;
}

.deskAff{
	display : none;
}

.logohau{
	padding : 0px;
	padding-top : 80px;
}

.btnmenu{
	padding-top : 50px;
	margin-left: -50px;
}

.btnmenu1{
	padding-left : 10px;
}

.btnmenu2{
	padding-left : 48px;
}

.saut{
	height : 80px;
}

.btnmenu2 {
	margin-top : 30px;
}

#carousel .carousel-item.boat{
  background-image:url("images/slide/m1.jpg");
}
#carousel .carousel-item.sea{
  background-image:url("images/slide/m2.jpg");
}
#carousel .carousel-item.river{
  background-image:url("images/slide/m3.jpg");
}
#carousel .carousel-item.mont{
  background-image:url("images/slide/m4.jpg");
}
#carousel .carousel-item.river5{
  background-image:url("images/slide/m5.jpg");
}
#carousel .carousel-item.river6{
  background-image:url("images/slide/m6.jpg");
}
#carousel .carousel-item.river7{
  background-image:url("images/slide/m7.jpg");
}
#carousel .carousel-item.river8{
  background-image:url("images/slide/m8.jpg");
}
#carousel .carousel-item.river9{
  background-image:url("images/slide/m9.jpg");
}
#carousel .carousel-item.river10{
  background-image:url("images/slide/m10.jpg");
}
#carousel .carousel-item.river11{
  background-image:url("images/slide/m11.jpg");
}

.menusec ul { 
	text-align : right;
}

@media (max-width: 640px) {
	.paniermob{
		padding-top : 70px;
	}
	.classique{
		padding : 10px !important;
		margin : 50px 0 20px 0 !important;
	}
	

	#content{
		padding : 10px !important;
	}
	.mobmen{
		padding-top : 30px !important;
	}
	.pad100{
		padding: 20px 0 20px 0;
	}
	.contentoffre{
		margin-top: 0px;
		padding : 50px 5px 20px 5px;
		padding-bottom: 20px;
	}
	.sectionText{
		padding : 10px !important;
	}
	#video{
		padding : 30px 0px 30px 0px !important;
	}
	.euro img {
		width : 100%;
	}	
	.padb100{
		padding-bottom : 20px;
	}
	.ericphoto{
	margin-left : 0px;
}

.section1sans img{
	width : 100%;
}

}

/*********************** Panier **********************/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		padding-left: 50%; 
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	
	td, th {
		display : block;
	}
	
	th:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(2):before { content: "Quantité : "; }
	td:nth-of-type(3):before { content: "Tarif : "; }
	td:nth-of-type(5):before { content: "Modifier la quantité : "; }
	td:nth-of-type(6):before { content: "Si cadeau, mettre le nom et prenom de la personne : "; }
	
	
}



/* Ecraser existant */

@media (min-width: 992px){
	.col-lg-3{
		max-width: 24% !important;
	}
}