/* STYLES.CSS */

@import url("https://use.typekit.net/ido7vln.css");

/*
font-family: "helvetica-neue-lt-pro", sans-serif;
font-weight: 200, 300, 400, 500, 700;
font-style: italic, normal;
*/

/*
font-family: "inter-variable", sans-serif;
font-variation-settings: "slnt" 0, "wght" 120;
*/

/*
Helvetica Neue World 45 Light
font-family: "helvetica-neue-world", sans-serif;
font-weight: 300;
font-style: normal;
*/

/*
Elza Text Light
font-family: "elza-text", sans-serif;
font-weight: 300;
font-style: normal;
*/

/*
font-family: "indivisible", sans-serif;
font-weight: 300;
font-style: normal;
*/

/*
font-family: "indivisible", sans-serif;
font-weight: 300;
font-style: normal;
*/

/*
Indivisible Light
font-family: "indivisible", sans-serif;
font-weight: 300;
font-style: normal;
*/

/* Reset */
html{height: 100%; }
body{width: 100%; background: #FFF; color:#000; margin: 0; padding: 0; font-size: 18px;}
* {box-sizing: border-box; position: relative; }
img{max-width: 100%; height: auto;}
ul{margin: 0; display: block; text-align: left; padding: 0; }
li{margin: 0.2em 0; list-style: none; min-height:1.36em; padding-left: 6px; }
div, section{box-sizing: border-box; position: relative; display: block; }
blockquote {margin-inline-start: 0px; margin-inline-end: 0px; }
p, h1, h2, h3, h4, h5, h6{margin-block-start: 0px; margin-block-end: 0px; margin-inline-start: 0px; margin-inline-end: 0px; }
::selection {background:rgba(0,0,0,1); color:#FFF }


/* typo */
body, p, h1, h2, h3, h4, h5, h6{
	font-family: "helvetica-neue-lt-pro", sans-serif;
		/*font-family: "inter-variable", sans-serif;
	font-variation-settings: "slnt" 0, "wght" 400;*/

	font-family: "elza-text", sans-serif;
	font-family: "indivisible", sans-serif;
}


p{font-weight:400; font-size:18px; line-height:1.25; margin-bottom: 10px;}
h1{font-weight:400; font-size:23px; line-height:1.25; margin-bottom: 10px;}
h2{font-weight:400; font-size:20px; line-height:1.25; margin-bottom: 10px;}
h3{font-weight:400; font-size:20px; line-height:1.25; margin-bottom: 10px;}

a{text-decoration: none; color:#000; outline: none}
sup {vertical-align: super; font-size: smaller; line-height: 1; }
strong{font-weight: 500}



/* forms */
textarea, input{border: 1px solid #000; display: block; width: 100%; background: transparent; font-family: inherit; font-size: inherit; line-height: inherit; color: #000; margin-bottom:.5em; padding:.5em}
textarea:focus, input:focus {outline: none !important;}
.validate input{width:auto; background: #000; color:#FFF; padding:.5em 1em}

/* structure */
.block-type-text h2{margin-top: 20px;}


.blocks{
	width: 100%;
}
.block-type-image{
	width: 100%;
	display: flex;
}
.block-type-image.end {
	justify-content: end;
}
.block-type-image.center {
	justify-content: center;
}



/*elements*/
/*img.img {
  visibility: hidden;
}

img.img.loaded {
  visibility: visible;
}*/

/* header */
#menu{
  display: flex;
  justify-content: space-between;
  margin: 20px;
  font-size: 23px;
  height: 30px;
  position: sticky;
  top: -50px;
  z-index: 1000;
  transition: transform .7s;
  transition: top .7s;
}

#menu.scrollup{
	/*transform: translate(0, 70px);*/
	top: 20px;
}

nav.main_menu{
	display: flex;
	align-items: center;
}

nav.main_menu li.active a{
	font-weight: 500;
  	letter-spacing: -.2px;
}

nav.main_menu ol{
	display: flex;
	gap: 15px;
	margin:0 15px;
}

nav.main_menu li{
	margin:0;
}


/* home */
main.home{
  height: calc(100vh - 120px);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 629px;
}

#diaporama {
  width: 973px;
  aspect-ratio: 6/4;
  max-width: 100%;

  width: 100%;
  max-width: 120vh;
  transition:opacity 1s;
  position: relative;
	max-width: 120vh;
	overflow: visible;
	text-align: right;
}
#diaporama .slide{
	width: 100%;
	height: 100%;
	position: absolute;
  opacity: 0;
  transition: opacity 1s ease;
}
#diaporama .slide img{
width: 100%;
}
#diaporama .slide.active {
  opacity: 1;
  z-index: 1000;
}
#swiper_diaporama .swiper-slide.swiper-slide-prev{
	opacity: 0 !important;
	transition-duration:1s !important;
}
/*#swiper_diaporama .swiper-slide{
  opacity: 0;
}*/

