/* ============================
   Réinitialisation de base
   ============================ */
* {
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les paddings par défaut */
    box-sizing: border-box; /* Inclut bordures et paddings dans la largeur/hauteur */
    user-select: none; /* Empêche la sélection de texte sur toute la page */
}

/* ============================
   Animation - Effet de flocons de neige
   ============================ */
@keyframes falling {
    0% {
        transform: translate(0, 0); /* Position de départ */
    }
    50% {
        transform: translate(20px, 50vh); /* Milieu de la chute + décalage à droite */
    }
    100% {
        transform: translate(-20px, 100vh); /* Fin de la chute + décalage à gauche */
    }
}

/* Style des flocons */
.snowflake {
    position: absolute; /* Positionnement absolu pour mouvement libre */
    top: -10px; /* Place les flocons au-dessus de l'écran au départ */
    background-color: #ffffff; /* Couleur rose flocon */
    border-radius: 50%; /* Forme circulaire */
    opacity: 0.9; /* Légèrement transparent */
    width: 7px; /* Largeur du flocon */
    height: 7px; /* Hauteur du flocon */
    animation: falling 5s cubic-bezier(0.69, 0, 0.44, 1.03) infinite; /* Animation de chute infinie */
    z-index: 1000; /* Au-dessus de la plupart des éléments */
}

/* ============================
   Styles responsive pour petits écrans
   ============================ */
@media (max-width: 768px) {
  .audio-player {
    width: 90%; /* Largeur presque pleine pour petits écrans */
    transform: translate(5%, 10px); /* Décalage pour mieux centrer */
  }

  h1 {
    font-size: 2rem; /* Taille de titre plus petite */
  }

  p {
    font-size: 1rem; /* Texte plus petit */
  }

  .social-icons img {
    width: 35px; /* Icônes plus petites */
  }
}

/* ============================
   Corps de la page
   ============================ */
body, html {
    cursor: url('Images/Curseur/Aky/cursorrose.png'), auto; /* Curseur personnalisé par défaut */
    height: 100%; /* Hauteur complète de la fenêtre */
    font-family: Arial, sans-serif; /* Police principale */
    overflow: visible; /* Permet aux flocons de sortir de l'écran */
    position: relative; /* Position relative pour éléments enfants absolus */
    overflow-x: hidden; /* Empêche le défilement horizontal */
    background: linear-gradient(to bottom, #0f172a, #3b82f6 30%, #ff4dba 90%); /* Dégradé vertical de fond */
}

/* Conteneur principal */
.container {
  display: flex; /* Mode flexbox */
  flex-direction: column; /* Organise en colonne */
  height: 100vh; /* Hauteur de la fenêtre */
  justify-content: flex-start; /* Aligne les enfants en haut */
  gap: 5%; /* Espacement vertical entre enfants */
  padding: 0 1rem;
  box-sizing: border-box;
}


.text-image-container {
  display: flex;
  align-items: center; /* centre verticalement les éléments */
  justify-content: center; /* centre horizontalement */
  gap: 1rem;
  max-width: 90vw;
  margin: 0 auto;
  box-sizing: border-box;
}

.text-image-container p {
  flex: 1; /* texte prend tout l’espace restant */
  margin: 0;
  text-align: center; /* centre le texte */
}

.image-left, .image-right {
  width: 20%;  /* augmenter ici, par exemple 20% au lieu de 12% */
  max-width: 300px; /* augmenter aussi la limite max */
  height: auto;
  object-fit: contain;
}


.image-left {
 width: 50%; /* taille adaptée */
  transform: rotate(10deg);
}

.image-right {
 width: 50%; /* taille adaptée */
  transform: rotate(-10deg);
}







/* Section milieu */
.milieu {
  align-self: center; /* Centre horizontalement */
  padding: 1%; /* Espacement interne */
  color: white; /* Texte blanc */
}

/* Section bas */
.bas {
  align-self: center; /* Centre horizontalement */
  padding: 1%; /* Espacement interne */
  color: white; /* Texte blanc */
  max-width: 90vw;
  margin: 0 auto;
  text-align: center;
  padding: 1rem 0;
}

/* Section Réseaux sociaux en bas */
.Réseaux {
  bottom: 0; /* Positionné en bas */
  left: 0; /* Aligné à gauche */
  width: 100%; /* Largeur pleine */
  color: white; /* Texte blanc */
  padding: 20%; /* Espacement interne */
  z-index: 1000; /* Au-dessus des autres éléments */
}

/* ============================
   Menu de navigation fixe en haut
   ============================ */
nav {
  position: fixed; /* Fixé à l'écran */
  top: 0; /* En haut */
  left: 0; /* À gauche */
  width: 100%; /* Largeur pleine */
  z-index: 100; /* Au-dessus des contenus mais sous les flocons */
  background-color: #193768; /* Fond bleu */
  text-align: center; /* Texte centré */
  padding: 10px 0; /* Padding vertical */
}

/* Liens du menu */
nav a {
  color: white; /* Texte blanc */
  text-decoration: none; /* Pas de soulignement */
  margin: 0 15px; /* Espacement horizontal */
  font-size: 1.2rem; /* Taille du texte */
  font-weight: bold; /* Texte en gras */
}

/* Effet au survol des liens */
nav a:hover {
    color: #ff0088; /* Couleur rose au survol */
}

/* ============================
   Styles pour le contenu des sections
   ============================ */
.content {
    text-align: center; /* Centre le texte */
}

/* Titres principaux */
h1 {
    font-size: 4rem; /* Très grand titre */
    text-transform: uppercase; /* Majuscules */
    font-weight: bold; /* Gras */
    text-shadow: 2px 2px 10px rgb(255, 255, 255); /* Ombre blanche autour du texte */
    text-align: center; /* Centré */
}

/* Sous-titres */
h2 {    font-size: 4rem; /* Très grand titre */
    text-transform: uppercase; /* Majuscules */
    font-weight: bold; /* Gras */
    text-shadow: 2px 2px 10px rgb(255, 255, 255); /* Ombre blanche autour du texte */
    text-align: center; /* Centré */
}

h3 {
    text-align: center; /* Centré */
    font-size: 2.5rem; /* Taille moyenne */
    color: rgba(255, 255, 255, 0.8); /* Blanc légèrement transparent */
    text-shadow: 1px 1px 5px rgb(255, 255, 255); /* Ombre légère */
    margin-top: 20px; /* Marge au-dessus */
}

/* Paragraphes */
p { 
    text-align: center; /* Centré */
    font-size: 1.5rem; /* Taille de texte confortable */
    color: rgba(255, 255, 255, 0.8); /* Blanc transparent */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); /* Ombre noire */
}

