/*Il faudrait que je détecte la taille affichée de mon site pour que je change en js la taille de certains éléments afin de rendre le site responsive, mais les test m'auraient pris trop de temps, alors pour l'instant ce n'est pas responsive. */

/* -------------------------------Écran de chargement */
#loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: flex; /* Utilisation de Flexbox */
  flex-direction: column; /* Aligner les éléments en colonne */
  justify-content: center; /* Centrage vertical */
  align-items: center; /* Centrage horizontal */
  z-index: 9999; /* toujours au-dessus */
  opacity: 1;
  transition: opacity 0.5s ease;
}

#loading h1 {
  color: pink;
  font-size: 8rem;
}

#loading h2 {
  color: pink;
  font-size: 4rem;
}
#loading.hidden {
  opacity: 0;
  pointer-events: none;
}
/*------------------------------------GLOBAL---------------------------------------------------------*/
*,
*::after,
*::before {
  box-sizing: border-box; /* faire les calculs de manière soustractive */
  margin: 0;
  padding: 0;
}

body {
  background-color: #000000;
  display: grid; /* Le body devient une grille*/
  grid-template-columns: 150px 450px 25vw 25vw 15vw; /* Description des colonnes  */
  grid-template-rows: 20vh 70vh 10vh; /* Description des lignes    */
  grid-template-areas:                        /* Attribution des zones     */
    "logo header header header options"
    "shelf platine main main aside"
    "shelf footer footer footer footer";
  height: 100vh;
  overflow: hidden;
  gap: 0;
  font-family: "pixels";
}

section {
  color: white;
}

/* Définition de l'animation glitch */
@keyframes glitch {
  0% {
    transform: translate(0px, 0px);
    transform: rotate(3deg);
  }
  25% {
    transform: translate(1px, -1px);
    transform: rotate(3deg);
  }
  50% {
    transform: translate(-1px, 1px);
  }
  75% {
    transform: translate(1px, 1px);
    transform: rotate(-3deg);
  }
  100% {
    transform: translate(0px, 0px);
    transform: rotate(-3deg);
  }
}

