/* ----------------------------------------------------------------------------------

		GÉNÉRAL

---------------------------------------------------------------------------------- */
body {
	background:#f1eee7;
	color:#565450;
	font-family:Georgia, serif;
	font-size:16px;
	text-align:center;
}

p {
	margin:20px 0;
}

a {
	color:#5d7587;
	text-decoration:none;
}
a:hover {
	color:#565450;
}

strong {
	font-weight:bold;
}

em {
	font-style:italic;
}

ul {
	padding-left:50px;
}

li {
	margin:10px 0;
	list-style-type:disc;
}

.fix {
	max-width:940px;
	margin:0 auto;
}

.full {
	background:#fcfaf0;
}

article {
	background:#fcfaf0;
	padding:40px 20px;
}

article h1 {
	color:#5d7587;
	font-size:1.7em;
	font-style:italic;
	margin-bottom:30px;
}

article h2 {
	font-size:1.2em;
	color:#5d7587;
	font-style:italic;
	margin-bottom:30px;
}








/* ----------------------------------------------------------------------------------

		HEADER

---------------------------------------------------------------------------------- */
#header_accueil {
	padding-top:30px;
	background-image:url(../images/interface/local_osteopathie_nature_enchanteur_laurentides_morin-heights_st-sauveur.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	height:690px;
	border-bottom:10px solid #fcfaf0;
	position:relative;
}

#header_accueil section.menu, #rendez-vous_accueil p, #message p {
	background:#fcfaf0;
	background:rgba(252,250,240,0.95);
	padding:6px 17px 3px 17px;
	overflow:hidden;
	-webkit-box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    2px 2px 10px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         2px 2px 10px 0px rgba(50, 50, 50, 0.5);
}

/*
#header_accueil section.menu h1 {
	float:left;
}
*/

#header_accueil section.menu .gauche {
	float:left;
	text-align:left;
	font-size:0.75em;
}

#header_accueil section.menu .gauche h1 {
	margin-top:7px;
}

#header_accueil section.menu .gauche h2 {
	margin-top:3px;
	color:#666;
}

#header_accueil nav {
	padding:14px 0;
}

#header_accueil section.menu nav {
	text-align:right;
}

#rendez-vous_accueil {
	width:100%;
	position:absolute;
	bottom:70px;
	left:0;
}

#rendez-vous_accueil p {
	margin:0;
	font-style:italic;
	padding-bottom:10px;
	display:inline-block;
}

#rendez-vous_accueil p em {
	font-size:1.4em;
	color:#5d7587;
	margin-left:15px;
}

#message_mobile {
	display:none;
}

#message {
	position:absolute;
	top:45%;
	width:100%;
	left:0;
}

#message p {
	margin:0 20px;
	font-style:italic;
	display:inline-block;
	font-size:1.3em;
	line-height:1.1em;
	padding:30px 20px;
	max-width:880px;
}




nav a {
	font-size:1.1em;
	margin-left:20px;
}

nav a.courant {
	text-decoration:underline;
}




#header_pages section {
	background:#e9e9e2;
	color:#5d7587;
	padding:30px 0;
	overflow:hidden;
}

#header_pages h2 {
	font-size:0.8em;
	color:#666;
	margin-bottom:3px;
}

#header_pages {
	padding-bottom:30px;
}

#header_pages nav {
	float:left;
	padding:17px 0;
}

#rendez-vous_pages {
	font-size:1.2em;
	color:#5d7587;
	font-style:italic;
	text-align:center;
	float:right;
	margin:0;
}

#rendez-vous_pages em {
	display:block;
	font-size:1.8em;
	position:relative;
}









/* ----------------------------------------------------------------------------------

		ACCUEIL

---------------------------------------------------------------------------------- */
#presentation {
	padding:20px;
}

#presentation h1 {
	font-size:2em;
	margin-bottom:0;
}

#features {
	margin-top:40px;
	padding-bottom:20px;
}

#features img {
	margin:0 4px;
	width:48%;
	max-width:440px;
}

#traitement {
	padding-top:20px;
	text-align:left;
}

