/* ============================================================
	 Château de La Palice – Page temporaire
	 ============================================================ */

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--bordeaux:		#821e2d;
	--bleu-nuit:	 #253e63;
	--blanc:			 #FFFFFF;
}

body {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
}
img {
	display: block;
	max-width: 100%;
}

address { font-style: normal; }

/*  ============================================================
	SECTION HERO
	============================================================ */
.hero {
	background-color: var(--bordeaux);
}
.hero .row {
	display: flex;
	min-height: 560px;
	max-width : 1280px;
	margin : 0 auto;
}
/* ---------- Colonne gauche bordeaux ---------- */
.hero-left {
	width : 55%;
	padding: 0px 50px 30px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	color: var(--blanc);
}

/* Blason */
.hero-blason {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}
/* Bloc meta : adresse + réseaux sociaux */
.hero-meta {
	display: flex;
	gap: 20px;
	justify-content: space-between;
	margin-bottom: 50px;
	width: 100%;
	flex-wrap: wrap;
}
.meta-label {
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--blanc);
	margin-bottom: 10px;
	letter-spacing : 1px;
	display : block;
}
.meta-value, .meta-handle {
	font-size: 18px;
	font-weight: 500;
	color: var(--blanc);
	line-height: normal;
}

/* Icônes sociales */
.social-icons {
	display: flex;
	gap: 20px;
	margin-top: 10px;
}

.social-icons a {
	width: 28px;
	height: 28px;
	color: var(--blanc);
	text-decoration: none;
	transition: opacity 0.2s, color 0.2s;
}

.social-icons a:hover {
	opacity: 0.75;
}

/* Bouton réserver */
.btn-reserve {
	display: block;
	width: 100%;
	padding: 12px 20px;
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--bordeaux);
	border: 1px solid var(--blanc);
	background: var(--blanc);
	margin-bottom: 50px;
	transition: background 0.2s, color 0.2s;
	border-radius : 12px;
}
.btn-reserve:before {
	content: '';
    width: 15px;
    height: 12px;
    display: inline-block;
    background: url(images/fleche-rouge.svg) center no-repeat;
    margin: 0 10px 0 0;
}
.btn-reserve:hover {
	background: var(--bordeaux);
	color: var(--blanc);
}
.btn-reserve:hover:before {
    background: url(images/fleche-blanche.svg) center no-repeat;
}
/* Bloc Office de Tourisme */
.hero-ot {
	display: flex;
	align-items: center;
	gap: 25px;
	width: 100%;
}

.ot-logo {
	width: 75px;
    height: auto;
}

.ot-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.ot-link, .ot-tel {
	font-size: 18px;
	color: var(--blanc);
	text-decoration: none;
}
.ot-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Colonne droite photo ---------- */
.hero-right {
	width : 45%;
	position: relative;
	overflow: hidden;
}

.hero-right img {
	width: auto;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ============================================================
	 SECTION LOUP-GAROU
	 ============================================================ */
.event {
	background-color: var(--bleu-nuit);
}
.event .row {
	display: flex;
	min-height: 500px;
	max-width : 1280px;
	margin : 0 auto;
	padding-bottom : 80px;
}
/* ---------- Colonne gauche photo événement ---------- */
.event-left {
	width : 41%;
	position: relative;
	overflow: hidden;
}

.event-left > img {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center top;
}

/* ---------- Colonne droite texte événement ---------- */
.event-right {
	width : 59%;
	padding: 40px 50px 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--blanc);
}

.event-title {
	font-family: "Open Sans", sans-serif;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--blanc);
	line-height: normal;
	margin-bottom : 10px;
}

.event-dates {
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--blanc);
	margin-bottom : 25px;
}

.event-schedule{
	margin-bottom : 25px;
}	
.event-schedule li{
	font-family: "Open Sans", sans-serif;
	list-style: none;
	font-size: 21px;
	color: var(--blanc);
	font-weight: 500;
	margin-bottom : 5px;
}

.event-desc {
	font-size: 16px;
	color: var(--blanc);
	line-height: normal;
	text-align: justify;
	margin-bottom : 25px;
}

/* Tarif */
.event-billetterie {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
}


.tarif-label {
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--blanc);
	margin-bottom: 10px;
	letter-spacing : 1px;
	display : block;
}

.tarif-prices {
	font-size: 16px;
	color: var(--blanc);
	line-height: 1.7;
}

/* Footer avec bouton billetterie */
.btn-billet {
	display: inline-block;
	padding: 12px 20px;
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--bleu-nuit);
	border: 1px solid var(--blanc);
	background: var(--blanc);
	transition: background 0.2s, color 0.2s;
	border-radius : 12px;
}
.btn-billet:before {
	content: '';
    width: 15px;
    height: 12px;
    display: inline-block;
    background: url(images/fleche-bleu.svg) center no-repeat;
    margin: 0 10px 0 0;
}
.btn-billet:hover {
	background: var(--bleu-nuit);
	color: var(--blanc);
}
.btn-billet:hover:before {
    background: url(images/fleche-blanche.svg) center no-repeat;
}
/* ============================================================
	 RESPONSIVE
	 ============================================================ */
@media (max-width: 840px) {
 	.hero .row,
	.event .row {
		flex-direction: column;
	}
	.hero-left, .hero-right {
		width : 100%;
		padding : 0px 50px 50px;
	}
	.event-left, .event-right {
		width : 100%;
	}
	.event-title {
		font-size: 32px;
	}
}

@media (max-width: 480px) {
	.hero-left, .hero-right {
		width : 100%;
		padding : 0px 25px 50px;
	}
	.event-right{
		padding : 40px 25px 50px;
	}
	.hero-meta {
		flex-direction: column;
		gap: 16px;
	}
	.event-title {
		font-size: 26px;
	}
	.event-billetterie{
		flex-direction: column;
		align-items: flex-start;
	}
}