/* MOBILE FIRST */

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
}


body{
	font-family: var(--fontFamily);
	font-size: var(--textSize);
	line-height: 1.3;
	margin: 30px;
}

a{
	text-decoration: none;
	color: #000;
}

a:hover{
	text-decoration: underline;
}

p{
	margin-bottom: 1rem;
}

li.active a{
	text-decoration: underline;
}

img{
	width: 100%;
}

main{
	margin-bottom: 150px;
}

/* fade entre les pages */
#fade{
  opacity: 0;
  transition: opacity 1s ease-out;
}

#fade.loaded{
  opacity: 1;
}

select{
	background: #FFF;
	border: 1px solid #000;
	width: 150px;
}

.glightbox-clean .gslide-title{
	font-family: var(--fontFamily);
	font-weight: 600;
	line-height: 1.2;
}

.show-for-small-only{
	display: block;
}

.hide-for-small-only{
	display: none;
}

/* ---- H E A D E R -----*/
header{
	position: fixed;
	width: 100%;
	top:0;
	left:0;
	right: 0;
	padding: 15px;
	z-index: 1000;
	background: #FFF;
}

header.row{
	margin:0;
}

header .site__logo figure{
	width: 25px;
}

header .site__logo h1{
	text-transform: uppercase;
	font-weight: bold;
	margin-left: 10px;
}

header nav{
	text-transform: uppercase;
	max-height: 0;
	overflow: hidden;
	margin: 0;
	margin-top: 10px;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
	transition: max-height 0.5s linear;
}

