@charset "UTF-8";
/* CSS Document */
/* CUSTOM */
* html, * html body {
	height: 100%;
}
html {
	font-size: 62.5%;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-size: 1.4rem;
	color: #333;
}
body *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#global {
	margin: auto;
}

.full_width {
	width: 100%;
}
p{
	line-height: 1.5;
	font-size: 14px;
	font-size: 1.4rem;
}
a{
	color: #d73f3c;
	text-decoration: none;
	cursor: pointer;
}
a:hover{
	text-decoration: underline;	
}
header {
	margin: 0 auto !important;
	max-width: 960px;
}
#menu {
	margin-top: 6rem;
	text-align: right;
}
#menu select{
	display: none;
}
#menu>ul>li {
	position: relative;
	display: inline-block;
	line-height: 1.2;
	text-align: center;
	margin:0 20px;
	border-bottom: 5px solid transparent;
}
#menu>ul>li:last-child{
	margin-right: 0;
}
#menu>ul>li>a {
	display: block;
	color: #333;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 14px;
	font-size: 1.4rem;
	font-family: "Roboto",sans-serif;
	text-decoration: none;
}
#menu>ul>li:hover>a{
	color: rgb(215, 63, 60);/* #d73f3c */
	text-shadow: 0.01em 0 0 #d73f3c;
}
#menu>ul>li:hover{
	border-bottom: 5px solid #d73f3c;
}
/*SOUS MENU*/
#menu>ul>li>ul{
	position: absolute;
	white-space: nowrap;
	background-color: #efefef;
	width: 200px;
	/*width: 100%;*/
	margin-top: 5px;
	padding: 1.5rem 2rem ;
	text-align: left;
	/*
  Transition appliquée à la sortie du survol :
	visibility est animée en 0 seconde après un délai de 200ms correspondant à la durée de la transition appliquée à opacity.
	Autrement dit, lorsque le survol prend fin, on passe l'opacity à 0 en 200ms puis on passe la visibility à hidden.
  */
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s ease-in-out, visibility 0s ease-in-out .2s;
}
#menu>ul>li:hover>ul {
	visibility: visible;
	opacity: 1;
	/*
	Transition appliquée à l'entrée du survol :
	On anime l'opacity de 0 à 1 en 500ms.
	*/
	transition: opacity .5s ease-in-out;
}
#menu>ul>li>ul>li {
	line-height: 1.5;
	margin-bottom: 10px;
	border-bottom: 1px solid #666666;
}
#menu>ul>li>ul>li a{	
	color: #333;
	word-break: break-word;
    white-space: normal;
}
.icon:after {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}
.fleche:after {
	/*https://fontawesome.com/cheatsheet*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 10px;
	font-size: 1.0rem;
	content: "\f078";
	padding: 0.5rem 0 0.5rem 1rem;
}
#banner {
	background: #4a65f3 url("../images/bg_entrepot.png") center center no-repeat;
	height: 250px;
	margin: 0;
	padding: 0;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardisée */
	display: flex;
}
#banner .xy_centered {
	margin : auto;
	max-width: 960px;
	padding-left: 15rem;
	padding-right: 15rem;
}
#banner #accroche {
	font-size: 42px;
	font-size: 4.2rem;
	font-family: "Roboto",sans-serif;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}

#famille-chiffons {
	height: 60px;
	margin: auto;
	padding: auto;
	text-align: center;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardisée */
	display: flex;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
}
#famille-chiffons .xy_centered {
	margin : auto;
	max-width: 960px;
	padding-left: auto;
	padding-right: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}
.content{
	max-width: 960px;
	margin: 0 auto;
}
.content p{
	margin-bottom: 20px;
}
.btn {
	padding: 0.5rem 2rem;
	border: 1px solid #d73f3c;
	border-radius: 5px;
	background-color: #d73f3c;
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	font-size: 1.4rem;
	font-family: "Roboto", sans-serif;
	font-weight: 300;
	text-decoration: none;
	line-height: 2.8;
}
.btn:hover{
	color: #d73f3c;
	background-color: #fff;
	text-decoration: none;
}
.btn_xl{
	padding: 1rem 3rem;
	font-size: 18px;
	font-size: 1.8rem;
	border-width: 2px;
	line-height: 4;
}
/*fonds foncés*/
.btn_white_border{
	border-color: #fff;
	background-color: transparent;
	color: #fff;
}
.btn_white{
	background-color: transparent;
	color: #d73f3c;
}

