/**
 * Product Gallery - Image display and navigation
 * MAX: 70 lines - Modular gallery component
 */

/* Galerie d'images moderne */
.product-gallery { display: grid; gap: 12px; }
.product-gallery__main-container { 
    position: relative; width: 100%; aspect-ratio: 1/1; 
    background: #f8f8f8; border-radius: 8px; overflow: hidden;
}
.product-gallery__main { 
    width: 100%; height: 100%; object-fit: contain; display: block;
    cursor: zoom-in; transition: transform 0.3s ease;
}
.product-gallery__main:hover { transform: scale(1.05); }

/* Navigation flèches */
.gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.5); color: white; border: none;
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease; z-index: 10;
}
.product-gallery__main-container:hover .gallery-nav { opacity: 1; }
.gallery-nav:hover { background: rgba(0,0,0,0.8); }
.gallery-nav-prev { left: 10px; }
.gallery-nav-next { right: 10px; }

/* Miniatures */
.thumbs { 
    display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); 
    gap: 10px; margin-top: 12px;
}
.product-gallery__thumb {
    width: 100%; aspect-ratio: 1/1; object-fit: cover;
    border: 2px solid #eee; border-radius: 6px; cursor: pointer;
    transition: all 0.3s ease;
}
.product-gallery__thumb:hover { border-color: #D4AF37; transform: scale(1.05); }
.product-gallery__thumb.active { 
    border-color: #D4AF37; 
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2); 
}

/* Indicateurs mobile */
.gallery-indicators {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    display: none; gap: 6px; z-index: 10;
}
.gallery-indicator {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.5); transition: all 0.3s ease;
}
.gallery-indicator.active { background: white; width: 24px; border-radius: 4px; }

@media (max-width: 768px) {
    .gallery-nav { opacity: 1; }
    .gallery-indicators { display: flex; }
    .thumbs { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
}