/**
*
*	CSS spécifique aux supports mobiles
*	Adaptation pour le responsive 
*
*	@author		Raphaël Heckel
*	@creation	07.01.2015
**/

/**
*	Version tablette
*
**/

/* Titre de la page */
#titre-page-mob { 
    /*height: 28px;*/	
    width: 100%;
	color: #fff;
	font-size: 15px;
}
#titre-page-mob .container {
    padding: 4px 15px 4px 30px;
	width: 100%;	
}

#titre-page-mob .container #btn-second-menu {
	cursor: pointer;
    float: right;
    margin: -22px 0 0;
    right: 15px;
}

/*********************
*	Version mobile
*
**********************/
#nav-mobile {
	height: 54px;
	background-color: #000000;
	padding: 7px 0;
	z-index: 10000;
}
#nav-mobile #search-area-mobile {
	display: none;
	height: 30px;
	margin: 0 0 10px;
}
#nav-mobile #search-area-mobile input {
	width: 100%;
}
#nav-mobile #logo-mobile {
    background-color: #000;
    padding-bottom: 7px;
}
#nav-mobile #logo-mobile img { width: 160px; height: 40px; }
#nav-mobile #search-mobile {
    background-color: #000;
    cursor: pointer;
    margin: 0;
    padding: 0 0 6px 5px;
}
#nav-mobile #btn_menu_mobile {
	background-color: #000;
    cursor: pointer;
    padding-bottom: 10px;
    padding-left: 0;
    padding-top: 5px;
}

.main-container #container-central .small-carousel .carousel-inner.carousel-mobile {
	margin-left: 0;
    padding: 0;
}
.main-container #container-central .small-carousel #myCarouselMobile a.carousel-control { opacity: 1; }
.main-container #container-central .small-carousel #myCarouselMobile a.carousel-control.right { background-image: url("../images/fleche-blanche-droite.png"); }
.main-container #container-central .small-carousel #myCarouselMobile a.carousel-control.left { background-image: url("../images/fleche-blanche-gauche.png"); }

@media (min-width: 980px) and (max-width: 1023px) {
	#logo .container,
	#titre-page .container,
	.main-container .container,
	#footer_bottom { width: 100%; }
}

@media(max-width:1200px) {
	/* Menu ouvrant */
	.main-nav .content-nav .container { padding: 0 20px; }
	.main-nav .content-nav .box-nav { margin: 0 25px 0 0; }
	.main-nav .content-nav .box-nav.last {
		padding: 0 0 20px;
	}
	.main-nav .content-nav-title { padding: 2px 20px 2px 25px; }
	
	#logo { margin: 45px 0 167px; }
	#logo.open-menu { margin: 45px 0 650px; }
	
	#lvl-second { display: none; position: relative; height: auto; }
	#lvl-second .container { padding: 15px; }
	#lvl-second ul { padding: 0; }
	#lvl-second ul li { display: block; }
	
	#btn-transver {
		float: left;
		margin: -75px 0 0 30px;
		position: relative;
		z-index: 0;
	}
	
	#btn-legend {
		float: right;
		margin: -30px -70px 0 0;
		position: relative;
		z-index: 0;
	}
	#btn-legend.open-menu { display: none; }
	/* Légende */
	#legend { bottom: 30px; right: 20px; }
	
	#titre-page { 		
		position: relative;
		margin: 0 0 8px;
	}
	
	#b-2647 #titre-page { background-color: rgba(255, 121, 119, 0.8); }
	#b-2647 #lvl-second .container { background-color: #B85756; }
	#b-2648 #titre-page { background-color: rgba(61, 146, 201, 0.8); }
	#b-2648 #lvl-second .container { background-color: #275D7F; }
	#b-2649 #titre-page { background-color: rgba(77, 206, 190, 0.8); }
	#b-2649 #lvl-second .container { background-color: #277D6E; }
	#b-2650 #titre-page { background-color: rgba(255, 197, 37, 0.8); }
	#b-2650 #lvl-second .container { background-color: #A8780B; }
	#titre-page.open-menu { margin: 20px 0 8px; }
	#titre-page .container .box-titre {
		background-color: transparent !important;
		padding: 2px 0;
	}
	#b-2665 #logo { margin: 45px 0 217px; }
	#b-2665 #btn-transver { margin: -75px 0 0 30px; }
	.main-container a.externe { background-position-y: 0; }	
	
}

