/*
Theme Name:   Thème enfant de Susty-master, boosté par David Daumer
Description:  Art Rock, Association indépendante et engagée dans la transition écologique et sociale
Author:       David Daumer
Author URL:   http://daviddaumer.com/
Template:     susty-master
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  susty-master-child
*/



/*------------- # Général -----------*/

@font-face {
    font-family: 'poppinsextrabold';
    src: url('./fonts/poppins-extrabold-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body{
background-color: #FFFCE6;
}


@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light !important;
    }
    body {
        background-color: #FFFCE6 !important;
        color: black !important;
    }
}



@font-face {
    font-family: 'poppinssemibold';
    src: url('./fonts/poppins-semibold-webfont.woff2') format('woff2');    
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'poppinsmedium';
    src: url('./fonts/poppins-medium-webfont.woff2') format('woff2');    
    font-weight: normal;
    font-style: normal;
}

html{
    scroll-behavior:smooth;
    font-size: 62.5%;
}

h1, h2, h3, strong{
    font-family: 'poppinsextrabold', sans-serif;
    color: black;
}



.screen-reader-text:focus, .screen-reader-text, h4, h5, .menu-responsive .navbar #bloc-rs h2, .bloc-ancres ul li a:hover, .page-template-blog .card-principal h2{
    font-family: 'poppinssemibold', sans-serif;
    color: black;
}

h1{
  font-size:6rem;
  line-height: 9rem;
}

h2{
  font-size:5rem;
  line-height: 7.5rem;
  margin: 0; 
}

h3, .accordeon summary h2, .slogan h2, .cta .container h2, .bloc-aides .container-aides h2, #infos-contact .container h2, .single-programmation #le-soir-meme .cards-global-inner h2{
    font-size:3.2rem;
  line-height: 4.8rem;
    margin: 0;  
}

h4, .menu-responsive .navbar #bloc-rs h2, .card-content-forum h3, .page-template-blog .card-principal h2, .single-programmation .header-bck h2{
    font-size:2.4rem;
    line-height: 3.6rem;  
    margin: 0;
}

.card-principal h4, .card-content-forum .info h4, .single-programmation #decouvrir-aussi .card-principal h4{ 
font-size:2rem;
line-height: 3rem;  
}

.screen-reader-text:focus, .screen-reader-text, h5, .container-access h4, .single-programmation .header-bck h3, .single-programmation #le-soir-meme h4  {
font-size: 1.8rem;
line-height: 2.7rem;
}

.screen-reader-text:focus, .screen-reader-text{background-color: #FFFCE6;}

h6, footer h3{
    font-family: 'poppinssemibold', sans-serif;
font-size: 1.6rem;
line-height: 2.4rem;}

i{
  font-style: italic;
}

body{
    font-family: 'poppinsmedium', sans-serif;
    font-size: 1.8rem;
    overflow-x: hidden;
    background-color: #FFFCE6;
    color: black;    
}

p{
    line-height: 2.7rem;
}

p:last-child{
  margin-bottom: 0;
}

/*-------------- # Header -------------*/

header#masthead > a {
	font-weight: bold;
}

header#masthead > a > svg {
	width: 1.8em;
	height: 1.8em;
}


/*--------- Menu ---------*/


header#masthead {
    top: 0; 
    z-index: 1000; 
    background-color: transparent;
}

.home header#masthead {
    position: sticky;
}

header#masthead {
position: fixed;
width: 100%;
}

.menu-desktop{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; 
    width: 100%;
    height: 13rem;
    z-index: 12;
}


.navbar-fixed-top {
    position: sticky;
    top: 0; 
    z-index: 999;
    height: 13rem;
}


.menu-desktop-inner{
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    z-index: 15;
    justify-content: space-around;
    height: 100%;
}

.menu-responsive, .menu-inner{display: flex; align-items: flex-start;}

.menu-inner{gap: 2rem;height: 8rem;}

.menu-menu-1-container #menu-menu-1{
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: .75rem 1.5rem;
  background-color: #FFFCE6;
}

.menu-menu-1-container #menu-menu-1 li a{
color: black;
text-decoration: none;
padding: 2rem 0;
}

#menu-menu-1 .sub-menu{
display: none; 
position: absolute;  
left:0;
top: 100%;
padding: 2rem 2rem 4rem 2rem;  
background-color: #FFFCE6; border: 
solid .2rem black; border-radius: 0 0 1rem 1rem; 
list-style: none; 
transition: all 500ms ease-in-out;
}

#menu-menu-1 .menu-item {
  position: relative;
}

#menu-menu-1 .menu-item-has-children:hover .sub-menu, #menu-menu-1 .menu-item-has-children:focus-within .sub-menu{
display: block; opacity: 1;  z-index: 16; top: 5rem; left: -2rem; transition: all 500ms ease-in-out;
}


.menu-item-2890:hover a, .menu-item-2900:hover a, .menu-menu-1-container #menu-menu-1 .sub-menu li a:hover {
    font-family: 'poppinssemibold';
}

.menu-menu-1-container #menu-menu-1 .sub-menu li a{
font-family: 'poppinsmedium';
}

.menu-menu-1-container #menu-menu-1 .sub-menu li{width: 22rem;}

.menu-item-has-children a::after{display: block; content:'⌃'; width: 1rem; height: 1rem; font-size: 2rem; position: relative; left:.5rem; transform: scaleY(1) rotate(180deg); transition: all 300ms ease-in-out;}

.menu-item-has-children:hover a::after{ transform: scaleY(0) rotate(180deg); transition: all 300ms ease-in-out;}

.sub-menu li a::after{display: none;}

.menu-item-2890 a, .menu-item-2900 a{
display: flex;
align-items: center;
cursor:pointer;
}

.logo{
  position: relative;
    max-width: 100%;
    width: 8rem;
    height: auto;
  z-index: 14;
}

.logo img{border-radius: .5rem;}


#menu-menu-1, .menu-responsive {border: solid .2rem black; border-radius: .5rem; padding:2.4rem 2rem;height: 100%;}


/* Menu responsive */

.menu-responsive{padding:1.5rem 1.5rem 1rem 1.5rem; gap: 2rem; background-color: #FFFCE6;}

.menu-responsive .primary-button::after{z-index: 1;}
.menu-responsive .primary-button .link-button{z-index: 2;}

.navbar {  
display:flex;
align-items:center; 
justify-content:space-between;   
font-size:1.8rem;
}

  .navbar .menu-item { 
  padding:0 10px;
  z-index: 1;
  }

.show-nav.navbar{
  margin: 0;
  padding: 0;
}

.navbar .menu-item > a {
  display:block;
  font-size:1.8rem;
  text-decoration:none;
  color:black;
  width: 100%;
  transition: all .4s ease-in-out;
}

  .navbar__links { 
    overflow:hidden;
    display: grid;
    flex-direction:row;
    flex-wrap: wrap;
align-items: baseline;
justify-content: left;
text-align: left;
    width:100vw;
    height:0;
    border-radius: 0 0 350% 350%;
    position:absolute;
top: 0;
    right:0;
    margin-top: 0;
    gap: 0 7rem;
    list-style: none;     
    background-color: #FFE051;
    transition: all 400ms ease-in-out;
  }

.show-nav .navbar__links {
height:100vh;
border-radius: 0;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(10, 1fr);
grid-column-gap: 20px;
grid-row-gap: 10px;
  padding: 30vh 5rem 10rem 45vw;  
  transition: all 400ms ease-in-out;
} 



.burger {
  display: flex;
  justify-content: center;
    width: 5rem;
    height: 5rem;
  position:relative;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
}

.burger::before{display: block; position: absolute; top: 0; content:'Menu'; color: #000;}

.show-nav .burger::before{content:'Fermer'; top: 0;}

.show-nav .burger{z-index: 10;}

.bar {
  display:block;
  font-size: 0;    
  transition: all .25s ease-in-out;   
}

.show-nav .bar{
  left: 3rem;
  top: 3rem;
}

 .bar::before, .bar::after {
  border-radius:3px;
  content:"";
  width:30px;
  height:3px;
  position:absolute; 
  background-color:black;
  transition: all .25s ease-in-out;
}

.bar::before,  .show-nav .bar::before{
    transform:translate(-16px, 25px);
}

.bar::after, .show-nav .bar::after{
    transform:translate(-16px, 35px);
}

.show-nav .bar{
  width: 0;
  background-color: black;
}

.show-nav .bar::before {
    transform:translate(-15px, 30px) rotate(45deg);
    width: 30px;
  }

.show-nav .bar::after {
    transform:translate(-16px, 30px) rotate(-45deg);
    width: 30px;
  }

.navbar__links li{
  display: block;
  margin: 0;
  position: relative;
}

.navbar__links li:first-child{margin-top: 0;}

.navbar__links .menu-item > .sub-menu {
padding: 1rem 0 0 .5rem;
}

/* Sous-menu initialement caché */
.navbar__links .menu-item > .sub-menu {
    display: none;
    position: absolute;
    top: 0;
    padding: 1rem 0 0 .5rem;
    background-color: #FFE051;
    border: none;
    border-radius: 0;
    list-style: none;
}

/* Sous-menu visible lorsque l'élément parent a le focus ou est ouvert */
.navbar__links .menu-item.open > .sub-menu, 
.navbar__links .menu-item:focus-within.open > .sub-menu {
    display: block; /* Utilisation de display block pour que les éléments soient visibles et focusables */
    position: relative;
}


.navbar__links .menu-item-has-children .sub-menu li{
margin: 1rem 0;
}
.navbar__links .menu-item-has-children a {
display: flex;
align-items: center;
cursor: pointer;
}

.container-slogan, .home h1, .bloc-access .container, #hero-home .content-img.img-header-hero, .cocarde-home, .navbar #bloc-rs,  #menu-menu-burger::before, #menu-menu-burger li{opacity: 0;}

h1, .bloc-access .container, .home h1, .container-slogan, #hero-home .content-img.img-header-hero, .cocarde-home, .show-nav.navbar #bloc-rs, .show-nav #menu-menu-burger::before, .show-nav #menu-menu-burger li {
    animation-name: smoothDisplay;
    animation-duration: 1200ms;
animation-fill-mode: forwards;
}


#hero-home .content-img.img-header-hero{
    animation-delay: 2300ms;
}

.home h1{
    animation-delay: 2400ms;
}

.cocarde-home{
    animation-delay: 2500ms;
}

.container-slogan{
    animation-delay: 2600ms;
}

.bloc-access .container{
    animation-delay: 3100ms;
}



.show-nav #menu-menu-burger::before{
animation-delay: 300ms;
}

.show-nav #menu-menu-burger li{
animation-delay: 400ms;
}

.show-nav.navbar #bloc-rs{
animation-delay: 900ms;
}


@keyframes smoothDisplay {
0%{
		opacity: 0; 
}
	100%{
	opacity: 1;
}
  
} 

#hero-home{background-color: #FFE051; transform: scale(0);}

#hero-home{
    animation-name: change-color;
    animation-duration: 2200ms;
animation-delay: 200ms;
animation-fill-mode: forwards;
}


@keyframes change-color {
      0% {
        background-color: #FFE051;
        transform: scale(.4);
      }
      50% {
        background-color: #FF8965;
        transform: scale(.8);
      }
      100% {
        background-color: #11809E;
        transform: scale(1);
      }
    }



details[open] {
    border-radius: 3rem;
    animation-name: slide;
    animation-duration: 500ms;
}

details[open] fieldset{
    opacity: 1;
    animation-name: slide;
    animation-duration: 1200ms;
}

@keyframes slide {
0%{
		transform: translateY(-5px);
    height: 0;  
    border-radius: 2rem; 
}
	100%{
		transform: translateY(0);
    height: 100%; 
    border-radius: 3rem; 

}
  
}






/*--------------------------------------------------------------
## Content
--------------------------------------------------------------*/

main{
    width: 100%;
    margin: 0 auto;
}

#hero-home.content{max-width: 160rem;width: 90%; padding-bottom: 2rem;}

.content{
	  max-width: 130rem;
    width: 90%;
    margin: 15rem auto;
}

section{
    margin: 15rem auto;
}




/*------------------ # Links / button ------------------------*/


