/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* RESET */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html { position:relative; display:block; }

body { position:relative; display:block; width:100%; margin:0; padding:0; font-family:Rubik, sans-serif; font-size:0.8rem; font-weight:300; line-height:1.4; background-color:rgba(255,255,255,1); color:rgba(22,22,22,1); text-align:left; overflow-x:hidden; overflow-y:scroll; }
body.noscrollbar { overflow-y:hidden; }

header, main, section, article, aside, footer { position:relative; display:block; width:100%; margin:0; padding:0; overflow-x:hidden; }

h1, h2, h3, h4, h5, h6 { position:relative; margin:0; padding:0; font-family:Koho, sans-serif; font-size:1.5rem; font-weight:700; color:inherit; }

div { position:relative; margin:0; padding:0; }

a, a:link, a:active, a:visited, a:focus { font-size:inherit; color:inherit; text-decoration:inherit; outline-color:transparent; }
body.desktop a:hover { color:inherit; text-decoration:underline; outline-color:transparent; }

img { margin:0; padding:0; border:0; }
svg { position:relative; display:inline-block; vertical-align:top; height:100%; width:100%; margin:0; padding:0; }

p { font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:1em 0 0 0; }
p:first-of-type, h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { padding-top:0; }
span { position:relative; display:inline; font-size:inherit; margin:0; padding:0; }

b, strong, i, span { word-wrap:break-word; }

ul { position:relative; margin:0; padding:0; }
li { position:relative; font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:0; }
.fromrte ul { margin-left:1em; }

.wrap { display:block; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%; }
.cover { position:absolute; top:50%; left:50%; width:auto; height:auto; transform:translate(-50%, -50%); display:block; margin:0; padding:0; background-color:transparent; }
.cover.top { top:0; transform:translate(-50%,0); }
.cover.bottom { top:100%; transform:translate(-50%,-100%); }
.cover.left { left:0; transform:translate(0,-50%); }
.cover.topleft { left:0; top:0; transform:translate(0,0); }
.cover.bottomleft { left:0; top:100%; transform:translate(0,-100%); }
.cover.right { left:100%; transform:translate(-100%,-50%); }
.cover.topright { left:100%; top:0; transform:translate(-100%,0); }
.cover.bottomright { left:100%; top:100%; transform:translate(-100%,-100%); }
.cover > img, .cover > video, .cover > div, .cover > span { position:absolute; display:inline-block; width:100%; height:100%; left:0; top:0; }

.clear { clear:both; }
.blochref { cursor:pointer; }

pre, code { position:relative; font-size:13px; text-align:left; color:#c7254e; background-color: #f9f2f4; border-radius:0.5em; padding:0.8em; display:block; margin:0 0 1em 0; border:0; }

.ajaxloader { z-index:999999; position:fixed; left:0; top:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.4); }
.ajaxloader svg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:8%; height:auto; color:rgba(0,0,0,1); }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/*    Mise en forme spécifique des formulaires   */
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

