html {
	margin: 0;
	padding: 0 8px;
	background: #eee;
	font-family: sans-serif;
}
body {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
	background: #fff;
}

a {
	color: #607080;
	transition: 0.3s;
}
a:hover {
	color: #203040;
}

header {
	padding: 16px 0;
}
header>h1 {
	box-sizing: border-box;
	min-height: 240px;
	margin: 0;
	padding: 224px 0 0;
	position: relative;
	text-align: center;
	font-size: 0;
	color: rgba(0,0,0,0);
	user-select: none;
}
header>h1::before {
	content: '';
	width: 192px;
	height: 192px;
	margin: -96px;
	position: absolute;
	top: 112px;
	left: 50%;
	background: url('images/info.cratie.svg');
}

section>h3 {
	margin: 8px 0;
	padding: 0 8px;
	border-bottom: solid 1px #ff1020;
}

p.bienvenue {
	font-size: 20px;
}
p.bienvenue>strong {
	padding: 1px 8px;
	border-radius: 3px;
	display: inline-block;
	background: #ff1020;
	color: #fff;
}

.fiches {
	margin: 0 -12px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.fiches>h2 {
	width: 100%;
	margin: 4px;
}
.fiches>div {
	box-sizing: border-box;
	width: 160px;
	margin: 4px 4px 12px;
	padding: 4px;
	border-radius: 3px;
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.1);
}
.fiches>div:hover {
	border-radius: 3px 3px 0 0;
	z-index: 2;
}
.fiches>div>h3 {
	box-sizing: border-box;
	margin: -4px;
	padding: 152px 8px 8px;
	border-radius: 3px;
	overflow: hidden;
	position: relative;
	z-index: 1;
	flex: 1;
	background: linear-gradient(#bfc1c7, #fff);
	text-align: center;
}
.fiches>div>h3::before {
	content: '';
	width: 128px;
	height: 128px;
	position: absolute;
	top: 8px;
	left: 8px;
	background: center / contain no-repeat;
	transition: 0.3s;
}
.fiches>div>h3:hover::before {
	transform: scale(1.1);
}
.fiches>div.acteur>h3::before {
	margin: -12px -16px;
	padding: 0 20px;
	background-size: cover;
}
.fiches>div.ADNM>h3::before				{ background-image: url("medias/ADNM.png"); }
.fiches>div.ConseilScientifiqueIndépendant>h3::before	{ background-image: url("medias/Conseil scientifique indépendant.svg"); }
.fiches>div.FranceSoir>h3::before			{ background-image: url("medias/France Soir.png"); }
.fiches>div.GeopolitiqueProfonde>h3::before		{ background-image: url("medias/GPTV.svg"); }
.fiches>div.InvestigAction>h3::before			{ background-image: url("medias/Investig'action.svg"); }
.fiches>div.LeCanardRefractaire>h3::before		{ background-image: url("medias/Le Canard Réfractaire.png"); }
.fiches>div.LeCercleAristote>h3::before			{ background-image: url("medias/Le Cercle Aristote.png"); }
.fiches>div.LeCourrierDesStratèges>h3::before		{ background-image: url("medias/Le courrier des stratèges.jpg"); }
.fiches>div.LeFilDActu>h3::before			{ background-image: url("medias/Le fil d'actu.svg"); }
.fiches>div.LeFrontMediatique>h3::before		{ background-image: url("medias/Le Front Médiatique.svg"); }
.fiches>div.LeLibrePenseur>h3::before			{ background-image: url("medias/LLP.svg"); }
.fiches>div.LeMédiaEn442>h3::before			{ background-image: url("medias/Le média en 4-4-2.png"); }
.fiches>div.LeMédiaTV>h3::before			{ background-image: url("medias/Le Média.svg"); }
.fiches>div.LeMondeModerne>h3::before			{ background-image: url("medias/Le Monde Moderne.svg"); }
.fiches>div.LesCrises>h3::before			{ background-image: url("medias/Les crises.png"); }
.fiches>div.Nexus>h3::before				{ background-image: url("medias/Nexus.svg"); }
.fiches>div.RadioCourtoisie>h3::before			{ background-image: url("medias/Radio Courtoisie.svg"); }
.fiches>div.Strategika>h3::before			{ background-image: url("medias/Strategika.svg"); }
.fiches>div.Stratpol>h3::before				{ background-image: url("medias/Stratpol.png"); }
.fiches>div.SudRadio>h3::before				{ background-image: url("medias/Sud Radio.svg"); }
.fiches>div.Thinkerview>h3::before			{ background-image: url("medias/Thinkerview.png"); }
.fiches>div.Tocsin>h3::before				{ background-image: url("medias/Tocsin.svg"); }
.fiches>div.TribuneLibre>h3::before			{ background-image: url("medias/Tribune Libre.svg"); }
.fiches>div.TVLibertés>h3::before			{ background-image: url("medias/TV Libertés.png"); }

.fiches>div.AlexandreJuvingBrunet>h3::before		{ background-image: url("acteurs/Alexandre Juving-Brunet.webp"); }
.fiches>div.ÉtienneChouard>h3::before			{ background-image: url("acteurs/Étienne Chouard.webp"); }
.fiches>div.FrancoisAsselineau>h3::before		{ background-image: url("acteurs/François Asselineau.webp"); }
.fiches>div.IdrissAberkane>h3::before			{ background-image: url("acteurs/Idriss Aberkane.webp"); }
.fiches>div.JeanDominiqueMichel>h3::before		{ background-image: url("acteurs/Jean-Dominique Michel.webp"); }
.fiches>div.JeanJacquesCrevecoeur>h3::before		{ background-image: url("acteurs/Jean-Jacques Crèvecœur.webp"); }
.fiches>div.JusteMilieu>h3::before			{ background-image: url("acteurs/Juste Milieu.webp"); }
.fiches>div.KarlZero>h3::before				{ background-image: url("acteurs/Karl Zero.webp"); }
.fiches>div.LouisFouché>h3::before			{ background-image: url("acteurs/Louis Fouché.webp"); }
.fiches>div.MarionSigaut>h3::before			{ background-image: url("acteurs/Marion Sigaut.webp"); }
.fiches>div.NicolasBouvier>h3::before			{ background-image: url("acteurs/Nicolas Bouvier.webp"); }
.fiches>div.PierreChaillot>h3::before			{ background-image: url("acteurs/Pierre Chaillot.webp"); }
.fiches>div.TatianaVentose>h3::before			{ background-image: url("acteurs/Tatiana Ventose.webp"); }


.fiches>div>h3>a {
	text-decoration: none;
}
.fiches>div>h3>a::before {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.fiches>div>dl {
	box-sizing: border-box;
	width: 100%;
	margin: -8px 0 0;
	padding: 12px 8px 4px;
	border-radius: 0 0 6px 6px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.75);
	backdrop-filter: blur(4px);
	opacity: 0;
	font-size: 13px;
	color: #fff;
	pointer-events: none;
	transition: 0.3s;
}
.fiches>div:hover>dl {
	top: 100%;
	opacity: 1;
	pointer-events: auto;
}
.fiches>div>dl>dt {
	display: none;
}
.fiches>div>dl>dd {
	margin: 0;
	padding: 4px 0 4px 24px;
	position: relative;
}
.fiches>div>dl>dd::before {
	content: '';
	width: 16px;
	height: 16px;
	border-radius: 2px;
	margin: -8px;
	position: absolute;
	top: 50%;
	left: 12px;
	background: url('images/social_white.svg');
}
.fiches .site::before		{ background-position:	-16px	0 }
.fiches .blog::before		{ background-position:	-32px	0 }
.fiches .wikipedia::before	{ background-position:	-48px	0 }
.fiches .maps::before		{ background-position:	-64px	0 }
.fiches .facebook::before	{ background-position:	0	-16px }
.fiches .twitter::before	{ background-position:	-16px	-16px }
.fiches .instagram::before	{ background-position:	-32px	-16px }
.fiches .vkontakte::before	{ background-position:	-48px	-16px }
.fiches .linkedin::before	{ background-position:	-64px	-16px }
.fiches .youtube::before	{ background-position:	0	-32px }
.fiches .dailymotion::before	{ background-position:	-16px	-32px }
.fiches .odysee::before		{ background-position:	-32px	-32px }
.fiches .crowdbunker::before	{ background-position:	-48px	-32px }
.fiches .rumble::before		{ background-position:	-64px	-32px }
.fiches .telegram::before	{ background-position:	0	-48px }
.fiches .discord::before	{ background-position:	-16px	-48px }

.fiches>div>dl>dd>a {
	white-space: pre;
	color: rgba(255,255,255,0.8);
	text-decoration: none;
}
.fiches>div>dl>dd>a:hover {
	color: #fff;
}
#Vrac ul {
	margin: 0;
	padding: 0 0 0 16px;
	columns: 192px;
}
.add_file {
	margin: 0 0 8px;
	padding: 4px 8px;
	border-radius: 3px;
	display: inline-block;
	background: #404040;
	box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(64,64,64,0.75);
	color: #fff;
	text-decoration: none;
}
.add_file:hover {
	background: #0080ff;
	box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0,128,255,0.75);
	color: #fff;
}
.add_file::before {
	content: '[+] ';
	font-weight: bold;
}
#APropos {
	padding: 4px 26px;
	margin: 16px 0;
	border-radius: 3px;
	background: linear-gradient(rgba(85, 81, 87, 0.8), rgba(36, 72, 128, 0.94)), #4d4b58 url("images/reinformons-nous.fr.avif") 50%/cover;
	color: #fff;
}
#APropos a {
	font-weight: bold;
	color: rgba(255,255,255,0.9);
}
#APropos a:hover {
	color: #fff;
}
#Aider>.carte {
	margin: 0 auto;
	display: block;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.05);
}
.annonce {
	margin: 16px 0;
	padding: 16px 16px 16px 96px;
	border-radius: 6px;
	position: relative;
	background: #ff1020;
	font-size: 20px;
	color: #fff;
}
.annonce::before {
	content: '?';
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	margin: -32px;
	border: solid 3px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 48px;
	font-size: 64px;
	text-align: center;
	line-height: 62px;
	font-weight: bold;
	font-family: serif;
}
.grade {
	background: #808080;
	border-radius: 3px;
	display: inline-block;
	color: #fff;
	text-decoration: none;
	padding: 1px 4px;
	font-size: 13px;
}

