@charset "utf-8";
/* CSS Document */

:root {
    --main-color-jaune: #dcad27;
    --main-color-creme: #e7d5b6;
    --main-color-rouge: #93211f;
    --main-color-bleu: #273d90;
    --main-color-noir: #231f20;
}

* {margin: 0; padding: 0; border: 0;}

html {scroll-behavior: smooth;}

body {font-family: 'Lato', sans-serif; background-color: var(--main-color-creme); line-height: 1.3;}
body.home {background: none;}

#zone-padding-menu {margin-right: 60px;}

img {display: block;}

.div-inner {width: 2000px; margin: 0 auto;}

header {position: relative; z-index: 2;}
#zone-top {position: relative; z-index: 1;}

#logo {width: 220px; position: absolute; top: 40px; left: 60px;}
#logo img {width: 100%; height: auto;}

#voile-fme {position: fixed;  width: 100vw; top: 0; content: ""; background-color: var(--main-color-rouge); z-index: 50;}

[data-aos="anim-voile"] {
	 height: 100vh;
}
[data-aos="anim-voile"].aos-animate {
	 height: 0;
    transition-delay: 300ms;
	 transition-duration: 600ms !important;
	 transition-timing-function: ease-in-out !important;
}

.bouton-anim1 {position: relative; overflow: hidden; z-index: 1;}
.bouton-anim1 span {position: relative; z-index: 1;}
.bouton-anim1:after {content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: translate(-50%, -50%); background-color: var(--main-color-noir); border-radius: 100%; z-index: 0;}
.bouton-anim1:hover {border-color: var(--main-color-rouge) !important; color: var(--main-color-creme) !important;}
.bouton-anim1:hover:after { width: 400px; height: 300px;}

.anim-anneau-zoom:before {position: absolute; content: ""; z-index: 1; width: 1000px; height: 1000px; background: url("../images/anneau.svg") no-repeat; background-size: cover; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;}
#zone-top-billets-bouton-rond:hover:before, .nouvelle-element:hover .nouvelle-element-img-date:before, .poster-element:hover .poster-element-image:before, #cta-lien:hover:before, .sceno-element:hover:before { width: 200px; height: 200px; top: 50%; left: 50%; opacity: 1;}

.filtre-rouge, #menu-social a:hover img, #footer-social-montage a:hover img, .prog-jour:hover:before {}
.filtre-gold {}
.filtre-noir {}
.filtre-blanc {}

.post-password-form p:first-child {font-weight: bold !important;}

.bouton-lien-standard a {margin-left: 0 !important;}


/* CTA */

.gform_wrapper .ginput_container_text input, .gform_wrapper .ginput_container_email input, .gform_wrapper .ginput_container_textarea textarea, .post-password-form #pwbox-405 { padding: 12px 20px !important; font-size: 20px !important; border-radius: 30px;  font-family: 'Manrope', sans-serif; border: 1px solid rgba(0,0,0,0.5);}
.gform_wrapper .ginput_container_text input::placeholder, .gform_wrapper .ginput_container_email input::placeholder, .gform_wrapper .ginput_container_textarea textarea::placeholder { color: rgba(0,0,0,0.6) !important;}

#accueil-vestiges .gform_wrapper .ginput_container_text input, #accueil-vestiges .gform_wrapper .ginput_container_email input, #accueil-vestiges .gform_wrapper .ginput_container_textarea textarea {background-color: var(--main-color-creme); color: var(--main-color-rouge); border: 0;}

#accueil-vestiges .gform_wrapper .ginput_container_text input::placeholder, #accueil-vestiges .gform_wrapper .ginput_container_email input::placeholder, #accueil-vestiges .gform_wrapper .ginput_container_textarea textarea::placeholder { color: var(--main-color-rouge) !important;}
#accueil-vestiges .gform_wrapper .ginput_container_text input:focus::placeholder, #accueil-vestiges .gform_wrapper .ginput_container_email input:focus::placeholder, #accueil-vestiges .gform_wrapper .ginput_container_textarea textarea:focus::placeholder { opacity: 0.3;}
.gform_wrapper .ginput_container_text input:focus, .gform_wrapper .ginput_container_email input:focus, .gform_wrapper .ginput_container_textarea textarea:focus { outline: 0; border-color: var(--main-color-jaune);}
#accueil-vestiges .gform_wrapper .ginput_container_text input:focus, #accueil-vestiges .gform_wrapper .ginput_container_email input:focus, #accueil-vestiges .gform_wrapper .ginput_container_textarea textarea:focus { background-color: var(--main-color-creme);}

#accueil-vestiges .gform_button, #cta-lien, .post-password-form input[type=submit] { color:var(--main-color-creme);  background-color: var(--main-color-rouge);}
.gform_button {background-color: var(--main-color-creme); color: var(--main-color-creme);}
#contenu .gform_button, .post-password-form input[type=submit] {background-color: var(--main-color-rouge);}
.gform_button, #cta-lien, .post-password-form input[type=submit] {border-radius: 30px; text-decoration: none; text-transform: uppercase;}
.gform_button, .post-password-form input[type=submit] {letter-spacing: 5px; font-size: 16px; padding: 15px 23px; margin-top: 10px;}
.gform_button:hover, #cta-lien:hover, .post-password-form input[type=submit]:hover {cursor: pointer; background-color: var(--main-color-jaune) !important;}

.gform_wrapper {margin-top: 60px;}

#cta-lien {font-size: 24px; letter-spacing: 8px; padding: 30px 40px; overflow: hidden; position: relative; display: inline-block;}
#cta-lien span {position: relative; z-index: 2;}

.gform_validation_errors h2 {font-family: 'Manrope', sans-serif; font-weight: normal; font-size: 16px !important; line-height: 1.3 !important;}

.email-input-content input {display: none;}



footer {background-color: var(--main-color-noir); color: var(--main-color-creme);}
#footer-colonnes {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; z-index: 1; position: relative;}

#footer-coordonnees {width: calc(33% - 50px); padding-right: 50px;}
#footer-coordonnees-logo {display: block; margin-bottom: 60px;}
#footer-coordonnees-logo img {width: 300px; height: auto;}
#footer-coordonnees p, #footer-liens ul { font-size: 20px; color: #999999; margin-bottom: 20px;}
#footer-coordonnees p a, #footer-liens a {text-decoration: none; color: #999999;}
#footer-coordonnees p a:hover, #footer-liens a:hover {color: var(--main-color-jaune);}
#footer-coordonnees #footer-copy { font-size: 15px; color: #606060; margin-top: 60px;}