a, p a{
    font-family: 'poppinsmedium';
    display: inline-block;
    color: #5B0C12;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bloc-ancres ul li a, .bloc-ancres ul li a:hover, .navbar .menu-item > a::after, .navbar .menu-item:hover > a::after, .primary-button, .primary-button:hover, a, p a, a:hover, p a:hover, .menu-menu-1-container #menu-menu-1 li a, .menu-menu-1-container #menu-menu-1 li:hover a, footer a{transition: all 300ms ease-in-out;}

.card-content-forum .info a:hover, .card-principal a:hover, a:hover, .navbar .menu-item:hover > a, footer a:hover{ font-family: 'poppinssemibold'; text-decoration: underline 4px; text-underline-offset: 2px;}

a:visited {
	color: initial;
}

.card-principal a h4, .card-content-forum .info a h4{font-family:'poppinsmedium';}
.card-principal a:hover h4, .card-content-forum .info a:hover h4{font-family: 'poppinssemibold';}

.page-id-2979 #section-filtre-jours p:nth-of-type(1) a, .page-id-2981 #section-filtre-jours p:nth-of-type(2) a, .page-id-2983 #section-filtre-jours p:nth-of-type(3) a{font-family: 'poppinsextrabold';}

.card-principal a, footer a, .link-button, .primary-button, .secondary-button{display: inline-block; position: relative; text-decoration: none;}

.link-button, .page-template-category #cards-prog form .primary-button{top: -.3rem; right:.3rem;}


.card-principal a:hover, .primary-button:hover .link-button, .secondary-button:hover .link-button, .page-template-category #cards-prog form .primary-button:hover{top: 0; right:0;}

.card-content-forum .info a, .card-principal a, .link-button:hover, .primary-button:hover, .secondary-button:hover{text-decoration: none; font-family:'poppinsmedium';}

.link-button{z-index: 1; padding:1.2rem 1.5rem .75rem 1.5rem;}

.link-button, .primary-button::after, .secondary-button::after, button, [type="button"], [type="reset"], [type="submit"]{background-color: #FF8965; border-radius: .5rem; border:solid .1rem black;}

button, [type="button"], [type="reset"], [type="submit"]{color: #000;}

.primary-button::after, .secondary-button::after{
display: block; content: '';  
background: repeating-linear-gradient(
    45deg,
    #FF8965,
    #FF8965 .6rem,
    #000 .6rem,
    #000 .7rem
  ); 
width: 100%; height: 4.25rem; position: absolute; 
top: .2rem; right: -.2rem; 
z-index: 0;} 

.secondary-button .link-button{background-color: #5B0C12; color: #FFFCE6; border-radius: .5rem;}

.secondary-button::after{
background: repeating-linear-gradient(
    45deg,
    #5B0C12,
    #5B0C12 .6rem,
    #000 .6rem,
    #000 .7rem
  ); 
}



/*------------- # CODE SIMILAIRE -----------*/


.page-template-infos-pratiques .header-bck .content, .single-programmation #section-content, .single-programmation .header-bck .content-text ul, .single-programmation .header-bck .content-text, .site-navigation, .cards-global, #suivez-nous, #infos-contact .container, #section-remboursement.content, #section-fonctionnement.content .container-inner:nth-of-type(1), #section-fonctionnement, #espace-cashless .bloc-weezevent, #section-perte-vol, #section-remboursements, #section-informations-groupes, .header-bck, footer, .cta, .cta .container, #infos-pratiques .bloc-acces-direct, #bandeau-info .content, #hero-home, .cocarde, .slogan, .container-slogan{position: relative;}

#menu-menu-burger::before, .page-template-category #cards-prog form::before, .cards-global::after, .card-principal::after, #suivez-nous .container::before, #suivez-nous .container::after, #section-remboursement .container::before, #section-remboursement .container::after, #section-fonctionnement.content .container-inner:nth-of-type(1)::after, #section-fonctionnement .container::before, #section-fonctionnement .container::after, #section-perte-vol::before, #section-remboursements::after, #section-pass-culture .container::before, #section-pass-culture .container::after, #section-informations-groupes .container::before, #section-informations-groupes .container::after, .bloc-exergue::after, .header-bck::after,footer #trd-row #col3::after, footer::before, .cta .container::before, .cta .container::after, .home main::after, #infos-pratiques .bloc-acces-direct::after, #bandeau-info .content::before, #bandeau-info .content::after, .cocarde::before, .container-slogan::after{
  display: block;
  background-image: url(./images/spritesheet.svg);
  background-repeat: no-repeat;
  content: " ";
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 1800px;
  height: 400px;
  width: 400px;
  position: absolute;
  z-index: 1;
}

.container-slogan{
  display: block;
  width: 100%;
  height: 14rem;
  top: 0;
  left: 0;
  position: relative;
  z-index: 0;
}

.container-slogan::after{
  background-image: url(./images/bck-trait.svg);
  background-repeat: repeat-x;
  background-size: 15px;
  width: 100%;
  height: 5rem;
  top: 11.75rem;
  z-index: 0;
}

#bandeau-info .content::before, #bandeau-info .content::after{
    background-size: 1200px;
    height: 60px;
    top: 0;
    width: 60px;
    background-position: -3px -10px;
}

#bandeau-info .content::before{left: 0;}

#bandeau-info .content::after{right: 0;transform: scaleX(-1);}

.cocarde{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20rem;
  transform: rotate(-15deg);
  position: absolute;
}

.cocarde-main{
left: -7.5rem;
top: -4rem;
}

.cocarde-home{
    right: -8vw;
    top: 1vh;
}

.home .cocarde::before, .page-template-archive-programmation .cocarde::before, .page-template-category .cocarde::before, .page-template-infos-pratiques .cocarde::before{
    background-size: 2200px;
    height: 20rem;
    width: 20rem;
    z-index: 0;
}

.home .cocarde::before, .page-template-infos-pratiques .cocarde::before{background-position: -80px -1020px;}

.page-template-archive-programmation .cocarde::before, .page-template-category .cocarde::before{transform: rotate(22deg); background-position: -278px -1025px;}


.info-cocarde, .page-template-infos-pratiques .cocarde{position: relative; width: 8rem; font-size: 1.5rem;  text-align: center; z-index: 1; font-family: 'poppinssemibold';}

main{overflow-x: hidden; position: relative;}

.card-principal::before, .container-faq::before, #suivez-nous.content, #suivez-nous::before, #section-remboursement::before, #section-remboursement.content, #section-fonctionnement.content, #section-fonctionnement::before, #section-pass-culture::before, #section-pass-culture.content, #section-informations-groupes::before, #section-informations-groupes.content, #actus-home, #actus-home .container #cards-home .card, #actus-home .container #cards-home .content-img img, #actus-home::before, #infos-pratiques::before, #actus-home::before, #infos-pratiques::before, #section-billetterie-ligne::before, #section-billetterie-psh::before, #section-tarifs-reduits::before, #section-ou-acheter-billets::before {border-radius: 2rem; border: solid .4rem black;}

.container-faq, #section-fonctionnement.content, #section-pass-culture.content, #section-informations-groupes.content, #actus-home, #infos-pratiques, #section-billetterie-ligne, #section-billetterie-psh, #section-tarifs-reduits, #section-ou-acheter-billets{position: relative; background-color: #FFE051; padding: 10rem 5rem; border-radius: 2rem; border: solid .4rem black;}

.card-principal::before, .container-faq::before, #suivez-nous::before, #section-remboursement::before, #section-fonctionnement::before, #section-pass-culture::before, #section-informations-groupes::before, #actus-home::before, #infos-pratiques::before, #section-billetterie-ligne::before, #section-billetterie-psh::before, #section-tarifs-reduits::before, #section-ou-acheter-billets::before {display: block; top: 0rem; left: 0rem; position: absolute; content:''; width: 100%; height: 100%; transform: rotate(-2deg); z-index: -1;}

 #infos-pratiques{background-color: #11809E; color: #FFFCE6; justify-content: space-between;}

 #infos-pratiques::before{background-color: #FFE051;}

 #infos-pratiques .presentation-generale{width: clamp(40rem, 100%, 50rem);}

 #infos-pratiques .bloc-acces-direct{display: flex; gap: 5rem; flex-wrap: wrap; width: 55rem; background-color: #FFFCE6; border: solid .3rem black; padding: 5rem; border-radius: 1rem;}
 #infos-pratiques .bloc-acces-direct h3{width: 100%;}

.cta .container, .cta{border-radius: 1rem; border:.3rem solid black;}

.cta{display: flex; justify-content: center;width: clamp(40rem, 100%, 62rem); padding: 3rem 5rem; margin-bottom: 20rem; background-color: #FFFCE6;}

.cta .container h2{margin: 0 0 2rem 0;}

.container-faq, #suivez-nous.content, #section-remboursement.content, #section-fonctionnement.content, #section-pass-culture.content, #section-informations-groupes.content, #section-billetterie-ligne, #section-billetterie-psh, #section-tarifs-reduits, #section-ou-acheter-billets{ position: relative; background-color: #FFFCE6;}

#suivez-nous.content .container, #section-remboursement.content .container, #section-fonctionnement.content .container, #section-pass-culture.content .container, #section-informations-groupes.content .container{display: flex; justify-content: space-between; padding: 5rem; gap: 2rem;}

#suivez-nous::before, #section-remboursement::before, #section-fonctionnement::before, #section-pass-culture::before, #section-informations-groupes::before{background-color: #FFFCE6;}

#suivez-nous .container::before, #suivez-nous .container::after, #section-remboursement .container::before, #section-remboursement .container::after, #section-fonctionnement .container::before, #section-fonctionnement .container::after, #section-pass-culture .container::before, #section-pass-culture .container::after, #section-informations-groupes .container::before, #section-informations-groupes .container::after{
width: 100%;
left: 0;
background-position: -4rem -414rem;
background-size: 1800px;
height: 60px;
border-radius: 1.5rem 1.5rem 0 0;
}

#suivez-nous .container::before, #section-remboursement .container::before, #section-fonctionnement .container::before, #section-informations-groupes .container::before, #section-pass-culture .container::before{top: 0;}

#suivez-nous .container::after, #section-remboursement .container::after, #section-fonctionnement .container::after, #section-informations-groupes .container::after, #section-pass-culture .container::after{bottom: 0; transform: scaleY(-1);}

#cta-playlist .container h2{margin: 0 0 0 0;}

.cta .container{background-color: #FFE051; padding: 4rem 5rem; text-align: center;}

.cta .liens-cta{display: flex;flex-wrap: wrap;justify-content: center; gap:2rem; position: relative;z-index: 1;}
.cta .liens-cta p{display: flex; gap: 5rem;}

.cta .liens-cta img{width: 3rem;}

.menu-responsive .show-nav.navbar #bloc-rs img, .cta .liens-cta img, #bloc-rs .pictors img, .rs .rs-pictos img, .single-programmation .header-bck .content-img .rs img{transform: scale(1); transition: all 300ms ease-in-out;}

.menu-responsive .show-nav.navbar #bloc-rs img:hover, .cta .liens-cta img:hover, #bloc-rs .pictors img:hover, .rs .rs-pictos img:hover, .single-programmation .header-bck .content-img .rs img:hover {transform: scale(1.2); transition: all 300ms ease-in-out;}


.single-programmation .header-bck .content-img .rs::before, .single-programmation .header-bck .content-img .rs.single-programmation .header-bck .content-text ul::before, .site-navigation::before, .page-template-category #cards-prog form::before, .cards-global::before, .cta::after, #espace-cashless .bloc-weezevent::after, #infos-contact .container::after{ 
display: block; 
content: '';  
background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 1.2rem,
    #000 1.2rem,
    #000 1.4rem
  ); 
width: 100%; height: 100%; position: absolute; 
bottom: -1.75rem; right: -1.75rem; 
z-index: -1;
border: .2rem solid black;
border-radius: 1rem;
}

.cards-global::after, .card-principal::after, .cta .container::before, .cta .container::after{
    background-image: url(./images/spritesheet-borders.png);
    background-position: -2.5rem -8rem;
    background-repeat: no-repeat;
    background-size: 1100px;
    left: 0;
    height: 40px;
    width: 100%;
    z-index: 0;
}

.cta .container::before{top: 0;}

.cta .container::after{bottom: -.1rem;}

.cta .container::after{transform: scaleY(-1);}

.bloc-aides{padding: 0;margin: 0 50% 0 0;}
.bloc-aides .container-aides{border: .4rem solid black; border-bottom: 0; border-radius: 1rem 1rem 0 0; width: clamp(46rem, 100%, 66rem); margin-left: 10rem; padding: 3rem 3rem 4rem 3rem; position: relative;}


.menu-responsive .navbar #bloc-rs{
display: none; 
position: absolute;
top: 78vh;
width: 56rem;
z-index: 10;
background-color: black;
padding: 3rem 5rem 8rem 5rem;}

.menu-responsive .navbar #bloc-rs h2{width: 20rem; color: #FFE051;margin: 0;}

#bloc-rs p{margin: 0 1rem;} 


