@charset "utf-8";

/* erreur IE */
html {font-size: 100%; margin: 0; padding: 0;}	

/* class */
.float_left {float:left;}
.float_right {float:right;}
.anti_float {clear:both;}
.transition { -webkit-transition: all 0.2s linear;
              -moz-transition: all 0.2s linear;
              -o-transition: all 0.2s linear;
               transition: all 0.2s linear; }
.content {width: 80%; margin: 0 auto; max-width: 1500px;}
.inlineb {display: inline-block;}
.none {display: none;}

/* Deco */
.fullwhite {background-color: #fff; width: 100%; display: block;}
.rougeaccueil {width: 100%; height: 4px; background-color: red;}
.txtrouge {color: red;}
.txtfort {font-weight:bold}
.txtcenter {text-align: center;}
.txtjustify {text-align: justify;}
.txtunderl {text-decoration: underline;}
.txthtr {line-height: 60px;}
.txtsmall {font-size: small;}
.txtlarge {font-size: x-large;}
.txtlarger {font-size: xx-large;}
.espacecitation {margin-bottom: 5px; margin-top: 55px;}
.espacetop {margin-top: 25px; margin-left:10px;}
.espaceblanc {height: 15px; display: block; width: 100%;}
.httop {margin-top: 60px;}
.espacergt {padding-right: 25px;}

/* Base */
h1, h2, h3, h4, h5, h6, p {margin-top: 0; padding-right: 15px; padding-left: 15px;}
body {margin: 0; padding: 0;
	/*font-family: 'Ubuntu', sans-serif;*/
    font-family: 'Montserrat', sans-serif;
	background-color:#151010; color: black;}
header, section, footer, aside, nav, article, figure {display: block;}
a img { border: none;}

/* Header */
#accueiltop {width: 100%; background-image: url(../img/accueil/enseigne-small.jpg);
			background-size: cover; background-position: 50%; background-repeat: no-repeat;
			overflow: hidden; height: 590px; }
header {width: 100%;}

/* Nav */
div#accueiltop p {margin-top: 378px;  color: #fff; font-weight: bold;font-size: larger;}
div#accueiltop nav, #assistancemobile {width: 100%;}
div#accueiltop nav ul, #navmobile ul, #assistancemobile ul {margin : 0; padding : 0;list-style : none;}
div#accueiltop nav ul li, #navmobile ul li, #assistancemobile li {display : inline-block;}
header a.bttechnique {
 	width: 180px; 
 	height: 35px; 
 	line-height: 35px ; 
 	background-color: rgba(36, 64, 92, 0.6); 
 	padding: 0;
	cursor : pointer;
	color : #fff;
	display : block;
	text-align : center;
	text-decoration : none;
	border: none;
	margin: 0 15px;
	font-size: large;}
header a.bttechnique:hover, header a.bttechnique:active, header a.bttechnique:focus {
color: #000; background-color: rgba(187, 221, 255, 0.6);}
header a.btaccueil {
	cursor : pointer;
	color : #fff;
	display : block;
	text-align : center;
	text-decoration : none;
	padding: 10px 15px;
	border: solid #fff 3px;
	margin: 0 15px;
	font-size: x-large;
	background-color: rgba(17,15,15,0.6);
	width: 200px;
	border-radius: 10px;}
header a.btaccueil:hover, header a.btaccueil:active, header a.btaccueil:focus{
color : #000; background-color: rgba(255, 255, 255, 0.7); border-color: red;}
#navmobile, #assistancemobile {display: none; margin-top: 10px;}
#navmobile ul li a {
	cursor : pointer;
	color : #000;
	display : block;
	text-align : center;
	text-decoration : none;
	padding: 10px 15px;
	border: solid #000 3px;
	margin: 0 auto;
	font-size: x-large;
	background-color: rgba(1255, 255, 255, 1);
	width: 200px;}
#navmobile a:hover, #navmobile a:active, #navmobile a:focus {
	background-color: rgba(255, 0, 0, 1); color: #fff;}
#assistancemobile {margin: 0;}
#assistancemobile ul {background-color: rgb(58, 99, 141); width: 100%; margin: 0;}
#assistancemobile ul li {width: 48%; margin: 0 auto;}
#assistancemobile a {
	width: 100%; 
 	height: 35px; 
 	line-height: 35px ; 
 	background-color: rgb(58, 99, 141); 
 	padding: 0;
	cursor : pointer;
	color : #fff;
	display : block;
	text-align : center;
	text-decoration : none;
	border: solid #2b4973 1px;
	margin: 0 auto;
	font-size: medium;}
	
#assistancemobile a:hover, #assistancemobile a:active, #assistancemobile a:focus {
 	background-color: rgb(25, 56, 88); }

/* Article */
section {background-color: #fff; width: 100%;}
#bienvenue {width: 80%; margin: 40px auto;}
#imgcitation {margin-left: 40px; padding-left: 360px; min-height: 220px;
background-image: url(../img/accueil/serveur-pc-small.jpg);
background-repeat: no-repeat; background-position: top left;}

/* Footer */
footer {width: 100%; background-color:#151010; color:#fff; min-height: 150px; font-size: smaller; font-size: 1.1em;
background-image: url(../img/accueil/logo-footer.jpg); background-position: 90% top; background-repeat: no-repeat;}
footer nav {display:inline-block; width: 33%; float: left; margin-top: 15px;}
footer nav ul {list-style : none; margin: 0;}
footer nav a {color: #fff; cursor : pointer; text-decoration : underline;}
footer nav a:hover, footer nav a:active, footer nav a:focus {color: red;}

/* responsive */
@media only screen and (max-width:1190px) {
	#accueiltop {height: 450px;}
	div#accueiltop p {margin-top:250px;}
	#imgcitation {padding-left: 0px; padding-top: 240px; background-position: top center;}
}
@media only screen and (max-width:935px) {
	#accueiltop {height: 300px; background-position: top center;}
	.espacetop {margin-top:10px;}
	header a.bttechnique {width: 170px; font-size: large;}
	#navpc {display: none;}
	#navmobile {display: block;}
}
@media only screen and (max-width:710px) {
	#accueiltop {height: 240px;}
}
@media only screen and (max-width:600px) {
	#accueiltop {height: 240px;}
	#assistancepc {display: none;}
	#assistancemobile {display: block;}
}
@media only screen and (max-width:510px) {
	#accueiltop {height: 150px;}
	#imgcitation {padding-left: 0; margin: 0; padding-top: 120px;}
	#navmobile ul li a {margin-bottom: 10px;}
}
/*footer responsive*/
@media only screen and (max-width:630px) {
	footer {padding-bottom: 10px;}
}
@media only screen and (max-width:540px) {
	footer nav {display: block; width: 100%; float: none; padding: 10px; margin-top: 0;}
}
/*img responsive*/
@media only screen and (min-width:600px) {
	#accueiltop {background-image: url(../img/accueil/enseigne-large.jpg);}
}
@media only screen and (min-width:510px) {
	#imgcitation {background-image: url(../img/accueil/serveur-pc.jpg);}
}