/* Container pour le composant global */
.image-card-with-actions {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Augmenter le z-index quand le menu est ouvert */
.image-card-with-actions:has(.action-menu-dropdown.active) {
    z-index: 200;
}

/* Container pour les boutons d'action */
.image-card-with-actions .card-actions {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 100;
    pointer-events: none;
}

/* Container pour les composants d'action (comme le menu) */
.image-card-with-actions .action-component {
    pointer-events: auto;
    z-index: 150;
    position: relative;
}

.image-card-with-actions .action-component.left {
    margin-right: auto;
    order: 1;
}

.image-card-with-actions .action-component.right {
    margin-left: auto;
    order: 2;
}

.image-card-with-actions .action-component.center {
    margin: 0 auto;
    order: 1;
}

/* Si un seul élément à droite, s'assurer qu'il est bien à droite */
.image-card-with-actions .card-actions>.action-component.right:only-child {
    margin-left: auto;
}

/* Styles de base pour les boutons d'action */
.image-card-with-actions .action-button {
    position: relative;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-card-with-actions .action-button:hover {
    background: rgba(59, 130, 246, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    color: white;
    text-decoration: none;
}

.image-card-with-actions .action-button i {
    font-size: 16px;
    transition: all 0.3s ease;
}

.image-card-with-actions .action-button:hover i {
    color: white;
}

/* Positionnement des boutons */
.image-card-with-actions .action-button.left,
.image-card-with-actions .action-button-wrapper.left {
    margin-right: auto;
    order: 1;
}

.image-card-with-actions .action-button.right,
.image-card-with-actions .action-button-wrapper.right {
    margin-left: auto;
    order: 2;
}

.image-card-with-actions .action-button.center,
.image-card-with-actions .action-button-wrapper.center {
    margin: 0 auto;
    order: 1;
}

/* Wrapper pour Stimulus controllers */
.image-card-with-actions .action-button-wrapper {
    pointer-events: auto;
}