@import  "https://fonts.googleapis.com/css2?family=Contrail+One&display=swap";

/* AFFICHER LE LOGO AU CENTRE */
.custom-logo-link {
	display: none !important;
}

.custom-header::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	width: 300px;
	height: 300px;
	background-image: url('https://theatre-astree.univ-lyon1.fr/files/2025/07/LOGO-THEATRE-ASTREE-2526-evide.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: auto;
}

/* ajustements pour les autres pages (logo plus petit et décalé vers le haut)  */
body:not(.home) .custom-header::before {
	top: 30%;
	width: 250px;
	height: 250px;
}

body:not(.home) .custom-header::after {
	top: 30%;
	width: 250px;
	height: 250px;
}

/*NE PAS AFFICHER TITRE ET SOUS TITRE SUR PAGE PRINCIPALE */
.home .site-title,
.home .site-description {
	display: none !important;
}

/* TITRE DU SITE */
.site-title {
	font-family: 'Contrail One', sans-serif !important;
	font-size: 5.5em !important;
	font-weight: normal;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 0;
	line-height: 1 !important;
/* réduit la hauteur de ligne */
}

/* SOUS TITRE */
.site-description {
	font-family: 'Contrail One', sans-serif !important;
	font-size: 1.3em !important;
	color: #ffffff !important;
	margin-top: 0;
	line-height: 1 !important;
}

.site-branding {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 2;
}

.site-branding .wrap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	height: 100%;
	padding-bottom: 30px;
}

.site-branding-text {
	text-align: center;
	padding: 10px 20px;
	border-radius: 5px;
}

/* Empêcher tout effet indésirable sur le lien du titre */
.site-title a {
	color: inherit !important;
	cursor: pointer;
}

/* AUGMENTER TAILLE HEADER PHOTO */
body:not(.home) .custom-header {
	height: auto !important;
	min-height: 600px !important;
/* avant 350px */
	padding: 0 !important;
	background: none !important;
}

body:not(.home) .custom-header-media,
body:not(.home) #wp-custom-header {
	height: 600px !important;
/* avant 350px */
	overflow: hidden !important;
}

body:not(.home) .custom-header-media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 50% 15% !important;
/* remonte légèrement pour voir les visages */
	display: block;
}

/* Étend aussi la hauteur de l'ancien sélecteur .header-image si utilisé ailleurs */
.header-image {
	height: 600px !important;
	position: relative;
}

/* TITRE H1 -> CONTRAIL ONE */
h1.entry-title {
	font-family: 'Contrail One', cursive;
	text-align: center;
	margin-bottom: 1em;
	font-size: 4em !important;
	line-height: 1.2 !important;
}

/* Supprimer les marges internes du bloc branding */
body.page:not(.home) #branding {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Ajuster l'espace autour de l'en-tête si besoin */
body.page:not(.home) #access {
	margin-top: 0 !important;
}

/* NE PAS AFFICHER AUTEUR ET DATE DES ARTICLES */
.entry-meta {
	display: none !important;
}

/* SUPPRIMER LA FLECHE DU SCROLL */
.menu-scroll-down {
	display: none !important;
}

/* STYLE DU MENU RESERVER*/
#menu-item-16270 {
	float: right;
	border: 2px solid #cc3363 !important;
	border-radius: 5px;
	background-color: #cc3363;
	border-radius: 5px;
	margin-left: 15px;
}

li#menu-item-16270 a {
	color: white !important;
	border-radius: 5px;
}

li#menu-item-16270 a:hover {
	background-color: #ffffff !important;
	border-color: #cc3363 !important;
	color: #cc3363 !important;
	border-radius: 5px;
}

/* RÉDUIRE LES MARGES LATÉRALES UNIQUEMENT SUR LA PAGE PAR THÉMATIQUE */
body.page-id-5222 .wrap,
body.page-id-5222 .site-content,
body.page-id-5222 .content-area,
body.page-id-5222 .entry-content,
body.page-id-5222 .vc_row {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 10px !important;
	margin-right: 10px !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
	box-sizing: border-box !important;
}

/*POUR MODIFIER LA MISE EN PAGE DES EVENEMENTS*/
/* Police Roboto */
body {
	font-family: 'Roboto', sans-serif;
}

#contenu .vc_tta-title-text {
	color: #cf0072;
	font-weight: bold;
	font-size: 20px;
}

/* Lien/bouton de réservation */
.booking-link {
	display: inline-block;
	color: #cf0072;
	text-decoration: none;
	border-radius: 6px;
	font-weight: bold;
	padding: 10px 20px;
	margin-top: 10px;
	transition: background-color .3s ease;
}

/* Redimensionner l'image mise en avant native */
.single-featured-image-header img {
	max-width: 900px;
/* largeur max souhaitée */
	width: 100%;
/* responsive */
	height: auto;
	display: block;
	margin: 0 auto 15px;
}

/* Header : image via #_EVENTIMAGE + titre */
.event-header {
	text-align: center;
	margin-bottom: 30px;
}

.event-header-image img {
	max-width: 900px;
/* largeur max 900px */
	width: 100%;
/* responsive */
	height: auto;
	display: block;
	margin: 0 auto 15px;
}

.event-title {
	font-size: 2rem;
	margin: 0;
}

/* Container 2 colonnes */
.event-container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
	gap: 20px;
	padding: 20px;
}

/* Colonnes */
.event-left {
	flex: 0 0 25%;
	min-width: 200px;
	background: #f0f0f0;
	padding: 15px;
	border-radius: 8px;
}

.event-right {
	flex: 0 0 75%;
	min-width: 400px;
	padding: 15px;
}

/* Blocs internes */
.event-datetime,
.event-time,
.event-duration,
.event-age,
.event-price,
.event-notes,
.event-booking,
.event-categories {
	margin-bottom: 15px;
	line-height: 1.6;
}

/* Bouton réserver */
.booking-link {
	border-radius: 5px;
	border-radius: 5px;
	margin-left: 15px;
}

.booking-link:hover {
	background-color: #b20061;
}

/* Catégories stylisées */
.event-categories a {
	display: inline-block;
	background: #e0e0e0;
	padding: 5px 10px;
	border-radius: 4px;
	margin: 2px;
	text-decoration: none;
	color: #333;
}

/* Responsive */
@media (max-width: 1024px) {
	.event-left, .event-right {
		flex: 0 0 100%;
		text-align: left;
	}
	
	.event-header-image img {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.event-container {
		padding: 10px;
	}
	
	.event-title {
		font-size: 1.5rem;
	}
}