header nav.row{
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

header nav.active {
	max-height: 100vh;
	overflow: auto; 
}

header nav ul.row{
	margin-left: 10px;
	margin-right: 0;
}

header nav li{
	font-weight: 600;
}

header .mobile__menu_btn {
  display: block;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  height: 24px;
  width: 24px; 
}

header .mobile__menu_btn span {
  display: block;
  background: #000;
  height: 2px;
  width: 26px;
  position: absolute;
  transition: all 0.5s ease;
}

header .mobile__menu_btn span:nth-child(1) { top: 0px; }
header .mobile__menu_btn span:nth-child(2) { top: 8px; }
header .mobile__menu_btn span:nth-child(3) { top: 16px; }
header .mobile__menu_btn .transparent { opacity: 0; }

header .mobile__menu_btn .rotate-top {
  -ms-transform: rotate(45deg);
  transform: rotatez(45deg);
  -webkit-transform-origin: 0%;
  left: 2px; 
}

header .mobile__menu_btn .rotate-bottom {
  -ms-transform: rotate(-45deg);
  transform: rotatez(-45deg);
  -webkit-transform-origin: 15%; 
}

header .social-network,
header .languages{
	margin-top: 5px;
}

header .social-network li,
header .languages li{
	margin-right: 10px;
}

header .languages li::after{
	content: "/";
	color: #000;
	margin-left: 5px;
}

header .languages li:last-child::after{
	content: none;
}



/* Couleur specifique du header suivant les pages */
body[data-template="home"] header,
body[data-template="spectacle"] header,
body[data-template="personne"] header {
	background: transparent;
}

body[data-template="home"] header .header__title a,
body[data-template="spectacle"] header .header__title a,
body[data-template="personne"] header .header__title a{
	color: #FFF;
}

body[data-template="home"] header .site__logo figure,
body[data-template="spectacle"] header .site__logo figure,
body[data-template="personne"] header .site__logo figure{
	filter: invert(1);
}

body[data-template="home"] header nav li a,
body[data-template="spectacle"] header nav li a,
body[data-template="personne"] header nav li a{
	color: #FFF;
}

body[data-template="home"] header .mobile__menu_btn span,
body[data-template="spectacle"] header .mobile__menu_btn span,
body[data-template="personne"] header .mobile__menu_btn span{
	background: #FFF;
}

body[data-template="home"] header .languages li::after,
body[data-template="spectacle"] header .languages li::after,
body[data-template="personne"] header .languages li::after{
	color: #FFF;
}

/* changement de style du header au scroll sur les page spectacle et personne */
body[data-template="spectacle"] header,
body[data-template="personne"] header{
	transition: all 0.3s ease;
}

body[data-template="spectacle"] header.scrolled,
body[data-template="personne"] header.scrolled{
	background: #FFF;
}

body[data-template="spectacle"] header.scrolled .header__title a,
body[data-template="personne"] header.scrolled .header__title a{
	color: #000;
}

body[data-template="spectacle"] header.scrolled .site__logo figure,
body[data-template="personne"] header.scrolled .site__logo figure{
	filter: invert(0);
}

body[data-template="spectacle"] header.scrolled nav li a,
body[data-template="personne"] header.scrolled nav li a{
	color: #000;
}

body[data-template="spectacle"] header.scrolled .mobile__menu_btn span,
body[data-template="personne"] header.scrolled .mobile__menu_btn span{
	background: #000;
}

body[data-template="spectacle"] header.scrolled .languages li::after,
body[data-template="personne"] header.scrolled .languages li::after{
	color: #000;
}

/* ----- H O M E -------- */
body[data-template="home"]{
	overflow: hidden;
}

.home__cover{
	margin: -30px -30px;
	height: 100vh;
	width: 100vw;
}

.home__cover img{
	width:100%;
	height: 100%;
	object-fit: cover;
}


/* ----  P A G E   S P E C T A C L E S ----  */

.spectacles-wrapper,
.agenda-wrapper,
.default__page,
.pro-wrapper{
	margin-top: 120px;
}

.spectacles-wrapper h2{
	font-size: var(--h2Size);
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.spectacles-wrapper section:nth-child(1){
	margin-bottom: calc(var(--margin) * 2);
}

.spectacles-wrapper ul.row{
	margin:0;
}

.spectacles-wrapper .spectacles__list li{
	position: relative;
	padding: 0;
	margin-bottom: var(--margin);
}

.spectacles-wrapper .spectacles__list li .spectacle__cover__overlay{
	transition: opacity 0.3s ease;
}

.spectacles-wrapper .spectacles__list li a:hover .spectacle__cover__overlay{
	opacity: 25%;
}


.spectacles-wrapper .spectacle__cover__overlay{
	width: 100%;
	height: 100%;
	opacity: 60%;
	position: absolute;
}

.spectacles-wrapper .spectacles__list .spectacle__title {
	width: 100%;
	position: absolute;
	z-index: 100;
}

.spectacles-wrapper .spectacles__list .spectacle__title.pos-bottom{
	bottom: calc(var(--margin) * 2)	;
}

.spectacles-wrapper .spectacles__list .spectacle__title.pos-top{
	top: calc(var(--margin) * 2);
}

.spectacles-wrapper .spectacles__list .spectacle__title.pos-middle{
	top: 50%;
	transform: translateY(-50%);
}

.spectacles-wrapper .spectacles__list .spectacle__title.size-normal h3{
	font-size: var(--textCoverSize);
}

.spectacles-wrapper .spectacles__list .spectacle__title.size-big h3{
	font-size: calc(var(--textCoverSize) + 2vw);
}

.spectacles-wrapper .spectacles__list .spectacle__title.size-big h3 span{
	font-size: calc(25px + 1vw);
}

.spectacles-wrapper .spectacles__list .spectacle__title.size-bigbig h3{
	font-size: calc(var(--textCoverSize) + 4vw);
}

.spectacles-wrapper .spectacles__list .spectacle__title.size-bigbig h3 span{
	font-size: calc(25px + 1.2vw);
}

.spectacles-wrapper .spectacles__list .spectacle__title h3{
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
	font-weight: 900;
	font-size: var(--textCoverSize);
	line-height: 0.9;
}

.spectacles-wrapper .spectacles__list h3 span{
	text-transform: none;
	font-weight: normal;
	font-size: 25px;
	display: block;
}


/* P A G E   S P E C T A C L E */
body[data-template="spectacle"]{
	margin-top: 0;
}

.spectacle__content h2{
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: var(--margin);
}

.spectacle__cover{
	position: relative;
	height: 100vh;
	width: calc(100% + 60px);
	margin-left: -30px;
}

.spectacle-wrapper .spectacle__title{
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-45%);
	z-index: 100;
}

.spectacle-wrapper .spectacle__title h1{
	font-size: var(--bigBigSizeMobile);
	font-weight: 900;
	text-align: center;
	color: #FFF;
	text-transform: uppercase;
	line-height: 0.9;
}

.spectacle-wrapper h1 span{
	font-size: 40px;
	font-weight: normal;
	text-transform: none;
	display: block;
}

.spectacle__cover__overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 30%;
	z-index: 99;
}

