/* 2026-09-07 */



/* ======================================== *\
	VARIABLES
\* ======================================== */

:root {
	--rouge: #d00000;
	--bleu:  #2060a0;
}


/* ======================================== *\
	GÉNÉRAL
\* ======================================== */

/*	================= */
/*	GÉNÉRAL > Général */
/*	----------------- */

html {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: linear-gradient(#ffffff, #f8f8f8) fixed;
	font-family: sans-serif;
}
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	flex: 1;
	font-size: 18px;
}
body::after {
	content: '';
	flex: 1;
}
main {
	padding: 0 16px;
}
main>section {
	max-width: 1280px;
	margin: 48px auto;
	padding: 16px;
}
main>section>p {
	font-size: 20px;
}
h2 {
	margin: 16px 0;
	font-size: 32px;
	line-height: 1;
	text-align: center;
	color: var(--bleu);
}
h3 {
	font-size: 24px;
	text-align: center;
	color: var(--bleu);
}
a {
	text-decoration: none;
	color: var(--bleu);
}
a:hover {
	text-decoration: underline;
	color: #0080ff;
}
a.button {
	width: fit-content;
	margin: 16px auto 0;
	padding: 8px;
	border: solid 1px;
	border-radius: 3px;
	display: block;
	font-size: 14px;
	text-align: center;
}
a.button:hover {
	background: rgba(0,128,255,0.1);
	text-decoration: none;
}
sup {
	font-size: 75%;
}
img {
	max-width: 100%;
}
section.now {
	border: solid 2px #80c000;
	border-radius: 6px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, rgba(128,192,0,0.2), rgba(0,0,0,0) 50%);
}
section.now::before {
	content: 'En ce moment';
	width: 64px;
	position: absolute;
	top: 0;
	left: 0;
	background: #80c000;
	padding: 32px 40px 8px;
	transform: rotate(-45deg) translate(-26px, -56px);
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	color: #ffffff;
}
section.article {
	box-sizing: border-box;
	max-width: 1024px;
	max-height: 80vh;
	padding: 0 32px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 6px;
	overflow: auto;
}
.intro {
	max-width: 800px;
	margin: 0 auto;
	font-size: 24px;
	text-align: justify;
}

/*	================== */
/*	GÉNÉRAL > Colonnes */
/*	------------------ */

.columns {
	columns: 480px;
	gap: 32px;
}
.columns>* {
	overflow: hidden;
}

/*	=================== */
/*	GÉNÉRAL > Citations */
/*	------------------- */

q {
	font-style: italic;
}
q::before {
	content: '« ';
}
q::after {
	content: ' »';
}
blockquote {
	margin: 0;
	padding: 24px 32px;
	border-radius: 8px;
	position: relative;
	background: linear-gradient(90deg, rgba(128,192,0,0.25), rgba(128,192,0,0.05));
	font-family: serif;
	font-size: 20px;
	line-height: 1;
}
blockquote::before,
blockquote::after {
	padding: 0 16px;
	position: absolute;
	font-size: 56px;
	color: rgba(96, 128, 0, 0.5);
}
blockquote::before {
	content: '“';
	top: 0;
	left: 0;
}
blockquote::after {
	content: '„';
	bottom: 6px;
	right: 0;
}
blockquote>p {
	margin: 8px 0;
	text-align: justify;
	hyphens: auto;
}

@media (max-width: 400px) {
	blockquote {
		padding: 24px 16px;
		font-size: 18px;
	}
}

/*	===================== */
/*	GÉNÉRAL > Formulaires */
/*	--------------------- */

