body
{
   margin: auto; /* Pour centrer notre page */
   
   background-image:none;
   background-attachment:fixed;
   background-position:center center;
   background-repeat:no-repeat;
   background-color: white;
   -webkit-background-size: cover; /* pour anciens Chrome et Safari */
   background-size: cover; /* version standardis�e */
  }
  

.navbar ul{
  position: fixed;
  top: 0;
  width: 100%; 
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #1396b3;
  -webkit-box-shadow: 3px 4px 10px 5px #1396b3 ;
  box-shadow: 3px 4px 10px 5px #1396b3 ;
  
}

li {
  float: left;
  
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.1em;
  font-family: arial;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #673ab7;
}
.active {
  background-color: #4CAF50;
  color: white;
  
}
.menuderoulant{
  display:none;
  text-decoration: none;
  color: #673ab7;
  
}
.menu:hover .menuderoulant {
	display:block;
	float:none;
	width: 20%;
	background-color: #1396b3;
	z-index:+2;
	list-style-type: none;
	overflow: hidden;
	text-align:center;

}	

/*Style 'show menu' label button and hide it by default*/
.navbar .show-menu {
	text-decoration: none;
	color: #fff;
	background: #1396b3;
	text-align: center;
	padding: 10px 15px;
	display: none;
  cursor: pointer;
  text-transform: uppercase;
   
  -webkit-box-shadow: 0px -10px 15px 20px #1396b3 ;
  box-shadow: 0px -10px 15px 20px #1396b3 ;

}

.navbar .show-menu span{
   padding-left: 25px;
}

/*Hide checkbox*/
.navbar input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
.navbar input[type=checkbox]:checked ~ #menu{
    display: block;
}



/*Responsive Styles*/

@media screen and (max-width : 800px){
  .navbar .lines {
    border-bottom: 15px double #f8f8f8; 
    border-top: 5px solid #f8f8f8; 
    content:"";
    height: 5px; 
    width: 20px;
    padding-right: 15px;
    float: right;
	
	
	
}
	/*Make dropdown links appear inline*/
	.navbar ul {
		position: static;
		display: none;
	
		
	}
	/*Create vertical spacing*/
	.navbar li {
		margin-bottom: 1px;
		float:none;
	}
	/*Make all menu links full width*/
	.nacbar ul li, .navbar li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	.navbar .show-menu {
		display:block;
	}
	.dispa{
		display: none;
	}
	
}

h1
{ 
  color: white;
  text-align: center;
  letter-spacing: 3%;
  font-family: Arial Black;
  font-size:3em;
  text-shadow:2px 2px 0 #4074b5, 2px -2px 0 #4074b5, -2px 2px 0 #4074b5, -2px -2px 0 #4074b5, 2px 0px 0 #4074b5, 0px 2px 0 #4074b5, -2px 0px 0 #4074b5, 0px -2px 0 #4074b5, -1px 5px 17px #1396B3;
  margin-top: 20%;	  
   }  
  
 	
@media screen and (max-width: 800px) 
	{
      h1
	  {
      margin:none;
	  margin-bottom:0;
	  margin-top:21%;
	  font-size:1.5em;
	  
      }
    }  

  
h2
{  
  
-webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  color: white;
  text-shadow:2px 2px 0 #4074b5, 2px -2px 0 #4074b5, -2px 2px 0 #4074b5, -2px -2px 0 #4074b5, 2px 0px 0 #4074b5, 0px 2px 0 #4074b5, -2px 0px 0 #4074b5, 0px -2px 0 #4074b5, -1px 5px 20px #1396B3;
 
   font-family: Arial Black;
   text-align: center;
   font-size:2.2em;
   margin-top: -1%;
   }
	
	
@media screen and (max-width: 800px) 
	{
      h2
	  {
      margin:none;
	  margin-bottom:0%;
	  margin-top:2%;
	  text-align:center;
	  font-size:1.3em;
      }
    }
	

h3
{
 font-size:1.6em;
 color:#1396b3;
 font-family: arial;
 text-align: center;
 margin: 2%;	 
  }
@media screen and (max-width: 800px) {
      h3
	  {
        font-size:1em;
		margin-top:5%;
      }
    }
  

