@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/******************** Reset ********************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

*, ::after, ::before {
	box-sizing: border-box;
}

/******************** Typography ********************/
body{
	font-size: 16px;
	line-height: 1.6;
	font-family: 'Instrument Sans', sans-serif;
}

p { margin-bottom: 1rem; }

h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
	margin-bottom: 0.6em;
	font-weight: 400;
	font-style: normal;
}

h1 { font-size: clamp(2rem, 4vw + 1rem, 3rem); }
h2 { font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); }
h3 { font-size: clamp(1.5rem, 2.5vw + 0.25rem, 2rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h5 { font-size: clamp(1.125rem, 1.5vw, 1.25rem); }
h6 { font-size: 1rem; }

/******************** Form ********************/

/******************** Buttons ********************/


/******************** Template ********************/


/******************** Grid ********************/
/* === CONTAINERS === */

/* Container Standard (avec max-width) */
.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}

/* Container Fluid (toujours 100% de largeur) */
.container-fluid {
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}

/* === Système de  GRILLE === */

.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}

.row > * {
	padding: 0 15px;
}

/* === COLONNES DE BASE === */

.col {
	flex: 1 0 0%;
}

.col-auto {
	flex: 0 0 auto;
	width: auto;
}

/* === COLONNES EXTRA SMALL (par défaut, mobile-first) === */

.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* === UTILITAIRES D'ALIGNEMENT === */

.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.justify-content-evenly { justify-content: space-evenly; }

/* === SMALL - 576px+ === */
@media (min-width: 576px) {

	/******************** Grid ********************/

	.container {
		max-width: 540px;
		padding: 0 20px;
	}
	.container-fluid {
		padding: 0 20px;
	}
	
	.col-sm { flex: 1 0 0%; }
	.col-sm-auto { flex: 0 0 auto; width: auto; }
	.col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-sm-3 { flex: 0 0 25%; max-width: 25%; }
	.col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
	.col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-sm-9 { flex: 0 0 75%; max-width: 75%; }
	.col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {

	/******************** Grid ********************/

	.container {
		max-width: 720px;
		padding: 0 24px;
	}
	.container-fluid {
		padding: 0 24px;
	}
	
	.col-md { flex: 1 0 0%; }
	.col-md-auto { flex: 0 0 auto; width: auto; }
	.col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-md-3 { flex: 0 0 25%; max-width: 25%; }
	.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-md-6 { flex: 0 0 50%; max-width: 50%; }
	.col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-md-9 { flex: 0 0 75%; max-width: 75%; }
	.col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* === LARGE - 992px+ === */
@media (min-width: 992px) {

	/******************** Grid ********************/

	.container {
		max-width: 960px;
		padding: 0 32px;
	}
	.container-fluid {
		padding: 0 32px;
	}
	
	.col-lg { flex: 1 0 0%; }
	.col-lg-auto { flex: 0 0 auto; width: auto; }
	.col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
	.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
	.col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-lg-9 { flex: 0 0 75%; max-width: 75%; }
	.col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* === EXTRA LARGE - 1200px+ === */
@media (min-width: 1200px) {

	/******************** Grid ********************/

	.container {
		max-width: 1140px;
		padding: 0 40px;
	}
	.container-fluid {
		padding: 0 40px;
	}
	
	.col-xl { flex: 1 0 0%; }
	.col-xl-auto { flex: 0 0 auto; width: auto; }
	.col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-xl-3 { flex: 0 0 25%; max-width: 25%; }
	.col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-xl-6 { flex: 0 0 50%; max-width: 50%; }
	.col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-xl-9 { flex: 0 0 75%; max-width: 75%; }
	.col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* === EXTRA EXTRA LARGE - 1400px+ === */
@media (min-width: 1400px) {

	/******************** Grid ********************/

	.container {
		max-width: 1320px;
		padding: 0 48px;
	}
	.container-fluid {
		padding: 0 48px;
	}
	
	.col-xxl { flex: 1 0 0%; }
	.col-xxl-auto { flex: 0 0 auto; width: auto; }
	.col-xxl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.col-xxl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-xxl-3 { flex: 0 0 25%; max-width: 25%; }
	.col-xxl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-xxl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-xxl-6 { flex: 0 0 50%; max-width: 50%; }
	.col-xxl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-xxl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-xxl-9 { flex: 0 0 75%; max-width: 75%; }
	.col-xxl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-xxl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-xxl-12 { flex: 0 0 100%; max-width: 100%; }
}