.grade.A	{ background: #198754; }
.grade.B	{ background: #79b752; }
.grade.C	{ background: #ffc107; }
.grade.D	{ background: #d66f2c; }
.grade.E	{ background: #dc3545; }

footer {
	margin: 16px -32px 0;
	padding: 24px 16px;
	background: #303030;
	color: #fff;
}
footer a {
	border-bottom: dotted 1px;
	color: rgba(255,255,255,0.9);
	text-decoration: none;
}
footer a:hover {
	color: #fff;
}
footer>div>h2,
footer>div>h3 {
	margin: 0 0 8px;
}
footer>div {
	columns: 320px;
}
footer>div>ul {
	padding: 0 0 0 16px;
}
footer>p {
	text-align: center;
}

#ui {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 32px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.7);
	backdrop-filter: blur(4px);
}
#ui.opened {
	display: flex;
	cursor: zoom-out;
}
#ui_file {
	max-width: 512px;
	max-height: 90vh;
	max-height: calc(100vh - 64px);
	overflow: auto;
	padding: 4px 8px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 4px rgba(0,0,0,0.1);
	cursor: auto;
}
#ui_file>fieldset {
	margin: 0 0 4px;
	padding: 4px 8px 8px;
	border: dotted 1px #0080ff;
	border-radius: 3px;
}
#ui_file>fieldset>legend {
	font-size: 12px;
	color: #0080ff;
	user-select: none;
}
#ui_file h2 {
	margin: 12px 8px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	color: #444;
}
#ui_file textarea,
#ui_file input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	margin: 2px 0;
	padding: 4px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 3px;
	font-family: sans-serif;
	font-size: 16px;
	color: #444;
}
#ui_file textarea {
	resize: vertical;
}
#ui_file select {
	margin: 2px 0;
	padding: 4px 8px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 3px;
	background: #fff;
	font-size: 16px;
	color: #444;
}
#ui_file textarea:hover,
#ui_file input[type="text"]:hover,
#ui_file select:hover {
	border: solid 1px #08f;
	box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0,128,255,0.25);
}

