/* STYLES POUR LE SITE 
LES CHERCHEURS DE LUMIÈRE */

*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}


/* FONT */
/* JOST */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

/* END FONTS */

/* VARS */
:root {
  
    --dark-gray: #202021;
    --light-gray: #8f8f8f;
    --ligh-light-gray:#dedede;
  
    /* --overlay-gray:#474749; */
    --yellow: #eec41a;
    --white: #fff;
    --white-semi-transp:rgba(255,255,255,.5);
    --white-strong-transp:rgba(255,255,255,.1);
    --dark-blue :#1e2742; 
    --overlay-card: rgba(30,39,66, .6);
    --overlay-card-spect: rgba(30,39,66, .5);
    --overlay-card-light: rgba(30,39,66, .3);
}




html {
    box-sizing: border-box;
    /* font-size: 62.5%;  pour utilisation de l'unité REM 1 REM = 16px */
    font-size: 1rem;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--dark-blue);
    overflow-x: hidden;
    scroll-behavior: smooth;
    display: grid;
    align-content: start;
    justify-content: center;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    transition: all .2s ease;
    color: #fff;
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    /* font-weight: bold; */
 
}

footer,
header {
    padding: 1rem 2.5rem;
}


.footer-content {
    display: flex;
    justify-content: space-between;
    height: 100%;
    /* background-color: #fff; */
}

.the-footer-nav {
    height: 100%;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin:0;

}

.footer-nav-item{
    margin-bottom: .3rem;
}


footer a {
    display: inline-block;
    position: relative;
    font-size: 1.3rem;
    color: var(--yellow);
    font-weight: bold;
    text-transform: capitalize;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

























.extra-footer-link {
    margin-top: 10px;
}

.extra-footer-link a {
    font-family: inherit;
    font-weight: normal;
    font-size: 1rem;
    text-transform: none;
    color: var(--light-gray)
}

.extra-footer-link::after {
    font-size: 1rem;
    content: " | © 2026";
    color: var(--light-gray)
}

.logo-footer-container {
    display: flex;
    flex-direction: column;
    /* background-color: red; */
    width: 280px;
    justify-content: center;
    align-items: end;
    color: var(--light-gray)

}

.logo-footer,
.logo-header {
    width: 70%;
    height: auto;

}


.logo-header img {
    transition: opacity 0.2s ease-in-out;
    opacity: .65;

}

.logo-header:hover img {
    opacity: 1;
}




.adresse {
    margin-top: 1rem;
    font-size: 1.1rem;
    font-weight: normal;
    text-align: center;
    width: 90%;
}



/* ///////////////// NAV ///////////////////// */


.wrapper-burger-menu {
    display: block;
    position: fixed;
    top: 26px;
    right: 30px;
    z-index: 8020;
    width: 60px;
    height: 60px;
    color: #fff;
    border-radius: 50%;
    background: var(--yellow);
}


.strip {
    width: 30px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    background: var(--white);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease-in-out;
}

.strip::before {
    content: '';
    position: absolute;
    bottom: 10px;
    height: 5px;
    border-radius: 5px;
    width: 100%;
    background: var(--white);
    transition: all 0.2s ease-in-out;

}

.strip::after {
    content: '';
    position: absolute;
    top: 10px;
    height: 5px;
    border-radius: 5px;
    width: 100%;
    background-color: var(--white);
    transition: all 0.2s ease-in-out;

}

.wrapper-burger-menu.active .strip {

    background-color: transparent;
}


.wrapper-burger-menu.active .strip::before {
    bottom: 0;
    transform: rotate(45deg);
}

.wrapper-burger-menu.active .strip::after {
    top: 0;
    transform: rotate(-45deg);
}


.main-nav-container {
    display: none;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8010;
    background: var(--dark-blue);
    overflow: auto;
    transition: all 0.2s ease-in-out;
    justify-content: center;
    align-items: center;

}


.main-nav {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-transform: capitalize;
    font-size: 4.8rem;
    text-align: center;
    list-style: none;
    transform: translateY(-2rem);
    margin: 0;
}


.main-nav .menu-item{
    line-height:6rem;
}

.menu-item {
   line-height:2rem;
}

.menu-item a {
    color: var(--yellow);
    text-decoration: none;
  opacity: .5;
    transition: opacity 0.2s ease-in-out;
}
.menu-item a:hover{
    opacity: 1;
}

.current-menu-item a,
.current_page_item a,
.current-post-ancestor a{
    color: var(--yellow);
   opacity: 1; 
}







.logo-main-nav {
    /* transform: translateY(-2rem); */
}

.logo-main-nav .main-menu-logo img {
    width: 220px;
    height: auto;

}




/* ///////////////// END NAV ///////////////////// */

/* ///////////////// HOME ///////////////////// */

body.home .site-container {
    /* width: 1920px; */
    width: 100vw;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto auto;
    /* background-color: red; */
    overflow: hidden !important;
}

.home-content-container {
    overflow: hidden !important;
    width: 100vw;
    height: 100vh;
    grid-row: 1/2;
    display: grid;
    grid-template-rows: 1fr;
    /* background-color: gold; */
    position: relative;
}


body.home footer {
    width: 100%;
    height:
        /*380px*/
        30vh;
    grid-row: 2/3;
    /* background-color: fuchsia; */
}

.logo-and-baseline-container {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 88vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* background-color: #fff; */
}

.logo-home {
    width: 400px;
    height: auto;
    /* opacity: .65;*/
    /* transform: translateY(-4rem);*/
}

.home-baseline {
    width: 683px;
    font-size: 1.1rem;
    text-transform:uppercase;
    font-weight: 400;
   transform: translateY(2rem);
}


/*// ROTATION SOLEIL LOGO */
.home-content-container #logo-sun {
  transform-origin: center center;
  transform-box: fill-box;
  animation: rotate360 120s linear infinite;
}

