/* STYLES.CSS */

/* imports */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');
/* font-family: 'Source Sans Pro', sans-serif; */


 :root{
   --colorbg: rgba(255,255,255,1);
   --color: rgba(0,0,0,1);
   --val1: 37vh;
 }
 @media screen and (max-height:600px) {
   :root {
     --val1: 25vh;
   }
 }

/* Reset */
html{height: 100%; }
body{width: 100%; height: 100%; overflow-x: hidden; background-color:var(--colorbg); color:var(--color); margin: 0; padding: 0; /*transition:background-color 2s;*/}
* {box-sizing: border-box; position: relative; }

img{max-width: 100%; height: auto;}
figure{margin:0}
ul, ol{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; }
p, h1, h2, h3, h4, h5, h6, a, svg, path{transition: color 2s, border-color 2s, fill  2s, background-color  2s;}

::selection {background:var(--color); color:var(--colorbg); transition: all 2s}

/* typo */
body, p, h1, h2, h3, h4, h5, h6{font-family: 'Source Sans Pro', sans-serif;}

p{font:400 18px / 1.35 'Source Sans Pro',sans-serif; margin:1em 0 .5em;}
h1{font:600 36px/1 'Source Sans Pro',sans-serif; margin:1em 0 .5em}
h2{font:600 24px/1.1 'Source Sans Pro',sans-serif;margin:1em 0 .5em}
h3{font:600 18px/1.35 'Source Sans Pro',sans-serif;margin:1em 0 .5em}

a{text-decoration: none; color:var(--color); outline: none}
sup {vertical-align: super; font-size: smaller; line-height: 1; }
strong{font-weight: bold}

/* SVG */
svg .pict{fill:var(--color)}

/* layout */
#page{display: flex; width:100vw; flex-direction: row}
#menu{display: block; width:250px; position:fixed; top:0; align-self: flex-start; height: 100vh; min-height: 500px;left:0; transition:all 2s}
main{width: calc(90vw - 200px); padding:180px 0 15px; }
main{position: absolute;left:50vw; margin-left: calc(180px - 45vw);}
main div.contenus{margin: auto;}
main.leave{position:fixed;}
/* main.enter{opacity: 0;} */
/* menu */
#menu>*{margin-left: 35px;}
#menu header h1{margin-bottom:5px; margin-top:0;font-size: 34px;font-weight: 600;transition: all 2s; transform-origin: bottom left;}
#menu header h2{margin-top:7px;}
#menu header {transition: all 2s; margin-top: 30px}
#menu .main_menu{margin-top: 50px; position: fixed;transition: all 2s}
#menu .main_menu li{padding-left: 0}
#menu .main_menu a{border-bottom: 1px solid var(--color); transition: font-size .5s, color 2s, border-color 2s, fill  2s, background-color  2s;}
#menu .main_menu li.active a{border-bottom: none; font-weight: 600; font-size: 24px;}

#menu footer{bottom: 30px; position: absolute;}
.rs svg {border:1px solid var(--color); margin-right:6px;}
a:hover  svg{background: var(--color);transition-duration: .1s}
a:hover  path{fill: var(--colorbg);transition-duration: .1s}

.img_portrait{width:10vw; max-width: 220px; transition: all 2s; margin-top:40px; margin-left:-50vw}
.img_portrait .credits{opacity: 0; transition: padding .2s, opacity .5s 1s; padding-left:10px; font-size: 11px;transform: translateY(-4px); width: 200px; display: inline-block;}


/* home */
.tmp_home #menu {left:20vw}
.tmp_home #menu header {margin-top:var(--val1);}
.tmp_home #menu header h1{font-size: 54px;}
.tmp_home .img_portrait{width:20vw; margin-left:0vw; position:fixed}
.tmp_home .img_portrait .credits{opacity:1; transition-delay: .5s}
main.home{left:50vw; margin-left: 0; padding: 0; width:30vw; transition:all 2s, opacity 0}
main.home div.contenus{margin-left:35px;margin-top:calc(var(--val1) + 10px);  transition:all 2s; margin-bottom: 50px}

