/* ============================================
   BEST LENS - Styles personnalisés
   Complément au Tailwind CSS CDN
   ============================================ */

/* Variables CSS - Palette Best Lens OFFICIELLE */
:root {
    /* Couleurs officielles Best Lens - Alignées avec dashboard.css */
    --color-primary: #26a7e0;        /* Blue Secondary officiel */
    --color-primary-dark: #2290c4;   /* Version plus foncée */
    --color-primary-light: #5AC5E9;  /* Version plus claire */
    --color-accent: #e51c22;         /* Red Accent officiel */
    --color-accent-dark: #cf191e;    /* Version plus foncée */
    --color-accent-light: #EF5350;   /* Version plus claire */
}

/* Alpine.js x-cloak - Masquer les éléments avant l'initialisation */
[x-cloak] {
    display: none !important;
}

/* Smooth scroll pour la navigation */
html {
    scroll-behavior: smooth;
}

/* Bouton WhatsApp flottant */
.whatsapp-float {
    animation: whatsapp-pulse 2s ease-in-out infinite;
}

@keyframes whatsapp-pulse {
    0%, 100% {
        box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.3),
                    0 2px 4px -1px rgba(34, 197, 94, 0.2);
    }
    50% {
        box-shadow: 0 4px 12px -1px rgba(34, 197, 94, 0.5),
                    0 2px 8px -1px rgba(34, 197, 94, 0.3);
    }
}

/* Amélioration du focus pour l'accessibilité */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.dark *:focus-visible {
    outline-color: var(--color-primary-dark);
}

/* Transitions globales pour le mode dark */
body,
header,
footer,
main {
    transition: background-color 300ms ease, color 300ms ease;
}

/* Barre de défilement personnalisée */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Sélection de texte */
::selection {
    background-color: rgba(51, 181, 229, 0.3);
}

.dark ::selection {
    background-color: rgba(90, 197, 233, 0.3);
}