#footer-social {width: calc(33% - 100px); padding: 0 50px;}
#footer-social-montage {position: relative; text-align: center; top: 50%; transform: translateY(-50%);}
#footer-social-bg {width: 80%; height: auto; position: relative; left: 50%; transform: translateX(-50%); z-index: 0;}
.footer-social-lien {position: absolute; z-index: 1;}
.footer-social-lien img {display: block; width: 80px; height: 80px;}
#footer-social-montage a:nth-child(1) {top: 0; left: 50%; transform: translate(-50%, -50%);}
#footer-social-montage a:nth-child(2) {top: 50%; left: 5%; transform: translate(0, -50%);}
#footer-social-montage a:nth-child(3) {bottom:3%; left: 50%; transform: translate(-50%, 50%);}
#footer-social-montage a:nth-child(4) {top: 50%; right: 5%; transform: translate(0, -50%);}

#footer-liens {width: calc(33% - 50px); padding-left: 50px; text-align: right;}
#footer-liens-titre { color: var(--main-color-jaune); font-size: 60px; margin-bottom: 30px;}
#footer-liens ul {list-style: none;}
#footer-liens a { display: block; padding: 5px 0;}


#footer-partenaires {padding: 6vw 0;  margin-top: 6vw; position: relative;}
#footer-partenaires .div-inner { display: flex; flex-wrap: wrap; align-items: flex-end;}

#footer-partenaires #footer-partenaires-collab {width: calc(20% - 30px); margin-right: 30px;}
#footer-partenaires .footer-partenaires-liste {width: 100%; margin-bottom: 50px; display: flex;}
#footer-partenaires .footer-partenaires-liste .logo-element {margin-right: 20px;}

#footer-partenaires .flickity-page-dots {display: none;}

#footer-partenaires #footer-partenaires-collab .logo-element {padding: 10px 0;}

footer #footer-partenaires:before {background: url("../images/dessins/separ-footer.svg") top center no-repeat; position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 40px; background-size: cover; opacity: 0.5;}

.footer-partenaires-titre {text-transform: uppercase; font-size: 12px; letter-spacing: 3px;}

.partenaires .logo-element, #footer-partenaires .logo-element {display: inline-block; margin-bottom: 0; height: 100px; vertical-align: top;}
.partenaires .logo-element-inner, #footer-partenaires .logo-element-inner {display: inline-block; height: 100%;}
#footer-partenaires .logo-element-inner { opacity: 1;}
#footer-partenaires .logo-element-inner:hover {opacity: 0.5;}

#footer-partenaires-presentateur, #footer-partenaires-collab {margin-bottom: 30px;}

#footer-partenaires .logo-element-inner img, .partenaires .logo-element-inner img {max-height: 80px; max-width: 160px; vertical-align: middle; width: auto; height: auto; top: 50%; transform: translateY(-50%); position: relative; filter: grayscale(1);}
#footer-partenaires-presentateur .logo-element-inner img {max-height: 140px; max-width: 250px;}
#footer-partenaires-collab .logo-element-inner img {max-height: 120px; max-width: 220px;}

#footer-partenaires p {font-size: 15px; color: #8C8C8C;}


h1, h2 { font-weight: normal; line-height: 1;}

#contenu h2 {font-size: 45px; position: relative; padding-bottom: 50px; color: var(--main-color-rouge);}
#contenu h2:before {display: none;}
h3 {font-size: 24px; text-transform: uppercase; letter-spacing: 6px; margin-bottom: 20px; margin-top: 10px;}

p, #contenu ul, #contenu ol {font-weight: 300; font-size: 24px; color:#2F2F2F;}
p, #contenu ul { margin-bottom: 50px;}
#contenu p a, #contenu ul a, #contenu ol a {color: var(--main-color-vert-jaune);}
#contenu p a:hover, #contenu ul a:hover, #contenu ol a:hover {background-color: var(--main-color-jaune); color: var(--main-color-creme); text-decoration: none;}

.texte-intro p {font-weight: 300; font-size: 36px;}

#contenu ul { list-style: none; padding-left: 10px;}
#contenu ol {padding-left: 10px; margin-bottom: 10px;}
#contenu ul li {position: relative; padding-left: 18px;}
#contenu ul li:before {content: ""; position: absolute; width: 8px; height: 8px; background: url("../images/dessins/dot-li.png") no-repeat; left: 0; top: 13px;}

ol, ul {box-sizing: content-box !important;}


/* Marges générales */

#zone-top-billets, #accueil-programmation-boutique, #accueil-programmation {padding-bottom: 6vw;}
#accueil-nouvelles, #accueil-vestiges {padding: 5vw 0;}
#contenu {padding: 2vw 0 8vw 0;}

.home #accueil-vestiges {padding: 0 0 4vw 0 !important;}


/* MENU */

#lang-switcher {display: block; text-decoration: none; color: var(--main-color-creme); position: absolute; bottom: 20px; left: 16px; z-index: 99; padding: 5px; border: 1px solid var(--main-color-creme); font-size: 14px;}
#lang-switcher:hover {background-color: var(--main-color-jaune); border-color: var(--main-color-jaune); color: var(--main-color-creme);}

.menu-toggle {display: none !important;}


