/* STYLES.CSS */

/* imports */
/* @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300&family=League+Spartan:wght@300;400;600;700&family=Raleway:ital,wght@0,400;0,600;1,400;1,600&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
/* <weight>: Use a value from 100 to 900 */
/*
font-family: 'Barlow Condensed', sans-serif;
font-family: 'Jost', sans-serif;
font-family: 'Raleway', sans-serif;
*/

:root{
   --color1: #0df2c9;
   --color2: #000000;
   --colorBg: #fff;

   --colorBgPopup: #fff;
   --colorTxtPopup: #000000;
   --colorFondPopup: #0df2c9;
   /* --color1: #fff;
   --color2: #000;
   --colorBg: #0df2c9; */

   /* --color1: #06b394;
   --color2: #fff;
   --colorBg: #000000; */
}

/* body.night {
  --color1: #06b394;
  --color2: #fff;
  --colorBg: #000000;

  --color1: #fff;
  --color2: #000;
  --colorBg: #0df2c9;
} */
body.pos2 {
  --color1: #fff;
  --color2: #000;
  --colorBg: #0df2c9;
 --colorBgPopup: #fff;
 --colorTxtPopup: #000000;
 --colorFondPopup: #0df2c9;
}

body.pos3 {
  --color1: #06b394;
  --color2: #fff;
  --colorBg: #000000;
 --colorBgPopup: #fff;
 --colorTxtPopup: #000000;
 --colorFondPopup: #06b394;
}

body svg *{
   transition: fill 1s, stroke 1s;
}
body.night.start svg *{
  transition: fill 0s, stroke 0s;
}

#toggle-box-checkbox{cursor: pointer;}
#toggle-box-checkbox line{stroke:var(--color1)}
#toggle-box-checkbox line{transition: all 1s; stroke-width:3px}
.pos2 #toggle-box-checkbox line {stroke: var(--color2);}
.pos3 #toggle-box-checkbox line {stroke: var(--color2);}

body:not(.pos2, .pos3) #toggle-box-checkbox line:first-child{stroke-width:7px}
body.pos2 #toggle-box-checkbox line:nth-child(2){stroke-width:7px}
body.pos3 #toggle-box-checkbox line:nth-child(3){stroke-width:7px}

/* Reset */
html{height: 100%; width: 100%; }
body{width: 100%; height: 100%; margin:0; overflow-x: hidden; color:var(--color2); margin: 0; padding: 0;
    font-family: 'Jost', sans-serif; background-color: var(--colorBg);
 /*transition:background-color 2s;*/}
* {box-sizing: border-box; position: relative; }

img{max-width: 100%; height: auto;}
figure{margin:0}
ul, ol{margin: 0; display: block; text-align: left; padding: 0; }
li{margin: 0.2em 0; list-style: none; min-height:1.36em; padding-left: 6px; }
div, section{box-sizing: border-box; position: relative; display: block;  }
blockquote {margin-inline-start: 0px; margin-inline-end: 0px; }
p, h1, h2, h3, h4, h5, h6{margin-block-start: 0px; margin-block-end: 0px; margin-inline-start: 0px; margin-inline-end: 0px; }
a{transition: color .1s }
::selection {background:var(--color1); color:var(--color2); transition: all 2s}
/* typo */
body, p, h1, h2, h3, h4, h5, h6{font-family: 'Jost', sans-serif; }

p{font:400 15px / 1.35 'Jost',sans-serif; margin:.5em 0 .5em;}
h1{font:600 28px/1 'Jost',sans-serif; margin:1em 0 .5em}
h2{font:600 24px/1.1 'Jost',sans-serif;margin:1em 0 .5em}
h3{font:600 18px/1.35 'Jost',sans-serif;margin:1em 0 .5em}
a{text-decoration: none; color:var(--color2); outline: none}
sup {vertical-align: super; font-size: smaller; line-height: 1; }
strong{font-weight: bold}

/* blocs */
div.petit p{font-size: 12px}

/* SVG */


/* layout */
#page{width:100vw; height:100vh; margin: 0; overflow-x: hidden}
section{margin:0px auto; width: calc(100% - 20px); max-width: 960px; padding: 10px 10px; text-align: center}
main{width:100%; height:100vh;}
main div.contenus{margin: auto; }
main.leave{position:fixed;}
main.home{width:100vw; height:100vh; padding:0; left: 0;
display: flex;
flex-flow: column;
justify-content: space-between;;}


