/*
--wp--preset--color--blanc-utopia
--wp--preset--color--noir-utopia
--wp--preset--color--rouge-utopia
--wp--preset--color--secondary (Gris léger)
--wp--preset--color--brun-utopia
*/

.tabs_horaire {
	padding: 2em 0;
}
.horaires_accueil_columns{
	display:flex;
	flex-wrap: wrap;
}
.horaires_accueil_columns .main_mobile{
	display:block;
}
.horaires_accueil_columns .main_mobile::after{
	content: '';
	background-image: url('/wp-content/themes/cinemas-utopia/assets/images/main-droite.png');
	height: 40px;
	width: 73px;
	display: inline-block;
	background-size: 100%;
	background-repeat: no-repeat;
	transition: all 0.5s ease-in-out;
}
@media screen and (min-width: 981px) {
	.horaires_accueil_columns .main_mobile{
		display:none;
	}
}
  
.horaires_accueil_inner_column{
	display:flex;
	/* flex-basis: 100%; */
	gap: 0.5em;
	margin-bottom: 1em;
}
@media screen and (max-width: 400px) {
	.horaires_accueil_inner_column {
		flex-wrap: wrap;
	}
}
@media screen and (min-width: 650px) {
	.horaires_accueil_inner_column{
		flex-basis: 50%;
	}
}
.horaires_accueil_inner_column h3 {
	font-size: 36px;
	font-weight: 400;
	margin: 0;
	margin-block-end: 0 !important;
}
.horaires_accueil_inner_column .button_link{
	width: 100%;
	text-align: center;
	align-self: flex-start;
}
.button_link.verspagehoraire {
	width: 100%;
	display: block;
	text-align: center;
}
/*.horaires_accueil_inner_column .button_link.inactive:hover,*/
.button_link.verspagehoraire:hover {
	background: var(--wp--preset--color--brun-utopia)!important;
}

.liste_horaire_cinema {
	display: grid;
	/* grid-auto-flow: column; */
	overflow: auto;
	grid-template-columns: repeat(3, 1fr ); 
}


/* [role="tablist"] {
  min-width: 100%;
} */

.container_horaires_home [role="tab"]{
  outline: none;
  cursor: pointer;
}

.container_horaires_home [role="tab"][aria-selected="false"] {
 	background-color: var(--wp--preset--color--brun-utopia);
}

.container_horaires_home [role="tab"][aria-selected="true"],
.container_horaires_home [role="tab"]:focus {
	background-color: var(--wp--preset--color--rouge-utopia);
}
/*
[role="tab"]:hover span.focus,
[role="tab"]:focus span.focus,
[role="tab"]:active span.focus {
} */
/* [role="tabpanel"] {
} */

[role="tabpanel"].is-hidden {
  display: none;
}

[role="tabpanel"] p {
  margin: 0;
}

.item_liste_horaire {
	position: relative;
	border-bottom: solid 2px var(--wp--preset--color--brun-utopia);
  	padding: 0.5em;
	margin-bottom: 1em;
	min-width: 270px;
}
@media screen and (min-width: 980px) {
	.item_liste_horaire{
		min-width: auto;
	}
}
.item_liste_horaire a {
	text-decoration: none;
}
.item_liste_horaire .jour_seance,
.item_liste_horaire a b{
	font-family: var(--wp--preset--font-family--fraunces);
}
.item_liste_horaire .nom_salle {
	text-transform: uppercase;
}
.item_liste_horaire .heure_seance {
	font-family:var(--wp--preset--font-family--fraunces); font-weight:bold;
}

.horaire_vignette_evnmt_et_etiquettes {
	background: var(--wp--preset--color--rouge-utopia);
	color: white;
	font-size: var(--wp--preset--font-size--utopiasmall);
	font-weight: 600;
	padding: 0.5em 1em;
	display: inline-block;
	border-radius: 26px;
	position: absolute;
	z-index:1;
  	top: 1em;
 	right: 1em;
}
.horaire_vignette_inner_label {
	display: block;
}
.horaire_vignette_inner_label:not(:last-child)::after {
	content: ', ';
}


/**
*
* Page Horaires 
*
*/
/* Boutons */
.disabled{
	background-color: var(--wp--preset--color--secondary);
	cursor:default;
}
.boutons_semaine {
  display: none;
}
#previous_week:not(.disabled):hover,
#next_week:not(.disabled):hover{
	background-color: var(--wp--preset--color--rouge-utopia);
}

#previous_week::before,
#next_week::after{
	content: '';
	background-image: url('/wp-content/themes/cinemas-utopia/assets/images/main_1.png');
	height: 33px;
	width: 52px;
	background-size: 100%;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: all 0.5s ease-in-out;
	display: inline-block;
	vertical-align: middle;
	transition: all 0.2s ease-in;
}
#previous_week:before{
	margin-right: 0.5em;
}
#next_week:after{
	margin-left: 0.5em;
	transform: scaleX(-1);
}
#previous_week.disabled::before, 
#next_week.disabled::after{
	filter: invert(1);
}

#boutons_container > .wp-block-buttons{
	overflow-x: auto;
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
}

