/* 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');
/*
font-family: 'Barlow Condensed', sans-serif;
font-family: 'League Spartan', sans-serif;
font-family: 'Raleway', sans-serif;
*/

 :root{
   --color1: #806497;
   --hauteurMenu : 140px;
   --colorbg: rgba(255,255,255,1);
   --color: rgba(0,0,0,1);
   --val1: 37vh;
 }
 @media screen and (max-height:600px) {
   :root {
     --val1: 25vh;
   }
 }

/* Reset */
html{height: 100%; }
body{width: 100%; height: 100%; overflow-x: hidden; background-color:var(--colorbg); color:var(--color); margin: 0; padding: 0;
    font-family: 'Raleway', sans-serif;
 /*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; }
p, h1, h2, h3, h4, h5, h6, a, svg, path{transition: color 2s, border-color 2s, fill  2s, background-color  2s;}

::selection {background:var(--color1); color:var(--colorbg); transition: all 2s}

/* typo */
body, p, h1, h2, h3, h4, h5, h6{font-family: 'Raleway', sans-serif;}

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

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

/* SVG */
svg .pict{fill:var(--color)}

/* layout */
#page{display: flex; width:100vw; flex-direction: row}
#menu{width:100vw; height: var(--hauteurMenu); position: fixed; bottom: 0; display: flex; flex-flow: row; z-index: 1000;background: white;}


main{width:100%; }
main div.contenus{margin: auto; }
main.leave{position:fixed;}
main.home{width:100vw; padding:0; background: black; height: calc(100vh - var(--hauteurMenu)); left: 0}
.mySwiper {height: 100%;}
.mySwiper .swiper-slide{width: calc(100% - 60px);}
.mySwiper img{height: 100%; width: 100%; object-fit: cover;}

/* menu */
#menu>*{margin-left: 35px;}
#menu header h1{margin-bottom:5px; margin-top:0;font-size: 34px;font-weight: 600;transition: all 2s; transform-origin: bottom left;}
#menu header h2{margin-top:7px;}
#menu header {transition: all 2s; margin-top: 0px}
#menu .main_menu { margin-top: calc(var(--hauteurMenu) /2 - 5px);}

#menu .main_menu li{padding: 3px; display: inline-block; margin: 0 10px}
#menu .main_menu a{font-family: 'League Spartan',sans-serif; font-weight: 400; font-size: 20px; transition: none; }
#menu .main_menu li.active a{border-bottom: none; color: var(--color1)}
#menu .main_menu a.btn_newsletter{font-weight: 700; font-size: 16px}
#menu .main_menu li .ssmenu{position: absolute; bottom: 35px; opacity: 0; text-align: left; transition: opacity .5s .25s; background: #FFF;
    min-width: 150px;
    padding: 5px;
    margin-left: -5px;}
#menu .main_menu li .ssmenu li{margin: 0; display: block;}
#menu .main_menu li .ssmenu a{font-weight: 500; line-height: .8em; color:#000}
#menu .main_menu li .ssmenu a:hover{color: var(--color1); text-decoration: underline;}
#menu .main_menu li .ssmenu li.active a{color: var(--color1); text-decoration: underline;}
#menu .main_menu li:hover .ssmenu{opacity: 1; transition-delay: 0s;}
#menu .main_menu a:hover{color: var(--color1);}

#menu .logo{background: url('../images/LCV_logo.png') no-repeat center center; background-size: contain; width: 100px; height: 80px; width: var(--hauteurMenu);
height: var(--hauteurMenu);}

#menu footer{bottom: 30px; position: absolute;}
.rs svg {border:1px solid var(--color); margin-right:6px;}
a:hover  svg{background: var(--color);transition-duration: .1s}
a:hover  path{fill: var(--colorbg);transition-duration: .1s}

/*
div.actualites{
  position: absolute;
  right: 100px;
  bottom: 200px;
  overflow: hidden;
  width: 390px;
}
div.actualites p,
div.actualites h1,
div.actualites h2{margin: 0; color:#FFF;}
div.actualites h1{margin-top:8px;}

div.actualites .losange{
  width: 80px;
  margin: 20px auto 10px;
}

div.actualites .custom-scroll{
  height:480px;
  background: #806497C8;
  padding:10px 20px 20px;
}
div.actualites .scrollbot-scrollbar{
  background: #806497  !important;
} */