header .menu { position: fixed; width: 406px; color: var(--main-color-creme); font-size: 14px; z-index: 99; top: 0; right: 0; height: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

[data-aos="anim-menu"] {
	 margin-right: -480px;
}
[data-aos="anim-menu"].aos-animate {
	 margin-right: -345px;
	 transition-duration: 400ms !important;
	 transition-timing-function: ease-in-out !important;
}

#sub { list-style: none; z-index: 0; padding: 40px; overflow: hidden; background: var(--main-color-noir); height: calc(100% - 80px);}
#sub ul { list-style: none;}
#sub ul a {text-decoration: none; display: block;}

#menu-1 {margin-bottom: 30px;}
#menu-1 a, #menu-2 a { padding: 10px 15px; color: var(--main-color-creme);}
#menu-1 a { text-transform: uppercase; font-size: 16px; letter-spacing: 4px; border-radius: 10px; border: 1px solid var(--main-color-creme); margin-bottom: 10px;}
#menu-1 a:hover {color: var(--main-color-jaune); border-color: var(--main-color-jaune);}
#menu-2 > li {border-bottom: 1px solid rgba(255,255,255,0.3);}
#menu-2 > li > a { font-size: 16px;}
#menu-2 > li > a:hover {color: var(--main-color-jaune);}
#menu-2 > li ul {display: none; margin-bottom: 10px;}
#menu-2 > li ul li a {padding: 3px 15px; opacity: 0.7;}
#menu-2 > li ul li a:hover {opacity: 1; color: var(--main-color-jaune);}
#menu-2 > li:last-child {border: 0; }
#menu-2 .menu-item-has-children {position: relative;}
#menu-2 .menu-item-has-children:after {content: "+"; position: absolute; right: 15px; top: 11px;}
#menu-2 .menu-item-has-children.focus:after {content: "-";}
#menu-2 .menu-item-has-children .sub-menu {}
#menu-2 .menu-item-has-children.focus .sub-menu {display: block;}

#menu-phrase { color: #fcbd31; font-family: 'Matrix', 'Vollkorn', serif; font-weight: bold; font-size: 40px; margin-top: 40px;}
#menu-phrase a { color: #fcbd31; text-decoration: none;}
#menu-phrase a:hover { color: var(--main-color-creme);}

header .checked { margin-right: 0 !important;}

.hamburger { position: relative; z-index: 99;
  list-style: none;
  float: left;
  margin: 0;
  cursor: pointer;
  padding: 15px 15px 20px 15px;
  width: 30px;
  overflow: hidden;
  height: calc(100% - 35px);
  background-color: var(--main-color-noir);
}

.hamburger:after {content: "menu"; position: absolute; z-index: 1; color: var(--main-color-creme); font-size: 27px; text-transform: uppercase; letter-spacing: 3px; transform: rotate(-90deg); top: 80px; margin-left: -32px;}
.checked .hamburger:after {font-size: 18px; margin-left: -18px; opacity: 0.5;}

.hamburger:hover {background-color:var(--main-color-rouge);}

.hamburger li {
  width: 28px;
  height: 2px;
  background: var(--main-color-creme);
  margin: 5px 0 0;
  padding: 0;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transition: all 333ms cubic-bezier(0.5, 0, 0, 1);
  -o-transition: all 333ms cubic-bezier(0.5, 0, 0, 1);
  -webkit-transition: all 333ms cubic-bezier(0.5, 0, 0, 1);
  transition: all 333ms cubic-bezier(0.5, 0, 0, 1);
}

.checked .hamburger li.first {
  -moz-transform: rotate(-135deg) translateY(-10px);
  -ms-transform: rotate(-135deg) translateY(-10px);
  -webkit-transform: rotate(-135deg) translateY(-10px);
  transform: rotate(-135deg) translateY(-10px);
  margin-left: 4px;
  width: 35px
}
.checked .hamburger li.second {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.checked .hamburger li.third {
  -moz-transform: rotate(135deg) translateY(10px);
  -ms-transform: rotate(135deg) translateY(10px);
  -webkit-transform: rotate(135deg) translateY(10px);
  transform: rotate(135deg) translateY(10px);
   margin-left: 4px;
   width: 35px
}

.main-menu-externe a {padding-left: 40px !important; background: url("../images/programmation/icon-lieu.png") 15px center no-repeat; background-size: 17px 17px;}


#menu-social { list-style: none; bottom: 60px; left: 11px; position: absolute; z-index: 99;}
#menu-social li {}
#menu-social a { display: block; width: 25px; height: 28px; margin: 0 0 15px 5px; text-indent: -9999px;}
#menu-social a:hover img { width: 100%; height: auto;}


/******************************** PAGE *************************************/


#contenu { position: relative; z-index: 0;}

#zone-top-titre {height: 230px;}
#zone-top-titre h1 {font-size: 70px; font-weight: bold; padding: 40px 0 0 530px; position: relative; color: var(--main-color-rouge);}
#zone-top-titre h1:before {width: 225px; height: 22px; content: ""; background: url("../images/dessins/dash-titre.svg") no-repeat; background-size: 100% 100%; position: absolute; left: 300px; top: 100px;}

.colonnes {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; position: relative;}
.col {width: 45%;}
.col:first-child { padding-right: 5%;}
.col:last-child { padding-left: 5%;}

#bloc-triptyque-photo { margin-right: 20%;}
.bloc-triptyque-photo-element {position: relative;}
.bloc-triptyque-photo-element:nth-child(1) {width: 90%; z-index: 1;}
.bloc-triptyque-photo-element:nth-child(2) {width: 70%; z-index: 2; margin-left: 30%; margin-top: -10%;}
.bloc-triptyque-photo-element:nth-child(3) { width: 40%; z-index: 0; margin-left: 10%; margin-top: -10%;}
.bloc-triptyque-photo-element img {width: 100%; height: auto;}

.liste-fichiers {margin-bottom: 4vw;}
.liste-fichiers-element { border-bottom: 1px solid rgba(0,0,0,0.2); text-decoration: none; display: block; font-size: 20px; padding: 20px 0; position: relative; color: var(--main-color-rouge); font-weight: bold;}
.liste-fichiers-element:after { position: absolute; content: ""; width: 24px; height: 24px; right: 20px; bottom: 20px; background: url("../images/dessins/icon-dl.png") no-repeat; background-size: cover; opacity: 0.5;}
.liste-fichiers-element:before { position: absolute; content:""; height: 0; bottom: 0; width: 100%; background-color: var(--main-color-jaune);}
.liste-fichiers-element:hover:before { height: 6px;}
.liste-fichiers-element:hover:after {opacity: 1;}

.accordion {}
.ui-accordion .ui-accordion-header .ui-icon { display: none;}
.ui-accordion .ui-accordion-header a { padding-left: 0 !important; padding-right: 30px !important;}
.accordion .ui-accordion-header:after { position: absolute; content: "+"; right: 0; top: 15px; color: var(--main-color-jaune);}
.accordion .ui-accordion-header.ui-state-active:after { content: "-";}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .c-accordion__item { border-top: 0 !important; border-bottom: 1px solid rgba(0,0,0,0.2);}
.accordion h3 { font-weight: normal; margin: 0; padding: 10px 0; text-transform: none; position: relative;}
.accordion .ui-state-default a, .accordion .ui-state-default a:link, .accordion .ui-state-default a:visited { text-decoration: none; color: var(--main-color-rouge);}
.accordion .ui-state-active a { font-weight: bold;}

#contenu .ui-accordion .ui-accordion-content { padding: 20px 0;}

.bouton-weezevent {margin: 0 0 60px 0 !important;}
.bouton-weezevent #zone-top-billets-bouton-rond-l2 {height: auto; padding: 0 20px; line-height: 1.1;}


/******************************** ACCUEIL *************************************/

.home #zone-top {background: url("../images/accueil/img-theme.jpg") top center no-repeat var(--main-color-noir); background-size: cover; background-position: bottom center;}
.home #logo {width: 800px; top: 4vh; left: 50%; transform: translateX(-50%);}

#zone-top-date {width: 100%; aspect-ratio: 16 / 8; position: relative;}
#zone-top-date-inner {font-size: 50px; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--main-color-creme); display: none;}

#zone-top-billets {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; z-index: 1; position: relative;}
#zone-top-billets-texte, #zone-top-billets-bouton { width: 50%;}
#zone-top-billets-texte {}
#zone-top-billets-texte p {font-size: 30px; font-weight: 300; padding: 0 150px; position: relative; top: 50%; transform: translateY(-50%); text-align: center; color: var(--main-color-creme);}

#zone-top-billets-bouton img {display: inline-block; cursor: pointer; height: 100%; width: auto; max-height: 400px;}

#zone-top-billets-bouton { position: relative; cursor: pointer; text-align: center;}
#zone-top-billets-bouton-rond { cursor: pointer;
    width: 400px; height: 400px; display: block; margin: 0 auto; text-align: center; color: var(--main-color-jaune); background-color: var(--main-color-bleu); text-decoration: none; position: relative; overflow: hidden; z-index: 1; border-radius: 50%;}
#zone-top-billets-bouton-rond:before {background: url("../images/anneau-noir.svg") no-repeat;}

.page-id-4146 .wp-block-column:last-of-type #zone-top-billets-bouton-rond {background-color: var(--main-color-rouge);}

#zone-prog {padding-top: 5vw; background-color: var(--main-color-rouge);}

#zone-top-billets-bouton-rond-inner {position: relative; top: 50%; transform: translateY(-50%); z-index: 2;}
#zone-top-billets-bouton-rond-l1, #zone-top-billets-bouton-rond-l3 { font-size: 30px;}
#zone-top-billets-bouton-rond-l2 { font-size: 60px; font-weight: bold;}

#accueil-programmation-boutique {position: relative;}
#accueil-programmation-boutique-cols {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; z-index: 1; position: relative;}
#accueil-programmation-boutique-menu, #accueil-programmation-boutique-droit { width: 100%;}
#accueil-programmation-boutique-menu-float {}
#accueil-programmation-boutique-menu-float a { font-size: 70px; text-decoration: none; color: var(--main-color-jaune); display: inline-block; text-transform: uppercase; position: relative; z-index: 1;}
#accueil-programmation-boutique-menu-float a:first-child {z-index: 2;}
#accueil-programmation-boutique-menu-float a.actif {color: var(--main-color-creme);}
#accueil-programmation-boutique-menu-float a:hover {color: var(--main-color-creme);}

#accueil-programmation-boutique-droit { text-align: center;}
#accueil-programmation-boutique-droit a, #retour-nouvelles {background-color: var(--main-color-jaune); text-decoration: none; font-size: 16px; display: inline-block; position: relative; padding: 15px 20px; margin-top: 20px; border-radius: 15px; text-transform: uppercase; letter-spacing: 
3px; color: var(--main-color-noir);}

