.gallery { display: flex; flex-wrap: wrap; gap: 1rem; } .gallery-thumb { cursor: pointer; transition: transform 0.2s; } .gallery-thumb:hover { transform: scale(1.05); } .header-selection { display: flex; align-items: center; width: 60%; } .gallery-wrapper { display: flex; flex-direction: column; } .gallery-actions { display: flex; justify-content: flex-end; margin: 1rem 0; } .titles { flex: 1; text-align: center; } .image-container { position: relative; display: inline-block; width: 300px; height: 300px; overflow: hidden; /* cache le dépassement */ border-radius: 8px; } .image-container img { width: 100%; height: 100%; object-fit: contain; background-color: #000; transition: opacity 0.2s, border 0.2s, transform 0.2s; } /* Image sélectionnée */ .image-container.selected img { opacity: 0.6; border: 3px solid limegreen; } /* Bouton overlay */ .select-btn { position: absolute; bottom: 8px; right: 8px; background-color: rgba(0, 0, 0, 0.6); color: white; border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 18px; cursor: pointer; transition: background-color 0.2s; } .select-btn:hover { background-color: rgba(0, 128, 0, 0.8); }