h4
{
 font-size:4em;
 color:#1396b3;
 font-family: 'Comic Sans MS', cursive;
 text-align: center;
 margin: 0%;
 font-style: oblique 40deg;
  }
@media screen and (max-width: 800px) {
      h4
	  {
        font-size:2em;
      }
    }
/*police special des h4 prix */
	.nosplus
{
	margin-top:10%;
	font-size:2em;
}	

@media screen and (max-width: 800px) {
      .nosplus
	  {
        margin-top:30%;
      }
    }

	.nosplus2
{
	margin-top:5%;
	font-size:2em;
}	

h5
{
 font-size:2.1em;
 color:white;
 font-family: 'Comic Sans MS', cursive;
 text-align: center;
 margin: 0%;
 font-style: oblique 40deg;
  }
@media screen and (max-width: 800px) {
      h5
	  {
        font-size:1.6em;
      }
    }
	
.fondhaut{     
  position: absolute;
  top: 12%;
  width: 90%;
  margin-left: 5%;
  z-index:-1; 
  height:70%;
	-webkit-box-shadow: 1px 20px 40px 7px #3a3131;
	-moz-box-shadow: 1px 20px 40px 7px #3a3131;
	box-shadow: 1px 20px 40px 7px #3a3131;
  
}  

  @media screen and (max-width: 800px) {
      .fondhaut
	  {
	position: absolute;
	top: 5%;
	width: 98%;
	margin-left: 1%;
	z-index:-1; 
	height:30%;
	-webkit-box-shadow: 1px 20px 40px 7px #3a3131;
	-moz-box-shadow: 1px 20px 40px 7px #3a3131;
	box-shadow: 1px 20px 40px 7px #3a3131;  
      }
    }
	
	
	
	.bouton10 {
	width:100px;
	height:100px;
	background:white;
	font:bold 13px Arial;
	border-radius:50%;
	border:2px solid #9EA0A1;
	text-align:center;
	position: absolute;
	margin-top:18%;
	left:30%;
	box-shadow: -5px 2px 10px 3px #1396b3 inset;
	text-shadow: -1px -1px black;
}




@media screen and (max-width: 800px) 
	{
      .bouton10
	{
	margin-top:50%;  
    width:70px;
	height:70px;
	left:6%;
    }
    }
.bouton10:hover
{
	background:#673ab7;
    box-shadow: -5px 2px 10px 3px white inset;
}
.bouton10:hover a
{
color:white;	
}
.bouton10 a
{
	color:#1396b3;
	text-decoration:none;
	font-size:4.2em;
	padding-top:10%;
	display:block;
}	

@media screen and (max-width: 800px) 
	{
      .bouton10
	  {
		font-size:60%; 
	
      }
    }
	
.bouton11 {
	width:110px;
	height:110px;
	background:white;
	font:bold 13px Arial;
	border-radius:50%;
	border:2px solid #9EA0A1;
	text-align:center;
	position: absolute;
	margin-top: 18%;
	left:45%;
	box-shadow: -5px 2px 10px 3px #1396b3 inset;
	text-shadow: -1px -1px black;
}



@media screen and (max-width: 800px) 
	{
      .bouton11
	  {
		  margin-top: 48%;
      width:80px;
	height:80px;
	left:40%;
      }
    }
.bouton11:hover
{
	background:#673ab7;
    box-shadow: -5px 2px 10px 3px white inset;
}
.bouton11:hover a
{
color:white;	
}
.bouton11 a
{
	color:#1396b3;
	text-decoration:none;
	font-size:1.3em;
	padding-top:30%;
	vertical-align: middle;
	display:block;
}


@media screen and (max-width: 800px) 
	{
      .bouton11 a
	  {
		font-size:95%; 
      }
    }
	


	.bouton12 {
	width:100px;
	height:100px;
	background:white;
	border-radius:50%;
	border:2px solid #9EA0A1;
	text-align:center;
	position: absolute;
	margin-top: 18%;
	right:30%;
	box-shadow: -5px 2px 10px 3px #1396b3 inset;
}

@media screen and (max-width: 800px) 
	{
      .bouton12
	  {
		  margin-top: 50%;
      width:70px;
	height:70px;
	right:6%;
      }
    }

.bouton12:hover
{
	background:#673ab7;
    box-shadow: -5px 2px 10px 3px white inset;
}