#accueil-programmation-boutique-droit a:hover, #retour-nouvelles:hover {color: var(--main-color-creme) !important;}
 
#accueil-programmation-boutique-droit p { color: var(--main-color-creme); text-align: center; font-size: 26px; padding: 0 10%; margin-bottom: 0;}

.accueil-programmation-boutique-triptyque {position: relative; margin-bottom: 80px;}
.accueil-programmation-boutique-triptyque-element { position: absolute;}
.accueil-programmation-boutique-triptyque-element img { width: 100%; height: auto;}

#accueil-programmation, #accueil-boutique { padding-left: 100px;}

#accueil-programmation {}
#accueil-programmation .accueil-programmation-boutique-triptyque-element:nth-child(1) {left: 0; top: 10%; width: 30%; z-index: 0;}
#accueil-programmation .accueil-programmation-boutique-triptyque-element:nth-child(2) {left: 25%; top: 0; width: 40%; z-index: 2; position: relative;}
#accueil-programmation .accueil-programmation-boutique-triptyque-element:nth-child(3) {right: 0; top: 28%; width: 40%; z-index: 3;}
#accueil-boutique {}
#accueil-boutique .accueil-programmation-boutique-triptyque-element:nth-child(1) {left: 0; top: 0; width: 40%; z-index: 1; position: relative;}
#accueil-boutique .accueil-programmation-boutique-triptyque-element:nth-child(2) {left: 35%; top: 15%; width: 40%; z-index: 3;}
#accueil-boutique .accueil-programmation-boutique-triptyque-element:nth-child(3) {right: 0; top: 28%; width: 30%; z-index: 2;}


#accueil-nouvelles { background-color: var(--main-color-jaune);}
#accueil-nouvelles h2 {text-align: center; font-size: 120px; color: var(--main-color-noir); position: relative; margin-bottom: 100px;}
#accueil-nouvelles h2 span { position: relative; z-index: 1; display: block;}
#accueil-nouvelles h2 img {position: absolute; z-index: 0; width: 120px; height: auto; top: 50px; left: 50%; transform: translateX(-50%);}
#accueil-nouvelles-plus {display: inline-block; position: relative; left: 50%; transform: translateX(-50%); padding: 20px 30px; font-size: 16px; color: var(--main-color-creme); text-decoration: none; border-radius: 15px; background-color: var(--main-color-rouge); text-transform: uppercase; letter-spacing: 4px; margin-top: 60px;}

.home .nouvelle-element-titre {color: var(--main-color-noir);}
.home .nouvelle-element:hover .nouvelle-element-titre {color: var(--main-color-rouge);}