@keyframes rotateLogo {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* -------------------LOGO------------------- */

.logo {
  grid-area: logo;
  background-color: lightseagreen;
  transition: all ease-in-out 0.4s;
}
.logo img {
  width: 150px;
}
.logo img:hover {
  animation: rotateLogo 0.2s linear infinite;
}
/* -------------------PLATINE------------------- */
.platine {
  grid-area: platine;
  /* background-color: #000000; */
  background: linear-gradient(
    90deg,
    rgba(32, 178, 170, 1) 0%,
    rgba(0, 0, 0, 1) 31%
  );
}

img[src="pin.png"] {
  position: relative;
  z-index: 1000; /* au dessus de tout */
  pointer-events: none; /* pour ne pas empêcher l'accès au vinyl */
}
.boombox {
  width: 235px;
  position: absolute; /* sortir du flux */
  left: 350px;
  top: 350px;
  z-index: 5;
}

/* -------------------HEADER------------------- */

@font-face {
  /* Import de trois polices depuis trois fichiers et attribution de trois noms */
  font-family: "stylish";
  src: url("../Polices/Aston\ Script.ttf") format("truetype");
}

@font-face {
  font-family: "chaotic";
  src: url("../Polices/mybleedingscars_tt.ttf");
}

@font-face {
  font-family: "pixels";
  src: url("../Polices/PixelOperator-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "glitched";
  src: url("../Polices/HelpMe.ttf");
}

header {
  grid-area: header; /* rappel de la zone */
  color: white;
  display: block;
  background: linear-gradient(
    90deg,
    rgba(32, 178, 170, 1) 0%,
    rgba(0, 0, 0, 1) 31%
  );
  text-align: center;
  font-size: 1rem; /* Pour le h2 */
}

h1 {
  font-size: 2.4rem; /* Le plus grand possible, sans dépasser du cadre pour la largeur d'écran minimale donnée */
}

.chaos {
  font-size: 4.2rem;
  font-family: "chaotic", "Arial", sans-serif;
}

.lumiere {
  font-family: "stylish", "Arial", sans-serif;
}
/* -------------------OPTIONS------------------- */
.options {
  grid-area: options;
  max-width: 1100px;
  background-color: #000000;
}
/* -------------------SHELF------------------- */

.container {
  grid-area: shelf;
  background-color: #20b2aa;
  position: relative;
}

.containerSpin {
  width: fit-content;
  max-width: 150px;
}

.vinyl img {
  width: 160px;
  z-index: 20;
  position: relative;
}

.vinyl {
  width: fit-content;
  position: relative;
  display: block;
  transition: all 0.4s ease-in-out;
  z-index: 20;
}

*.range {
  left: -35px;
  padding: 0;
  background-color: 0;
}

.vinyl.range.hovered {
  transform: translate(20px, -50px) rotateY(180deg);
  padding: 0 50px 20px 20px;
}

.vinyl.range:hover {
  transform: translate(20px, -50px) rotateY(180deg);
  padding: 0 50px 20px 20px;
}
.vinyl.clicked {
  display: flex;
}

.containerSpin {
  transform: 0 0;
}

.boombox.spin {
  animation: vibrate 0.2s linear infinite;
}
.pin.spin {
  animation: pinVibrate 0.6s linear infinite;
}

.vinyl:hover {
  scale: 1.02;
}
/* -------------------MUSIQUE USER------------------- */
.userMusique {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  width: 80%; /* Limite la largeur du bloc */
  max-width: 600px;
  margin: 20px auto;
}

.lienUser {
  padding: 3px;
  font-size: 2rem;
  text-decoration: none;
  background-color: #1e1e1e;
  transition: all ease-in-out 0.6s;
}

.lienUser:hover {
  padding: 3px;
  font-size: 2rem;
  text-decoration: none;
  background-color: #20b2aa;
}
.userMusique * {
  color: white;
}

.userMusique h3 {
  font-size: 1.8rem;
  color: #20b2aa;
  margin-bottom: 10px; /* Marge en bas du titre */
}

.userMusique p {
  font-size: 1.2rem;
  margin: 8px 0; /* Espacement entre les paragraphes */
}

.userMusique .artiste,
.userMusique .titre {
  font-size: 1.5rem;
}
.userMusique .avis {
  padding: 2px; /*pour enlever la couleur qui change quand on survole l'interligne*/
  font-size: 1rem;
  max-width: 300px; /* Limite la taille de l'avis */
  text-overflow: ellipsis; /* Ajoute "..." si l'avis dépasse la taille */
  overflow: hidden; /* Cache le texte qui dépasse */
  margin-top: 10px; /* Espace au-dessus de l'avis */
}

/* -------------------MAIN------------------- */
.bigNumber {
  color: white;
  top: 25vh;
  font-size: calc(25rem);
  position: absolute;
  left: 65vw;
  opacity: 0.3;
}
.preBlocMusique {
  border-left: solid white 2px;
  border-right: solid white 2px;
  position: relative;
  z-index: 1;
  grid-area: main; /* Assigne à la zone main */
  background-color: #000000;
  max-width: 1100px;
  min-width: 45vw;
  margin: 0 auto; /* Centre horizontalement si nécessaire */
  padding: 20px; /* Ajoute un espace interne */
}

.blocMusique {
  border-left: solid white 2px;
  border-right: solid white 2px;
  grid-area: main; /* Assigne à la zone main */
  background-color: #000000;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto; /* Centre horizontalement si nécessaire */
  padding: 20px; /* Ajoute un espace interne */
}

h2,
h3,
h4,
h5 {
  color: white;
}

.blocMusique h4 {
  font-size: 1.3rem;
}

.titre {
  font-size: 3rem;
}

.artistePOI:hover {
  color: #20b2aa;
}

.album {
  margin-top: 150px;
}

.blocMusique p:not(.bigNumber) {
  background: rgba(0, 0, 0, 0.5);
}

.blocMusique img:not(.illustration) {
  width: 150px;
}

.illustration {
  width: auto;
  height: 150px;
  position: absolute;
  top: 190px; /* identique à la valeur utilisée pour la boombox */
  left: 621px;
}

.player {
  position: absolute;
  top: 240px;
}

.blocMusique img.six {
  width: 550px;
  position: fixed;
  left: 68%;
  top: 45%;
  z-index: -2;
}
.blocMusique img.five {
  width: 650px;
  position: fixed;
  left: 65%;
  top: 40%;
  z-index: -2;
}
.blocMusique img.four {
  width: 750px;
  position: fixed;
  left: 63%;
  top: 50%;
  z-index: -2;
}
.blocMusique img.three {
  width: 650px;
  position: fixed;
  left: 65%;
  top: 42%;
  z-index: -2;
}
.blocMusique img.two {
  width: 550px;
  position: fixed;
  left: 68%;
  top: 50%;
  z-index: -2;
}
.blocMusique img.one {
  width: 550px;
  position: fixed;
  left: 68%;
  top: 45%;
  z-index: -2;
}
audio {
  display: none;
}

.loadingText {
  margin-top: 47px;
}

a[class*="redirection"]:hover {
  scale: 1.2;
}

a[class*="redirection"] {
  position: fixed;
  transition: all 0.3s ease-in-out;
  top: 19.8vh;
}

a[class*="redirection"] img {
  width: 100px;
}
a.redirection-achat {
  left: 47vw;
}

a.redirection-stream {
  left: 57vw;
}

.sectionBase {
  font-size: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px;
}

.sectionBase ul li {
  color: lightseagreen;
  font-weight: bold; /* Optionnel pour plus de contraste */
}

/* -------------------ASIDE------------------- */
label {
  color: white;
}

input,
textarea {
  border-radius: 5px;
  border: 0px;
}
.aside {
  z-index: 4;
  grid-area: aside;
  background: rgba(0, 0, 0, 0.5);
}
aside {
  display: block;
  transition: visibility 0.3s, opacity 0.3s ease-in-out;
  visibility: hidden;
}

.btnSoumettre {
  margin-left: 25px; /* simuler la symétrie par rapport à la ligne blanche*/
}

.blocMusiqueUser {
  z-index: -3;
  grid-area: aside;
  /*  max-width: 1100px; */
  background-color: #000000;
}

aside p {
  text-align: center;
}

.aside2 {
  font-size: 0.8rem;
}
/* champ valide */
input.valid,
textarea.valid {
  border: 2px solid green;
  background-color: #eaffea;
}

/* champ invalide */
input.invalid,
textarea.invalid {
  border: 2px solid red;
  background-color: #ffeaea;
}

/* message d'erreur */
.error-message {
  color: red;
  font-size: 0.9rem;
  display: none;
}

/* afficher le message si nécessaire */
input.invalid + .error-message,
textarea.invalid + .error-message {
  display: block;
}

.label {
  color: white;
  font-size: 1.2rem;
}

#field1,
#field2 {
  margin-bottom: 15px;
}

form {
  background: rgba(0, 0, 0, 0.5);
  border-top: 3px solid lightseagreen;
  border-bottom: 3px solid lightseagreen; /* Bordures pixélisées */
  padding: 0px 20px 0px 20px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0px 0px 10px lightseagreen; /* Glow pour un effet rétro */
}

form p {
  text-align: center;
  font-size: 1.1rem;
  color: lightseagreen;
}

fieldset {
  border-top: 3px solid lightseagreen;
  padding: 1px 15px 1px 15px;
}

label {
  display: inline;
  color: lightseagreen;
}

input,
textarea {
  width: calc(100% - 20px);
  margin-bottom: 3px;
  padding: 0px 10px 0px 10px;
  border: 2px solid rgb(28, 255, 244);
  border-radius: 0; /* pas d'arrondi pour un style pixélisé */
  background-color: #1e1e1e;
  color: black;
  font-family: "Press Start 2P", cursive;
  font-size: 0.9rem;
}

input[type="checkbox"] {
  width: auto;
  margin-right: 10px;
}

form,
input,
textarea,
button {
  outline: none;
  box-shadow: 0px 0px 5px white;
}

.check {
  font-size: 0.7rem;
}

/* -------------------FOOTER------------------- */
footer {
  flex-wrap: wrap;
  grid-area: footer;
  background-color: lightseagreen;
}

.mentionsLegales li {
  font-size: 0.8rem;
  color: white;
  list-style-type: none;
}

.mentionsLegales h4 {
  font-size: 1.2rem;
  color: #20b2aa;
  margin-top: 25px;
}

.mentionsLegales {
  font-family: Arial, Helvetica, sans-serif;
}

.mentionsLegales a {
  color: grey;
}

.mentionsLegales a:visited {
  color: rgb(75, 111, 113);
}

/* -------------------GLOBAL------------------- */
.cache {
  display: none;
}

.btnAction {
  text-decoration: none;
  padding: 10px;
  font-family: pixels, "Arial", sans-serif;
  font-size: 1em;
  color: #ffffff;
  background-color: #20b2aa;
  border: 4px solid #ffffff;
}

.btnAction:hover {
  padding: 10px;
  background-color: #1b8b85;
}

.pourtourSubmit {
  display: block;
  text-decoration: none;
  margin-top: 25px;
  padding: 5px;
  font-family: pixels, "Arial", sans-serif;
  font-size: 1em;
  color: #ffffff;
  background-color: #20b2aa;
  border: 4px solid #ffffff;
}

.pourtourSubmit:hover {
  padding: 5px;
  background-color: #1b8b85;
}

.btnAction:focus,
.pourtourSubmit:focus {
  border: 4px solid black;
}

.btnAction:hover,
.pourtourSubmit:hover {
  animation: glitch 0.2s linear infinite;
}

@keyframes vibrate {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(1px, -1px);
  }
  50% {
    transform: translate(-1px, 1px);
  }
  75% {
    transform: translate(1px, 1px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes pinVibrate {
  0% {
    transform: rotate(2deg);
  }
  25% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
  75% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.greenCheck,
.redCheck {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s ease-in-out;
  position: fixed; /* Ou absolute */
  bottom: 10px; /* Distance par rapport au bas */
  right: 10px; /* Distance par rapport à la droite */
}

.greenCheck.on,
.redCheck.on {
  visibility: visible;
  opacity: 1;
}