/*
Theme Name: Bars en Trans 2025
Theme URI: 
Description: Bars en Trans 2025
Version: 1.0
Author: Ben Ben Ben
Author URI : http://www.benbenben.fr
*/

/*
COULEURS :

*/

/************************************************
				FONTS
************************************************/

@font-face {
    font-family: 'Marvin';
    src: url('fonts/marvin/marvinvisionsbig-bold-webfont.woff2') format('woff2'),
         url('fonts/marvin/marvinvisionsbig-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');

/************************************************
				GENERAL
************************************************/

body{
	width: 100%;
	margin: 0%;
	padding: 0%;
	font-family: 'Space Grotesk', sans-serif;
	font-size:1.1em;
	background-image:url('https://www.barsentrans.com/wp-content/uploads/2025/10/background-2025.jpg');
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	background-attachment: fixed;
	color:#1E2837;
}

.clear {
	clear: both;
}

strong, b {
	font-weight:700;
}

#myVideo {
	position: fixed;
	width:100%;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -1;
}

#content{
	width: 80%;
    margin: 2% 5%;
    padding: 2% 5%;
    border-radius: 10px;
    float: left;
    background-color: #95d4e5;
}

#content-page {
    width: 80%;
    margin: 0% 5%;
    padding: 2% 5% 5% 5%;
    float: left;
    background-color: #000;
    color: #FFF;
}

#content-page h1{
	color: #FA008A;
    text-align: center;
    font-family: "balboa-condensed", sans-serif;
    text-transform: uppercase;
    font-size: 4em;
}

#content-page h1:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.5em;
    content: "\f185";
    position: relative;
    padding: 0px 10px;
	top: -10px;
    color: #FFF;
}

#content-page h1:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.5em;
    content: "\f185";
    position: relative;
    padding: 0px 10px;
	top: -10px;
    color: #FFF;
}

#content-page h2{
	font-family: "balboa-condensed", sans-serif;
	font-size: 2.5em;
}

#content-index{
	width: 90%;
    padding: 0% 5%;
    float: left;
}

#content-tab-prog{
   width: 100%;
    padding: 0%;
    margin: 0%;
    float: left;
}

#content a, #content-groupe a, #content-index a, #content-page a{
	text-decoration:none;
	color:#E5007D;
}

#content a:hover, #content-groupe a:hover, #content-index a:hover, #content-page a:hover{
	text-decoration:underline;
}

.text-field p{
    all: revert!important;
}

.cQa8_k0F8EYObVJ3YBzf{
font-size: 1.8em!important;
}

.Lk8B8NkqVUqSPDyToSKS h3{
	letter-spacing:1px!important;
}

/* Texte défilant */
.marquee-rtl {
    display: block;
    padding: 0;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
	background: rgba(255, 237, 0, 1);
}

.marquee-rtl > :first-child {
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation: defilement-rtl 15s infinite linear;
}

@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}

.wp-block-button a{
	background-color:#1E2837!important;
	color:#FFF!important;
}

.wp-block-button a:hover{
	background-color:#E60050!important;
	color:#FFF!important;
}
	
/************************************************
				MENU OVERLAY
************************************************/

.overlay {
	height: 100%;
	width:0;
	font-size: 3em;
	font-family: "balboa-condensed", sans-serif;
	position: fixed;
	z-index: 999;
	top: 0;
	right: 0;
	background-color: #FA008A;
	overflow-x: hidden;
	transition: 0.5s;
}

.overlay-content {
	position: relative;
	top: 10%;
	width: 100%;
	text-align: center;
}

.overlay-content ul{
	margin:0;
	padding:0;
}

.overlay a {
	text-decoration: none;
	color: #000;
	display: block;
	transition: 0.3s;
	text-transform:uppercase;
}

.overlay a:hover, .overlay a:focus {
  color: #FFF;
}

.overlay .current_page_item a{
	color:#000000!important
}

.overlay .closemenu {
	position: absolute;
	top: 20px;
	right: 45px;
}

#button-menu {
    cursor: pointer;
    float: left;
    text-transform: uppercase;
	display:none;
}

.menu li{
	list-style-type:none;
}

/************************************************
		TRANSITION
************************************************/

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

/************************************************
		ALERT INFO
************************************************/