#accueil-punch {height: 1000px; background: url("../images/accueil/bg-chiffres.jpg") top center no-repeat; background-size: cover;color: var(--main-color-creme);;}
#accueil-punch-inner {position: relative; height: 100%;}
#accueil-chiffres {position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); background: url("../images/dessins/ligne-verticale-blanche.svg") center center no-repeat; background-size: contain; overflow: hidden; text-align: center;}
.accueil-chiffre {float: left; text-align: center; font-size: 100px; font-weight: bold; display: block; width: 400px;}
.accueil-chiffre span {font-size: 50px; display: block; margin-top: -10px;}
.accueil-chiffre-big {margin-bottom: 20px;}
#accueil-punch-titre { position: absolute; bottom: 20%; text-align: center; width: 100%; font-size: 80px;}


#accueil-vestiges .colonnes { justify-content: center; align-items: center; color: var(--main-color-creme);}
#accueil-vestiges .col:first-child {text-align: left;}
#accueil-vestiges .col:first-child p { text-align: left; padding: 0}
#accueil-vestiges .col:last-child {text-align: center;}
#accueil-vestiges .colonnes h2 { text-align: left; margin-bottom: 40px;}
#accueil-vestiges .colonnes p {color: var(--main-color-creme);}

#accueil-vestiges {position: relative; background-color: var(--main-color-noir);}
#accueil-vestiges .div-inner {position: relative; overflow: hidden;}
#accueil-vestiges:after {position: absolute; content: "";}
#accueil-vestiges h2 {font-size: 70px; text-align: center; margin-bottom: 80px; color: var(--main-color-creme);}
#liste-posters {margin: 0 150px; z-index: 1;}
.poster-element { padding: 0 50px; text-align:center;}
.poster-element a {display: block;}
.poster-element .poster-element-image {overflow: hidden; position: relative; box-shadow: 15px 15px 15px rgba(0,0,0,0.3); background: var(--main-color-noir);}
.poster-element img {width: 100%; height: auto;}
.poster-element span { display: inline-block; color: var(--main-color-creme); text-decoration: none; font-size: 120px; height: 60px; line-height: 60px;}

.poster-element:hover img {opacity: 0.3;}

#liste-posters-fleches {z-index: 0; position: absolute; top: 60%; transform: translateY(-50%); height: 90px; width: 100%;}
.slick-arrow {width: 35px; height: 90px; background: url("../images/dessins/fleche-slider.svg") no-repeat; background-size: cover; text-indent: -9999px; cursor: pointer; position: absolute;}
.slick-prev { left: 40px;}
.slick-next {transform: rotate(180deg); right: 40px;}



/******************************** ÉQUIPE *************************************/

.equipe-grid {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; z-index: 1; position: relative; padding-bottom: 4vw; justify-content: center;}
.equipe-grid-avec {}
.equipe-grid-sans {}

.equipe-element {width: calc(16% - 1px); padding: 0 2%; margin-bottom: 50px; text-align: center; border-right: 1px solid var(--main-color-rouge);}
.equipe-element:last-child {border: 0;}
.equipe-element-photo {aspect-ratio: 1/1; overflow: hidden; border-radius: 50%; display: none;}
    .equipe-element-photo img {width: 100%; height: auto;}
.equipe-element-nom {font-weight: bold; font-size: 22px;}
.equipe-element-titre {font-size: 12px; text-transform: uppercase; color: var(--main-color-rouge); letter-spacing: 3px; margin-bottom: 20px;}
.equipe-element-courriel { display: inline-block; color: var(--main-color-rouge); border: 1px solid var(--main-color-rouge); border-radius: 30px; text-decoration: none; padding: 8px 15px;}
.equipe-element-courriel:hover {color: var(--main-color-creme); background-color: var(--main-color-jaune); border-color: var(--main-color-jaune);}

.equipe-grid-sans .equipe-element { border: 1px solid rgba(150,115,69,0.3); padding: 15px; width: calc(16% - 32px);}

.page-equipe #contenu h2 {}
.page-equipe #contenu h2:before {left: 50%; transform: translateX(-50%);}

.page-id-633 p {text-align: center; padding: 0 20%;}



/******************************** BILLETTERIE *************************************/

#grille-passeports {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; margin-bottom: 6vw;}
.passeport-element {width: 19%; margin: 0 0.5%; color: var(--main-color-creme);}
.passeport-element-inner {padding: 90% 30px 30px 30px;}
.passeport-element-titre-l1 { font-size: 40px;}
.passeport-element-titre-l2 {font-weight: bold; font-size: 40px; text-transform: uppercase; margin-bottom: 20px;}
.passeport-element-contenu {}
.passeport-element-contenu p, #contenu .passeport-element-contenu ul {font-size: 18px; margin-bottom: 0; font-weight: normal;}
#contenu .passeport-element-contenu ul {margin-top: 15px;}
#contenu .passeport-element-contenu ul:last-child {margin-bottom: 0;}
#contenu .passeport-element-contenu ul li:before {background: url("../images/dessins/dot-li-blanc.png") no-repeat; top:9px;}