#swiper_diaporama.on {
	opacity: 1;
}
#swiper_diaporama img{
	width: 100%;
}


#swiper_diaporama div.caption{text-align: right;}

#swiper_diaporama .swiper-slide:not(.swiper-slide-active) div.caption{opacity: 0}

/* Structure de page */
div#page {
  width: calc(100vw - 22px);
/*  margin-right: 20px;
*/}


section.suivant {
  display: flex;
  flex-flow: row;
  width: 100%;
  justify-content: space-between;

}


main{
	margin: 20px;
	min-height: calc(100vh - 120px);
}

footer{
	text-align: left;
	margin: 20px 20px;
	height: 30px;
	font-size: 14px;
	padding-bottom: 20px;
	margin-bottom: 0px;
}



section.layout{
	--gutter:15px;
	--nbrcol: 0;
	--span: 0;
	display: flex;
	justify-content: space-between;
}

section.layout div.column{
	/*width: calc((100% - var(--gutter) * (var(--cols) - 1)) / var(--cols));*/
	width: calc(((100% - var(--gutter) * (var(--nbrcol) - 1) ) * (var(--span)) / 12));
	margin-bottom: var(--gutter);
	display: flex;
}

.block-type-image {
	line-height: 0;
}
section.layout div.column a[data-fancybox]{
	line-height: 0
}
section.layout div.column a[data-fancybox] img{
	line-height: 0;
	margin-bottom: var(--gutter);
}
section.layout div.column .blocks .block:last-child a[data-fancybox] img{
	margin-bottom: 0;
}
/* elements */
img.ombre{
	box-shadow: 0px 5px 12px rgba(0 0 0 / 0.3);;

}

/* portfolio */
section.portfolio{
	--gutter:30px;
	--cols:3;
	display: flex;
	flex-flow: row wrap;
	gap: var(--gutter);
	width: 100%;
	max-width: 1200px;
	margin:auto;

}

section.portfolio .projet{
	width: calc((100% - var(--gutter) * (var(--cols) - 1)) / var(--cols));
	position: relative;
}

section.portfolio .projet img{
	position: relative;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}
section.portfolio .projet h2{
 	font-size: 18px
}

section.portfolio .projet img:not(.on){
	position: absolute;
	top: 0;
	left: 0;
	/*display: none;*/
	opacity: 0;
	/*transition: opacity .2s */
}


section.portfolio .projet img.active {
	display: inline-block;
    opacity: 1;
    z-index: 1000
}

a:hover,
section.portfolio .projet:hover h2{
	font-weight: 500;
  	letter-spacing:-.12px;
}

main.portfolio{
  min-height: calc(100vh - 130px);
  min-height: calc(100vh - 130px);
  display: flex;
  justify-content: center;
  align-items: center;
  /*min-height: 649px;*/
  margin-bottom: 30px
}

main.page,
main.projet{
	margin-top: 40px;
	min-height: calc(100vh - 140px);
}

@media (min-width: 1600px) {
	main.page,
	main.projet{
	margin-top: 100px;
	min-height: calc(100vh - 200px);
	}
}

/* projet */
section{
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}

section.presentation{
	--gutter:30px;
	--cols:2;
	display: flex;
	gap: var(--gutter);
	flex-flow: row wrap;
	padding-bottom: 80px;
  	margin-top: 40px;

}

section.presentation div{
	width: calc((100% - var(--gutter) * (var(--cols) - 1)) / var(--cols));
}
div.text_en *{
	font-weight: 300;
}
div.text_en h3{
	/*font-weight: 400;*/
}
.photos_grid{
	--gutter:15px;
	--cols:3;
}
.grid-gutter{width: var(--gutter)}
.grid-sizer,
.grid-item{
	width: calc((100% - var(--gutter) * (var(--cols) - 1)) / var(--cols));
	line-height:0;
	margin-bottom: var(--gutter)
}
.grid-item-size2{
	width: calc((100% - var(--gutter)/2 ) * 2 / var(--cols));
}
.grid-item-size3{
	width: 100%;
}


.grid-item{
	background-color: #CCC;
	background-size: contain;

}

	.grid-item img{
	width: 100%;
	object-fit: cover;
}