form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
form>fieldset {
	padding: 8px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #ffffff;
}
form>fieldset>div {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
form>fieldset>div>div {
	flex: 1;
}
form>fieldset>div label {
	margin: -6px 0 0 8px;
	padding: 0 4px;
	position: absolute;
	background: #ffffff;
	font-size: 11px;
	color: rgba(0,0,0,0.5);
}
form>fieldset .checkbox {
	position: relative;
	display: flex;
	flex-direction: column;
}
form>fieldset .checkbox label {
	margin: 0;
	padding: 16px 48px 16px 16px;
	border: solid 1px rgba(0,0,0,0.1);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	font-size: 14px;
	color: rgba(0,0,0,0.8);
	user-select: none;
}
form>fieldset .checkbox input[type=checkbox] {
	width: 16px;
	height: 16px;
	margin: -8px;
	position: absolute;
	top: 50%;
	right: 24px;
}
form input,
form textarea {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 8px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	font-size: 17px;
}
form textarea {
	height: 128px;
	min-height: 48px;
	max-height: 480px;
	resize: vertical;
}
form input[type=submit] {
	padding: 16px;
	background: linear-gradient(#ffffff, #f0f2f4);
	cursor: pointer;
}
form input[type=submit]:hover {
	background: linear-gradient(#f0f2f4, #ffffff);
}


/* ======================================== *\
	ENTÊTE
\* ======================================== */

header {
	background: linear-gradient(#3090e0, #2060a0);
	font-size: 20px;
	color: #ffffff;
}
header>h1 {
	margin: 0;
	padding: 16px 0;
	font-family: serif;
	font-size: 48px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
}
header>h1>strong {
	margin: 0 0 16px;
	display: block;
}
header>h1>span {
	display: block;
	font-size: 20px;
}
header>p {
	margin: 8px 24px;
	font-family: serif;
	font-size: 20px;
	text-align: center;
}

/*	===================== */
/*	ENTÊTE > LOCALISATION */
/*	--------------------- */

#loca {
	margin: 4px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 8;
}
#loca::before {
	width: 24px;
	height: 24px;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	font-size: 12px;
	color: #000000;
}
#loca.fr::before { content: 'Fr'; }
#loca.en::before { content: 'En'; }
#loca.ar::before { content: 'Ar'; }
#loca>ul {
	margin: 0;
	padding: 0 28px 0 0;
	position: absolute;
	top: 0;
	right: 0;
	display: none;
	list-style: none;
	font-size: 13px;
	text-align: right;
}
#loca:hover>ul {
	display: block;
}
#loca>ul>li>a {
	margin: 0 0 2px;
	padding: 2px 4px;
	border-radius: 3px;
	display: inline-block;
	background: rgba(0,0,0,0.8);
	color: #ffffff;
}
#loca>ul>li>a:hover {
	background: #ffffff;
	box-shadow: 0 0 4px rgba(0,0,0,0.1);
	color: #000000;
	text-decoration: none;
}

/*	================ */
/*	ENTÊTE > CONTACT */
/*	---------------- */

header>.contact {
	padding: 24px 16px;
	font-family: sans-serif;
	text-align: center;
}
header>.contact a,
header>.contact a:hover {
	display: inline-block;
	color: #ffffff;
}
header>.contact>ul {
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 4px;
	list-style: none;
	font-size: 12px;
	font-weight: bold;
}
header>.contact>ul>li {
	width: 32px;
	height: 32px;
	position: relative;
	background: url('images/social.svg');
}
header>.contact .social_youtube		{ background-position:     0 0; }
header>.contact .social_facebook		{ background-position: -32px 0; }
header>.contact .social_x		{ background-position: -64px 0; }
header>.contact .social_instagram	{ background-position: -96px 0; }
header>.contact .social_tiktok		{ background-position: -128px 0; }
header>.contact>ul>li>a {
	width: min-content;
	padding: 2px 8px;
	border-radius: 3px;
	margin: 0 auto;
	position: absolute;
	top: 40px;
	left: -32px;
	right: -32px;
	text-indent: -9999px;
}
header>.contact>ul>li>a:hover {
	text-indent: 0;
	z-index: 9;
	background: #ffffff;
	text-decoration: none;
	color: #2060a0;
}
header>.contact>ul>li>a::before {
	content: '';
	width: 32px;
	height: 32px;
	margin: -16px;
	position: absolute;
	top: -24px;
	left: 50%;
}
header>.contact>ul>li>a:hover::after {
	content: '';
	width: 8px;
	height: 4px;
	margin: -4px;
	position: absolute;
	top: 0px;
	left: 50%;
	background: #ffffff;
	clip-path: polygon(0 100%,50% 0,100% 100%);
}