@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ///////////////// END HOME ///////////////////// */




/* TEXTS */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--yellow);
    font-weight: normal;

}



.site-container {
    width: 100vw;
    /* width: 1920px; */
    /* max-width: 100vw; */
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto auto;
    /* background-color: green; */

}

header {
   
    width: 100%;
    /* height: 300px; */
    grid-row: 1/2;
    /* background-color: rgba(255, 255, 255, .3); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.logo-home-header {
    width: 250px;
}

.content-container {
    width: 1368px;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0 1rem;
    /* background-color: red!important; */
    /* display: grid; */

}


footer {
    width: 100vw;
    height: 30vh;
    max-height: 380px;
    grid-row: 3/4;
    /* background-color: olive; */
}

/* ///////////////// RUBRIQUES ///////////////////// */

.header-rub {
   padding-bottom: .2rem;
}


.big-title-rub {
    font-weight: bold;
    font-size: 3.2rem;
    margin: 0 0 0.15rem 0;
    text-transform: capitalize;
}

.link-to-rub,
.link-to-rub:hover,
.link-to-rub:active,
.link-to-rub:visited,
.link-to-rub:focus{
    color:var(--white-strong-transp);
}




.display-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1rem;

}

.display-grid-troupe {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;

}




.card-link,
.card-troupe {
    text-decoration: none;
}

