/******* RESET CSS *******/
*{border:0;margin:0;padding:0}
a,button{color:inherit;cursor:pointer;}
@-ms-viewport { width: device-width; }


/******* STYLES EN GENERAL *******/
h2 { font-size: 2em; }
h3 { font-size: 1.7em; }
h4 { font-size: 1.4em; }

p {
	font-size: 		.9em;
	line-height: 	1.5em;
}

body {
	font-family: 	arial,sans-serif;
	background:		#000;
}
body.modal-open {
	overflow-y: 	hidden;
	height:			100%;
}

::-moz-selection {
  background: 	#fecb00;
  text-shadow: 	none;
}

::selection {
  background: 	#fecb00;
  text-shadow: 	none;
}


.bg-yellow 	{	background-color: #fecb00 }
.bg-grey 	{	background-color: #eee }

.grid-item {
	display:	inline-block;
	vertical-align: top;
}

/*** NAVIGATION HACK ***/
.anchor {
	display:		block;
	margin-top:		-4em;
	height:			4em;
}


/******* WEBFONTS *******/
@font-face {
  font-family: 'Cardenio Modern';
  src: url('../fonts/cardenio-modern-bold.eot?v=4.7.0');
  src: url('../fonts/cardenio-modern-bold.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/cardenio-modern-bold.ttf?v=4.7.0') format('truetype');
  font-weight: 	normal;
  font-style: 	normal;
}
.wf {
  -webkit-font-smoothing: 	antialiased;
  -moz-osx-font-smoothing: 	grayscale;
}

.wf-cardenio {
	font-family: 'Cardenio Modern';
	text-transform: uppercase;
}


/******* ANIMATIONS *******/
@keyframes fadeIn {
	0%		{ opacity:		0;	}
	100%	{ opacity:		1;	}
}
@keyframes fadeOut {
	0%		{ opacity:		1;	}
	100%	{ opacity:		0;	}
}
@keyframes popupIn {
	0%		{ transform: scale(.9,.9); 	opacity:	0;	}
	100%	{ transform: scale(1,1); 	opacity:	1;	}
}


/******* AU GLOBAL *******/
#main {
	text-align: 	center;
	background:		#fff;
}

#main > section {
	padding:		.5em;
}



/******* ENTETE ET MENU *******/
#header {
	padding:		.5em 0;
	width:			100%;
	color:			#fff;
	text-align: 	center;
	background:		#000;
}
#header #logo {
	display:		inline-block;
	max-width: 		40%;
}
#header a {
	display:		inline-block;
}



/******* BANNIERE PRINCIPALE *******/
#main #herobanner {
	padding-top:		67%;
	background-image: 	url("../images/herobanner-small.jpg");
	background-repeat: 	no-repeat;
	background-position: top center;
	background-size: 	100% auto;
}


/******* AGENCE - MOT DU CHEF *******/
#main #agence {
	text-align: 		left;
	padding-bottom:		2em;
}
#main #agence .wrapper {
	padding-top:		7.5em;
	background-image: 	url("../images/toque-small.png");
	background-repeat: 	no-repeat;
	background-position: 0 0;
	background-size: 	auto 6.5em;
}
#main #agence h2 {
	font-size: 			2em;
	padding-bottom:		.4em;
}
#main #agence p {
	padding:			.2em;
	font-style: 		italic;
	line-height: 		1.6em;
}



/******* EXPERTISE - SPECIALITES *******/
#main #expertise {
	padding-bottom:		2em;
}
#main #expertise h2 {
	padding:			.7em 0;
}
#main #expertise .grid-item {
	padding:			1em 0;
}
#main #expertise .grid-item img {
	width:				50%;
}
#main #expertise .grid-item h4 {
	padding-bottom:		.3em;
}



/******* REALISATION *******/
#main #realisation {
	padding:		1.2em 0 4em 0;
}
#main #realisation h2 {
	position: 		relative;
	color:			transparent;
	padding-bottom:	25%;
}
#main #realisation h2::before {
	content:		'';
	position: 		absolute;
	top:			0;
	bottom:			0;
	left:			0;
	display: 		block;
	width:			100%;
	height:			100%;
	background: 	url("../images/title-selection.svg") no-repeat center;
	background-size: 92% auto;
}

#main #realisation .grid {
	padding-top:	1em;
}
#main #realisation .grid-item {
	width:			49%;
	margin:			.15em .5%;
}
#main #realisation .grid-item img {
	display: 		block;
	width:			100%;
}
#main #realisation .grid-item h4 {
	padding:		1em 0;
	font-size:		1.1em;
	color:			#fff;
	background:		#000;
}

#main #realisation .grid-item.grid-contact {
	display:		none;
}


