/*ordre PDTA :
positionnement (position, float, top, left, flex, ...)
dimensions (display, width, height, padding, ...)
propriétés de texte (color, font, text-decoration, ...),
bordures, fonds et autres (border, background, border-radius, box-shadow, ...)
*/

a
{
	text-decoration: none;
}

:root
{
	--couleur_contenu: 235,235,235;
}

body
{
	margin: 0;
	font-family: Verdana, sans-serif;
	background-size: cover;
	background-attachment: fixed;
	background-color: #CFCFCF;
	background-image: url(medias/fond_donuts.png);
	/*background: linear-gradient(to bottom, red 16.7%, orange 16.7%, orange 33.3%, yellow 33.3%, yellow 50%, green 50%, green 66.8%, blue 66%, blue 83.3%, purple 83.3%);*/
}

#page
{
	margin: auto;
	min-width: 500px;
}

#page_sans_pied
{
	display: flex;
	flex-direction: column;
	margin: auto;
	min-height: 100vh;
}

header
{
	margin: auto;
	width: 85%;
}

header nav ul
{
	align-items: flex-end;
	display: flex;
	margin: auto; 
	padding: 0;
	text-align: center;
	list-style-type: none;

}

.lien_header
{
	font-family: Chalkdust;
}

.lien_header
{
	flex: 1;
	height: 40px;
	line-height: 40px;
	white-space: nowrap;
}

.lien_header a
{
	display: block;
	color: black;
	cursor: inherit;
}

.lien_header:hover
{
	background-color: rgba(160,160,160,0.4);
	cursor: crosshair;
}

#titre_header
{
	margin-left: 20px;
	margin-right: 20px;
	color: white;
/*	font-family: '3D-LET-BRK';*/
	font-size: 5vw;
}

#xyz_header
{
	font-size: 40%;

}

#titre_header a, #titre_header a:visited
{
	color: blue;
}

/***** main *****/

main
{
	display: flex;
	flex: 1;
	margin: auto;
	margin-bottom: 2vh;
	width: 85%;
	text-align: left;
	background: linear-gradient(-30deg,rgba(230,64,65,0.5),rgba(165,81,147,0.6),rgba(91,98,229,0.5));
}

main a
{
	color: #0645ad;
}

main a:hover
{
	text-decoration: underline;
}

main .contenu
{
	display: flex;
	flex: 1;
	margin: 30px;
	margin-bottom: 20px;
	margin-top: 20px;
	padding: 20px;
	padding-left: 30px;
	text-align: justify;
	background-color: rgba(var(--couleur_contenu),0.85);
}

main #contenu_special
{
	background-color: rgba(235,235,235,0.6);
}

main article
{
	flex: 3;
	margin-bottom: 30px;
}

article h1
{
	font-family: 'zillaslab';
	font-size: 3.5em;
	margin-top: 0;
}

article h1.titre_article
{
	text-align: center;
	margin-top: 10px;
}

article p, article ul
{
	line-height: 160%;
}

article .indenter
{
	text-indent: 30px;
}

article figure *
{
	max-width: 100%;
}

article p.infos_en-tete
{
	margin-bottom: 20px;
	color: #AAAAAA;
	font-size: 95%;
	font-style: italic;
}
.publication::before
{
	content: "Posté le ";
}
.modification::before
{
	content: ", modifié le ";
}
.commencement::before
{
	content: ", commencé le "
}
.commencement
{
	color: transparent;
}
.commencement:hover
{
	color: inherit;
}

article div.commencer
{
	color: transparent;
	font-size: 90%;
}

article .pied_article
{
	display: flex;
	justify-content: space-around;
	border-top: 2px solid #999999;
	margin-top: 50px;
	padding-top: 20px;
}

aside
{
	flex: 1;
	margin-left: 60px;
	margin-right: 8px;
	text-align: left;
}

aside nav
{
	margin-top: 20vh;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-top: 15px;
	border-bottom: 2px solid grey;
	border-top: 2px solid grey;
}

aside nav ul
{
	list-style: url(medias/puce.svg);
}

aside nav h2
{
	margin-bottom: 22px;
	margin-top: 12px;
	font-size: 1.3em;
	font-weight: normal;

}

aside nav ul ul
{
	padding-left: 27px;
}

aside nav ul ul li:last-child
{
	margin-bottom: 15px;
}

aside nav li
{
	margin-bottom: 15px;
}

/***** fin du main *****/

footer
{
	align-items: center;
	display: flex;
	justify-content: space-around;
	border-top: 4px solid rgba(20,20,20,0.5);
	height: 80px;
	color: grey;
	text-align: center;
	background-color: rgba(20,20,23,0.8);
}

footer a
{
	color: inherit;
	font-size: 1em;
	text-decoration: none;
}

footer a#copyleft:hover
{
	cursor: help;
}

footer a img
{
	height: 12px;
	width: auto;
	filter: invert(65%);
}

/***** @media *****/

@media (max-width: 1400px)
{
	header
	{
		width: 100%;
	}
	main
	{
		width: 100%;
	}
}
@media (max-width: 1000px)
{
	header 
	{
		margin-top: 1vh;
	}
	#titre_header
	{
		flex: 1;
		font-family: Chalkdust;
		line-height: 40px;
		margin: 0;
		color: blue;
		font-size: 1em;
	}
	.contenu
	{
		flex-direction: column;
	}
}

@media (orientation: portrait)
{
	.contenu
	{
		font-size: 2em;
	}
}

/***** POLICES *****/

@font-face 
{
    font-family: 'Chalkdust';
    src: url('polices/Chalkdust.ttf') format('truetype');
}
@font-face 
{
    font-family: '3D-LET-BRK';
    src:url('polices/3D-LET-BRK.ttf.woff') format('woff'),
        url('polices/3D-LET-BRK.ttf.svg') format('svg');
}
@font-face
{
	font-family: 'zillaslab';
	src:url('polices/ZillaSlab.otf');
}
@font-face
{
	font-family: 'zillaslab';
	src:url('polices/ZillaSlab italique.otf');
	font-style: italic;
}
/*
Alors commme ça on ouvre les codes source petit curieux ?
Bon puisque t'es là, je dois t'avouer un truc : t'es beau.
*/