@charset "utf-8";
/* CSS Document */


	
	
	/*html {
		background-image:url(Images/beton_texture972.jpg);
		background-size:100%;
		background-attachment:fixed;}
	
	body {
		background-color:rgba(0,0,0,0.80);
		}*/
	/*p {
	font-size:0.8em}*/
	

/*Bannière et parallax logo*/

	#banniere {
		height:80vw;
		background-image: url(Images/Ecole_maternelle/couloir_banniere.jpg); 
		background-repeat:no-repeat;
		background-position:center;  
		background-size:auto 100%;
		padding:0 0 0 0;
		}
	#cadre_logo {
		height:80vw;
		background-image:
			url(Images/welcome/logo-w.png),
			url(Images/welcome/gauche40.png), 
			url(Images/welcome/haut40.png), 
			url(Images/welcome/droite40.png), 
			url(Images/welcome/bas40.png)
			;
		background-repeat:no-repeat;
		background-position:50% 50%;
		background-size:100%;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:flex-end
		}
	

/* Texte d'introduction */
	
	#intro {padding:15px 0px 15px 0px;
		margin:0;
		color:black;
		}
	#intro_marron {
	padding:40px;
	padding-bottom:100px;
	text-align:justify;
	background-color:rgba(255,255,255,0.6);
	/*background-color:rgb(180,214,235);*/
	/*box-shadow:3px 3px 3px black inset*/
	}
	#intro_bleue {
	position:relative;
	top:-70px;
	padding:40px;
	padding-top:1px;
	text-align:justify;
	background-color:white;
	/*background-color:rgb(238,241,196);*/
	box-shadow:3px 3px 3px black}
	.titre_marron {color:rgb(217,222,138);
	font-size:1em;
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	font-weight:bold
	}
	.titre_bleu {
	color:rgb(120,180,216);
	font-size:1em;
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	font-weight:bold
	}

/* Tableau des compétences proposées */

	#services_section {
		display:none}
	

/* Section latest */
	#dernieres {
		overflow:hidden;}
	#latest {  /*Titre*/
		font-family: 'Trebuchet MS', Helvetica, sans-serif;
		color:rgba(40,40,40,0.8);
		font-size:1.3em;
		margin:0;
		z-index:-2;
		background-color:rgba(255,255,255,0.6);
		height:3vw;
		padding:10px;
		padding-left:40px;
		position:relative;
		top:1vw;
		margin-bottom:8vw;
		line-height:3vw}
	[id="latest"]::after {
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
  		content: '';
 		background-image:url(Images/bois-h.jpg);
		z-index:-1;
		opacity:0.8;
		}
	#grille_latest {
	width:84vw;
	margin:auto;
	padding:0;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	margin-bottom:10vw}
	#grille_latest figure {
		margin:2vw;
		height:90vh;
		max-height:90vw;
		width:66vh;
		max-width:66vw;	
		border-radius:1vw 1vw;
		overflow:hidden;
		background-size:auto 100%;
		background-position:center;
		transition:all ease 500ms, transform ease 1000ms;
		text-align:center;
		display:flex;
		align-items:flex-end;
		z-index:5}
	#grille_latest figure h2 {
		color:rgba(255,255,255,0);
		background-color:rgba(255,255,255,0.6);
		width:100%;
		line-height:8vw;
		height:9vw;
		margin:0;}
	.latest_anim1 {
		transform:translate(-150%, 0%);
		}
	.latest_anim2 {
		transform:translate(0%, -200%);
		transition-delay:300ms
		}
	.latest_anim3 {
		transform:translate(150%, 0%);
		transition-delay:600ms
		}
		
		
	
	#Projet_1 {
		background-image:url(Images/Popchef/Tranche-1-web.jpg);
		}
	#Projet_2 {
		background-image:url(Images/Livry-apc/Livry-Gargan-Nationale-3-web.jpg);
		}
	#Projet_3 {
		background-image:url(Images/Haussmann/haut-cuisine.jpg);
		}
	#grille_latest figure:hover {
		background-size:auto 110%;
		cursor:pointer;
		} 
	/*#Projet_1:hover {
		background-image:url(Images/Haux/Terrasse-web.jpg);
		}
	#Projet_2:hover {
		background-image:url(Images/Ecole_maternelle/classe-web.jpg);
		}
	#Projet_3:hover {
		background-image:url(Images/Appartement/testweb-table.jpg);
		}*/