/******* REFERENCES *******/
#main #references {
	padding:		0 0 4em 0;
}
#main #references h2 {
	position: 		relative;
	padding-bottom:	25%;
	color:			transparent;
}
#main #references h2::before {
	content:		'';
	position: 		absolute;
	top:			0;
	left:			0;
	display: 		block;
	width:			100%;
	height:			100%;
	background: 	url("../images/title-references-small.jpg") no-repeat top center;
	background-size: 95% auto;
}
#main #references .grid-item {
	padding: 		1em 0;
	width:			33%;
	border-top:		1px solid rgba(255,255,255,0.3);
	border-right:	1px solid rgba(255,255,255,0.3);
}


/**** GERER LES BORDURES DES LOGOS ****/
#main #references .grid-item:nth-child(1),
#main #references .grid-item:nth-child(2),
#main #references .grid-item:nth-child(3) {
	border-top:		0;
}
#main #references .grid-item:nth-child(3n) {
	border-right:	0;
}
#main #references .grid-item img {
	display: 		block;
	margin:			0 auto;
	width:			70%;
}



/******* CONTACT *******/
#main #contact {
	padding:		2em 0;
}
#main #contact .grid-item {
	width:			48%;
}
#main #contact .grid-item img {
	margin-top:		2em;
	width:			35%;
}
#main #contact .grid-item h4 {
	padding:		.4em 0 0 0;
	font-size:		1.5em;
}
#main #contact .grid-item p {
	font-size:		.95em;
}
#main #contact .grid-item p a {
	font-size:		1.2em;
	font-weight: 	bold;
	text-decoration: none;
}



/******* CARTE DE PARIS *******/
#main #map {
	padding:		0;
}



/******* POPUP DES REFERENCES *******/
#focus {
	position: 		fixed;
	z-index:		10;
	top:			0;
	bottom:			0;
	left:			0;
	right:			0;
	display:		block;
	width:			100%;
	height:			100%;
	background: 	#fff;
	animation:		popupIn 200ms ease-out;
}
#focus.close {
	animation:		fadeOut 150ms ease-in forwards;
}
#focus.hide {
	display:		none;
}
#focus-close {
	position:		absolute;
	z-index:		3;
	top:			1em;
	right:			.7em;
	width:			2em;
	height:			2em;
	font-size:		1.6em;
	font-family: 	inherit;
	background: 	transparent;
	-webkit-transform: 	rotate(45deg);
	-ms-transform: 		rotate(45deg);
	transform: 			rotate(45deg);
}
#focus-close:hover {
	opacity:		.5;
}
#focus-close::before,#focus-close::after {
	content:		'';
	display:		block;
	position:		absolute;
	top:			0;
	left:			50%;
	width:			1px;
	height:			100%;
	background: 	#000;
}
#focus-close::after {
	top:			50%;
	left:			0;
	width:			100%;
	height:			1px;
}

#focus-title {
	position:		absolute;
	z-index:		2;
	top:			0;
	left:			0;
	width:			100%;
	padding:		.7em 2em 0 .5em;
	font-size: 		2.6em;
	background: 	#fff;
}
#focus-content {
	display:		block;
	padding-bottom: 2em;
	max-width: 		100%;
	height:			100%;
	overflow-x: 	hidden;
	overflow-y: 	auto;
}
#focus-images {
	padding-top: 	6.5em;
	text-align: 	center;
}
#focus-images img {
	display:		block;
	max-width: 		100%;
	height:			auto;
	margin: 		0 auto 1em auto;
}
#focus-text {
	padding-left:	1em;
	padding-right:	1em;
}
#focus-text::before,#focus-job::after {
	content: 		'';
	display:		block;
	margin:			1em 0;
	width:			100%;
	height:			50px;
	background: 	url("../images/popup-quotes.png") no-repeat top center;
}
#focus-job::after {
	background-position: bottom center;
}
#focus-contact {
	margin-top:		1em;
}
#focus-contact, #focus-job {
	font-weight: 	bold;
}

#focus-close-bottom {
	position: 		relative;
	padding:		1em 1.5em;
	font-size:		1.1em;
	font-family: 	inherit;
	font-weight: 	bold;
	color:			#000;
	background: 	#fecb00;
}
#focus-close-bottom em {
	position:		relative;
	display: 		inline-block;
	vertical-align: middle;
	margin-right: 	.3em;
	width:			1.35em;
	height:			1.35em;
	-webkit-transform: 	rotate(45deg);
	-ms-transform: 		rotate(45deg);
	transform: 			rotate(45deg);
}
#focus-close-bottom em::before,#focus-close-bottom em::after {
	content:		'';
	display:		block;
	position:		absolute;
	top:			0;
	left:			.4em;
	width:			.2em;
	height:			100%;
	background: 	#000;
}
#focus-close-bottom em::after {
	-webkit-transform: 	rotate(90deg);
	-ms-transform: 		rotate(90deg);
	transform: 			rotate(90deg);
}