.passeport-element:nth-child(1) {background: url("../images/passeports/1.png") no-repeat #606060; background-position: center 40px; background-size: 60% auto;}
.passeport-element:nth-child(2) {background: url("../images/passeports/2.png") no-repeat var(--main-color-creme); background-position: -50px -50px; background-size: 100% auto;}
.passeport-element:nth-child(3) {background: url("../images/passeports/3.png") no-repeat var(--main-color-jaune); background-position: 150% 40px; background-size: 150% auto;}
.passeport-element:nth-child(4) {background: url("../images/passeports/4.png") no-repeat var(--main-color-creme); background-position: center 40px; background-size: 75% auto; color: var(--main-color-noir);}
.passeport-element:nth-child(5) {background: url("../images/passeports/5.png") no-repeat #333; background-position: center 40px; background-size: 75% auto;}

.col-pass-important {position: relative;}
.col-pass-important:before { width: 80px; height: 100%; content: "!"; position: absolute; top: -15%; left: 0; color: var(--main-color-jaune); font-size: 500px; line-height: 0.2;}
.col-pass-important:after {width: 21px; height: 100%; background: url("../images/dessins/separ-vertical.png") repeat-y; content: ""; position: absolute; top: 0; right: 0; transform: translateX(50%); opacity: 0.2;}
.col-pass-important p {padding-left: 100px;}

#passeport-boutons {text-align: center; margin-bottom: 4vw;}
#passeport-boutons #zone-top-billets-bouton-rond {display: inline-block; margin: 0 20px !important;}

.billet-libelle_l2, .billet-libelle_l3 {padding: 0 30px;}
.billet-libelle_l2 {font-size: 24px;}
.billet-libelle_l3 { font-size: 32px; line-height: 1;}



/******************************** PARCOURS SCÉNOGRAPHIQUE *************************************/

#sceno-map {margin-bottom: 4vw;}
#sceno-map iframe {width: 100%; height: 800px;}

#sceno-intro {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: center; align-items: center; margin-bottom: 4vw;}
#sceno-intro-image { width: 30%;}
#sceno-intro-image img {width: 60%; height: auto;}

#sceno-intro-texte { width: 70%;}
#sceno-intro-texte p {}

#sceno-grid {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: center;}
.sceno-element {width: calc(25% - 10px); background-color: var(--main-color-jaune); text-align: center; text-decoration: none; color: var(--main-color-creme); position: relative; overflow: hidden; margin: 5px; cursor: pointer;}
.sceno-element-inner {position: absolute; width: 90%; padding: 0 5%; top: 50%; left: 0; transform: translateY(-50%); z-index: 1; opacity: 0;}
.sceno-element-titre {font-weight: bold; font-size: 35px;}
.sceno-element-annee {font-size: 22px; font-weight: 300;}
.sceno-element-image { position: relative; z-index: 0;}
.sceno-element-image img {width: 100%; height: auto;}

.sceno-element:hover .sceno-element-inner {opacity: 1;}
.sceno-element:hover .sceno-element-image {opacity: 0.3;}

#sceno-acteurs {text-align: center; font-size: 18px; margin-top: 60px;}

.parcours-col-image {text-align: left;}
.parcours-col-image img {width: 60%; display: inline-block;}

.sceno-liste-artistes {margin-top: 10px;}


/******************************** CARTE INTERACTIVE (lieux de diffusion) *************************************/

.carte-categorie { margin-bottom: 30px; display: flex; flex-direction: row; flex-wrap: wrap;}
.carte-categorie .place-item:first-child {padding-left: 14px;}
.carte-categorie .place-item {display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 8px; border: 1px solid var(--main-color-rouge); background-color: var(--main-color-rouge); padding: 8px 14px 8px 8px; color: var(--main-color-creme); margin-right: 5px; margin-bottom: 5px; position: relative;}
.carte-categorie .place-item img, .carte-categorie .place-item span {position: relative; z-index: 2;}
.carte-categorie .place-item img {width: 30px; height: auto; margin-right: 10px;}
.carte-categorie .place-item:after {position: absolute; content: ""; width: 14px; height: 14px; transform: rotate(45deg); bottom: 9px; background-color: var(--main-color-rouge); z-index: 0;}
.carte-categorie .place-item:first-child {font-weight: bold; border: 2px solid var(--main-color-rouge);}
.carte-categorie .place-item:hover {cursor: pointer; background-color: var(--main-color-noir); border-color: var(--main-color-noir); color: var(--main-color-creme);}
.carte-categorie .place-item:hover:after {background-color: var(--main-color-noir);}
.carte-categorie .place-item-actif {background-color: var(--main-color-jaune); color: var(--main-color-rouge); border-color: var(--main-color-jaune) !important;}
.carte-categorie .place-item-actif:hover {background-color: var(--main-color-jaune); color: var(--main-color-rouge); border-color: var(--main-color-jaune) !important; cursor: default;}
.carte-categorie .place-item-actif:after {bottom: -9px; background-color: var(--main-color-jaune);}
.carte-categorie .place-item-actif:hover:after {background-color: var(--main-color-jaune);}

#zone-projets .marqueurs {box-shadow: 10px 10px 20px rgba(0,0,0,0.2);}
#zone-projets .marqueurs .info-content h3 {margin-top: 0; text-transform: none; color: var(--main-color-rouge); letter-spacing: 1px; margin-bottom: 5px; font-size: 19px;}
#zone-projets .marqueurs .info-content p {margin-bottom: 0; font-size: 16px;}



/******************************** PARTENAIRES *************************************/


.partenaires {background-image: none; background-color: var(--main-color-noir);}
.partenaires #contenu {background-image: none; text-align: center; color: var(--main-color-jaune);}
.partenaires #contenu p {color: var(--main-color-creme);}
.partenaires .footer-partenaires-titre {padding: 10px 0; background-color: rgba(0,0,0,0.2);}



/******************************** ERREUR 404 *************************************/


.error404 #contenu .div-inner {text-align: center;}

#page-40-titre { font-size: 200px; margin-bottom: 80px;}


/******************************** POP-UPS *************************************/

#pop-up-fme-image {}
#pop-up-fme-image img {width: 100%; height: auto; max-height: 800px; object-fit: cover; object-position: center center;}
#pop-up-fme-body {position: relative; padding: 60px 80px; color: var(--main-color-creme); overflow: hidden;}
#pop-up-fme-body:before {position: absolute; content: ""; width: 100%; height: 60px; background: url("../images/sceno/separ-top.svg") no-repeat; top: 0; left: 0; transform: translateY(-100%); background-size: cover;}
#pop-up-fme-body h2 {font-size: 60px; padding-bottom: 0 !important; color: var(--main-color-creme);}
#pop-up-fme-body h3 {color: var(--main-color-creme); font-size: 16px; padding-bottom: 15px; border-bottom: 1px solid rgba(150,115,69,0.3);}
#pop-up-fme-body p {font-size: 19px; font-weight: 300; color: var(--main-color-creme);}
#pop-up-fme-sous-titre {color: var(--main-color-jaune); font-size: 20px;}

.pup-up-fme-licorne #pop-up-fme-body {background: var(--main-color-rouge); position: relative;}
.pup-up-fme-licorne #pop-up-fme-body:after {width: 600px; height: 528px; position: absolute; top: 0; left: -100px; content: ""; opacity: 0.2;}
.pup-up-fme-ronds #pop-up-fme-body {background-color: var(--main-color-rouge);}

#pop-up-fme-carte iframe {width: 100%; height: 600px;}

#pop-up-fme-adresse p {font-size: 30px;}
#pop-up-fme-adresse a {display: inline-block; margin-right: 10px; border-radius: 50px; background: url("../images/programmation/icon-lieu.png") right 20px center no-repeat var(--main-color-jaune); background-size: 20px 20px; color: var(--main-color-creme); text-decoration: none; padding: 15px 60px 15px 20px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px;}
#pop-up-fme-adresse a:hover {background-color: var(--main-color-creme);}

.pop-up-fme-video {}
.pop-up-fme-video p {font-weight: normal; font-size: 16px; margin-top: 10px;}


#pop-up-fme-body #menu-social, .fiche-spectacle-artistes #menu-social {position: relative; bottom: auto; left: auto; padding-left: 0;}
#pop-up-fme-body #menu-social li, .fiche-spectacle-artistes #menu-social li {padding-left: 0; display: inline-block; margin-right: 10px;}
#pop-up-fme-body #menu-social li:before, .fiche-spectacle-artistes #menu-social li:before {display: none;}
#pop-up-fme-body #menu-social li a:hover, .fiche-spectacle-artistes #menu-social li a:hover {background-color: transparent;}


.lightbox-wrap {
		position: fixed;
		top:0px;
		right:0px;
		bottom:0px;
		left:0px;
		width: 100%;
		height: 100vh;
		justify-content: center;
		align-items: center;
		background-color: rgba(35, 31, 32, 0.8);
		z-index: 99;
		display: flex;
	}
	.lightbox-wrap.active {
		display:block;
	}
	.lightbox {
		position:relative;
        overflow: hidden;
		width: 100%;
		max-width: 1200px; padding-top: 0;
		border-radius: 15px;
		box-shadow: 0 0 30px rgba(0,0,0,0.3);
        background-color: var(--main-color-creme);
	}	

#lightbox-content { max-height: 90vh; overflow: auto; background-color: var(--main-color-creme);}    

	.close {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;    
		top: 10px;
		right: 10px;
		cursor:pointer;
		transition:0.3s ease;
        font-size: 35px;
        color: var(--main-color-noir);
        z-index: 1;
	}

.fiche-spectacle .close, #sceno-grid .close {
    color: var(--main-color-creme);
        text-shadow: 0 0 15px rgba(0,0,0,0.8);}
    
	.close:hover {
		background-color:var(--main-color-saumon);
		transition:0.3s ease;
	}

	.lightbox-off {
		visibility: hidden;
		opacity:0;
		transition:0.5s ease-out;
	}
	.lightbox-on {
		visibility: visible;
		opacity: 1;
		transition:0.5s ease-out;
        position: relative; z-index: 99;
	}	



/******************************** PROGRAMMATION *************************************/

#prog-jours {overflow: hidden; order: 1;}
.prog-jour {width: 140px; height: 140px; position: relative; float: left; margin-right: 15px !important; margin-bottom: 15px !important; text-align: center; border: 1px solid var(--main-color-rouge); border-radius: 50%;}
.prog-jour:hover { background-color: var(--main-color-rouge) !important;}
.prog-lien {display: block; position: relative; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); text-decoration: none; color: var(--main-color-rouge);}
.prog-jour:hover .prog-lien {color: var(--main-color-jaune);}
.prog-jour-semaine {font-size: 20px; text-transform: uppercase; font-weight: bold;}
.prog-jour-chiffre { font-size: 50px; font-weight: bold; line-height: 1;}
.prog-jour-mois {}
.prog-jour.checked {background-color: var(--main-color-rouge);}
.prog-jour-actif .prog-lien, .checked .prog-lien {color: var(--main-color-creme);}
.prog-jour-actif:after, .checked:after {opacity: 1;}
.prog-jour-actif:before, .checked:before {opacity: 0;}