.bouton_jour_horaires{
	flex: 0 0 auto;
}
.boutons_jour {
	border: solid 2px var(--wp--preset--color--brun-utopia);
	background: var(--wp--preset--color--secondary);
	padding: 0.5em 0.8em;
}
/* .boutons_jour.disabled {
	border: solid 2px var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--blanc-utopia) !important;
	cursor: default;
} */
.boutons_jour.active {
	border: solid 2px var(--wp--preset--color--noir-utopia);
	background: var(--wp--preset--color--noir-utopia);
	color: var(--wp--preset--color--blanc-utopia) !important;
	cursor: default;
}


#titre_jour {
	font-size: var(--wp--preset--font-size--utopia-x-large);
	text-align: center;
	margin-bottom: 1em;
	margin-bottom: 1em;
	font-weight: 400;
}
#container_horaires_complets_par_semaine a.telecharger_gazette{
	font-family: var(--wp--preset--font-family--fraunces);
	color: var(--wp--preset--color--brun-utopia);
	margin:0.5em auto;
}

.labels_horaires {
	overflow-x: auto;
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	justify-content: flex-start;
}
@media screen and (min-width: 1081px) {
	.labels_horaires {
		display: block;
	}
}
.bouton_label_horaire {
	background: var(--wp--preset--color--blanc-casse);
	border: solid 2px var(--wp--preset--color--brun-utopia);
	margin: 0.5em;
	text-decoration: none;
	padding: 0.5em 1em;
	border-radius: 38px;
	cursor: pointer;
	display:none;
	flex: 0 0 auto;
	color: var(--wp--preset--color--brun-utopia);
	font-size: var(--wp--preset--font-size--medium);
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 700;
}
.bouton_label_horaire.active {
	display:inline-block;
}
.bouton_label_horaire.active.selected {
  background: var(--wp--preset--color--rouge-utopia);
  border: solid 2px var(--wp--preset--color--rouge-utopia);
  color: var(--wp--preset--color--blanc-utopia);
}
.horaires_semaine {
	visibility: hidden;
	z-index: 0;
	height: 0;
	position: relative;
	/* display: grid; */
  	/* grid-template-columns: auto; */
	gap: 2em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
/* @media screen and (min-width: 830px) { */
	/* .horaires_semaine{ */
		/* grid-template-columns: repeat(2, 1fr); */
	/* } */
/* } */
/* @media screen and (min-width: 1300px) { */
	/* .horaires_semaine{ */
		/* grid-template-columns: repeat(3, 1fr ); */
	/* } */
/* } */
.horaires_semaine.active {
  	visibility: visible;
  	z-index: 1;
	height: 100%;
}
.horaire_complet_container {
	position: relative;
	display: none;
	gap: 1em;
	font-size: var(--wp--preset--font-size--normal);
}

.horaire_complet_container.active {
	display: flex;
}

.horaire_complet_inner_left a {
	height: 100%;
	display: block;
	width: 170px;
	min-height: 260px;
}
.affiche_wrapper {
	overflow: hidden;
	position: relative;
	height: 100%;
}
.affiche_wrapper img{
	position: absolute;
	width: auto;
	height: 100%;
	left: 50%;
	top: 0;
	transform: translate(-50%, 0);
	min-width: 100%;
}
.horaire_complet_inner_right {
	width: 180px;
	line-height: 1.8;
	font-family: var(--wp--preset--font-family--fraunces);
}
.titre_horaire a {
	text-decoration: none;
	line-height: 1.5;
}
	
.horairecomplet_vignette_evnmt_et_etiquettes {
	background: var(--wp--preset--color--rouge-utopia);
	color: white;
	font-size: var(--wp--preset--font-size--utopiasmall);
	padding: 0.5em 1em;
	display: inline-block;
	border-radius: 26px;
	position: absolute;
	z-index:1;
	top: -0.5em;
	left: -0.5em;
 	right: auto;
}
.horaire_complet_inner_right .horaire_nom_cinema {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	margin: 0.5em 0;
}

.cycle_title {
	font-family: var(--wp--preset--font-family--barlow);
}


/**
*
* Bloc Evenements à venir 
*
*/
.liste_evenements_a_venir_container{
	padding: 1.5em;
}
.evenement_a_venir{
	padding: 1.5em;
	text-align: center;
	width: calc(320px + 3em);
}
.evenement_a_venir_affiche {
	height: 175px;
	width: 100%;
	overflow: hidden;
	position: relative;
	background-color: var(--wp--preset--color--brun-utopia);
	background-size: cover;
	background-repeat: no-repeat;
}
/* .evenement_a_venir_affiche img { */
	/* position: absolute; */
	/* width: auto; */
	/* height: 100%; */
	/* left: 50%; */
	/* top: 0; */
	/* transform: translate(-50%, 0); */
/* } */
.evenement_a_venir h3{
	font-weight: 400;
	font-size: var(--wp--preset--font-size--utopialarge);
	margin: 0.5em 0 0 0;
}
.evenement_a_venir h4 {
	margin: 0.5em;
}
/* .evenement_a_venir_date{
	font-size:0.8em; 
	font-weight:bold;
} */
.evenement_a_venir_date {
  font-family: var(--wp--preset--font-family--fraunces);
}
.evenement_a_venir_date:first-letter {
    text-transform: uppercase;
}
.evenement_a_venir_texte_evenement {
	margin: 1em auto;
}
.evenement_a_venir .wp-block-button__link{
	display: block;
	width: 156px;
	margin: 0 auto;
}
.lien_page_evenement_container {
	width: 100%;
	margin-top: 0;
}
.lien_page_evenement_container .wp-block-button__link{
	display: block;
	text-align: center;
}