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

@media all and (max-width: 2100px) {
	#logo {width: 180px; top: 40px; left: 50px;}
    .home #logo {width: 700px;}
    
    .div-inner {width: 90%; margin: 0 5%;}
    
    #zone-top-billets-texte p {font-size: 26px; padding: 0 100px;}
    
    #zone-top-billets, #accueil-programmation-boutique, #accueil-programmation, #accueil-vestiges {padding-bottom: 8vw;}
    
    #accueil-programmation-boutique-droit p {font-size: 24px; padding: 0 8%;}
    .accueil-programmation-boutique-triptyque {margin-bottom: 70px;}
    
    .accueil-chiffre {width: 350px; font-size: 180px;}
    .accueil-chiffre span {font-size: 70px;}
    #accueil-punch-titre {font-size: 90px; line-height: 1;}
    
    #accueil-vestiges:after {width: 100px; height: 100px; transform: translate(-50%, -80%);}
    
    #zone-top-titre {height: 200px;}
    #zone-top-titre h1 {font-size: 70px; padding: 40px 0 0 480px;}
    #zone-top-titre h1:before {left: 250px;}
    
    .prog-jour {width: 130px; height: 130px; margin-right: 10px; }
    .prog-jour-semaine {font-size: 18px;}
    .prog-jour-chiffre {font-size: 45px;}
    .prog-jour-mois {}
    
    #titre-nouvelle-single {bottom: 50px; left: 50px; padding-right: 50px; font-size: 55px;}

    .passeport-element-titre-l2 {font-size: 35px; margin-bottom: 20px;}
    
    .sceno-element-titre { font-size: 30px;}
    .sceno-element-annee {font-size: 20px;}
    
    .footer-social-lien img {width: 50px; height: 50px;}
    
    #footer-partenaires .flickity-page-dots {display: block;}
    
    #contenu h2 {font-size: 40px;}
    h3 {font-size: 22px; letter-spacing: 5px; margin-bottom: 20px; margin-top: 10px;}
    p, #contenu ul {font-size: 22px; margin-bottom: 50px;}
    #contenu ol {font-size: 22px;}
    .texte-intro p {font-size: 32px;}
}