/* page bio */
@media screen and (min-width: 900px) {
  .page_bio #menu header {
    margin-left: calc(50vw - 0px);
    margin-top: 190px;
  }
  .page_bio .img_portrait{
    width:220px;
    margin-left: calc(50vw - 270px);
    margin-top: 0px;
  }
  .page_bio .img_portrait .credits{
    opacity: 1;
    padding-left: 0px;
  }
  .page_bio #menu header h1 {
    transform: scale(1.3);
  }
  .page_bio #menu .main_menu {
    margin-top:-140px;
    position: fixed;
  }
  .page_bio #menu footer{
    position: fixed;
  }
  .page_bio #menu{
    position: absolute;
  }


  main.bio{
    margin-top:350px;
  }
}

/* main */
div.contenus{max-width: 700px}

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

/* blocs */
.bloc_video iframe {width: 100%; height:400px;}

.bloc_images{column-gap: 5px;}
.bloc_images img{width:100%;}
.bloc_images.column1{column-count: 1}
.bloc_images.column2{column-count: 2}
.bloc_images.column3{column-count: 3}
.bloc_images.column4{column-count: 4}
.bloc_images.column5{column-count: 5}
.bloc_images.column6{column-count: 6}
.bloc_texte{margin: 20px 0 60px;}
.bloc_texte a{background: var(--colorbg);color: var(--color);border: 1px solid var(--color);padding:0 4px }
.bloc_texte a:hover{background: var(--color); color: var(--colorbg); border: 1px solid var(--color); transition-duration: .1s}
.bloc_actu a{background:transparent;color: var(--color);border-bottom: 1px solid var(--color);}
.bloc_actu a:hover {background: var(--color); color: var(--colorbg); border-bottom: 1px solid var(--color); transition-duration: .1s}
.bloc_space {width:100%; height: 100px; margin:0}
.bloc_space.space_150 {height: 150px;}
.bloc_space.space_50 {height: 50px;}
.bloc_texte_2col{display: flex;justify-content: space-between;margin: 20px 0 60px;}
.bloc_texte_2col .col{width: calc(50% - 10px);}
.bloc_texte_2col .col p:first-child{margin-top:0;}
.bloc_texte_2col .col p:last-child{margin-top:0;}
.bloc_titre h1{margin-top: 0;}

.bloc_titre + .bloc_image,
.bloc_titre + .bloc_images,
.bloc_titre + .bloc_video{margin-top:60px}
.bloc_image + .bloc_texte,
.bloc_images + .bloc_texte{margin-top:50px}


/*  */
.contenus footer{margin:150px 0 0px; display: flex; min-height: 80px;align-items:center;}
.contenus footer div.col{width: 50%; font-weight: 300;}
.contenus footer div.col a{padding:2px 0 1px;font-size: 18px;font-weight: 600;line-height: 1;}
.contenus footer div.col a:hover span.title{border-bottom: 1px solid}
.contenus footer div.prev{text-align: left ; padding-right: 20px;}
.contenus footer div.next{text-align: right; padding-left: 20px;}
.contenus footer span.dir{font-weight:800;color:var(--vert); font-size: 10px; padding: 7px 0;letter-spacing: 2px; text-transform: uppercase;}

/* page creations */

.projet_item{padding-bottom:0px; min-height: 80px;width: 100%; transform-origin: left top;}
.projet_item>a{display: block; padding-top:10px; width: 100%}
.projet_item h1{margin: 0 0 3px;}
.projet_item h2{margin: 0; font-size: 16px; font-weight: normal;}
.projet_item h2, .projet_item .motscles a{opacity: 0; transition: opacity .5s; transition-delay: 0s}
.projet_item:hover h2, .projet_item:hover .motscles a{opacity: 1; transition-delay: 0s}
.projet_item .motscles{margin-top:7px}
.projet_item .motscles a{border: 1px solid var(--color);padding: 1px 5px; margin-right: 5px}
.projet_item .motscles a:hover{background: var(--color); color: var(--colorbg)}
.projet_item .motscles a.is-checked{background: var(--color); color: var(--colorbg); opacity: 1;}
/* .projet_item .motscles a.is-checked:hover{background: var(--colorbg); color: var(--color)} */

/* main[data-filtres="lecture-performee"] section{display: none}
main[data-filtres="lecture-performee"] section[data-tags*="lecture-performee"]{display: block}
 */

/* fancybox */
.fancybox-bg {background:var(--colorbg)};
.fancybox-caption {color: var(--color);}
.fancybox-button svg path {fill: var(--colorbg);}

