* {position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-box-sizing: border-box; margin: 0px; padding: 0px; font-family: inherit; font-size: inherit;}
html {margin:0;  padding:0; height:100%;}
body {font-family: 'Abel', Arial, sans-serif; color: #2D2D2D; background-color: #fff; font-size: 10px; height: 95.9%}

/* harmonisation */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
h1, h2, h3, h4 {display: inherit; font-weight: inherit;}
button, img {border: 0}
button {cursor: pointer; text-align: left;}
ul, li {list-style: none;}
input, a {text-decoration: none; color: inherit; font-size: inherit; font-weight: inherit; font-family: inherit;}
strong {font-weight: bold;}
#content p {margin: 0 0 10px 0;}
.nofloat {clear: both}
.left {float: left;}
.right {float: right;}
.noleft {clear: left}
.droite {float: right;}
.abel {font-family: 'Abel', sans-serif;}
.error {border: 1px solid red !important;}
label.error {display: none!important;}
a:hover {color: #D60D08;}
#main {margin: 0 auto; width: 100%; height:100%;}
.row {margin: 0 auto;}
.bg {background: url(../images/bg-top.png)} 
.noiphone {display: block;white-space:nowrap;} 
.iphone {display: none;} 
 
/* HEADER */
header {background: url(../images/bg-top.png); margin: 4em 0 0 0; height: 10em;}
#tools {text-align: right; color: #fff; font-size: 1.2em;}
#tools span {margin: 0 5px 0 0;}
#tools #roadBookValue {position: absolute; left: 5px; top: 4px; color: #fff; font-weight: bold;}
#tools img {vertical-align: middle;}
#tools #meteo img {height: 30px;}
#tools #search {display: inline-block; margin-right: 10px;}
#tools #search input#searchTxt { border: 0; border-bottom: 1px solid #fff; background: none; padding: 0 0 2px 0; width: 100px;}
header #logo {float: left; width: 19%;}
header #logo h1{ text-indent: -1000px;}
header #logo img {width: 100%; max-width: 187px;}
header nav {text-transform: uppercase;}
header nav {float: left; width: 81%; margin: 40px 0 0 0; padding: 0 0 0 9%;}
header nav {
 display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
header nav ul li {float: left; width: auto; color: #fff; font-size: 1.7em; text-align: center; margin: 0 20px 0 0; height: 31px;position:relative;}
header nav ul li:after{content:"";position:absolute;width:1px;height:14px;top:3.5px;right:-10px;background-color:#fff;}
header nav ul li:last-of-type{ margin: 0 0px 0 0;}
header nav ul li:last-of-type:after{display:none;}
header nav ul li.s {width: 9%;width: auto;}
header nav ul li:hover {color: #D60D08;}
.menu {display: none; position: absolute; top: 30px; background: url(../images/bg-top.png); z-index: 50;}
.menu .minirow {}
.menu .blocRub {float: left; width: 25%; font-size: 0.8em; color: #fff; background-color: #4EA642;}
.menu .blocRub:hover {background-color: #D40C07; color: #fff;}
.menu .blocRub img {width: 100%; height: 130px;}
.menu .blocRub h3 {display: block; width: 100%;  height: 40px; padding: 20px 0 5px 10px; margin: 5px 0; text-align: left;}
.menu .blocRub h3 a:hover {color: #fff;}
header nav ul li:hover .menu {display: block;} 


/* HEADER INT */
#header_int {height: 260px;}
#header_int header {margin: 0;  width: 100%; position: fixed; z-index: 1000;}
	
/* PROGRESSION */	
#prog {display: inline-block; padding: 0 0 0 10px; background: url(../images/separfond.gif) repeat-x; height: 24px; color: #fff; text-transform: uppercase; font-size: 1.3em;}
#prog a:hover {color: #DEDEDE;}
#prog img {vertical-align: middle;}
#prog img.separ {margin: 0 5px;}

/* news */
#actuControl {position: relative; width: 35%; color: #fff; font-size: 1.3em; padding: 5px 10px; text-transform: uppercase; margin: 0 0 5px 0;}
#news {position: relative; width: 35%; color: #fff; font-size: 1.3em; padding: 5px 10px; height: 150px; }
#news .blocActu .image {float: left; margin: 5px; width: 35%;}
#news .blocActu .desc {float: left; margin: 5px; width: 55%;}

/* SHARE */
#share {position: fixed; top:30%; width: 45px; background: url(../images/bg-top.png);}
#share .a2a_default_style .a2a_svg {float: none !important; margin: 0.5em 0 0.5em 0.5em;}

/* FOOTER */
footer {background: #fff; position: relative; width: 100%; margin-top: 2%; padding: 20px 0; color: #000;}
footer#footHome {
    /*position: absolute; bottom: 0; left: 0; margin: 0;*/
    position: relative;
    bottom: 0;
    left: 0;
    margin: 100px 0 0 0;

}
#curator-feed-default-feed-layout{
        max-width: 950px;
    width: calc(100% - 60px);
    margin: 0 auto;
}
footer .col {float: left; width: auto; min-width: 18%;  margin: 0 10px 0 0;min-height: 170px;}
footer .bord {border-left: 1px solid #D50C07;padding: 0 15px; }
footer .col .titre {font-size: 1.8em; margin: 0 0 5px 0;}
footer .col .mention {font-size: 1.3em; font-weight: bold;}
footer .col .mention a:hover {color: #7D7C7C;}
footer #mention {text-align: right;}
footer #mention span {display: inline-block; margin-right: 3%;}
	
/* CONTENU */
.warning {font-size: 1.5em; font-style: italic;}
#contenu {float: left; padding: 5em 0 0 0; width: 78%; margin-right: 2%; min-height: 500px;}
#contenu h1 {color: #D60D08; font-size: 2.4em; text-transform: uppercase; width: 80%;}
#contenu h2 {color: #000; font-size: 1.8em; text-transform: uppercase; margin: 2% 0 1% 0;}
#contenu .decal {margin-left: 3%; font-size: 1.4em;}
#contenu #print {float: right; width: 100px;}
#contenu #print img {vertical-align: middle; float: left; margin: 0 5px 0 0 ;filter : alpha(opacity=50); opacity : 0.5;}
#contenu #print:hover img {filter : alpha(opacity=30); opacity : 0.3;}

#contenu #mode {text-align: right;}
#contenu #mode .btn {background: #A1A097; display:inline-block; padding: 1% 2%; font-size: 1.2em; color: #4E4C3D; text-transform: uppercase; margin: 0 0 1% 0}
#contenu #mode .btn:hover, #contenu #mode .btnOn {background: #4E4C3D; color: #fff;}
#contenu .desc {color: #000; font-size: 1.4em; margin: 1% 0; padding: 0 0 1% 0;}
#contenu .separ { border-bottom: 1px solid #59574D;}
#contenu .blocRub {margin: 2% 1% 2% 0; border-bottom: 1px solid #59574D; font-family: 'Montserrat', sans-serif;}
#contenu .blocRub .illus {position: relative; float: left; margin: 0 1% 1% 0; width: 15%;}
#contenu .blocRub .illus img.illus {width: 100%}
#contenu .blocRub .illus img.coeur {position: absolute; top: 20%; left: 25%;}
#contenu .blocRub h2 {font-size: 2em; text-transform: uppercase; color: #D60D08; margin-bottom: 1%;}
#contenu .blocRub h2 .more{font-size: 0.8em; text-transform: uppercase; color: #fff; background: #5BBE30;  padding: 0 1%; margin-left: 1%}
#contenu .blocRub .info {float: left; width: 70%; padding: 0 1.5% 0 0;}
#contenu .blocRub h3 {font-size: 1.6em; text-transform: uppercase; color: #2D9001; margin-bottom: 1%;}
#contenu .blocRub h3 span.coeur {color: #2F2F2F; margin-right: 1.5%}
#contenu .blocRub .info .intro {font-size: 1.2em; color: #898989;}
#contenu .blocRub .detail {float: left; width: 12%;}
#contenu .blocRub .detail .more{font-size: 1.4em; width: 100%; display: block; text-align: center; text-transform: uppercase; color: #fff; background: #5BBE30;  padding: 0 1%; margin-left: 1%}

#contenu .blocOffre {margin: 2% 1% 2% 0; border-bottom: 1px solid #59574D; font-family: 'Montserrat', sans-serif; padding: 1% 0;}
#contenu .blocOffre .illus {position: relative; float: left; margin: 0 1% 1% 0; width: 25%; max-height: 150px;}
#contenu .blocOffre .illus img.illus {width: 100%;}
#contenu .blocOffre .illus img.coeur {position: absolute; top: 20%; left: 35%;}
#contenu .blocOffre h2 {font-size: 2em; color: #2F2F2F; margin-bottom: 1%;}
#contenu .blocOffre h2 .mini {font-size: 0.7em;}
#contenu .blocOffre h2 .ville{font-size: 0.8em; color: #5BBE30;}
#contenu .blocOffre .info {float: left; width: 50%; padding: 0 1.5% 0 0;}
#contenu .blocOffre h3 {font-size: 1.6em; text-transform: uppercase; color: #2D9001; margin-bottom: 1%;}
#contenu .blocOffre h3 span.coeur {color: #2F2F2F; margin-right: 1.5%}
#contenu .blocOffre .info .intro {font-size: 1.2em; color: #898989;}
#contenu .blocOffre .picto {height: 20px; margin: 2% 2px 0 0;}
#contenu .blocOffre .detail {float: left; width: 20%;}
#contenu .blocOffre .detail .more{margin-top: 5%; font-size: 1.4em; width: 100%; display: block; text-align: center; text-transform: uppercase; color: #fff; background: #5BBE30;  padding: 0 1%; margin-left: 1%}

#contenu .blocOffre .minicarte {position: relative; float: left; margin: 0; width: 25%; border: 1px solid red;}
#contenu #illus {width: 60%; }
#carto .titre {color: #D60D08; font-size: 1.5em; text-transform: uppercase;}
#carto .desc {font-size: 1.0em;}
#carto .more {font-size: 1.1em; width: 50%; display: block; text-align: center; text-transform: uppercase; color: #fff; background: #5BBE30;  padding: 0 1%; margin-left: 1%}

#offre {float: left; padding: 5em 0 0 0; width: 78%; margin-right: 2%;}
#offre h1 {color: #D60D08; font-size: 2.4em; text-transform: uppercase; margin: 0 0 1% 0; width: 80%}
#offre h1 .mini {font-size: 0.7em; margin-right: 5px; }
#offre #addRoadBook {float: right; width: 100px;}
#offre #addRoadBook img {vertical-align: middle; float: left; margin: 0 5px 0 0 ;}
#offre #addRoadBook:hover img {filter : alpha(opacity=50); opacity : 0.5;}
#offre .top, #contenu .top  { background: #DEDEDE;}
#offre #illus {float: left; width: 60%; }
#offre #info {float: left; width: 40%; padding: 2% 3%; font-size: 1.4em;}
#offre #info .titre {color: #D60D08; font-size: 1.2em; text-transform: uppercase; margin: 0 0 1% 0;}
#offre #info .picto {height: 34px; margin-right: 2px;}

#contact label {float: left; width: 20%; text-transform: uppercase;}
#contact .inputBox, #contact .textBox {float: left; width: 40%; border: 1px solid #2D2D2D; min-height: 2em;}
#contact .btn {border: none; color: #fff; background: #2d2d2d; font-size: 1.5em; padding: 0% 3%; text-transform: uppercase;}

#carousel {background: #fff; padding: 2% 0 0 0;}
#carousel .slides > li {margin: 0 1px;}
#offre .bottom {margin-top: 2%}
#offre #tabs {float: left; width: 60%; }
#tabs ul {margin:0px; padding:0px;width: 100%;}
#tabs ul li {list-style:none; background: #A1A097; display:inline-block; padding: 2%; font-size: 1.5em; color: #4E4C3D; text-transform: uppercase;}
#tabs ul li.active {background: #4E4C3D; color: #fff;}
#tabs ul li:hover { background: #4E4C3D; color: #fff;}
#tabs div {padding: 5% 3%; width:100%; background:#fff; border: 1px solid #A1A097; min-height: 240px; font-size: 1.4em;}
#tabs .picto {height: 30px; margin-right: 2px;}
#tabs .label {font-weight: bold; margin: 0 0 5px 0;}
#offre #gmap {float: left; margin: 36px 0 0 2%; width: 38% !important;}
#offre #gmap iframe {width: 100%!important;}
#offre #infoRub {margin: 2% 0; font-size: 1.4em;}

#droite {float: left; padding: 5em 0 0 0; width: 20%;}
#droite .bloc {margin: 0 0 3% 0;}
#droite .bloc .content {background: #ccc; padding: 6% 4%; }
#droite .bloc .content .titre {font-size: 1.5em; font-weight: bold; color: #2E8A09; text-transform: uppercase; margin: 0 0 2% 0; border-bottom: 1px solid #000; }
#droite .bloc .content a {font-size: 1.3em;}
#droite .bloc .content a:hover {color: #D60D08;}
#searchOffre {background: #C62F12; padding: 6% 4%; font-size: 1.3em}
#searchOffre .titre {font-size: 1.5em; font-weight: bold; color: #fff; text-transform: uppercase; margin: 0 0 2% 0;}
#searchOffre label {color: #fff; font-size: 1.2em; margin: 4% 0; display: block;}
#searchOffre select.field, #searchOffre input.field {background: #fff; color: #000; width: 95%;}
#searchOffre .submit {background: #4E4C3D; border: none; padding: 1% 2%;}

.row {width: 950px;}
.minirow {width: 780px;}
/***** > 1280px *****/
 
/***** 1024px ipad paysage *****/
@media only screen and (min-width:790px) and (max-width:1024px) {	
.row {width: 100%}
	header {margin-top: 2em}
	#main {min-height: 760px;}
	#share {display: none;}
	.noiphone {display: none;} 
	.iphone {display: block;white-space:nowrap;} 
	#header_int {height: 160px;}
	header nav {padding: 0 0 0 5%;} 
	header nav ul li {font-size: 1.5em; margin: 0 3.0% 0 0;margin: 0 15px 0 0;}
        header nav ul li:after{height:12px;top:3.5px;right:-7.5px;}
	header nav ul li:last-of-type {margin: 0 15px 0 0;}
	header nav ul li.s {width: 10%;width: auto;}
	#actuControl, #news {width: 40%}
	footer {padding: 10px 0;}
	footer .col {margin: 0; max-width: 31%;}
	footer .col img {max-width: 100%}	
	#contenu, #offre {padding-left: 1em; float: none; width: 98%;}
	#droite {padding-left: 1em; float: none; width: 98%;}
	#droite .bloc {float: left; width: 20%; margin-right: 1%;}
	#tabs ul li {padding: 2% 3%;} 
}
@media only screen and (max-height:875px){
	footer#footHome {position: relative; margin-top: 5%}
}
/***** 768px ipad portrait *****/
@media only screen and (min-width:641px) and (max-width:790px) {
	.row {width: 100%}
	header {margin-top: 2em}
	#share {display: none;}
	.noiphone {display: none;} 
	.iphone {display: block;white-space:nowrap;} 
	#header_int {height: 230px;}
	header nav {padding: 0 0 0 5%;} 
	header nav ul li {font-size: 1.5em; margin: 0 3.0% 0 0;margin: 0 10px 0 0;}
        header nav ul li:after{height:12px;top:3.5px;right:-5px;}
        header nav ul li:last-of-type {margin: 0 10px 0 0;}
	header nav ul li.s {width: 10%;width: auto;}
	#actuControl, #news {width: 40%}
	footer {padding: 10px 0;}
	footer .col {margin: 0; max-width: 31%;}
	footer .col img {max-width: 100%}	
	#contenu, #offre {padding-left: 1em; float: none; width: 98%;}
	#droite {padding-left: 1em; float: none; width: 98%;}
	#droite .bloc {float: left; width: 20%; margin-right: 1%;}
	#tabs ul li {padding: 2% 3%;}
}
/***** 640px iphone paysage *****/
@media only screen and (min-width: 361px) and (max-width:640px) {
	.row {width: 100%}
	header {margin-top: 1em}
	#share {display: none;}
	.noiphone {display: none;} 
	.iphone {display: block;} 
	#header_int {height: 200px;}
	header nav {padding: 0 0 0 5%;} 
	header nav ul li {font-size: 1.3em; margin: 0 3.0% 0 0;}
	header nav ul li.s {width: 10%}
	header nav ul li.p {width: 7% !important}
	.menu .blocRub {font-size: 1em;}
	.menu .blocRub h3 {padding-top: 10px;}
	#main {min-height: 950px;}
	#actuControl, #news {width: 50%}
	footer {padding: 10px 0;}
	footer .col {margin: 0; width: 50%;}
	/*footer .picto {margin: 0; width: 100% !important; text-align: center; max-width: 100%;}*/
	footer .col img {max-width: 80%; margin: 0 5%;}
	#contenu, #offre {padding-left: 1em; float: none; width: 98%;}
	#droite {padding-left: 1em; float: none; width: 98%;}
	#droite .bloc {float: left; width: 20%; margin-right: 1%;}	
	#contenu .blocRub h2, #contenu .blocOffre h2 {font-size: 1.8em;}
	#contenu .blocRub .illus {width: 25%;}
	#contenu .blocRub .info  {width: 60%;}
	#contenu .blocRub .detail {width: 14%;}
	#contenu .blocOffre .info {width: 45%;}
	#contenu .blocOffre .detail {width: 29%;}	
	#tabs ul li {padding: 2% 1%;}
	#offre #tabs {float: none; width: 100%}
	#offre #gmap  {float: none; width: 100% !important; margin: 15px 0 0 0;}
}
/***** 360px iphone portrait *****/
@media only screen and (max-width:360px) {
.row {width: 100%}
	header {margin-top: 1em; height: auto;}	
	.noiphone {display: none;} 
	.iphone {display: block;} 
	#tools #search {width: 45%}
	#share {display: none;}
	header #logo {width: 45%; float: none}
	#header_int {height: 178px;}
	header nav { margin: 0; padding: 0; float: none; width: 100%; border-top: 6px solid #fff; border-bottom: 6px solid #fff; height: 70px;} 
	header nav ul li {width: 22%; font-size: 1.4em; margin: 0 3.0% 0 0;}
	header nav ul li.s {width: 20%}
	header nav ul li.p {width: 0% !important; margin: 0 !important;}
	.menu .blocRub {font-size: 1em; width: 50%;}
	.menu .blocRub h3 {padding-top: 10px;}
	#main {min-height: 1120px;}
	#actuControl, #news {width: 90%}
	footer {padding: 10px 0;}
	footer .bord {border: none; border-bottom: 1px solid #D50C07; padding: 15px;}
	footer .col {margin: 0 1em ;width: 94%; min-height: inherit;}
	footer .picto {margin: 0; width: 100% !important; text-align: center; max-width: 100%;}
	footer .col img {max-width: 85%; margin: 0 5%;}
	#contenu, #offre {padding-left: 1em; float: none; width: 98%;}
	#droite {padding: 1em 0 0 1em; float: none; width: 98%;}
	#droite .bloc {float: left; width: 100%;}	
	#contenu .blocRub h2, #contenu .blocOffre h2 {font-size: 1.5em;}
	#contenu .blocRub h2 .more {display: block; width: 8em;}
	#contenu .blocRub .detail .more {font-size: 1.2em}
	#contenu .blocRub .illus {width: 50%;}
	#contenu .blocRub .info  {width: 80%;}
	#contenu .blocRub .detail {width: 20%;}
	#contenu .blocOffre .illus {width: 50%; float: left;}
	#contenu .blocOffre h2 {width: 48%; float: left;}
	#contenu .blocOffre .info {width: 100%; clear: left; float: none;}
	#contenu .blocOffre .detail {width: 100%; clear: left; float: none; font-size: 1.1em;}
	#contenu .blocOffre .detail .more {width: 48%; float: right;}	
	#tabs ul li {padding: 2% 1%;}
	#offre #illus, #offre #info {width: 100%; float: none;}
	#carousel {display: none;}
	#offre #info {margin-top: 1em;}
	#offre #tabs {float: none; width: 100%}
	#offre #gmap  {float: none; width: 100% !important; margin: 15px 0 0 0;}
}