@media(max-width:992px) {
	body .container {
		width: auto;
	}
	
	.navbar #lang { margin: 0 5px; }
	.navbar #tools { margin: -21px 0 0; width: auto; }
	.navbar #tools ul { margin-left: 102px; }
	.navbar #tools ul li { width: 30px; }	
	
	/* Boîte des actualités */
	.main-container #container-annonce .area-4cols .col-md-3 {
		float: left;
		width: 33%;
	}
	
	/* Carousel */
	.main-container #container-central .big-carousel { width: 100%; }
	.main-container #container-central .small-carousel #myCarousel { width: 100%; }
	.main-container #container-central .small-carousel .carousel-inner { margin-left: 24px; }
	.main-container #container-central .small-carousel .carousel-inner .col-sm-3 { margin-right: 20px; }	
	
	/* BGE numérique */
	.main-container #container-central .area-3cols .col-md-4 { margin: 0 0 0 34px; width: 30%; } 
	.main-container #container-central .area-3cols .col-md-4 img { width: 100%; height: 100%; }
	#b-2665 #logo { margin: 45px 0 210px; }
	#b-2665 #btn-legend { margin: 0 -70px; }
	#b-2665 #btn-transver { margin: 0 0 10px 30px; }
	#b-2665 #titre-page-mob { margin: 285px 0 0; }
	
	/* Pied de page */
	#footer_top ul li { margin: 0; padding: 0 50px; display: inline-block; }
	#footer_top ul li a { padding: 10px 0 10px 0; }
	#footer_top .nav > li > a:hover { background-color: transparent;  } 
	#footer_bottom { padding:8px 8px 15px; }
	.container-footer { padding: 0; }
	#footer_bottom .row div.first { padding-left: 15px; }
	#footer_contact { padding: 10px 15px 0; }
}

/* Mode portrait pour les supports mobiles - portable */
@media(max-width:767px) {
	.navbar #lang { margin: 54px 5px; }
}

@media (max-width: 685px) {
	.main-container #container-annonce .area-4cols .col-md-3 { width: 100%; }
	.main-container #container-annonce .area-4cols .col-md-3.area-col3 { padding: 0; }
}

@media (max-width: 536px) {
	.navbar { margin-top: 54px; }	
	.navbar #lang { margin: 0px 5px; }
	#lvl-first, #logo { display: none; }
	#titre-page { margin: 360px 0 8px; }
	#btn-transver { margin: 285px 0 0 30px; }
	#btn-legend { margin: 330px -70px 0; display: none; }
	.main-nav .content-nav .box-nav { width: 100%; }
	.main-nav .content-nav .box-nav.last { float: none; margin: 0 64px 0 0; padding: 0; }
	.main-container #content .block img { width: 100%; height: 100%; }
	.main-container #content .block .csc-textpic-text p img { width: auto; }
	.main-container #content .block .csc-textpic-text p img.specialIcon,
	.main-container #content .block p img.specialIcon { width: 2.8em; height: 2.8em; }
	.main-container #container-central figure + figure { margin: 10px 0 0 0; }
	.main-container #container-central .carousel-inner { margin-left: 60px; }
	div#container-central div#content-map div.csc-textpic-text { display: inline-block; margin-top: 10px;  }
	.main-container #container-central .nav-tabs { height: 100%; }
	.main-container #container-central .nav-tabs > li { width: 100%; } 
	.main-container ul li a { background: transparent none no-repeat scroll left 0; }
	.main-container ul li h4 a { background: transparent none no-repeat scroll left 2px; }
	#footer_contact .row .col-md-3.last { height: 50px; }
	
	/* Agenda */
	.main-container #content .block.list-cal img {
		height: auto;
		width: auto;
	}
	
	/* abcdaire */
	#liste-abc a, #liste-abc span.liste-abc-letter { display: inline-block;  margin: 0 0 0 10px; width: 5% }
	
	/* BGE numérique */
	.main-container #container-central .area-3cols .col-md-4 { margin: 20px 0 0; width: 100%; } 
	#b-2665 #btn-transver { margin: 340px 0 10px 30px }
	#b-2665 #btn-legend { margin: 320px -70px 0 0; }	
	#b-2665 #titre-page-mob { margin: 415px 0 0; }
	
	/* Carousel */
	.main-container #container-central .well.small-carousel { padding: 0; }
	.main-container #container-central .small-carousel #myCarousel { width: 100%; }
	.carousel-inner { width: auto; }
	.carousel-inner .row div { padding: 0; }
}