.menu-responsive .show-nav.navbar #bloc-rs{display: flex; align-items: center; flex-wrap: wrap; gap: 2rem 4rem;}

.menu-responsive .show-nav.navbar #bloc-rs h2{width: 100%;}

.header-bck{
margin-top: 0;
min-height: 50rem;
background-color: #FFE051;
border: .4rem solid black;
border-radius: 0 0 6rem 6rem;
}

.header-bck h1{
margin-top: 15rem;
}

.header-bck::after{
bottom: 0;
right: 0;
width: 100%;
z-index: 0;
    background-position: 90% 1%;
    height: 500px;
    background-size: clamp(2200px, 140%, 3500px);
}

.page-template-contact .header-bck, .page-template-infos-pratiques .header-bck{
min-height: 60rem;
margin-bottom: 21rem;
background-color: #11809E;
z-index: 0;
}

.page-template-contact .header-bck::after, .page-template-infos-pratiques .header-bck::after {
    background-position: 100% 45.5%;
}

.page-template-contact .header-bck h1, .page-template-infos-pratiques .header-bck h1{color: #FFFCE6; margin-top: 20rem;}

#infos-contact .container::after{background-color: #FFFCE6;} 
.header-bck .content{
margin-top: 25rem;
position: relative;
z-index: 1;
}

.bloc-ancres{
position: absolute;
bottom: -27.5rem;
}

.bloc-ancres ul{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
align-items: center;
list-style: none;
}

.bloc-ancres ul li a{
background-color: #FF8965;
border-radius: .4rem;
padding: 1rem 1rem .5rem 1rem;
text-decoration: none;
border: .1rem solid black;
}

.bloc-exergue{
position: relative;
width: 50rem;
padding: 4rem;
color: #FFFCE6;
}

.bloc-exergue h3{
color: #FFFCE6;
}

.bloc-exergue, .bloc-exergue::before{
background-color: #11809E;
border-radius: 1rem;
border: .3rem solid black;
}

.bloc-exergue::before{
display: block;
content: " ";
background-color: #FFE051;
width: 100%;
height: 100%;
top: 2rem;
right: -2rem;
position: absolute;
z-index: -1;
}

.bloc-exergue h2{color: #FFFCE6;}

#section-perte-vol .presentation, #section-remboursements .presentation{
width: clamp(30rem, 100%, 60rem);
}

#section-moyen-paiements .presentation{
width: clamp(40rem, 100%, 60rem);
}

.header-img{display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; margin-top: 20rem;}

.header-img h2{width: 70%;text-align: center;}

.header-img .left-img, .header-img .right-img{position: absolute; top: 0rem;}

.header-img .left-img{left: -12rem;}

.header-img .right-img{right: -10rem;}

#section-tarifs-reduits::before, .container-faq:nth-of-type(odd)::before{background-color: #11809E;}

#section-billetterie-ligne::before, #section-billetterie-psh::before, .container-faq:nth-of-type(even)::before{
background-color: #FFE051;
}

.single-programmation .header-bck .content-img, .post-template-single-simple .header-bck .content-img, .page-template-infos-pratiques .header-bck .content-img {
    display: flex;
    align-self: end;
    position: relative;
}

.single-programmation .header-bck .content-img img, .page-template-infos-pratiques .header-bck .content-img img{border-radius: 3.5rem 3.5rem 0 0; border: .4rem solid black;}

#menu-menu-burger::before{
background-position: -48rem -195rem;
    background-size: 1100px;
    top: 21rem;
    left: 0;
    width: 50rem;
}

.page-template-contact .header-bck::after, .page-template-infos-pratiques .header-bck::after{
height: 60rem;
}


.page-template-faq .header-img img, .page-template-espace-pro .header-img img{
position: absolute;
}

.page-template-faq .header-img img:nth-of-type(1),  .page-template-espace-pro .header-img img:nth-of-type(1){
left: -10rem;
}

.page-template-faq .header-img img:nth-of-type(2),  .page-template-espace-pro .header-img img:nth-of-type(2){
right: -10rem;
}

summary ::marker, summary::-webkit-details-marker {
    display: none;
    font-size: 0;
}

#section-prog-jour.content, #forum.content, #spect-art.content, #autres.content, #info-cashless.content, #espace-cashless, #section-perte-vol.content, #section-moyen-paiements.content, .page-template-cashless #bloc-aides, .page-template-infos-pratiques #section-content, .page-template-infos-pratiques #section-content-2, .page-template-infos-pratiques #section-partenaires, .page-template-infos-pratiques #section-accordeons, #section-infos-exergue.content, #section-remboursements.content, #section-revente.content, .page-template-billetterie #bloc-aides{
margin-top: 0;
padding-top: 15rem;
}

#section-prog-jour.content, #forum.content, #spect-art.content, #info-cashless.content, #espace-cashless, #section-fonctionnement.content, #section-perte-vol.content, #section-remboursement.content, #section-moyen-paiements.content, #cta.content, .page-template-infos-pratiques #section-content, .page-template-infos-pratiques #section-content-2, .page-template-infos-pratiques #section-partenaires, #section-remboursements.content, #section-revente.content{
margin-bottom: 0;
}


#info-cashless.content{align-items: center;}

ul{
line-height: 3rem;
}

.bloc-ancres ul{line-height: 2rem;}

#breadcrumbs-custom{
    display: flex;
    position: relative;
    list-style: none;
    gap: 1rem;
    padding-left: 0;
    width: 90%;
max-width: 130rem;
    top: 10rem;
    margin: 3rem auto 5rem auto;
z-index: 4;
}

#breadcrumbs-custom li::after{
content: ">";
margin-left: 1rem;
}

#breadcrumbs-custom li:last-child:after{
content: " ";
}


.page-template-cashless #breadcrumbs-custom li, .page-template-blog #breadcrumbs-custom li,
.page-template-cashless #breadcrumbs-custom li a, .page-template-blog #breadcrumbs-custom li a,
.page-template-infos-pratiques #breadcrumbs-custom li, .page-template-infos-pratiques #breadcrumbs-custom li a,
.page-template-contact #breadcrumbs-custom li, .page-template-contact #breadcrumbs-custom li a
{
color: #FFFCE6;
}

.post-template-single-simple #breadcrumbs-custom{top: 0;}

:focus-visible {
    outline: 3px solid #000;
}





/*------------- # BASE -----------*/
/*-------------------------------*/


/*------------- # ACCUEIL -----------*/

#bandeau-info{ padding: 1rem 1rem 2rem 1rem; margin: 0 auto; position: relative;}

#bandeau-info .content{display: flex; justify-content: center; align-items: center; width: 50%; margin: auto; font-size: 1.8rem;}
#bandeau-info{border: solid .2rem black;}

#hero-home{display: flex; position: relative; margin-top: 2vh; padding-top: 0;}

#hero-home, #hero-home .content-img.img-header-hero img { border: .4rem solid black; border-radius: 2rem;}

#hero-home .content-img.img-header-hero{position: relative; top: -.3rem; left: -.3rem;}

#hero-home .content-img.img-header-hero img{border-radius: 2.25rem 0 2.25rem 0;}

.content-img-deco-gauche, .content-img-deco-droite{position: absolute;}

.content-img-deco-gauche{
top: 15rem;
left: -17rem;
}


.content-img-deco-droite{top: -3rem; right: -16rem; transform: rotate(-5deg);}

#hero-home .bloc-content{margin-top: 0;}

#hero-home h1{ color: #FFFCE6; margin: 10rem 0 2rem 3rem; font-size: clamp(4rem,6.5vw,10rem); line-height: 10rem;}
.container-text-hero{position: relative; width: clamp(45rem, 100%, 50rem);}

.slogan{ position: relative; z-index: 1; left: -.5rem; top:-1.5rem; padding: 2rem 1.5rem 1.5rem 3.5rem; width: 101.5%;}

.slogan, .container-slogan{height: 100%; background-color: #FFFCE6; border: solid .4rem black; border-radius: 0 1.5rem 1.5rem 0;}

.container-hero{width: 100%;}

.container-master{display: flex; justify-content: space-between; align-items: end; margin-top: -18rem;}

.container-slogan{ border: solid .2rem black;}

.bloc-access{width: 60rem;margin-right: 2rem;}

.bloc-access .container{display: flex; justify-content: right; flex-wrap: wrap; width:60rem; gap: 3rem;}

.bloc-access .container .container-access{background-color: #FFFCE6; border-radius: 1.5rem; border: .4rem solid black; padding-bottom:3rem;}

.bloc-access .container .container-access .content-text{padding-left: 1.5rem; position: relative; z-index: 1}


.bloc-access .container .container-access:hover{
background-color: #FF8965;
}

.bloc-access .container .container-access img{border-radius: 1rem; width: 100%; position: relative;}

.bloc-access .container .container-access .content-img{position: relative;}

.bloc-access .container .container-access .content-img::after{
display: block;
top: 0;
left: 0;
position: absolute;
content:'';
width: 100%;
height: 12.7rem;
border-radius: 1.5rem;
background-color: #11809E;
opacity: .5;
z-index: 1;
}



.bloc-access .container .container-access h3{margin-top:2rem;font-size: 2.8rem;}

.bloc-access .container .container-access:nth-of-type(1){width:40rem;}
.bloc-access .container .container-access:nth-of-type(1) h3{margin:2rem 0;}

.bloc-access .container .container-access:nth-of-type(2){width:30rem;}

.bloc-access .container .container-access:nth-of-type(3){width:25rem;}

#actus-home h2{margin-bottom: 3rem;}
#actus-home .container #cards-home{display: flex; flex-wrap: wrap; align-items: start; gap: 3rem;}

#actus-home .container #cards-home .card{padding: 4rem;background-color: #FFFCE6;}

#actus-home .container #cards-home .card:nth-of-type(1){width: clamp(59rem, 100%, 69rem);}

#actus-home .container #cards-home .card:nth-of-type(2){width: clamp(30rem, 100%, 40rem);}

#actus-home .container #cards-home .card:nth-of-type(3){width: clamp(40rem, 100%, 50rem);}

#actus-home .container #cards-home .excerpt-article{margin: 1rem 0;}

#actus-home::before{
background-color: #11809E;
}

#infos-pratiques{ display: flex; padding: 10rem 10rem 5rem 5rem; gap: 3rem;}
#infos-pratiques h2{color: #FFFCE6;}
#infos-pratiques .bloc-acces-direct::after{
top: -60px;
right: -60px; 
background-position: -50px -500px;
    background-size: 1500px;
    height: 160px;
    width: 160px;
}


.home main::after{
background-size: 2200px;
    background-position: -130px -240px;
    height: 340px;
    width: 300px;
    bottom: 30rem;
z-index: -2;
}


/*------------- # Billetterie -----------*/

.page-template-billetterie .header-bck .content {
    margin-top: 16rem;
}

#section-billetterie-ligne{margin-top: 22rem;}

#section-billetterie-ligne, #section-tarifs-reduits, #section-billetterie-psh{
display: flex;
justify-content: space-between;
align-items: start;
gap: 3rem;
}

#section-billetterie-ligne .presentation, #section-tarifs-reduits .presentation, #section-billetterie-psh .presentation{
width: clamp(30rem, 100%, 43rem);
}

#section-billetterie-ligne .bloc-weezevent, .container-reduit .bloc-weezevent,  #section-billetterie-psh .bloc-weezevent {
padding: 1rem;
border: .2rem solid black;
border-radius: 1rem;
}

.bloc-weezevent, .container-reduit, #section-billetterie-psh .bloc-weezevent{
width: 60%;
}


 .container-reduit{
display: flex;
flex-direction: column;
gap: 3rem;
}

.container-reduit .bloc-weezevent{width: 100%;}



#section-infos-exergue{
margin-top: 25rem;
}

.bloc-exergue::after{
top: -15rem;
    left: 0rem;
    background-position: -7rem -131rem;
    background-size: 2200px;
    height: 300px;
    width: 300px;
    position: absolute;
    z-index: -1;
}


#section-ou-acheter-billets{
display: flex;
justify-content: space-between;
}


#section-revente .presentation .secondary-button {margin-right: 3rem;}

#section-ou-acheter-billets .presentation{
width: clamp(25rem, 100%, 50rem);
}

#section-ou-acheter-billets .container-accordeons{
width: clamp(25rem, 100%, 60rem);
display: flex;
flex-direction: column;
gap: 3rem;
}

.accordeon{
display: flex;
cursor: pointer;
    align-self: start;
    flex-direction: column;
    width: auto;
    background-color: #FFE051;
    padding: 1.5rem 3rem 1rem 3rem;
    border-radius: 2rem;
    border: solid .3rem black;
}
.accordeon summary, .accordeon summary h3, .accordeon summary h2{
display: flex;
}

