/*
 ######   ##        #######  ########     ###    ##       
##    ##  ##       ##     ## ##     ##   ## ##   ##       
##        ##       ##     ## ##     ##  ##   ##  ##       
##   #### ##       ##     ## ########  ##     ## ##       
##    ##  ##       ##     ## ##     ## ######### ##       
##    ##  ##       ##     ## ##     ## ##     ## ##       
 ######   ########  #######  ########  ##     ## ######## 
*/

@font-face {
	font-family: "Russo One";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../font/russo.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(../font/ibm-plex-sans300.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../font/ibm-plex-sans400.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../font/ibm-plex-sans500.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bleu: #122237;
	--rouge: #e30615;
	--grisclair: #f0f0f0;
	--grisfonce: #585858;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: #122237;
	margin: 0;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 16px;
	line-height: 1.633;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Russo One", sans-serif;
	text-transform: uppercase;
}

.textcenter {
	text-align: center;
}

/*
##     ## ########    ###    ########  ######## ########  
##     ## ##         ## ##   ##     ## ##       ##     ## 
##     ## ##        ##   ##  ##     ## ##       ##     ## 
######### ######   ##     ## ##     ## ######   ########  
##     ## ##       ######### ##     ## ##       ##   ##   
##     ## ##       ##     ## ##     ## ##       ##    ##  
##     ## ######## ##     ## ########  ######## ##     ## 
*/

header {
	color: #fff;
	background: var(--bleu);
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 2fr;
	background: url(fond.jpg) center center;
	background-size: cover;
}

header > div:first-child {
	padding: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
}

header > div:first-child > div {
	position: relative;
	left: 300px;
}

header img {
	max-width: 150px;
	margin-bottom: 40px;
}

header h1 {
	line-height: 1;
	letter-spacing: 0.06em;
}

header h1:after {
	content: "";
	display: block;
	background: var(--rouge);
	width: 70px;
	height: 2px;
	margin: 20px 0;
}

header p {
	margin-bottom: 8px;
}

header p:has(.btn) {
	margin-top: 40px;
}

header .btn {
	color: #fff;
	background: var(--rouge);
	border: 1px solid var(--rouge);
	border-radius: 4px;
	padding: 8px 16px;
	font-family: "Russo One", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	margin-right: 10px;
	cursor: pointer;
}

header .btn:hover {
	color: #fff;
	background: #bf010e;
	border: 1px solid #bf010e;
	cursor: pointer;
}

header .btn2 {
	color: #fff;
	background: none;
	border: 1px solid #fff;
	border-radius: 4px;
	padding: 8px 16px;
	font-family: "Russo One", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}

#connexion {
	grid-template-columns: 1fr;
}

#connexion > div:first-child > div {
	width: 450px;
	position: relative;
	left: 0;
	text-align: center;
}

#connexion h1::after {
	margin: 20px auto;
}

@media screen and (max-width: 1500px) {
	header {
		display: block;
		background: url(fond.jpg) center center;
		background-size: cover;
	}
	header > div:first-child {
		padding: 80px 40px;
	}
	header > div:first-child > div {
		position: initial;
		max-width: 700px;
	}
}

/*
 ######   #######  ##    ## ######## ######## ##    ## ##     ## 
##    ## ##     ## ###   ##    ##    ##       ###   ## ##     ## 
##       ##     ## ####  ##    ##    ##       ####  ## ##     ## 
##       ##     ## ## ## ##    ##    ######   ## ## ## ##     ## 
##       ##     ## ##  ####    ##    ##       ##  #### ##     ## 
##    ## ##     ## ##   ###    ##    ##       ##   ### ##     ## 
 ######   #######  ##    ##    ##    ######## ##    ##  #######  
*/

main {
	color: #fff;
	background: var(--bleu);
	text-align: center;
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	font-family: "Russo One", sans-serif;
}

main img {
	padding: 10px 0 0 10px;
	max-width: 150px;
	margin-bottom: 40px;
}

.infos_lights_form {
	color: #5c697e;
}

.case_formulaire form {
	margin-top: 20px;
	max-width: 450px;
}

.case_formulaire label {
	margin-bottom: 4px;
	display: block;
}

.case_formulaire form input {
	color: #fff;
	border: 1px solid #5c697e;
	background: #122237;
	display: block;
	width: 100%;
	border-radius: 4px;
	padding: 12px;
	margin-bottom: 20px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.633;
	text-align: center;
}

.case_formulaire .btn2 {
	color: #fff;
	background: var(--rouge);
	border: 1px solid var(--rouge);
	border-radius: 4px;
	padding: 8px 16px;
	font-family: "Russo One", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	margin-right: 10px;
}
.case_formulaire .btn2:hover {
	color: #fff;
	background: #bf010e;
	border: 1px solid #bf010e;
	cursor: pointer;
}

.case_formulaire a {
	color: #5c697e;
}

.case_formulaire a:hover {
	color: #a5afc1;
}

.form_erreur {
	padding: 12px;
	font-weight: bold;
}

.btn_mail a {
	color: #585858;
}

.container_avantage {
	display: grid;
	grid-template-rows: auto auto;
	background: lightgray;
	color: var(--bleu);
}

.avantage_title {
	padding-top: 60px;
}

.avantage_text {
	display: grid;
	grid-template-columns: auto auto auto;
	padding-bottom: 180px;
	padding-top: 100px;
}

.avantage_text p {
	text-align: center;
	margin-left: 130px;
	width: 250px;
	font-size: larger;
}

.container_img1 {
	display: grid;
	grid-template-columns: auto auto;
	color: #122237;
}

.container_img1 img {
	padding-right: 30px;
}

.text_img1 {
	text-align: center;
	font-size: larger;
	padding-right: 150px;
	padding-left: 150px;
}

.container_img2 {
	display: grid;
	grid-template-columns: auto auto;
	color: #122237;
}

.container_img3 {
	display: grid;
	grid-template-columns: auto auto;
	color: #122237;
}

/*
########  #######   #######  ######## ######## ########  
##       ##     ## ##     ##    ##    ##       ##     ## 
##       ##     ## ##     ##    ##    ##       ##     ## 
######   ##     ## ##     ##    ##    ######   ########  
##       ##     ## ##     ##    ##    ##       ##   ##   
##       ##     ## ##     ##    ##    ##       ##    ##  
##        #######   #######     ##    ######## ##     ## 
*/

footer {
	background-color: white;
}

footer a {
	align-items: center;
	padding: 10px;
	background-color: black;
	color: white;
}