@charset "utf-8";

body {
font-family:'Raleway',Helvetica,Arial,Lucida,sans-serif;
background-color: #282828;
color: #000000;
margin: 0px;
padding: 0px;
}

* {
box-sizing: border-box;
}

form {
margin: 0px;
padding: 0px;
}

h1,h2,h3,h4,h5,h6 {
font-family:'Raleway',Georgia,"Times New Roman",serif;
padding-left: 60px;
padding-right: 60px;
}

p {
font-size: 16px;
font-weight: 500;
}

a, a:hover, a:visited {
color: unset;
text-decoration: none;
cursor: pointer;
}

a.rien {
color:#454545;
text-decoration: none;
}

a.rien:hover {
text-decoration: underline;
}

/* Style pour les pop-ups */
.info {
position:relative;
z-index:24;
text-decoration:none;
color: #333333;
}

.info:hover {
z-index:25;
}

.info span {
display: none
}
.info:hover span {
display:block;
position:absolute;
top:1em; 
left:1em; 
width: 500px;
padding: 10px;
font-size: 14px;
border:1px solid #afafaf;
background-color: #ffffff;
color:#555555;
box-shadow: 1px 1px 12px #555;
-moz-box-shadow: 1px 1px 12px #555;
-webkit-box-shadow: 1px 1px 12px #555; 
}

.boite_message {
border-radius: 5px;
background-color: #e1ebf7;
padding: 20px;
margin: 0 auto;
max-width: 90%;
}

.boite_message_fonce {
border-radius: 5px;
background-color: #115673;
color: #ffffff;
margin: 0 auto;
max-width: 90%;
}

.boite_message_pale {
border-radius: 5px;
background-color: #f2efea;
border: 1px solid #d9d9d9;
color: #000000;
padding: 20px;
margin: 0 auto;
max-width: 90%;
}

.boite_message_accueil {
border-radius: 5px;
background-color: #e1ebf7;
padding: 10px;
margin: 0 auto;
max-width: 90%;
}

.center {
text-align: center;
}

.imgnobord {
border: 0px;
}

.liste_standard {
list-style-type: disc;
font-size: 16px;
padding: 10px 60px 10px 75px;
}

.loader {
border: 16px solid #f3f3f3; 
border-top: 16px solid #007ac3;
border-radius: 50%;
width: 120px;
height: 120px;
margin-bottom: 20px;
animation: spin 2s linear infinite;
position: relative; 
left: 45%;
transform: translateX(-50%);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.petit {
font-size: 12px;
}

.flottementg {
float: left;
margin: 5px;
padding: 3px;
border: 0px;
}

.flottementg1 {
float: left;
margin-right: 10px;
margin-bottom: 10px;
padding: 3px;
border: 0px;
}

.flottementd {
float: right;
margin-left: 10px;
padding: 3px;
border: 0px;
}

.flottementd_gps {
float: right;
margin: 8px;
margin-right: 150px;
border: 0px;
}

.just {
text-align: justify;
}

.gros16 {
font-size: 16px;
}

.right {
text-align: right;
}

.rouge {
color: red;
}

.und{
text-decoration: underline;
}

img, object, embed, video {
max-width: 100%;
height: auto;
}
/* IE 6 ne prend pas en charge max-width; la largeur par défaut est donc fixée à 100% */
.ie6 img {
width:100%;
}

.conteneur {
margin-left: auto;
margin-right: auto;
width: 100vw;
min-height: 100vh;
background-color: #ffffff;
}

#boite_en_tete {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}

#titre {
width: 98%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
padding-bottom: 50px;
display: block;
background-color: #1a2944;
color: #f2f2f2 !important;
font-size: 18px;
border-radius: 10px;
}

#corps_texte {
clear: both;
float: left;
margin-left: 0;
width: 100%;
padding-top: 40px;
padding-bottom: 50px;
display: block;
background-color: #ffffff;
}

#piedpage {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
background-color: #1a2944;
color: #ffffff;
}

#piedpage p {
padding: 8px;	
padding-left: 12px;
text-align: center;
font-size: 16px;
font-weight: 600;
}