/* ============================
   Icônes sociales
   ============================ */
.social-icons {
    display: flex; /* Flexbox pour aligner horizontalement */
    gap: 15px; /* Espacement entre icônes */
    padding: 20px; /* Padding autour */
    justify-content: center; /* Centre horizontalement */
}

.social-icons img {
    width: 50px; /* Taille des icônes */
    transition: 0.3s; /* Transition pour effet hover */
    align-items: center; /* Aligne les éléments (pas très utile ici) */
}

/* ============================
   Styles curseurs personnalisés
   ============================ */

/* Curseur au survol des liens */
a:hover {
    cursor: url('Images/Curseur/Aky/pinkeye.png'), pointer; /* Curseur custom */
    text-decoration: underline; /* Souligné au survol */
}

/* Curseur personnalisé pour le slider - Chrome et Webkit */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Supprime le style natif */
    appearance: none; /* Supprime le style natif */
    width: 50px; /* Largeur du pouce */
    height: 50px; /* Hauteur du pouce */
    background: url('Images/Curseur/Aky/Rosalyth.png') no-repeat center center; /* Image de fond */
    background-size: contain; /* Ajuste l'image */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Curseur pointeur */
}

input[type="range"].thumb-tank::-webkit-slider-thumb {
    -webkit-appearance: none; /* Supprime le style natif */
    appearance: none; /* Supprime le style natif */
    width: 50px; /* Largeur du pouce */
    height: 50px; /* Hauteur du pouce */
    background: url('Images/Curseur/Aky/tank.jpg') no-repeat center center;
    background-size: contain;
    border: none; /* Pas de bordure */
    cursor: pointer; /* Curseur pointeur */
}

/* Curseur personnalisé pour le slider - Firefox */
input[type="range"]::-moz-range-thumb {
    width: 20px; /* Largeur du pouce */
    height: 20px; /* Hauteur du pouce */
    background: url('Images/Curseur/Aky/pinkeye.png') no-repeat center center; /* Image */
    background-size: contain; /* Ajuste l'image */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Curseur pointeur */
}