.section-spectacles {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; z-index: 1; position: relative;}
.section-spectacles:before {position: absolute; content: ""; width: 8px; height: 100%; background-color: var(--main-color-rouge); top: 0; left: calc(25% - 4px); z-index: 2; border-radius: 10px;}
.section-spectacles-titre {color: var(--main-color-jaune); font-size: 23px;}
.section-spectacles-titre span { font-size: 60px; color: var(--main-color-rouge); display: block;}

.liste-spectacles {width: 25%;}
.spectacle-element {display: block; position: relative; margin-bottom: 10px; color: var(--main-color-creme);}
.spectacle-element-heure {position: absolute; top: 20px; left: -15px; font-weight: 300; padding: 15px 25px; background: url("../images/programmation/bg-heure.svg") no-repeat; background-size: 100% 100%; font-size: 20px; z-index: 3;}
.spectacle-element-photo {}
.spectacle-element-photo:before {position: absolute; bottom: 0; height: 60%; width: 100%; left: 0; content: ""; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8)); z-index: 0;}
.spectacle-element-photo:after {position: absolute; width: 100%; height: 100%; top: 0; left: 0; content: ""; background-image: linear-gradient(to right, rgba(235,152,36,0.5), rgba(235,152,36,0.8)); z-index: 1; opacity: 0;}
.spectacle-element-photo img { width: 100%; height: auto; z-index: 0;}
.spectacle-element-infos {position: absolute; bottom: 30px; left: 30px; width: calc(100% - 50px); z-index: 2; padding-right: 20px;}
.spectacle-element-titre {font-size: 20px; font-weight: bold;}
.spectacle-element-artistes {font-size: 20px;}
.spectacle-element:hover .spectacle-element-photo:before {background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); height: 100%;}
.spectacle-element:hover .spectacle-element-artistes {color: var(--main-color-jaune);}

.spectacle-element-actif .spectacle-element-photo:after, .checked .spectacle-element-photo:after {opacity: 1;}
.spectacle-element-actif:hover .spectacle-element-artistes, .checked:hover .spectacle-element-artistes {color: var(--main-color-creme);}
.spectacle-element-inactif {opacity: 0.5;}
.spectacle-element-inactif:hover {opacity: 1;}


.fiche-spectacle {width: 75%; padding: 40px 0;}
.fiche-spectacle-photo-titre {position: relative;}
.fiche-spectacle-photo-titre:before {position: absolute; bottom: 0; height: 60%; width: 100%; left: 0; content: ""; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8)); z-index: 0;}
.fiche-spectacle-photo {height: 600px;}
.fiche-spectacle-photo img { width: 100%; height: 100%; object-fit: cover;}
.fiche-spectacle-titre, .fiche-spectacle-lieu {position: absolute; z-index: 1; left: 100px;}
.fiche-spectacle-titre { bottom: 40px; font-size: 50px; line-height: 1.1; color: var(--main-color-creme);}
.fiche-spectacle-lieu {bottom: 0; transform: translateY(50%); background-color: var(--main-color-rouge); text-decoration: none; padding: 10px 15px; text-transform: uppercase; letter-spacing: 3px; box-shadow: 5px 5px 5px rgba(0,0,0,0.3); font-size: 16px; font-weight: 300; color: var(--main-color-creme);}
.fiche-spectacle-lieu img {display: block; width: 30px; height: 30px; margin-right: 10px; float: left;}
.fiche-spectacle-lieu:hover {background-color: var(--main-color-jaune);}
/* .fiche-spectacle-lieu:hover {background-color: var(--main-color-jaune); cursor: pointer;} */
.fiche-spectacle-intro { background: url("../images/programmation/bg-intro.jpg") top center repeat-y; background-size: 100% auto; padding: 80px 100px 80px 100px;}
.fiche-spectacle-intro p {color: var(--main-color-creme); font-weight: 300; font-size: 26px;}
.fiche-spectacle-intro p:last-child {margin-bottom: 0;}
.fiche-spectacle-artistes {padding: 30px 100px;}