.alert {
    bottom: 0px;
    position: fixed;
    text-align: center;
    width: 86%;
    font-size: 0.8em;
    margin: 0;
    padding: 10px 2%;
    color: #FFF;
    z-index: 2;
    background-color: #E5007D;
}

.alert a{
	color:#FFFFFF;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

/************************************************
					HEADER
************************************************/

#header {
	width: 100%;
    z-index: 999;
    padding: 40px 0% 0px 0%;
    margin: 0;
    float: left;
    text-align: center;
}

#logo img{
	height: 80px;
	width: auto;
}

#menu-header {
	width: 80%;
    float: left;
    text-align: center;
    text-transform: uppercase;
    font-family: "balboa-condensed", sans-serif;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FA008A;
    padding: 1% 5%;
    margin: 2% 5% 0% 5%;
}

#menu-header ul {
	margin:0;
	padding:0;
}

#menu-header ul li {
    float: left;
    margin: 0px 5px;
}

#menu-header ul li a{
	color:#FFF;
	text-decoration:none;
}

#menu-header ul li a:after {
	font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 0.8em;
    content: "\f185";
    position: relative;
    padding: 0px 0px 0px 12px;
    color: #000000;
}

#menu-header ul li a:hover{
	color:#ffff00;
}

.current_page_item a{
	color:#ffff00!important
}

/************************************************
		VIDEO COVER
************************************************/

#visuel {
    width: 90%;
    height: auto;
	padding:5%;
	background-color:#000;
    float: left;
    margin: 0 auto;
	position:relative;
}

#visuel-mobile{
	display:none;
}

#visuel img, #visuel-mobile img{
	width:100%;
	height:auto;
}

#place-index {
    float: left;
    width: 90%;
    padding: 5%;
    font-family: "balboa-condensed", sans-serif;
    font-size: 3em;
    text-align: center;
    text-transform: uppercase;
	background-color: #000;
}

#place-index h2 {
    color: #E5007D;
    text-transform: initial;
    font-weight: normal;
	transform: rotate(-2deg);
}

#place-page {
    width: 90%;
	padding: 5% 5% 5% 5%;
	font-family: 'Marvin';
	letter-spacing: 1px;
	font-size:2em;
    text-align: center;
    text-transform: uppercase;
}

#place-index a, #place-page a{
	text-decoration:none;
	display:inline;
	color:#FA008A;
	white-space: nowrap;
}

#place-index a:hover, #place-page a:hover{
	color:#FFFFFF;
	text-decoration:none;
}

#place-index a:not(:last-child):after, #place-page  a:not(:last-child):after{
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.5em;
    content: "\f185";
    position: relative;
    color: #FFF;
    top: -10px;
    margin: 0px 5px 0px 12px;
}

/************************************************
				INDEX
************************************************/

#bouton-index{
	display: flex;
    width: 100%;
}

#bouton-index a{
	flex: 1;
	color:#FFF;
    height: 200px;
    margin: 0px;
	padding:0px;
    display: flex;
    justify-content: center;
    align-items: center;
	font-family:'Marvin';
	text-transform:uppercase;
	font-size:2em;
	letter-spacing:1px;
	background-color:#234b9b;
}

#bouton-index a:hover{
	color:#000;
	background-color:#FFF!important;
	text-decoration:none;
	animation-name: shadow;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear; 
}

.container-spotify-video{
    width: 100%;
	position:relative;
	float:left;
}

.titre-page {
    position: relative;
    width: 90%;
    padding: 5%;
    float: left;
    text-align: center;
    font-family: 'Marvin';
    text-transform: uppercase;
    margin: 0;
	background-color: #95d4e5;
	color: #1E2837;
    text-align: center;
    letter-spacing: 1px;
    font-size: 3em;
}


/************************************************
				FESTIVAL
************************************************/

#festival-photo-video{
	float:left;
	background-color:#332846;
	display: flex;
    width: 100%;
}

#festival-video{
	flex: 1;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 1px;
	height:350px;
	background-size: cover!important;
	background-position: center!important;
}

#festival-photo{
	flex: 1;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
	height:350px;
	background-size: cover!important;
	background-position: center!important;
}

#festival-video-text, #festival-photo-text{
	width:100%;
	text-align:center;
}

#festival-video a, #festival-photo a{
	display: block;
	font-family: 'Marvin';
	color:#FFF;
	text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 1px;
	animation-name: shadow;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