.article-cover{
	opacity: 80%;
	width: 100%;
	height: 100%;
/*	background-size: cover;*/
}

.article-cover img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.spectacle__content__infos{
	padding: 0;
	margin-top: var(--margin);
	margin-bottom: var(--margin);
	font-size: var(--smallSize);
}

.spectacle__content__info-small{
	font-size: 12px;
}

.spectacle__content__synopsis{
	margin-top: var(--margin);
}

.spectacle__content__generique {
	margin-top: var(--margin);
	padding-top: var(--margin);
	border-top: 1px solid var(--red);
}

.spectacle__content__generique p,
.spectacle__content__generique li{
	font-size: var(--smallSize);
}

.spectacle__dates ul.row{
	margin:0;
}

.spectacle__dates h2{
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: var(--margin);
}

.spectacle__dates li{
	text-transform: uppercase;
	padding: 15px;
	background: var(--blue);
}

.spectacle__dates li:nth-child(even){
	background: var(--lightblue);
}

.spectacle__dates li .date,
.spectacle__dates li h3{
	font-weight: bold;
}

.spectacle__dates li p{
	margin:0;
}

.spectacle__dates li .link{
	text-transform: none;
	font-size: var(--smallSize);
}

.spectacle__content__gallery{
	margin-top: var(--margin);
}

.spectacle__content__gallery li{
	margin-top: var(--margin);
}

.spectacles__related{
	border-top: 1px solid var(--red);
	padding-top: var(--margin);
}

.spectacles__related h2{
	margin-bottom: var(--margin);
}

/* ------ A G E N D A --------- */

.agenda-wrapper h2{
	font-size: var(--h2Size);
}

.agenda__filters{
	margin-bottom: 25px;
}

.agenda__futur{
	margin-bottom: calc(var(--margin) * 2);
}

/* ------- E Q U I P E  -------- */
.spectacles-wrapper ul.row.equipe__list{
	margin-left: -0.8rem;
  margin-right: -0.8rem;
}

.equipe__list li{
	margin-bottom: var(--margin);
}

.equipe__list .person__title{
	text-align: center;
	margin-top: 10px;
}

.equipe__list h3{
	text-transform: uppercase;
	font-weight: 600;
}

/* ------- P E R S O N N E ------ */
body[data-template="personne"]{
	margin-top: 0;
}

.personne-wrapper .personne__title h1{
	font-size: calc(var(--bigBigSizeMobile) - 10px);
}

.personne-wrapper .personne__title h2{
	color: #FFF;
	text-align: center;
	font-size: var(--h2Size);
	line-height: 1;
	margin-top: 10px;
}

/* ----  P A G E ----  */
.default__page h1,
.pro-wrapper h1{
	font-size: var(--bigBigSizeMobile);
	text-transform: uppercase;
	font-weight: 900;
	margin-bottom: calc(var(--margin) * 2);
}

/* ------ P R O ----- */

.pro-wrapper h2{
	font-size: var(--h2Size);
	text-transform: uppercase;
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 10px;
}

.pro-wrapper h2 span{
	font-size: 24px;
	text-transform: none;
	font-weight: normal;
	display: block;
}

.pro-wrapper .pro__spectacles > li{
	margin-bottom: var(--margin);
}

.pro-wrapper .files__list li{
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 10px;
}

.pro-wrapper .files__list li::before{
	content: "●";
	color: var(--red);
}

/* ----- F O O T E R --------- */

footer{
	width: 100%;
	padding: var(--margin) 50px 15px;
	position: fixed;
	bottom: 0;
	left:0;
	left:right;
	z-index: 999;
}

footer row{
	margin: 0;
}

footer a,
footer p{
  color: #000;
  font-size: var(--smallSize);
  margin:0;
  vertical-align: top;
}

body[data-template="home"] footer a,
body[data-template="home"] footer p{
	color: #FFF;
}

footer .footer__menu{
  padding: 0;
}

footer .row > div{
  padding: 0;
} 

footer .copyright{
	margin-left: 20px;
  /*margin-top: calc(var(--small-margin) + 14px);*/
}