#bouton12
{
	text-align:center;
	width:70%;
	padding-top:15%;
	border-radius:35%;
}

	
.corps
{  float: left;
   width: 76%;
   margin: 5%;
   margin-top:25%;
   padding: 1%;
   margin-left:13%;
   -webkit-box-shadow: 1px 20px 40px 7px #3a3131;
-moz-box-shadow: 1px 20px 40px 7px #3a3131;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=15, Color='#3a3131', Positive='true');
zoom:1;
box-shadow: 1px 20px 40px 7px #3a3131;
   
	
}
@media screen and (max-width: 800px) 
	{
      .corps
	  {  
    width:92%;
	margin-left:3%;
	margin-right:2%;
	margin-top:30%;
	margin-bottom:15%;
      }
	}

.corps p
{
	
   padding-left: 30px;
   color: black;
   text-align: left;
   font-size:1.3em;
   font-family: arial;
  font-style: oblique 90deg;
  
}

@media screen and (max-width: 800px) 
	{
      .corps P
	  {  
   font-size:1.3em;
   padding-left:1%;
      }
	}

.corps2
{  float: left;
   width: 90%;
   margin: 5%;
   margin-top:3%;
   padding: 1%;
   margin-left:5%;
   border-radius: 15px 15px 0 0;
   background-color:#DFDDDD;
   -webkit-box-shadow: 1px 15px 10px 7px #3a3131;
-moz-box-shadow: 1px 15px 10px 7px #3a3131;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=15, Color='#3a3131', Positive='true');
zoom:1;
box-shadow: 1px 15px 10px 7px #3a3131;
   
	
}
@media screen and (max-width: 800px) 
	{
      .corps2
	  {  
    width:92%;
	margin-left:3%;
	margin-right:2%;
	margin-bottom:15%;
      }
	}

.corps2 p
{
	
   padding-left: 30px;
   color: black;
   text-align: left;
   font-size:1.3em;
  
} 

@media screen and (max-width: 800px) 
	{
      .corps2 P
	  {  
   font-size:1.1em;
   padding-left:1%;
      }
	}

.corps3
{  
	float: left;
   width: 76%;
   margin-top:3%;
   padding: 1%;
   background-color:#673ab7;
    margin-left:13%;
}
@media screen and (max-width: 800px) 
	{
      .corps3
	  { 
	width:92%;
	margin-left:3%;
	margin-right:2%;
	margin-top:30%;
	margin-bottom:15%;
	
      }
	}
@media screen and (max-width: 800px) 
	{
      .corps3 p
	  {  
	  margin-top:120%;
	  margin-right:4%;
	  padding-bottom:20%;
      }
	}

.corps4
{  float: left;
   width: 90%;
   margin: 5%;
   margin-top:5%;
   padding: 1%;
   margin-left:5%;
   -webkit-box-shadow: 1px 15px 10px 7px #3a3131;
-moz-box-shadow: 1px 15px 10px 7px #3a3131;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=15, Color='#3a3131', Positive='true');
zoom:1;
box-shadow: 1px 15px 10px 7px #3a3131;
   
	
}
@media screen and (max-width: 800px) 
	{
      .corps4
	  {  
    width:92%;
	margin-left:3%;
	margin-right:2%;
      }
	}

.corps4 p
{
	
   padding-left: 30px;
   color: black;
   text-align: left;
   font-size:1.3em;
  
}  

@media screen and (max-width: 800px) 
	{
      .corps4 P
	  {  
   font-size:1.1em;
   padding-left:1%;
      }
	}
	
.corps5
{  
	float: left;
   margin-top:2%;
   padding: 1%;
   background-color:#673ab7;
   float: left;
   width: 76%;
   padding: 1%;
   margin-left:13%;
   
}
@media screen and (max-width: 800px) 
	{
      .corps5
	  {  
    width:100%;
	margin-left:0%;
      }
	}
@media screen and (max-width: 800px) 
	{
      .corps5 p
	  {  
	  margin-top:2%;
	  margin-right:4%;
	  padding-bottom:2%;
      }
	}

