@font-face {
  font-family: Graphik;
  font-display: swap;
  src: url('font/Graphik-Regular-Web.woff2') format('woff2'),
  url('font/Graphik-Regular-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
  font-family: Rosart;
  src: url(font/Rosart-Regular.woff) format("woff"),
  url(font/Rosart-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


*{
  margin:0;
  padding:0;
}

html {
  box-sizing: border-box;
  background: #eee;
  height:100%;
  scroll-behavior: smooth;
}
*, *:before, *:after {
  box-sizing: inherit;
}


body{
  font-family: Rosart, Georgia, serif;
  background: #FFF;
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height: 100%;
  padding:0 15px 60px 15px;

}

img{
  max-width: 100%;
  height:auto;
  display: block;
}

a{
  color:currentColor;
  transition: color 0.4s;
}

p>a{
  display: inline-block;
  text-decoration: none;
  background-image: linear-gradient(currentColor,currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 1.25em;
}

.home,
.images,
.textes,
.contact,
.experiences,
.clients,
.credits{
  max-width: 1440px;
}


.header{
  color:#555;
  line-height: 50px;
  margin-bottom:45px;
}

.size_l{
  display:none;
}

@media (min-width:640px){
  .size_l{
    display:inline-block;
  }
}

.header a{
  font-family: Graphik, sans-serif;
  font-size: 19px;
  text-decoration: none;
  color:currentColor;
  font-weight: 400;
  /* text-transform: capitalize; */
}

.projet-grid a:hover,
.header a:hover{
  color:#444;
}

.header a.current,
.header a[aria-current="page"]{
  color:#000;
}


.header nav>ul{
  display:flex;
}

.header li{
  display:block;
  margin-right:19px;
}

.header ul ul{
  line-height: 24px;
}

.header ul ul li{
  position: relative;
}
.header ul ul li::after{
 content:'';
 height:24px;
 display: block;
}

.header ul ul li a{
  position: absolute;
}




.header nav ul ul{
  display:block;
}


.intro{
  font-size: 21px;
  line-height: 1.3;
  margin-bottom:24px;

}

@media (min-width : 768px){
  .intro{
    font-size: 28px;
    line-height: 1.3;
    max-width:66%;
    margin-bottom:48px;
  }
}

.a-la-une{
  display: flex;
  flex-wrap: wrap;
  /* justify-content: */
}

.a-la-une img{
  margin-bottom: 8px;
}



.a-la-une a{
  width:100%;
  text-decoration: none;
  /* color:#000; */
  font-size: 16px;
  margin-bottom:24px;
  transition: color .4s;
  line-height: 1.25;
}

.a-la-une a:visited {
  color: #999;
}



.a-la-une img{
  transition: opacity .4s;
}

.a-la-une a:hover .dummy,
.a-la-une a:hover img{
  opacity: 0;
}
.bg{
  display:block;
}

/* .cat-jeunesse:hover { color:#f60; }
.cat-photographie:hover { color:#ff0800; }
.cat-art-contemporain:hover { color:#7700ff; }
.cat-communication:hover { color:#0044ff; }
.cat-carte-blanche:hover { color:#ffbb00; }
.cat-archive:hover { color:#182d55; }
.cat-peinture:hover { color:#18553e; }



.cat-jeunesse:hover:visited { color:#f60; }
.cat-jeunesse .bg{ background-color:#ff6600; background-image:  url('img/Z1.png'); }
.cat-photographie:hover:visited { color:#ff0800; }
.cat-photographie .bg{ background-color:#ff0800; background-image:  url('img/Z2.png');; }
.cat-art-contemporain:hover:visited { color:#7700ff; }
.cat-art-contemporain .bg{ background-color:#7700ff; background-image:  url('img/Z3.png');; }
.cat-communication:hover:visited { color:#0044ff; }
.cat-communication .bg{ background-color:#0044ff; background-image:  url('img/Z4.png');; }
.cat-carte-blanche:hover:visited { color:#ffbb00; }
.cat-carte-blanche .bg{ background-color:#ffbb00; background-image:  url('img/Z5.png');; }
.cat-archive:hover:visited { color:#182d55; }
.cat-archive .bg{ background-color:#182d55; background-image:  url('img/Z3.png');; }
.cat-peinture:hover:visited { color:#18553e; }
.cat-peinture .bg{ background-color:#18553e; background-image:  url('img/Z2.png');; } */

.bg{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 90% auto;
}
.cat-name{
  opacity:0;
  transition: opacity .4s;
  display: block;
}
.a-la-une a:hover .cat-name{
  opacity: 1;
}


@media (min-width : 768px){
  .a-la-une a{
    width:calc(50% - 7.5px);
    text-decoration: none;
    /* color:#000; */
    font-size: 21px;
    /* margin-bottom:48px; */
    margin-right:15px;
  }
  .a-la-une a:nth-of-type(2n){
    margin-right:0;
  }

}

@media (min-width : 1024px){
  .a-la-une a{
    width:calc(33.33% - 10px);
    text-decoration: none;
    color:#000;
    font-size: 21px;
    /* margin-bottom:48px; */
    margin-right:15px;
  }
  .a-la-une a:nth-of-type(2n){
    margin-right:15px;
  }
  .a-la-une a:nth-of-type(3n){
    margin-right:0;
  }
}


/* PROJET */

.all-projet{
  margin-top:48px;
}

.projet-grid{
  display:flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: Graphik, sans-serif;
  padding:0 15px;
}
.projet-grid a{
  text-decoration: none;
  color:#999;
}

.projet-grid a:hover{
  color:#000;
}

.top,.bottom{
  flex-basis: 48px;
  height:48px;
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.slides{
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 96px);
}

.slides *{
  max-height: calc(100vh - 96px);
}

.slides img{
  object-fit: scale-down;
  height: auto;
  /* width: 1440px; */
  /* max-height: calc(100vh - 96px); */
}

@media (max-width:800px){
  .projet-nav .no-mob{
    display:none;
  }
  .projet-nav a{
    text-transform: capitalize;
  }
}

.projet-description{
  display:flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  justify-items: center;
}

.projet-description>*{
  padding:12px;
  font-size: 20px;
}

@media (min-width:640px){
  .projet-description>*{
    width:80%;
    margin:auto;
  }
}

@media (min-width:960px){
  .projet-description>*{
    width:60%;
    max-width: 800px;
  }
}

.meta{
  margin-bottom:1.5em;
  padding:0;
  font-size: 20px;
}

.meta li{
  display: flex;
  border-bottom:1px solid #999;
  line-height: 1.45;
  padding:3px 0;
}

.meta li:last-child{
  border:none;
}

.property{
  font-family: Graphik, sans-serif;
  /* display:inline-block; */
  /* width:100px; */
  flex-basis: 140px;
  color:#999;
}

@media (min-width:640px){
  .property{
    flex-basis:240px;
  }
}

.value{
  display:inline-block;
  flex:1 0 0;

}

.glide{position:relative;width:100%;box-sizing:border-box}.glide *{box-sizing:inherit}.glide__track{overflow:hidden}.glide__slides{position:relative;width:100%;list-style:none;backface-visibility:hidden;transform-style:preserve-3d;touch-action:pan-Y;overflow:hidden;padding:0;white-space:nowrap;display:flex;flex-wrap:nowrap;will-change:transform}.glide__slides--dragging{user-select:none}.glide__slide{width:100%;height:100%;flex-shrink:0;white-space:normal;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.glide__slide a{user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none}.glide__arrows{-webkit-touch-callout:none;user-select:none}.glide__bullets{-webkit-touch-callout:none;user-select:none}.glide--rtl{direction:rtl}

.glide__arrow{position:absolute;display:block;top:50%;z-index:2;color:white;text-transform:uppercase;padding:9px 12px;background-color:transparent;border:2px solid rgba(255,255,255,0.5);border-radius:4px;box-shadow:0 0.25em 0.5em 0 rgba(0,0,0,0.1);text-shadow:0 0.25em 0.5em rgba(0,0,0,0.1);opacity:1;cursor:pointer;transition:opacity 150ms ease, border 300ms ease-in-out;transform:translateY(-50%);line-height:1}.glide__arrow:focus{outline:none}.glide__arrow:hover{border-color:white}.glide__arrow--left{left:2em}.glide__arrow--right{right:2em}.glide__arrow--disabled{opacity:0.33}.glide__bullets{position:absolute;z-index:2;bottom:2em;left:50%;display:inline-flex;list-style:none;transform:translateX(-50%)}.glide__bullet{background-color:rgba(255,255,255,0.5);width:9px;height:9px;padding:0;border-radius:50%;border:2px solid transparent;transition:all 300ms ease-in-out;cursor:pointer;line-height:0;box-shadow:0 0.25em 0.5em 0 rgba(0,0,0,0.1);margin:0 0.25em}.glide__bullet:focus{outline:none}.glide__bullet:hover,.glide__bullet:focus{border:2px solid white;background-color:rgba(255,255,255,0.5)}.glide__bullet--active{background-color:white}.glide--swipeable{cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.glide--dragging{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}


.glide__slide{
  display: flex;
  justify-content: center;
}

.slide-nav{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display: flex;
}

.slide-nav>button{
 display:block;
 border:none;
 width:100%;
 text-indent: -9999px;
 background: transparent;
 outline:none;
}

svg.dummy{
  display: block;
  width:100%;
  height:auto;
  background: #eee;
}


/* TEXTES */

#container {
  flex-shrink: 0;
  flex-basis: auto;
  display: flex;
  flex-direction: column;
  height: 1000%;
  font-size: 19px;
}
.row {
  flex-flow : row nowrap;
  display: flex;
  order: 1;
  color:#000;
  text-decoration: none;
  border-bottom:1px solid #ddd;
  padding:6px 0;
  transition:order .3s;
}

.row .item{
  transition: color .4s, margin 1.2s;
  /* transition: all .4s, margin 1.2s; */
}

/* .cat-jeunesse:link:hover .item{ color:#f60; }
.cat-photographie:link:hover .item{ color:#ff0800; }
.cat-art-contemporain:link:hover .item{ color:#7700ff; }
.cat-communication:link:hover .item{ color:#0044ff; }
.cat-carte-blanche:link:hover .item{ color:#ffbb00; }
.cat-archive:link:hover .item{ color:#182d55; }
.cat-peinture:link:hover .item{ color:#18553e; }


.cat-jeunesse:hover:visited .item{ color:#f60; }
.cat-photographie:hover:visited .item{ color:#ff0800; }
.cat-art-contemporain:hover:visited .item{ color:#7700ff; }
.cat-communication:hover:visited .item{ color:#0044ff; }
.cat-carte-blanche:hover:visited .item{ color:#ffbb00; }
.cat-archive:hover:visited .item{ color:#182d55; }
.cat-peinture:hover:visited .item{ color:#18553e; } */



.row:not(.row-header):hover .item{
  transition:all;
  margin-left:6px;
}


.row:visited{
  color:#999!important;
}

.item {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left:15px;
}

.item:first-child{
  flex:0.4;
  padding:0;

}
.row-header {
  font-family: Graphik, sans-serif;
  color:#999;
  order: -1;
  line-height: 1.5;
  cursor:pointer;
}

.year .item.year,
.cat .item.cat,
.title .item.title,
.client .item.client{
  color:#000
}


/* experiences */

.space{
  font-family: Graphik, sans-serif;
  font-size: 19px;
  text-decoration: none;
  font-weight: 400;
  float:left;
  margin-right:19px;
  visibility: hidden;
}

.info{
  overflow:hidden;
  color:#000;
  font-family: Rosart, Georgia, serif;
  font-size: 20px;
  max-width: 960px;
}

.experiences main{
  font-family: Graphik, sans-serif;
  font-size: 19px;
  color:#B0B0B0;

}

.experiences main ul{
  margin-bottom:45px;
  color:#353535;
}

.experiences main li{
  flex-flow: row nowrap;
  display: flex;
  border-top: 1px solid #ddd;
  padding: 6px 0;
  font-family: Rosart, Georgia, serif;
  font-size: 20px;

}

.experiences main li>em{
  display: block;
  font-style: normal;
  min-width:150px;
  font-family: Graphik, sans-serif;
}

.experiences main li>strong{
  font-weight: 400;
}


/* laboratoire */
@media (min-width:768px){
  .laboratoire{
    overflow: hidden;
  }
}
@media (min-width:768px){
  .notes{
    display:flex;
    align-items:center;
    height:calc(100vh - 165px);
    margin-bottom:15px;
    justify-content: center;
  }
}
.notes img{
  width:100%;
}

.note{
  width:100%;
  position: relative;
  margin-bottom:15px;
}

@media (min-width:768px){
  .note{
    width:calc(100vh - 180px);
    max-width:800px;
    margin-bottom:0;
    margin-right: 15px;
  }
}
.note .data{
  position:absolute;
  top:0;
  left:0;
  width:100%;

  background: #f2f2f2;
  display:flex;
  opacity: 0;
  transition: opacity 0.4s;
}
.data img{
  width:100%;
  height:auto;
  opacity: 0;
}

.data:hover{
  opacity:1;
}


.data .center{
  position: absolute;
  top:15px;
  left:25px;
  width:50%;
}


.data .center h2{
  font-family: graphik, sans-serif;
  border-bottom:1px solid #d0d0d0;
  color:#b0b0b0;
  font-size: 20px;
  padding:2px 0;
  font-weight: normal;
}

.data .center time,
.data .center p{
  font-family: Rosart, Georgia, serif;
  border-bottom:1px solid #d0d0d0;
  color:#333;
  font-size: 21px;
  display: block;
  padding:2px 0;
}


.note:nth-child(2n){
  margin-right: 0px;
}


.lab-nav{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding-bottom: 15px;;
}

.lab-nav a{
  font-family: Graphik, sans-serif;
  font-size: 20px;
  color:#999;
  text-decoration: none;;
}

.lab-nav a[aria-current="page"]{
  color:#000;
}

a.no{
  opacity:0.2;
  cursor:default;
}

.lab-nav>*{
  padding:15px;
}

@media (min-width:640px){
  .lab-nav>*{
    padding:0;
  }
}