.accordeon summary h3, .accordeon summary h2{
align-items: center;
justify-content: space-between;
width: 100%;
}

.accordeon{margin-bottom: 3rem;}

.accordeon fieldset {
    border: 0;
    color: black;
    width: 85%;
    padding-left: 0;
}

.accordeon h3::after, .accordeon h2::after {
    display: block;
    content: "+";
    font-size: 4rem;
    font-family: "montserrat_reg", sans-serif;
    color: black;
    position: relative;
    top: -.5rem;
    right: 0;
}

.accordeon[open] h3::after, .accordeon[open] h2::after {
    content: "-";
}

details fieldset{
    opacity: 0;
}

#section-pass-culture .container .content-text .presentation{
width: clamp(25rem, 100%, 60rem);
}

#section-pass-culture .container .content-text-img .presentation{
width: clamp(25rem, 100%, 45rem);
border: .3rem solid black;
background-color: #FFFCE6;
border-radius: 1rem;
padding: 4.5rem 3rem;
position: relative;
margin-top: -10.5rem;
}


#section-remboursements::after, #section-perte-vol::before{
background-position: -40rem 0;
background-size: 3500px;
height: 300px;
width: 400px;
top: 20rem;
}

#section-remboursements::after{
right: 0;
}


#section-revente{
display: flex;
gap: 5rem;
justify-content: space-between;
align-items: baseline;
}

#section-revente .presentation{
width: clamp(30rem, 100%, 60rem);
top: -20rem;
margin-top: 20rem;
position: relative;
}

.page-template-billetterie .cta{margin-top: 0;}


/*------------- # CASHLESS -----------*/



.page-template-cashless .header-bck{
min-height: 60rem;
background-color: black;
}

.page-template-cashless .header-bck h1{
margin-top: 20rem;
color: #FFE051;
}

.page-template-cashless .header-bck .bloc-ancres{
bottom: -35rem;
}

.page-template-cashless .header-bck::after{
  background-position: 70% 62%;
  background-size: clamp(1500px, 140%, 2100px);
}

#info-cashless{display: flex; justify-content: space-between; margin-top: 25rem;}


#info-cashless .presentation{
width: clamp(40rem, 100%, 60rem);
}

#section-fonctionnement.content .container{padding: 5rem;}

#espace-cashless{display: flex; justify-content: center; align-items: center; gap: 8rem;}

#section-remboursement .infos-complementaires, #section-fonctionnement .infos-complementaires, #espace-cashless .bloc-complementaire, #espace-cashless .bloc-weezevent, #espace-cashless .bloc-weezevent .bloc-inner{border: .2rem solid black!important; border-radius: 1rem;}

#espace-cashless .bloc-complementaire{width: clamp(30rem, 100%, 50rem); padding:3rem 4.5rem;}

#espace-cashless .bloc-weezevent{width: clamp(50rem, 100%, 58rem); padding: 4rem;background-color: #FFFCE6;}

#espace-cashless .bloc-weezevent .bloc-inner{padding: 3rem;}

#section-fonctionnement.content .container{flex-wrap: wrap;}
#section-fonctionnement.content .container-inner{display:flex; align-items: center; gap: 10rem;}

#section-fonctionnement h2{margin-bottom: 5rem;}

#section-fonctionnement h3{margin-bottom: 5rem;}

#section-fonctionnement .containe-inner .content-text, #section-fonctionnement .utilisation-cashless.content-text, #section-remboursement .presentation{width: clamp(35rem, 100%, 50rem);}

#section-fonctionnement .crediter-pendant{top: 9rem;position: relative;}

#section-fonctionnement .infos-complementaires, #section-remboursement .infos-complementaires{padding:3rem 4.5rem; width: 45rem;}

#section-fonctionnement.content .container-inner:nth-of-type(1){margin-bottom: 25rem; align-items: baseline;}


#section-fonctionnement.content .container-inner:nth-of-type(1)::after{
bottom: -24rem;
    width: 150px;
    height: 200px;
    left: 42%;
    background-position: -8rem -138rem;
}

#section-perte-vol{
display: flex;
flex-direction: row-reverse;
}

#section-perte-vol::before{
left: 0;
top: 20rem;
}

#section-remboursement.content .container{justify-content: center; gap: 10rem;}


#section-remboursement .content-text-img{
display: flex;
justify-content: center;
flex-direction: column;
}
    
#section-remboursement .content-text-img img {
    top: 0.5rem;
    position: relative;
}

#section-remboursement .presentation h3{
margin-top: 5rem;
}


/*------------- # NOUS CONTACTER -----------*/

.page-template-contact .header-bck{z-index: -1;}

#infos-contact{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: -31rem;
}

#infos-contact .container-form7{width: clamp(30rem, 100%, 60rem);}

#infos-contact .container-form7 input.wpcf7-text, #infos-contact .container-form7 .wpcf7-textarea, #infos-contact .container-form7 select{
background-color: #FFE051; border: .3rem solid black;border-radius: 1rem; padding: 2rem; width: 80%; position: relative; transition: all 400ms ease-in-out;}

#infos-contact select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(./images/spritesheet.svg);
  background-repeat: no-repeat;
  background-position: 410px -1160px;
  background-size: 1310px;
}

#infos-contact .container-form7 input.wpcf7-text:focus, #infos-contact .container-form7 .wpcf7-textarea:focus, #infos-contact .container-form7 select:focus{
background-color: #FFFCE6;
transition: all 400ms ease-in-out;
}

#infos-contact form .link-button{cursor: pointer; transition:  300ms ease-in-out;}

#infos-contact form .primary-button::after{
    width: 10.4rem;
    top: 2rem;
    left: .25rem;
}

.wpcf7 form.sent .wpcf7-response-output{   
border-color: black;
    border-radius: 1rem;
    padding: 2rem;
}

.wpcf7-list-item{margin: 0;}

#infos-contact .container{ position: relative; top: -20.4rem; border: .3rem solid black; border-radius: 1rem; width: 60rem; background-color: #FFFCE6;}

#infos-contact .container .content-img img{border-radius: .75rem .75rem 0 0; border-bottom: .3rem solid black;}

#infos-contact .container .content-text{
padding: 4rem;
   display: inline-flex;
    flex-direction: column;
    align-items: baseline;
    gap: 5rem;
}

#infos-contact .rs .rs-pictos{display: flex; flex-wrap: wrap; gap: 3rem; align-items: baseline;}


#infos-contact .rs-pictos .container img{width: auto;}

#infos-contact .la-newsletter{display: flex; flex-wrap: wrap; align-items: end; gap: 3rem;}
#infos-contact .la-newsletter .content-text-inner{width: 23rem;}
#infos-contact .la-newsletter .content-text-inner p{margin: 0;}

#suivez-nous.content{display: flex; flex-direction: column; align-items: center; margin-bottom: 20rem;}

#suivez-nous.content .container{display: flex; flex-direction: column; padding:10rem 0 5rem 0; overflow: hidden; width: 100%;}

#suivez-nous.content .container h2{text-align: center; width: 80%; margin: 0 auto 5rem auto;}

#suivez-nous.content .container .container-img{
 display: flex;
  flex-direction: row;
justify-content: center;
gap: 3rem;
}

#suivez-nous.content .container .container-img img{width: auto;max-width: none; height: 200px;}


#suivez-nous .secondary-button{margin-bottom: 10rem!important;}


/*------------- # FAQ  -----------*/

.container-faq, .container-faq .container{
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
}

.container-faq .container{gap: 5rem;}

.container-accordeons, .container-faq .accordeon{width: clamp(25rem, 100%, 72rem);}

.container-faq .accordeon summary{gap:2rem;}

.container-faq .accordeon h3{gap: 2rem;}

.container-accordeons{display: flex; flex-direction: column; gap: 3rem;}


/*------------- # ARCHIVE PROG / CAT PROG -----------*/


.page-template-archive-programmation .header-bck, .page-template-category .header-bck{min-height: 75rem; padding-bottom: 0; margin-bottom: 5rem;}

.page-template-archive-programmation .header-bck, .page-template-category .header-bck{margin:0 auto 5rem auto;}

.page-template-archive-programmation .header-bck::after, .page-template-category .header-bck::after{
    background-position: 91% 16.5%;
    background-size: clamp(2900px, 140%, 3500px);
height: 700px;
}

.page-template-archive-programmation .header-bck .content, .page-template-category .header-bck .content {display: flex; position: relative; justify-content: space-evenly; align-items: center; background-color: #FFFCE6; border: .4rem solid black; border-radius: 2rem; padding: 2rem 2rem 0 2rem; margin: 20rem auto 0 auto;}

.page-template-archive-programmation .header-bck h1, .page-template-category .header-bck h1{margin: 5rem 0 0 0;}

.page-template-archive-programmation .header-bck .content .content-text, .page-template-category .header-bck .content .content-text{display: flex; flex-direction: column; justify-content: center; align-items: baseline;}

.page-template-archive-programmation .header-bck .content .primary-button, .page-template-category .header-bck .content .primary-button{
position: relative; 
    bottom: -15rem;
    left: 0;
}

#section-ancres{position: relative; margin: 0 auto; padding: 4rem 0;}

#section-ancres .bloc-ancres{bottom: 0;}
#section-ancres .bloc-ancres ul{padding-left: 0;}

#section-filtre-jours{display: flex; flex-wrap: wrap; gap: 2rem; margin: 4rem auto 0 auto; padding-bottom: 0;}

#cards-prog{display: flex; justify-content: left; gap: 10rem; flex-wrap: wrap;}

.page-template-archive-programmation main h2{margin-bottom: 5rem;}

.card-principal{display: flex; gap: 1rem; align-items: center; padding: 0 4rem 6rem 4rem; flex-direction: column; position: relative; background-color: #FFE051; border: .3rem solid black; border-radius: 1rem; width: 50rem;}

.page-template-archive-programmation .card-principal{gap: 2rem;}

.page-template-archive-programmation .card-principal h3, .info-genre p, .page-template-category .info_complementaire p, .single-programmation .info_complementaire p{background-color: #000; color: #FFE051; border-radius: 0 0 1rem 1rem; padding: 0 1rem;}

.card-principal .content-text{display: flex; justify-content: center; gap: 2rem 3rem; flex-wrap: wrap;}

.card-principal .primary-button:hover .link-button{text-decoration: none; font-family: 'poppinsmedium';}

.card-principal::after, .cards-global::after{
    bottom: 0;
    background-position: -3.9rem -26.25rem;
    background-size: 1560px;
    border-radius: 0 0 .6rem .6rem;
}

.card-principal::before{
    transform: rotate(-4deg);
    background-color: #11809E;
}

.cards-global, .cards-global .cards-global-inner .card-content-forum{border-radius: 1rem; background-color: #FFE051;}

.cards-global{border: .3rem solid black; padding: 5rem 3.5rem; width: clamp(60rem, 100%, 80rem);}

.cards-global .cards-global-inner{display: flex; justify-content: center; align-items: baseline; gap: 2rem; background-color: #000; padding:3rem 2rem; border-radius: 1rem;}

.cards-global .cards-global-inner .card-content-forum{padding: 2rem; text-align: center; display: flex; flex-direction: column; gap: 2rem;}


.cards-global{
padding:5rem 3.5rem 10rem 3.5rem;
}


.cards-global::after{
    background-position: -5.9rem -43.5rem;
    background-size: 2500px;
    height: 50px;
}

.card-principal img{border-radius: 1rem; margin-top: 2rem;}

#spectacle_vivant .card-principal, #arts_visuels .card-principal{
padding: 5rem 4rem 8rem 4rem;
}

#spect-art{
display: flex;
justify-content: left;
flex-wrap: wrap;
gap: 10rem;
}

#spect-art.content{
margin-bottom: 15rem;
}


/*------------- # CAT PROG -----------*/

.page-template-category .header-bck .content .primary-button{ 
  bottom: -11rem;
}

.page-template-category #section-filtre-jours{padding-right: 45%;}


.page-template-category #posts-container, .page-template-blog .content-cards{display: flex; justify-content: center; flex-wrap: wrap; gap:7rem; width: 100%;}

.page-template-category #section-prog{display: flex; flex-direction: column; margin: 0 auto;}

.page-template-category #cards-prog{display: flex; flex-direction: row; position: relative; margin-top: 0; padding-top: 15rem;}
.page-template-category #cards-prog form{display: flex; align-items: center; flex-wrap: wrap; margin-left: 50%; gap: 1rem; position: absolute; background-color: #FFFCE6; right: 0; top: -7rem; border: .2rem solid black; border-radius: .5rem; padding: 1.5rem 2rem;}
    

.page-template-category #cards-prog form::before{
bottom: -1.2rem;
right: -1.2rem;
border-radius: .5rem;
width: 101%;
}

.page-template-category #cards-prog form select{
position: relative;
width: auto;
border: .1rem solid black;
background-color: #FFFCE6;
padding: 0 .5rem;
border-radius: .5rem;
}
    
