/* Style pour le bouton */
#toggle-size {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    background-color: rgb(0, 150, 255); /* Couleur de fond bleue */
    color: white; /* Couleur du texte blanche */
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 10px;
}

/* Au survol */
#toggle-size:hover {
    background-color: rgb(0, 120, 204); /* Légère modification de la couleur au survol */
}

/* Au clic */
#toggle-size:active {
    background-color: rgb(0, 100, 170); /* Légère modification de la couleur lors du clic */
}

/* Styles pour le centre */
#center-block {
    background-color: lightblue;
    transition: width 0.5s, height 0.5s;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 10px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

.pc-size {
    width: 90%;
    height: 70%;
}

.mobile-size {
    width: 40%;
    height: 90%;
}

/* Styles pour les vignettes */
.vignette {
    width: 50px;
    height: 50px;
    margin: 5px;
    border-radius: 5px;
    background-color: gray; /* Couleur de base */
    flex-shrink: 0; /* Empêcher le rétrécissement des vignettes */
    overflow: hidden; /* Pour que l'image ne dépasse pas les limites de la vignette */
}

/* Styles pour les images à l'intérieur des vignettes */
.vignette img {
    width: 100%; /* Pour que l'image remplisse entièrement la vignette */
    height: auto; /* Pour conserver le ratio hauteur-largeur de l'image */
    display: block; /* Pour éliminer l'espace vide en bas de l'image */
}

/* Au survol des vignettes */
.vignette:hover {
    transform: scale(1.1); /* Agrandir la vignette */
    z-index: 1; /* Mettre en avant la vignette survolée */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Ajouter une ombre */
}

/* Définition des couleurs pour les vignettes */
.vignette:nth-child(1) {
    background-color: rgb(119, 119, 119);
}

.vignette:nth-child(2) {
    background-color: rgb(255, 255, 255);
}

.vignette:nth-child(3) {
    background-color: green;
}

.vignette:nth-child(4) {
    background-color: yellow;
}

.vignette:nth-child(5) {
    background-color: orange;
}

.vignette:nth-child(6) {
    background-color: purple;
}

.vignette:nth-child(7) {
    background-color: pink;
}

.vignette:nth-child(8) {
    background-color: brown;
}

.vignette:nth-child(9) {
    background-color: rgb(207, 149, 149);
}

.vignette:nth-child(10) {
    background-color: rgb(195, 255, 146);
}

/* Styles pour l'en-tête et le pied de page */
.header, .footer {
    background-color: rgb(113, 219, 42);
    width: 100%;
    height: 10%;
    border-radius: 15px 15px 0 0;
    text-align: center;
    padding-top: 10px;
}

.footer {
    border-radius: 0 0 15px 15px;
}

/* Styles pour le contenu */
.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start; /* Aligner les vignettes en haut */
    padding: 10px;
    box-sizing: border-box;
    height: auto; /* Pour permettre aux vignettes de s'adapter */
    overflow-y: auto; /* Ajouter un défilement vertical si nécessaire */
}

/* Styles pour les vignettes sur les appareils mobiles */
@media screen and (min-width: 0px) and (max-width: 767px) {
    .vignette {
        width: 20%;
        height: auto;
    }
}

/* Styles pour les vignettes sur les appareils plus grands */
@media screen and (min-width: 768px) {
    .vignette {
        width: 10em;
        height: 10em;
    }
}