/* Bloc des options chaînes */
/* Bloc des options chaînes, occupe toute la largeur */
.options-chaines {
    width: 100%;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    border-radius: 5px;
    font-size: 14px;
    flex: 0 0 100%;
}

/* Empêche le bloc d’options d’affecter les éléments flex voisins */
form.cart {
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Rétablit un alignement correct des éléments natifs Woo */
form.cart .quantity,
form.cart .single_add_to_cart_button {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 10px 0;
    width: auto;
}

/* Si un bloc .options-chaines est présent, ajuster l'affichage du formulaire */
.options-chaines + .quantity,
.options-chaines + .quantity + .single_add_to_cart_button,
.options-chaines ~ .quantity,
.options-chaines ~ .single_add_to_cart_button {
    display: block !important;
    width: auto !important;
    margin-bottom: 10px;
}

/* Surcharge le comportement du form.cart uniquement quand options-chaines est là */
.options-chaines ~ form.cart,
form.cart:has(.options-chaines) {
    display: block !important;
}
.options-chaines .ligne-chaine {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.vignette-chaine {
    width: 60px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #ccc;
    transition: transform 0.3s ease;
    cursor: zoom-in;
}
.vignette-chaine:hover {
    transform: scale(2.2) translateX(30%);
    z-index: 10;
    position: relative;
}