input, textarea, select { position:relative; display:inline-block; vertical-align:top; width:100%; font-size:inherit; display:inline-block; background-color:rgba(221,221,221,1); color:rgba(22,22,22,1); line-height:2; height:2em; vertical-align:middle; margin:0; padding:0.1em 0.3em 0 0.3em; width:100%; border:0; border-radius:0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; }
textarea { height:6em; }
select { background-image:url(https://www.guides-cauterets.com/_chartes_/guides/ressources/images/contribution/dropdown.svg) !important; background-size:1.5em; background-position: right center !important; background-repeat: no-repeat !important; padding-right:30px !important; }
select::-ms-expand { display: none; }
select option { color:rgba(22,22,22,1); }
select.placeholder { color:rgba(54,54,54,0.55) !important; }

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* Mise en forme des boutons radio et des checkboxes */
input[type="radio"] + span:before, input[type="checkbox"] + span:before, input[type="radio"] + span:after, input[type="checkbox"] + span:after {
	content:'' !important; position:absolute !important;
	left:0 !important; top:0 !important; /* on décale la case de 10% de sa taille pour bien la centrer en hauteur */
	width:1em !important; height:1em !important; /* on définit la taille de référence de la case à la même taille que la font du span */
	transform-origin: 50% 50% !important; /* pour être certain du point d'origine du scale pour la case et la coche */
	transition:all .2s !important; /* on prévoit une animation */
}
input[type="radio"], input[type="checkbox"] { position:absolute !important; left:0 !important; top:1em !important; opacity:0 !important; transform: scale(0) !important; height:1em !important; width:1em !important; } /* On masque le champ input (opacité 0) */
input[type="radio"] + span, input[type="checkbox"] + span { position:relative !important; cursor:pointer !important; padding-top:0 !important; padding-bottom:0 !important; padding-left:1.6em !important; } /* on prépare le label (balise span située à côté du champ input) */
input[type="radio"] + span:before, input[type="checkbox"] + span:before { border:1px solid rgba(221,221,221,1) !important; background-color:transparent !important; } /* Aspect général de la case */
input[type="radio"] + span:after, input[type="checkbox"] + span:after { border:1px solid transparent !important; background-color:rgba(221,221,221,1) !important; } /* Aspect général de la coche */
input[type="checkbox"] + span:before, input[type="checkbox"] + span:after { border-radius: 5% !important; } /* angles arrondis */
input[type="radio"] + span:before, input[type="radio"] + span:after { border-radius: 50% !important; } /* cases circulaires */
input[type="radio"]:not(:checked) + span:after, input[type="checkbox"]:not(:checked) + span:after { opacity: 0 !important; transform: scale(0) !important; } /* Aspect si "pas cochée" */
input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after { opacity: 1 !important; transform: scale(0.5) !important; } /* Aspect si "cochée" */

label { position:relative; display:inline-block; vertical-align:top; font-weight:300; }

button, a.button { position:relative; display:inline-block; vertical-align:top; font-family:Rubik, sans-serif; font-size:inherit; font-weight:300; text-align:center; background-color:rgba(22,22,22,1); border:1px solid rgba(22,22,22,1); color:rgba(255,255,255,1); margin:0; padding:0.5em 1em; width:auto; outline:0; }
body.desktop button:hover, body.desktop a.button:hover { color:rgba(22,22,22,1); background-color:rgba(110,177,115,1); border-color:rgba(22,22,22,1); text-decoration:none; outline:0; }


html, body, main { background-color:rgba(255,255,255,1); }

ul, li { list-style-type:none; }
ul:not(.nobull) > li { position:relative; list-style-type:none; padding-left:0.7em; }
ul:not(.nobull) > li:before { content:''; position:absolute; left:0.1em; top:0.6em; width:0.2em; height:0.2em; background-color:rgba(22,22,22,1); border-radius:50%; }

h1,h2,h3,h4,h5,h6 { line-height:1.4; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* HEADER */

header { z-index:1000; font-size:1rem; position:fixed; left:0; top:0; right:0; height:calc(1.7 * (1.5em + 0.7em + 1.7em)); background-color:rgba(255,255,255,1); color:rgba(22,22,22,1); overflow:hidden; transition:height 300ms linear 0ms; }

#logo { z-index:1031; font-size:1.7em; line-height:1.3; position:relative; display:inline-block; vertical-align:top; text-align:left; margin:1.5em 0 0.7em 3em; padding:0; }
#logo > a { position:relative; font-size:1em; line-height:1; font-weight:400; vertical-align:top; text-transform:uppercase; letter-spacing:0.015rem; background: -webkit-linear-gradient(53deg, rgba(129,182,133,1) 15%, rgba(66,140,176,1) 85%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; width:auto; display:inline-block; padding:0; color:rgba(129,182,133,1);  padding-right:0.1em; transform:scaleY(1.3); transform-origin:top left; }
#logo > a, body.desktop #logo > a:hover { text-decoration:none; }
#logo > a > b { font-weight:700; }
#logo > a > i { font-style:normal; }
#logo > span { font-size:0.7em; position:relative; display:inline-block; font-weight:300; vertical-align:top; padding-top:0.5em; padding-left:2em; text-transform:uppercase; }

#togglemenu { display:none; }
#showhidemenu { z-index:1032; cursor:pointer; position:absolute; display:inline-block; top:2.3em; left:calc(100vw - 2.2em - 3em); width:2.2em; height:2.2em; margin:0; padding:0; background-color:transparent; border:0; transition: top 300ms linear 0ms; }
#showhidemenu > svg { position:absolute; left:0; top:0; width:100%; height:100%; }
#showhidemenu > svg line { stroke:rgba(22,22,22,1); transition:transform 300ms linear 0ms; stroke-width:3; stroke-linecap:round; transform-origin: 40% 50%; }

#showhidemenu > svg line:nth-of-type(1) { transform: translate(0,-20%) scaleX(1) rotate(0deg); }
#showhidemenu > svg line:nth-of-type(2) { transform: translate(-18.75%,0) scaleX(0.625); }
#showhidemenu > svg line:nth-of-type(3) { transform: translate(12.5%,20%) scaleX(1.25) rotate(0deg); }

#togglemenu:checked ~ #showhidemenu > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(45deg); }
#togglemenu:checked ~ #showhidemenu > svg line:nth-of-type(2) { transform: translate(-40%,0) scaleX(0); }
#togglemenu:checked ~ #showhidemenu > svg line:nth-of-type(3) { transform: translate(0,0) scaleX(1) rotate(-45deg); }


header nav { z-index:1020; position:fixed; display:block; background-color:#ccc; width:100%; max-height:0; left:0; top:calc(1.7 * (1.5em + 0.7em + 1.7em)); bottom:0; margin:0; padding:0; text-align:right; overflow-y:hidden; transition: max-height 300ms linear 0ms; }
#togglemenu:checked ~ nav { max-height:100%; }

body.showmenu { height:0; overflow-y:hidden; }
body.showmenu header { height:100%; }
body.windows.showmenu, body.windows.showmenu header nav { width:calc(100% - 16px); }

ul#menu { z-index:1023; font-size:1.4em; position:absolute; display:block; text-align:left; width:auto; left:0; top:0; bottom:0; margin:0; padding:0; opacity:0; transition:opacity 300ms linear 0ms; overflow:hidden; }
#togglemenu:checked ~ nav ul#menu { opacity:1; padding-bottom:3em; }
#togglemenu:checked ~ nav ul#menu.show { overflow-y:hidden; }


ul#menu > li { position:relative; display:block; text-align:left; margin:0.8em 0 0 25vw; padding:1.5vh 0; width:25vw; transition:width 300ms linear 100ms; }
ul#menu > li:nth-of-type(1) { margin-top:4em; }
ul#menu.show > li.arbo.hover { width:calc(25vw + 18rem); transition:width 300ms linear 0ms; }

ul#menu > li > ul { z-index:1024; position:absolute; display:inline-block; vertical-align:top; margin:0; padding:0; top:0; left:0; right:0; height:auto; max-height:0; overflow:hidden; transition:max-height 100ms linear 100ms, left 0ms linear 300ms; }
ul#menu.show > li.arbo.hover > ul { z-index:1026; left:25vw; top:-100vh; padding-top:100vh; padding-bottom:100vh; max-height:calc(100vh - 1.7 * (1.5em + 0.7em + 1.7em)); transition:max-height 100ms linear 0ms, left 0ms linear 0ms; }

ul#menu > li > ul > li { position:relative; display:block; padding:1.5vh 1.8rem 0 1.8rem; overflow:hidden; }
ul#menu > li > ul > li button { position:relative; display:inline-block; left:-100%; opacity:0; transition:left 100ms linear 0ms, opacity 100ms linear 0ms; white-space:nowrap; }
ul#menu.show > li.arbo.hover > ul > li button { z-index:1027; left:0; opacity:1; transition:left 200ms linear 300ms, opacity 200ms linear 300ms; }

ul#menu li > button { z-index:1025; position:relative; display:inline-block; vertical-align:top; border:0; background-color:transparent; color:rgba(255,255,255,1); margin:0; padding:0; text-transform:uppercase; }
ul#menu li.current > button { color:rgba(118,182,118,1); }
ul#menu > li.arbo > button:after { content:''; position:absolute; top:0; right:1em; height:1.25em; width:1px; background-color:transparent; transition:background-color 100ms linear 0ms; }
ul#menu > li.arbo.hover > button:after { background-color:rgba(118,182,118,1); transition:background-color 100ms linear 100ms; }

ul#menu > li > button { font-size:1em; width:25vw; font-weight:500; padding-right:3vw; text-align:right; }
ul#menu > li > ul > li > button { font-size:0.9em; width:auto; font-weight:300; padding-left:1em; text-align:left; }



/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* MAIN */
main { font-size:1rem; margin:0; padding:0; margin-top:calc(1.7 * (1.5em + 0.7em + 1.7em)); min-height:calc(100vh - 1.7 * (1.5em + 0.7em + 1.7em) - (10rem)); display:block; position:relative; width:100%; overflow-x:hidden; transition:margin 300ms linear 0ms; }
.scroll main { }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* ACCUEIL */

#main-accueil { position:relative; margin:0; padding:0; display:block; }

/* --- ACCUEIL - VIDEO --- */

#accueil-video { position:relative; margin:0; padding:0; display:block; width:100%; height:0; padding-bottom:37%; text-align:center; background-color:rgba(0,0,0,1); overflow:hidden; }
#accueil-video > div { z-index:1; }
#accueil-video.trame:after { z-index:2; content:''; position:absolute; left:0; right:0; top:0; bottom:0; background: transparent url('https://www.guides-cauterets.com/_chartes_/guides/ressources/images/trame-3.png') top left repeat; }
#accueil-video .slogan { font-family:Rubik, sans-serif; z-index:3; font-size:3.2rem; color:#fff; position:absolute; display:block; width:90%; height:auto; left:50%; top:50%; transform:translate(-50%, -50%); animation: 1s ease 10s 1 normal disappear; animation-fill-mode: forwards; }

#accueil-video .slogan > span { opacity:0; font-weight:300;}
#accueil-video .slogan > span:nth-of-type(1) { animation: 2s ease 1s 1 normal appear; animation-fill-mode: forwards; }
#accueil-video .slogan > span:nth-of-type(2) { animation: 2s ease 3s 1 normal appear; animation-fill-mode: forwards; }
#accueil-video .slogan > span b { font-weight:500; }
#accueil-video .slogan > span i { font-weight:300; }

@keyframes appear {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes disappear {
  from { opacity:1; }
  to   { opacity:0; }
}

/* --- ACCUEIL - GUIDES --- */
div.logos { position:relative; display:block; margin:0; padding:0; height:13rem; }
div.logos > svg { position:relative; display:inline-block; width:13rem; height:auto; margin:0 0 0 5rem; padding:0; top:50%; transform:translateY(-50%); vertical-align:top; }
div.logos > svg:first-of-type { margin-left:0; }

#accueil-guides { z-index:1; font-size:0; position:relative; margin:0; padding:0; display:block; text-align:left; padding:4rem 0 4rem 50%; background-color:rgba(58,58,58,1); color:rgba(255,255,255,1); }

#accueil-guides div.logos { margin-bottom:1rem; }

#accueil-guides h1 { font-size:1.9rem; font-weight:700; line-height:1.2; margin:0 7rem 2.2rem 7rem; position:relative; left:0; top:0; opacity:1; background: -webkit-linear-gradient(53deg, rgba(129,182,133,1) 15%, rgba(66,140,176,1) 85%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; width:auto; display:inline-block; padding:0; color:rgba(129,182,133,1);  }
#accueil-guides h1 b, #accueil-guides h1 strong { font-weight:700; }
#accueil-guides h2 { font-size:1.2rem; font-weight:700; line-height:1.2; margin:1rem 7rem 1rem 7rem; position:relative; }
#accueil-guides h2 b, #accueil-guides h2 strong { font-weight:700; }
#accueil-guides div.intro { position:absolute; left:0; top:0; width:50%; height:100%; background-color:rgba(240,240,240,1); color:rgba(24,29,66,1); text-align:center; font-weight:500; }
#accueil-guides div.intro > div { position:absolute; width:100%; left:0; top:50%; transform:translateY(-50%); margin:0; padding:0; }
#accueil-guides div.intro p { font-size:0.8rem; text-align:center; margin:0 auto; padding:0 7rem 1em 7rem; max-width:50rem; }
#accueil-guides div.intro p:last-of-type { padding-bottom:0; }
#accueil-guides div.texte p { font-size:0.8rem; text-align:left; margin:0 7rem 0 7rem; max-width:40rem; }
#accueil-guides div.texte p:last-of-type { padding-bottom:0; }


/* --- ACCUEIL - ACTIVITES --- */
#accueil-bloc-activitesactus { z-index:2; font-size:0; position:relative; margin:0; padding:2rem 0; display:block; text-align:center; }
#accueil-bloc-activitesactus div.logos { display:none; }

.accueil-activites > h2 { display:inline-block; width:auto; vertical-align:top; font-size:2.6rem; font-weight:400; margin:1.2em auto 1em auto; padding-top:0.1em; padding-left:2em; text-transform:uppercase; }
.accueil-activites > h2 svg { position:absolute; left:0; top:0; width:1.6em; height:1.6em; }
.accueil-activites > h2.ete { color:rgba(73,73,73,1); }
.accueil-activites > h2.ete svg circle { stroke:rgba(73,73,73,1); }
.accueil-activites > h2.ete svg path { stroke:rgba(73,73,73,1); }
.accueil-activites > h2.hiver { color:rgba(73,73,73,1); }
.accueil-activites > h2.hiver svg circle { stroke:rgba(73,73,73,1); }
.accueil-activites > h2.hiver svg path { stroke:rgba(73,73,73,1); }

.accueil-activites ul { font-size:0; position:relative; display:block; margin:0; padding:0; }
.accueil-activites ul li { height:0; margin:0; padding:0; position:relative; display:inline-block; background-color:rgba(73,73,73,1); overflow:hidden; }
.accueil-activites ul li { width:100%; padding-bottom:calc( 100% * 2/3); }
.accueil-activites ul li:nth-of-type(2n) { background-color:rgba(73,73,73,1); }
.accueil-activites ul li h2, .accueil-activites ul li h3 { z-index:23; font-size:3rem; color:rgba(255,255,255,1); text-shadow: 1px 1px 2px #666; position:absolute; width:100%; left:50%; top:50%; transform:translate(-50%, -50%); margin:0; padding:0 0.5em; text-align:center; text-transform:uppercase; }
.accueil-activites ul li img { z-index:21; position:absolute; display:block; left:50%; top:50%; transform:translate(-50%,-50%) scale(1.01); border:0; margin:0; padding:0; width:100%; height:100%; }
.accueil-activites ul li a { color:rgba(255,255,255,1); }
body.desktop .accueil-activites a:hover { color:rgba(255,255,255,1); text-decoration:none; }


/* ACTUALITES */
#accueil-actualites { position:relative; width:90%; margin:0 auto; padding:2em 0; text-align:center; vertical-align:top; }
#accueil-actualites h2 { display:inline-block; width:auto; vertical-align:top; font-size:2.6rem; font-weight:400; margin:1em auto 1em auto; padding-top:0.1em; text-transform:uppercase; }

#accueil-actualites > ul { position:relative; display:flex; flex-wrap:wrap; gap:2%; margin:0; padding:0; font-size:0; }
#accueil-actualites > ul > li { position:relative; display:inline-block; vertical-align:top; margin:0; padding:0; border:1px solid rgba(197,197,197,1); list-style-type:none; overflow:hidden; }
#accueil-actualites > ul > li > div.visuel, #accueil-actualites > ul > li > div.video { position:relative; margin:0; padding:0; border:0; outline:0; width:100%; height:0; padding-bottom:100%; background-position:center; background-size:cover; background-color:rgba(0,0,0,1); overflow:hidden; }
#accueil-actualites > ul > li > div.video iframe { z-index:99; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:0; height:100%; width:100%; }
#accueil-actualites > ul > li > div.video.portrait iframe { height:100%; width:auto; }
#accueil-actualites > ul > li > div.video.paysage iframe { height:auto; width:100%; }

#accueil-actualites > ul > li > div.post { position:relative; display:block; font-size:1em; color:rgba(22,22,22,1); padding:1em 2em 5em 2em; }
#accueil-actualites > ul > li h2 { font-family:Rubik, sans-serif; padding-top:1em; padding-bottom:1em; font-size:1.2em; color:rgba(22,22,22,1); text-transform:uppercase; font-weight:400; }
#accueil-actualites > ul > li h3 { font-family:Rubik, sans-serif; padding-top:1em; padding-bottom:1em; font-size:1em; color:rgba(22,22,22,1); text-transform:uppercase; font-weight:400; }
#accueil-actualites > ul > li h4 { font-family:Rubik, sans-serif; padding-top:1em; padding-bottom:1em; font-size:1em; color:rgba(22,22,22,1); text-transform:uppercase; font-weight:300; }
#accueil-actualites > ul > li h5 { font-family:Rubik, sans-serif; padding-top:1em; padding-bottom:1em; font-size:1em; color:rgba(22,22,22,1); text-transform:uppercase; font-weight:300; }

#accueil-actualites > ul > li > div.pubdate { position:absolute; left:2em; bottom:1em; color:rgba(22,22,22,1); }
#accueil-actualites > ul > li:before { content:''; position:absolute; bottom:4em; left:2em; right:2em; height:0.5px; background-color:rgba(197,197,197,1); }

#accueil-actualites > ul > li .reseau { position:absolute; right:2em; bottom:1em; width:2em; height:2em; }
#accueil-actualites > ul > li .reseau svg { position:absolute; left:0; top:0; width:100%; height:100%; }

#accueil-actualites .fromrte li:before { background-color:rgba(66,140,176,1); }

/* VALEURS */

#accueil-valeurs  { z-index:2; margin:0; padding:4em 5em; background-color:rgba(236,236,236,1); text-align:center; overflow:visible; background-repeat:no-repeat; background-position:top center; background-size:cover; }
#accueil-valeurs h2 { color:rgba(255,255,255,1); text-shadow:2px 2px 4px rgba(0, 0, 0, 0.5);; font-size:2.6rem; font-weight:400; text-transform:uppercase; max-width:15em; margin:0 auto 1em auto; display:inline-block; }
#accueil-valeurs ul { position:relative; display:flex; flex-wrap:wrap; gap:4%; margin:0; padding:0; }
#accueil-valeurs ul li { margin:0; padding:3em 2em; position:relative; display:inline-block; vertical-align:top; text-align:center; background-color:rgba(255,255,255,1); overflow:hidden; }
#accueil-valeurs ul li img { display:block; margin:0 auto; padding:0; height:3em; width:auto; margin-bottom:1em; }
#accueil-valeurs ul li > span { color:rgba(36,169,236,1); }
#accueil-valeurs ul li h3 { color:rgba(36,169,236,1); font-size:2em; font-weight:600; text-transform:uppercase; padding:1em 0 1em 0; margin:0; display:block; }
#accueil-valeurs ul li div p { text-align:center; }

/* AVIS */

#accueil-avis { margin:2em auto; width:88%; text-align:center; min-height:20em; } 
#accueil-avis > h2 { display:inline-block; width:auto; vertical-align:top; font-size:2.6rem; font-weight:400; margin:0 auto 0 auto; padding-top:0.1em; text-transform:uppercase; }

/* ---------------------------------------------------------------------------------------------------------------- */
/* --- PAGE INTERIEURE --- */

section > div.contenu { min-height:calc(100vh - 1.7 * (1.5em + 0.7em + 1.7em) - (10rem) - (18% + 3rem)); background-color:rgba(255,255,255,1); font-size:1rem; display:block; position:relative; padding:0.1rem 0; }
section > div.contenu > div { font-size:1rem; display:block; position:relative; padding:0; margin:0; }

section > div.bandeau { font-size:1rem; position:fixed; left:0; right:0; top:calc(1.7 * (1.5em + 0.7em + 1.7em)); background-color:rgba(47,47,47,1); height:0; padding-bottom:calc(18% + 3px); }
section > div.bandeau img { position:absolute; left:50%; top:0; width:100%; height:auto; transform:translateX(-50%); }
section > div.bandeau.left img { left:0; transform:none; }
section > div.bandeau.right img { left:100%; transform:translateX(-100%); }

section > div.titre { background-color:transparent; position:absolute; left:0; right:0; top:0; height:0; padding-bottom:18%; }
section.activite h1, section.contact h1 { position:absolute; text-transform:uppercase; font-size:3em; color:rgba(255,255,255,1); font-weight:500; margin:0 0 1em 0; padding-left:2.5em; padding-top:0.3em; left:15%; top:60%; }
section h1 i { font-style:normal; font-weight:300; text-transform:none; font-size:0.7em; }
section h1 svg { position:absolute; left:0; top:0; width:1.8em; height:1.8em; }
section h1 svg circle { stroke:rgba(255,255,255,1); }
section h1 svg path { stroke:rgba(255,255,255,1); }

section > nav { z-index:900; display:block; overflow-y:visible; position:relative; font-size:1rem; width:100%; margin:0; padding:0; padding-top:18%; }
section > nav:after { content:''; display:block; position:absolute; top:0; height:100%; width:18%; right:10rem; background-image:url('https://www.guides-cauterets.com/_chartes_/guides/ressources/images/logos/filigrane.svg'); background-repeat:no-repeat; background-size:contain; background-position:50% 50%; }
section > nav > div { font-size:1rem; background-color:rgba(47,47,47,1); color:rgba(255,255,255,1); }
section > nav a { position:absolute; display:inline-block; vertical-align:top; top:50%; transform:translateY(-50%); text-transform:uppercase; }
body.desktop section > nav a:hover { color:rgba(36,169,236,1); text-decoration:none; }
section > nav a:nth-of-type(1) { left:2em; padding-left:2em; }
section > nav a:nth-of-type(2) { right:2em; padding-right:2em; }
section > nav a svg { position:absolute; top:50%; transform:translateY(-50%); width:1em; height:1em; stroke-width:0.5em; stroke:rgba(255,255,255,1); }
body.desktop section > nav a:hover svg { color:rgba(36,169,236,1); }
section > nav a:nth-of-type(1) svg { left:0; transform:translateY(-50%) rotate(180deg); }
section > nav a:nth-of-type(2) svg { right:0; transform:translateY(-50%) rotate(0deg); }

section.activite h1, section.contact h1, section > nav:after { opacity:1; transition:opacity 1000ms ease 0ms; }
.scroll section.activite h1, .scroll section.contact h1, .scroll section > nav:after { opacity:0; }

/* --- ACTIVITES --- */
section > nav > div { height:3rem; }
section.activite.navfix > nav { position:fixed; top:calc(1.7 * (1.5em + 0.7em + 1.7em) - 3rem); padding-top:0; transform:translateY(3rem); transition:transform 300ms ease; }
section.activite.navfix > nav:after { display:none; }
section.activite.navfix > .contenu { padding-top:calc(18% + 3rem); }

section.activite .presentation { width:70%; margin:3rem auto; }
section.activite .presentation h2 { color:rgba(22,22,22,1); font-weight:500; margin:0 0 1em 0; padding-top:0.3em; }
section.activite .presentation h2 svg { position:absolute; left:0; top:0; width:1.8em; height:1.8em; }
section.activite .presentation h2 svg circle { fill:rgba(36,169,236,1); stroke:rgba(36,169,236,1); }
section.activite .presentation h2 svg path { stroke:rgba(255,255,255,1); }

section.activite strong { font-weight:400; }

ul.tab { font-size:0; margin:2rem 0; padding:0.5rem 0; padding-right:calc(19rem + 0.5rem); min-height:5.5rem; }
ul.tab:before, ul.tab:after { content:''; position:absolute; left:0; width:calc(100% - (19rem + 0.5rem)); height:0; border:0; border-bottom:1px solid rgba(58,58,58,1); }
ul.tab:before { top:0; }
ul.tab:after { bottom:0; }
ul.tab li { font-size:1rem; position:relative; display:inline-block; vertical-align:top; width:50%; margin:0; padding:0.5em 0.5em 0.5em 2.3em; }
ul.tab li:nth-child(odd) { margin-right:0; }
ul.tab li.tarif { position:absolute; right:0; bottom:0; width:19rem; height:100%; background-color:rgba(58,58,58,1); color:rgba(255,255,255,1); padding:0 0.5em 0 2em; border-radius: 0 6px 6px 0; }
ul.tab li.tarif span { line-height:1; }
ul.tab span.prix { font-size:2em; color:rgba(36,169,236,1); }
ul.tab span.prix > span { font-size:0.8em; }
ul.tab li.tarif > div { position:relative; display:block; height:auto; top:50%; transform:translateY(-50%); }
ul.tab li span { text-transform:uppercase; font-weight:400; }
ul.tab li.tarif span { text-transform:none; }
ul.tab li.tarif > div > span:last-of-type { text-transform:none; }
ul.tab li:not(.tarif):before { content:''; overflow:hidden; position:absolute; left:0; top:0.2em; width:1.8em; height:1.8em;  background-size:contain; background-position:50% 50%; background-repeat:no-repeat; filter:invert(48%) sepia(88%) saturate(416%) hue-rotate(156deg) brightness(102%) contrast(86%); }
ul.tab li.duree:before { background-image:url('https://www.guides-cauterets.com/_chartes_/guides/ressources/images/pictos/duree.svg'); }
ul.tab li.age:before { background-image:url('https://www.guides-cauterets.com/_chartes_/guides/ressources/images/pictos/age.svg'); }
ul.tab li.saison:before { background-image:url('https://www.guides-cauterets.com/_chartes_/guides/ressources/images/pictos/saison.svg'); }
ul.tab li.encadrement:before { background-image:url('https://www.guides-cauterets.com/_chartes_/guides/ressources/images/pictos/encadrement.svg'); }
ul.tab li.planning:before { background-image:url('https://www.guides-cauterets.com/_chartes_/guides/ressources/images/pictos/planning.svg'); }

.presentation ul.tab li.tarif > div > span:first-of-type { display:block; line-height:1.6; }

section.activite div.savoirplus { width:70%; margin:0 auto; }
section.activite div.savoirplus:first-of-type { margin-top:3rem; }
section.activite div.savoirplus:last-of-type { margin-bottom:3rem; }
section.activite .savoirplus h2.accordion { display:inline-block; position:relative; font-size:1em; font-weight:400; background-color:rgba(36,169,236,1); color:rgba(255,255,255,1); text-transform:uppercase; text-align:center; border:1px solid rgba(36,169,236,1); width:auto; margin:0; padding:0.5em 4em 0.5em 2em; transition:background-color 200ms ease 0ms, color 200ms ease 0ms; min-width:20em; border-radius:6px; }
body.desktop section.activite .savoirplus h2.accordion:hover { background-color:rgba(255,255,255,1); color:rgba(36,169,236,1); cursor:pointer; }
section.activite .savoirplus h2.accordion > svg { position:absolute; display:block; width:1em; height:1em; stroke-width:0.5em; stroke:rgba(255,255,255,1); right:2em; top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:center center; transition:stroke 200ms ease 0ms; }
body.desktop section.activite .savoirplus h2.accordion:hover > svg { stroke:rgba(36,169,236,1);  }
section.activite .savoirplus.open h2.accordion > svg { transform:translateY(-50%) rotate(-90deg); }
 
section.activite .savoirplus > div { font-size:0; margin:1rem 0 2rem 0; padding:0; width:100%; height:auto; max-height:0; overflow:hidden; transition:max-height 500ms ease 0ms; }
section.activite .savoirplus.open > div { max-height:100rem; }
section.activite .savoirplus > div > div { font-size:1rem; display:inline-block; width:50%; vertical-align:top; margin:0; padding:0; }
section.activite .savoirplus > div > div:nth-of-type(1) { padding-right:1em; }
section.activite .savoirplus > div > div:nth-of-type(2) { padding-left:1em; }
section.activite .savoirplus h3 { font-weight:500; text-transform:none; margin:1em 0; padding-top:0.3em; }
section.activite .savoirplus h3 svg { position:absolute; left:0; top:0; width:1.8em; height:1.8em; }
section.activite .savoirplus h3 svg circle { fill:rgba(36,169,236,1); stroke:rgba(36,169,236,1); }
section.activite .savoirplus h3 svg path { stroke:rgba(255,255,255,1); }

section.activite div.programme { width:100%; margin:0 auto; margin-top:3rem; }
section.activite .programme h3.accordion { display:inline-block; position:relative; font-size:1em; font-weight:400; background-color:rgba(36,169,236,1); color:rgba(255,255,255,1); text-transform:uppercase; text-align:center; border:1px solid rgba(36,169,236,1); width:auto; margin:0; padding:0.5em 4em 0.5em 2em; transition:background-color 200ms ease 0ms, color 200ms ease 0ms; min-width:20em; border-radius:6px; }
body.desktop section.activite .programme h3.accordion:hover { background-color:rgba(255,255,255,1); color:rgba(36,169,236,1); cursor:pointer; }
section.activite .programme h3.accordion > svg { position:absolute; display:block; width:1em; height:1em; stroke-width:0.5em; stroke:rgba(255,255,255,1); right:2em; top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:center center; transition:stroke 200ms ease 0ms; }
body.desktop section.activite .programme h3.accordion:hover > svg { stroke:rgba(36,169,236,1);  }
section.activite .programme.open h3.accordion > svg { transform:translateY(-50%) rotate(-90deg); }
 
section.activite .programme > div { font-size:0; margin:1rem 0 2rem 0; padding:0; width:100%; height:auto; max-height:0; overflow:hidden; transition:max-height 500ms ease 0ms; }
section.activite .programme.open > div { max-height:100rem; }
section.activite .programme > div > div { font-size:1rem; display:inline-block; width:100%; vertical-align:top; margin:0; padding:0; }


aside.autrepage { font-size:1rem; width:100%; margin:0 auto; padding:1rem 15%; background-color:rgba(58,58,58,1); color:rgba(255,255,255,1); }
aside.autrepage h2 { display:inline-block; vertical-align:baseline; font-size:1.3em; padding-left:2.5em; padding-top:0.25em; padding-bottom:0.25em; font-weight:500; }
aside.autrepage h2 svg { position:absolute; left:0; top:0; width:1.8em; height:1.8em; }
aside.autrepage h2 svg circle { stroke:rgba(255,255,255,1); }
aside.autrepage h2 svg path { stroke:rgba(255,255,255,1); }
aside.autrepage span { display:inline-block; vertical-align:baseline; font-size:1em; }
aside.autrepage span:before { content:'-'; position:relative; display:inline-block; vertical-align:baseline; padding:0 0.3em 0 0.2em; }
aside.autrepage button { font-size:1.1rem; position:absolute; right:15%; display:inline-block; vertical-align:baseline; font-weight:500; background-color:rgba(114,185,129,1); color:rgba(255,255,255,1); text-transform:uppercase; text-align:center; border:0; width:auto; padding:0.5em 2em; border-radius:6px; margin-left:1em; }
body.desktop aside.autrepage button:hover { background-color:rgba(110,177,115,1); color:rgba(255,255,255,1); }


ul.encarts { font-size:0; display:block; position:relative; width:94%; margin:3rem auto; padding:0; }
ul.encarts > li { font-size:1rem; display:inline-block; position:relative; vertical-align:top; margin:0 1rem 2rem 1rem; padding:0; background-color:rgba(236,236,236,1); border-radius:6px; overflow:hidden; }

ul.encarts div.entete { font-size:1.6em; background-color:rgba(58,58,58,1); }
ul.encarts h2 { text-transform:uppercase; text-align:center; font-size:1em; font-weight:600; margin-bottom:0; line-height:1; color:rgba(255,255,255,1); padding:0.75em 2rem; }
ul.encarts.nb0 h2 { text-align:left; padding:0.75em 4rem; }
ul.encarts .baseline { text-align:center; text-transform:uppercase; color:rgba(255,255,255,1); font-size:0.7em; font-weight:300; margin-bottom:0; padding-bottom:0.75em; line-height:1; }

ul.encarts div.detail { padding:2rem; }
ul.encarts.nb0 div.detail { padding:2rem 4rem; }
ul.encarts.nb2 div.detail { padding:2rem 3rem; }

ul.encarts div.intro > h3 { font-size:1.2em; font-weight:400; margin-top:2em; padding-top:0.15em; padding-bottom:0.5em; padding-left:2.5em; }
ul.encarts div.intro > h3 svg { position:absolute; left:0; top:0; width:1.8em; height:1.8em; }
ul.encarts div.intro > h3 svg circle { stroke:rgba(22,22,22,1); }
ul.encarts div.intro > h3 svg path { stroke:rgba(22,22,22,1); }
ul.encarts div.intro > h3 + p { padding-left:calc(1.2 * 2.5em); }
ul.encarts div.intro > h3 + div.fromrte { padding-left:calc(1.2 * 2.5em); margin-bottom:2em; }
ul.encarts div.intro > h3 + div.fromrte > p:last-of-type { padding-bottom:0; }

ul.encarts button { font-size:1.1em; font-weight:400; background-color:rgba(114,185,129,1); color:rgba(255,255,255,1); text-transform:uppercase; text-align:center; border:0; width:100%; padding:1em 0.5em; margin-top:2rem; border-radius:6px; }
ul.encarts > li > div.visuel { display:block; position:relative; margin:0; padding:0; width:100%; height:0; overflow:hidden; }
body.desktop ul.encarts button:hover { background-color:rgba(110,177,115,1); color:rgba(255,255,255,1); }

ul.encarts > li { width:calc((100% / 1) - 2rem); }
ul.encarts.nb2 > li  { width:calc((100% / 2) - 2rem); }
ul.encarts.nb3 > li { width:calc((100% / 3) - 2rem); }
ul.encarts > li > div.visuel { padding-bottom:20%; }
ul.encarts.nb2 > li > div.visuel { padding-bottom:60%; }
ul.encarts.nb3 > li > div.visuel { padding-bottom:100%; }


#page-escalade ul.encarts ul.tabs > li ul.tab { margin-bottom:2rem; }
#page-escalade ul.encarts ul.tabs > li { width:50%; }
#page-escalade ul.encarts ul.tabs > li:first-of-type { padding-right:0.5rem; }
#page-escalade ul.encarts ul.tabs > li:last-of-type { padding-left:0.5rem; }
#page-escalade ul.encarts ul.tabs > li:first-of-type:last-of-type { width:100%; padding:0; }


#page-horspiste ul.encarts div.intro p:last-of-type { padding-bottom:2em; }


ul.encarts.btnend ul.tabs { display:inline-block; vertical-align:top; width:calc(100% - 15.4rem - 2rem - 2rem) !important; }
ul.encarts.btnend ul.tabs > li ul.tab { padding:1rem 0; }
ul.encarts.btnend ul.tabs > li > ul.tab { min-height:7rem; }
ul.encarts.btnend div.buttons { display:inline-block; vertical-align:top; width:15.4rem; min-height:6rem; margin-left:2rem; }
ul.encarts.btnend button { width:100%; font-size:1.1rem; font-weight:400; background-color:rgba(114,185,129,1); color:rgba(255,255,255,1); text-transform:uppercase; text-align:center; border:0; padding:1em; margin-top:2rem; border-radius:6px; }
body.desktop ul.encarts.btnend button:hover { background-color:rgba(110,177,115,1); color:rgba(255,255,255,1); }

ul.encarts ul.tab:before, ul.encarts ul.tab:after { width:calc(100% - (9.5rem + 0.5rem) ); }
ul.encarts ul.tab.double:before, ul.encarts ul.tab.double:after { width:calc( 100% - ( 2 * (9.5rem + 0.5rem) ) ); }
ul.encarts.nb2 ul.tabs, ul.encarts.nb3 ul.tabs { padding-top:1rem; }
ul.encarts ul.tabs { font-size:0; }
ul.encarts ul.tabs > li { font-size:1rem; display:inline-block; width:100%; }
ul.encarts ul.tabs > li > h3 { text-transform:uppercase; position:absolute; left:0; top:0; font-size:1.1em; font-weight:400; }
ul.encarts ul.tabs > li ul.tab { margin-top:2rem; margin-bottom:2rem; padding-right:0; }
ul.encarts ul.tabs > li:last-of-type ul.tab { margin-bottom:2rem; }
ul.encarts ul.tab li:not(.tarif) span { font-size:0.9em; }
ul.encarts ul.tab li:not(.tarif) { width:calc(100% - (9.5rem + 0.5rem) ); display:block; }
ul.encarts ul.tab.double li:not(.tarif) { width:calc( 100% - ( 2 * ( 9.5rem + 0.5rem) ) ); }
ul.encarts ul.tab li.tarif { width:9.5rem; }
ul.encarts ul.tab.double li.tarif { right:calc(9.5rem + 0.5rem); border-radius: 0 0 0 0; }
ul.encarts ul.tab.double li.tarif ~ li.tarif { right:0; border-radius: 0 6px 6px 0; }
ul.encarts ul.tab li.tarif > div > span { display:block; }


aside.packs { width:calc(94% - 2rem); font-size:0; background-color:rgba(236,236,236,1); padding:0; border-radius:6px; overflow:hidden; margin:0 auto 4rem auto; }
aside.packs h2 { text-transform:uppercase; font-size:1.9rem; padding:0.5em 4rem; background-color:rgba(58,58,58,1); color:rgba(255,255,255,1); }
aside.packs h3 { text-transform:uppercase; font-weight:300; font-size:1.2em; color:rgba(22,22,22,1); margin-bottom:0.5em; }
aside.packs .intro { font-size:1rem; padding:2rem 4rem 0 4rem; }
aside.packs > ul { position:relative; font-size:0; display:inline-block; vertical-align:top; width:calc(100% - 15.4rem - 4rem); margin-top:2rem; padding:0 0 0 4rem; }
aside.packs > ul > li { position:relative; display:inline-block; vertical-align:top; font-size:1rem; min-height:7rem; padding-right:calc(9.5rem + 2rem + 0.5rem); margin-bottom:2rem; }
aside.packs > ul > li { width:50%; }
aside.packs > ul > li:first-of-type:last-of-type { width:100%; }
aside.packs > ul > li:after { content:''; position:absolute; left:0; right:calc(9.5rem + 2rem + 0.5rem); height:0; bottom:0; height:1px; border:0; border-bottom:1px solid rgba(58,58,58,1); }
aside.packs > ul .tarif { position:absolute; right:2rem; bottom:0; width:9.5rem; height:100%; background-color:rgba(58,58,58,1); color:rgba(255,255,255,1); padding:0 0.5em 0 2.5em; border-radius: 0 6px 6px 0; }
aside.packs > ul .tarif span { line-height:1; font-weight:400; }
aside.packs > ul .tarif > div > span { display:block; }
aside.packs > ul .tarif span.prix { font-size:2em; color:rgba(36,169,236,1); }
aside.packs > ul .tarif span.prix > span { font-size:0.8em; }
aside.packs > ul .tarif > div { position:relative; display:block; height:auto; top:50%; transform:translateY(-50%); }
aside.packs div.buttons { display:inline-block; vertical-align:top; width:15.4rem; min-height:7rem; }
aside.packs button { width:100%; font-size:1.1rem; font-weight:400; background-color:rgba(114,185,129,1); color:rgba(255,255,255,1); text-transform:uppercase; text-align:center; border:0; padding:1em; margin-top:2rem; border-radius:6px; }
body.desktop aside.packs button:hover { background-color:rgba(110,177,115,1); color:rgba(255,255,255,1); }

aside.mosaic { font-size:0; display:block; position:relative; width:100%; height:0; margin:3rem 0; padding:0; padding-bottom:calc(2 * 100% / 3);overflow:hidden; }
aside.mosaic > img { position:absolute; display:inline-block; width:calc(100% / 3); height:auto; margin:0; padding:0; }

aside.mosaic.agencement1 > img:nth-of-type(1) { left:0; top:0; width:calc(2 * 100% / 3); }
aside.mosaic.agencement1 > img:nth-of-type(2) { left:calc(2 * 100% / 3); top:0; }
aside.mosaic.agencement1 > img:nth-of-type(3) { left:0; top:calc(100% / 2); }
aside.mosaic.agencement1 > img:nth-of-type(4) { left:calc(100% / 3); top:calc(100% / 2); }
aside.mosaic.agencement1 > img:nth-of-type(5) { display:none; }
aside.mosaic.agencement1 > img:nth-of-type(6) { display:none; }

aside.mosaic.agencement2 > img:nth-of-type(1) { left:0; top:0; }
aside.mosaic.agencement2 > img:nth-of-type(2) { left:calc(100% / 3); top:0; }
aside.mosaic.agencement2 > img:nth-of-type(3) { left:calc(2 * 100% / 3); top:0; }
aside.mosaic.agencement2 > img:nth-of-type(4) { left:0; top:calc(100% / 2); width:calc(2 * 100% / 3); }
aside.mosaic.agencement2 > img:nth-of-type(5) { display:none; }
aside.mosaic.agencement2 > img:nth-of-type(6) { display:none; }

aside.mosaic.agencement3 > img:nth-of-type(1) { left:0; top:0; }
aside.mosaic.agencement3 > img:nth-of-type(2) { left:calc(100% / 3); top:0; width:calc(2 * 100% / 3); }
aside.mosaic.agencement3 > img:nth-of-type(3) { left:0; top:calc(100% / 2); width:calc(2 * 100% / 3); }
aside.mosaic.agencement3 > img:nth-of-type(4) { left:calc(2 * 100% / 3); top:calc(100% / 2); }
aside.mosaic.agencement3 > img:nth-of-type(5) { display:none; }
aside.mosaic.agencement3 > img:nth-of-type(6) { display:none; }

aside.mosaic.agencement4 > img:nth-of-type(1) { left:0; top:0; width:calc(2 * 100% / 3); }
aside.mosaic.agencement4 > img:nth-of-type(2) { left:calc(2 * 100% / 3); top:0; }
aside.mosaic.agencement4 > img:nth-of-type(3) { left:0; top:calc(100% / 2); }
aside.mosaic.agencement4 > img:nth-of-type(4) { left:calc(100% / 3); top:calc(100% / 2); width:calc(2 * 100% / 3); }
aside.mosaic.agencement4 > img:nth-of-type(5) { display:none; }
aside.mosaic.agencement4 > img:nth-of-type(6) { display:none; }

aside.mosaic.agencement5 > img:nth-of-type(1) { left:0; top:0; }
aside.mosaic.agencement5 > img:nth-of-type(2) { left:calc(100% / 3); top:0; }
aside.mosaic.agencement5 > img:nth-of-type(3) { left:calc(2 * 100% / 3); top:0; }
aside.mosaic.agencement5 > img:nth-of-type(4) { left:0; top:calc(100% / 2); }
aside.mosaic.agencement5 > img:nth-of-type(5) { left:calc(100% / 3); top:calc(100% / 2); width:calc(2 * 100% / 3); }
aside.mosaic.agencement5 > img:nth-of-type(6) { display:none; }

aside.mosaic.agencement6 > img:nth-of-type(1) { left:0; top:0; }
aside.mosaic.agencement6 > img:nth-of-type(2) { left:calc(100% / 3); top:0; }
aside.mosaic.agencement6 > img:nth-of-type(3) { left:calc(2 * 100% / 3); top:0; }
aside.mosaic.agencement6 > img:nth-of-type(4) { left:0; top:calc(100% / 2); width:calc(2 * 100% / 3); }
aside.mosaic.agencement6 > img:nth-of-type(5) { left:calc(2 * 100% / 3); top:calc(100% / 2); }
aside.mosaic.agencement6 > img:nth-of-type(6) { display:none; }


/* CONTACT */

section.contact div.contenu { font-size:0; }
section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul { font-size:1rem; position:relative; display:inline-block; vertical-align:top; padding:2rem; width:100%; color:rgba(22,22,22,1); }

section.contact h2 { color:rgba(22,22,22,1); font-weight:500; margin:0 0 0.5em 0; padding-top:0.3em; }
section.contact h2 svg { position:absolute; left:0; top:0; width:1.8em; height:1.8em; }
section.contact h2 svg circle { fill:rgba(36,169,236,1); stroke:rgba(36,169,236,1); }
section.contact h2 svg path { stroke:rgba(255,255,255,1); }

section.contact aside.coordscontact { background-color:rgba(58,58,58,1); color:rgba(255,255,255,1); background-repeat:no-repeat; background-position:center bottom; background-size:100%; }
section.contact aside.coordscontact h2 { color:rgba(255,255,255,1); }
section.contact aside.coordscontact div { font-weight:300; font-size:1em; padding-bottom:0.7rem; }
section.contact aside.coordscontact div.nom { font-weight:500; font-size:1.1em; }
section.contact aside.coordscontact div.tel { font-weight:500; font-size:1.3em; }

section.contact div.contenu > div.tabcontent { opacity:0; display:none; }
section.contact div.contenu > div.tabcontent.open { opacity:1; display:inline-block; }

section.contact div.introform { font-size:1rem; padding-bottom:2rem; }
section.contact div.introform p { text-align:center; }

section.contact form { font-size:0; }

section#page-prereservation.contact div.contenu > div { padding:2rem 10rem; }
section#page-prereservation.contact div.contenu > ul { font-size:0; padding:2rem 5rem; }
section#page-prereservation.contact div.contenu > ul li { display:inline-block; vertical-align:top; font-size:1rem; padding:0; margin:0; width:50%; }
section#page-prereservation.contact div.contenu > ul li button { font-size:1.4rem; text-transform:uppercase; width:100%; background-color:rgba(255,255,255,1); border-color:rgba(58,58,58,1); color:rgba(58,58,58,1); padding:0.5em 1em; }
section#page-prereservation.contact div.contenu > ul li button.open { background-color:rgba(36,169,236,1); border-color:rgba(36,169,236,1); color:rgba(255,255,255,1); }
body.desktop section#page-prereservation.contact div.contenu > ul li button:hover { border-color:rgba(36,169,236,1); color:rgba(36,169,236,1); }
body.desktop section#page-prereservation.contact div.contenu > ul li button.open:hover { color:rgba(255,255,255,1); }

section.contact fieldset { font-size:0; position:relative; display:inline-block; vertical-align:top; margin:0 0 1rem 0; padding:0; border:0; width:100%;  }

section.contact label, section.contact fieldset > div { font-size:1rem; width:100%; display:inline-block; vertical-align:top; margin:0; padding:0; margin-bottom:0.7em; }
section.contact label { padding-right:0; }
section.contact label > span, section.contact fieldset > div > span { width:100%; display:inline-block; vertical-align:top; padding:0.5em 0.5em 0.5em 1em; }
section.contact fieldset > div > span { padding-right:0; }
section.contact label.option { width:auto; text-transform:uppercase; }
section.contact .participants input { width:3.5em; padding-right:0; }
section.contact .participants label > span { width:auto; padding-left:0; }
section.contact label.consentementrgpd { font-size:0.8rem; margin-top:1rem; text-transform:none; }
section.contact option.placeholder { color:rgba(54,54,54,0.55); }

section.contact input, section.contact select, section.contact textarea { background-color:transparent; border:1px solid rgba(22,22,22,1); border-radius:3px; padding:0 1em; }

section.contact textarea { height:10em; }

section.contact input[type="radio"] + span:before, section.contact input[type="checkbox"] + span:before, section.contact input[type="radio"] + span:after, section.contact input[type="checkbox"] + span:after { top:0.05em !important; border-radius:3px !important; }
section.contact input[type="radio"] + span:before, section.contact input[type="checkbox"] + span:before { border-color:rgba(22,22,22,1) !important; }
section.contact input[type="radio"] + span:after, section.contact input[type="checkbox"] + span:after { background-color:rgba(36,169,236,1) !important; }
section.contact input[type="radio"] + span:before, section.contact input[type="radio"] + span:after { border-radius:50% !important; }

section.contact select { background:transparent url(../../_chartes_/guides/ressources/images/forms/dropdown.svg) calc(100% - 0.5em) center no-repeat !important; padding-right:2.5em !important; }
section.contact input[name="date"] { background:transparent url(../../_chartes_/guides/ressources/images/forms/date.svg) calc(100% - 0.5em) center no-repeat; padding-right:2.5em; }
.datepicker table tr td.disabled, body.desktop .datepicker table tr td.disabled:hover { opacity:0.3; }

section.contact form label input[type="checkbox"], section.contact form label input[type="radio"] { padding-top: 0 !important; padding-bottom: 0 !important; position: relative !important; left: 0 !important; top: 1.2rem !important; transform: scale(1) !important; }

section.contact form button { position:relative; background-color:rgba(36,169,236,1); border-color:rgba(36,169,236,1); color:rgba(255,255,255,1); border-radius:6px; font-weight:300; padding:0.5em 2.5em; font-size:1rem; margin-top:1rem; display:block; width:auto; transform:translateX(-100%); left:100%; }
body.desktop section.contact form button:hover { background-color:transparent; border-color:rgba(36,169,236,1); color:rgba(36,169,236,1); }

section.contact span.asterisque { display:block; width:auto; font-size:0.7rem; margin:1rem 0; }
section.contact sup { color:rgba(36,169,236,1); font-weight:500; }

section.contact div.succes { padding-top:3rem; padding-bottom:5rem; font-size:1.4rem; text-align:center; }
section.contact div.erreur { padding-bottom:3rem; }


section.contact aside.mapcontact { padding-bottom:40%; }
section.contact aside.mapcontact > div { position:absolute; padding:0; margin:0; left:0; bottom:0; width:100%; height:0; padding-bottom:40%; }

section.contact aside.mapcontact ul > li { position:relative; list-style-type:none; padding:0 0.2em; }
section.contact aside.mapcontact ul > li:before { content:''; display:none; }


.jconfirm .jconfirm-box { width:50%; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* MENTIONS LEGALES */

section#page-mentionslegales { font-family:Rubik, sans-serif; background-color:rgba(58,58,58,1); color:rgba(197,197,197,1); font-size:1rem; font-weight:300; display:block; margin:0 auto; padding:5em 15% 5em 15%; }
section#page-mentionslegales h1 { font-size:1.3em; text-transform:uppercase; font-weight:600; padding-bottom:1em; }
section#page-mentionslegales h2 { font-size:1em; text-transform:uppercase; font-weight:600; padding-top:1.5em; padding-bottom:0.5em; }
section#page-mentionslegales p { font-size:0.65em; text-align:left; }
section#page-mentionslegales li { font-size:0.65em; text-align:left; }
section#page-mentionslegales ul:not(.nobull) > li:before { background-color:rgba(197,197,197,1); }
section#page-mentionslegales strong { font-weight:600; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* AUTHENTIFICATION */

section#page-authentification { width:30%; margin:0 auto; }
section#page-authentification h1 { margin:7rem 0 2rem 0; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* FOOTER */
footer { z-index:900; position:relative; background-color:rgba(255,255,255,1); min-height:calc((10rem)) }

footer .contact { z-index:903; position:absolute; right:12rem; top:2rem; padding:0.7em 1em; margin:0; font-size:1.2rem; font-weight:500; background-color:rgba(114,185,129,1); color:rgba(255,255,255,1); text-transform:uppercase; text-align:center; border:0; width:20rem; border-radius:6px; }
body.desktop footer .contact:hover { background-color:rgba(110,177,115,1); color:rgba(255,255,255,1); }

footer .coords { z-index:901; font-size:1rem; position:relative; background-color:rgba(47,47,47,1); color:rgba(197,197,197,1); padding:2rem 12rem 4rem 12rem; }
footer .coords > span { display:inline-block; margin:0; padding:0.5rem 0 0 4rem; vertical-align:top; }
footer .coords > span:first-of-type { padding-left:0; }
footer .coords > span > span { display:block; }
body.desktop footer .coords a:hover { text-decoration:none; }
footer .coords span.nom { font-size:1.3em; padding:0 0 0 1rem; text-transform:uppercase; color:rgba(36,169,236,1); font-weight:600; line-height:1.2; width:12em; }
footer .coords span.adresse { font-size:0.8em; padding-left:5.5rem; }
footer .coords span.email { font-size:0.7em; padding-top:0.1rem; padding-bottom:0.4rem; }
footer .coords span.tel { font-size:1.5em; color:rgba(255,255,255,1); font-weight:500; }

footer .copyright { z-index:902; font-size:0.7rem; background-color:rgba(40,40,40,1); color:rgba(197,197,197,1); padding:0 3rem;  }
footer .copyright > span, footer .copyright > a { display:inline-block; margin:1.2em 0; padding:0 1em; text-transform:uppercase; border-right:1px solid rgba(197,197,197,0.55); vertical-align:top; line-height:1.1; }
footer .copyright > a { text-transform:uppercase; }
footer .copyright > span:first-of-type { text-transform:none; border-right:0; padding-right:3rem; }
footer .copyright > span:last-of-type { border-right:0; }
footer .copyright button { position:relative; display:inline-block; vertical-align:top; font-size:1em; margin:0; padding:0; color:rgba(197,197,197,1); background-color:transparent; border:0; }
body.desktop footer .copyright button:hover { color:rgba(197,197,197,1); background-color:transparent; }


section.activite .presentation h2, section.activite .presentation p, section.activite .presentation ul:not(.tab),
section.activite .savoirplus h3, section.activite .savoirplus p, section.activite .savoirplus ul,
section.contact h2, section.contact aside > div,
section.contact label, section.contact fieldset > div > span,
section.contact span.asterisque, section.contact div.erreur { padding-left:3.5rem; }
/* ------------------------------------------------------------------------------------------------------------- */
/* RESPONSIVE */

html { font-size:10px; font-size:1vw; margin:0 auto; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Reinit font-size après un font-size:0; */
body,
#accueil-actualites > ul > li,
footer .copyright span.credits > span
 { font-size:1rem; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

#en2mots { background-color:rgba(255,255,255,1); width:100%; margin:0 auto; position:relative; }

main section { width:100%; margin:0 auto; padding:0; }

body.noscrollbar { height:0; overflow-y:hidden; }
body.windows.noscrollbar, body.windows.noscrollbar header, body.windows.noscrollbar header nav > div { max-width:calc(100% - 17px); }



/* AFFICHAGE PANORAMIC */

/* Attention, le style panoramic n'est pas ajouté sur body mais sur html
html.panoramic { left:calc( ( 100% - 2.5 * 100vh ) / 2); width:calc(2.5 * 100vh); font-size:2vh; text-align:center; }
*/
html.panoramic { width:calc(2.5 * 100vh); font-size:2vh; }
html.panoramic header { left:calc( ( 100% - 2.5 * 100vh ) / 2); right:calc( ( 100% - 2.5 * 100vh ) / 2); width:auto; }
html.panoramic #showhidemenu { left:calc(2.5 * 100vh - 2.2em - 3em); }
html.panoramic header nav { width:calc(2.5 * 100vh); left:calc( ( 100% - 2.5 * 100vh ) / 2); overflow:hidden; }
html.panoramic header nav:after { left:calc(2.5 * 50vh); width:calc(2.5 * 50vh); }
html.panoramic body.windows.showmenu, html.panoramic body.windows.showmenu header nav { width:calc(2.5 * 100vh - 16px); }
html.panoramic ul#menu:before { width:calc(2.5 * 100vh); }
html.panoramic ul#menu > li { margin-left:calc(2.5 * 25vh); width:calc(2.5 * 25vh); }
html.panoramic ul#menu.show > li.arbo.hover > ul, body.desktop html.panoramic ul#menu.show > li.arbo:hover > ul { left:calc(2.5 * 25vh); }
html.panoramic ul#menu > li > button { width:calc(2.5 * 25vh); }
html.panoramic ul#menu.show > li.arbo.hover, body.desktop html.panoramic ul#menu.show > li.arbo:hover { width:calc( (2.5 * 25vh) + 18rem); }

html.panoramic section > div.bandeau { left:calc( ( 100% - 2.5 * 100vh ) / 2); right:calc( ( 100% - 2.5 * 100vh ) / 2); }
html.panoramic section > nav { width:calc(2.5 * 100vh); }


/* AFFICHAGE FONT MAXI */
@media (min-width:2000px) { 

	html { font-size:20px; }

	#accueil-guides { background-size:contain; }
	#accueil-guides h1, #accueil-guides h2, #accueil-guides div.texte p { margin-left:18%; margin-right:18%; }

	section.activite .presentation,
	section.activite div.savoirplus { max-width:calc(60%); min-width:1400px; }

	ul.encarts { max-width:calc(84%); min-width:1880px; } 
	aside.packs { max-width:calc(84% - 2rem); min-width:calc(1880px - 2rem); }

	section#page-prereservation.contact div.contenu > ul { padding: 2rem 10%; }
	section#page-prereservation.contact div.contenu > div { padding:2rem 20%; }
}

/* AFFICHAGE MAXI */
@media (min-width:2560px) { 

	.litebox-overlay .litebox-container { margin-left:auto; margin-right:auto; }
	.litebox-overlay .litebox-inline-html { width:960px; }

}
/* AFFICHAGE NORMAL */
@media (orientation:portrait) and (min-width:801px), (min-width:501px) {

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Reinit font-size après un font-size:0; */
body,
#accueil-actualites > ul > li,
footer .copyright span.credits > span
 { font-size:0.8rem; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

main { width:100%; }
footer nav, footer > div  { width:100%; }

	header nav:after { z-index:1022; content:''; position:absolute; display:block; left:50vw; right:0; top:0; bottom:0; background-image:url('https://www.guides-cauterets.com/_chartes_/guides/ressources/images/menu/img_menu-2-ete.jpg'); background-size:cover; background-position:top right;  background-repeat:no-repeat; opacity:0; transition:opacity 300ms linear 0ms; }
	#togglemenu:checked ~ nav:after { opacity:1; }

	body.desktop #showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,-20%) scaleX(1) rotate(0deg); }
	body.desktop #showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(0,0) scaleX(1); }
	body.desktop #showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,20%) scaleX(1) rotate(0deg); }

	ul#menu:before { content:''; position:absolute; display:block; width:100vw; left:0; top:0; bottom:0; background-color:transparent; background-image:url('https://www.guides-cauterets.com/_chartes_/guides/ressources/images/menu/img_menu-1-ete.jpg'); background-size:cover; background-position:top left; background-repeat:no-repeat; opacity:0.97; }

	body.desktop ul#menu.show > li.arbo:hover { width:calc(25vw + 18rem); transition:width 300ms linear 0ms; }
	body.desktop ul#menu.show > li.arbo:hover > ul { z-index:1026; left:25vw; top:-100vh; padding-top:100vh; padding-bottom:100vh; max-height:calc(100vh - 1.7 * (1.5em + 0.7em + 1.7em)); }
	body.desktop ul#menu.show > li.arbo:hover > ul > li button { z-index:1027; left:0; opacity:1; transition:left 200ms linear 300ms, opacity 200ms linear 300ms; }

	body.desktop ul#menu li:hover > button { color:rgba(118,182,118,1); }
	body.desktop ul#menu > li.arbo:hover > button:after { background-color:rgba(118,182,118,1); transition:background-color 100ms linear 100ms; }

	#main-accueil { padding-top:0 !important; }

	.accueil-activites ul li { width:calc(100% / 2); padding-bottom:calc( (100% / 2) * 2/3); }
	.accueil-activites.cols3 ul li { width:calc(100% / 3); padding-bottom:calc( (100% / 3) * 2/3); }
	.accueil-activites.cols3 ul li h2, .accueil-activites.cols3 ul li h3 { font-size:2.2rem; }

	.accueil-activites ul li div.hoverdir { z-index:22; background:#fff; opacity:0.7; }
	.accueil-activites ul.ete li div.hoverdir { background: linear-gradient(53deg, rgba(79,167,85,1) 0%, rgba(22,84,131,1) 85%); }
	.accueil-activites ul.hiver li div.hoverdir { background: linear-gradient(53deg, rgba(79,167,85,1) 0%, rgba(22,84,131,1) 85%); }

	#accueil-actualites ul { flex-wrap:nowrap; }
	#accueil-actualites ul li { width:calc(100% / 4); }

	#accueil-valeurs ul { flex-wrap:nowrap; }
	#accueil-valeurs ul li { width:calc(100% / 3); }

	ul.encarts.nb2 div.intro, ul.encarts.nb3 div.intro { min-height:10em; }

	#page-canyoning ul.encarts div.entete { min-height:3.5em; }
	#page-canyoning ul.encarts div.intro { min-height:12em; }

	#page-raquettes ul.encarts div.intro { min-height:19em; }
	#page-skirando ul.encarts div.intro { min-height:13em; }
	#page-skirando ul.encarts ul.tabs { min-height:21rem; }
	#page-horspiste ul.encarts div.intro { min-height:15em; }

	#page-hautemontagne ul.encarts div.intro { min-height:6em; }

	section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul { padding:2rem 2rem 2rem 8rem; }
	section.contact aside.coordscontact { z-index:102; position:absolute; left:0; top:-0.1rem; width:35%; min-height:50rem; padding-top:calc(2rem + 0.1rem); }
	section#page-contact.contact div.contenu > div { z-index:101; margin-left:35%; width:65%; padding-right:calc(2rem + 6rem); padding-bottom:0; min-height:50rem; }

	section.contact fieldset.participants, section.contact fieldset.engagement { width:50%; }

	section.contact label.nom, section.contact label.prenom, section.contact label.email, section.contact label.telephone { width:50%; }
	section.contact label.activite, section.contact label.date {width:50%; }
	section.contact label.cp { width:25%; }
	section.contact label.ville { width:40%; }
	section.contact label.pays { width:35%; }

	section#page-prereservation.contact div.contenu > ul li button { width:calc(100% - 0.5rem);}
	section#page-prereservation.contact div.contenu > ul li:nth-of-type(1) button { margin-right:0.5rem; border-radius:6px 0 0 6px; }
	section#page-prereservation.contact div.contenu > ul li:nth-of-type(2) button { margin-left:0.5rem; border-radius:0 6px 6px 0; }

	aside.packs button { font-size:0.9rem; padding:1em 0.2em; }
	aside.packs button:not(:first-of-type) { margin-top:0.85rem; }

	ul.encarts.btnend button { font-size:0.9rem; padding:1em 0.2em; }
	ul.encarts.btnend button:not(:first-of-type) { margin-top:0.85rem; }
	}
/* AFFICHAGE TABLETTE et PETIT ECRAN */
@media (min-width:801px) and (max-width:1600px), (orientation:landscape) and (max-width:1200px), {

	html { font-size:10px; font-size:1vw; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Reinit font-size après un font-size:0; */
body,
#accueil-actualites > ul > li,
footer .copyright span.credits > span
 { font-size:1.1rem; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
	
	html { font-size:calc(1.3 * 10px); font-size:calc(1.3 * 1vw); }

	div.logos > svg { width:12rem; margin:0; }
	div.logos > svg:not(:first-of-type) { margin-left:2rem; }
	
	#accueil-video .slogan { font-size:2.8rem; }
	
	#accueil-guides { padding-top:6rem; padding-bottom:6rem; overflow:hidden; }
	#accueil-guides h1, #accueil-guides h2 { margin-left:4rem; margin-right:4rem; }
	#accueil-guides .bg { background-position:center; }
	#accueil-guides div.logos { margin-bottom:1rem; }
	#accueil-guides div.intro p { font-size:1rem; padding-left:4rem; padding-right:4rem; }
	#accueil-guides div.texte p { font-size:1rem; margin-left:4rem; margin-right:4rem; }

	#accueil-actualites > ul > li { width:calc(100% / 3); }
	#accueil-actualites > ul > li:nth-of-type(3) { display:none; }
	
	section.activite h1, section.contact h1 { top:50%; }
	section.activite .presentation, section.activite div.savoirplus { width:80%; }

	aside.autrepage { padding:1rem 5%; }
	aside.autrepage button { right:5%; }

	ul.encarts div.entete { font-size:1.2em; }

	ul.tab li:not(.tarif) span { }
	ul.tab li.tarif { padding-left:1.5em; }
	ul.encarts ul.tab li.tarif { width:8rem; }
	ul.encarts ul.tab:before, ul.encarts ul.tab:after, 
	ul.encarts ul.tab li:not(.tarif) { width:calc(100% - (8rem + 0.5rem) ); }
	ul.encarts ul.tab.double:before, ul.encarts ul.tab.double:after,
	ul.encarts ul.tab.double li:not(.tarif) { width:calc( 100% - ( 2 * (8rem + 0.5rem) ) ); }
	ul.encarts ul.tab.double li.tarif { right:calc(8rem + 0.5rem); }
	ul.encarts.btnend button { }

	ul.encarts button { font-size:0.9rem; padding:1em 0.2em; }
	aside.packs button { font-size:0.9rem; padding:1em 0.2em; }

	aside.packs h3 { font-size: 1.1em; }
	aside.packs > ul li ul li { font-size:0.85em; }
	aside.packs > ul .tarif { width:8rem; padding-left:1.5em; }
	aside.packs > ul > li { padding-right:calc(8rem + 2rem + 0.5rem); }
	aside.packs > ul > li:after { right:calc(8rem + 2rem + 0.5rem); }

	#page-canyoning ul.encarts div.intro { min-height:16em; }
	#page-hautemontagne ul.encarts div.intro { min-height:10em; }

	section.contact aside, section.contact div.contenu > div, section.contact div.contenu > ul { padding-left:4rem;  }
	section#page-contact.contact div.contenu > div { padding-right: calc(2rem + 2rem); }
	section.contact label > span, section.contact fieldset > div > span { padding-left:0.5em; }
  
	footer .coords { padding-left:5rem; padding-right:5rem; }
	footer .contact { right:5rem; width:19rem; }
	footer .coords span.adresse { padding-left:4rem; }
}
/* AFFICHAGE MOBILE */
@media (orientation:portrait) and (max-width:800px), (max-width:500px) {

	html { font-size:10px; font-size:1vw; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Reinit font-size après un font-size:0; */
body,
#accueil-actualites > ul > li,
footer .copyright span.credits > span
 { font-size:1.2rem; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

	main { width:100%; }
	footer nav, footer > div  { width:100%; }

	div.nosmartphone br { display: none; content: ' '; clear:none; }

	
	section div.contenu > div { width:90%; }

	html { font-size:24px; font-size:calc(1.3 * 3vw); }
	div.nosmartphone br { display: none; content: ' '; clear:none; }

	header { width:100%; height:8.619235rem; }

	header nav { top:8.619235rem; background-color:rgba(55,61,64,0.97); }

	#logo { font-size:1.45em; margin:0.8em 0 1.1em 0.5rem; height:4.0443em; width:8em; text-align:left; }
	#logo > a { width:100%; display:block; text-align:center; letter-spacing:-0.1rem; }
	#logo > a > i:nth-of-type(1) { font-size:1em; line-height:0.85; height:0.85em; }
	#logo > a > i:nth-of-type(2) { font-size:0; display:none; height:0; }
	#logo > a > b:nth-of-type(1) { font-size:1.62em; line-height:0.85; height:0.85em; }
	#logo > a > b:nth-of-type(2) { font-size:1.04em; line-height:0.85; height:0.85em; }

	#logo > span { display:none; }

	#togglemenu:checked ~ nav ul#menu.show { overflow-y:visible; }
	#showhidemenu { top:1.8em; left:calc(100vw - 3.2em - 1.5em); width:3.2em; height:3.2em; }

	ul#menu { font-size:1.5em; width:100%; }

	ul#menu > li { width:100%; margin-left:0; padding:0.5em 0; }
	ul#menu > li:nth-of-type(1) { margin-top:2em; }
	ul#menu.show > li.arbo.hover { width:100%; }
	
	ul#menu li > button { display:block; left:0; width:100%; color:rgba(255,255,255,1); }
	ul#menu li > button.current { color:rgba(118,182,118,1); }

	ul#menu > li > ul { position:relative; display:block; transition: max-height 300ms linear 0ms; }
	ul#menu.show > li.arbo.hover > ul { left:0; width:100%; top:0; padding-top:0; padding-bottom:1em; transition: max-height 300ms linear 300ms; }
	
	ul#menu > li > ul > li { padding: 1em 12vw 0 8vw; }
	ul#menu > li > ul > li button { left:100%; }
	ul#menu.show > li.arbo.hover > ul > li button { transition:left 300ms linear 300ms, opacity 300ms linear 300ms; }

	ul#menu > li > button { padding-right:12vw; }
	ul#menu > li > ul > li > button { font-size:0.8em; padding-left:0; } 

	main { margin-top:8.619235rem; min-height:calc(100vh - 8.619235rem); }

	#accueil-video { padding-bottom:100%; }
	#accueil-video .slogan { font-size:2rem; }

	div.logos { height:10rem; }
	div.logos > svg { width:10rem; margin-left:0; }
	div.logos > svg:not(:first-of-type) { margin-left:1.5rem; }

	#accueil-guides { padding-top:0; padding-left:0; background-color:rgba(255,255,255,1); color:rgba(22,22,22,1); }
	#accueil-guides .bg { width:200vw; height:100vw; transform:translateX(30%); }
	#accueil-guides h1 { font-size:2.2rem; padding:1em 0 0.5em 0; margin:0 2rem; text-align:center; letter-spacing:-1px; }
	#accueil-guides h2 { margin-left:3rem; margin-right:3rem; }
	#accueil-guides div.intro { padding:2rem 0 2rem 0; position:relative; width:100%; height:auto; }
	#accueil-guides div.intro > div { position:relative; top:0; transform:none; }
	#accueil-guides div.intro p { font-size:1.2rem; margin:0 3rem; padding:0 0 1em 0; text-align:center; }
	#accueil-guides div.texte { padding-top:2rem; }
	#accueil-guides div.texte p { font-size:1.1rem; margin:0 3rem; padding:0 0 1em 0; }

	#accueil-bloc-activitesactus { position:absolute; top:0; left:0; right:0; }
	#accueil-bloc-activitesactus div.logos { display:block; margin-bottom:2rem; }
	.accueil-activites > h2 { font-size:1.7rem; }
	.accueil-activites:first-of-type > h2 { margin-top:0; }
	.accueil-activites ul li { border-bottom:0 }
	.accueil-activites ul li:last-of-type { border-bottom:0; }
	.accueil-activites ul li h2, .accueil-activites ul li h3 { color:rgba(255,255,255,1); font-size:2.6rem; }
	.accueil-activites ul li.vide { display:none; }

	#accueil-actualites h2 { margin-top:2em; font-size:1.9rem; }
	#accueil-actualites > ul > li:nth-of-type(3) { display:none; }
	#accueil-actualites > ul > li { width:100%; margin:1em 0; }
	#accueil-actualites > ul > li div.visuel.portrait { padding-bottom:calc(100% * 14/9); }

	#accueil-valeurs { padding: 2em 5%; }

	/* --- PAGE INTERIEURE --- */

	section > div.bandeau { top:8.619235rem; padding-bottom:calc((2 * 18%) + 3px); }
	section > div.bandeau img { width:calc(2 * 100%); }
	section > div.titre { padding-bottom:calc(2 * 18%); }
	section.activite h1, section.contact h1 { left:5%; top:40%; font-size:2em; padding-left:2.2em; }
	section > nav { padding-top:calc(2 * 18%); }
	section > nav:after { display:none; width:0; height:0; left:0; top:0; background-image:none; opacity:0; }

	/* --- ACTIVITES --- */

	section > nav > div { height:3rem; font-size:1.1rem; }
	section > nav a:nth-of-type(1) { left:1.5em; }
	section > nav a:nth-of-type(2) { right:1.5em; }	
	section.activite.navfix > nav { top:calc(8.619235rem - 3rem); transform:translateY(3rem); }
	section.activite.navfix > .contenu { padding-top:calc(2 * 18% + 3rem); }

	ul.tab { padding-bottom:calc(6rem + 0.5rem + 0.8rem + 1px); padding-right:0; }
	ul.tab:before, ul.tab:after { width:100%; }
	ul.tab:after { bottom:calc(6rem + 0.8rem); }
	ul.tab li { width:100%; margin-right:0; }
	ul.tab li.tarif { width:100%; height:6rem; border-radius:0 0 6px 6px; }

	ul.tab li:not(.tarif) { font-size:1.1rem; }
	ul.tab li:not(.tarif) span { display:block; }

	section.activite .presentation, section.activite div.savoirplus { width:calc(100% - 4rem); }
	
	section.activite .savoirplus > div > div { width:100%; }
	section.activite .savoirplus > div > div:nth-of-type(1) { padding-right:0; }
	section.activite .savoirplus > div > div:nth-of-type(2) { padding-left:0; }

	ul.encarts { width:100%; }
	ul.encarts > li { display:block; margin:2rem 0; border-radius:0; }
	ul.encarts div.intro { min-height:0; }
	ul.encarts div.intro > p:last-of-type { padding-bottom:1em; }
	ul.encarts > li { width:100% !important; }
	ul.encarts > li > div.visuel { padding-bottom:100% !important; }
	ul.encarts ul.tab:before, ul.encarts ul.tab:after { width:100%; }
	ul.encarts ul.tabs > li ul.tab { padding-bottom:8rem; }
	ul.encarts ul.tab li:not(.tarif) { width:100%; }
	ul.encarts ul.tab li.tarif { width:100%; }
	ul.encarts button { padding-left:1.5em; padding-right:1.5em; }
	ul.encarts.btnend ul.tabs { width:100% !important; }
	ul.encarts.btnend ul.tabs > li ul.tab { padding-bottom:8rem; }
	ul.encarts.btnend div.buttons { width:100%; margin-left:0; }
	ul.encarts.btnend button { position:relative; display:block; width:100%; margin-left:0; min-height:0; padding-left:1.5em; padding-right:1.5em; }
	ul.encarts ul.tab.double:before, ul.encarts ul.tab.double:after { width:100%; }
	ul.encarts ul.tab.double li:not(.tarif) { width:100%; }
	ul.encarts ul.tab.double li.tarif { width:calc(50% - 0.25em); margin-right:0.25em; right:50%; border-radius:0 0 0 6px; }
	ul.encarts ul.tab.double li.tarif ~ li.tarif { margin-right:0; margin-left:0.25em; border-radius:0 0 6px 0; }

	ul.encarts.nb0 h2 { text-align:center; padding-left:2rem; padding-right:2rem; }
	ul.encarts.nb0 div.detail, ul.encarts.nb2 div.detail { padding:2rem 2rem; }


	#page-escalade ul.encarts ul.tabs > li { width:100%; }

	aside.autrepage { padding:2rem 5%; }
	aside.autrepage span { padding-left:calc(1.3 * 2.5em); }
	aside.autrepage span:before { content:''; display:none; padding:0; }
	aside.autrepage button { position:relative; display:block; margin-top:2rem; width:100%; margin-left:0; right:0; }

	aside.packs { width:100%; padding:0; text-align:center; border-radius:0; }
	aside.packs .intro { padding:2rem 2rem 0 2rem; }
	aside.packs > ul { width:100%; padding:0 2rem; }
	aside.packs > ul > li { width:100%; padding-right:0; padding-bottom:calc(6rem + 0.5rem + 0.8rem + 1px); }
	aside.packs > ul > li:after { width:100%; bottom:calc(6rem + 0.8rem); }
	aside.packs > ul .tarif { width:100%; right:0; height:6rem; border-radius:0 0 6px 6px; }
	aside.packs div.buttons { display:inline-block; width:calc(100% - 4rem); margin-bottom:2rem; }
 	aside.packs button { display:inline-block; width:100%; min-height:0; margin:2rem auto 0 auto; padding-left:1.5em; padding-right:1.5em; }


	aside.mosaic { padding-bottom:calc(3 * 100% / 2); margin-bottom:1rem; }
	aside.mosaic > img { width:calc(100% / 2); }

	aside.mosaic.agencement1 > img:nth-of-type(1) { left:0; top:0; width:calc(100%); }
	aside.mosaic.agencement1 > img:nth-of-type(2) { left:calc(100% / 2); top:calc(100% / 3); }
	aside.mosaic.agencement1 > img:nth-of-type(3) { left:0; top:calc(100% / 3); }
	aside.mosaic.agencement1 > img:nth-of-type(4) { left:0; top:calc(2 * 100% / 3); }

	aside.mosaic.agencement2 > img:nth-of-type(1) { left:0; top:0; }
	aside.mosaic.agencement2 > img:nth-of-type(2) { left:0; top:calc(100% / 3); }
	aside.mosaic.agencement2 > img:nth-of-type(3) { left:calc(100% / 2); top:0; }
	aside.mosaic.agencement2 > img:nth-of-type(4) { left:0; top:calc(2 * 100% / 3); width:calc(100%); }
	aside.mosaic.agencement2 > img:nth-of-type(5) { display:none; }
	aside.mosaic.agencement2 > img:nth-of-type(6) { display:none; }

	aside.mosaic.agencement3 > img:nth-of-type(1) { left:0; top:calc(100% / 3); }
	aside.mosaic.agencement3 > img:nth-of-type(2) { left:0; top:0; width:calc(100%); }
	aside.mosaic.agencement3 > img:nth-of-type(3) { left:0; top:calc(2 * 100% / 3); width:calc(100%); }
	aside.mosaic.agencement3 > img:nth-of-type(4) { left:calc(100% / 2); top:calc(100% / 3); }
	aside.mosaic.agencement3 > img:nth-of-type(5) { display:none; }
	aside.mosaic.agencement3 > img:nth-of-type(6) { display:none; }

	aside.mosaic.agencement4 > img:nth-of-type(1) { left:0; top:0; width:calc(100%); }
	aside.mosaic.agencement4 > img:nth-of-type(2) { left:0; top:calc(100% / 3); }
	aside.mosaic.agencement4 > img:nth-of-type(3) { left:calc(100% / 2); top:calc(100% / 3); }
	aside.mosaic.agencement4 > img:nth-of-type(4) { left:0; top:calc(2 * 100% / 3); width:calc(100%); }
	aside.mosaic.agencement4 > img:nth-of-type(5) { display:none; }
	aside.mosaic.agencement4 > img:nth-of-type(6) { display:none; }

	aside.mosaic.agencement5 > img:nth-of-type(1) { left:0; top:0; }
	aside.mosaic.agencement5 > img:nth-of-type(2) { left:calc(100% / 2); top:0; }
	aside.mosaic.agencement5 > img:nth-of-type(3) { left:0; top:calc(100% / 3); }
	aside.mosaic.agencement5 > img:nth-of-type(4) { left:calc(100% / 2); top:calc(100% / 3); }
	aside.mosaic.agencement5 > img:nth-of-type(5) { left:0; top:calc(2 * 100% / 3); width:calc(100%); }
	aside.mosaic.agencement5 > img:nth-of-type(6) { display:none; }

	aside.mosaic.agencement6 > img:nth-of-type(1) { left:0; top:0; }
	aside.mosaic.agencement6 > img:nth-of-type(2) { left:calc(100% / 2); top:0; }
	aside.mosaic.agencement6 > img:nth-of-type(3) { left:0; top:calc(100% / 3); }
	aside.mosaic.agencement6 > img:nth-of-type(4) { left:0; top:calc(2 * 100% / 3); width:calc(100%); }
	aside.mosaic.agencement6 > img:nth-of-type(5) { left:calc(100% / 2); top:calc(100% / 3); }
	aside.mosaic.agencement6 > img:nth-of-type(6) { display:none; }


	/* CONTACT */
	section.contact aside.coordscontact { display:none; }

	section.contact fieldset { margin-bottom:2rem; }

	section.contact h2 { font-size:1.7rem; padding-top:0.2em; }
	section.contact h2 svg { width:calc(1.8em * 1.5 / 1.7); height:calc(1.8em * 1.5 / 1.7); }

	section.contact aside > div, section.contact label, section.contact fieldset > div > span, section.contact span.asterisque, section.contact div.erreur { padding-left:0; }
	section.contact span.asterisque { font-size:0.8rem; margin:0 0 2rem 0; }

	section#page-prereservation.contact div.contenu > ul { padding:2rem 2rem 0 2rem; }
	section#page-prereservation.contact div.contenu > ul li { width:100%; margin-bottom:0.5rem; }
	section#page-prereservation.contact div.contenu > ul li:first-of-type button { border-radius:6px 6px 0 0; }
	section#page-prereservation.contact div.contenu > ul li:last-of-type button { border-radius:0 0 6px 6px; }

	section#page-prereservation.contact div.contenu > div { padding:2rem; }

	section.contact aside.mapcontact { padding-bottom:100%; }
	section.contact aside.mapcontact > div { padding-bottom:100%; }

	/* FOOTER */
	footer { text-align:center; padding-top:calc(2rem + (3 * 1.6rem) + 2rem); }

	footer .contact { font-size:1.6rem; top:2rem; width:100%; right:0; border-radius:0; }

	footer .coords { padding:1rem 1rem; }
	footer .coords > span { display:block; margin:1.5em 0; padding-left:0; }
	footer .coords span.nom { font-size:1.8em; width:100%; padding-left:0; }
	footer .coords span.adresse { font-size:1.4em; padding-left:0; }
	footer .coords span.email { font-size:1.1em; padding-bottom:1em; }
	footer .coords span.tel { font-size:2.2em; }

	footer .copyright { font-size:1rem; padding:1rem 1rem; }
	footer .copyright > span, footer .copyright > a { display:block; border-right:0; margin:1.5em 0; }
	footer .copyright > span:first-of-type { padding-right:1em; margin-bottom:2.5em; }

	section#page-mentionslegales { padding:3em 9% 3em 9%; }

	section#page-authentification { width:80%; }

}

/* AFFICHAGE MINI */
@media (max-width:300px) { 
	body { overflow-x:scroll; }
	html { font-size:9px; }
	#en2mots { width:300px; }
	header { width:300px; position:relative; }
	main { width:300px; margin-top:0 !important; }
	footer { width:300px; }
}