@import url('fonts/PP-Editorial-Old/stylesheet.css');
@import url('fonts/PP-Editorial/stylesheet.css');
@import url('fonts/PP-Mori/stylesheet.css');

html{
  cursor: auto;
  height: 100%;
}

body{
  position: relative;
  font-family: 'PPMori-Extralight';
  font-size: 1rem;
/*  background-color: #1a1a1a;*/
  margin: 0;
  padding: 0;
  padding-bottom: 43px;
  min-height: 100%;
  cursor: auto;
  width: 100%;
/*  background-color: #e9e7df;*/
}

body::-webkit-scrollbar {
  display: none;
}

/*CURSOR PROPERTIES*/

/*.cursor-dot-outline {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.3s ease, transform 0.3s ease-in-out;
  z-index: 20;
  width: 30px;
  height: 30px;
    background-color: #1a1a1a;
}*/

/*CURSOR PROPERTIES*/



nav{
  position: sticky;
  top: 0;
  display: block;
  color:  #1A1A1A;
height: auto;
/*  letter-spacing: .05rem;*/
  z-index: 10;
padding-left: 20px;
padding-right: 20px;
/*text-align: center;*/
}

.navigation {
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
/*  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);*/
/*background-color: #e9e7df;*/
background: #FFFFFF;



}

.navigation2 {
position:relative;
/*  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);*/
/*background-color: #e9e7df;*/
background: #FFFFFF;
height: auto;
font-size: .9rem;
line-height: 140%;


}


.header-mobile{
  display: none;

}

.titre{
  font-family: 'PPEditorialNew-UltralightItalic';
  font-size: 8vw;
  margin-left: auto;
  margin-right: auto;
}

.home {
    text-align: left;
    font-family: 'PPMori-Regular';
    font-size: 1.5rem;
}

.home1 {
  text-align: left;
font-family: 'PPEditorialOld-UltralightItalic';
font-size: 1.5rem;
line-height: 100%
/*  letter-spacing: .05rem;*/
}


.home-mobile{
  display: none;
  margin: 0;
  padding: 0;
/*  letter-spacing: .05rem;*/
}

.studio{

}

.shop {
  text-align: right;
    width: 33,33%
}

.contact {
  text-align: left;
    width: 33,33%
}

.a-propos {
  text-align: center;
  width: 33,33%
/*  margin-left: auto;
  margin-right: auto;*/
}
.button{
  border: none;
  background-color: transparent;
  color: #1A1A1A;
    font-family: 'PPMori-Extralight';
  font-size: 1rem;
  cursor: auto;
}

.apropos{
padding-left: 10px;
}


/*.insta::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
top: 17px;
  left: 0;
  background-color: black;
  transition: transform 0.2s ease-out;
}

.insta:hover::after {
  transform: scaleX(1);
}

.insta.left::after {
  transform-origin: bottom right;
}

.insta.left:hover::after {
  transform-origin: bottom left;
}*/


.insta:hover{
  font-family: 'PPMori-Regular';
}
.behance:hover{
  font-family: 'PPMori-Regular';
}
.tiktok:hover{
  font-family: 'PPMori-Regular';
}
.linkedin:hover{
  font-family: 'PPMori-Regular';
}
.contact2{
position: absolute;
top: 0;
}

.contact1{
  position: absolute;
top: 0;
}

/*#fenetre-a-propos{
  height: 100%;
  width: 20.7%;
margin-left: 75%;
padding-left: 30px;
padding-right: 30px;
padding-top: 60Px;
  z-index: 15;
  position: fixed;
  top: 0;
  background-color: white;*/
/*  backdrop-filter: blur(20px);*/
/*  font-size: .9rem;
  line-height: 110%;
  color: #1A1A1A;
}*/

#texte-about{
  grid-area: texte-about;
  position: relative;
font-size: 1rem;
  line-height: 125%;
  color: #1A1A1A;
  padding-right: 7%;
}

