body {
font-family: Ubuntu, Sans-serif;
margin:0;
font-size: 100%;
line-height: 30px;}
@font-face {font-family: 'MONTSERRAT-medium';src: url(https://isere-canyoning.com/wp-content/fonts/Montserrat-Medium.otf);}
@font-face { font-family: 'Montserrat-Black';       src: url(https://isere-canyoning.com/wp-content/fonts/Montserrat-Black.otf);}
a{text-decoration:none;}
a:link {color:#fff;} a:visited {color:#fff;} a:hover {color:#fff;} a:active {color:#fff;} h1 {
color: #303030;
width: 100%;
font-family:MONTSERRAT-medium;
font-size: 200%;
text-align: center;  line-height: 40px;
}
h1 span {
display:block;
}
h2 {
text-align:center;
font-size:150%;
font-family:MONTSERRAT-medium;
margin: 30px 0;
color: #303030}
.tarif {color:#000;}
h3   {padding: 5px;
color: rgb(91, 102, 134);
font-family: MONTSERRAT-medium;
font-size: 100%;
text-align: center;
position: absolute;
background-color: #fff;
border-radius: 0 0 10px 0;}
.faq { padding: 0;
color: black;
font-family: MONTSERRAT-medium;
font-size: 100%;
text-align: left;
position: relative;
background-color: #fff;
border-radius: 0;}
h4 {}
video {	width: 350px;margin:0 auto;} #header {text-align:center;} #page {	margin:0 auto;	width: 90%;	position:relative;} #menuhaut{
height:60px;
background-color: black;	
display: flex;  
width: 100%;}
#menuhaut ul{width:100%;margin: 0;}
#menuhaut li{
list-style: none;
color:#fff;
width:5%;
float: left;}
#menuhaut a { 
display: flex;}
#menuhaut a:hover {
color:#bbb;
display: flex;}  
.item-menuhaut{
padding: 5px 15px;
line-height: 50px;} #menu-icon-haut {display: none;} 
.phone-menu {display:block;}
#menu-icon {
display: none; height: 80px;}
#nav-wrap {height:60px;font-size:120%;}
#nav{
width:100%;
margin: 0 auto;
padding:0;
list-style: none;
position:absolute;
z-index:9;}
#nav li {
width:20%;
float: left;
list-style: none;}
#nav a {
display: block;
line-height: 60px;   
height: 60px; 
background-color: #3d3a48;}
#nav li ul{	display: none;	margin-left:-40px;}
#nav li ul li{    width:100%;}
#nav li ul li a{
line-height: 40px;   
height: 40px; 
background-color: #3d3a48;}
#nav li:hover > ul {display: block; }
#nav li a:hover { color: #000;}
#diapo img{	width:100%;}
.swiper {
width: 100%;
height: 60vh;
}
.swiper-slide {
position: relative;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-text {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
font-size: 20px;
}
.dechirure{  
position: relative;
z-index: 10;
bottom: 45px;}
#divider img{width:100%;padding:20px 0;}
#texteslide{
position:absolute;
width:100%;
top:70%;
right: 30%;
font-size:xx-large;
width: 95%;
color:#fff;
text-shadow: 4px 4px 4px black;} #content {min-height:800px;}
#content a{
color: #2a548a;  
font-weight: bold;	}
#content a:hover{
color: rgba(11,29,77,0.6);}
#content img {	border-radius: 5px; }
#imgphone {display:none;}
#vignette{
display: flex;
justify-content: space-around;}
#texte{
line-height: 30px;  margin: 10px;
}
#encart{width: 33%;
margin: 0 20px;
padding: 10px;
}
#encart img{width:100%;}
#photo img{width:100%;}
#video{
width:31%;
height:350px;
margin:1% ;
position:relative;
font-size:large;
float:left;}
#resatel{
display:flex;}
#resatel a{
display:flex;}
#myrezap{ 
line-height:50px;
height:50px;
text-align:center;
padding:5px;
color: #fff;
width: 45%; 
font-size:large;
background-color: #3aa62a;
border-radius: 5px;}
#myrezap a{color:#fff;}
#myrezap a:visited {color:#fff;}
#tel{ 
display:flex;
line-height:50px;
height:50px;
text-align:center;
padding:5px;
color: #fff;
background-color: #2a5aa6;
width: 45%; 
border-radius: 5px;}
#tel a{color:#fff;}
#tel a:visited {color:#fff;}
#plus{
width:170px;
height:30px;
margin:0 auto;
line-height:30px;
text-align:center;
padding:5px;
background-color:#13681c;
border-radius: 5px;
font-size:large;}
#plus a{color:#fff;}
#plus a:hover{color:#000;}
.hometitre{color:#fff;text-shadow: 4px 4px 4px black;}
#titre{
width:98%;
margin:30px auto;
text-align:center;
padding:1%;
border-radius: 5px;
float:left;}
#homephone{display: none; background-image: url(https://isere-canyoning.com/wp-content/uploads/2021/07/canyoning-grenoble-ecouges-phone.jpg);}
#imgleft {	float:left;	padding:2%;	margin:0px 10px 10px 0px;}
#imgright img{    margin-right: 20px;	border-radius: 5px;	}
.video{  width:100%;  height:auto;}
#topo-content{	height:400px;}
#topo{
width: 28%;
border-radius: 3%;  
color: #000;
}
.topo2 img{  width: 300px;
margin: 0 auto;
display: flex;}
.topoactivite{
display: flex;
flex-direction:column;
line-height: 30px;
list-style:none;
}
.toponiveau{
display: flex;
flex-direction:row;}
.activite{
background: #0f1aca;
border-radius: 50%;
border:1px solid #000; 
display: flex;  margin: 7px 3px;
height: 18px;
width: 18px;}
.activite0{
background: #fff;
border-radius: 50%;
border:1px solid #000; 
display: flex;  margin: 7px 3px;
height: 18px;
width: 18px;}
.activite1{
background: gold;border-radius: 50%;
border:1px solid #000; 
display: flex;  margin: 7px 3px;
height: 18px;
width: 18px;}
.activite2{
background: green;border-radius: 50%;
border:1px solid #000; 
display: flex;  margin: 7px 3px;
height: 18px;
width: 18px;}
.activite3{
background: orange;border-radius: 50%;
border:1px solid #000; 
display: flex;  margin: 7px 3px;
height: 18px;
width: 18px;}
.activite4{
background: red;border-radius: 50%;
border:1px solid #000; 
display: flex;  margin: 7px 3px;
height: 18px;
width: 18px;}
#partenaires {
float:left;
background-color: #e9ecf2 ;
margin: 0 0 10px 0;
padding:5px;
border-radius:5px;
width:100%;}
#partenaires img{float:left;margin-right:50px;width: 200px;}
table {width: 100%;} .floating-cta {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
gap: 10px;
z-index: 9999;
}
.cta-btn {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
transition: transform 0.2s;
}
.cta-btn:hover {
transform: scale(1.05);
} .phone {
width: 50px;
background: #111;
color: white;
} .whatsapp {
width: 50px;
background: #25D366;
color: white;
} .booking {
padding: 0 20px;
background: #ff6b00;
color: white;
} .reviews-section {
padding: 60px 20px;
background: linear-gradient(180deg, #f9fafb, #ffffff);
font-family: system-ui;
} .reviews-header {
text-align: center;
margin-bottom: 30px;
}
.rating {
display: inline-flex;
align-items: center;
gap: 10px;
background: #fff;
padding: 10px 18px;
border-radius: 999px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.score {
font-size: 22px;
font-weight: 700;
}
.count {
font-size: 13px;
color: #666;
} .reviews-wrapper {
overflow: hidden;
}
.reviews-track {
display: flex;
gap: 20px;
width: max-content;
animation: scroll 35s linear infinite;
}
.review {
width: 320px;
background: #fff;
border-radius: 20px;
padding: 20px;
flex-shrink: 0;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
transition: all 0.3s;
}
.review:hover {
transform: translateY(-10px);
} .top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #6366f1;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
.name {
font-weight: 600;
}
.meta {
font-size: 12px;
color: #888;
} .stars {
color: #fbbf24;
margin: 10px 0;
} .review p {
font-size: 14px;
color: #374151;
line-height: 1.6;
} @keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.reviews-wrapper:hover .reviews-track {
animation-play-state: paused;
} .tarif {
color: #000;
background-color: #ffba36;
padding: 5px;
border-radius: 5px;
margin: 0 auto;
width: 70%;
display: block;
text-align: center;}  #footercontent{
width:100%;
height: 300px;
margin:120px 0 0 0;
text-align:center;
line-height: 25px;
display:flex;
background-color: rgba(91, 102, 134, 0.9);}
#footerdiv img{
height:45px;
margin-top: 5%;}
#footerdiv {
color:#fff;
height: 200px;
width:25%;}
.footerdiv a{color:#fff;
}.footerdiv a:hover{color:#aaa;}
.footerdiv li{
height:auto;
list-style-type:none;
margin-left:-60px;	} #footer2 {
background-color: rgba(255,255,255,0.6); 
width:100%;
position:relative;
line-height:40px;
height: 40px;
bottom:-40px;
margin:0px auto;
font-size:12px;  
float:left;}
#footer2 a{	color:#0B1D4D;	}
#footer2 a:hover{ color: rgba(11,29,77,0.6);	} #contact{
position:relative;
margin:0px auto;
padding:10px;
width:600px;
background-color: rgba(11,29,77,0.6); 
border-radius: 5px; 
-webkit-border-radius: 5px;	}
.hidden {
display: none;
} @media only screen and (max-width: 760px) {
body{font-size:100%;}
h1{;font-size: 130%;margin-top: 10px;}
h2{font-size:130%;}
#header {
height:100px;
margin:0 auto;}
#diapo{
display:none;
}
.rslides img {width: 100%;height: auto;}
#texteslide{display:none;}
#logo{display:none;}
#menuhaut{
height:50px;
position: sticky;  
justify-content: space-evenly;
display: flex;  
width: 100%;}
#menuhaut li{
width: 25%;
line-height: 50px; 
margin:0 auto;}
#menuhaut a { 
display: block;
font-size:100%;}
.item-menuhaut{font-size: large;  padding:0;}
.item-menuhaut a {color: #FFFFFF;}
.phone{display:none;}
#menu-icon-haut {
display: none;
color: #fff;
width: 100%;
height: 40px;
line-height: 40px;
background: url(https://isere-canyoning.com/wp-content/uploads/2016/10/icone-phone.png) no-repeat left; } 
.contact{display: none;  }
.phone-menu {
display:none;}
#menu-icon {
display: block;  
color: #fff;
width: 50%;
margin: 0 auto;
height: 50px;
font-size:130%;
line-height: 50px;
font-family:Montserrat-Black; cursor: pointer;
background-color: #3d3a48; }
#menu-icon:hover {  background-color: #3d3a48;}
#menu-icon.active {  background-color: #3d3a48;}
#nav-wrap {  background-color: #3d3a48;height: 50px;} #nav {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
#nav.open {
max-height: 500px; }
#nav ul {
display: block;
line-height: 80px;  
padding:0;
height: 80px;  }
#nav li {
width: 100%;
display: block; 
font-size:120%;} 
#nav a{
display: block;
line-height: 40px;   
height: 40px;}
#nav li ul {
display: none;
width: 100%;
margin:0;}
#nav li a:hover {
color: #bbb;
font-size:100%; background-color: #2d254a;}
#nav li:hover > ul {
display: block; }
#nav li ul li {
font-size:100%; 
width: 100%;
line-height: 40px;   
height: 40px;}
#nav li ul li a{
display: block;
width: 100%; background-color: #2d254a;} #page {	
font-size:100%;
width:100%;
top:-12px;
padding:0;  }
table {  font-size: 90%;}
#content {
width: 98%;
margin: 1%;  }  
#vignette{
display: flex;
justify-content: space-around;
width: 100%;
flex-direction: column;}
#texte{
width: 95%;
font-size: 100%;
line-height: 30px;
text-align: justify;}
#encart:hover{
background-color: #fff;}
#encart{
font-size:100%;
width:100%;
height:100%;
text-align: justify;
margin:5px auto;
background-color: #fff;	
border: none;
padding: 0;
}
#encart img{
width:100%;
margin: 0 auto;}
#titre{
width:100%;
margin:20px auto;
padding:5% 1%;}
.hometitre{display:none;  }
#imgphone img{width:100%;  }
#imgphone {display:block;}
.toptitle{
color:#fff;
text-shadow: 4px 4px 4px black;
padding:5%;}
.bottomtitle{
color:#fff;
text-align: center;
text-shadow: 4px 4px 4px black;
font-size:large;
padding:25% 5% 1% 5%;}
#divider{display:none;}
#video{width:100%;}
#plus{
width:50%;
margin:0 auto;
text-align:center;
padding:1%;
background-color: #13681c;
border-radius: 5px;
font-size:90%;}
#plus a:hover{    color:#000;}
#resatel { flex-direction: column;}
#myrezap { width: 90%;}
#tel{ width: 90%;}
#imgleft{
width:100%;
padding:0;
display:block;}
#imgleft img{
width:100%; }
#imgright {	margin: 0;}
#imgright img{width:100%;}
#topo-content{height:1200px;}
#topo{
border-radius:5px;
width:90%;
padding:0 5%;
margin: 5px auto;}
.topo2 img{margin-left:-10px;}
#acces{
width:100%;
height:100%;
margin:0 auto;	}
#acces img{
width:20%;
margin:0 auto;
-webkit-box-shadow: none;  
box-shadow:none;}
#faq li ul{    margin-left:-40px;  }
#para{	height:950px;	}
#video{    width:100%;}
.video{		width:100%;    height:auto;	}
#tableau{	font-size:90%;}
#resa{  padding:10px 0;  width:100%;}
#contact{
position:relative;
margin:0px auto;
padding:5%;
width:90%;
background-color: rgba(11,29,77,0.6); 
border-radius: 5px; 
-webkit-border-radius: 5px;	}  @media (max-width: 768px) {
.floating-cta {
left: 0;
right: 0;
bottom: 0;
justify-content: space-around;
background: white;
padding: 10px;
box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
}
.cta-btn {
flex: 1;
border-radius: 10px;
height: 45px;
}
} #footercontent{
width:100%;
margin:0;
text-align:center;
height: 1200px;    display: flex;
flex-direction: column;}
#footercontent h2{font-size:200%;	padding:0;  }
#footerdiv {
float:left;
margin:0 auto;
color:#fff;
height: 300px;
width:100%;  }
#footer2{display:none;}
}
@media only screen and (max-width: 360px) {#tableau{font-size:80%;}}