/* Style pour les formulaires */
input[type=text], input[type=password], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
font-size: 14px;
}

input.telephone{
width: 13%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
}

label {
padding: 12px 12px 12px 0;
display: inline-block;
font-size: 16px;
font-weight: 500;
}

input[type=submit] {
background-color: #007ac3;
color: #ffffff;
padding: 12px 20px;
margin-top: 12px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}

.boite_formulaire {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 0 auto;
max-width: 90%;
}

.boite_formulaire_petite {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 0 auto;
max-width: 60%;
}

.boite_proposition {
border-radius: 5px;
border: 1px solid #f2f2f2;
padding: 20px;
margin: 0 auto;
max-width: 90%;
}

.boite_commentaire {
padding: 20px;
margin: 0 auto;
max-width: 90%;
}

.boite_profil {
border-radius: 5px;
border: 1px solid #f2f2f2;
padding: 10px;
margin: 0 auto;
max-width: 70%;
}

.boite_formulaire_bouton {
border-radius: 5px;
padding: 20px;
padding-top: 10px;
margin: 0 auto;
max-width: 250px;
}

.col-3 {
float: left;
width: 3%;
margin-top: 20px;
}

.col-5 {
float: left;
width: 5%;
margin-top: 20px;
}

.col-10 {
float: left;
width: 10%;
margin-top: 6px;
}

.col-12 {
float: left;
width: 12%;
margin-top: 6px;
}

.col-16 {
float: left;
width: 16%;
margin-top: 6px;
}

.col-20 {
float: left;
width: 20%;
margin-top: 6px;
}

.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}

.col-40 {
float: left;
width: 40%;
margin-top: 6px;
}

.col-50 {
float: left;
width: 50%;
margin-top: 6px;
}

.col-60 {
float: left;
width: 60%;
margin-top: 6px;
}

.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}

.col-95 {
float: left;
width: 95%;
margin-top: 6px;
}

.row:after {
content: "";
display: table;
clear: both;
}

/* Style pour le input file */
input[type="file"] {
position: absolute; 
top: -9999px; 
left: -9999px;
}

.bouton_file_style {
background: #dca804;
color: #ffffff;
border-radius: 4px;
display: inline-block;
font-size: 1em;
transition: all .4s;
cursor: pointer;
padding: 12px;
border: none;
}

.image_accueil {
display: none;
}

.espace_fonction {
display: inline-block;
width: 100%;
}

.connexion_accueil {
width: 100%;
}

.fonctionnalites {
width: 95%;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
margin-bottom: 5px;
}

/* Style pour les tableaux */
table { 
  width: 90%; 
  margin: 0px auto;
  font-size: 14px; 
}
/* Style pour les tableaux */
table.moitie { 
  width: 45%; 
  margin: 0px auto;
  font-size: 14px;
}
/* Zebra striping */
tr {
background-color: #ffffff;
}
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background-color: #007ac3;
  color: white; 
  font-weight: bold;
  text-align: center; 
}
td, th { 
  padding: 6px; 
  padding-right: 15px;
  padding-left: 15px;
  border: 1px solid #ccc;  
}
td.date { 
  padding: 6px; 
  border: 1px solid #ccc;
  min-width: 90px; 
  text-align: center; 
}

/* Style pour les formulaires sur format plus petit */
@media screen and (max-width: 600px) {
	.col-3, .col-5, .col10, .col12, .col-16, .col-20, .col-25, .col-40, .col-50, .col-60, .col-75, .col-95 {
	width: 100%;
	margin-top: 0;
	}
	
	input[type=submit] {
	width: 100%;
	}
	
	p {
	padding: 10px 10px 10px 10px;
	}
	
	.liste_standard {
	list-style-type: disc;
	text-align: justify;
	font-size: 16px;
	padding: 10px 10px 10px 25px;
	}
	
	h1,h2,h3,h4,h5,h6 {
	padding-left: 10px;
	padding-right: 10px;
	}
	
	.just {
	text-align: left;
	}

	.tableau-responsive td:before { 
	content: attr(data-title); 
	} 
  
	.tableau-responsive table,  
	.tableau-responsive thead,  
	.tableau-responsive tbody,  
	.tableau-responsive th,  
	.tableau-responsive td,  
	.tableau-responsive tr {  
	display: block;  
	} 
   
	.tableau-responsive thead tr {  
	display:none; 
	} 
  
	.tableau-responsive td {  
	position: relative; 
	border: 0px solid transparent; 
	padding-left: 50% !important;  
	white-space: normal; 
	text-align:right;  
	margin-right: 15px;
	} 
   
	.tableau-responsive td:before {  
	position: absolute; 
	top: 0px; 
	left: 0px; 
	width: 45%;  
	padding-right: 15px;  
	height:100%; 
	white-space: nowrap; 
	text-overflow: ellipsis !important; 
	overflow:hidden !important; 
	text-align:left; 
	background-color:#f8f8f8; 
	padding:2px; 
	} 
} 

