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


/* 
gris bleuté : rgba(94,126,145,0.2)
Vert (liserets) : rgb(214,223,46)
Vert (applats) : rgb(217,222,138)
Marron : rgb(105,91,64)
Bleu : rgb(120,180,216)
Bleu foncé : rgb(94,126,145)
'champagne', 
*/

/* Apparence générale de la page */

	@font-face{font-family:'champagne';
	src: url('font/ChampagneLimousines.eot');
    src: url('font/ChampagneLimousines.eot?#iefix') format('embedded-opentype'),
        url('font/ChampagneLimousines.woff') format('woff'),
		url('font/champagne_limousines.ttf') format('TrueType'),
        url('font/ChampagneLimousines.svg#Champagne&Limousines') format('svg');
    font-weight: normal;
    font-style: normal;}
	@font-face{font-family:'champagnebold';
	src: url('font/ChampagneLimousines-Bold.eot');
    src: url('font/ChampagneLimousines-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/ChampagneLimousines-Bold.woff') format('woff'),
        url('font/ChampagneLimousines-Bold.ttf') format('truetype'),
        url('font/ChampagneLimousines-Bold.svg#Champagne&Limousines-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
	}
	body {
		font-family:'champagne', sans-serif;
		font-weight:lighter;
		font-size:1.1em;
		margin:0;
		padding:0;
		background-color:rgb(40,40,40)
		}
	input, textarea {
		font-family:'champagne', sans-serif;
		font-weight:lighter;
		font-size:0.8em;
		}
	p {
	margin: 0 0 0.5em 0;
	font-size: 1em;
}
	h3 {
		font-weight:100}






/* Bannières d'en-tête */
	header p {margin:0; padding:0;
	height:3.5vw;
	}

	#bandeau {
		overflow:hidden;
		width:100%;
		height:50px;
		margin:0px;
		padding:0;
		display:flex;
		color:rgb(105,91,64);
		font-family:'champagnebold', 'Trebuchet MS', Helvetica, sans-serif;
		font-weight:bold
		}	
	#bois_free {
		width:0;
		opacity:0}
	#bleu_archi {
		width:100%;
		background-color:rgb(217,222,138);
		}
	#bleu_archi h3 {
		text-align:center;
		line-height:40px}

/* Bar du menu*/
header {
	position:relative;
	z-index:10;}
		
#navcheck {
  position: fixed;
  opacity: 0;
} /*masque la case à cocher*/

#label {
  cursor: pointer;
} /* indique que le menu est cliquable*/

[id="label"]::before {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(18, 67, 100, 0.6);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
} /* Etend le label cliquable à l'ensemble de la page pour la fermeture*/

#label .burger {
  height:37px;
  width:37px;
  position:fixed;
  top:60px;
  left:0px;
  background-color:rgba(217,222,138,0.9);
  border-radius:0px 5px 5px 0px;
  z-index: 3;
  margin: 0;
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

#label .burger::before,
#label .burger .bar,
#label .burger::after {
  position: absolute;
  left: 0;
  display: block;
  width: 30px;
  height: 2px;
  margin-left:3px;
  background: white;
  content: '';
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}/*Dessine les lignes menu burger*/

#label .burger .bar {
  top: 47%;
}/*Place la barre du milieu du menu burger*/
#label .burger::before {
  top: 10px;
  transform-origin: top left;
}/*Place la barre du haut du menu burger*/
#label .burger::after {
  bottom: 10px;
  transform-origin: bottom left;
}/*Place la barre du bas du menu burger*/

/*input:focus + label .burger,*/
#label:hover .burger {
  opacity: .75;
}  /* désopacifie le menu burger*/


#menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

#menu div {
  transform: translateX(-100%);
  transition:all .5s ease}

#menu div:nth-child(1) {
  transition-delay: 100ms;
}
#menu div:nth-child(2) {
  transition-delay: 150ms;
}
#menu div:nth-child(3) {
  transition-delay: 200ms;
}
#menu div:nth-child(4) {
  transition-delay: 250ms;
}
#menu div:nth-child(5) {
  transition-delay: 300ms;
}
#menu div:nth-child(6) {
  transition-delay: 350ms;
}
#menu div:nth-child(7) {
  transition-delay: 400ms;
}

[id="navcheck"]:checked + [id="label"]::before {
  opacity: 1;
  pointer-events: auto;
}/*Rend cliquable et visible le label sur la page pour fermeture*/

