/********************************************
	* Domaine : 3a-patrimoine.fr
	*
	* Exploitant : 3A Patrimoine
	*
	* Rôle : Feuille de style principale 
	*
	* Auteur : Ultra-Fluide, copyright 2018
********************************************/

/**** classique  ********/
/************************/
* {margin: 0px; padding: 0px; box-sizing: border-box;}
p, li, table, a , h4, h1, h2, h3, h5, dl{
	font-family: 'Roboto Slab', serif;
}
a { 
	text-decoration: none;
}
/* Pour contourner le problème des espaces entre élément inline-block*/
/* voir : https://github.com/patrickkunka/zero-width et */
/* http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html */
@font-face{ 
	font-family: 'NoSpace';
	src: url('fonts/zerowidthspaces.eot');
	src: url('fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
	url('fonts/zerowidthspaces.woff') format('woff'),
	url('fonts/zerowidthspaces.ttf') format('truetype'),
	url('fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
/**** Global  *****************/
/*****************************/

body {
	background-image: url("images/header-rayures.png");
	background-repeat: no-repeat;
	background-position: center top;
}
.wrap {
    max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}
/**** Header  *****************/
/*****************************/

header {
	height:297px;
	position:relative;
	display: flex;
	flex-flow: column wrap;
	align-items: flex-end ;
	justify-content: center ;
}
header  h1  {
	position:absolute;
	text-align: left;
	height:297px;
	top:0;
	left:0;
}
header  h1  a{
	line-height:297px;
	padding-left:60px;
}
header  h1  img{
	max-width:160px;
	vertical-align: middle;
}
header  h2 {
	text-align: right;
	color:#d8101f;
	font-size: 3.3rem;
	font-weight:300;
}
header h3 {
	width:480px;
	color:white;
	text-transform: uppercase;
	font-size: 1.1rem;
	font-weight:300;
	font-family: 'Roboto', sans-serif;
	padding:2px 20px;
	height:27px;
	margin-top:3px;
	background-size: 100%;
	background-image: url("images/cartouche-noir-horizontal.svg");
	background-repeat: no-repeat;
}
header p {
	text-transform: uppercase;
	font-size: 1.1rem;
	font-weight:300;
	margin-top:50px;
	height:26px;
	background-color:#999999;
	border-radius: 13px;
	padding:2px 20px;
}
header p a {
	color:white;
	font-family: 'Roboto', sans-serif;
}
header p a:hover {
	text-decoration: underline;
}
@media screen and (max-width: 1220px) {
	body {
		background-image: none;
	}
	header {
		background-image: url("images/header-rayures-courtes.png");
		background-repeat: no-repeat;
	}
}
@media screen and (max-width: 770px) {
	header {
		background-size: cover;
	}
	header {
		height:220px;
	}
	header  h1  {
		height:220px;
	}
	header  h1  a{
		line-height:220px;
		padding-left:45px;
	}
	header  h1  img{
		max-width:118.5px;
	}
	
	header h3 {
		width:400px;
		font-size: .9rem;
		font-weight:500;
	}
	header  h2 {
		font-size: 2.75rem;
		font-weight:300;
	}
}
/**** menu principal *********/
/*****************************/    
body > ul {
	background:#d8101f;
	height:45px;
	text-align:center;
	position:sticky !important;
	position: -webkit-sticky;
	top:0;
	text-transform: uppercase;
	z-index:2;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}
body > ul > li{
	display:inline-block;
	font-size:1.1rem;
	line-height:1.1rem;
}
body > ul > li img{
	height:27px;
	display:block;
	margin-right:5px;
}
body > ul > li:before{
	content:"\2022";
	padding:0px 15px 0 20px;
	color:white;
	font-size:1.5rem;
}
body > ul > li:first-child:before{
	content:none;
}
body > ul > li a{
	color:white;
}
@media screen and (max-width: 750px) {

	body > ul > li:before{
		padding:0px 5px 0 10px;
	}
	body > ul > li img{
		margin-right:5px;
	}
	body > ul > li{
		font-size:1rem;
		line-height:1rem;
	}
}
/**** contenus principaux ****/
/*****************************/
ul{
	list-style-type: none;
}
section {
	font-family: NoSpace;
	width:100%;
	padding:100px 0;
}
section h2{
	text-transform: uppercase;
	color:black;
	text-align:center;
	font-size:1.6rem;
	font-weight:700;
}
section h2:after{
	content:"\2022";
	display:block;
	color:#d8101f;
	font-size:2.3rem;
	margin-bottom:30px;
}
section h3{
	color:#d8101f;
	text-align:center;
	font-size:2.8rem;
	font-weight:400;
	margin-bottom:15px !important;
}
section p{
	color:#111;
	font-size:1.6rem;
	font-weight:300;
	text-align:center;
	margin-bottom:10px;
}
/**** données clés ****/
/**********************/
section#bref ul{
	margin-top:100px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
}
section#bref ul li{
	max-width: 200px;
	min-width: 150px;
	margin:20px 1%;
	width:16.7vw;
	font-family: 'Roboto', sans-serif;
}
section#bref ul li p:first-child{
	display:flex;
	flex-flow: column wrap;
	justify-content: center;
	max-height: 200px;
	min-height: 120px;
	height:16.7vw;
	color:#d8101f;
	font-size:3.7rem;
	font-weight:700;
	background-image: url("images/rond-rayures.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	margin-bottom:30px;
}
section#bref ul li p{
	text-align:center;
	color:black;
	font-weight:500;
	font-size:1rem;
}
@media screen and (max-width: 850px) {
	section#bref ul li{
		width:23.5vw;
		margin:20px 1.5%;
	}
	section#bref ul li p:first-child{
		height:23.5vw;
	}
}
/**** métiers *********/
/**********************/
section#metiers{
	background-color:#f2f2f2;
	background-image: url("images/metiers-rayures.png");
	background-repeat: no-repeat;
	background-position: center 500px;
}
section#metiers article{
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-top:30px;
	padding-top:50px;
}
section#metiers article > ul{
	width:50%;
	background-repeat: no-repeat;
	padding-left:40px;
}
section#metiers article > ul:first-child{
	background-image: url("images/cartouche-noir-vertical.svg");
	background-position: left 98%;
}
section#metiers article > ul:last-child{
	background-image: url("images/cartouche-rouge-vertical.svg");
	background-position: left top;
}
section#metiers article > ul ul li:before{
	content:"\2022";
	display:inline-block;
	vertical-align:-10%;
	height:23px;
	color:#d8101f;
	font-size:1.8rem;
}
section#metiers article > ul > li{
	font-size:1.5rem;
	font-weight:400;
	margin-top:15px
}
section#metiers article > ul > li:first-child{
	margin-top:0;
}
section#metiers article > ul ul li{
	font-family: 'Roboto', sans-serif;
	font-size:1.2rem;
	font-weight:400;
	margin-top:10px
}
/**** equipe *********/
/**********************/