#file_links>ul {
	margin: 0;
	padding: 0;
}
#file_links>ul>li {
	display: flex;
	align-items: center;
	position: relative;
}
#file_links label {
	width: 16px;
	height: 16px;
	margin: 0 8px 0 0;
	overflow: hidden;
	background: url('images/social_black.svg');
	font-size: 0;
	text-indent: -999px;
	opacity: 0.4;
}
#file_links label::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
#file_links li:hover>label {
	opacity: 0.8;
}
#file_links .links input {
	flex: 1;
}
#file_links input {
	position: relative;
}
#file_links .site		{ background-position:	-16px	0 }
#file_links .blog		{ background-position:	-32px	0 }
#file_links .wikipedia		{ background-position:	-48px	0 }
#file_links .maps		{ background-position:	-64px	0 }
#file_links .facebook		{ background-position:	0	-16px }
#file_links .twitter		{ background-position:	-16px	-16px }
#file_links .instagram		{ background-position:	-32px	-16px }
#file_links .vkontakte		{ background-position:	-48px	-16px }
#file_links .linkedin		{ background-position:	-64px	-16px }
#file_links .youtube		{ background-position:	0	-32px }
#file_links .dailymotion	{ background-position:	-16px	-32px }
#file_links .odysee		{ background-position:	-32px	-32px }
#file_links .crowdbunker	{ background-position:	-48px	-32px }
#file_links .rumble		{ background-position:	-64px	-32px }
#file_links .telegram		{ background-position:	0	-48px }
#file_links .discord		{ background-position:	-16px	-48px }
#ui_file input[type="submit"] {
	width: 100%;
	padding: 10px;
	border: solid 1px #fff;
	border-radius: 6px;
	background: #404040;
	color: #fff;
	font-size: 16px;
	box-shadow: 0 0 0 1px rgba(64,64,64,0.2);
	cursor: pointer;
}
#ui_file input[type="submit"]:hover {
	background: #0080ff;
	box-shadow: 0 0 0 1px rgba(0,128,255,0.2);
}


/* ======================================== *\
	RESPONSIVE
\* ======================================== */

@media
screen and (min-width: 800px) {
	html {
		padding: 0 16px;
	}
	body {
		padding: 0 32px;
	}
	.fiches {
		margin: 0 -4px;
	}
	.fiches>div {
		width: 296px;
	}
	.fiches>div>h3::before {
		width: 256px;
		top: 12px;
		left: 16px;
	}
	.fiches>div>h3>a::before {
		width: 100%;
		height: 100%;
	}
	#Aider {
		padding-right: 256px;
		position: relative;
	}
	#Aider>.carte {
		position: absolute;
		top: 50%;
		right: 0;
		margin: -80px 0;
		height: 160px;
	}
}