#festival-video a:hover, #festival-photo a:hover{
	color:#E5007D;
}



.home-style{
	display: inline-block;
    background-color: #FFF;
    color: #000;
	margin: 20px 0px;
    padding: 5px 10px;
    font-size: 1em;
    text-transform: uppercase;
	font-family: 'Space Grotesk', sans-serif;
}

.home-link{
	font-family: 'Space Grotesk', sans-serif;
    display: inline-block;
    margin: 20px 0px;
    text-transform: uppercase;
	font-size: 0.5em;
}

.home-link a{
	background-color: #FFF!important;
	padding: 5px 10px;
    color: #000!important;
    animation: none!important;
	font-size: 0.5em;
}

.home-link a:hover{
	background-color: #000!important;
	padding: 5px 10px;
    color: #FFF!important;
    animation: none!important;
	font-size: 0.5em;
}

/************************************************
				ITEM
************************************************/

.box{
	width: 46%;
    padding: 2%;
    margin: 0%;
    float: left;
    position: relative;
}

.item {
    width: 100%;
	height : 250px;
	transition: 0.5s;
	position: relative;
	text-align: center;
	display: flex;
}

.item:hover > .item-text, .item-lieu:hover > .item-text-lieu, .item-festival:hover > .item-text-festival {
	animation-name: shadow;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear; 	
}

.item:hover, .item-lieu:hover, .item-festival:hover {
	background-blend-mode: luminosity;
    background-color: #312843!important;
}

.item-text {
	width: 90%;
    margin: 5%;
	font-size:1.5em;
	text-shadow: 5px 5px black;
    color: #FFFFFF;
    color: #FFF;
	display: flex;
    align-items: center;
    justify-content: center;
}

.item-titre{
	font-family:'Marvin';
	text-transform:uppercase;
	font-size:1.5em;
	letter-spacing:1px;
	-ms-word-break: break-all;
    word-break: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.item-titre span{
	padding: 0px 10px;
    color: #b93447;
    background-color: #f7f0e6;
}

.item-style-ville{
	font-style:italic;
}

.item-heure{
	padding:10px 0px;
	color:#FFF;
	font-size:0.8em;
}

.item-heure:before, .item-heure:after{
	content:"–";
}

/************************************************
				MENU BILLETTERIE
************************************************/

.menu-billetterie a{
	width: 100%;
	background-color:#312843;
}

.menu-billetterie a:hover{
	width: 100%;
	background-color:#ba3448;
}

.menu-billetterie a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f3ff";
   display: inline-block;
   padding-right: 10px;
   vertical-align: middle;
   font-weight: 900;
}

/************************************************
				FOOTER
************************************************/

#footer {
	width: 80%;
    margin: 0% 5% 5% 5%;
    padding: 5%;
    float: left;
    font-size: 1em;
    color: #000;
    background-color: #FA008A;
}

#logo-footer img{
	max-width:100%;
	height:auto;
}

#logo-footer, #social-footer, #menu-footer, #contact-footer{
    width: 21%;
    float: left;
    padding: 2%;
	font-weight: normal;
}

#social-footer .fa-brands {
    font-size: 2em;
    width: 55px;
    margin: 5px;
    text-align: center;
}

#social-footer a{
	color:#FFF;
	text-decoration:none;
}

#social-footer a:hover{
	color:#FFED00;
}

#menu-footer a{
	color:#FFF;
	text-decoration:none;
}

#menu-footer a:hover{
	color:#FFED00;
}

#menu-footer ul{
    list-style:bullet;
    margin:0; padding:0;
}

.newsletter {
	margin-top:20px;
	font-family: "balboa-condensed", sans-serif;
	font-size:1.5em;
}

.newsletter a{
	background-color:#000000;
	color:#FFFFFF!important;
	padding: 5px 10px;
	text-decoration:none;	
}

.newsletter a:hover{
	background-color:#FFFFFF;
	color:#FA008A!important;
}


/************************************************
					ARCHIVES
************************************************/

table#archives {
	table-layout: fixed;
}

#archives .jour{
	text-align: center;
	color:#ffffff;
	background-color:#000000;
	padding:5px;
}

#archives .bar{
	text-align:right;
	border-bottom:solid black 1px;
}

#archives .groupe{
	text-align:center;
	text-transform:uppercase;
	border-bottom:solid black 1px;
}


/************************************************
				MAP
************************************************/