#container-img-about{
position: relative;
grid-area: container-img-about;
height: 700px;
width: 100%;
overflow: hidden;
border-radius: 10px;
}

#container-img-about img{
object-fit: cover;
height: 100%;
width: 100%;
border-radius: 10px;
}

.fenetre-a-propos{
  height: auto;
  width: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
padding-left: 20px;
padding-right: 20PX;
padding-top: 59Px;
  z-index: 15;
  position: fixed;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
  "texte-about container-img-about";
  column-gap: 10px;
  background-color: white;
  backdrop-filter: blur(20px);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease-in-out;
}

.fenetre-a-propos:target {
  visibility: visible;
  opacity: 0.96;
}

.fenetre-a-propos .close {
    transition: all 200ms;
}

.close {
  position: absolute;
  right: 32px;
  top: 15px;
  width: 25px;
  height: 25px;
  opacity: 0.5;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 25px;
  width: 1px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}


.filtres-container{
/*  padding-right: 5px;
  padding-left: 5px;*/
  border-spacing: 0;
      padding-left: 5px;
    padding-right: 5px;

}

.filtres{
  border-spacing: 0;
    width: 100%;
    text-align: center;
/*    color: #e9e7df;*/
}


.bouton-filtre-tout{
padding-top: 10px;
padding-bottom: 8px;
/*padding-right: 10px;
padding-left: 10px;*/
border: 1px solid #dbdbdb;
border-radius: 20px;
}

.bouton-filtre-imprime{
padding-top: 10px;
padding-bottom: 8px;
/*padding-right: 10px;
padding-left: 10px;*/
border: 1px solid #dbdbdb;
border-radius: 20px;
}

.bouton-filtre-digital{
padding-top: 10px;
padding-bottom: 8px;
/*padding-right: 10px;
padding-left: 10px;*/
border: 1px solid #dbdbdb;
border-radius: 20px;
}

.bouton-filtre-photographie{
padding-top: 10px;
padding-bottom: 8px;
/*padding-right: 10px;
padding-left: 10px;*/
border: 1px solid #dbdbdb;
border-radius: 20px;
}

.bouton-filtre-tout:hover{
border: 1px solid #1A1A1A;
border-radius: 20px;

}

.bouton-filtre-imprime:hover{
border: 1px solid black;
border-radius: 20px;
}

.bouton-filtre-digital:hover{
border: 1px solid #1A1A1A;
border-radius: 20px;

}

.bouton-filtre-photographie:hover{
border: 1px solid #1A1A1A;
border-radius: 20px;

}




.colonne-container{
  height: 100%;
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 25px;
 position: relative;
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  column-gap: 10px;
  grid-template-areas:
    "colonne1 colonne2 colonne3 colonne4";

}





.colonne1{
  grid-area: colonne1;
  width: 100%;
  height: 1400px;
position: relative;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  row-gap: 10px;
  grid-template-areas:
    "content1"
    "content3"
    "content2"
    "content5";
}

.colonne2{
    grid-area: colonne2;
/*  top: 52px;*/
  width: 100%;
  height: 1400px;
position: relative;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
    row-gap: 10px;
  grid-template-areas:
    "content6"
    "content7"
    "content17";
}

.colonne3{
    grid-area: colonne3;
  width: 100%;
  height: 1400px;
position: relative;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
    row-gap: 10px;
  grid-template-areas:
  "content18"
    "content9"
    "content10"
    "content11";
}

.colonne4{
    grid-area: colonne4;
  width: 100%;
  height: 1400px;
position: relative;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
    row-gap: 10px;
  grid-template-areas:
  "content12"
    "content13"
    "content14"
    "content15";
}


.row-container{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  height: auto;
  width: auto;
 position: relative;
 display: grid;
 grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;

  row-gap: 10px;
  grid-template-areas:
    "row1"
    "row2"
    "row3";
}

