/* ====================================================================
   STYLE.CSS — Page d'accueil uniquement
   Le menu (#conteneur, .menu, #V-XXX, #Titre, .ecran-smart/.ecran-pc)
   est dans menu.css, inclus séparément.
   ==================================================================== */

/* ====================================================================
   VERSION PC (écrans larges, à partir de 1001px)
   ==================================================================== */
@media(min-width: 1001px) and (max-width: 10000px){

  /* Fond d'écran global */
  html{
    background-color: black;
    background: url("../images/espace-noir-large.webp") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  /* Largeur générale du contenu, centré */
  body{
    width: 60%;
    margin: auto;
  }

  /* Style par défaut des liens */
  a{
    color: lightblue;
    text-decoration: none;
  }

  /* Image de fond décorative (ballon) sur la page d'accueil */
  #img-fond{
    height: 700px;
    background-image: url("../images/ballon.png");
    background-position: center;
    background-repeat: no-repeat;
    margin: 100px auto;
  }

  /* Alignement à droite (ex: sélecteur de langue) */
  .droite{
    text-align: right;
  }

  /* Zone d'accueil (au-dessus du slider) */
  #page_accueil{
    display: flex;
    height: 200px;
    padding-top: 300px;
  }

  /* Espace vide réservé en haut de la page d'accueil */
  #boite-vide-accueil{
    height: 300px;
    margin: auto;
  }

  /* Boîte contenant la news/album mis en avant sur l'accueil */
  #boite-news-index{
    width: 300px;
    text-align: center;
    margin: 10px auto;
    display: flex;
    border-radius: 20px;
    padding: 10px;
    background-color: rgb(0 0 0 / 0.55);
  }

  /* Image dans la boîte news/album */
  #boite-news-index img{
    height: 100px;
    border-radius: 5px;
  }

  /* Marge autour du bloc "nouvel album" */
  #newalbum{
    margin: 10px;
  }
  #newalbum a{
    text-decoration: none;
    color: white;
  }

  /* Champs de formulaire arrondis */
  input {
    border-radius: 20px;
  }

  /* Logos réseaux sociaux fixés en bas de l'écran, centrés horizontalement */
  .logos-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
/* Fin des éléments spécifiques aux écrans de type Pc (avec souris) */


/* ====================================================================
   AJUSTEMENT POUR PC DE TAILLE MOYENNE (1001px à 1500px)
   ==================================================================== */
@media(min-width: 1001px) and (max-width: 1500px){

  /* Réduction de l'espace vide en haut sur écrans PC moins larges */
  #boite-vide-accueil{
    height: 100px;
    margin: auto;
  }

  /* Logos réseaux sociaux fixés en bas, centrés horizontalement */
  .logos-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}


/* ====================================================================
   VERSION MOBILE (écrans étroits, jusqu'à 1000px)
   ==================================================================== */
@media(max-width: 1000px){

  /* Fond d'écran global */
  html{
    background-color: black;
    background: url("../images/espace-noir-large.webp") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  /* Largeur générale du contenu, pleine largeur */
  body{
    width: 100%;
    margin: auto;
  }

  /* Style par défaut des liens */
  a{
    color: lightblue;
    text-decoration: none;
  }

  /* Alignement à droite (ex: sélecteur de langue), largeur 97% */
  .droite{
    text-align: right;
    width: 97%;
  }

  /* Zone d'accueil (au-dessus du slider) */
  #page_accueil{
    display: flex;
    height: 200px;
    padding-top: 200px;
  }

  /* Espace vide réservé en haut de la page d'accueil */
  #boite-vide-accueil{
    height: 100px;
    margin: auto;
  }

  /* Boîte contenant la news/album mis en avant sur l'accueil */
  #boite-news-index{
    width: 80%;
    text-align: center;
    margin: 10px auto;
    display: flex;
    border-radius: 20px;
    padding: 10px;
    background-color: rgb(0 0 0 / 0.55);
  }

  /* Image dans la boîte news/album */
  #boite-news-index img{
    height: 100px;
    border-radius: 5px;
  }

  /* Marge autour du bloc "nouvel album" */
  #newalbum{
    margin: 10px;
  }
  #newalbum a{
    text-decoration: none;
    color: white;
  }

  /* Logos réseaux sociaux fixés en bas de l'écran, centrés horizontalement */
  .logos-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
/* Fin des éléments spécifiques aux écrans de type smartphone (verticaux) */