/* Important styles */
#menu_toggle {
  display: none;
  width: 30px;
  height: 30px;
  margin: 30px auto 10px;
  cursor: pointer;
  position: fixed;
  top: 16px;
  margin: 0;
  right: 20px;
}

#menu_toggle span:after,
#menu_toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#menu_toggle span:after{
  top: 9px;
}
#menu_toggle span {
  position: absolute;
  display: block;
  top: 14px;
}

#menu_toggle span,
#menu_toggle span:after,
#menu_toggle span:before {
  width: 100%;
  height: 2px;
  background-color: var(--color);
  transition: all 0.3s, background-color 2s;
  backface-visibility: hidden;
  border-radius: 0px;
}
#menu_toggle.on span {
  background-color: transparent;
  transition: all 0.3s, background-color 0s;
}
#menu_toggle.on span:before {
  transform: rotate(45deg) translate(5px, 5px);
}
#menu_toggle.on span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}

@media screen and (max-width: 414px) {
  #menu_toggle{
    display: block;
  }
  .tmp_home #menu_toggle{
    display: none;

  }
	.tmp_home #page {
	    display: block;

	}
  .tmp_home #menu {
  	left: 0vw;
    display: block;
    position: absolute;
    padding: 20px;
    height: auto;
    min-height: auto;
    max-height:900px;
    padding-top: 270px;
  }
	.tmp_home #menu > * {
    margin-left: 0px;
	}
	.tmp_home #menu header {
	    margin-top: 0;
	}
	.tmp_home .img_portrait {
	    width: 35vw;
	    margin-left: 0vw;
      position: absolute;
	}

  .page_bio #menu {
    max-height: 100px;
  }
  .page_bio #menu header h1{
        font-size: 28px;
        margin-top: 15px;
    }
  .page_bio #menu header h2{

  }
  .page_bio #menu.on{
    transition: all 2s, z-index 0s 0s;
    z-index: 2000;
  }
  .page_bio #menu{
    transition: all 2s, z-index 0s 2s;
    z-index: 1000;
  }
  .page_bio .img_portrait {
      width: 35vw;
      margin-left: 0vw;
      position: relative;
      margin-top: 120px;
  }
  .page_bio .img_portrait .credits{
    opacity: 1;
    padding-left: 5px;
  }
  .page_bio main{
    margin-top: 310px;
  }

  main.home div.contenus{
		margin-top:0px;
		margin-left: 0px;
	}
	main.home {
	    left: 0vw;
	    padding: 20px;
	    width: auto;
      position: absolute;
      top: 0;
      margin-top: 720px;
	}

  .img_portrait{
    position: absolute;
    z-index: 1000;
  }

  #menu {
    width: 100%;
    position: fixed;
    height: auto;
    background: var(--colorbg);
    z-index: 100;
    min-height: auto;
    text-align: center;
    max-height:50px;
    overflow: hidden;
	}
  #menu.on {
    max-height:500px;
    border-bottom: 1px solid var(--color);
  }

  #menu > * {
    margin-left: 0px;
	}
  #menu header {
     margin-top: 12px;
     text-align: left;
     margin-left: 15px;
   }
	#menu.on header h1 {
    font-size: 28px;
    margin-top: 15px;
	}

  #menu .main_menu{
    position: relative;
  }
  #menu header h2 {
    margin-top: 0;
    font-size: 18px;
  }
  #menu header h1 {
    font-size: 18px;
    margin-top: 12px;
  }
  #menu .main_menu ol li{
    text-align: center;
  }
  #menu .main_menu a{
    font-size: 18px;
  }
  #menu footer {
    margin-bottom: 20px;
    margin-top:20px;
    position: relative;
    bottom: 0;
  }
	main {
    left: 0;
    margin: 0;
    padding: 0 15px;
    width: 100%;
    top: 0;
    margin-top: 100px;
  }
  .contenus footer {
    min-height: 50px;
  }
  .bloc_titre h1 {
    font-size: 50px !important;
  }

  .bloc_texte_2col{
    display: block;
  }
  .bloc_texte_2col .col {
    width: 100%;
  }
  .contenus footer div.prev {
    margin-left:0px;
  }
  .rs svg {border:1px solid transparent}
  #menu .main_menu li {margin: .8em 0;}
}