.row1{
  grid-area: row1;
  width: 100%;
  height: 800px;
position: relative;
  display:grid;
  grid-template-columns: .67fr 1fr 1fr;
  grid-template-rows: 1fr;
    column-gap: 0px;
  row-gap: 10px;
  grid-template-areas:
    "text-project-container content1 content2 ";
}

.row2{
  grid-area: row2;
  width: 100%;
  height: 800px;
position: relative;
  display:grid;
  grid-template-columns: .67fr 1fr 1fr;
  grid-template-rows: 1fr;
    column-gap: 0px;
  row-gap: 10px;
  grid-template-areas:
    "text-project-container content3 content4 ";
}

.row3{
    grid-area: row3;
    position: relative;
  display:grid;
  width: 100%;
  height: 800px;
  column-gap: 0px;
  grid-template-columns: .67fr 1fr 1fr;
  grid-template-rows: 1fr;
}

.row4{
    grid-area: row4;
    position: relative;
  display:grid;
  width: 100%;
  height: 800px;
  column-gap: 0px;
  grid-template-columns: .67fr 1fr 1fr;
  grid-template-rows: 1fr;
}

.row5{
    grid-area: row5;
    position: relative;
  display:grid;
  width: 100%;
  height: 800px;
  column-gap: 0px;
  grid-template-columns: .67fr 1fr 1fr;
  grid-template-rows: 1fr;
}


#text-project-container{
  grid-area: text-project-container;
/*  height: calc(100px);*/
  width: 20.4%;
padding-left: 8px;
padding-right: 10px;
/*margin-left: 75%;*/
left: 15px;
  position: fixed;
  font-size: 1rem;
  line-height: 125%;
  color: #1A1A1A;
}

.row-container-mobile{
  display: none;
}

.colonnevide-mobile{
  display: none;
}

.menu-mobile-container{
  display: none;
}

.menu-ouvert{
  display: none;
}

.content-container-mobile{
  display: none;
}

@media only screen and (max-width:850px){

.footer{
    display: none;
}

.footer-mobile{
    display: block;
      bottom: 0;
}

  .colonnevide-mobile{
    display: inline-table;
      height: auto;
overflow: hidden;
text-align: right;
padding-top: 5px;

  }


.menu{
    height: auto;
  width: 25px;
  left: -9px;
object-fit: cover;
object-position: right;
position: relative;
}


.contact{
  display: none;
}

.shop{
  display: none;
}

.a-propos{
  display: none;
}



.voir-plus{
    opacity: 100%;

}

/*.home {
  width: 10%;
}
*/
.cursor-dot-outline{
  display: none;
}

a, a:hover, a:visited, a:active {
  cursor: auto;
 }

body {
  cursor: auto;

}

html {
  cursor: auto;
}

.button{
  cursor: auto;
}

nav {
  background-color: white;
}

.header-mobile{
  display: block;
    width: auto;
position: relative;
top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  height: auto;
  color: #1A1A1A;
  text-align: center;
}

.titre{
  font-family: 'PPEditorialOld-UltraLightItalic';
}

.navigation{
  padding-top: 5px;
  padding-bottom: 5px;
}

.colonne-vide{
  display: none;
}

.studio {
  display: inline;
  font-size: 1.1rem;
    font-family: 'PPMori-Extralight';
}

  .home-mobile{
    display: inline;
margin: 0;
padding: 0;
width: 40px;
    font-size: 1rem;
    font-family: 'PPEditorialOld-Ultralight';
  }

.réseaux{
  width: auto;
padding: 0;
border-spacing: 0;
margin-top: 30px;
  color: black;
  text-align: center;
  font-family: 'PPEditorialOld-Ultralight';
}

.texte-menu{
  color: black;
height: auto;
width: 200px;
margin-right: auto;
margin-left: auto;
margin-top: 40px;
text-align: center;
}

.menu-ouvert{
  display: block;
  height: 210px;
  width: auto;
  top: 0;
  left: 20px;
  right: 20px;
  z-index: 15;
  position: fixed;
background: rgba(210, 210, 210, 0.62);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.7px);
-webkit-backdrop-filter: blur(6.7px);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease-in-out;
  border-radius: 10px;
}

