/* BTY THEME */

@import url('https://www.bty.one/assets/fonts/PFHP/PFHP.css');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Archivo:ital,wght@0,100..900;1,100..900&family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');

::-webkit-scrollbar {width: 8px; height: 8px;}
::-webkit-scrollbar-thumb {background: #666; border-radius: 8px;}
::-webkit-scrollbar-thumb:hover {background: #999;}
::-webkit-scrollbar-track {background: #222;}

body {
    font-family: "Archivo", sans-serif;
    text-rendering: optimizeLegibility;
}

.container.grid-lg {max-width: 90%;}

div#page-wrapper {
    background-image: 
url(https://btyone.sarl/svg/web_ribbon.svg), 
linear-gradient(180deg,rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.8) 100%), 
url(https://btyone.sarl/img/ARA.avif), 
radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(0, 99, 186, 1) 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain, contain, 100% auto, auto;
    background-position: center 85%, center center, center calc(100% + 5em), left top;
}

@media (max-width: 767px) {
div#page-wrapper {
    background-size: contain, contain, auto 100%, auto;
    background-position: center 85%, center center, 55% bottom, left top;
}
}

#header {
    width: 100%;
    height: 4rem;
    border-bottom: 1px solid rgba(172, 179, 194, 0.2);
    font-size: 0.7rem;
    font-weight: 700;
    background: #222;
    color: #fff;
}

#header a, #header a:visited {color: #fff;}

#footer, .bg-gray {background: #222 !important;}

#footer .copyright {
    float: left;
    padding: 0 1em 1.5em 0;
    font-family: 'Archivo', sans-serif;
    font-optical-sizing: auto;
    line-height: 1.1rem;
    font-size: 0.85em;
    font-weight: 400;
    font-variation-settings: "wdth" 87.5;
    text-align: left;
    text-justify: none;
    color: #fff;
}

#footer a {
    font-weight: 600;
    color: #fff;
}

.copyright a {
    padding-left: 2em;
}

#header .logo svg, #header .logo img {height: 3em;}
body.header-fixed.header-animated #header.scrolled .logo svg, body.header-fixed.header-animated #header.scrolled .logo img {height: 2em;}

/* TITLE PAGE */

@keyframes pulse {50% {transform: scale(1.2);} }

.homegrid {
display: flex;
max-width: 100%;
padding: 5vh 3vw;
text-align: center;
align-items: flex-end;
gap: 3em;
flex-wrap: wrap;
justify-content: space-around;
}

.homegrid-element {
flex: 0 1 24em;
/*opacity: 0;*/
}

.element-balet {
order: 1;
}
.element-fors {
order: 2;
}
.element-nature {
order: 3;
}

.homegrid-element img {
width: 100%; 
height: auto;
}

.homegrid-element span {
text-align: center;
font-size: 1rem;
font-weight: 500;
color: #000000;
}

.homegrid-element img:hover {
  animation: pulse 0.6s both;
}

.links-bag { 
background-color: rgba(51, 136, 0, 0.1);
border: rgba(51, 136, 0, 0.5) 0.12em solid;
padding: 0.5em;
}

.links-bag h3 {
margin-bottom: 0.5em !important;
font-size: 1.66rem !important;
color: rgba(51, 136, 0, 1) !important;
}

.links-fors { 
background-color: rgba(204, 0, 0, 0.1);
border: rgba(204, 0, 0, 0.5) 0.12em solid;
padding: 0.5em;
}

.links-fors h3 {
margin-bottom: 0.5em !important;
font-size: 1.66rem !important;
color: rgba(204, 0, 0, 1) !important;
}

.links-nature { 
background-color: rgba(189, 131, 5, 0.3);
border: rgba(189, 131, 5, 1) 0.12em solid;
padding: 0.5em;
}

.links-nature h3 {
margin-bottom: 0.5em !important;
font-size: 1.66rem !important;
color: rgba(189, 131, 5, 1) !important;
}

.links-bag a, .links-fors a, .links-nature a {
color: #000000 !important;
width: 65%; 
margin: auto; 
padding-top: 0.7em; 
padding-bottom: 0.5em; 
margin-bottom: 1.5em;
}

.links-bag a, .links-fors a, .links-nature a {
font-size: 1.25rem !important;
color: rgba(0, 0, 0, 1) !important;
}

/* FORS */