section#equipe > h3{
	max-width:980px;
	margin-top:25px;
}
section#equipe > p{
	max-width:950px;
}
section#equipe article{
	display:inline-block;
	width:50%;
	padding:0 30px;
	text-align:left;
	vertical-align:top;
	margin-top:40px;
}
section#equipe article img{
	clip-path: circle(50%);
	display:block;
	margin:0 auto;
	max-width:400px;
	width:100%;
}
section#equipe article p{
	text-align:left;
	font-size:1.3rem;
}
section#equipe article h3{
	font-size:2.5rem;
	font-weight:100;
	text-align:left;
}
section#equipe article h3 span{
	font-size:3.9rem;
	font-weight:400;
	line-height:50px;
}
/**** contacts *********/
/**********************/
section#contacts{
	background-color:#f2f2f2;
}
section#contacts > ul:first-of-type{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
section#contacts > ul:first-of-type li{
	background-image: url("images/contacts-rayures.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width:315px;
	height:315px;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
}
section#contacts > ul:first-of-type li:first-child{
	margin-right: 2%;
}
section#contacts > ul:first-of-type li:last-child{
	margin-left: 2%;
}
section#contacts > ul li a{
	color:white;
	font-size:1.1rem;
	font-family: 'Roboto', sans-serif;
	font-weight:500;
	text-align:center;
}
section#contacts > ul li a:hover{
	color:#dedede;
	text-decoration:underline;
}
section#contacts > ul li img{
	margin-bottom:10px;
}
section#contacts > ul li:first-child img{
	width:47px;
}
section#contacts > ul li:last-child img{
	width:52px;
}
@media screen and (max-width: 700px) {
	section#contacts > ul:first-of-type li:first-child{
		margin-right: .5%;
	}
	section#contacts > ul:first-of-type li:last-child{
		margin-left: .5%;
	}
}
/******** form ******/
section#contacts form{
	margin:50px auto;
	text-align:right;
}
section#contacts form > div{
	margin-top:20px;
	border:none;
	height:220px;
	width:50%;
	padding:0 2%;
	display:inline-flex;
	flex-flow: column wrap;
	align-items: stretch;
	justify-content: space-between;
}
section#contacts input, section#contacts textarea {
	color:#555;
	padding:13px 20px;
	border: none;
	font-family: 'Roboto', sans-serif;
	font-size:1.1rem;
	font-weight:400;
}
section#contacts input[type="submit"] {
	height:44px;
	width:36%;
	border-radius: 22px;
	background: black;
	color:white;
	text-transform:uppercase;
}
section#contacts textarea {
	flex: 1;
}
section#contacts form > div:last-child{
	height:auto;
	flex-flow: row wrap;
	align-items: center;
}
/******** après envoi du formulaire uniquement dans le php ******/
section#contacts > p{
	margin :50px auto;
	color:#d8101f;
}
/******** adresses ******/
section#contacts ul:last-of-type li {
	text-align:center;
		line-height:23px;
}
section#contacts ul:last-of-type li > *{
	display:inline-block;
}
section#contacts ul:last-of-type li p{
	padding:3px 3% 0 3%;
	border-radius: 15px;
	background: white;
	height:30px;
	font-family: 'Roboto', sans-serif;
	font-size:1.1rem;
	font-weight:400;
	vertical-align:top;
}
section#contacts ul:last-of-type li span{
	font-family: 'Roboto Slab', serif;
	color:#d8101f;
	text-transform:uppercase;
	font-weight:700;
}
section#contacts ul:last-of-type li:nth-child(2n):before, section#contacts ul:last-of-type li:nth-child(2n+1):after {
	content:"-";
	color:white;
	height:30px;
	display:inline-block;
	width:110px;
	margin-right:10px;
	background-image:url("images/3points-horizontaux.svg");
}
section#contacts ul:last-of-type li:after {
	margin-left:8px;
}
@media screen and (max-width: 800px) {
	section#contacts ul:last-of-type li:nth-child(2n):before, section#contacts ul:last-of-type li:nth-child(2n+1):after {
		content:none;
	}
}
/* informations légales */
/**********************/
section#legales article p{
	font-size:1.25rem;
	font-family: 'Roboto', sans-serif;
}
section#legales article p:first-child{
	font-weight:500;
}

/**** footer */
footer {
	background: black ;
	height:100px;
	display: flex;
	flex-flow: column wrap;
	justify-content: center ;
}

footer p{
	text-align: center;
}
footer a{
	color:#525252;
	font-size:0.95rem;
	font-family: 'Roboto', sans-serif;
	font-weight:500;
}
footer a:hover{
	color:#6a6a6a;
	text-decoration:underline;
}
#winsize {
  position: fixed;
  left: 0;
  top: 100px;
  background: yellow;
  padding: 5px 10px;
}