/* 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;
} */


/* home */
div.news{
  position: fixed;
  right: 100px;
  bottom: 200px;
  background: #806497C8;
  width: 390px;
  height:auto;
  z-index: 100;
  color:#FFF;
  padding: 25px 20px 10px;
  overflow-y: auto;
  max-height: calc(100vh - 250px);
}
div.news *{margin: 0}
div.news h2{font:600 28px/1 'League Spartan',sans-serif; margin:1em 0 .5em; margin-top:8px; }
div.news h3{font: 400 20px/1.1 'League Spartan',sans-serif;}

div.news .losange{
  width: 80px;
  margin: 20px auto 10px;
  margin-right: 0;
}
/* main */
div.contenus{display: flex; max-height: calc(100vh - var(--hauteurMenu)); height: calc(100vh - var(--hauteurMenu)); overflow: hidden; justify-content: space-between; max-width: 1400px; margin: auto;}
div.contenus .col_1sur2{width: 50%;}
div.contenus .col_1sur2 img{height: 100%; width: 100%; object-fit: cover;}
div.contenus .col_1sur3{width: calc(33% - 10px); max-height: 100%;}
div.contenus_page {
  padding: 0 20px;
  max-width: 900px;
  margin: auto;
}

/* page SPECTACLE */
.spectacle div.contenus{max-width: none; justify-content: left}
.spectacle .textes{padding:25px 25px 0; display: flex; max-height: 100vh; justify-content: space-between; max-width: 700px}
.spectacle .texte1 h1{font-size: 42px; margin-bottom: 0; }
.spectacle .texte1{width: calc(66% - 10px);}
.spectacle .texte{overflow: auto; margin-top: 30px;}
.spectacle .texte section:first-child{margin-top:0;}
.spectacle .texte section:last-child{margin-bottom:0px;}
.spectacle .texte p:first-child{margin-top: 0;}
.spectacle .texte1 .intro p{font-family: 'League Spartan',sans-serif; font-size: 22px; line-height: 1.1em; font-weight: 600; margin-top: 0;}
.spectacle .texte2{width: calc(33% - 10px); color: var(--color1);}
.spectacle .texte2 p{font-family: 'Barlow Condensed', sans-serif; line-height: 1.1em; margin: 0;}
.spectacle .texte2 h1,
.spectacle .texte2 h2{font: 500 20px/1.1 'League Spartan',sans-serif;text-decoration: uppercase;margin: 0;margin-top: 20px;text-decoration: underline;}
.spectacle .texte2 *{color: var(--color1); }
.spectacle .texte2 .text_info{ overflow: auto; padding-right: 10px; padding-bottom:10px;}
.spectacle .texte2 .text_info *:first-child{margin-top:0}
.spectacle .texte2 .liens_pdf ul{margin-top: 15px}
.spectacle .texte2 .liens_pdf ul li{font-family: 'League Spartan', sans-serif; font-weight: 600; line-height: 1em;}
.spectacle .texte2 .liens_pdf ul li{margin: 0; padding-left: 0px; color: var(--color1); }
.spectacle .texte2 .liens_pdf ul li:before{content:">"; margin-right: 7px; color: var(--color1); }
.spectacle #vignette{margin-top:10px;}
.spectacle #vignettes img{width: 30px; margin-top: 10px; margin: 0; cursor: pointer  }



/* page COMPAGNIE */
.compagnie div.contenus{margin: auto; padding: 50px 50px 0; max-width: 1600px;}
@media screen and (min-width: 1730px) {
  .compagnie div.contenus{margin-left: 120px;}
}


