/***************************
*									*
*			MEUH		3			*
*									*
*		Fichier de style		*
*			ÉCRAN STD			*
*									*
***************************/


/******************
*		GÉNÉRAL		*
*******************/
/* Définitions générales applicables sur
n'importe quelle boîte à la demande */

.npa {
	display:none;
}

strong, b { font-weight:bold; font-style:normal; }
em, i { font-weight:normal; font-style:italic; }

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

.rien {
	color:var(--texte-fade);
	font-size:2em;
	text-align:center;
}


/***************************
*		STRUCTURE DE PAGE		*
****************************/
/* Définitions des conteneurs principaux formant la page */

body {
	box-sizing:border-box;
	position:relative;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	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:'Parisine', sans-serif;
	width:100%;
	min-height:100vh;
}

header {
	order:1;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:stretch;
	align-content:center;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
}

nav {

}

main {
	order:2;
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:stretch;
	align-content:stretch;
	margin:0;
	padding:0;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	min-height:100%;
}

footer {
	order:3;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	align-self:flex-end;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	align-items:flex-start;
	align-content:stretch;
	margin:0;
	background-color:var(--fond-pied-de-page);
	color:var(--texte-pied-de-page);
	width:100vw;
	overflow:hidden;
}

footer img {
	display:inline-block;
}

/***************************
*		EN-TÊTE DE PAGE		*
****************************/
/* Structure :

	[≡ INTITULÉ ] [             ] [MATE]

 */

#titre {
	order:2;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	z-index:1;
	display:block;
	margin:1rem 1rem 1rem 0;
	padding:1rem 2rem 1rem 1rem;
	background-color:var(--fond-en-tete);
	color:var(--texte-en-tete);
	line-height:1;
	border-top-right-radius:0.6rem;
	border-bottom-right-radius:0.6rem;
}

#titre h1 {
	margin:0;
	padding:0;
	font-weight:bold;
	font-size:2.4rem;
	vertical-align:middle;
	width:fit-content();
}

#menu {
	order:1;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:1rem 0 1rem 1rem;
	padding:0 1rem 1rem 1rem;
	font-size:3.8rem;
	background-color:var(--fond-en-tete);
	color:var(--texte-en-tete);
	line-height:1;
	border-top-left-radius:0.6rem;
	border-bottom-left-radius:0.6rem;
}
#menu p {
	margin:0;
	padding:0;
}

#menu a, #menu a:hover {
	text-decoration:none;
	background-color:var(--fond-transparent);
	color:var(--texte-lien-contraste);
}

#espace {
	order:3;
	flex-grow:5;
	flex-shrink:2;
	flex-basis:auto;
	margin:1rem 0;
	background-color:var(--fond-transparent);
	border:1px solid #000;
	border-radius:0.6rem;
}

#temps {
	order:4;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:1rem;
	padding:1rem;
	background-color:var(--fond-mate);
	color:var(--texte-mate);
	font-size:1.6em;
	font-weight:bold;
	text-align:center;
	border-radius:0.6rem;
}
#temps > time {
	vertical-align:middle;
}


/************************
*		PIED DE PAGE		*
*************************/

footer p {
	margin:0.4em 0;
	padding:0 0.4em;
}
footer a, footer a:active, footer a:visited {
	position:relative;
	z-index:30;
	background-color:var(--fond-transparent);
	color:var(--texte-lien-contraste);
	text-decoration:none;
}
footer a:hover {
	background-color:var(--fond-transparent);
	color:var(--texte-lien-contraste);
	text-decoration:underline;
}

/* Partie 1 */
#informations {
	order:2;
	flex:2 0 auto;
	display:block;
	margin:1em 0;
	padding-left:2em;
	border-left:1px solid var(--bord-secondaire);
}
#informations p {
	margin:0.6em 0;
	vertical-align:middle;
}
#informations img {
	margin-right:3px;
	width:auto;
	height:16px;
	vertical-align:middle;
}

/* Partie 2*/
#credits {
	order:1;
	flex:0 0 auto;
	display:block;
	margin:1em 2em;
	text-align:center;
	font-weight:bold;
}
#credits picture {
	display:block;
	margin:0 auto;
}
#credits img {
	width:148px;
	height:auto;
}