.card,
.card-troupe {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1/1;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.card:hover img,
.card-troupe:hover img {
    transform: scale(1.1);
}
.card:hover .card-content{
 background-color:var(--overlay-card-spect); 
}



.featured-img {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.featured-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s;
}

.card-content,
.card-troupe-content {
    position: absolute;
    top: 0;
    left:0;
    background-color: var(--overlay-card);
    width: 100%;
    height: 100%;
    padding: 10px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition: background-color 1s;
}



.title-spectacle,
.title-artistes {
    font-size: 2rem;
    line-height: 2.1rem;
    font-weight: bold;
    color: var(--white);
}


.movie-year {
    position: absolute;
    top: 2rem;
    right: 1.2rem;
    z-index: 3;
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1rem;
    background-color: var(--white);
    color: var(--dark-blue);
    text-align: center;
    border-radius: 20px;
    padding: 5px 10px;
    margin: 3px;
    pointer-events: none;
    transform: translateY(-13px);
}


.cat-spectacle{
    display: inline-block;
    padding: 0;
    margin-bottom: .3rem;
    color: var(--yellow);
    width:fit-content;
    font-weight: bold;
}
.cat-spectacle::after{
    content: "";
    display: block;
    border-bottom: 4px solid;
    color: var(--yellow);
}


.text-card {
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    margin: 0;
    /* background-color: gray; */
    height: 65px;
    padding: 10px 20px 20px 20px;
    color: var(--white);
}




.movie-duration p::before {
    content: "";
    display: inline-flex;
    margin-right: 3px;
    transform: translateY(-2px);
    width: 18px;
    height: 18px;
    background: url(../img/yellow-time.svg) no-repeat center center;
    background-size: auto;
    background-size: 18px 18px;
}

/* ///////////////// FICHE FILM/DOCU ///////////////////// */


.header-fiche {
    
    /* background-color: aqua; */
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 80px 1fr;
    gap: 1rem;
    padding-bottom: 2rem;
}

.header-fiche .muted{
    color:var(--bg-card);
}


.title-rub-and-back-rub-container{
    grid-column: 1/3;
    grid-row: 1/2;
    display: flex;
    justify-content: space-between;
    
}

.header-fiche .big-title-rub{
}

.back-to-rub{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
    color: var(--yellow);
    /* background-color:red; */
    height: 100%;
    width: 100%;
    overflow: hidden;
    transform: translateY(.5rem);
   
}

.text-back-to-rub{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 160px;
    transition: transform 0.2s ease-in-out;
    font-weight: bold;
}

.text-back-to-rub::before{
    position: absolute;
    margin-top: -150px;
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url(../img/white-back-arrow.svg) no-repeat center center;
    background-size: auto;
    background-size: 30px 30px;
}

.back-to-rub,
.back-to-rub:hover,
.back-to-rub:active,
.back-to-rub:visited{
    color:var(--yellow);
}

.back-to-rub:hover > .text-back-to-rub{
    transform: translateY(-80px);
}


.featured-video{
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    /* background-color: #fff; */
    grid-column: 1/3;
    grid-row: 2/3;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../img/spinner.svg) center center no-repeat;
    background-size: 10%;
    margin-bottom: 1.5rem;
}



.featured-video iframe {
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
}

.fiche-header-text-container{
    position: relative;
    padding-top: 3rem;
    grid-column: 1/2;
    grid-row: 2/3;
}

.fiche-title-spectacle,
.fiche-title-artistes{
    font-size: 3rem;
    padding-bottom: 2rem;
    font-size:3rem;
    color:var(--white);
    font-weight: bold;
    line-height: 3.1rem;
    margin : 0;
  
}


.fiche-header-text-container p{
    margin:0;
}


.cat-spectacle-fiche{
    display: inline-block;
    padding: 0;
    margin-bottom: .9rem;
    color: var(--yellow);
    width:fit-content;
    font-size: 1.5rem;
    font-weight: bold;

}



.cat-spectacle-fiche::after{
    content: "";
    display: block;
    border-bottom: 4px solid;
    color: var(--yellow);
}






.fiche-featured-img {
    display: block;
     grid-column: 2/3;
    grid-row: 2/3;
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 20px;
    overflow: hidden;
}

.fiche-featured-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.spectacle-year-fiche {
	display: inline-flex;
    justify-content: center;
    width: 5rem;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1.4rem;
	background-color: var(--white);
	color: var(--dark-blue);
	text-align: center;
	border-radius: 20px;
	padding: 5px 10px;
	margin: 3px;
    margin-bottom: 1rem;
	pointer-events: none;
}


.infos-header-fiche {
    margin-top: 6rem;
}

.lead-word{
    font-weight: bold;
}

.infos-header-fiche p{
    font-size: 1.5rem;
    line-height: 1.8rem;
    margin-top: 5px;
}