/* Boutons au survol */
.controls button:hover {
    background-color: #3b82f6; /* Couleur bleue au survol */
    cursor: url('Images/Curseur/Aky/pinkeye.png'), pointer; /* Curseur custom */
}

/* Élément déplaçable */
.draggable {
    cursor: url('Images/Curseur/Aky/anhkpink.png'), pointer; /* Curseur main custom */
    position: absolute; /* Position absolue */
    will-change: transform; /* Optimisation GPU */
    transition: transform 0.1s ease-out; /* Transition douce */
    z-index: 200; /* Au-dessus */
}

/* Curseur pour les boutons */
button {
    padding: 10px 20px; /* Padding interne */
    font-size: 16px; /* Taille de texte */
    cursor: url('Images/Curseur/Aky/pinkeye.png'), pointer; /* Curseur personnalisé */
}

/* Curseur au survol du thumb (slider) */
input[type="range"]::-webkit-slider-thumb:hover {
    cursor: url('Images/Curseur/Aky/cursorrose.png'), pointer; /* Curseur custom */
}

/* Curseur au survol du track (slider) */
input[type="range"]:hover {
    cursor: url('Images/Curseur/Aky/cursorrose.png'), pointer; /* Curseur custom */
}

/* Curseur pendant glissement (actif) du slider */
input[type="range"]:active {
    cursor: url('Images/Curseur/Aky/cursorrose.png'), pointer; /* Curseur custom */
}

/* Curseur lorsque le slider est focus */
input[type="range"]:focus {
    cursor: url('Images/Curseur/Aky/cursorrose.png'), pointer; /* Curseur custom */
}

/* ============================
   Musique - Player audio
   ============================ */
.audio-player {
    background: rgba(255, 255, 255, 0.134); /* Fond translucide */
    padding: 20px; /* Padding interne */
    border-radius: 10px; /* Bords arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre portée */
    text-align: left; /* Texte aligné à gauche */
    width: 20%; /* Largeur relative */
    position: absolute; /* Position absolue */
    top: 0; /* En haut */
    left: 0; /* À gauche */
    transform: translate(10px, 10px); /* Décalage */
    transition: top 0.3s ease, left 0.3s ease; /* Animation déplacement */
    z-index: 200; /* Au-dessus */
}

/* Image de l'album */
.album-art {
    width: 12vh; /* Largeur relative à la hauteur viewport */
    height: 10vh; /* Hauteur relative */
    border-radius: 10px; /* Bords arrondis */
    background-size: cover; /* Image couvre tout */
    background-position: center; /* Centré */
}

/* Contrôles du player */
.controls {
    display: flex; /* Flexbox */
    justify-content: space-between; /* Espace égal entre boutons */
}

/* Boutons du player */
button {
    background: #ff4dba; /* Fond rose */
    color: white; /* Texte blanc */
    border: none; /* Pas de bordure */
    width: 10vh; /* Taille carrée */
    border-radius: 20px; /* Bords très arrondis */
    cursor: pointer; /* Curseur pointeur */
}

/* Boutons au survol */
button:hover {
    background: #000000; /* Fond noir */
}

/* Slider range complet */
input[type="range"] {
    width: 100%; /* Prend toute la largeur */
}

/* Informations sur la chanson */
.song-info {
    font-size: 1.2rem; /* Taille texte */
    color: #ffffff; /* Texte blanc */
}

/* Timing de la chanson */
.song-timing {
    font-size: 0.8rem; /* Plus petit */
    color: #ffffff; /* Texte blanc */
}

/* Style du slider range */
input[type="range"] {
    -webkit-appearance: none; /* Supprime style natif Chrome */
    appearance: none; /* Supprime style natif */
    width: 100%; /* Largeur pleine */
    height: 8px; /* Hauteur du track */
    background: #0000003f; /* Couleur du track (transparent noir) */
    border-radius: 5px; /* Bords arrondis */
    cursor: pointer; /* Curseur pointeur */
}

/* Personnalisation du track pour Webkit */
input[type="range"]::-webkit-slider-runnable-track {
    height: 8px; /* Hauteur du track */
    border-radius: 5px; /* Bords arrondis */
}