/* logo */
#logo_itineraire_conseille{width: 800px; height: 240px; margin:0px auto 0px; min-width: 800px; min-height: 240px}
#valeurs{display: flex; flex-flow:row; justify-content: center; height: 300px}
#valeurs .val{margin:0 40px; width: 30%; text-align: center;}
#valeurs .val .txt{position: absolute; width: 100%; font-size: 24px; }


#valeurs .txt strong{font-weight: normal; height: 22px; position: relative;
display: inline-block;}
#valeurs .txt strong:before{content:""; display: block; position: absolute; line-height: 1; width: 100%; height: 7px; background: #0df2c9; top:10px; mix-blend-mode: multiply; }
#valeurs .txt span{opacity: 0; height: 22px; display: inline-block; line-height: 1;}
#valeurs .val.on .txt span{transition: opacity .2s; opacity: 1; }
#valeurs .val.on svg polygon{fill: #0df2c9}

/*
code="";
for(i=0; i<100; i++){
code+="#valeurs .val.on .txt span:nth-child("+i+"){transition-delay:"+i*.1+"s} ";};
console.log(code);
*/



section#header h2{
  text-align: center;
  line-height: 0;
  font-weight: 560;
  font-size: 25px;
}
section#header h2 br{
  display: none;
}
  /* transition: all 1s; */
}
section#header h2 span{
  position: relative;
  /* transition: all 1s; */
}
section#header h2 span svg{
 position: absolute;
 top: -2px;
 z-index: -1;
}
section#header h2 span svg path{
  stroke:var(--color1);
  stroke-width: 3px;
}

section#pres{
  margin:0 auto;
}

section#pres .texte{
  max-width: 750px;
  font-size: 20px;
  text-align: left;
  margin: auto;
}
section#pres .texte p{
  font-size:18px;
  text-align: left;
}
section#pres .texte p strong {
  font-weight: normal;
  position: relative;
  display: inline-block;
}
section#pres .texte p strong::before {
  content: "";
  display: block;
  position: absolute;
  line-height: 1;
  width: 0%;
  height: 14px;
  background: var(--color1);
  top: 6px;
  z-index: -1;
  transition: width 1s, color 1s, background-color 1s;
}
section#pres .texte p strong.on::before {
  width: 100%;
}
div#rencontre{
  text-align: center;
}
div#rencontre span{
  display: inline-block;
  transition: transform 1s;
  font-weight: 500;
  font-size: 24px;
  margin: 15px;
}
div#rencontre span.on{
  transform: translate(0,0) !important;
}





/* footer */
footer{
  width: 100%;

  height: 150px;

}
footer div.content{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  height: 150px;
  justify-content: space-between;
  overflow: hidden;

  height: 200px;
  padding-top: 50px;
  margin-top: -50px;
}

footer a.sendmail{text-align: center; display: block}
footer a.sendmail p{font-size: 20px; margin: 0; font-weight: 550;}
footer a.sendmail svg {display: inline-block;}
footer a.sendmail:hover svg rect{fill:var(--color1);}
footer a.sendmail:hover{color: var(--color2)}


footer .contact{text-align: center}
footer a:hover{
  color: var(--color1)
}

footer div.col_gauche{
  width: 25%;
  text-align: center;
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  align-items: center;
}
footer div.col_droit{
  color: #FFF;
  flex-flow: wrap;
  width: 25%;
  padding-right: 40px;
  text-align: right;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
footer div.rs{
}
footer div.menu2_footer {
  margin-bottom: 19px;
  font-size: 13px;
  width: 100%;
  text-align: center;
  padding: 0 20px;
}



.swiper-button-next, .swiper-button-prev {
  right: -18px;
  left: auto;
  background: var(--color1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--color2);
  top: calc(50% + 37px);
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}
.swiper-button-prev {
  left: -18px;
}
.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 20px;
  color: var(--color2);
}
/* Custom scroll  */
.custom-scroll .scrollbot-scrollbar-holder{
  width: 10px;
  height: 100%;
  position: absolute;
  left: 10px !important;
  background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;
  border-radius: 15px;
  display: block;
  height: calc(100% - 20px) !important;
  top: 10px  !important;
}

.custom-scroll .scrollbot-inner-parent{
  padding-left: 30px !important;
  padding-right: 0px !important;
}
/* .scrollbot-inner-parent{
  padding-right: 40px;
} */




/* fancybox */
.fancybox-bg {background:var(--colorFondPopup)};
.fancybox-caption {color: var(--colorTxtPopup);}
.fancybox-button svg path {fill: var(--colorBgPopup);}

.fancybox-content {
  background: var(--colorBgPopup);
  display: inline-block;
  margin: 0;
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 44px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}