#traitement img {
	float:left;
	margin-right:20px;
}

#blocs {
	overflow:hidden;
	position:relative;
}

#blocs article {
	float:left;
	width:30%;
	padding:10px 1% 40px 1%;
}

#blocs article img {
	width:100%;
}

#blocs article h1 {
	font-size:1.4em;
	margin:10px auto 0 auto;
	padding-bottom:10px;
	border-bottom:1px solid #bfbfbf;
	width:80%;
}

#blocs article.mid {
	margin:0 2%;
}

#osteopathie_accueil {
	text-align:left;
	margin-top:40px;
	overflow:hidden;
	font-style:italic;
	font-size:1.1em;
	line-height:1.5em;
}

#osteopathie_accueil h1 {
	margin-top:40px;
}

#osteopathie_accueil .images {
	float:left;
	margin-right:20px;
}

#osteopathie_accueil .images img {
	display:block;
	margin-bottom:10px;
}

.plus {
	margin-top:40px;
	text-align:right;
}







/* ----------------------------------------------------------------------------------

		PAGE OSTÉOPATHIE

---------------------------------------------------------------------------------- */
#osteopathie_pages {
	overflow:hidden;
}

#osteopathie_pages .bloc_images {
	float:left;
	margin-right:20px;
	margin-bottom:20px;
}

#osteopathie_pages .bloc_images img {
	float:left;
	clear:left;
	margin-right:20px;
	margin-bottom:20px;
}

#osteopathie_pages .texte {
	float:left;
	text-align:left;
	width:60%;
}

.intro {
	font-style:italic;
	font-size:1.1em;
	margin-bottom:40px;
	clear:both;
}

.premier {
	margin-top:0;
	font-size:1.3em;
}

#consulter {
	margin-top:40px;
	overflow:hidden;
}

#consulter .intro {
	line-height:1.5em;
}

#consulter section {
	float:left;
	width:32%;
}

#consulter section h2 {
	font-size:1.1em;
	margin-bottom:20px;
}

#consulter section.mid {
	margin:0 2%;
}

#consulter section ul {
	text-align:left;
	padding:0;
}

#consulter section ul li {
	list-style-type:none;
	background:#FFF;
	padding:6px 10px;
	margin-top:0;
	margin-bottom:4px;
}

#consulter img {
	width:32%;
	float:left;
	margin-top:-190px;
	margin-right:2%;
}







/* ----------------------------------------------------------------------------------

		PAGE HORAIRE

---------------------------------------------------------------------------------- */
#horaire {
	text-align:left;
	overflow:hidden;
}

#horaire img {
	float:left;
	margin-right:20px;
}

#horaire section {
	margin-bottom:70px;
}

#horaire h2 {
	font-size:1.8em;
	margin-bottom:20px;
}

#horaire .horaire {
	font-size:1.2em;
}

#horaire section em {
	font-size:1.7em;
	font-style:italic;
}







/* ----------------------------------------------------------------------------------

		PAGE ME JOINDRE

---------------------------------------------------------------------------------- */
#contact {
	overflow:hidden;
}

#contact .infos {
	float:left;
	width:30%;
	margin-right:2%;
	text-align:left;
	font-size:1.1em;
	line-height:1.7em;
}

#contact h3 {
	font-size:1.5em;
	font-style:italic;
}

#contact h2 {
	font-size:1em;
	font-style:italic;
}

#contact .tel {
	font-size:1.5em;
	margin-top:10px;
	color:#5d7587;
}

#contact .carte {
	float:left;
	width:68%;
}

#contact .carte iframe {
	width:100%;
}







/* ----------------------------------------------------------------------------------

		FOOTER

---------------------------------------------------------------------------------- */
#invitation {
	font-size:1.5em;
	color:#86837d;
	padding:70px 0;
	font-style:italic;
}

footer #footer {
	background:#fcfaf0;
	padding:65px 0 15px 0;
}

#slogan {
	margin-left:6%;
	width:44%;
	float:left;
	font-size:1.6em;
	font-style:italic;
	margin-top:0;
	margin-bottom:50px;
	text-align:left;
}