.logo{
  position: absolute;
  top: 15%;
  left: 4%;
  width: 10%;
  position:fixed;
}  
  
  @media screen and (max-width: 800px) {
      .logo
	  {
       position: absolute;
  top: 1%;
  left: 44%;
  width: 20%;
 
      }
    }
		
.logor{
  position: absolute;
  top: 1%;
  right: 13%;
  width: 3%;
 position:fixed;
  border-radius: 6px;
   -webkit-box-shadow: -1px 0 9px 4px rgba(255,255,255,1) ;
  box-shadow: -1px 0 9px 4px rgba(255,255,255,1) ;
}  
.logor:hover {
transform: scale(1.2);
}
  
  @media screen and (max-width: 800px) {
      .logor
	  {
       
		top: 91%;
		left: 3%;
		width: 12%;
		
	
      }
    }		
	
.logof{
  position: absolute;
  top: 1%;
  right: 9%;
  width: 3%;
 position:fixed;
 border-radius: 6px;
   -webkit-box-shadow: -1px 0 9px 4px rgba(255,255,255,1) ;
  box-shadow: -1px 0 9px 4px rgba(255,255,255,1) ;
}  
.logof:hover {
transform: scale(1.2);
}  

  @media screen and (max-width: 800px) {
      .logof
	  {
       
		top: 80%;
		left: 3%;
		width: 12%;
		
	
      }
    }	
.logog{
  position: absolute;
  top: 1%;
  right: 5%;
  width: 3%;
  position:fixed;
  border-radius: 6px;
   -webkit-box-shadow: -1px 0 9px 4px rgba(255,255,255,1) ;
  box-shadow: -1px 0 9px 4px rgba(255,255,255,1) ;
}  
.logog:hover {
transform: scale(1.2);
}
  
  @media screen and (max-width: 800px) {
      .logog
	  {
       display: none;
      }
    }		
.logot{
  position: absolute;
  top: 1%;
  right: 1%;
  width: 3%;
  position:fixed;
  border-radius: 6px;
   -webkit-box-shadow: -1px 0 9px 4px rgba(255,255,255,1) ;
  box-shadow: -1px 0 9px 4px rgba(255,255,255,1) ;
}  
.logot:hover {
transform: scale(1.2);
}  
  @media screen and (max-width: 800px) {
      .logot
	  {
   display: none;
      }
    }		
	



#boutonappel
{
	 background:#1396b3;
	 width:28%;
}
#appel{
color:white;
font-size:0.9em;
}
@media screen and (max-width: 800px) {
      #boutonappel
	  {
	width:50%;
      }
    }
	
#bouton1 {
	background:#CC33CC;	
}

#bouton2 {
	background:#67CC2C;
}
#bouton3 {
	background:#3366FF;
}
#bouton4 {
	background:#FF9900;
}
#bouton5 {
	background:#6600CC;
}
.bouton
{
	padding:6px 0 6px 0;
	width:20%;
	height:7%;
	border-radius:10px;
	font:bold 13px Arial;
	color:#fff;
    margin : auto;
	text-align:center;
	font-size:1.5em;
	 border: 2px inset #c0c0c0;
}

@media screen and (max-width: 800px) {
      .bouton
	  {
    font-size:1.1em;
	width:45%;
	height:10%;
      }
    }

.bouton a{
	display:block;
	color:white;
	text-decoration:none;
}
.bouton a:hover
{
	display:block;
	
	border-radius:10px;
	color:black;
}

  
  
 .titremenu
{
	margin-top:-1%;
	margin-left:-1%;
	margin-right:-1%;
	border-radius: 15px 15px 0 0;
	text-align:center;
	font-size:2em;
	color: white;
	text-shadow: 
	#000000 1px 1px, 
	#000000 -1px 1px, 
	#000000 -1px -1px, 
	#000000 1px -1px;
	font-family: Comic Sans, Comic Sans MS, cursive;
  }
  
 @media screen and (max-width: 800px) {
      .titremenu
	  {
    font-size:1.8em;
      }
    }
 
#titremenu1
{
	background-color:#CC33CC;
}
	
#titremenu2
{
	background-color:#67CC2C;
}
  
 #titremenu3
{
	background-color:#3366FF;
  } 
  
#titremenu4
{	
	background-color:#FF9900;	
 } 
  
 #titremenu5
{	
	background-color:#6600CC;
 } 
 