.fancybox-content{
  border-radius: 20px;
  width:800px;
  min-height: 500px;
  max-height: calc(100vh - 50px);
  filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.5));
}
.fancybox-content .contenus_page *{
  color: var(--colorTxtPopup);
}
.fancybox-slide--html .fancybox-close-small {
  background: var(--colorFondPopup);
  opacity: 1;
  color: var(--colorTxtPopup);
  border-radius: 50%;
  padding: 0px;
  width: 26px;
  height: 26px;
  top: 15px;
  right: 15px;
}
.fancybox-button svg {
  display: block;
  height: 100%;
  overflow: visible;
  position: relative;
  width: 100%;
}
.fancybox-button svg path {
  fill: var(--colorTxtPopup);
  stroke-width: 0;
}
.fancybox-navigation .fancybox-button--arrow_left, .fancybox-navigation .fancybox-button--arrow_right {
  background: #FFF;
  opacity: 1;
  color: var(--colorTxtPopup);
  border-radius: 50%;
  padding: 0px;
  width: 26px;
  height: 26px;
  margin: 30px;
}
.fancybox-navigation .fancybox-button svg path {
  fill: var(--colorTxtPopup);;
  stroke-width: 0;
}
.fancybox-navigation .fancybox-button div {
  padding: 3px;
}

figure[data-ratio] img{width: 100%; height: 100%; object-fit: contain}
figure[data-crop] img{object-fit: cover}
figure[data-ratio="auto"] {aspect-ratio: auto; }
figure[data-ratio="16/9"] { aspect-ratio: 16 / 9;}
figure[data-ratio="10/8"] { aspect-ratio: 10 / 8;}
figure[data-ratio="21/9"] { aspect-ratio: 21 / 9;}
figure[data-ratio="7/5"] { aspect-ratio: 7 / 5;}
figure[data-ratio="4/3"] { aspect-ratio: 4 / 3;}
figure[data-ratio="3/2"] { aspect-ratio: 3 / 2;}
figure[data-ratio="3/1"] { aspect-ratio: 3 / 1;}

div.video iframe {
  width: 100%;
  height: 390px;
}

/* Important styles */
#menu_toggle {
  display: none;
  width: 30px;
  height: 30px;
  margin: 30px auto 10px;
  cursor: pointer;
  position: fixed;
  top: 16px;
  margin: 0;
  right: 20px;
}
#menu_toggle span:after,
#menu_toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#menu_toggle span:after{
  top: 9px;
}
#menu_toggle span {
  position: absolute;
  display: block;
  top: 14px;
}
#menu_toggle span,
#menu_toggle span:after,
#menu_toggle span:before {
  width: 100%;
  height: 2px;
  background-color: var(--color2);
  transition: all 0.3s, background-color 2s;
  backface-visibility: hidden;
  border-radius: 0px;
}
#menu_toggle.on span {
  background-color: transparent;
  transition: all 0.3s, background-color 0s;
}
#menu_toggle.on span:before {
  transform: rotate(45deg) translate(5px, 5px);
}
#menu_toggle.on span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}






/* Itineraire Conseillé */

@media screen and (min-height: 950px) {
  footer{

  }
}

@media screen and (max-width: 860px) {
  #logo_itineraire_conseille{
    max-width: 100%;
    min-width: 0;
    max-height: 100vw;
    width: 800px;
    height: 360px;
    transform: scale(1.2);
  }

  #logo_itineraire_conseille .partie1{
    transform: translate(100px, -50px);
  }
  #logo_itineraire_conseille rect.partie1{
    transform:translate(90px, -34px) scaleX(1.1) rotate(-5deg);
  }
  #logo_itineraire_conseille .partie2{
    transform: rotate(-10deg) translate(-113px, 80px);
  }
  #logo_itineraire_conseille rect.partie2{
    transform: rotate(-10deg) translate(-113px, 40px);
  }

  section#header h2 {
    text-align: center;
    line-height: 30px;
    font-weight: 560;
    font-size: 25px;
  }
  /* section#header h2 span{line-height: 35px;} */


  section#pres .texte p{
    text-align: center;
  }

  section#pres{
    padding: 10px 25px;
  }

  section#pres {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 460px) {
  #logo_itineraire_conseille{
    height: 220px;
  }
}


@media screen and (max-width: 580px) {
  section#header h2 br.br1{
    display: inline-block;
  }
}
@media screen and (max-width: 450px) {
  section#header h2 br.br2{
    display: inline-block;
  }
}