@CHARSET "UTF-8";
@import url("indieflower/stylesheet.css");
@import url("Lato_Italic/stylesheet.css");


/* ATTENTION AUX IMAGES PNG 
note : si l'on met côte à côte une image png contenant un aplat et l'on juxtapose un aplat en hexadécimal html
on peut noter une différence de luminosité sous ie et safari
il faut supprimer la couche GAMA du fichier PNG (avec l'outil tweakpng par exemple). Ca marche... sauf que le problème reste entier sous Mac / Safari.
****************************************/

body {
	font-family: "Helvetica", Georgia, Verdana, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	background-color: #FFFFFF;
	background-image: url(images/fond_page_texture_3.png);
	background-repeat: no-repeat;
	background-position: center top;
}

/* Changement de Couleur de sélection de texte - ne fonctionne pas sur IE */
*::selection {
	background:#f90392;
	color:#fff;
}

*::-moz-selection {
	background:#f90392;
	color:#fff;
}

*::-webkit-selection {
	background:#f90392;
	color:#fff;
}


/*FIX JQUERY FADIN FADOUT pour IE */
.logoMM img {
	background: transparent;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
	zoom: 1;

}

/* Liens - par default
****************************************/
a {
	color: #254262;
	text-decoration: none;
}



/* Polices ajoutées / @FONT FACE 
****************************************/
@font-face {
    font-family: 'LatoItalic';
    src: url('fonts/Lato-Italic-webfont.eot');
    src: url('fonts/Lato-Italic-webfont-.eot#iefix') format('embedded-opentype'),
         url('fonts/Lato-Italic-webfont.woff') format('woff'),
         url('fonts/Lato-Italic-webfont.ttf') format('truetype'),
         url('fonts/Lato-Italic-webfont.svg#LatoItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LatoRegular';
    src: url('fonts/Lato-Regular-webfont.eot');
    src: url('fonts/Lato-Regular-webfont-.eot#iefix') format('embedded-opentype'),
         url('fonts/Lato-Regular-webfont.woff') format('woff'),
         url('fonts/Lato-Regular-webfont.ttf') format('truetype'),
         url('fonts/Lato-Regular-webfont.svg#LatoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'IndieFlowerRegular';
    src: url('fonts/indieflower-webfont.eot');
    src: url('fonts/indieflower-webfont-.eot#iefix') format('embedded-opentype'),
         url('fonts/indieflower-webfont.woff') format('woff'),
         url('fonts/indieflower-webfont.ttf') format('truetype'),
         url('fonts/indieflower-webfont.svg#IndieFlowerRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h2 {
	font-size: 150%;
	font-family: "Lato Italic";
	font-weight: normal;
}
h3 {font-size:120%; font-family: 'LatoItalic', helvetica, serif; font-weight: normal;}


/* Polices ajoutées / attention, un lien doit être établi avec l'API de GOOGLE FONTS
****************************************/
.fontGeorgia {
	font-family: Georgia, serif;
}
.fontRaleway {
	font-family: 'Raleway', serif;
	font-style: normal;
	font-weight: 400;
}
.fontCabinSketch {
	font-family: 'Cabin Sketch', serif;
	font-style: normal;
	font-weight: 400;
}
.fontIndieFlower {
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: regular;
}
.fontLatoRegular {
	font-family: 'LatoRegular', serif;
	font-style: normal;
	font-weight: regular;
}



/* INPUT CHAMPS PERSONNALISES
****************************************/

label.invalid {
	font-family: 'IndieFlowerRegular', serif;
	color: #fe0202; /* rouge */
	font-size: 85%;
	clear: both;
	background: url("images/icon_invalid.png") center left no-repeat;
	display: block;
	height: 25px;
	line-height: 25px;
	margin: 5px 0 0 0;
	padding: 0 0 0 15px;
	text-align: left;
}
label.valid {
	font-family: 'IndieFlowerRegular', serif;
	color: #cccccc; /* gris  */ 
	font-size: 85%;
	clear: both;
	background: none;
	display: block;
	height: 25px;
	line-height: 25px;
	margin: 5px 0 0 0;
	padding: 0;
	text-align: left;
}
.inscription_message_confirmation {
	font-family: 'IndieFlowerRegular', serif;
	font-size: 100%;
	clear: both;
	background: url("images/icon_valid.png") top left no-repeat;
	display: block;
	margin: 5px 0 0 0;
	padding: 0;
	text-indent: 20px;
	text-align: left;
}
input.btn_newsletter_submit {
	float: left;
	width: 35px;
    height: 36px;
	line-height: 36px;
	margin: 0 0 0 5px;
    padding: 0;
    cursor: pointer;
	text-align: center;
	background: url("images/btn_fonce_ok.png") top left no-repeat;
	border: none;
    color: #8D8D8D;
    font-size: 80%;
	font-weight: bold;
	text-transform: uppercase;
}
input.btn_newsletter_submit:hover {
	background-position: bottom left; 
	color: #333333;
}
.inputFonce input[type=text], .textareaFonce textarea{
	padding:6px;
	font-size:12px;
	color:#4b484b;
	border:2px solid #242324;
	background: #171617;
}
.inputFonce input[type=text]:hover, .textareaFonce textarea:hover{
	border:2px solid #242324;
	background: #292829;
}
.inputFonce input[type=text]:focus, .textareaFonce textarea:focus{
	-moz-box-shadow: 1px 1px 3px #ebebeb, 1px 1px 2px rgba(106, 106, 105, 0.1) inset;
	border:2px solid #242324;
	background: #292829;
}
input[type=text], input[type=password], textarea{
	padding:6px;
	font-size:12px;
	color:#292D31;
	border:2px solid #b6bbbd;
	background:white url('images/input_background_clair.gif') repeat-x top left;
}

select {
	padding:6px;
	font-size:12px;
	color:#292D31;
	border:2px solid #b6bbbd;
	background:white url('images/input_background_clair.gif') repeat-x top left;
}



.separation_dt_ombre_4px {background:url(images/separation_dt_ombre_4px.png) left center repeat-x;}
.separation_dt_ombre_fonce_4px {background:url(images/separation_dt_ombre_fonce_4px.png) left center repeat-x;}

.separation_pointille_ombre_4px {background:url(images/separation_pointille_ombre_4px.png) left center repeat-x;}
.separation_pointille_ombre_clair_4px {background:url(images/separation_pointille_ombre_clair_4px.png) left center repeat-x;}
.separation_pointille_ombre_fonce_5px {background:url(images/separation_pointille_ombre_fonce_5px.png) left center repeat-x;}



/* ______________________________________CONTENEUR________________________________________________  */

#conteneur {
	width: 990px;
	margin: 0 auto; /* pour firefox, centrage*/
	padding: 0;
	text-align: right;
	font-size: 100%;
}

/* Barre entête ****************************************/
#barre_haute {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 4;
}
#barre_entete {
    -moz-border-radius: 0 0 5px 5px;
    background: none;
    border-bottom: 1px solid #ECECEC;
    border-left: 1px solid #ECECEC;
    border-right: 1px solid #ECECEC;
    color: #CECECE;
    height: 20px;
    margin: 0 auto;
    max-width: 1100px;
    min-width: 980px;
    padding: 8px;
    width: 90%;
}

