@font-face {
  font-family: "GT America regular";
  src: url("./fonts/GT America/GT-America-Standard-Regular.woff2") format("woff2"),
    url("./fonts/GT America/GT-America-Standard-Regular.woff") format("woff");
}

@font-face {
  font-family: "GT America mono";
  src: url("./fonts/GT America/GT-America-Mono-Regular.woff2") format("woff2"),
    url("./fonts/GT America/GT-America-Mono-Regular.woff") format("woff");
}

@font-face {
  font-family: "GT America mono italic";
  src: url("./fonts/GT America/GT-America-Mono-Regular-Italic.woff2") format("woff2"),
    url("./fonts/GT America/GT-America-Mono-Regular-Italic.woff") format("woff");
}

@font-face {
  font-family: "Roboto light custom";
  src: url("./fonts/Roboto-Light-custom.ttf") format("truetype");
}

/*
media querys :
(min-width: 769px) -> écran PC
(max-width: 768px) -> mobile

*/
:root {
  font-family: "GT America regular";
  --margin-left: 9vw;
  --margin-top: 4vh;
  --margin-bottom: 4vh;
  --zone-image: 65vw;
  --scroll-bar: 20px;
  --gouttiere: 2vw;
  --font-size-header: 1.7rem;
  --font-size-labeur: 0.9rem;
  --background-color:#fafafa;
  background-color: var(--background-color) ;
  line-height: 1.3;
}

@media (max-width:780px) and (min-width:760px) {
  :root {
    --margin-left: 7vw;
    --margin-top: 7.5vh;
    --margin-bottom: 7.5vh;
    --font-size-header: 1.8rem;
    --font-size-labeur: 1rem;
  }

  body {
    margin-right: var(--margin-left);
    overflow-x: hidden;
  }

  .menu a {
    margin-top: auto;
    margin-bottom: 1.5rem;
  }
}


@media (max-width:760px) {
  :root {
    --margin-left: 7vw;
    --margin-top: 7.5vh;
    --margin-bottom: 7.5vh;
    --font-size-header: 1.5rem;
    --font-size-labeur: 1.1rem;
  }

  body {
    margin-right: var(--margin-left);
    overflow-x: hidden;
  }

  .menu a {
    margin-top: auto;
    margin-bottom: auto;
  }
}


html {
  font-size: 17px;
  font-family: "GT America";
}

body {
  margin-left: var(--margin-left);
}

a {
  color: black;
}

a:visited {
  color: black;
}

#debug-scroll-top {
  position: fixed;
  top: 0;
  right: 2vw;
}

#debug-scroll-middle {
  position: fixed;
  bottom: 50%;
  right: 2vw;
}

#debug-scroll-bottom {
  position: fixed;
  bottom: 0;
  right: 2vw;
}

.debug-scroll-projet-top {
  position: absolute;
  top: 0;
  height: 1rem;
}

.debug-scroll-projet-bottom {
  position: absolute;
  bottom: 0;
  height: 1rem;
}

figure {
  margin: 0;
}

/* HEADER */
header {
  position: fixed;
  width: calc(100vw - var(--margin-left) * 2);
  height: var(--margin-top);
  min-height: 2rem;
  top: 0;
  margin-top: var(--margin-top);
  z-index: 2;
  /*border-bottom: solid black 1px;*/
  font-size: var(--font-size-header);
  /*font-family: "GT America light";*/
}

header nav {
  display: flex;
  flex-direction: row;
  text-transform: lowercase;
  justify-content: space-between;
  width: calc(100vw - var(--margin-left) * 2);
  align-items: center;
  height: 100%;
}

header nav .menu {
  display: flex;
}

h1 {
  font-size: var(--font-size-header);
  font-style: normal;
  font-weight: normal;
  margin: 0;
}

header a {
  text-decoration: none;
  /*color: rgb(25, 25, 25);*/
}

#button_menu {
  font-family: "Roboto light custom";
  z-index: 3;
}

@media (min-width:769px) {
  h1 {
    width: 55%;
  }

  .menu {
    /*width: 40%;*/
    justify-content: space-between;
  }

  .menu a:first-child {
    margin-right: 10vw;
  }

  .menu a {
    width: max-content;
  }

  .lang {
    min-width: max-content;
    margin-left: 10vw;
  }

  #button_menu {
    display: none;
  }

  .nav-selected::after {
    content: " ";
    position: absolute;
    bottom: -0.7rem;
    left: calc(50% - 0.75rem);
    background: black;
    height: 2px;
    width: 1.5rem;
  }

  .lang-selected::after {
    content: " ";
    position: absolute;
    bottom: -0.7rem;
    left: calc(50% - 0.75rem);
    background: black;
    height: 2px;
    width: 1.5rem;
  }
}