#slogan_haut {
	color:#b2a357;
	position:relative;
	left:-15px;
}

#slogan_bas {
	color:#5d7587;
	position:relative;
	right:-15px;
}

#rendez-vous_footer {
	margin-right:3%;
	width:47%;
	float:left;
	font-size:1.2em;
	color:#5d7587;
	font-style:italic;
	margin-top:0;
	margin-bottom:50px;
	text-align:right;
}

#rendez-vous_footer em {
	display:block;
	font-size:1.8em;
	position:relative;
	right:-16px;
}

#petit_texte {
	font-size:0.9em;
	text-align:left;
	clear:both;
}

#petit_texte .adresse {
	float:right;
}







@media (max-width: 960px) {
	
	.fix {
		padding:0 20px;
	}
	
	#contact .infos, #contact .carte, #osteopathie_pages img, #osteopathie_pages .texte {
		width:auto;
		float:none;
		text-align:center;
	}
	
	#osteopathie_pages ul {
		text-align:left;
		margin-bottom:40px;
	}
	
	#invitation {
		font-size:1.2em;
	}
	
	#consulter img {
		float:left;
		width:46%;
		margin:30px 2% 0 2%;
	}
	
}







@media (max-width: 840px) {
	
	#header_accueil {
		height:600px;
	}
	
	#header_accueil section.menu h1 {
		float:none;
	}
	
	#header_accueil section.menu nav {
		text-align:center;
	}
	
	#message {
		top:40%;
	}
	
}







@media (max-width: 740px) {
	
	#header_pages nav {
		float:none;
	}
	
	#rendez-vous_pages {
		float:none;
		margin-top:20px;
	}
	
	#features img {
		margin:4px;
		width:100%;
		max-width:none;
	}
	
	#traitement {
		text-align:center;
	}
	
	#traitement img {
		float:none;
		margin-right:0;
	}
	
	#osteopathie_pages .bloc_images {
		margin-right:0;
		float:none;
	}
	
	#osteopathie_pages .bloc_images img {
		float:none;
		width:47%;
		margin:0 1% 20px 1%;
	}
	
	#osteopathie_accueil {
		text-align:center;
	}
	
	#osteopathie_accueil .images {
		float:none;
		margin:0 0 20px 0;
	}
	
	#osteopathie_accueil .images img {
		float:left;
		width:46%;
		margin:0 2% 30px 2%;
	}
	
	#petit_texte {
		text-align:center;
	}
	
	#petit_texte .adresse {
		float:none;
		display:block;
		margin-top:6px;
	}
	
}







@media (max-width: 640px) {
	
	#header_accueil {
		height:400px;
	}
	
	#rendez-vous_accueil {
		bottom:10px;
	}
	
	#consulter section {
		float:none;
		width:auto;
		margin:0 0 20px 0 !important;
	}
	
	#consulter section ul {
		font-size:0.8em;
	}
	
	#horaire img {
		display:none;
	}
	
	#message {
		display:none;
	}

	#message_mobile {
		display:block;
	}
	
	#header_accueil section.menu nav {
		padding:0 0 8px 0;
	}
	
	#header_accueil section.menu nav a {
		font-size:0.8em;
		margin-left:5px;
	}
	
	#header_pages {
		font-size:0.8em;
	}
	
	#header_pages h1 img {
		width:100%;
	}
	
	nav a {
		margin-left:7px;
		font-size:1em;
	}
	
	#blocs {
		top:0;
		margin-top:20px;
	}
	
	#blocs article.mid	{
		margin:0;
		margin-bottom:20px;
	}
	
	#blocs article {
		float:none;
		width:auto;
		margin-bottom:20px;
	}
	
	#blocs article img {
		max-width:300px;
	}
	
	footer #footer {
		padding:35px 0 15px 0;
	}
	
	#slogan, #rendez-vous_footer {
		text-align:center;
		float:none;
		width:auto;
		margin:0 auto 40px auto;
	}
	
	#rendez-vous_footer em {
		right:0;
	}
	
}