html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;border-radius:0}input[type="search"]{appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}
body{
  font-family: "safiro"
}
p::selection , i::selection , div::selection , li::selection , a::selection , span::selection , h1::selection , h2::selection{
  color: white;
  background-color: black;
}

a{
  color: black;
  text-decoration: none;
}
header{
  display: flex;
  padding: 20px;
  font-size: 42px;
  justify-content: space-between;
  position: fixed;
  background-color: white;
  width: 100%
}
#branding{
  font-weight: 600
}
#menu-menu{
  display: flex;
}
.menu-item{
  margin-left: 40px
}


.about_block{
  margin-left: 20px;
  margin-right: 20px;
  font-size: 2vw;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 2px solid black;
  border-top: 2px solid black;
  padding-top: 40px;
  margin-top: 82px;
  flex-direction: row-reverse;
}
.about_text , .about_links{
  width: calc(50% - 10px)
}
.about_text{
  padding-top: 5px;
  line-height: 1.2
}
.about_links li{
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid black;
  transition: all .2s ease;
}
.biography{
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
}
.biography_collumn{
  width: calc(50% - 10px)
}
.biography h1{
  font-size: 2.5vw;
  text-transform: uppercase;
  margin-bottom: 10px
}
.biography li{
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 2px solid black;
  font-size: 1.5vw;
  display: flex;
  justify-content: space-between;
  transition: all .2s ease;
  align-items: center;
}

.biography a:hover li , .about_links li:hover{
  background-color: black;
  color: white;
  padding-left: 10px;
  padding-right: 10px
}
.about_links li:hover a{
  color: white
}

.biography ul{
  margin-bottom: 60px
}



.index{
  margin-top: 84px;
}
.index_project .tooltip{
position: fixed;
display: block;
opacity: 0;
visibility: hidden;
}
.index_project:hover .tooltip{
  opacity: 1;
  visibility: visible;
}
.tooltip img{
  width: 25vw;
  height: auto;
}

nav li:hover{
  transform: scale(105%);
}
nav li{
  transition: .2s ease
}

.index_project{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 2px solid black;
}
.index_project h1{
  width: 50%;
  font-size: 2vw
}
.index_material{
  width: 40%;
  font-size: 1.5vw;
}
.index_date{
  width: 10%;
  text-align: right;
  font-size: 1.5vw;
}

.index_project:hover{
  background-color: black;
  color: white;
  margin: 0;
  padding-left: 20px;
  padding-right: 20px;
}

.homepage{
  display: flex;
  height: 90vh;
  padding-right: 20px;
  padding-top: 82px;
  height: 100vh;
  overflow-y: hidden;
}
.homepage {
  overflow-x: hidden;
  scroll-behavior: auto; /* important : on gère l’animation en JS */
  cursor: grab;
}

.home_project{
  width: inherit;
  padding-left: 20px;
}

.home_project_main:hover img{
  transform: scale(105%);
}

.home_project figure{
  width: calc(100vh * 1.5);
  max-width: 90vw;
  object-fit: cover;
  height: calc(100vh - 140px);
  overflow: hidden;
}

.homepage_single figure{
  width: fit-content;
  max-width: 90vw;
}

.homepage_single .home_project figure img {
  width: auto;
}


.home_project figure img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: .2s ease
}

main{
  overflow-x: hidden;
  width: 100vw;
}

.home_project_infos{
  display: flex;
  justify-content: space-between;
  font-size: 25px;
  padding-top: 10px
}
i{
  font-style: italic;
}

.homepage_single{
  height: auto;
}

.infos_single{
  padding-left: 20px;
  padding-right: 20px;
  position: fixed;
    bottom: 20px;
    width: 100%;
    z-index: 10
}

.infos_single .link{
  transform: scale(200%);
  z-index: 10
}



.single_bloc_projet{
  position: fixed;
  background-color: #DFDFDF;
  height: calc(100vh - 82px);
  top: 82px;
  right: 0;
  width: 50vw;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  transform: translateX(100%);
    transition: transform .4s ease;
    flex-direction: row-reverse;
}


.single_txt{
  font-size: 1.5vw;
  line-height: 1.2;
  overflow-y: scroll;
  width: calc(55% - 10px)
}

