@charset "utf-8";
/* CSS Document */
html, body {
    -webkit-text-size-adjust: 100%;
}
body { margin:0; font-size:21px; font-family:"Larsseit"; font-weight:400;}

#main { top:0; left:0; min-height:600px; height:100vh; width:100%; background:#333; position:relative; overflow:hidden; cursor:pointer; z-index:10;}

#main #elements { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2; 

background: -moz-linear-gradient(45deg,  rgba(74,7,43,0.8) 0%, rgba(0,0,0,0.12) 80%);
background: -webkit-linear-gradient(45deg,  rgba(74,7,43,0.8) 0%,rgba(0,0,0,0.12) 80%);
background: linear-gradient(45deg,  rgba(74,7,43,0.8) 0%,rgba(0,0,0,0.12) 80%);

}

a { cursor:pointer; text-decoration:underline; color:#777;}
a:hover { text-decoration:none;}

#main #elements .line { height:64px; overflow:hidden;}
#main #elements span { opacity:0.1; float:left; width:64px; height:64px; background:url(../images/plus.svg) no-repeat center center; transition:opacity .75s;}
#main #elements span.actif { opacity:.8; transition:opacity 0.1s;}
#main #elements span.actif-2 { opacity:0.66; transition:opacity 0.15s;}
#main #elements span.actif-3 { opacity:0.4; transition:opacity 0.2s;}
#main #elements span.actif-4 { opacity:0.2; transition:opacity 0.3s;}




#video{
  position: absolute; left: 0; top: 0; width:100%; height:100%; overflow:hidden;
}


#main video{ position: absolute; 
 left: 0; top: 0; left:calc(50%); top:calc(50%); transform:translate(-50%,-50%);
  min-width: 105%; min-height: 105%;
    min-width: calc(100% + 10px); min-height: calc(100% + 10px);
  margin:-5px;
  width: auto; height: auto; z-index: 1;
  background-size: cover;
}




.clear { clear:both; }

#main #intro { color:#FFF; position:absolute; position:absolute; z-index:3; top:50%; top:calc(65% - 10em); left:0; width:100%; height:0; }
#main .center { margin:0 auto; position:relative; height:0;}

#main #intro h1 span { position:absolute; right:100%; margin:0 0.5em; text-indent:-500%; width:6em; height:6em; background:url(../images/logo-home.svg) no-repeat right bottom; background-size:contain; bottom:0;}
#main #intro h1 { font-weight:500; font-size:140%; position:relative;}
#main #intro h2 { font-weight:500; font-size:355%; line-height:110%; margin:0; width:0; white-space:nowrap;}

#main #intro h2 span {
	white-space:nowrap;
	float:left; 
    animation-name: titleAnimation;
    animation-timing-function:ease;
    animation-duration: 1.1s;

  }