/*Projet dynamique*/
	.projet {
		background-color:rgba(0,0,0,0.9);
		position:fixed;
		top:0;
		left:0;
		width:100vw;
		height:100vh;
		z-index:20;
		display:none;
	}
	.cadre {
		border:rgba(214,223,46,0.6) thin solid;
		max-width:80vw;
		padding:0.5vw;
		position:fixed;
		left:50%;
		top:50%;
		transform: translate(-50%, -50%);
		}
		
	/*Contenant sliders*/
	.div_images {
		/*height:62vh;*/
		width:133.78vh;
		max-width:78vw;
		margin:auto;
		overflow-x:hidden;
		}
	#holder, #holder2, #holder3 {
		width: 600%;
		position:relative;
		left:0;
		transition:all linear 1000ms}
	.slide {
		margin:0;
		margin-bottom:3vh;
		padding:0;
		height:62vh;
		width:133.78vh;
		max-width:78vw;
		max-height:37.05vw;
		background-color:transparent;
		background-size:auto 100%;
		background-repeat:no-repeat;
		background-position:center;
		float:left;
		transition:all linear 1000ms;
		}
		
	@keyframes slider0 {
	0%, 15%, 100%	{ background-position:center; }
	20%, 35%		{ background-position:133.78vh; }
	40%, 55%		{ background-position:center; }
	60%, 75%		{ background-position:center; }
	80%, 95%		{ background-position:center; }
	}	
	@keyframes slider1 {
	0%, 15%, 100%	{ background-position:center; }
	20%, 35%		{ background-position:center; }
	40%, 55%		{ background-position:133.78vh; }
	60%, 75%		{ background-position:center; }
	80%, 95%		{ background-position:center; }
	}	
	@keyframes slider2 {
	0%, 15%, 100%	{ background-position:center; }
	20%, 35%		{ background-position:center; }
	40%, 55%		{ background-position:center; }
	60%, 75%		{ background-position:133.78vh; }
	80%, 95%		{ background-position:center; }
	}	
	@keyframes slider3 {
	0%, 15%, 100%	{ background-position:center; }
	20%, 35%		{ background-position:center; }
	40%, 55%		{ background-position:center; }
	60%, 75%		{ background-position:center; }
	80%, 95%		{ background-position:133.78vh; }
	}	
	
	.anim0 {
		animation: slider0 30s infinite;}
	.anim1 {
		animation: slider1 30s infinite;}
	.anim2 {
		animation: slider2 30s infinite;}
	.anim3 {
		animation: slider3 30s infinite;}
	.anim4 {
		animation: slider4 30s infinite;}
	
	#slide-0 {
		background-image:url(Images/Popchef/Tranche-1-web.jpg)}	
	#slide-1 {
		background-image:url(Images/Popchef/Tranche-2-web.jpg);}
	#slide-2 {
		background-image:url(Images/Popchef/023-Poissoniere.jpg);}
	#slide-3 {
		background-image:url(Images/Popchef/025-Air-Entree.jpg);}
	#slide-4 {
		background-image:url(Images/Popchef/032-Solaris-Frigos.jpg);}
	
	#slide-00 {
		background-image:url(Images/Livry-apc/Livry-Gargan-Nationale-3-web.jpg);}	
	#slide-11 {
		background-image:url(Images/Livry-apc/Livry-Gargan-Ave-Firmin-web.jpg);}
	/*#slide-22 {
		background-image:url(Images/Ecole_maternelle/face-web.jpg);}
	#slide-33 {
		background-image:url(Images/Ecole_maternelle/cour-web.jpg);}
	#slide-44 {
		background-image:url(Images/Ecole_maternelle/couloir-web.jpg);}*/
	
	#slide-000 {
		background-image:url(Images/Haussmann/haut-cuisine.jpg);}	
	#slide-111 {
		background-image:url(Images/Haussmann/cuisine.jpg);}
	#slide-222 {
		background-image:url(Images/Haussmann/salle-optix.jpg);}
	#slide-333 {
		background-image:url(Images/Haussmann/Salon.jpg);}
	/*#slide-444 {
		background-image:url(Images/Haussmann/Salon.jpg);}*/
	
	
	@keyframes slider {
	0%, 15%, 100%	{ left: 0 }
	20%, 35%		{ left: -100% }
	40%, 55%		{ left: -200% }
	60%, 75%		{ left: -300% }
	80%, 95%		{ left: -400% }
	}	
	.holder {
		animation: slider 30s infinite;}
	
	
	/*Navigation, contrôle du slider*/
	.play_commands {
		position: absolute;
		top: 25px; right: 25px;
		z-index: 10;
		width: 22px;
		height: 22px;
		text-indent: -9999px;
		border:0 none;
		opacity: 0;
		transition: opacity 1s, right 1s;
		}
	.play { right: 55px; cursor: default; }
 
	.pause:after,
	.pause:before {
		position: absolute;
		display: block;
		content: " ";
		top:0;
		width:38%;
		height: 22px;
		background: #fff;
		background: rgba(255,255,255,0.5);
		}
	.pause:after { right:0; }
	.pause:before {	left:0; }
	.play {
		width: 1px; 
		height: 1px; 
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 20px solid #fff; 
		border-left: 20px solid rgba(255,255,255,0.5); 
		opacity: 0;
	}
 	.cadre:hover .pause,
	.play_commands:focus {
		opacity: 1;
		outline: none;}
			
	/* stopper les animation */
	.sl_command:target ~ .div_images .holder,
	.sl_command:target ~ .div_images #slide-0,
	.sl_command:target ~ .div_images #slide-1,
	.sl_command:target ~ .div_images #slide-2,
	.sl_command:target ~ .div_images #slide-3,
	.sl_command:target ~ .div_images #slide-4,
	.sl_command:target ~ .div_images #slide-00,
	.sl_command:target ~ .div_images #slide-11,
	.sl_command:target ~ .div_images #slide-22,
	.sl_command:target ~ .div_images #slide-33,
	.sl_command:target ~ .div_images #slide-44
	.sl_command:target ~ .div_images #slide-000,
	.sl_command:target ~ .div_images #slide-111,
	.sl_command:target ~ .div_images #slide-222,
	.sl_command:target ~ .div_images #slide-333,
	.sl_command:target ~ .div_images #slide-444 {
		animation-play-state: paused;}
 
	/* redémarrer les animations */
	#sl_play:target ~ .div_images .holder,
	#sl_play2:target ~ .div_images .holder,
	#sl_play3:target ~ .div_images .holder,
	.sl_play:target ~ .div_images #slide-0,
	.sl_play:target ~ .div_images #slide-1,
	.sl_play:target ~ .div_images #slide-2,
	.sl_play:target ~ .div_images #slide-3,
	.sl_play:target ~ .div_images #slide-4,
	.sl_play2:target ~ .div_images #slide-00,
	.sl_play2:target ~ .div_images #slide-11,
	.sl_play2:target ~ .div_images #slide-22,
	.sl_play2:target ~ .div_images #slide-33,
	.sl_play2:target ~ .div_images #slide-44
	.sl_play3:target ~ .div_images #slide-000,
	.sl_play3:target ~ .div_images #slide-111,
	.sl_play3:target ~ .div_images #slide-222,
	.sl_play3:target ~ .div_images #slide-333,
	.sl_play3:target ~ .div_images #slide-444 {
		animation-play-state: running;}
 
	/* switch entre les boutons */
	.sl_command:target ~ .div_images .pause { 
		opacity:0; }
	#sl_play:target ~ .div_images .pause,
	#sl_play:target ~ .div_images .pause:focus,
	#sl_play2:target ~ .div_images .pause,
	#sl_play2:target ~ .div_images .pause:focus,
	#sl_play3:target ~ .div_images .pause,
	#sl_play3:target ~ .div_images .pause:focus { 
		opacity:1; }
	.sl_command:target ~ .div_images .play { 
		opacity:1; right: 25px; cursor: pointer; }
	#sl_play:target ~ .div_images .play,
	#sl_play2:target ~ .div_images .play,
	#sl_play3:target ~ .div_images .play { 
		opacity:0; right: 55px; cursor: default; }

	/* Contexte*/
	.indeximg {
		background-color:rgba(255,255,255,0.2);
		font-variant:small-caps;
		margin:auto;
		display:flex;
		justify-content:space-between;
		}
	.indeximg p {
		font-size:0.8em;
		color:white;
		flex:3;
		padding:10px}
	.indeximg div {
		height:100%;
		width:11vh;
		max-width:6vw;
		margin:0 15px 0 0}
	
	.fleche_gauche {
		background-image:url(Images/fleche-gauche.png);
		left:1vw;}
	.fleche_droite {
		right:1vw;
		background-image:url(Images/fleche-droite.png);}
	.fleche_gauche,
	.fleche_droite {
		position:fixed;
		top:50%;
		transform: translateY(-50%);
		height:5vw;
		width:5vw;
		background-repeat:no-repeat;
		filter:invert(0.1);
		background-size:contain}
	.fleche_droite p,
	.fleche_gauche p {
		color:rgba(255,255,255,0.2);
		position:relative;
		top:100%;
		left:10px;
		font-size:0.8em}
	.projet a {
		color:rgb(120,180,216)}
	
	
		
