:root {
	--accent: #e30613;
	--bg: #00294b;
}

.logos {
	--height: 1.5cm;
	display: flex;
	flex-direction: row;
	height: var(--height);
	width: 100%;
	justify-content: space-around;
	align-items: center;
	margin: calc(var(--height) * .5) 0;
}

.logos img {
	max-height: 100%;
	max-width: 25%;
}

header {
	border-bottom: 2px solid var(--bg);
}

.banner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	@media (min-width: 900px) {
		flex-direction: row;
	}
}

.title {
	--height: 310px;
	background: url("./Paris-BSG-1043-f99r.jpg") no-repeat var(--height) center/100%;
	background-clip: text;
	position: relative;
	overflow: hidden;
	min-width: 50%;
	width: 100%;
	height: var(--height);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.title object {
	position: absolute;
	width: 100%;
	top: var(--top);
	--top: calc(-.5 * var(--height));
	--gradient-top: calc(var(--top) + calc(var(--height) * 1.5));
	--gradient-length: calc(var(--height) * .75);
	mask-image: radial-gradient(
		circle at center var(--gradient-top),
		#00294bf0 0,
		#00294b00 var(--gradient-length)
	);
}
.title h1 {
	color: var(--accent);
	opacity: .5;
	font: bolder small-caps 50pt "Déjà vu", sans-serif;
	text-align: center;
}

#title-first-line, #title-second-line, #title-third-line {
	font-size: 45pt;
	display: block;
}
#title-first-line {
	font-size: 50pt;
	margin-left: .5em;
	margin-bottom: -.25em;
}
#title-third-line {
	font-size: 30pt;
	margin-left: 2em;
}
.description {
	background: var(--bg);
	color: white;
	padding: 3em;
	display: flex;
	flex-direction: column-reverse;
	flex-grow: 1;
	justify-content: space-between;
	@media (min-width: 1300px) {
		align-items: center;
		flex-direction: row;
	}
}
.description > div {
}
.description a {
	color: white;
}
.address {
	flex-shrink: 0;
	@media (min-width: 1300px) {
		margin-right: 2em;
	}
}

.lead {
	font-weight: bold;
}