.map{
    width: 100%;
    padding: 0%;
	margin:0%;
    background-color: #FFF;
}

.acf-map {
    width: 100%;
    height: 100vh;
    border: #ccc solid 1px;
    margin: 0;
}

#titre-infowindow{
	width: 300px;
	font-size:18px;
}

#adresse-infowindow{
	font-size:14px;
}

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

#billetterie-externe {
	float: left;
    width: 100%;
    text-align: center;
    margin: 0%;
    padding: 0%;
    font-family: arial;
    background-color: #FFF;
}

.billetterie-in {
    float: left;
    width: 94%;
    margin: 2%;
    padding: 1%;
    border: 1px solid #CCC;
}

.billetterie-event{
	font-size: 14px;
    font-weight: bold;
	}
	
.billetterie-date{
	font-size: 13px;
    font-weight: bold;
	margin-bottom: 10px;
	}
	
.billetterie-lieu{
	color: #999;
    font-size: 13px;
}

.billetterie-event_bouton {
    display: inline-block;
    line-height: 40px;
    width: 120px;
    text-transform: uppercase;
    text-align: center;
    color: rgb(51, 51, 51);
    font-size: 12px;
    background: rgb(0, 219, 239);
	margin-top: 20px;
}

.billetterie-event_bouton a{
	    text-decoration: none;
		color:#000;
}

.event_bouton a:hover{
	opacity:0.5;	
}

/************************************************
				PAGE VIDEO
************************************************/

#video-box{
	width:80%;
	margin:3% 10%;
}

.responsive-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.responsive-container iframe,
.responsive-container object,
.responsive-container embed,
.responsive-container video
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/************************************************
				PAGE BILLETTERIE
************************************************/

.reservez a{
    padding: 5px 10px;
    font-size: 18px;
    background-color: #b93447;
    color: #FFFFFF!important;
    float: right;
}

/************************************************
			FESTIVAL
************************************************/

.container-festival {
    display: flex;
    width: 100%;
	position:relative;
	flex-wrap: wrap;
}

.box-festival {
    flex: 1 0 100%;
    height: 350px;
	margin-bottom: 50px;
}

.item-festival {
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.item-text-festival {
    color: #FFFFFF;
    position: absolute;
    text-align: center;
	width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

/* -------------------------------------------------------------- */
/* MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE
/* -------------------------------------------------------------- */

@media (max-width: 767px) {
	
/************************************************
				GENERAL
************************************************/
	
body{
	background-image:none;
	background-color: #FA008A;
}
	
#content-page h1{
	font-size: 1.5em;
	letter-spacing: 0px;
}
	
/************************************************
				MENU
************************************************/
	
#button-menu {
    display: block;
    font-size: 3em;
    color: #FFF;
    position: absolute;
    top: 10px;
}
	
#menu-header{
	display:none;
}
	
#logo{
	margin-bottom:20px;	
}
	
#logo img{
	height: 60px;
	width: auto;
}
	
/************************************************
				INDEX
************************************************/
	
.item-spotify-video{
	flex: 1 0 100%;
    height: auto;
	background-color:#000;
}	
	
.titre-page video{
	display:none;	
	}
	
#visuel {
	display:none;
}

#visuel-mobile{
    width: 100%;
    height: auto;
    float: left;
    margin: 0 auto;
	position:relative;
	display:block;
}
	
#place-index a{
	font-size:0.5em;
	display:block;
	white-space: normal;
}
	
#place-index a:after{
	display:none;
}

#place-index a:before{
	display:none;
}	
	
#bouton-index {
    display: block;
    width: 100%;
    float: left;
}
	
#bouton-index a{
    flex: 1 0 100%;
    height: 250px;		
}
	
#festival-photo-video{
	display:block;		
}
	
#festival-video, #festival-photo {
	flex: 1 0 100%;
}
	
/************************************************
					HEADER
************************************************/	
	
#menu-social{
	display:none;
}
	
/************************************************
				FOOTER
************************************************/
	
#logo-footer, #social-footer, #menu-footer, #contact-footer{
    width: 100%;
    float: left;
	text-align:center;
}
	
#logo-footer img{
	max-width:50%;
	height:auto;
}
	
/************************************************
					ARCHIVES
************************************************/

#archives .jour{
	display:none;
}

#archives .groupe{
	display:block;
}

}