/**** TEST SI CSS3 ***/
@media (min-width:1px)
{
	/**** REDEFINIR LES MODELES DE BOITES ****/
	*{box-sizing:border-box;}

	/**** FAIRE QUE LA TAILLE DE POLICE SUIVE LA LARGEUR D ECRAN ****/
	body {
		font-size:		3.7vw;
	}

	/**** PASSER LE HEADER EN MODE MOBILE CSS3 ***/
	#header {
		position: 		fixed;
		z-index: 		9;
		top:			0;
		left:			0;
		height:			4em;
		text-align: 	left;
	}
	#header #logo {
		margin: 		.15em 0 0 .2em;
		width:			3em;
		max-width: 		none;
	}

	/**** GESTION DU MENU ****/
	#header #menu-button {
		position: 		absolute;
		top:			.75em;
		right:			.75em;
		padding:		.6em .8em;
		font-size: 		inherit;
		background: 	#000;
		border:			1px solid #fff;
	}
	#header #menu-wrapper {
		position: 		fixed;
		top:			0;
		bottom:			0;
		right:			0;
		left:			0;
		display:		none;
		width:			100%;
		width:			100vw;
		height:			100%;
		height:			100vh;
		background:		#000;
		background:		rgba(0,0,0,.9);
		animation:		fadeIn 150ms ease-out;
	}
	#header #menu-wrapper.show {
		display:		table;
		z-index: 		2;
	}
	#header #menu {
		display:		table-cell;
		vertical-align: middle;
		text-align: 	center;
	}
	#header #menu a {
		padding:		.2em;
		padding:		2vh .2em;
		margin:			.2em 0;
		font-size:		7vw;
		text-decoration: none;
	}

	#menu-button-close {
		display:		none;
		position:		absolute;
		z-index:		4;
		top:			.7em;
		right:			.7em;
		width:			2em;
		height:			2em;
		font-size:		1.6em;
		font-family: 	inherit;
		background: 	transparent;
		-webkit-transform: 	rotate(45deg);
		-ms-transform: 		rotate(45deg);
		transform: 			rotate(45deg);
	}
	.modal-open #menu-button-close {
		opacity:		.5;
	}
	#menu-button-close:hover {
		display:		block;
	}
	#menu-button-close::before,
	#menu-button-close::after {
		content:		'';
		display:		block;
		position:		absolute;
		top:			0;
		left:			50%;
		width:			1px;
		height:			100%;
		background: 	#fff;
	}
	#menu-button-close::after {
		top:			50%;
		left:			0;
		width:			100%;
		height:			1px;
	}


	/**** RAJOUT D UNE MARGE SUR LE BLOC PRINCIPAL ****/
	#main {
		padding-top:	4em;
	}
}