.spectacle-duration-fiche p::before {
    content: "";
    display: inline-flex;
    margin-right: 6px;
    width: 15px;
    height: 15px;
    background: url(../img/yellow-time.svg) no-repeat center center;
    background-size: auto;
    background-size: 15px 15px;
    transform: translateY(2px);
}


.fiche-content-container, .page-content-container{
    width: 100%;
    height:auto;
    background-color:var(--ligh-light-gray);
}

.fiche-content, .page-content{
    width: 100%;
    height: auto;
    background-color:var(--ligh-light-gray);
    color:var(--dark-gray);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
    font-size: 1.4rem;
    font-style: normal;
    line-height: 1.9rem;
}

.page-content-and-more{
    width: 100%;
    height: auto;
    background-color:var(--ligh-light-gray);
    color:var(--dark-gray);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 2fr;
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
    font-size: 1.4rem;
    font-style: normal;
    line-height: 1.9rem;
}

.items-fiche, .the-page-content{
    grid-column: 1/3;
    grid-row: 1/2;
}

.items-fiche p, .the-page-content p{
    margin-bottom: 1rem;
}

.aside-fiche,
.side-page-content{
    grid-column: 3/4;
    grid-row: 1/2;
}

.aside-fiche img{
    width: 100%;
    height: auto;
}

.download-docs{
    display: flex;
    margin-top: 1rem;
    justify-content: center;
    flex-direction: column;
}

.doc-link,
.doc-link:visited{
    display: inline-block;
    font-size: 1.5;
    color:var(--dark-blue);
    font-weight: bold;
    background-color: var(--yellow);
    padding: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    text-align: center;
}

.doc-link:hover,
.doc-link:active{
     color:var(--yellow);
     background-color: var(--dark-blue);
}


.su-image-carousel-item-content{
    background-color: var(--white);
}
.su-image-carousel-crop .su-image-carousel-item-content img {
	object-fit:contain!important;
}



.wp-block-quote {
	display: block;
	border-left: 6px solid var(--yellow);
	padding-left: 1rem;
	margin: 2rem 0;
	font-style: italic;
}

.wp-block-quote .wp-block-paragraph:first-of-type::before{
    content: "";
	display: inline-flex;
	margin-right: 10px;
	width: 40px;
	height: 40px;
	background: url(../img/yellow-quote.svg) no-repeat center center;
	background-size: auto;
	background-size: 40px 40px;
	transform: translateY(8px);
}

.wp-block-quote .wp-block-verse {
	font-weight: bold;
	color: var(--light-gray);
	font-size: 1.2rem;
	font-style: normal;
    padding: 0;
    background-color: transparent;
    font-family: inherit;
}


figcaption{
    font-weight: bold;
    color:var(--light-gray)
}


.dates-lieux-block{
    background-color: var(--white-semi-transp);
    padding: 1.5rem 1.5rem 2rem 1.5rem;
    /* border-radius: 1rem; */
    margin-bottom: 1.5rem;
}

.dates-lieux-liste,
.infos-spectacle-liste{
    margin: 0;
}
.infos-spectacle-liste{
    line-height: 1.7rem;
}

.dates-lieux-titre::before{
	content: "";
	display: inline-flex;
	margin-right: 10px;
	width: 15px;
	height: 15px;
	background: url(../img/yellow-arrow.svg) no-repeat center center;
	background-size: auto;
	background-size: 15px 15px;
	transform: translateY(2px);
}


.dates-lieux-item{
    color: var(--dark-gray);
    font-size: 1.2rem;
    line-height: 1.7rem;
    border-bottom: 4px dotted var(--ligh-light-gray);
    padding-top: .2rem;
    list-style-type: none;
}

.dates-lieux-titre{
    font-weight: bold;   
    font-size: 1.5rem;
    color:var(--dark-blue);
}

.mini-cal-autour{
    font-size: 1.2rem;
    line-height: 1.7rem;
    list-style-type: none;
    margin-left: 0;

}

.dates-lieux-item::before{
    content: "";
	display: inline-flex;
	margin-right: 6px;
	width: 16px;
	height: 16px;
	background: url(../img/yellow-cal.svg) no-repeat center center;
	background-size: auto;
	background-size: 16px 16px;
	transform: translateY(1px);
}