.compagnie div.contenus .col_1sur3{width: calc(40% - 40px);padding-right: 0px; max-width: 500px; }
.compagnie div.contenus .col_1sur3.bio{width: calc(30% - 0px); max-height: 100%; padding-right: 0px;  max-width: 450px; }
.entetebio{display: flex;  align-items:center; height: 170px; margin-bottom: 30px;}
.entetebio img{width:50%; max-width: 170px; max-height: 100%}
.entetebio div.titre{width:50%; text-align: center; background: url('../images/ligne.svg') top center no-repeat; background-size: 75px;}
.entetebio div.titre h1{text-transform: uppercase; color:var(--color1); margin:20px auto 0; width: 160px; text-align: center;font-size: 24px; max-width: 100%;}
.textbio {height:calc(100% - 200px); overflow: auto; padding-right: 12px;}
.textbio p:first-child{margin-top: 0;}
.textbio p:last-child{margin-bottom: 0;}
.content_pres{height: calc(100%); overflow: auto; padding-right: 0px;}

.compagnie .intro p{font-family: 'League Spartan', sans-serif; font-size: 22px; line-height: 1.1em; font-weight: 600; margin-top: 0;}
.compagnie .liens_cv {margin-top:25px;}
.compagnie .liens_cv *{font-family: 'League Spartan',sans-serif; font-size: 18px; line-height: 1.2em; font-weight: 600; margin-top: 0;}
.compagnie .liens_cv ul li{margin: 0; padding-left: 0px;}
.compagnie .liens_cv ul li:before{content:">"; margin-right: 7px;}

.contenus_page{margin:auto; max-width: 900px; margin-top: 70px; padding: 0 50px;}


/* page AGENDA */

main.agenda{margin: 160px 30px 0}
@media screen and (max-height: 840px) {
  main.agenda {
    margin: 5vh 30px 0;
  }
}
#swiper_agenda {margin-left: 310px;}
#swiper_agenda .swiper-slide{width:300px; height:480px; margin-right: 20px; color:white; }
#swiper_agenda .swiper-slide:last-child{margin-right: calc(100vw - 610px);}
#swiper_agenda .swiper-slide .cadre{width:300px; height:450px; background-color:#e17476; background-size: cover; background-position: center center; padding: 15px; margin-bottom: 8px;}
#swiper_agenda .swiper-slide .cadre.img:before{content:""; position: absolute; width:300px; height:450px; background-color:#1700287a; top:0; left:0;}
#swiper_agenda .swiper-slide .cadre *{color:white}
#swiper_agenda .swiper-slide h2{margin: 0; font-family: 'League Spartan',sans-serif; font-size: 30px;  line-height: 1em; font-weight: 600; text-transform: uppercase;}
#swiper_agenda .swiper-slide h3{margin: 0; font-family: 'League Spartan',sans-serif; font-size: 20px;  line-height: 1em; font-weight: 500; text-transform: uppercase;}
.nav_annee{margin:20px 0 ; font-family: 'League Spartan',sans-serif; font-size: 24px;  line-height: 1em; font-weight: 300; text-transform: uppercase; margin-left: 310px;}
.nav_annee span.active{color: var(--color1)}
.nav_annee span{cursor: pointer;}
#swiper_agenda .swiper-slide .lien_ext{margin:10px 0; font-family: 'League Spartan',sans-serif; font-size: 16px; font-weight: 600}

#swiper_agenda .swiper-button-next, #swiper_agenda .swiper-button-prev{
  position: absolute;
  top: -44px;
  width: 21px;
  height: 20px;
  margin-top: 0;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}
#swiper_agenda .swiper-button-next:after, #swiper_agenda .swiper-button-prev:after{
  font-size: 22px;
}
#swiper_agenda .swiper-button-next{
right: 45px;
}
#swiper_agenda .swiper-button-prev{
left: -320px;
}


/* page Contact */
.contact div.contenus_page{margin-bottom: 140px;}


/* prevenex */

.prevnext *, .prevnext{color: var(--color1)}
.prevnext .inter{margin:0 7px;}
.prevnext .fleche{margin-top:2px;}
#swiper_agenda{overflow: visible;}
#swiper_agenda .swiper-slide{transition: opacity .5s}
#swiper_agenda .passe{opacity: .4; transition: opacity .5s}
#swiper_agenda .passe *{opacity: .8; transition: opacity .5s}
#swiper_agenda .passe div.cadre+ a.lien_ext{display: none}

