@font-face {
  font-family: 'PlusJakartaSans-SemiBold';
  src: url('../medias/types/PlusJakartaSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'PlusJakartaSans-Regular';
  src: url('../medias/types/PlusJakartaSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'BBBBaskervvol';
  src: url('../medias/types/BBBBaskervvol/BBBBaskervvol-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}



@font-face {
  font-family: 'BBBBaskervvol';
  src: url('../medias/types/BBBBaskervvol/BBBBaskervvol-Italic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
}
 
@font-face {
  font-family: 'BBB-OpenSans-Regularl';
  src: url('../medias/types/BBB-OpenSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'BBBDMSans-Regular';
  src: url('../medias/types/BBBDMSans-Regular.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  
}


h1 {
  font-family: 'PlusJakartaSans-SemiBold', sans-serif;
  font-size: 2em;
  font-weight: 600;
  line-height: 1.6;

  color: #AD0B31;

  position: fixed;
  top: 15px;
  left: 30px;

  margin: 0;
  padding: 0;

  z-index: 100;
}

h1 a {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;

  text-decoration: none;
}

h1 a:hover {
  color: inherit;
  text-decoration: none;
}

h3 {
  font-family: 'PlusJakartaSans-SemiBold', sans-serif;
  line-height: 1.6;
  color: #AD0B31;

  position: fixed;
  bottom: 15px;
  left: 450px;

  margin: 0;
}

h3 a {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  text-decoration: none;
}
  
  h3 a:hover {
    color: inherit;
    text-decoration: none;
  }

#homeButton {
  cursor: pointer;
}

body {
  display: flex;
  flex-direction: row;

  width: 100vw;
  height: 100vh;

  font-family: 'BBBBaskervvol', sans-serif;
  font-size: 16px;
  line-height: 1.6;

  color: #000000;
  background-color: #E9E9E9;
  
}

 a{
  /*color: #0bac86;*/
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;

  text-decoration: none;
}

a:hover {
  color: #0bac86;
  text-decoration: none;
}

.left {
  width: 550px;
  flex-shrink: 0;
  line-height: 22px;
  height: 100%;

  overflow-y: auto;

  padding: 2rem;

  background: linear-gradient(
    0deg,
    #ad0b3149,
    #E9E9E9,
    #E9E9E9
  
  );;
}



.right {
  flex: 1;

  width: auto;
  height: 100%;

  overflow: hidden;

  position: relative;

  background: #ffffff;
  
}


/* diapo */

.right .slide {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  opacity: 0;

  transition: opacity 1s ease;
}

.right .slide.is-visible {
  opacity: 1;
}


/*page projets = details */

.detail {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  background: #ffffff;

  overflow-y: auto;
  overflow-x: hidden;

  display: none;

  z-index: 10;
}

.detail.is-open {
  display: block;
}



#detailInner {
  width: 100%;
  min-width: 0;
}



#detailInner h2 {

  position: relative;
  top: 15px;
  left: 40px;

  margin: 0 !important;

  font-family: 'BBBBaskervvol', sans-serif;
  font-style: italic;
  font-weight: 200;
  font-size: 40px;

  color: #AD0B31;

  box-sizing: border-box;
}



#detailInner p {
  margin: 0;
  padding: 25px 40px;

  font-family: "BBBDMSans-Regular", sans-serif;
  font-size: 18px;
  line-height: 1.6;

  box-sizing: border-box;
}


#detailInner img {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}


#detailInner video {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}


/* data filtre */

.filter-word {
  background: none;

  border: none;

  padding: 0;
  margin: 0;

  font: inherit;

  cursor: pointer;

  color: #AD0B31;

  transition: color 0.25s ease;
}

.filter-word:not(.is-red) {
  color: #888;
}

.filter-word.is-active {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* liste projets */

.project-list {
  list-style: none;

  margin: 1.5rem 0 0;
  padding: 0;
}

.project-item {
  display: block;

  width: 100%;

  text-align: left;

  background: none;
  border: none;

  padding: 1rem 0;

  cursor: pointer;

  font-family: 'BBBDMSans-Regular', sans-serif;
  font-size: 16px;

  color: #000000;
}

.project-item:hover {
  color: #AD0A82;
}

.project-item.is-open {
  color: #AD0A82;
}

.project-item .title {
  display: block;

  font-weight: 800;
}

.project-item .cat {
  display: none;
}

.project-item.is-hidden {
  display: none;
}

 /*page contact */
 
 .contact-page {
  width: auto;
  min-height: 100vh;
  position: fixed;
  padding: 10px 15px ;
  color: #000000; 
  font-family: "BBBDMSans-Regular", sans-serif;
}

p1 {
  position: fixed;
  font-family: 'PlusJakartaSans-SemiBold', sans-serif;
  bottom: 15px;
  left: 30px;
  color: #000000; 
  font-size: 12px;
  font-style: bold;
}



/* ==========================================================
   RESPONSIVE
========================================================== */
@media (max-width: 860px) {

  /* =========================
     PAGE PRINCIPALE
     ========================= */

  body {
    display: block;

    width: 100%;
    min-height: 100vh;
  }


  /* =========================
     COLONNE GAUCHE
     ========================= */

  .left {
    width: 100%;

    height: auto;
    min-height: auto;
    max-height: none;

    overflow: visible;

    padding-top: 70px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;

    box-sizing: border-box;
  }


  /* Texte de présentation / filtres */

  .left p {
    font-size: 15px;
    line-height: 1.5;
  }


  /* =========================
     COLONNE DROITE
     ========================= */

  .right {
    position: relative;

    width: 100%;
    height: 0;

    overflow: visible;

    background: none;
  }


  .right .slide {
    display: none;
  }


  /* =========================
     HOME
     ========================= */

  h1 {
    position: fixed;

    top: 15px;
    left: 20px;

    font-size: 20px;

    z-index: 1100;
  }


  /* =========================
     PROJET OUVERT
     ========================= */

  .detail {
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow-y: auto;
    overflow-x: hidden;

    background: #ffffff;

    z-index: 1000;
  }


  #detailInner {
    width: 100%;

    min-width: 0;

    padding-top: 60px;
  }


  /* TITRE DU PROJET */

  #detailInner h2 {
    position: relative;

    top: 0;
    left: 0;

    margin: 0 !important;

    padding: 10px 20px 20px !important;

    font-size: 28px;

    line-height: 1.2;
  }


  /* TEXTE DU PROJET */

  #detailInner p {
    margin: 0 !important;

    padding: 20px !important;

    font-size: 15px;

    line-height: 1.5;
  }


  /* IMAGES */

  #detailInner img {
    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;
  }


  /* VIDEOS */

  #detailInner video {
    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;
  }


  /* =========================
     CONTACT
     ========================= */

  .contact-page {
    position: relative;

    width: 100%;

    min-height: 100vh;

    padding: 70px 20px 30px;

    box-sizing: border-box;

    z-index: 1;
  }


  .contact-content {
    position: relative;

    width: 100%;

    height: auto;

    min-height: calc(100vh - 100px);

    display: flex;

    align-items: center;

    justify-content: center;
  }


  .contact {
    width: 90%;

    margin: 0;

    font-size: 16px;

    line-height: 1.5;

    text-align: center;
  }


  .credits {
    position: relative;

    left: auto;
    bottom: auto;

    margin-top: 40px;

    font-size: 12px;
  }


  .contact-page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    padding: 20px 10px 10px;

    box-sizing: border-box;
  }


  .contact-content {
    width: 100%;

    min-height: calc(100vh - 130px);

    display: flex;

    align-items: left;
    justify-content: left;
  }


  .contact {
    width: 90%;

    font-size: 15px;
    line-height: 1.5;

    text-align: left;
  }


  h3 {
    position: fixed;

    right: 20px;
    bottom: 15px;

    left: auto;

    font-size: 16px;

    z-index: 1100;
  }

}
/* =========================
   TABLETTES / IPAD
   ========================= */