.btn_white:hover{
	background-color: #d73f3c;
	color: #fff
}

#blocs_contact address{
	font-style: normal;
	margin-bottom: 3rem;
}
#blocs_contact .titres{
	font-size: 18px;
	font-size: 1.8rem;
	margin-top: 1rem 1.5rem;
}
footer #besoin_infos {
	background-color: #f5f5f5;
	padding:2rem;
	text-align: center;
}
footer #contact p{
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 700;
}
footer #mentions {
	font-size: 1.2rem;
	line-height: 1.8;
	text-align: center;
}
footer #links{
	
}
footer #links li {
	display: inline-block;
}
footer #links li:after{
	content: " | ";
	color: #d73f3c;
}
footer #links li:last-child:after{
	content: "";
}
/*Classes génériques *********** */
/* Texte */
.texte10{ font-size: 10px;font-size: 1.0rem;}
.texte11{ font-size: 11px;font-size: 1.1rem;}
.texte12{ font-size: 12px;font-size: 1.2rem;}
.texte13{ font-size: 13px;font-size: 1.3rem;}
.texte14{ font-size: 14px;font-size: 1.4rem;}
.texte16{ font-size: 16px;font-size: 1.6rem;}
.texte18{ font-size: 18px;font-size: 1.8rem;}
.texte20{ font-size: 20px;font-size: 2.0rem;}
.texte24{ font-size: 24px;font-size: 2.4rem;}
.texte28{ font-size: 28px;font-size: 2.8rem;}
.texte32{ font-size: 32px;font-size: 3.2rem;}
.tac{text-align: center;}
.tar{text-align: right;}
.tal{text-align: left;}
.taj{text-align: justify;}

blockquote{
	font-style: italic;
}