@media only screen and (min-width: 768px) {
	.image_accueil {
	display: inline-block;
	float: left;
	width: 50%;
	height: 750px;
	background-image: url('../Images/fleurs.jpg');
    background-repeat: no-repeat;
    background-size: cover;
	}
	
	.espace_fonction {
	display: inline-block;
	float: left;
	width: 50%;
	}
	
	.connexion_accueil {
	float: left;
	width: 50%;
	}
	
	.gros_titre_accueil {
	font-size: 36px;
	text-align: right;
	padding-top: 25px;
	padding-right: 20px;
	color: #ffffff;
	text-shadow: 2px 2px 2px black;
	}
	
	.titre_accueil {
	color: #ffffff;
	padding-top: 40px;
	padding-right: 20px;
	text-align: right;
	text-shadow: 2px 2px 2px black;
	}
} 

/* Disposition tablette : 481px sur 768px. Hérite des styles de : Disposition mobile */

@media only screen and (max-width: 850px) {
	
	#menu {
	display: none;
	}
	
	#boite_standard {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	}
	
	#piedpage p {
	padding: 10px;
	padding-left: 15px;
	text-align: left;
	}
	
	.liste_standard {
	list-style-type: disc;
	text-align: justify;
	font-size: 16px;
	padding: 10px 30px 10px 45px;
	}
	
	p {
	padding: 10px 30px 10px 30px;
	}
	
	h1,h2,h3,h4,h5,h6 {
	padding-left: 30px;
	padding-right: 30px;
	}
	
	.just {
	text-align: left;
	}
	
	#banniere {
	display: none;
	}
	
	/* Pour l'affichage du menu sur mobile */
 	#hamburger {
    display: block;
    cursor: pointer;
	float: right;
	margin-right: 12px;
	margin-bottom: 30px;
	}
	
	.bar1, .bar2, .bar3 {
    width: 20px;
    height: 2px;
    background-color: #007ac3;
    margin: 4px 0;
    transition: 0.4s;
	}
	
	#burger_menu {
	display: block;
	}
	
	#menu-mobile, #menu-mobile1 {
	clear: both;
	float: left;
	margin-left: 0;
	padding-top: 35px;
	width: 100%;
	display: none;
	border-top: 3px solid #007ac3;
	}
	
	nav {
	background-color: #ffffff;
	width: 90%;
	margin: 0 auto;
	}
	
	nav > ul {
    position: static;
    display: block;
    }
	
	nav > ul > li { 
	font-size: 16px;
	font-weight: 600;
	color: #007ac3;
	width: 100%;
	line-height: 32px;
	}
	
	nav > ul > li a:hover {
	color: #4ca2d5;
	background-color: #f9f9f9;
	}
	
	nav > ul > li > a {
	margin-left: 20px;
	}
	
	nav > ul > li > ul > li > a {
	margin-left: 45px;
	}
	
	nav > ul > li > ul > li > ul > li > a {
	margin-left: 70px;
	}
	
	nav > ul > li > ul, nav > ul > li > ul > li > ul {
	border-top: 1px solid #f0f0f0;
	}
	
	nav ul li a {
	display: block;
	font-weight: bold;
	padding: 0.4em 0.8em;
	position: relative;
	text-decoration: none;
	}
	
	.principal {
	background-color: #f7f7f7;	
	}
	
	nav li:hover {
	background-color: #f9f9f9;
	}
	
	nav ul ul li, nav ul ul li li {
	background-color: #ffffff;
	border-bottom: 1px solid #f7f7f7;
	}
}