@media all and (max-width: 1600px) {
    .home #logo {width: 500px;}
    #zone-top-date-inner {font-size: 40px;}
    
    #sub {padding: 30px; height: calc(100% - 60px);}
    #menu-1 a {font-size: 15px; letter-spacing: 2px;}
    
    .anim-anneau-zoom:before {width: 800px; height: 800px;}
    #zone-top-billets-bouton-rond:hover:before, .nouvelle-element:hover .nouvelle-element-img-date:before, .poster-element:hover .poster-element-image:before { width: 150px; height: 150px;}
    
    #logo {width: 150px; top: 30px; left: 40px;}
    
    #zone-top-billets-bouton-rond {width: 300px; height: 300px;}

    #zone-top-billets-bouton-rond-l1, #zone-top-billets-bouton-rond-l3 {font-size: 25px;}
    #zone-top-billets-bouton-ligne {width: calc(50% - 80px); height: 20px;}
    #zone-top-billets-bouton-ligne img {object-fit: contain;}
    #zone-top-billets-bouton-rond-l2 {font-size: 50px;}
    #zone-top-billets-texte p {font-size: 23px; padding: 0 80px;}
    #zone-top-billets, #accueil-programmation-boutique, #accueil-programmation, #accueil-vestiges {padding-bottom: 7vw;}
    
    .billet-libelle_l2 {font-size: 20px;}
    .billet-libelle_l3 {font-size: 28px;}
    
    #accueil-programmation-boutique-menu-float a {font-size: 55px;}
    #accueil-programmation-boutique-droit p {font-size: 22px; padding: 0 5%;}
    .accueil-programmation-boutique-triptyque {margin-bottom: 60px;}
    #accueil-programmation, #accueil-boutique { padding-left: 80px;}
    
    #accueil-nouvelles h2 {font-size: 70px;}
    #accueil-nouvelles h2 span { margin-top: 0; display: block;}
    #accueil-nouvelles h2 img {top: -10px;}
    
    .nouvelle-element-inner {padding: 0 30px;}
    .nouvelle-element-date span {bottom: 30px;}
    .nouvelle-element-titre {font-size: 18px; letter-spacing: 3px;}
    #accueil-nouvelles-plus {padding: 15px 20px;}
    
    #accueil-vestiges h2 {font-size: 45px; margin-bottom: 50px;}
    #liste-posters {margin: 0 100px;}
    #liste-posters-fleches {top: 50%;}
    
    #zone-top-titre {height: auto; margin-bottom: 80px;}
    #zone-top-titre h1 {font-size: 65px; padding: 30px 0 0 380px;}
    #zone-top-titre h1:before {width: 180px; height: 18px; left: 200px; top: 70px;}
    
    #prog-boutons-top {margin-bottom: 50px;}
    .prog-jour {width: 110px; height: 110px; margin-right: 10px; }
    .prog-jour-semaine {font-size: 15px;}
    .prog-jour-chiffre {font-size: 40px;}
    .prog-jour-mois {font-size: 14px;}
    
    #titre-nouvelle-single {bottom: 40px; left: 40px; padding-right: 40px; font-size: 50px;}
    
    .section-spectacles-titre {font-size: 20px; margin-bottom: 20px;}
    .section-spectacles-titre span {font-size: 50px;}
    .spectacle-element-heure {font-size: 18px; padding: 10px 15px;}
    .spectacle-element-infos {bottom: 20px; left: 20px;}
    .spectacle-element-titre {font-size: 17px;}
    .spectacle-element-artistes {font-size: 17px;}
    .fiche-spectacle-photo {height: 500px;}
    .fiche-spectacle-titre, .fiche-spectacle-lieu {left: 70px;}
    .fiche-spectacle-titre { bottom: 30px; font-size: 50px;}
    .fiche-spectacle-lieu {padding: 15px 20px; letter-spacing: 3px; font-size: 18px;}
    .fiche-spectacle-intro { padding: 60px 70px 60px 70px;}
    .fiche-spectacle-intro p {font-size: 22px;}
    .fiche-spectacle-artistes {padding: 20px 70px;}
    .fiche-spectacle-artistes-titre {font-size: 70px;}
    .fiche-spectacle-artiste-element-nom {font-size: 26px;}
    .fiche-spectacle-artiste-element-heure {font-size: 30px;}
    .fiche-spectacle-lieu img {width: 20px; height: 20px;}
    
    .equipe-element {width: 21%; margin: 0 2%; margin-bottom: 40px; }
    .equipe-grid-sans .equipe-element {padding: 15px; width: calc(21% - 32px);}
    .equipe-element-nom {font-size: 20px;}
    .equipe-element-titre {font-size: 11px; letter-spacing: 2px;}
    
    .passeport-element-titre-l2 {font-size: 30px; margin-bottom: 15px;}
    
    #sceno-map iframe {height: 700px;}
    #sceno-intro {align-items: flex-start;}
    #sceno-intro-image img {width: 80%;}
    .sceno-element-titre { font-size: 28px;}
    .sceno-element-annee {font-size: 19px;}
    .sceno-element {width: calc(33% - 10px);}
    
    #accueil-vestiges .colonnes h2 {margin-bottom: 30px;}
    #accueil-vestiges .colonnes p { font-size: 20px;}
    
    #cta-lien {font-size: 22px; letter-spacing: 5px; padding: 20px 30px;}
    
    #footer-coordonnees-logo img {width: 200px; }
    #footer-coordonnees p, #footer-liens ul { font-size: 18px;}
    #footer-coordonnees #footer-copy { font-size: 13px;}
    
    #footer-partenaires:before {height: 30px;}
	#footer-partenaires .logo-element {height: 90px;}
    #footer-partenaires .logo-element img {max-height: 90px; max-width: 150px;}
    #footer-partenaires-presentateur .logo-element-inner img {max-height: 120px; max-width: 200px;}
    #footer-partenaires-collab .logo-element-inner img {max-height: 100px; max-width: 180px;}
    
    #contenu h2 {font-size: 40px; padding-bottom: 60px;}
    h3 {font-size: 22px; letter-spacing: 5px; margin-bottom: 20px; margin-top: 10px;}
    p, #contenu ul {font-size: 21px; margin-bottom: 40px;}
    #contenu ol {font-size: 21px;}
    .texte-intro p {font-size: 30px;}
}