@media (max-width:768px) {
  h1, .lang {
    font-size:var(--font-size-header);
    z-index: 2;
  }

  h1, .lang {
    width: 35%;
  }

  header {
    width: calc(100vw - var(--margin-left));
    left: 0;
    padding-left: var(--margin-left);
    background-color: var(--background-color);
    margin-top: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: var(--font-size-header);
  }

  header nav {
    background: var(--background-color);
    padding-bottom: 2vh;
  }

  #button_menu {
    width: 30%;
    font-size: 2rem;
    text-align: center;
    display: block;
    cursor: pointer;
  }

  .menu {
    width: 100%;
    left: 0;
    justify-content: space-evenly !important;
    display: none !important;
    flex-direction: row;
    background-color: var(--background-color);
    position: fixed;
    top: var(--margin-top);
    /*padding-bottom: 3vh;*/
    min-height: 4rem;
    height: 6vh;
  }

  .menu_open {
    display: flex !important;
  }


  .menu a:first-child {
    margin-left: 1rem;
  }

  .nav-selected::after {
    content: " ";
    position: absolute;
    bottom: -0.4rem;
    left: calc(50% - 0.75rem);
    background: black;
    height: 2px;
    width: 1.5rem;
    z-index: 2;
  }

  .lang-selected::after {
    content: " ";
    position: absolute;
    bottom: -0.4rem;
    left: calc(50% - 0.75rem);
    background: black;
    height: 2px;
    width: 1.5rem;
    z-index: 2;
  }
}

nav a {
  position: relative;
  cursor: pointer;
}

.lang {
  font-size: var(--font-size-header);
  text-align: right;
}

.lang a {
  text-decoration: none;
  color: black;
}

/* FOOTER */
footer {
  position: fixed;
  bottom: 0;
  height: var(--margin-bottom);
  margin-bottom: calc(var(--margin-bottom)*2);
  min-height: 2.5rem;
  /*width: calc(100vw - var(--margin-left) - var(--margin-left) + var(--gouttiere));*/
  width: calc(100vw - var(--margin-left) - var(--margin-left));
  /*border-top: solid black 1px;*/
  z-index: 2;
  display: flex;
  flex-direction: row;
  /*background: white;*/
}

/* MAIN */
#home {
  /*overflow-y: hidden;*/
}

.message_home {
  font-family: "GT America mono";
  /*position: absolute;*/
  text-decoration: none;
  color: black;
  bottom: 0;
  background: var(--background-color);
  padding-bottom: var(--margin-bottom);
  width: calc(100vw - var(--margin-left) * 2);
  margin: 0;
}

.message_home p {
  margin: 0;
}

.image_home {
  width: 100%;
  display: block;
}

.image_home img {
  height: calc(100vh - var(--margin-top) - var(--margin-bottom)*3);
  object-fit: cover;
}

@media (max-width:768px) {
  .projet {
    width: 100%;
  }

  main p {
    font-size: var(--font-size-laber);
  }

  .projet h2, #demarche h2 {
    font-size: var(--font-size-labeur);
  }

  #demarche h2 {
    display: block;
  }

  #demarche {
    padding-top: calc(var(--margin-top) * 2.5);
    position: relative;
  }

  #demarche p {
    display: none;
  }

  .demarche_open p {
    display: block !important;
  }

  #demarche::after {
    content: attr(data-content);
    position: absolute;
    display: block;
    top: 100%;
  }

  figure {
    margin: 0;
  }

  #home main {
    margin-top: calc(var(--margin-top)*2);
  }

  .image_home{
    position: fixed;
    top: calc(var(--margin-top) * 1.5);
    width: calc(100vw - var(--margin-left)*2);
  }

  .image_home img{
    height: calc(100vh - var(--margin-top) - var(--margin-bottom) *2 - 1rem);
  }

  .message_home {
    /*left: var(--margin-left);
    right: var(--margin-left);*/
    padding-top: 1rem;
    display: block;
    position: relative;
    margin-top: calc(95vh - 5rem);
    /*padding-bottom: 0;*/
    z-index: 2;
    width: calc(100% + 2px);
    margin-left: -1px;
    /*max-height: calc(var(--margin-bottom) * 2);*/
    /*overflow-y: scroll;*/
  }

  .img_vertical {
    width: 100%;
    height: auto;
  }

  .img_horizontal {
    width: 100%;
    height: auto;
  }

  /*
  .projet:first-child{
    margin-top: calc(var(--margin-top)*2);
  }*/
  .projet>a {
    margin-top: calc(var(--margin-bottom));
  }

  .projet>a::after {
    content: attr(data-content);
    color: black;
    font-size: var(--font-size-labeur);
    margin-top: 0.4rem;
  }

  .projet>a::after:visited {
    color: black;
  }

  .description h2 {
    display: none;
  }

  .projet .description {
    transition: height 1s;
    overflow: hidden;
    height: 0;
  }

  .projet .description.description_open {
    height: auto;
  }

  /*
  .description p {
    transition: height 1s;
    overflow: hidden;
    height: auto;
  }

  .description-hide p {
    height: 0;
  }*/
  .infos-projet {
    display: none;
  }
}


