.container { text-align: center; font-family: Arial, sans-serif; max-width: 500px; margin: 0 auto; padding: 10px; }
.controls { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
button { border: none; padding: 15px; font-size: 1.1em; border-radius: 10px; font-weight: bold; cursor: pointer; transition: transform 0.1s; }
button:active { transform: scale(0.95); }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; padding: 10px 0; }

.discovery-card {
    position: relative;
    background: #f9f9f9;
    border: 3px solid #ffcc00;
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.discovery-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.card-info { padding: 8px; color: #333; }
.card-info strong { display: block; font-size: 1.1em; color: #007bff; text-transform: capitalize; }
.card-info span { font-size: 0.85em; display: block; margin-top: 2px; }

/* STYLE DU BOUTON SUPPRIMER */
.delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.delete-btn:active { transform: scale(0.9); background: red; }