/*Projet 1 : Haux */
	.img0 {background-image:url(Images/Popchef/Tranche-1-web.jpg);
		background-size:cover;}
	.img1 {
		background-image:url(Images/Popchef/Tranche-2-web.jpg);
		background-size:cover;}
	.img2 {
		background-image:url(Images/Popchef/023-Poissoniere.jpg);
		background-size:cover;}
	.img3 {
		background-image:url(Images/Popchef/025-Air-Entree.jpg);
		background-size:cover;}
	.img4 {
		background-image:url(Images/Popchef/032-Solaris-Frigos.jpg);
		background-size:cover;}
	
/*Projet 2 : Ecole maternelle */
	.img00 {background-image:url(Images/Livry-apc/Livry-Gargan-Nationale-3-web.jpg);
		background-size:cover;}
	.img11 {
		background-image:url(Images/Livry-apc/Livry-Gargan-Ave-Firmin-web.jpg);
		background-size:cover;}
	/*.img22 {
		background-image:url(Images/Ecole_maternelle/face-web.jpg);
		background-size:cover;}
	.img33 {
		background-image:url(Images/Ecole_maternelle/cour-web.jpg);
		background-size:cover;}
	.img44 {
		background-image:url(Images/Ecole_maternelle/couloir-web.jpg);
		background-size:cover;}
	.img55 {
		background-image:url(Images/Ecole_maternelle/patio-web.jpg);
		background-size:cover;}*/