[id="navcheck"]:checked + label .burger::before, 
[id="navcheck"]:checked + label .burger::after {
  width: 35px;
}/*Allonge les barres de la croix pour une forme cohérente*/
[id="navcheck"]:checked + label .burger::before {
  transform:  translate(4px, -2px) rotate(45deg);
}
[id="navcheck"]:checked + label .burger::after {
  transform: translate(4px, 6px) rotate(-45deg) ;
}
[id="navcheck"]:checked + label .burger .bar {
  transform: scale(0.1);
}
#navcheck:checked ~ nav {
  transform: translateX(0);
  position:fixed;
  top:0;
  width:100%
}/*Fait glisser le menu pour le faire apparaitre*/

#navcheck:checked ~ #menu h3 {
		height:50px;
		max-height:calc(100vh / 6 - 10px);
		background-color:rgba(120,180,216,0.8);
		padding:0px;
		padding-top:10px;
		font-size:0.8em;
		border-bottom:thin solid rgb(217,222,138)}
#navcheck:checked ~ #menu h3::after {
		font-size:1.6em;
		margin:0;
		padding:0;
		position:relative;
		top:-4px;
		color:white;
		display:block;
		}

	#navcheck:checked ~ #menu div:nth-child(1) h3::after {
		content:"Studio"}
	#navcheck:checked ~ #menu div:nth-child(2) h3::after {
		content:"Photoréalisme"}
	#navcheck:checked ~ #menu div:nth-child(3) h3::after {
		content:"A la main"}
	#navcheck:checked ~ #menu div:nth-child(4) h3::after {
		content:"Visualisation"}
	#navcheck:checked ~ #menu div:nth-child(5) h3::after {
		content:"A propos"}
	#navcheck:checked ~ #menu div:nth-child(6) h3::after {
		content:"Un projet ?"}
	#navcheck:checked ~ #menu div:nth-child(7) h3::after {
		content:"Un projet ?"}

#navcheck:checked ~ #menu div {
  transform: translateX(0%)}


.visuallyhidden {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}





	#menu ul {
		display:none}
	h3 {text-align:center;
	font-size:1.4em;
	margin:0;
	padding-top:4px}
	a {
		text-decoration:none;
		color:black}
		
/* Pied de page */
	footer {
		min-height:14vw;
		background-image:url(Images/bois-h.jpg);
		background-repeat:repeat;
		background-size:contain;
		background-attachment:fixed;
		padding-top:1vw;
		margin-top:40px;
		font-size: 0.8em;
		}
	#fond_blanc {
		background-color:rgba(255,255,255,0.4);
		margin-top:0vw;
		min-height:14vw;
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
		align-items:center}
	#fond_blanc p + div {
		text-align:right;
		padding-right:5vw}
	#logo_mini {
		height:30vw;
		max-height:20vh;
		margin:0 3vw 0 5vw}
	#follow {
		width:100%;
		display:flex;
		justify-content:space-between;
		padding:1vw 5vw 1vw 5vw}
	#facebook, #linkedin, #instagram, #klapty {
		opacity:100%;
		min-height:30px;
		height:2vw;
		margin-right:1vw}
	




@media screen and (min-width: 768px) {
	
	
}

