/* Style du bouton de connexion */
.login-btn {
    display: flex;
    align-items: center;
    background-color: transparent;
    color: var(--light-text);
    padding: 0.5rem 1.2rem;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 1.5rem;
}



.login-btn i {
    margin-right: 0.5rem;
    font-size: 0.9rem;
}


/* section boutique */
.admin-buttons {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
}

.admin-btn {
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
}

.admin-btn:hover {
    background: #657979;
    transform: scale(1.1);
}

.edit-btn { background-color: #ffc107; }
.delete-btn { background-color: #dc3545; }
.feature-btn { background-color: #28a745; }
.info-btn { background-color: #17a2b8; }

.album-image-container {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 5px;
}

.three-dots-btn {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.7);
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
opacity: 1; /* Toujours visible */
font-size: 16px;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.album {
position: relative;
overflow: visible; /* Assure que les éléments positionnés ne soient pas masqués */
}

.three-dots-btn:hover {
background: rgba(124, 237, 237, 0.9);
transform: scale(1.1);
}

.album-img {
width: 100%;
height: 300px; /* Hauteur fixe pour uniformité */
object-fit: cover; /* Pour maintenir le ratio */
transition: transform 0.3s ease;
}

.album-img {
z-index: 1;
position: relative;
}

.three-dots-btn {
z-index: 5;
}

.album-image-container:hover .album-img {
transform: scale(1.05);
}

.admin-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
display: none;
justify-content: center;
align-items: center;
}

.modal-content {
background: #2c2c3e;
padding: 2rem;
border-radius: 10px;
width: 300px;
position: relative;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.close-modal {
position: absolute;
top: 10px;
right: 15px;
font-size: 1.5rem;
cursor: pointer;
color: #7ceded;
transition: color 0.3s;
}

.close-modal:hover {
color: #ffffff;
}

.modal-actions {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1.5rem;
}

.modal-btn {
padding: 0.8rem;
border-radius: 6px;
text-align: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}

.edit-btn {
background: #4c5757;
color: #1e1e2f;
}

.delete-btn {
background: #dc3545;
}

.modal-btn:hover {
opacity: 0.9;
transform: translateY(-2px);
}

.badge-new {
position: absolute;
top: 15px;
left: 15px;
background: #7ceded;
color: #1e1e2f;
padding: 5px 10px;
border-radius: 4px;
font-weight: bold;
font-size: 12px;
z-index: 5;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.product-description {
color: #a9b6c3;
font-size: 0.9rem;
margin: 8px 0;
line-height: 1.4;
}

.product-price {
font-size: 1.2rem;
font-weight: bold;
color: #7ceded;
}

.btn-shop {

color: #1e1e2f;
padding: 8px 15px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}

.btn-shop:hover {
background: #6f8787;
transform: translateY(-2px);
}