/* Disposition bureau : 769px à max. 1232px.  Hérite des styles de : Disposition mobile et disposition tablette */

@media only screen and (min-width: 850px) {
	
	#conteneur-menu {
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	border-radius: 10px;
	width: 98%;
	display: block;
	background-color: #1a2944;
	}
	
	#banniere {
	position: relative;
	float: right;
	margin-right: 27px;
	display: block;
	padding-top: 40px;
	}
	
	#boite_standard {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	}
	
	#piedpage p {
	padding: 13px;
	padding-left: 50px;
	text-align: left;
	}
	
	.image_accueil {
	display: inline-block;
	float: left;
	width: 60%;
	height: 850px;
	background-image: url('../Images/fleurs.jpg');
    background-repeat: no-repeat;
    background-size: cover;
	}
	
	.espace_fonction {
	display: inline-block;
	float: left;
	width: 60%;
	}
	
	.connexion_accueil {
	float: left;
	width: 40%;
	}
	
	.gros_titre_accueil {
	font-size: 48px;
	text-align: right;
	padding-top: 25px;
	padding-right: 30px;
	color: #ffffff;
	text-shadow: 2px 2px 2px black;
	}
	
	.titre_accueil {
	color: #ffffff;
	padding-top: 60px;
	padding-right: 30px;
	text-align: right;
	text-shadow: 2px 2px 2px black;
	}
	
	.image_en_tete {
	margin-left: 30px;
	}
	
	.liste_standard {
	list-style-type: disc;
	text-align: justify;
	font-size: 16px;
	padding: 10px 60px 10px 75px;
	}
	
	p {
	padding: 10px 60px 10px 60px;
	}
	
	h1,h2,h3,h4,h5,h6 {
	padding-left: 60px;
	padding-right: 60px;
	}
	
	.just {
	text-align: justify;
	}
	
	/* Style pour le menu */
	#menu {
	position: relative; 
	left: 50%;
  	transform: translateX(-50%);
	display: inline-block;
	}
	
	nav > ul {
	margin: auto;
	padding: 0px;
	}
	
	nav li {
	display: inline-block;
	list-style-type: none;
	}
	
	nav > ul > li {
	float: left;
	position: relative;
	}
	
	.sous-menu {
	display: none;
	}
	
	.sous-sous-menu{
	display: none;
	}
	
	#hamburger {
	display: none;
	}
	
	#menu-mobile, #menu-mobile1 {
	display: none;
	}
	
	#burger_menu {
	display: block;
	}
	
	nav {
	background-color: #1a2944;
	}
	
	nav > ul::after {
	content: "";
	display: table;
	clear: both;
	}
	
	nav a {
	display: inline-block;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	}
	
	nav a:visited {
	color: #ffffff;
	}
	
	nav > ul > li > a {
	padding: 16px 18px 16px;
	color: #ffffff;
	}
	
	nav > ul > li > a:hover {
	color: #acd3ea;
	}
	
	nav li:hover .sous-menu {
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0px;
	z-index: 100000;
	border-top: 2px solid #d69e0e;
	}
	
	nav ul.sous-menu li:hover .sous-sous-menu {
	display: inline-block;
	position: absolute;
	margin-top: -50px;
	left: 240px;
	padding: 0px;
	z-index: 100000;
	border-top: 2px solid #d69e0e;
	}
	
	.sous-menu li a {
	padding: 15px 30px;
	color: #ffffff;
	width: 275px;
	}
	
	.sous-menu li a:hover {
	color: #acd3ea;
	}
	
	.sous-menu li:hover {
	background-color: #1a2944;
	}
	
	.sous-sous-menu li a {
	padding: 15px 30px;
	color: #ffffff;
	width: 275px;
	}
	
	.sous-sous-menu li:hover {
	background-color: #1a2944;
	}
	
	.principal {
	background-repeat: no-repeat;
	background-position: right;
	}
	
	.principal2 {
	background-repeat: no-repeat;
	background-position: right;
	}
	
	.principal .sous-menu {
	background-color: #1a2944;
	}
	
	.sous-sous-menu {
	background-color: #1a2944;
	}
	
	a.portail {
	color: #acd3ea;
	}
}