.plantitre
 {
 font-size:1.3em;
 color:#40E0D0;
 font-family: Comic Sans, Comic Sans MS, cursive;
 text-align: center;
 text-shadow: 
	#000000 1px 1px, 
	#000000 -1px 1px, 
	#000000 -1px -1px, 
	#000000 3px -3px;
 }
 








/* Le pied de page (qui se trouve tout en bas, en g�n�ral pour les copyrights) */

#pied_de_page
{
   padding: 1%;
   clear: both;
   text-align: center;
   color: #B3B3B3;
 
	 background-color: #1396b3;
  -webkit-box-shadow: 3px 4px 10px 5px #1396b3 ;
  box-shadow: 3px 4px 10px 5px #1396b3 ;
}

#canoelozere
{
margin-left: 50%;
}

#pontcasse
{
margin-left: 15%;
margin-right:15%;
width: 70%;	
border: 2px solid #018dc4;
 -webkit-box-shadow: 3px 4px 17px 2px #018dc4 ;
  box-shadow: 3px 4px 17px 2px #018dc4 ;
}

@media screen and (max-width: 800px) 
	{
      #pontcasse
	  {  
 
   width: 90%;
   margin-left: 5%;
margin-right:5%;
      }
	}


/* id maps essayer dimesion */
 #carte
 {

width: 100%;

 }
 
 
 /* les photo dans les corps 1 2 3 */
 #photo1
 {
 border: 1px solid #1396b3;
 -webkit-border-radius: 5px;
  border-radius: 5px;	
 -webkit-box-shadow: 3px 4px 17px 2px #1396b3 ;
  box-shadow: 3px 4px 17px 2px #1396b3 ;
 width: 30%; 
 float: right;
 margin-top:2%;
 }
 
@media screen and (max-width: 800px) 
	{
      #photo1
	  {  
margin-left: auto;
margin-right: auto;
width: 50%;
      }
	} 
 
 /* les photo dans les corps 1 2 3 */
 #photo2
 {
 border: 1px solid #1396b3;
 -webkit-border-radius: 5px;
  border-radius: 5px;	
 -webkit-box-shadow: 3px 4px 17px 2px #1396b3 ;
  box-shadow: 3px 4px 17px 2px #1396b3 ;
 width: 30%; 
	display: block;
    margin-left: auto;
    margin-right: auto
 }
 
@media screen and (max-width: 800px) 
	{
      #photo2
	  {  
margin-left: auto;
margin-right: auto;
width: 50%;
      }
	} 
 
.video
{
width:100%;
height:0%;
padding-bottom:56.25%;	
overflow: hidden;
position: relative;
border: 1px solid #018dc4;
-webkit-border-radius: 2px;
  border-radius: 2px;	
 
 }
 
 .video iframe
 {	width:100%;
	height:100%;
	position: absolute;
	top: 0;
	left:0;
 }
 
 
@media screen and (max-width: 800px) 
	{
      .video
	  {  
	display: block;
	width: 90%;
    margin-left: auto;
    margin-right: auto;
	float: none;
      }
	}

	


.TA_selfserveprop
	{
	display: inline;
	float: left;
	margin: auto;
	
	}
	
@media screen and (max-width: 800px) 
	{
      .TA_selfserveprop 
	  {  
	 margin-left:18%;
	 
      }
	}	
.formulaire
	{
	display: inline;
	float: right; 
    margin: auto;
	}
	
@media screen and (max-width: 800px) 
	{
      .formulaire
	  {  
	  display: none;
      }
	}

	
	






.tarif
{
	display:block;
	text-decoration:none;
}
.corpstarif1
{  
clear: left;
float: left;
   width: 30%;
   margin-top:3%;
   margin-bottom:5%;
   padding: 1%;
   margin-left:8%;
border-radius:50%;
text-align:center;
}

@media screen and (max-width: 800px) 
	{
      .corpstarif1
	  {  
    width: 43%;
	margin-left:3%;
	
      }
	}
	
.corpstarif2
{  
border: 1px solid #66FF99 ;
float: right;
   width: 30%;
   margin-top:3%;
   margin-bottom:5%;
   padding: 1%;
   margin-right:8%;
border-radius:50%;
text-align:center;
}


