/* ============================================
   GRADIENT SYSTEM - BREIZHIT V3.0
   Système de dégradés violet moderne
   Compatible Light/Dark Mode
   ============================================ */

/* ============================================
   SECTION 1: CSS VARIABLES - GRADIENTS
   ============================================ */

:root {
    /* Dégradés principaux - Light Mode */
    --gradient-primary: linear-gradient(135deg, #6C4DFF 0%, #9C7CFF 100%);
    --gradient-primary-hover: linear-gradient(135deg, #5a3dd9 0%, #8a6fe6 100%);
    --gradient-primary-active: linear-gradient(135deg, #4a2db9 0%, #7a5fd6 100%);
    
    /* Dégradés texte */
    --gradient-text: linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%);
    --gradient-text-alt: linear-gradient(90deg, #6C4DFF 0%, #9C7CFF 100%);
    
    /* Dégradés background subtils */
    --gradient-bg-subtle: linear-gradient(180deg, #f8f7ff 0%, #ffffff 100%);
    --gradient-bg-card: linear-gradient(145deg, #faf9ff 0%, #f5f3ff 100%);
    --gradient-bg-section: linear-gradient(180deg, #fdfcff 0%, #f9f8ff 100%);
    
    /* Dégradés overlay */
    --gradient-overlay: linear-gradient(135deg, rgba(108, 77, 255, 0.12) 0%, rgba(156, 124, 255, 0.12) 100%);
    --gradient-overlay-strong: linear-gradient(135deg, rgba(108, 77, 255, 0.25) 0%, rgba(156, 124, 255, 0.25) 100%);
    
    /* Dégradés decoratifs */
    --gradient-blob: radial-gradient(circle, #6C4DFF 0%, #9C7CFF 100%);
    --gradient-blob-soft: radial-gradient(circle, rgba(108, 77, 255, 0.3) 0%, rgba(156, 124, 255, 0.1) 100%);
    
    /* Dégradés bordure */
    --gradient-border: linear-gradient(90deg, #6C4DFF 0%, #9C7CFF 100%);
    --gradient-border-reverse: linear-gradient(90deg, #9C7CFF 0%, #6C4DFF 100%);
    --gradient-border-animated: linear-gradient(270deg, #6C4DFF 0%, #9C7CFF 50%, #6C4DFF 100%);
    
    /* Dégradés badge/pill */
    --gradient-badge: linear-gradient(135deg, rgba(108, 77, 255, 0.08) 0%, rgba(156, 124, 255, 0.08) 100%);
    --gradient-pill: linear-gradient(90deg, #f8f7ff 0%, #faf9ff 100%);
    --gradient-tag: linear-gradient(120deg, rgba(108, 77, 255, 0.06) 0%, rgba(156, 124, 255, 0.06) 100%);
    
    /* Dégradés boutons secondaires */
    --gradient-secondary: linear-gradient(135deg, #f9f8ff 0%, #fdfcff 100%);
    --gradient-secondary-hover: linear-gradient(135deg, #f5f3ff 0%, #faf9ff 100%);
}

/* ============================================
   SECTION 2: DARK MODE - GRADIENTS
   ============================================ */

[data-theme="dark"] {
    /* Dégradés principaux - Dark Mode (plus lumineux) */
    --gradient-primary: linear-gradient(135deg, #9F7BFF 0%, #B393FF 100%);
    --gradient-primary-hover: linear-gradient(135deg, #B393FF 0%, #C9ADFF 100%);
    --gradient-primary-active: linear-gradient(135deg, #8a6fe6 0%, #9F7BFF 100%);
    
    /* Dégradés texte (plus clairs pour contraste) */
    --gradient-text: linear-gradient(90deg, #B393FF 0%, #C9ADFF 100%);
    --gradient-text-alt: linear-gradient(90deg, #9F7BFF 0%, #B393FF 100%);
    
    /* Dégradés background subtils (violet foncé) */
    --gradient-bg-subtle: linear-gradient(180deg, #2d1a4d 0%, #241640 100%);
    --gradient-bg-card: linear-gradient(145deg, #241640 0%, #2d1a4d 100%);
    --gradient-bg-section: linear-gradient(180deg, #1a0f2e 0%, #241640 100%);
    
    /* Dégradés overlay */
    --gradient-overlay: linear-gradient(135deg, rgba(159, 123, 255, 0.12) 0%, rgba(179, 147, 255, 0.12) 100%);
    --gradient-overlay-strong: linear-gradient(135deg, rgba(159, 123, 255, 0.25) 0%, rgba(179, 147, 255, 0.25) 100%);
    
    /* Dégradés decoratifs */
    --gradient-blob: radial-gradient(circle, #9F7BFF 0%, #B393FF 100%);
    --gradient-blob-soft: radial-gradient(circle, rgba(159, 123, 255, 0.3) 0%, rgba(179, 147, 255, 0.1) 100%);
    
    /* Dégradés bordure */
    --gradient-border: linear-gradient(90deg, #9F7BFF 0%, #B393FF 100%);
    --gradient-border-reverse: linear-gradient(90deg, #B393FF 0%, #9F7BFF 100%);
    --gradient-border-animated: linear-gradient(270deg, #9F7BFF 0%, #B393FF 50%, #9F7BFF 100%);
    
    /* Dégradés badge/pill */
    --gradient-badge: linear-gradient(135deg, rgba(159, 123, 255, 0.12) 0%, rgba(179, 147, 255, 0.12) 100%);
    --gradient-pill: linear-gradient(90deg, #2d1a4d 0%, #241640 100%);
    --gradient-tag: linear-gradient(120deg, rgba(159, 123, 255, 0.10) 0%, rgba(179, 147, 255, 0.10) 100%);
    
    /* Dégradés boutons secondaires */
    --gradient-secondary: linear-gradient(135deg, #241640 0%, #2d1a4d 100%);
    --gradient-secondary-hover: linear-gradient(135deg, #2d1a4d 0%, #3d2866 100%);
}

/* ============================================
   SECTION 3: BOUTONS CTA - GRADIENT
   ============================================ */

.cta-button {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(108, 77, 255, 0.4), 0 4px 10px rgba(108, 77, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary-hover);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.cta-button:hover {
    box-shadow: 0 12px 30px rgba(108, 77, 255, 0.6), 0 6px 15px rgba(108, 77, 255, 0.3);
    transform: translateY(-3px) scale(1.02);
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3);
}

.cta-button:hover::before {
    opacity: 1;
}

.cta-button:active {
    background: var(--gradient-primary-active) !important;
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 12px rgba(108, 77, 255, 0.4);
}

/* Dark mode adjustments */
[data-theme="dark"] .cta-button {
    box-shadow: 0 4px 14px rgba(159, 123, 255, 0.4);
}

[data-theme="dark"] .cta-button:hover {
    box-shadow: 0 6px 20px rgba(159, 123, 255, 0.6);
}

/* ============================================
   SECTION 4: BOUTONS SECONDAIRES - GRADIENT
   ============================================ */

.cta-secondary {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    color: #ffffff !important;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cta-secondary:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    color: #ffffff !important;
}

.cta-secondary:hover::before {
    opacity: 1;
}

.cta-secondary:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Dark mode */
[data-theme="dark"] .cta-secondary {
    color: #ffffff;
    border-color: #3d3d3d;
}

[data-theme="dark"] .cta-secondary:hover {
    color: #B393FF;
}

/* ============================================
   SECTION 5: TEXTES GRADIENT
   ============================================ */

/* Hero accent - "solutions digitales" */
.hero-accent {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
    transition: all 0.3s ease;
}

/* Logo "it" part */
.brand-it {
    background: var(--gradient-text-alt);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
}

/* Classe utilitaire pour textes gradient */
.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Titres sections avec gradient */
.section-title-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}

/* ============================================
   SECTION 6: NORMALIZED NAVIGATION
   - Consistent alignment, spacing, and active states
   - Integrated Contact button styling
   - Mobile menu responsive behavior
   - Dark mode support
   ============================================ */

/* Base navigation link styles */
.nav-link {
    position: relative;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s ease, font-weight 0.2s ease;
    display: inline-block;
    box-shadow: none !important;
    background: transparent !important;
}

/* ✅ CORRECTION AUDIT: Services button - Utilisation de Tailwind uniquement */
/* Les couleurs sont gérées par les classes Tailwind dans le HTML */
/* text-gray-700 dark:text-gray-200 hover:text-primary dark:hover:text-primary-light */
#services-toggle {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    /* ❌ SUPPRIMÉ: color en dur qui écrasait Tailwind */
    font-weight: 500;
    font-size: 0.95rem;
}

/* ❌ SUPPRIMÉ: Overrides de couleur - on utilise Tailwind dark: */
/* #services-toggle:hover { color: #7c3aed; } */
/* [data-theme="dark"] #services-toggle { color: #e0e0e0; } */
/* [data-theme="dark"] #services-toggle:hover { color: #9C7CFF; } */

/* Retirer l'encadrement au focus/clic sur tous les liens */
.nav-link:focus,
.nav-link:active,
#services-toggle:focus,
#services-toggle:active,
button:focus,
button:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.service-menu-container {
    box-shadow: none !important;
}

/* Active state underline - visible and clear */
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--gradient-border);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.nav-link:hover::after {
    transform: scaleX(1);
}

/* Active state styling */
.nav-link.active,
.nav-link[aria-current="page"] {
    color: #6C4DFF !important;
    font-weight: 600;
}

.nav-link.active::after,
.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
    height: 3px; /* Thicker for active state */
}

/* Dark mode active state */
[data-theme="dark"] .nav-link.active,
[data-theme="dark"] .nav-link[aria-current="page"] {
    color: #9C7CFF !important;
}

/* Dark mode nav link colors */
[data-theme="dark"] .nav-link {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .nav-link:hover {
    color: #B393FF;
}

/* Mobile menu specific styles */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

#mobile-menu.active {
    max-height: 500px;
}

/* Mobile menu links */
#mobile-menu a {
    font-weight: 500;
    transition: all 0.2s ease;
}

#mobile-menu a:hover {
    transform: translateX(4px);
}

/* Dark mode mobile menu */
[data-theme="dark"] #mobile-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] #mobile-menu a {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] #mobile-menu a:hover {
    color: #B393FF;
    background-color: rgba(159, 123, 255, 0.1);
}

/* Separator in nav */
.nav-separator {
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .nav-separator {
    background: rgba(255, 255, 255, 0.2);
}

/* Logo breathing space and alignment */
#header .brand-title {
    line-height: 1.2;
    vertical-align: middle;
}

/* Contact button in nav - ensure consistent sizing */
#header .btn-primary {
    white-space: nowrap;
    line-height: 1.5;
}

/* Mobile menu button styling */
#mobile-menu-btn {
    transition: transform 0.2s ease;
}

#mobile-menu-btn:hover {
    transform: scale(1.05);
}

#mobile-menu-btn.active i.fa-bars {
    display: none;
}

#mobile-menu-btn.active::before {
    content: '\f00d'; /* FontAwesome times icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* Ensure proper vertical alignment for all nav items */
#header nav > div {
    align-items: center;
}

/* Focus states - DISABLED pour les liens de navigation pour éviter l'encadrement */
.nav-link:focus,
.nav-link:focus-visible,
#services-toggle:focus,
#services-toggle:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Focus states conservés uniquement pour mobile menu et dark mode toggle (accessibilité) */
#mobile-menu a:focus-visible,
#mobile-menu-btn:focus-visible,
#dark-mode-toggle:focus-visible {
    outline: 2px solid #6C4DFF;
    outline-offset: 2px;
    border-radius: 4px;
}

[data-theme="dark"] #mobile-menu a:focus-visible,
[data-theme="dark"] #mobile-menu-btn:focus-visible,
[data-theme="dark"] #dark-mode-toggle:focus-visible {
    outline-color: #9C7CFF;
}

/* Responsive adjustments - Menu hamburger actif dès <1280px */
@media (max-width: 1279px) {
    .nav-link {
        font-size: 1rem;
        padding: 0.75rem 0;
    }
    
    .nav-link::after {
        display: none; /* Hide underline in mobile menu */
    }
    
    /* Mobile menu styling */
    #mobile-menu {
        margin-top: 1rem;
    }
}

/* ============================================
   SECTION 6B: TITRES H2/H3 - DARK MODE GRADIENT
   ============================================ */

/* En dark mode, les titres principaux deviennent gradient violet */
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] .section-title {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Exception pour les titres qui doivent rester neutres */
[data-theme="dark"] h2.no-gradient,
[data-theme="dark"] h3.no-gradient,
[data-theme="dark"] .hero-neutral {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
    color: var(--text-primary);
}

/* ============================================
   SECTION 7: BADGES & PILLS - GRADIENT
   ============================================ */

/* Badge "Agence Digitale Bretonne" */
.bg-primary\/10 {
    background: var(--gradient-badge) !important;
}

/* Pills génériques */
.pill,
.badge-pill {
    background: var(--gradient-pill);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

/* Tags */
.tag {
    background: var(--gradient-tag);
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

/* ============================================
   SECTION 8: BACKGROUNDS DÉCORATIFS
   ============================================ */

/* Hero decorative blobs - remplacer les couleurs unies */
.hero-has-bg .absolute {
    background: var(--gradient-blob-soft) !important;
}

/* Blobs décoratifs spécifiques */
.bg-primary\/20,
.bg-violet-500\/20 {
    background: var(--gradient-blob-soft) !important;
}

/* Sections avec background subtil */
.section-gradient-bg {
    background: var(--gradient-bg-section);
}

/* Cards avec gradient hover */
.card:hover,
.rounded-lg:hover {
    background: var(--gradient-bg-card);
    transition: background 0.3s ease;
}

/* ============================================
   SECTION 9: BORDURES GRADIENT
   ============================================ */

/* Bordure gradient sur focus (inputs, textarea) */
input:focus,
textarea:focus,
select:focus {
    border: 2px solid transparent;
    background-image: 
        linear-gradient(var(--bg-secondary), var(--bg-secondary)),
        var(--gradient-border);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Bordure hover sur cartes */
.card-gradient-border {
    position: relative;
    border: 2px solid transparent;
}

.card-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--gradient-border);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-gradient-border:hover::before {
    opacity: 1;
}

/* ============================================
   SECTION 10: LIENS & NAVIGATION
   ============================================ */

/* Underline gradient sur hover */
.link-gradient-underline {
    position: relative;
    text-decoration: none;
}

.link-gradient-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--gradient-border);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.link-gradient-underline:hover::after {
    transform: scaleX(1);
}

/* ============================================
   SECTION 11: BOUTON SCROLL-TO-TOP
   ============================================ */

#scroll-to-top {
    background: var(--gradient-primary) !important;
    box-shadow: 0 4px 12px rgba(108, 77, 255, 0.4);
    transition: all 0.3s ease;
}

#scroll-to-top:hover {
    background: var(--gradient-primary-hover) !important;
    box-shadow: 0 6px 16px rgba(108, 77, 255, 0.6);
    transform: translateY(-3px);
}

[data-theme="dark"] #scroll-to-top {
    box-shadow: 0 4px 12px rgba(159, 123, 255, 0.5);
}

[data-theme="dark"] #scroll-to-top:hover {
    box-shadow: 0 6px 16px rgba(159, 123, 255, 0.7);
}

/* ============================================
   SECTION 12: OVERLAYS & EFFECTS
   ============================================ */

/* Overlay gradient */
.overlay-gradient {
    background: var(--gradient-overlay);
}

.overlay-gradient-strong {
    background: var(--gradient-overlay-strong);
}

/* Effet de glow gradient */
.glow-gradient {
    box-shadow: 0 0 40px rgba(108, 77, 255, 0.3);
}

[data-theme="dark"] .glow-gradient {
    box-shadow: 0 0 40px rgba(159, 123, 255, 0.4);
}

/* ============================================
   SECTION 13: ANIMATIONS GRADIENT
   ============================================ */

/* Animation gradient fluide */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-animated {
    background: linear-gradient(270deg, #6C4DFF, #9C7CFF, #6C4DFF);
    background-size: 200% 200%;
    animation: gradient-shift 6s ease infinite;
}

[data-theme="dark"] .gradient-animated {
    background: linear-gradient(270deg, #9F7BFF, #B393FF, #9F7BFF);
    background-size: 200% 200%;
}

/* ============================================
   SECTION 14: UTILITIES
   ============================================ */

/* Classe pour forcer le gradient sur un élément */
.force-gradient-bg {
    background: var(--gradient-primary) !important;
}

.force-gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Désactiver le gradient */
.no-gradient {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: inherit !important;
}

/* ============================================
   SECTION 15: RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    /* Réduire l'intensité des ombres sur mobile */
    .cta-button {
        box-shadow: 0 3px 10px rgba(108, 77, 255, 0.25);
    }
    
    .cta-button:hover {
        box-shadow: 0 4px 14px rgba(108, 77, 255, 0.4);
    }
    
    /* Simplifier les gradients animés sur mobile (performance) */
    .gradient-animated {
        animation: none;
        background: var(--gradient-primary);
    }
}

/* ============================================
   FIN DU SYSTÈME DE DÉGRADÉS
   ============================================ */

/* ============================================
   SECTION 16: SERVICE PAGES OVERRIDES
   - Colors for icons/titles/phrases per theme (Service pages only)
   - Dark mode: contact cards backgrounds similar to form; RDV button violet
   ============================================ */

/* Titles and lead phrase: light violet in both modes */
.page-service .contact-card h4,
.page-service .service-cta-title,
.page-service .service-cta-lead {
    color: #9C7CFF !important;
}

/* Keep general contact texts readable */
.page-service .service-contact-text {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Icon container + icon colors */
/* Light mode: icon container white; icon solid violet */
:root .page-service .contact-card .contact-icon {
    background-color: #ffffff !important;
}
:root .page-service .contact-card .contact-icon i {
    color: #6C4DFF !important;
}

/* Dark mode: card background harmonized, icon container violet; icon dark-violet */
[data-theme="dark"] .page-service .contact-card {
    background-color: var(--bg-secondary) !important;
    color: #ffffff !important;
    border: 1px solid var(--border-color);
    backdrop-filter: none !important;
}
[data-theme="dark"] .page-service .contact-card .contact-icon {
    background-color: #6C4DFF !important;
}
[data-theme="dark"] .page-service .contact-card .contact-icon i {
    color: #3B2C66 !important; /* matches form background tone */
}

/* Ensure RDV button is violet with white text (both modes) */
.page-service .cta-button {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
}

.page-service .cta-button:hover {
    background: var(--gradient-primary-hover) !important;
}

/* ============================================
   SECTION 16B: BUTTON HOVER FIX (LIGHT MODE)
   ============================================ */

/* Ensure .btn-primary, .bg-primary buttons in light mode keep white text with scale/shadow effect only */
/* Target both :root and non-dark-theme contexts for maximum compatibility */
button.bg-primary:hover,
a.bg-primary:hover,
.btn-primary:hover,
:root button.bg-primary:hover,
:root a.bg-primary:hover,
:root .btn-primary:hover {
    background-color: var(--primary) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    color: #ffffff !important;
}

/* Form submit buttons in light mode (already have bg-primary or bg-secondary) */
button[type="submit"].bg-primary:hover,
button[type="submit"].bg-secondary:hover,
:root button[type="submit"].bg-primary:hover,
:root button[type="submit"].bg-secondary:hover {
    background-color: var(--primary) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    color: #ffffff !important;
}

button[type="submit"].bg-secondary:hover,
:root button[type="submit"].bg-secondary:hover {
    background-color: var(--secondary) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Don't apply these hover rules in dark mode - keep existing dark mode behavior */
[data-theme="dark"] button.bg-primary:hover,
[data-theme="dark"] a.bg-primary:hover {
    /* Let dark mode CSS handle this naturally */
    background-color: var(--primary-dark, #6d28d9) !important;
}

    /* ============================================
       SECTION 17: DARK/LIGHT TOGGLE UI
       ============================================ */

    .dark-mode-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 9999px;
        background: #f3f4f6;
        color: #6C4DFF;
        border: 1px solid rgba(0,0,0,0.06);
        transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    }

    .dark-mode-toggle:hover {
        box-shadow: 0 6px 18px rgba(108, 77, 255, 0.25);
        transform: translateY(-1px);
    }

    [data-theme="dark"] .dark-mode-toggle {
        background: #2c2c2c;
        color: #9C7CFF;
        border-color: rgba(255,255,255,0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    .dark-mode-toggle .sun-icon,
    .dark-mode-toggle .moon-icon {
        width: 22px;
        height: 22px;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .dark-mode-toggle.toggling .sun-icon,
    .dark-mode-toggle.toggling .moon-icon {
        transform: rotate(20deg) scale(1.05);
    }

    /* Tooltip (native via title, but visual helper if needed later) */

    /* ============================================
       SECTION 18: NAV ACTIVE INDICATOR
       ============================================ */

    .nav-link {
        position: relative;
        transition: color 0.3s ease;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 100%;
        height: 2px;
        background: var(--gradient-border);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .nav-link:hover::after {
        transform: scaleX(1);
    }

    .nav-link.active {
        color: #6C4DFF !important;
        font-weight: 600;
    }

    .nav-link.active::after {
        transform: scaleX(1);
    }

    [data-theme="dark"] .nav-link.active {
        color: #9C7CFF !important;
    }

/* ============================================
   SECTION 19: UNIFIED FOOTER COMPONENT
   ============================================ */

.site-footer {
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #1a0a2e 100%);
    color: #ffffff;
    padding: 3rem 0 1.5rem;
}

.site-footer h3,
.site-footer .footer-title {
    color: #ffffff !important;
    font-weight: 700;
    margin-bottom: 1rem;
}

.site-footer a {
    color: #ffffff !important;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: #9C7CFF !important;
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .site-footer .footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.site-footer .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer .footer-col ul li {
    margin-bottom: 0.5rem;
}

.site-footer .footer-link {
    display: inline-block;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    cursor: pointer;
    position: relative;
}

.site-footer .footer-link:hover {
    color: #9C7CFF !important;
    transform: translateX(4px);
}

.site-footer .footer-link::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: #9C7CFF;
    transition: width 0.3s ease;
}

.site-footer .footer-link:hover::before {
    width: 8px;
}

/* Style spécial pour le lien "Demande de devis" */
.site-footer .footer-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
    border-radius: 0.5rem;
    border: 1px solid rgba(234, 88, 12, 0.3);
    font-weight: 600;
    color: #f59e0b !important;
}

.site-footer .footer-cta:hover {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.3) 0%, rgba(245, 158, 11, 0.3) 100%);
    border-color: rgba(234, 88, 12, 0.5);
    color: #fbbf24 !important;
    transform: translateX(0) translateY(-2px);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}

.site-footer .footer-cta::before {
    display: none;
}

.site-footer .newsletter-form {
    display: flex;
    gap: 0.5rem;
}

.site-footer .newsletter-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 0.95rem;
}

.site-footer .newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.site-footer .newsletter-input:focus {
    outline: none;
    border-color: #9C7CFF;
    background: rgba(255, 255, 255, 0.15);
}

.site-footer .newsletter-button {
    padding: 0.75rem 1.5rem;
    background: var(--gradient-primary);
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.site-footer .newsletter-button:hover {
    background: var(--gradient-primary-hover);
    transform: translateY(-1px);
}

.site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* Social icons in footer */
.site-footer .social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.site-footer .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.site-footer .social-icon:hover {
    background: #9C7CFF;
    transform: translateY(-2px);
}

/* Light mode adjustments */
[data-theme="light"] .site-footer .social-icon {
    background: #9C7CFF; /* lighter violet background */
    color: #ffffff !important;
}

[data-theme="light"] .site-footer .social-icon:hover {
    background: #6C4DFF; /* darker violet on hover */
}

/* Liens footer-bottom (Mentions légales, Politique, CGV, Contact) - Violet très clair au hover */
.site-footer .footer-bottom a:hover {
    color: #c4b5fd !important; /* Violet très clair */
}

.site-footer .footer-link:hover,
.site-footer .footer-link:hover i {
    color: #c4b5fd !important; /* Violet très clair pour texte et icône */
}