@font-face {
	font-family: "League Gothic Regular";
	src: url("webfonts/League_Gothic.woff") format("woff");
	font-display: swap;
}

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

html,
body {
	height: 100%;
}

body {
	margin: 0;
	overflow: hidden;
	background: #fff;
	font: 12px/16px Helvetica, Arial, Verdana, sans-serif;
}

.entree {
	position: absolute;
	width: 227px;
	left: 50%;
	top: 50%;
	margin-left: -114px;
	margin-top: -75px;
	text-align: center;
}

.entree audio {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.camion {
	display: block;
	width: 143px;
	height: 89px;
	margin: 0 auto;
}

.presente,
.marque {
	margin: 0;
	color: #666;
}

.presente {
	color: #b2b2b2;
	font: 9px/18px Helvetica, Arial, sans-serif;
	letter-spacing: 0.22em;
	text-indent: 0.22em;
}

.marque {
	font: 27px/23px "League Gothic Regular", Impact, sans-serif;
	letter-spacing: 0.02em;
	text-transform: lowercase;
}

.entree:has(.langue:hover) .marque,
.entree:has(.langue:focus-visible) .marque {
	color: #e99800;
}

.langues {
	display: flex;
	justify-content: center;
	gap: 0.35em;
}

.langue {
	color: #666;
	font: 10px/18px Helvetica, Arial, sans-serif;
	text-decoration: none;
}

.langue:hover,
.langue:focus-visible {
	color: #e99800;
}

.langue:focus-visible {
	outline: 2px solid #ff8b80;
	outline-offset: 2px;
}

.actus {
	position: absolute;
	top: 0;
	right: 0;
	width: 330px;
	height: 100%;
	padding-left: 10px;
	overflow-y: auto;
	background: #eee url("img/ombre_actus.png") repeat-y;
	font: 14px/15px "Crimson Text", Georgia, serif;
}

.actus article:first-child {
	margin-top: 10px;
}

.actus article {
	margin-bottom: 12px;
}

.actus .date_chiffre {
	position: relative;
	display: inline;
	margin-top: 10px;
	padding: 4px 5px 2px;
	color: #eee;
	background-color: rgb(255, 139, 128);
	font: 16px "League Gothic Regular", sans-serif;
	line-height: 25px;
	text-align: center;
	text-indent: 5px;
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
}

.actus .actu-type {
	margin: 5px 0 0;
	color: rgb(255, 139, 128);
	font: italic 12px/16px "Times New Roman", Georgia, Times, serif;
}

.actus h2 {
	position: relative;
	margin: -42px 0 10px 86px;
	padding-top: 2px;
	color: #444;
	font: 18px "League Gothic Regular", sans-serif;
	text-indent: -10px;
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
}

.actus h2 a {
	color: rgb(255, 139, 128);
	text-decoration: none;
}

.actus article > p:last-child {
	position: relative;
	margin: 15px 0 12px;
	font: 14px/16px "Crimson Text", Georgia, serif;
	font-weight: 400;
	font-style: normal;
	overflow-wrap: break-word;
}

.actus article > p:last-child strong {
	color: #0084f1;
	font-weight: bold;
}

.actus article > p:last-child a {
	padding: 0 3px 2px;
	background-color: #404040;
	color: #fff;
	line-height: 21px;
	text-decoration: none;
}

@media (max-width: 640px) {
	body {
		overflow: auto;
	}

	.actus {
		position: static;
		width: auto;
		height: auto;
		max-height: 40vh;
	}

	.entree {
		position: relative;
		left: auto;
		top: auto;
		margin: 2rem auto;
	}
}