/*Projet 2 : Ecole maternelle */
	.img000 {background-image:url(Images/Haussmann/haut-cuisine.jpg);
		background-size:cover;}
	.img111 {
		background-image:url(Images/Haussmann/cuisine.jpg);
		background-size:cover;}
	.img222 {
		background-image:url(Images/Haussmann/salle-optix.jpg);
		background-size:cover;}
	.img333 {
		background-image:url(Images/Haussmann/Salon.jpg);
		background-size:cover;}
	/*.img444 {
		background-image:url(Images/Appartement/testweb-cuisine.jpg);
		background-size:cover;}*/
	
	
/*@media screen and (min-width: 768px) {*/

@media screen and (min-width: 480px) {
	
	
	/*Bannière et parallax logo*/

	#banniere {
		height:32vw; 
		background-attachment:fixed;
		background-position:0vw -8.5vw;  
		background-size:100%;
		padding:0 36vw 0 0;
		}
	#cadre_logo {
		height:32vw;
		background-size:80%;
		}
	
		
/* Tableau des compétences proposées */

	#services_section {
		display:inherit}
	
	#les_services {  /*Titre*/
		font-family: 'Trebuchet MS', Helvetica, sans-serif;
		color:rgba(40,40,40,0.8);
		z-index:-2;
		font-size:1.3em;
		margin:0;
		background-color:rgba(255,255,255,0.6);
		height:3vw;
		padding:10px;
		padding-left:40px;
		position:relative;
		top:1vw;
		margin-bottom:6vw;
		line-height:3vw}
	[id="les_services"]::after {
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
  		content: '';
 		background-image:url(Images/bois-h.jpg);
		z-index:-1;
		opacity:0.6;
		}
	#services {
		height:34.4vw;
		margin:auto;
		display:flex;
		flex-direction:column;
		flex-wrap:wrap;
		justify-content:center;
		align-content:center}
	#services * {
		padding:1vw;
		padding-bottom:0.5vw;
		margin:0px;
		display:flex;
		flex-direction:column;
		justify-content:flex-end;
		overflow:hidden;
		font-family:'champagnebold', 'Trebuchet MS', Helvetica, sans-serif;
		font-weight:bold}
	
	#services h2 {
		font-size:0.8em}
	
	#patio {
		background: url("Images/Ecole_maternelle/patio-web.jpg") top/ cover;
		width:33vw;
		height:25.8vw;
		order:1;
		border-top-left-radius:1vw;
		border-top-right-radius:1vw;
		}
	#film {
		margin-left:0.6vw;
		margin-bottom:0.6vw;
		background: rgb(217,222,138);
		width:14.1vw;
		height:15.2vw;
		order:3;
		color:white;
		border-top-left-radius:1vw;
		border-bottom-left-radius:1vw;
		}
	#film:hover ~ #bleu h2::after {
		content:"Un média sans équivalent de sensations et de projection.";
		font-size:0.6em} 
	#bleu {
		margin-bottom:0.6vw;
		background: rgb(217,222,138);
		width:14.7vw;
		height:15.2vw;
		order:5;
		text-align:right;
		justify-content:flex-start;
		color:white;
		border-top-right-radius:1vw;
		border-bottom-right-radius:1vw;
		}
	#bleu:hover h2::after {
		content:"Un média sans équivalent de sensations et de projection.";
		font-size:0.6em} 
	#perspective {
		background: rgba(255,255,255,0.6);
		width:33vw;
		height:3.3vw;
		order:2;
		padding-top:0;
		border-bottom-left-radius:1vw;
		border-bottom-right-radius:1vw;
		}
	#perspective h2 {
		line-height:2.3vw;
		}
	#edition {
		margin-left:0.6vw;
		background: rgb(255,255,255);
		width:14.1vw;
		height:13.3vw;
		order:4;
		padding-top:0;
		border-radius:1vw;
		}
	#edition:hover h2::before {
		content:"Webdesign et intégration web HTML, CSS et JavaScript pour mettre en avant votre travail.";
		font-size:0.6em}
	#visite {
		margin-left:0.6vw;
		background: url("Images/bois-v.jpg");
		width:14.1vw;
		height:12.3vw;
		order:6;
		text-align:right;
		color:white;
		opacity:0.8;
		border-radius:1vw;
		}
	#visite:hover h2::before {
		content:"Pour une expérience en ligne plus immersive.";
		font-size:0.6em}
	#documents {
		margin-left:0.6vw;
		background: rgb(120,180,216);
		width:13.9vw;
		height:29.6vw;
		order:7;
		color:white;
		border-radius:1vw;
		}
	#documents:hover h2::before {
		content:"Plan de vente, Axonométrie, Plan masse, Coupe...";
		font-size:0.6em}