.page-template-category #cards-prog form button{position: relative; z-index: 1; background-color: #FF8965; border-radius: .5rem; border: solid .1rem black; padding: .75rem .75rem .25rem .75rem;}

.page-template-category #cards-prog form .primary-button::after{height: 3.5rem; right: -.4rem;}

.page-template-category #cards-prog form button:hover{cursor:pointer;}

.page-template-category #cards-prog form .primary-button::after, .page-template-category #cards-prog form .primary-button:hover::after{transition: all 300ms ease-in-out;}
.page-template-category #cards-prog form .primary-button:hover::after{top:0rem;right: -.2rem;}

.site-navigation{margin: 10rem 40rem 15rem 40rem; height: 6.25rem;} 

.site-navigation, .site-navigation a, .site-navigation .current{
background-color: #FFFCE6; 
border: .2rem solid black; 
border-radius: .5rem; 
padding: 1rem 2rem;
}

.site-navigation .pagination-wrapper{display: flex; flex-direction: row; align-items: center; gap: 2rem;}

.site-navigation .current, .site-navigation a:hover{background-color: #5B0C12; color: #FFFCE6;}

.site-navigation .current, .site-navigation a{padding: 1rem 1.5rem .5rem 1.5rem;}

.site-navigation a{text-decoration: none;}

.site-navigation a, .site-navigation a:hover{transition: all 300ms ease-in-out;}

.site-navigation::before{
  bottom: -1.25rem;
  right: -1.25rem;
  border-radius: .5rem;
}

.page-template-category #no-results{margin: 15rem auto;}
.page-template-category .info-genre{margin: 0 auto;}
.page-template-category .info-genre p{margin-top: 0; padding: .2rem 1.2rem;}

.page-template-category .card-principal{align-items: baseline; width: 32rem;}

.page-template-category .card-principal::after{
    background-position: -3.9rem -28rem;
    background-size: 1650px;
}

.page-template-category .info_complementaire, .single-programmation .info_complementaire{
position: relative;
    bottom: 0;
    left: -4rem;
} 

.page-template-category .info_complementaire p, .single-programmation .info_complementaire p{ margin-top: 0; border-radius: 0 1rem 1rem 0; padding: .5rem 1rem 0 1.5rem}


.page-template-category  .category-evenement_exergue{width: 53rem;}


/*------------- # LE BLOG -----------*/


.page-template-blog .header-bck{
min-height: 50rem;
background-color: black;
}

.page-template-blog .header-bck::after{
    background-position: center 72.5%;
}

.page-template-blog .header-bck h1{ margin-top: 22rem; text-align: center; color: #FFE051;}
.page-template-blog .card-principal{
width: 32rem; 
}

.excerpt-article {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.excerpt-article p{
margin: 0;
}

.page-template-blog .card-principal::after{display: none;}

.page-template-blog .card-principal{background-color: #11809E; color: #FFFCE6; gap: 2rem; padding: 3.5rem;}
.page-template-blog .card-principal h2{color: #FFFCE6;}
.page-template-blog .card-principal::before{background-color: #FFE051; transform: rotate(-4deg);}

.page-template-blog .card-principal img {
    margin-top: 0;
}


/*------------- # ESPACE PRO -----------*/

.page-template-espace-pro .header-img{margin-top: 25rem;}

.page-template-espace-pro .header-img .left-img, .page-template-espace-pro  .header-img .right-img{top: -10rem;}

.page-template-espace-pro .container{display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: left; gap: 4rem;}

.page-template-espace-pro .bloc-container{display: flex; gap: 4rem; justify-content: left; align-items: flex-start;}

.page-template-espace-pro .bloc-content{border: solid .3rem black; border-radius: 2rem; padding: 3rem 4.5rem;}

.page-template-espace-pro #bloc-img img{width: 100%;}

.page-template-espace-pro .presentation-generale h3{margin-top: 3rem;}

.page-template-espace-pro .presentation-generale{width: clamp(30rem, 100%,55rem);}

.page-template-espace-pro #bloc-accreditations{width: clamp(50rem, 100%, 70rem); margin-top: -30rem;}


/*------------- # SINGLE PROG -----------*/



.single-programmation .header-bck .content, .single-programmation #section-content .content, .single-programmation #le-soir-meme, .single-programmation #decouvrir-aussi{
max-width: 110rem;
}

.single-programmation .header-bck{min-height: 55rem; margin-bottom: 0; position: relative;}

.single-programmation .header-bck::after {
    background-position: 105% 16%;
    height: 600px;
}

.single-programmation .header-bck .content, .post-template-single-simple .header-bck .content{display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0; position: relative; bottom: 0;}

.single-programmation .header-bck .content{
margin-top: 20rem;
}

.single-programmation #section-content{margin: 10rem auto 0 auto;}
.single-programmation #section-content .content{margin-bottom: 0;}



.single-programmation .header-bck .content{
gap: 5rem;
}

.single-programmation .header-bck .content-text{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    width: clamp(30rem, 100%, 65rem);
}

.single-programmation .header-bck .content-img .rs img{width: 3.5rem; height: auto;}

.single-programmation .header-bck h1{margin: 1rem 0;}


.single-programmation .header-bck .content-img .rs{display: flex; gap: 1rem; position: absolute; bottom: -3rem; background-color: #FFFCE6; border: .2rem solid black; border-radius: .5rem; padding: 1rem 2rem 0 2rem;}
.single-programmation .header-bck .content-img .rs p{margin: 0;}
.single-programmation .header-bck .content-img .rs img{border: none; border-radius: 0;}


.single-programmation .header-bck .content-img .rs::before{background-color: #FFFCE6;border-radius: .5rem; top: .9rem; right: -.9rem;}

.single-programmation .data-temporel{display: flex; gap: 1rem;}

.single-programmation .header-bck h2, .single-programmation .header-bck h3{
    font-family: 'poppinssemibold', sans-serif;
}

.single-programmation .header-bck h3{
margin-bottom: 5rem;
}

.single-programmation .header-bck .content-text ul{
list-style: none;
padding-left: 0;
display: flex;
gap: .5rem;
margin-top: 6rem;
}

.single-programmation .header-bck .content-text ul{width: auto;}

.single-programmation .header-bck .content-text ul, .single-programmation .header-bck .content-text ul::before{
background-color: #FFFCE6;
border-radius: .5rem;
padding: 1.5rem 1rem 1rem 1rem;
border: .2rem solid black;
}

.single-programmation .header-bck .content-text ul::before{bottom: -1rem; right: -1rem;}

.single-programmation .header-bck .content-text .button-header2{position: relative; bottom: -4rem; left: 0;}

.single-programmation .contenu-textuel{width: clamp(40rem, 100%, 55rem);}

.single-programmation #section-content{overflow: hidden;} 
.single-programmation #section-content .content{display: flex; justify-content: space-between; align-items: center; gap: 5rem; margin-top: 0;}

.single-programmation #section-content .contenu-img img{border-radius: 1rem;}

.single-programmation #section-content .content-img{position:absolute; right: -10rem; top: 0;}

.single-programmation #le-soir-meme .cards-global-inner h2{
text-align: center;
width: 100%;
color: #FFE051;
}

.single-programmation #le-soir-meme .cards-global-inner{
flex-direction: column;
align-items: center;
}

.single-programmation #le-soir-meme .cards-global-inner .container-inner{
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 3rem;
}

.single-programmation .card-content-forum{
max-width: 22rem;
}

.single-programmation #decouvrir-aussi .content-cards{
display: flex;
justify-content: left;
flex-wrap: wrap;
align-items: center;
gap: 5rem;
}

.single-programmation #decouvrir-aussi .card-principal h3{
font-size: 2.5rem;
line-height: 3.75rem;
margin-top: 2rem;
}


.single-programmation #decouvrir-aussi .card-principal{
width: 32rem;
align-items: baseline;
padding: 2rem 4rem 6rem 4rem;
gap: 0;
}

#decouvrir-aussi h2{margin-bottom: 3rem;}






/*------------- # SIMPLE PAGE (single blog, mentions...) -----------*/


.post-template-single-simple .header-bck .primary-button{top: 0; left: 6rem;}

.post-template-single-simple .header-bck::after{display: none;}

.post-template-single-simple .header-bck .content{ justify-content: left; gap: 8rem; margin: 0; width: 90%; margin:0 auto;}

.post-template-single-simple .header-bck{
    margin-top: 18rem;
    min-height: 35rem;
    height: 100%;
    max-width: 130rem;
    width: 90%;
    padding: 3rem;
    background-color: #FFE051;
    border: .4rem solid black;
    border-radius: 2rem;
}

    .post-template-single-simple #breadcrumbs-custom li:last-child {
        width: 35rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding-bottom: 15px;
    }

.post-template-single-simple .header-bck h1{
font-size: 5rem;
line-height: 7.5rem;
margin: 8rem 0 1rem 0;
}

.post-template-single-simple .header-bck h2{
font-size: 2.5rem;
line-height: 3.75rem;
}

.post-template-single-simple .header-bck .content-text{
padding-top: 5rem;
width: clamp(25rem, 100%, 60rem);
margin-right: 50rem;
}

.post-template-single-simple .header-bck .content-img{
position: absolute;
right: 0;
top: 15rem;
} 

.post-template-single-simple main .content-img img{
border: .4rem solid black;
border-radius: 2rem;
}

.post-template-single-simple #section-content .content-img {
margin-top: 5rem;
}

.post-template-single-simple #section-content .content-img img{
border: .3rem solid black;
}

.post-template-single-simple #section-content{
max-width: 110rem;
}

.post-template-single-simple .contenu-textuel {
    width: clamp(30rem, 100%, 60rem);
}


/*------------- # PAGE SIMPLE -----------*/

.page-template-single-simple .header-bck #breadcrumbs-custom{top: 10rem;}


.page-template-single-simple .header-bck .primary-button{display: none;}

.page-template-single-simple #section-content .contenu-textuel{
width: clamp(28rem, 100%, 70rem);
}

/*------------- # PAGE INFOS PRATIQUES -----------*/

.page-template-infos-pratiques .header-bck{
display:flex;
align-items: end;
min-height: 60rem; 
margin-bottom: 0; 
position: relative;
}

.page-template-infos-pratiques #breadcrumbs-custom{
position: absolute;
top: -15rem;
left: 0;
}

.page-template-infos-pratiques .header-bck .content{
display: flex;
justify-content: center;
align-items: center;
gap: 15rem;
margin-bottom: 0; 
}

.header-bck .content h1{margin: 0;}

.page-template-infos-pratiques #section-ancres{margin-top: 5rem; padding-bottom: 0;}

.page-template-infos-pratiques #section-content{
display: flex;
justify-content: space-between;
gap: 5rem;
align-items: center;
}

.page-template-infos-pratiques #section-ancres{
margin-top: 0;
}
.page-template-infos-pratiques #section-ancres .bloc-ancres {
    position: relative;
}

.page-template-infos-pratiques #section-content .content-text{
width: clamp(30rem, 100%, 70rem);
}

.page-template-infos-pratiques #section-content img {
    border-radius: 2rem;
}

.page-template-infos-pratiques #section-content-2{
width: clamp(30rem, 100%, 70rem);
}

.page-template-infos-pratiques #section-partenaires{
width: clamp(30rem, 100%, 90rem);
}

.page-template-infos-pratiques #section-partenaires h2:first-child{
margin-top: 0;
}

.page-template-infos-pratiques #section-partenaires h2{
margin: 10rem 0 5rem 0;
}

.page-template-infos-pratiques #section-partenaires h3{
margin-top: 5rem;
}

.page-template-infos-pratiques #section-partenaires .contenu-img-partenaire p{
display: flex;
flex-wrap: wrap;
gap: 3rem;
}

.page-template-infos-pratiques #section-partenaires .img-mob{
display: none;
}

.page-template-infos-pratiques #section-accordeons{
width: clamp(30rem, 100%,90rem);
}

.page-template-infos-pratiques .cocarde::before{
background-position: -80px -1029px;
z-index: -1;
}


.page-template-infos-pratiques .cocarde-main {
left: -12rem;
    top: -5rem;
}

.page-template-infos-pratiques .bloc-aides{margin-top: 15rem;}

.page-id-2903 #section-content-2{
width: clamp(30rem, 100%, 80rem);
}