/*	============= */
/*	ENTÊTE > MENU */
/*	------------- */

#menu {
	position: sticky;
	top: 0;
	z-index: 7;
	background: var(--rouge);
	color: #ffffff;
}
#menu::after {
	width: 100%;
	height: 16px;
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	background: linear-gradient(rgba(64,0,0,0.2), rgba(64,0,0,0.05), rgba(64,0,0,0));
	pointer-events: none;
}

#menu>ul {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: auto;
	scrollbar-width: thin;
	display: flex;
	list-style: none;
}
#menu>ul>li {
	white-space: pre;
}
#menu>ul>li:not(:last-child)::after {
	content: ' | ';
}

#menu>ul>li>a {
	padding: 8px 4px;
	font-size: 14px;
	display: inline-block;
	color: #ffffff;
}


/* ======================================== *\
	PAGES
\* ======================================== */

/*	============ */
/*	PAGES > News */
/*	------------ */

#news>div {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	font-size: 20px;
}
#news>div>* {
	min-width: 288px;
	flex: 1 0 0;
}
#news>div>.column_left {
	max-width: 512px;
	order: -1;
}
#news figure {
	margin: 8px 0;
}
#news figure img {
	max-width: 100%;
	border-radius: 6px;
	display: block;
}
#news figure>figcaption {
	margin: 4px 0;
	font-size: 14px;
	font-style: italic;
	text-align: center;
	color: rgba(0,0,0,0.75);
}
#news .books {
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 16px;
	list-style: none;
	font-size: 14px;
	text-align: center;
	color: rgba(0,0,0,0.8);
}
#news .books>li {
	flex: 1 0 0;
}
#news .books img {
	max-width: 100%;
	border-radius: 3px;
}
#news .briefly {
	padding: 8px 16px;
	border: solid 1px rgba(128,192,0,0.5);
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	background: linear-gradient(90deg, rgba(128,192,0,0.1), rgba(128,192,0,0.05));
	font-size: 14px;
}
#news .briefly>* {
	margin: 0;
	padding: 0;
	flex: 1 0 0;
}
#news .briefly>h3 {
	margin: 0 0 8px;
	padding: 0 0 4px;
	border-bottom: dotted 2px;
	display: block;
	flex: 1 0 100%;
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
	text-align: center;
	color: #80c000;
}
#news .briefly>ul {
	
	list-style: none;
}
#news .briefly>ul>li::before {
	width: 24px;
	display: inline-block;
	text-align: center;
}
#news .briefly>ul>li.date::before {
	content: '📅';
}
#news .briefly>ul>li.hour::before {
	content: '🕝';
}
#news .briefly>ul>li.place::before {
	content: '📍';
}
#news .briefly>ul>li.transports::before {
	content: '🚇';
}
#news .briefly>ul>li.persons::before {
	content: '👤';
}

/*	============== */
/*	PAGES > PHOTOS */
/*	-------------- */

/*	---------------------- */
/*	PAGES > Photos > Types */
/*	---------------------- */

#photos .types {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
#photos .types>a,
#photos .types>span {
	padding: 8px 12px;
	border: solid 1px rgba(0,0,0,0.2);
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	position: relative;
	font-size: 15px;
	user-select: none;
}
#photos .types>a:hover {
	text-decoration: none;
}
#photos .types>a.selected,
#photos .types>span {
	color: rgba(0,0,0,0.5);
	pointer-events: none;
}
#photos .types>span::after {
	content: '';
	width: 100%;
	border-top: solid 1px #ffffff;
	position: absolute;
	top: 100%;
	left: 0;
}

/*	---------------------- */
/*	PAGES > Photos > Album */
/*	---------------------- */

#photos .album {
	margin: 0 -20px 16px;
	padding: 4px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 6px;
}

/*	------------------------ */
/*	PAGES > Photos > Filtres */
/*	------------------------ */

