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

button{
  background-color: transparent;
  border-width: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit !important;
  padding: 0 !important;
  margin:0 !important;
}

span{
	font-weight:100;
}

/* backgrounds */

.beige{
	background-color: #faf4eb !important;
}

.blanc{
	background-color: white !important;
}

/*TEXTE*/

a{
	font-family:inherit;
	font-size:inherit;
	text-decoration:none;
	color:inherit;}
	
p>a{
	text-decoration:underline !important;}

h5>a{
	text-decoration:underline !important;}

	
	/* titre header */

h1{
	color: black;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:24px;
	font-weight:300;}
	
h2{
	color: black;
	font-family: 'Amiko', sans-serif;
	font-size:16px;}
	
	/* titre projet et page */
	
h3{
	color: black;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:15px;
	font-weight:300;
	text-align: left;}
	
	/* titre footer */
	
h4{
	color:black;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:10px;
	font-weight:350;
	line-height: 3em}

h5{
	color: black;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:12.5px;
	font-weight:350;
	line-height: 1.6em;}

h6{
	color: black;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:0.6em;
	font-weight:350;
}
	
p{
	color: black;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:13px;
	text-align:justify;}

/*STRUCTURE TOUTE LES PAGES*/

body{
	margin:0;
	padding:0;}
	
#footer{
	position:fixed;
	bottom:0;
	left:0;
	height:5vh;
	width:100vw;
	padding-left:4vw;
	z-index:10;}


#footer2{
	width:100vw;
	display: relative;
	margin-left: 1vw;
}

/*menu haut*/

#header{
	position:fixed;
	left:0;
	top:0;
	width:100vw;
	height:9vh;
	min-height: 65px;
	z-index:300;
	transition: top 1s;}

#header-color{
	position:fixed;
	left:0;
	top:0;
	width:100vw;
	height:11vh;
	min-height: 65px;
	z-index:10;
	background-color:#faf4eb;
	transition: top 1s;
}
	
#topmenu{
	position:relative;
	top:3vh;
	left:2vw;}
	
li.topmenupage{
	display:inline;
	color: black;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:100;
	font-size:14px;
	padding-left:10px;
	padding-right:10px;}

li.topmenupage:hover{
	color:grey;}

li.name{font-size:18px !important;}

#liensmobile{
	display:none;
}

/* menu haut sur mobile */

@media only screen and (max-width: 600px){
	
	#header{
		position: relative !important;
		height:inherit !important;
		padding-bottom: 2em;
		top:0 !important;
		left:0;
	}
	
	li.topmenupage{
		display:block !important;
		line-height: 1.5em;
		padding-left:0 !important;
		padding-right:0 !important;
	}
	
	#liensmobile{
		display:block !important;
	}
	
	#lienwork{
		color:transparent !important;
	}
	#header-color{
		display: none !important;
	}
	
}
	
/* PAGE WORK AKA ACCUEIL */

#contenu-work{
	position: relative;
	width: 96vw;
	min-height: 82vh;
	margin: max(70px, 12vh) 0 15em 2vw;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(465px, 1fr));
	grid-column-gap:3em;
	grid-row-gap: 1em;
}

#contenu-work>div{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(215px, 1fr));
	grid-column-gap:3em;
	grid-row-gap: 1em;
}

#medium-work{
	position: relative;
	width: 96vw;
	min-height: 82vh;
	margin: max(70px, 12vh) 0 15em 2vw;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
	grid-column-gap:3em;
	grid-row-gap: 1em;
}

.med-liste>div>p{
	text-align: left !important;
}

.work-liste>div>p{
	text-align: left !important;
}

#work-liste-mobile5{
	display:none;
}

.button-mobile{
	display: none;
}

#perproject{
	display:inline !important;
}

#permedium{
	display:inline !important;
}
#perprojectmobile{
	display: none !important;
}
#permediummobile{
	display:none !important;
}

/* Couleur des liens */


.rose{
	background-color: rgba(255, 235, 245, 255);
}

.orange{
	background-color: rgba(248, 226, 215, 255);
}

.bleu{
	background-color: rgba(230, 244, 250, 255);
}

/* page work mobile */

