/**
 * MAC Color Picker & AI Simulator
 * Développé par MAC Dev
 * Styles Front-Office
 */

/* 1. Règle de sécurité globale pour les modales et autocomplétions (ex: Google Maps) */
.pac-container { 
    z-index: 99999 !important; 
}

/* Modale Bootstrap : Forcer le premier plan sur les thèmes complexes */
#macColorSimulatorModal {
    z-index: 99998 !important;
}
.modal-backdrop.show {
    z-index: 99997 !important;
}

/* 2. Grille de couleurs (Nuancier) */
#mac-color-grid-container {
    /* Scrollbar personnalisée pour la liste des teintes */
    scrollbar-width: thin;
    scrollbar-color: #1a1a1a #f1f1f1;
}

#mac-color-grid-container::-webkit-scrollbar {
    width: 6px;
}
#mac-color-grid-container::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;
}
#mac-color-grid-container::-webkit-scrollbar-thumb {
    background: #1a1a1a; 
    border-radius: 4px;
}

.mac-color-swatch {
    transition: all 0.2s ease-in-out;
}
.mac-color-swatch:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}
.mac-color-swatch.selected {
    border-color: #ba933e !important; /* Couleur dorée de ton thème MAC */
}

/* 3. Zone de Drag & Drop (PC) */
.mac-upload-zone {
    border: 2px dashed #ccc !important;
    transition: all 0.3s ease;
}
.mac-upload-zone.border-primary {
    border-color: #1a1a1a !important;
    background-color: #f8f9fa;
}

/* 4. Zone QR Code */
.mac-qr-zone {
    background-color: #ffffff;
    border: 1px solid #e1e1e1 !important;
}
#mac-qrcode-display img {
    margin: 0 auto;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 5. Animations utilitaires */
.spin {
    animation: mac-spin 1.5s linear infinite;
}

@keyframes mac-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 6. Zone de résultat IA */
#mac-ai-result-zone img {
    max-height: 400px;
    object-fit: contain;
    width: 100%;
    border: 4px solid #fff;
}