@media screen and (max-width: 800px) 
	{
      .corpstarif2
	  {  
    width: 40%;
	margin-right:3%;
      }
	}
	
#tarif1 {
	border: 3px solid #CC33CC ;	
	box-shadow: -30px 100px 100px 70px #CC33CC inset;
	animation-duration: 6s;
   animation-name: clignoter01;
   animation-iteration-count: infinite;
   transition: none;
}

@keyframes clignoter01 {
  0%   { opacity:1; }
  15%   {opacity:0.5; }
  30%   {opacity:1; }
  100% { opacity:1; }
}

@media screen and (max-width: 800px) 
	{
      #tarif1
	  {  
	box-shadow: -15px 50px 50px 30px #CC33CC inset;
      }
	}
	
#tarif2 {
	border: 3px solid #66FF99 ;	
	box-shadow: -30px 100px 100px 70px #66FF99 inset;
	animation-duration: 6s;
   animation-name: clignoter02;
   animation-iteration-count: infinite;
   transition: none;
}

@keyframes clignoter02 {
  0%   { opacity:1; }
  15%   {opacity:1; }
  30%   {opacity:0.5; }
  45%   {opacity:1; }
  100% { opacity:1; }
}

@media screen and (max-width: 800px) 
	{
      #tarif2
	  {  
	box-shadow: -15px 50px 50px 30px #66FF99 inset;
      }
	}	
	
#tarif3 {
	border: 3px solid #3366FF ;	
	box-shadow: -30px 100px 100px 70px #3366FF inset;
	animation-duration: 6s;
   animation-name: clignoter03;
   animation-iteration-count: infinite;
   transition: none;
}

@keyframes clignoter03 {
  0%   { opacity:1; }
  75%   {opacity:1; }
  90%   {opacity:0.5; }
 
  100% { opacity:1; }
}

@media screen and (max-width: 800px) 
	{
      #tarif3
	  {  
	box-shadow: -15px 50px 50px 30px #3366FF inset;
      }
	}	

#tarif4 {
	border: 3px solid #FF9900 ;	
	box-shadow: -30px 100px 100px 70px #FF9900 inset;
	animation-duration: 6s;
   animation-name: clignoter04;
   animation-iteration-count: infinite;
   transition: none;
}

@keyframes clignoter04 {
  0%   { opacity:1; }
  30%   {opacity:1; }
  45%   {opacity:0.5; }
  60%   {opacity:1; }
  100% { opacity:1; }
}

@media screen and (max-width: 800px) 
	{
      #tarif4
	  {  
	box-shadow: -15px 50px 50px 30px #FF9900 inset;
      }
	}	

#tarif5 {
	border: 3px solid #6600CC ;	
	box-shadow: -30px 100px 100px 70px #6600CC inset;
	animation-duration: 6s;
   animation-name: clignoter05;
   animation-iteration-count: infinite;
   transition: none;
}

@keyframes clignoter05 {
  0%   { opacity:1; }
  60%   {opacity:1; }
  75%   {opacity:0.5; }
  90%   {opacity:1; }
  100% { opacity:1; }
}
}
@media screen and (max-width: 800px) 
	{
      #tarif5
	  {  
	box-shadow: -15px 50px 50px 30px #6600CC inset;
      }
	}	
	
#tarif6 {
	border: 3px solid #FF3377 ;	
	box-shadow: -30px 100px 100px 70px #FF3377 inset;
	animation-duration: 6s;
   animation-name: clignoter06;
   animation-iteration-count: infinite;
   transition: none;
}

@keyframes clignoter06 {
  0%   { opacity:1; }
  45%   {opacity:1; }
  60%   {opacity:0.5; }
  75%   {opacity:1; }
  100% { opacity:1; }
}
}
@media screen and (max-width: 800px) 
	{
      #tarif6
	  {  
	box-shadow: -15px 50px 50px 30px #FF3377 inset;
      }
	}	

 /* les photo dans les corps 1 2 3 */
 #photoprix
 {
 border: 1px solid #1396b3;
 -webkit-border-radius: 5px;
  border-radius: 5px;	
 -webkit-box-shadow: 3px 4px 17px 2px #1396b3 ;
  box-shadow: 3px 4px 17px 2px #1396b3 ;
width:40%;
 
clear: left;


 }
 






	
