body {
font-family: Ubuntu, Sans-serif;
margin: 0;
font-size: 100%;
line-height: 30px;
} body.page-id-107 .floating-cta {
display: none;
}
a { text-decoration: none; }
a:link, a:visited, a:hover, a:active { color: #fff; }
h1 {
color: #303030;
width: 100%;
font-size: 200%;
text-align: center;   
margin-top: -30px;
line-height: 40px;
}
h1 span { display: block; }
h2 {
text-align: center;
font-size: 150%;
margin: 30px 0;
color: #303030;
}
.tarif { color: #000; }
h3 {
padding: 5px;
color: rgb(91, 102, 134);
font-size: 100%;
text-align: center;
position: absolute;
background-color: #fff;
border-radius: 0 0 10px 0;
}
.titre {
text-align: center;  
position: relative;
font-size: 150%;
margin: 30px 0;
color: #303030;
}
.faq { 
padding: 0;
color: black;
font-size: 100%;
text-align: left;
position: relative;
background-color: #fff;
border-radius: 0;
}
video { 
width: 350px; 
margin: 0 auto; 
} #header { text-align: center; } #page {   
margin: 0 auto;    
position: relative;    
text-align: justify;
} #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;
}
.menuhautimg { height: 40px; } #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 { position: relative; }
.img-fond {
width: 100%;
display: block;
}
.img-dessus {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
}
.dechirure {  
position: relative;
z-index: 10;
bottom: 45px;
} .divider img { width: 100%; padding: 20px 0; } #content { min-height: 800px; }
#content a {
color: #2a548a;  
font-weight: bold;    
}
#content a:hover { color: rgba(11,29,77,0.6); }
.hero { display: none; width: 100%; } .vignette {
display: flex;
justify-content: space-around;  
width: 90%;
margin: 0 auto;
gap: 30px;
}
.vignette .texte {
flex: 2;
margin: 0;
}
.vignette .photo {
flex: 1;
min-width: 300px;
margin: 0;
}
.vignette .photo img {
width: 100%;
height: auto;
border-radius: 5px;
object-fit: cover;
}
.texte {
line-height: 30px; 
margin: 0 2%;
}
.ulvignette { margin-left: 20px; margin-bottom: 20px; line-height: 1.6; }
.ulmarge { margin-bottom: 20px; }
.encart {
width: 33%;
margin: 0 20px;
padding: 10px;
}
.encart img { width: 100%; }
.video {
width: 31%;
height: 350px;
margin: 1%;
position: relative;
font-size: large;
float: left;
}
.resatel { display: flex; }
.resatel a {
display: flex;
color: #ffffff !important;
text-decoration: none;
}
.myrezap { 
line-height: 40px;
height: 50px;
text-align: center;
padding: 5px;
color: #fff;
font-size: large;
background-color: #3aa62a;
border-radius: 5px;
}
.myrezap a { color: #fff; }
.myrezap a:visited { color: #fff; }
.tel { 
display: flex;
line-height: 40px;
height: 50px;
text-align: center;
padding: 5px;
color: #fff;
background-color: #2a5aa6;
border-radius: 5px;
}
.tel a { color: #fff; }
.tel a:visited { color: #fff; }
.plus {
width: 170px;
height: 30px;
margin: 0 auto;
line-height: 20px;
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;
}
.topo {
width: 28%;  
min-width: 200px;
}
.topo2 img { 
width: 300px;
margin: 0 auto;
display: flex;
}
.topoactivite {
flex-direction: column;
line-height: 30px;
list-style: none;
}
.toponiveau {
display: flex;
flex-direction: row;
}
.activite, .activite0, .activite1, .activite2, .activite3, .activite4 {
border-radius: 50%;
border: 1px solid #000; 
display: flex; 
margin: 7px 3px;
height: 18px;
width: 18px;
}
.activite { background: #0f1aca; }
.activite0 { background: #fff; }
.activite1 { background: gold; }
.activite2 { background: green; }
.activite3 { background: orange; }
.activite4 { background: red; }
#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%; 
border-collapse: collapse;
} .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: 700;
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 {
width: auto; 
padding: 0 25px;
background: #cc0000; 
color: white;
}
.liste-boutons {
display: flex;
flex-direction: column;
gap: 12px; 
margin: 20px 0;
}
.btn-booking {
display: block;
background-color: #008631; 
color: #ffffff !important;
text-align: center;
text-decoration: none !important;
padding: 14px 20px;
font-size: 16px;
font-weight: bold;
border-radius: 8px; 
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background 0.2s ease, transform 0.1s ease;
}
.btn-booking:hover {
background-color: #006b27;
transform: translateY(-2px);
}
.btn-booking:active { transform: translateY(1px); } .wpcf7-submit {
background: #ff6b00;
color: #fff;
border: none;
padding: 14px 28px;
font-size: 16px;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}
.wpcf7-submit:hover {
background: #e55a00;
transform: scale(1.05);
}
.wpcf7-submit:active { transform: scale(0.95); }
.wpcf7-submit:disabled { opacity: 0.6; cursor: not-allowed; } .hp-field, input[name="honeypot-field"] {
position: absolute;
left: -9999px;
} .tarif {
color: #000;
background-color: #15a409;
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;
}
#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;
border: none;
cursor: pointer;
background-color: #3d3a48; 
}
#menu-icon:hover, #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;  
}
.diapo { display: none; top: 12px; }
.hero { display: block; }
.vignette {
display: flex;
justify-content: space-around;
width: 100%;
flex-direction: column;
}
ul.ulvignette {
list-style-type: none !important;
padding-left: 0 !important;
margin: 25px 0 25px 40px !important; 
max-width: 700px !important;
}
ul.ulvignette li {
padding-left: 30px !important;
text-indent: -30px !important;
margin-bottom: 14px !important; 
}
.texte {
width: 95%;
font-size: 100%;
line-height: 30px;
text-align: justify;    
margin: 0 auto;  
}
.photo { margin: 0; }
.encart:hover { background-color: #fff; }
.encart {
font-size: 100%;
width: 90%;
height: 100%;
text-align: justify;
margin: 5%;
background-color: #fff;    
border: none;
padding: 0;
}
.encart img { width: 100%; margin: 0 auto; }
.encart2 { margin: 0 20px; }
.encart2 img { width: 100%; }
.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%; height: auto; }
.plus {
width: 50%;
margin: 0 auto;
text-align: center;
padding: 1%;
background-color: #13681c;
border-radius: 5px;
font-size: 90%;
} div[style*="text-align: center"] a.tarif {
color: #ffffff !important;
}
.plus a:hover { color: #000; }
.resatel { display: none; }
.myrezap, .tel { width: 90%; }
.topo-content { height: 1200px; }
.topo {
border-radius: 5px;
width: 90%;
margin: 0 auto;
}
.acces {
width: 100%;
height: 100%;
margin: 0 auto;    
}
.para { height: 950px; }
.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;    
} .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; } table, .tableau, #tableau {
font-size: 90%;
display: table;
width: 100%;
table-layout: fixed;
word-wrap: break-word;
}
} @media only screen and (max-width: 360px) {
table, .tableau, #tableau {
font-size: 82%;
}
table th, table td {
padding: 4px 2px;
}
}