.fiche-spectacle-artistes-titre { font-size: 70px; color: var(--main-color-rouge); margin-bottom: 30px; margin: 30px 0 50px 0;}

.fiche-spectacle-artiste-element {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: center; align-items: center; position: relative; padding-bottom: 30px; margin-bottom: 30px; text-decoration: none; color: var(--main-color-rouge);}
.fiche-spectacle-artiste-element:after { width: 100%; height: 25px; content: ""; position: absolute; background: url("../images/dessins/separ-contenu.svg") no-repeat; background-size: cover; bottom: 0; left: 0; opacity: 0.2;}
.fiche-spectacle-artiste-element:last-child:after {display: none;}
.fiche-spectacle-artiste-element-photo { width: 15%; background-color: var(--main-color-jaune); border-radius: 50%; overflow: hidden;}
.fiche-spectacle-artiste-element-photo img { width: 100%; height: auto;}
.fiche-spectacle-artiste-element-nom-styles { width: 55%;}
.fiche-spectacle-artiste-element-nom, .fiche-spectacle-artiste-element-styles {padding: 0 60px;}
.fiche-spectacle-artiste-element-nom {font-weight: bold; font-size: 30px;}
.fiche-spectacle-artiste-element-styles {color: var(--main-color-bleu); font-size: 18px;}
.fiche-spectacle-artiste-element-heure {width: calc(30% - 40px); text-align: right; padding-right: 40px; font-weight: 300; font-size: 40px;}

.fiche-spectacle-artiste-element:hover {color: var(--main-color-jaune); cursor: pointer;}
.fiche-spectacle-artiste-element:hover .fiche-spectacle-artiste-element-photo img {opacity: 0.3;}


#prog-jours .facetwp-radio, .liste-spectacles .facetwp-radio {background-image: none !important; margin: 0; padding: 0;}


.fiche-vide-choisis {font-size: 40px; font-weight: 300; padding-left: 100px; position: relative; margin-left: 80px; color: var(--main-color-rouge);}
.fiche-vide-choisis:before {width: 79px; height: 38px; content: ""; position: absolute; background: url("../images/programmation/fleche-choisis.png") no-repeat; background-size: cover; left: 0; top: 50%; transform: translateY(-50%);}

#prog-boutons-top {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; align-items: center; margin-bottom: 80px;}
#prog-bouton-pdf {text-align: left; order: 2;}
#prog-bouton-pdf #accueil-nouvelles-plus {margin-top: 0; margin-left: 60px; left: 0; transform: none; background-color: var(--main-color-rouge); color: var(--main-color-creme);}
#prog-bouton-pdf #accueil-nouvelles-plus:hover {}

#artiste-singulier-heure {text-align: left; margin-top: 50px; margin-bottom: 5px;}
#artiste-singulier-style {font-size: 20px; margin-bottom: 40px; color: var(--main-color-bleu);}

/******************************** NOUVELLES *************************************/

#nouvelles-grid {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; z-index: 1; position: relative;}
.nouvelle-element { width: 33%; text-decoration: none; margin-bottom: 80px;}
.nouvelle-element-inner {padding: 0 3vw;}
.nouvelle-element-img-date {background-color: var(--main-color-noir); position: relative; overflow: hidden; margin-bottom: 20px; border-radius: 50%;}
.nouvelle-element-date {position: absolute; bottom: 0; text-align: center; font-size: 40px; color: var(--main-color-creme); width: 100%; height: 100%;}
.nouvelle-element-date span {position: absolute; display: block; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 1;}
.nouvelle-element-date:before {position: absolute; bottom: 0; height: 200px; width: 100%; left: 0; content: ""; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7)); z-index: 0;}
.nouvelle-element-img-date img { width: 100%; height: auto;}
.nouvelle-element-titre {text-align: center; font-size: 20px; font-weight: bold; color: var(--main-color-noir); text-transform: uppercase; letter-spacing: 4px;}

.nouvelle-element:hover img {}
.nouvelle-element:hover .nouvelle-element-date:before {height: 100%; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));}
.nouvelle-element:hover .nouvelle-element-titre {color: var(--main-color-jaune);}


#image-nouvelle-single {position: relative;}
#image-nouvelle-single:before {position: absolute; bottom: 0; height: 60%; width: 100%; left: 0; content: ""; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8)); z-index: 1;}
#image-nouvelle-single img {width: 100%; height: auto; position: relative; z-index: 0;}
#titre-nouvelle-single {position: absolute; bottom: 60px; left: 60px; padding-right: 60px; color: var(--main-color-creme); font-size: 60px; z-index: 2;}





/* Transitions standard */

a, .hamburger, .hamburger:after,  .anim-anneau-zoom:before, #accueil-programmation-boutique-droit a span, .nouvelle-element-img-date img, .nouvelle-element-date:before, .nouvelle-element-titre, .poster-element img, .spectacle-element-photo:before, .spectacle-element-artistes, .fiche-spectacle-artiste-element-photo img, .liste-fichiers-element, .liste-fichiers-element:after, .liste-fichiers-element:before, .gform_wrapper input, .gform_wrapper .ginput_container_textarea, .logo-element-inner, #retour-nouvelles span, #menu-2 .menu-item-has-children .sub-menu, .sceno-element-inner, .sceno-element-image, .post-password-form input[type=submit], .carte-categorie .place-item, .carte-categorie .place-item:after {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;}


/* Transitions moyennes */

.bouton-anim1:after {
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;}


/* Transitions lentes */

.classe {
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-ms-transition: 1s;
transition: 1s;}