/* ____________________________________MENU droite HAUT ______________________________*/

ul#menu {
	width: 580px;
	height: 67px;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul#menu li {
	float: left;
	display: block;
	height: 67px;
	padding: 0;
	margin: 0;
	text-align: left;
}
ul#menu li a {   
	display: block; /* indispensable pour un menu "image" */
	border: none;
	height: 67px;
	line-height: 67px;/* astuce pour centrer verticalement une seule ligne de texte*/
	font-weight: bold;
	color: #767d64; 
	padding: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none; /* transform le texte en majuscules, autres : lowercase (all mini), capitalize (first lettre maj) et none*/
	overflow: hidden;
}  

#menu li a {
	display: block;
	line-height: 67px;
	text-indent: -5000px;/*Vire le txt a -5000*/
	overflow: hidden;
	background-position: center top;
}	
	#menu li.active a, ul#menu li.active a:hover {
		background-position: center bottom;
	}
	#menu li a:hover {
		background-position: center center;
	}
	
	#menu_01 {
	width: 200px;
	background: url(images/menu_01.png) no-repeat;
	}
	#menu_02 {
	width: 180px;
	background: url(images/menu_02.png) no-repeat;
	}		
	#menu_03 {
		width: 125px;
		background: url(images/menu_03.png) no-repeat;
	}		
	#menu_04 {
	width: 200px;
	background: url(images/menu_04.png) no-repeat;
	}
	
	
	
	/* ____________________________________MENU gauche HAUT "visite rapide" ______________________________*/