@media (max-width:780px){
  /*.image_home img {
    height: calc(100vh - var(--margin-top) - var(--margin-bottom)*2);
  }*/
}
/*
@media (max-width:700px){
  .image_home img{
    height: calc(100vh - var(--margin-top) - var(--margin-bottom)*4);
  }
}*/

@media (min-width:769px) {
  .message_home {
    font-size: 0.8rem;
    position: fixed;
    /*width: 100%;*/
    padding-top: 1.5vh;
    padding-bottom: 6vh;
  }

  main {
    width: calc(100vw - var(--margin-left) - var(--margin-left));
    height: calc(100vh - var(--margin-top) - var(--margin-bottom));
    /*border-left: solid black 1px;
    border-right: solid black 1px;*/
    position: fixed;
    top: calc(var(--margin-top) * 2);
  }

  #home main {
    top: calc(var(--margin-top) * 1 + 4rem);
  }

  #demarche, .description {
    font-size: var(--font-size-labeur);
    height: calc(100vh - var(--margin-top) * 6.2);
    overflow-y: scroll;
    scrollbar-width: none;
    max-width: 30rem;
  }

  #demarche::-webkit-scrollbar, .description::-webkit-scrollbar {
    display: none;
  }

  .description hr {
    width: 25%;
    margin-top: 2rem;
    margin-left: 0;
  }

  .projet_right h2 {
    margin-left: 30%;
  }

  #margin-right {
    position: fixed;
    right: 0;
    top: var(--margin-top);
    width: var(--margin-left);
    height: calc(100vh - var(--margin-top) - var(--margin-bottom));
    /*border-left: solid 1px black;*/
  }

  .projets {
    width: calc(var(--zone-image) - var(--margin-left));
    margin-left: calc(100vw - var(--zone-image));
    padding-left: 0;
    overflow-y: scroll;
    height: 100vh;
    /*padding-top: calc(var(--margin-top));*/
    margin-top: calc(var(--margin-top) * -2);
    /*padding-bottom: var(--margin-top);*/
    flex-wrap: wrap;
    align-items: center;
    /*justify-content: center;*/
  }

  .projet:first-child, .projet.firstProject {
    margin-top: calc(var(--margin-top)*2);
  }

  .projet {
    /*position: relative;*/
    /* temporaire debug*/
    /*width: calc(var(--zone-image) - var(--margin-left) * 2);*/
    width: calc(var(--zone-image) - var(--margin-left) * 2 - var(--gouttiere));
  }

  .filtred .projet {
    display: none;
  }

  .projet>a {
    margin-top: calc(var(--margin-bottom) * 4);
    margin-bottom: calc(var(--margin-bottom) * -2);
  }

  .projet>a::after {
    content: attr(data-content);
    color: black;
    font-size: 1.15rem;
    margin-top: 0.4rem;
    z-index: 2;
  }

  .projet>a::after:visited {
    color: black;
  }

  .projet_right::after {
    margin-left: 30%;
  }

  .description {
    position: absolute;
    display: none;
    /*temporaire debug*/
    left: 0;
    top: 0;
    width: 30vw;
    /*padding-top: var(--margin-top);*/
    margin-top: calc(var(--margin-top) * 2 - 0.1rem);
  }

  .infos-projet {
    white-space: pre-line;
  }

  .other_image {
    width: 70% !important;
  }

  .img_vertical {
    width: 70%;
  }

  .img_horizontal {
    max-width: max-content;
    width: 100%;
    /*width: -moz-available;*/
  }

  .img_pos_right {
    width: 70%;
  }
}

img, video {
  width: 100%;
}

.projets {
  display: flex;
  /*flex-direction: row;*/
  flex-wrap: wrap;
  text-decoration: none;
  padding-left: 0;
  list-style: none;
}

.img_pos_right {
  margin-left: auto;
}

.projets img {
  height: auto;
}

.projet>a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.projet .images_container {
  display: flex;
  flex-direction: column;
}

.projet h2, #demarche h2 {
  color: black;
  text-decoration: none;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: normal;
  margin-top: 0;
  font-family: "GT America mono";
}

.selected_projet .other_image {
  display: block !important;
}