@media (min-width:37em){

	/**** FAIRE QUE LA TAILLE DE POLICE SUIVE LA LARGEUR D ECRAN ****/
	body {
		font-size:		2.2vw;
	}

	/**** MASQUER LES BOUTONS DU MENU ****/
	#header #menu-button {
		display:		none;
	}
	/**** AFFICHER LE MENU ****/
	#header #menu-wrapper {
		position: 		absolute;
		top:			0;
		left:			auto;
		right:			0;
		bottom:			auto;
		display: 		table;
		width:			auto;
		height:			100%;
	}
	#header #menu li {
		display:		inline;
		padding:		0 .5em;
	}
	#header #menu a {
		font-size:		inherit;
		padding:		0 .5em;
		font-weight: 	bold;
	}

	/**** CHANGER L IMAGE ET LE RATIO ****/
	#main #herobanner {
		padding-top:		63%;
		background-image: 	url("../images/herobanner-big.jpg");
	}

	/**** FORCER UNE LARGEUR FIXE ET CENTRER ****/
	#main #agence .wrapper {
		margin:				0 auto;
		width:				40em;
	}

	#main #expertise h2 {
		font-size:			3.1em;
	}
	/**** PASSER LES KPI EN GRILLE DE 2 CASES ****/
	#main #expertise .grid-item {
		padding:			0 0 1em 0;
		margin:				0 5%;
		width:				40%;
	}

	/**** AGRANDIR LA TAILLE DU TITRE IMAGE ****/
	#main #realisation h2 {
		padding-bottom:		25%;
	}
	/**** PASSER LES REFS EN GRILLE DE 3 CASES ****/
	#main #realisation .grid-item {
		position: 		relative;
		width:			32.333%;
		overflow: 		hidden;
	}
	#main #realisation .grid-item.grid-contact {
		display:		inline-block;
	}



	/**** AGRANDIR LA TAILLE DU TITRE IMAGE ****/
	#main #references h2 {
		padding-bottom:		17%;
	}
	#main #references h2::before {
		background-image: 	url("../images/title-references-big.jpg");
		background-size: 	contain;
	}

	/***** BLOQUER LE CONTENU DES POPUP ET LE CENTRER *****/
	#focus-images,
	#focus-text {
		margin:			0 auto;
		width:			37em;
	}

}
@media (min-width:45em){

	.title-drops::before, .title-drops::after {
		content: 			"";
		display: 			inline-block;
		vertical-align: 	middle;
		margin:				0 .2em;
		width: 				1.5em;
		height: 			.8em;
		background: 		transparent url("../images/title-drops.png") no-repeat left center;
		background-size: 	200% auto;
	}
	.title-drops::after {
		background-position: right center;
	}

	#main #agence .wrapper {
		padding:			5em 0 3em 11em;
		background-image: 	url("../images/toque-big.png");
		background-position: bottom left;
	}

	#main #references .grid-item {
		width:			16.666%;
	}
	#main #references .grid-item:nth-child(4) {
		border-top:	0;
	}
	#main #references .grid-item:nth-child(5),
	#main #references .grid-item:nth-child(6) {
		border-top:		initial;
	}
	#main #references .grid-item:nth-child(3n) {
		border-right:	1px solid rgba(255,255,255,0.3);
	}
	#main #references .grid-item:nth-child(6n) {
		border-right:	0;
	}

	#main #contact .grid {
		display:		table;
	}
	#main #contact .grid-item {
		display:			table-cell;
		vertical-align: 	top;
		padding-left:		2%;
		padding-right:		2%;
		width:				29%;
		font-size:			.85em;
	}
	#main #contact .grid-item img {
		width:			5em;
	}
	#main #contact .grid-item .street-address {
		display:		block;
	}

	/******* EFFET SUR LETTRES *******/
	#focus-title,
	#main #expertise h2,
	#main #contact h2 {
		text-shadow: 	0px 1px 0px #000,
						1px -1px 0px #000,
						1px 0px 0px #eee,
						2px 0px 0px #eee,
						2px 0px 0px #eee,
						3px 0px 0px #eee,
						4px -1px 0px #000,
						4px 1px 0px #000;
	}

}
@media (min-width:62em){
	body {
		font-size:			1em;
	}
	#main #herobanner {
		padding-top:		39em;
		background-size:	62em auto;
	}

	#main #agence {
		padding-bottom:		0;
	}
	#main #agence .wrapper {
		padding:			3em 0 3em 18.1em;
		width:				62em;
		background-size: 	22em auto;
	}
	#main #agence h2 {
		font-size:			1.6em;
	}

	#main #expertise .grid-item img {
		width:				90%;
	}
	#main #realisation .grid-item h4,
	#main #realisation .grid-item:last-child h4 {
		position: 			absolute;
		z-index: 			2;
		bottom:				0;
		left:				0;
		width:				100%;
		font-size:			1.3em;
		background: 		rgba(0,0,0,.7);
		transform: 			translate3d(0,99.9%,0);
		transition:			transform 150ms ease-out;
	}
	#main #realisation .grid-item:hover h4 {
		transform: 			translate3d(0,0%,0);
	}

	#main #realisation h2,
	#main #references h2 {
		padding-bottom:		0;
		font-size:			2em;
		height:				6.3em;
	}
	#main #realisation h2::before,
	#main #references h2::before {
		background-size: auto 90%;
	}

	#main #realisation .grid,
	#main #references .grid,
	#main #expertise .grid,
	#main #contact .grid {
		margin: 			0 auto;
		width:				62em;
	}
	#main #expertise .grid-item {
		padding:			0 0 1em 0;
		margin:				0 2%;
		width:				21%;
	}
	#main #expertise .grid-item img {
		width:				100%;
	}
	#main #expertise h4 {
		padding:			1em 0;
	}

	#main #contact {
		padding-bottom:		5em;
	}
	#main #contact h2 {
		padding:			0 0 .5em 0;
	}
	#main #contact .grid-item {
		padding-left:		0;
		padding-right:		0;
		font-size:			1em;
	}
	#main #contact .grid-item img {
		width:			8em;
	}
	#main #contact .grid-item .street-address {
		display:		initial;
	}


	#focus-title {
		padding:			.8em 1em 0 1em;
	}
}

@media (min-width:72em){
	#main #herobanner {
		padding-top:		45em;
		background-size:	71em auto;
	}
	#main #agence .wrapper,
	#main #expertise .grid,
	#main #realisation .grid,
	#main #references .grid,
	#main #contact .grid {
		margin: 			0 auto;
		width:				71em;
	}
	#main #agence .wrapper {
		padding:			5em 0 5em 23.5em;
		background-size: 	29em auto;
	}
}