.infos-spectacle-block{
     margin-bottom: 1.5rem; 
}

.infos-spectacle-titre{
    font-weight: bold;   
    font-size: 1.6rem;
    color:var(--dark-blue);
    background-color: var(--yellow);
    padding: .5rem;
    width:fit-content;
    margin-bottom: .8rem;

}


 .infos-spectacle-item{
    list-style-type: none;
    /* padding-top: .2rem; */
    font-size: 1.3rem;
 }

.lateral-complement{
    font-size: 1.1rem;
}

/* .the-classe::first-letter{
    font-size: 3rem;
    font-weight: bold;
    color: var(--dark-blue);
} */

.partenaires-spect{
    border:var(--yellow) 5px solid;
    border-left:0;
    border-right: 0;
    padding:1rem 0;
    font-size: 1.2rem;
    line-height: 1.6rem;
}

.the-quote-slider{
    max-width: 460px;
}



/* surcharge styles pour les accordéons shortcode ultimate */
/* background: url(../img/yellow-arrow.svg) no-repeat center center; */

.su-accordion{
    margin: 0;
}

.su-spoiler-title {
    display: flex;
    justify-content: space-between;
   align-content: center;
	font-weight: bold;
	font-size: 1.6rem!important;
	color: var(--dark-blue);
	background-color: var(--yellow);
	padding: .8rem!important;
	width: fit-content;
}

.su-spoiler-icon{
    position: relative!important;
    /* left:95%!important; */
    /* top:11px!important; */
    font-size: 1.2rem!important;
    margin-right: .5rem;
    top:0!important;
}

.su-spoiler-content{
    font-size: 1.3rem;
    line-height: 1.8rem;
}


.su-spoiler-style-default > .su-spoiler-content {
	padding: 1rem 0 0 0!important;
}


.su-accordion .su-spoiler,
.su-u-trim {
	padding-bottom: 0!important;
    margin-bottom:1.2rem!important;
}


.su-custom-gallery-slide {
	margin:0!important;
    width: 50%!important;
    aspect-ratio: 4/3!important;
}

.su-custom-gallery-slide img {
	border:0!important;
    background: transparent!important;
    border-radius: 0px!important;
    transition: all 2s ease-in-out;
}

.su-custom-gallery-slide img:hover {
    background: var(--yellow)!important;
}



.side-page-content p {
	display: block;
	width: 100%;
	font-size: 1.1rem;
	line-height: 1.4rem;
	margin-bottom: 1rem;
	border-width: 0px 0px 0px 7px;
	border-style: solid;
	border-color: var(--yellow);
	padding-left: 7px;
}







.contact p:last-child {
    border-bottom: 2px dotted var(--white-semi-transp);
    padding-bottom: .5rem;
    margin-bottom: .5rem;
}



p.mail::before{
	content: "";
	display: inline-flex;
	margin-right: .5rem;
	width: 25px;
	height: 25px;
	background: url(../img/letter.svg) no-repeat center center;
	background-size: auto;
	background-size: 25px 25px;
	transform: translateY(6px);
}
p.tel::before{
	content: "";
	display: inline-flex;
	margin-right: .5rem;
	width: 25px;
	height: 25px;
	background: url(../img/tel.svg) no-repeat center center;
	background-size: auto;
	background-size: 25px 25px;
	transform: translateY(6px);
}


.socials{
    display:flex;
    padding-bottom: .3rem;
    padding-right: .3rem;
    justify-content: flex-end;
   
}

.social-link-member{
    display: block;
    width: 30px;
    height: 30px;
    /* background-color: #fff; */
}

.social-link-member img{
    display: block;
    width: 30px;
    height: 30px;
}




/* ----  CONTACT FORM  ---- */

.container {
    margin: 0 auto;
    padding-right: 8px;
    padding-left: 8px;
}

.d-flex-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}


.contact-wrapper-form {
    display: flex;
    margin: 0;
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: center;
    /* padding-bottom: 50px; */
}

