/****************************************************
					IMPORTS
****************************************************/

@import url("reset.css");


@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/Outfit-Bold.woff2') format('woff2');
}


@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Open Sans'),
	url('fonts/OpenSans-Regular.woff2') format('woff2'),
	url('fonts/OpenSans-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: local('Open Sans Italic'),
	url('fonts/OpenSans-Italic.woff2') format('woff2'),
	url('fonts/OpenSans-Italic.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Open Sans Bold'),
	url('fonts/OpenSans-Bold.woff2') format('woff2'),
	url('fonts/OpenSans-Bold.woff') format('woff');
}

/****************************************************
					VARIABLES
****************************************************/

:root {
    /* couleurs textes */
    --color-red:			#a21;
    --color-red-dark:		#800;
    --color-red-light:		#d22;
    --color-red-lighter:	#f00;
    --color-blue:			#023;
    --color-blue-dark:		#011;
    --color-sand:			#ea5;
    --color-sand-dark:		#a73;
    --color-sand-light:		#fed;
	--color-text: 			white;
	/*	gris	*/
    --color-grey-x-light:	#eee;
    --color-grey-light:     #ccc;
    --color-grey:			#999;
	--color-grey-dark:		#777;
	--color-grey-x-dark:	#555;
    /* typos */
	--font-text: 			open sans, Arial, Helvetica, sans-serif;
	--font-title: 			'Outfit', open sans, Arial, sans-serif;
	--font-nav: 			open sans, Arial, Helvetica, sans-serif;
    /* tailles */
	--width-max:			1100px;
	--width-max-text:		760px;
	--height-header: 		200px;
}

/****************************************************
					STYLES
****************************************************/

html { font-size: 16px; }
body { 
	margin: 0;
	padding: 0;
	font-style: normal; 
	font-weight: normal; 
	font-size: 1rem;
	line-height: 150%;
	font-family: var(--font-text);
	color: var(--color-text);
	background-color: var(--color-blue);
	text-align: center;
 }

p { 
	font-size: 1.25rem;
	line-height: 150%;
	margin-bottom: 3rem;
	text-align: justify;
}
p.note { font-size: 1rem; font-style: italic; }

strong { font-weight: bold; }
em { font-style: italic; }

h1, h2, h3, h4, h5, h6 { 
	line-height: 125%; 
	font-weight: 700; 
	font-family: var(--font-title); 
	color: var(--color-sand); 
	margin-bottom: 3rem;
	text-wrap: balance;
}
h1 {	font-size: 	2.5rem; }
h2 {	font-size: 	2rem; }
h3 {	font-size: 	1.5rem; }
h4 {	font-size: 	1.25rem; }
h5, h6 {font-size: 	1rem; }

acronym { cursor: help; border-bottom: 1px dotted; }
code { display: block; margin-bottom: 2rem; padding: 1.25rem; font: 0.75em/*12px/16px*/ "Courier New", Courier, monospace; border: 1px dotted; }
blockquote { margin-bottom: 2rem; padding-left: 1.25rem; font-style: italic; text-align: justify; }
	blockquote p { margin: 0; }

hr { margin: 0; margin-bottom: 2rem; border: 0; height: 2px; background-color: var(--color-grey-x-light); color: var(--color-grey-x-light); }



/*	LIENS
----------------------------------------------------*/

a, a:active { color: var(--color-red-lighter); text-decoration: underline; }
a:hover { color: var(--color-red-light); }
a:focus { outline: none; }

a.button {
	display: inline-block;
	color: var(--color-red);
	font-size: 1rem;
	letter-spacing: .4em;
	text-indent: .4em;
	text-transform: uppercase;
	text-decoration: none;
	position: relative;
	transition: color .3s ease
}
a.button::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: .4em;
	right: .4em;
	height: 1px;
	background-color: currentColor;
	transition: transform .3s ease-out
}
a.button:hover {
	color: #dd545b
}
a.button:hover::after {
	transform: scaleX(1.2)
}


/*	LISTES
----------------------------------------------------*/

ol, ul { 
	margin-bottom: 2rem; 
	list-style-position: inside;
	line-height: normal;
}
ol { list-style-type: decimal; }
ul ul, ol ol { margin-bottom: 0; margin-left: 1.25rem; }
dl { }
	dt { font-weight: bold; }
	dd { margin: 0 0 1.25rem 1.25rem; }
ul.multicol_3 {
	column-count: 3;
	/*column-gap: 30px;*/
}


/*	TABLEAUX
----------------------------------------------------*/

table { margin-bottom: 2rem; border: 1px solid; }
table th, table td { padding: 5px; text-align: left; }
table thead th { border: 1px solid; }
table tbody th { }
table tbody th, table tbody td { border: 1px solid; }
table tfoot td { text-align: center; }


/*	FORMULAIRES
----------------------------------------------------*/

form { margin-bottom: 2rem; }
form fieldset { padding: 10px; margin: 0; }
form fieldset legend { padding: 2px; width: auto; font-size: 1rem; border: 1px solid; }
form p label { display: block; }
form p input,
form p select,
form p textarea { padding: 2px; width: auto; font: normal normal 0.75em/*12px/16px*/ Tahoma, Arial, Helvetica, sans-serif; }
form ul { list-style: none; }
	form ul li { white-space: nowrap; }
form p.submit input { width: auto; cursor: pointer; }


/*	CLASSES DIVERSES
----------------------------------------------------*/

.center { text-align: center; }

/*	back to top	*/