#photos .filters {
	margin: 0 0 4px;
	position: sticky;
	top: 32px;
	z-index: 1;
}
#photos .filters>ul {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 4px;
	overflow: auto;
	scrollbar-width: thin;
	display: none;
	gap: 4px;
	list-style: none;
	font-size: 14px;
	white-space: pre;
}
#photos .filters>ul.selected {
	display: flex;
}
#photos .filters>ul::after {
	content: '';
	width: 100%;
	height: 100%;
	padding: 0 0 32px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(0,0,0,0), rgba(255,255,255,0.9) 32px, #ffffff);
}
#photos .filters>ul>li {
	display: flex;
}
#photos .filters>ul>li>a {
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	padding: 2px 8px;
}
#photos .filters>ul>li>a:hover,
#photos .filters>ul>li.selected>a {
	background: var(--bleu);
	border: solid 1px rgba(0,0,0,0);
	color: #ffffff;
	text-decoration: none;
}

/*	----------------------- */
/*	PAGES > Photos > Images */
/*	----------------------- */

.images {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}
.images>a {
	width: 160px;
	height: 160px;
	border-radius: 3px;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.images>a>img {
	display: block;
	transition: 0.3s;
}
.images>a:hover>img {
	transform: scale(1.1);
}
.images>a>span {
	width: fit-content;
	margin: 0 auto;
	padding: 2px 8px;
	border-radius: 3px 3px 0 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -32px;
	background: rgba(0,0,0,0.7);
	font-size: 11px;
	text-align: center;
	color: #ffffff;
	transition: 0.3s;
	user-select: none;
	pointer-events: none;
}
.images>a:hover>span {
	bottom: 0;
}
.images img {
	display: block;
}
@media (max-width: 400px) {
	.images>a>span {
		bottom: 0;
	}
}

/*	---------------------- */
/*	PAGES > Photos > Pages */
/*	---------------------- */

#photos .pages {
	max-width: 100%;
	margin: 0;
	padding: 8px 0;
	overflow: auto;
	display: flex;
	justify-content: center;
	gap: 4px;
	list-style: none;
	font-size: 15px;
}
#photos .pages>li>* {
	padding: 6px 10px;
	border: solid 1px;
	border-radius: 3px;
	display: block;
	user-select: none;
}
#photos .pages>li>a:hover {
	text-decoration: none;
}
@media (max-width: 400px) {
	#photos .pages {
		font-size: 12px;
	}
	#photos .pages>li>* {
		padding: 4px 6px;
	}
}

/*	================= */
/*	PAGES > Bienvenue */
/*	----------------- */

#welcome .intro {
	max-width: none;
}
#welcome .intro>div {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
#welcome .intro>div:nth-child(even) {
	flex-direction: row-reverse;
}
#welcome .intro>div>div {
	min-width: 288px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1 0 0;
}
#welcome .intro img {
	max-width: 100%;
	max-height: 320px;
	margin: 16px 0;
	border-radius: 6px;
}
#welcome .intro p {
	margin: 0 0 16px;
	font-family: serif;
	font-size: 24px;
	text-align: justify;
	hyphens: auto;
}
#welcome .menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	list-style: none;
}
#welcome .menu>li {
	display: flex;
}
#welcome .menu>li>a {
	box-sizing: border-box;
	width: 128px;
	padding: 32px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bleu);
	text-align: center;
	color: #ffffff;
}
#welcome .menu>li>a:hover {
	background: #0080ff;
	text-decoration: none;
}

/*	==================================== */
/*	PAGES > ÉLECTION PRÉSIDENTIELLE 2027 */
/*	------------------------------------ */

#presidentielles_2027 {
	padding: 32px;
	border: solid 2px #ffffff;
	position: relative;
	box-shadow: 0 0 0 2px #e1000f, inset 0 0 0 2px #000091;
	font-family: serif;
	font-size: 22px;
}
#presidentielles_2027>h2:first-child {
	width: 448px;
	margin: -20px -224px;
	position: absolute;
	top: 0;
	left: 50%;
	background: linear-gradient(#ffffff, #f8f8f8) fixed;
}
#presidentielles_2027 p {
	margin: 0 0 8px;
	text-align: justify;
	hyphens: auto;
}
#presidentielles_2027>p {
	margin: 16px 0;
	text-align: center;
}

