body {
    padding: 20px;
    margin: 30px;
    background : url(background.jpg); 

}

h1 {
    text-align: center;
    color: rgb(103, 127, 244);
    font-variant: small-caps; 
    font-size: 5em;
}

.item img, .consigne img, .Son-container img {
    margin : 15px; 
    padding: 5px;
    float : left; 
    display: flex;
    justify-content: space-between; 
    cursor :grab; 
}

.item-son {
    border: solid rgb(0, 0, 0) 5px;
    border-style: double;
    display: grid;
    grid-template-columns: repeat(10, auto); /* nombre d’images par ligne */
    grid-auto-rows: auto;
    gap: 10px; /* espace entre les images */
}

.Son-container {
  display: flex;        /* Active Flexbox */
  flex-wrap: wrap;      /* Permet aux éléments de passer à la ligne */
  justify-content: space-between; /* Espace les blocs sur l'axe principal */
  align-items: center;  /* Centre verticalement les éléments */
  width: 100%;          /* Pour remplir l'espace */
  padding-top: 30px;
}

.Son.ou {
    border: solid rgb(169, 182, 245) 7px;
    border-style: groove;
    border-radius: 20px; 
    width: 48%; 
    margin-bottom: 40px;
    width: 350px; 
    height: 350px; 
}

.Son.oi {
    border: solid rgb(169, 182, 245) 7px;
    border-style: groove;
    border-radius: 20px; 
    width: 48%; 
    margin-bottom: 4dvh;
    width: 350px; 
    height: 350px; 
}

.Son.ch {
    border: solid rgb(169, 182, 245) 7px;
    border-style: groove;
    border-radius: 20px; 
    width: 48%; 
    margin-bottom: 40px; 
    width: 350px; 
    height: 350px;
}

.Son.on {
    border: solid rgb(169, 182, 245) 7px;
    border-style: groove;
    border-radius: 20px; 
    width: 48%; 
    margin-bottom: 40px; 
    width: 350px; 
    height: 350px;
}

p {
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.spoken-text{
    display: none; /* Caché par défaut */
    position: absolute;
}

.item-son:hover .spoken-text{
    display: block;
}

#message-fin {
    font-variant: small-caps;
    text-align: center;
}