@media only screen and (max-width: 600px){
	.button-mobile{
		display: inline !important;
	}
	#perprojectmobile{
		display: inline !important;
	}
	#permediummobile{
		display:inline !important;
	}
	#perproject{
		display:none !important;
	}
	#permedium{
		display:none !important;
	}
	#contenu-work{
		margin: 8vw 0 0 12vw !important;
		padding:0 !important;
		grid-template-columns: repeat(auto-fit, 80vw) !important;
		grid-column-gap:0 !important;
		grid-row-gap:0 !important;
		min-height: 0 !important;
	}
	#contenu-work>div{
		grid-column-gap:0 !important;
		grid-row-gap: 0 !important;
	}
	.work-liste{
		margin: 0 !important;
		padding: 0 !important;
	}
	.work-liste-mobile{
		margin: 0 !important;
		padding: 0 !important;
		animation: growDown 200ms ease-in-out forwards;
	}
	#medium-work{
		margin: 8vw 0 0 12vw !important;
		padding:0 !important;
		grid-template-columns: repeat(auto-fit, 80vw) !important;
		grid-column-gap:0 !important;
		grid-row-gap:0 !important;
		min-height: 0 !important;
	}
	#medium-work>div{
		grid-column-gap:0 !important;
		grid-row-gap: 0 !important;
	}
	.med-liste{
		margin: 0 !important;
		padding: 0 !important;
	}
	.med-liste-mobile{
		margin: 0 !important;
		padding: 0 !important;
		animation: growDown 200ms ease-in-out forwards;
	}
	#work-liste-mobile1{
		display:none;
	}
	#work-liste-mobile2{
		display:none;
	}
	#work-liste-mobile3{
		display:none;
	}
	#work-liste-mobile4{
		display:none;
	}
	#work-liste-mobile5{
		display:none;
	}
	#work-liste-mobile6{
		display:none;
	}
	#work-liste-mobile7{
		display:none;
	}
	#work-liste-mobile8{
		display:none;
	}
	#work-liste-mobile9{
		display:none;
	}
	#footer2{
		display: none !important;
	}
	@keyframes growDown {
    0% {
        transform: scaleY(0)
    }
    80% {
        transform: scaleY(0.8)
    }
    100% {
        transform: scaleY(1)
    }
	}	
}

/* page work images qui apparaissent */

.pop{
	z-index:500;
	width: 300px;
  	position: absolute;
  	display:none;
}

.pop>img{
	width:100%;}

/* PAGES INFO */

#contenu-page{
	position:relative;
	width:60vw;
	min-height:82vh;
	margin-left:3vw;
	margin-top:max(70px, 12vh);
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(600px, 1fr));
	grid-column-gap:3em;
	grid-row-gap: 1em;
}

/* page info mobile */

@media only screen and (max-width: 600px){

	#contenu-page{
		position:relative;
		margin-top:max(70px, 12vh);
		display:grid;
		grid-template-columns:0.9fr !important;
		grid-column-gap:0;
		grid-row-gap: 1em;
		padding: 0 3em 0 2.5em;
	}
}

	/*Projets et expositions*/

#projet{
	height:87vh;
	display: grid;
	grid-template-rows: 1;
	grid-template-columns: repeat(35, 1fr);
	margin-top:max(60px, 9.5vh);
	margin-bottom:3.5vh;
	overflow-x:scroll;
	overflow-y:hidden;
	z-index:150;
}
#projet>div{
	z-index:150;
	height:87vh;
}
.contenu-projet{
	width:min(33vw, 650px);
	padding:10vh 5vh 5vh 5vh;
	margin-bottom: 55vh;
	overflow-y:scroll;
	z-index:5 !important;
}
#texte-projet{
	padding-bottom: 10vh;
}
#fleche{
	text-align:right;
}
img.visuel{
	height:100%;
	padding-left:2vw;
}
iframe.visuel{
	height:87vh;
	padding-left: 2vw;
}
#bumper{
	width:20vw;
}
	
   
/* insertion video */

video{
	display:inline-block;
	padding:10px;}

/* insertion credit photo */

img.visuel-fig{
	display:inline-block;
	height:100%;
	z-index:5;}

figure{
	display:inline-block;
	height:95%;
	padding:10px;
	margin:0;
	text-indent:0;}
	
figcaption{
	color: black;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:8px;}

.videofig>figcaption{
	font-size: 0.7em; 
	padding-left: 1em;
}

/* page projet mobile */

@media only screen and (max-width: 600px){
	#projet{
		display:flex;
        flex-direction: column;
        flex-flow: row wrap;
		height:auto !important;
		margin-top:max(60px, 9.5vh);
		margin-bottom:3.5vh;
		margin-left:0;
		overflow-x:hidden;
		z-index:150;
	}
	#projet>div{
		height:auto !important;
		margin:1em 2vw 1em 2vw;
	}
	img.visuel{
		width:95vw;
		height: inherit !important;
	}
	img.visuel-fig{
		width:95vw;
		margin:1em 2vw 1em 2vw;
		height: inherit !important;
	}
	.contenu-projet{
		order:1;
		width:80vw;
		margin-bottom: 3em !important;
	}
	#fleche{
		display: none;
	}
	video{
		width:95vw !important;
	}
}
	

/*PAGE ONGOING */

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  outline:none;
}

iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}