@media (max-width: 400px) {
	#presidentielles_2027 {
		padding: 24px;
		font-size: 18px;
	}
	#presidentielles_2027>h2:first-child {
		width: 304px;
		margin: -13px -152px;
		font-size: 20px;
	}
}

/*	================= */
/*	PAGES > POLITIQUE */
/*	----------------- */

.politics p {
	font-size: 20px;
}
.politics img {
	max-width: 100%;
	margin: 0 auto;
	border-radius: 6px;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
}
.politics .cover {
	text-align: center;
}

/*	============== */
/*	PAGES > Livres */
/*	-------------- */

/*	------------------------- */
/*	PAGES > Livres > Derniers */
/*	------------------------- */

#books>ul.last_books {
	margin: 16px 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
}
#books>ul.last_books>li {
	display: flex;
	flex-direction: column;
	flex: 1 0 0;
	align-items: center;
	gap: 4px;
	text-align: center;
}
#books>ul.last_books>li>a {
	max-width: 200px;
	display: block;
}
#books>ul.last_books>li>img {
	max-width: 100%;
	margin: 0 auto;
	border-radius: 3px;
	display: block;
	order: -1;
}

/*	----------------------------- */
/*	PAGES > Livres > Informations */
/*	----------------------------- */

#books>.info_books {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
#books>.info_books>div {
	padding: 16px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 6px;
	min-width: 288px;
	display: flex;
	flex-direction: column;
	flex: 1 0 0;
	gap: 8px;
}
#books>.info_books>div::after {
	content: '';
	flex: 1;
}
#books>.info_books>div>h2 {
	margin: 0;
}
#books>.info_books>div>p {
	margin: 0;
}
#books>.info_books>div h3 {
	margin: 0;
}
#books>.info_books>div>div:last-child {
	order: 1;
}
#books .cover {
	display: flex;
	justify-content: center;
	gap: 8px;
}
#books .cover>a {
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.1);
}
#books .cover>a>img {
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 13px;
}
#books ul.pages {
	max-width: 100%;
	margin: 0;
	padding: 8px;
	overflow: auto;
	display: flex;
	gap: 8px;
	list-style: none;
}
#books ul.pages>li>a {
	border-radius: 3px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.1);
}
#books ul.pages>li>a>img {
	width: 128px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 13px;
}

/*	================ */
/*	PAGES > À PROPOS */
/*	---------------- */

#a_propos {
	max-width: none;
	margin: 0 -16px;
	padding: 32px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 32px;
	background: var(--rouge);
	background: linear-gradient(var(--rouge), #c00000);
}
#a_propos::before {
	content: '';
	width: 100%;
	height: 16px;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));
}
#a_propos>h2 {
	margin: 0;
	flex: 1 0 100%;
	color: #ffffff;
}
#a_propos>div {
	box-sizing: border-box;
	min-width: 320px;
	flex: 1 0 0;
}

/*	----------------------------- */
/*	PAGES > À PROPOS > BIOGRAPHIE */
/*	----------------------------- */

#biographie {
	max-width: 480px;
	font-size: 20px;
	text-align: justify;
	hyphens: auto;
	color: #ffffff;
}
#biographie>a {
	width: fit-content;
	margin: 0 auto;
	display: block;
}
#biographie>a>img {
	max-width: 192px;
	margin: 0 auto;
	border-radius: 4px;
	display: block;
}

/*	--------------------- */
/*	PAGES > À PROPOS > CV */
/*	--------------------- */

#cv {
	max-width: 640px;
	padding: 32px;
	border-radius: 6px;
	background: #ffffff;
	font-size: 13px;
}
#cv>h3 {
	margin: -8px 0 24px;
	padding: 0 0 16px;
	border-bottom: dotted 1px #000000;
	font-size: 20px;
	text-align: center;
	color: var(--bleu);
}

/*	------------------------------ */
/*	PAGES > À PROPOS > CV > Entête */
/*	------------------------------ */