#contact-form {
    display: flex;
    justify-content: center;
    flex-direction: column;
}


.form-controls {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: center;
    background-color:var(--dark-blue);
    border-radius: 30px;
    padding: 2rem;
    margin: 2rem 0;
}


.display-input {
    flex-basis: 40%;
    justify-content: space-between;
    margin: 10px;
}

.display-input-text {
    flex-basis: 82%;
    justify-content: center;
    margin: 10px;
}

.display-input-captcha {
    display: flex;
    flex-basis: 82%;
    justify-content: space-between;
    margin-left: 0;
    margin-top: 20px;
}


.the-contact-form input {
    margin: 0;
    border: 3px solid var(--white)!important;
    border-radius: 30px!important;
    /* padding:5px!important; */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.the-contact-form textarea {
    margin: 0;
    border: 3px solid var(--white)!important;
    border-radius: 20px!important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

::-webkit-input-placeholder {
    /* Chrome */
    color: var(--light-gray);
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--light-gray);
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--light-gray);
}

:-moz-placeholder {
    /* Firefox 4 - 18 */
    color: var(--light-gray);
}

.the-contact-form textarea:focus,
.the-contact-form input:focus {
    outline: none;
    border: 3px solid var(--yellow)!important;
}



.the-contact-form input.btn:focus{
    outline: none;
    border: 0px!important;
}


label {
    display: inline-block;
    margin-bottom: .3rem!important;
    margin: 0;
    color: var(--white-semi-transp)!important;
    font-size: 1.1rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: .5rem 1rem!important;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bg-card);
    background-color: #fff;
    background-clip: padding-box;
    /* border-radius: .25rem; */
  
}

.btn.disabled,
.btn:disabled {
    opacity: .65;
}

.g-recaptcha {
    flex-basis: 33%;
}

.submit-and-mandatory {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-basis: 50%;
}

.for-recaptcha {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
}


.infos-mandatory {
    margin: 0;
    font-size: 13px;
    color:var(--white-semi-transp)
}