.page-id-2903 #section-content-2 .contenu-textuel .container, .page-id-2903 #section-partenaires .contenu-img-partenaire .container{
display: flex;
justify-content: center;
gap: 3rem;
margin: 5rem auto;
}

.page-id-2903 #section-partenaires .contenu-img-partenaire{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-id-2903 #section-partenaires .contenu-img-partenaire h2{text-align: center;}

.page-id-2903 .secondary-button{margin: 3rem 3rem 0 0;}

.page-id-2903 #section-content h2, .page-id-2903 #section-content-2 h2{margin-top: 15rem;}

.page-id-2903 #section-content h2:first-child, .page-id-2903 #section-content-2 h2:first-child{margin-top: 0;}

.page-id-2903 #section-partenaires .contenu-img-partenaire h2{margin-bottom: 0rem;}

.page-template-infos-pratiques main{overflow-x:  visible;}

.page-template-infos-pratiques footer{margin-top: 15rem;}

.page-template-infos-pratiques .bloc-aides{margin-bottom: -15rem;}

/*------------- # 404 -----------*/

.error404 h1{
  font-size: 4.5rem;
  margin-top: 0;
}

.error404 {
  text-align: center;
}

.error404 #hero-home{
  padding-bottom: 0;
  margin-bottom: 0;
}

.error404 main{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.error404 #header.content{
margin-bottom: 5rem;
}

.error404 #return{
  padding-top: 0;
margin-top: 0;
}
.error404 #return.content{
margin-top: 0;
}

.error404 #return .primary-button{
  display: inline-block;
  margin-top: 5rem;
}


/*------------- # FOOTER -----------*/

footer::before{
background-position: -14rem -340rem;
    right: 0;
    top: -35rem;
    width: 300px;
}

footer .content{margin: 0 auto;}

footer{
  position: relative;
  background-color: #FFE051;
  border: .4rem solid black;
  padding: 5rem 0 0 0;
margin: 0 auto;
}

footer h2, footer #col4 h2{font-family: 'poppinssemibold', sans-serif; font-size: 2rem; line-height: 3rem;}

footer p{font-size: 1.5rem;}

footer #first-row{display: flex; gap: 5rem;}

footer #first-row h2{margin-bottom: 1.5rem;}

footer #col4{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 3rem;
    top: -8rem;
    right: -4px;
    z-index: 1;
    position: absolute; 
    margin-left: 52%;
background-color: black; padding: 8rem 5rem 12rem 5rem; border-radius: 1rem 1rem 0 0;}

footer #col4 .title-rs{width: 12rem;}

footer #col4 h2{color: #FFE051;} 

#backtt{position: absolute; right: .25rem; top: -1rem;}

#backtt .link-button, #backtt.primary-button::after{border-radius: 0 1rem 0 .4rem;}

#backtt.primary-button::after{top:.05rem; right: -.05rem;}

footer #content-rs #bloc-rs, footer #content-newsletter{display: flex; background-color: #FFE051; border-radius: 1rem; padding: 2rem 2.5rem;}

footer #content-newsletter, footer .pictors{flex-wrap: wrap;}

footer .pictors{display: flex; justify-content: end;}

footer #bloc-rs h3{width: clamp(10rem,100%,12rem)}



footer #content-newsletter{gap: 2rem;}

footer #content-newsletter h3{width: 100%;}
footer #content-newsletter p{font-size: 1.5rem; line-height: 2.25rem; width: 13rem; margin: 0;}

footer #content-newsletter .content-link{margin-top: 1rem;}

footer #col1 p, footer #col2 p, footer #col3 p{margin: .5rem 0;}

footer #snd-row{
position: relative;
z-index: 2;
margin-top: 10rem;
padding:5rem 0;
background-color: #000;
}

footer #snd-row .content-img-mob{display: none;}

footer #snd-row .content-img img, footer #snd-row .content-img-mob img{border-radius: 1rem;}


footer #snd-row .content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 3rem;
align-items: center;
}

footer #snd-row h2{color: #FFE051; width:17rem;}

footer #snd-row .content, footer #trd-row.content{
width: 95%;}

footer #trd-row{
display: flex;
justify-content: space-between;
padding: 5rem 0;
}

footer #trd-row #col1 .content-text{display: flex; margin-top: 5rem; flex-wrap: wrap; gap: 1rem; position: relative; z-index: 1;}
footer #trd-row #col1 .content-text p{margin: 0;}

footer #trd-row #col3 .content-text p{margin: 0; width: 50%;}

footer #trd-row #col1, footer #trd-row #col3{width: 34rem;}

footer a{font-size: 1.5rem;}

footer .link-button{font-size: 1.8rem;}

footer #trd-row #col3::after{
bottom: 0;
    background-position: -2rem -529rem;
    background-size: 2700px;
    width: 200px;
    height: 200px;
    right: 0;
}


/*------------- # DESKTOP (hover notamment) -----------*/
/*-----------------------------------------------------*/


@media screen and (min-width: 1201px) {

.menu-responsive .navbar #bloc-rs{
right: 0;
}

.cta, .cta:hover,  .bloc-access .container .container-access:hover h3 a, .bloc-access .container .container-access h3 a, .bloc-access .container .container-access, .bloc-access .container .container-access:hover, .card-principal::before, .card-principal:hover::before, .cards-global::before, .cards-global, .cards-global:hover{transition: all 300ms ease-in-out;}

.card-principal:hover::before{transform: rotate(-2deg);}

.cards-global:hover::before{
    bottom: -1.25rem;
    right: -1.25rem;}

.cards-global{top: 0; left: 0;}

.cards-global:hover{
    top: .5rem;
    left: .5rem;
}

.bloc-access .container .container-access h3 a{text-decoration: none;}

.bloc-access .container .container-access:hover h3 a{text-decoration: underline;}






}




/*------------- # BIG TABLET (BT) -----------*/
/*------------------------------------------*/

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



.menu-inner .menu-menu-1-container{display: none;}

.menu-desktop-inner{
    justify-content: space-between;
    gap: 0;
    padding: 0 6rem;
    background-color: #FFFCE6;
}

.navbar-fixed-top, header#masthead, .home header#masthead{
top: auto;
bottom: 0;
position: fixed;
}

header#masthead{
z-index: 101;
}

.navbar-fixed-top{
z-index: 100;
}

.navbar__links{
top: auto;
margin: 0;
bottom: 0;
}


#menu-menu-burger::before {
    top: 12rem;
    left: 25%;
}

.show-nav .navbar__links {
    padding: 42vh 5% 10rem 5%;
}

.menu-responsive .navbar #bloc-rs {
    width: 100%;
    top: -16vh;
}

.menu-responsive .show-nav.navbar #bloc-rs h2 {
  width: 100%;
}

.menu-responsive .navbar #bloc-rs{
  padding:5rem;
}

.menu-responsive .show-nav.navbar #bloc-rs{left: 0;}

/*------------- # ACCUEIL (BT) -----------*/



.content-img-deco-droite{top: 12rem;}

.content-img-deco-gauche {
top: 65rem;
left: -14rem;
}

.home .container-master{
flex-wrap: wrap;
margin-top: -8vh;
}

.home .bloc-access{
display: flex;
    justify-content: end;
    margin-top: -22rem;
width: 100%;
}

#hero-home .bloc-content{
width: 60%;
}

.home .container-text-hero{
width: 100%;
}

.home .container-slogan{
width: 80%;
min-width: 45rem;
}

#hero-home h1{
width: 70%;
}

    .cocarde-home {
        right: -20vw;
        top: -15rem;
    }

#actus-home .container #cards-home .card:nth-of-type(3) {
    width:40rem;
}


/*------------- # ARCHIVE PROG / CAT PROG (BT) -----------*/

.page-template-archive-programmation .header-bck .content .primary-button, .page-template-category .header-bck .content .primary-button {
    bottom: -10rem;
}

.page-template-contact .header-bck::after, .page-template-infos-pratiques .header-bck::after {
    background-position: 76% 46%;
}

/*------------- # CAT PROG (BT) -----------*/


.page-template-category #cards-prog form {
    margin-left: 65%;
}

/*------------- # PAGE INFOS PRATIQUES (BT) -----------*/

.page-template-infos-pratiques .cocarde-main {
    left: -15%;
}


/*------------- # PAGE BILLETTERIE (BT) -----------*/

#section-billetterie-ligne, #section-tarifs-reduits, #section-billetterie-psh{
flex-direction: column;
}

#section-billetterie-ligne .presentation, #section-tarifs-reduits .presentation, #section-billetterie-psh .presentation, .bloc-weezevent, .container-reduit, #section-billetterie-psh .bloc-weezevent{
width: 100%;
}



/*------------- # PAGE NOUS CONTACTER (T) -----------*/

#infos-contact select {
    background-position: 298px -1160px;
}

/*------------- # SINGLE INFO (BT) -----------*/

.post-template-single-simple .header-bck .primary-button {
    left: 5rem;
}


/*------------- # PAGE CASHLESS (BT) -----------*/


#espace-cashless{
width: 90%;
}

#info-cashless{
gap: 2rem;
}

#section-remboursement.content .container {
    gap: 2rem;
}

/*------------- # PAGE ESPACE/PRO (BT) -----------*/


.page-template-faq .header-img img:nth-of-type(1),  .page-template-espace-pro .header-img img:nth-of-type(1){
left: -12%;
}

.page-template-faq .header-img img:nth-of-type(2),  .page-template-espace-pro .header-img img:nth-of-type(2){
right: -12%;
}


/*------------- # SINGLE BLOG (BT) -----------*/

.post-template-single-simple .header-bck h1 {
    font-size: 4rem;
    line-height: 6rem;
}

.post-template-single-simple .header-bck .content-text {
    margin-right: 35rem;
}

.post-template-single-simple .header-bck .content-img {
    top: 0;
}

.post-template-single-simple #section-content {
    margin-top: 20rem;
}

/*------------- # SINGLE PROG (BT) -----------*/

.single-programmation .header-bck .content-text {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    width: clamp(30rem, 100%, 55rem);
}


/*------------- # Footer (BT) -----------*/

footer{z-index: 103;}

.bloc-aides .container-aides {
    margin-left: 10%;
}

footer #col4{
    margin-left: 60%;
}

footer #content-newsletter{gap: 0;}

footer #content-newsletter p{width: 100%;}

footer #col4 {
    top: -13rem;
}


}







/*------------- # TABLET (T) -----------*/
/*--------------------------------------*/

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

/* Menu */


#bandeau-info .content::before{
left: -30%;
}


 #bandeau-info .content::after{
right: -30%;
}

#menu-menu-burger::before {
    background-position: -46rem -183rem;
    background-size: 1000px;
    width: 40rem;
    height: 30rem;
}

.menu-responsive .show-nav.navbar #bloc-rs {
    gap: 2rem 2rem;
}

    .menu-responsive .navbar #bloc-rs {
        top: -20vh;
    }

/*------------- # GÉNÉRAL (T) -----------*/

.home .cocarde::before{
    background-position: -64px -917px;
    background-size: 2000px;
}

footer #snd-row .content, #infos-pratiques, #suivez-nous.content .container, #section-remboursement.content .container, #section-fonctionnement.content .container, #section-pass-culture.content .container, #section-informations-groupes.content .container, #section-ou-acheter-billets,
#section-revente, .page-template-infos-pratiques .header-bck .content, .page-template-infos-pratiques #section-content, .container-faq .container, .post-template-single-simple .header-bck .content, #info-cashless, #espace-cashless, #section-fonctionnement.content .container-inner, .page-template-espace-pro .bloc-container
{flex-direction: column; gap: 5rem;}

.page-template-contact .header-bck::after, .page-template-infos-pratiques .header-bck::after{min-height: 60rem;}

.single-programmation .header-bck .content-img, .post-template-single-simple .header-bck .content-img, .page-template-infos-pratiques .header-bck .content-img{
align-self: center;
}

.page-template-contact .header-bck::after, .page-template-infos-pratiques .header-bck::after {
        background-position: 67% 47%;
        background-size: clamp(1100px, 200%, 2000px);
}

#suivez-nous.content .container, #section-remboursement.content .container, #section-fonctionnement.content .container, #section-pass-culture.content .container, #section-informations-groupes.content .container{
align-items: center;
}

#section-perte-vol .presentation, #section-remboursements .presentation, #section-revente .presentation, .page-template-infos-pratiques #section-content .content-text,  .container-faq .container, 
#info-cashless .presentation, #section-moyen-paiements .presentation, .page-template-espace-pro .presentation-generale{
width: 100%;
}

.page-template-infos-pratiques #section-partenaires, .page-template-infos-pratiques #section-accordeons, #section-fonctionnement{
width: 90%;
}