.menu-ouvert:target {
  visibility: visible;
  opacity: 1;
}

.menu-ouvert.close {
    transition: all 200ms;
}

.close {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 25px;
  height: 25px;
  opacity: 1;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 25px;
  width: 1px;
  background-color: black;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}



  .home1{
    display: none;
  }

.filtres-container{
  display: none;
}

.filtres{
margin-top: 30px;
margin-left: auto;
margin-right: auto;
border-spacing: 0;
padding-bottom: 20px;
}


/*.colonne1{
  grid-area: colonne1;
  width: 100%;
  height: 1705px;
position: relative;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  row-gap: 2.5px;
  grid-template-areas:
    "content1"
    "content2"
    "content3"
    "content5"
}*/



.cursor-dot-outline{
  display: none;
}

a, a:hover, a:visited, a:active {
  cursor: auto;
 }

body {
  cursor: auto;
}

html {
  cursor: auto;
}

.button{
  cursor: auto;
}

.row-container{
display: none;
}

.content-container-mobile{

  height: 100%;
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
 position: relative;
 display: grid;
 grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "content1 content1"
    "content2 content2"
    "content3 content3"
    "content4 content4"
    "content5 content5"
    "content6 content6";
}

#text-project-container-mobile{
width: auto;
/*height: 350px;*/
top: 10px;
position: relative;
  grid-area: text-project-container-mobile;
  background-color: white;
  font-size: .9rem;
  line-height: 130%;
  color: #1A1A1A;
}


/*.row1-mobile{
  grid-area: row1-mobile;
  width: auto;
  height:1000px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
  "text-project-container-mobile"
    "content1"
    "content2"
}

.row2-mobile{
  grid-area: row2-mobile;
  width: auto;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "content3"
    "content4"
}*/



  }

@media only screen and (max-height:500px){

#text-project-container{
  grid-area: text-project-container;
  position: relative;
  margin-left: 0;
  width: auto;
  height: 100%;
/*  padding-top: 10px;*/
  padding-left: 32px;
  top: 0;
}

}

a, a:hover, a:visited, a:active {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
 }


.voir-plus {
/*  height: 400px;*/
position: absolute;
z-index: 5;
height: 25px;
    opacity: 0%;
width: 25px;
top: 15px;
right: 15px;
 transition-property: transform;
    transition-duration: 1s;
}

.voir-plus img{
  height: auto;
  width: auto;
}

.voir-plus:hover {
    animation-name: rotate; 
    animation-duration: 1s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

/*.voir-plus:hover {
opacity: 100%;
}*/


/*.titre-projet {
  font-size: .9rem;
  width: auto;
position: relative;
display: block;
margin-top: 10px;
padding-right: 10px;
padding-left: 5px;
}*/


#content1 {
  grid-area: content1;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 400px;
      border-radius: 10px;
}

#content1:hover .voir-plus{
  opacity: 100%;
}

#content1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;

}

#content2 {
  grid-area: content2;