ul#menu1 {
	width: 247px;
	height: 67px;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul#menu1 li {  	 
	float: left;
	display: block;
	height: 67px;
	padding: 0;
	margin: 0;
	text-align: left;
}
ul#menu1 li a {   
	display: block; /* indispensable pour un menu "image" */
	border: none;
	height: 67px;
	line-height: 67px;/* astuce pour centrer verticalement une seule ligne de texte*/
	font-weight: bold;
	color: #767d64; 
	padding: 0;
	text-align: center;
	text-decoration: none;
	text-transform: none; /* transform le texte en majuscules, autres : lowercase (all mini), capitalize (first lettre maj) et none*/
	overflow: hidden;
}  

#menu1 li a {
	display: block;
	line-height: 67px;
	text-indent: -5000px;/*Vire le txt a -5000*/
	overflow: hidden;
	background-position: center top;
}	
#menu1 li.active a, ul#menu1 li.active a:hover {
		background-position: center bottom;
	}
#menu1 li a:hover {
		background-position: center center;
	}
	
#menu_00 {
		width: 247px;
		background: url(images/menu_visite_rapide.png) no-repeat;
	}


/* ______________________________________________________________________________________  */

.fleche_diapo_gauche { background : url(images/fleche_diaporama_gauche.png) no-repeat top; width:57px; height:88px;} 
.fleche_diapo_gauche:hover { background-position :bottom;} 

.fleche_diapo_droite { background : url(images/fleche_diaporama_droite.png) no-repeat top; width:57px; height:88px;} 
.fleche_diapo_droite:hover { background-position : bottom;} 


.btn_diapo_rond { background : url(images/bouton_diapo.png) no-repeat top; width:19px; height:19px;} 
.btn_diapo_rond:hover { background-position : bottom;} 

.fleche_mini_droite { background : url(images/fleche_mini_droite.png) no-repeat top; width:25px; height:21px;} 
.fleche_mini_droite:hover { background-position : bottom;} 

.fleche_mini_gauche { background : url(images/fleche_mini_gauche.png) no-repeat top; width:25px; height:21px;} 
.fleche_mini_gauche:hover { background-position : bottom;} 
	

	
/* _____________________________BOUTONS ________________________________________________  */	
.btnHover:hover {background-position : bottom;}
.btnHoverSpan:hover span{background-position : bottom;}


.btnModeGalerie {display:block; width: 142px; height: 43px; text-indent:-45123px; background: url(images/btn_mode_galerie.png) no-repeat top;}


.btn_plus {display:block; width:60px; height:58px; background : url(images/icone_plus.png) no-repeat top; } 
.btn_plus:hover { background-position : bottom;} 	


/* Btn foncé  */
.btn_fonce_left { background: url('images/btn_fonce_left.png') no-repeat top; width:11px; height:36px;}	
.btn_fonce_middle { background: url('images/btn_fonce_middle.png') repeat-x top; height:36px;} 
.btn_fonce_right { background: url('images/btn_fonce_right.png') no-repeat top; width:14px; height:36px;}
.btn_fonce_hover:hover span { background-position :bottom;}
									
/* filtres */
.btn_mini_fonce_left { background: url('images/btn_mini_fonce_left.png') no-repeat top; width:11px; height:24px;}	
.btn_mini_fonce_middle { background: url('images/btn_mini_fonce_middle.png') repeat-x top; height:24px;} 
.btn_mini_fonce_right { background: url('images/btn_mini_fonce_right.png') no-repeat top; width:11px; height:24px;}
.btn_mini_fonce_actif span, .btn_mini_fonce_actif:hover span { background-position :bottom; color:#333;}


/*next button -  PORFOLIO APERCU*/
.btn_rond_fleche_fonce_next {
	position:absolute;
	top:45%;
	right:-50px;
	z-index:999;
	width: 50px;
	height: 50px;
	text-indent: -99999px;
	background: url(images/btn_rond_fleche_fonce_next.png) no-repeat 0 0;
}
/*previous button - PORFOLIO APERCU*/
.btn_rond_fleche_fonce_prev {
	position:absolute;
	top:45%;
	left:-50px;
	z-index:999;
	width: 50px;
	height: 50px;
	text-indent: -99999px;
	background: url(images/btn_rond_fleche_fonce_prev.png) no-repeat 0 0;
}
/*next/prev button hover state*/
.btn_rond_fleche_fonce_next:hover,
.btn_rond_fleche_fonce_prev:hover {
	background-position: 0 -50px;
}
	
.gmaps-frame {
	width: 938px;
	height: 400px;
	border: 0;
	margin: auto;
	display: block;
	background-image: url(images/bloc_970px_fond.png);
	background-repeat: repeat-y;
}