#splash_home{ background-image: url(images/splash.jpg); }
#splash_home .in{ align-items: flex-start; justify-content: center; height: 48em; padding: 2em; background: #15409782;  }
#splash_home .in div{ font-size: 1.2em; color: #fff; font-weight: 900; text-align: center; /*text-shadow: 0px 0px 0.2em #000, 0px 0px 0.2em #000, 0px 0px 0.2em #000; */ }
#splash_home .in div h1{ font-size: 3.5em; margin: 0.1em 0; padding: 0; font-weight: inherit; }
#splash_home .in div p{ font-size: 1.25em; width: 28em; margin: 0; }
#splash_home .in div nav{ display: flex; flex: none; align-items: center; justify-content: space-around; font-size: 1em; margin: 1.25em 0; }
#splash_home .in div nav .cta{ padding: 1.25em 3em; text-shadow: none; }
#splash_home .in div nav .cta.gl{ background: var(--sec-color); }
#splash_home .in .sidetext{ display: none; }

h1{ font-size: 2em; }

.vimeo{ width: 100%; }
.vimeo iframe{ /*height: 36em;*/ width: 100%; aspect-ratio: 16/9; /*margin-right: 2em;*/ }



#bulle{ display: flex; flex: none; align-items: stretch; justify-content: space-between; padding: 4em 0; }
#bulle .left{ width: 25em; background: url(images/bulle_pic.png) no-repeat left center; background-size: contain; }
#bulle .right{ width: 12em; margin-right: 7em; background: url(images/foulard_ronarad.png) no-repeat top right; background-size: contain; }
#bulle .main{ flex: 1; padding: 0 1em; }


#newsite{ 
  display: flex; flex: none; flex-direction: column; align-items: stretch; position: relative;
}
#newsite .philigranne{ display: none; width: 100%; height: 28em; background: url(images/newsite.jpg) no-repeat center center; background-size: cover; opacity: 0.25; }
#newsite in{ /*position: absolute; top: 0; left: 0; */ display: flex; flex: none; align-items: center; justify-content: center; width: 100%; height: 28em; padding: 4em 2em; }
#newsite in div{ display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 33%; color: var(--reverse-text); }
#newsite h1{ margin-top: 0; font-family: "Chakra Petch", serif; text-shadow: 0 0.2em 0.2em #0007; }
#newsite ul{ display: flex; flex: none; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0 0 0.5em 0; padding: 0; }
#newsite ul li{ display: flex; flex: none; align-items: center; justify-content: center;  width: 50%; padding: 0 0 1.5em 0; }
#newsite ul li:last-child{ width: 100%; }
#newsite ul li .material-icons{ font-size: 1.5em; margin-right: 0.5em; }
#newsite .cta{ font-size: 1.2em; background: var(--third-color-grad); padding: 0.25em 2em; } 

#newsite.ph0{ 
  background: var(--main-color); 
}
/*
#newsite.ph1{ 
  background: var(--sec-color-grad); 
  background: linear-gradient(to bottom, var(--sec-color) 0%,var(--sec-color-grad) 33%,var(--sec-color-grad) 66%,var(--sec-color) 100%); 
}
#newsite.ph2{ 
  background: var(--third-color-grad); 
  background: linear-gradient(to bottom, var(--third-color) 0%,var(--third-color-grad) 33%,var(--third-color-grad) 66%,var(--third-color) 100%); 
}
#newsite.ph3{ 
  background: var(--sec-color-grad); 
  background: linear-gradient(to bottom, var(--sec-color) 0%,var(--main-color-grad) 33%,var(--main-color-grad) 66%,var(--sec-color) 100%); 
}
#newsite.ph4{ 
  background: var(--sec-color-grad); 
  background: linear-gradient(to bottom, var(--main-color) 0%,var(--third-color-grad) 33%,var(--third-color-grad) 66%,var(--main-color) 100%); 
}
*/

.calendrier{ padding: 2em 10%; }
.calendrier section{ display: flex; flex: none; flex-wrap: wrap; align-items: stretch; justify-content: center;  }
.calendrier article{ 
  display: flex; flex: none; flex-direction: column; align-items: stretch; 
  width: 31%; margin-left: 2%; margin-bottom: 1.5em; text-align: center;
  border: 1px solid var(--main-color-grad); position: relative }
