@font-face {
  font-family: 'MaPolice';
  src: url("font/VG5000-Regular_web.woff2") format('woff2'),
       url("font/VG5000-Regular_web.woff")  format('woff');
  font-weight: normal;
  font-style: normal;
}


body {
  font-family: 'MaPolice', sans-serif;

  margin: 0;
  padding: 0;
  background-color: #000000; /* fond noir */
  color: #ffffff;            /* texte en blanc */
  min-height: 100vh;


  background-image: url("image/fond4.jpeg"); /* mets ici le bon chemin */
  background-size: cover;                  /* couvre toute la page */
  background-repeat: no-repeat;            /* pas de répétition */
  background-position: center center;      /* centrée */
  background-attachment: fixed;            /* 👈 la rend fixe même au scroll */
  background-color: #000;                  /* couleur de fond en secours */
  color: white;

}
.ligne-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
  flex-wrap: wrap;
}


.titre-center {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;    /* empile verticalement h1, h2, bouton */
  align-items: center;       /* centre horizontalement chacun */
  gap: 0.1rem;
}
.titre-deadline-small {
  margin: 0;
  color: red;
  font-size: 30px;
  font-weight: normal;
}

.titre-deadline-grand {
  margin: 5px 0 0;
  font-size: 46px;
  font-weight: bold;
  color: white;
  line-height: 1.2;
}

.bouton-header {
  background-color: white;
  color: black;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}

.bouton-header:hover {
  background-color: #cccccc;
}

.titre-au-dessus,
.titre-apres {
  text-align: center;
  font-size: 32px;
  margin: 60px auto 20px;
  color: white;
}

.double-texte {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 40px 5vw;
  flex-wrap: wrap;
}

.bloc-gauche,
.bloc-droit {
  width: 45%;            /* chaque bloc prend presque la moitié */
  text-align:  left;
  color: white;
  font-size: 25px;
  line-height: 1.5;
}


.spectrogram-player p {
  margin: 10px auto;
max-width: 800px;
  text-align: left;
  font-size: 25px;
  line-height: 1.6;
  color: white;
  padding: 0 10px;
  box-sizing: border-box;
}
p {
  margin: 10px auto;
max-width: 800px;
  text-align: left;
  font-size: 25px;
  line-height: 1.6;
  color: white;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Sur mobile, on empile */
@media (max-width: 768px) {
  .bloc-gauche,
  .bloc-droit {
    width: 100%;
    margin-bottom: 20px;
  }
}
.images-container {
  display: flex;
  flex-wrap: wrap;
  display: grid;
   grid-template-columns: repeat(2, 1fr);
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
}

/* .images-container-centre {
  display: flex;
  flex-wrap: wrap;

  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 40px;
} */
.draggable {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  border: 2px solid white;     /* 👈 bordure blanche */
box-sizing: border-box;      /* évite que la bordure casse le layout */
border-radius: 8px;
}

.spectrogram-player {
  width: fit-content;
  margin: 0 auto;
  display: block;
}

.sp-viewer {
  position: relative;
  /* background-repeat: no-repeat; */
}

.sp-axis {
  position: absolute;
}

.sp-timeBar {
  width: 1px;
  height: 100%;
  position: absolute;
  left: 50%;
  background-color: red;
}


.apply-button {
  /* position: fixed;
  top: 20px;
  right: 20px; */
  background-color: #3AFF00;
  color: black;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  font-size: 30px;
  border-radius: 5px;
  z-index: 9999;
  transition: background-color 0.2s ease;
}

.apply-button:hover {
  background-color: #2ecc71;
  color: #fff;
}


.download-button {
  margin-top: 1.5rem !important;

  margin: 1.5rem auto;  /* 1.5rem en haut/bas, centré horiz. */
  background-color: blue;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  font-size: 30px;
  border-radius: 5px;
  z-index: 9999;
  transition: background-color 0.2s ease;
}

.download-button:hover {
  background-color: #00a3cc;
  color: #fff;
}

.toggle-buttons {
    display: flex;
    justify-content: center;
    gap: 30px !important;
    margin: 40px auto;
  }

  .toggle-buttons button {
    font-family: 'MaPolice', sans-serif;  /* Police correcte */

    padding: 10px 10px !important;
    font-size: 24px !important;
    border: none;
    border-radius: 8px !important;
    background-color: white !important;
    color: black !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }


  /* 3. Style du bouton actif */
.toggle-buttons button.active {
  background-color: red !important;
  color: white
}
.toggle-buttons button:hover {
  background-color: blue !important;
  color: white !important

}

@media (max-width: 1068px) {
  .draggable {
    width: 100vw;       /* prend toute la largeur de l'écran */
    max-width: 100vw;   /* ne dépasse jamais */
    height: auto;       /* garde le ratio */
    display: block;
  }
}

/* Sur mobile : 1 seule colonne */
@media (max-width: 1068px) {
  .images-container {
    grid-template-columns: 1fr;
  }
}