@import "style_common.css";

/*  theme colour: Bilbao        */
/*  full colour: #338800        */
/*  light variant: #a9da8b      */

#nav .active a, #nav a:hover, #nav-toggle:hover { color: #a9da8b; }

#main {
padding: 1.5em 0 1.5em;
background-color: #ffffff;
background-image: url(https://btyone.sarl/svg/web_ribbon.svg), url(https://btyone.sarl/img/bag_bg.jpg), linear-gradient(to right, rgba(51, 136, 0, 1), rgba(51, 136, 0, 1));
background-repeat: no-repeat;
background-attachment: fixed;
background-size: contain, cover, calc(5% + 167.5px) 100%;
background-position: center 85%, center center, top left;
background-blend-mode: normal, multiply, normal;
animation: fadeInAnimation ease 2s; 
animation-iteration-count: 1; 
animation-fill-mode: forwards;
} 

#header {background-image: linear-gradient(to right, rgba(34,34,34,1) 60%, rgba(255,255,255,0.15)) 100%;}

#footer {
background-color: #338800;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23338800'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%231c3964'/%3E%3Cstop offset='1' stop-color='%23338800'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(1020 0)'%3E%3Cg %3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform=''%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(180)'/%3E%3Cuse href='%23g' transform='rotate(90)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.62' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
animation: fadeInAnimation ease 0.5s; 
animation-iteration-count: 1; 
animation-fill-mode: forwards;
}

#main:not(.bag-microsite-navi) a, p.langsel a {
color: #338800;
font-weight: 700;
}

.bag-microsite-navi a {color: #fff;}

#main txtlnk { color: #338800 !important; }

/*.bag-microsite-content { scroll-behavior: smooth; }*/

#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;
}

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

#main .bag-microsite-navi a:hover, #main .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();}

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

section-first { height: 90vh; }

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); }

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

.grid-container {
margin: 2em 0 0;
display: grid;
grid-template-columns: auto 25%;
grid-template-rows: auto;
gap: 1.5em 6em;
grid-template-areas:
"featured site"
"featured links";
}

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

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

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

.pres-title h1 {font-family: "Archivo Narrow"; color: #338800;}
#presentation h2, #presentation h3, #presentation h4 {font-weight: 500; margin-top: 2em;} 

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

.featured { 
grid-area: featured;
}

.site { 
grid-area: site;
border-left: 0.15em dotted rgba(51, 136, 0, 0.5);
padding: 0 0.5em;
}

.links { 
grid-area: links;
border-left: 0.15em dotted rgba(51, 136, 0, 0.5);
padding: 0 0.5em;
line-height: 1.2em;
}

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%;}

td, th {
background: rgba(255,255,255,0.5) !important;
}

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

#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;
}

/* TEST microsite horizontal scrolling
#fullpage {
  scroll-snap-type: mandatory;
  scroll-snap-type: y mandatory;
}
section {
  scroll-snap-align: start;
}
end of TEST */

@media (max-width: 767px) {
#main {
padding: 1em 0.5em 0.5em;
background-size: 0 0, cover;
background-position: center 25%, center bottom;
}

#about, #assort, #loc, #contact {display: none;}
#about:target, 
#assort:target, 
#loc:target, 
#contact:target {display: block;}

#about, #assort, #loc, #contact {animation: none; animation-timeline: none;}

/* .bag-microsite-sections#about {display: block;} */

#b-logo {
display: none;
width: 33%;
}

.bag-microsite-side-bar {
  display: none;
  /* width: 100%;
  height: 20vh;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start; */
}

#bag-microsite-menu, .bag-microsite-menu-repeat {
display: flex;
flex: 0 0 auto;
width: 100%;
height: 2.5em;
min-height: 2.5em;
background-color: #338800;
font-size: 1em;
}

#bag-microsite-menu a, .bag-microsite-menu-repeat a {color: #fff !important;}

.bag-microsite-content { margin-left: 0; }

.bag-microsite-navi ul {
padding: 0.5em 1.5em;
background-color: #338800;
margin: -1em 0 0 -1.5em;
}

section { height: auto;}
section-first { height: auto; }

#fullpage section {
margin-top: 2em;
min-height: 0;
padding: 0;
margin-bottom: 1em;
}

#actu section { margin-top: 4em; }

section, section:nth-of-type(2n) { background-color: rgba(255,255,255,0); }

h1.bag {
font-family: 'Archivo Narrow';
font-size: 2.2rem;
font-weight: 600;
color: #338800;
margin-top: 1em; 
}

#promos {
margin: 1em 0 0;
height: auto !important;
}

#main .bag-microsite-navi nav, #main .bag-microsite-navi li, #main .bag-microsite-navi a {
display: inline-block;
line-height: 1.5em;
padding-right: 0.5em;
}
#main .bag-microsite-navi a:hover, #main .bag-microsite-navi a:active { color: #fff; }

.mySlides img {width: 100%; height: auto; border-radius: 0.5em;}

.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 1.5em 1.5em;
grid-template-areas:
"featured"
"site"
"links";
}
.grid-container ul {
list-style-type: none;
margin: 0;
padding: 0;
columns: 1;
-webkit-columns: 1;
-moz-columns: 1;
}
}