.projets .other_image {
  display: none;
  position: relative;
  /*width: calc(100% - var(--margin-left));*/
  margin-top: var(--margin-bottom);
}

.projets .inview_projet .description {
  display: block;
}

.projets li:last-child, .projets .lastProject {
  padding-bottom: calc(var(--margin-bottom) * 6);
}

#demarche {
  display: block;
}

.description, .description p, .description pre, .description a {
  font-family: "GT America mono";
  color: black;
  font-size: var(--font-size-labeur);
}

.description h2 {
  display: none;
  margin-top: 0;
  font-weight: normal;
  font-size: 1rem;
  text-decoration: underline;
  margin-top: 0;
}

.description p {
  margin-top: 0;
}

.description hr {
  border-top: solid 1px dimgray;
  border-bottom: none;
  color: dimgray;
}

.description q {
  margin-bottom: 1rem;
}

.description .cartel-projet {
  color: dimgrey;
  white-space: pre-line;
  font-size: 0.8rem;
}

.select_underline {
  text-decoration: underline;
}

.hideFilterInfo {
  display: none;
}

.visibleFilter {
  display: block !important;
}

/*apropos*/

#apropos main {
  font-family: "GT America mono";
  font-size: var(--font-size-labeur);
}

.credits{
  font-family: "GT America mono";
  color: black;
}

.credits a{
  text-decoration: underline;
  color: black;
  cursor: pointer;
}

@media (max-width:768px) {
  #bio {
    margin-top: calc(var(--margin-top) * 2 + 1rem);
  }

  #apropos h2 {
    margin-top: 2rem;
  }

  #apropos footer{
    position: relative;
  }

  #apropos .credits h2{
    text-transform: uppercase;
    text-decoration: underline;
    font-weight: normal;
    font-size: var(--font-size-labeur);
  }
  .credits{
    font-size:var(--font-size-labeur);
  }
  .credits{
    padding-bottom: var(--margin-bottom);
  }
}

@media (min-width:769px) {
  #apropos main {
    /*position: relative;*/
    display: flex;
    flex-direction: column;
    height: 84vh;
  }

  #bio {
    margin-top: var(--margin-top);
    width: 75%;
    margin-top: calc(var(--margin-top) * 2 - 0.1rem);
    hyphens: manual;
  }

  #bio p {
    margin: 0;
  }

  #infos-apropos {
    display: flex;
    flex: 1 1 auto;
    overflow-y: hidden;
    margin-top: var(--margin-top);
    justify-content: space-between;
  }

  #apropos .infos-apropos {
    width: calc(25% - 2vw);
    display: flex;
    flex-direction: column;
    /*margin-right: 3vw;*/
  }

  #apropos ul{
    overflow-y: scroll;
    height: 0;
    padding-right: 1rem;
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: height 0.5s;
  }

  #apropos ul::-webkit-scrollbar {
    display: none;
  }

  #apropos .infos-apropos h2 {
    margin-top: 0;
  }

  #apropos .infos-apropos h2::after {
    content: attr(data-content);
    display: block;
    text-decoration: none;
    overflow: hidden;
    height: 1.2rem;
  }

  #apropos .infos-apropos li:last-child {
    padding-bottom: 5rem;
  }

  #apropos .ul-open {
    height: calc(100% - var(--margin-top));
    padding-bottom: var(--margin-top);
  }

  .colophon{
    font-size: 0.8rem;
    color: dimgray;
    /*margin-top: auto;*/
  }
  #apropos footer{
    display: block;
    margin-bottom: 0.6vh;
  }
  .laflemme{
    display: none;
    cursor: auto;
    margin-left: 1rem;
    color: black;

  }
  .credits, .credits h2{
    cursor: pointer;
    display: inline-block;
    font-size: 0.8rem;
  }
  .credits h2{
    text-decoration: underline;
    font-weight: normal;
  }
  .tadam{
    display: inline-block;
  }
}

#apropos .infos-apropos h2 {
  font-weight: normal;
  text-decoration: underline;
  text-transform: uppercase;
  font-size: 1.15rem;
  cursor: pointer;
}

#apropos ul {
  list-style: none;
  padding-left: 0;
}

#apropos ul h3 {
  font-style: italic;
  font-weight: normal;
  margin: 0;
  font-size: var(--font-size-labeur);
}

#apropos ul p {
  margin: 0;
}

#apropos li {
  margin-bottom: 1rem;
}

#bio a{
  margin-right: 2.5rem;
  display: inline-block;
}

.logo{
  height: 1.2rem;
  width: auto;
  display: inline;
  vertical-align: middle;
  margin-right: 0.6rem;
  margin-bottom: -3px;
}