@media all and (max-width: 1450px) {
	#logo { left: 40px;}
    
    #accueil-punch {height: 900px;}
    .accueil-chiffre {font-size: 150px; width: 300px;}
    .accueil-chiffre span {font-size: 60px;}
    #accueil-punch-titre {bottom: 20%; font-size: 80px;}
    
    #liste-posters {margin: 0 80px;}
    #liste-posters-fleches {top: 55%;}
    #liste-posters-fleches {height: 60px;}
    .slick-arrow {width: 23px; height: 60px;}
    .poster-element {padding: 0 20px;}
    .poster-element .poster-element-image {box-shadow: 0 0 10px rgba(0,0,0,0.3);}
    .poster-element span {font-size: 100px; height: 50px; line-height: 50px;}
    
    .passeport-element {width: 31%; margin: 0 1%; margin-bottom: 30px;}
    .passeport-element-inner {padding: 90% 20px 20px 20px;}
    .passeport-element-contenu p, #contenu .passeport-element-contenu ul {font-size: 16px;}
    
    .col-pass-important:before { top: -10%; font-size: 400px; line-height: 0.2;}
    
    #footer-liens-titre {font-size: 50px; margin-bottom: 30px;}
    #footer-coordonnees-logo img {width: 150px; }
    #footer-coordonnees p, #footer-liens ul { font-size: 16px;}
    #footer-coordonnees #footer-copy { font-size: 12px;}
    .footer-social-lien img {width: 35px; height: 35px;}
    
    #footer-partenaires p {width: 100%;}
    #footer-partenaires, #footer-partenaires p {text-align: center;}
    #footer-partenaires #footer-partenaires-collab {width: 100%; margin-right: 0;}
    #footer-partenaires #footer-partenaires-liste {width: 100%; margin-bottom: 30px;}
    
    .carte-categorie .place-item:after {display: none;}
}


