/* ============================================
   PAGE PRODUIT
   ============================================ */

/* Image principale - transition douce */
#mainImage {
    transition: opacity 0.15s ease;
}

/* Miniatures - Bordures au survol/actif désactivées */
.thumbnail-btn {
    transition: border-color 0.2s ease;
}

/* Bordures au survol et actif désactivées */
/*
.thumbnail-btn:hover {
    border-color: #9CA3AF !important;
}

.thumbnail-btn.active,
.thumbnail-btn:focus {
    border-color: #000 !important;
}
*/

/* ============================================
   SÉLECTEUR DE COULEURS
   ============================================ */
.color-btn {
    transition: transform 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.color-btn:hover {
    transform: scale(1.1);
}

.color-btn::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 2px solid transparent;
    border-radius: 2px;
    transition: border-color 0.2s ease;
}

.color-btn.selected::after,
.color-btn:focus::after {
    border-color: #000;
}

/* Couleurs spécifiques (si besoin) */
.color-btn[data-color="noir"] { background-color: #1a1a1a !important; }
.color-btn[data-color="marron"] { background-color: #8B4513 !important; }
.color-btn[data-color="camel"] { background-color: #C19A6B !important; }
.color-btn[data-color="bleu"] { background-color: #1E40AF !important; }
.color-btn[data-color="rouge"] { background-color: #DC2626 !important; }
.color-btn[data-color="blanc"] { 
    background-color: #FFFFFF !important; 
    border-color: #E5E7EB !important; 
}

/* ============================================
   SÉLECTEUR DE QUANTITÉ
   ============================================ */
#quantityInput {
    -moz-appearance: textfield;
}

#quantityInput::-webkit-outer-spin-button,
#quantityInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================
   ACCORDÉONS
   ============================================ */
.accordion-item {
    overflow: hidden;
}

.accordion-content {
    transition: max-height 0.3s ease-out;
}

.accordion-content.open {
    max-height: 500px;
}

/* Style du contenu HTML des accordéons */
.accordion-content .prose ul {
    list-style-type: disc;
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

.accordion-content .prose li {
    margin: 0.25rem 0;
}

.accordion-content .prose p {
    margin: 0.5rem 0;
}

.accordion-content .prose strong {
    font-weight: 600;
}

/* ============================================
   BOUTON AJOUTER AU PANIER
   ============================================ */
#addToCartBtn {
    transition: all 0.3s ease;
}

#addToCartBtn:disabled {
    background-color: #9CA3AF;
    cursor: not-allowed;
}

/* ============================================
   SECTION PRODUITS SIMILAIRES
   ============================================ */
.product-card {
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    /* Stack sur mobile */
    .product-gallery {
        margin-bottom: 2rem;
    }
}

@media (max-width: 640px) {
    /* Miniatures plus petites */
    .thumbnail-btn {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
    
    /* Couleurs plus petites */
    .color-btn {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
}

/* ============================================
   NOTIFICATION TOAST
   ============================================ */
.notification-toast {
    animation: slideInRight 0.3s ease forwards;
    opacity: 0;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================
   DROPDOWN TAILLE CUSTOM
   ============================================ */
#sizeSelector {
    padding-right: 2.5rem;
}

#sizeSelector option:disabled {
    color: #9CA3AF;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb-section {
    background-color: #000;
}

.breadcrumb-section a {
    transition: color 0.2s ease;
}

.breadcrumb-section a:hover {
    color: #9CA3AF;
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}