@media only screen and (min-width: 992px) {
	.image_accueil {
	display: inline-block;
	float: left;
	width: 65%;
	height: 850px;
	background-image: url('../Images/fleurs.jpg');
    background-repeat: no-repeat;
    background-size: cover;
	}
	
	.espace_fonction {
	display: inline-block;
	float: left;
	width: 65%;
	}
	
	.connexion_accueil {
	float: left;
	width: 35%;
	}
	
	.gros_titre_accueil {
	font-size: 60px;
	text-align: right;
	padding-top: 25px;
	padding-right: 30px;
	color: #ffffff;
	text-shadow: 2px 2px 2px black;
	}
	
	.titre_accueil {
	color: #ffffff;
	padding-top: 60px;
	padding-right: 30px;
	text-align: right;
	text-shadow: 2px 2px 2px black;
	}
} 


/* Polices d'écriture */

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 100;
  src: local('Raleway Thin Italic'), local('Raleway-ThinItalic'), url(../fonts/1Ptqg8zYS_SKggPNyCgwLrFoJfM.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 200;
  src: local('Raleway ExtraLight Italic'), local('Raleway-ExtraLightItalic'), url(../fonts/1Ptpg8zYS_SKggPNyCgwgqB_AtCd.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300;
  src: local('Raleway Light Italic'), local('Raleway-LightItalic'), url(../fonts/1Ptpg8zYS_SKggPNyCgw5qN_AtCd.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  src: local('Raleway Italic'), local('Raleway-Italic'), url(../fonts/1Ptsg8zYS_SKggPNyCg4TYFs.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: local('Raleway Medium Italic'), local('Raleway-MediumItalic'), url(../fonts/1Ptpg8zYS_SKggPNyCgwvqJ_AtCd.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 600;
  src: local('Raleway SemiBold Italic'), local('Raleway-SemiBoldItalic'), url(../fonts/1Ptpg8zYS_SKggPNyCgwkqV_AtCd.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 700;
  src: local('Raleway Bold Italic'), local('Raleway-BoldItalic'), url(../fonts/1Ptpg8zYS_SKggPNyCgw9qR_AtCd.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 800;
  src: local('Raleway ExtraBold Italic'), local('Raleway-ExtraBoldItalic'), url(../fonts/1Ptpg8zYS_SKggPNyCgw6qd_AtCd.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 900;
  src: local('Raleway Black Italic'), local('Raleway-BlackItalic'), url(../fonts/1Ptpg8zYS_SKggPNyCgwzqZ_AtCd.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  src: local('Raleway Thin'), local('Raleway-Thin'), url(../fonts/1Ptsg8zYS_SKggPNwE44TYFs.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 200;
  src: local('Raleway ExtraLight'), local('Raleway-ExtraLight'), url(../fonts/1Ptrg8zYS_SKggPNwOIpWqZPBg.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: local('Raleway Light'), local('Raleway-Light'), url(../fonts/1Ptrg8zYS_SKggPNwIYqWqZPBg.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(../fonts/1Ptug8zYS_SKggPNyC0ISQ.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: local('Raleway Medium'), local('Raleway-Medium'), url(../fonts/1Ptrg8zYS_SKggPNwN4rWqZPBg.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(../fonts/1Ptrg8zYS_SKggPNwPIsWqZPBg.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: local('Raleway Bold'), local('Raleway-Bold'), url(../fonts/1Ptrg8zYS_SKggPNwJYtWqZPBg.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  src: local('Raleway ExtraBold'), local('Raleway-ExtraBold'), url(../fonts/1Ptrg8zYS_SKggPNwIouWqZPBg.woff) format('woff');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
  src: local('Raleway Black'), local('Raleway-Black'), url(../fonts/1Ptrg8zYS_SKggPNwK4vWqZPBg.woff) format('woff');
}