@media (min-width: 861px) and (max-width: 1100px) {

  body {
    display: flex;
    flex-direction: row;

    width: 100%;
    height: 100vh;
  }


  /* COLONNE GAUCHE */

  .left {
    width: 45%;

    height: 100vh;

    overflow-y: auto;

    padding: 70px 25px 30px;

    box-sizing: border-box;
  }


  /* COLONNE DROITE */

  .right {
    position: relative;
    width: 55%;
    height: 100vh;
    overflow: hidden;
    background: #ffffff;
  }

  .right .slide {
    display: block !important;

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;

    transition: opacity 1s ease;
  }

  .right .slide.is-visible {
    display: block !important;
    opacity: 1;
  }

  /* HOME */

  h1 {
    position: fixed;

    top: 15px;
    left: 25px;

    font-size: 24px;

    z-index: 1100;
  }


  /* CONTACT */

  .contact-page {
    position: relative;

    width: 100%;

    min-height: 100vh;

    padding: 80px 30px 30px;

    box-sizing: border-box;
  }


  .contact-content {
    width: 100%;

    min-height: calc(100vh - 120px);

    display: flex;

    align-items: center;
    justify-content: center;
  }


  .contact {
    width: 90%;
    max-width: 800px;

    margin: 0;

    font-size: 17px;

    line-height: 1.5;

    text-align: center;
  }


  .credits {
    position: absolute;

    left: 30px;
    bottom: 25px;

    font-size: 12px;
  }


  /* CONTACT EN BAS À DROITE */

  h3 {
    position: fixed;

    right: 25px;
    bottom: 15px;

    left: auto;

    font-size: 17px;

    z-index: 1100;
  }

}