@media all and (max-width: 1250px) {
	#logo { top: 30px; left: 40px;}
    .home #logo {width: 400px; top: 20px;}
    #zone-top-date-inner {font-size: 30px;}
    
    #contenu {padding: 2vw 0 180px 0;}
    
    .anim-anneau-zoom:before {width: 600px; height: 600px;}
    #zone-top-billets-bouton-rond:hover:before, .nouvelle-element:hover .nouvelle-element-img-date:before, .poster-element:hover .poster-element-image:before { width: 100px; height: 100px;}
    
    #zone-top-billets-bouton-rond {width: 250px; height: 250px;}
    #zone-top-billets-bouton-rond-l1, #zone-top-billets-bouton-rond-l3 {font-size: 30px;}
    #zone-top-billets-bouton-rond-l2 {font-size: 40px;}
    
    #zone-top-billets-texte p {font-size: 20px; padding: 0 50px;}
    
    #zone-top-billets, #accueil-programmation-boutique, #accueil-programmation, #accueil-vestiges {padding-bottom: 6vw;}
    
    #accueil-programmation-boutique-menu-float a {font-size: 45px;}
    #accueil-programmation-boutique-droit p {font-size: 20px; padding: 0;}
    .accueil-programmation-boutique-triptyque {margin-bottom: 40px;}
    #accueil-programmation, #accueil-boutique { padding-left: 60px;}
    
    .nouvelle-element {margin-bottom: 60px;}
    .nouvelle-element-inner {padding: 0 20px;}
    .nouvelle-element-date {font-size: 30px;}
    .nouvelle-element-date span {bottom: 25px;}
    .nouvelle-element-titre {font-size: 16px; letter-spacing: 2px;}
    #accueil-nouvelles-plus {padding: 10px 16px;}
    
    #accueil-punch {height: 800px;}
    #accueil-chiffres {width: 100%; text-align: center;}
    .accueil-chiffre {font-size: 70px; width: 50%; }
    .accueil-chiffre span {font-size: 40px;}
    #accueil-punch-titre {bottom: 20%; font-size: 60px;}
    
    #titre-nouvelle-single {bottom: 30px; left: 30px; padding-right: 30px; font-size: 40px;}
    
    .section-spectacles-titre {font-size: 18px; margin-bottom: 15px;}
    .section-spectacles-titre span {font-size: 40px;}
    .spectacle-element-heure {font-size: 16px; padding: 7px 10px;}
    .spectacle-element-infos {bottom: 15px; left: 15px;}
    .spectacle-element-titre {font-size: 16px;}
    .spectacle-element-artistes {font-size: 16px;}
    .spectacle-element-photo:before {height: 100%; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));}
    .fiche-spectacle-photo {height: 400px;}
    .fiche-spectacle-titre, .fiche-spectacle-lieu {left: 50px;}
    .fiche-spectacle-titre { bottom: 30px; font-size: 40px;}
    .fiche-spectacle-lieu {padding: 10px 15px; letter-spacing: 2px; font-size: 16px;}
    .fiche-spectacle-intro { padding: 40px 50px 40px 50px;}
    .fiche-spectacle-intro p {font-size: 20px;}
    .fiche-spectacle-artistes {padding: 20px 50px;}
    .fiche-spectacle-artistes-titre {font-size: 60px;}
    .fiche-spectacle-artiste-element-nom, .fiche-spectacle-artiste-element-styles {padding: 0 40px;}
    .fiche-spectacle-artiste-element-nom {font-size: 24px;}
    .fiche-spectacle-artiste-element-heure {font-size: 30px;}
    
    #sceno-map iframe {height: 600px;}
    
    .lightbox {width: 90%; margin: 0 5%;}
    
    .liste-fichiers {margin-bottom: 60px;}
    .liste-fichiers-element {padding: 10px 0;}
    .liste-fichiers-element::after {height: 16px; width: 16px; bottom: 15px; right: 10px;}
    
    #bloc-triptyque-photo {margin-right: 0;}
    
    
    
    footer {padding-top: 80px;}
}


