/*********************************
*											*
*				CLEM.SOCIAL				*
*			====SCREEN====				*
*											*
*********************************/



:root {
	color-scheme:light dark;
}

/*********
* Titres *
*********/
h1 {
	display:none;
}

/********************
* Balises générales *
********************/

a, a:hover, a:active, a:visited {
	background-color:transparent;
	color:var(--texte-lien);
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}

.hs { display:none; }

sup { font-size:0.6em;}

/************************
* Conteneurs principaux *
************************/

body {
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:0;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	font-family:Inter, sans-serif;
	font-size:1em;
	min-height:100vh;
}

header {
	order:1;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:0;
	padding:0;
	background-color:var(--fond-entete);
	color:var(--texte-entete);
	width:100%;
}

header picture {
	display:block;
	margin:0 auto;
}

header picture img {
	display:block;
	margin:1rem auto;
	width:auto;
	height:200px;
}

main {
	order:2;
	flex-grow:2;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:stretch;
	align-items:stretch;
	align-content:stretch;
	height:100%;
	background-color:powderblue
}

footer {
	order:3;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:0;
	padding:0.2em;
	background-color:var(--fond-entete);
	color:var(--texte-entete);
	text-align:center;
	width:100%;
}
footer p {
	margin:0.4rem auto;
}

/*********************
* Grille des RESEAUX *
*********************/

#reseaux {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:100%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:stretch;
	gap:0;
	margin:0 auto auto;
	padding:0;
	list-style-type:none;
	width:100%;
	background-color:pink;
}

#reseaux li {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:25%;
	display:block;
	margin:0;
	padding:2rem;
	font-size:2rem;
	text-align:center;
	line-height:1.6rem;
	border:none;
}

#reseaux li picture {
	display:inline-block;
	margin:auto;
	padding:1rem;
	background-color:var(--fond-contraste);
	border-radius:1rem;
	transition:0.5s background-color ease-in;
}
#reseaux li a:hover picture {
	background-color:var(--fond-nuance);
	transition:0.5s background-color ease-out;
}

#reseaux li picture img {
	width:64px; height:64px;
}

#reseaux li p {
	display:block;
	margin:1.4rem auto 0;
	font-weight:600;
}

#reseaux li p small {
	font-size:1rem;
}

.bluesky {
	background-color:var(--bluesky);
	color:var(--texte-nuance);
}

.mastodon {
	background-color:var(--mastodon);
	color:var(--texte-nuance);
}

.nostr {
	background-color:var(--nostr);
	color:var(--texte-nuance);
}

.x {
	background-color:var(--x);
	color:var(--texte-nuance);
}


.pixelfed {
	background-color:var(--pixelfed);
	color:var(--texte-nuance);
}

.instagram {
	background-color:var(--instagram);
	color:var(--texte-nuance);
}

.twitch {
	background-color:var(--twitch);
	color:var(--texte-nuance);
}

.youtube {
	background-color:var(--youtube);
	color:var(--texte-nuance);
}