*, *::before, *::after {
box-sizing: border-box;
} * {
margin: 0;
} body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
} img, picture, video, canvas, svg {
display: block;
max-width: 100%;
} input, button, textarea, select {
font: inherit;
} p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
} #root, #__next {
isolation: isolate;
}
.coulAdherent {
color: #83EF71;
}
.coulActicity {
color: #AED5FB;
}
.grid {
display: grid;
}
html {
font-size: 62.5%;
font-family: "Montserrat", sans-serif;
font-family: "Oswald", sans-serif;
}
h2, h1 {
font-size: 4rem;
text-transform: uppercase;
font-weight: 700;
padding: 4rem 0;
}
h3 {
margin: 2rem auto;
}
p {
font-size: 1.6rem;
}
a {
text-decoration: none;
}
header.container-fluid {
padding: 0;
}
header.container-fluid .entete {
background-image: url(//www.11bouge.com/wordpress/wp-content/themes/11bouge/img/fond-2023-2024.jpg);
background-repeat: repeat-x;
background-size: cover;
}
header.container-fluid .entete, header.container-fluid .plaqSaison {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
max-width: 100%;
}
header.container-fluid .plaqSaison {
position: relative;
top: -10rem;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 0;
}
header.container-fluid .plaqSaison img {
transition: transform 0.2s ease-in-out;
max-width: 20rem;
margin-bottom: 4rem;
background-color: transparent;
border: none;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
header.container-fluid .plaqSaison > a:first-child:hover img {
transform: scale(1.1) rotate(7deg);
}
header.container-fluid .plaqSaison .btn-downlo {
font-size: 2rem;
padding: 2rem;
border-radius: 1rem;
text-transform: uppercase;
font-weight: 700;
color: white;
background-color: #fc3e31;
transition: font-size 0.2s ease-in;
}
header.container-fluid .plaqSaison .btn-downlo:hover {
text-shadow: black 1px 0 10px;
font-size: 2.05rem;
}
header.container-fluid form.recherch {
display: none !important;
}
span.burger {
color: white !important;
margin: 0 2rem;
font-size: 3rem;
}
span.star {
color: black;
font-size: 0.8rem;
font-weight: bolder;
}
.navbar {
background-color: #111;
}
.navbar .navbar-brand img {
max-height: 6rem;
}
.navbar .navbar-nav {
align-items: center;
}
.navbar .navbar-nav .nav-item:nth-child(-n+3) {
font-family: "Oswald", sans-serif;
letter-spacing: 1px;
font-size: 2.6rem;
margin: 0 2rem;
}
input[type=search] {
display: none;
}
.offcanvas {
font-family: "Oswald", sans-serif;
font-weight: 400;
letter-spacing: 1px;
background-color: black;
color: white;
}
.offcanvas .offcanvas-header {
justify-content: center;
}
.offcanvas .offcanvas-body p {
text-align: center;
font-size: 1.5rem;
}
.offcanvas .offcanvas-body p span {
color: rgb(233, 200, 17);
}
.offcanvas .offcanvas-title {
margin-top: 3rem;
text-align: center;
}
.offcanvas .offcanvas-title span {
font-size: 1.5rem;
color: rgb(233, 200, 17);
}
.menuLat {
display: flex;
flex-direction: column;
align-items: center;
list-style-type: none;
margin-top: 3rem;
padding: 0;
}
.menuLat a {
color: white;
text-decoration: none;
font-size: 2rem;
text-transform: uppercase;
text-align: center;
}
.menuLat a:hover {
color: rgb(233, 200, 17);
}
.menuLat .PDFSaison a {
display: block;
margin-top: 4rem;
font-size: 1.5rem;
font-weight: 100;
}
.menuLat .PDFSaison a img {
margin-top: 1rem;
}
.menuLat li:nth-child(-n+6) a {
display: block;
margin: 0.5rem 0;
}
section {
padding: 3rem 0;
}
#saison {
padding-top: 0;
}
#saison h2 {
padding-top: 0;
}
#saison #agenda {
padding-top: 8rem;
padding-bottom: 2rem;
}
.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
border: 20px solid rgb(233, 181, 50);
border-radius: 5rem;
}
footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: stretch;
padding: 5rem;
background-color: black;
color: white;
}
footer .infosPrat {
display: flex;
flex-direction: column;
justify-content: center;
}
footer .infosPrat h3 {
margin: 0;
}
footer .reseauSoc {
list-style-type: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
address {
font-size: 1.6rem;
}
.vigPlaquet {
text-align: center;
}
.vigPlaquet h3 {
text-transform: uppercase;
}
.vigPlaquet img {
display: inline-block;
height: auto;
}
.listCard {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 4rem;
}
.carte {
width: 40rem;
padding: 1.5rem;
flex-direction: column;
align-items: flex-start;
text-align: center;
}
.carte .vig {
position: relative;
background-color: black;
padding-bottom: 2rem;
border-radius: 1.5rem;
transition: all 0.4s ease-in;
}
.carte .vig:hover {
border: 1rem solid goldenrod;
}
.carte .vig:hover h3 {
color: goldenrod;
}
.carte a {
text-decoration: none;
}
.carte .date {
position: absolute;
left: 0;
top: 0;
background-color: black;
padding: 1rem;
color: white;
font-weight: 700;
font-size: 1.7rem;
text-transform: uppercase;
}
.carte .heure {
color: white;
position: absolute;
right: 0;
background-color: black;
padding: 1rem;
font-size: 1.4rem;
}
.carte .illusDate {
border: 1rem solid black;
background-color: white;
overflow: hidden;
height: 25rem;
}
.carte .illusDate img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.carte img {
text-align: center;
}
.carte h3 {
margin: 0.8rem 0;
padding: 0 1rem;
color: #FA3C31;
text-transform: uppercase;
font-weight: 800;
font-size: 2.5rem;
margin: 1.5rem auto;
}
.carte .hash {
color: white;
text-transform: uppercase;
font-weight: 700;
font-size: 1.5rem;
}
.carte .lieu {
background-color: white;
border: 1px solid black;
font-weight: 700;
font-size: 1.3rem;
padding: 1rem 0;
margin: 1rem 0;
}
.carte .evenCadre {
background-color: black;
color: white;
text-transform: uppercase;
font-size: 1.6rem;
font-weight: 700;
padding: 2rem;
}
.carte .desc {
color: white;
font-size: 1.8rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
}
.actionCult {
margin-bottom: 6rem;
}
.actionCult a {
display: flex;
}
.actionCult .carte {
display: flex;
background-color: black;
align-items: stretch;
justify-content: space-between;
border-bottom-left-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
transition: all 0.4s ease-in;
}
.actionCult .carte:hover {
border: 1rem solid goldenrod;
}
.actionCult .carte:hover h3 {
color: goldenrod;
}
.actionCult .carte .cadreImg {
background-color: white;
width: 100%;
overflow: hidden;
width: 100%;
height: 368px;
}
.actionCult .carte .cadreImg img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 50%;
object-position: 50% 50%;
}
swiper-container {
width: 850px;
height: 90px;
margin: 0 auto;
}
swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
swiper-slide img {
display: inline-block;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.present {
position: relative;
background-color: black;
margin-top: 15rem;
color: white;
margin-top: 8rem;
}
.present .logo {
position: absolute;
top: -8rem;
left: 50%;
transform: translateX(-50%);
}
.present h2 {
margin-top: 5rem;
}
.present .content {
display: flex;
place-content: center;
flex-wrap: wrap;
}
.present p {
display: inline-block;
max-width: 50rem;
text-align: left;
margin-left: 4rem;
font-size: 1.8rem;
margin-bottom: 3rem;
}
.present img {
display: inline-block;
max-width: 40rem;
padding-bottom: 4rem;
}
.present .btn {
display: inline-block;
margin: 1.5rem auto;
text-transform: uppercase;
font-weight: 500;
font-size: 2rem;
padding: 1rem 4rem !important;
}
#nf-form-1-cont {
max-width: 45rem;
margin: auto;
}
.newslet {
background-color: black;
color: white;
}
.newslet img {
margin: 0 auto;
}
#festik {
background-color: #ffe8e7;
}
#festik .container {
max-width: -moz-fit-content;
max-width: fit-content;
}
#festik .container img {
margin: auto;
}
#festik #iframe-11bouge html > .has-background-white {
border: 1px solid red;
}
.partenaires {
margin-bottom: 10rem;
}
#partenaires a {
color: #d16081;
font-weight: bold;
}
#benevole {
background-color: black;
}
#benevole h2 {
color: #d16081;
}
#benevole img {
display: inline-block;
max-width: 50rem;
margin-bottom: 4rem;
}
.date-passee {
position: relative;
}
.date-passee .illusDate img {
filter: blur(3px) grayscale(0.5);
}
.date-passee::before {
position: absolute;
display: flex;
content: "Merci au Public et aux Artistes...";
width: 50%;
margin: auto;
color: white;
z-index: 9;
width: 100%;
height: 100%;
max-height: 24rem;
justify-content: center;
align-items: center;
font-size: 3rem;
padding: 0 5rem;
font-weight: 800;
text-shadow: 3px 4px black;
transform: rotate(-9deg);
}
.date-passee h3, .date-passee span {
opacity: 0.5;
}
.single-concert .artiste {
display: flex;
align-items: center;
justify-content: space-between;
}
.single-concert .artiste > img {
max-width: 50%;
}
.single-concert .artiste .blocInfo {
width: 35%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.single-concert .artiste #prog {
width: 100%;
background-color: #FA3C31;
color: white;
padding: 2.5rem;
text-align: center;
}
.single-concert .artiste #prog h2 {
padding: 0.8rem 0;
}
.single-concert .artiste #prog span {
display: block;
color: #111;
font-weight: 200;
font-size: 1.5rem;
}
.single-concert .artiste button, .single-concert .artiste a.btn {
font-size: 2rem;
text-transform: uppercase;
background-color: #111;
color: #fff;
border-radius: 0;
padding: 1rem 3rem;
}
.ficheArtist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
}
.ficheArtist .bio {
padding: 4rem 0;
margin-top: 4rem;
max-width: 80%;
margin: 0 auto;
}
.ficheArtist .bio h2 {
font-size: 3rem;
font-weight: 800;
}
.ficheArtist .bio h2 span {
display: block;
font-size: 1.6rem;
font-weight: 800;
}
.ficheArtist .bio p {
font-size: 2rem;
margin: 0;
padding: 0;
max-width: 56rem;
text-align: left;
}
.ficheArtist .bio .embed-container {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
max-width: 100%;
height: auto;
margin-bottom: 3rem;
}
.ficheArtist .bio .embed-container iframe, .ficheArtist .bio .embed-container object, .ficheArtist .bio .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ficheArtist .details {
display: flex;
flex-direction: column;
padding: 8rem;
padding-left: 5rem;
background-color: #000;
color: white;
}
.ficheArtist .details .date, .ficheArtist .details .lieu, .ficheArtist .details .heure, .ficheArtist .details .tarifs {
height: 6rem;
background-repeat: no-repeat;
background-size: contain;
background-position: left top;
margin: 1rem 0;
padding-left: 7rem;
}
.ficheArtist .details .date, .ficheArtist .details .heure, .ficheArtist .details .tarifs {
display: flex;
align-items: center;
font-size: 1.7rem;
font-weight: 700;
text-transform: uppercase;
}
.ficheArtist .details .tarifs {
align-items: baseline;
}
.ficheArtist .details .tarifs ul {
list-style-type: none;
}
.ficheArtist .details .tarifs ul li {
display: inline-block;
}
.ficheArtist .details .date {
background-image: url(//www.11bouge.com/wordpress/wp-content/themes/11bouge/img/calendrier.png);
}
.ficheArtist .details .lieu {
display: flex;
flex-direction: column;
background-image: url(//www.11bouge.com/wordpress/wp-content/themes/11bouge/img/googlemaps.png);
background-size: 5rem;
height: -moz-fit-content;
height: fit-content;
}
.ficheArtist .details .lieu span {
padding-top: 0.3rem;
text-transform: uppercase;
color: #fc3e31;
font-size: 1.7rem;
font-weight: 700;
max-width: 60%;
line-height: 1.7rem;
margin-bottom: 1rem;
}
.ficheArtist .details .lieu iframe {
width: -webkit-fill-available;
width: -moz-available;
}
.ficheArtist .details .heure {
background-image: url(//www.11bouge.com/wordpress/wp-content/themes/11bouge/img/horaires.png);
}
.ficheArtist .details .tarifs {
background-image: url(//www.11bouge.com/wordpress/wp-content/themes/11bouge/img/prix.png);
}
.ficheArtist .details .infosTarifs, .ficheArtist .details .infosDivers {
font-size: 1.5rem;
font-weight: 500;
}
.prochConcerts h2 {
text-align: center;
}
.page .container h1 {
max-width: 80rem;
text-align: center;
margin: auto;
}
.page .container p {
font-size: 2rem;
text-align: center;
}
.page .container p img {
margin: auto;
margin-top: 4rem;
}
@media screen and (max-width: 768px) {
.video-responsive iframe {
border-width: 0.8rem;
}
.page-template-default .navbar-toggler, .page-template-default .navbar-collapse, .single .navbar-toggler, .single .navbar-collapse {
display: none;
}
#presentation .content {
padding: 3rem 5rem;
}
#presentation .content p {
text-align: justify;
margin: 0;
}
#presentation .content p a {
display: block;
width: -moz-fit-content;
width: fit-content;
}
#festik img {
max-width: 70vw;
}
footer {
grid-template-columns: 1fr;
gap: 2rem;
justify-items: center;
}
.page .container h1 {
width: 70vw;
}
.page .container img {
height: auto;
}
}
@media screen and (max-width: 995px) {
.page-template-default .navbar-toggler, .page-template-default .navbar-collapse, .single .navbar-toggler, .single .navbar-collapse {
display: none;
}
}