@keyframes titleAnimation {
    0% {
      transform: translateY(50px);
      opacity: 0;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  100% {
      transform: translateY(0);
      opacity: 1;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }


}



.anchor { position:absolute; margin-top:0;}
.anchor.article { margin-top:1.8em;}

section {  margin:0; padding:1px 10em; box-sizing:border-box;}
section.grey {  background:#F2F2F2;}
.center { max-width:1120px; margin:5em auto; }


/*.center.big p { font-size:115%; line-height:145%;}*/

p.intro { font-size:150%; line-height:130%;}

#citation blockquote:before { position:absolute; width:2em; height:2em; background:url(../images/quote-plus.svg) no-repeat center center; background-size:cover; content:""; right:0; top:0; margin:-0.78em;}
#citation { padding:6em 0 6em 50%; margin-top:6em; position:relative;}
#citation blockquote { padding:1em; background:#FFF; float:left; font-size:250%; width:9em; margin:0 0 0 -1em;   line-height:110%; position:relative; z-index:2;}
#citation blockquote strong { display:block; font-weight:400; font-size:38%; color:#BE4887; line-height:100%; margin-top:1.5em; position:relative;}

#citation a { position:absolute; top:0; right:0;}
#citation a svg { height:1em; width:1em;}
#citation a svg path { fill:#BE4887; transition:fill 0.2s;}
#citation a:hover svg path { fill:#000;}
#portrait { width:60%; height:100%; background:#333 url(../images/isabelle-lauriou.jpg) no-repeat 90% 20%; background-size:cover; position:absolute; bottom:0; right:40%; padding:6em 0 0 0;}

#details article { margin-top:12em;}
#details h2 , #contact h2 , #mentions-legales h2 { font-weight:700; position:absolute; margin:0 0 0 -4em; font-size:140%; padding-left:4em; width:5em;  color:#BE4887;}
#details h2 strong , #contact h2 strong { font-weight:500; display:block; position:absolute; font-size:300%; left:0; bottom:100%; margin-bottom:0.8em; color:#000;}
#details h2 span , #contact h2 span , #mentions-legales h2 span { position:absolute; left:0; height:0.16em; background:#BE4887; overflow:hidden; text-indent:-500px; width:2em; top:0.5em;}




#contact h2 {  width:auto;  color:#FFF;}
#contact h2 span { background:#FFF;}



#details p { padding-left:40%; padding-left:calc(50% - 5em); }

header { margin:0; position:absolute; padding:40px 18px; box-sizing:border-box; width:100%; overflow:hidden;}

/*header menu { padding:0; opacity:0; transform:scale(1.05,1.5); margin:0; background:#FFF; box-shadow:0 0 20px 1px rgba(0,0,0,0.09); position:relative; height:32px; line-height:30px; padding:15px 65px; text-align:right; font-size:19px; font-weight:500; 
transition:opacity 0.2s, transform 0.2s; white-space:nowrap; overflow:hidden; text-overflow:allipsis;}*/

header menu { padding:0; opacity:1; margin:0; background:#FFF; box-shadow:0 0 20px 1px rgba(0,0,0,0.09);  height:78px; line-height:78px; padding:0; text-align:right; font-size:19px; font-weight:500; 
transition:padding 0.3s, width 0.5s; white-space:nowrap; overflow:hidden; text-overflow:allipsis; width:0; z-index:30; right:0; right:calc(40px); position:fixed; box-sizing:border-box;}


header menu a.picto { float:right; padding-top:0.3em;}
header menu svg { height:1.2em; width:1.2em; }
header menu svg path { fill:#5C5C5C; transition:fill 0.25s;}
header menu a:hover  svg path { fill:#BE4887;}




header.open { z-index:100; position:fixed;}
header.open menu { opacity:1;   width:100%; width:calc(100% - 80px);  padding:0 65px;}

header menu a { display:inline-block; margin-right:25px; color:#5C5C5C; text-decoration:none; transition:color 0.2s, opacity 0.3s; opacity:0;}
header.open menu a { opacity:1;  transition:color 0.2s, opacity 0.5s 0.15s;}

header menu a:hover { color:#BE4887;}


#logo , #menuBtn {  position:fixed; margin:62px 68px; z-index:5;}

.open #logo { z-index:100;}
/*.open #logo svg polygon , .open #logo svg path { transition:none;}*/

#logo { top:-4px; left:0;}
#menuBtn { right:0; top:0; z-index:200; width:32px; height:36px; padding:5px 0; box-sizing:border-box; }

#menuBtn span { display:block; height:3px; margin:5px 0; background:#000; transition:all 0.2s;}

.open #menuBtn:hover span , .open #menuBtn.white:hover span {   background:#BE4887; }

#menuBtn span:nth-child(1) { position:absolute; width:32px; top:5px;}
#menuBtn span:nth-child(2) { position:absolute; width:32px; top:13px;}
#menuBtn span:nth-child(3) { position:absolute; width:32px; top:21px;}


.open #menuBtn span:nth-child(2){ opacity:0;}
.open #menuBtn span:first-child , .open #menuBtn span:last-child { transform:rotate(45deg);  opacity:1; left:50%; top:50%; height:2px; width:26px; margin:-1px -13px;}
.open #menuBtn span:last-child { transform:rotate(-45deg);  }

header.open  #menuBtn span , header.open  #menuBtn.white span { background:#000;}

header  #menuBtn.white span {background:#FFF;}


header svg { width:48px; height:36px;}
header svg path, header polygon { transition:fill 0.2s,opacity 0.6s;}

header .transparent svg path, header .transparent polygon { opacity:0;}

header.open .transparent svg path, header.open .transparent polygon { opacity:1;}
header svg .a7 , header.open .white svg .a7  { fill:#5C5C5C;}
header svg .cross , header.open .white.all svg .cross { fill:#BE4887;}



header .white svg .a7 { fill:#FFF;}
header .white.all svg .cross { fill:#FFF;}

#pictureContact { padding:26% 0; position:relative; z-index:2; margin:5em -5.5em -10em -5.5em; height:100px; overflow:hidden; }
#pictureContact .wrap { position:absolute; background:url(../images/rencontre.jpg) no-repeat center center; background-size:cover; width:100%; height:100%; top:0; left:0; transform:scale(2);}


#contact { background:#BE4887; padding-top:5em; }
#contact form { padding-top:4em;}

#contact p { margin:4em 0;}
#contact p a { font-size:130%; font-weight:700; color:#FFF; cursor:pointer; display:inline-block; padding:0.5em 0; border-bottom:1px solid #FFF; transition:padding 0.2s, margin 0.2s, background 0.2s; text-decoration:none;}
#contact p a:hover { background:rgba(0,0,0,0.1); padding:0.5em 0.4em; margin:0 -0.4em; text-decoration:none;}


p { line-height:165%;}

.form-group {
  position: relative;
  margin:0.5em 0;
}

.form-label {
  position: absolute;
  left: 0;
  top: 1em;
  line-height:90%;
  color: #FFF;
  z-index: 10;
  font-weight:300;
  transition:top 0.1s, font-size 0.1s, opacity 0.1s, left 0.1s;
  cursor:text;
}



.focused .form-label {
  font-size: 60%;
  top:0.6em;
  left: 0;
  font-weight:400;
  color: #FFF;
  opacity:0.5;
  
}

.form-input {
  position: relative;
  padding: 1.2em 0 0.5em 0;
  width: 100%;
  outline: 0;
  border: 0;
  border:1px solid #DB569D;
  border-width:0 0 1px 0;
  transition: border-color .2s ease-out;
  font-size:100%; line-height:100%;
  box-sizing:border-box;
  background:transparent;
  font-family:"Larsseit"; font-weight:400;
  font-size:100%;
  color:#FFF;
}


form , form .col { position:relative;}
#contact form  p.errorForm  { position:absolute; background:rgb(120,0,50); font-size:50%; max-width:100%; padding:0.3em 0.6em; line-height:120%; color:#FFF; font-weight:600; border-radius:2px;
 margin:-0.9em 0; }
 
 #contact form  p.errorForm span { position:relative; z-index:2;}
 
 #contact form  p.errorForm:before {  background:rgb(120,0,50); position:absolute; top:0; left:1.75em; height:.8em; width:.8em; content:""; margin:-0.4em 0; transform:scale(0.8,1) rotate(-45deg); }
 
 .g-recaptcha { margin:2.5em 0 -2em 0; filter:grayscale(100%); opacity:0.6; height:78px;}
 
 #contact form  p.errorForm.float { position:relative; float:left; margin:4em 0 -8em 0;}

textarea.form-input { height:8em; resize:none;}

.form-input:focus , .form-input:hover {
	border-color:#FFF;
}

.form-input.filled {
	
}
#contact { color:#FFF;}
#contact h3 { margin:-0.5em 0 0 0; font-size:100%; font-weight:500;}
#contact .col { padding-right:1em;}
#contact .col + .col { padding-left:1em; padding-right:0;} 
#contact .col { float:left; width:50%; box-sizing:border-box;}

p.grey { color:#797979; line-height:150%;}
footer { margin:-3em 0 0 0; padding:1px 10em;  box-sizing:border-box;}
footer .center { margin-top:2em; margin-bottom:2em;;}
footer p { position:relative; }
footer p strong { display:block; font-weight:500;}
footer p { font-weight:400; font-size:75%;}
footer p a { float:left; margin:0 1em 0 0; color:#797979; transition:color 0.2s; text-decoration:none;}
footer p a:hover { color:#000;}
footer p a.picto { margin-top:0.2em;}

footer p a svg { height:1.1em; width:1.1em;}
footer p a svg path { fill:#848484; transition:fill 0.25s;}
footer p a:hover  svg path { fill:#000;}


#mentions-legales p { }
#mentions-legales .center { margin-top:2.5em; }
#mentions-legales h1 { margin-top:0; margin-left:-2.2em; font-size:230%;}
#mentions-legales h2 { width:10em;}
#mentions-legales h2 {  font-size:120%;}
#mentions-legales hr { border:none; margin:3.5em 0;}

#mentions-legales p , #mentions-legales ul { margin-left:16em; padding-left:5%; line-height:175%; max-width:720px;}
#mentions-legales a { color:#000;}

#mentions-legales ul { list-style: none;}
#mentions-legales ul li { padding-left: 1.2em; position: relative;}
#mentions-legales ul li:before { position: absolute; left: 0; content: "—";}
form.loading { opacity:0.2;}

#link-ml { display:none;}


@media screen and (min-width: 2200px) {
	body {  font-size:25px;}
	.center { max-width:1300px;  }
}

@media screen and (max-width: 1800px) {
.center { margin-left:2em; margin-right:2em; max-width:2000px;}
#main #intro { color:#FFF; position:absolute; position:absolute; z-index:3; top:50%; top:calc(65% - 10em); left:0; width:100%; }
#main .center { margin-left:12em;}

#main #intro h1 span { margin:0 0.5em; width:5em; height:5em; }
#main #intro h1 { font-weight:500; font-size:130%; position:relative;}
#main #intro h2 { font-weight:500; font-size:280%; line-height:110%; margin:0; width:0; white-space:nowrap;}

#details h2 , #contact h2 ,#mentions-legales h2 { font-size:125%; }
#details h2 strong , #contact h2 strong { font-size:275%; }

}




@media screen and (max-width: 1400px) {
	
	
	#pictureContact {  margin:5em -0.1em -10em -0.1em; }
	section , footer { padding-right:6em; padding-left:6em}
	#details h2 , #contact h2 { margin-left:0; }
	#contact form { padding-left:5em;}
	#citation blockquote { float:right; margin-right:2.8em;}
	
	#mentions-legales  { padding-left:10em; }

}


@media screen and (max-width: 1200px) {
header.open menu .wrap a:first-child { display:none;}	
		#details h2 , #contact h2 , #mentions-legales h2 { position:relative; margin:0;  padding-left:3em; width:auto; }
#details h2 strong , #contact h2 strong {  font-size:200%; margin-bottom:0.6em;}
#details article { margin-top:9em;}
#details p { padding-left:0; }
	#contact form { padding-left:0;}
	
	
	#mentions-legales h1 {  margin-left:0;}
#mentions-legales { padding:1px 5em}
#mentions-legales h2 { width:auto;}
header.open { height:150px;}
#mentions-legales p , #mentions-legales ul { margin-left:0; padding-left:0; line-height:175%; max-width:720px;}
#mentions-legales a { color:#000;}
#mentions-legales .center {}

#main #intro { font-size:80%; }
}

@media screen and (max-width: 1000px) {
header.open menu .wrap a { font-size:85%;  margin-right:15px;}
}

@media screen and (max-width: 850px) {
body {  font-size:20px;}	
header.open menu .wrap a { font-size:80%;  margin-right:10px;}
}



@media screen and (max-width: 400px) {
	#details h2 strong , #contact h2 strong {  font-size:160%; margin-bottom:0.6em;}
}

@media screen and (max-width:750px) {
	p.intro { font-size:150%; line-height:130%;}
	body {  font-size:18px;}
	
	#logo , #menuBtn {   margin:28px 30px;}
	#logo { display:none;}
	header.open menu .wrap a:first-child { display:block;}	
	
	.center { margin:2.5em auto !important; max-width:480px !important;}
	
	section {  margin:0; padding:1px 30px; box-sizing:border-box;}

	
	
#citation blockquote:before { position:absolute; width:70px; height:70px;  left:0; right:auto;margin:-28px -29px;}
#citation { padding:2em 0 2em 0; margin-top:10em; position:relative;}
#citation blockquote { padding:1em; background:#FFF; float:right; font-size:160%; width:60%; width:calc(100% - 120px); margin:0 0 0 0;  }
#citation blockquote strong { display:block; font-weight:500; font-size:50%; color:#BE4887; line-height:100%; margin-top:1.5em; position:relative;}

#citation a svg { height:1.25em; width:1.25em;}


#portrait { width:90%; height:100%;  padding:10% 0; width:calc(100% - 30px); background-position:center center; position:absolute; bottom:auto; top:-9em; right:auto; left:0; }

footer { display:none;}
	
#contact h2 { margin-top:4em;}	
#contact .col , #contact .col + .col { float:none; margin:0; padding:0; width:auto;}
#mentions-legales h1 { margin-top:-15px; margin-left:0; font-size:180%;}




	#mentions-legales  { padding:1px 30px; }



/*#main #intro { color:#FFF; position:absolute; position:absolute; z-index:3; top:auto; bottom:30px; left:0; width:100%; height:0; }
#main .center { margin:0 auto; position:relative; height:0;}

#main #intro h1 span { position:absolute; right:100%; margin:0 0.5em; text-indent:-500%; width:6em; height:6em; background:url(../images/logo-home.svg) no-repeat right bottom; background-size:contain; bottom:0;}
#main #intro h1 { font-weight:500; font-size:140%; position:relative;}
#main #intro h2 { font-weight:500; font-size:355%; line-height:110%; margin:0; width:0; white-space:nowrap;}

#main #intro h2 span {
	white-space:nowrap;
	float:left; 
    animation-name: titleAnimation;
    animation-timing-function:ease;
    animation-duration: 1.1s;

  }*/

#main { height:calc(100vh - 110px);}
#main #intro { left:0; bottom:0; top:auto; margin:0; transform:none; height:auto; width:100%; padding:30px; box-sizing:border-box;}
#main #intro h1 span { left:0; bottom:100%; margin:2em 0; }
#main .center { height:auto; margin:0 !important}
#main #intro h2 { font-size:300%; white-space:normal; width:auto; height:auto !important; transform:none; margin:0; }
#main #intro h2 span { white-space:normal; float:none; animation:none;transform:none; height:auto; display:inline; }


#link-ml { display:block;}
	header { overflow:visible;}
header menu { transition:opacity 0.2s; display:none;}
header.open menu { position:fixed; display:block; height:100%; width:100%; opacity:1; left:0; top:0; padding:0; box-sizing:border-box; line-height:42px;}

header.open menu .wrap { position:absolute; bottom:0; margin:0; padding:100px 30px 25px 30px; background:url(../images/logo.svg) no-repeat 30px 0; background-size:90px;}
header.open menu .wrap a { float:none; display:block; text-align:left; font-size:28px;}
header.open menu .wrap a.picto { margin:20px 0 0 0;}
}