.single_txt strong{
  font-weight: 600
}
.single_txt i , .single_txt em{
  font-style: italic;
}
.single_txt a{
  text-decoration: underline;
}
.single_txt a::after{
  content: "↘";
}
.single_txt a::after{
  content: "↘";
}




.single_txt p{
margin-bottom: 5px}


.single_infos{
  width: calc(45% - 10px)
}

.single_infos li{
  font-size: 1.5vw;
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 2px solid black
}

.titlesingle{
  font-weight: 800;
  padding-top: 0 !important
}

.single_bloc_projet.open {
  transform: translateX(0%);
}

/* Animation du + */
.link {
  cursor: pointer;
  transition: transform .3s ease;
}

.link.open {
  transform: rotate(45deg) scale(200%);
}

.legend{
  z-index: 9;
  position: relative;
  top: -50px;
  margin-left: 10px;
  display: flex;
  width: fit-content;
  align-items: center;
  padding: 5px;
  border-radius: 20px;
  transition: .2s ease
}

.legend.open{
  background-color: white;

}

.legend button{
    border-radius: 15px;
    background-color: none;
    background: none;
    border: 2px solid black;
    font-weight: 600;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.open button{
  transform: rotate(45deg);
}
.legend button:hover{
  background-color: black;
  color: white
}
.legend button:hover rect{
  fill: white;
  color: white
}

.legend p{
  margin-left: 10px;
  margin-right: 10px;
  display: none;
}
.open p {
  display: block;
}



@media (max-width: 990px){

#menu-menu{
  position: fixed;
  bottom: 0;
  left: 20px;
  justify-content: space-between;
  padding: 20px;
  padding-left: 0;
  padding-right: 0;
  background-color: white;
width: calc(100% - 40px);
  border-top: 2px solid black;
  font-size: 30px;
  z-index: 9
}
.single_infos li , .single_txt{
  font-size: 20px
}
.menu-item{
  margin: 0
}
header{
  justify-content: center;
  border-bottom: 2px solid black;
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-right: auto;
  z-index: 9999
}
.single_bloc_projet {
  z-index: 9
}

  .about_block , .biography{
    display: block;
  }

  .about_text , .about_links , .biography_collumn {
    width: 100%
  }

.about_block , .biography h2 , .date , .index_project h1 , .index_date{
  font-size: 16px
}
.index_material{
  display: none
}
.biography h1{
  font-size: 25px
}
.index_project h1{
  width: 70%
}
.index_date{
  width: 30%
}
.about_block{
  border-bottom: none
}
.biography{
  margin-top: 30px
}
.biography ul{
  margin-bottom: 30px
}
.homepage{
  display: block;
  overflow-y: auto;
  height: auto;
  margin-bottom: 100px
}
.home_project figure{
  height: auto;
  width: 100%;
  margin-right: 20px
}
.link{
  display: none
}
.home_project{
  margin-bottom: 30px
}
.infos_single {
  position: fixed;
  top: 84px;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  width: calc(100vw - 40px);
  background-color: white;
  padding-bottom: 10px;
  margin-left: 20px;
  margin-right: 20px;
  padding-left: 0px;
  padding-right: 0px;
  height: fit-content;
  font-size: 5vw;
  border-bottom: 2px solid black;
}
.home_project figure{
  max-width: none
}
.infos_single .link{
  display: block;
}
.single_bloc_projet{
width: 100%;
height: calc(100vh);
flex-wrap: wrap;
flex-direction: row;
overflow-y: scroll;
background-color: white;
padding-top: 100px;
padding-bottom: 300px;

}
.single_infos , .single_txt{
  width: 100%;
}
.single_infos{
  margin-bottom: 10px
}
.homepage_single .home_project figure img{
  width: 100%;
  height: auto
}
.legend{
  margin-bottom: -40px
}
.index_project{
  border-top: none;
  border-bottom: 2px solid black
}
.infos_single .link{
  height: fit-content;
}
.legend p {
  font-size: 10px
}
.about_links{
  margin-bottom: 20px
}
.homepage_single{
  margin-top: 55px;
}
}

.homepage.dragging {
  scroll-snap-type: none !important;
}

@media (min-width: 990px){

.home_project_single:last-child , .home_project_link:last-child{
  margin-right: 30vw;
}
}

@media (min-width: 1700px){
  .about_block , .single_bloc_projet , .single_txt , .single_infos li{
    font-size: 36px;
  }
}