@media all and (max-width: 1000px) {
    .home #zone-top {aspect-ratio: unset; background-size: 1000px auto;}
    #zone-top-date { height: 600px; }
    #zone-top-date-inner {font-size: 30px; width: 100%; bottom: 10px; text-align: center;}
    
    .home #logo {width: 300px; top: 70px;}
    
    #logo { top: 80px; left: 30px;}
    
    #contenu {padding: 2vw 0 130px 0;}
    
	header .menu { position: absolute; width: 100%; left: auto; height: 0; top: 0; margin-right: 0;}
	.hamburger {
	  float: left;
	  margin: 0;
	  padding: 15px 15px 20px 15px;
	  width: calc(100% - 30px);
	  overflow: hidden;
	  height: 20px;
	}
	
	[data-aos="anim-menu"] {
	 margin-left: 0;
	}
	[data-aos="anim-menu"].aos-animate {
		 margin-left: 0;
	}
	
    #sub {padding: 0;}
    
	header .checked { height: auto;}
    header .checked #sub {padding: 30px;}
	
	#menu-menu { padding-bottom: 80px;}
	
    #lang-switcher {bottom: auto; left: auto; right: 20px; top: 12px; z-index: 99; padding: 5px; border: 1px solid var(--main-color-creme); font-size: 14px;}
    
	#menu-social { bottom: auto; top: 10px; right: 65px; left: auto; overflow: hidden;}
	#menu-social li { margin: 0 5px; float: left;}
	#menu-social a {margin: 5px 0 0 0;}
	
	.hamburger:after { display: none;}
    
    #zone-padding-menu {margin-right: 0;}
    
    .bouton-anim1:after {display: none;}
    
    #zone-top-billets-bouton-ligne {display: none;}
    #zone-top-billets-texte p {padding: 0;}
    
    #zone-top-billets, #accueil-programmation-boutique, #accueil-programmation, #accueil-vestiges, .equipe-grid {padding-bottom: 80px;}
    
    #accueil-programmation-boutique-menu-float a {font-size: 35px;}
    #accueil-programmation-boutique-droit p {font-size: 18px; padding: 0;}
    
    .nouvelle-element {width: 50%; margin-bottom: 40px;}
    .nouvelle-element:last-child {display: none;}
    
    #accueil-punch {height: 700px;}
    .accueil-chiffre {font-size: 100px; width: 50%; margin-bottom: 15px;}
    .accueil-chiffre span {font-size: 50px;}
    #accueil-punch-titre {font-size: 50px; width: 90%; margin: 0 5%;}
    
    .poster-element span {font-size: 80px; height: 50px; line-height: 50px;}
    
    #zone-top-titre {height: auto; margin-bottom: 60px; padding-top: 50px;}
    #zone-top-titre h1 {font-size: 60px; padding: 25px 0 0 300px;}
    #zone-top-titre h1:before {width: 180px; height: 18px; left: 150px; top: 60px;}
    
    #prog-boutons-top {margin-bottom: 50px;}
    .prog-jour {width: 90px; height: 90px; margin-right: 5px; }
    .prog-jour-semaine {display: none;}
    .prog-jour-chiffre {font-size: 35px;}
    .prog-jour-mois {font-size: 12px;}
    
    
    .section-spectacles:before {position: absolute; content: ""; width: 5px;left: calc(35% - 2px);}
    
    .liste-spectacles {width: 35%;}
    
    .fiche-spectacle {width: 65%; padding: 40px 0;}
    .fiche-spectacle-photo {height: 300px;}
    .fiche-spectacle-titre { bottom: 25px; font-size: 30px;}
    .fiche-spectacle-intro {padding: 30px 20px;}
    .fiche-spectacle-intro p {font-size: 18px;}
    .fiche-spectacle-artistes {padding: 15px 20px;}
    .fiche-spectacle-artiste-element {padding-bottom: 25px; margin-bottom: 10px;}
    .fiche-spectacle-artiste-element-heure {width: 20%; padding-right: 0; font-size: 24px;}
    .fiche-spectacle-titre, .fiche-spectacle-lieu {left: 20px;}
    
    .equipe-element-photo {margin-bottom: 10px;}
    .equipe-element {width: 29%; margin: 0 2%; margin-bottom: 40px; }
    .equipe-grid-sans .equipe-element {padding: 15px; width: calc(29% - 32px);}
    .equipe-element-nom {font-size: 18px;}
    .equipe-element-titre {font-size: 11px; letter-spacing: 2px;}
    
    .sceno-element {background-color: transparent; color: #000;}
    .sceno-element:before {display: none;}
    .sceno-element-titre { font-size: 25px; margin-top: 5px;}
    .sceno-element-annee {font-size: 18px;}
    .sceno-element {width: calc(50% - 10px);}
    .sceno-element-inner {position: relative; width: 90%; padding: 0 5%; top: 0; left: 0; transform: none; z-index: 1; opacity: 1;}
    
    #pop-up-fme-body {padding: 40px 60px;}
    #pop-up-fme-body p {font-size: 17px;}
    #pop-up-fme-body h2 {font-size: 50px;}
    #pop-up-fme-body h3 {font-size: 14px; padding-bottom: 10px;}
    #pop-up-fme-sous-titre {font-size: 18px;}
    
    #pop-up-fme-carte iframe {height: 450px;}
    #pop-up-fme-adresse p {font-size: 25px;}
    #pop-up-fme-adresse a {padding: 10px 50px 10px 15px; letter-spacing: 2px;}
    
    .page-id-633 p {padding: 0;}
    
    #page-40-titre {font-size: 150px; margin-bottom: 60px;}
    
    #footer-partenaires {padding: 80px 0;  margin-top: 80px;}
    #footer-partenaires:before {height: 20px;}
    #footer-partenaires .logo-element {height: 70px;}
    #footer-partenaires .logo-element img {max-height: 70px; max-width: 120px;}
    #footer-partenaires-presentateur .logo-element-inner img {max-height: 100px; max-width: 180px;}
    #footer-partenaires-collab .logo-element-inner img {max-height: 85px; max-width: 160px;}
    
    #footer-partenaires {text-align: center;}
    
    #footer-social {display: none;}
    #footer-coordonnees {width: calc(50% - 50px);}
    #footer-liens-titre {font-size: 40px; margin-bottom: 20px;}
    #footer-liens {width: calc(50% - 50px);}
    
    #accueil-vestiges:after {width: 70px; height: 70px; transform: translate(-50%, -100%);}
    
    #contenu h2 {font-size: 35px; padding-bottom: 30px;}
    h3 {font-size: 20px; letter-spacing: 5px; margin-bottom: 20px; margin-top: 10px;}
    p, #contenu ul {font-size: 20px; margin-bottom: 30px;}
    #contenu ol {font-size: 20px;}
    .texte-intro p {font-size: 25px;}
}

@media all and (max-width: 800px) {
	.home #zone-top {background-size: 800px auto;}
    #zone-top-date { height: 470px;}
    #zone-top-date-inner {font-size: 20px;}
    
    .home #logo {top: 70px;}
    
    .colonnes {display: block;}
    .col {width: 100%;}
    #accueil-vestiges .colonnes h2 {text-align: center;}
    #accueil-vestiges .colonnes p {font-size: 18px; text-align: center;}
    .col:first-child {text-align: center; padding-right: 0; margin-bottom: 40px;}
    .col:last-child {padding-left: 0;}
    
    .col-pass-important:after {display: none;}
    .col-pass-important p {text-align: left;}
    
    .passeport-element {width: 48%; margin: 0 1%; margin-bottom: 20px;}
    .passeport-element-inner {padding: 90% 20px 20px 20px;}
    
    #sceno-intro-image, #sceno-intro-texte { width: 100%; text-align: center;}
    #sceno-intro-image {margin-bottom: 40px;}
    #sceno-intro-image img {width: 200px; position: relative; left: 50%; transform: translateX(-50%);}
    
    .pup-up-fme-licorne #pop-up-fme-body {background-size: 100%; background-position: -80px 120%;}
    .pup-up-fme-ronds #pop-up-fme-body {background-size: 100%; background-position: 0 100%;}
    
    #pop-up-fme-body .col:first-child {text-align: left;}
    .pop-up-sceno .colonnes {flex-direction: column-reverse; display: flex;}
    
    .nouvelle-element-img-date {margin-bottom: 10px;}
    
    #prog-boutons-top {}
    #prog-jours {order: 2; width: 100%;}
    #prog-bouton-pdf {torder: 1; width: 100%;}
    #prog-bouton-pdf #accueil-nouvelles-plus {margin-left: 0; margin-bottom: 20px;}
    
	#cta-lien {font-size: 18px; letter-spacing: 3px; padding: 15px 20px;}
	#accueil-vestiges .col:first-child p { text-align: center;}
    
    .carte-categorie .place-item {padding: 5px 10px 5px 5px;}
    
    #footer-partenaires .div-inner {margin: 0; width: 100%;}
    #footer-partenaires #footer-partenaires-liste .logo-element {width: 24%; height: auto;}
    #footer-partenaires #footer-partenaires-liste .logo-element img {max-height: 100%; max-width: 100%; width: 100%; height: auto; transform: none; top: 0; display: block;}
	
}


@media all and (max-width: 640px) {
	#logo {left: 20px;}
    
    #zone-top-billets-texte, #zone-top-billets-bouton { width: 100%;}
    #zone-top-billets-texte {margin-bottom: 40px;}
    
    #zone-top-billets, #accueil-programmation-boutique, #accueil-programmation, #accueil-vestiges, .equipe-grid {padding-bottom: 60px;}
    
    #accueil-programmation-boutique-menu, #accueil-programmation-boutique::before {display: none;}
    #accueil-programmation-boutique-droit {width: 100%;}
    #accueil-programmation, #accueil-boutique { padding-left: 0;}
    
    .nouvelle-element {width: 100%; margin-bottom: 60px;}
    .nouvelle-element-inner {padding: 0;}
    .nouvelle-element:last-child {display: block;}
    #accueil-nouvelles h2 {font-size: 40px; margin-bottom: 60px; }
    #accueil-nouvelles-plus {font-size: 14px; margin-top: 0;}
    
    #accueil-vestiges h2 {font-size: 40px; margin-bottom: 30px;}
    
    #zone-top-titre {height: auto; margin-bottom: 50px;}
    #zone-top-titre h1 {font-size: 55px; padding: 35px 0 0 200px;}
    #zone-top-titre h1:before { display: none;}
    
    #prog-boutons-top {margin-bottom: 40px;}
    .prog-jour {width: 70px; height: 70px; margin-right: 5px !important; }
    .prog-jour-chiffre {font-size: 30px;}
    .prog-jour-mois {font-size: 12px;}
    
    .liste-spectacles {width:100%;}
    .spectacle-element {padding: 10px 15px; background-color: var(--main-color-noir); text-decoration: none; border-radius: 10px;}
    .spectacle-element:hover {background-color: var(--main-color-rouge);}
    .spectacle-element:hover .spectacle-element-artistes {color: var(--main-color-creme);}
    .liste-spectacles .checked .spectacle-element {background-color: var(--main-color-rouge);}
    .spectacle-element-photo {display: none;}
    .spectacle-element-infos {position: relative; bottom: 0; left: 0; padding: 0 30px 0 60px; width: calc(100% - 90px);}
    .spectacle-element-infos:after {content: "+"; position: absolute; top: -10px; right: 0; font-size: 30px; color: var(--main-color-creme);}
    .spectacle-element-heure {top: 50%; transform: translateY(-50%);}
    .spectacle-element-titre {font-size: 14px;}
    .spectacle-element-artistes {font-size: 14px;}
    
    .fiche-spectacle-lieu {font-size: 12px; letter-spacing: 1px;}
    .fiche-spectacle-artiste-element-nom {font-size: 20px;}
    .fiche-spectacle-artistes {margin-bottom: 40px;}
    .fiche-spectacle {width: 100%; padding: 0;}
    .section-spectacles:before {display: none;}
    .fiche-spectacle-artiste-element {display: block; text-align: center;}
    .fiche-spectacle-artistes {padding: 0;}
    .fiche-spectacle-artiste-element-photo { width: 50%; margin-bottom: 10px; left: 50%; transform:translateX(-50%); position: relative;}
    .fiche-spectacle-artiste-element-nom-styles { width: 100%; margin-bottom: 10px;}
    .fiche-spectacle-artiste-element-nom, .fiche-spectacle-artiste-element-styles {padding: 0;}
    .fiche-spectacle-artiste-element-heure {width: 100%; text-align: center;}
    
    .fiche-vide-choisis {display: none;}
    
    .equipe-element {width: 46%; margin: 0 2%; margin-bottom: 40px; }
    .equipe-grid-sans .equipe-element {padding: 15px; width: calc(46% - 32px);}
    
    .passeport-element {width: 98%; margin: 0 1%; margin-bottom: 20px;}
    .passeport-element-inner {padding: 80% 20px 20px 20px;}
    
    #titre-nouvelle-single {bottom: 0; left: 0; padding: 30px 0; font-size: 30px; color: #000; position: relative; text-align: left;}
    #image-nouvelle-single:before {display: none;}
    
    #sceno-map iframe {height: 400px;}
    .sceno-element-titre { font-size: 22px;}
    .sceno-element-annee {font-size: 16px;}
    .sceno-element {width: calc(100% - 10px);}
    
    .nouvelle-element-img-date {margin-bottom: 0;}
    
    #pop-up-fme-carte iframe {height: 300px;}
    #pop-up-fme-adresse p {font-size: 23px;}
    
    #pop-up-fme-body {padding: 20px;}
    
    #cta-lien {font-size: 20px; letter-spacing: 3px; padding: 15px 25px;}
    
    footer {padding-top: 30px;}
    #footer-social, #footer-coordonnees, #footer-liens {width: 100%; padding: 0; margin-bottom: 60px; display: block; text-align: center;}
    #footer-liens {margin-bottom: 0;}
    .footer-social-lien img {width: 50px; height: 50px;}
    #footer-coordonnees-logo {display: inline-block; margin-bottom: 20px;}
    
    #footer-partenaires {padding: 60px 0;  margin-top: 60px;}
    
    #contenu h2 {font-size: 30px;}
    .page-equipe #contenu h2 {text-align: left;}
    
    p, #contenu ul {margin-bottom: 30px;}
    .texte-intro p {font-size: 23px;}
    
    .close {font-size: 25px; width: 30px; height: 30px;}
    
    #page-40-titre {font-size: 100px; margin-bottom: 40px;}
    
    .parcours-col-image img {width: 100%;}
}


@media all and (max-height : 640px) and (min-width : 900px) {
	.menu-sticky-bot { top: auto; bottom: 0; position: fixed !important;}
	header .menu { position: absolute; height: auto;}
	.menu #sub { height: auto;}
	#menu-menu { padding-bottom: 40px;}
	.hamburger { }
    #zone-padding-menu {margin: 0;}
    #menu-social {top: 10px; bottom: auto;}
}


@media all and (max-width: 420px) {
	#logo {left: 10px; margin-bottom: 30px;}
    
    #accueil-punch {height: 600px;}
    .accueil-chiffre span {font-size: 35px;}
    #accueil-punch-titre {bottom: 20%; font-size: 40px; width: 90%; margin: 0 5%;}
    
    #liste-posters-fleches {display: none;}
    #liste-posters {margin: 0;}
    
    #zone-top-titre {margin-bottom: 30px;}
    #zone-top-titre h1 {font-size: 40px; padding: 110px 5% 0 5%;}
    
    #prog-boutons-top {margin-bottom: 40px;}
    .prog-jour {width: 55px; height: 55px; margin-right: 3px; }
    .prog-jour-chiffre {font-size: 28px;}
    .prog-jour-mois {font-size: 10px;}
    
    .equipe-element {width: 96%; margin: 0 2%; margin-bottom: 40px; }
    .equipe-grid-sans .equipe-element {padding: 15px; width: calc(96% - 32px);}
    
    #page-40-titre {font-size: 80px; margin-bottom: 40px;}
    
    .footer-social-lien img {width: 40px; height: 40px;}
}