@media screen and (min-width: 1024px) {

	
	p {
	margin: 0 0 0.5em 0;
	font-size: 1em;
}
	#bandeau {
		height:50px;
		display:flex;
		}
	#bois_free {
		color:rgba(40,40,40,0.8);
		/*color:rgb(120,180,216);*/
		display:flex;
		justify-content:space-around;
		background-color:white;
		width:48%;
		opacity:1;
		font-size:1.5vw;
		/*text-shadow:0.5px 0.5px 1px black;*/
		z-index:-2;
		line-height:40px
		}
	[id="bois_free"]::after {
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
  		content: '';
 		background-image:url(Images/bois-h.jpg);
		background-size:48%;
		background-repeat:no-repeat;
		z-index:-1;
		opacity:0.8;
		}
	
	#bois_free h3:nth-child(1) {
		transform:translateX(2vw)}
	#bois_free h3:nth-child(2) {
		transform:translateX(-2vw)}
	
	#bleu_archi {
		background-color:rgb(120,180,216);
		width:53%;
		font-size:2vw
		}
		
	/* Bar du menu */
	
	#label {display:none}
	#menu {
		position:relative;
		transform: translateX(0%);
		margin:0;
		padding:0px 30px 0px 30px;
		background-color:rgba(217,222,138, 1);
		height:35px;
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		transition: all linear 500ms;
		border-bottom:rgba(217,222,138,1) medium double;
		z-index:20;
		}
	.fixe {
		position:fixed !important;
		top:0;
		width:calc(100% - 60px)}
	#menu div {
		width:calc(100% / 6 - 14px);
		transform: translateX(0)}
	
	header nav div ul {
		display:none;
		list-style-type:none}
	header #menu div:hover ul {
		display:block;
		background-color:rgba(255,255,255,0.7);
		box-shadow: 1px 1px 2px rgba(105,91,64,0.8);
		margin:0;
		padding:0;
		padding-top:0.5vw}
	header nav div:hover ul li {
		background-color:white;
		margin-bottom:4px;
		padding:4px;
		padding-left:4vw;
		box-shadow: 1px 1px 2px rgba(105,91,64,0.5)}
	header nav div ul li:hover {
		background-color:rgba(120,180,216,0.5)}
	header #menu div:hover h3 {
		height:38px;
		background-color:rgba(120,180,216,1);
		padding:0px;
		font-size:0.8em;}
	.actuel {
		padding:0;
		height:38px;
		line-height:38px;
		/*border: 3px double rgb(105,91,64);*/
		box-shadow: 1px 1px 2px rgba(105,91,64,0.8) inset;
		/*background-color:rgb(180,214,235);*/
		background-color:rgb(238,241,196);
		/*color:rgb(105,91,64);
		font-family:'champagnebold', 'Trebuchet MS', Helvetica, sans-serif;
		font-weight:bold;*/
		}
	header nav div:hover h3::after {
		font-size:1.6em;
		margin:0;
		padding:0;
		position:relative;
		top:-4px;
		color:white;
		display:block;
		}
	header nav div:nth-child(1):hover h3::after {
		content:"Studio"}
	header nav div:nth-child(2):hover h3::after {
		content:"Photoréalisme"}
	header nav div:nth-child(3):hover h3::after {
		content:"A la main"}
	header nav div:nth-child(4):hover h3::after {
		content:"Visualisation"}
	header nav div:nth-child(5):hover h3::after {
		content:"A propos"}
	header nav div:nth-child(6):hover h3::after {
		content:"Un projet ?"}
	header nav div:nth-child(7):hover h3::after {
		content:"Un projet ?"}
	
	h4 {text-align:center;
	font-size:1.1em;
	font-weight:normal;
	font-variant:small-caps;
	color:rgb(94,126,145);
	margin:0;
	margin-top:-0.3em;}
	h2 {font-variant:small-caps;
		font-size:2em;
		margin:0.5em 0 1.5em 0;
		}
		
/* Pied de page */
	footer {
		font-size:inherit}
	#fond_blanc {
		justify-content:flex-start;
		}
	
	#fond_blanc p + div {
		text-align:left;
		padding-right:0vw}
	#logo_mini {
		height:13vw;
		margin:0 3vw 0 3vw}
	#follow {
		width:auto;
		display:block;
		padding:0;
		padding-left:10vw}
	#facebook {
		height:2vw}
	#linkedin {
		height:2vw}

}

@media screen and (min-width: 1500px) {
	
	body p {
		
		font-size:1.3em;
		
		}
	#bandeau {
		min-height:3.5vw;
	}
	#bois_free, #bleu_archi h3 {
		line-height:3.0vw
	}
	#menu {
		min-height:2.5vw;}
	#menu h3 {
		font-size:1.6vw;
		line-height:2.3vw;}
	.actuel {
		font-size:1.6vw;
		margin:0;
		padding:0;
		padding-top:0.2vw;
		min-height:calc(2.3vw + 3px);
		line-height:calc(1.8vw + 3px);
	}
	header #menu div:hover h3 {
		min-height:calc(2.5vw + 3px);
		/*padding-top:-0.3vw;*/
		font-size:0.8vw;
		line-height:normal}
	header nav div:hover h3::after {
		font-size:1.6vw;
		top:-0.2vw;
		}
	header nav div:hover ul li {
		font-size:1vw;
		line-height:1.5vw;
		min-height:1.5vw;
		}
	
	#process li {
		font-size:1.3em}
	
}