.class-FO a, p.langsel a {
color: #cc0000 !important;
font-weight: 700 !important;
}

.class-FO a:hover { text-decoration: underline !important; }
.class-FO txtlnk { color: #FF0000 !important; }

.class-FO table { 
border-spacing: 2 !important; 
border: 1px solid #cc0000 !important;
border-top-left-radius: 0.3em !important;
border-top-right-radius: 0.3em !important;
border-bottom-left-radius: 0.3em !important;
border-bottom-right-radius: 0.3em !important;
}

.class-FO td, .class-FO th) { border: 0px !important; }

.class-FO td { background: rgba(245, 245, 245, 0.33) !important; }

/*** LAYOUT: HOMEPAGE GRID ***/

.class-FO .grid-container {
margin: 0;
display: grid;
grid-template-columns: auto 25%;
grid-template-rows: auto;
gap: 1.5em 6em;
grid-template-areas:
"titleimg  . "
"featured tours"
"featured  . "
"docs docs";
animation: fadeInAnimation ease 2s; 
animation-iteration-count: 1; 
animation-fill-mode: forwards; 
}

.class-FO .grid-container ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}

.class-FO .docs ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 4;
-webkit-columns: 4;
-moz-columns: 4;
}

.class-FO .tours ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.class-FO .grid-container li:not(:last-child) {margin-bottom: 0.4em;}
.class-FO .grid-container h3 {margin-bottom: 0.5em;}
.class-FO .docs li:not(:last-child) {margin-bottom: 0.4em;}
.class-FO .docs h3 {margin-bottom: 0.5em;}

.class-FO mark { 
background-color: #ef5c5c;
color: white;
}

.class-FO .featured {grid-area: featured;}
.class-FO .titleimg {grid-area: titleimg;}

.class-FO .tours { 
grid-area: tours;
border-left: 0.20em dotted rgba(204, 0, 0, 0.5);
padding: 0 0.5em;
}

.class-FO .depot { 
grid-area: depot;
border-left: 0.20em dotted rgba(204, 0, 0, 0.33);
padding: 0 0.5em;
/* font-size: 1.2rem; */
}

.class-FO .depot h3 {color: #cc0000 !important;}

.class-FO .depot.call h3 {margin-bottom: 0 !important;}

.class-FO .links { 
grid-area: links;
border-left: 0.20em dotted rgba(204, 0, 0, 0.5);
padding: 0 0.5em;
}

.class-FO .docs {
grid-area: docs;
border-left: 0.20em dotted rgba(204, 0, 0, 0.5);
padding: 0 0.5em;
}

.class-FO img[alt=Lageplan] { width: 50%; margin-left: 1em; float: right; }

.class-FO .featured img {transition: transform 0.3s;}
.class-FO .featured img:hover {transform: scale(1.5);}

@media (max-width: 767px) {
#main {
padding: 1em 0.5em 0.5em;
background-size: auto, 0 0, cover;
background-position: left top, left top, 50% bottom;
}
.class-FO .grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 1.5em 1.5em;
grid-template-areas:
"titleimg"
"featured"
"tours"
"docs";
}
.class-FO .grid-container ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}
.class-FO .docs ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}
.class-FO img[alt=Lageplan] { width: 80%; float: none; margin-left: 1em; }
.class-FO .featured img:hover {transform: scale(1);}
}

/* FORS BAGNES */

#main a {
color: #cc0000 !important;
font-weight: normal !important;
-webkit-transition: color .2s ease-in;
transition: color .2s ease-in;
}

.class-FO p.langsel a {
color: #cc0000 !important;
font-weight: 700 !important;
}

.class-FO  a:hover { text-decoration: underline !important; }
.class-FO  txtlnk { color: #cc0000 !important; }

.class-FO table { 
border-spacing: 2 !important; 
border: 1px solid #cc0000 !important;
border-top-left-radius: 0.3em !important;
border-top-right-radius: 0.3em !important;
border-bottom-left-radius: 0.3em !important;
border-bottom-right-radius: 0.3em !important;
}

.class-FO td, .class-FO th { border: 0px !important; }

.class-FO td { background: rgba(245, 245, 245, 0.33) !important; }

/*** LAYOUT: HOMEPAGE GRID ***/

.class-FO .grid-container-bagnes {
margin: 2em 0 0;
display: grid;
grid-template-columns: auto 40%;
grid-template-rows: auto;
gap: 1.5em 6em;
grid-template-areas:
"featured depot"
"featured tours"
"docs docs";
}

.class-FO .grid-container-bagnes ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}