.calendrier article .flag{ position: absolute; left: -1.5em; top: -1em; text-align: left; padding: 0; }
.calendrier article .flag img{ height: 3em; transform: rotate(-10deg); } 
.calendrier article .mainpic{ width: 100%; aspect-ratio: 1.75/1; background: no-repeat center center #fff; background-size: cover }
.calendrier article h1{ font-size: 1.5em; margin: 0; padding: 0.5em 1em; color: var(--reverse-text); background: var(--sec-color); }
.calendrier article h2{ 
  display: flex; flex: 1; align-items: center; justify-content: center;
  font-size: 1.25em; margin: 0; padding: 0.5em 1em;  
  color: var(--reverse-text); background: var(--main-color);  }
.calendrier article h3{ margin: 0; padding: 0.5em 1em; }
.calendrier nav{ text-align: center; font-size: 1.5em; }

#calendrier_events section{ justify-content: space-between; }
#calendrier_events article{ width: 32%; margin-left: 0; cursor: zoom-in; }
#calendrier_events article div{ display: flex; flex: none; align-items: center; color: var(--main-text); }
#calendrier_events article div lab{ flex: 1; text-align: center; }
#calendrier_events img{ width: 100%; }

#branches{ padding: 2em 10%; }
#branches div{ display: flex; flex: none; justify-content: space-between;  }
#branches div span{ width: 30%; }
#branches div span h2{ color: var(--main-text); font-size: 1.25em; }

#contact{ padding: 2em; background: var(--main-color); color: var(--reverse-text); }
#contact div{ display: flex; flex: none; justify-content: space-around;  }
#contact h1{ text-align: center; }
#contact .sidepanel{ width: 33%; }
#contact .sidepanel p{ margin-bottom: 4em; }
#contact .sidepanel span:not(.material-icons){ width: 33%; }
#contact .sidepanel h2{ display: flex; flex: none; align-items: center; }
#contact .sidepanel h2 .material-icons{ margin-right: 0.5em; }
#contact .sidepanel lab{ display: inline-block; width: 6em; color: var(--sec-color); }
#contact .sidepanel .ou{ color: var(--sec-color); margin-top: 3em; }
#contact .form{ width: 55%; }

#contactForm .contactForm{ font-size: 0.88em; }
#contactForm .contactForm div{ flex-wrap: wrap; }
#contactForm .contactForm input:not([type="checkbox"]), #contactForm .contactForm select, #contactForm .contactForm textarea{
  color: var(--main-text); border-bottom: 3px solid var(--reverse-text);
}
#contactForm .contactForm lab{ font-size: 1.2em; }
#contactForm .contactForm .cta{ color: var(--main-color); background: var(--reverse-text); }



#faire in{ display: flex; flex: none; align-items: stretch; color: var(--reverse-text); }
#faire in span{ 
    display: flex; flex: none; align-items: center; justify-content: center; 
    width: 34.5%; height: 22em; padding: 1em; margin-right: -1.5%;
    background: center center no-repeat; background-size: cover; 
    mask: url(images/faire/mask_center.svg) center center no-repeat; mask-size: 100% 100%;
}
#faire in span:first-child{ mask-image: url(images/faire/mask_left.svg) }
#faire in span:last-child{ mask-image: url(images/faire/mask_right.svg) }

#faire in span div{ text-align: center; font-size: 1.5em; text-shadow: 0 0 0.25em #000, 0 0 0.33em #000, 0 0 0.5em #000, 0 0 0.75em #000; }
#faire in span div h2{ font-weight: 900; }
#faire in span div h3{ font-weight: 800; margin: 0.33em 0; padding: 0; }
#faire in .camps{ background-image: url(images/faire/camps.jpg); }
#faire in .activites{ background-image: url(images/faire/activites.jpg); }
#faire in .activites h3{ width: 16em; }
#faire in .decouvrir{ background-image: url(images/faire/decouvrir.jpg); }
#faire .faireBas{ width: 100%; aspect-ratio: 1900/334; margin-top: 0.66em; background: url(images/faire/faire_bas.jpg) center center no-repeat; background-size: cover;  }
#faire nav{ text-align: center; margin: 1.5em 0 0; font-size: 1.5em; }
#faire nav .inscr{ background-image: linear-gradient(to bottom right, var(--sec-color), var(--sec-color-grad) ); }