.parcour1
{ 	
	
	font-size:1.7em;
	color: white;
    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
	text-shadow: -1px -1px black;
}
@media screen and (max-width: 600px) {
     .parcour1
	  {
     font-size: 0.9em; 
	
      }
    }
	
.price
{ 	font-size:3em;
	color: black;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   
 
}
@media screen and (max-width: 600px) {
     .price
	  {
     font-size: 1.2em; 
	
      }
    }
.reserver
{ 	font-size:0.9em;
	color: black;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif
}

@media screen and (max-width: 600px) {
     .reserver
	  {
     font-size: 0.7em; 
	
      }
    }
.prixkayak
{ 	font-size:0.8em;
	color: black;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif
}

@media screen and (max-width: 600px) {
     .prixkayak
	  {
     font-size: 0.7em; 
	
      }
    }
#panier
{
	width: 10%;

}	
@media screen and (max-width: 600px) {
     #panier
	  {
     width: 20%; 
	 }
    }
	
.pagaie{

  position: absolute;
  top: 5%;
  right: 5%;
  width: 15%;
  z-index:1; 
   
}   

 @media screen and (max-width: 600px) {
      .pagaie
	  {
		top: -1%;
		left: 2%;
		width: 25%;
		
      }
    }


/*liste a puce de fin preparation descente*/
	
.un {
  list-style: circle;
  list-style-type: "\1F6F6"; 
  list-style-position: outside;
  display : inline-block;
  margin :auto;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items: center;
  padding: 5px;
}

.deux {
  
  list-style: circle;
  list-style-type: "\1F6F6"; 
  list-style-position: outside;
  display : inline-block;
  margin :auto;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items: center;
  padding: 5px;
}
/* texte corp 3 fond violet*/
.textepro
{
 font-size:1.5em;
 color:white;
 font-family: cursive;
 text-align: center;
 margin: 0%;
 font-style: oblique 40deg;
 margin-top:5%;
} 

@media screen and (max-width: 800px) 
	{
      .textepro
	  {  
	  font-size:1.4em;
      }
	}
.textepro2
{
 font-size:1.2em;
 color:black;
 font-family: cursive;
 text-align: center;
 margin: 1%;
 font-style: oblique 60deg;
 margin-top:0%;
} 

@media screen and (max-width: 800px) 
	{
      .textepro2
	  {  
	  font-size:1.2em;
      }
	}
	
	

	
.tripadvisor
{  float: left;
   width: 20%;
   margin: 0%;
   margin-top:5%;
   padding: 1%;
   margin-left:0%;
}
@media screen and (max-width: 800px) 
	{
      .tripadvisor
	  {  
    width:92%;
	margin-left:18%;
	
      }
	}


/* STYLES SPECIFIQUES AU TRACKER (SANS CONFLIT)*/

    .tracker-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 48px 16px;
        font-family: sans-serif; /* Assure une police propre pour ce bloc */
    }
    .tracker-card {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(4px);
        padding: 32px;
        border-radius: 24px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        border: 1px solid #e0f2fe;
        max-width: 350px;
        width: 100%;
        text-align: center;
    }
    .tracker-icon-box {
        background-color: #e0f2fe;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px auto;
    }
    .tracker-title {
        font-size: 24px;
        font-weight: bold;
        color: #1f2937;
        margin-bottom: 8px;
        margin-top: 0;
    }
    .tracker-text {
        color: #4b5563;
        font-size: 14px;
        margin-bottom: 24px;
    }
    .btn-tracker {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 16px 32px;
        font-size: 18px;
        font-weight: bold;
        color: #ffffff !important;
        text-decoration: none !important;
        background-color: #0284c7;
        border-radius: 16px;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }
    .btn-tracker:hover {
        background-color: #0369a1;
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(2, 132, 199, 0.3);
    }
    .btn-tracker:active {
        transform: scale(0.95);
    }
    .tracker-footer {
        margin-top: 16px;
        font-size: 10px;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: bold;
    }
    .tracker-svg {
        width: 20px;
        height: 20px;
        margin-left: 8px;
        transition: transform 0.3s ease;
    }
    .btn-tracker:hover .tracker-svg {
        transform: translateX(4px);
    }