@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;           
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem 0.75rem; /* 8px = 0.5rem, 12px = 0.75rem */

}

header ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
}

header a {
    text-decoration: none;
}

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

.moyen{
    font-family: 'Coolvetica', sans-serif;
    font-size: 0.75rem;
    color: black;
    top : 1rem;
    left: 1rem;
}

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

a img {
  display: inline-block;
  transition: transform 0.6s ease;
}

a img:hover {
  transform: rotate(360deg) scale(1.05);
}

.contact {
  position: fixed;      /* reste en bas à droite */
  bottom: 0.625rem;     /* 10px */
  right: 0.75rem;       /* 12px */
  font-family: 'Coolvetica', sans-serif;
  font-size: 0.75rem;   /* 12px */
  color: black;
  text-align: right;    /* aligné à droite */
}




#cd_animationvideo{
  width: 10rem;     
  height: auto;    
  max-width: 100%; 
  position: absolute;
  top: 40%;
  left: 15%;
  pointer-events: auto;
}

#cd_vr{
  width: 10rem;     
  height: auto;    
  max-width: 100%; 
  position: absolute;
  top: 40%;
  left: 30%;
  pointer-events: auto;
}

#cd_modelisation{
  width: 10rem;     
  height: auto;    
  max-width: 100%; 
  position: absolute;
  top: 40%;
  left: 45%;
  pointer-events: auto;
}

#cd_expression{
  width: 10rem;     
  height: auto;    
  max-width: 100%; 
  position: absolute;
  top: 40%;
  left: 60%;
  pointer-events: auto;
} 

#cd_photographie{
  width: 10rem;     
  height: auto;    
  max-width: 100%; 
  position: absolute;
  top: 40%;
  left: 75%;
  pointer-events: auto;
}