.page-template-faq .header-img img:nth-of-type(1), .page-template-espace-pro .header-img img:nth-of-type(1) {
        left: -18%;
        top: 0;
}

    .page-template-faq .header-img img:nth-of-type(2), .page-template-espace-pro .header-img img:nth-of-type(2) {
     display: none;
    }




/*------------- # ACCUEIL (T) -----------*/

    #hero-home h1 {
        width: 60%;
        font-size: 8rem;
    }


    #hero-home .bloc-content {
    margin-top: 12rem;
        width: 100%;
    }
    .cocarde-home {
    right: 14rem;
    top: -10rem;
    }

.container-slogan::after {
    height: 100%;
}

    .content-img-deco-droite {
        top: 40rem;
    }

    .content-img-deco-gauche {
        top: 76rem;
        left: -14rem;
    }

 .home .bloc-access {
    margin-top: 5rem;
}

#hero-home .content-img.img-header-hero{
padding-right: 0;
}

#infos-pratiques{padding: 5rem 10rem 5rem 5rem;}




/*------------- # ARCHIVE PROG / CAT PROG (T) -----------*/


.page-template-archive-programmation .header-bck, .page-template-category .header-bck{
min-height: 93rem;
}

.page-template-archive-programmation .header-bck .content, .page-template-category .header-bck .content {
  flex-direction: column-reverse;
  margin: 20rem auto 0 auto;
  width: 80%;
}

.page-template-archive-programmation .header-bck .content .primary-button, .page-template-category .header-bck .content .primary-button {
        bottom: -2rem;
    }

.cocarde-main {
        left: -8.5rem;
        top: -5rem;
}

#cards-prog, #spect-art{justify-content: center;}

#section-prog-jour h2, #forum h2, #spect-art h2, #autres h2{
text-align: center;
}

.page-template-category #cards-prog form{
top: -14rem;
}

/*------------- # PAGE NOUS CONTACTER (T) -----------*/

#infos-contact{flex-direction: column-reverse; margin-top: -20rem;}

#suivez-nous.content .container .container-img {
    justify-content: center;
}

#infos-contact select {
    background-position: 400px -1160px;
}



/*------------- # PAGE BILLETTERIE (T) -----------*/

.bloc-ancres ul{padding-left: 0;}

#section-remboursements{
margin-top: 40rem;
}

#section-remboursements::after{top: -30rem;}

#section-revente{
flex-direction: column-reverse;
}


/*------------- # PAGE INFOS PRATIQUES (T) -----------*/

.page-template-infos-pratiques .header-bck::after {
        background-position: 67% 44%;
}

/*------------- # SINGLE INFO (BT) -----------*/

.post-template-single-simple .header-bck .primary-button {
    left: 4rem;
}


/*------------- # PAGE BLOG (T) -----------*/

.page-template-blog .header-bck::after {
    background-position: -24rem 72.5%;
    background-size: clamp(1280px, 140%, 3500px);
}

.page-template-category #posts-container, .page-template-blog .content-cards {
    gap: 5rem;
}







/*------------- # PAGE CASHLESS (T) -----------*/

.page-template-cashless .header-bck::after {
    background-position: 72% 63%;
    background-size: clamp(1500px, 140%, 2100px);
}

#info-cashless{
gap: 20rem;
}

#section-fonctionnement.content .container{padding: 5rem 0;}

#section-fonctionnement.content .container h2{margin-bottom: 0;}

#section-perte-vol{margin-top: 40rem;}

#section-perte-vol::before{top: -30rem; left: 15rem;}

/*------------- # PAGE ESPACE/PRO (T) -----------*/

.page-template-espace-pro .header-img {
    margin: 20rem 0 30rem 0;
}

.page-template-espace-pro #bloc-accreditations{
margin-top: 0;
}

/*------------- # SINGLE BLOG (T) -----------*/

.post-template-single-simple .header-bck .content-text {
padding-bottom: 18rem;
}

.post-template-single-simple .contenu-textuel {
    width: clamp(30rem, 100%, 70rem);
}

.post-template-single-simple .header-bck .content-img {
        top: 25rem;
    }

.post-template-single-simple #section-content{
margin-top: 20rem;
}



/*------------- # SINGLE PROG (T) -----------*/

    .single-programmation .header-bck::after {
        background-position: 93% 17%;
        min-height: 60rem;
    }

.single-programmation .header-bck .content{
flex-direction: column;
align-items: center;
gap: 10rem;
}

.single-programmation .contenu-textuel{
width: 100%;
}

.single-programmation #section-content .content {
    margin-bottom: 10rem;
}

.single-programmation #section-content .content-img{
display: flex;
justify-content: end;
position: relative;
right: 0;
}

.single-programmation #section-content .content-img img{
right: -14rem;
position: relative;
}

.single-programmation #section-content .content{flex-direction: column}



/*------------- # Footer (T) -----------*/

#first-row{
flex-wrap: wrap;
} 

#first-row .content-text.columns{
margin-right: 30rem;
}

footer #col4{margin-left: 40%; height: 70%;}

footer #trd-row{
flex-wrap: wrap;
}

footer #trd-row #col1, footer #trd-row #col3 {
    width: 60%;
}

footer #trd-row #col3{
margin-top: 5rem;
}

footer #trd-row #col3 h2{
margin-bottom: 2rem;
}


footer #trd-row #col1{order: 2;}

footer #trd-row #col2{order: 1;}

footer #trd-row #col3{order: 3;}

footer #trd-row #col3 .content-text p{width: 100%;}



footer #snd-row .content-img-mob{display: none;}



}




/*------------- # MOBILE (M) -----------*/
/*--------------------------------------*/

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

/* Menu */

.menu-responsive{
    display: flex;
    margin: 0;
    z-index: 10;
}

.menu-responsive .primary-button, .burger{
z-index: 15;
}

    .menu-desktop-inner {
        justify-content: space-between;
        gap: 0;
        padding: 0 2rem;
    }

.navbar{
width: auto;
height: auto;
}

.menu-desktop-inner, .navbar-fixed-top{
height: 10rem;
border-radius: 1rem 1rem 0 0;
}

header#masthead{
z-index: 1000;
}

.navbar-fixed-top{
z-index: 999;
left: 0;
}

    #menu-menu-burger::before {
        background-position: -23rem -97rem;
        background-size: 550px;
        width: 26rem;
        height: 20rem;
        left: 15%;
        top: 12vh;
    }


#bandeau-info .content {
    width: 70%;
}

#bandeau-info .content::before{left: -20%;}

#bandeau-info .content::after{right: -20%;}

#bandeau-info .content{text-align: center;}


.show-nav .navbar__links{
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    overflow: auto;
    height: 100%;
    width: 100%;
    left: 0;
    padding: 40vh 2rem 25rem 2rem;
    min-height: 100vh;
    gap: 3rem;
}


.show-nav .navbar__links::after{
display: block;
content: ' ';
background-color: #FFFCE6;
border-radius: 1rem 1rem 0 0;
height: 10rem;
width: 100%;
left: 0;
bottom: 0;
position: fixed;
z-index: 5;
}

.menu-responsive .navbar #bloc-rs {
        top: 0;
        position: relative;
        left: 0;
    }


.menu-responsive .show-nav.navbar #bloc-rs{
width: 100%;
position: absolute;
top: -15rem;
padding: 1rem 1rem 2rem 1rem;
gap: 1rem 2rem;
z-index: 2;
}



.menu-responsive .show-nav.navbar #bloc-rs h2{
width: 100%;
}

.menu-responsive .show-nav.navbar #bloc-rs img{width: 3rem;}


/*------------- # GÉNÉRAL (M) -----------*/


h1{
  font-size:3.6rem;
  line-height: 5.4rem;
}

h2{
  font-size:3.2rem;
  line-height: 4.8rem;
}

.accordeon summary h2, .container-access .content-text h3 a, h3, .slogan h2, .cta .container h2, .bloc-aides .container-aides h2, #infos-contact .container h2, .single-programmation #le-soir-meme .cards-global-inner h2{
    font-size:2.5rem;
  line-height: 3.75rem;
}

h4, .menu-responsive .navbar #bloc-rs h2, .card-content-forum h3, .page-template-blog .card-principal h2, .single-programmation .header-bck h2{
    font-size:2rem;
    line-height: 3rem;  
}

h5, .container-access h4, .single-programmation .header-bck h3, .single-programmation #le-soir-meme h4  {
font-size: 1.8rem;
line-height: 2.7rem;
}

/*------------- # CODE COMMUN (M) -----------*/



.content-img-deco-gauche, .content-img-deco-droite, footer #snd-row .content-img{display: none;}


.container-access .content-text h3 a{
font-family: 'poppinsextrabold', sans-serif;;
}

.container-faq, #section-fonctionnement.content, #section-informations-groupes.content, #actus-home, #infos-pratiques, #section-billetterie-ligne, #section-billetterie-psh, #section-tarifs-reduits, #section-ou-acheter-billets,
#infos-pratiques .bloc-acces-direct, .cta{
padding: 7rem 2rem;
}

.cta .container {
padding: 5rem 1rem 6rem 1rem;
}

 #section-pass-culture.content{padding: 4rem 0;}

#infos-pratiques .presentation-generale, #infos-pratiques .bloc-acces-direct, #first-row #col1{
width: 100%;
}

    .cta {
        width: 32rem;
    }

.cta .liens-cta img {
    width: 4rem;
}

.cta .liens-cta p{
gap: 5rem;
}

#infos-pratiques{
gap:15rem;
}

.cta .container::before {
    top: 0;
}

.cta .container::before, .cta .container::after{
        background-position: -78.5rem -9.1rem;
        background-size: 1160px;
    }


.home main::after, #section-perte-vol::before{display: none;}

footer #snd-row .content, footer #trd-row.content, footer #trd-row #col3{
width: 90%;
}

.container-faq::before, #suivez-nous::before, #section-remboursement::before, #section-pass-culture::before, #section-informations-groupes::before, #actus-home::before, #infos-pratiques::before, #section-billetterie-ligne::before, #section-billetterie-psh::before, #section-tarifs-reduits::before, #section-ou-acheter-billets::before {
    transform: rotate(-1.2deg);
 }

#section-fonctionnement::before, #section-ou-acheter-billets::before{transform: rotate(-.6deg);}

.card-principal::before{
  transform: rotate(-2.5deg);
}


.page-template-billetterie .header-bck .content {
    margin-top: 5rem;
}

.header-bck .content h1{text-align: center;}

.bloc-ancres{bottom: auto; top: 10rem;}

.bloc-exergue{width: clamp(30rem, 100%, 35rem);}

.bloc-exergue, #suivez-nous.content .container, #section-remboursement.content .container, #section-pass-culture.content .container, #section-informations-groupes.content .container{
 padding: 7rem 2rem;
}

#section-fonctionnement.content .container{padding: 0;}

#suivez-nous .container::before, #suivez-nous .container::after, #section-remboursement .container::before, #section-remboursement .container::after, #section-fonctionnement .container::before, #section-fonctionnement .container::after, #section-pass-culture .container::before, #section-pass-culture .container::after, #section-informations-groupes .container::before, #section-informations-groupes .container::after {
    width: 100%;
    left: 0;
    background-position: -6rem -224rem;
    background-size: 975px;
    height: 45px;
}

.header-bck {
    border-radius: 0 0 3rem 3rem;
}

#section-prog-jour.content, #forum.content, #spect-art.content, #autres.content, #info-cashless.content, #espace-cashless, #section-perte-vol.content, #section-moyen-paiements.content, .page-template-cashless #bloc-aides, .page-template-infos-pratiques #section-content, .page-template-infos-pratiques #section-content-2, .page-template-infos-pratiques #section-partenaires, .page-template-infos-pratiques #section-accordeons, #section-infos-exergue.content, #section-remboursements.content, #section-revente.content, .page-template-billetterie #bloc-aides {
    margin-top: 5rem;
    padding-top: 10rem;
}

.cards-global, .card-principal, .page-template-category .category-evenement_exergue{width: 32rem;}

.card-principal{ padding: 0 2.5rem 7rem 2.5rem;}

.page-template-category .card-principal{ padding: 0 4rem 7rem 4rem;}

.card-principal img {
    width: auto;
}

.cards-global .cards-global-inner{
flex-direction: column;
align-items: center;
}

.card-principal::after, .cards-global::after, .page-template-category .card-principal::after{
background-position: -2.4rem -17.5rem;
    background-size: 990px;
    height: 17px;
}


#spectacle_vivant .card-principal, #arts_visuels .card-principal {
    padding: 4rem 2rem 7rem 2rem;
}

