/* ============================================
   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 — Réservées au desktop pour éviter
   les parasites GPU de composition (rayures, bandes de couleur) sur mobile.
   Conflit précédent : ce bloc réactivait la promotion GPU que dashboard.css
   désactivait sous 768px. */
@media (min-width: 768px) {
    body,
    header,
    footer,
    main {
        transition: background-color 300ms ease, color 300ms ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    header,
    footer,
    main {
        transition: none !important;
    }
}

/* Fond de page et textes globaux en mode sombre (Fallback Tailwind) */
html.dark body,
.dark body,
html.dark main,
.dark main {
    background-color: #0b1329;
    color: #cbd5e1;
}

/* 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);
}

/* Bannière PWA Slide-in (Positionnement fixe garanti au-dessus du bouton WhatsApp) */
#pwa-slidein-banner {
    bottom: 7rem !important;
}

@media (max-width: 640px) {
    #pwa-slidein-banner {
        bottom: 5.5rem !important;
    }
}

/* ============================================
   Hero Canada (Cabinet Conseil Best Lens)
   Overlay sombre & contraste WCAG AAA
   ============================================ */
.hero-canada {
    background-color: #15264c;
}

.hero-canada-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: rgba(21, 38, 76, 0.50) !important;
}

.hero-canada-card {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Fallback Tailwind gradient stops pour #15264c et #193153 */
.from-\[\#15264c\] {
  --tw-gradient-from: #15264c var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(21, 38, 76, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-\[\#15264c\] {
  --tw-gradient-to: #15264c var(--tw-gradient-to-position);
}
.from-\[\#193153\] {
  --tw-gradient-from: #193153 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(25, 49, 83, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-\[\#193153\] {
  --tw-gradient-to: #193153 var(--tw-gradient-to-position);
}