#swiper_agenda .passe:hover{opacity: 1;}
#swiper_agenda .passe:hover *{opacity: 1;}
/* forms */
textarea, input {border: 1px solid var(--color); display: block; width: 100%; background: transparent; font-family: inherit; font-size: inherit; line-height: inherit; color: var(--color); margin-bottom:.5em; padding:.5em}
textarea:focus, input:focus {outline: none !important;}
.validate input {width:auto; background: var(--color); color:#FFF; padding:.5em 1em}


/*  */
.contenus footer{margin:150px 0 0px; display: flex; min-height: 80px;align-items:center;}
.contenus footer div.col{width: 50%; font-weight: 300;}
.contenus footer div.col a{padding:2px 0 1px;font-size: 18px;font-weight: 600;line-height: 1;}
.contenus footer div.col a:hover span.title{border-bottom: 1px solid}
.contenus footer div.prev{text-align: left ; padding-right: 20px;}
.contenus footer div.next{text-align: right; padding-left: 20px;}
.contenus footer span.dir{font-weight:800;color:var(--vert); font-size: 10px; padding: 7px 0;letter-spacing: 2px; text-transform: uppercase;}

/* page creations */


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

/* 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(--color);
  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);
}

@media screen and (max-width: 428px) {
  #menu_toggle{
    display: block;
  }

  #menu {
    width: 100%;
    position: fixed;
    height: auto;
    background: var(--colorbg);
    z-index: 1000;
    min-height: auto;
    text-align: center;
    max-height:50px;
    overflow: hidden;
    display: block;
    bottom: auto;
	}
  #menu.on {
    max-height:500px;
    border-bottom: 1px solid var(--color);
  }

  #menu > * {
    margin-left: 0px;
	}
  #menu header {
     margin-top: 12px;
     text-align: left;
     margin-left: 0;
   }
	#menu.on header h1 {
    font-size: 28px;
    margin-top: 15px;
	}

  #menu .main_menu{
    position: relative;
  }
  #menu header h2 {
    margin-top: 0;
    font-size: 18px;
  }
  #menu header h1 {
    font-size: 18px;
    margin-top: 12px;
  }
  #menu .main_menu ol li{
    text-align: center;
    display: block;
  }
  #menu .main_menu a{
    font-size: 24px;
  }
  #menu footer {
    margin-bottom: 20px;
    margin-top:20px;
    position: relative;
    bottom: 0;
  }
  #menu .logo{
    width: 100px;
    height: 75px;
  }
  #menu .main_menu li .ssmenu {
    position: relative;
    bottom: auto;
    opacity: 1;
    text-align: center;
    transition: opacity .5s .25s;

  }
  #menu .main_menu li .ssmenu a{
    font-size: 18px;
  }
  main.home{height: calc(100vh - 70px);}

  div.news {
    --hauteurMenu : 70px;
    position: absolute;
    right: auto;
    bottom: auto;
    width: 390px;
    height: 480px;
    padding: 10px 20px 20px;
    overflow-y: auto;
    top: 160px;
    margin: auto;
    max-width: 100%;
    left: 50%;
    transform: translate(-50%, 0);
  }
	main {
    left: 0;
    margin: 0;
    width: 100%;
    top: 0;
    margin-top: 70px;
  }
  div.contenus {
    display: block;
    max-height: none;
    height: auto;
  }

  div.contenus .col_1sur2{width: 100%;}
  .contenus footer {min-height: 50px;}
  .bloc_titre h1 {font-size: 50px !important;}
  .compagnie div.contenus .col_1sur3{width: 100%;}
  .compagnie div.contenus{padding: 0}
  .bloc_texte_2col{display: block;}
  .bloc_texte_2col .col {width: 100%;}
  div.contenus .col_1sur3{margin-bottom: 50px;}

  main.compagnie {padding: 20px;}
  .compagnie div.contenus .col_1sur3.intro{width: 100%; max-width: none; }
  .compagnie div.contenus .col_1sur3.bio{width: 100%; max-width: none; padding-right: 0px;}


  .spectacle .textes{display: block; max-height:none}
  .spectacle .texte2,
  .spectacle .texte1{width:100%}
  .contenus footer div.prev {
    margin-left:0px;
  }

}