/*  	CHARSET		*/
@charset "utf-8";

/*  	FONTS			*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;0,500;0,800;1,400&display=swap');

/*		GLOBAUX		*/
:root {
	--clr-secondaire: deepskyblue;
	--clr-principale: #D31730;
	--fond: #FAFDF0;
	--foncé: #333;
	
	--clr-implémentation: #00BFFF;
	--clr-recherche: #0000cd;
	--clr-idéation: #800080;
	--clr-cartographie: black;

	font-family: Epilogue,sans-serif;
	font-size: 18px;
	background: var( --fond );
	color: var( --foncé );
	line-height: 1.2;
}


/*  	STRUCTURE		*/
header > div,
main > div,
footer > div {
	max-width: 1200px;
	width: 90vw;
	margin: 0 auto;
	min-height: 6em;
}
article {
	width: 72%;
	padding-right: 5%;
}
aside {
	width: 24%;
}

/*  	GENERIQUE		*/
h5 {
	font-weight: 900;
	text-transform: uppercase;
	font-size: 14.4px !important;
	font-size: 0.78em;
	padding-top: 0.78em;
}
a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
form textarea,
form input[type="text"],
form input[type="email"] {
	font-family: Epilogue,sans-serif;
}
sup {
	font-size: 72%;
	font-weight: 500;
	vertical-align: 100%;
	line-height: 50%;
	padding: 0 0 0 0.1em;
}
small {
	font-size: 80%;
	font-weight: 500;
}
[lang=en] {
	font-style: italic;
}


/*  	HEADER		*/
header {
	background: var( --clr-principale );
	position: fixed; 
	width: 100vw;
	z-index: 200;
}
header > div {
	position: relative;
	height: 7em;
}

/*  	NAV		*/
header nav {
	position: absolute;
	top: 0;
	right: 0;
}
header nav li {
	display: inline-block;
}
header nav a {
	display: block;
	text-transform: uppercase;
	font-weight: 900;
	color: var( --fond );
	padding: 0.7em 1.2em;
	font-size: 0.7em;
	position: relative;
}
header nav a:before {
	content: '';
	display: block;
	background: var( --fond);
	top: 0;
	left: 0;
	height: 6px;
	width: 0%;
	position: absolute;
	transition: 0.5s;
} 
header nav a:hover:before {
	width: 100%;
	transition: 0.5s;
}
header h1 {
	background: var( --fond );
	font-weight: 700;
	font-size: 1.4em;
	padding: 1em;
	border-radius: 8px 8px 0 0;
	height: 0em;
	position: absolute;
	bottom: -0.2em;
	z-index: 2;
	cursor: pointer;
}
header h2 {
	position: absolute;
	background: var( --fond );
	bottom: -3em;
	width: 100%;
	padding: 0.8em 5em;
	line-height: 1.48;
	margin-left: -5em;
	box-shadow: 0 1em 1em var( --fond );
	z-index: 1;
	font-size: 0.9em;
}

/*  	FOOTER		*/
footer {
	background: var( --clr-principale );
	padding: 1.5em 0;
}
footer div > ul {
	display: flex;
}
footer div > ul li {
	display: inline-block;
	width: 25%;
	margin-right: 1em;
}
footer li:last-child {
	margin-right: 0;
}
footer p,
footer div > ul li ul {
	padding-top: 1em;
	color: var( --fond );
}
footer div > ul li li {
	display: block;
	width: 100%;
}
footer li a,
footer p {
	font-size: 16px;
	line-height: 24px;
}
footer li a {
	color: var( --foncé );
}
footer h5,
footer li a:hover {
	color: var( --fond );
}
/*  	PARTENAIRE		*/
footer figure,
footer figure img {
	max-width:100%;
}
footer h5 {
	margin-bottom: 0.5em;
}

/*  	CONTENT		*/
main {
	padding: 12em 0 1em;
}
main > div {
	display: flex;
	position: relative;
}

aside p,
article p {
	padding-top: 0.5em;
	line-height: 1.5;
}

/*		HORODATAGE		*/
.horodatage {
	border-top: 1px solid #ccc;
	margin-top: 1em;
	color: var( --foncé);
	line-height: 1.6;
	color: #ccc;
	width: 96%;
}