.list-unstyled {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

.wpcf7-not-valid-tip {
    color:var(--yellow);
    font-size: 1rem;
}

.wpcf7 form .wpcf7-response-output {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 80%;
    border: 2px solid var(--ligh-light-gray)!important;
    border-radius: 30px;
    color:var(--yellow);
	margin:1rem 0px!important;
	padding: .5rem 5px!important;
    text-align: center!important;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2rem;
}



/* .d-none {
    display: none;
}

.messages {
    text-align: center;
}

.alert-success {
    font-size: 18px;
    color:var(--yellow);
    margin-bottom: 20px;
} */



input.btn, input.btn:visited {
	font-size: 1.2rem;
	color: var(--yellow)!important;
	text-decoration: none;
	padding: 10px 20px!important;
    border: none!important;
	border-radius: 16px;
	margin-top: 15px;
	margin-bottom: 15px;
	transition: all 0.3s ease-in-out;
    background-color: var(--white)!important;
}

input.btn:hover{
    cursor: pointer;
    background-color: var(--yellow)!important;
    color: var(--white)!important;
}




.wpcf7-spinner::before {

	background-color: var(--dark-blue)!important;
}


.wpcf7-spinner {

	background-color:var(--yellow)!important;
		opacity: 1!important;
        display: block!important;
        margin: 0 auto;
}


/* PAGE 404 */

.top-layer-404{
    position: absolute;
    z-index: 4;
}



.content-404-container{
    width: 100%;
    height: 100vh;
    position: relative;
    background: transparent url(../img/404-lcdl.jpg) center center no-repeat;
    background-size: cover;
}


.page-404-content-container {
    width: 100%;
    height: 100vh;
    background: var(--overlay-card-light) url('../img/pattern.png') repeat top left;
    bottom:0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 4rem;

}


.big-title-404 {
    font-size: 2.9rem;
    margin-bottom: 2rem;
    text-align: center;
    color:var(--white);
    opacity: .8;
    line-height: 2.8rem;
    font-weight: bold;
}


.retour-home-404{
    text-align: center;
    font-size: 1.3rem;
    margin: 0;
    padding:0;
}

.retour-home-404 a, .retour-home-404 a:visited{
    border: 2px solid var(--yellow);
    border-radius: 30px;
    color: var(--yellow);
    padding: .3rem .6rem;
}

.retour-home-404 a:hover{
    background-color: var(--yellow);
    color: var(--white);
}


/************************* MEDIA QUERIES *************************/



@media screen and (max-width: 1024px) {

    .header-fiche {

        min-height: auto;
        grid-template-rows: 60px 1fr;
    }


    .big-title-rub {
        font-size: 3rem;
        margin-bottom: 0.15rem;
    }

    
.en-savoir-plus{
    display: none;
}

.fiche-title-spectacle,
.fiche-title-artistes {

	font-size: 2.7rem;
	padding-bottom: 2rem;
}

.main-nav {
    font-size: 3rem;
}

.logo-main-nav{
   transform: translateY(-2rem);
}

.main-nav .menu-item{
margin: 0;
padding: 0;
line-height: 4rem;
}

.main-menu-logo img{
    	transform: translateY(1rem);
}


}

@media screen and (max-width: 900px) {

.header-fiche {
    
    grid-template-columns: 1fr;
    gap:0;

}

 .fiche-header-text-container{
    position: relative;
    padding-top: 3rem;
    grid-column: 1/2;
    grid-row: 3/4;
}


.fiche-featured-img {
    display: block;
    grid-column: 1/2;
    grid-row: 2/3;
    position: relative;
    aspect-ratio:4/3;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 1rem;

}

.text-back-to-rub::before {
	margin-top: -175px;
}

}



@media screen and (max-width: 800px) {

   

    .big-title-rub {
        font-size: 3rem;
        margin-bottom: 0.15rem;
    }

    
.en-savoir-plus{
    display: none;
}

.fiche-title-spectacle,
.fiche-title-artistes {

	font-size: 2.7rem;
	padding-bottom: 1rem;
    line-height: 3.2rem;
}

.spectacle-year-fiche {
	width: 3.5rem;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1rem;
	background-color: var(--white);
	color: var(--dark-blue);
	text-align: center;
	border-radius: 20px;
	padding: 5px 10px;
	margin: 3px;
	pointer-events: none
}


.the-page-content {
	grid-column: 1/4;
	grid-row: 1/2;
}

.side-page-content{
    grid-column: 1/-1;
    grid-row: 2/3;
   
    /* padding-top: 3rem; */
}

.the-lateral-content{
 display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}

.the-lateral-content p{
width:50%;
}

}

@media screen and (max-width: 768px) {
    .logo-home {
	width: 300px;
    transform: translateY(-1rem);
}

.home-baseline {
	width: 400px;
	font-size: 1.1rem;
	line-height: 1.3rem;
	transform: translateY(10rem);
}

footer{
   padding: 1rem;
}

footer a {
	font-size: 1.1rem;

}

.logo-footer-container{
     width: 220px;

}



}







@media screen and (max-width: 700px) {

   
    .header-fiche {
       
       
        grid-template-columns: 1fr;
        grid-template-rows: 60px auto auto 1fr;
        gap: 0;
    }

    .featured-video {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        grid-column: 1/4;
        background-size: 10%;
    }

    .fiche-title-spectacle,
    .fiche-title-artistes {
        grid-column: 1/3;
        grid-row: 3/4;
    }



    .title-rub-and-back-rub-container{
        grid-column: 1/4;
        grid-row: 1/2;

    }

    .fiche-content {
        display: block;
    
    }
    
    .aside-fiche,
    .side-page-content {
        width: 100%;
        max-width: 350px;
        margin: 2rem auto 0 auto;
        }

.the-lateral-content{
justify-content:start;
}


.the-lateral-content p{
width:auto;
}

.fiche-title-spectacle,
    .fiche-title-artistes {
        grid-column: 1/4;
        grid-row: 3/4;
    }

}



@media screen and (max-width: 600px) {



}