:root {
    --black: #000000;
    --grey: #808080;
    --white: #ffffff;
    --pink: #ea1956;
}

section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 45px; /* espace entre les photos */
    margin-bottom: 5em;
}

section h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
    
}

section img {
    max-width: 170px;
    border: 5px solid var(--pink);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.3s ease;
}

/* Rotations différentes selon la section */
#vrac div:nth-child(2) img { transform: rotate(-4deg); }
#vrac div:nth-child(3) img { transform: rotate(3deg); }
#vrac div:nth-child(4) img { transform: rotate(-2deg); }
#vrac div:nth-child(5) img { transform: rotate(5deg); }

#choco div:nth-child(2) img { transform: rotate(2deg); }
#choco div:nth-child(3) img { transform: rotate(-5deg); }
#choco div:nth-child(4) img { transform: rotate(4deg); }
#choco div:nth-child(5) img { transform: rotate(-1deg); }
#choco div:nth-child(6) img { transform: rotate(8deg); }
#choco div:nth-child(7) img { transform: rotate(-5deg); }

#ludiq div:nth-child(2) img { transform: rotate(5deg); }
#ludiq div:nth-child(3) img { transform: rotate(-3deg); }
#ludiq div:nth-child(4) img { transform: rotate(1deg); }
#ludiq div:nth-child(5) img { transform: rotate(-4deg); }

#import div:nth-child(2) img { transform: rotate(-1deg); }
#import div:nth-child(3) img { transform: rotate(4deg); }
#import div:nth-child(4) img { transform: rotate(-5deg); }
#import div:nth-child(5) img { transform: rotate(2deg); }

#sucettes div:nth-child(2) img { transform: rotate(3deg); }
#sucettes div:nth-child(3) img { transform: rotate(-2deg); }
#sucettes div:nth-child(4) img { transform: rotate(5deg); }
#sucettes div:nth-child(5) img { transform: rotate(-4deg); }

#potions div:nth-child(2) img { transform: rotate(-5deg); }
#potions div:nth-child(3) img { transform: rotate(2deg); }
#potions div:nth-child(4) img { transform: rotate(-1deg); }
#potions div:nth-child(5) img { transform: rotate(4deg); }

#compo div:nth-child(2) img { transform: rotate(1deg); }
#compo div:nth-child(3) img { transform: rotate(-4deg); }
#compo div:nth-child(4) img { transform: rotate(3deg); }
#compo div:nth-child(5) img { transform: rotate(-2deg); }
#compo div:nth-child(6) img { transform: rotate(-3deg); }
#compo div:nth-child(7) img { transform: rotate(4deg); }
#compo div:nth-child(8) img { transform: rotate(-2deg); }
#compo div:nth-child(9) img { transform: rotate(5deg); }

section img:hover {
    transform: rotate(0deg) scale(1.08);
}

hr{
    background: linear-gradient(90deg, white, black, var(--pink), black, white);
    margin-left: 2em;
    margin-right: 2em;
    border: none;
    height: 5px;
    border-radius: 10px;
}

.bonbons-roll a {
    margin: 0.3em;
    display: inline-block;

}