#cv>.head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
#cv>.head>dl,
#cv>.head>ul {
	margin: 0;
}
#cv>.head>dl>dt {
	font-weight: bold;
}
#cv>.head>dl>dt::after {
	content: ' :';
}
#cv>.head>dl>dd {
	margin: 0 0 8px 16px;
}
#cv>.head>ul {
	padding: 0 0 0 16px;
	flex: 1 0 240px;
}

/*	----------------------------- */
/*	PAGES > À PROPOS > CV > Dates */
/*	----------------------------- */

#cv>.dates {
	columns: 240px;
	gap: 16px;
}
#cv>.dates>div {
	overflow: hidden;
}
#cv>.dates h4 {
	margin: 16px 0 8px;
	border-bottom: solid 1px;
	font-size: 13px;
	color: var(--bleu);
}
#cv>.dates ul {
	margin: 0;
	padding: 0 0 0 16px;
}

/*	================== */
/*	PAGES > Livre d'or */
/*	------------------ */

#guestbook>div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#guestbook>div>* {
	flex: 1 0 0;
}

@media (min-width: 640px) {
	#guestbook>div {
		flex-direction: row-reverse;
		align-items: flex-start;
	}
}

/*	------------------------------- */
/*	PAGES > Livre d'or > Formulaire */
/*	------------------------------- */

#guestbook .sending,
#guestbook .sent {
	margin: 0;
	padding: 40px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 24px;
}
#guestbook .sending::before,
#guestbook .sent::before {
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
#guestbook .sending::before {
	content: '⌛️';
	border: solid 1px;
	font-size: 16px;
}
#guestbook .sent::before {
	content: '✔';
	background: #80c000;
	font-size: 28px;
	color: #ffffff;
}

@media (min-width: 640px) {
	#guestbook>div>form {
		position: sticky;
		top: 40px;
	}
}

/*	--------------------------------------------- */
/*	PAGES > Livre d'or > Conditions d'utilisation */
/*	--------------------------------------------- */

#guestbook .tos {
	max-height: 96px;
	padding: 8px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	overflow: auto;
	scrollbar-width: thin;
	display: block;
}
#guestbook .tos>h3 {
	margin: 0;
	padding: 0 0 8px;
	border-bottom: dotted 1px;
	font-size: 15px;
	color: #000000;
}
#guestbook .tos>h4 {
	margin: 8px 0;
	font-size: 12px;
	text-transform: uppercase;
}
#guestbook .tos>p {
	margin: 8px 0;
	font-size: 12px;
}

/*	-------------------------------- */
/*	PAGES > Livre d'or > Témoignages */
/*	-------------------------------- */

#testimonies {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#testimonies>div {
	padding: 8px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 6px;
	position: relative;
}
#testimonies>div>h3 {
	margin: 0 0 8px;
	padding: 0 104px 4px 0;
	border-bottom: dotted 1px rgba(0,0,0,0.8);
	font-size: 18px;
	text-align: left;
	color: rgba(0,0,0,0.8);
}
#testimonies>div>time {
	margin: -24px 8px 0;
	position: absolute;
	right: 0;
	font-size: 12px;
	color: rgba(0,0,0,0.5);
	text-align: right;
}
#testimonies>div>div>p {
	margin: 8px 0 0;
}


/* ======================================== *\
	PIED DE PAGE
\* ======================================== */

footer {
	padding: 32px;
	background: #282828;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	font-size: 15px;
	color: #e0e0e0;
	order: 1;
}
footer a {
	color: #50c0ff;
}
footer a:hover {
	color: #80e0ff;
	text-decoration: none;
}
footer ul {
	margin: 0 0 8px;
	padding: 0 0 0 16px;
}
footer>div {
	max-width: 192px;
	flex: 1 0 0;
	gap: 8px;
	columns: 160px;
}
footer>div.sitemap {
	max-width: 384px;
	columns: 160px;
	gap: 8px;
}
footer>div>strong {
	margin: 0 0 4px;
	padding: 0 0 4px;
	border-bottom: dotted 1px;
	display: block;
}
footer>p {
	width: 100%;
	text-align: center;
}