/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,600,700);


* {margin: 0;padding: 0;outline: none}
* { margin: 0; padding: 0; outline: none; box-sizing:border-box}
img,object,embed {max-width: 100%;height: auto;}
section,article,header,footer,nav,aside,hgroup {display: block;}
body { font-family: 'Raleway', sans-serif; background: #fff ;  }
img { border: none }

a { transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    -ms-transition: all ease 0.4s;
    -o-transition: all ease 0.4s;
    -webkit-transition: all ease 0.4s;
}

/*-------------------------- STRUCTURE -------------------------------*/

#top{  width: 100%; float: left; background:#006699; padding:3px 0;}
#top h1{ color:#fff; font-size: 14px; font-weight: normal}

/* HEADER */
#header{ width: 100%; float: left; background:#fff}

#logo { float:left; margin-top:1em;}

#right{ float: right; width: 65%; background:#f7f7f7;}
#right #tel{ float: right; text-align: right; display: block; width: auto; font-size: 26px;  padding: 15px 0; padding-left:50px; color: #006699;}
#right #tel a{ text-decoration: none; color: #006699; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 28px;}
#bandeau{  width:100%; background:#006699;  float:left; overflow:hidden;}
#bandeau .content{ position:relative;}
#bandeau #message{ position:absolute; left:0; height:100%; width:100%; z-index:3; background:rgba(0,102,153,0.4);}
#bandeau #message #container { display:flex; flex-direction:column; justify-content:center;height:100%; }
#bandeau #message p{ text-align: center; color:#fff;}
#bandeau #message p.titre{ font-size: 30px; font-weight: 700 }
#bandeau #message p.accroche{ font-size: 20px; }
#bandeau .cycle-slideshow{ width:100%;z-index: 2;}
#bandeau #cycle-slideshow img{ z-index: 3  }

#wrapper{width: 100%; float:left; padding: 30px 0; text-align: center}

#wrapper .qualifications {max-width:940px; display:flex; flex-flow: row; justify-content: space-around; align-items: stretch; margin: 0 auto 1.5em auto;}
#wrapper .qualifications img {height:6em;object-fit: contain;}

.content { width:100%; margin: 0 auto; max-width: 960px; }
.content.city { color: #aaaaaa; font-size: 0.7em; text-align: justify; }
.content.body p { margin:1em 0; font-size: 0.9em; color:#006699; }
.content.body p a { color:#006699; }
.liste { list-style: none; font-size:0.9em; display:flex; flex-flow: row wrap; justify-content: center; }
.liste li { padding:0.5em 1em; font-size:0.8em; font-weight: 600; margin:0.5em; color:#006699; }

.liste.marques { }
.liste.marques li { border:1px solid #006699; }

.liste.images { }
.liste.images li { }

.titre-body { font-weight: 600; background-color: #006699; color: white; padding: 0.5em 1em; }
.tel-body { text-align: center; width:100%; background: #006699; padding:0.5em 1em; font-size: 1em; text-decoration: none; color:white; font-style: italic; text-decoration: underline;}
.tel-body a { background: rgba(255,255,255,0.5); padding:0.5em 1em; font-size: 1.3em; text-decoration: none; color:white; font-weight: 800; transform: rotate(-5deg); display:inline-block;}

#avantages{ width: 100%; float:left; margin: 30px 0;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3f3f3+1,f3f3f3+44,f3f3f3+44,ffffff+44,ffffff+100 */
            background: #f3f3f3; /* Old browsers */
            background: -moz-linear-gradient(top,  #f3f3f3 1%, #f3f3f3 44%, #f3f3f3 44%, #ffffff 44%, #ffffff 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top,  #f3f3f3 1%,#f3f3f3 44%,#f3f3f3 44%,#ffffff 44%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom,  #f3f3f3 1%,#f3f3f3 44%,#f3f3f3 44%,#ffffff 44%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
#avantages .content {display:flex; flex-flow: row; flex-align: center;}
#avantages article{ flex:1; float: left}
#avantages article p.title{ font-size: 20px; color:#025f9a; padding: 10px 0}
#avantages article p.desc{ font-size: 14px; padding: 0 30px}

h2,h3{ text-transform:uppercase; color:#006699; margin:10px 0 30px 0; font-weight:normal; border-top: 1px solid #006699; display:block; width:100%; float:left; padding-top:10px}
h4{ text-transform:uppercase; color:#006699; margin:5px 0 20px 0; font-weight:normal; display:block; width:100%; float:left; padding-top:5px; font-weight: 600; font-size: 0.82em;}

.mail, .phone{ display:inline-block; margin:0 10px; width:30%; padding:20px 0; text-decoration:none; text-transform:uppercase; color:#fff; font-size:20px; margin-top:30px}
.mail{ background:#c5d602}
.phone{ background:#006699}

.form-contact { width:60vw; margin: 4em auto; }
.form-contact fieldset { color: #006699; border: 1px dashed #006699; padding: .8em; margin-bottom: 2em;}
.form-contact fieldset legend { background: white; padding: 0 .5em;}
.form-contact .row { display:flex; flex-flow: row; text-align:left; margin: 1em 0}
.form-contact .row .submit { text-align: center; flex: 1; }
.form-contact .row .label { flex:1;  }
.form-contact .row .element { flex:3; }
.form-contact .row .element input[type="text"],.form-contact .row .element input[type="email"],.form-contact .row .element select { width: 98%; height:2em;}
.form-contact .row .element textarea { width: 100%; min-height: 10em;}
.form-contact .row .submit input[type="submit"] { font-weight:bold; text-transform:uppercase; color: white; background: #006699; border: none; padding: 1em 1.5em; width:80%; }
.form-contact .row .submit input[type="submit"]:hover { background: #006699; border: none; cursor: pointer; transform: scale(1.2); transition: 1s;}

#footer{ background:#333; width:100%; float:left;}
#footer .article{ width:33%; float:left; padding:0 0 20px 0; text-align:center; color:grey;}
#footer .article a { color:grey; text-decoration: none;}
#footer .article a:hover { color:grey; }
#footer .article .titre-footer{ text-align:center; text-transform:uppercase; color:#3399cc; font-size:16px; font-weight:normal; margin-bottom:30px; border-top:4px solid #3399cc; display:inline-block; padding-top:20px}
.myhr{ border:none; width:100%; clear:both}
#footer ul{ list-style-position:inside; list-style-type:circle; color:#999; width:48%; float:left; margin-right:2%}
#footer ul li{  border-bottom:1px solid #000; padding:3px 0; text-align:left}
#footer ul li a{ text-decoration:none; color:#999; font-size:12px; display:inline-block}
#footer ul li:hover{  background:#000}
#footer #copyright { background:#006699; color:#fff; font-size:12px; width:100%; float:left; text-align:center; padding:10px;}
#footer #copyright a { color:white; }
#footer #copyright a:hover {}

@media all and (max-width: 600px) {
    #top{ text-align:center}
    #logo{ width:100%; display:inline-block; text-align:center}
    #right{ float: right; width: 100%; background:#f7f7f7}
    #right  #nav a:hover { background:#006699; color:#fff}
    #avantages .content article { width:22vw;}
    #avantages .content article .title { font-size:0.9em;}
    .mail, .phone{ display:inline-block; margin:20px 2%; width:45%; }
    .tel-body { line-height: 2.3em;}

    .form-contact { width:90vw; margin: 4em auto; }
    .form-contact fieldset { color: #006699; border: 1px dashed #006699; padding: 0.8em; margin-bottom: 2em;}
    .form-contact .row { display: flex; flex-flow: column; text-align:left; margin: 1em 0}
    .form-contact .row .label { flex: 1; margin-bottom: 0.5em;}
    .form-contact .row .element { flex: 1; }
    .form-contact .row .submit { flex: 1; }
    .form-contact .row .submit input[type="submit"] { font-size: 0.8rem; width: 90%; padding: 0.4em 0.3em }
    
    #footer .article{ width:100%;}
    #wrapper .qualifications {display:flex; align-items: stretch; flex-flow: row wrap; margin: 0 0 1.5em 0;}
    #wrapper .qualifications img {width:23vw;object-fit: contain; margin: 0;}
}

@media all and (max-width: 450px) {
    .mail, .phone{ display:inline-block; margin:10px 0; width:70%; }
    #bandeau #message{ width:100%; padding:30px 0}
    #bandeau #message p.titre{ font-size:20px;}
    #bandeau #message p.accroche{ font-size:13px;}
    #bandeau #offre{ display:none;}
    #avantages .content {}
    #avantages .content article { width:22vw;}
    #avantages .content article .title { font-size:0.7em;}
    #avantages .content article p.desc{ display:none; }
    #wrapper .qualifications img {width:23vw; object-fit: contain; margin: 0;}
    .liste.images { }
    .liste.images li:nth-child(2n) { display:none;}
}