:root{
  --l:1rem;
  --m:.5rem;
  --s:.3rem;
  --headerHeight: 1.6rem;
  --fontSize: 15px;
}

*{box-sizing: border-box; margin:0; padding: 0; color: inherit; text-decoration: none}
h1,h2{
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
}

@font-face {
    font-family: 'Ak-b';
    src: url(../fonts/ak-bold.woff2) format("woff2");
}
@font-face {
    font-family: 'Ak-r';
    src: url(../fonts/ak-regular.woff2) format("woff2");
}

body, html{
  margin: 0;
  background: black;
  color: white;
  font-family: 'Ak-r', serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-height: 100vh;
  font-size: var(--fontSize);
}
*{ box-sizing: border-box; text-decoration: inherit; font-size: inherit; font-weight: inherit;}
em{white-space: nowrap;}
.big{
  font-size: 30px;
  line-height: 34px;
}
.uppercase{
  font-size: 90%;
  text-transform: uppercase;
}


.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: black;
  height: var(--headerHeight);
  line-height: var(--headerHeight);
}
header menu{
  display: flex;
  justify-content: flex-start;
  background: black;
}
header .logo, menu > *{
  margin: 0 var(--m);
}
.lang{
  display: flex;
}
.lang a:first-child::after{
  content:'/';
  display: inline-block;
  margin-right: .1em;
}

/* Isotope */

.home main{
  flex:auto;
  overflow: hidden;
}

.grid{
  height: calc(100% - var(--s));
  width: calc(100% - var(--s));
  overflow: hidden;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 25%;
  transition: none;
}

.grid-item {
  float: left;
  height: calc(50vh - var(--headerHeight)/2);
  /* cursor: pointer; */
}
.grid-item--width2 { width: 50%; max-height: 50vh; }
.grid-item--height2 { max-height: 50vh; }

.grid-item img {
  display: block;
  max-width: 100%;
  padding: 0 0 var(--s) var(--s);
  max-height: 100%;
}
/* .grid-item.grid-item--width2 img {
  max-height: calc(50vh - var(--headerHeight)/2);
}
.grid-item.grid-item--height2 img {
  max-height: calc(50vh - var(--headerHeight)/2);
} */

img{
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-drag: none;
  -webkit-user-drag: none;
}
img.cover{
  object-fit: cover;
  object-position: center center;
}
img.contain{
  object-fit: contain;
  object-position: center center;
}



/* ABOUT */
.about-text{
  padding: var(--l) var(--m);
}
.about-text strong{
  font-size: var(--fontSize);
}
.about-text p{
  margin-bottom: 1rem;
}
.about-text .texte{
  width: 40%;
}

/* Vues d'expo */
.vues-footer{
  padding-left: var(--m);
  height: var(--headerHeight);
  line-height: var(--headerHeight);
}

@media only screen and (max-width: 1000px) {
  :root{
    --headerHeight: 2rem;
    --fontSize: 17px;
  }
  .big{
    font-size: 28px;
    line-height: 30px;
  }
  body, html{
    line-height: 115%;
    max-height: auto;
  }
  .container{
    height: auto;
  }
  header{
    width: 100%;
    justify-content: space-between;
  }
  header menu{
    position: fixed;
    width: 100%;
    top: var(--headerHeight);
    left:100%;
    transition: left .5s;
    flex-direction: column;
  }
  header menu > *{
    border-top: 1px solid;
    padding: var(--m) 0;
  }
  header.menu-active menu{
    left:0;
  }
  .burger {
    padding: 0 var(--m);
    text-decoration: none;
    color: #fff;
    transition: 0.3s;
  }
  .burger span {
    display: block;
    width: 1em;
    height: 1px;
    background-color: white;
    margin: .3em 0;
  }

  /* GRID */
  .grid-sizer,
  .grid-item {
    width: 50%;
    transition: none;
  }

  .grid-item {
    height: 40vh;
  }
  .grid-item--width2 { width: 100%; height: auto; max-height: inherit;;}
  .grid-item--height2 { height: 55vh; width: auto; max-width: inherit;; }

  .grid-item img {
    padding: 0 0 var(--s) var(--s);
  }

  /* ABOUT VUES */
  body.vues, body.about{
    overflow: auto;
  }
  header{
    position: sticky;
    z-index: 999;
    top: 0;
  }
  body.vues .container, body.about .container{
    height: auto;
  }

  /* ABOUT */
  .about-text .texte{
    width: 100%;
  }
}