.docs ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 4;
-webkit-columns: 4;
-moz-columns: 4;
}

.tours ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.class-FO .grid-container-bagnes li:not(:last-child) {
margin-bottom: 0.4em;
}

.class-FO .grid-container-bagnes h3 {
margin-bottom: 0.5em;
}

.class-FO .docs li:not(:last-child) {
margin-bottom: 0.4em;
}

.docs h3 {
margin-bottom: 0.5em;
}

mark { 
background-color: #ef5c5c;
color: white;
}

.featured { 
grid-area: featured;
}

.tours { 
grid-area: tours;
border-left: 0.20em dotted rgba(204, 0, 0, 0.5);
padding: 0 0.5em;
}

.depot { 
grid-area: depot;
border-left: 0.20em dotted rgba(204, 0, 0, 0.33);
padding: 0 0.5em;
/* font-size: 1.2rem; */
}

.depot h3 {
color: #cc0000 !important; 
}

.depot.call h3 {
margin-bottom: 0 !important;
}

.links { 
grid-area: links;
border-left: 0.20em dotted rgba(204, 0, 0, 0.5);
padding: 0 0.5em;
}

.docs {
grid-area: docs;
border-left: 0.20em dotted rgba(204, 0, 0, 0.5);
padding: 0 0.5em;
}

.p01-contact input[type=submit]:not([type=radio]):not([type=checkbox]),
.p01-contact input[type=button]:not([type=radio]):not([type=checkbox]){
    background: #cc0000;
}

@media (max-width: 767px) {
#main {
padding: 1em 0.5em 0.5em;
background-size: auto, 0 0, cover;
background-position: left top, left top, 40% bottom;
}
.grid-container-bagnes {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 1.5em 1.5em;
grid-template-areas:
"featured"
"depot"
"tours"
"docs";
}
.grid-container-bagnes ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}
.docs ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}
}

/* BAG */
#about-img {display: inline-block; margin-bottom: 3em;}

#b-logo {
  width: 9em;
  height: auto; 
  margin: 1em 0 1.5em -1em;
}

.bag-microsite-side-bar {
  width: 160px;
  height: 100vh;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

#bag-microsite-menu, .bag-microsite-menu-repeat {
display: none;
font-family: "Archivo Narrow", sans-serif;
font-size: 1.2em;
text-align: center;
}

.bag-microsite-content {
  margin-left: 160px;
}

.bag-microsite-navi ul{
  padding: 0;
}

.bag-microsite-navi nav, .bag-microsite-navi li {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 1.5em;
  line-height: 2.2em;
}

.bag-microsite-navi nav, .bag-microsite-navi li, .bag-microsite-navi a {
  text-decoration: none;
  color: #fff;
  display: block;
  font-weight: 500;
  font-family: "Archivo Narrow", sans-serif;
}

.bag-microsite-navi a:hover, .bag-microsite-navi a:active {
  color: #333;
  text-decoration: none;
}

@keyframes grow-progress { 0% {opacity: 0;} 15% {opacity: 0;} 40% {opacity: 1;} 100% {opacity: 1;} }
#about, #assort, #loc, #contact {animation: grow-progress 1s linear forwards; animation-timeline: view();}

.class-BA section:not(#actu) {
  min-height: 90vh;
  margin:0;
  padding:1rem 4rem;
}

.class-BA section-first { height: 90vh; }

.class-BA section #actu {
  background-color: rgba(255,255,255,0.15);
  min-height: 90vh;
  margin: 0;
  padding: 0 0 4rem 0;
}

.bag-microsite-navi-active {
  color: lime; 
  font-weight: 600;
}

.bag-microsite-content th { background: rgba(255,255,255,0.5); }

.class-BA table {width: 100%;}
.horaires th:first-of-type {width: 40%;}
.horaires th:nth-of-type(2) {width: 30%;}
.horaires th:nth-of-type(3) {width: 30%;}

.class-BA td, .class-BA th {
background: rgba(255,255,255,0.5) !important;
}

.mySlides {width: 100%; height: 100%;}
.mySlides img {width: 100%; height: auto;}

.class-BA #loc .grid-leftright img:hover {
/*  animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;*/
  animation: pulse 0.6s both;
}