* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: url("src/Firefly.jpg");
    background-size: 100% auto;
    background-position: center 0px; 
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

main {
    margin-top: 435px; 
    width: 70%;
}

.hero-section {
    display: flex;       
    justify-content: center; 
    gap: 65px; 
    align-items: center; /* Aligne bien les liens verticalement */
}

/* On applique la taille aux liens maintenant, car ce sont eux les enfants directs du flex */
.hero-section a {
    display: block;      
    width: 45%;          
    text-decoration: none;
}

/* L'image doit prendre 100% de la largeur du lien (qui fait 45% du total) */
.hero-section img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease; /* Petit effet sympa au survol */
}

/* Optionnel : zoomer légèrement quand on passe la souris pour montrer que c'est cliquable */
.hero-section img:hover {
    transform: scale(1.05);
}