*{
    border: 0;
    padding: 0;
    margin: 0;
    /* -ms-overflow-style: none;  IE and Edge */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(73, 73, 73, 0.5) transparent;
}

 /* Hide scrollbar for Chrome, Safari and Opera */
 ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgba(73, 73, 73, 0.5);
    border-radius: 10px;
    border: transparent;
  }

html{
    font-family: CabinetGrotesk-Variable;
}
:root {
 --bg: #EFEFEF;
 --main: #04C866;
 --accent2: #6384F9;
--accent: #FFF176;
 --texte: rgb(0, 0, 0);

 --epaisseur: 2px;
 --marges: 8px;
}

::selection {
    color: var(--texte);
    background: var(--accent);
  }


/*  //   Parts  //   */

/* Général */

body {
    background-color: var(--bg);
    font-family: CabinetGrotesk-Variable;
    font-variation-settings: 'wght' 500.0;
    font-size: 18px;
    color: var(--texte) !important;
}

h2 {
    font-size: 40px;
}

h3 {
    font-size: 30px;
}

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

a:hover{
    text-decoration: underline;
}

span:hover {
    position: relative;
  }
  
  span[aria-label]:hover:after {
    pointer-events: none;
    content: attr(aria-label);
    padding: 4px 0px;
    position: absolute;
    left: -0px;
    bottom: -15.5px;
    white-space: nowrap;
    z-index: 20;
    color: var(--texte);
    background:var(--accent);
  }

/* Header */

#hdr{
    position :fixed;
    width: 100vw;
    height: 180px;
    border-bottom: var(--epaisseur) dashed var(--texte);
    background-color: var(--bg);
  
    top: 0px;
    z-index: 9;

}

#hdrInfos{
    position: absolute;
    width: 100%;
    bottom: 0;
}

#hdrInfosFlex{
display: flex;
flex-direction: row;
align-items: center;
padding: var(--marges);

}

#logo1{
    width: 270px;
    display: block;
    margin-left: auto;
    margin-right: auto ;
    top:6px;
    fill: var(--accent);
    stroke: transparent;
}


.cls-4 {
/*    filter:  url(#f1) url(#f2) ; */
    fill: var(--accent);
}

.info-fr {
    display: inline;
  }
  
  .info-en {
    display: none;
  }

  #fr.active, #en.active {
    text-decoration: underline;
  }

  #fr, #en{
      cursor:pointer;
  }


/* Portfolio */

.main {
position: relative;
top: 189px;
z-index: 1;
}

.portfolioImg {
    height:100%;
}

.portfolioImgs {
    height: 400px;
   padding: 0 var(--marges);
   gap: 8px;
}

.legend{
    height: 80px;
    width: 100%;
    overflow: hidden;
    padding:var(--marges) 0;
}

.legendItem {
    margin-right: var(--marges);
}

.title{
    white-space: nowrap;
    padding-left: var(--marges);
    
    border-right: var(--epaisseur) dashed var(--texte);
    vertical-align: middle;
    line-height: 70px;
    
}

.fleche {
    font-family: 'Satoshi-Variable';
    }
    

.metaData{
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: var(--epaisseur) dashed var(--texte);
}

.metaDataTxt{
    width: 200px;
}

.descTxt{
width: 80vw;
height: 100%;
overflow-y: scroll;
}

/* Infos */

.infos{
    position: relative;
    background-color: var(--main);
    z-index: 2;
    width: 100vw;
    min-height: 100vh;
}

.infosTxt {
    position: relative;
    padding: var(--marges);
    padding-top: 196px;
    padding-bottom: 16px;
    width: 90%;
    height: 100%;
}

.contact{
    color: white;
    font-size: 18px;
    line-height: 10px !important;
}

#leftFlex{
    background-color: var(--main);
}


/*  //  Attributes  //   */
.overX{
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
}

.noDisplayWhenMobile{
    display: none;
}

.noDisplayUnlessTiny{
    display: none;
}

.noDisplayUnlessReallyTiny{
    display: none;
}

/* /////// MEDIA QUERIES ///// */

@media screen and (min-width: 800px) {

/*  //  Attributes  //   */

.noDisplayWhenMobile{
    display: block;
}

.noDisplayWhenDeskstop{
    display: none !important;
}

/* Parts */

.main{
 flex: 60;
 height: 100vh;
 top: 0px;
 overflow-y: scroll;
 border-left: var(--epaisseur) dashed var(--texte);
}

.portfolioImgs {
    padding-top: var(--marges);
    padding-bottom: var(--marges);
    height: calc(100vh - 100px);
 
}

.dragScroll{

}

.descTxt{
    width: 500px;
    height: 100%;
    overflow-y: scroll;
    }

#hdr{
   width: 100%;
   height: calc(40vw / 1.74) !important;
  position: relative;
  max-height: 405px !important;
}

#logo1{
    width: 90% !important;
}

.infos{
    position: relative;
    width: 100%;
    min-height: 0 !important;
    height: calc(100vh - (40vw / 1.74));
    min-height: calc(100vh - 405px) !important;
    flex: 60;
    overflow-y: scroll;
}

.infosTxt{
    padding: var(--marges);
    padding-top: 16px;
    padding-bottom: 16px;
}

#totalFlex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100vw;
}

#leftFlex{
    display: flex;
    flex-direction: column;
    width: 40vw;
    height: 100vh;
    max-width: 700px !important;
    background-color: var(--main);
}

h3 {
    font-size: 30px;
}
}

/* // Super TINY //  */

@media screen and (max-width: 270px) {
    h3{
        font-size: 18px;
    }

    #logo1{
        width: 50% !important;
    }
    #hdr{
        height: 100px !important;
    }

    
.infosTxt {
    padding-top: 116px;
}

.main {
    top: 116px;
    }

    .noDisplayUnlessTiny{
        display: inline;
    }

    .noDisplayUnlessReallyTiny{
        display: none;
    }

}

@media screen and (max-width: 200px) {
.noDisplayUnlessReallyTiny{
    display: inline;
}
}