/*Titres*/
h1{
	font-family: "Roboto", sans-serif;
	color: #d73f3c;
	font-size: 32px;
	font-size: 3.2rem;
	font-weight: 700;
	text-align: center;
	margin: 1rem 0 3rem;
	line-height: 1.3;
}
h2{
	font-family: "Roboto", sans-serif;
	color: #424654;
	font-size: 28px;
	font-size: 2.8rem;
	font-weight: 700;
	margin: 1rem 0 2rem;
	line-height: 1.3;
}
h3{
	font-family: "Roboto", sans-serif;
	color: #424654;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: 700;
	margin: .8rem 0 1rem;
	line-height: 1.3;
}
h4{
	font-family: "Roboto", sans-serif;
	color: #424654;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 700;
		margin: .2rem 0 1rem;
}
h5{
	font-family: "Roboto", sans-serif;
	color: #424654;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 700;
		margin: .2rem 0 .9rem;
}
h6{
	font-family: "Roboto", sans-serif;
	color: #424654;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 700;
		margin: .1rem 0 .9rem;
}
/*logo*/
#logo{
	font-family: inherit;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: inherit;
    margin: inherit;
    line-height: inherit;
}
/*Listes*/
.list{
	margin-bottom: 1.5rem;
}
.list li{
	list-style-type:none;
	margin-left: 1rem;
	margin-bottom: 0.5rem;
	line-height: 1.5;
}
.list li::before {
  content: "\25AA";  /* Add content: \25AA is the CSS Code/unicode for a square bullet */
  color: #d73f3c; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1rem; /* Also needed for space (tweak if needed) */
  margin-left: -1rem; /* Also needed for space (tweak if needed) */
}
/*Couleurs*/
.bleu_proust{color: #4A65F3;}
.rouge{color: #D73F3C;}
.gris_titres{color: #424654;}
.gris_texte{color: #333;}
.blanc{color: #fff;}

/*Fonds*/
.bg_bleu_proust{background-color: #4A65F3; color: #fff}
.bg_rouge{background-color: #424654;}
.bg_gris{background-color: #efefef;}
.bg_none{background: none;}

/*Bordures*/
.bd_gris_clair{border-color: #e5e5e5;}
.no_border{border: none;}

/*Marges */
.m0{margin: 0;}
.m20{margin: 2rem;}
.mt20{margin-top: 2rem;}
.mr20{margin-right: 2rem;}
.mb20{margin-bottom: 2rem;}
.ml20{margin-left: 2rem;}

/*Padding */
.p20{padding: 2rem;}
.pt20{padding-top: 2rem;}
.pr20{padding-right: 2rem;}
.pb20{padding-bottom: 2rem;}
.pl20{padding-left: 2rem;}

/*Interlignage*/
.lh0{line-height: 0;}
.lh1{line-height: 1;}
.lh1_5{line-height: 1.5;}
.lh1_8{line-height: 1.8;}
.lh2{line-height: 2;}
.lh3{line-height: 3;}
.lh4{line-height: 4;}

/*positionnement*/
.block{display: block;}
.inline{display: inline;}
.left{float: left;}
.right{float: right;}
.relative{position: relative;}
.absolute{position: absolute;}
.fixed{position: fixed;}
.clearfix{overflow: auto;}

/*Tableaux de données*/
table {
    margin: 0.1rem 0 0.1rem;
    line-height: 1.5;
	font-size: 14px;
	font-size: 1.4rem;
	caption-side: bottom;
}
caption{
	color: #666;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.5;
	margin-top: 1rem;
}
tfoot td{
	background-color: #efefef;
	font-weight: bold;
}

th {
    padding: 1rem 1.5rem;
    border: 1px solid #fff;
	background-color: #d73f3c;
	font-weight: normal;
    text-align: left;
    vertical-align: middle;
	color: #fff;
}

/*lignes paires*/
tr.even {
	background:#efefef;
}

td {
	padding:1rem 1.5rem;
	border:1px solid #e5e5e5;
	font-weight:normal;
	text-align:left;
	vertical-align:middle;
	background-color: #fff;
}

/* Formulaires */
.form *{
	font-size: 14px;
	font-size: 1.4rem;
}
.form .form_line{
	margin-bottom: .5rem;
}
.form abbr[title]{
	border-bottom: none;
	text-decoration: none;
}
.form label, .form .label{
	width: 30%;
	text-align: right;
	display: inline-block;
	margin-right: 2rem;
	line-height: 2;
}
.form .label_radio{
	display: inline;
	text-align: left;
	margin-right: 1rem;
}
.form textarea{
	vertical-align: top;
	font-family: "Arial", sans-serif;
}
.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form textarea{
	border: none;
	border-bottom: 1px solid #999;
	background: none;
	line-height: 2;
}
.form input:invalid {
  border-bottom: 1px solid #d73f3c;
}
.form input:valid {
  border-bottom: 1px solid #4b9700;
}
.form select{
	background-color: transparent;
    width: 40%;
    height: 3rem;
}

/*Fin classes génériques *********** */

/*  ************* GO FULL WIDTH AT LESS THAN 768 PIXELS ************** */

@media only screen and (max-width : 768px ){
	#banner .xy_centered{
		padding: 2rem;
	}
	#banner #accroche{
		font-size: 36px;
		font-size: 3.6rem;
	}
}

/*  ************* GO FULL WIDTH AT LESS THAN 480 PIXELS ************** */

@media only screen and (max-width : 480px ){
	.span_3_of_3 {
		width: 100%;
	}
	.span_2_of_3 {
		width: 100%;
	}
	.span_1_of_3 {
		width: 100%;
	}
	.full_width_resp{
		width: 100%;
	}
	#logo {
		text-align: center;
	}
	#menu{
		position: fixed;
		display: block;
		bottom: 0;
		margin-top: 0;
		top: 20px;
	}
	#menu>ul{
		display: none;
	}
	#menu select{
		display: block;
		border: 1px solid #ccc;
		margin-left: 2rem;
		line-height: 1.5;
		padding: .5rem;
		width: 65px;
	}
	#menu select option{
		line-height: 1.5;
	}
	#banner{
		height: auto;
	}
	#banner .xy_centered{
		padding: 2rem;
	}
	#banner #accroche{
		font-size: 28px;
		font-size: 2.8rem;
	}
	.content{
		padding: 2rem;
	}
	.btn{
		display: block;
		text-align: center;
		margin: 1rem 0;
		padding: 1rem;
		/*width: 100%;*/
	}
	.btn_xl{
		padding: 1.5rem;
		line-height: 1.5;
	}
	#mentions #links{
		font-size: 16px;
		font-size: 1.6rem;
	}
	/* Formulaires */
	.form label, .form .label{
		display: block;
		text-align: left;
		width: inherit;
		margin-right: inherit;
	}
	.form input[type=text],
	.form input[type=email],
	.form input[type=tel],
	.form textarea{
		width: 100%;
	}
}
/* ------------------------------------------------------------------ */
/*Classes CSS pour les images *********** */
/*** Images à gauche*****/
	.content img.image-gauche-seule{
	margin-top: 80px;
	}