/*  margin-top: -200px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 400px;
      border-radius: 10px;
}

#content2:hover .voir-plus{
  opacity: 100%;
}

#content2 img {
  height: 100%;
  width: 100%;
  object-fit: cover;

}

#content3 {
  grid-area: content3;
/*  margin-top: -300px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 250px;
            border-radius: 10px;
}

#content3:hover .voir-plus{
  opacity: 100%;
}

#content3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

#content4 {
  grid-area: content4;
/*  margin-top: -700px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 600px;
            border-radius: 10px;
          }
#content4:hover .voir-plus{
  opacity: 100%;
}


#content4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

#content5 {
  grid-area: content5;
/*  margin-top: -500px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 340px;
            border-radius: 10px;

}

#content5:hover .voir-plus{
  opacity: 100%;
}


#content5 img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}



#content6 {
  grid-area: content6;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 500px;
            border-radius: 10px;

}

#content6:hover .voir-plus{
  opacity: 100%;
}


#content6 video{
  height: 100%;
  width: 101%;
  object-fit: cover;
}

#content6 img {
  height: 100%;
  width: 100%;
  object-fit: cover;

}

#content7 {
  grid-area: content7;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 500px;
            border-radius: 10px;

}

#content7:hover .voir-plus{
  opacity: 100%;
}


#content7 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


#content8 {
  grid-area: content8;
/*  margin-top: -200px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 700px;
            border-radius: 10px;

}

#content8:hover .voir-plus{
  opacity: 100%;
}


#content8 img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

#content9 {
  grid-area: content9;
/*  margin-top: -400px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 400px;
            border-radius: 10px;

}

#content9:hover .voir-plus{
  opacity: 100%;
}


#content9 img {
  width: 100%;
  height: 100%;
  object-fit: cover;


}

#content10 {
  grid-area: content10;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 400px;
            border-radius: 10px;

}

#content10:hover .voir-plus{
  opacity: 100%;
}


#content10 img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

#content11 {
  grid-area: content11;
/*  margin-top: -300px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 400px;
            border-radius: 10px;

}

#content11:hover .voir-plus{
  opacity: 100%;
}


#content11 img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}


#content12 {
  grid-area: content12;
/*  margin-top: -500px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 300px;
            border-radius: 10px;

}

#content12:hover .voir-plus{
  opacity: 100%;
}


#content12 img {

  width: 100%;
  height: 100%;
  object-fit: cover;
}

#content13 {
  grid-area: content13;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 400px;
            border-radius: 10px;

}

#content13:hover .voir-plus{
  opacity: 100%;
}


#content13 img {
  width: 100%;
  height: 100%;
  object-fit: cover;


}

#content14 {
  grid-area: content14;
/*  margin-top: -50px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 400px;
            border-radius: 10px;

}

#content14:hover .voir-plus{
  opacity: 100%;
}


#content14 img {
  width: 100%;
  height: 100%;
  object-fit: cover;


}


#content15 {
  grid-area: content15;
/*  margin-top: -250px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 290px;
            border-radius: 10px;

}

#content15:hover .voir-plus{
  opacity: 100%;
}


#content15 img {
  width: 100%;
  height: 100%;
  object-fit: cover;


}

#content16 {
  grid-area: content16;
/*  margin-top: -450px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 500px;
            border-radius: 10px;

}

#content16:hover .voir-plus{
  opacity: 100%;
}


#content16 img {
  width: 100%;
  height: 100%;
  object-fit: cover;


}


#content17 {
  grid-area: content17;
/*  margin-top: -450px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 550px;
            border-radius: 10px;

}

#content17:hover .voir-plus{
  opacity: 100%;
}


#content17 img {
  width: 100%;
  height: 100%;
  object-fit: cover;


}

#content18 {
  grid-area: content18;
/*  margin-top: -450px;*/
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 500px;
            border-radius: 10px;

}

#content18:hover .voir-plus{
  opacity: 100%;
}


#content18 img {
  width: 100%;
  height: 100%;
  object-fit: cover;


}


.non-data-projet {
  width: 50%;
}

.credits {
  text-align: left;
/*  letter-spacing: .05rem;*/
}



footer {
  position: absolute;
  width: 100%;
  font-size: 1rem;
    z-index: 10;
    text-align: center;
    bottom: 0;

}

.footer {
    position: absolute;
    padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
padding-right: 20px;
      background-color: white;
  width: 100%;
  z-index: 10;
  bottom: 0;
}


.footer-mobile{
    display: none;
    position: absolute;
    padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
padding-right: 20px;
      background-color: white;
  width: 100%;
  z-index: 10;
  bottom: 0;
}

.contact-footer {
  text-align: right;
}