/* COLORS */
/* FONTS */
/*!
	Modaal - accessible modals - v0.3.0
	by Humaan, for all humans.
	http://humaan.com
 */
.modaal-noscroll { overflow: hidden; }
.modaal-accessible-hide { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; }

html.page_sommaire,
html.page_sommaire body {
  height: 100%;
}

body {
  font-family: "Lato", sans-serif;
  color: #171717;
  font-size: 16px;
  background: url("../img/bg-paper.png");
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Lustria", serif;
  font-weight: bold;
  margin-bottom: 15px;
}

h1 { font-size: 30px; line-height: 120%; }
@media (min-width: 992px) { h1 { font-size: 40px; line-height: 130%; } }

h2 { font-size: 20px; }
@media (min-width: 992px) { h2 { font-size: 25px; } }

a { color: #171717; }
a:focus, a:hover { color: #085da7; }

p { margin-bottom: 15px; }

/* HEADER */
.Header {
  background: #000 no-repeat center url("../img/bg-grain.jpg");
  background-size: cover;
  color: #fff;
  padding: 20px 0;
}
@media (min-width: 992px) { .Header { padding: 30px 0; } }

.Header-left {
  display: block;
  color: #fff;
}
@media (min-width: 992px) { .Header-left { float: left; width: 40%; } }
.Header-left:hover, .Header-left:focus { color: #fff; text-decoration: none; }

.Header-title { font-size: 30px; margin: 0; }
.Header-subTitle { font-size: 20px; margin: 0; }

.Header .MainNav { margin-top: 20px; }
@media (min-width: 992px) { .Header .MainNav { float: left; width: 60%; margin-top: 0; } }

.MainNav { padding: 0; text-align: left; }
.MainNav ul { margin: 0; }
.MainNav li { list-style: none; padding: 0; }
@media (min-width: 992px) { .MainNav li { display: inline-block; } }

.MainNav .menu-entree > a {
  display: block;
  font-family: "Lustria", serif;
  color: #fff;
  padding: 5px 0;
  text-align: center;
}
@media (min-width: 992px) { .MainNav .menu-entree > a { text-align: left; } }

.MainNav .menu-entree > a:before,
.MainNav .menu-entree > a:after {
  display: inline-block;
  opacity: 0;
  transition: transform 0.3s, opacity 0.2s;
}
.MainNav .menu-entree > a:before { margin-right: 10px; content: '['; transform: translateX(20px); }
.MainNav .menu-entree > a:after { margin-left: 10px; content: ']'; transform: translateX(-20px); }
.MainNav .menu-entree > a:hover:before,
.MainNav .menu-entree > a:focus:before,
.MainNav .menu-entree > a:hover:after,
.MainNav .menu-entree > a:focus:after { opacity: 1; transform: translateX(0px); }
.MainNav .menu-entree > a:focus,
.MainNav .menu-entree > a:hover { color: #fff; text-decoration: none; }

/* HOME */
@keyframes imageZoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.Home {
  color: #fff;
  text-align: center;
  position: relative;
  min-height: 100vh;
  padding: 10px 0;
  overflow: hidden;
}
@media (min-width: 992px) { .Home { padding: 45px 0; } }

.Home-bg {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  z-index: 1;
  background: #000 no-repeat center bottom url("../img/bg-home.jpg");
  background-size: 100% auto;
  transform-origin: 50% 80%;
}
@media (min-width: 992px) {
  .Home-bg { animation: imageZoom linear 50s infinite; background-size: 70% auto; }
}

.Home-title {
  font-size: 30px;
  margin: 0 0 5px;
  position: relative;
  z-index: 3;
}
@media (min-width: 992px) { .Home-title { font-size: 60px; margin: 0 0 10px; } }

.Home-subTitle {
  font-size: 20px;
  margin: 0;
  position: relative;
  z-index: 3;
}
@media (min-width: 992px) { .Home-subTitle { font-size: 30px; } }

.Home-accroche {
  position: relative;
  z-index: 2;
  margin-top: 15px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  font-family: "Lustria", serif;
  font-style: italic;
  line-height: 120%;
  margin-bottom: 0;
}
@media (min-width: 992px) {
  .Home-accroche {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 400px;
    margin-top: 0;
    font-size: 20px;
    line-height: 160%;
  }
}

.Home .MainNav {
  position: relative;
  z-index: 2;
  margin-top: 15px;
}
@media (min-width: 992px) {
  .Home .MainNav {
    position: absolute;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 400px;
    margin-top: 0;
  }
}

.Home .MainNav li {
  text-align: center;
  display: block;
  width: auto;
  float: none;
}
@media (min-width: 992px) { .Home .MainNav li { text-align: left; } }

.Home .MainNav .menu-entree > a {
  display: inline-block;
  font-size: 16px;
  padding: 4px 0;
}
@media (min-width: 992px) {
  .Home .MainNav .menu-entree > a { font-size: 20px; padding: 8px 0; }
}

/* PAGE */
.Page {
  flex-grow: 1;
  padding: 20px 0 0;
}
@media (min-width: 992px) { .Page { padding-top: 50px; } }

.Page-title { text-align: center; margin: 0 0 20px; }
@media (min-width: 992px) { .Page-title { margin-bottom: 50px; } }
.Page-title.actu { margin-bottom: 10px; }

.Page-date { text-transform: uppercase; margin-bottom: 20px; font-weight: bold; }
.Page-content { line-height: 180%; padding-bottom: 50px; }
.composition_spectacles .Page-title + .Page-content { margin-top: -25px; margin-bottom: 25px; }

/* GALLERY */
.Gallery { padding: 0; }
.Gallery-elem { background: no-repeat center; background-size: cover; }
.Gallery-elem:before { content: ''; display: block; padding-bottom: 65%; }
.Gallery-elem img { display: none; }

/* BLOC HALF */
.BlocHalf { position: relative; margin-bottom: 45px; }
.BlocHalf.id-9 .BlocHalf-picture, .BlocHalf.id-12 .BlocHalf-picture { background-position: top center; }

.BlocHalf-text { line-height: 180%; text-align: left; }
@media (min-width: 992px) { .BlocHalf-text { margin-right: 48%; padding: 30px 4%; min-height: 420px; } }

.BlocHalf-picture { height: 250px; background: no-repeat center; background-size: cover; }
@media (min-width: 992px) {
  .BlocHalf-picture { position: absolute; right: 0; left: 52%; top: 0; bottom: 0; height: auto; }
}

@media (min-width: 992px) {
  .BlocHalf.texte-right .BlocHalf-text { margin-left: 48%; margin-right: 0; }
  .BlocHalf.texte-right .BlocHalf-picture { left: 0; right: 52%; }
}

/* CARACTS */
.Caracts { padding: 0; }
.Caracts-elem {
  display: block;
  list-style: none;
  padding: 0 0 0 30px;
  background: no-repeat left 4px;
  min-height: 19px;
}
.Caracts-elem.public { background-image: url("../img/icons/public.png"); }
.Caracts-elem.inspiration { background-image: url("../img/icons/inspiration.png"); background-position: 3px 4px; }
.Caracts-elem.duree { background-image: url("../img/icons/duree.png"); }
.Caracts-elem.intervenants { background-image: url("../img/icons/intervenants.png"); }

/* PERSON (CONTACT) */
.Person-image { display: block; margin: 0 auto 20px; max-width: 100%; height: auto; }
.Person-label { font-weight: bold; }

/* FOOTER */
.Footer {
  background: #000 no-repeat center url("../img/bg-grain.jpg");
  background-size: cover;
  color: #fff;
  text-align: center;
  font-size: 14px;
  padding: 40px 0;
}
.Footer a { color: #fff; }
.Footer a:hover { color: #fff; }

/* BLOG */
.Actu { display: block; transition: .2s ease-out; }
.Actu > .container { border-bottom: 1px solid rgba(0, 0, 0, 0.3); padding-top: 30px; padding-bottom: 30px; }
@media (max-width: 767px) { .Actu > .container { padding-top: 20px; padding-bottom: 20px; } }
.Actu:focus, .Actu:hover { background-color: rgba(0, 0, 0, 0.1); color: #171717; text-decoration: none; }
.Actu-title { transition: .2s ease-out; }
.Actu-date { text-transform: uppercase; font-weight: bold; }
.Pagination { margin: 30px 0; }

/* BUTTON */
.btn {
  display: inline-block;
  padding: 15px 35px;
  color: #fff;
  background: #060d1c url("../img/bg-grain.jpg") center;
  border: none;
  transition: .2s ease-out;
  text-decoration: none;
}
.btn:focus, .btn:hover { text-decoration: none; padding: 15px 45px; color: #fff; }

/* CONTACT */
@media (max-width: 767px) {
  .article_contact .Page > .container > .row {
    display: flex;
    flex-direction: column;
  }
  .article_contact .Page-content { order: 2; }
  .article_contact .Page-side { order: 1; margin-bottom: 40px; }
}

/* FORMS */
form fieldset { text-align: left; padding: 0; border: none; margin-bottom: 30px; }
form .submit {
  padding: 10px 35px;
  color: #fff;
  background: #060d1c url("../img/bg-grain.jpg") center;
  border: none;
  transition: .2s ease-out;
}
form .submit:hover { padding: 10px 45px; }
.formulaire_spip input.text, .formulaire_spip textarea { padding: .2em .4em; border: 1px solid #cecece; }
@media (max-width: 767px) { .formulaire_spip input.text, .formulaire_spip textarea { width: 100%; } }
.formulaire_spip .boutons { text-align: center; }