/* Section latest */
	#dernieres {
		margin-top:70px}
		
		
	#grille_latest {
	flex-direction:row;}
	
	#grille_latest figure {
		width:22vw;
		height:30vw;
		margin:0;
		}
	#grille_latest figure h2 {
		line-height:4vw;
		height:5vw;}
	
}

@media screen and (min-width: 768px) {
	
	/* Texte d'introduction */
	
	#intro {
		padding:100px 95px 0px 0px;
		}
	#intro_marron {width:60vw;
	margin-left:6vw;
	box-shadow:3px 3px 3px black inset
	}
	#intro_bleue {
	width:calc(55vw - 80px);
	margin-left:38vw;
	box-shadow:3px 3px 3px black}
	
	
	#les_services { /*Titre*/
		text-align:center;
		box-shadow:3px 3px 3px black inset}
		
	#latest {  /*Titre*/
		text-align:center;
		box-shadow:3px 3px 3px black inset;}
	
}

@media screen and (min-width: 1024px) {
	
	
	
	p {
	font-size:inherit}	
	

	
/* Texte d'introduction */
	
	#intro_marron {width:calc(38% + 60px);}
	#intro_bleue {
	top:-100px;
	width:30%;
	padding-top:10px;
	margin-left:23vw;}
	.titre_marron {font-size:1.6em}
	.titre_bleu {font-size:1.5em}


/* Tableau des compétences proposées */

	#services h2 {
		font-size:28px}

/* Section latest */

	#grille_latest figure h2 {
		color:black;
		font-size:23px;
		}

	
}

@media screen and (min-width: 1500px) {
#intro {
		
		background-repeat:no-repeat;
		background-size:50% auto;
		background-position:bottom right
		}
	#services h2 {
		font-size:1.8vw;}
	#grille_latest figure h2 {
		font-size:1.5vw;}
	
	#les_services, #latest { /*Titre*/
		font-size:2vw
		}
	.titre_marron {font-size:2em}
	.titre_bleu {font-size:2em}
	
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #banniere {
	background-attachment:scroll}

}