#credits ul {
	display:block;
	margin:1em auto;
	padding:0;
	list-style-type:none;
}
#credits li {
	display:inline-block;
	margin:1em 0;
	padding:0 1em 0 1.4em;
	border-left:1px solid var(--bord-secondaire);
}
#credits li:first-child {
	border-left:none;
}

/* Partie 3 */
#art {
	order:3;
	flex:0 1 auto;
	align-self:flex-end;
	position:relative; 
	display:block;
	padding:0;
	font-family:DroMono, monospace;
	font-size:0.8em;
	white-space:nowrap
	overflow:hidden;
}
#art pre {
	display:block;
	float:right;
	clear:right;
}


/******************************
*		NAVIGATEURS LOCAUX		*
******************************/

nav.navigateur > ul {
	position:relative;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	align-content:stretch;
	list-style-type:none;
	margin:0 auto;
	padding:0;
	border:1px solid var(--bord-secondaire);
	border-radius:0.8rem;
	width:max-content;
}
nav.navigateur > ul > li {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	margin:0 1rem;
	padding:0.4rem 0.8rem;
	border-radius:0.8rem;
	/* Couleurs à définir dans chaque bloc */
	transition:background-color 0.5s linear;
}
nav.navigateur > ul > li:first-child {
	margin-left:0;
}
nav.navigateur > ul > li:last-child {
	margin-right:0;
}
nav.navigateur > ul > li:hover {
	background-color:var(--fond-selection);
	color:var(--texte-selection);
	transition:background-color 0.5s linear;
}


/*********************
*		SÉLECTEURS		*
*********************/

.selecteur {
	display:block;
	margin:0;
	padding:0;
	background-color:var(--fond-principal);
	color:var(--texte-principal);
	border:1px solid var(--bord-secondaire);
	border-radius:0.8rem;
}
.selecteur form {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:stretch;
	align-content:flex-start;
	width:100%;
}
.selecteur div {
	flex-grow:2;
	flex-shrink:1;
	flex-basis:auto;
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	margin:0;
	padding:0.8rem;
	border-left:1px solid var(--bord-secondaire);
}
.selecteur div:first-child {
	flex-grow:0;
	flex-shrink:0;
	border-left:none;
}
.selecteur div:last-child {
	flex-grow:0;
	flex-shrink:0;
}

.icbox label {
	display:inline-block;
	margin:0 0.4rem;
}
.icbox label img {
	width:auto;
	height:24px;
}

.icbox input[type=checkbox] {
	display:none;
}
.icbox input[type=checkbox]:checked + label {
	opacity:1;
}
.icbox input[type=checkbox]:not(:checked) + label {
	opacity:0.2;
}


/***************************
*		MENU DES FAVORIS		*
****************************/

.modal {
	z-index:100;
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:var(--fond-modal);
	color:var(--texte-modal);
	border:none;
}

#favoris:not(:target) {
	display:none;
}
#favoris:target {
	display:inherit;
}

#favoris {
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
}

#favoris > header {
	order:1;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	display:block;
	margin:0;
	padding:0 1rem 1rem 1rem;
	background-color:var(--fond-modal-interieur);
	color:var(--texte-modal);
	font-size:3.8rem;
	line-height:1;
	border-top-left-radius:0.6rem;
	border-top-right-radius:0.6rem;
}

#favoris > header > p {
	margin:0;
	padding:0;
}

#favoris > header a, #favoris > header a:hover { text-decoration:none; }

#favoris > section {
	order:2;
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	background-color:var(--fond-modal-interieur);
	color:var(--texte-modal);
	border-top-right-radius:0.6rem;
	border-bottom-left-radius:0.6rem;
	border-bottom-right-radius:0.6rem;
	box-shadow:0.4rem 0.4rem 0.4rem rgba(0,0,0,.5);
	max-width:50vw;
	max-height:75vh;
	overflow:auto;
}

#favoris > section ul {
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	margin:1rem;
	padding:0;
}

#favoris > section ul li {
	flex:0 0 auto;
	list-style-type:none;
	margin:0.2rem;
	padding:0.2rem;
	background-color:#f5f5f5;
	color:#000;
	border-radius:0.4em;
}