@font-face {
  font-family: 'Coolvetica';       /* Nom que tu choisis pour l'utiliser dans CSS */
  src: url('/fonts/AlteHaasGroteskRegular.ttf') format('truetype'); /* Chemin vers le fichier et type */
  font-weight: bold;          
  font-style: normal;           
}


body {
  min-height: 450vh;
  padding-bottom: 30vh;
}


.titre{
    font-family: 'Coolvetica', sans-serif;
    font-size: 4rem;
}

.descriptions {
    font-family: 'Coolvetica', sans-serif;
    font-weight: bold;
    font-size: 1rem;
}

.petit{
    font-family: 'Coolvetica', sans-serif;
    font-size: 0.75rem;
    color: black;
}

.moyen{
  font-family: 'Coolvetica', sans-serif;
  position: fixed;
  font-size: 0.75rem;
  top: 1rem;
  left: 1rem;
  color: black;
  text-decoration: none;
  z-index: 1000;
}


#expression_1 {
  position: absolute;
  top: 25%;
  left: 20%;
  transform: translateX(-50%);
}

#expression_2 {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
}

#expression_3 {
  position: absolute;
  top: 25%;
  left: 80%;
  transform: translateX(-50%);
}



#technique2 {
  position: absolute;
  top: 100%;
  left: 20%;
  transform: translateX(-50%);
}

#technique1 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}


#texture_zebre {
  position: absolute;
  top: 103%;
  left: 80%;
  transform: translateX(-50%);
}



#stylo1{
  position: absolute;
  top: 165%;
  left: 30%;
  transform: translateX(-50%);
}

#stylo2 {
  position: absolute;
  top: 162.5%;
  left: 70%;
  transform: translateX(-50%);
}



#carnet1 {
  position: absolute;
  top: 220%;
  left: 30%;
  transform: translateX(-50%);
}

#carnet3 {
  position: absolute;
  top: 220%;
  left: 70%;
  transform: translateX(-50%);
}


#carnet2 {
  position: absolute;
  top: 270%;
  left: 30%;
  transform: translateX(-50%);
}

#carnet4 {
  position: absolute;
  top: 270%;
  left: 70%;
  transform: translateX(-50%);
}




.statue {
  position: absolute;
  top: 340%;
  left: 20%;                  
  transform: translateX(-50%);
  width: clamp(150px, 30vw, 250px); 
}

.statue video {
  width: 100%;   
  height: auto;
  display: block;           
}

.statue p {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: #333;
  word-wrap: break-word;
  width: 100%;           
  text-align: left;       
  box-sizing: border-box;
  font-family: 'Coolvetica', sans-serif;
}



#poivrons {
  position: absolute;
  top: 350%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(150px, 50vw, 400px); /* responsive */
  height: auto;
}


.eau  {
  position: absolute;
  top: 344%;
  left: 80%;                  
  transform: translateX(-50%);
  width: clamp(200px, 35vw, 300px); 
  }

.eau img {
  width: 100%;   
  height: auto;
  display: block;    
}

.eau p {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: #333;
  word-wrap: break-word;
  width: 100%;           
  text-align: left;       
  box-sizing: border-box;
  font-family: 'Coolvetica', sans-serif;
}

.renard {
  position: absolute;
  top: 410%;
  left: 30%;                  
  transform: translateX(-50%);
  width: clamp(300px, 40vw, 500px);
}

.renard model-viewer {
  width: 100%;
  height: clamp(400px, 30vw, 500px);
  display: block;
}

.renard p {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: #333;
  word-wrap: break-word;
  width: 100%;           
  text-align: left;       
  box-sizing: border-box;
  font-family: 'Coolvetica', sans-serif;
}


.renard_blender {
  position: absolute;
  top: 444%;
  left: 61%;                  
  transform: translateX(-50%);
  width: clamp(150px, 40vw, 300px);
  height: auto;
  }

.renard_blender img {
  width: 100%;   
  height: auto;
  display: block;  
}

.renard_blender p {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: #333;
  word-wrap: break-word;
  width: 100%;           
  text-align: left;       
  box-sizing: border-box;
  font-family: 'Coolvetica', sans-serif;
}



#renard_blender2 {
  position: absolute;
  top: 418%;
  left: 61%;
  transform: translateX(-50%);
  width: clamp(150px, 40vw, 300px); /* responsive */
  height: auto;
}


/* #renard_croquis {
  position: absolute;
  top: 410%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(50px, 20vw, 200px); 
  height: auto;
}  */

#renard_imprime {
  position: absolute;
  top: 417.90%;
  left: 82%;
  transform: translateX(-50%);
  width: clamp(50px, 30vw, 310px); /* responsive */
  height: auto;
}