* {
  box-sizing: border-box;
}

:root {
  /* Variable css des fontes variables, pas touche */
  --weight: 0;
  --width: 0;
  --height: 0;
  /* Variable css des couleurs, vous pouvez les modifiers */
  --couleur-fond: rgb(61 57 68);
  --couleur-degrade: rgb(43 38 63);
  --couleur-texte: rgb(169 2 255);
}

body::-webkit-scrollbar, .filtres-fenetre::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
body::-webkit-scrollbar-track, .filtres-fenetre::-webkit-scrollbar-track {
  background-color: grey;
}
body::-webkit-scrollbar-thumb, .filtres-fenetre::-webkit-scrollbar-thumb {
  background-color: var(--couleur-texte);
}

/* Typographie Syne-Mono, à ne pas modifier */
@font-face {
  font-family: "Syne-Mono";
  src: url("fonts/Syne-Mono.woff");
}

/* Vos fontes variables, remplacez par vos noms de fichiers */



/* Ici on touche à rien normalement */
body {
  padding: 50px;
  height: 100vh;
  margin: 0;
  background: var(--couleur-fond);
  font-size: 18px;
  font-family: Helvetica, Tahoma, sans-serif;
  font-weight: 300;
  color: var(--couleur-texte);
  line-height: 1.44;
}

.syne-mono{
  font-family: "Syne-Mono";
  font-size: 1rem;
}
.syne-mono>a{
  color:var(--couleur-texte);
}

.grain {
    position: fixed;
    height: 100vh;
    width: 100vw;
    left:0;
    top:0;
    pointer-events: none;
    background-image: url(img/noise-256w.png);
    mix-blend-mode: soft-light;
    opacity: 0.7;
    animation: grain 0.1s steps(1) infinite;
    animation-duration: .2s;
    animation-timing-function: steps(1);
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: grain;
    z-index: 100;
}
.color-fond {
    position: fixed;
    height: 70vh;
    width: 100vw;
    left:0;
    bottom:0;
    z-index: 99;
    background: rgb(37,37,37);
    background: linear-gradient(0deg, var(--couleur-degrade) 45%, rgba(0,0,0,0) 100%);
    animation: moove-colo 10s infinite;
}

@keyframes grain {
    0%, 100% { background-position: 0% 0%; }
    20% { background-position: 50% 50%; }
    40% { background-position: 25% 25%; }
    60% { background-position: 75% 75%; }
    80% { background-position: 0% 100%; }
}

@keyframes moove-colo {
    0%  { height: 60vh; }
    50% { height: 80vh; }
    100% { height: 60vh; }
}

.barre-nav{
  position: fixed;
  height: 0em;
  display: flex;
  width: calc(100% - 6em);
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  font-size: 1rem;
  left:3em;
}

#enter{
  transition: 2s width;
  width: 85%;
  overflow: hidden;
}

.nav2{
  bottom:0;
  left:0;
}

.audio-variable-font {
  border: 1px solid var(--couleur-texte);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  height: 100%;
  z-index: 104;
  position: relative;
}


/* .audio-variable-font .micro {
  border-right: 1px solid var(--couleur-texte);
  width: 1px;
  padding: 20px;
  position: relative;
  text-align: center;
} */

.bout-mic{
  display: none;
}
.barre-nav>*:not(.notunder){
  text-decoration: underline;
}
/* .audio-variable-font .micro .micro-wrapper {
  display: table;
  height: 100%;
}
.audio-variable-font .micro .micro-wrapper .dtc {
  display: table-cell;
  vertical-align: middle;
}
.audio-variable-font .micro img {
  display: inline-block;
  width: 60px;
  height: 87px;
  position: relative;
  z-index: 2;
} */
/* .audio-variable-font .micro button {
  transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out;
  display: inline-block;
  color: var(--couleur-texte);
  font-size: 0.77rem;
  text-align: center;
  margin-top: 20px;
  border: 1px solid var(--couleur-texte);
  border-radius: 18px;
  padding: 7px 15px;
  position: relative;
  z-index: 2;
  background-color: transparent;
  cursor: pointer;
} */
/* .audio-variable-font .micro button:focus {
  outline: none;
}
.audio-variable-font .micro button:hover {
  color: #000;
  background-color: var(--couleur-texte);
} */
.audio-variable-font .micro canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.cadre-fontes {
  text-align: center;
  font-size: 1rem;
  margin-top: 3em;
  line-height: 1;
  z-index: 999;
  position: relative;
  padding-bottom: 5em;
}
.cadre-fontes>div{
    display: inline-block;
    width: 33.1%;
    height: 18em;
    margin-top: 0em;
    transition: all .6s;
    cursor: pointer;
    font-variation-settings: "wdth" 0, "wght" 0, "opsz" 0;
}
.cadre-fontes>div>a>img{
  width: 100%;
}
.cadre-fontes>div:hover{
  font-variation-settings: "wdth" 1200, "wght" 1200, "opsz" 1200;
}
.cadre-image{
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
a{
  color:inherit;
  text-decoration: none;
}
.typeface1{
  font-family: "Varia", sans-serif;
  margin-top: .1em;
  margin-bottom: .1em;
  font-size: 4rem;
}
.font2{
  font-family: "Varia2", sans-serif;
  font-size: 2rem;
  margin-top: .3em;
  color:white;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .cadre-fontes>div{
      width: 100%;
  }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .cadre-fontes>div{
      width: 100%;
  }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .cadre-fontes>div{
      width: 100%;
  }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .cadre-fontes>div{
      width: 33%;
  }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .cadre-fontes>div{
      width: 33%;
  }
}