#forum.content, #autres.content{
display: flex;
        flex-direction: column;
        align-items: center;
}

#breadcrumbs-custom {
    top: 0;
    flex-wrap: wrap;
    margin: 3rem auto 0 auto;
}

.bloc-exergue::before {
    top: 1.2rem;
    right: -1.2rem;
}

.single-programmation .header-bck .content-img .rs::before, .single-programmation .header-bck .content-img .rs.single-programmation .header-bck .content-text ul::before, .site-navigation::before, .page-template-category #cards-prog form::before, .cards-global::before, .cta::after, #espace-cashless .bloc-weezevent::after, #infos-contact .container::after{
bottom: -1.2rem;
    right: -1.2rem;
}

.header-bck .content{margin-top: 5rem;}

.page-template-cashless .header-bck::after{
background-position:72% 64%;
opacity: .5;
}

.page-template-cashless .header-bck .bloc-ancres{top: 12rem;}


#section-fonctionnement .infos-complementaires, #section-remboursement .infos-complementaires, #section-fonctionnement .containe-inner .content-text, #section-fonctionnement .utilisation-cashless.content-text, #section-remboursement .presentation
, .page-template-espace-pro #bloc-accreditations{width: auto;}

#section-fonctionnement .infos-complementaires, #section-remboursement .infos-complementaires, #espace-cashless .bloc-complementaire,
.page-template-espace-pro .bloc-content {
    padding: 3rem 2.5rem;
}

.bloc-ancres ul li a{text-align: center;}

#section-accordeons{position: relative; z-index: 1;}

.accordeon {
    padding: 1.5rem;
}

.page-template-faq .header-img img:nth-of-type(1), .page-template-espace-pro .header-img img:nth-of-type(1) {
display: none;
}


ul{
padding-left: 1rem;
width: 90%;
}


/*------------- # ACCUEIL (M) -----------*/

#hero-home h1{
margin-top: 0;
  font-size:3.8rem;
  line-height: 5.7rem;
margin-left: 1rem;
}

    .cocarde-home {
        right: -4vw;
        top: 0;
    }

    .home .cocarde::before {
background-position: -62px -788px;
    background-size: 1700px;
    width: 15rem;
    height: 15rem;
    }


.info-cocarde, .page-template-infos-pratiques .cocarde{
width: 6rem;
line-height: 1.8rem;
font-size: 1.4rem;
}

.home .container-slogan {
        width: clamp(20rem,100%,30rem);
        min-width: 0;
}

.slogan{
padding:2rem 1.5rem 1.5rem 1.5rem;
width: 102.5%;
top: -1rem;
} 

.container-slogan::after {
top: 13.4rem;
}

.slogan h2{
font-size: 2.25rem;
}

.home .bloc-access {
        margin-top: 5rem;
        margin-right: 0;
        justify-content: center;
    }

.bloc-access .container .container-access .content-img::after {
    height: 12.5rem;
}

.bloc-access .container{
justify-content: left;
width: 90%;
}

.bloc-access .container .container-access, .bloc-access .container .container-access:nth-of-type(1), .bloc-access .container .container-access:nth-of-type(2) {
width: 30rem;
}


.bloc-access .container .container-access:nth-of-type(2){order: 3;}

#infos-pratiques .bloc-acces-direct::after {
    top: -90px;
    right: -10px;
    top: -100px;
}


/*------------- # BILLETTERIE (M) -----------*/


#section-billetterie-ligne::before{
        transform: rotate(-.5deg);
}

#section-tarifs-reduits::before{
        transform: rotate(-.8deg);
}

    #section-remboursements::after, #section-remboursements::after {
        top: -10rem;
        right: 15%;
    }

#section-billetterie-ligne {
    margin-top: 32rem;
}

#section-revente .presentation .secondary-button {margin-bottom: 3rem;}

#section-remboursements::after, #section-perte-vol::before {
    background-position: -25rem 0;
    background-size: 2200px;
    height: 250px;
    width: 250px;
}

#section-revente.content{
margin-bottom: 15rem;
}

#section-pass-culture .container .content-text-img .presentation {
    margin-top: -7.75rem;
}


/*------------- # LA PROGRAMMATION / CATEGORIE PROGRAMMATION (M) -----------*/


.page-template-archive-programmation .header-bck .content-img, .page-template-category .header-bck .content-img{
display: none;
}



#section-filtre-jours {
    gap: 4rem;
}

#section-filtre-jours p{margin: 0;}

    .page-template-archive-programmation .header-bck, .page-template-category .header-bck {
        min-height: 54rem;
    }

.page-template-archive-programmation .header-bck::after, .page-template-category .header-bck::after {
    background-position: 86% 3%;
    background-size: 2000px;
    height: 700px;
    opacity: .6;
}

.page-template-archive-programmation .bloc-ancres, .page-template-category .bloc-ancres {
        top: 0;
        position: relative;
    }

.page-template-archive-programmation #section-ancres, .page-template-category #section-ancres{
padding: 2rem 0;
}

    .header-bck .content h1 {
        text-align: left;
    }

 .page-template-archive-programmation .header-bck .content h1,  .page-template-category .header-bck  h1 {
        font-size: 3.4rem;
    }

.page-template-archive-programmation .header-bck .content, .page-template-category .header-bck .content {
    padding: 5rem 2rem 0rem 2rem;
    min-height: 30rem;
    width: 95%;
margin: 5rem auto 0 auto;
}

.page-template-category .header-bck .content{
    min-height: 35rem;
}

.page-template-category .header-bck .content .content-text{
 margin-top: 9rem;
}

.page-template-category #section-filtre-jours{padding-right: 0;}

    .page-template-category #cards-prog form {
flex-direction: column;
    align-items: baseline;
    gap: 2rem;
        top: 0;
        position: relative;
        margin-left: 0;
        width: 90%;
    }

.page-template-category #cards-prog {
    padding-top: 10rem;
}

  .page-template-archive-programmation .cocarde-main, .page-template-category .cocarde-main {
    left: 45%;
    top: 3rem;
    }


.page-template-archive-programmation .cocarde::before, .page-template-category .cocarde::before {
        background-position: -204px -817px;
        background-size: 1800px;
}

    .page-template-archive-programmation .header-bck .content .primary-button, .page-template-category .header-bck .content .primary-button {
        bottom: -6.5rem;
    }


.page-template-category .card-principal::after.category-evenement_exergue {
    background-position: -3.9rem -29rem;
    background-size: 1650px;
    height: 25px;
}

/*------------- # SINGLE PROG (M) -----------*/

.single-programmation .header-bck .content{
margin-top: 5rem;
}

.single-programmation #le-soir-meme .cards-global-inner .container-inner{
flex-direction: column;
align-items: center;
}

#actus-home .container #cards-home .card {
    padding: 3rem;
}

/*------------- # CASHLESS (M) -----------*/

.page-template-cashless .header-bck{min-height: 50rem;}

#espace-cashless .bloc-weezevent{width: auto; padding: 2rem;}

#section-fonctionnement.content .container-inner:nth-of-type(1)::after {
    bottom: -27rem;
}


/*------------- # INFOS PRATIQUES (M) -----------*/

.page-template-infos-pratiques #section-ancres .bloc-ancres{
top: 0;
}

.page-template-infos-pratiques #section-content-2{width: 90%;}


.page-template-infos-pratiques #section-content-2, .page-template-infos-pratiques #section-content{position: relative; z-index: 1;}

.page-id-2903 #section-content-2 .contenu-textuel .container, .page-id-2903 #section-partenaires .contenu-img-partenaire .container{
flex-direction: column;
}

.page-template-infos-pratiques #section-partenaires h2 {
    margin: 10rem 0 3rem 0;
}

.page-template-infos-pratiques .cocarde::before {
    background-size: 1800px;
    background-position: -49px -822px;
}

.page-template-infos-pratiques .cocarde-main{
top: -4rem;
}

.page-template-infos-pratiques #section-partenaires .img-desk{
display: none;
}

.page-template-infos-pratiques #section-partenaires .img-mob{
display: block;
}

.page-template-infos-pratiques #section-partenaires .contenu-img-partenaire p {
   justify-content: left;
    gap: 0;
}



/*------------- # NOUS CONTACTER (M) -----------*/


#infos-contact .container .content-img img{width: auto;}

#infos-contact .container{width: 30rem;}

#infos-contact{align-items: center;}

    .page-template-contact .header-bck::after {
        background-position: 68% 43%;
    }

#infos-contact .container .content-text{padding: 4rem 2rem;}

#infos-contact .rs h2{margin-bottom: 2rem;}


#infos-contact .rs .rs-pictos{gap:1rem 2rem;}

#infos-contact .rs .rs-pictos p{margin: 0;}

#infos-contact .container-form7 input.wpcf7-text, #infos-contact .container-form7 .wpcf7-textarea, #infos-contact .container-form7 select{
width: 100%;
}

#suivez-nous.content .container .container-img{flex-direction: column;}

#suivez-nous.content .container h2{margin: 5rem 0 0 0; width: 100%;}

#infos-contact select {
    background-position: 70vw -1160px;
}

/*------------- # FAQ (M) -----------*/

.page-template-faq .header-img{margin-top: 5rem;}


/*------------- # ESPACE PRO (M) -----------*/

.page-template-espace-pro h1 {
        text-align: center;
    }

.page-template-espace-pro .header-img {
        margin: 5rem 0 10rem 0;
    }


/*------------- # LE BLOG (M) -----------*/

.page-template-blog .header-bck{
min-height: 35rem;
}


.page-template-blog .header-bck::after {
        background-position: -12rem 68.5%;
}

/*------------- # SINGLE BLOG (M) -----------*/


.post-template-single-simple .header-bck .content{
width: 100%;
}

.page-template-blog .header-bck::after{opacity: .5;}


.post-template-single-simple .header-bck h1 {
        font-size: 3rem;
        line-height: 4.5rem;
}

.post-template-single-simple .header-bck h2 {
    font-size: 2.2rem;
    line-height: 3.3rem;
}

.post-template-single-simple .header-bck {
    margin-top: 5rem;
padding: 2rem;
}

.post-template-single-simple #breadcrumbs-custom{
margin: 10rem 0 0 0;
}
.post-template-single-simple .header-bck .primary-button {
    top: -18rem;
    left: 0;
}

.post-template-single-simple #breadcrumbs-custom li:last-child{
 width: 24rem;
}

.post-template-single-simple .header-bck .content-text{
padding: 0;
margin-right: 0;
}

.post-template-single-simple .header-bck .content-img{
position: relative;
top: 0;
margin-bottom: -20rem;
}






/*------------- # FOOTER (M) -----------*/

footer{
padding: 5rem 0 10rem 0;
z-index: 0;
}

footer #trd-row #col3::after {
    bottom: 9rem;
}

.bloc-aides{
margin: 0;
z-index: 1;
position: relative;
}

.bloc-aides .container-aides{
width: 70%;
left: 0;
margin-left: 0;
border-top-left-radius: 0;
background-color: #FFFCE6;
}

footer #content-rs #bloc-rs, footer #content-newsletter {
    padding: 2rem 1.5rem;
}

footer #snd-row .content-img-mob{display: block;}


footer::before{z-index: -1;}

#first-row #col4{
 order: 1;
  height: 100%;
  position: relative;
  right: 0;
  padding: 8rem 2rem 3rem 2rem;
  border-radius: 0 0 2rem 2rem;
  width: 100%;
  margin: 0;
  top: -5rem;
}

#first-row #col1{
    order: 2;
}

#first-row #col2{
    order: 3;
}

#first-row #col3{
    order: 4;
}

  footer #trd-row #col2 {
        margin: 0 auto 5rem auto;
    }

footer #trd-row #col1{ width: 100%;}
footer #trd-row #col1 .content-img{
text-align: center;
}

    footer #content-newsletter {
        gap: 1rem;
    }

footer #content-rs #bloc-rs {
flex-direction: column;
}

footer #col4 .title-rs, footer #bloc-rs h3{width: 100%;}

footer .pictors{margin-top: 2rem; justify-content: left;}

footer::before{
background-position: -12rem -221rem;
    right: 5%;
    top: -9%;
    width: 220px;
    height: 220px;
    background-size: 1160px;
}

#first-row #col1, #first-row #col2, #first-row #col3,  footer #trd-row #col1 .content-text{
display: flex;
flex-wrap: wrap;
margin-right: 0;
gap: 2rem 4rem;
}

#first-row #col1 h2, #first-row #col2 h2, #first-row #col3 h2{
width: 100%;
margin-bottom: 0;
}

footer #trd-row #col3 .content-text p{
width: 60%;
}








  

}