body {
    /* Assurez-vous que le chemin de l'image est correct par rapport à votre fichier HTML */
    background: url('./img/image.webp') no-repeat center center fixed;
    /* background-size: contain; */
}

/* ...existing code... */

.social-links {
    position: absolute; /* ou fixed si tu veux qu'ils restent toujours visibles même au scroll */
    top: 115px;          /* ajuste la distance du haut */
    right: 330px;        /* ajuste la distance de la droite */
    display: flex;
    flex-direction: column; /* affichage en colonne */
    gap: 1vw;              /* espace entre chaque réseau */
    align-items: flex-start;  /* aligne à droite */
    z-index: 10;
}

.social-links a {
    display: flex;
    align-items: center;
    gap: 10px;          /* espace entre l'icône et le texte */
    color: rgb(0, 0, 0);
    font-size: 1.5rem;
    text-decoration: none;
    transition: color 0.2s;
}

.social-links a:hover {
    color: rgb(255 201 22);
}

.social-links .icon {
    width: 32px;        /* ajuste la taille de l'icône */
    height: 32px;
}

#audio-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  padding: 1rem;
  font-size: 1.8rem;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 9999;
}

#audio-toggle:hover {
  background: rgba(255, 255, 255, 1);
}

/* @media screen and (max-width: 1200px) {
    body {
        background-size: cover; 
    }
    .social-links {
        top: 20vh; 
    
} */

@media screen and (max-width: 1300px) {
    .social-links {
        top: 100px;
        right: 230px;
    }
 }


@media screen and (max-width: 1080px) {
    body {
        background-size: contain;
    }
    .social-links {
        top: 70px; /* ajuste la distance du haut pour les écrans plus petits */
        right: 65px; /* ajuste la distance de la droite pour les écrans plus petits */
    }
}

@media screen and (max-width: 550px) {
    .social-links {
        position: static;
        margin: 70px auto 0 auto;
        width: fit-content; /* ajuste la largeur pour les écrans plus petits */
        align-items: flex-start;
    }
}

@media screen and (max-width: 350px) {
    .social-links {
        margin: 30px auto 0 auto;
    }
}

@media screen and (orientation: landscape) and (max-width: 960px) {
    .social-links {
        top: 10px; /* ajuste la distance du haut pour les écrans très petits */
        right: 10px;
    }
}